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

Comparing version 0.4.0 to 0.4.1

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log
 
+## [0.4.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/button@0.4.0...@spectrum-web-components/button@0.4.1) (2019-12-12)
+
+**Note:** Version bump only for package @spectrum-web-components/button
+
 # [0.4.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/button@0.3.2...@spectrum-web-components/button@0.4.0) (2019-12-09)
@@ -8,0 +12,0 @@

lib/action-button.css.js

@@ -22,5 +22,5 @@ /*
 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))}#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));box-shadow:none;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 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));box-shadow:none;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 ::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));box-shadow:none}: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));box-shadow:none}: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{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}:host([disabled]){pointer-events: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)}:host(.spectrum-Dropdown-trigger) #button{text-align:left}::slotted([slot=icon]){flex-shrink:0}
+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))}#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));box-shadow:none;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 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));box-shadow:none;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 ::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));box-shadow:none}: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));box-shadow:none}: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{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)}:host(.spectrum-Dropdown-trigger) #button{text-align:left}::slotted([slot=icon]){flex-shrink:0}
 `;
 export default styles;
 //# sourceMappingURL=action-button.css.js.map

lib/action-button.js

@@ -24,3 +24,3 @@ /*
     static get styles() {
-        return [buttonStyles];
+        return [...super.styles, buttonStyles];
     }
@@ -27,0 +27,0 @@ }

lib/button-base.css.js

@@ -14,5 +14,5 @@ /*
 const styles = css `
-:host{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}:host([disabled]){pointer-events: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)}
+: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

lib/button-base.d.ts

@@ -1,2 +0,2 @@
-import { TemplateResult } from 'lit-element';
+import { TemplateResult, CSSResultArray } from 'lit-element';
 import { Focusable } from '@spectrum-web-components/shared/lib/focusable.js';
@@ -8,2 +8,3 @@ declare const ButtonBase_base: typeof Focusable & {
 export declare class ButtonBase extends ButtonBase_base {
+    static readonly styles: CSSResultArray;
     /**
@@ -10,0 +11,0 @@ * Supplies an address that the browser will navigate to when this button is

lib/button-base.js

@@ -22,2 +22,5 @@ /*
     }
+    static get styles() {
+        return [...super.styles];
+    }
     get hasIcon() {
@@ -24,0 +27,0 @@ return !!this.querySelector('[slot="icon"]');

lib/button.css.js

@@ -17,5 +17,5 @@ /*
 var(--spectrum-alias-border-size-thick)));padding-bottom:calc(var(--spectrum-global-dimension-size-50) + .5px);padding-top:calc(var(--spectrum-global-dimension-size-50) - .5px);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:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}:host([disabled]) #button{cursor:default}::slotted([slot=icon]){max-height:100%;flex-shrink:0}#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{box-shadow:0 0 0 1px var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus))}#button:active{box-shadow:none}: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-key-focus));border-color:var(--spectrum-button-cta-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-primary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-secondary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-secondary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-cta-color-background-key-focus));border-color:var(--spectrum-button-warning-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-warning-text-color-key-focus,var(--spectrum-global-color-static-white))}: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: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{background-color:var(--spectrum-button-over-background-background-color-key-focus,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white));color:inherit;box-shadow:0 0 0 1px 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;box-shadow:none}: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: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{background-color:var(--spectrum-button-quiet-over-background-background-color-key-focus,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-quiet-over-background-border-color-key-focus,var(--spectrum-global-color-static-white));color:inherit;box-shadow:0 0 0 1px var(--spectrum-button-quiet-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));box-shadow:none}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-quiet-primary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-quiet-secondary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-quiet-warning-text-color-key-focus,var(--spectrum-global-color-static-white))}: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))}:host{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}:host([disabled]){pointer-events: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)}
+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{box-shadow:0 0 0 1px var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus))}#button:active{box-shadow:none}: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-key-focus));border-color:var(--spectrum-button-cta-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-primary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-secondary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-secondary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-cta-color-background-key-focus));border-color:var(--spectrum-button-warning-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-warning-text-color-key-focus,var(--spectrum-global-color-static-white))}: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: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{background-color:var(--spectrum-button-over-background-background-color-key-focus,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white));color:inherit;box-shadow:0 0 0 1px 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;box-shadow:none}: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: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{background-color:var(--spectrum-button-quiet-over-background-background-color-key-focus,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-quiet-over-background-border-color-key-focus,var(--spectrum-global-color-static-white));color:inherit;box-shadow:0 0 0 1px var(--spectrum-button-quiet-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));box-shadow:none}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-quiet-primary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-quiet-secondary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-quiet-warning-text-color-key-focus,var(--spectrum-global-color-static-white))}: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))}: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.css.js.map

lib/button.js

@@ -37,3 +37,3 @@ /*
     static get styles() {
-        return [buttonStyles];
+        return [...super.styles, buttonStyles];
     }
@@ -40,0 +40,0 @@ }

lib/clear-button.css.js

@@ -14,5 +14,5 @@ /*
 const styles = css `
-#button{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;overflow:visible;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:adobe-clean-ux,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.3;cursor:pointer;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;margin: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:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}.spectrum-Icon{max-height:100%;flex-shrink:0}.spectrum-ClearButton--small{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: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{background-color:var(--spectrum-button-quiet-over-background-background-color-key-focus,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-quiet-over-background-border-color-key-focus,var(--spectrum-global-color-static-white));color:inherit;box-shadow:0 0 0 1px var(--spectrum-button-quiet-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}: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));box-shadow:none}: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))}:host{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}:host([disabled]){pointer-events: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{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;overflow:visible;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:adobe-clean-ux,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.3;cursor:pointer;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;margin: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:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}.spectrum-Icon{max-height:100%;flex-shrink:0}.spectrum-ClearButton--small{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: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{background-color:var(--spectrum-button-quiet-over-background-background-color-key-focus,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-quiet-over-background-border-color-key-focus,var(--spectrum-global-color-static-white));color:inherit;box-shadow:0 0 0 1px var(--spectrum-button-quiet-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}: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));box-shadow:none}: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))}: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=clear-button.css.js.map

lib/clear-button.js

@@ -26,3 +26,3 @@ /*
     static get styles() {
-        return [buttonStyles, crossMediumStyles];
+        return [...super.styles, buttonStyles, crossMediumStyles];
     }
@@ -29,0 +29,0 @@ get buttonContent() {

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.4.0",
+    "version": "0.4.1",
     "description": "",
@@ -46,6 +46,6 @@ "main": "lib/index.js",
         "@spectrum-web-components/icon": "^0.4.2",
-        "@spectrum-web-components/shared": "^0.3.2",
+        "@spectrum-web-components/shared": "^0.3.3",
         "tslib": "^1.10.0"
     },
-    "gitHead": "cab0d87c1b118036e1127a7ebba8b23f76794bab"
+    "gitHead": "c675f8d2840e8ebba47ecc47167265e61514a864"
 }

src/action-button.css.ts

@@ -22,4 +22,4 @@ /*
 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))}#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));box-shadow:none;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 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));box-shadow:none;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 ::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));box-shadow:none}: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));box-shadow:none}: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{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}:host([disabled]){pointer-events: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)}:host(.spectrum-Dropdown-trigger) #button{text-align:left}::slotted([slot=icon]){flex-shrink:0}
+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))}#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));box-shadow:none;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 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));box-shadow:none;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 ::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));box-shadow:none}: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));box-shadow:none}: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{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)}:host(.spectrum-Dropdown-trigger) #button{text-align:left}::slotted([slot=icon]){flex-shrink:0}
 `;
 export default styles;

src/action-button.ts

@@ -28,4 +28,4 @@ /*
     public static get styles(): CSSResultArray {
-        return [buttonStyles];
+        return [...super.styles, buttonStyles];
     }
 }

src/button-base.css.ts

@@ -14,4 +14,4 @@ /*
 const styles = css`
-:host{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}:host([disabled]){pointer-events: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)}
+: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-base.ts

@@ -13,3 +13,3 @@ /*
 
-import { property, html, TemplateResult } from 'lit-element';
+import { property, html, TemplateResult, CSSResultArray } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
@@ -20,2 +20,6 @@ import { Focusable } from '@spectrum-web-components/shared/lib/focusable.js';
 export class ButtonBase extends ObserveSlotText(Focusable) {
+    public static get styles(): CSSResultArray {
+        return [...super.styles];
+    }
+
     /**
@@ -22,0 +26,0 @@ * Supplies an address that the browser will navigate to when this button is

src/button.css.ts

@@ -17,4 +17,4 @@ /*
 var(--spectrum-alias-border-size-thick)));padding-bottom:calc(var(--spectrum-global-dimension-size-50) + .5px);padding-top:calc(var(--spectrum-global-dimension-size-50) - .5px);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:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}:host([disabled]) #button{cursor:default}::slotted([slot=icon]){max-height:100%;flex-shrink:0}#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{box-shadow:0 0 0 1px var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus))}#button:active{box-shadow:none}: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-key-focus));border-color:var(--spectrum-button-cta-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-primary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-secondary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-secondary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-cta-color-background-key-focus));border-color:var(--spectrum-button-warning-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-warning-text-color-key-focus,var(--spectrum-global-color-static-white))}: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: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{background-color:var(--spectrum-button-over-background-background-color-key-focus,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white));color:inherit;box-shadow:0 0 0 1px 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;box-shadow:none}: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: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{background-color:var(--spectrum-button-quiet-over-background-background-color-key-focus,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-quiet-over-background-border-color-key-focus,var(--spectrum-global-color-static-white));color:inherit;box-shadow:0 0 0 1px var(--spectrum-button-quiet-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));box-shadow:none}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-quiet-primary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-quiet-secondary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-quiet-warning-text-color-key-focus,var(--spectrum-global-color-static-white))}: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))}:host{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}:host([disabled]){pointer-events: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)}
+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{box-shadow:0 0 0 1px var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus))}#button:active{box-shadow:none}: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-key-focus));border-color:var(--spectrum-button-cta-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-primary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-primary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-secondary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-secondary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-cta-color-background-key-focus));border-color:var(--spectrum-button-warning-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-warning-text-color-key-focus,var(--spectrum-global-color-static-white))}: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: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{background-color:var(--spectrum-button-over-background-background-color-key-focus,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-over-background-border-color-key-focus,var(--spectrum-global-color-static-white));color:inherit;box-shadow:0 0 0 1px 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;box-shadow:none}: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: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{background-color:var(--spectrum-button-quiet-over-background-background-color-key-focus,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-quiet-over-background-border-color-key-focus,var(--spectrum-global-color-static-white));color:inherit;box-shadow:0 0 0 1px var(--spectrum-button-quiet-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));box-shadow:none}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-quiet-primary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-quiet-secondary-text-color-key-focus,var(--spectrum-global-color-static-white))}: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-semantic-cta-color-background-key-focus));border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,var(--spectrum-semantic-cta-color-background-key-focus));color:var(--spectrum-button-quiet-warning-text-color-key-focus,var(--spectrum-global-color-static-white))}: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))}: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.ts

@@ -46,4 +46,4 @@ /*
     public static get styles(): CSSResultArray {
-        return [buttonStyles];
+        return [...super.styles, buttonStyles];
     }
 }

src/clear-button.css.ts

@@ -14,4 +14,4 @@ /*
 const styles = css`
-#button{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;overflow:visible;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:adobe-clean-ux,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.3;cursor:pointer;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;margin: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:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}.spectrum-Icon{max-height:100%;flex-shrink:0}.spectrum-ClearButton--small{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: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{background-color:var(--spectrum-button-quiet-over-background-background-color-key-focus,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-quiet-over-background-border-color-key-focus,var(--spectrum-global-color-static-white));color:inherit;box-shadow:0 0 0 1px var(--spectrum-button-quiet-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}: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));box-shadow:none}: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))}:host{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}:host([disabled]){pointer-events: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{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;overflow:visible;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:adobe-clean-ux,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.3;cursor:pointer;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;margin: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:focus{outline:none}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:disabled{cursor:default}.spectrum-Icon{max-height:100%;flex-shrink:0}.spectrum-ClearButton--small{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: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{background-color:var(--spectrum-button-quiet-over-background-background-color-key-focus,var(--spectrum-global-color-static-white));border-color:var(--spectrum-button-quiet-over-background-border-color-key-focus,var(--spectrum-global-color-static-white));color:inherit;box-shadow:0 0 0 1px var(--spectrum-button-quiet-over-background-border-color-key-focus,var(--spectrum-global-color-static-white))}: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));box-shadow:none}: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))}: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/clear-button.ts

@@ -20,3 +20,3 @@ /*
     public static get styles(): CSSResultArray {
-        return [buttonStyles, crossMediumStyles];
+        return [...super.styles, buttonStyles, crossMediumStyles];
     }
@@ -23,0 +23,0 @@

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a 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

Improved metrics

Total package byte prevSize

434372

increased by0.09%

Lines of code

4196

increased by0.05%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

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