@spectrum-web-components/action-button - npm Package Compare versions

Comparing version 0.34.1-rc.0 to 0.35.0

custom-elements.json

@@ -7,3 +7,3 @@ {
       "kind": "javascript-module",
-      "path": "sp-action-button.ts",
+      "path": "sp-action-button.js",
       "declarations": [],
@@ -23,3 +23,3 @@ "exports": [
       "kind": "javascript-module",
-      "path": "src/ActionButton.ts",
+      "path": "src/ActionButton.js",
       "declarations": [
@@ -119,2 +119,12 @@ {
               "kind": "field",
+              "name": "static",
+              "type": {
+                "text": "'white' | 'black' | undefined"
+              },
+              "privacy": "public",
+              "attribute": "static",
+              "reflects": true
+            },
+            {
+              "kind": "field",
               "name": "variant",
@@ -299,2 +309,9 @@ "type": {
             {
+              "name": "static",
+              "type": {
+                "text": "'white' | 'black' | undefined"
+              },
+              "fieldName": "static"
+            },
+            {
               "name": "variant",
@@ -334,3 +351,3 @@ "type": {
             "name": "LONGPRESS_DURATION",
-            "module": "src/ActionButton.ts"
+            "module": "src/ActionButton.js"
           }
@@ -343,3 +360,3 @@ },
             "name": "ActionButton",
-            "module": "src/ActionButton.ts"
+            "module": "src/ActionButton.js"
           }
@@ -346,0 +363,0 @@ }

package.json

 {
     "name": "@spectrum-web-components/action-button",
-    "version": "0.34.1-rc.0+1647bfed5",
+    "version": "0.35.0",
     "publishConfig": {
@@ -60,10 +60,10 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/button": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/icon": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/icons-ui": "^0.34.1-rc.0+1647bfed5",
-        "@spectrum-web-components/shared": "^0.34.1-rc.0+1647bfed5"
+        "@spectrum-web-components/base": "^0.35.0",
+        "@spectrum-web-components/button": "^0.35.0",
+        "@spectrum-web-components/icon": "^0.35.0",
+        "@spectrum-web-components/icons-ui": "^0.35.0",
+        "@spectrum-web-components/shared": "^0.35.0"
     },
     "devDependencies": {
-        "@spectrum-css/actionbutton": "^3.0.45"
+        "@spectrum-css/actionbutton": "^4.0.9"
     },
@@ -76,3 +76,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "1647bfed54cb29f3513343cd0d2c2d9e73e1c508"
+    "gitHead": "1ee5a6c92838cdf48321276d97f61c20f8476ac1"
 }

src/action-button.css.dev.js

@@ -16,3 +16,11 @@ "use strict";
 --spectrum-animation-duration-100
-);--spectrum-actionbutton-border-radius:var(--spectrum-corner-radius-100);--spectrum-actionbutton-border-width:var(--spectrum-border-width-100);--spectrum-actionbutton-focus-indicator-gap:var(
+);--spectrum-actionbutton-border-radius:var(--spectrum-corner-radius-100);--spectrum-actionbutton-border-width:var(--spectrum-border-width-100);--spectrum-actionbutton-content-color-default:var(
+--spectrum-neutral-content-color-default
+);--spectrum-actionbutton-content-color-hover:var(
+--spectrum-neutral-content-color-hover
+);--spectrum-actionbutton-content-color-down:var(
+--spectrum-neutral-content-color-down
+);--spectrum-actionbutton-content-color-focus:var(
+--spectrum-neutral-content-color-key-focus
+);--spectrum-actionbutton-focus-indicator-gap:var(
 --spectrum-focus-indicator-gap
@@ -23,3 +31,35 @@ );--spectrum-actionbutton-focus-indicator-thickness:var(
 --spectrum-focus-indicator-color
-);--spectrum-actionbutton-focus-indicator-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
+);--spectrum-actionbutton-focus-indicator-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))}:host([selected]){--mod-actionbutton-background-color-default:var(
+--mod-actionbutton-background-color-default-selected,var(--spectrum-neutral-background-color-selected-default)
+);--mod-actionbutton-background-color-hover:var(
+--mod-actionbutton-background-color-hover-selected,var(--spectrum-neutral-background-color-selected-hover)
+);--mod-actionbutton-background-color-down:var(
+--mod-actionbutton-background-color-down-selected,var(--spectrum-neutral-background-color-selected-down)
+);--mod-actionbutton-background-color-focus:var(
+--mod-actionbutton-background-color-focus-selected,var(--spectrum-neutral-background-color-selected-key-focus)
+);--mod-actionbutton-content-color-default:var(
+--mod-actionbutton-content-color-default-selected,var(--spectrum-gray-50)
+);--mod-actionbutton-content-color-hover:var(
+--mod-actionbutton-content-color-hover-selected,var(--spectrum-gray-50)
+);--mod-actionbutton-content-color-down:var(
+--mod-actionbutton-content-color-down-selected,var(--spectrum-gray-50)
+);--mod-actionbutton-content-color-focus:var(
+--mod-actionbutton-content-color-focus-selected,var(--spectrum-gray-50)
+)}:host([selected][emphasized]){--mod-actionbutton-background-color-default:var(
+--mod-actionbutton-background-color-default-selected-emphasized,var(--spectrum-accent-background-color-default)
+);--mod-actionbutton-background-color-hover:var(
+--mod-actionbutton-background-color-hover-selected-emphasized,var(--spectrum-accent-background-color-hover)
+);--mod-actionbutton-background-color-down:var(
+--mod-actionbutton-background-color-down-selected-emphasized,var(--spectrum-accent-background-color-down)
+);--mod-actionbutton-background-color-focus:var(
+--mod-actionbutton-background-color-focus-selected-emphasized,var(--spectrum-accent-background-color-key-focus)
+);--mod-actionbutton-content-color-default:var(
+--mod-actionbutton-content-color-default-selected-emphasized,var(--spectrum-white)
+);--mod-actionbutton-content-color-hover:var(
+--mod-actionbutton-content-color-hover-selected-emphasized,var(--spectrum-white)
+);--mod-actionbutton-content-color-down:var(
+--mod-actionbutton-content-color-down-selected-emphasized,var(--spectrum-white)
+);--mod-actionbutton-content-color-focus:var(
+--mod-actionbutton-content-color-focus-selected-emphasized,var(--spectrum-white)
+)}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
 --spectrum-action-button-edge-to-hold-icon-extra-small
@@ -157,3 +197,3 @@ );--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(
 var(--spectrum-actionbutton-edge-to-text)
-))}#label{color:inherit;font-size:var(
+))}#label{color:var(--mod-actionbutton-label-color,inherit);font-size:var(
 --mod-actionbutton-font-size,var(--spectrum-actionbutton-font-size)
@@ -218,10 +258,2 @@ );overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=rtl]) .hold-affordance{transform:matrix(-1,0,0,1,0,0)}.hold-affordance{color:inherit;inset-block-end:calc(var(
 --system-spectrum-actionbutton-border-color-focus
-);--spectrum-actionbutton-content-color-default:var(
---system-spectrum-actionbutton-content-color-default
-);--spectrum-actionbutton-content-color-hover:var(
---system-spectrum-actionbutton-content-color-hover
-);--spectrum-actionbutton-content-color-down:var(
---system-spectrum-actionbutton-content-color-down
-);--spectrum-actionbutton-content-color-focus:var(
---system-spectrum-actionbutton-content-color-focus
 );--spectrum-actionbutton-background-color-disabled:var(
@@ -253,11 +285,3 @@ --system-spectrum-actionbutton-background-color-disabled
 --system-spectrum-actionbutton-quiet-border-color-disabled
-)}:host([selected]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-selected-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-selected-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-selected-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-selected-background-color-focus
-);--spectrum-actionbutton-border-color-default:var(
+)}:host([selected]){--spectrum-actionbutton-border-color-default:var(
 --system-spectrum-actionbutton-selected-border-color-default
@@ -270,10 +294,2 @@ );--spectrum-actionbutton-border-color-hover:var(
 --system-spectrum-actionbutton-selected-border-color-focus
-);--spectrum-actionbutton-content-color-default:var(
---system-spectrum-actionbutton-selected-content-color-default
-);--spectrum-actionbutton-content-color-hover:var(
---system-spectrum-actionbutton-selected-content-color-hover
-);--spectrum-actionbutton-content-color-down:var(
---system-spectrum-actionbutton-selected-content-color-down
-);--spectrum-actionbutton-content-color-focus:var(
---system-spectrum-actionbutton-selected-content-color-focus
 );--spectrum-actionbutton-background-color-disabled:var(
@@ -283,11 +299,3 @@ --system-spectrum-actionbutton-selected-background-color-disabled
 --system-spectrum-actionbutton-selected-border-color-disabled
-)}:host([selected][emphasized]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-focus
-)}:host([variant=black][quiet]){--spectrum-actionbutton-border-color-default:var(
+)}:host([static=black][quiet]){--spectrum-actionbutton-border-color-default:var(
 --system-spectrum-actionbutton-staticblack-quiet-border-color-default
@@ -302,3 +310,3 @@ );--spectrum-actionbutton-border-color-hover:var(
 --system-spectrum-actionbutton-staticblack-quiet-border-color-disabled
-)}:host([variant=white][quiet]){--spectrum-actionbutton-border-color-default:var(
+)}:host([static=white][quiet]){--spectrum-actionbutton-border-color-default:var(
 --system-spectrum-actionbutton-staticwhite-quiet-border-color-default
@@ -313,3 +321,3 @@ );--spectrum-actionbutton-border-color-hover:var(
 --system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled
-)}:host([variant=black]){--spectrum-actionbutton-background-color-default:var(
+)}:host([static=black]){--spectrum-actionbutton-background-color-default:var(
 --system-spectrum-actionbutton-staticblack-background-color-default
@@ -346,31 +354,31 @@ );--spectrum-actionbutton-background-color-hover:var(
 --system-spectrum-actionbutton-staticblack-content-color-disabled
-)}:host([variant=black][selected]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-focus
-);--spectrum-actionbutton-border-color-disabled:var(
---system-spectrum-actionbutton-staticblack-selected-border-color-disabled
-);--spectrum-actionbutton-content-color-default:var(
+)}:host([static=black][selected]){--mod-actionbutton-background-color-default:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default
+);--mod-actionbutton-background-color-hover:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover
+);--mod-actionbutton-background-color-down:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down
+);--mod-actionbutton-background-color-focus:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus
+);--mod-actionbutton-content-color-default:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-default
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default
 )
-);--spectrum-actionbutton-content-color-hover:var(
+);--mod-actionbutton-content-color-hover:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-hover
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover
 )
-);--spectrum-actionbutton-content-color-down:var(
+);--mod-actionbutton-content-color-down:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-down
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down
 )
-);--spectrum-actionbutton-content-color-focus:var(
+);--mod-actionbutton-content-color-focus:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-focus
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus
 )
-);--spectrum-actionbutton-background-color-disabled:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-disabled
-)}:host([variant=white]){--spectrum-actionbutton-background-color-default:var(
+);--mod-actionbutton-background-color-disabled:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled
+);--mod-actionbutton-border-color-disabled:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled
+)}:host([static=white]){--spectrum-actionbutton-background-color-default:var(
 --system-spectrum-actionbutton-staticwhite-background-color-default
@@ -407,30 +415,30 @@ );--spectrum-actionbutton-background-color-hover:var(
 --system-spectrum-actionbutton-staticwhite-content-color-disabled
-)}:host([variant=white][selected]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-focus
-);--spectrum-actionbutton-content-color-default:var(
+)}:host([static=white][selected]){--mod-actionbutton-background-color-default:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default
+);--mod-actionbutton-background-color-hover:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover
+);--mod-actionbutton-background-color-down:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down
+);--mod-actionbutton-background-color-focus:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus
+);--mod-actionbutton-content-color-default:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-default
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default
 )
-);--spectrum-actionbutton-content-color-hover:var(
+);--mod-actionbutton-content-color-hover:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-hover
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover
 )
-);--spectrum-actionbutton-content-color-down:var(
+);--mod-actionbutton-content-color-down:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-down
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down
 )
-);--spectrum-actionbutton-content-color-focus:var(
+);--mod-actionbutton-content-color-focus:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-focus
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus
 )
-);--spectrum-actionbutton-background-color-disabled:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-disabled
-);--spectrum-actionbutton-border-color-disabled:var(
---system-spectrum-actionbutton-staticwhite-selected-border-color-disabled
+);--mod-actionbutton-background-color-disabled:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled
+);--mod-actionbutton-border-color-disabled:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled
 )}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);pointer-events:none!important;text-align:var(--spectrum-actionbutton-label-text-align)}:host([size=xs]){min-width:var(--spectrum-actionbutton-height,0)}@media (forced-colors:active){:host{--highcontrast-actionbutton-border-color-disabled:GrayText;--highcontrast-actionbutton-content-color-disabled:GrayText}}
@@ -437,0 +445,0 @@ `;

src/action-button.css.js

@@ -14,3 +14,11 @@ "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
 --spectrum-animation-duration-100
-);--spectrum-actionbutton-border-radius:var(--spectrum-corner-radius-100);--spectrum-actionbutton-border-width:var(--spectrum-border-width-100);--spectrum-actionbutton-focus-indicator-gap:var(
+);--spectrum-actionbutton-border-radius:var(--spectrum-corner-radius-100);--spectrum-actionbutton-border-width:var(--spectrum-border-width-100);--spectrum-actionbutton-content-color-default:var(
+--spectrum-neutral-content-color-default
+);--spectrum-actionbutton-content-color-hover:var(
+--spectrum-neutral-content-color-hover
+);--spectrum-actionbutton-content-color-down:var(
+--spectrum-neutral-content-color-down
+);--spectrum-actionbutton-content-color-focus:var(
+--spectrum-neutral-content-color-key-focus
+);--spectrum-actionbutton-focus-indicator-gap:var(
 --spectrum-focus-indicator-gap
@@ -21,3 +29,35 @@ );--spectrum-actionbutton-focus-indicator-thickness:var(
 --spectrum-focus-indicator-color
-);--spectrum-actionbutton-focus-indicator-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
+);--spectrum-actionbutton-focus-indicator-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))}:host([selected]){--mod-actionbutton-background-color-default:var(
+--mod-actionbutton-background-color-default-selected,var(--spectrum-neutral-background-color-selected-default)
+);--mod-actionbutton-background-color-hover:var(
+--mod-actionbutton-background-color-hover-selected,var(--spectrum-neutral-background-color-selected-hover)
+);--mod-actionbutton-background-color-down:var(
+--mod-actionbutton-background-color-down-selected,var(--spectrum-neutral-background-color-selected-down)
+);--mod-actionbutton-background-color-focus:var(
+--mod-actionbutton-background-color-focus-selected,var(--spectrum-neutral-background-color-selected-key-focus)
+);--mod-actionbutton-content-color-default:var(
+--mod-actionbutton-content-color-default-selected,var(--spectrum-gray-50)
+);--mod-actionbutton-content-color-hover:var(
+--mod-actionbutton-content-color-hover-selected,var(--spectrum-gray-50)
+);--mod-actionbutton-content-color-down:var(
+--mod-actionbutton-content-color-down-selected,var(--spectrum-gray-50)
+);--mod-actionbutton-content-color-focus:var(
+--mod-actionbutton-content-color-focus-selected,var(--spectrum-gray-50)
+)}:host([selected][emphasized]){--mod-actionbutton-background-color-default:var(
+--mod-actionbutton-background-color-default-selected-emphasized,var(--spectrum-accent-background-color-default)
+);--mod-actionbutton-background-color-hover:var(
+--mod-actionbutton-background-color-hover-selected-emphasized,var(--spectrum-accent-background-color-hover)
+);--mod-actionbutton-background-color-down:var(
+--mod-actionbutton-background-color-down-selected-emphasized,var(--spectrum-accent-background-color-down)
+);--mod-actionbutton-background-color-focus:var(
+--mod-actionbutton-background-color-focus-selected-emphasized,var(--spectrum-accent-background-color-key-focus)
+);--mod-actionbutton-content-color-default:var(
+--mod-actionbutton-content-color-default-selected-emphasized,var(--spectrum-white)
+);--mod-actionbutton-content-color-hover:var(
+--mod-actionbutton-content-color-hover-selected-emphasized,var(--spectrum-white)
+);--mod-actionbutton-content-color-down:var(
+--mod-actionbutton-content-color-down-selected-emphasized,var(--spectrum-white)
+);--mod-actionbutton-content-color-focus:var(
+--mod-actionbutton-content-color-focus-selected-emphasized,var(--spectrum-white)
+)}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
 --spectrum-action-button-edge-to-hold-icon-extra-small
@@ -155,3 +195,3 @@ );--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(
 var(--spectrum-actionbutton-edge-to-text)
-))}#label{color:inherit;font-size:var(
+))}#label{color:var(--mod-actionbutton-label-color,inherit);font-size:var(
 --mod-actionbutton-font-size,var(--spectrum-actionbutton-font-size)
@@ -216,10 +256,2 @@ );overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=rtl]) .hold-affordance{transform:matrix(-1,0,0,1,0,0)}.hold-affordance{color:inherit;inset-block-end:calc(var(
 --system-spectrum-actionbutton-border-color-focus
-);--spectrum-actionbutton-content-color-default:var(
---system-spectrum-actionbutton-content-color-default
-);--spectrum-actionbutton-content-color-hover:var(
---system-spectrum-actionbutton-content-color-hover
-);--spectrum-actionbutton-content-color-down:var(
---system-spectrum-actionbutton-content-color-down
-);--spectrum-actionbutton-content-color-focus:var(
---system-spectrum-actionbutton-content-color-focus
 );--spectrum-actionbutton-background-color-disabled:var(
@@ -251,11 +283,3 @@ --system-spectrum-actionbutton-background-color-disabled
 --system-spectrum-actionbutton-quiet-border-color-disabled
-)}:host([selected]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-selected-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-selected-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-selected-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-selected-background-color-focus
-);--spectrum-actionbutton-border-color-default:var(
+)}:host([selected]){--spectrum-actionbutton-border-color-default:var(
 --system-spectrum-actionbutton-selected-border-color-default
@@ -268,10 +292,2 @@ );--spectrum-actionbutton-border-color-hover:var(
 --system-spectrum-actionbutton-selected-border-color-focus
-);--spectrum-actionbutton-content-color-default:var(
---system-spectrum-actionbutton-selected-content-color-default
-);--spectrum-actionbutton-content-color-hover:var(
---system-spectrum-actionbutton-selected-content-color-hover
-);--spectrum-actionbutton-content-color-down:var(
---system-spectrum-actionbutton-selected-content-color-down
-);--spectrum-actionbutton-content-color-focus:var(
---system-spectrum-actionbutton-selected-content-color-focus
 );--spectrum-actionbutton-background-color-disabled:var(
@@ -281,11 +297,3 @@ --system-spectrum-actionbutton-selected-background-color-disabled
 --system-spectrum-actionbutton-selected-border-color-disabled
-)}:host([selected][emphasized]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-focus
-)}:host([variant=black][quiet]){--spectrum-actionbutton-border-color-default:var(
+)}:host([static=black][quiet]){--spectrum-actionbutton-border-color-default:var(
 --system-spectrum-actionbutton-staticblack-quiet-border-color-default
@@ -300,3 +308,3 @@ );--spectrum-actionbutton-border-color-hover:var(
 --system-spectrum-actionbutton-staticblack-quiet-border-color-disabled
-)}:host([variant=white][quiet]){--spectrum-actionbutton-border-color-default:var(
+)}:host([static=white][quiet]){--spectrum-actionbutton-border-color-default:var(
 --system-spectrum-actionbutton-staticwhite-quiet-border-color-default
@@ -311,3 +319,3 @@ );--spectrum-actionbutton-border-color-hover:var(
 --system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled
-)}:host([variant=black]){--spectrum-actionbutton-background-color-default:var(
+)}:host([static=black]){--spectrum-actionbutton-background-color-default:var(
 --system-spectrum-actionbutton-staticblack-background-color-default
@@ -344,31 +352,31 @@ );--spectrum-actionbutton-background-color-hover:var(
 --system-spectrum-actionbutton-staticblack-content-color-disabled
-)}:host([variant=black][selected]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-focus
-);--spectrum-actionbutton-border-color-disabled:var(
---system-spectrum-actionbutton-staticblack-selected-border-color-disabled
-);--spectrum-actionbutton-content-color-default:var(
+)}:host([static=black][selected]){--mod-actionbutton-background-color-default:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default
+);--mod-actionbutton-background-color-hover:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover
+);--mod-actionbutton-background-color-down:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down
+);--mod-actionbutton-background-color-focus:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus
+);--mod-actionbutton-content-color-default:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-default
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default
 )
-);--spectrum-actionbutton-content-color-hover:var(
+);--mod-actionbutton-content-color-hover:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-hover
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover
 )
-);--spectrum-actionbutton-content-color-down:var(
+);--mod-actionbutton-content-color-down:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-down
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down
 )
-);--spectrum-actionbutton-content-color-focus:var(
+);--mod-actionbutton-content-color-focus:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-focus
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus
 )
-);--spectrum-actionbutton-background-color-disabled:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-disabled
-)}:host([variant=white]){--spectrum-actionbutton-background-color-default:var(
+);--mod-actionbutton-background-color-disabled:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled
+);--mod-actionbutton-border-color-disabled:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled
+)}:host([static=white]){--spectrum-actionbutton-background-color-default:var(
 --system-spectrum-actionbutton-staticwhite-background-color-default
@@ -405,32 +413,32 @@ );--spectrum-actionbutton-background-color-hover:var(
 --system-spectrum-actionbutton-staticwhite-content-color-disabled
-)}:host([variant=white][selected]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-focus
-);--spectrum-actionbutton-content-color-default:var(
+)}:host([static=white][selected]){--mod-actionbutton-background-color-default:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default
+);--mod-actionbutton-background-color-hover:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover
+);--mod-actionbutton-background-color-down:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down
+);--mod-actionbutton-background-color-focus:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus
+);--mod-actionbutton-content-color-default:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-default
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default
 )
-);--spectrum-actionbutton-content-color-hover:var(
+);--mod-actionbutton-content-color-hover:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-hover
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover
 )
-);--spectrum-actionbutton-content-color-down:var(
+);--mod-actionbutton-content-color-down:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-down
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down
 )
-);--spectrum-actionbutton-content-color-focus:var(
+);--mod-actionbutton-content-color-focus:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-focus
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus
 )
-);--spectrum-actionbutton-background-color-disabled:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-disabled
-);--spectrum-actionbutton-border-color-disabled:var(
---system-spectrum-actionbutton-staticwhite-selected-border-color-disabled
+);--mod-actionbutton-background-color-disabled:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled
+);--mod-actionbutton-border-color-disabled:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled
 )}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);pointer-events:none!important;text-align:var(--spectrum-actionbutton-label-text-align)}:host([size=xs]){min-width:var(--spectrum-actionbutton-height,0)}@media (forced-colors:active){:host{--highcontrast-actionbutton-border-color-disabled:GrayText;--highcontrast-actionbutton-content-color-disabled:GrayText}}
 `;export default o;
 //# sourceMappingURL=action-button.css.js.map

src/ActionButton.d.ts

@@ -39,2 +39,3 @@ import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
     toggles: boolean;
+    static?: 'white' | 'black';
     variant?: 'white' | 'black';
@@ -41,0 +42,0 @@ get value(): string;

src/ActionButton.dev.js

@@ -174,2 +174,12 @@ "use strict";
     }
+    if (changes.has("variant") && (this.variant || typeof changes.get("variant"))) {
+      this.static = this.variant;
+      if (true) {
+        window.__swc.warn(
+          this,
+          `The "variant" attribute/property of <${this.localName}> have been deprecated. Use "static" with any of the same values instead. "variant" will be removed in a future release.`,
+          "https://opensource.adobe.com/spectrum-web-components/components/badge/#fixed"
+        );
+      }
+    }
   }
@@ -197,2 +207,5 @@ }
   property({ reflect: true })
+], ActionButton.prototype, "static", 2);
+__decorateClass([
+  property({ reflect: true })
 ], ActionButton.prototype, "variant", 2);
@@ -199,0 +212,0 @@ __decorateClass([

src/ActionButton.js

@@ -5,3 +5,3 @@ "use strict";var u=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var s=(n,o,e,t)=>{for(var r=t>1?void 0:t?d(o,e):o,a=n.length-1,l;a>=0;a--)(l=n[a])&&(r=(t?l(o,e,r):l(r))||r);return t&&r&&u(o,e,r),r};import{html as c,SizedMixin as h}from"@spectrum-web-components/base";import{property as i}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as f}from"@spectrum-web-components/button";import v from"./action-button.css.js";import b from"@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js";const m={xs:"spectrum-UIIcon-CornerTriangle75",s:"spectrum-UIIcon-CornerTriangle75",m:"spectrum-UIIcon-CornerTriangle100",l:"spectrum-UIIcon-CornerTriangle200",xl:"spectrum-UIIcon-CornerTriangle300"};export const LONGPRESS_DURATION=300;let p;export class ActionButton extends h(f,{validSizes:["xs","s","m","l","xl"]}){constructor(){super();this.emphasized=!1;this.holdAffordance=!1;this.quiet=!1;this.role="button";this.selected=!1;this.toggles=!1;this._value="";this.onClick=()=>{if(!this.toggles)return;this.selected=!this.selected,this.dispatchEvent(new Event("change",{cancelable:!0}))||(this.selected=!this.selected)};this.addEventListener("click",this.onClick),this.addEventListener("pointerdown",this.onPointerdown)}static get styles(){return[...super.styles,v,b]}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return(this.textContent||"").trim()}onPointerdown(e){e.button===0&&(this.addEventListener("pointerup",this.onPointerup),this.addEventListener("pointercancel",this.onPointerup),p=setTimeout(()=>{this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},LONGPRESS_DURATION))}onPointerup(){clearTimeout(p),this.removeEventListener("pointerup",this.onPointerup),this.removeEventListener("pointercancel",this.onPointerup)}handleKeydown(e){if(!this.holdAffordance)return super.handleKeydown(e);const{code:t,altKey:r}=e;(t==="Space"||r&&t==="ArrowDown")&&(e.preventDefault(),t==="ArrowDown"&&(e.stopPropagation(),e.stopImmediatePropagation()),this.addEventListener("keyup",this.handleKeyup),this.active=!0)}handleKeyup(e){if(!this.holdAffordance)return super.handleKeyup(e);const{code:t,altKey:r}=e;(t==="Space"||r&&t==="ArrowDown")&&(e.stopPropagation(),this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"keyboard"}})),this.active=!1)}get buttonContent(){const e=super.buttonContent;return this.holdAffordance&&e.unshift(c`
                 ></sp-icon-corner-triangle300>
-            `),e}updated(e){super.updated(e);const t=this.role==="button",r=t&&(this.selected||this.toggles)&&!(this.hasAttribute("aria-haspopup")&&this.hasAttribute("aria-expanded"));(e.has("selected")||e.has("role"))&&(r?this.setAttribute("aria-pressed",this.selected?"true":"false"):(this.removeAttribute("aria-pressed"),t&&this.toggles&&this.hasAttribute("aria-expanded")&&this.setAttribute("aria-expanded",this.selected?"true":"false")))}}s([i({type:Boolean,reflect:!0})],ActionButton.prototype,"emphasized",2),s([i({type:Boolean,reflect:!0,attribute:"hold-affordance"})],ActionButton.prototype,"holdAffordance",2),s([i({type:Boolean,reflect:!0})],ActionButton.prototype,"quiet",2),s([i({reflect:!0})],ActionButton.prototype,"role",2),s([i({type:Boolean,reflect:!0})],ActionButton.prototype,"selected",2),s([i({type:Boolean,reflect:!0})],ActionButton.prototype,"toggles",2),s([i({reflect:!0})],ActionButton.prototype,"variant",2),s([i({type:String})],ActionButton.prototype,"value",1);
+            `),e}updated(e){super.updated(e);const t=this.role==="button",r=t&&(this.selected||this.toggles)&&!(this.hasAttribute("aria-haspopup")&&this.hasAttribute("aria-expanded"));(e.has("selected")||e.has("role"))&&(r?this.setAttribute("aria-pressed",this.selected?"true":"false"):(this.removeAttribute("aria-pressed"),t&&this.toggles&&this.hasAttribute("aria-expanded")&&this.setAttribute("aria-expanded",this.selected?"true":"false"))),e.has("variant")&&(this.variant||typeof e.get("variant"))&&(this.static=this.variant)}}s([i({type:Boolean,reflect:!0})],ActionButton.prototype,"emphasized",2),s([i({type:Boolean,reflect:!0,attribute:"hold-affordance"})],ActionButton.prototype,"holdAffordance",2),s([i({type:Boolean,reflect:!0})],ActionButton.prototype,"quiet",2),s([i({reflect:!0})],ActionButton.prototype,"role",2),s([i({type:Boolean,reflect:!0})],ActionButton.prototype,"selected",2),s([i({type:Boolean,reflect:!0})],ActionButton.prototype,"toggles",2),s([i({reflect:!0})],ActionButton.prototype,"static",2),s([i({reflect:!0})],ActionButton.prototype,"variant",2),s([i({type:String})],ActionButton.prototype,"value",1);
 //# sourceMappingURL=ActionButton.js.map

src/spectrum-action-button.css.dev.js

@@ -16,3 +16,11 @@ "use strict";
 --spectrum-animation-duration-100
-);--spectrum-actionbutton-border-radius:var(--spectrum-corner-radius-100);--spectrum-actionbutton-border-width:var(--spectrum-border-width-100);--spectrum-actionbutton-focus-indicator-gap:var(
+);--spectrum-actionbutton-border-radius:var(--spectrum-corner-radius-100);--spectrum-actionbutton-border-width:var(--spectrum-border-width-100);--spectrum-actionbutton-content-color-default:var(
+--spectrum-neutral-content-color-default
+);--spectrum-actionbutton-content-color-hover:var(
+--spectrum-neutral-content-color-hover
+);--spectrum-actionbutton-content-color-down:var(
+--spectrum-neutral-content-color-down
+);--spectrum-actionbutton-content-color-focus:var(
+--spectrum-neutral-content-color-key-focus
+);--spectrum-actionbutton-focus-indicator-gap:var(
 --spectrum-focus-indicator-gap
@@ -23,3 +31,35 @@ );--spectrum-actionbutton-focus-indicator-thickness:var(
 --spectrum-focus-indicator-color
-);--spectrum-actionbutton-focus-indicator-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
+);--spectrum-actionbutton-focus-indicator-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))}:host([selected]){--mod-actionbutton-background-color-default:var(
+--mod-actionbutton-background-color-default-selected,var(--spectrum-neutral-background-color-selected-default)
+);--mod-actionbutton-background-color-hover:var(
+--mod-actionbutton-background-color-hover-selected,var(--spectrum-neutral-background-color-selected-hover)
+);--mod-actionbutton-background-color-down:var(
+--mod-actionbutton-background-color-down-selected,var(--spectrum-neutral-background-color-selected-down)
+);--mod-actionbutton-background-color-focus:var(
+--mod-actionbutton-background-color-focus-selected,var(--spectrum-neutral-background-color-selected-key-focus)
+);--mod-actionbutton-content-color-default:var(
+--mod-actionbutton-content-color-default-selected,var(--spectrum-gray-50)
+);--mod-actionbutton-content-color-hover:var(
+--mod-actionbutton-content-color-hover-selected,var(--spectrum-gray-50)
+);--mod-actionbutton-content-color-down:var(
+--mod-actionbutton-content-color-down-selected,var(--spectrum-gray-50)
+);--mod-actionbutton-content-color-focus:var(
+--mod-actionbutton-content-color-focus-selected,var(--spectrum-gray-50)
+)}:host([selected][emphasized]){--mod-actionbutton-background-color-default:var(
+--mod-actionbutton-background-color-default-selected-emphasized,var(--spectrum-accent-background-color-default)
+);--mod-actionbutton-background-color-hover:var(
+--mod-actionbutton-background-color-hover-selected-emphasized,var(--spectrum-accent-background-color-hover)
+);--mod-actionbutton-background-color-down:var(
+--mod-actionbutton-background-color-down-selected-emphasized,var(--spectrum-accent-background-color-down)
+);--mod-actionbutton-background-color-focus:var(
+--mod-actionbutton-background-color-focus-selected-emphasized,var(--spectrum-accent-background-color-key-focus)
+);--mod-actionbutton-content-color-default:var(
+--mod-actionbutton-content-color-default-selected-emphasized,var(--spectrum-white)
+);--mod-actionbutton-content-color-hover:var(
+--mod-actionbutton-content-color-hover-selected-emphasized,var(--spectrum-white)
+);--mod-actionbutton-content-color-down:var(
+--mod-actionbutton-content-color-down-selected-emphasized,var(--spectrum-white)
+);--mod-actionbutton-content-color-focus:var(
+--mod-actionbutton-content-color-focus-selected-emphasized,var(--spectrum-white)
+)}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
 --spectrum-action-button-edge-to-hold-icon-extra-small
@@ -157,3 +197,3 @@ );--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(
 var(--spectrum-actionbutton-edge-to-text)
-))}#label{color:inherit;font-size:var(
+))}#label{color:var(--mod-actionbutton-label-color,inherit);font-size:var(
 --mod-actionbutton-font-size,var(--spectrum-actionbutton-font-size)
@@ -218,10 +258,2 @@ );overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=rtl]) .hold-affordance{transform:matrix(-1,0,0,1,0,0)}.hold-affordance{color:inherit;inset-block-end:calc(var(
 --system-spectrum-actionbutton-border-color-focus
-);--spectrum-actionbutton-content-color-default:var(
---system-spectrum-actionbutton-content-color-default
-);--spectrum-actionbutton-content-color-hover:var(
---system-spectrum-actionbutton-content-color-hover
-);--spectrum-actionbutton-content-color-down:var(
---system-spectrum-actionbutton-content-color-down
-);--spectrum-actionbutton-content-color-focus:var(
---system-spectrum-actionbutton-content-color-focus
 );--spectrum-actionbutton-background-color-disabled:var(
@@ -253,11 +285,3 @@ --system-spectrum-actionbutton-background-color-disabled
 --system-spectrum-actionbutton-quiet-border-color-disabled
-)}:host([selected]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-selected-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-selected-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-selected-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-selected-background-color-focus
-);--spectrum-actionbutton-border-color-default:var(
+)}:host([selected]){--spectrum-actionbutton-border-color-default:var(
 --system-spectrum-actionbutton-selected-border-color-default
@@ -270,10 +294,2 @@ );--spectrum-actionbutton-border-color-hover:var(
 --system-spectrum-actionbutton-selected-border-color-focus
-);--spectrum-actionbutton-content-color-default:var(
---system-spectrum-actionbutton-selected-content-color-default
-);--spectrum-actionbutton-content-color-hover:var(
---system-spectrum-actionbutton-selected-content-color-hover
-);--spectrum-actionbutton-content-color-down:var(
---system-spectrum-actionbutton-selected-content-color-down
-);--spectrum-actionbutton-content-color-focus:var(
---system-spectrum-actionbutton-selected-content-color-focus
 );--spectrum-actionbutton-background-color-disabled:var(
@@ -283,11 +299,3 @@ --system-spectrum-actionbutton-selected-background-color-disabled
 --system-spectrum-actionbutton-selected-border-color-disabled
-)}:host([selected][emphasized]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-focus
-)}:host([variant=black][quiet]){--spectrum-actionbutton-border-color-default:var(
+)}:host([static=black][quiet]){--spectrum-actionbutton-border-color-default:var(
 --system-spectrum-actionbutton-staticblack-quiet-border-color-default
@@ -302,3 +310,3 @@ );--spectrum-actionbutton-border-color-hover:var(
 --system-spectrum-actionbutton-staticblack-quiet-border-color-disabled
-)}:host([variant=white][quiet]){--spectrum-actionbutton-border-color-default:var(
+)}:host([static=white][quiet]){--spectrum-actionbutton-border-color-default:var(
 --system-spectrum-actionbutton-staticwhite-quiet-border-color-default
@@ -313,3 +321,3 @@ );--spectrum-actionbutton-border-color-hover:var(
 --system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled
-)}:host([variant=black]){--spectrum-actionbutton-background-color-default:var(
+)}:host([static=black]){--spectrum-actionbutton-background-color-default:var(
 --system-spectrum-actionbutton-staticblack-background-color-default
@@ -346,31 +354,31 @@ );--spectrum-actionbutton-background-color-hover:var(
 --system-spectrum-actionbutton-staticblack-content-color-disabled
-)}:host([variant=black][selected]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-focus
-);--spectrum-actionbutton-border-color-disabled:var(
---system-spectrum-actionbutton-staticblack-selected-border-color-disabled
-);--spectrum-actionbutton-content-color-default:var(
+)}:host([static=black][selected]){--mod-actionbutton-background-color-default:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default
+);--mod-actionbutton-background-color-hover:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover
+);--mod-actionbutton-background-color-down:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down
+);--mod-actionbutton-background-color-focus:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus
+);--mod-actionbutton-content-color-default:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-default
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default
 )
-);--spectrum-actionbutton-content-color-hover:var(
+);--mod-actionbutton-content-color-hover:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-hover
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover
 )
-);--spectrum-actionbutton-content-color-down:var(
+);--mod-actionbutton-content-color-down:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-down
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down
 )
-);--spectrum-actionbutton-content-color-focus:var(
+);--mod-actionbutton-content-color-focus:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-focus
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus
 )
-);--spectrum-actionbutton-background-color-disabled:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-disabled
-)}:host([variant=white]){--spectrum-actionbutton-background-color-default:var(
+);--mod-actionbutton-background-color-disabled:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled
+);--mod-actionbutton-border-color-disabled:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled
+)}:host([static=white]){--spectrum-actionbutton-background-color-default:var(
 --system-spectrum-actionbutton-staticwhite-background-color-default
@@ -407,30 +415,30 @@ );--spectrum-actionbutton-background-color-hover:var(
 --system-spectrum-actionbutton-staticwhite-content-color-disabled
-)}:host([variant=white][selected]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-focus
-);--spectrum-actionbutton-content-color-default:var(
+)}:host([static=white][selected]){--mod-actionbutton-background-color-default:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default
+);--mod-actionbutton-background-color-hover:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover
+);--mod-actionbutton-background-color-down:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down
+);--mod-actionbutton-background-color-focus:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus
+);--mod-actionbutton-content-color-default:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-default
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default
 )
-);--spectrum-actionbutton-content-color-hover:var(
+);--mod-actionbutton-content-color-hover:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-hover
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover
 )
-);--spectrum-actionbutton-content-color-down:var(
+);--mod-actionbutton-content-color-down:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-down
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down
 )
-);--spectrum-actionbutton-content-color-focus:var(
+);--mod-actionbutton-content-color-focus:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-focus
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus
 )
-);--spectrum-actionbutton-background-color-disabled:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-disabled
-);--spectrum-actionbutton-border-color-disabled:var(
---system-spectrum-actionbutton-staticwhite-selected-border-color-disabled
+);--mod-actionbutton-background-color-disabled:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled
+);--mod-actionbutton-border-color-disabled:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled
 )}
@@ -437,0 +445,0 @@ `;

src/spectrum-action-button.css.js

@@ -14,3 +14,11 @@ "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
 --spectrum-animation-duration-100
-);--spectrum-actionbutton-border-radius:var(--spectrum-corner-radius-100);--spectrum-actionbutton-border-width:var(--spectrum-border-width-100);--spectrum-actionbutton-focus-indicator-gap:var(
+);--spectrum-actionbutton-border-radius:var(--spectrum-corner-radius-100);--spectrum-actionbutton-border-width:var(--spectrum-border-width-100);--spectrum-actionbutton-content-color-default:var(
+--spectrum-neutral-content-color-default
+);--spectrum-actionbutton-content-color-hover:var(
+--spectrum-neutral-content-color-hover
+);--spectrum-actionbutton-content-color-down:var(
+--spectrum-neutral-content-color-down
+);--spectrum-actionbutton-content-color-focus:var(
+--spectrum-neutral-content-color-key-focus
+);--spectrum-actionbutton-focus-indicator-gap:var(
 --spectrum-focus-indicator-gap
@@ -21,3 +29,35 @@ );--spectrum-actionbutton-focus-indicator-thickness:var(
 --spectrum-focus-indicator-color
-);--spectrum-actionbutton-focus-indicator-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
+);--spectrum-actionbutton-focus-indicator-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))}:host([selected]){--mod-actionbutton-background-color-default:var(
+--mod-actionbutton-background-color-default-selected,var(--spectrum-neutral-background-color-selected-default)
+);--mod-actionbutton-background-color-hover:var(
+--mod-actionbutton-background-color-hover-selected,var(--spectrum-neutral-background-color-selected-hover)
+);--mod-actionbutton-background-color-down:var(
+--mod-actionbutton-background-color-down-selected,var(--spectrum-neutral-background-color-selected-down)
+);--mod-actionbutton-background-color-focus:var(
+--mod-actionbutton-background-color-focus-selected,var(--spectrum-neutral-background-color-selected-key-focus)
+);--mod-actionbutton-content-color-default:var(
+--mod-actionbutton-content-color-default-selected,var(--spectrum-gray-50)
+);--mod-actionbutton-content-color-hover:var(
+--mod-actionbutton-content-color-hover-selected,var(--spectrum-gray-50)
+);--mod-actionbutton-content-color-down:var(
+--mod-actionbutton-content-color-down-selected,var(--spectrum-gray-50)
+);--mod-actionbutton-content-color-focus:var(
+--mod-actionbutton-content-color-focus-selected,var(--spectrum-gray-50)
+)}:host([selected][emphasized]){--mod-actionbutton-background-color-default:var(
+--mod-actionbutton-background-color-default-selected-emphasized,var(--spectrum-accent-background-color-default)
+);--mod-actionbutton-background-color-hover:var(
+--mod-actionbutton-background-color-hover-selected-emphasized,var(--spectrum-accent-background-color-hover)
+);--mod-actionbutton-background-color-down:var(
+--mod-actionbutton-background-color-down-selected-emphasized,var(--spectrum-accent-background-color-down)
+);--mod-actionbutton-background-color-focus:var(
+--mod-actionbutton-background-color-focus-selected-emphasized,var(--spectrum-accent-background-color-key-focus)
+);--mod-actionbutton-content-color-default:var(
+--mod-actionbutton-content-color-default-selected-emphasized,var(--spectrum-white)
+);--mod-actionbutton-content-color-hover:var(
+--mod-actionbutton-content-color-hover-selected-emphasized,var(--spectrum-white)
+);--mod-actionbutton-content-color-down:var(
+--mod-actionbutton-content-color-down-selected-emphasized,var(--spectrum-white)
+);--mod-actionbutton-content-color-focus:var(
+--mod-actionbutton-content-color-focus-selected-emphasized,var(--spectrum-white)
+)}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
 --spectrum-action-button-edge-to-hold-icon-extra-small
@@ -155,3 +195,3 @@ );--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(
 var(--spectrum-actionbutton-edge-to-text)
-))}#label{color:inherit;font-size:var(
+))}#label{color:var(--mod-actionbutton-label-color,inherit);font-size:var(
 --mod-actionbutton-font-size,var(--spectrum-actionbutton-font-size)
@@ -216,10 +256,2 @@ );overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=rtl]) .hold-affordance{transform:matrix(-1,0,0,1,0,0)}.hold-affordance{color:inherit;inset-block-end:calc(var(
 --system-spectrum-actionbutton-border-color-focus
-);--spectrum-actionbutton-content-color-default:var(
---system-spectrum-actionbutton-content-color-default
-);--spectrum-actionbutton-content-color-hover:var(
---system-spectrum-actionbutton-content-color-hover
-);--spectrum-actionbutton-content-color-down:var(
---system-spectrum-actionbutton-content-color-down
-);--spectrum-actionbutton-content-color-focus:var(
---system-spectrum-actionbutton-content-color-focus
 );--spectrum-actionbutton-background-color-disabled:var(
@@ -251,11 +283,3 @@ --system-spectrum-actionbutton-background-color-disabled
 --system-spectrum-actionbutton-quiet-border-color-disabled
-)}:host([selected]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-selected-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-selected-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-selected-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-selected-background-color-focus
-);--spectrum-actionbutton-border-color-default:var(
+)}:host([selected]){--spectrum-actionbutton-border-color-default:var(
 --system-spectrum-actionbutton-selected-border-color-default
@@ -268,10 +292,2 @@ );--spectrum-actionbutton-border-color-hover:var(
 --system-spectrum-actionbutton-selected-border-color-focus
-);--spectrum-actionbutton-content-color-default:var(
---system-spectrum-actionbutton-selected-content-color-default
-);--spectrum-actionbutton-content-color-hover:var(
---system-spectrum-actionbutton-selected-content-color-hover
-);--spectrum-actionbutton-content-color-down:var(
---system-spectrum-actionbutton-selected-content-color-down
-);--spectrum-actionbutton-content-color-focus:var(
---system-spectrum-actionbutton-selected-content-color-focus
 );--spectrum-actionbutton-background-color-disabled:var(
@@ -281,11 +297,3 @@ --system-spectrum-actionbutton-selected-background-color-disabled
 --system-spectrum-actionbutton-selected-border-color-disabled
-)}:host([selected][emphasized]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-selected-emphasized-background-color-focus
-)}:host([variant=black][quiet]){--spectrum-actionbutton-border-color-default:var(
+)}:host([static=black][quiet]){--spectrum-actionbutton-border-color-default:var(
 --system-spectrum-actionbutton-staticblack-quiet-border-color-default
@@ -300,3 +308,3 @@ );--spectrum-actionbutton-border-color-hover:var(
 --system-spectrum-actionbutton-staticblack-quiet-border-color-disabled
-)}:host([variant=white][quiet]){--spectrum-actionbutton-border-color-default:var(
+)}:host([static=white][quiet]){--spectrum-actionbutton-border-color-default:var(
 --system-spectrum-actionbutton-staticwhite-quiet-border-color-default
@@ -311,3 +319,3 @@ );--spectrum-actionbutton-border-color-hover:var(
 --system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled
-)}:host([variant=black]){--spectrum-actionbutton-background-color-default:var(
+)}:host([static=black]){--spectrum-actionbutton-background-color-default:var(
 --system-spectrum-actionbutton-staticblack-background-color-default
@@ -344,31 +352,31 @@ );--spectrum-actionbutton-background-color-hover:var(
 --system-spectrum-actionbutton-staticblack-content-color-disabled
-)}:host([variant=black][selected]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-focus
-);--spectrum-actionbutton-border-color-disabled:var(
---system-spectrum-actionbutton-staticblack-selected-border-color-disabled
-);--spectrum-actionbutton-content-color-default:var(
+)}:host([static=black][selected]){--mod-actionbutton-background-color-default:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-default
+);--mod-actionbutton-background-color-hover:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover
+);--mod-actionbutton-background-color-down:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down
+);--mod-actionbutton-background-color-focus:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus
+);--mod-actionbutton-content-color-default:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-default
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default
 )
-);--spectrum-actionbutton-content-color-hover:var(
+);--mod-actionbutton-content-color-hover:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-hover
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover
 )
-);--spectrum-actionbutton-content-color-down:var(
+);--mod-actionbutton-content-color-down:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-down
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down
 )
-);--spectrum-actionbutton-content-color-focus:var(
+);--mod-actionbutton-content-color-focus:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticblack-selected-content-color-focus
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus
 )
-);--spectrum-actionbutton-background-color-disabled:var(
---system-spectrum-actionbutton-staticblack-selected-background-color-disabled
-)}:host([variant=white]){--spectrum-actionbutton-background-color-default:var(
+);--mod-actionbutton-background-color-disabled:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled
+);--mod-actionbutton-border-color-disabled:var(
+--system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled
+)}:host([static=white]){--spectrum-actionbutton-background-color-default:var(
 --system-spectrum-actionbutton-staticwhite-background-color-default
@@ -405,32 +413,32 @@ );--spectrum-actionbutton-background-color-hover:var(
 --system-spectrum-actionbutton-staticwhite-content-color-disabled
-)}:host([variant=white][selected]){--spectrum-actionbutton-background-color-default:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-default
-);--spectrum-actionbutton-background-color-hover:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-hover
-);--spectrum-actionbutton-background-color-down:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-down
-);--spectrum-actionbutton-background-color-focus:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-focus
-);--spectrum-actionbutton-content-color-default:var(
+)}:host([static=white][selected]){--mod-actionbutton-background-color-default:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-default
+);--mod-actionbutton-background-color-hover:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover
+);--mod-actionbutton-background-color-down:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down
+);--mod-actionbutton-background-color-focus:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus
+);--mod-actionbutton-content-color-default:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-default
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default
 )
-);--spectrum-actionbutton-content-color-hover:var(
+);--mod-actionbutton-content-color-hover:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-hover
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover
 )
-);--spectrum-actionbutton-content-color-down:var(
+);--mod-actionbutton-content-color-down:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-down
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down
 )
-);--spectrum-actionbutton-content-color-focus:var(
+);--mod-actionbutton-content-color-focus:var(
 --mod-actionbutton-static-content-color,var(
---system-spectrum-actionbutton-staticwhite-selected-content-color-focus
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus
 )
-);--spectrum-actionbutton-background-color-disabled:var(
---system-spectrum-actionbutton-staticwhite-selected-background-color-disabled
-);--spectrum-actionbutton-border-color-disabled:var(
---system-spectrum-actionbutton-staticwhite-selected-border-color-disabled
+);--mod-actionbutton-background-color-disabled:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled
+);--mod-actionbutton-border-color-disabled:var(
+--system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled
 )}
 `;export default o;
 //# sourceMappingURL=spectrum-action-button.css.js.map

src/spectrum-config.js

@@ -55,3 +55,3 @@ // @ts-check
                     ],
-                    'variant'
+                    'static'
                 ),
@@ -58,0 +58,0 @@ ...converter.enumerateAttributes(

stories/index.js

@@ -13,3 +13,3 @@ "use strict";
             ?emphasized="${!!properties.emphasized}"
-            variant="${ifDefined(properties.variant)}"
+            static="${ifDefined(properties.variant)}"
             ?disabled=${!!properties.disabled}
@@ -16,0 +16,0 @@ ?selected=${!!properties.selected}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

415456

increased by2.88%

Lines of code

3379

increased by1.81%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@spectrum-web-components/base@0.35.0(transitive)

• + Added@spectrum-web-components/button@0.35.0(transitive)

• + Added@spectrum-web-components/clear-button@0.35.0(transitive)

• + Added@spectrum-web-components/close-button@0.35.0(transitive)

• + Added@spectrum-web-components/icon@0.35.0(transitive)

• + Added@spectrum-web-components/icons-ui@0.35.0(transitive)

• + Added@spectrum-web-components/iconset@0.35.0(transitive)

• + Added@spectrum-web-components/shared@0.35.0(transitive)

• - Removed@spectrum-web-components/base@0.34.1-rc.0(transitive)

• - Removed@spectrum-web-components/button@0.34.1-rc.0(transitive)

• - Removed@spectrum-web-components/clear-button@0.34.1-rc.0(transitive)

• - Removed@spectrum-web-components/close-button@0.34.1-rc.0(transitive)

• - Removed@spectrum-web-components/icon@0.34.1-rc.0(transitive)

• - Removed@spectrum-web-components/icons-ui@0.34.1-rc.0(transitive)

• - Removed@spectrum-web-components/iconset@0.34.1-rc.0(transitive)

• - Removed@spectrum-web-components/shared@0.34.1-rc.0(transitive)

• Updated@spectrum-web-components/base@^0.35.0

• Updated@spectrum-web-components/button@^0.35.0

• Updated@spectrum-web-components/icon@^0.35.0

• Updated@spectrum-web-components/icons-ui@^0.35.0

• Updated@spectrum-web-components/shared@^0.35.0