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

Comparing version 0.8.4-alpha.28 to 0.8.4-alpha.71

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log
 
+## [0.8.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/button@0.8.3...@spectrum-web-components/button@0.8.4) (2020-08-19)
+
+**Note:** Version bump only for package @spectrum-web-components/button
+
 ## [0.8.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/button@0.8.2...@spectrum-web-components/button@0.8.3) (2020-07-27)
@@ -8,0 +12,0 @@

custom-elements.json

@@ -123,2 +123,12 @@ {
         {
+          "name": "managePresenceObservedSlot",
+          "type": "() => void",
+          "default": "\"(): void => {\\n            this.slotContentIsPresent = !!this.querySelector(lightDomSelector);\\n        }\""
+        },
+        {
+          "name": "slotContentIsPresent",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "disabled",
@@ -147,2 +157,6 @@ "attribute": "disabled",
           "type": "HTMLElement"
+        },
+        {
+          "name": "shadowRoot",
+          "type": "ShadowRoot"
         }
@@ -152,2 +166,6 @@ ],
         {
+          "name": "change",
+          "description": "Announces a change in the `selected` property of an action button"
+        },
+        {
           "name": "keydown"
@@ -272,2 +290,12 @@ }
         {
+          "name": "managePresenceObservedSlot",
+          "type": "() => void",
+          "default": "\"(): void => {\\n            this.slotContentIsPresent = !!this.querySelector(lightDomSelector);\\n        }\""
+        },
+        {
+          "name": "slotContentIsPresent",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "disabled",
@@ -296,2 +324,6 @@ "attribute": "disabled",
           "type": "HTMLElement"
+        },
+        {
+          "name": "shadowRoot",
+          "type": "ShadowRoot"
         }
@@ -393,2 +425,12 @@ ],
         {
+          "name": "managePresenceObservedSlot",
+          "type": "() => void",
+          "default": "\"(): void => {\\n            this.slotContentIsPresent = !!this.querySelector(lightDomSelector);\\n        }\""
+        },
+        {
+          "name": "slotContentIsPresent",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "disabled",
@@ -417,2 +459,6 @@ "attribute": "disabled",
           "type": "HTMLElement"
+        },
+        {
+          "name": "shadowRoot",
+          "type": "ShadowRoot"
         }
@@ -419,0 +465,0 @@ ],

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.8.4-alpha.28+1f7f36f5",
+    "version": "0.8.4-alpha.71+1e82c26e",
     "description": "",
@@ -59,13 +59,12 @@ "main": "src/index.js",
     "devDependencies": {
-        "@spectrum-css/button": "^2.2.0"
+        "@spectrum-css/button": "^3.0.0-beta.3"
     },
     "dependencies": {
-        "@spectrum-web-components/icon": "^0.5.2-alpha.34+1f7f36f5",
-        "@spectrum-web-components/icons-ui": "^0.2.2-alpha.34+1f7f36f5",
-        "@spectrum-web-components/shared": "^0.6.0",
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
+        "@spectrum-web-components/base": "^0.0.2-alpha.1038+1e82c26e",
+        "@spectrum-web-components/icon": "^0.5.2-alpha.77+1e82c26e",
+        "@spectrum-web-components/icons-ui": "^0.2.2-alpha.77+1e82c26e",
+        "@spectrum-web-components/shared": "^0.6.1-alpha.71+1e82c26e",
         "tslib": "^2.0.0"
     },
-    "gitHead": "1f7f36f5bc1bd448f5a5eeb72a72414712e849ff"
+    "gitHead": "1e82c26ee95e858f3c97afd070e1fc9e3905cebd"
 }

src/action-button.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/action-button.css.js

@@ -12,15 +12,18 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-#button{position:relative;height:var(--spectrum-actionbutton-height,var(--spectrum-alias-single-line-height));min-width:var(--spectrum-actionbutton-min-width,var(--spectrum-global-dimension-size-400));padding:0 calc(var(--spectrum-actionbutton-icon-padding-x,
+.button{position:relative;height:var(--spectrum-actionbutton-height,var(--spectrum-alias-single-line-height));min-width:var(--spectrum-actionbutton-min-width,var(--spectrum-global-dimension-size-400));padding:0 calc(var(--spectrum-actionbutton-icon-padding-x,
 var(--spectrum-global-dimension-size-85)) - var(--spectrum-actionbutton-border-size,
-var(--spectrum-alias-border-size-thin)));border-width:var(--spectrum-actionbutton-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-actionbutton-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-text-color,var(--spectrum-alias-text-color))}slot[name=icon]+#label{padding-left:var(--spectrum-actionbutton-icon-padding-x,var(--spectrum-global-dimension-size-85));padding-right:calc(var(--spectrum-actionbutton-text-padding-x,
+var(--spectrum-alias-border-size-thin)));border-width:var(--spectrum-actionbutton-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-actionbutton-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-text-color,var(--spectrum-alias-text-color))}:host([dir=ltr]) .button slot[name=icon]+#label{padding-left:var(--spectrum-actionbutton-icon-padding-x,var(--spectrum-global-dimension-size-85));padding-right:calc(var(--spectrum-actionbutton-text-padding-x,
 var(--spectrum-global-dimension-size-150)) - var(--spectrum-actionbutton-icon-padding-x,
-var(--spectrum-global-dimension-size-85)))}.spectrum-Icon--sizeS:only-child{position:absolute;top:calc(50% - var(--spectrum-actionbutton-icon-size,
-var(--spectrum-alias-workflow-icon-size))/2);left:calc(50% - var(--spectrum-actionbutton-icon-size,
+var(--spectrum-global-dimension-size-85)))}:host([dir=rtl]) .button slot[name=icon]+#label{padding-right:var(--spectrum-actionbutton-icon-padding-x,var(--spectrum-global-dimension-size-85));padding-left:calc(var(--spectrum-actionbutton-text-padding-x,
+var(--spectrum-global-dimension-size-150)) - var(--spectrum-actionbutton-icon-padding-x,
+var(--spectrum-global-dimension-size-85)))}:host([dir=ltr]) .button .spectrum-Icon--sizeS:only-child{left:calc(50% - var(--spectrum-actionbutton-icon-size,
+var(--spectrum-alias-workflow-icon-size))/2)}:host([dir=rtl]) .button .spectrum-Icon--sizeS:only-child{right:calc(50% - var(--spectrum-actionbutton-icon-size,
+var(--spectrum-alias-workflow-icon-size))/2)}.spectrum-Icon--sizeS:only-child{position:absolute;top:calc(50% - var(--spectrum-actionbutton-icon-size,
 var(--spectrum-alias-workflow-icon-size))/2)}#label:only-child{padding:0 calc(var(--spectrum-actionbutton-text-padding-x,
 var(--spectrum-global-dimension-size-150)) - var(--spectrum-actionbutton-icon-padding-x,
-var(--spectrum-global-dimension-size-85)))}#hold-affordance{position:absolute;right:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40));bottom:var(--spectrum-actionbutton-hold-icon-padding-bottom,var(--spectrum-global-dimension-size-40));color:var(--spectrum-actionbutton-hold-icon-color,var(--spectrum-alias-icon-color))}#label{align-self:center;justify-self:center;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#label:empty{display:none}:host([quiet]) #button{border-width:var(--spectrum-actionbutton-quiet-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-alias-text-color))}::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color,var(--spectrum-alias-icon-color))}#button:hover{background-color:var(--spectrum-actionbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}#button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}#button.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}#button:active{background-color:var(--spectrum-actionbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-down,var(--spectrum-alias-text-color-down))}#button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([selected]) #button{background-color:var(--spectrum-actionbutton-background-color-selected,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-alias-icon-color))}:host([selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-selected-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([selected]) #button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:hover{background-color:var(--spectrum-actionbutton-background-color-selected-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-hover,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([selected]) #button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:active{background-color:var(--spectrum-actionbutton-background-color-selected-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([selected]) #button:active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-alias-icon-color-down))}:host([selected][disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([selected][disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 0 0 1px var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-down,var(--spectrum-alias-text-color-down))}:host([quiet][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected,var(--spectrum-alias-text-color))}:host([quiet][selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-key-focus,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-hover,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-hover,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([quiet][selected][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-quiet-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host(.spectrum-Dropdown-trigger) #button{text-align:left}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);text-align:var(--spectrum-actionbutton-label-text-align)}
+var(--spectrum-global-dimension-size-85)))}:host([dir=ltr]) #hold-affordance{right:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) #hold-affordance{left:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40));transform:matrix(-1,0,0,1,0,0)}#hold-affordance{position:absolute;bottom:var(--spectrum-actionbutton-hold-icon-padding-bottom,var(--spectrum-global-dimension-size-40));color:var(--spectrum-actionbutton-hold-icon-color,var(--spectrum-alias-icon-color))}#label{align-self:center;justify-self:center;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#label:empty{display:none}:host([quiet]) .button{border-width:var(--spectrum-actionbutton-quiet-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-alias-text-color))}::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color,var(--spectrum-alias-icon-color))}.button:hover{background-color:var(--spectrum-actionbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}.button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}.button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.button.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}.button:active{background-color:var(--spectrum-actionbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-down,var(--spectrum-alias-border-color-down));color:var(--spectrum-actionbutton-text-color-down,var(--spectrum-alias-text-color-down))}.button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) .button{background-color:var(--spectrum-actionbutton-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) .button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) .button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([selected]) .button{background-color:var(--spectrum-actionbutton-background-color-selected,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) .button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-alias-icon-color))}:host([selected]) .button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-selected-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([selected]) .button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-hover))}:host([selected]) .button:hover{background-color:var(--spectrum-actionbutton-background-color-selected-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([selected]) .button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]) .button:active{background-color:var(--spectrum-actionbutton-background-color-selected-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-down,var(--spectrum-alias-border-color-down));color:var(--spectrum-actionbutton-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([selected]) .button:active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-alias-icon-color-down))}:host([selected][disabled]) .button{background-color:var(--spectrum-actionbutton-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([selected][disabled]) .button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}.spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-actionbutton-emphasized-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-emphasized-text-color,var(--spectrum-alias-text-color))}.spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color,var(--spectrum-alias-icon-color))}.spectrum-ActionButton--emphasized #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color,var(--spectrum-alias-icon-color))}:host([selected]) .spectrum-ActionButton--emphasized #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-selected,var(--spectrum-global-color-static-white))}:host([selected]) .spectrum-ActionButton--emphasized:hover #hold-affordance{color:var(--spectrum-actionbutton-emphasized-text-color-selected-hover,var(--spectrum-global-color-static-white))}.spectrum-ActionButton--emphasized:hover{background-color:var(--spectrum-actionbutton-emphasized-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-emphasized-border-color-hover,var(--spectrum-alias-border-color-hover));box-shadow:none;color:var(--spectrum-actionbutton-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}.spectrum-ActionButton--emphasized:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.spectrum-ActionButton--emphasized:hover #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.spectrum-ActionButton--emphasized.focus-visible{background-color:var(--spectrum-actionbutton-emphasized-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-emphasized-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-emphasized-text-color-key-focus,var(--spectrum-alias-text-color-hover))}.spectrum-ActionButton--emphasized.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.spectrum-ActionButton--emphasized.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}.spectrum-ActionButton--emphasized.is-active{background-color:var(--spectrum-actionbutton-emphasized-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-emphasized-border-color-down,var(--spectrum-alias-border-color-down));box-shadow:none;color:var(--spectrum-actionbutton-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}.spectrum-ActionButton--emphasized.is-active #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) .spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-emphasized-border-color-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) .spectrum-ActionButton--emphasized #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet][selected]) .spectrum-ActionButton--emphasized,:host([selected]) .spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected,var(--spectrum-semantic-cta-color-background-default));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected,var(--spectrum-semantic-cta-color-background-default));color:var(--spectrum-actionbutton-emphasized-text-color-selected,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.focus-visible,:host([selected]) .spectrum-ActionButton--emphasized.focus-visible{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-actionbutton-emphasized-text-color-selected-key-focus,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.focus-visible ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-key-focus,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized:hover,:host([selected]) .spectrum-ActionButton--emphasized:hover{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-hover,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-hover,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-actionbutton-emphasized-text-color-selected-hover,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized:hover ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-hover,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.is-active,:host([selected]) .spectrum-ActionButton--emphasized.is-active{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-down,var(--spectrum-semantic-cta-color-background-down));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-down,var(--spectrum-semantic-cta-color-background-down));color:var(--spectrum-actionbutton-emphasized-text-color-selected-down,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.is-active ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized.is-active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-down,var(--spectrum-global-color-static-white))}:host([quiet][selected][disabled]) .spectrum-ActionButton--emphasized,:host([selected][disabled]) .spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-emphasized-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected][disabled]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]),:host([selected][disabled]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) .button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) .button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 0 0 1px var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet]) .button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-down,var(--spectrum-alias-text-color-down))}:host([quiet][disabled]) .button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected]) .button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-quiet-text-color-selected,var(--spectrum-alias-text-color))}:host([quiet][selected]) .button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-key-focus,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) .button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-hover,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-quiet-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) .button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-down,var(--spectrum-alias-border-color-down));color:var(--spectrum-actionbutton-quiet-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([quiet][selected][disabled]) .button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-quiet-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host(.spectrum-Dropdown-trigger) #button{text-align:left}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);text-align:var(--spectrum-actionbutton-label-text-align)}
 `;
 export default styles;
 //# sourceMappingURL=action-button.css.js.map

src/action-button.css.ts

@@ -12,14 +12,17 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-#button{position:relative;height:var(--spectrum-actionbutton-height,var(--spectrum-alias-single-line-height));min-width:var(--spectrum-actionbutton-min-width,var(--spectrum-global-dimension-size-400));padding:0 calc(var(--spectrum-actionbutton-icon-padding-x,
+.button{position:relative;height:var(--spectrum-actionbutton-height,var(--spectrum-alias-single-line-height));min-width:var(--spectrum-actionbutton-min-width,var(--spectrum-global-dimension-size-400));padding:0 calc(var(--spectrum-actionbutton-icon-padding-x,
 var(--spectrum-global-dimension-size-85)) - var(--spectrum-actionbutton-border-size,
-var(--spectrum-alias-border-size-thin)));border-width:var(--spectrum-actionbutton-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-actionbutton-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-text-color,var(--spectrum-alias-text-color))}slot[name=icon]+#label{padding-left:var(--spectrum-actionbutton-icon-padding-x,var(--spectrum-global-dimension-size-85));padding-right:calc(var(--spectrum-actionbutton-text-padding-x,
+var(--spectrum-alias-border-size-thin)));border-width:var(--spectrum-actionbutton-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-actionbutton-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-text-color,var(--spectrum-alias-text-color))}:host([dir=ltr]) .button slot[name=icon]+#label{padding-left:var(--spectrum-actionbutton-icon-padding-x,var(--spectrum-global-dimension-size-85));padding-right:calc(var(--spectrum-actionbutton-text-padding-x,
 var(--spectrum-global-dimension-size-150)) - var(--spectrum-actionbutton-icon-padding-x,
-var(--spectrum-global-dimension-size-85)))}.spectrum-Icon--sizeS:only-child{position:absolute;top:calc(50% - var(--spectrum-actionbutton-icon-size,
-var(--spectrum-alias-workflow-icon-size))/2);left:calc(50% - var(--spectrum-actionbutton-icon-size,
+var(--spectrum-global-dimension-size-85)))}:host([dir=rtl]) .button slot[name=icon]+#label{padding-right:var(--spectrum-actionbutton-icon-padding-x,var(--spectrum-global-dimension-size-85));padding-left:calc(var(--spectrum-actionbutton-text-padding-x,
+var(--spectrum-global-dimension-size-150)) - var(--spectrum-actionbutton-icon-padding-x,
+var(--spectrum-global-dimension-size-85)))}:host([dir=ltr]) .button .spectrum-Icon--sizeS:only-child{left:calc(50% - var(--spectrum-actionbutton-icon-size,
+var(--spectrum-alias-workflow-icon-size))/2)}:host([dir=rtl]) .button .spectrum-Icon--sizeS:only-child{right:calc(50% - var(--spectrum-actionbutton-icon-size,
+var(--spectrum-alias-workflow-icon-size))/2)}.spectrum-Icon--sizeS:only-child{position:absolute;top:calc(50% - var(--spectrum-actionbutton-icon-size,
 var(--spectrum-alias-workflow-icon-size))/2)}#label:only-child{padding:0 calc(var(--spectrum-actionbutton-text-padding-x,
 var(--spectrum-global-dimension-size-150)) - var(--spectrum-actionbutton-icon-padding-x,
-var(--spectrum-global-dimension-size-85)))}#hold-affordance{position:absolute;right:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40));bottom:var(--spectrum-actionbutton-hold-icon-padding-bottom,var(--spectrum-global-dimension-size-40));color:var(--spectrum-actionbutton-hold-icon-color,var(--spectrum-alias-icon-color))}#label{align-self:center;justify-self:center;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#label:empty{display:none}:host([quiet]) #button{border-width:var(--spectrum-actionbutton-quiet-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-alias-text-color))}::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color,var(--spectrum-alias-icon-color))}#button:hover{background-color:var(--spectrum-actionbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}#button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}#button.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}#button:active{background-color:var(--spectrum-actionbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-down,var(--spectrum-alias-text-color-down))}#button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([selected]) #button{background-color:var(--spectrum-actionbutton-background-color-selected,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-alias-icon-color))}:host([selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-selected-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([selected]) #button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:hover{background-color:var(--spectrum-actionbutton-background-color-selected-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-hover,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([selected]) #button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:active{background-color:var(--spectrum-actionbutton-background-color-selected-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([selected]) #button:active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-alias-icon-color-down))}:host([selected][disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([selected][disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 0 0 1px var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-down,var(--spectrum-alias-text-color-down))}:host([quiet][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected,var(--spectrum-alias-text-color))}:host([quiet][selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-key-focus,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-hover,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-hover,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([quiet][selected][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-quiet-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host(.spectrum-Dropdown-trigger) #button{text-align:left}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);text-align:var(--spectrum-actionbutton-label-text-align)}
+var(--spectrum-global-dimension-size-85)))}:host([dir=ltr]) #hold-affordance{right:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) #hold-affordance{left:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40));transform:matrix(-1,0,0,1,0,0)}#hold-affordance{position:absolute;bottom:var(--spectrum-actionbutton-hold-icon-padding-bottom,var(--spectrum-global-dimension-size-40));color:var(--spectrum-actionbutton-hold-icon-color,var(--spectrum-alias-icon-color))}#label{align-self:center;justify-self:center;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#label:empty{display:none}:host([quiet]) .button{border-width:var(--spectrum-actionbutton-quiet-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-alias-text-color))}::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color,var(--spectrum-alias-icon-color))}.button:hover{background-color:var(--spectrum-actionbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}.button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}.button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.button.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}.button:active{background-color:var(--spectrum-actionbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-down,var(--spectrum-alias-border-color-down));color:var(--spectrum-actionbutton-text-color-down,var(--spectrum-alias-text-color-down))}.button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) .button{background-color:var(--spectrum-actionbutton-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) .button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) .button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([selected]) .button{background-color:var(--spectrum-actionbutton-background-color-selected,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) .button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-alias-icon-color))}:host([selected]) .button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-selected-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([selected]) .button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-hover))}:host([selected]) .button:hover{background-color:var(--spectrum-actionbutton-background-color-selected-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([selected]) .button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]) .button:active{background-color:var(--spectrum-actionbutton-background-color-selected-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-down,var(--spectrum-alias-border-color-down));color:var(--spectrum-actionbutton-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([selected]) .button:active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-alias-icon-color-down))}:host([selected][disabled]) .button{background-color:var(--spectrum-actionbutton-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([selected][disabled]) .button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}.spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-actionbutton-emphasized-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-emphasized-text-color,var(--spectrum-alias-text-color))}.spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color,var(--spectrum-alias-icon-color))}.spectrum-ActionButton--emphasized #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color,var(--spectrum-alias-icon-color))}:host([selected]) .spectrum-ActionButton--emphasized #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-selected,var(--spectrum-global-color-static-white))}:host([selected]) .spectrum-ActionButton--emphasized:hover #hold-affordance{color:var(--spectrum-actionbutton-emphasized-text-color-selected-hover,var(--spectrum-global-color-static-white))}.spectrum-ActionButton--emphasized:hover{background-color:var(--spectrum-actionbutton-emphasized-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-emphasized-border-color-hover,var(--spectrum-alias-border-color-hover));box-shadow:none;color:var(--spectrum-actionbutton-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}.spectrum-ActionButton--emphasized:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.spectrum-ActionButton--emphasized:hover #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.spectrum-ActionButton--emphasized.focus-visible{background-color:var(--spectrum-actionbutton-emphasized-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-emphasized-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-emphasized-text-color-key-focus,var(--spectrum-alias-text-color-hover))}.spectrum-ActionButton--emphasized.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.spectrum-ActionButton--emphasized.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}.spectrum-ActionButton--emphasized.is-active{background-color:var(--spectrum-actionbutton-emphasized-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-emphasized-border-color-down,var(--spectrum-alias-border-color-down));box-shadow:none;color:var(--spectrum-actionbutton-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}.spectrum-ActionButton--emphasized.is-active #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) .spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-emphasized-border-color-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) .spectrum-ActionButton--emphasized #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet][selected]) .spectrum-ActionButton--emphasized,:host([selected]) .spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected,var(--spectrum-semantic-cta-color-background-default));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected,var(--spectrum-semantic-cta-color-background-default));color:var(--spectrum-actionbutton-emphasized-text-color-selected,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.focus-visible,:host([selected]) .spectrum-ActionButton--emphasized.focus-visible{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-actionbutton-emphasized-text-color-selected-key-focus,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.focus-visible ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-key-focus,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized:hover,:host([selected]) .spectrum-ActionButton--emphasized:hover{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-hover,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-hover,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-actionbutton-emphasized-text-color-selected-hover,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized:hover ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-hover,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.is-active,:host([selected]) .spectrum-ActionButton--emphasized.is-active{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-down,var(--spectrum-semantic-cta-color-background-down));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-down,var(--spectrum-semantic-cta-color-background-down));color:var(--spectrum-actionbutton-emphasized-text-color-selected-down,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.is-active ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized.is-active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-down,var(--spectrum-global-color-static-white))}:host([quiet][selected][disabled]) .spectrum-ActionButton--emphasized,:host([selected][disabled]) .spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-emphasized-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected][disabled]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]),:host([selected][disabled]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) .button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) .button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 0 0 1px var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet]) .button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-down,var(--spectrum-alias-text-color-down))}:host([quiet][disabled]) .button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected]) .button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-quiet-text-color-selected,var(--spectrum-alias-text-color))}:host([quiet][selected]) .button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-key-focus,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) .button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-hover,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-quiet-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) .button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-down,var(--spectrum-alias-border-color-down));color:var(--spectrum-actionbutton-quiet-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([quiet][selected][disabled]) .button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-quiet-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host(.spectrum-Dropdown-trigger) #button{text-align:left}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);text-align:var(--spectrum-actionbutton-label-text-align)}
 `;
 export default styles;

src/ActionButton.d.ts

@@ -1,3 +0,8 @@
-import { CSSResultArray, PropertyValues } from 'lit-element';
+import { CSSResultArray, PropertyValues } from '@spectrum-web-components/base';
 import { ButtonBase } from './ButtonBase.js';
+/**
+ * @element sp-card
+ *
+ * @fires change - Announces a change in the `selected` property of an action button
+ */
 export declare class ActionButton extends ButtonBase {
@@ -4,0 +9,0 @@ static get styles(): CSSResultArray;

src/ActionButton.js

@@ -13,5 +13,10 @@ /*
 import { __decorate } from "tslib";
-import { property } from 'lit-element';
+import { property, } from '@spectrum-web-components/base';
 import { ButtonBase } from './ButtonBase.js';
 import buttonStyles from './action-button.css.js';
+/**
+ * @element sp-card
+ *
+ * @fires change - Announces a change in the `selected` property of an action button
+ */
 export class ActionButton extends ButtonBase {
@@ -29,2 +34,8 @@ constructor() {
             this.selected = !this.selected;
+            const applyDefault = this.dispatchEvent(new Event('change', {
+                cancelable: true,
+            }));
+            if (!applyDefault) {
+                this.selected = !this.selected;
+            }
         };
@@ -31,0 +42,0 @@ this.addEventListener('click', this.onClick);

src/ActionButton.ts

@@ -13,6 +13,15 @@ /*
 
-import { CSSResultArray, property, PropertyValues } from 'lit-element';
+import {
+    CSSResultArray,
+    property,
+    PropertyValues,
+} from '@spectrum-web-components/base';
 import { ButtonBase } from './ButtonBase.js';
 import buttonStyles from './action-button.css.js';
 
+/**
+ * @element sp-card
+ *
+ * @fires change - Announces a change in the `selected` property of an action button
+ */
 export class ActionButton extends ButtonBase {
@@ -45,2 +54,10 @@ public static get styles(): CSSResultArray {
         this.selected = !this.selected;
+        const applyDefault = this.dispatchEvent(
+            new Event('change', {
+                cancelable: true,
+            })
+        );
+        if (!applyDefault) {
+            this.selected = !this.selected;
+        }
     };
@@ -47,0 +64,0 @@

src/button-base.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/button-base.css.js

@@ -12,7 +12,7 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-#button{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;overflow:visible;margin:0;border-style:solid;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:1.3;cursor:pointer}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}::slotted([slot=icon]){max-height:100%;flex-shrink:0}:host{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}slot[name=icon]::slotted(svg){fill:currentColor;stroke:currentColor;width:var(--spectrum-alias-workflow-icon-size,18px);height:var(--spectrum-alias-workflow-icon-size,18px)}
+.button{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;overflow:visible;margin:0;border-style:solid;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:1.3;-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}.button:focus{outline:none}.button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}.button:disabled{cursor:default}::slotted([slot=icon]){max-height:100%;flex-shrink:0}:host{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}slot[name=icon]::slotted(svg){fill:currentColor;stroke:currentColor;width:var(--spectrum-alias-workflow-icon-size,18px);height:var(--spectrum-alias-workflow-icon-size,18px)}
 `;
 export default styles;
 //# sourceMappingURL=button-base.css.js.map

src/button-base.css.ts

@@ -12,6 +12,6 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-#button{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;overflow:visible;margin:0;border-style:solid;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:1.3;cursor:pointer}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}::slotted([slot=icon]){max-height:100%;flex-shrink:0}:host{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}slot[name=icon]::slotted(svg){fill:currentColor;stroke:currentColor;width:var(--spectrum-alias-workflow-icon-size,18px);height:var(--spectrum-alias-workflow-icon-size,18px)}
+.button{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;overflow:visible;margin:0;border-style:solid;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:1.3;-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}.button:focus{outline:none}.button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}.button:disabled{cursor:default}::slotted([slot=icon]){max-height:100%;flex-shrink:0}:host{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}slot[name=icon]::slotted(svg){fill:currentColor;stroke:currentColor;width:var(--spectrum-alias-workflow-icon-size,18px);height:var(--spectrum-alias-workflow-icon-size,18px)}
 `;
 export default styles;

src/button.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/button.css.js

@@ -12,14 +12,15 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-#button:after{border-radius:calc(var(--spectrum-button-primary-border-radius,
+.button:after{border-radius:calc(var(--spectrum-button-primary-border-radius,
 var(--spectrum-alias-border-radius-large)) + var(--spectrum-alias-focus-ring-gap,
 var(--spectrum-global-dimension-static-size-25)));content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}#button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-2)}#button{border-width:var(--spectrum-button-primary-border-size,var(--spectrum-alias-border-size-thick));border-style:solid;border-radius:var(--spectrum-button-primary-border-radius,var(--spectrum-alias-border-radius-large));min-height:var(--spectrum-button-primary-height,var(--spectrum-alias-single-line-height));height:auto;min-width:var(--spectrum-button-primary-min-width);padding:var(--spectrum-global-dimension-size-50) calc(var(--spectrum-button-primary-padding-x,
+var(--spectrum-global-dimension-static-size-25))*-1);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}.button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-2)}.button{border-width:var(--spectrum-button-primary-border-size,var(--spectrum-alias-border-size-thick));border-style:solid;border-radius:var(--spectrum-button-primary-border-radius,var(--spectrum-alias-border-radius-large));min-height:var(--spectrum-button-primary-height,var(--spectrum-alias-single-line-height));height:auto;min-width:var(--spectrum-button-primary-min-width);padding:var(--spectrum-global-dimension-size-50) calc(var(--spectrum-button-primary-padding-x,
 var(--spectrum-global-dimension-size-200)) - var(--spectrum-button-primary-border-size,
-var(--spectrum-alias-border-size-thick)));padding-bottom:calc(var(--spectrum-global-dimension-size-50) + 1px);padding-top:calc(var(--spectrum-global-dimension-size-50) - 1px);font-size:var(--spectrum-button-primary-text-size,var(--spectrum-alias-pill-button-text-size));font-weight:var(--spectrum-button-primary-text-font-weight,var(--spectrum-global-font-weight-bold))}#button:active,#button:hover{box-shadow:none}slot[name=icon]+#label{margin-left:var(--spectrum-button-primary-text-gap,var(--spectrum-global-dimension-size-100))}#label+::slotted([slot=icon]){margin-left:calc(var(--spectrum-button-primary-text-gap,
-var(--spectrum-global-dimension-size-100))/2)}#label{align-self:center;justify-self:center;text-align:center;width:100%}#label:empty{display:none}#button.focus-visible:after,#button.is-focused:after{box-shadow:0 0 0 var(--spectrum-button-primary-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-button-primary-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([variant=cta]) #button{background-color:var(--spectrum-button-cta-background-color,var(--spectrum-semantic-cta-color-background-default));border-color:var(--spectrum-button-cta-border-color,var(--spectrum-semantic-cta-color-background-default));color:var(--spectrum-button-cta-text-color,var(--spectrum-global-color-static-white))}:host([variant=cta]) #button:hover{background-color:var(--spectrum-button-cta-background-color-hover,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-hover,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=cta]) #button.focus-visible{background-color:var(--spectrum-button-cta-background-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=cta]) #button:active{background-color:var(--spectrum-button-cta-background-color-down,var(--spectrum-semantic-cta-color-background-down));border-color:var(--spectrum-button-cta-border-color-down,var(--spectrum-semantic-cta-color-background-down));color:var(--spectrum-button-cta-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=cta][disabled]) #button{background-color:var(--spectrum-button-cta-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-cta-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-cta-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=primary]) #button{background-color:var(--spectrum-button-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-primary-border-color,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary]) #button:hover{background-color:var(--spectrum-button-primary-background-color-hover,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-hover,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=primary]) #button.focus-visible{background-color:var(--spectrum-button-primary-background-color-key-focus,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=primary]) #button:active{background-color:var(--spectrum-button-primary-background-color-down,var(--spectrum-global-color-gray-900));border-color:var(--spectrum-button-primary-border-color-down,var(--spectrum-global-color-gray-900));color:var(--spectrum-button-primary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=primary][disabled]) #button{background-color:var(--spectrum-button-primary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-primary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary]) #button{background-color:var(--spectrum-button-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-secondary-border-color,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary]) #button:hover{background-color:var(--spectrum-button-secondary-background-color-hover,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-hover,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) #button.focus-visible{background-color:var(--spectrum-button-secondary-background-color-key-focus,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-key-focus,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) #button:active{background-color:var(--spectrum-button-secondary-background-color-down,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-secondary-border-color-down,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-secondary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=secondary][disabled]) #button{background-color:var(--spectrum-button-secondary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-secondary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative]) #button{background-color:var(--spectrum-button-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-warning-border-color,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative]) #button:hover{background-color:var(--spectrum-button-warning-background-color-hover,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-hover,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=negative]) #button.focus-visible{background-color:var(--spectrum-button-warning-background-color-key-focus,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-key-focus,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=negative]) #button:active{background-color:var(--spectrum-button-warning-background-color-down,var(--spectrum-global-color-red-700));border-color:var(--spectrum-button-warning-border-color-down,var(--spectrum-global-color-red-700));color:var(--spectrum-button-warning-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=negative][disabled]) #button{background-color:var(--spectrum-button-warning-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-warning-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=overBackground]) #button{background-color:var(--spectrum-button-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-over-background-border-color,var(--spectrum-global-color-static-white));color:var(--spectrum-button-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.focus-visible,:host([variant=overBackground]) #button:hover{background-color:var(--spectrum-button-over-background-background-color-hover,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-hover,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground]) #button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button:active{background-color:var(--spectrum-button-over-background-background-color-down,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-down,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground][disabled]) #button{background-color:var(--spectrum-button-over-background-background-color-disabled,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-over-background-text-color-disabled,hsla(0,0%,100%,.35))}:host([variant=overBackground][quiet]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) #button.focus-visible,:host([variant=overBackground][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) #button.focus-visible{box-shadow:none}:host([variant=overBackground][quiet]) #button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) #button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}:host([variant=primary][quiet]) #button{background-color:var(--spectrum-button-quiet-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-primary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-hover,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) #button.focus-visible{background-color:var(--spectrum-button-quiet-primary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-key-focus,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) #button:active{background-color:var(--spectrum-button-quiet-primary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-primary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-primary-text-color-down,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-primary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary][quiet]) #button{background-color:var(--spectrum-button-quiet-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-secondary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-hover,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) #button.focus-visible{background-color:var(--spectrum-button-quiet-secondary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-key-focus,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) #button:active{background-color:var(--spectrum-button-quiet-secondary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-secondary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-secondary-text-color-down,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-secondary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative][quiet]) #button{background-color:var(--spectrum-button-quiet-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-warning-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-hover,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) #button.focus-visible{background-color:var(--spectrum-button-quiet-warning-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-key-focus,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) #button:active{background-color:var(--spectrum-button-quiet-warning-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-warning-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-warning-text-color-down,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-warning-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}
+var(--spectrum-alias-border-size-thick)));padding-bottom:calc(var(--spectrum-global-dimension-size-50) + 1px);padding-top:calc(var(--spectrum-global-dimension-size-50) - 1px);font-size:var(--spectrum-button-primary-text-size,var(--spectrum-alias-pill-button-text-size));font-weight:var(--spectrum-button-primary-text-font-weight,var(--spectrum-global-font-weight-bold))}.button:active,.button:hover{box-shadow:none}:host([dir=ltr]) .button slot[name=icon]+#label{margin-left:var(--spectrum-button-primary-text-gap,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .button slot[name=icon]+#label{margin-right:var(--spectrum-button-primary-text-gap,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .button #label+::slotted([slot=icon]){margin-left:calc(var(--spectrum-button-primary-text-gap,
+var(--spectrum-global-dimension-size-100))/2)}:host([dir=rtl]) .button #label+::slotted([slot=icon]){margin-right:calc(var(--spectrum-button-primary-text-gap,
+var(--spectrum-global-dimension-size-100))/2)}#label{align-self:center;justify-self:center;text-align:center}#label:empty{display:none}.button.focus-visible:after,.button.is-focused:after{box-shadow:0 0 0 var(--spectrum-button-primary-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-button-primary-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([variant=cta]) .button{background-color:var(--spectrum-button-cta-background-color,var(--spectrum-semantic-cta-color-background-default));border-color:var(--spectrum-button-cta-border-color,var(--spectrum-semantic-cta-color-background-default));color:var(--spectrum-button-cta-text-color,var(--spectrum-global-color-static-white))}:host([variant=cta]) .button:hover{background-color:var(--spectrum-button-cta-background-color-hover,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-hover,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=cta]) .button.focus-visible{background-color:var(--spectrum-button-cta-background-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=cta]) .button:active{background-color:var(--spectrum-button-cta-background-color-down,var(--spectrum-semantic-cta-color-background-down));border-color:var(--spectrum-button-cta-border-color-down,var(--spectrum-semantic-cta-color-background-down));color:var(--spectrum-button-cta-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=cta][disabled]) .button{background-color:var(--spectrum-button-cta-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-cta-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-cta-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=primary]) .button{background-color:var(--spectrum-button-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-primary-border-color,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary]) .button:hover{background-color:var(--spectrum-button-primary-background-color-hover,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-hover,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=primary]) .button.focus-visible{background-color:var(--spectrum-button-primary-background-color-key-focus,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=primary]) .button:active{background-color:var(--spectrum-button-primary-background-color-down,var(--spectrum-global-color-gray-900));border-color:var(--spectrum-button-primary-border-color-down,var(--spectrum-global-color-gray-900));color:var(--spectrum-button-primary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=primary][disabled]) .button{background-color:var(--spectrum-button-primary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-primary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary]) .button{background-color:var(--spectrum-button-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-secondary-border-color,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary]) .button:hover{background-color:var(--spectrum-button-secondary-background-color-hover,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-hover,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) .button.focus-visible{background-color:var(--spectrum-button-secondary-background-color-key-focus,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-key-focus,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) .button:active{background-color:var(--spectrum-button-secondary-background-color-down,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-secondary-border-color-down,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-secondary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=secondary][disabled]) .button{background-color:var(--spectrum-button-secondary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-secondary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative]) .button{background-color:var(--spectrum-button-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-warning-border-color,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative]) .button:hover{background-color:var(--spectrum-button-warning-background-color-hover,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-hover,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=negative]) .button.focus-visible{background-color:var(--spectrum-button-warning-background-color-key-focus,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-key-focus,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=negative]) .button:active{background-color:var(--spectrum-button-warning-background-color-down,var(--spectrum-global-color-red-700));border-color:var(--spectrum-button-warning-border-color-down,var(--spectrum-global-color-red-700));color:var(--spectrum-button-warning-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=negative][disabled]) .button{background-color:var(--spectrum-button-warning-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-warning-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=overBackground]) .button{background-color:var(--spectrum-button-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-over-background-border-color,var(--spectrum-global-color-static-white));color:var(--spectrum-button-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.focus-visible,:host([variant=overBackground]) .button:hover{background-color:var(--spectrum-button-over-background-background-color-hover,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-hover,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground]) .button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button:active{background-color:var(--spectrum-button-over-background-background-color-down,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-down,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground][disabled]) .button{background-color:var(--spectrum-button-over-background-background-color-disabled,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-over-background-text-color-disabled,hsla(0,0%,100%,.35))}:host([variant=overBackground][quiet]) .button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) .button.focus-visible,:host([variant=overBackground][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) .button.focus-visible{box-shadow:none}:host([variant=overBackground][quiet]) .button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) .button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}:host([variant=primary][quiet]) .button{background-color:var(--spectrum-button-quiet-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-primary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-hover,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) .button.focus-visible{background-color:var(--spectrum-button-quiet-primary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-key-focus,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) .button:active{background-color:var(--spectrum-button-quiet-primary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-primary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-primary-text-color-down,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-primary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary][quiet]) .button{background-color:var(--spectrum-button-quiet-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-secondary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-hover,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) .button.focus-visible{background-color:var(--spectrum-button-quiet-secondary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-key-focus,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) .button:active{background-color:var(--spectrum-button-quiet-secondary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-secondary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-secondary-text-color-down,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-secondary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative][quiet]) .button{background-color:var(--spectrum-button-quiet-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-warning-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-hover,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) .button.focus-visible{background-color:var(--spectrum-button-quiet-warning-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-key-focus,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) .button:active{background-color:var(--spectrum-button-quiet-warning-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-warning-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-warning-text-color-down,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-warning-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}
 `;
 export default styles;
 //# sourceMappingURL=button.css.js.map

src/button.css.ts

@@ -12,13 +12,14 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-#button:after{border-radius:calc(var(--spectrum-button-primary-border-radius,
+.button:after{border-radius:calc(var(--spectrum-button-primary-border-radius,
 var(--spectrum-alias-border-radius-large)) + var(--spectrum-alias-focus-ring-gap,
 var(--spectrum-global-dimension-static-size-25)));content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}#button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-2)}#button{border-width:var(--spectrum-button-primary-border-size,var(--spectrum-alias-border-size-thick));border-style:solid;border-radius:var(--spectrum-button-primary-border-radius,var(--spectrum-alias-border-radius-large));min-height:var(--spectrum-button-primary-height,var(--spectrum-alias-single-line-height));height:auto;min-width:var(--spectrum-button-primary-min-width);padding:var(--spectrum-global-dimension-size-50) calc(var(--spectrum-button-primary-padding-x,
+var(--spectrum-global-dimension-static-size-25))*-1);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}.button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-2)}.button{border-width:var(--spectrum-button-primary-border-size,var(--spectrum-alias-border-size-thick));border-style:solid;border-radius:var(--spectrum-button-primary-border-radius,var(--spectrum-alias-border-radius-large));min-height:var(--spectrum-button-primary-height,var(--spectrum-alias-single-line-height));height:auto;min-width:var(--spectrum-button-primary-min-width);padding:var(--spectrum-global-dimension-size-50) calc(var(--spectrum-button-primary-padding-x,
 var(--spectrum-global-dimension-size-200)) - var(--spectrum-button-primary-border-size,
-var(--spectrum-alias-border-size-thick)));padding-bottom:calc(var(--spectrum-global-dimension-size-50) + 1px);padding-top:calc(var(--spectrum-global-dimension-size-50) - 1px);font-size:var(--spectrum-button-primary-text-size,var(--spectrum-alias-pill-button-text-size));font-weight:var(--spectrum-button-primary-text-font-weight,var(--spectrum-global-font-weight-bold))}#button:active,#button:hover{box-shadow:none}slot[name=icon]+#label{margin-left:var(--spectrum-button-primary-text-gap,var(--spectrum-global-dimension-size-100))}#label+::slotted([slot=icon]){margin-left:calc(var(--spectrum-button-primary-text-gap,
-var(--spectrum-global-dimension-size-100))/2)}#label{align-self:center;justify-self:center;text-align:center;width:100%}#label:empty{display:none}#button.focus-visible:after,#button.is-focused:after{box-shadow:0 0 0 var(--spectrum-button-primary-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-button-primary-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([variant=cta]) #button{background-color:var(--spectrum-button-cta-background-color,var(--spectrum-semantic-cta-color-background-default));border-color:var(--spectrum-button-cta-border-color,var(--spectrum-semantic-cta-color-background-default));color:var(--spectrum-button-cta-text-color,var(--spectrum-global-color-static-white))}:host([variant=cta]) #button:hover{background-color:var(--spectrum-button-cta-background-color-hover,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-hover,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=cta]) #button.focus-visible{background-color:var(--spectrum-button-cta-background-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=cta]) #button:active{background-color:var(--spectrum-button-cta-background-color-down,var(--spectrum-semantic-cta-color-background-down));border-color:var(--spectrum-button-cta-border-color-down,var(--spectrum-semantic-cta-color-background-down));color:var(--spectrum-button-cta-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=cta][disabled]) #button{background-color:var(--spectrum-button-cta-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-cta-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-cta-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=primary]) #button{background-color:var(--spectrum-button-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-primary-border-color,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary]) #button:hover{background-color:var(--spectrum-button-primary-background-color-hover,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-hover,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=primary]) #button.focus-visible{background-color:var(--spectrum-button-primary-background-color-key-focus,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=primary]) #button:active{background-color:var(--spectrum-button-primary-background-color-down,var(--spectrum-global-color-gray-900));border-color:var(--spectrum-button-primary-border-color-down,var(--spectrum-global-color-gray-900));color:var(--spectrum-button-primary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=primary][disabled]) #button{background-color:var(--spectrum-button-primary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-primary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary]) #button{background-color:var(--spectrum-button-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-secondary-border-color,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary]) #button:hover{background-color:var(--spectrum-button-secondary-background-color-hover,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-hover,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) #button.focus-visible{background-color:var(--spectrum-button-secondary-background-color-key-focus,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-key-focus,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) #button:active{background-color:var(--spectrum-button-secondary-background-color-down,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-secondary-border-color-down,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-secondary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=secondary][disabled]) #button{background-color:var(--spectrum-button-secondary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-secondary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative]) #button{background-color:var(--spectrum-button-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-warning-border-color,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative]) #button:hover{background-color:var(--spectrum-button-warning-background-color-hover,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-hover,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=negative]) #button.focus-visible{background-color:var(--spectrum-button-warning-background-color-key-focus,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-key-focus,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=negative]) #button:active{background-color:var(--spectrum-button-warning-background-color-down,var(--spectrum-global-color-red-700));border-color:var(--spectrum-button-warning-border-color-down,var(--spectrum-global-color-red-700));color:var(--spectrum-button-warning-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=negative][disabled]) #button{background-color:var(--spectrum-button-warning-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-warning-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=overBackground]) #button{background-color:var(--spectrum-button-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-over-background-border-color,var(--spectrum-global-color-static-white));color:var(--spectrum-button-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.focus-visible,:host([variant=overBackground]) #button:hover{background-color:var(--spectrum-button-over-background-background-color-hover,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-hover,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground]) #button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button:active{background-color:var(--spectrum-button-over-background-background-color-down,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-down,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground][disabled]) #button{background-color:var(--spectrum-button-over-background-background-color-disabled,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-over-background-text-color-disabled,hsla(0,0%,100%,.35))}:host([variant=overBackground][quiet]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) #button.focus-visible,:host([variant=overBackground][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) #button.focus-visible{box-shadow:none}:host([variant=overBackground][quiet]) #button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) #button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}:host([variant=primary][quiet]) #button{background-color:var(--spectrum-button-quiet-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-primary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-hover,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) #button.focus-visible{background-color:var(--spectrum-button-quiet-primary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-key-focus,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) #button:active{background-color:var(--spectrum-button-quiet-primary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-primary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-primary-text-color-down,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-primary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary][quiet]) #button{background-color:var(--spectrum-button-quiet-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-secondary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-hover,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) #button.focus-visible{background-color:var(--spectrum-button-quiet-secondary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-key-focus,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) #button:active{background-color:var(--spectrum-button-quiet-secondary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-secondary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-secondary-text-color-down,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-secondary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative][quiet]) #button{background-color:var(--spectrum-button-quiet-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-warning-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-hover,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) #button.focus-visible{background-color:var(--spectrum-button-quiet-warning-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-key-focus,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) #button:active{background-color:var(--spectrum-button-quiet-warning-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-warning-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-warning-text-color-down,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-warning-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}
+var(--spectrum-alias-border-size-thick)));padding-bottom:calc(var(--spectrum-global-dimension-size-50) + 1px);padding-top:calc(var(--spectrum-global-dimension-size-50) - 1px);font-size:var(--spectrum-button-primary-text-size,var(--spectrum-alias-pill-button-text-size));font-weight:var(--spectrum-button-primary-text-font-weight,var(--spectrum-global-font-weight-bold))}.button:active,.button:hover{box-shadow:none}:host([dir=ltr]) .button slot[name=icon]+#label{margin-left:var(--spectrum-button-primary-text-gap,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .button slot[name=icon]+#label{margin-right:var(--spectrum-button-primary-text-gap,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .button #label+::slotted([slot=icon]){margin-left:calc(var(--spectrum-button-primary-text-gap,
+var(--spectrum-global-dimension-size-100))/2)}:host([dir=rtl]) .button #label+::slotted([slot=icon]){margin-right:calc(var(--spectrum-button-primary-text-gap,
+var(--spectrum-global-dimension-size-100))/2)}#label{align-self:center;justify-self:center;text-align:center}#label:empty{display:none}.button.focus-visible:after,.button.is-focused:after{box-shadow:0 0 0 var(--spectrum-button-primary-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-button-primary-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([variant=cta]) .button{background-color:var(--spectrum-button-cta-background-color,var(--spectrum-semantic-cta-color-background-default));border-color:var(--spectrum-button-cta-border-color,var(--spectrum-semantic-cta-color-background-default));color:var(--spectrum-button-cta-text-color,var(--spectrum-global-color-static-white))}:host([variant=cta]) .button:hover{background-color:var(--spectrum-button-cta-background-color-hover,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-hover,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=cta]) .button.focus-visible{background-color:var(--spectrum-button-cta-background-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=cta]) .button:active{background-color:var(--spectrum-button-cta-background-color-down,var(--spectrum-semantic-cta-color-background-down));border-color:var(--spectrum-button-cta-border-color-down,var(--spectrum-semantic-cta-color-background-down));color:var(--spectrum-button-cta-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=cta][disabled]) .button{background-color:var(--spectrum-button-cta-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-cta-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-cta-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=primary]) .button{background-color:var(--spectrum-button-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-primary-border-color,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary]) .button:hover{background-color:var(--spectrum-button-primary-background-color-hover,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-hover,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=primary]) .button.focus-visible{background-color:var(--spectrum-button-primary-background-color-key-focus,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=primary]) .button:active{background-color:var(--spectrum-button-primary-background-color-down,var(--spectrum-global-color-gray-900));border-color:var(--spectrum-button-primary-border-color-down,var(--spectrum-global-color-gray-900));color:var(--spectrum-button-primary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=primary][disabled]) .button{background-color:var(--spectrum-button-primary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-primary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary]) .button{background-color:var(--spectrum-button-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-secondary-border-color,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary]) .button:hover{background-color:var(--spectrum-button-secondary-background-color-hover,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-hover,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) .button.focus-visible{background-color:var(--spectrum-button-secondary-background-color-key-focus,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-key-focus,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) .button:active{background-color:var(--spectrum-button-secondary-background-color-down,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-secondary-border-color-down,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-secondary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=secondary][disabled]) .button{background-color:var(--spectrum-button-secondary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-secondary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative]) .button{background-color:var(--spectrum-button-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-warning-border-color,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative]) .button:hover{background-color:var(--spectrum-button-warning-background-color-hover,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-hover,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=negative]) .button.focus-visible{background-color:var(--spectrum-button-warning-background-color-key-focus,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-key-focus,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=negative]) .button:active{background-color:var(--spectrum-button-warning-background-color-down,var(--spectrum-global-color-red-700));border-color:var(--spectrum-button-warning-border-color-down,var(--spectrum-global-color-red-700));color:var(--spectrum-button-warning-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=negative][disabled]) .button{background-color:var(--spectrum-button-warning-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-warning-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=overBackground]) .button{background-color:var(--spectrum-button-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-over-background-border-color,var(--spectrum-global-color-static-white));color:var(--spectrum-button-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.focus-visible,:host([variant=overBackground]) .button:hover{background-color:var(--spectrum-button-over-background-background-color-hover,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-hover,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground]) .button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button:active{background-color:var(--spectrum-button-over-background-background-color-down,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-down,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground][disabled]) .button{background-color:var(--spectrum-button-over-background-background-color-disabled,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-over-background-text-color-disabled,hsla(0,0%,100%,.35))}:host([variant=overBackground][quiet]) .button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) .button.focus-visible,:host([variant=overBackground][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) .button.focus-visible{box-shadow:none}:host([variant=overBackground][quiet]) .button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) .button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}:host([variant=primary][quiet]) .button{background-color:var(--spectrum-button-quiet-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-primary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-hover,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) .button.focus-visible{background-color:var(--spectrum-button-quiet-primary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-key-focus,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) .button:active{background-color:var(--spectrum-button-quiet-primary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-primary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-primary-text-color-down,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-primary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary][quiet]) .button{background-color:var(--spectrum-button-quiet-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-secondary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-hover,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) .button.focus-visible{background-color:var(--spectrum-button-quiet-secondary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-key-focus,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) .button:active{background-color:var(--spectrum-button-quiet-secondary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-secondary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-secondary-text-color-down,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-secondary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative][quiet]) .button{background-color:var(--spectrum-button-quiet-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-warning-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-hover,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) .button.focus-visible{background-color:var(--spectrum-button-quiet-warning-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-key-focus,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) .button:active{background-color:var(--spectrum-button-quiet-warning-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-warning-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-warning-text-color-down,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-warning-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}
 `;
 export default styles;

src/Button.d.ts

@@ -1,2 +0,2 @@
-import { CSSResultArray } from 'lit-element';
+import { CSSResultArray } from '@spectrum-web-components/base';
 import { ButtonBase } from './ButtonBase.js';
@@ -3,0 +3,0 @@ export declare type ButtonVariants = 'cta' | 'overBackground' | 'primary' | 'secondary' | 'negative';

src/Button.js

@@ -13,3 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { property } from 'lit-element';
+import { property } from '@spectrum-web-components/base';
 import { ButtonBase } from './ButtonBase.js';
@@ -16,0 +16,0 @@ import buttonStyles from './button.css.js';

src/Button.ts

@@ -13,3 +13,3 @@ /*
 
-import { CSSResultArray, property } from 'lit-element';
+import { CSSResultArray, property } from '@spectrum-web-components/base';
 import { ButtonBase } from './ButtonBase.js';
@@ -16,0 +16,0 @@ import buttonStyles from './button.css.js';

src/ButtonBase.d.ts

@@ -1,7 +0,10 @@
-import { TemplateResult, CSSResultArray } from 'lit-element';
+import { TemplateResult, CSSResultArray } from '@spectrum-web-components/base';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 declare const ButtonBase_base: typeof Focusable & {
-    new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-text").SlotTextObservingInterface;
-    prototype: import("@spectrum-web-components/shared/src/observe-slot-text").SlotTextObservingInterface;
+    new (...args: any[]): import("@spectrum-web-components/shared").SlotPresenceObservingInterface;
+    prototype: import("@spectrum-web-components/shared").SlotPresenceObservingInterface;
 } & {
+    new (...args: any[]): import("@spectrum-web-components/shared").SlotTextObservingInterface;
+    prototype: import("@spectrum-web-components/shared").SlotTextObservingInterface;
+} & {
     new (...args: any[]): import("@spectrum-web-components/shared/src/like-anchor").LikeAnchorInterface;
@@ -12,5 +15,6 @@ prototype: import("@spectrum-web-components/shared/src/like-anchor").LikeAnchorInterface;
     static get styles(): CSSResultArray;
+    protected get hasIcon(): boolean;
     protected iconRight: boolean;
-    private get hasIcon();
     private get hasLabel();
+    private buttonElement;
     get focusElement(): HTMLElement;
@@ -17,0 +21,0 @@ protected get buttonContent(): TemplateResult[];

src/ButtonBase.js

@@ -13,9 +13,9 @@ /*
 import { __decorate } from "tslib";
-import { property, html } from 'lit-element';
+import { property, html, query, } from '@spectrum-web-components/base';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
+import { ObserveSlotText, ObserveSlotPresence, } from '@spectrum-web-components/shared';
 import buttonStyles from './button-base.css.js';
-export class ButtonBase extends LikeAnchor(ObserveSlotText(Focusable)) {
+export class ButtonBase extends LikeAnchor(ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]'))) {
     constructor() {
@@ -29,3 +29,3 @@ super(...arguments);
     get hasIcon() {
-        return !!this.querySelector('[slot="icon"]');
+        return this.slotContentIsPresent;
     }
@@ -36,7 +36,3 @@ get hasLabel() {
     get focusElement() {
-        /* istanbul ignore if */
-        if (!this.shadowRoot) {
-            return this;
-        }
-        return this.shadowRoot.querySelector('#button');
+        return this.buttonElement;
     }
@@ -52,3 +48,3 @@ get buttonContent() {
                         id="slot"
-                        @slotchange=${this.manageObservedSlot}
+                        @slotchange=${this.manageTextObservedSlot}
                     ></slot>
@@ -68,6 +64,11 @@ </div>
                 id: 'button',
+                className: 'button',
                 anchorContent: this.buttonContent,
             })
             : html `
-                  <button id="button" aria-label=${ifDefined(this.label)}>
+                  <button
+                      id="button"
+                      class="button"
+                      aria-label=${ifDefined(this.label)}
+                  >
                       ${this.buttonContent}
@@ -81,2 +82,5 @@ </button>
 ], ButtonBase.prototype, "iconRight", void 0);
+__decorate([
+    query('.button')
+], ButtonBase.prototype, "buttonElement", void 0);
 //# sourceMappingURL=ButtonBase.js.map

src/ButtonBase.ts

@@ -13,10 +13,21 @@ /*
 
-import { property, html, TemplateResult, CSSResultArray } from 'lit-element';
+import {
+    property,
+    html,
+    TemplateResult,
+    CSSResultArray,
+    query,
+} from '@spectrum-web-components/base';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
+import {
+    ObserveSlotText,
+    ObserveSlotPresence,
+} from '@spectrum-web-components/shared';
 import buttonStyles from './button-base.css.js';
 
-export class ButtonBase extends LikeAnchor(ObserveSlotText(Focusable)) {
+export class ButtonBase extends LikeAnchor(
+    ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]'))
+) {
     public static get styles(): CSSResultArray {
@@ -26,9 +37,9 @@ return [...super.styles, buttonStyles];
 
+    protected get hasIcon(): boolean {
+        return this.slotContentIsPresent;
+    }
+
     @property({ type: Boolean, reflect: true, attribute: 'icon-right' })
     protected iconRight = false;
 
-    private get hasIcon(): boolean {
-        return !!this.querySelector('[slot="icon"]');
-    }
-
     private get hasLabel(): boolean {
@@ -38,8 +49,7 @@ return this.slotHasContent;
 
+    @query('.button')
+    private buttonElement!: HTMLButtonElement;
+
     public get focusElement(): HTMLElement {
-        /* istanbul ignore if */
-        if (!this.shadowRoot) {
-            return this;
-        }
-        return this.shadowRoot.querySelector('#button') as HTMLElement;
+        return this.buttonElement;
     }
@@ -56,3 +66,3 @@
                         id="slot"
-                        @slotchange=${this.manageObservedSlot}
+                        @slotchange=${this.manageTextObservedSlot}
                     ></slot>
@@ -73,6 +83,11 @@ </div>
                   id: 'button',
+                  className: 'button',
                   anchorContent: this.buttonContent,
               })
             : html`
-                  <button id="button" aria-label=${ifDefined(this.label)}>
+                  <button
+                      id="button"
+                      class="button"
+                      aria-label=${ifDefined(this.label)}
+                  >
                       ${this.buttonContent}
@@ -79,0 +94,0 @@ </button>

src/clear-button.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/clear-button.css.js

@@ -12,8 +12,12 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host([variant=overBackground]) #button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}#button{width:var(--spectrum-clearbutton-medium-width,var(--spectrum-alias-single-line-height));height:var(--spectrum-clearbutton-medium-height,var(--spectrum-alias-single-line-height));border-radius:100%;padding:0;border:none;background-color:var(--spectrum-clearbutton-medium-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color,var(--spectrum-alias-icon-color))}#button,#button>.icon{margin:0}:host([small]) #button{width:var(--spectrum-clearbutton-small-width,var(--spectrum-global-dimension-size-300));height:var(--spectrum-clearbutton-small-height,var(--spectrum-global-dimension-size-300))}#button:hover{background-color:var(--spectrum-clearbutton-medium-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:active{background-color:var(--spectrum-clearbutton-medium-background-color-down,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-down,var(--spectrum-alias-icon-color-down))}#button.focus-visible{background-color:var(--spectrum-clearbutton-medium-background-color-key-focus,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}#button.is-disabled,#button:disabled{background-color:var(--spectrum-clearbutton-medium-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([variant=overBackground]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.focus-visible,:host([variant=overBackground]) #button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.focus-visible{box-shadow:none}:host([variant=overBackground]) #button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.is-disabled,:host([variant=overBackground]) #button:disabled{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}
+.button:after{border-radius:calc(var(--spectrum-button-primary-border-radius,
+var(--spectrum-alias-border-radius-large)) + var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25)));content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-1);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}.button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-2)}.button{width:var(--spectrum-clearbutton-medium-width,var(--spectrum-alias-single-line-height));height:var(--spectrum-clearbutton-medium-height,var(--spectrum-alias-single-line-height));border-radius:100%;padding:0;border:none;background-color:var(--spectrum-clearbutton-medium-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color,var(--spectrum-alias-icon-color))}.button,.button>.icon{margin:0}:host([variant=overBackground]) .button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([small]) .button{width:var(--spectrum-clearbutton-small-width,var(--spectrum-global-dimension-size-300));height:var(--spectrum-clearbutton-small-height,var(--spectrum-global-dimension-size-300))}.button:hover{background-color:var(--spectrum-clearbutton-medium-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.button:active{background-color:var(--spectrum-clearbutton-medium-background-color-down,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-down,var(--spectrum-alias-icon-color-down))}.button.focus-visible{background-color:var(--spectrum-clearbutton-medium-background-color-key-focus,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.button.is-disabled,.button:disabled{background-color:var(--spectrum-clearbutton-medium-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([variant=overBackground]) .button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.focus-visible,:host([variant=overBackground]) .button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.focus-visible{box-shadow:none}:host([variant=overBackground]) .button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.is-disabled,:host([variant=overBackground]) .button:disabled{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}
 `;
 export default styles;
 //# sourceMappingURL=clear-button.css.js.map

src/clear-button.css.ts

@@ -12,7 +12,11 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host([variant=overBackground]) #button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}#button{width:var(--spectrum-clearbutton-medium-width,var(--spectrum-alias-single-line-height));height:var(--spectrum-clearbutton-medium-height,var(--spectrum-alias-single-line-height));border-radius:100%;padding:0;border:none;background-color:var(--spectrum-clearbutton-medium-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color,var(--spectrum-alias-icon-color))}#button,#button>.icon{margin:0}:host([small]) #button{width:var(--spectrum-clearbutton-small-width,var(--spectrum-global-dimension-size-300));height:var(--spectrum-clearbutton-small-height,var(--spectrum-global-dimension-size-300))}#button:hover{background-color:var(--spectrum-clearbutton-medium-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:active{background-color:var(--spectrum-clearbutton-medium-background-color-down,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-down,var(--spectrum-alias-icon-color-down))}#button.focus-visible{background-color:var(--spectrum-clearbutton-medium-background-color-key-focus,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}#button.is-disabled,#button:disabled{background-color:var(--spectrum-clearbutton-medium-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([variant=overBackground]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.focus-visible,:host([variant=overBackground]) #button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.focus-visible{box-shadow:none}:host([variant=overBackground]) #button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.is-disabled,:host([variant=overBackground]) #button:disabled{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}
+.button:after{border-radius:calc(var(--spectrum-button-primary-border-radius,
+var(--spectrum-alias-border-radius-large)) + var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25)));content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-1);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}.button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-2)}.button{width:var(--spectrum-clearbutton-medium-width,var(--spectrum-alias-single-line-height));height:var(--spectrum-clearbutton-medium-height,var(--spectrum-alias-single-line-height));border-radius:100%;padding:0;border:none;background-color:var(--spectrum-clearbutton-medium-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color,var(--spectrum-alias-icon-color))}.button,.button>.icon{margin:0}:host([variant=overBackground]) .button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([small]) .button{width:var(--spectrum-clearbutton-small-width,var(--spectrum-global-dimension-size-300));height:var(--spectrum-clearbutton-small-height,var(--spectrum-global-dimension-size-300))}.button:hover{background-color:var(--spectrum-clearbutton-medium-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.button:active{background-color:var(--spectrum-clearbutton-medium-background-color-down,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-down,var(--spectrum-alias-icon-color-down))}.button.focus-visible{background-color:var(--spectrum-clearbutton-medium-background-color-key-focus,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.button.is-disabled,.button:disabled{background-color:var(--spectrum-clearbutton-medium-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([variant=overBackground]) .button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.focus-visible,:host([variant=overBackground]) .button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.focus-visible{box-shadow:none}:host([variant=overBackground]) .button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.is-disabled,:host([variant=overBackground]) .button:disabled{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}
 `;
 export default styles;

src/ClearButton.d.ts

@@ -1,2 +0,2 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
+import { CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
 import { ButtonBase } from './ButtonBase.js';
@@ -3,0 +3,0 @@ export declare class ClearButton extends ButtonBase {

src/ClearButton.js

@@ -13,3 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { html, property } from 'lit-element';
+import { html, property, } from '@spectrum-web-components/base';
 import { ButtonBase } from './ButtonBase.js';
@@ -16,0 +16,0 @@ import buttonStyles from './clear-button.css.js';

src/ClearButton.ts

@@ -13,3 +13,8 @@ /*
 
-import { CSSResultArray, TemplateResult, html, property } from 'lit-element';
+import {
+    CSSResultArray,
+    TemplateResult,
+    html,
+    property,
+} from '@spectrum-web-components/base';
 import { ButtonBase } from './ButtonBase.js';
@@ -16,0 +21,0 @@ import buttonStyles from './clear-button.css.js';

src/field-button.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/field-button.css.js

@@ -12,7 +12,7 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-.icon{max-height:100%;flex-shrink:0}#button{height:var(--spectrum-dropdown-height,var(--spectrum-global-dimension-size-400));font-family:inherit;font-weight:400;font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));line-height:normal;-webkit-font-smoothing:initial;cursor:pointer;outline:none;margin:0;padding:0 var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));border-radius:var(--spectrum-global-dimension-size-50);transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-fieldbutton-background-color,var(--spectrum-global-color-gray-75));border:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-fieldbutton-border-color,var(--spectrum-global-color-gray-300))}#button.is-disabled,#button:disabled{border-width:0;cursor:default}#button.is-open{border-width:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin))}:host([quiet]) #button{margin:0;padding:0;border-width:0;border-radius:var(--spectrum-fieldbutton-quiet-border-radius,0);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-fieldbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-fieldbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) #button.is-disabled.focus-visible,:host([quiet]) #button:disabled.focus-visible{box-shadow:none}#button:hover{color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-fieldbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-hover,var(--spectrum-global-color-gray-400))}#button.is-selected,#button:active{background-color:var(--spectrum-fieldbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-fieldbutton-border-color-down,var(--spectrum-global-color-gray-400))}#button.focus-visible,#button.is-focused{background-color:var(--spectrum-fieldbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-fieldbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible.is-placeholder,#button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) #button{border-color:var(--spectrum-fieldbutton-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #button:hover{border-color:var(--spectrum-fieldbutton-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #button.is-selected,:host([invalid]) #button:active{border-color:var(--spectrum-fieldbutton-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) #button.focus-visible,:host([invalid]) #button.is-focused{border-color:var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}#button.is-disabled,#button:disabled{background-color:var(--spectrum-fieldbutton-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#button.is-disabled .icon,#button:disabled .icon{color:var(--spectrum-fieldbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) #button:hover{background-color:var(--spectrum-fieldbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible,:host([quiet]) #button.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible.is-placeholder,:host([quiet]) #button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-quiet-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.is-selected,:host([quiet]) #button:active{background-color:var(--spectrum-fieldbutton-quiet-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-fieldbutton-quiet-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #button.is-selected.focus-visible,:host([quiet]) #button.is-selected.is-focused,:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button.is-focused{box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.is-disabled,:host([quiet]) #button:disabled{background-color:var(--spectrum-fieldbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}
+.icon{max-height:100%;flex-shrink:0}.button{height:var(--spectrum-dropdown-height,var(--spectrum-global-dimension-size-400));padding:0 var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));font-family:inherit;font-weight:400;font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));line-height:normal;-webkit-font-smoothing:initial;cursor:pointer;outline:none;margin:0;padding-top:0;padding-bottom:0;padding-left:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));padding-right:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));border-radius:var(--spectrum-global-dimension-size-50);transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-fieldbutton-background-color,var(--spectrum-global-color-gray-75));border:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-fieldbutton-border-color,var(--spectrum-alias-border-color))}.button.is-disabled,.button:disabled{border-width:0;cursor:default}.button.is-open{border-width:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin))}:host([quiet]) .button{margin:0;padding:0;border-width:0;border-radius:var(--spectrum-fieldbutton-quiet-border-radius,0);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-fieldbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-fieldbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) .button.is-disabled.focus-visible,:host([quiet]) .button:disabled.focus-visible{box-shadow:none}.button:hover{color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-fieldbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-hover,var(--spectrum-alias-border-color-hover))}.button.is-selected,.button:active{background-color:var(--spectrum-fieldbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-fieldbutton-border-color-down,var(--spectrum-alias-border-color-down))}.button.focus-visible,.button.is-focused{background-color:var(--spectrum-fieldbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-fieldbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}.button.focus-visible.is-placeholder,.button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) .button{border-color:var(--spectrum-fieldbutton-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) .button:hover{border-color:var(--spectrum-fieldbutton-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) .button.is-selected,:host([invalid]) .button:active{border-color:var(--spectrum-fieldbutton-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) .button.focus-visible,:host([invalid]) .button.is-focused{border-color:var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}.button.is-disabled,.button:disabled{background-color:var(--spectrum-fieldbutton-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.button.is-disabled .icon,.button:disabled .icon{color:var(--spectrum-fieldbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) .button:hover{background-color:var(--spectrum-fieldbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) .button.focus-visible,:host([quiet]) .button.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) .button.focus-visible.is-placeholder,:host([quiet]) .button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-quiet-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) .button.is-selected,:host([quiet]) .button:active{background-color:var(--spectrum-fieldbutton-quiet-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-fieldbutton-quiet-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) .button.is-selected.focus-visible,:host([quiet]) .button.is-selected.is-focused,:host([quiet]) .button:active.focus-visible,:host([quiet]) .button:active.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) .button.focus-visible,:host([quiet][invalid]) .button.is-focused{box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) .button.is-disabled,:host([quiet]) .button:disabled{background-color:var(--spectrum-fieldbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}
 `;
 export default styles;
 //# sourceMappingURL=field-button.css.js.map

src/field-button.css.ts

@@ -12,6 +12,6 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-.icon{max-height:100%;flex-shrink:0}#button{height:var(--spectrum-dropdown-height,var(--spectrum-global-dimension-size-400));font-family:inherit;font-weight:400;font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));line-height:normal;-webkit-font-smoothing:initial;cursor:pointer;outline:none;margin:0;padding:0 var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));border-radius:var(--spectrum-global-dimension-size-50);transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-fieldbutton-background-color,var(--spectrum-global-color-gray-75));border:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-fieldbutton-border-color,var(--spectrum-global-color-gray-300))}#button.is-disabled,#button:disabled{border-width:0;cursor:default}#button.is-open{border-width:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin))}:host([quiet]) #button{margin:0;padding:0;border-width:0;border-radius:var(--spectrum-fieldbutton-quiet-border-radius,0);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-fieldbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-fieldbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) #button.is-disabled.focus-visible,:host([quiet]) #button:disabled.focus-visible{box-shadow:none}#button:hover{color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-fieldbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-hover,var(--spectrum-global-color-gray-400))}#button.is-selected,#button:active{background-color:var(--spectrum-fieldbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-fieldbutton-border-color-down,var(--spectrum-global-color-gray-400))}#button.focus-visible,#button.is-focused{background-color:var(--spectrum-fieldbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-fieldbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible.is-placeholder,#button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) #button{border-color:var(--spectrum-fieldbutton-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #button:hover{border-color:var(--spectrum-fieldbutton-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #button.is-selected,:host([invalid]) #button:active{border-color:var(--spectrum-fieldbutton-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) #button.focus-visible,:host([invalid]) #button.is-focused{border-color:var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}#button.is-disabled,#button:disabled{background-color:var(--spectrum-fieldbutton-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#button.is-disabled .icon,#button:disabled .icon{color:var(--spectrum-fieldbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) #button:hover{background-color:var(--spectrum-fieldbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible,:host([quiet]) #button.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible.is-placeholder,:host([quiet]) #button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-quiet-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.is-selected,:host([quiet]) #button:active{background-color:var(--spectrum-fieldbutton-quiet-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-fieldbutton-quiet-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #button.is-selected.focus-visible,:host([quiet]) #button.is-selected.is-focused,:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button.is-focused{box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.is-disabled,:host([quiet]) #button:disabled{background-color:var(--spectrum-fieldbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}
+.icon{max-height:100%;flex-shrink:0}.button{height:var(--spectrum-dropdown-height,var(--spectrum-global-dimension-size-400));padding:0 var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));font-family:inherit;font-weight:400;font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));line-height:normal;-webkit-font-smoothing:initial;cursor:pointer;outline:none;margin:0;padding-top:0;padding-bottom:0;padding-left:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));padding-right:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));border-radius:var(--spectrum-global-dimension-size-50);transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-fieldbutton-background-color,var(--spectrum-global-color-gray-75));border:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-fieldbutton-border-color,var(--spectrum-alias-border-color))}.button.is-disabled,.button:disabled{border-width:0;cursor:default}.button.is-open{border-width:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin))}:host([quiet]) .button{margin:0;padding:0;border-width:0;border-radius:var(--spectrum-fieldbutton-quiet-border-radius,0);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-fieldbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-fieldbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) .button.is-disabled.focus-visible,:host([quiet]) .button:disabled.focus-visible{box-shadow:none}.button:hover{color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-fieldbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-hover,var(--spectrum-alias-border-color-hover))}.button.is-selected,.button:active{background-color:var(--spectrum-fieldbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-fieldbutton-border-color-down,var(--spectrum-alias-border-color-down))}.button.focus-visible,.button.is-focused{background-color:var(--spectrum-fieldbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-fieldbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}.button.focus-visible.is-placeholder,.button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) .button{border-color:var(--spectrum-fieldbutton-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) .button:hover{border-color:var(--spectrum-fieldbutton-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) .button.is-selected,:host([invalid]) .button:active{border-color:var(--spectrum-fieldbutton-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) .button.focus-visible,:host([invalid]) .button.is-focused{border-color:var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}.button.is-disabled,.button:disabled{background-color:var(--spectrum-fieldbutton-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.button.is-disabled .icon,.button:disabled .icon{color:var(--spectrum-fieldbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) .button:hover{background-color:var(--spectrum-fieldbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) .button.focus-visible,:host([quiet]) .button.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) .button.focus-visible.is-placeholder,:host([quiet]) .button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-quiet-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) .button.is-selected,:host([quiet]) .button:active{background-color:var(--spectrum-fieldbutton-quiet-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-fieldbutton-quiet-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) .button.is-selected.focus-visible,:host([quiet]) .button.is-selected.is-focused,:host([quiet]) .button:active.focus-visible,:host([quiet]) .button:active.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) .button.focus-visible,:host([quiet][invalid]) .button.is-focused{box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) .button.is-disabled,:host([quiet]) .button:disabled{background-color:var(--spectrum-fieldbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}
 `;
 export default styles;

src/index.d.ts

 export * from './Button.js';
 export * from './ActionButton.js';
 export * from './ClearButton.js';
+export * from './ButtonBase.js';

src/index.js

@@ -15,2 +15,3 @@ /*
 export * from './ClearButton.js';
+export * from './ButtonBase.js';
 //# sourceMappingURL=index.js.map

src/index.ts

@@ -15,1 +15,2 @@ /*
 export * from './ClearButton.js';
+export * from './ButtonBase.js';

src/spectrum-action-button.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-action-button.css.js

@@ -12,15 +12,18 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-#button{position:relative;height:var(--spectrum-actionbutton-height,var(--spectrum-alias-single-line-height));min-width:var(--spectrum-actionbutton-min-width,var(--spectrum-global-dimension-size-400));padding:0 calc(var(--spectrum-actionbutton-icon-padding-x,
+.button{position:relative;height:var(--spectrum-actionbutton-height,var(--spectrum-alias-single-line-height));min-width:var(--spectrum-actionbutton-min-width,var(--spectrum-global-dimension-size-400));padding:0 calc(var(--spectrum-actionbutton-icon-padding-x,
 var(--spectrum-global-dimension-size-85)) - var(--spectrum-actionbutton-border-size,
-var(--spectrum-alias-border-size-thin)));border-width:var(--spectrum-actionbutton-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-actionbutton-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-text-color,var(--spectrum-alias-text-color))}slot[name=icon]+#label{padding-left:var(--spectrum-actionbutton-icon-padding-x,var(--spectrum-global-dimension-size-85));padding-right:calc(var(--spectrum-actionbutton-text-padding-x,
+var(--spectrum-alias-border-size-thin)));border-width:var(--spectrum-actionbutton-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-actionbutton-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-text-color,var(--spectrum-alias-text-color))}:host([dir=ltr]) .button slot[name=icon]+#label{padding-left:var(--spectrum-actionbutton-icon-padding-x,var(--spectrum-global-dimension-size-85));padding-right:calc(var(--spectrum-actionbutton-text-padding-x,
 var(--spectrum-global-dimension-size-150)) - var(--spectrum-actionbutton-icon-padding-x,
-var(--spectrum-global-dimension-size-85)))}.spectrum-Icon--sizeS:only-child{position:absolute;top:calc(50% - var(--spectrum-actionbutton-icon-size,
-var(--spectrum-alias-workflow-icon-size))/2);left:calc(50% - var(--spectrum-actionbutton-icon-size,
+var(--spectrum-global-dimension-size-85)))}:host([dir=rtl]) .button slot[name=icon]+#label{padding-right:var(--spectrum-actionbutton-icon-padding-x,var(--spectrum-global-dimension-size-85));padding-left:calc(var(--spectrum-actionbutton-text-padding-x,
+var(--spectrum-global-dimension-size-150)) - var(--spectrum-actionbutton-icon-padding-x,
+var(--spectrum-global-dimension-size-85)))}:host([dir=ltr]) .button .spectrum-Icon--sizeS:only-child{left:calc(50% - var(--spectrum-actionbutton-icon-size,
+var(--spectrum-alias-workflow-icon-size))/2)}:host([dir=rtl]) .button .spectrum-Icon--sizeS:only-child{right:calc(50% - var(--spectrum-actionbutton-icon-size,
+var(--spectrum-alias-workflow-icon-size))/2)}.spectrum-Icon--sizeS:only-child{position:absolute;top:calc(50% - var(--spectrum-actionbutton-icon-size,
 var(--spectrum-alias-workflow-icon-size))/2)}#label:only-child{padding:0 calc(var(--spectrum-actionbutton-text-padding-x,
 var(--spectrum-global-dimension-size-150)) - var(--spectrum-actionbutton-icon-padding-x,
-var(--spectrum-global-dimension-size-85)))}#hold-affordance{position:absolute;right:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40));bottom:var(--spectrum-actionbutton-hold-icon-padding-bottom,var(--spectrum-global-dimension-size-40));color:var(--spectrum-actionbutton-hold-icon-color,var(--spectrum-alias-icon-color))}#label{align-self:center;justify-self:center;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#label:empty{display:none}:host([quiet]) #button{border-width:var(--spectrum-actionbutton-quiet-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-alias-text-color))}::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color,var(--spectrum-alias-icon-color))}#button:hover{background-color:var(--spectrum-actionbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}#button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}#button.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}#button:active{background-color:var(--spectrum-actionbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-down,var(--spectrum-alias-text-color-down))}#button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([selected]) #button{background-color:var(--spectrum-actionbutton-background-color-selected,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-alias-icon-color))}:host([selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-selected-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([selected]) #button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:hover{background-color:var(--spectrum-actionbutton-background-color-selected-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-hover,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([selected]) #button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:active{background-color:var(--spectrum-actionbutton-background-color-selected-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([selected]) #button:active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-alias-icon-color-down))}:host([selected][disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([selected][disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 0 0 1px var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-down,var(--spectrum-alias-text-color-down))}:host([quiet][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected,var(--spectrum-alias-text-color))}:host([quiet][selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-key-focus,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-hover,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-hover,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([quiet][selected][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-quiet-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}
+var(--spectrum-global-dimension-size-85)))}:host([dir=ltr]) #hold-affordance{right:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) #hold-affordance{left:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40));transform:matrix(-1,0,0,1,0,0)}#hold-affordance{position:absolute;bottom:var(--spectrum-actionbutton-hold-icon-padding-bottom,var(--spectrum-global-dimension-size-40));color:var(--spectrum-actionbutton-hold-icon-color,var(--spectrum-alias-icon-color))}#label{align-self:center;justify-self:center;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#label:empty{display:none}:host([quiet]) .button{border-width:var(--spectrum-actionbutton-quiet-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-alias-text-color))}::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color,var(--spectrum-alias-icon-color))}.button:hover{background-color:var(--spectrum-actionbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}.button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}.button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.button.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}.button:active{background-color:var(--spectrum-actionbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-down,var(--spectrum-alias-border-color-down));color:var(--spectrum-actionbutton-text-color-down,var(--spectrum-alias-text-color-down))}.button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) .button{background-color:var(--spectrum-actionbutton-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) .button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) .button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([selected]) .button{background-color:var(--spectrum-actionbutton-background-color-selected,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) .button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-alias-icon-color))}:host([selected]) .button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-selected-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([selected]) .button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-hover))}:host([selected]) .button:hover{background-color:var(--spectrum-actionbutton-background-color-selected-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([selected]) .button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]) .button:active{background-color:var(--spectrum-actionbutton-background-color-selected-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-down,var(--spectrum-alias-border-color-down));color:var(--spectrum-actionbutton-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([selected]) .button:active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-alias-icon-color-down))}:host([selected][disabled]) .button{background-color:var(--spectrum-actionbutton-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([selected][disabled]) .button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}.spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-actionbutton-emphasized-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-emphasized-text-color,var(--spectrum-alias-text-color))}.spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color,var(--spectrum-alias-icon-color))}.spectrum-ActionButton--emphasized #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color,var(--spectrum-alias-icon-color))}:host([selected]) .spectrum-ActionButton--emphasized #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-selected,var(--spectrum-global-color-static-white))}:host([selected]) .spectrum-ActionButton--emphasized:hover #hold-affordance{color:var(--spectrum-actionbutton-emphasized-text-color-selected-hover,var(--spectrum-global-color-static-white))}.spectrum-ActionButton--emphasized:hover{background-color:var(--spectrum-actionbutton-emphasized-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-emphasized-border-color-hover,var(--spectrum-alias-border-color-hover));box-shadow:none;color:var(--spectrum-actionbutton-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}.spectrum-ActionButton--emphasized:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.spectrum-ActionButton--emphasized:hover #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.spectrum-ActionButton--emphasized.focus-visible{background-color:var(--spectrum-actionbutton-emphasized-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-emphasized-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-emphasized-text-color-key-focus,var(--spectrum-alias-text-color-hover))}.spectrum-ActionButton--emphasized.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.spectrum-ActionButton--emphasized.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}.spectrum-ActionButton--emphasized.is-active{background-color:var(--spectrum-actionbutton-emphasized-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-emphasized-border-color-down,var(--spectrum-alias-border-color-down));box-shadow:none;color:var(--spectrum-actionbutton-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}.spectrum-ActionButton--emphasized.is-active #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) .spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-emphasized-border-color-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) .spectrum-ActionButton--emphasized #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet][selected]) .spectrum-ActionButton--emphasized,:host([selected]) .spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected,var(--spectrum-semantic-cta-color-background-default));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected,var(--spectrum-semantic-cta-color-background-default));color:var(--spectrum-actionbutton-emphasized-text-color-selected,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.focus-visible,:host([selected]) .spectrum-ActionButton--emphasized.focus-visible{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-actionbutton-emphasized-text-color-selected-key-focus,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.focus-visible ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-key-focus,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized:hover,:host([selected]) .spectrum-ActionButton--emphasized:hover{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-hover,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-hover,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-actionbutton-emphasized-text-color-selected-hover,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized:hover ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-hover,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.is-active,:host([selected]) .spectrum-ActionButton--emphasized.is-active{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-down,var(--spectrum-semantic-cta-color-background-down));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-down,var(--spectrum-semantic-cta-color-background-down));color:var(--spectrum-actionbutton-emphasized-text-color-selected-down,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.is-active ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized.is-active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-down,var(--spectrum-global-color-static-white))}:host([quiet][selected][disabled]) .spectrum-ActionButton--emphasized,:host([selected][disabled]) .spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-emphasized-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected][disabled]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]),:host([selected][disabled]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) .button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) .button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 0 0 1px var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet]) .button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-down,var(--spectrum-alias-text-color-down))}:host([quiet][disabled]) .button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected]) .button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-quiet-text-color-selected,var(--spectrum-alias-text-color))}:host([quiet][selected]) .button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-key-focus,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) .button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-hover,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-quiet-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) .button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-down,var(--spectrum-alias-border-color-down));color:var(--spectrum-actionbutton-quiet-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([quiet][selected][disabled]) .button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-quiet-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-action-button.css.js.map

src/spectrum-action-button.css.ts

@@ -12,14 +12,17 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-#button{position:relative;height:var(--spectrum-actionbutton-height,var(--spectrum-alias-single-line-height));min-width:var(--spectrum-actionbutton-min-width,var(--spectrum-global-dimension-size-400));padding:0 calc(var(--spectrum-actionbutton-icon-padding-x,
+.button{position:relative;height:var(--spectrum-actionbutton-height,var(--spectrum-alias-single-line-height));min-width:var(--spectrum-actionbutton-min-width,var(--spectrum-global-dimension-size-400));padding:0 calc(var(--spectrum-actionbutton-icon-padding-x,
 var(--spectrum-global-dimension-size-85)) - var(--spectrum-actionbutton-border-size,
-var(--spectrum-alias-border-size-thin)));border-width:var(--spectrum-actionbutton-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-actionbutton-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-text-color,var(--spectrum-alias-text-color))}slot[name=icon]+#label{padding-left:var(--spectrum-actionbutton-icon-padding-x,var(--spectrum-global-dimension-size-85));padding-right:calc(var(--spectrum-actionbutton-text-padding-x,
+var(--spectrum-alias-border-size-thin)));border-width:var(--spectrum-actionbutton-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-actionbutton-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-text-color,var(--spectrum-alias-text-color))}:host([dir=ltr]) .button slot[name=icon]+#label{padding-left:var(--spectrum-actionbutton-icon-padding-x,var(--spectrum-global-dimension-size-85));padding-right:calc(var(--spectrum-actionbutton-text-padding-x,
 var(--spectrum-global-dimension-size-150)) - var(--spectrum-actionbutton-icon-padding-x,
-var(--spectrum-global-dimension-size-85)))}.spectrum-Icon--sizeS:only-child{position:absolute;top:calc(50% - var(--spectrum-actionbutton-icon-size,
-var(--spectrum-alias-workflow-icon-size))/2);left:calc(50% - var(--spectrum-actionbutton-icon-size,
+var(--spectrum-global-dimension-size-85)))}:host([dir=rtl]) .button slot[name=icon]+#label{padding-right:var(--spectrum-actionbutton-icon-padding-x,var(--spectrum-global-dimension-size-85));padding-left:calc(var(--spectrum-actionbutton-text-padding-x,
+var(--spectrum-global-dimension-size-150)) - var(--spectrum-actionbutton-icon-padding-x,
+var(--spectrum-global-dimension-size-85)))}:host([dir=ltr]) .button .spectrum-Icon--sizeS:only-child{left:calc(50% - var(--spectrum-actionbutton-icon-size,
+var(--spectrum-alias-workflow-icon-size))/2)}:host([dir=rtl]) .button .spectrum-Icon--sizeS:only-child{right:calc(50% - var(--spectrum-actionbutton-icon-size,
+var(--spectrum-alias-workflow-icon-size))/2)}.spectrum-Icon--sizeS:only-child{position:absolute;top:calc(50% - var(--spectrum-actionbutton-icon-size,
 var(--spectrum-alias-workflow-icon-size))/2)}#label:only-child{padding:0 calc(var(--spectrum-actionbutton-text-padding-x,
 var(--spectrum-global-dimension-size-150)) - var(--spectrum-actionbutton-icon-padding-x,
-var(--spectrum-global-dimension-size-85)))}#hold-affordance{position:absolute;right:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40));bottom:var(--spectrum-actionbutton-hold-icon-padding-bottom,var(--spectrum-global-dimension-size-40));color:var(--spectrum-actionbutton-hold-icon-color,var(--spectrum-alias-icon-color))}#label{align-self:center;justify-self:center;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#label:empty{display:none}:host([quiet]) #button{border-width:var(--spectrum-actionbutton-quiet-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-alias-text-color))}::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color,var(--spectrum-alias-icon-color))}#button:hover{background-color:var(--spectrum-actionbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}#button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}#button.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}#button:active{background-color:var(--spectrum-actionbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-down,var(--spectrum-alias-text-color-down))}#button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([selected]) #button{background-color:var(--spectrum-actionbutton-background-color-selected,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-alias-icon-color))}:host([selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-selected-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([selected]) #button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:hover{background-color:var(--spectrum-actionbutton-background-color-selected-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-hover,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([selected]) #button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:active{background-color:var(--spectrum-actionbutton-background-color-selected-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([selected]) #button:active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-alias-icon-color-down))}:host([selected][disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([selected][disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 0 0 1px var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-down,var(--spectrum-alias-text-color-down))}:host([quiet][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected,var(--spectrum-alias-text-color))}:host([quiet][selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-key-focus,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-hover,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-hover,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([quiet][selected][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-quiet-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}
+var(--spectrum-global-dimension-size-85)))}:host([dir=ltr]) #hold-affordance{right:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) #hold-affordance{left:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40));transform:matrix(-1,0,0,1,0,0)}#hold-affordance{position:absolute;bottom:var(--spectrum-actionbutton-hold-icon-padding-bottom,var(--spectrum-global-dimension-size-40));color:var(--spectrum-actionbutton-hold-icon-color,var(--spectrum-alias-icon-color))}#label{align-self:center;justify-self:center;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#label:empty{display:none}:host([quiet]) .button{border-width:var(--spectrum-actionbutton-quiet-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-alias-text-color))}::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color,var(--spectrum-alias-icon-color))}.button:hover{background-color:var(--spectrum-actionbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}.button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}.button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.button.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}.button:active{background-color:var(--spectrum-actionbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-down,var(--spectrum-alias-border-color-down));color:var(--spectrum-actionbutton-text-color-down,var(--spectrum-alias-text-color-down))}.button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) .button{background-color:var(--spectrum-actionbutton-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) .button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) .button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([selected]) .button{background-color:var(--spectrum-actionbutton-background-color-selected,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) .button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-alias-icon-color))}:host([selected]) .button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-selected-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([selected]) .button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-hover))}:host([selected]) .button:hover{background-color:var(--spectrum-actionbutton-background-color-selected-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([selected]) .button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]) .button:active{background-color:var(--spectrum-actionbutton-background-color-selected-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-down,var(--spectrum-alias-border-color-down));color:var(--spectrum-actionbutton-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([selected]) .button:active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-alias-icon-color-down))}:host([selected][disabled]) .button{background-color:var(--spectrum-actionbutton-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([selected][disabled]) .button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}.spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-actionbutton-emphasized-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-emphasized-text-color,var(--spectrum-alias-text-color))}.spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color,var(--spectrum-alias-icon-color))}.spectrum-ActionButton--emphasized #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color,var(--spectrum-alias-icon-color))}:host([selected]) .spectrum-ActionButton--emphasized #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-selected,var(--spectrum-global-color-static-white))}:host([selected]) .spectrum-ActionButton--emphasized:hover #hold-affordance{color:var(--spectrum-actionbutton-emphasized-text-color-selected-hover,var(--spectrum-global-color-static-white))}.spectrum-ActionButton--emphasized:hover{background-color:var(--spectrum-actionbutton-emphasized-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-emphasized-border-color-hover,var(--spectrum-alias-border-color-hover));box-shadow:none;color:var(--spectrum-actionbutton-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}.spectrum-ActionButton--emphasized:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.spectrum-ActionButton--emphasized:hover #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.spectrum-ActionButton--emphasized.focus-visible{background-color:var(--spectrum-actionbutton-emphasized-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-emphasized-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-emphasized-text-color-key-focus,var(--spectrum-alias-text-color-hover))}.spectrum-ActionButton--emphasized.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.spectrum-ActionButton--emphasized.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}.spectrum-ActionButton--emphasized.is-active{background-color:var(--spectrum-actionbutton-emphasized-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-emphasized-border-color-down,var(--spectrum-alias-border-color-down));box-shadow:none;color:var(--spectrum-actionbutton-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}.spectrum-ActionButton--emphasized.is-active #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) .spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-emphasized-border-color-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) .spectrum-ActionButton--emphasized #hold-affordance{color:var(--spectrum-actionbutton-emphasized-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet][selected]) .spectrum-ActionButton--emphasized,:host([selected]) .spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected,var(--spectrum-semantic-cta-color-background-default));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected,var(--spectrum-semantic-cta-color-background-default));color:var(--spectrum-actionbutton-emphasized-text-color-selected,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.focus-visible,:host([selected]) .spectrum-ActionButton--emphasized.focus-visible{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-actionbutton-emphasized-text-color-selected-key-focus,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.focus-visible ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-key-focus,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized:hover,:host([selected]) .spectrum-ActionButton--emphasized:hover{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-hover,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-hover,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-actionbutton-emphasized-text-color-selected-hover,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized:hover ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-hover,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.is-active,:host([selected]) .spectrum-ActionButton--emphasized.is-active{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-down,var(--spectrum-semantic-cta-color-background-down));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-down,var(--spectrum-semantic-cta-color-background-down));color:var(--spectrum-actionbutton-emphasized-text-color-selected-down,var(--spectrum-global-color-static-white))}:host([quiet][selected]) .spectrum-ActionButton--emphasized.is-active ::slotted([slot=icon]),:host([selected]) .spectrum-ActionButton--emphasized.is-active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-down,var(--spectrum-global-color-static-white))}:host([quiet][selected][disabled]) .spectrum-ActionButton--emphasized,:host([selected][disabled]) .spectrum-ActionButton--emphasized{background-color:var(--spectrum-actionbutton-emphasized-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-emphasized-border-color-selected-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-emphasized-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected][disabled]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]),:host([selected][disabled]) .spectrum-ActionButton--emphasized ::slotted([slot=icon]){color:var(--spectrum-actionbutton-emphasized-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) .button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) .button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 0 0 1px var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet]) .button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-down,var(--spectrum-alias-text-color-down))}:host([quiet][disabled]) .button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected]) .button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected,var(--spectrum-alias-border-color));color:var(--spectrum-actionbutton-quiet-text-color-selected,var(--spectrum-alias-text-color))}:host([quiet][selected]) .button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-key-focus,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) .button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-hover,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-quiet-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) .button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-down,var(--spectrum-alias-border-color-down));color:var(--spectrum-actionbutton-quiet-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([quiet][selected][disabled]) .button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-disabled,var(--spectrum-alias-border-color-disabled));color:var(--spectrum-actionbutton-quiet-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}
 `;
 export default styles;

src/spectrum-button-base.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-button-base.css.js

@@ -12,7 +12,7 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-#button{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;overflow:visible;margin:0;border-style:solid;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:1.3;cursor:pointer}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}::slotted([slot=icon]){max-height:100%;flex-shrink:0}
+.button{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;overflow:visible;margin:0;border-style:solid;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:1.3;-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}.button:focus{outline:none}.button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}.button:disabled{cursor:default}::slotted([slot=icon]){max-height:100%;flex-shrink:0}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-button-base.css.js.map

src/spectrum-button-base.css.ts

@@ -12,6 +12,6 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-#button{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;overflow:visible;margin:0;border-style:solid;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:1.3;cursor:pointer}#button:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}::slotted([slot=icon]){max-height:100%;flex-shrink:0}
+.button{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;overflow:visible;margin:0;border-style:solid;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;vertical-align:top;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;text-decoration:none;font-family:var(--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base));line-height:1.3;-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}.button:focus{outline:none}.button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}.button:disabled{cursor:default}::slotted([slot=icon]){max-height:100%;flex-shrink:0}
 `;
 export default styles;

src/spectrum-button.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-button.css.js

@@ -12,14 +12,15 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-#button:after{border-radius:calc(var(--spectrum-button-primary-border-radius,
+.button:after{border-radius:calc(var(--spectrum-button-primary-border-radius,
 var(--spectrum-alias-border-radius-large)) + var(--spectrum-alias-focus-ring-gap,
 var(--spectrum-global-dimension-static-size-25)));content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}#button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-2)}#button{border-width:var(--spectrum-button-primary-border-size,var(--spectrum-alias-border-size-thick));border-style:solid;border-radius:var(--spectrum-button-primary-border-radius,var(--spectrum-alias-border-radius-large));min-height:var(--spectrum-button-primary-height,var(--spectrum-alias-single-line-height));height:auto;min-width:var(--spectrum-button-primary-min-width);padding:var(--spectrum-global-dimension-size-50) calc(var(--spectrum-button-primary-padding-x,
+var(--spectrum-global-dimension-static-size-25))*-1);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}.button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-2)}.button{border-width:var(--spectrum-button-primary-border-size,var(--spectrum-alias-border-size-thick));border-style:solid;border-radius:var(--spectrum-button-primary-border-radius,var(--spectrum-alias-border-radius-large));min-height:var(--spectrum-button-primary-height,var(--spectrum-alias-single-line-height));height:auto;min-width:var(--spectrum-button-primary-min-width);padding:var(--spectrum-global-dimension-size-50) calc(var(--spectrum-button-primary-padding-x,
 var(--spectrum-global-dimension-size-200)) - var(--spectrum-button-primary-border-size,
-var(--spectrum-alias-border-size-thick)));padding-bottom:calc(var(--spectrum-global-dimension-size-50) + 1px);padding-top:calc(var(--spectrum-global-dimension-size-50) - 1px);font-size:var(--spectrum-button-primary-text-size,var(--spectrum-alias-pill-button-text-size));font-weight:var(--spectrum-button-primary-text-font-weight,var(--spectrum-global-font-weight-bold))}#button:active,#button:hover{box-shadow:none}slot[name=icon]+#label{margin-left:var(--spectrum-button-primary-text-gap,var(--spectrum-global-dimension-size-100))}#label+::slotted([slot=icon]){margin-left:calc(var(--spectrum-button-primary-text-gap,
-var(--spectrum-global-dimension-size-100))/2)}#label{align-self:center;justify-self:center;text-align:center;width:100%}#label:empty{display:none}#button.focus-visible:after,#button.is-focused:after{box-shadow:0 0 0 var(--spectrum-button-primary-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-button-primary-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([variant=cta]) #button{background-color:var(--spectrum-button-cta-background-color,var(--spectrum-semantic-cta-color-background-default));border-color:var(--spectrum-button-cta-border-color,var(--spectrum-semantic-cta-color-background-default));color:var(--spectrum-button-cta-text-color,var(--spectrum-global-color-static-white))}:host([variant=cta]) #button:hover{background-color:var(--spectrum-button-cta-background-color-hover,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-hover,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=cta]) #button.focus-visible{background-color:var(--spectrum-button-cta-background-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=cta]) #button:active{background-color:var(--spectrum-button-cta-background-color-down,var(--spectrum-semantic-cta-color-background-down));border-color:var(--spectrum-button-cta-border-color-down,var(--spectrum-semantic-cta-color-background-down));color:var(--spectrum-button-cta-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=cta][disabled]) #button{background-color:var(--spectrum-button-cta-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-cta-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-cta-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=primary]) #button{background-color:var(--spectrum-button-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-primary-border-color,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary]) #button:hover{background-color:var(--spectrum-button-primary-background-color-hover,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-hover,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=primary]) #button.focus-visible{background-color:var(--spectrum-button-primary-background-color-key-focus,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=primary]) #button:active{background-color:var(--spectrum-button-primary-background-color-down,var(--spectrum-global-color-gray-900));border-color:var(--spectrum-button-primary-border-color-down,var(--spectrum-global-color-gray-900));color:var(--spectrum-button-primary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=primary][disabled]) #button{background-color:var(--spectrum-button-primary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-primary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary]) #button{background-color:var(--spectrum-button-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-secondary-border-color,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary]) #button:hover{background-color:var(--spectrum-button-secondary-background-color-hover,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-hover,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) #button.focus-visible{background-color:var(--spectrum-button-secondary-background-color-key-focus,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-key-focus,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) #button:active{background-color:var(--spectrum-button-secondary-background-color-down,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-secondary-border-color-down,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-secondary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=secondary][disabled]) #button{background-color:var(--spectrum-button-secondary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-secondary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative]) #button{background-color:var(--spectrum-button-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-warning-border-color,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative]) #button:hover{background-color:var(--spectrum-button-warning-background-color-hover,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-hover,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=negative]) #button.focus-visible{background-color:var(--spectrum-button-warning-background-color-key-focus,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-key-focus,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=negative]) #button:active{background-color:var(--spectrum-button-warning-background-color-down,var(--spectrum-global-color-red-700));border-color:var(--spectrum-button-warning-border-color-down,var(--spectrum-global-color-red-700));color:var(--spectrum-button-warning-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=negative][disabled]) #button{background-color:var(--spectrum-button-warning-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-warning-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=overBackground]) #button{background-color:var(--spectrum-button-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-over-background-border-color,var(--spectrum-global-color-static-white));color:var(--spectrum-button-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.focus-visible,:host([variant=overBackground]) #button:hover{background-color:var(--spectrum-button-over-background-background-color-hover,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-hover,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground]) #button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button:active{background-color:var(--spectrum-button-over-background-background-color-down,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-down,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground][disabled]) #button{background-color:var(--spectrum-button-over-background-background-color-disabled,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-over-background-text-color-disabled,hsla(0,0%,100%,.35))}:host([variant=overBackground][quiet]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) #button.focus-visible,:host([variant=overBackground][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) #button.focus-visible{box-shadow:none}:host([variant=overBackground][quiet]) #button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) #button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}:host([variant=primary][quiet]) #button{background-color:var(--spectrum-button-quiet-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-primary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-hover,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) #button.focus-visible{background-color:var(--spectrum-button-quiet-primary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-key-focus,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) #button:active{background-color:var(--spectrum-button-quiet-primary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-primary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-primary-text-color-down,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-primary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary][quiet]) #button{background-color:var(--spectrum-button-quiet-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-secondary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-hover,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) #button.focus-visible{background-color:var(--spectrum-button-quiet-secondary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-key-focus,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) #button:active{background-color:var(--spectrum-button-quiet-secondary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-secondary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-secondary-text-color-down,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-secondary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative][quiet]) #button{background-color:var(--spectrum-button-quiet-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-warning-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-hover,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) #button.focus-visible{background-color:var(--spectrum-button-quiet-warning-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-key-focus,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) #button:active{background-color:var(--spectrum-button-quiet-warning-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-warning-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-warning-text-color-down,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-warning-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}
+var(--spectrum-alias-border-size-thick)));padding-bottom:calc(var(--spectrum-global-dimension-size-50) + 1px);padding-top:calc(var(--spectrum-global-dimension-size-50) - 1px);font-size:var(--spectrum-button-primary-text-size,var(--spectrum-alias-pill-button-text-size));font-weight:var(--spectrum-button-primary-text-font-weight,var(--spectrum-global-font-weight-bold))}.button:active,.button:hover{box-shadow:none}:host([dir=ltr]) .button slot[name=icon]+#label{margin-left:var(--spectrum-button-primary-text-gap,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .button slot[name=icon]+#label{margin-right:var(--spectrum-button-primary-text-gap,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .button #label+::slotted([slot=icon]){margin-left:calc(var(--spectrum-button-primary-text-gap,
+var(--spectrum-global-dimension-size-100))/2)}:host([dir=rtl]) .button #label+::slotted([slot=icon]){margin-right:calc(var(--spectrum-button-primary-text-gap,
+var(--spectrum-global-dimension-size-100))/2)}#label{align-self:center;justify-self:center;text-align:center}#label:empty{display:none}.button.focus-visible:after,.button.is-focused:after{box-shadow:0 0 0 var(--spectrum-button-primary-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-button-primary-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([variant=cta]) .button{background-color:var(--spectrum-button-cta-background-color,var(--spectrum-semantic-cta-color-background-default));border-color:var(--spectrum-button-cta-border-color,var(--spectrum-semantic-cta-color-background-default));color:var(--spectrum-button-cta-text-color,var(--spectrum-global-color-static-white))}:host([variant=cta]) .button:hover{background-color:var(--spectrum-button-cta-background-color-hover,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-hover,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=cta]) .button.focus-visible{background-color:var(--spectrum-button-cta-background-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=cta]) .button:active{background-color:var(--spectrum-button-cta-background-color-down,var(--spectrum-semantic-cta-color-background-down));border-color:var(--spectrum-button-cta-border-color-down,var(--spectrum-semantic-cta-color-background-down));color:var(--spectrum-button-cta-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=cta][disabled]) .button{background-color:var(--spectrum-button-cta-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-cta-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-cta-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=primary]) .button{background-color:var(--spectrum-button-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-primary-border-color,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary]) .button:hover{background-color:var(--spectrum-button-primary-background-color-hover,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-hover,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=primary]) .button.focus-visible{background-color:var(--spectrum-button-primary-background-color-key-focus,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=primary]) .button:active{background-color:var(--spectrum-button-primary-background-color-down,var(--spectrum-global-color-gray-900));border-color:var(--spectrum-button-primary-border-color-down,var(--spectrum-global-color-gray-900));color:var(--spectrum-button-primary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=primary][disabled]) .button{background-color:var(--spectrum-button-primary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-primary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary]) .button{background-color:var(--spectrum-button-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-secondary-border-color,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary]) .button:hover{background-color:var(--spectrum-button-secondary-background-color-hover,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-hover,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) .button.focus-visible{background-color:var(--spectrum-button-secondary-background-color-key-focus,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-key-focus,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) .button:active{background-color:var(--spectrum-button-secondary-background-color-down,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-secondary-border-color-down,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-secondary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=secondary][disabled]) .button{background-color:var(--spectrum-button-secondary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-secondary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative]) .button{background-color:var(--spectrum-button-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-warning-border-color,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative]) .button:hover{background-color:var(--spectrum-button-warning-background-color-hover,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-hover,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=negative]) .button.focus-visible{background-color:var(--spectrum-button-warning-background-color-key-focus,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-key-focus,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=negative]) .button:active{background-color:var(--spectrum-button-warning-background-color-down,var(--spectrum-global-color-red-700));border-color:var(--spectrum-button-warning-border-color-down,var(--spectrum-global-color-red-700));color:var(--spectrum-button-warning-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=negative][disabled]) .button{background-color:var(--spectrum-button-warning-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-warning-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=overBackground]) .button{background-color:var(--spectrum-button-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-over-background-border-color,var(--spectrum-global-color-static-white));color:var(--spectrum-button-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.focus-visible,:host([variant=overBackground]) .button:hover{background-color:var(--spectrum-button-over-background-background-color-hover,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-hover,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground]) .button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button:active{background-color:var(--spectrum-button-over-background-background-color-down,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-down,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground][disabled]) .button{background-color:var(--spectrum-button-over-background-background-color-disabled,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-over-background-text-color-disabled,hsla(0,0%,100%,.35))}:host([variant=overBackground][quiet]) .button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) .button.focus-visible,:host([variant=overBackground][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) .button.focus-visible{box-shadow:none}:host([variant=overBackground][quiet]) .button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) .button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}:host([variant=primary][quiet]) .button{background-color:var(--spectrum-button-quiet-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-primary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-hover,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) .button.focus-visible{background-color:var(--spectrum-button-quiet-primary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-key-focus,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) .button:active{background-color:var(--spectrum-button-quiet-primary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-primary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-primary-text-color-down,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-primary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary][quiet]) .button{background-color:var(--spectrum-button-quiet-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-secondary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-hover,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) .button.focus-visible{background-color:var(--spectrum-button-quiet-secondary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-key-focus,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) .button:active{background-color:var(--spectrum-button-quiet-secondary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-secondary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-secondary-text-color-down,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-secondary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative][quiet]) .button{background-color:var(--spectrum-button-quiet-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-warning-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-hover,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) .button.focus-visible{background-color:var(--spectrum-button-quiet-warning-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-key-focus,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) .button:active{background-color:var(--spectrum-button-quiet-warning-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-warning-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-warning-text-color-down,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-warning-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-button.css.js.map

src/spectrum-button.css.ts

@@ -12,13 +12,14 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-#button:after{border-radius:calc(var(--spectrum-button-primary-border-radius,
+.button:after{border-radius:calc(var(--spectrum-button-primary-border-radius,
 var(--spectrum-alias-border-radius-large)) + var(--spectrum-alias-focus-ring-gap,
 var(--spectrum-global-dimension-static-size-25)));content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}#button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-2)}#button{border-width:var(--spectrum-button-primary-border-size,var(--spectrum-alias-border-size-thick));border-style:solid;border-radius:var(--spectrum-button-primary-border-radius,var(--spectrum-alias-border-radius-large));min-height:var(--spectrum-button-primary-height,var(--spectrum-alias-single-line-height));height:auto;min-width:var(--spectrum-button-primary-min-width);padding:var(--spectrum-global-dimension-size-50) calc(var(--spectrum-button-primary-padding-x,
+var(--spectrum-global-dimension-static-size-25))*-1);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}.button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-2)}.button{border-width:var(--spectrum-button-primary-border-size,var(--spectrum-alias-border-size-thick));border-style:solid;border-radius:var(--spectrum-button-primary-border-radius,var(--spectrum-alias-border-radius-large));min-height:var(--spectrum-button-primary-height,var(--spectrum-alias-single-line-height));height:auto;min-width:var(--spectrum-button-primary-min-width);padding:var(--spectrum-global-dimension-size-50) calc(var(--spectrum-button-primary-padding-x,
 var(--spectrum-global-dimension-size-200)) - var(--spectrum-button-primary-border-size,
-var(--spectrum-alias-border-size-thick)));padding-bottom:calc(var(--spectrum-global-dimension-size-50) + 1px);padding-top:calc(var(--spectrum-global-dimension-size-50) - 1px);font-size:var(--spectrum-button-primary-text-size,var(--spectrum-alias-pill-button-text-size));font-weight:var(--spectrum-button-primary-text-font-weight,var(--spectrum-global-font-weight-bold))}#button:active,#button:hover{box-shadow:none}slot[name=icon]+#label{margin-left:var(--spectrum-button-primary-text-gap,var(--spectrum-global-dimension-size-100))}#label+::slotted([slot=icon]){margin-left:calc(var(--spectrum-button-primary-text-gap,
-var(--spectrum-global-dimension-size-100))/2)}#label{align-self:center;justify-self:center;text-align:center;width:100%}#label:empty{display:none}#button.focus-visible:after,#button.is-focused:after{box-shadow:0 0 0 var(--spectrum-button-primary-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-button-primary-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([variant=cta]) #button{background-color:var(--spectrum-button-cta-background-color,var(--spectrum-semantic-cta-color-background-default));border-color:var(--spectrum-button-cta-border-color,var(--spectrum-semantic-cta-color-background-default));color:var(--spectrum-button-cta-text-color,var(--spectrum-global-color-static-white))}:host([variant=cta]) #button:hover{background-color:var(--spectrum-button-cta-background-color-hover,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-hover,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=cta]) #button.focus-visible{background-color:var(--spectrum-button-cta-background-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=cta]) #button:active{background-color:var(--spectrum-button-cta-background-color-down,var(--spectrum-semantic-cta-color-background-down));border-color:var(--spectrum-button-cta-border-color-down,var(--spectrum-semantic-cta-color-background-down));color:var(--spectrum-button-cta-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=cta][disabled]) #button{background-color:var(--spectrum-button-cta-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-cta-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-cta-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=primary]) #button{background-color:var(--spectrum-button-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-primary-border-color,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary]) #button:hover{background-color:var(--spectrum-button-primary-background-color-hover,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-hover,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=primary]) #button.focus-visible{background-color:var(--spectrum-button-primary-background-color-key-focus,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=primary]) #button:active{background-color:var(--spectrum-button-primary-background-color-down,var(--spectrum-global-color-gray-900));border-color:var(--spectrum-button-primary-border-color-down,var(--spectrum-global-color-gray-900));color:var(--spectrum-button-primary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=primary][disabled]) #button{background-color:var(--spectrum-button-primary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-primary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary]) #button{background-color:var(--spectrum-button-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-secondary-border-color,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary]) #button:hover{background-color:var(--spectrum-button-secondary-background-color-hover,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-hover,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) #button.focus-visible{background-color:var(--spectrum-button-secondary-background-color-key-focus,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-key-focus,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) #button:active{background-color:var(--spectrum-button-secondary-background-color-down,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-secondary-border-color-down,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-secondary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=secondary][disabled]) #button{background-color:var(--spectrum-button-secondary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-secondary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative]) #button{background-color:var(--spectrum-button-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-warning-border-color,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative]) #button:hover{background-color:var(--spectrum-button-warning-background-color-hover,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-hover,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=negative]) #button.focus-visible{background-color:var(--spectrum-button-warning-background-color-key-focus,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-key-focus,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=negative]) #button:active{background-color:var(--spectrum-button-warning-background-color-down,var(--spectrum-global-color-red-700));border-color:var(--spectrum-button-warning-border-color-down,var(--spectrum-global-color-red-700));color:var(--spectrum-button-warning-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=negative][disabled]) #button{background-color:var(--spectrum-button-warning-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-warning-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=overBackground]) #button{background-color:var(--spectrum-button-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-over-background-border-color,var(--spectrum-global-color-static-white));color:var(--spectrum-button-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.focus-visible,:host([variant=overBackground]) #button:hover{background-color:var(--spectrum-button-over-background-background-color-hover,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-hover,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground]) #button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button:active{background-color:var(--spectrum-button-over-background-background-color-down,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-down,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground][disabled]) #button{background-color:var(--spectrum-button-over-background-background-color-disabled,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-over-background-text-color-disabled,hsla(0,0%,100%,.35))}:host([variant=overBackground][quiet]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) #button.focus-visible,:host([variant=overBackground][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) #button.focus-visible{box-shadow:none}:host([variant=overBackground][quiet]) #button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) #button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}:host([variant=primary][quiet]) #button{background-color:var(--spectrum-button-quiet-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-primary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-hover,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) #button.focus-visible{background-color:var(--spectrum-button-quiet-primary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-key-focus,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) #button:active{background-color:var(--spectrum-button-quiet-primary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-primary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-primary-text-color-down,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-primary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary][quiet]) #button{background-color:var(--spectrum-button-quiet-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-secondary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-hover,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) #button.focus-visible{background-color:var(--spectrum-button-quiet-secondary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-key-focus,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) #button:active{background-color:var(--spectrum-button-quiet-secondary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-secondary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-secondary-text-color-down,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-secondary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative][quiet]) #button{background-color:var(--spectrum-button-quiet-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative][quiet]) #button:hover{background-color:var(--spectrum-button-quiet-warning-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-hover,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) #button.focus-visible{background-color:var(--spectrum-button-quiet-warning-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-key-focus,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) #button:active{background-color:var(--spectrum-button-quiet-warning-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-warning-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-warning-text-color-down,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-warning-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}
+var(--spectrum-alias-border-size-thick)));padding-bottom:calc(var(--spectrum-global-dimension-size-50) + 1px);padding-top:calc(var(--spectrum-global-dimension-size-50) - 1px);font-size:var(--spectrum-button-primary-text-size,var(--spectrum-alias-pill-button-text-size));font-weight:var(--spectrum-button-primary-text-font-weight,var(--spectrum-global-font-weight-bold))}.button:active,.button:hover{box-shadow:none}:host([dir=ltr]) .button slot[name=icon]+#label{margin-left:var(--spectrum-button-primary-text-gap,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .button slot[name=icon]+#label{margin-right:var(--spectrum-button-primary-text-gap,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]) .button #label+::slotted([slot=icon]){margin-left:calc(var(--spectrum-button-primary-text-gap,
+var(--spectrum-global-dimension-size-100))/2)}:host([dir=rtl]) .button #label+::slotted([slot=icon]){margin-right:calc(var(--spectrum-button-primary-text-gap,
+var(--spectrum-global-dimension-size-100))/2)}#label{align-self:center;justify-self:center;text-align:center}#label:empty{display:none}.button.focus-visible:after,.button.is-focused:after{box-shadow:0 0 0 var(--spectrum-button-primary-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-button-primary-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([variant=cta]) .button{background-color:var(--spectrum-button-cta-background-color,var(--spectrum-semantic-cta-color-background-default));border-color:var(--spectrum-button-cta-border-color,var(--spectrum-semantic-cta-color-background-default));color:var(--spectrum-button-cta-text-color,var(--spectrum-global-color-static-white))}:host([variant=cta]) .button:hover{background-color:var(--spectrum-button-cta-background-color-hover,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-hover,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=cta]) .button.focus-visible{background-color:var(--spectrum-button-cta-background-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));border-color:var(--spectrum-button-cta-border-color-key-focus,var(--spectrum-semantic-cta-color-background-hover));color:var(--spectrum-button-cta-text-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=cta]) .button:active{background-color:var(--spectrum-button-cta-background-color-down,var(--spectrum-semantic-cta-color-background-down));border-color:var(--spectrum-button-cta-border-color-down,var(--spectrum-semantic-cta-color-background-down));color:var(--spectrum-button-cta-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=cta][disabled]) .button{background-color:var(--spectrum-button-cta-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-cta-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-cta-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=primary]) .button{background-color:var(--spectrum-button-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-primary-border-color,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary]) .button:hover{background-color:var(--spectrum-button-primary-background-color-hover,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-hover,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=primary]) .button.focus-visible{background-color:var(--spectrum-button-primary-background-color-key-focus,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-primary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=primary]) .button:active{background-color:var(--spectrum-button-primary-background-color-down,var(--spectrum-global-color-gray-900));border-color:var(--spectrum-button-primary-border-color-down,var(--spectrum-global-color-gray-900));color:var(--spectrum-button-primary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=primary][disabled]) .button{background-color:var(--spectrum-button-primary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-primary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary]) .button{background-color:var(--spectrum-button-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-secondary-border-color,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary]) .button:hover{background-color:var(--spectrum-button-secondary-background-color-hover,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-hover,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) .button.focus-visible{background-color:var(--spectrum-button-secondary-background-color-key-focus,var(--spectrum-global-color-gray-700));border-color:var(--spectrum-button-secondary-border-color-key-focus,var(--spectrum-global-color-gray-700));color:var(--spectrum-button-secondary-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=secondary]) .button:active{background-color:var(--spectrum-button-secondary-background-color-down,var(--spectrum-global-color-gray-800));border-color:var(--spectrum-button-secondary-border-color-down,var(--spectrum-global-color-gray-800));color:var(--spectrum-button-secondary-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=secondary][disabled]) .button{background-color:var(--spectrum-button-secondary-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-secondary-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative]) .button{background-color:var(--spectrum-button-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-warning-border-color,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative]) .button:hover{background-color:var(--spectrum-button-warning-background-color-hover,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-hover,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=negative]) .button.focus-visible{background-color:var(--spectrum-button-warning-background-color-key-focus,var(--spectrum-semantic-negative-color-text-small));border-color:var(--spectrum-button-warning-border-color-key-focus,var(--spectrum-semantic-negative-color-text-small));color:var(--spectrum-button-warning-text-color-key-focus,var(--spectrum-global-color-gray-50))}:host([variant=negative]) .button:active{background-color:var(--spectrum-button-warning-background-color-down,var(--spectrum-global-color-red-700));border-color:var(--spectrum-button-warning-border-color-down,var(--spectrum-global-color-red-700));color:var(--spectrum-button-warning-text-color-down,var(--spectrum-global-color-gray-50))}:host([variant=negative][disabled]) .button{background-color:var(--spectrum-button-warning-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-warning-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=overBackground]) .button{background-color:var(--spectrum-button-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-over-background-border-color,var(--spectrum-global-color-static-white));color:var(--spectrum-button-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.focus-visible,:host([variant=overBackground]) .button:hover{background-color:var(--spectrum-button-over-background-background-color-hover,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-hover,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground]) .button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button:active{background-color:var(--spectrum-button-over-background-background-color-down,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-down,var(--spectrum-global-color-static-white));color:inherit}:host([variant=overBackground][disabled]) .button{background-color:var(--spectrum-button-over-background-background-color-disabled,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-over-background-text-color-disabled,hsla(0,0%,100%,.35))}:host([variant=overBackground][quiet]) .button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) .button.focus-visible,:host([variant=overBackground][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) .button.focus-visible{box-shadow:none}:host([variant=overBackground][quiet]) .button.focus-visible:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet]) .button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}:host([variant=primary][quiet]) .button{background-color:var(--spectrum-button-quiet-primary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color,var(--spectrum-global-color-gray-800))}:host([variant=primary][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-primary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-hover,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) .button.focus-visible{background-color:var(--spectrum-button-quiet-primary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-primary-text-color-key-focus,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet]) .button:active{background-color:var(--spectrum-button-quiet-primary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-primary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-primary-text-color-down,var(--spectrum-global-color-gray-900))}:host([variant=primary][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-primary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-primary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-primary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=secondary][quiet]) .button{background-color:var(--spectrum-button-quiet-secondary-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color,var(--spectrum-global-color-gray-700))}:host([variant=secondary][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-secondary-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-hover,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) .button.focus-visible{background-color:var(--spectrum-button-quiet-secondary-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-secondary-text-color-key-focus,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet]) .button:active{background-color:var(--spectrum-button-quiet-secondary-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-secondary-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-secondary-text-color-down,var(--spectrum-global-color-gray-800))}:host([variant=secondary][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-secondary-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-secondary-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-secondary-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([variant=negative][quiet]) .button{background-color:var(--spectrum-button-quiet-warning-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color,var(--spectrum-semantic-negative-color-text-small))}:host([variant=negative][quiet]) .button:hover{background-color:var(--spectrum-button-quiet-warning-background-color-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-hover,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-hover,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) .button.focus-visible{background-color:var(--spectrum-button-quiet-warning-background-color-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,var(--spectrum-global-color-gray-200));color:var(--spectrum-button-quiet-warning-text-color-key-focus,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet]) .button:active{background-color:var(--spectrum-button-quiet-warning-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-button-quiet-warning-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-button-quiet-warning-text-color-down,var(--spectrum-global-color-red-700))}:host([variant=negative][quiet][disabled]) .button{background-color:var(--spectrum-button-quiet-warning-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-warning-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}
 `;
 export default styles;

src/spectrum-clear-button.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-clear-button.css.js

@@ -12,8 +12,12 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host([variant=overBackground]) #button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}#button{width:var(--spectrum-clearbutton-medium-width,var(--spectrum-alias-single-line-height));height:var(--spectrum-clearbutton-medium-height,var(--spectrum-alias-single-line-height));border-radius:100%;padding:0;border:none;background-color:var(--spectrum-clearbutton-medium-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color,var(--spectrum-alias-icon-color))}#button,#button>.icon{margin:0}:host([small]) #button{width:var(--spectrum-clearbutton-small-width,var(--spectrum-global-dimension-size-300));height:var(--spectrum-clearbutton-small-height,var(--spectrum-global-dimension-size-300))}#button:hover{background-color:var(--spectrum-clearbutton-medium-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:active{background-color:var(--spectrum-clearbutton-medium-background-color-down,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-down,var(--spectrum-alias-icon-color-down))}#button.focus-visible{background-color:var(--spectrum-clearbutton-medium-background-color-key-focus,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}#button.is-disabled,#button:disabled{background-color:var(--spectrum-clearbutton-medium-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([variant=overBackground]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.focus-visible,:host([variant=overBackground]) #button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.focus-visible{box-shadow:none}:host([variant=overBackground]) #button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.is-disabled,:host([variant=overBackground]) #button:disabled{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}
+.button:after{border-radius:calc(var(--spectrum-button-primary-border-radius,
+var(--spectrum-alias-border-radius-large)) + var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25)));content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-1);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}.button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-2)}.button{width:var(--spectrum-clearbutton-medium-width,var(--spectrum-alias-single-line-height));height:var(--spectrum-clearbutton-medium-height,var(--spectrum-alias-single-line-height));border-radius:100%;padding:0;border:none;background-color:var(--spectrum-clearbutton-medium-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color,var(--spectrum-alias-icon-color))}.button,.button>.icon{margin:0}:host([variant=overBackground]) .button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([small]) .button{width:var(--spectrum-clearbutton-small-width,var(--spectrum-global-dimension-size-300));height:var(--spectrum-clearbutton-small-height,var(--spectrum-global-dimension-size-300))}.button:hover{background-color:var(--spectrum-clearbutton-medium-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.button:active{background-color:var(--spectrum-clearbutton-medium-background-color-down,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-down,var(--spectrum-alias-icon-color-down))}.button.focus-visible{background-color:var(--spectrum-clearbutton-medium-background-color-key-focus,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.button.is-disabled,.button:disabled{background-color:var(--spectrum-clearbutton-medium-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([variant=overBackground]) .button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.focus-visible,:host([variant=overBackground]) .button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.focus-visible{box-shadow:none}:host([variant=overBackground]) .button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.is-disabled,:host([variant=overBackground]) .button:disabled{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-clear-button.css.js.map

src/spectrum-clear-button.css.ts

@@ -12,7 +12,11 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-:host([variant=overBackground]) #button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}#button{width:var(--spectrum-clearbutton-medium-width,var(--spectrum-alias-single-line-height));height:var(--spectrum-clearbutton-medium-height,var(--spectrum-alias-single-line-height));border-radius:100%;padding:0;border:none;background-color:var(--spectrum-clearbutton-medium-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color,var(--spectrum-alias-icon-color))}#button,#button>.icon{margin:0}:host([small]) #button{width:var(--spectrum-clearbutton-small-width,var(--spectrum-global-dimension-size-300));height:var(--spectrum-clearbutton-small-height,var(--spectrum-global-dimension-size-300))}#button:hover{background-color:var(--spectrum-clearbutton-medium-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:active{background-color:var(--spectrum-clearbutton-medium-background-color-down,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-down,var(--spectrum-alias-icon-color-down))}#button.focus-visible{background-color:var(--spectrum-clearbutton-medium-background-color-key-focus,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}#button.is-disabled,#button:disabled{background-color:var(--spectrum-clearbutton-medium-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([variant=overBackground]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.focus-visible,:host([variant=overBackground]) #button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.focus-visible{box-shadow:none}:host([variant=overBackground]) #button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) #button.is-disabled,:host([variant=overBackground]) #button:disabled{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}
+.button:after{border-radius:calc(var(--spectrum-button-primary-border-radius,
+var(--spectrum-alias-border-radius-large)) + var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25)));content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-1);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}.button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-2)}.button{width:var(--spectrum-clearbutton-medium-width,var(--spectrum-alias-single-line-height));height:var(--spectrum-clearbutton-medium-height,var(--spectrum-alias-single-line-height));border-radius:100%;padding:0;border:none;background-color:var(--spectrum-clearbutton-medium-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color,var(--spectrum-alias-icon-color))}.button,.button>.icon{margin:0}:host([variant=overBackground]) .button.focus-visible:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}:host([small]) .button{width:var(--spectrum-clearbutton-small-width,var(--spectrum-global-dimension-size-300));height:var(--spectrum-clearbutton-small-height,var(--spectrum-global-dimension-size-300))}.button:hover{background-color:var(--spectrum-clearbutton-medium-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-hover,var(--spectrum-alias-icon-color-hover))}.button:active{background-color:var(--spectrum-clearbutton-medium-background-color-down,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-down,var(--spectrum-alias-icon-color-down))}.button.focus-visible{background-color:var(--spectrum-clearbutton-medium-background-color-key-focus,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}.button.is-disabled,.button:disabled{background-color:var(--spectrum-clearbutton-medium-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-clearbutton-medium-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([variant=overBackground]) .button{background-color:var(--spectrum-button-quiet-over-background-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.focus-visible,:host([variant=overBackground]) .button:hover{background-color:var(--spectrum-button-quiet-over-background-background-color-hover,hsla(0,0%,100%,.1));border-color:var(--spectrum-button-quiet-over-background-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-hover,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.focus-visible{box-shadow:none}:host([variant=overBackground]) .button:active{background-color:var(--spectrum-button-quiet-over-background-background-color-down,hsla(0,0%,100%,.15));border-color:var(--spectrum-button-quiet-over-background-border-color-down,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-down,var(--spectrum-global-color-static-white))}:host([variant=overBackground]) .button.is-disabled,:host([variant=overBackground]) .button:disabled{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-button-quiet-over-background-text-color-disabled,hsla(0,0%,100%,.15))}
 `;
 export default styles;

src/spectrum-config.js

@@ -20,5 +20,5 @@ /*
                 selector: '.spectrum-Button',
-                shadowSelector: '#button',
+                shadowSelector: '.button',
             },
-            focus: '#button',
+            focus: '.button',
             slots: [
@@ -30,3 +30,3 @@ {
             ],
-            excludeSourceSelector: [/^(?!(.*),(.*),(.*),(.*),(.*),(.*))/],
+            excludeSourceSelector: [/^(?!(.*),(.*),(.*),(.*),(.*))/],
         },
@@ -37,5 +37,5 @@ {
                 selector: '.spectrum-FieldButton',
-                shadowSelector: '#button',
+                shadowSelector: '.button',
             },
-            focus: '#button',
+            focus: '.button',
             attributes: [
@@ -59,4 +59,5 @@ {
             ],
+            exclude: [/\.spectrum-ActionButton/, /\.spectrum-Button/],
             excludeSourceSelector: [
-                /^([^\s]*),([^\s]*),([^\s]*),([^\s]*),([^\s]*),([^\s]*)$/,
+                /^([^\s]*),([^\s]*),([^\s]*),([^\s]*),([^\s]*)$/,
             ],
@@ -68,5 +69,5 @@ },
                 selector: '.spectrum-Button',
-                shadowSelector: '#button',
+                shadowSelector: '.button',
             },
-            focus: '#button',
+            focus: '.button',
             attributes: [
@@ -104,4 +105,4 @@ {
             ],
-            exclude: [/\.is-disabled/],
-            excludeSourceSelector: [/^(.*),(.*),(.*),(.*),(.*),(.*)$/],
+            exclude: [/\.is-disabled/, /\.spectrum-ActionButton/],
+            excludeSourceSelector: [/^(.*),(.*),(.*),(.*),(.*)$/],
         },
@@ -112,4 +113,5 @@ {
                 selector: '.spectrum-ActionButton',
-                shadowSelector: '#button',
+                shadowSelector: '.button',
             },
+            focus: '.button',
             attributes: [
@@ -143,4 +145,4 @@ {
             ],
-            exclude: [/\.is-disabled/],
-            excludeSourceSelector: [/^(.*),(.*),(.*),(.*),(.*),(.*)$/],
+            exclude: [/\.is-disabled/, /\.spectrum-Button/],
+            excludeSourceSelector: [/^(.*),(.*),(.*),(.*),(.*)$/],
         },
@@ -151,5 +153,5 @@ {
                 selector: '.spectrum-ClearButton',
-                shadowSelector: '#button',
+                shadowSelector: '.button',
             },
-            focus: '#button',
+            focus: '.button',
             attributes: [
@@ -183,3 +185,4 @@ {
             ],
-            excludeSourceSelector: [/^(.*),(.*),(.*),(.*),(.*),(.*)$/],
+            exclude: [/\.spectrum-ActionButton/, /\.spectrum-Button/],
+            excludeSourceSelector: [/^(.*),(.*),(.*),(.*),(.*)$/],
         },
@@ -186,0 +189,0 @@ ],

src/spectrum-fieldbutton.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-fieldbutton.css.js

@@ -12,7 +12,7 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-.icon{max-height:100%;flex-shrink:0}#button{height:var(--spectrum-dropdown-height,var(--spectrum-global-dimension-size-400));font-family:inherit;font-weight:400;font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));line-height:normal;-webkit-font-smoothing:initial;cursor:pointer;outline:none;margin:0;padding:0 var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));border-radius:var(--spectrum-global-dimension-size-50);transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-fieldbutton-background-color,var(--spectrum-global-color-gray-75));border:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-fieldbutton-border-color,var(--spectrum-global-color-gray-300))}#button.is-disabled,#button:disabled{border-width:0;cursor:default}#button.is-open{border-width:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin))}:host([quiet]) #button{margin:0;padding:0;border-width:0;border-radius:var(--spectrum-fieldbutton-quiet-border-radius,0);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-fieldbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-fieldbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) #button.is-disabled.focus-visible,:host([quiet]) #button:disabled.focus-visible{box-shadow:none}#button:hover{color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-fieldbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-hover,var(--spectrum-global-color-gray-400))}#button.is-selected,#button:active{background-color:var(--spectrum-fieldbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-fieldbutton-border-color-down,var(--spectrum-global-color-gray-400))}#button.focus-visible,#button.is-focused{background-color:var(--spectrum-fieldbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-fieldbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible.is-placeholder,#button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) #button{border-color:var(--spectrum-fieldbutton-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #button:hover{border-color:var(--spectrum-fieldbutton-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #button.is-selected,:host([invalid]) #button:active{border-color:var(--spectrum-fieldbutton-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) #button.focus-visible,:host([invalid]) #button.is-focused{border-color:var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}#button.is-disabled,#button:disabled{background-color:var(--spectrum-fieldbutton-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#button.is-disabled .icon,#button:disabled .icon{color:var(--spectrum-fieldbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) #button:hover{background-color:var(--spectrum-fieldbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible,:host([quiet]) #button.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible.is-placeholder,:host([quiet]) #button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-quiet-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.is-selected,:host([quiet]) #button:active{background-color:var(--spectrum-fieldbutton-quiet-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-fieldbutton-quiet-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #button.is-selected.focus-visible,:host([quiet]) #button.is-selected.is-focused,:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button.is-focused{box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.is-disabled,:host([quiet]) #button:disabled{background-color:var(--spectrum-fieldbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}
+.icon{max-height:100%;flex-shrink:0}.button{height:var(--spectrum-dropdown-height,var(--spectrum-global-dimension-size-400));padding:0 var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));font-family:inherit;font-weight:400;font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));line-height:normal;-webkit-font-smoothing:initial;cursor:pointer;outline:none;margin:0;padding-top:0;padding-bottom:0;padding-left:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));padding-right:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));border-radius:var(--spectrum-global-dimension-size-50);transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-fieldbutton-background-color,var(--spectrum-global-color-gray-75));border:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-fieldbutton-border-color,var(--spectrum-alias-border-color))}.button.is-disabled,.button:disabled{border-width:0;cursor:default}.button.is-open{border-width:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin))}:host([quiet]) .button{margin:0;padding:0;border-width:0;border-radius:var(--spectrum-fieldbutton-quiet-border-radius,0);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-fieldbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-fieldbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) .button.is-disabled.focus-visible,:host([quiet]) .button:disabled.focus-visible{box-shadow:none}.button:hover{color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-fieldbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-hover,var(--spectrum-alias-border-color-hover))}.button.is-selected,.button:active{background-color:var(--spectrum-fieldbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-fieldbutton-border-color-down,var(--spectrum-alias-border-color-down))}.button.focus-visible,.button.is-focused{background-color:var(--spectrum-fieldbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-fieldbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}.button.focus-visible.is-placeholder,.button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) .button{border-color:var(--spectrum-fieldbutton-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) .button:hover{border-color:var(--spectrum-fieldbutton-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) .button.is-selected,:host([invalid]) .button:active{border-color:var(--spectrum-fieldbutton-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) .button.focus-visible,:host([invalid]) .button.is-focused{border-color:var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}.button.is-disabled,.button:disabled{background-color:var(--spectrum-fieldbutton-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.button.is-disabled .icon,.button:disabled .icon{color:var(--spectrum-fieldbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) .button:hover{background-color:var(--spectrum-fieldbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) .button.focus-visible,:host([quiet]) .button.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) .button.focus-visible.is-placeholder,:host([quiet]) .button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-quiet-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) .button.is-selected,:host([quiet]) .button:active{background-color:var(--spectrum-fieldbutton-quiet-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-fieldbutton-quiet-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) .button.is-selected.focus-visible,:host([quiet]) .button.is-selected.is-focused,:host([quiet]) .button:active.focus-visible,:host([quiet]) .button:active.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) .button.focus-visible,:host([quiet][invalid]) .button.is-focused{box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) .button.is-disabled,:host([quiet]) .button:disabled{background-color:var(--spectrum-fieldbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-fieldbutton.css.js.map

src/spectrum-fieldbutton.css.ts

@@ -12,6 +12,6 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-.icon{max-height:100%;flex-shrink:0}#button{height:var(--spectrum-dropdown-height,var(--spectrum-global-dimension-size-400));font-family:inherit;font-weight:400;font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));line-height:normal;-webkit-font-smoothing:initial;cursor:pointer;outline:none;margin:0;padding:0 var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));border-radius:var(--spectrum-global-dimension-size-50);transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-fieldbutton-background-color,var(--spectrum-global-color-gray-75));border:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-fieldbutton-border-color,var(--spectrum-global-color-gray-300))}#button.is-disabled,#button:disabled{border-width:0;cursor:default}#button.is-open{border-width:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin))}:host([quiet]) #button{margin:0;padding:0;border-width:0;border-radius:var(--spectrum-fieldbutton-quiet-border-radius,0);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-fieldbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-fieldbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) #button.is-disabled.focus-visible,:host([quiet]) #button:disabled.focus-visible{box-shadow:none}#button:hover{color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-fieldbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-hover,var(--spectrum-global-color-gray-400))}#button.is-selected,#button:active{background-color:var(--spectrum-fieldbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-fieldbutton-border-color-down,var(--spectrum-global-color-gray-400))}#button.focus-visible,#button.is-focused{background-color:var(--spectrum-fieldbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-fieldbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible.is-placeholder,#button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) #button{border-color:var(--spectrum-fieldbutton-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #button:hover{border-color:var(--spectrum-fieldbutton-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #button.is-selected,:host([invalid]) #button:active{border-color:var(--spectrum-fieldbutton-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) #button.focus-visible,:host([invalid]) #button.is-focused{border-color:var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}#button.is-disabled,#button:disabled{background-color:var(--spectrum-fieldbutton-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#button.is-disabled .icon,#button:disabled .icon{color:var(--spectrum-fieldbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) #button:hover{background-color:var(--spectrum-fieldbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible,:host([quiet]) #button.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.focus-visible.is-placeholder,:host([quiet]) #button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-quiet-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) #button.is-selected,:host([quiet]) #button:active{background-color:var(--spectrum-fieldbutton-quiet-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-fieldbutton-quiet-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #button.is-selected.focus-visible,:host([quiet]) #button.is-selected.is-focused,:host([quiet]) #button:active.focus-visible,:host([quiet]) #button:active.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) #button.focus-visible,:host([quiet][invalid]) #button.is-focused{box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) #button.is-disabled,:host([quiet]) #button:disabled{background-color:var(--spectrum-fieldbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}
+.icon{max-height:100%;flex-shrink:0}.button{height:var(--spectrum-dropdown-height,var(--spectrum-global-dimension-size-400));padding:0 var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));font-family:inherit;font-weight:400;font-size:var(--spectrum-dropdown-text-size,var(--spectrum-alias-font-size-default));line-height:normal;-webkit-font-smoothing:initial;cursor:pointer;outline:none;margin:0;padding-top:0;padding-bottom:0;padding-left:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));padding-right:var(--spectrum-dropdown-padding-x,var(--spectrum-global-dimension-size-150));border-radius:var(--spectrum-global-dimension-size-50);transition:background-color var(--spectrum-global-animation-duration-100,.13s),box-shadow var(--spectrum-global-animation-duration-100,.13s),border-color var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));background-color:var(--spectrum-fieldbutton-background-color,var(--spectrum-global-color-gray-75));border:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-fieldbutton-border-color,var(--spectrum-alias-border-color))}.button.is-disabled,.button:disabled{border-width:0;cursor:default}.button.is-open{border-width:var(--spectrum-dropdown-border-size,var(--spectrum-alias-border-size-thin))}:host([quiet]) .button{margin:0;padding:0;border-width:0;border-radius:var(--spectrum-fieldbutton-quiet-border-radius,0);color:var(--spectrum-fieldbutton-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-fieldbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));background-color:var(--spectrum-fieldbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent))}:host([quiet]) .button.is-disabled.focus-visible,:host([quiet]) .button:disabled.focus-visible{box-shadow:none}.button:hover{color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover));background-color:var(--spectrum-fieldbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-hover,var(--spectrum-alias-border-color-hover))}.button.is-selected,.button:active{background-color:var(--spectrum-fieldbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-fieldbutton-border-color-down,var(--spectrum-alias-border-color-down))}.button.focus-visible,.button.is-focused{background-color:var(--spectrum-fieldbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-fieldbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}.button.focus-visible.is-placeholder,.button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([invalid]) .button{border-color:var(--spectrum-fieldbutton-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) .button:hover{border-color:var(--spectrum-fieldbutton-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) .button.is-selected,:host([invalid]) .button:active{border-color:var(--spectrum-fieldbutton-border-color-error-down,var(--spectrum-global-color-red-600))}:host([invalid]) .button.focus-visible,:host([invalid]) .button.is-focused{border-color:var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}.button.is-disabled,.button:disabled{background-color:var(--spectrum-fieldbutton-background-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.button.is-disabled .icon,.button:disabled .icon{color:var(--spectrum-fieldbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) .button:hover{background-color:var(--spectrum-fieldbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) .button.focus-visible,:host([quiet]) .button.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) .button.focus-visible.is-placeholder,:host([quiet]) .button.is-focused.is-placeholder{color:var(--spectrum-fieldbutton-quiet-placeholder-text-color-key-focus,var(--spectrum-alias-placeholder-text-color-hover))}:host([quiet]) .button.is-selected,:host([quiet]) .button:active{background-color:var(--spectrum-fieldbutton-quiet-background-color-down,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-fieldbutton-quiet-border-color-down,var(--spectrum-alias-border-color-transparent))}:host([quiet]) .button.is-selected.focus-visible,:host([quiet]) .button.is-selected.is-focused,:host([quiet]) .button:active.focus-visible,:host([quiet]) .button:active.is-focused{background-color:var(--spectrum-fieldbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet][invalid]) .button.focus-visible,:host([quiet][invalid]) .button.is-focused{box-shadow:0 2px 0 0 var(--spectrum-fieldbutton-border-color-error-key-focus,var(--spectrum-alias-border-color-focus))}:host([quiet]) .button.is-disabled,:host([quiet]) .button:disabled{background-color:var(--spectrum-fieldbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-fieldbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}
 `;
 export default styles;

src/spectrum-vars.json

@@ -43,9 +43,2 @@ {
     "--spectrum-clearbutton-small-height": "var(--spectrum-global-dimension-size-300)",
-    "--spectrum-tool-min-width": "var(--spectrum-global-dimension-size-400)",
-    "--spectrum-tool-height": "var(--spectrum-alias-single-line-height)",
-    "--spectrum-tool-hold-icon-padding-right": "var(--spectrum-global-dimension-size-40)",
-    "--spectrum-tool-hold-icon-padding-bottom": "var(--spectrum-global-dimension-size-40)",
-    "--spectrum-buttongroup-button-gap-x": "var(--spectrum-global-dimension-static-size-200)",
-    "--spectrum-actionbuttongroup-text-button-gap-x": "var(--spectrum-global-dimension-size-100)",
-    "--spectrum-toolgroup-text-button-gap-x": "var(--spectrum-global-dimension-size-100)",
     "--spectrum-button-primary-focus-ring-size-key-focus": "var(--spectrum-alias-focus-ring-size)",
@@ -194,7 +187,7 @@ "--spectrum-button-primary-focus-ring-color-key-focus": "var(--spectrum-alias-focus-ring-color)",
     "--spectrum-actionbutton-background-color-down": "var(--spectrum-global-color-gray-200)",
-    "--spectrum-actionbutton-border-color-down": "var(--spectrum-global-color-gray-400)",
+    "--spectrum-actionbutton-border-color-down": "var(--spectrum-alias-border-color-down)",
     "--spectrum-actionbutton-text-color-down": "var(--spectrum-alias-text-color-down)",
     "--spectrum-actionbutton-hold-icon-color-down": "var(--spectrum-alias-icon-color-down)",
     "--spectrum-actionbutton-background-color-disabled": "var(--spectrum-global-color-gray-200)",
-    "--spectrum-actionbutton-border-color-disabled": "var(--spectrum-global-color-gray-200)",
+    "--spectrum-actionbutton-border-color-disabled": "var(--spectrum-alias-border-color-disabled)",
     "--spectrum-actionbutton-text-color-disabled": "var(--spectrum-alias-text-color-disabled)",
@@ -204,3 +197,3 @@ "--spectrum-actionbutton-icon-color-disabled": "var(--spectrum-alias-icon-color-disabled)",
     "--spectrum-actionbutton-background-color-selected": "var(--spectrum-global-color-gray-200)",
-    "--spectrum-actionbutton-border-color-selected": "var(--spectrum-global-color-gray-300)",
+    "--spectrum-actionbutton-border-color-selected": "var(--spectrum-alias-border-color)",
     "--spectrum-actionbutton-text-color-selected": "var(--spectrum-alias-text-color)",
@@ -213,13 +206,58 @@ "--spectrum-actionbutton-icon-color-selected": "var(--spectrum-alias-icon-color)",
     "--spectrum-actionbutton-background-color-selected-hover": "var(--spectrum-global-color-gray-200)",
-    "--spectrum-actionbutton-border-color-selected-hover": "var(--spectrum-global-color-gray-400)",
+    "--spectrum-actionbutton-border-color-selected-hover": "var(--spectrum-alias-border-color-hover)",
     "--spectrum-actionbutton-text-color-selected-hover": "var(--spectrum-alias-text-color-hover)",
     "--spectrum-actionbutton-icon-color-selected-hover": "var(--spectrum-alias-icon-color-hover)",
     "--spectrum-actionbutton-background-color-selected-down": "var(--spectrum-global-color-gray-200)",
-    "--spectrum-actionbutton-border-color-selected-down": "var(--spectrum-global-color-gray-400)",
+    "--spectrum-actionbutton-border-color-selected-down": "var(--spectrum-alias-border-color-down)",
     "--spectrum-actionbutton-text-color-selected-down": "var(--spectrum-alias-text-color-down)",
     "--spectrum-actionbutton-icon-color-selected-down": "var(--spectrum-alias-icon-color-down)",
     "--spectrum-actionbutton-background-color-selected-disabled": "var(--spectrum-global-color-gray-200)",
-    "--spectrum-actionbutton-border-color-selected-disabled": "var(--spectrum-global-color-gray-200)",
+    "--spectrum-actionbutton-border-color-selected-disabled": "var(--spectrum-alias-border-color-disabled)",
     "--spectrum-actionbutton-text-color-selected-disabled": "var(--spectrum-alias-text-color-disabled)",
     "--spectrum-actionbutton-icon-color-selected-disabled": "var(--spectrum-alias-icon-color-disabled)",
+    "--spectrum-actionbutton-emphasized-background-color": "var(--spectrum-global-color-gray-75)",
+    "--spectrum-actionbutton-emphasized-border-color": "var(--spectrum-alias-border-color)",
+    "--spectrum-actionbutton-emphasized-text-color": "var(--spectrum-alias-text-color)",
+    "--spectrum-actionbutton-emphasized-icon-color": "var(--spectrum-alias-icon-color)",
+    "--spectrum-actionbutton-emphasized-hold-icon-color": "var(--spectrum-alias-icon-color)",
+    "--spectrum-actionbutton-emphasized-hold-icon-color-selected": "var(--spectrum-global-color-static-white)",
+    "--spectrum-actionbutton-emphasized-text-color-selected-hover": "var(--spectrum-global-color-static-white)",
+    "--spectrum-actionbutton-emphasized-background-color-hover": "var(--spectrum-global-color-gray-50)",
+    "--spectrum-actionbutton-emphasized-border-color-hover": "var(--spectrum-alias-border-color-hover)",
+    "--spectrum-actionbutton-emphasized-text-color-hover": "var(--spectrum-alias-text-color-hover)",
+    "--spectrum-actionbutton-emphasized-icon-color-hover": "var(--spectrum-alias-icon-color-hover)",
+    "--spectrum-actionbutton-emphasized-hold-icon-color-hover": "var(--spectrum-alias-icon-color-hover)",
+    "--spectrum-actionbutton-emphasized-background-color-key-focus": "var(--spectrum-global-color-gray-50)",
+    "--spectrum-actionbutton-emphasized-border-color-key-focus": "var(--spectrum-alias-border-color-focus)",
+    "--spectrum-actionbutton-emphasized-text-color-key-focus": "var(--spectrum-alias-text-color-hover)",
+    "--spectrum-actionbutton-emphasized-icon-color-key-focus": "var(--spectrum-alias-icon-color-focus)",
+    "--spectrum-actionbutton-emphasized-hold-icon-color-key-focus": "var(--spectrum-alias-icon-color-hover)",
+    "--spectrum-actionbutton-emphasized-background-color-down": "var(--spectrum-global-color-gray-200)",
+    "--spectrum-actionbutton-emphasized-border-color-down": "var(--spectrum-alias-border-color-down)",
+    "--spectrum-actionbutton-emphasized-text-color-down": "var(--spectrum-alias-text-color-down)",
+    "--spectrum-actionbutton-emphasized-hold-icon-color-down": "var(--spectrum-alias-icon-color-down)",
+    "--spectrum-actionbutton-emphasized-background-color-disabled": "var(--spectrum-global-color-gray-200)",
+    "--spectrum-actionbutton-emphasized-border-color-disabled": "var(--spectrum-alias-border-color-disabled)",
+    "--spectrum-actionbutton-emphasized-text-color-disabled": "var(--spectrum-alias-text-color-disabled)",
+    "--spectrum-actionbutton-emphasized-icon-color-disabled": "var(--spectrum-alias-icon-color-disabled)",
+    "--spectrum-actionbutton-emphasized-hold-icon-color-disabled": "var(--spectrum-alias-icon-color-disabled)",
+    "--spectrum-actionbutton-emphasized-background-color-selected": "var(--spectrum-semantic-cta-color-background-default)",
+    "--spectrum-actionbutton-emphasized-border-color-selected": "var(--spectrum-semantic-cta-color-background-default)",
+    "--spectrum-actionbutton-emphasized-text-color-selected": "var(--spectrum-global-color-static-white)",
+    "--spectrum-actionbutton-emphasized-icon-color-selected": "var(--spectrum-global-color-static-white)",
+    "--spectrum-actionbutton-emphasized-background-color-selected-key-focus": "var(--spectrum-semantic-cta-color-background-key-focus)",
+    "--spectrum-actionbutton-emphasized-border-color-selected-key-focus": "var(--spectrum-semantic-cta-color-background-key-focus)",
+    "--spectrum-actionbutton-emphasized-text-color-selected-key-focus": "var(--spectrum-global-color-static-white)",
+    "--spectrum-actionbutton-emphasized-icon-color-selected-key-focus": "var(--spectrum-global-color-static-white)",
+    "--spectrum-actionbutton-emphasized-background-color-selected-hover": "var(--spectrum-semantic-cta-color-background-hover)",
+    "--spectrum-actionbutton-emphasized-border-color-selected-hover": "var(--spectrum-semantic-cta-color-background-hover)",
+    "--spectrum-actionbutton-emphasized-icon-color-selected-hover": "var(--spectrum-global-color-static-white)",
+    "--spectrum-actionbutton-emphasized-background-color-selected-down": "var(--spectrum-semantic-cta-color-background-down)",
+    "--spectrum-actionbutton-emphasized-border-color-selected-down": "var(--spectrum-semantic-cta-color-background-down)",
+    "--spectrum-actionbutton-emphasized-text-color-selected-down": "var(--spectrum-global-color-static-white)",
+    "--spectrum-actionbutton-emphasized-icon-color-selected-down": "var(--spectrum-global-color-static-white)",
+    "--spectrum-actionbutton-emphasized-background-color-selected-disabled": "var(--spectrum-global-color-gray-200)",
+    "--spectrum-actionbutton-emphasized-border-color-selected-disabled": "var(--spectrum-alias-border-color-disabled)",
+    "--spectrum-actionbutton-emphasized-text-color-selected-disabled": "var(--spectrum-alias-text-color-disabled)",
+    "--spectrum-actionbutton-emphasized-icon-color-selected-disabled": "var(--spectrum-alias-icon-color-disabled)",
     "--spectrum-actionbutton-quiet-background-color": "var(--spectrum-alias-background-color-transparent)",
@@ -241,3 +279,3 @@ "--spectrum-actionbutton-quiet-border-color": "var(--spectrum-alias-border-color-transparent)",
     "--spectrum-actionbutton-quiet-background-color-selected": "var(--spectrum-global-color-gray-300)",
-    "--spectrum-actionbutton-quiet-border-color-selected": "var(--spectrum-global-color-gray-300)",
+    "--spectrum-actionbutton-quiet-border-color-selected": "var(--spectrum-alias-border-color)",
     "--spectrum-actionbutton-quiet-text-color-selected": "var(--spectrum-alias-text-color)",
@@ -248,9 +286,9 @@ "--spectrum-actionbutton-quiet-background-color-selected-key-focus": "var(--spectrum-global-color-gray-300)",
     "--spectrum-actionbutton-quiet-background-color-selected-hover": "var(--spectrum-global-color-gray-300)",
-    "--spectrum-actionbutton-quiet-border-color-selected-hover": "var(--spectrum-global-color-gray-300)",
+    "--spectrum-actionbutton-quiet-border-color-selected-hover": "var(--spectrum-alias-border-color-hover)",
     "--spectrum-actionbutton-quiet-text-color-selected-hover": "var(--spectrum-alias-text-color-hover)",
     "--spectrum-actionbutton-quiet-background-color-selected-down": "var(--spectrum-global-color-gray-300)",
-    "--spectrum-actionbutton-quiet-border-color-selected-down": "var(--spectrum-global-color-gray-300)",
+    "--spectrum-actionbutton-quiet-border-color-selected-down": "var(--spectrum-alias-border-color-down)",
     "--spectrum-actionbutton-quiet-text-color-selected-down": "var(--spectrum-alias-text-color-down)",
     "--spectrum-actionbutton-quiet-background-color-selected-disabled": "var(--spectrum-global-color-gray-200)",
-    "--spectrum-actionbutton-quiet-border-color-selected-disabled": "var(--spectrum-global-color-gray-200)",
+    "--spectrum-actionbutton-quiet-border-color-selected-disabled": "var(--spectrum-alias-border-color-disabled)",
     "--spectrum-actionbutton-quiet-text-color-selected-disabled": "var(--spectrum-alias-text-color-disabled)",
@@ -287,8 +325,8 @@ "--spectrum-button-quiet-warning-background-color": "var(--spectrum-alias-background-color-transparent)",
     "--spectrum-fieldbutton-background-color": "var(--spectrum-global-color-gray-75)",
-    "--spectrum-fieldbutton-border-color": "var(--spectrum-global-color-gray-300)",
+    "--spectrum-fieldbutton-border-color": "var(--spectrum-alias-border-color)",
     "--spectrum-fieldbutton-text-color-hover": "var(--spectrum-alias-text-color-hover)",
     "--spectrum-fieldbutton-background-color-hover": "var(--spectrum-global-color-gray-50)",
-    "--spectrum-fieldbutton-border-color-hover": "var(--spectrum-global-color-gray-400)",
+    "--spectrum-fieldbutton-border-color-hover": "var(--spectrum-alias-border-color-hover)",
     "--spectrum-fieldbutton-background-color-down": "var(--spectrum-global-color-gray-200)",
-    "--spectrum-fieldbutton-border-color-down": "var(--spectrum-global-color-gray-400)",
+    "--spectrum-fieldbutton-border-color-down": "var(--spectrum-alias-border-color-down)",
     "--spectrum-fieldbutton-background-color-key-focus": "var(--spectrum-global-color-gray-50)",
@@ -312,22 +350,4 @@ "--spectrum-fieldbutton-border-color-key-focus": "var(--spectrum-alias-border-color-focus)",
     "--spectrum-fieldbutton-quiet-border-color-down": "var(--spectrum-alias-border-color-transparent)",
-    "--spectrum-fieldbutton-quiet-background-color-disabled": "var(--spectrum-alias-background-color-transparent)",
-    "--spectrum-tool-icon-color-selected": "var(--spectrum-alias-icon-color-selected)",
-    "--spectrum-tool-hold-icon-color-selected": "var(--spectrum-alias-icon-color-selected)",
-    "--spectrum-tool-icon-color-selected-hover": "var(--spectrum-alias-icon-color-selected-hover)",
-    "--spectrum-tool-hold-icon-color-selected-hover": "var(--spectrum-alias-icon-color-selected-hover)",
-    "--spectrum-tool-icon-color-selected-down": "var(--spectrum-alias-icon-color-selected-down)",
-    "--spectrum-tool-hold-icon-color-selected-down": "var(--spectrum-alias-icon-color-selected-down)",
-    "--spectrum-tool-icon-color-selected-key-focus": "var(--spectrum-alias-icon-color-selected-focus)",
-    "--spectrum-tool-hold-icon-color-selected-key-focus": "var(--spectrum-alias-icon-color-selected-focus)",
-    "--spectrum-tool-background-color-selected-disabled": "var(--spectrum-alias-background-color-transparent)",
-    "--spectrum-tool-border-color-selected-disabled": "var(--spectrum-alias-border-color-transparent)",
-    "--spectrum-tool-icon-color-selected-disabled": "var(--spectrum-alias-icon-color-disabled)",
-    "--spectrum-tool-hold-icon-color-disabled": "var(--spectrum-alias-icon-color-disabled)",
-    "--spectrum-tool-hold-icon-color": "var(--spectrum-alias-icon-color)",
-    "--spectrum-tool-hold-icon-color-hover": "var(--spectrum-alias-icon-color-hover)",
-    "--spectrum-tool-background-color-down": "var(--spectrum-alias-background-color-transparent)",
-    "--spectrum-tool-border-color-down": "var(--spectrum-alias-border-color-transparent)",
-    "--spectrum-tool-hold-icon-color-down": "var(--spectrum-alias-icon-color-down)",
-    "--spectrum-tool-hold-icon-color-key-focus": "var(--spectrum-alias-icon-color-hover)"
+    "--spectrum-fieldbutton-quiet-background-color-disabled": "var(--spectrum-alias-background-color-transparent)"
   }
 }

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

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

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

542691

increased by18.34%

Dependency count

5

decreased by-16.67%

Lines of code

5234

increased by15.49%

Dependency changes

• + Added@spectrum-web-components/base@^0.0.2-alpha.1038+1e82c26e

• + Added@spectrum-web-components/base@0.0.2-alpha.1038(transitive)

• + Added@spectrum-web-components/shared@0.6.1-alpha.71(transitive)

• - Removedlit-element@^2.1.0

• - Removedlit-html@^1.0.0

• - Removed@spectrum-web-components/shared@0.6.0(transitive)

• Updated@spectrum-web-components/icon@^0.5.2-alpha.77+1e82c26e

• Updated@spectrum-web-components/icons-ui@^0.2.2-alpha.77+1e82c26e

• Updated@spectrum-web-components/shared@^0.6.1-alpha.71+1e82c26e