@spectrum-web-components/action-button 0.7.2 → 0.7.3-express.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/action-button",
-    "version": "0.7.2",
+    "version": "0.7.3-express.0+5d9e2a2ca",
     "publishConfig": {
         "access": "public"
     },
@@ -44,19 +44,19 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.5.1",
-        "@spectrum-web-components/button": "^0.16.2",
-        "@spectrum-web-components/icon": "^0.11.1",
-        "@spectrum-web-components/icons-ui": "^0.8.1",
+        "@spectrum-web-components/base": "^0.5.2-express.41+5d9e2a2ca",
+        "@spectrum-web-components/button": "^0.16.3-express.0+5d9e2a2ca",
+        "@spectrum-web-components/icon": "^0.11.2-express.41+5d9e2a2ca",
+        "@spectrum-web-components/icons-ui": "^0.8.2-express.41+5d9e2a2ca",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/actionbutton": "^1.0.10"
+        "@spectrum-css/actionbutton": "latest"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "5ad16bd185710525afa48bd76099cb0ebde4c4cb"
+    "gitHead": "5d9e2a2ca93deff51e4b2c7b8354f1127009a4e3"
 }

package/src/ActionButton.d.ts

@@ -35,6 +35,7 @@ export declare class ActionButton extends ActionButton_base {
      * should be used when `selected === false`
      */
     toggles: boolean;
+    variant?: 'white' | 'black';
     get value(): string;
     set value(value: string);
     private _value;

package/src/ActionButton.js

@@ -194,6 +194,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ActionButton.prototype, "toggles", void 0);
+__decorate([
+    property({ reflect: true })
+], ActionButton.prototype, "variant", void 0);
 __decorate([
     property({ type: String })
 ], ActionButton.prototype, "value", null);

package/src/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","sourceRoot":"","sources":["ActionButton.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    DefaultElementSize,\n    html,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ButtonBase } from '@spectrum-web-components/button';\nimport buttonStyles from './action-button.css.js';\nimport cornerTriangleStyles from '@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js';\n\nconst holdAffordanceClass = {\n    s: 'spectrum-UIIcon-CornerTriangle75',\n    m: 'spectrum-UIIcon-CornerTriangle100',\n    l: 'spectrum-UIIcon-CornerTriangle200',\n    xl: 'spectrum-UIIcon-CornerTriangle300',\n};\n\nconst LONGPRESS_DURATION = 300;\nlet LONGPRESS_TIMEOUT: ReturnType<typeof setTimeout>;\n\nexport type LongpressEvent = {\n    source: 'pointer' | 'keyboard';\n};\n\n/**\n * @element sp-action-button\n *\n * @slot - text label of the Action Button\n * @slot icon - The icon to use for Action Button\n * @fires change - Announces a change in the `selected` property of an action button\n * @fires longpress - Synthesizes a \"longpress\" interaction that signifies a\n * `pointerdown` event that is >=300ms or a keyboard event wher code is `Space` or code is `ArrowDown`\n * while `altKey===true`.\n */\nexport class ActionButton extends SizedMixin(ButtonBase) {\n    public static get styles(): CSSResultArray {\n        return [buttonStyles, cornerTriangleStyles];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    public emphasized = false;\n\n    @property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })\n    public holdAffordance = false;\n\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    @property({ reflect: true })\n    public role = 'button';\n\n    /**\n     * Whether an Action Button with `role='button'`\n     * should also be `aria-pressed='true'`\n     */\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    /**\n     * Whether to automatically manage the `selected`\n     * attribute on interaction and whether `aria-pressed=\"false\"`\n     * should be used when `selected === false`\n     */\n    @property({ type: Boolean, reflect: true })\n    public toggles = false;\n\n    @property({ type: String })\n    public get value(): string {\n        return this._value || this.itemText;\n    }\n    public set value(value: string) {\n        if (value === this._value) {\n            return;\n        }\n        this._value = value || '';\n        if (this._value) {\n            this.setAttribute('value', this._value);\n        } else {\n            this.removeAttribute('value');\n        }\n    }\n    private _value = '';\n\n    /**\n     * @private\n     */\n    public get itemText(): string {\n        return (this.textContent || /* c8 ignore next */ '').trim();\n    }\n\n    constructor() {\n        super();\n        this.addEventListener('click', this.onClick);\n        this.addEventListener('pointerdown', this.onPointerdown);\n    }\n\n    private onClick = (): void => {\n        if (!this.toggles) {\n            return;\n        }\n        this.selected = !this.selected;\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n            })\n        );\n        if (!applyDefault) {\n            this.selected = !this.selected;\n        }\n    };\n\n    private onPointerdown(): void {\n        this.addEventListener('pointerup', this.onPointerup);\n        this.addEventListener('pointercancel', this.onPointerup);\n        LONGPRESS_TIMEOUT = setTimeout(() => {\n            this.dispatchEvent(\n                new CustomEvent<LongpressEvent>('longpress', {\n                    bubbles: true,\n                    composed: true,\n                    detail: {\n                        source: 'pointer',\n                    },\n                })\n            );\n        }, LONGPRESS_DURATION);\n    }\n\n    private onPointerup(): void {\n        clearTimeout(LONGPRESS_TIMEOUT);\n        this.removeEventListener('pointerup', this.onPointerup);\n        this.removeEventListener('pointercancel', this.onPointerup);\n    }\n\n    /**\n     * @private\n     */\n    protected handleKeydown(event: KeyboardEvent): void {\n        if (!this.holdAffordance) {\n            return super.handleKeydown(event);\n        }\n        const { code, altKey } = event;\n        if (code === 'Space' || (altKey && code === 'ArrowDown')) {\n            event.preventDefault();\n            if (code === 'ArrowDown') {\n                event.stopPropagation();\n                event.stopImmediatePropagation();\n            }\n            this.addEventListener('keyup', this.handleKeyup);\n            this.active = true;\n        }\n    }\n\n    protected handleKeyup(event: KeyboardEvent): void {\n        if (!this.holdAffordance) {\n            return super.handleKeyup(event);\n        }\n        const { code, altKey } = event;\n        if (code === 'Space' || (altKey && code === 'ArrowDown')) {\n            event.stopPropagation();\n            this.dispatchEvent(\n                new CustomEvent<LongpressEvent>('longpress', {\n                    bubbles: true,\n                    composed: true,\n                    detail: {\n                        source: 'keyboard',\n                    },\n                })\n            );\n            this.active = false;\n        }\n    }\n\n    protected get buttonContent(): TemplateResult[] {\n        const buttonContent = super.buttonContent;\n        if (this.holdAffordance) {\n            buttonContent.unshift(html`\n                <sp-icon-corner-triangle300\n                    id=\"hold-affordance\"\n                    class=\"${holdAffordanceClass[\n                        this.size as DefaultElementSize\n                    ]}\"\n                ></sp-icon-corner-triangle300>\n            `);\n        }\n        return buttonContent;\n    }\n\n    protected updated(changes: PropertyValues): void {\n        super.updated(changes);\n        const isButton = this.role === 'button';\n        const canBePressed = isButton && (this.selected || this.toggles);\n        if (changes.has('selected') || changes.has('role')) {\n            // When role !== 'button' then the Action Button is within\n            // an Action Group that manages selects which means the\n            // Action Button is a \"checkbox\" or \"radio\" and cannot\n            // accept the `aria-pressed` attribute.\n            if (canBePressed) {\n                this.setAttribute(\n                    'aria-pressed',\n                    this.selected ? 'true' : 'false'\n                );\n            } else {\n                // When !this.toggles the lack of \"aria-pressed\" is inconsequential.\n                this.removeAttribute('aria-pressed');\n            }\n        }\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        longpress: CustomEvent<LongpressEvent>;\n    }\n}\n"]}
+{"version":3,"file":"ActionButton.js","sourceRoot":"","sources":["ActionButton.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    DefaultElementSize,\n    html,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ButtonBase } from '@spectrum-web-components/button';\nimport buttonStyles from './action-button.css.js';\nimport cornerTriangleStyles from '@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js';\n\nconst holdAffordanceClass = {\n    s: 'spectrum-UIIcon-CornerTriangle75',\n    m: 'spectrum-UIIcon-CornerTriangle100',\n    l: 'spectrum-UIIcon-CornerTriangle200',\n    xl: 'spectrum-UIIcon-CornerTriangle300',\n};\n\nconst LONGPRESS_DURATION = 300;\nlet LONGPRESS_TIMEOUT: ReturnType<typeof setTimeout>;\n\nexport type LongpressEvent = {\n    source: 'pointer' | 'keyboard';\n};\n\n/**\n * @element sp-action-button\n *\n * @slot - text label of the Action Button\n * @slot icon - The icon to use for Action Button\n * @fires change - Announces a change in the `selected` property of an action button\n * @fires longpress - Synthesizes a \"longpress\" interaction that signifies a\n * `pointerdown` event that is >=300ms or a keyboard event wher code is `Space` or code is `ArrowDown`\n * while `altKey===true`.\n */\nexport class ActionButton extends SizedMixin(ButtonBase) {\n    public static get styles(): CSSResultArray {\n        return [buttonStyles, cornerTriangleStyles];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    public emphasized = false;\n\n    @property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })\n    public holdAffordance = false;\n\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    @property({ reflect: true })\n    public role = 'button';\n\n    /**\n     * Whether an Action Button with `role='button'`\n     * should also be `aria-pressed='true'`\n     */\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    /**\n     * Whether to automatically manage the `selected`\n     * attribute on interaction and whether `aria-pressed=\"false\"`\n     * should be used when `selected === false`\n     */\n    @property({ type: Boolean, reflect: true })\n    public toggles = false;\n\n    @property({ reflect: true })\n    public variant?: 'white' | 'black';\n\n    @property({ type: String })\n    public get value(): string {\n        return this._value || this.itemText;\n    }\n    public set value(value: string) {\n        if (value === this._value) {\n            return;\n        }\n        this._value = value || '';\n        if (this._value) {\n            this.setAttribute('value', this._value);\n        } else {\n            this.removeAttribute('value');\n        }\n    }\n    private _value = '';\n\n    /**\n     * @private\n     */\n    public get itemText(): string {\n        return (this.textContent || /* c8 ignore next */ '').trim();\n    }\n\n    constructor() {\n        super();\n        this.addEventListener('click', this.onClick);\n        this.addEventListener('pointerdown', this.onPointerdown);\n    }\n\n    private onClick = (): void => {\n        if (!this.toggles) {\n            return;\n        }\n        this.selected = !this.selected;\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n            })\n        );\n        if (!applyDefault) {\n            this.selected = !this.selected;\n        }\n    };\n\n    private onPointerdown(): void {\n        this.addEventListener('pointerup', this.onPointerup);\n        this.addEventListener('pointercancel', this.onPointerup);\n        LONGPRESS_TIMEOUT = setTimeout(() => {\n            this.dispatchEvent(\n                new CustomEvent<LongpressEvent>('longpress', {\n                    bubbles: true,\n                    composed: true,\n                    detail: {\n                        source: 'pointer',\n                    },\n                })\n            );\n        }, LONGPRESS_DURATION);\n    }\n\n    private onPointerup(): void {\n        clearTimeout(LONGPRESS_TIMEOUT);\n        this.removeEventListener('pointerup', this.onPointerup);\n        this.removeEventListener('pointercancel', this.onPointerup);\n    }\n\n    /**\n     * @private\n     */\n    protected handleKeydown(event: KeyboardEvent): void {\n        if (!this.holdAffordance) {\n            return super.handleKeydown(event);\n        }\n        const { code, altKey } = event;\n        if (code === 'Space' || (altKey && code === 'ArrowDown')) {\n            event.preventDefault();\n            if (code === 'ArrowDown') {\n                event.stopPropagation();\n                event.stopImmediatePropagation();\n            }\n            this.addEventListener('keyup', this.handleKeyup);\n            this.active = true;\n        }\n    }\n\n    protected handleKeyup(event: KeyboardEvent): void {\n        if (!this.holdAffordance) {\n            return super.handleKeyup(event);\n        }\n        const { code, altKey } = event;\n        if (code === 'Space' || (altKey && code === 'ArrowDown')) {\n            event.stopPropagation();\n            this.dispatchEvent(\n                new CustomEvent<LongpressEvent>('longpress', {\n                    bubbles: true,\n                    composed: true,\n                    detail: {\n                        source: 'keyboard',\n                    },\n                })\n            );\n            this.active = false;\n        }\n    }\n\n    protected get buttonContent(): TemplateResult[] {\n        const buttonContent = super.buttonContent;\n        if (this.holdAffordance) {\n            buttonContent.unshift(html`\n                <sp-icon-corner-triangle300\n                    id=\"hold-affordance\"\n                    class=\"${holdAffordanceClass[\n                        this.size as DefaultElementSize\n                    ]}\"\n                ></sp-icon-corner-triangle300>\n            `);\n        }\n        return buttonContent;\n    }\n\n    protected updated(changes: PropertyValues): void {\n        super.updated(changes);\n        const isButton = this.role === 'button';\n        const canBePressed = isButton && (this.selected || this.toggles);\n        if (changes.has('selected') || changes.has('role')) {\n            // When role !== 'button' then the Action Button is within\n            // an Action Group that manages selects which means the\n            // Action Button is a \"checkbox\" or \"radio\" and cannot\n            // accept the `aria-pressed` attribute.\n            if (canBePressed) {\n                this.setAttribute(\n                    'aria-pressed',\n                    this.selected ? 'true' : 'false'\n                );\n            } else {\n                // When !this.toggles the lack of \"aria-pressed\" is inconsequential.\n                this.removeAttribute('aria-pressed');\n            }\n        }\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        longpress: CustomEvent<LongpressEvent>;\n    }\n}\n"]}

package/src/action-button.css.js

@@ -15,165 +15,165 @@ const styles = css `
 --spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)
 );justify-content:center;line-height:var(
 --spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)
-);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}::slotted([slot=icon]){max-height:100%}#label{align-self:center;justify-self:center;text-align:center}#label:empty{display:none}:host(.spectrum-ActionButton--staticBlack:not([quiet]):disabled){border-color:var(
+);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host([disabled]){cursor:default}::slotted([slot=icon]){max-height:100%}#label{align-self:center;justify-self:center;text-align:center}#label:empty{display:none}:host([variant=black]:not([quiet])[disabled]){border-color:var(
 --spectrum-alias-actionbutton-staticBlack-border-color-disabled,rgba(0,0,0,.25)
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):disabled[selected]){border-color:var(
+)}:host([variant=black]:not([quiet])[disabled][selected]){border-color:var(
 --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected,transparent
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):disabled:not([selected])){background-color:var(
+)}:host([variant=black]:not([quiet])[disabled]:not([selected])){background-color:var(
 --spectrum-alias-actionbutton-staticBlack-background-color-disabled,transparent
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled)){border-color:var(
+)}:host([variant=black]:not([quiet]):not([disabled])){border-color:var(
 --spectrum-alias-actionbutton-staticBlack-border-color-default,rgba(0,0,0,.4)
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):hover){border-color:var(
+)}:host([variant=black]:not([quiet]):not([disabled]):hover){border-color:var(
 --spectrum-alias-actionbutton-staticBlack-border-color-hover,rgba(0,0,0,.55)
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled)[active]){border-color:var(
+)}:host([variant=black]:not([quiet]):not([disabled])[active]){border-color:var(
 --spectrum-alias-actionbutton-staticBlack-border-color-down,rgba(0,0,0,.7)
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled).focus-visible){border-color:var(
+)}:host([variant=black]:not([quiet]):not([disabled]).focus-visible){border-color:var(
 --spectrum-alias-actionbutton-staticBlack-border-color-key-focus,rgba(0,0,0,.55)
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):focus-visible){border-color:var(
+)}:host([variant=black]:not([quiet]):not([disabled]):focus-visible){border-color:var(
 --spectrum-alias-actionbutton-staticBlack-border-color-key-focus,rgba(0,0,0,.55)
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled).is-keyboardFocused){border-color:var(
+)}:host([variant=black]:not([quiet]):not([disabled]).is-keyboardFocused){border-color:var(
 --spectrum-alias-actionbutton-staticBlack-border-color-key-focus,rgba(0,0,0,.55)
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):not([selected])){background-color:var(
+)}:host([variant=black]:not([quiet]):not([disabled]):not([selected])){background-color:var(
 --spectrum-alias-actionbutton-staticBlack-background-color-default,transparent
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):not([selected]):hover){background-color:var(
+)}:host([variant=black]:not([quiet]):not([disabled]):not([selected]):hover){background-color:var(
 --spectrum-alias-actionbutton-staticBlack-background-color-hover,rgba(0,0,0,.25)
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):not([selected])[active]){background-color:var(
+)}:host([variant=black]:not([quiet]):not([disabled]):not([selected])[active]){background-color:var(
 --spectrum-alias-actionbutton-staticBlack-background-color-down,rgba(0,0,0,.4)
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):not([selected]).focus-visible){background-color:var(
+)}:host([variant=black]:not([quiet]):not([disabled]):not([selected]).focus-visible){background-color:var(
 --spectrum-alias-actionbutton-staticBlack-background-color-key-focus,rgba(0,0,0,.25)
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):not([selected]):focus-visible){background-color:var(
+)}:host([variant=black]:not([quiet]):not([disabled]):not([selected]):focus-visible){background-color:var(
 --spectrum-alias-actionbutton-staticBlack-background-color-key-focus,rgba(0,0,0,.25)
-)}:host(.spectrum-ActionButton--staticBlack:not([quiet]):not(:disabled):not([selected]).is-keyboardFocused){background-color:var(
+)}:host([variant=black]:not([quiet]):not([disabled]):not([selected]).is-keyboardFocused){background-color:var(
 --spectrum-alias-actionbutton-staticBlack-background-color-key-focus,rgba(0,0,0,.25)
-)}:host(.spectrum-ActionButton--staticBlack[quiet]:disabled){border-color:transparent}:host(.spectrum-ActionButton--staticBlack[quiet]:disabled:not([selected])){background-color:transparent}:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled)){border-color:transparent}:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled):not([selected])){background-color:var(
+)}:host([variant=black][quiet][disabled]){border-color:transparent}:host([variant=black][quiet][disabled]:not([selected])){background-color:transparent}:host([variant=black][quiet]:not([disabled])){border-color:transparent}:host([variant=black][quiet]:not([disabled]):not([selected])){background-color:var(
 --spectrum-alias-component-background-color-quiet-default,var(--spectrum-alias-background-color-transparent)
-)}:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled):not([selected]):hover){background-color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-25))}:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled):not([selected])[active]){background-color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled):not([selected]).focus-visible){background-color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-25))}:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled):not([selected]):focus-visible){background-color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-25))}:host(.spectrum-ActionButton--staticBlack[quiet]:not(:disabled):not([selected]).is-keyboardFocused){background-color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-25))}:host(.spectrum-ActionButton--staticBlack:disabled[selected]){background-color:var(
+)}:host([variant=black][quiet]:not([disabled]):not([selected]):hover){background-color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-25))}:host([variant=black][quiet]:not([disabled]):not([selected])[active]){background-color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host([variant=black][quiet]:not([disabled]):not([selected]).focus-visible){background-color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-25))}:host([variant=black][quiet]:not([disabled]):not([selected]):focus-visible){background-color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-25))}:host([variant=black][quiet]:not([disabled]):not([selected]).is-keyboardFocused){background-color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-25))}:host([size][variant=black][disabled][selected]){background-color:var(
 --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected,rgba(0,0,0,.1)
-)}:host(.spectrum-ActionButton--staticBlack:disabled[selected]) .spectrum-ActionButton-holdIcon{color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticBlack:disabled[selected]) #label{color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticBlack:disabled[selected]) ::slotted([slot=icon]){color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticBlack:disabled) .spectrum-ActionButton-holdIcon{color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticBlack:disabled) #label{color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticBlack:disabled) ::slotted([slot=icon]){color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled)){background-color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-90))}:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled):hover){background-color:var(
+)}:host([size][variant=black][disabled][selected]) #hold-affordance{color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host([size][variant=black][disabled][selected]) #label{color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host([size][variant=black][disabled][selected]) ::slotted([slot=icon]){color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host([variant=black][disabled]) #hold-affordance{color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host([variant=black][disabled]) #label{color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host([variant=black][disabled]) ::slotted([slot=icon]){color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-40))}:host([variant=black][selected]:not([disabled])){background-color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-90))}:host([variant=black][selected]:not([disabled]):hover){background-color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled)[active]){background-color:var(
+)}:host([variant=black][selected]:not([disabled])[active]){background-color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled).focus-visible){background-color:var(
+)}:host([variant=black][selected]:not([disabled]).focus-visible){background-color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled):focus-visible){background-color:var(
+)}:host([variant=black][selected]:not([disabled]):focus-visible){background-color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled).is-keyboardFocused){background-color:var(
+)}:host([variant=black][selected]:not([disabled]).is-keyboardFocused){background-color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled)) .spectrum-ActionButton-holdIcon{color:inherit}:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled)) #label{color:inherit}:host(.spectrum-ActionButton--staticBlack[selected]:not(:disabled)) ::slotted([slot=icon]){color:inherit}:host(.spectrum-ActionButton--staticBlack) .spectrum-ActionButton-holdIcon{color:var(
+)}:host([variant=black][selected]:not([disabled])) #hold-affordance{color:inherit}:host([variant=black][selected]:not([disabled])) #label{color:inherit}:host([variant=black][selected]:not([disabled])) ::slotted([slot=icon]){color:inherit}:host([variant=black]) #hold-affordance{color:var(
 --spectrum-ActionButton-static-black-color
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected])) .spectrum-ActionButton-holdIcon{color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-90))}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]):hover) .spectrum-ActionButton-holdIcon{color:var(
+)}:host([variant=black]:not([disabled]):not([selected])) #hold-affordance{color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-90))}:host([variant=black]:not([disabled]):not([selected]):hover) #hold-affordance{color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]):hover) #label{color:var(
+)}:host([variant=black]:not([disabled]):not([selected]):hover) #label{color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]):hover) ::slotted([slot=icon]){color:var(
+)}:host([variant=black]:not([disabled]):not([selected]):hover) ::slotted([slot=icon]){color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected])[active]) .spectrum-ActionButton-holdIcon{color:var(
+)}:host([variant=black]:not([disabled]):not([selected])[active]) #hold-affordance{color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected])[active]) #label{color:var(
+)}:host([variant=black]:not([disabled]):not([selected])[active]) #label{color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected])[active]) ::slotted([slot=icon]){color:var(
+)}:host([variant=black]:not([disabled]):not([selected])[active]) ::slotted([slot=icon]){color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]).focus-visible) .spectrum-ActionButton-holdIcon{color:var(
+)}:host([variant=black]:not([disabled]):not([selected]).focus-visible) #hold-affordance{color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]):focus-visible) .spectrum-ActionButton-holdIcon{color:var(
+)}:host([variant=black]:not([disabled]):not([selected]):focus-visible) #hold-affordance{color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]).focus-visible) #label{color:var(
+)}:host([variant=black]:not([disabled]):not([selected]).focus-visible) #label{color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]):focus-visible) #label{color:var(
+)}:host([variant=black]:not([disabled]):not([selected]):focus-visible) #label{color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]).focus-visible) ::slotted([slot=icon]){color:var(
+)}:host([variant=black]:not([disabled]):not([selected]).focus-visible) ::slotted([slot=icon]){color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]):focus-visible) ::slotted([slot=icon]){color:var(
+)}:host([variant=black]:not([disabled]):not([selected]):focus-visible) ::slotted([slot=icon]){color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]).is-keyboardFocused) .spectrum-ActionButton-holdIcon{color:var(
+)}:host([variant=black]:not([disabled]):not([selected]).is-keyboardFocused) #hold-affordance{color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]).is-keyboardFocused) #label{color:var(
+)}:host([variant=black]:not([disabled]):not([selected]).is-keyboardFocused) #label{color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected]).is-keyboardFocused) ::slotted([slot=icon]){color:var(
+)}:host([variant=black]:not([disabled]):not([selected]).is-keyboardFocused) ::slotted([slot=icon]){color:var(
 --spectrum-global-color-static-black,#000
-)}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected])) #label{color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-90))}:host(.spectrum-ActionButton--staticBlack:not(:disabled):not([selected])) ::slotted([slot=icon]){color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-90))}:host(.spectrum-ActionButton--staticBlack) #label{color:var(
+)}:host([variant=black]:not([disabled]):not([selected])) #label{color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-90))}:host([variant=black]:not([disabled]):not([selected])) ::slotted([slot=icon]){color:rgba(var(--spectrum-global-color-static-black-rgb),var(--spectrum-global-color-opacity-90))}:host([variant=black]) #label{color:var(
 --spectrum-ActionButton-static-black-color
-)}:host(.spectrum-ActionButton--staticBlack) ::slotted([slot=icon]){color:var(
+)}:host([variant=black]) ::slotted([slot=icon]){color:var(
 --spectrum-ActionButton-static-black-color
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):disabled){border-color:var(
+)}:host([variant=white]:not([quiet])[disabled]){border-color:var(
 --spectrum-alias-actionbutton-staticWhite-border-color-disabled,hsla(0,0%,100%,.25)
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):disabled[selected]){border-color:var(
+)}:host([variant=white]:not([quiet])[disabled][selected]){border-color:var(
 --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected,transparent
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):disabled:not([selected])){background-color:var(
+)}:host([variant=white]:not([quiet])[disabled]:not([selected])){background-color:var(
 --spectrum-alias-actionbutton-staticWhite-background-color-disabled,transparent
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled)){border-color:var(
+)}:host([variant=white]:not([quiet]):not([disabled])){border-color:var(
 --spectrum-alias-actionbutton-staticWhite-border-color-default,hsla(0,0%,100%,.4)
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):hover){border-color:var(
+)}:host([variant=white]:not([quiet]):not([disabled]):hover){border-color:var(
 --spectrum-alias-actionbutton-staticWhite-border-color-hover,hsla(0,0%,100%,.55)
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled)[active]){border-color:var(
+)}:host([variant=white]:not([quiet]):not([disabled])[active]){border-color:var(
 --spectrum-alias-actionbutton-staticWhite-border-color-down,hsla(0,0%,100%,.7)
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled).focus-visible){border-color:var(
+)}:host([variant=white]:not([quiet]):not([disabled]).focus-visible){border-color:var(
 --spectrum-alias-actionbutton-staticWhite-border-color-key-focus,hsla(0,0%,100%,.55)
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):focus-visible){border-color:var(
+)}:host([variant=white]:not([quiet]):not([disabled]):focus-visible){border-color:var(
 --spectrum-alias-actionbutton-staticWhite-border-color-key-focus,hsla(0,0%,100%,.55)
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled).is-keyboardFocused){border-color:var(
+)}:host([variant=white]:not([quiet]):not([disabled]).is-keyboardFocused){border-color:var(
 --spectrum-alias-actionbutton-staticWhite-border-color-key-focus,hsla(0,0%,100%,.55)
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):not([selected])){background-color:var(
+)}:host([variant=white]:not([quiet]):not([disabled]):not([selected])){background-color:var(
 --spectrum-alias-actionbutton-staticWhite-background-color-default,transparent
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):not([selected]):hover){background-color:var(
+)}:host([variant=white]:not([quiet]):not([disabled]):not([selected]):hover){background-color:var(
 --spectrum-alias-actionbutton-staticWhite-background-color-hover,hsla(0,0%,100%,.25)
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):not([selected])[active]){background-color:var(
+)}:host([variant=white]:not([quiet]):not([disabled]):not([selected])[active]){background-color:var(
 --spectrum-alias-actionbutton-staticWhite-background-color-down,hsla(0,0%,100%,.4)
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):not([selected]).focus-visible){background-color:var(
+)}:host([variant=white]:not([quiet]):not([disabled]):not([selected]).focus-visible){background-color:var(
 --spectrum-alias-actionbutton-staticWhite-background-color-key-focus,hsla(0,0%,100%,.25)
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):not([selected]):focus-visible){background-color:var(
+)}:host([variant=white]:not([quiet]):not([disabled]):not([selected]):focus-visible){background-color:var(
 --spectrum-alias-actionbutton-staticWhite-background-color-key-focus,hsla(0,0%,100%,.25)
-)}:host(.spectrum-ActionButton--staticWhite:not([quiet]):not(:disabled):not([selected]).is-keyboardFocused){background-color:var(
+)}:host([variant=white]:not([quiet]):not([disabled]):not([selected]).is-keyboardFocused){background-color:var(
 --spectrum-alias-actionbutton-staticWhite-background-color-key-focus,hsla(0,0%,100%,.25)
-)}:host(.spectrum-ActionButton--staticWhite[quiet]:disabled){border-color:transparent}:host(.spectrum-ActionButton--staticWhite[quiet]:disabled:not([selected])){background-color:transparent}:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled)){border-color:transparent}:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled):not([selected])){background-color:var(
+)}:host([variant=white][quiet][disabled]){border-color:transparent}:host([variant=white][quiet][disabled]:not([selected])){background-color:transparent}:host([variant=white][quiet]:not([disabled])){border-color:transparent}:host([variant=white][quiet]:not([disabled]):not([selected])){background-color:var(
 --spectrum-alias-component-background-color-quiet-default,var(--spectrum-alias-background-color-transparent)
-)}:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled):not([selected]):hover){background-color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-25))}:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled):not([selected])[active]){background-color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled):not([selected]).focus-visible){background-color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-25))}:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled):not([selected]):focus-visible){background-color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-25))}:host(.spectrum-ActionButton--staticWhite[quiet]:not(:disabled):not([selected]).is-keyboardFocused){background-color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-25))}:host(.spectrum-ActionButton--staticWhite:disabled[selected]){background-color:var(
+)}:host([variant=white][quiet]:not([disabled]):not([selected]):hover){background-color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-25))}:host([variant=white][quiet]:not([disabled]):not([selected])[active]){background-color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host([variant=white][quiet]:not([disabled]):not([selected]).focus-visible){background-color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-25))}:host([variant=white][quiet]:not([disabled]):not([selected]):focus-visible){background-color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-25))}:host([variant=white][quiet]:not([disabled]):not([selected]).is-keyboardFocused){background-color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-25))}:host([variant=white][disabled][selected]){background-color:var(
 --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected,hsla(0,0%,100%,.1)
-)}:host(.spectrum-ActionButton--staticWhite:disabled[selected]) .spectrum-ActionButton-holdIcon{color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticWhite:disabled[selected]) #label{color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticWhite:disabled[selected]) ::slotted([slot=icon]){color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticWhite:disabled) .spectrum-ActionButton-holdIcon{color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticWhite:disabled) #label{color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticWhite:disabled) ::slotted([slot=icon]){color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled)){background-color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-90))}:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled):hover){background-color:var(
+)}:host([variant=white][disabled][selected]) #hold-affordance{color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host([variant=white][disabled][selected]) #label{color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host([variant=white][disabled][selected]) ::slotted([slot=icon]){color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host([variant=white][disabled]) #hold-affordance{color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host([variant=white][disabled]) #label{color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host([variant=white][disabled]) ::slotted([slot=icon]){color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-40))}:host([variant=white][selected]:not([disabled])){background-color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-90))}:host([variant=white][selected]:not([disabled]):hover){background-color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled)[active]){background-color:var(
+)}:host([variant=white][selected]:not([disabled])[active]){background-color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled).focus-visible){background-color:var(
+)}:host([variant=white][selected]:not([disabled]).focus-visible){background-color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled):focus-visible){background-color:var(
+)}:host([variant=white][selected]:not([disabled]):focus-visible){background-color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled).is-keyboardFocused){background-color:var(
+)}:host([variant=white][selected]:not([disabled]).is-keyboardFocused){background-color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled)) .spectrum-ActionButton-holdIcon{color:inherit}:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled)) #label{color:inherit}:host(.spectrum-ActionButton--staticWhite[selected]:not(:disabled)) ::slotted([slot=icon]){color:inherit}:host(.spectrum-ActionButton--staticWhite) .spectrum-ActionButton-holdIcon{color:var(
+)}:host([variant=white][selected]:not([disabled])) #hold-affordance{color:inherit}:host([variant=white][selected]:not([disabled])) #label{color:inherit}:host([variant=white][selected]:not([disabled])) ::slotted([slot=icon]){color:inherit}:host([variant=white]) #hold-affordance{color:var(
 --spectrum-ActionButton-static-white-color
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected])) .spectrum-ActionButton-holdIcon{color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-90))}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]):hover) .spectrum-ActionButton-holdIcon{color:var(
+)}:host([variant=white]:not([disabled]):not([selected])) #hold-affordance{color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-90))}:host([variant=white]:not([disabled]):not([selected]):hover) #hold-affordance{color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]):hover) #label{color:var(
+)}:host([variant=white]:not([disabled]):not([selected]):hover) #label{color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]):hover) ::slotted([slot=icon]){color:var(
+)}:host([variant=white]:not([disabled]):not([selected]):hover) ::slotted([slot=icon]){color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected])[active]) .spectrum-ActionButton-holdIcon{color:var(
+)}:host([variant=white]:not([disabled]):not([selected])[active]) #hold-affordance{color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected])[active]) #label{color:var(
+)}:host([variant=white]:not([disabled]):not([selected])[active]) #label{color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected])[active]) ::slotted([slot=icon]){color:var(
+)}:host([variant=white]:not([disabled]):not([selected])[active]) ::slotted([slot=icon]){color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]).focus-visible) .spectrum-ActionButton-holdIcon{color:var(
+)}:host([variant=white]:not([disabled]):not([selected]).focus-visible) #hold-affordance{color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]):focus-visible) .spectrum-ActionButton-holdIcon{color:var(
+)}:host([variant=white]:not([disabled]):not([selected]):focus-visible) #hold-affordance{color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]).focus-visible) #label{color:var(
+)}:host([variant=white]:not([disabled]):not([selected]).focus-visible) #label{color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]):focus-visible) #label{color:var(
+)}:host([variant=white]:not([disabled]):not([selected]):focus-visible) #label{color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]).focus-visible) ::slotted([slot=icon]){color:var(
+)}:host([variant=white]:not([disabled]):not([selected]).focus-visible) ::slotted([slot=icon]){color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]):focus-visible) ::slotted([slot=icon]){color:var(
+)}:host([variant=white]:not([disabled]):not([selected]):focus-visible) ::slotted([slot=icon]){color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]).is-keyboardFocused) .spectrum-ActionButton-holdIcon{color:var(
+)}:host([variant=white]:not([disabled]):not([selected]).is-keyboardFocused) #hold-affordance{color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]).is-keyboardFocused) #label{color:var(
+)}:host([variant=white]:not([disabled]):not([selected]).is-keyboardFocused) #label{color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected]).is-keyboardFocused) ::slotted([slot=icon]){color:var(
+)}:host([variant=white]:not([disabled]):not([selected]).is-keyboardFocused) ::slotted([slot=icon]){color:var(
 --spectrum-global-color-static-white,#fff
-)}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected])) #label{color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-90))}:host(.spectrum-ActionButton--staticWhite:not(:disabled):not([selected])) ::slotted([slot=icon]){color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-90))}:host(.spectrum-ActionButton--staticWhite) #label{color:var(
+)}:host([variant=white]:not([disabled]):not([selected])) #label{color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-90))}:host([variant=white]:not([disabled]):not([selected])) ::slotted([slot=icon]){color:rgba(var(--spectrum-global-color-static-white-rgb),var(--spectrum-global-color-opacity-90))}:host([variant=white]) #label{color:var(
 --spectrum-ActionButton-static-white-color
-)}:host(.spectrum-ActionButton--staticWhite) ::slotted([slot=icon]){color:var(
+)}:host([variant=white]) ::slotted([slot=icon]){color:var(
 --spectrum-ActionButton-static-white-color
 )}:host([size=s]){--spectrum-actionbutton-texticon-border-size:var(
 --spectrum-actionbutton-s-texticon-border-size,var(--spectrum-alias-border-size-thin)
@@ -363,11 +363,11 @@ const styles = css `
 --spectrum-alias-component-focusring-size,var(--spectrum-global-dimension-static-size-10)
 );--spectrum-actionbutton-focus-ring-color:var(
 --spectrum-actionbutton-m-textonly-focus-ring-border-color-key-focus,var(--spectrum-alias-focus-ring-color)
-);transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-actionbutton-quiet-textonly-border-radius) + var(--spectrum-actionbutton-focus-ring-gap));bottom:0;content:"";left:0;margin:calc((var(--spectrum-actionbutton-focus-ring-gap) + var(--spectrum-actionbutton-textonly-border-size))*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host(.focus-visible){box-shadow:none!important}:host(:focus-visible){box-shadow:none!important}:host(.focus-visible):after{box-shadow:0 0 0 var(--spectrum-actionbutton-focus-ring-size) var(--spectrum-actionbutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-actionbutton-focus-ring-size) var(--spectrum-actionbutton-focus-ring-color)}.spectrum-ActionButton--staticWhite{--spectrum-actionbutton-focus-ring-color:var(
+);transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-actionbutton-quiet-textonly-border-radius) + var(--spectrum-actionbutton-focus-ring-gap));bottom:0;content:"";left:0;margin:calc((var(--spectrum-actionbutton-focus-ring-gap) + var(--spectrum-actionbutton-textonly-border-size))*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host(.focus-visible){box-shadow:none!important}:host(:focus-visible){box-shadow:none!important}:host(.focus-visible):after{box-shadow:0 0 0 var(--spectrum-actionbutton-focus-ring-size) var(--spectrum-actionbutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-actionbutton-focus-ring-size) var(--spectrum-actionbutton-focus-ring-color)}:host([variant=white]){--spectrum-actionbutton-focus-ring-color:var(
 --spectrum-global-color-static-white,#fff
-)}.spectrum-ActionButton--staticBlack{--spectrum-actionbutton-focus-ring-color:var(
+)}:host([variant=black]){--spectrum-actionbutton-focus-ring-color:var(
 --spectrum-global-color-static-black,#000
-)}.spectrum-ActionButton--staticBlack,.spectrum-ActionButton--staticWhite,:host([emphasized][selected]){--spectrum-actionbutton-focus-ring-gap:var(
+)}:host([emphasized][selected]),:host([variant=black]),:host([variant=white]){--spectrum-actionbutton-focus-ring-gap:var(
 --spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)
 );--spectrum-actionbutton-focus-ring-size:var(
 --spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)
@@ -423,15 +423,15 @@ const styles = css `
 --spectrum-actionbutton-m-textonly-text-color-down,var(--spectrum-alias-component-text-color-down)
 )}:host([active]) #hold-affordance{color:var(
 --spectrum-actionbutton-m-textonly-hold-icon-color-down,var(--spectrum-alias-component-icon-color-down)
-)}:host(:disabled),:host([disabled]){background-color:var(
+)}:host([disabled]),:host([disabled]){background-color:var(
 --spectrum-actionbutton-m-textonly-background-color-disabled,var(--spectrum-alias-component-background-color-disabled)
 );border-color:var(
 --spectrum-actionbutton-m-textonly-border-color-disabled,var(--spectrum-alias-component-border-color-disabled)
 );color:var(
 --spectrum-actionbutton-m-textonly-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
-)}:host(:disabled) ::slotted([slot=icon]),:host([disabled]) ::slotted([slot=icon]){color:var(
+)}:host([disabled]) ::slotted([slot=icon]),:host([disabled]) ::slotted([slot=icon]){color:var(
 --spectrum-actionbutton-m-texticon-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)
-)}:host(:disabled) #hold-affordance,:host([disabled]) #hold-affordance{color:var(
+)}:host([disabled]) #hold-affordance,:host([disabled]) #hold-affordance{color:var(
 --spectrum-actionbutton-m-textonly-hold-icon-color-disabled,var(--spectrum-alias-component-icon-color-disabled)
 )}:host([selected]){background-color:var(
 --spectrum-actionbutton-m-textonly-background-color-selected,var(--spectrum-alias-component-background-color-selected-default)
@@ -477,13 +477,13 @@ const styles = css `
 --spectrum-actionbutton-m-textonly-text-color-selected-down,var(--spectrum-alias-component-text-color-selected-down)
 )}:host([selected][active]) ::slotted([slot=icon]){color:var(
 --spectrum-actionbutton-m-texticon-icon-color-selected-down,var(--spectrum-alias-component-icon-color-selected)
-)}:host([selected]:disabled),:host([selected][disabled]){background-color:var(
+)}:host([selected][disabled]),:host([selected][disabled]){background-color:var(
 --spectrum-actionbutton-m-textonly-background-color-selected-disabled,var(--spectrum-alias-component-background-color-disabled)
 );border-color:var(
 --spectrum-actionbutton-m-textonly-border-color-selected-disabled,var(--spectrum-alias-component-border-color-disabled)
 );color:var(
 --spectrum-actionbutton-m-textonly-text-color-selected-disabled,var(--spectrum-alias-component-text-color-disabled)
-)}:host([selected]:disabled) ::slotted([slot=icon]),:host([selected][disabled]) ::slotted([slot=icon]){color:var(
+)}:host([selected][disabled]) ::slotted([slot=icon]),:host([selected][disabled]) ::slotted([slot=icon]){color:var(
 --spectrum-actionbutton-m-texticon-icon-color-selected-disabled,var(--spectrum-alias-component-icon-color-disabled)
 )}:host([emphasized][quiet][selected]),:host([emphasized][selected]){background-color:var(
 --spectrum-actionbutton-m-emphasized-textonly-background-color-selected,var(
@@ -539,13 +539,13 @@ const styles = css `
 --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down,var(--spectrum-alias-component-text-color-emphasized-selected-down)
 )}:host([emphasized][quiet][selected][active]) ::slotted([slot=icon]),:host([emphasized][selected][active]) ::slotted([slot=icon]){color:var(
 --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-down,var(--spectrum-alias-component-icon-color-emphasized-selected-down)
-)}:host([emphasized][quiet][selected]:disabled),:host([emphasized][quiet][selected][disabled]),:host([emphasized][selected]:disabled),:host([emphasized][selected][disabled]){background-color:var(
+)}:host([emphasized][quiet][selected][disabled]),:host([emphasized][quiet][selected][disabled]),:host([emphasized][selected][disabled]){background-color:var(
 --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-disabled,var(--spectrum-alias-component-background-color-disabled)
 );border-color:var(
 --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-disabled,var(--spectrum-alias-component-border-color-disabled)
 );color:var(
 --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-disabled,var(--spectrum-alias-component-text-color-disabled)
-)}:host([emphasized][quiet][selected]:disabled) ::slotted([slot=icon]),:host([emphasized][quiet][selected][disabled]) ::slotted([slot=icon]),:host([emphasized][selected]:disabled) ::slotted([slot=icon]),:host([emphasized][selected][disabled]) ::slotted([slot=icon]){color:var(
+)}:host([emphasized][quiet][selected][disabled]) ::slotted([slot=icon]),:host([emphasized][quiet][selected][disabled]) ::slotted([slot=icon]),:host([emphasized][selected][disabled]) ::slotted([slot=icon]){color:var(
 --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-disabled,var(--spectrum-alias-component-icon-color-disabled)
 )}:host([quiet]){background-color:var(
 --spectrum-actionbutton-m-quiet-textonly-background-color,var(--spectrum-alias-component-background-color-quiet-default)
@@ -577,7 +577,7 @@ const styles = css `
 --spectrum-actionbutton-m-quiet-textonly-border-color-down,var(--spectrum-alias-component-border-color-quiet-down)
 );color:var(
 --spectrum-actionbutton-m-quiet-textonly-text-color-down,var(--spectrum-alias-component-text-color-down)
-)}:host([quiet]:disabled),:host([quiet][disabled]){background-color:var(
+)}:host([quiet][disabled]),:host([quiet][disabled]){background-color:var(
 --spectrum-actionbutton-m-quiet-textonly-background-color-disabled,var(--spectrum-alias-component-background-color-quiet-disabled)
 );border-color:var(
 --spectrum-actionbutton-m-quiet-textonly-border-color-disabled,var(--spectrum-alias-component-border-color-quiet-disabled)
@@ -617,17 +617,17 @@ const styles = css `
 --spectrum-actionbutton-m-quiet-textonly-border-color-selected-down,var(--spectrum-alias-component-border-color-quiet-selected-down)
 );color:var(
 --spectrum-actionbutton-m-quiet-textonly-text-color-selected-down,var(--spectrum-alias-component-text-color-selected-down)
-)}:host([quiet][selected]:disabled),:host([quiet][selected][disabled]){background-color:var(
+)}:host([quiet][selected][disabled]),:host([quiet][selected][disabled]){background-color:var(
 --spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled,var(--spectrum-alias-component-background-color-quiet-selected-disabled)
 );border-color:var(
 --spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled,var(--spectrum-alias-component-border-color-quiet-disabled)
 );color:var(
 --spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled,var(--spectrum-alias-component-text-color-disabled)
-)}.spectrum-ActionButton--staticBlack,.spectrum-ActionButton--staticWhite{--spectrum-global-color-static-black-rgb:0,0,0;--spectrum-global-color-static-white-rgb:255,255,255;--spectrum-ActionButton-static-black-color:var(
+)}:host([variant=black]),:host([variant=white]){--spectrum-global-color-static-black-rgb:0,0,0;--spectrum-global-color-static-white-rgb:255,255,255;--spectrum-ActionButton-static-black-color:var(
 --spectrum-global-color-static-black,#000
 );--spectrum-ActionButton-static-white-color:var(
 --spectrum-global-color-static-white,#fff
-)}:host([selected]) .spectrum-ActionButton--staticBlack,:host([selected]) .spectrum-ActionButton--staticWhite{color:inherit!important}@media (forced-colors:active){:host{--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected:HighlightText;--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-disabled:GrayText;--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-down:HighlightText;--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-hover:HighlightText;--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-background-color-selected:Highlight;--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-disabled:ButtonFace;--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down:Highlight;--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover:Highlight;--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-key-focus:Highlight;--spectrum-actionbutton-m-emphasized-textonly-border-color-selected:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-disabled:GrayText;--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-text-color-selected:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-disabled:GrayText;--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-quiet-textonly-background-color:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-background-color-disabled:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-background-color-down:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-background-color-hover:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-background-color-key-focus:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-background-color-selected:Highlight;--spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-background-color-selected-down:Highlight;--spectrum-actionbutton-m-quiet-textonly-background-color-selected-hover:Highlight;--spectrum-actionbutton-m-quiet-textonly-background-color-selected-key-focus:Highlight;--spectrum-actionbutton-m-quiet-textonly-border-color:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-border-color-disabled:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-border-color-down:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-border-color-hover:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-border-color-key-focus:Highlight;--spectrum-actionbutton-m-quiet-textonly-border-color-selected:HighlightText;--spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled:GrayText;--spectrum-actionbutton-m-quiet-textonly-border-color-selected-down:HighlightText;--spectrum-actionbutton-m-quiet-textonly-border-color-selected-hover:HighlightText;--spectrum-actionbutton-m-quiet-textonly-border-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-quiet-textonly-text-color:ButtonText;--spectrum-actionbutton-m-quiet-textonly-text-color-disabled:GrayText;--spectrum-actionbutton-m-quiet-textonly-text-color-down:ButtonText;--spectrum-actionbutton-m-quiet-textonly-text-color-hover:ButtonText;--spectrum-actionbutton-m-quiet-textonly-text-color-key-focus:ButtonText;--spectrum-actionbutton-m-quiet-textonly-text-color-selected:HighlightText;--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled:GrayText;--spectrum-actionbutton-m-quiet-textonly-text-color-selected-down:HighlightText;--spectrum-actionbutton-m-quiet-textonly-text-color-selected-hover:HighlightText;--spectrum-actionbutton-m-quiet-textonly-text-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-texticon-icon-color:ButtonText;--spectrum-actionbutton-m-texticon-icon-color-disabled:GrayText;--spectrum-actionbutton-m-texticon-icon-color-hover:ButtonText;--spectrum-actionbutton-m-texticon-icon-color-key-focus:ButtonText;--spectrum-actionbutton-m-texticon-icon-color-selected:HighlightText;--spectrum-actionbutton-m-texticon-icon-color-selected-disabled:GrayText;--spectrum-actionbutton-m-texticon-icon-color-selected-down:HighlightText;--spectrum-actionbutton-m-texticon-icon-color-selected-hover:HighlightText;--spectrum-actionbutton-m-texticon-icon-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-textonly-background-color:ButtonFace;--spectrum-actionbutton-m-textonly-background-color-disabled:ButtonFace;--spectrum-actionbutton-m-textonly-background-color-down:ButtonFace;--spectrum-actionbutton-m-textonly-background-color-hover:ButtonFace;--spectrum-actionbutton-m-textonly-background-color-key-focus:ButtonFace;--spectrum-actionbutton-m-textonly-background-color-selected:Highlight;--spectrum-actionbutton-m-textonly-background-color-selected-disabled:ButtonFace;--spectrum-actionbutton-m-textonly-background-color-selected-down:Highlight;--spectrum-actionbutton-m-textonly-background-color-selected-hover:Highlight;--spectrum-actionbutton-m-textonly-background-color-selected-key-focus:Highlight;--spectrum-actionbutton-m-textonly-border-color:ButtonText;--spectrum-actionbutton-m-textonly-border-color-disabled:GrayText;--spectrum-actionbutton-m-textonly-border-color-down:ButtonText;--spectrum-actionbutton-m-textonly-border-color-hover:ButtonText;--spectrum-actionbutton-m-textonly-border-color-key-focus:Highlight;--spectrum-actionbutton-m-textonly-border-color-selected:HighlightText;--spectrum-actionbutton-m-textonly-border-color-selected-disabled:GrayText;--spectrum-actionbutton-m-textonly-border-color-selected-down:HighlightText;--spectrum-actionbutton-m-textonly-border-color-selected-hover:HighlightText;--spectrum-actionbutton-m-textonly-border-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-textonly-hold-icon-color:ButtonText;--spectrum-actionbutton-m-textonly-hold-icon-color-disabled:GrayText;--spectrum-actionbutton-m-textonly-hold-icon-color-down:ButtonText;--spectrum-actionbutton-m-textonly-hold-icon-color-hover:ButtonText;--spectrum-actionbutton-m-textonly-hold-icon-color-key-focus:ButtonText;--spectrum-actionbutton-m-textonly-text-color:ButtonText;--spectrum-actionbutton-m-textonly-text-color-disabled:GrayText;--spectrum-actionbutton-m-textonly-text-color-down:ButtonText;--spectrum-actionbutton-m-textonly-text-color-hover:ButtonText;--spectrum-actionbutton-m-textonly-text-color-key-focus:ButtonText;--spectrum-actionbutton-m-textonly-text-color-selected:HighlightText;--spectrum-actionbutton-m-textonly-text-color-selected-disabled:GrayText;--spectrum-actionbutton-m-textonly-text-color-selected-down:HighlightText;--spectrum-actionbutton-m-textonly-text-color-selected-hover:HighlightText;--spectrum-actionbutton-m-textonly-text-color-selected-key-focus:HighlightText;forced-color-adjust:none}:host([quiet][emphasized]:not(:disabled,[disabled]):hover){background-color:var(
+)}:host([variant=black][selected]),:host([variant=white][selected]){color:inherit!important}@media (forced-colors:active){:host{--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected:HighlightText;--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-disabled:GrayText;--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-down:HighlightText;--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-hover:HighlightText;--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-background-color-selected:Highlight;--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-disabled:ButtonFace;--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down:Highlight;--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover:Highlight;--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-key-focus:Highlight;--spectrum-actionbutton-m-emphasized-textonly-border-color-selected:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-disabled:GrayText;--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-text-color-selected:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-disabled:GrayText;--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover:HighlightText;--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-quiet-textonly-background-color:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-background-color-disabled:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-background-color-down:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-background-color-hover:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-background-color-key-focus:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-background-color-selected:Highlight;--spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-background-color-selected-down:Highlight;--spectrum-actionbutton-m-quiet-textonly-background-color-selected-hover:Highlight;--spectrum-actionbutton-m-quiet-textonly-background-color-selected-key-focus:Highlight;--spectrum-actionbutton-m-quiet-textonly-border-color:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-border-color-disabled:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-border-color-down:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-border-color-hover:ButtonFace;--spectrum-actionbutton-m-quiet-textonly-border-color-key-focus:Highlight;--spectrum-actionbutton-m-quiet-textonly-border-color-selected:HighlightText;--spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled:GrayText;--spectrum-actionbutton-m-quiet-textonly-border-color-selected-down:HighlightText;--spectrum-actionbutton-m-quiet-textonly-border-color-selected-hover:HighlightText;--spectrum-actionbutton-m-quiet-textonly-border-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-quiet-textonly-text-color:ButtonText;--spectrum-actionbutton-m-quiet-textonly-text-color-disabled:GrayText;--spectrum-actionbutton-m-quiet-textonly-text-color-down:ButtonText;--spectrum-actionbutton-m-quiet-textonly-text-color-hover:ButtonText;--spectrum-actionbutton-m-quiet-textonly-text-color-key-focus:ButtonText;--spectrum-actionbutton-m-quiet-textonly-text-color-selected:HighlightText;--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled:GrayText;--spectrum-actionbutton-m-quiet-textonly-text-color-selected-down:HighlightText;--spectrum-actionbutton-m-quiet-textonly-text-color-selected-hover:HighlightText;--spectrum-actionbutton-m-quiet-textonly-text-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-texticon-icon-color:ButtonText;--spectrum-actionbutton-m-texticon-icon-color-disabled:GrayText;--spectrum-actionbutton-m-texticon-icon-color-hover:ButtonText;--spectrum-actionbutton-m-texticon-icon-color-key-focus:ButtonText;--spectrum-actionbutton-m-texticon-icon-color-selected:HighlightText;--spectrum-actionbutton-m-texticon-icon-color-selected-disabled:GrayText;--spectrum-actionbutton-m-texticon-icon-color-selected-down:HighlightText;--spectrum-actionbutton-m-texticon-icon-color-selected-hover:HighlightText;--spectrum-actionbutton-m-texticon-icon-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-textonly-background-color:ButtonFace;--spectrum-actionbutton-m-textonly-background-color-disabled:ButtonFace;--spectrum-actionbutton-m-textonly-background-color-down:ButtonFace;--spectrum-actionbutton-m-textonly-background-color-hover:ButtonFace;--spectrum-actionbutton-m-textonly-background-color-key-focus:ButtonFace;--spectrum-actionbutton-m-textonly-background-color-selected:Highlight;--spectrum-actionbutton-m-textonly-background-color-selected-disabled:ButtonFace;--spectrum-actionbutton-m-textonly-background-color-selected-down:Highlight;--spectrum-actionbutton-m-textonly-background-color-selected-hover:Highlight;--spectrum-actionbutton-m-textonly-background-color-selected-key-focus:Highlight;--spectrum-actionbutton-m-textonly-border-color:ButtonText;--spectrum-actionbutton-m-textonly-border-color-disabled:GrayText;--spectrum-actionbutton-m-textonly-border-color-down:ButtonText;--spectrum-actionbutton-m-textonly-border-color-hover:ButtonText;--spectrum-actionbutton-m-textonly-border-color-key-focus:Highlight;--spectrum-actionbutton-m-textonly-border-color-selected:HighlightText;--spectrum-actionbutton-m-textonly-border-color-selected-disabled:GrayText;--spectrum-actionbutton-m-textonly-border-color-selected-down:HighlightText;--spectrum-actionbutton-m-textonly-border-color-selected-hover:HighlightText;--spectrum-actionbutton-m-textonly-border-color-selected-key-focus:HighlightText;--spectrum-actionbutton-m-textonly-hold-icon-color:ButtonText;--spectrum-actionbutton-m-textonly-hold-icon-color-disabled:GrayText;--spectrum-actionbutton-m-textonly-hold-icon-color-down:ButtonText;--spectrum-actionbutton-m-textonly-hold-icon-color-hover:ButtonText;--spectrum-actionbutton-m-textonly-hold-icon-color-key-focus:ButtonText;--spectrum-actionbutton-m-textonly-text-color:ButtonText;--spectrum-actionbutton-m-textonly-text-color-disabled:GrayText;--spectrum-actionbutton-m-textonly-text-color-down:ButtonText;--spectrum-actionbutton-m-textonly-text-color-hover:ButtonText;--spectrum-actionbutton-m-textonly-text-color-key-focus:ButtonText;--spectrum-actionbutton-m-textonly-text-color-selected:HighlightText;--spectrum-actionbutton-m-textonly-text-color-selected-disabled:GrayText;--spectrum-actionbutton-m-textonly-text-color-selected-down:HighlightText;--spectrum-actionbutton-m-textonly-text-color-selected-hover:HighlightText;--spectrum-actionbutton-m-textonly-text-color-selected-key-focus:HighlightText;forced-color-adjust:none}:host([quiet][emphasized]:not([disabled]):hover){background-color:var(
 --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover,var(
 --spectrum-alias-component-background-color-emphasized-selected-hover
 )
@@ -637,7 +637,7 @@ const styles = css `
 )
 );color:var(
 --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover,var(--spectrum-alias-component-text-color-emphasized-selected-hover)
-)}:host([quiet][emphasized]:not(:disabled,[disabled])[active]){background-color:var(
+)}:host([quiet][emphasized]:not([disabled])[active]){background-color:var(
 --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down,var(
 --spectrum-alias-component-background-color-emphasized-selected-down
 )