chore: update dependency @spectrum-css/clearbutton to v7.2.0

.changeset/hot-cups-report.md

@@ -0,0 +1,6 @@
+---
+'@spectrum-web-components/clear-button': patch
+'@spectrum-web-components/styles': patch
+---
+
+More details forthcoming

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]()];

packages/clear-button/package.json

@@ -52,7 +52,7 @@
         "@spectrum-web-components/base": "1.4.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",

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([static-color='white']) {
     --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
     );
 }

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,83 @@ 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([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([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);
+    --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]) {
+    --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(: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(:hover) .fill {
+    :host(:hover):not(:disabled) .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);
+.icon {
+    color: inherit;
 }
 
 .fill {
@@ -77,7 +118,8 @@ governing permissions and limitations under the License.
     display: flex;
 }
 
-:host([variant='overBackground']:focus-visible) {
+:host([variant='overBackground']:focus-visible),
+:host([static-color='white']:focus-visible) {
     outline: none;
 }
 

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,
                 },
             ],
         },