From 4188e53045e2b3c6c7578a21b36e3eca1800617e Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 2 Apr 2025 20:06:48 +0000
Subject: [PATCH 1/4] chore: update dependency @spectrum-css/clearbutton to
 v7.2.0

---
 packages/clear-button/package.json            |  2 +-
 .../src/clear-button-overrides.css            | 82 +-----------------
 .../src/spectrum-clear-button.css             | 81 +++++++++++++-----
 .../styles/tokens-v2/system-theme-bridge.css  | 84 ++-----------------
 .../tokens/express/system-theme-bridge.css    | 84 ++-----------------
 .../tokens/spectrum/system-theme-bridge.css   | 84 ++-----------------
 yarn.lock                                     | 19 +++--
 7 files changed, 97 insertions(+), 339 deletions(-)

diff --git a/packages/clear-button/package.json b/packages/clear-button/package.json
index ad1de626248..bb156618a1f 100644
--- a/packages/clear-button/package.json
+++ b/packages/clear-button/package.json
@@ -52,7 +52,7 @@
         "@spectrum-web-components/base": "1.5.0"
     },
     "devDependencies": {
-        "@spectrum-css/clearbutton": "7.0.0-s2-foundations.16"
+        "@spectrum-css/clearbutton": "7.2.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
diff --git a/packages/clear-button/src/clear-button-overrides.css b/packages/clear-button/src/clear-button-overrides.css
index c7c533741ed..056c9a46260 100644
--- a/packages/clear-button/src/clear-button-overrides.css
+++ b/packages/clear-button/src/clear-button-overrides.css
@@ -24,90 +24,16 @@ governing permissions and limitations under the License.
     --spectrum-clear-button-background-color-key-focus: var(
         --system-clear-button-background-color-key-focus
     );
-    --spectrum-clear-button-height: var(--system-clear-button-height);
-    --spectrum-clear-button-width: var(--system-clear-button-width);
-    --spectrum-clear-button-padding: var(--system-clear-button-padding);
-    --spectrum-clear-button-icon-color: var(--system-clear-button-icon-color);
-    --spectrum-clear-button-icon-color-hover: var(
-        --system-clear-button-icon-color-hover
-    );
-    --spectrum-clear-button-icon-color-down: var(
-        --system-clear-button-icon-color-down
-    );
-    --spectrum-clear-button-icon-color-key-focus: var(
-        --system-clear-button-icon-color-key-focus
-    );
-}
-
-:host([size='s']) {
-    --spectrum-clear-button-height: var(--system-clear-button-size-s-height);
-    --spectrum-clear-button-width: var(--system-clear-button-size-s-width);
-}
-
-:host([size='l']) {
-    --spectrum-clear-button-height: var(--system-clear-button-size-l-height);
-    --spectrum-clear-button-width: var(--system-clear-button-size-l-width);
-}
-
-:host([size='xl']) {
-    --spectrum-clear-button-height: var(--system-clear-button-size-xl-height);
-    --spectrum-clear-button-width: var(--system-clear-button-size-xl-width);
-}
-
-:host .spectrum-ClearButton--quiet {
-    --spectrum-clear-button-background-color: var(
-        --system-clear-button-quiet-background-color
-    );
-    --spectrum-clear-button-background-color-hover: var(
-        --system-clear-button-quiet-background-color-hover
-    );
-    --spectrum-clear-button-background-color-down: var(
-        --system-clear-button-quiet-background-color-down
-    );
-    --spectrum-clear-button-background-color-key-focus: var(
-        --system-clear-button-quiet-background-color-key-focus
-    );
 }
 
-:host([variant='overBackground']) {
-    --spectrum-clear-button-icon-color: var(
-        --system-clear-button-over-background-icon-color
-    );
-    --spectrum-clear-button-icon-color-hover: var(
-        --system-clear-button-over-background-icon-color-hover
-    );
-    --spectrum-clear-button-icon-color-down: var(
-        --system-clear-button-over-background-icon-color-down
-    );
-    --spectrum-clear-button-icon-color-key-focus: var(
-        --system-clear-button-over-background-icon-color-key-focus
-    );
-    --spectrum-clear-button-background-color: var(
-        --system-clear-button-over-background-background-color
-    );
+:host .spectrum-ClearButton--staticWhite {
     --spectrum-clear-button-background-color-hover: var(
-        --system-clear-button-over-background-background-color-hover
+        --system-clear-button-static-white-background-color-hover
     );
     --spectrum-clear-button-background-color-down: var(
-        --system-clear-button-over-background-background-color-down
+        --system-clear-button-static-white-background-color-down
     );
     --spectrum-clear-button-background-color-key-focus: var(
-        --system-clear-button-over-background-background-color-key-focus
-    );
-}
-
-:host([disabled]),
-:host([disabled]) {
-    --spectrum-clear-button-icon-color: var(
-        --system-clear-button-disabled-icon-color
-    );
-    --spectrum-clear-button-icon-color-hover: var(
-        --system-clear-button-disabled-icon-color-hover
-    );
-    --spectrum-clear-button-icon-color-down: var(
-        --system-clear-button-disabled-icon-color-down
-    );
-    --spectrum-clear-button-background-color: var(
-        --system-clear-button-disabled-background-color
+        --system-clear-button-static-white-background-color-key-focus
     );
 }
diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css
index bfd6be23567..9428eb39f59 100644
--- a/packages/clear-button/src/spectrum-clear-button.css
+++ b/packages/clear-button/src/spectrum-clear-button.css
@@ -12,10 +12,15 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
+    --spectrum-clear-button-height: var(--spectrum-component-height-100);
+    --spectrum-clear-button-width: var(--spectrum-component-height-100);
+    --spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
+    --spectrum-clear-button-icon-color: var(--spectrum-neutral-content-color-default);
+    --spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
     block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
     inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
-    cursor: pointer;
-    background-color: initial;
     background-color: var(--mod-clear-button-background-color, transparent);
     padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding));
     color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color));
@@ -24,47 +29,84 @@ governing permissions and limitations under the License.
     margin: 0;
 }
 
+:host([size='s']) {
+    --spectrum-clear-button-height: var(--spectrum-component-height-75);
+    --spectrum-clear-button-width: var(--spectrum-component-height-75);
+}
+
+:host([size='l']) {
+    --spectrum-clear-button-height: var(--spectrum-component-height-200);
+    --spectrum-clear-button-width: var(--spectrum-component-height-200);
+}
+
+:host([size='xl']) {
+    --spectrum-clear-button-height: var(--spectrum-component-height-300);
+    --spectrum-clear-button-width: var(--spectrum-component-height-300);
+}
+
+:host .spectrum-ClearButton--quiet {
+    --mod-clear-button-background-color: transparent;
+    --mod-clear-button-background-color-hover: transparent;
+    --mod-clear-button-background-color-down: transparent;
+    --mod-clear-button-background-color-key-focus: transparent;
+}
+
+:host .spectrum-ClearButton--staticWhite {
+    --mod-clear-button-icon-color: var(--spectrum-white);
+    --mod-clear-button-icon-color-hover: var(--spectrum-white);
+    --mod-clear-button-icon-color-down: var(--spectrum-white);
+    --mod-clear-button-icon-color-key-focus: var(--spectrum-white);
+    --mod-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
+    --mod-clear-button-background-color: transparent;
+}
+
+:host([disabled]),
+:host([disabled]) {
+    --mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
+    --mod-clear-button-icon-color-hover: var(--spectrum-disabled-content-color);
+    --mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color);
+    --mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
+}
+
+:host:not(:disabled) {
+    cursor: pointer;
+}
+
 .icon {
     margin-block: 0;
     margin-inline: auto;
 }
 
 @media (hover: hover) {
-    :host(:hover) {
+    :host:not(:disabled):hover {
         color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover)));
     }
 
-    :host(:hover) .fill {
+    :host:not(:disabled):hover .fill {
         background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover));
     }
 }
 
-:host(:is(:active, [active])) {
+:host(:is(:active, [active])):not(:disabled) {
     color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down));
 }
 
-:host(:is(:active, [active])) .fill {
+:host(:is(:active, [active])):not(:disabled) .fill {
     background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down));
 }
 
-:host([focus-within]) .js-focus-within,
-:host(:focus-visible),
-:host:focus-within,
-:host([focus-within]) .js-focus-within {
+:host:not(:disabled):focus-visible,
+:host:not(:disabled):focus-within {
     color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus));
 }
 
-:host([focus-within]) .js-focus-within .fill,
-:host(:focus-visible) .fill,
-:host:focus-within .fill,
-:host([focus-within]) .js-focus-within .fill {
+:host:not(:disabled):focus-visible .fill,
+:host:not(:disabled):focus-within .fill {
     background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus));
 }
 
-:host([disabled]),
-:host([disabled]) {
-    --spectrum-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
-    --spectrum-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
+.spectrum-ClearButton-icon {
+    color: inherit;
 }
 
 .fill {
@@ -77,7 +119,8 @@ governing permissions and limitations under the License.
     display: flex;
 }
 
-:host([variant='overBackground']:focus-visible) {
+:host([variant='overBackground']:focus-visible),
+.spectrum-ClearButton--staticWhite:focus-visible {
     outline: none;
 }
 
diff --git a/tools/styles/tokens-v2/system-theme-bridge.css b/tools/styles/tokens-v2/system-theme-bridge.css
index 96254b86179..db881601829 100644
--- a/tools/styles/tokens-v2/system-theme-bridge.css
+++ b/tools/styles/tokens-v2/system-theme-bridge.css
@@ -413,87 +413,15 @@
     --system-clear-button-background-color-hover: transparent;
     --system-clear-button-background-color-down: transparent;
     --system-clear-button-background-color-key-focus: transparent;
-    --system-clear-button-height: var(--spectrum-component-height-100);
-    --system-clear-button-width: var(--spectrum-component-height-100);
-    --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
-    --system-clear-button-icon-color: var(
-        --spectrum-neutral-content-color-default
-    );
-    --system-clear-button-icon-color-hover: var(
-        --spectrum-neutral-content-color-hover
-    );
-    --system-clear-button-icon-color-down: var(
-        --spectrum-neutral-content-color-down
-    );
-    --system-clear-button-icon-color-key-focus: var(
-        --spectrum-neutral-content-color-key-focus
-    );
-    --system-clear-button-size-s-height: var(--spectrum-component-height-75);
-    --system-clear-button-size-s-width: var(--spectrum-component-height-75);
-    --system-clear-button-size-l-height: var(--spectrum-component-height-200);
-    --system-clear-button-size-l-width: var(--spectrum-component-height-200);
-    --system-clear-button-size-xl-height: var(--spectrum-component-height-300);
-    --system-clear-button-size-xl-width: var(--spectrum-component-height-300);
-    --system-clear-button-quiet-background-color: var(
-        --spectrum-clear-button-background-color-quiet,
-        transparent
-    );
-    --system-clear-button-quiet-background-color-hover: var(
-        --spectrum-clear-button-background-color-hover-quiet,
-        transparent
-    );
-    --system-clear-button-quiet-background-color-down: var(
-        --spectrum-clear-button-background-color-down-quiet,
-        transparent
-    );
-    --system-clear-button-quiet-background-color-key-focus: var(
-        --spectrum-clear-button-background-color-key-focus-quiet,
-        transparent
-    );
-    --system-clear-button-over-background-icon-color: var(
-        --spectrum-clear-button-icon-color-over-background,
-        var(--spectrum-white)
-    );
-    --system-clear-button-over-background-icon-color-hover: var(
-        --spectrum-clear-button-icon-color-hover-over-background,
-        var(--spectrum-white)
-    );
-    --system-clear-button-over-background-icon-color-down: var(
-        --spectrum-clear-button-icon-color-down-over-background,
-        var(--spectrum-white)
-    );
-    --system-clear-button-over-background-icon-color-key-focus: var(
-        --spectrum-clear-button-icon-color-key-focus-over-background,
-        var(--spectrum-white)
-    );
-    --system-clear-button-over-background-background-color: var(
-        --spectrum-clear-button-background-color-over-background,
-        transparent
-    );
-    --system-clear-button-over-background-background-color-hover: var(
-        --spectrum-clear-button-background-color-hover-over-background,
-        var(--spectrum-transparent-white-400)
-    );
-    --system-clear-button-over-background-background-color-down: var(
-        --spectrum-clear-button-background-color-hover-over-background,
-        var(--spectrum-transparent-white-500)
-    );
-    --system-clear-button-over-background-background-color-key-focus: var(
-        --spectrum-clear-button-background-color-hover-over-background,
-        var(--spectrum-transparent-white-400)
-    );
-    --system-clear-button-disabled-icon-color: var(
-        --spectrum-disabled-content-color
+    --system-clear-button-static-white-background-color-hover: var(
+        --spectrum-transparent-white-400
     );
-    --system-clear-button-disabled-icon-color-hover: var(
-        --spectrum-clear-button-icon-color-hover-disabled,
-        var(--spectrum-disabled-content-color)
+    --system-clear-button-static-white-background-color-down: var(
+        --spectrum-transparent-white-500
     );
-    --system-clear-button-disabled-icon-color-down: var(
-        --spectrum-clear-button-icon-color-down-disabled,
-        var(--spectrum-disabled-content-color)
+    --system-clear-button-static-white-background-color-key-focus: var(
+        --spectrum-transparent-white-400
     );
-    --system-clear-button-disabled-background-color: transparent;
     --system-close-button-background-color-default: transparent;
     --system-close-button-background-color-hover: var(--spectrum-gray-100);
     --system-close-button-background-color-down: var(--spectrum-gray-200);
diff --git a/tools/styles/tokens/express/system-theme-bridge.css b/tools/styles/tokens/express/system-theme-bridge.css
index da5ea704da0..26050a7edba 100644
--- a/tools/styles/tokens/express/system-theme-bridge.css
+++ b/tools/styles/tokens/express/system-theme-bridge.css
@@ -420,87 +420,15 @@
     --system-clear-button-background-color-hover: var(--spectrum-gray-300);
     --system-clear-button-background-color-down: var(--spectrum-gray-400);
     --system-clear-button-background-color-key-focus: var(--spectrum-gray-300);
-    --system-clear-button-height: var(--spectrum-component-height-100);
-    --system-clear-button-width: var(--spectrum-component-height-100);
-    --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
-    --system-clear-button-icon-color: var(
-        --spectrum-neutral-content-color-default
-    );
-    --system-clear-button-icon-color-hover: var(
-        --spectrum-neutral-content-color-hover
-    );
-    --system-clear-button-icon-color-down: var(
-        --spectrum-neutral-content-color-down
-    );
-    --system-clear-button-icon-color-key-focus: var(
-        --spectrum-neutral-content-color-key-focus
-    );
-    --system-clear-button-size-s-height: var(--spectrum-component-height-75);
-    --system-clear-button-size-s-width: var(--spectrum-component-height-75);
-    --system-clear-button-size-l-height: var(--spectrum-component-height-200);
-    --system-clear-button-size-l-width: var(--spectrum-component-height-200);
-    --system-clear-button-size-xl-height: var(--spectrum-component-height-300);
-    --system-clear-button-size-xl-width: var(--spectrum-component-height-300);
-    --system-clear-button-quiet-background-color: var(
-        --spectrum-clear-button-background-color-quiet,
-        transparent
-    );
-    --system-clear-button-quiet-background-color-hover: var(
-        --spectrum-clear-button-background-color-hover-quiet,
-        transparent
-    );
-    --system-clear-button-quiet-background-color-down: var(
-        --spectrum-clear-button-background-color-down-quiet,
-        transparent
-    );
-    --system-clear-button-quiet-background-color-key-focus: var(
-        --spectrum-clear-button-background-color-key-focus-quiet,
-        transparent
-    );
-    --system-clear-button-over-background-icon-color: var(
-        --spectrum-clear-button-icon-color-over-background,
-        var(--spectrum-white)
-    );
-    --system-clear-button-over-background-icon-color-hover: var(
-        --spectrum-clear-button-icon-color-hover-over-background,
-        var(--spectrum-white)
-    );
-    --system-clear-button-over-background-icon-color-down: var(
-        --spectrum-clear-button-icon-color-down-over-background,
-        var(--spectrum-white)
-    );
-    --system-clear-button-over-background-icon-color-key-focus: var(
-        --spectrum-clear-button-icon-color-key-focus-over-background,
-        var(--spectrum-white)
-    );
-    --system-clear-button-over-background-background-color: var(
-        --spectrum-clear-button-background-color-over-background,
-        transparent
-    );
-    --system-clear-button-over-background-background-color-hover: var(
-        --spectrum-clear-button-background-color-hover-over-background,
-        var(--spectrum-transparent-white-300)
-    );
-    --system-clear-button-over-background-background-color-down: var(
-        --spectrum-clear-button-background-color-hover-over-background,
-        var(--spectrum-transparent-white-400)
-    );
-    --system-clear-button-over-background-background-color-key-focus: var(
-        --spectrum-clear-button-background-color-hover-over-background,
-        var(--spectrum-transparent-white-300)
-    );
-    --system-clear-button-disabled-icon-color: var(
-        --spectrum-disabled-content-color
+    --system-clear-button-static-white-background-color-hover: var(
+        --spectrum-transparent-white-300
     );
-    --system-clear-button-disabled-icon-color-hover: var(
-        --spectrum-clear-button-icon-color-hover-disabled,
-        var(--spectrum-disabled-content-color)
+    --system-clear-button-static-white-background-color-down: var(
+        --spectrum-transparent-white-400
     );
-    --system-clear-button-disabled-icon-color-down: var(
-        --spectrum-clear-button-icon-color-down-disabled,
-        var(--spectrum-disabled-content-color)
+    --system-clear-button-static-white-background-color-key-focus: var(
+        --spectrum-transparent-white-300
     );
-    --system-clear-button-disabled-background-color: transparent;
     --system-close-button-background-color-default: transparent;
     --system-close-button-background-color-hover: var(--spectrum-gray-300);
     --system-close-button-background-color-down: var(--spectrum-gray-400);
diff --git a/tools/styles/tokens/spectrum/system-theme-bridge.css b/tools/styles/tokens/spectrum/system-theme-bridge.css
index 6f3341534a8..fd81240f78e 100644
--- a/tools/styles/tokens/spectrum/system-theme-bridge.css
+++ b/tools/styles/tokens/spectrum/system-theme-bridge.css
@@ -426,87 +426,15 @@
     --system-clear-button-background-color-hover: transparent;
     --system-clear-button-background-color-down: transparent;
     --system-clear-button-background-color-key-focus: transparent;
-    --system-clear-button-height: var(--spectrum-component-height-100);
-    --system-clear-button-width: var(--spectrum-component-height-100);
-    --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
-    --system-clear-button-icon-color: var(
-        --spectrum-neutral-content-color-default
-    );
-    --system-clear-button-icon-color-hover: var(
-        --spectrum-neutral-content-color-hover
-    );
-    --system-clear-button-icon-color-down: var(
-        --spectrum-neutral-content-color-down
-    );
-    --system-clear-button-icon-color-key-focus: var(
-        --spectrum-neutral-content-color-key-focus
-    );
-    --system-clear-button-size-s-height: var(--spectrum-component-height-75);
-    --system-clear-button-size-s-width: var(--spectrum-component-height-75);
-    --system-clear-button-size-l-height: var(--spectrum-component-height-200);
-    --system-clear-button-size-l-width: var(--spectrum-component-height-200);
-    --system-clear-button-size-xl-height: var(--spectrum-component-height-300);
-    --system-clear-button-size-xl-width: var(--spectrum-component-height-300);
-    --system-clear-button-quiet-background-color: var(
-        --spectrum-clear-button-background-color-quiet,
-        transparent
-    );
-    --system-clear-button-quiet-background-color-hover: var(
-        --spectrum-clear-button-background-color-hover-quiet,
-        transparent
-    );
-    --system-clear-button-quiet-background-color-down: var(
-        --spectrum-clear-button-background-color-down-quiet,
-        transparent
-    );
-    --system-clear-button-quiet-background-color-key-focus: var(
-        --spectrum-clear-button-background-color-key-focus-quiet,
-        transparent
-    );
-    --system-clear-button-over-background-icon-color: var(
-        --spectrum-clear-button-icon-color-over-background,
-        var(--spectrum-white)
-    );
-    --system-clear-button-over-background-icon-color-hover: var(
-        --spectrum-clear-button-icon-color-hover-over-background,
-        var(--spectrum-white)
-    );
-    --system-clear-button-over-background-icon-color-down: var(
-        --spectrum-clear-button-icon-color-down-over-background,
-        var(--spectrum-white)
-    );
-    --system-clear-button-over-background-icon-color-key-focus: var(
-        --spectrum-clear-button-icon-color-key-focus-over-background,
-        var(--spectrum-white)
-    );
-    --system-clear-button-over-background-background-color: var(
-        --spectrum-clear-button-background-color-over-background,
-        transparent
-    );
-    --system-clear-button-over-background-background-color-hover: var(
-        --spectrum-clear-button-background-color-hover-over-background,
-        var(--spectrum-transparent-white-300)
-    );
-    --system-clear-button-over-background-background-color-down: var(
-        --spectrum-clear-button-background-color-hover-over-background,
-        var(--spectrum-transparent-white-400)
-    );
-    --system-clear-button-over-background-background-color-key-focus: var(
-        --spectrum-clear-button-background-color-hover-over-background,
-        var(--spectrum-transparent-white-300)
-    );
-    --system-clear-button-disabled-icon-color: var(
-        --spectrum-disabled-content-color
+    --system-clear-button-static-white-background-color-hover: var(
+        --spectrum-transparent-white-300
     );
-    --system-clear-button-disabled-icon-color-hover: var(
-        --spectrum-clear-button-icon-color-hover-disabled,
-        var(--spectrum-disabled-content-color)
+    --system-clear-button-static-white-background-color-down: var(
+        --spectrum-transparent-white-400
     );
-    --system-clear-button-disabled-icon-color-down: var(
-        --spectrum-clear-button-icon-color-down-disabled,
-        var(--spectrum-disabled-content-color)
+    --system-clear-button-static-white-background-color-key-focus: var(
+        --spectrum-transparent-white-300
     );
-    --system-clear-button-disabled-background-color: transparent;
     --system-close-button-background-color-default: transparent;
     --system-close-button-background-color-hover: var(--spectrum-gray-200);
     --system-close-button-background-color-down: var(--spectrum-gray-300);
diff --git a/yarn.lock b/yarn.lock
index df64c00d835..5a19952dad8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7484,13 +7484,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@spectrum-css/clearbutton@npm:7.0.0-s2-foundations.16":
-  version: 7.0.0-s2-foundations.16
-  resolution: "@spectrum-css/clearbutton@npm:7.0.0-s2-foundations.16"
+"@spectrum-css/clearbutton@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@spectrum-css/clearbutton@npm:7.2.0"
   peerDependencies:
-    "@spectrum-css/icon": ">=7"
-    "@spectrum-css/tokens": ">=14"
-  checksum: 10c0/6434ffd030908888f5b2898696fd20aba31c5eb9a8c41bb0426bc133990f80f4b326fd1186b77b7bbbb3ca7720b1eb801581412be9500063e5729978f542c1d9
+    "@spectrum-css/icon": ">=9.0.0 <10.0.0"
+    "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
+  peerDependenciesMeta:
+    "@spectrum-css/icon":
+      optional: true
+    "@spectrum-css/tokens":
+      optional: true
+  checksum: 10c0/10b0bd2a6c3a54ce55b99c3cd7287a9af1118822a81b0a9619d7e6cc7521032f9a6dcd9a6f697464645d9db9f7547e6a67124fa762dc66c7317130e8458b965b
   languageName: node
   linkType: hard
 
@@ -8640,7 +8645,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-web-components/clear-button@workspace:packages/clear-button"
   dependencies:
-    "@spectrum-css/clearbutton": "npm:7.0.0-s2-foundations.16"
+    "@spectrum-css/clearbutton": "npm:7.2.0"
     "@spectrum-web-components/base": "npm:1.5.0"
   languageName: unknown
   linkType: soft

From e1cc07dd18c6a9861fe59c0b9fce5f4bbe520db2 Mon Sep 17 00:00:00 2001
From: castastrophe <castastrophe@users.noreply.github.com>
Date: Wed, 2 Apr 2025 17:39:50 -0400
Subject: [PATCH 2/4] fix(clear-button,styles): style updates from latest
 release

---
 .changeset/hot-cups-report.md                 |  6 ++
 packages/button/src/ClearButton.ts            |  9 ++-
 .../src/clear-button-overrides.css            |  2 +-
 .../src/spectrum-clear-button.css             | 13 ++--
 packages/clear-button/src/spectrum-config.js  | 71 ++++++++++++++-----
 5 files changed, 76 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/hot-cups-report.md

diff --git a/.changeset/hot-cups-report.md b/.changeset/hot-cups-report.md
new file mode 100644
index 00000000000..c07c4810f67
--- /dev/null
+++ b/.changeset/hot-cups-report.md
@@ -0,0 +1,6 @@
+---
+'@spectrum-web-components/clear-button': patch
+'@spectrum-web-components/styles': patch
+---
+
+More details forthcoming
diff --git a/packages/button/src/ClearButton.ts b/packages/button/src/ClearButton.ts
index ddbfe8a1819..dca414a812e 100644
--- a/packages/button/src/ClearButton.ts
+++ b/packages/button/src/ClearButton.ts
@@ -66,9 +66,16 @@ export class ClearButton extends SizedMixin(StyledButton, {
 
     /**
      * The visual variant to apply to this button.
+     * @deprecated Use `static-color='white'` instead.
      */
     @property({ reflect: true })
-    public variant: 'overBackground' | '' = '';
+    public variant: 'overBackground' | undefined;
+
+    /**
+     * The visual variant to apply to this button.
+     */
+    @property({ reflect: true })
+    public staticColor: 'white' | undefined;
 
     protected override get buttonContent(): TemplateResult[] {
         return [crossIcon[this.size]()];
diff --git a/packages/clear-button/src/clear-button-overrides.css b/packages/clear-button/src/clear-button-overrides.css
index 056c9a46260..d8b47f8a3da 100644
--- a/packages/clear-button/src/clear-button-overrides.css
+++ b/packages/clear-button/src/clear-button-overrides.css
@@ -26,7 +26,7 @@ governing permissions and limitations under the License.
     );
 }
 
-:host .spectrum-ClearButton--staticWhite {
+:host([static-color='white']) {
     --spectrum-clear-button-background-color-hover: var(
         --system-clear-button-static-white-background-color-hover
     );
diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css
index 9428eb39f59..3165f13b154 100644
--- a/packages/clear-button/src/spectrum-clear-button.css
+++ b/packages/clear-button/src/spectrum-clear-button.css
@@ -44,14 +44,14 @@ governing permissions and limitations under the License.
     --spectrum-clear-button-width: var(--spectrum-component-height-300);
 }
 
-:host .spectrum-ClearButton--quiet {
+:host([quiet]) {
     --mod-clear-button-background-color: transparent;
     --mod-clear-button-background-color-hover: transparent;
     --mod-clear-button-background-color-down: transparent;
     --mod-clear-button-background-color-key-focus: transparent;
 }
 
-:host .spectrum-ClearButton--staticWhite {
+:host([static-color='white']) {
     --mod-clear-button-icon-color: var(--spectrum-white);
     --mod-clear-button-icon-color-hover: var(--spectrum-white);
     --mod-clear-button-icon-color-down: var(--spectrum-white);
@@ -60,7 +60,6 @@ governing permissions and limitations under the License.
     --mod-clear-button-background-color: transparent;
 }
 
-:host([disabled]),
 :host([disabled]) {
     --mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
     --mod-clear-button-icon-color-hover: var(--spectrum-disabled-content-color);
@@ -78,11 +77,11 @@ governing permissions and limitations under the License.
 }
 
 @media (hover: hover) {
-    :host:not(:disabled):hover {
+    :host(:hover):not(:disabled) {
         color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover)));
     }
 
-    :host:not(:disabled):hover .fill {
+    :host(:hover):not(:disabled) .fill {
         background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover));
     }
 }
@@ -105,7 +104,7 @@ governing permissions and limitations under the License.
     background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus));
 }
 
-.spectrum-ClearButton-icon {
+.icon {
     color: inherit;
 }
 
@@ -120,7 +119,7 @@ governing permissions and limitations under the License.
 }
 
 :host([variant='overBackground']:focus-visible),
-.spectrum-ClearButton--staticWhite:focus-visible {
+:host([static-color='white']:focus-visible) {
     outline: none;
 }
 
diff --git a/packages/clear-button/src/spectrum-config.js b/packages/clear-button/src/spectrum-config.js
index 26cbd0dc3ec..a17aa4b6819 100644
--- a/packages/clear-button/src/spectrum-config.js
+++ b/packages/clear-button/src/spectrum-config.js
@@ -11,10 +11,20 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { converterFor } from '../../../tasks/process-spectrum-utils.js';
+import {
+    builder,
+    converterFor,
+} from '../../../tasks/process-spectrum-utils.js';
 
 const converter = converterFor('spectrum-ClearButton');
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+const notDisabled = (type = 'pseudoClass') => ({
+    type: 'pseudo-class',
+    kind: 'not',
+    selectors: builder[type]?.('disabled'),
+});
+
 /**
  * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
  */
@@ -24,13 +34,15 @@ const config = {
             inPackage: '@spectrum-css/clearbutton',
             outPackage: 'clear-button',
             fileName: 'clear-button',
+            excludeByComponents: [
+                // is-disabled is a duplicate of the :disabled pseudo-class
+                builder.class('is-disabled'),
+            ],
             components: [
                 converter.classToHost(),
+                converter.classToAttribute('spectrum-ClearButton--quiet'),
                 {
-                    find: {
-                        type: 'pseudo-class',
-                        kind: 'active',
-                    },
+                    find: builder.pseudoClass('active'),
                     replace: {
                         type: 'pseudo-class',
                         kind: 'is',
@@ -52,14 +64,12 @@ const config = {
                     hoist: true,
                 },
                 converter.pseudoToAttribute('disabled', 'disabled'),
-                converter.classToAttribute('is-disabled', 'disabled'),
                 ...converter.enumerateAttributes(
                     [
-                        ['spectrum-ClearButton--cta'],
-                        ['spectrum-ClearButton--primary'],
-                        ['spectrum-ClearButton--secondary'],
-                        ['spectrum-ClearButton--overBackground'],
-                        ['spectrum-ClearButton--warning', 'negative'],
+                        [
+                            'spectrum-ClearButton--overBackground',
+                            'overBackground',
+                        ],
                     ],
                     'variant'
                 ),
@@ -75,12 +85,41 @@ const config = {
                 ),
                 converter.classToClass('spectrum-Icon', 'icon'),
                 converter.classToClass('spectrum-ClearButton-fill'),
-            ],
-            excludeByComponents: [
+                converter.classToClass('spectrum-ClearButton-icon'),
+                ...converter.enumerateAttributes(
+                    [['spectrum-ClearButton--staticWhite', 'white']],
+                    'static-color'
+                ),
+                {
+                    find: builder.pseudoClass('hover'),
+                    replace: builder.pseudoClass('hover'),
+                    hoist: true,
+                },
                 {
-                    type: 'pseudo-element',
-                    kind: 'custom',
-                    name: '-moz-focus-inner',
+                    find: notDisabled(),
+                    replace: notDisabled('attribute'),
+                    hoist: true,
+                },
+                {
+                    find: [notDisabled(), builder.pseudoClass('focus-visible')],
+                    replace: [
+                        builder.pseudoClass('focus-visible'),
+                        notDisabled('attribute'),
+                    ],
+                    hoist: true,
+                },
+                {
+                    find: [notDisabled(), builder.pseudoClass('focus-within')],
+                    replace: [
+                        builder.attribute('focus-within'),
+                        notDisabled('attribute'),
+                    ],
+                    hoist: true,
+                },
+                {
+                    find: notDisabled(),
+                    replace: notDisabled('attribute'),
+                    hoist: true,
                 },
             ],
         },

From 86eb26554a30cfc3ee99fb1e9316de2aa81083da Mon Sep 17 00:00:00 2001
From: castastrophe <castastrophe@users.noreply.github.com>
Date: Wed, 23 Apr 2025 13:13:47 -0400
Subject: [PATCH 3/4] test(button): update clear-button dev mode test

---
 packages/button/src/ClearButton.ts        | 31 ++++++++++-
 packages/button/test/clear-button.test.ts | 68 +++++++++++++++--------
 2 files changed, 74 insertions(+), 25 deletions(-)

diff --git a/packages/button/src/ClearButton.ts b/packages/button/src/ClearButton.ts
index dca414a812e..655773b7ad2 100644
--- a/packages/button/src/ClearButton.ts
+++ b/packages/button/src/ClearButton.ts
@@ -69,7 +69,36 @@ export class ClearButton extends SizedMixin(StyledButton, {
      * @deprecated Use `static-color='white'` instead.
      */
     @property({ reflect: true })
-    public variant: 'overBackground' | undefined;
+    public set variant(variant: 'overBackground' | undefined) {
+        const oldValue = this.variant;
+        if (variant !== 'overBackground') {
+            this.removeAttribute('variant');
+            this._variant = undefined;
+            return;
+        }
+
+        this.setAttribute('variant', variant);
+        this._variant = variant;
+        // Set staticColor to white to reflect the updated and expected attribute
+        this.staticColor = 'white';
+
+        if (window.__swc.DEBUG) {
+            window.__swc.warn(
+                this,
+                'The overBackground variant is deprecated. Please use `static-color="white"` instead.',
+                'https://opensource.adobe.com/spectrum-web-components/components/clear-button/',
+                { level: 'deprecation' }
+            );
+        }
+
+        this.requestUpdate('variant', oldValue);
+    }
+
+    public get variant(): 'overBackground' | undefined {
+        return this._variant;
+    }
+
+    private _variant: 'overBackground' | undefined;
 
     /**
      * The visual variant to apply to this button.
diff --git a/packages/button/test/clear-button.test.ts b/packages/button/test/clear-button.test.ts
index 08d2d612256..cbc5b4d4033 100644
--- a/packages/button/test/clear-button.test.ts
+++ b/packages/button/test/clear-button.test.ts
@@ -12,40 +12,60 @@ governing permissions and limitations under the License.
 
 import '@spectrum-web-components/button/sp-clear-button.js';
 import { ClearButton } from '@spectrum-web-components/button';
+import { ElementSize } from '@spectrum-web-components/base';
 import { expect, fixture, html } from '@open-wc/testing';
 import { testForLitDevWarnings } from '../../../test/testing-helpers';
 
 describe('Clear Button', () => {
     testForLitDevWarnings(
         async () =>
-            await fixture<ClearButton>(
-                html`
-                    <sp-clear-button size="m" label="Clear"></sp-clear-button>
-                `
-            )
+            await fixture<ClearButton>(html`
+                <sp-clear-button size="m" label="Clear"></sp-clear-button>
+            `)
     );
-    (
-        ['s', 'm', 'l', 'xl'] as (
-            | 'xxs'
-            | 'xs'
-            | 's'
-            | 'm'
-            | 'l'
-            | 'xl'
-            | 'xxl'
-        )[]
-    ).map((size) => {
+    (['s', 'm', 'l', 'xl'] as ElementSize[]).map((size) => {
         it(`loads - ${size}`, async () => {
-            const el = await fixture<ClearButton>(
-                html`
-                    <sp-clear-button
-                        size=${size}
-                        label="Clear"
-                    ></sp-clear-button>
-                `
-            );
+            const el = await fixture<ClearButton>(html`
+                <sp-clear-button size=${size} label="Clear"></sp-clear-button>
+            `);
 
             await expect(el).to.be.accessible();
         });
     });
+
+    describe('dev mode', () => {
+        let consoleStub: SinonStub;
+        before(() => {
+            window.__swc.verbose = true;
+            consoleStub = stub(console, 'warn');
+        });
+
+        after(() => {
+            window.__swc.verbose = false;
+            consoleStub.restore();
+        });
+
+        it('should log dev warning when overBackground variant is used', async () => {
+            const el = await fixture<ClearButton>(html`
+                <sp-clear-button
+                    label="Clear"
+                    variant="overBackground"
+                ></sp-clear-button>
+            `);
+
+            await elementUpdated(el);
+
+            const warning = consoleStub.getCall(0).args.at(0);
+            const expectedContent =
+                'The overBackground variant is deprecated. Please use `static-color="white"` instead.';
+
+            expect(consoleStub).to.be.calledOnce;
+            expect(warning.includes(expectedContent)).to.be.true;
+
+            // Check that the staticColor is set to white
+            expect(el.staticColor).to.equal('white');
+            expect(el.hasAttribute('static-color')).to.be.true;
+            expect(el.getAttribute('static-color')).to.equal('white');
+        });
+    });
 });

From c4432c9e05bb03b97508675832c46f4f52c1e0c8 Mon Sep 17 00:00:00 2001
From: castastrophe <castastrophe@users.noreply.github.com>
Date: Wed, 23 Apr 2025 13:26:50 -0400
Subject: [PATCH 4/4] docs(button): update clear-button details

---
 .changeset/hot-cups-report.md             | 13 ++++++++++++-
 packages/button/clear-button.md           | 16 ++++++++++++++++
 packages/button/src/ClearButton.ts        |  3 +++
 packages/button/test/clear-button.test.ts |  3 ++-
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/.changeset/hot-cups-report.md b/.changeset/hot-cups-report.md
index c07c4810f67..c0aead8e806 100644
--- a/.changeset/hot-cups-report.md
+++ b/.changeset/hot-cups-report.md
@@ -1,6 +1,17 @@
 ---
+'@spectrum-web-components/button': patch
 '@spectrum-web-components/clear-button': patch
 '@spectrum-web-components/styles': patch
 ---
 
-More details forthcoming
+Clear button styles have been updated to the latest Spectrum CSS version of the clear button.
+
+As the updated styles now offer additional styling options, we have added the following API to the clear button:
+
+-   `quiet` - when set to true, the button will be rendered as a quiet button. This is useful for cases where you want to use the clear button in a more subtle way.
+-   `disabled` - when set to true, the button will be rendered as a disabled button.
+-   `static-color` - currently this only supports the `white` context color. This is useful for cases where the button appears on a dark background texture. This is a replacement for the previously used `variant="overBackground"` attribute which is deprecated.
+
+### Deprecation
+
+The `variant="overBackground"` attribute is deprecated; please use the new `static-color="white"` attribute instead. When this property is used in the component, a deprecation warning will be shown in the console when in debug mode. The `variant` attribute will be removed in a future release.
diff --git a/packages/button/clear-button.md b/packages/button/clear-button.md
index 54d86a9d0e8..4a8ec9fa3bb 100644
--- a/packages/button/clear-button.md
+++ b/packages/button/clear-button.md
@@ -94,6 +94,22 @@ The label for an `<sp-clear-button>` element can be set via it's default slot or
 </sp-tab-panel>
 </sp-tabs>
 
+#### Quiet
+
+The `quiet` attribute will render the `<sp-clear-button>` as a quiet button. This is useful for cases where you want to use the clear button in a more subtle way.
+
+```html
+<sp-clear-button quiet label="Clear content"></sp-clear-button>
+```
+
+#### Static color
+
+The `static-color` attribute will render the `<sp-clear-button>` with a static color. This is useful for cases where the button appears on a dark background texture. This is a replacement for the previously used `variant="overBackground"` attribute which is deprecated.
+
+```html
+<sp-clear-button static-color="white" label="Clear content"></sp-clear-button>
+```
+
 ### States
 
 In addition to the variant, the `<sp-clear-button>` elements supports a disabled state, which can be applied by adding the attribute `disabled`.
diff --git a/packages/button/src/ClearButton.ts b/packages/button/src/ClearButton.ts
index 655773b7ad2..01d80d1ae18 100644
--- a/packages/button/src/ClearButton.ts
+++ b/packages/button/src/ClearButton.ts
@@ -64,6 +64,9 @@ export class ClearButton extends SizedMixin(StyledButton, {
         return [...super.styles, buttonStyles, crossMediumStyles];
     }
 
+    @property({ type: Boolean, reflect: true })
+    public quiet = false;
+
     /**
      * The visual variant to apply to this button.
      * @deprecated Use `static-color='white'` instead.
diff --git a/packages/button/test/clear-button.test.ts b/packages/button/test/clear-button.test.ts
index cbc5b4d4033..c7e5adc4722 100644
--- a/packages/button/test/clear-button.test.ts
+++ b/packages/button/test/clear-button.test.ts
@@ -13,8 +13,9 @@ governing permissions and limitations under the License.
 import '@spectrum-web-components/button/sp-clear-button.js';
 import { ClearButton } from '@spectrum-web-components/button';
 import { ElementSize } from '@spectrum-web-components/base';
-import { expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { testForLitDevWarnings } from '../../../test/testing-helpers';
+import { SinonStub, stub } from 'sinon';
 
 describe('Clear Button', () => {
     testForLitDevWarnings(