Socket
Socket
Sign inDemoInstall

@spectrum-web-components/button

Package Overview
Dependencies
Maintainers
2
Versions
237
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.1.2 to 0.1.3

CHANGELOG.md

2

lib/action-button.css.js

@@ -21,5 +21,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-global-color-gray-700))}#label{align-self:center;justify-self: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,1px);border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-global-dimension-font-size-100));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,400);background-color:var(--spectrum-actionbutton-quiet-background-color,transparent);border-color:var(--spectrum-actionbutton-quiet-border-color,transparent);color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-global-color-gray-800))}#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-global-color-gray-400));box-shadow:none;color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-global-color-gray-900))}#button:hover .icon{color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-global-color-gray-900))}#button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-global-color-gray-900))}#button:focus .icon{color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-global-color-gray-900))}#button:focus #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-global-color-gray-900))}#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-global-color-gray-900))}#button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #button .icon{color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled]) #button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-global-color-gray-400))}: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-global-color-gray-800))}:host([selected]) #button .icon{color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-global-color-gray-700))}:host([selected]) #button:focus{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-global-color-blue-400));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-global-color-gray-900))}:host([selected]) #button:focus .icon{color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900))}:host([selected]) #button:hover .icon{color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900))}:host([selected]) #button:active .icon{color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-global-color-gray-900))}: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-global-color-gray-500))}:host([selected][disabled]) #button .icon{color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-global-color-gray-400))}:host([quiet]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,transparent);border-color:var(--spectrum-actionbutton-quiet-border-color-hover,transparent);color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-global-color-gray-900));box-shadow:none}:host([quiet]) #button:focus{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,transparent);box-shadow:0 0 0 var(--spectrum-actionbutton-quiet-border-size-key-focus,2px) var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-global-color-blue-400));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-global-color-blue-400));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900));box-shadow:none}:host([quiet][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,transparent);border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,transparent);color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-global-color-gray-500))}: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-global-color-gray-800))}:host([quiet][selected]) #button:focus{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-global-color-blue-400));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900))}: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-global-color-gray-900))}: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-global-color-gray-500))}:host{display:inline-flex;flex-direction:row}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}#button:focus,:host(:focus){outline: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}
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-global-color-gray-700))}#label{align-self:center;justify-self: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,1px);border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-global-dimension-font-size-100));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,400);background-color:var(--spectrum-actionbutton-quiet-background-color,transparent);border-color:var(--spectrum-actionbutton-quiet-border-color,transparent);color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-global-color-gray-800))}#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-global-color-gray-400));box-shadow:none;color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-global-color-gray-900))}#button:hover .icon{color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-global-color-gray-900))}#button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-global-color-gray-900))}#button:focus .icon{color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-global-color-gray-900))}#button:focus #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-global-color-gray-900))}#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-global-color-gray-900))}#button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #button .icon{color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled]) #button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-global-color-gray-400))}: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-global-color-gray-800))}:host([selected]) #button .icon{color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-global-color-gray-700))}:host([selected]) #button:focus{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-global-color-blue-400));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-global-color-gray-900))}:host([selected]) #button:focus .icon{color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900))}:host([selected]) #button:hover .icon{color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900))}:host([selected]) #button:active .icon{color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-global-color-gray-900))}: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-global-color-gray-500))}:host([selected][disabled]) #button .icon{color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-global-color-gray-400))}:host([quiet]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,transparent);border-color:var(--spectrum-actionbutton-quiet-border-color-hover,transparent);color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-global-color-gray-900));box-shadow:none}:host([quiet]) #button:focus{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,transparent);box-shadow:0 0 0 var(--spectrum-actionbutton-quiet-border-size-key-focus,2px) var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-global-color-blue-400));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-global-color-blue-400));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900));box-shadow:none}:host([quiet][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,transparent);border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,transparent);color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-global-color-gray-500))}: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-global-color-gray-800))}:host([quiet][selected]) #button:focus{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-global-color-blue-400));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900))}: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-global-color-gray-900))}: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-global-color-gray-500))}:host{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}#button:focus,:host(:focus){outline: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}
`;
export default styles;
//# sourceMappingURL=action-button.css.js.map

2

lib/button-base.css.js

@@ -14,5 +14,5 @@ /*

const styles = css `
:host{display:inline-flex;flex-direction:row}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}#button:focus,:host(:focus){outline: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}#button:focus,:host(:focus){outline: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)}
`;
export default styles;
//# sourceMappingURL=button-base.css.js.map

2

lib/button-base.d.ts

@@ -9,3 +9,3 @@ import { TemplateResult } from 'lit-element';

href?: string;
target?: string;
target?: '_blank' | '_parent' | '_self' | '_top';
protected iconRight: boolean;

@@ -12,0 +12,0 @@ private readonly hasIcon;

2

lib/button.css.js

@@ -16,5 +16,5 @@ /*

var(--spectrum-global-dimension-size-200)) - var(--spectrum-button-primary-border-size, 2px));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-global-dimension-font-size-150));font-weight:var(--spectrum-button-primary-text-font-weight,700)}#button:focus{outline:none;box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-button-primary-border-color-key-focus,#1473e6)}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:-moz-focusring{outline:1px dotted ButtonText}: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;width:100%}#label:empty{display:none}#button:active{box-shadow:none}:host([variant=cta]) #button{background-color:var(--spectrum-button-cta-background-color,#1473e6);border-color:var(--spectrum-button-cta-border-color,#1473e6);color:var(--spectrum-button-cta-text-color,#fff)}:host([variant=cta]) #button:hover{background-color:var(--spectrum-button-cta-background-color-hover,#0d66d0);border-color:var(--spectrum-button-cta-border-color-hover,#0d66d0);color:var(--spectrum-button-cta-text-color-hover,#fff)}:host([variant=cta]) #button:focus{background-color:var(--spectrum-button-cta-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-cta-border-color-key-focus,#1473e6);color:var(--spectrum-button-cta-text-color-key-focus,#fff)}:host([variant=cta]) #button:active{background-color:var(--spectrum-button-cta-background-color-down,#0d66d0);border-color:var(--spectrum-button-cta-border-color-down,#0d66d0);color:var(--spectrum-button-cta-text-color-down,#fff)}: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,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{background-color:var(--spectrum-button-primary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-primary-border-color-key-focus,#1473e6);color:var(--spectrum-button-primary-text-color-key-focus,#fff)}: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,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{background-color:var(--spectrum-button-secondary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-secondary-border-color-key-focus,#1473e6);color:var(--spectrum-button-secondary-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-warning-border-color,var(--spectrum-global-color-red-600));color:var(--spectrum-button-warning-text-color,var(--spectrum-global-color-red-600))}:host([variant=negative]) #button:hover{background-color:var(--spectrum-button-warning-background-color-hover,var(--spectrum-global-color-red-600));border-color:var(--spectrum-button-warning-border-color-hover,var(--spectrum-global-color-red-600));color:var(--spectrum-button-warning-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=negative]) #button:focus{background-color:var(--spectrum-button-warning-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-warning-border-color-key-focus,#1473e6);color:var(--spectrum-button-warning-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-over-background-border-color,#fff);color:var(--spectrum-button-over-background-text-color,#fff)}:host([variant=overBackground]) #button:hover{background-color:var(--spectrum-button-over-background-background-color-hover,#fff);border-color:var(--spectrum-button-over-background-border-color-hover,#fff);color:inherit}:host([variant=overBackground]) #button:focus{background-color:var(--spectrum-button-over-background-background-color-key-focus,#fff);border-color:var(--spectrum-button-over-background-border-color-key-focus,#fff);color:inherit;box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-button-over-background-border-color-key-focus,#fff)}:host([variant=overBackground]) #button:active{background-color:var(--spectrum-button-over-background-background-color-down,#fff);border-color:var(--spectrum-button-over-background-border-color-down,#fff);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,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,transparent);border-color:var(--spectrum-button-quiet-over-background-border-color,transparent);color:var(--spectrum-button-quiet-over-background-text-color,#fff)}: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,transparent);color:var(--spectrum-button-quiet-over-background-text-color-hover,#fff)}:host([variant=overBackground][quiet]) #button:focus{background-color:var(--spectrum-button-quiet-over-background-background-color-key-focus,#fff);border-color:var(--spectrum-button-quiet-over-background-border-color-key-focus,#fff);color:inherit;box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-button-quiet-over-background-border-color-key-focus,#fff)}: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,transparent);color:var(--spectrum-button-quiet-over-background-text-color-down,#fff);box-shadow:none}:host([variant=overBackground][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,transparent);border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,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,transparent);border-color:var(--spectrum-button-quiet-primary-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{background-color:var(--spectrum-button-quiet-primary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,#1473e6);color:var(--spectrum-button-quiet-primary-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-quiet-primary-border-color-disabled,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,transparent);border-color:var(--spectrum-button-quiet-secondary-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{background-color:var(--spectrum-button-quiet-secondary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,#1473e6);color:var(--spectrum-button-quiet-secondary-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-quiet-secondary-border-color-disabled,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,transparent);border-color:var(--spectrum-button-quiet-warning-border-color,transparent);color:var(--spectrum-button-quiet-warning-text-color,var(--spectrum-global-color-red-500))}: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-600))}:host([variant=negative][quiet]) #button:focus{background-color:var(--spectrum-button-quiet-warning-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,#1473e6);color:var(--spectrum-button-quiet-warning-text-color-key-focus,#fff)}: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-600))}:host([variant=negative][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-warning-background-color-disabled,transparent);border-color:var(--spectrum-button-quiet-warning-border-color-disabled,transparent);color:var(--spectrum-button-quiet-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}:host{display:inline-flex;flex-direction:row}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}#button:focus,:host(:focus){outline: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;width:100%}#label:empty{display:none}#button:active{box-shadow:none}:host([variant=cta]) #button{background-color:var(--spectrum-button-cta-background-color,#1473e6);border-color:var(--spectrum-button-cta-border-color,#1473e6);color:var(--spectrum-button-cta-text-color,#fff)}:host([variant=cta]) #button:hover{background-color:var(--spectrum-button-cta-background-color-hover,#0d66d0);border-color:var(--spectrum-button-cta-border-color-hover,#0d66d0);color:var(--spectrum-button-cta-text-color-hover,#fff)}:host([variant=cta]) #button:focus{background-color:var(--spectrum-button-cta-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-cta-border-color-key-focus,#1473e6);color:var(--spectrum-button-cta-text-color-key-focus,#fff)}:host([variant=cta]) #button:active{background-color:var(--spectrum-button-cta-background-color-down,#0d66d0);border-color:var(--spectrum-button-cta-border-color-down,#0d66d0);color:var(--spectrum-button-cta-text-color-down,#fff)}: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,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{background-color:var(--spectrum-button-primary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-primary-border-color-key-focus,#1473e6);color:var(--spectrum-button-primary-text-color-key-focus,#fff)}: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,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{background-color:var(--spectrum-button-secondary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-secondary-border-color-key-focus,#1473e6);color:var(--spectrum-button-secondary-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-warning-border-color,var(--spectrum-global-color-red-600));color:var(--spectrum-button-warning-text-color,var(--spectrum-global-color-red-600))}:host([variant=negative]) #button:hover{background-color:var(--spectrum-button-warning-background-color-hover,var(--spectrum-global-color-red-600));border-color:var(--spectrum-button-warning-border-color-hover,var(--spectrum-global-color-red-600));color:var(--spectrum-button-warning-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=negative]) #button:focus{background-color:var(--spectrum-button-warning-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-warning-border-color-key-focus,#1473e6);color:var(--spectrum-button-warning-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-over-background-border-color,#fff);color:var(--spectrum-button-over-background-text-color,#fff)}:host([variant=overBackground]) #button:hover{background-color:var(--spectrum-button-over-background-background-color-hover,#fff);border-color:var(--spectrum-button-over-background-border-color-hover,#fff);color:inherit}:host([variant=overBackground]) #button:focus{background-color:var(--spectrum-button-over-background-background-color-key-focus,#fff);border-color:var(--spectrum-button-over-background-border-color-key-focus,#fff);color:inherit;box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-button-over-background-border-color-key-focus,#fff)}:host([variant=overBackground]) #button:active{background-color:var(--spectrum-button-over-background-background-color-down,#fff);border-color:var(--spectrum-button-over-background-border-color-down,#fff);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,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,transparent);border-color:var(--spectrum-button-quiet-over-background-border-color,transparent);color:var(--spectrum-button-quiet-over-background-text-color,#fff)}: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,transparent);color:var(--spectrum-button-quiet-over-background-text-color-hover,#fff)}:host([variant=overBackground][quiet]) #button:focus{background-color:var(--spectrum-button-quiet-over-background-background-color-key-focus,#fff);border-color:var(--spectrum-button-quiet-over-background-border-color-key-focus,#fff);color:inherit;box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-button-quiet-over-background-border-color-key-focus,#fff)}: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,transparent);color:var(--spectrum-button-quiet-over-background-text-color-down,#fff);box-shadow:none}:host([variant=overBackground][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,transparent);border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,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,transparent);border-color:var(--spectrum-button-quiet-primary-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{background-color:var(--spectrum-button-quiet-primary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,#1473e6);color:var(--spectrum-button-quiet-primary-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-quiet-primary-border-color-disabled,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,transparent);border-color:var(--spectrum-button-quiet-secondary-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{background-color:var(--spectrum-button-quiet-secondary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,#1473e6);color:var(--spectrum-button-quiet-secondary-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-quiet-secondary-border-color-disabled,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,transparent);border-color:var(--spectrum-button-quiet-warning-border-color,transparent);color:var(--spectrum-button-quiet-warning-text-color,var(--spectrum-global-color-red-500))}: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-600))}:host([variant=negative][quiet]) #button:focus{background-color:var(--spectrum-button-quiet-warning-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,#1473e6);color:var(--spectrum-button-quiet-warning-text-color-key-focus,#fff)}: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-600))}:host([variant=negative][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-warning-background-color-disabled,transparent);border-color:var(--spectrum-button-quiet-warning-border-color-disabled,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}#button:focus,:host(:focus){outline: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)}
`;
export default styles;
//# sourceMappingURL=button.css.js.map

6

package.json

@@ -21,3 +21,3 @@ {

],
"version": "0.1.2",
"version": "0.1.3",
"description": "",

@@ -40,5 +40,5 @@ "main": "lib/index.js",

"dependencies": {
"@spectrum-web-components/shared": "^0.1.2"
"@spectrum-web-components/shared": "^0.1.3"
},
"gitHead": "3d7176f688fee7746b52556ecba4df15c2342948"
"gitHead": "5112887821c1408c1c4121949a4f91743c98ff6a"
}

5

README.md

@@ -39,3 +39,3 @@ ## Overview

**sp-buttons** can have a label, and icon, or both. An icon is provided by
**sp-buttons** can have a label, or a label with an icon. An icon is provided by
placing an icon component to the `icon` slot. The icon may be an `sp-icon` or an

@@ -52,5 +52,2 @@ SVG.

<sp-button variant="primary">
<sp-icon slot="icon" size="s" name="ui:HelpMedium"></sp-icon>
</sp-button>
<sp-button variant="primary">
<svg

@@ -57,0 +54,0 @@ slot="icon"

2

src/action-button.css.ts

@@ -21,4 +21,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-global-color-gray-700))}#label{align-self:center;justify-self: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,1px);border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-global-dimension-font-size-100));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,400);background-color:var(--spectrum-actionbutton-quiet-background-color,transparent);border-color:var(--spectrum-actionbutton-quiet-border-color,transparent);color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-global-color-gray-800))}#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-global-color-gray-400));box-shadow:none;color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-global-color-gray-900))}#button:hover .icon{color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-global-color-gray-900))}#button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-global-color-gray-900))}#button:focus .icon{color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-global-color-gray-900))}#button:focus #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-global-color-gray-900))}#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-global-color-gray-900))}#button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #button .icon{color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled]) #button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-global-color-gray-400))}: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-global-color-gray-800))}:host([selected]) #button .icon{color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-global-color-gray-700))}:host([selected]) #button:focus{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-global-color-blue-400));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-global-color-gray-900))}:host([selected]) #button:focus .icon{color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900))}:host([selected]) #button:hover .icon{color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900))}:host([selected]) #button:active .icon{color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-global-color-gray-900))}: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-global-color-gray-500))}:host([selected][disabled]) #button .icon{color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-global-color-gray-400))}:host([quiet]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,transparent);border-color:var(--spectrum-actionbutton-quiet-border-color-hover,transparent);color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-global-color-gray-900));box-shadow:none}:host([quiet]) #button:focus{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,transparent);box-shadow:0 0 0 var(--spectrum-actionbutton-quiet-border-size-key-focus,2px) var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-global-color-blue-400));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-global-color-blue-400));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900));box-shadow:none}:host([quiet][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,transparent);border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,transparent);color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-global-color-gray-500))}: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-global-color-gray-800))}:host([quiet][selected]) #button:focus{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-global-color-blue-400));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900))}: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-global-color-gray-900))}: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-global-color-gray-500))}:host{display:inline-flex;flex-direction:row}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}#button:focus,:host(:focus){outline: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}
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-global-color-gray-700))}#label{align-self:center;justify-self: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,1px);border-radius:var(--spectrum-actionbutton-quiet-border-radius,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-actionbutton-quiet-text-size,var(--spectrum-global-dimension-font-size-100));font-weight:var(--spectrum-actionbutton-quiet-text-font-weight,400);background-color:var(--spectrum-actionbutton-quiet-background-color,transparent);border-color:var(--spectrum-actionbutton-quiet-border-color,transparent);color:var(--spectrum-actionbutton-quiet-text-color,var(--spectrum-global-color-gray-800))}#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-global-color-gray-400));box-shadow:none;color:var(--spectrum-actionbutton-text-color-hover,var(--spectrum-global-color-gray-900))}#button:hover .icon{color:var(--spectrum-actionbutton-icon-color-hover,var(--spectrum-global-color-gray-900))}#button:hover #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-hover,var(--spectrum-global-color-gray-900))}#button:focus .icon{color:var(--spectrum-actionbutton-icon-color-key-focus,var(--spectrum-global-color-gray-900))}#button:focus #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-key-focus,var(--spectrum-global-color-gray-900))}#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-global-color-gray-900))}#button:active #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #button .icon{color:var(--spectrum-actionbutton-icon-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled]) #button #hold-affordance{color:var(--spectrum-actionbutton-hold-icon-color-disabled,var(--spectrum-global-color-gray-400))}: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-global-color-gray-800))}:host([selected]) #button .icon{color:var(--spectrum-actionbutton-icon-color-selected,var(--spectrum-global-color-gray-700))}:host([selected]) #button:focus{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-global-color-blue-400));color:var(--spectrum-actionbutton-text-color-selected-key-focus,var(--spectrum-global-color-gray-900))}:host([selected]) #button:focus .icon{color:var(--spectrum-actionbutton-icon-color-selected-key-focus,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900))}:host([selected]) #button:hover .icon{color:var(--spectrum-actionbutton-icon-color-selected-hover,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900))}:host([selected]) #button:active .icon{color:var(--spectrum-actionbutton-icon-color-selected-down,var(--spectrum-global-color-gray-900))}: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-global-color-gray-500))}:host([selected][disabled]) #button .icon{color:var(--spectrum-actionbutton-icon-color-selected-disabled,var(--spectrum-global-color-gray-400))}:host([quiet]) #button:hover{background-color:var(--spectrum-actionbutton-quiet-background-color-hover,transparent);border-color:var(--spectrum-actionbutton-quiet-border-color-hover,transparent);color:var(--spectrum-actionbutton-quiet-text-color-hover,var(--spectrum-global-color-gray-900));box-shadow:none}:host([quiet]) #button:focus{background-color:var(--spectrum-actionbutton-quiet-background-color-key-focus,transparent);box-shadow:0 0 0 var(--spectrum-actionbutton-quiet-border-size-key-focus,2px) var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-global-color-blue-400));border-color:var(--spectrum-actionbutton-quiet-border-color-key-focus,var(--spectrum-global-color-blue-400));color:var(--spectrum-actionbutton-quiet-text-color-key-focus,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900));box-shadow:none}:host([quiet][disabled]) #button{background-color:var(--spectrum-actionbutton-quiet-background-color-disabled,transparent);border-color:var(--spectrum-actionbutton-quiet-border-color-disabled,transparent);color:var(--spectrum-actionbutton-quiet-text-color-disabled,var(--spectrum-global-color-gray-500))}: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-global-color-gray-800))}:host([quiet][selected]) #button:focus{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-global-color-blue-400));color:var(--spectrum-actionbutton-quiet-text-color-selected-key-focus,var(--spectrum-global-color-gray-900))}: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-global-color-gray-900))}: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-global-color-gray-900))}: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-global-color-gray-500))}:host{display:inline-flex;flex-direction:row;vertical-align:top}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}#button:focus,:host(:focus){outline: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}
`;
export default styles;

6

src/action-button.ts

@@ -19,9 +19,9 @@ /*

@property({ type: Boolean, reflect: true })
public quiet: boolean = false;
public quiet = false;
@property({ type: Boolean, reflect: true })
public selected: boolean = false;
public selected = false;
@property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })
public holdAffordance: boolean = false;
public holdAffordance = false;

@@ -28,0 +28,0 @@ public static get styles(): CSSResultArray {

2

src/button-base.css.ts

@@ -14,4 +14,4 @@ /*

const styles = css`
:host{display:inline-flex;flex-direction:row}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}#button:focus,:host(:focus){outline: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}#button:focus,:host(:focus){outline: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)}
`;
export default styles;

2

src/button-base.ts

@@ -26,3 +26,3 @@ /*

@property()
public target?: string;
public target?: '_blank' | '_parent' | '_self' | '_top';

@@ -29,0 +29,0 @@ @property({ type: Boolean, reflect: true, attribute: 'icon-right' })

2

src/button.css.ts

@@ -16,4 +16,4 @@ /*

var(--spectrum-global-dimension-size-200)) - var(--spectrum-button-primary-border-size, 2px));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-global-dimension-font-size-150));font-weight:var(--spectrum-button-primary-text-font-weight,700)}#button:focus{outline:none;box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-button-primary-border-color-key-focus,#1473e6)}#button::-moz-focus-inner{border:0;border-style:none;padding:0;margin-top:-2px;margin-bottom:-2px}#button:-moz-focusring{outline:1px dotted ButtonText}: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;width:100%}#label:empty{display:none}#button:active{box-shadow:none}:host([variant=cta]) #button{background-color:var(--spectrum-button-cta-background-color,#1473e6);border-color:var(--spectrum-button-cta-border-color,#1473e6);color:var(--spectrum-button-cta-text-color,#fff)}:host([variant=cta]) #button:hover{background-color:var(--spectrum-button-cta-background-color-hover,#0d66d0);border-color:var(--spectrum-button-cta-border-color-hover,#0d66d0);color:var(--spectrum-button-cta-text-color-hover,#fff)}:host([variant=cta]) #button:focus{background-color:var(--spectrum-button-cta-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-cta-border-color-key-focus,#1473e6);color:var(--spectrum-button-cta-text-color-key-focus,#fff)}:host([variant=cta]) #button:active{background-color:var(--spectrum-button-cta-background-color-down,#0d66d0);border-color:var(--spectrum-button-cta-border-color-down,#0d66d0);color:var(--spectrum-button-cta-text-color-down,#fff)}: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,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{background-color:var(--spectrum-button-primary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-primary-border-color-key-focus,#1473e6);color:var(--spectrum-button-primary-text-color-key-focus,#fff)}: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,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{background-color:var(--spectrum-button-secondary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-secondary-border-color-key-focus,#1473e6);color:var(--spectrum-button-secondary-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-warning-border-color,var(--spectrum-global-color-red-600));color:var(--spectrum-button-warning-text-color,var(--spectrum-global-color-red-600))}:host([variant=negative]) #button:hover{background-color:var(--spectrum-button-warning-background-color-hover,var(--spectrum-global-color-red-600));border-color:var(--spectrum-button-warning-border-color-hover,var(--spectrum-global-color-red-600));color:var(--spectrum-button-warning-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=negative]) #button:focus{background-color:var(--spectrum-button-warning-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-warning-border-color-key-focus,#1473e6);color:var(--spectrum-button-warning-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-over-background-border-color,#fff);color:var(--spectrum-button-over-background-text-color,#fff)}:host([variant=overBackground]) #button:hover{background-color:var(--spectrum-button-over-background-background-color-hover,#fff);border-color:var(--spectrum-button-over-background-border-color-hover,#fff);color:inherit}:host([variant=overBackground]) #button:focus{background-color:var(--spectrum-button-over-background-background-color-key-focus,#fff);border-color:var(--spectrum-button-over-background-border-color-key-focus,#fff);color:inherit;box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-button-over-background-border-color-key-focus,#fff)}:host([variant=overBackground]) #button:active{background-color:var(--spectrum-button-over-background-background-color-down,#fff);border-color:var(--spectrum-button-over-background-border-color-down,#fff);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,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,transparent);border-color:var(--spectrum-button-quiet-over-background-border-color,transparent);color:var(--spectrum-button-quiet-over-background-text-color,#fff)}: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,transparent);color:var(--spectrum-button-quiet-over-background-text-color-hover,#fff)}:host([variant=overBackground][quiet]) #button:focus{background-color:var(--spectrum-button-quiet-over-background-background-color-key-focus,#fff);border-color:var(--spectrum-button-quiet-over-background-border-color-key-focus,#fff);color:inherit;box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-button-quiet-over-background-border-color-key-focus,#fff)}: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,transparent);color:var(--spectrum-button-quiet-over-background-text-color-down,#fff);box-shadow:none}:host([variant=overBackground][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,transparent);border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,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,transparent);border-color:var(--spectrum-button-quiet-primary-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{background-color:var(--spectrum-button-quiet-primary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,#1473e6);color:var(--spectrum-button-quiet-primary-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-quiet-primary-border-color-disabled,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,transparent);border-color:var(--spectrum-button-quiet-secondary-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{background-color:var(--spectrum-button-quiet-secondary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,#1473e6);color:var(--spectrum-button-quiet-secondary-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-quiet-secondary-border-color-disabled,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,transparent);border-color:var(--spectrum-button-quiet-warning-border-color,transparent);color:var(--spectrum-button-quiet-warning-text-color,var(--spectrum-global-color-red-500))}: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-600))}:host([variant=negative][quiet]) #button:focus{background-color:var(--spectrum-button-quiet-warning-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,#1473e6);color:var(--spectrum-button-quiet-warning-text-color-key-focus,#fff)}: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-600))}:host([variant=negative][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-warning-background-color-disabled,transparent);border-color:var(--spectrum-button-quiet-warning-border-color-disabled,transparent);color:var(--spectrum-button-quiet-warning-text-color-disabled,var(--spectrum-global-color-gray-500))}:host{display:inline-flex;flex-direction:row}#button{display:flex;flex:1 1 auto;-webkit-appearance:none}#button:focus,:host(:focus){outline: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;width:100%}#label:empty{display:none}#button:active{box-shadow:none}:host([variant=cta]) #button{background-color:var(--spectrum-button-cta-background-color,#1473e6);border-color:var(--spectrum-button-cta-border-color,#1473e6);color:var(--spectrum-button-cta-text-color,#fff)}:host([variant=cta]) #button:hover{background-color:var(--spectrum-button-cta-background-color-hover,#0d66d0);border-color:var(--spectrum-button-cta-border-color-hover,#0d66d0);color:var(--spectrum-button-cta-text-color-hover,#fff)}:host([variant=cta]) #button:focus{background-color:var(--spectrum-button-cta-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-cta-border-color-key-focus,#1473e6);color:var(--spectrum-button-cta-text-color-key-focus,#fff)}:host([variant=cta]) #button:active{background-color:var(--spectrum-button-cta-background-color-down,#0d66d0);border-color:var(--spectrum-button-cta-border-color-down,#0d66d0);color:var(--spectrum-button-cta-text-color-down,#fff)}: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,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{background-color:var(--spectrum-button-primary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-primary-border-color-key-focus,#1473e6);color:var(--spectrum-button-primary-text-color-key-focus,#fff)}: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,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{background-color:var(--spectrum-button-secondary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-secondary-border-color-key-focus,#1473e6);color:var(--spectrum-button-secondary-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-warning-border-color,var(--spectrum-global-color-red-600));color:var(--spectrum-button-warning-text-color,var(--spectrum-global-color-red-600))}:host([variant=negative]) #button:hover{background-color:var(--spectrum-button-warning-background-color-hover,var(--spectrum-global-color-red-600));border-color:var(--spectrum-button-warning-border-color-hover,var(--spectrum-global-color-red-600));color:var(--spectrum-button-warning-text-color-hover,var(--spectrum-global-color-gray-50))}:host([variant=negative]) #button:focus{background-color:var(--spectrum-button-warning-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-warning-border-color-key-focus,#1473e6);color:var(--spectrum-button-warning-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-over-background-border-color,#fff);color:var(--spectrum-button-over-background-text-color,#fff)}:host([variant=overBackground]) #button:hover{background-color:var(--spectrum-button-over-background-background-color-hover,#fff);border-color:var(--spectrum-button-over-background-border-color-hover,#fff);color:inherit}:host([variant=overBackground]) #button:focus{background-color:var(--spectrum-button-over-background-background-color-key-focus,#fff);border-color:var(--spectrum-button-over-background-border-color-key-focus,#fff);color:inherit;box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-button-over-background-border-color-key-focus,#fff)}:host([variant=overBackground]) #button:active{background-color:var(--spectrum-button-over-background-background-color-down,#fff);border-color:var(--spectrum-button-over-background-border-color-down,#fff);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,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,transparent);border-color:var(--spectrum-button-quiet-over-background-border-color,transparent);color:var(--spectrum-button-quiet-over-background-text-color,#fff)}: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,transparent);color:var(--spectrum-button-quiet-over-background-text-color-hover,#fff)}:host([variant=overBackground][quiet]) #button:focus{background-color:var(--spectrum-button-quiet-over-background-background-color-key-focus,#fff);border-color:var(--spectrum-button-quiet-over-background-border-color-key-focus,#fff);color:inherit;box-shadow:0 0 0 var(--spectrum-button-primary-border-size-increase-key-focus,1px) var(--spectrum-button-quiet-over-background-border-color-key-focus,#fff)}: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,transparent);color:var(--spectrum-button-quiet-over-background-text-color-down,#fff);box-shadow:none}:host([variant=overBackground][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-over-background-background-color-disabled,transparent);border-color:var(--spectrum-button-quiet-over-background-border-color-disabled,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,transparent);border-color:var(--spectrum-button-quiet-primary-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{background-color:var(--spectrum-button-quiet-primary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-quiet-primary-border-color-key-focus,#1473e6);color:var(--spectrum-button-quiet-primary-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-quiet-primary-border-color-disabled,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,transparent);border-color:var(--spectrum-button-quiet-secondary-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{background-color:var(--spectrum-button-quiet-secondary-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-quiet-secondary-border-color-key-focus,#1473e6);color:var(--spectrum-button-quiet-secondary-text-color-key-focus,#fff)}: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,transparent);border-color:var(--spectrum-button-quiet-secondary-border-color-disabled,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,transparent);border-color:var(--spectrum-button-quiet-warning-border-color,transparent);color:var(--spectrum-button-quiet-warning-text-color,var(--spectrum-global-color-red-500))}: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-600))}:host([variant=negative][quiet]) #button:focus{background-color:var(--spectrum-button-quiet-warning-background-color-key-focus,#1473e6);border-color:var(--spectrum-button-quiet-warning-border-color-key-focus,#1473e6);color:var(--spectrum-button-quiet-warning-text-color-key-focus,#fff)}: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-600))}:host([variant=negative][quiet][disabled]) #button{background-color:var(--spectrum-button-quiet-warning-background-color-disabled,transparent);border-color:var(--spectrum-button-quiet-warning-border-color-disabled,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}#button:focus,:host(:focus){outline: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)}
`;
export default styles;

4

src/button.ts

@@ -37,3 +37,3 @@ /*

@property({ type: Boolean, reflect: true })
public warning: boolean = false;
public warning = false;

@@ -44,3 +44,3 @@ /**

@property({ type: Boolean, reflect: true })
public quiet: boolean = false;
public quiet = false;

@@ -47,0 +47,0 @@ public static get styles(): CSSResultArray {

lib/action-button.css.js.map

Sorry, the diff of this file is not supported yet

lib/action-button.js.map

Sorry, the diff of this file is not supported yet

lib/button-base.css.js.map

Sorry, the diff of this file is not supported yet

lib/button-base.js.map

Sorry, the diff of this file is not supported yet

lib/button.css.js.map

Sorry, the diff of this file is not supported yet

lib/button.js.map

Sorry, the diff of this file is not supported yet

src/button-base.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc