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

Comparing version 0.6.0 to 0.7.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [0.7.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/button@0.6.0...@spectrum-web-components/button@0.7.0) (2020-06-08)
+
+### Features
+
+-   **button-group:** add ButtonGroup pattern ([c4d85b5](https://github.com/adobe/spectrum-web-components/commit/c4d85b5524f6623dbd3cb22c0d6fa8fc00e98733))
+
 # [0.6.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/button@0.5.2...@spectrum-web-components/button@0.6.0) (2020-05-12)
@@ -8,0 +14,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))}::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color,var(--spectrum-alias-icon-color))}#button:hover{background-color:var(--spectrum-actionbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}#button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}#button.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}#button:active{background-color:var(--spectrum-actionbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-down,var(--spectrum-alias-text-color-down))}#button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([selected]) #button{background-color:var(--spectrum-actionbutton-background-color-selected,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-alias-icon-color))}:host([selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-selected-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([selected]) #button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:hover{background-color:var(--spectrum-actionbutton-background-color-selected-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-hover,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([selected]) #button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:active{background-color:var(--spectrum-actionbutton-background-color-selected-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([selected]) #button:active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-alias-icon-color-down))}:host([selected][disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([selected][disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 0 0 1px var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-down,var(--spectrum-alias-text-color-down))}:host([quiet][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected,var(--spectrum-alias-text-color))}:host([quiet][selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-key-focus,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-hover,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-hover,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([quiet][selected][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-quiet-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host(.spectrum-Dropdown-trigger) #button{text-align:left}::slotted([slot=icon]){flex-shrink:0}
+var(--spectrum-global-dimension-size-85)))}#hold-affordance{position:absolute;right:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40));bottom:var(--spectrum-actionbutton-hold-icon-padding-bottom,var(--spectrum-global-dimension-size-40));color:var(--spectrum-actionbutton-hold-icon-color,var(--spectrum-alias-icon-color))}#label{align-self:center;justify-self:center;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#label:empty{display:none}:host([quiet]) #button{border-width:var(--spectrum-actionbutton-quiet-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-alias-text-color))}::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color,var(--spectrum-alias-icon-color))}#button:hover{background-color:var(--spectrum-actionbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}#button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}#button.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}#button:active{background-color:var(--spectrum-actionbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-down,var(--spectrum-alias-text-color-down))}#button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([selected]) #button{background-color:var(--spectrum-actionbutton-background-color-selected,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-alias-icon-color))}:host([selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-selected-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([selected]) #button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:hover{background-color:var(--spectrum-actionbutton-background-color-selected-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-hover,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([selected]) #button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:active{background-color:var(--spectrum-actionbutton-background-color-selected-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([selected]) #button:active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-alias-icon-color-down))}:host([selected][disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([selected][disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 0 0 1px var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-down,var(--spectrum-alias-text-color-down))}:host([quiet][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected,var(--spectrum-alias-text-color))}:host([quiet][selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-key-focus,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-hover,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-hover,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([quiet][selected][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-quiet-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host(.spectrum-Dropdown-trigger) #button{text-align:left}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);text-align:var(--spectrum-actionbutton-label-text-align)}
 `;
 export default styles;
 //# sourceMappingURL=action-button.css.js.map

lib/action-button.js

@@ -16,39 +16,43 @@ /*
 import buttonStyles from './action-button.css.js';
-export class ActionButton extends ButtonBase {
-    constructor() {
-        super();
-        this.holdAffordance = false;
-        this.selected = false;
-        this.toggles = false;
-        this.quiet = false;
-        this.onClick = () => {
-            if (!this.toggles) {
-                return;
+let ActionButton = /** @class */ (() => {
+    class ActionButton extends ButtonBase {
+        constructor() {
+            super();
+            this.holdAffordance = false;
+            this.selected = false;
+            this.toggles = false;
+            this.quiet = false;
+            this.onClick = () => {
+                if (!this.toggles) {
+                    return;
+                }
+                this.selected = !this.selected;
+            };
+            this.addEventListener('click', this.onClick);
+        }
+        static get styles() {
+            return [...super.styles, buttonStyles];
+        }
+        updated(changes) {
+            super.updated(changes);
+            if (this.toggles && changes.has('selected')) {
+                this.focusElement.setAttribute('aria-pressed', this.selected ? 'true' : 'false');
             }
-            this.selected = !this.selected;
-        };
-        this.addEventListener('click', this.onClick);
-    }
-    static get styles() {
-        return [...super.styles, buttonStyles];
-    }
-    updated(changes) {
-        super.updated(changes);
-        if (this.toggles && changes.has('selected')) {
-            this.focusElement.setAttribute('aria-pressed', this.selected ? 'true' : 'false');
         }
     }
-}
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })
-], ActionButton.prototype, "holdAffordance", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ActionButton.prototype, "selected", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ActionButton.prototype, "toggles", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ActionButton.prototype, "quiet", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })
+    ], ActionButton.prototype, "holdAffordance", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], ActionButton.prototype, "selected", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], ActionButton.prototype, "toggles", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], ActionButton.prototype, "quiet", void 0);
+    return ActionButton;
+})();
+export { ActionButton };
 //# sourceMappingURL=action-button.js.map

lib/button-base.js

@@ -19,29 +19,30 @@ /*
 import buttonStyles from './button-base.css.js';
-export class ButtonBase extends LikeAnchor(ObserveSlotText(Focusable)) {
-    constructor() {
-        super(...arguments);
-        this.iconRight = false;
-    }
-    static get styles() {
-        return [...super.styles, buttonStyles];
-    }
-    get hasIcon() {
-        return !!this.querySelector('[slot="icon"]');
-    }
-    get hasLabel() {
-        return this.slotHasContent;
-    }
-    get focusElement() {
-        /* istanbul ignore if */
-        if (!this.shadowRoot) {
-            return this;
+let ButtonBase = /** @class */ (() => {
+    class ButtonBase extends LikeAnchor(ObserveSlotText(Focusable)) {
+        constructor() {
+            super(...arguments);
+            this.iconRight = false;
         }
-        return this.shadowRoot.querySelector('#button');
-    }
-    get buttonContent() {
-        const icon = html `
+        static get styles() {
+            return [...super.styles, buttonStyles];
+        }
+        get hasIcon() {
+            return !!this.querySelector('[slot="icon"]');
+        }
+        get hasLabel() {
+            return this.slotHasContent;
+        }
+        get focusElement() {
+            /* istanbul ignore if */
+            if (!this.shadowRoot) {
+                return this;
+            }
+            return this.shadowRoot.querySelector('#button');
+        }
+        get buttonContent() {
+            const icon = html `
             <slot name="icon"></slot>
         `;
-        const content = [
-            html `
+            const content = [
+                html `
                 <div id="label" ?hidden=${!this.hasLabel}>
@@ -54,16 +55,16 @@ <slot
             `,
-        ];
-        if (!this.hasIcon) {
+            ];
+            if (!this.hasIcon) {
+                return content;
+            }
+            this.iconRight ? content.push(icon) : content.unshift(icon);
             return content;
         }
-        this.iconRight ? content.push(icon) : content.unshift(icon);
-        return content;
-    }
-    render() {
-        return this.href && this.href.length > 0
-            ? this.renderAnchor({
-                id: 'button',
-                anchorContent: this.buttonContent,
-            })
-            : html `
+        render() {
+            return this.href && this.href.length > 0
+                ? this.renderAnchor({
+                    id: 'button',
+                    anchorContent: this.buttonContent,
+                })
+                : html `
                   <button id="button" aria-label=${ifDefined(this.label)}>
@@ -73,7 +74,10 @@ ${this.buttonContent}
               `;
+        }
     }
-}
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'icon-right' })
-], ButtonBase.prototype, "iconRight", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true, attribute: 'icon-right' })
+    ], ButtonBase.prototype, "iconRight", void 0);
+    return ButtonBase;
+})();
+export { ButtonBase };
 //# sourceMappingURL=button-base.js.map

lib/button.js

@@ -20,31 +20,35 @@ /*
  */
-export class Button extends ButtonBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * The visual variant to apply to this button.
-         */
-        this.variant = 'cta';
-        /**
-         * There is a warning in place for this control
-         */
-        this.warning = false;
-        /**
-         * Style this button to be less obvious
-         */
-        this.quiet = false;
+let Button = /** @class */ (() => {
+    class Button extends ButtonBase {
+        constructor() {
+            super(...arguments);
+            /**
+             * The visual variant to apply to this button.
+             */
+            this.variant = 'cta';
+            /**
+             * There is a warning in place for this control
+             */
+            this.warning = false;
+            /**
+             * Style this button to be less obvious
+             */
+            this.quiet = false;
+        }
+        static get styles() {
+            return [...super.styles, buttonStyles];
+        }
     }
-    static get styles() {
-        return [...super.styles, buttonStyles];
-    }
-}
-__decorate([
-    property({ reflect: true })
-], Button.prototype, "variant", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Button.prototype, "warning", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Button.prototype, "quiet", void 0);
+    __decorate([
+        property({ reflect: true })
+    ], Button.prototype, "variant", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], Button.prototype, "warning", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], Button.prototype, "quiet", void 0);
+    return Button;
+})();
+export { Button };
 //# sourceMappingURL=button.js.map

lib/clear-button.js

@@ -18,16 +18,17 @@ /*
 import crossMediumStyles from '@spectrum-web-components/icon/lib/spectrum-icon-cross-medium.css.js';
-export class ClearButton extends ButtonBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * The visual variant to apply to this button.
-         */
-        this.variant = '';
-    }
-    static get styles() {
-        return [...super.styles, buttonStyles, crossMediumStyles];
-    }
-    get buttonContent() {
-        return [
-            html `
+let ClearButton = /** @class */ (() => {
+    class ClearButton extends ButtonBase {
+        constructor() {
+            super(...arguments);
+            /**
+             * The visual variant to apply to this button.
+             */
+            this.variant = '';
+        }
+        static get styles() {
+            return [...super.styles, buttonStyles, crossMediumStyles];
+        }
+        get buttonContent() {
+            return [
+                html `
                 <sp-icon slot="icon" class="icon cross-medium" size="s">
@@ -37,8 +38,11 @@ ${CrossLargeIcon({ hidden: true })}
             `,
-        ];
+            ];
+        }
     }
-}
-__decorate([
-    property({ reflect: true })
-], ClearButton.prototype, "variant", void 0);
+    __decorate([
+        property({ reflect: true })
+    ], ClearButton.prototype, "variant", void 0);
+    return ClearButton;
+})();
+export { ClearButton };
 //# sourceMappingURL=clear-button.js.map

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.6.0",
+    "version": "0.7.0",
     "description": "",
@@ -49,8 +49,8 @@ "main": "lib/index.js",
     "dependencies": {
-        "@spectrum-web-components/icon": "^0.4.7",
-        "@spectrum-web-components/icons-ui": "^0.1.1",
-        "@spectrum-web-components/shared": "^0.4.6",
-        "tslib": "^1.10.0"
+        "@spectrum-web-components/icon": "^0.4.8",
+        "@spectrum-web-components/icons-ui": "^0.1.2",
+        "@spectrum-web-components/shared": "^0.4.7",
+        "tslib": "^2.0.0"
     },
-    "gitHead": "6cbe373247261cc44ccfdd63f9d26244f06ea217"
+    "gitHead": "16b57d15356859cee73278cdf796274e3245320b"
 }

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))}::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color,var(--spectrum-alias-icon-color))}#button:hover{background-color:var(--spectrum-actionbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}#button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}#button.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}#button:active{background-color:var(--spectrum-actionbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-down,var(--spectrum-alias-text-color-down))}#button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([selected]) #button{background-color:var(--spectrum-actionbutton-background-color-selected,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-alias-icon-color))}:host([selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-selected-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([selected]) #button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:hover{background-color:var(--spectrum-actionbutton-background-color-selected-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-hover,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([selected]) #button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:active{background-color:var(--spectrum-actionbutton-background-color-selected-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([selected]) #button:active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-alias-icon-color-down))}:host([selected][disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([selected][disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 0 0 1px var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-down,var(--spectrum-alias-text-color-down))}:host([quiet][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected,var(--spectrum-alias-text-color))}:host([quiet][selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-key-focus,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-hover,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-hover,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([quiet][selected][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-quiet-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host(.spectrum-Dropdown-trigger) #button{text-align:left}::slotted([slot=icon]){flex-shrink:0}
+var(--spectrum-global-dimension-size-85)))}#hold-affordance{position:absolute;right:var(--spectrum-actionbutton-hold-icon-padding-right,var(--spectrum-global-dimension-size-40));bottom:var(--spectrum-actionbutton-hold-icon-padding-bottom,var(--spectrum-global-dimension-size-40));color:var(--spectrum-actionbutton-hold-icon-color,var(--spectrum-alias-icon-color))}#label{align-self:center;justify-self:center;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#label:empty{display:none}:host([quiet]) #button{border-width:var(--spectrum-actionbutton-quiet-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-alias-border-radius-regular));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,var(--spectrum-alias-body-text-font-weight));background-color:var(--spectrum-actionbutton-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-alias-text-color))}::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color,var(--spectrum-alias-icon-color))}#button:hover{background-color:var(--spectrum-actionbutton-background-color-hover,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-hover,var(--spectrum-alias-border-color-hover));color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-alias-text-color-hover))}#button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-alias-icon-color-hover))}#button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-key-focus,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-actionbutton-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}#button.focus-visible #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-alias-icon-color-hover))}#button:active{background-color:var(--spectrum-actionbutton-background-color-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-down,var(--spectrum-alias-text-color-down))}#button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-alias-icon-color-down))}:host([disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]) #button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([selected]) #button{background-color:var(--spectrum-actionbutton-background-color-selected,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-alias-icon-color))}:host([selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-background-color-selected-key-focus,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([selected]) #button.focus-visible ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:hover{background-color:var(--spectrum-actionbutton-background-color-selected-hover,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-hover,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([selected]) #button:hover ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]) #button:active{background-color:var(--spectrum-actionbutton-background-color-selected-down,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-down,var(--spectrum-global-color-gray-400));color:var(--spectrum-actionbutton-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([selected]) #button:active ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-alias-icon-color-down))}:host([selected][disabled]) #button{background-color:var(--spectrum-actionbutton-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host([selected][disabled]) #button ::slotted([slot=icon]){color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-alias-icon-color-disabled))}:host([quiet]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-hover,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,var(--spectrum-alias-background-color-transparent));box-shadow:0 0 0 1px var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-down,var(--spectrum-alias-text-color-down))}:host([quiet][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([quiet][selected]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected,var(--spectrum-alias-text-color))}:host([quiet][selected]) #button.focus-visible{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-key-focus,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-hover,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-hover,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-hover,var(--spectrum-alias-text-color-hover))}:host([quiet][selected]) #button:active{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-down,var(--spectrum-global-color-gray-300));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-down,var(--spectrum-global-color-gray-300));color:var(--spectrum-actionbutton-quiet-text-color-selected-down,var(--spectrum-alias-text-color-down))}:host([quiet][selected][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-selected-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-actionbutton-quiet-border-color-selected-disabled,var(--spectrum-global-color-gray-200));color:var(--spectrum-actionbutton-quiet-text-color-selected-disabled,var(--spectrum-alias-text-color-disabled))}:host(.spectrum-Dropdown-trigger) #button{text-align:left}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);text-align:var(--spectrum-actionbutton-label-text-align)}
 `;
 export default styles;

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

659441

increased by28.5%

Number of package files

86

increased by1.18%

Lines of code

4606

increased by0.39%

Dependency changes

• - Removedtslib@1.14.1(transitive)

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

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

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

• Updatedtslib@^2.0.0