@spectrum-web-components/tags 0.8.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +2 -2
- package/package.json +7 -7
- package/src/Tag.js +1 -1
- package/src/Tag.js.map +1 -1
- package/src/spectrum-config.js +4 -0
- package/src/spectrum-tag.css.js +23 -15
- package/src/spectrum-tag.css.js.map +1 -1
- package/src/tag.css.js +23 -15
- package/src/tag.css.js.map +1 -1
- package/test/tag.test.js +0 -117
- package/test/tag.test.js.map +0 -1
- package/test/tags-sizes.test-vrt.js +0 -15
- package/test/tags-sizes.test-vrt.js.map +0 -1
- package/test/tags.test-vrt.js +0 -15
- package/test/tags.test-vrt.js.map +0 -1
- package/test/tags.test.js +0 -237
- package/test/tags.test.js.map +0 -1
package/custom-elements.json
CHANGED
|
@@ -301,7 +301,7 @@
|
|
|
301
301
|
{
|
|
302
302
|
"kind": "variable",
|
|
303
303
|
"name": "styles",
|
|
304
|
-
"default": "css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-clearButton,:host([selected][invalid]) .spectrum-Tag-icon,:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n)}:host([selected][invalid]:hover) .spectrum-Tag-clearButton,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .spectrum-Tag-clearButton,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .spectrum-Tag-clearButton,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .spectrum-Tag-clearButton{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected]) .spectrum-Tag-clearButton:hover{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable]) .spectrum-Tag-clearButton.is-focused{background-color:var(\n--spectrum-tag-s-removable-texticon-button-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]) .spectrum-Tag-clearButton:hover{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]) .spectrum-Tag-clearButton:active{background-color:var(\n--spectrum-tag-s-removable-texticon-button-background-color-hover,var(--spectrum-global-color-gray-75)\n)}\n`"
|
|
304
|
+
"default": "css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n)}:host([selected][invalid]:hover) .clear-button,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .clear-button,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable]) .clear-button.is-focused{background-color:var(\n--spectrum-tag-s-removable-texticon-button-fill-background-color-key-focus,var(\n--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus\n)\n);border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]) .clear-button:active{background-color:var(\n--spectrum-tag-s-removable-texticon-button-fill-background-color-hover,var(\n--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover\n)\n)}\n`"
|
|
305
305
|
}
|
|
306
306
|
],
|
|
307
307
|
"exports": [
|
|
@@ -343,7 +343,7 @@
|
|
|
343
343
|
{
|
|
344
344
|
"kind": "variable",
|
|
345
345
|
"name": "styles",
|
|
346
|
-
"default": "css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-clearButton,:host([selected][invalid]) .spectrum-Tag-icon,:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n)}:host([selected][invalid]:hover) .spectrum-Tag-clearButton,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .spectrum-Tag-clearButton,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .spectrum-Tag-clearButton,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .spectrum-Tag-clearButton{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected]) .spectrum-Tag-clearButton:hover{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable]) .spectrum-Tag-clearButton.is-focused{background-color:var(\n--spectrum-tag-s-removable-texticon-button-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]) .spectrum-Tag-clearButton:hover{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]) .spectrum-Tag-clearButton:active{background-color:var(\n--spectrum-tag-s-removable-texticon-button-background-color-hover,var(--spectrum-global-color-gray-75)\n)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-key-focus,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):hover .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):active .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}\n`"
|
|
346
|
+
"default": "css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n)}:host([selected][invalid]:hover) .clear-button,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .clear-button,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable]) .clear-button.is-focused{background-color:var(\n--spectrum-tag-s-removable-texticon-button-fill-background-color-key-focus,var(\n--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus\n)\n);border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]) .clear-button:active{background-color:var(\n--spectrum-tag-s-removable-texticon-button-fill-background-color-hover,var(\n--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover\n)\n)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-key-focus,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):hover .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):active .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}\n`"
|
|
347
347
|
}
|
|
348
348
|
],
|
|
349
349
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tags",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -46,19 +46,19 @@
|
|
|
46
46
|
"lit-html"
|
|
47
47
|
],
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@spectrum-web-components/base": "^0.5.
|
|
50
|
-
"@spectrum-web-components/button": "^0.16.
|
|
51
|
-
"@spectrum-web-components/shared": "^0.13.
|
|
49
|
+
"@spectrum-web-components/base": "^0.5.1",
|
|
50
|
+
"@spectrum-web-components/button": "^0.16.1",
|
|
51
|
+
"@spectrum-web-components/shared": "^0.13.1",
|
|
52
52
|
"tslib": "^2.0.0"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
|
-
"@spectrum-css/tag": "^3.
|
|
56
|
-
"@spectrum-css/taggroup": "^3.
|
|
55
|
+
"@spectrum-css/tag": "^3.1.4",
|
|
56
|
+
"@spectrum-css/taggroup": "^3.1.4"
|
|
57
57
|
},
|
|
58
58
|
"types": "./src/index.d.ts",
|
|
59
59
|
"customElements": "custom-elements.json",
|
|
60
60
|
"sideEffects": [
|
|
61
61
|
"./sp-*.js"
|
|
62
62
|
],
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "df3f333ee26a45f9fc247716b6e8ef051dca630b"
|
|
64
64
|
}
|
package/src/Tag.js
CHANGED
package/src/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["Tag.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/button/sp-clear-button.js';\n\nimport styles from './tag.css.js';\n\n/**\n * @element sp-tag\n *\n * @slot - text content for labeling the tag\n * @slot avatar - an avatar element to display within the Tag\n * @slot icon - an icon element to display within the Tag\n */\nexport class Tag extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm', 'l'],\n}) {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public deletable = false;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n private get hasIcon(): boolean {\n return !!this.querySelector('[slot=\"icon\"]');\n }\n\n private get hasAvatar(): boolean {\n return !!this.querySelector('[slot=\"avatar\"]');\n }\n\n constructor() {\n super();\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n private handleFocusin = (): void => {\n this.addEventListener('focusout', this.handleFocusout);\n this.addEventListener('keydown', this.handleKeydown);\n };\n\n private handleFocusout = (): void => {\n this.removeEventListener('keydown', this.handleKeydown);\n this.removeEventListener('focusout', this.handleFocusout);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.deletable) {\n return;\n }\n const { code } = event;\n switch (code) {\n case 'Backspace':\n case 'Space':\n case 'Delete':\n this.delete();\n return;\n default:\n return;\n }\n };\n\n private delete(): void {\n if (this.readonly) {\n return;\n }\n this.dispatchEvent(\n new Event('delete', {\n bubbles: true,\n })\n );\n }\n\n protected render(): TemplateResult {\n const slots: TemplateResult[] = [];\n if (this.hasAvatar) {\n slots.push(\n html`\n <slot name=\"avatar\"></slot>\n `\n );\n }\n if (this.hasIcon) {\n slots.push(\n html`\n <slot name=\"icon\"></slot>\n `\n );\n }\n return html`\n ${slots}\n <span class=\"label\"><slot></slot></span>\n ${this.deletable\n ? html`\n <sp-clear-button\n class=\"clear-button\"\n ?disabled=${this.disabled}\n label=\"Remove\"\n
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["Tag.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/button/sp-clear-button.js';\n\nimport styles from './tag.css.js';\n\n/**\n * @element sp-tag\n *\n * @slot - text content for labeling the tag\n * @slot avatar - an avatar element to display within the Tag\n * @slot icon - an icon element to display within the Tag\n */\nexport class Tag extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm', 'l'],\n}) {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public deletable = false;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n private get hasIcon(): boolean {\n return !!this.querySelector('[slot=\"icon\"]');\n }\n\n private get hasAvatar(): boolean {\n return !!this.querySelector('[slot=\"avatar\"]');\n }\n\n constructor() {\n super();\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n private handleFocusin = (): void => {\n this.addEventListener('focusout', this.handleFocusout);\n this.addEventListener('keydown', this.handleKeydown);\n };\n\n private handleFocusout = (): void => {\n this.removeEventListener('keydown', this.handleKeydown);\n this.removeEventListener('focusout', this.handleFocusout);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.deletable) {\n return;\n }\n const { code } = event;\n switch (code) {\n case 'Backspace':\n case 'Space':\n case 'Delete':\n this.delete();\n return;\n default:\n return;\n }\n };\n\n private delete(): void {\n if (this.readonly) {\n return;\n }\n this.dispatchEvent(\n new Event('delete', {\n bubbles: true,\n })\n );\n }\n\n protected render(): TemplateResult {\n const slots: TemplateResult[] = [];\n if (this.hasAvatar) {\n slots.push(\n html`\n <slot name=\"avatar\"></slot>\n `\n );\n }\n if (this.hasIcon) {\n slots.push(\n html`\n <slot name=\"icon\"></slot>\n `\n );\n }\n return html`\n ${slots}\n <span class=\"label\"><slot></slot></span>\n ${this.deletable\n ? html`\n <sp-clear-button\n class=\"clear-button\"\n ?disabled=${this.disabled}\n label=\"Remove\"\n size=\"s\"\n tabindex=\"-1\"\n @click=${this.delete}\n ></sp-clear-button>\n `\n : html``}\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n if (this.deletable) {\n this.setAttribute(\n 'tabindex',\n !this.disabled && this.matches(':first-of-type:not([disabled])')\n ? '0'\n : '-1'\n );\n }\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"]}
|
package/src/spectrum-config.js
CHANGED
package/src/spectrum-tag.css.js
CHANGED
|
@@ -139,7 +139,11 @@ const styles = css `
|
|
|
139
139
|
--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)
|
|
140
140
|
);border-color:var(
|
|
141
141
|
--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)
|
|
142
|
-
)}:host([selected][invalid]) .spectrum-Tag-
|
|
142
|
+
)}:host([selected][invalid]) .spectrum-Tag-label{color:var(
|
|
143
|
+
--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-text-color-overbackground)
|
|
144
|
+
)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(
|
|
145
|
+
--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)
|
|
146
|
+
)}:host([selected][invalid]) .clear-button{color:var(
|
|
143
147
|
--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)
|
|
144
148
|
)}:host([selected][invalid].focus-visible){border-color:var(
|
|
145
149
|
--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)
|
|
@@ -157,7 +161,7 @@ const styles = css `
|
|
|
157
161
|
--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)
|
|
158
162
|
);border-color:var(
|
|
159
163
|
--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)
|
|
160
|
-
)}:host([selected][invalid]:hover) .
|
|
164
|
+
)}:host([selected][invalid]:hover) .clear-button,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(
|
|
161
165
|
--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)
|
|
162
166
|
)}:host([invalid]){border-color:var(
|
|
163
167
|
--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)
|
|
@@ -167,7 +171,7 @@ const styles = css `
|
|
|
167
171
|
--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)
|
|
168
172
|
);color:var(
|
|
169
173
|
--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)
|
|
170
|
-
)}:host([invalid]:hover) .
|
|
174
|
+
)}:host([invalid]:hover) .clear-button,:host([invalid]:hover) .spectrum-Tag-icon{color:var(
|
|
171
175
|
--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)
|
|
172
176
|
)}:host([invalid].focus-visible){border-color:var(
|
|
173
177
|
--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
|
|
@@ -185,7 +189,7 @@ const styles = css `
|
|
|
185
189
|
--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
|
|
186
190
|
);color:var(
|
|
187
191
|
--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)
|
|
188
|
-
)}:host([invalid]) .
|
|
192
|
+
)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(
|
|
189
193
|
--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)
|
|
190
194
|
)}:host([invalid]) .clear-button{color:var(
|
|
191
195
|
--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)
|
|
@@ -233,22 +237,26 @@ const styles = css `
|
|
|
233
237
|
--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)
|
|
234
238
|
)}:host([deletable][selected]) .is-focused{color:var(
|
|
235
239
|
--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)
|
|
236
|
-
)}:host([deletable][selected]) .
|
|
237
|
-
--spectrum-tag-s-removable-texticon-
|
|
238
|
-
)}:host([deletable][selected]) .
|
|
239
|
-
--spectrum-tag-s-removable-texticon-
|
|
240
|
+
)}:host([deletable][selected]) .clear-button{color:var(
|
|
241
|
+
--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)
|
|
242
|
+
)}:host([deletable][selected]) .clear-button:hover{color:var(
|
|
243
|
+
--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)
|
|
240
244
|
)}:host([deletable][selected][invalid]){color:var(
|
|
241
245
|
--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)
|
|
242
|
-
)}:host([deletable]) .
|
|
243
|
-
--spectrum-tag-s-removable-texticon-button-background-color-key-focus,var(
|
|
246
|
+
)}:host([deletable]) .clear-button.is-focused{background-color:var(
|
|
247
|
+
--spectrum-tag-s-removable-texticon-button-fill-background-color-key-focus,var(
|
|
248
|
+
--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus
|
|
249
|
+
)
|
|
244
250
|
);border-color:var(
|
|
245
251
|
--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
|
|
246
252
|
);color:var(
|
|
247
|
-
--spectrum-tag-s-removable-texticon-
|
|
248
|
-
)}:host([deletable]) .
|
|
249
|
-
--spectrum-tag-s-removable-texticon-
|
|
250
|
-
)}:host([deletable]) .
|
|
251
|
-
--spectrum-tag-s-removable-texticon-button-background-color-hover,var(
|
|
253
|
+
--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)
|
|
254
|
+
)}:host([deletable]) .clear-button:hover{color:var(
|
|
255
|
+
--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)
|
|
256
|
+
)}:host([deletable]) .clear-button:active{background-color:var(
|
|
257
|
+
--spectrum-tag-s-removable-texticon-button-fill-background-color-hover,var(
|
|
258
|
+
--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover
|
|
259
|
+
)
|
|
252
260
|
)}
|
|
253
261
|
`;
|
|
254
262
|
export default styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-tag.css.js","sourceRoot":"","sources":["spectrum-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgPjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-clearButton,:host([selected][invalid]) .spectrum-Tag-icon,:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n)}:host([selected][invalid]:hover) .spectrum-Tag-clearButton,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .spectrum-Tag-clearButton,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .spectrum-Tag-clearButton,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .spectrum-Tag-clearButton{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected]) .spectrum-Tag-clearButton:hover{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable]) .spectrum-Tag-clearButton.is-focused{background-color:var(\n--spectrum-tag-s-removable-texticon-button-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]) .spectrum-Tag-clearButton:hover{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]) .spectrum-Tag-clearButton:active{background-color:var(\n--spectrum-tag-s-removable-texticon-button-background-color-hover,var(--spectrum-global-color-gray-75)\n)}\n`;\nexport default styles;"]}
|
|
1
|
+
{"version":3,"file":"spectrum-tag.css.js","sourceRoot":"","sources":["spectrum-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwPjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n)}:host([selected][invalid]:hover) .clear-button,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .clear-button,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable]) .clear-button.is-focused{background-color:var(\n--spectrum-tag-s-removable-texticon-button-fill-background-color-key-focus,var(\n--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus\n)\n);border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]) .clear-button:active{background-color:var(\n--spectrum-tag-s-removable-texticon-button-fill-background-color-hover,var(\n--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover\n)\n)}\n`;\nexport default styles;"]}
|
package/src/tag.css.js
CHANGED
|
@@ -139,7 +139,11 @@ const styles = css `
|
|
|
139
139
|
--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)
|
|
140
140
|
);border-color:var(
|
|
141
141
|
--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)
|
|
142
|
-
)}:host([selected][invalid]) .spectrum-Tag-
|
|
142
|
+
)}:host([selected][invalid]) .spectrum-Tag-label{color:var(
|
|
143
|
+
--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-text-color-overbackground)
|
|
144
|
+
)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(
|
|
145
|
+
--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)
|
|
146
|
+
)}:host([selected][invalid]) .clear-button{color:var(
|
|
143
147
|
--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)
|
|
144
148
|
)}:host([selected][invalid].focus-visible){border-color:var(
|
|
145
149
|
--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)
|
|
@@ -157,7 +161,7 @@ const styles = css `
|
|
|
157
161
|
--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)
|
|
158
162
|
);border-color:var(
|
|
159
163
|
--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)
|
|
160
|
-
)}:host([selected][invalid]:hover) .
|
|
164
|
+
)}:host([selected][invalid]:hover) .clear-button,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(
|
|
161
165
|
--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)
|
|
162
166
|
)}:host([invalid]){border-color:var(
|
|
163
167
|
--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)
|
|
@@ -167,7 +171,7 @@ const styles = css `
|
|
|
167
171
|
--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)
|
|
168
172
|
);color:var(
|
|
169
173
|
--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)
|
|
170
|
-
)}:host([invalid]:hover) .
|
|
174
|
+
)}:host([invalid]:hover) .clear-button,:host([invalid]:hover) .spectrum-Tag-icon{color:var(
|
|
171
175
|
--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)
|
|
172
176
|
)}:host([invalid].focus-visible){border-color:var(
|
|
173
177
|
--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
|
|
@@ -185,7 +189,7 @@ const styles = css `
|
|
|
185
189
|
--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
|
|
186
190
|
);color:var(
|
|
187
191
|
--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)
|
|
188
|
-
)}:host([invalid]) .
|
|
192
|
+
)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(
|
|
189
193
|
--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)
|
|
190
194
|
)}:host([invalid]) .clear-button{color:var(
|
|
191
195
|
--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)
|
|
@@ -233,22 +237,26 @@ const styles = css `
|
|
|
233
237
|
--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)
|
|
234
238
|
)}:host([deletable][selected]) .is-focused{color:var(
|
|
235
239
|
--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)
|
|
236
|
-
)}:host([deletable][selected]) .
|
|
237
|
-
--spectrum-tag-s-removable-texticon-
|
|
238
|
-
)}:host([deletable][selected]) .
|
|
239
|
-
--spectrum-tag-s-removable-texticon-
|
|
240
|
+
)}:host([deletable][selected]) .clear-button{color:var(
|
|
241
|
+
--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)
|
|
242
|
+
)}:host([deletable][selected]) .clear-button:hover{color:var(
|
|
243
|
+
--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)
|
|
240
244
|
)}:host([deletable][selected][invalid]){color:var(
|
|
241
245
|
--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)
|
|
242
|
-
)}:host([deletable]) .
|
|
243
|
-
--spectrum-tag-s-removable-texticon-button-background-color-key-focus,var(
|
|
246
|
+
)}:host([deletable]) .clear-button.is-focused{background-color:var(
|
|
247
|
+
--spectrum-tag-s-removable-texticon-button-fill-background-color-key-focus,var(
|
|
248
|
+
--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus
|
|
249
|
+
)
|
|
244
250
|
);border-color:var(
|
|
245
251
|
--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)
|
|
246
252
|
);color:var(
|
|
247
|
-
--spectrum-tag-s-removable-texticon-
|
|
248
|
-
)}:host([deletable]) .
|
|
249
|
-
--spectrum-tag-s-removable-texticon-
|
|
250
|
-
)}:host([deletable]) .
|
|
251
|
-
--spectrum-tag-s-removable-texticon-button-background-color-hover,var(
|
|
253
|
+
--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)
|
|
254
|
+
)}:host([deletable]) .clear-button:hover{color:var(
|
|
255
|
+
--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)
|
|
256
|
+
)}:host([deletable]) .clear-button:active{background-color:var(
|
|
257
|
+
--spectrum-tag-s-removable-texticon-button-fill-background-color-hover,var(
|
|
258
|
+
--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover
|
|
259
|
+
)
|
|
252
260
|
)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(
|
|
253
261
|
--spectrum-tag-icon-color-error-key-focus,var(--spectrum-global-color-red-600)
|
|
254
262
|
);--spectrum-clearbutton-medium-icon-color-hover:var(
|
package/src/tag.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.css.js","sourceRoot":"","sources":["tag.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0RjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-clearButton,:host([selected][invalid]) .spectrum-Tag-icon,:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n)}:host([selected][invalid]:hover) .spectrum-Tag-clearButton,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .spectrum-Tag-clearButton,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .spectrum-Tag-clearButton,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .spectrum-Tag-clearButton{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected]) .spectrum-Tag-clearButton:hover{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable]) .spectrum-Tag-clearButton.is-focused{background-color:var(\n--spectrum-tag-s-removable-texticon-button-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]) .spectrum-Tag-clearButton:hover{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]) .spectrum-Tag-clearButton:active{background-color:var(\n--spectrum-tag-s-removable-texticon-button-background-color-hover,var(--spectrum-global-color-gray-75)\n)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-key-focus,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):hover .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):active .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}\n`;\nexport default styles;"]}
|
|
1
|
+
{"version":3,"file":"tag.css.js","sourceRoot":"","sources":["tag.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkSjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n)}:host([selected][invalid]:hover) .clear-button,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .clear-button,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable]) .clear-button.is-focused{background-color:var(\n--spectrum-tag-s-removable-texticon-button-fill-background-color-key-focus,var(\n--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus\n)\n);border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]) .clear-button:active{background-color:var(\n--spectrum-tag-s-removable-texticon-button-fill-background-color-hover,var(\n--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover\n)\n)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-key-focus,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):hover .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):active .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}\n`;\nexport default styles;"]}
|
package/test/tag.test.js
DELETED
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import { elementUpdated, expect, fixture } from '@open-wc/testing';
|
|
13
|
-
import { html } from 'lit/static-html.js';
|
|
14
|
-
import { spy } from 'sinon';
|
|
15
|
-
import '../sp-tag.js';
|
|
16
|
-
import '../sp-tags.js';
|
|
17
|
-
import { backspaceEvent, deleteEvent, enterEvent, spaceEvent, } from '../../../test/testing-helpers.js';
|
|
18
|
-
describe('Tag', () => {
|
|
19
|
-
it('loads default tags accessibly', async () => {
|
|
20
|
-
const el = await fixture(html `
|
|
21
|
-
<sp-tags>
|
|
22
|
-
<sp-tag>Tag 1</sp-tag>
|
|
23
|
-
<sp-tag invalid>Tag 2</sp-tag>
|
|
24
|
-
<sp-tag disabled>Tag 3</sp-tag>
|
|
25
|
-
<sp-tag deletable>Tag 4</sp-tag>
|
|
26
|
-
</sp-tags>
|
|
27
|
-
`);
|
|
28
|
-
await elementUpdated(el);
|
|
29
|
-
await expect(el).to.be.accessible();
|
|
30
|
-
});
|
|
31
|
-
it('[disabled] manages [aria-disabled]', async () => {
|
|
32
|
-
const el = await fixture(html `
|
|
33
|
-
<sp-tags>
|
|
34
|
-
<sp-tag>Tag 1</sp-tag>
|
|
35
|
-
<sp-tag invalid>Tag 2</sp-tag>
|
|
36
|
-
<sp-tag disabled>Tag 3</sp-tag>
|
|
37
|
-
<sp-tag deletable>Tag 4</sp-tag>
|
|
38
|
-
</sp-tags>
|
|
39
|
-
`);
|
|
40
|
-
const notDisabled = el.querySelector('sp-tag');
|
|
41
|
-
const disabled = el.querySelector('[disabled]');
|
|
42
|
-
await elementUpdated(disabled);
|
|
43
|
-
expect(notDisabled.hasAttribute('aria-disabled')).to.be.false;
|
|
44
|
-
expect(disabled.hasAttribute('aria-disabled')).to.be.true;
|
|
45
|
-
expect(disabled.getAttribute('aria-disabled')).to.equal('true');
|
|
46
|
-
});
|
|
47
|
-
it('dispatches `delete` events on click', async () => {
|
|
48
|
-
const deleteSpy = spy();
|
|
49
|
-
const handleDelete = () => deleteSpy();
|
|
50
|
-
const el = await fixture(html `
|
|
51
|
-
<sp-tag @delete=${handleDelete} deletable>Tag 1</sp-tag>
|
|
52
|
-
`);
|
|
53
|
-
await elementUpdated(el);
|
|
54
|
-
expect(deleteSpy.called).to.be.false;
|
|
55
|
-
const root = el.shadowRoot
|
|
56
|
-
? el.shadowRoot
|
|
57
|
-
: el;
|
|
58
|
-
const deleteButton = root.querySelector('sp-clear-button');
|
|
59
|
-
deleteButton.click();
|
|
60
|
-
await elementUpdated(el);
|
|
61
|
-
expect(deleteSpy.called).to.be.true;
|
|
62
|
-
expect(deleteSpy.callCount).to.equal(1);
|
|
63
|
-
});
|
|
64
|
-
it('does not dispatch `delete` events when [readonly]', async () => {
|
|
65
|
-
const deleteSpy = spy();
|
|
66
|
-
const handleDelete = () => deleteSpy();
|
|
67
|
-
const el = await fixture(html `
|
|
68
|
-
<sp-tag @delete=${handleDelete} deletable readonly>
|
|
69
|
-
Tag 1
|
|
70
|
-
</sp-tag>
|
|
71
|
-
`);
|
|
72
|
-
await elementUpdated(el);
|
|
73
|
-
expect(deleteSpy.called).to.be.false;
|
|
74
|
-
const root = el.shadowRoot
|
|
75
|
-
? el.shadowRoot
|
|
76
|
-
: el;
|
|
77
|
-
const deleteButton = root.querySelector('sp-clear-button');
|
|
78
|
-
deleteButton.click();
|
|
79
|
-
await elementUpdated(el);
|
|
80
|
-
expect(deleteSpy.called).to.be.false;
|
|
81
|
-
});
|
|
82
|
-
it('dispatches `delete` events on keyboard input', async () => {
|
|
83
|
-
const deleteSpy = spy();
|
|
84
|
-
const handleDelete = () => deleteSpy();
|
|
85
|
-
let expectedEventCount = 0;
|
|
86
|
-
const el = await fixture(html `
|
|
87
|
-
<sp-tag @delete=${handleDelete}>Tag 1</sp-tag>
|
|
88
|
-
`);
|
|
89
|
-
const testKeyboardEvent = async (event) => {
|
|
90
|
-
expectedEventCount += 1;
|
|
91
|
-
el.dispatchEvent(event);
|
|
92
|
-
await elementUpdated(el);
|
|
93
|
-
expect(deleteSpy.called).to.be.true;
|
|
94
|
-
expect(deleteSpy.callCount, `Accepts "${event.code}" key input`).to.equal(expectedEventCount);
|
|
95
|
-
};
|
|
96
|
-
await elementUpdated(el);
|
|
97
|
-
expect(deleteSpy.called).to.be.false;
|
|
98
|
-
el.dispatchEvent(new FocusEvent('focusin'));
|
|
99
|
-
await elementUpdated(el);
|
|
100
|
-
el.dispatchEvent(deleteEvent);
|
|
101
|
-
await elementUpdated(el);
|
|
102
|
-
expect(deleteSpy.called).to.be.false;
|
|
103
|
-
el.deletable = true;
|
|
104
|
-
await elementUpdated(el);
|
|
105
|
-
el.dispatchEvent(enterEvent);
|
|
106
|
-
await elementUpdated(el);
|
|
107
|
-
expect(deleteSpy.called).to.be.false;
|
|
108
|
-
testKeyboardEvent(deleteEvent);
|
|
109
|
-
testKeyboardEvent(spaceEvent);
|
|
110
|
-
testKeyboardEvent(backspaceEvent);
|
|
111
|
-
el.dispatchEvent(new FocusEvent('focusout'));
|
|
112
|
-
await elementUpdated(el);
|
|
113
|
-
el.dispatchEvent(deleteEvent);
|
|
114
|
-
expect(deleteSpy.callCount, 'Does not respond after `focusout`').to.equal(expectedEventCount);
|
|
115
|
-
});
|
|
116
|
-
});
|
|
117
|
-
//# sourceMappingURL=tag.test.js.map
|
package/test/tag.test.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tag.test.js","sourceRoot":"","sources":["tag.test.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit/static-html.js';\nimport { spy } from 'sinon';\n\nimport '../sp-tag.js';\nimport '../sp-tags.js';\nimport { Tag } from '..';\nimport { ClearButton } from '@spectrum-web-components/button';\nimport {\n backspaceEvent,\n deleteEvent,\n enterEvent,\n spaceEvent,\n} from '../../../test/testing-helpers.js';\n\ndescribe('Tag', () => {\n it('loads default tags accessibly', async () => {\n const el = await fixture<Tag>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('[disabled] manages [aria-disabled]', async () => {\n const el = await fixture<Tag>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n </sp-tags>\n `\n );\n const notDisabled = el.querySelector('sp-tag') as Tag;\n const disabled = el.querySelector('[disabled]') as Tag;\n\n await elementUpdated(disabled);\n\n expect(notDisabled.hasAttribute('aria-disabled')).to.be.false;\n expect(disabled.hasAttribute('aria-disabled')).to.be.true;\n expect(disabled.getAttribute('aria-disabled')).to.equal('true');\n });\n it('dispatches `delete` events on click', async () => {\n const deleteSpy = spy();\n const handleDelete = (): void => deleteSpy();\n const el = await fixture<Tag>(\n html`\n <sp-tag @delete=${handleDelete} deletable>Tag 1</sp-tag>\n `\n );\n\n await elementUpdated(el);\n\n expect(deleteSpy.called).to.be.false;\n\n const root: HTMLElement | DocumentFragment = el.shadowRoot\n ? el.shadowRoot\n : el;\n const deleteButton = root.querySelector(\n 'sp-clear-button'\n ) as ClearButton;\n deleteButton.click();\n\n await elementUpdated(el);\n\n expect(deleteSpy.called).to.be.true;\n expect(deleteSpy.callCount).to.equal(1);\n });\n it('does not dispatch `delete` events when [readonly]', async () => {\n const deleteSpy = spy();\n const handleDelete = (): void => deleteSpy();\n const el = await fixture<Tag>(\n html`\n <sp-tag @delete=${handleDelete} deletable readonly>\n Tag 1\n </sp-tag>\n `\n );\n\n await elementUpdated(el);\n\n expect(deleteSpy.called).to.be.false;\n\n const root: HTMLElement | DocumentFragment = el.shadowRoot\n ? el.shadowRoot\n : el;\n const deleteButton = root.querySelector(\n 'sp-clear-button'\n ) as ClearButton;\n deleteButton.click();\n\n await elementUpdated(el);\n\n expect(deleteSpy.called).to.be.false;\n });\n it('dispatches `delete` events on keyboard input', async () => {\n const deleteSpy = spy();\n const handleDelete = (): void => deleteSpy();\n let expectedEventCount = 0;\n const el = await fixture<Tag>(\n html`\n <sp-tag @delete=${handleDelete}>Tag 1</sp-tag>\n `\n );\n const testKeyboardEvent = async (\n event: KeyboardEvent\n ): Promise<void> => {\n expectedEventCount += 1;\n\n el.dispatchEvent(event);\n await elementUpdated(el);\n\n expect(deleteSpy.called).to.be.true;\n expect(\n deleteSpy.callCount,\n `Accepts \"${event.code}\" key input`\n ).to.equal(expectedEventCount);\n };\n\n await elementUpdated(el);\n\n expect(deleteSpy.called).to.be.false;\n\n el.dispatchEvent(new FocusEvent('focusin'));\n await elementUpdated(el);\n\n el.dispatchEvent(deleteEvent);\n await elementUpdated(el);\n\n expect(deleteSpy.called).to.be.false;\n\n el.deletable = true;\n await elementUpdated(el);\n\n el.dispatchEvent(enterEvent);\n await elementUpdated(el);\n\n expect(deleteSpy.called).to.be.false;\n\n testKeyboardEvent(deleteEvent);\n testKeyboardEvent(spaceEvent);\n testKeyboardEvent(backspaceEvent);\n\n el.dispatchEvent(new FocusEvent('focusout'));\n await elementUpdated(el);\n\n el.dispatchEvent(deleteEvent);\n expect(\n deleteSpy.callCount,\n 'Does not respond after `focusout`'\n ).to.equal(expectedEventCount);\n });\n});\n"]}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import * as stories from '../stories/tags-sizes.stories.js';
|
|
13
|
-
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
-
regressVisuals('TagsSizesStories', stories);
|
|
15
|
-
//# sourceMappingURL=tags-sizes.test-vrt.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tags-sizes.test-vrt.js","sourceRoot":"","sources":["tags-sizes.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/tags-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TagsSizesStories', stories);\n"]}
|
package/test/tags.test-vrt.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import * as stories from '../stories/tags.stories.js';
|
|
13
|
-
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
-
regressVisuals('TagsStories', stories);
|
|
15
|
-
//# sourceMappingURL=tags.test-vrt.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tags.test-vrt.js","sourceRoot":"","sources":["tags.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/tags.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TagsStories', stories);\n"]}
|
package/test/tags.test.js
DELETED
|
@@ -1,237 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import { elementUpdated, expect, fixture } from '@open-wc/testing';
|
|
13
|
-
import { html } from 'lit/static-html.js';
|
|
14
|
-
import '../sp-tag.js';
|
|
15
|
-
import '../sp-tags.js';
|
|
16
|
-
import { arrowDownEvent, arrowLeftEvent, arrowRightEvent, arrowUpEvent, endEvent, enterEvent, homeEvent, pageDownEvent, pageUpEvent, } from '../../../test/testing-helpers.js';
|
|
17
|
-
import { executeServerCommand } from '@web/test-runner-commands';
|
|
18
|
-
describe('Tags', () => {
|
|
19
|
-
it('loads default tags accessibly', async () => {
|
|
20
|
-
const el = await fixture(html `
|
|
21
|
-
<sp-tags>
|
|
22
|
-
<sp-tag>Tag 1</sp-tag>
|
|
23
|
-
<sp-tag invalid>Tag 2</sp-tag>
|
|
24
|
-
<sp-tag disabled>Tag 3</sp-tag>
|
|
25
|
-
</sp-tags>
|
|
26
|
-
`);
|
|
27
|
-
await elementUpdated(el);
|
|
28
|
-
await expect(el).to.be.accessible();
|
|
29
|
-
expect(el.hasAttribute('role')).to.be.true;
|
|
30
|
-
expect(el.hasAttribute('aria-label')).to.be.true;
|
|
31
|
-
});
|
|
32
|
-
it('does not accept focus when empty', async () => {
|
|
33
|
-
const el = await fixture(html `
|
|
34
|
-
<sp-tags></sp-tags>
|
|
35
|
-
`);
|
|
36
|
-
await elementUpdated(el);
|
|
37
|
-
expect(document.activeElement === el).to.be.false;
|
|
38
|
-
el.focus();
|
|
39
|
-
await elementUpdated(el);
|
|
40
|
-
expect(document.activeElement === el).to.be.false;
|
|
41
|
-
});
|
|
42
|
-
it('does not accept focus when no tag has `deletable`', async () => {
|
|
43
|
-
const el = await fixture(html `
|
|
44
|
-
<sp-tags>
|
|
45
|
-
<sp-tag>Tag 1</sp-tag>
|
|
46
|
-
<sp-tag invalid>Tag 2</sp-tag>
|
|
47
|
-
<sp-tag disabled>Tag 3</sp-tag>
|
|
48
|
-
</sp-tags>
|
|
49
|
-
`);
|
|
50
|
-
await elementUpdated(el);
|
|
51
|
-
const tag1 = el.querySelector('sp-tag:nth-child(1)');
|
|
52
|
-
const tag2 = el.querySelector('sp-tag:nth-child(2)');
|
|
53
|
-
const tag3 = el.querySelector('sp-tag:nth-child(3)');
|
|
54
|
-
expect(document.activeElement === el).to.be.false;
|
|
55
|
-
el.focus();
|
|
56
|
-
await elementUpdated(el);
|
|
57
|
-
expect(document.activeElement === el).to.be.false;
|
|
58
|
-
expect(document.activeElement === tag1).to.be.false;
|
|
59
|
-
expect(document.activeElement === tag2).to.be.false;
|
|
60
|
-
expect(document.activeElement === tag3).to.be.false;
|
|
61
|
-
});
|
|
62
|
-
it('loads default tags with `role` and `aria-label` from the outside', async () => {
|
|
63
|
-
const el = await fixture(html `
|
|
64
|
-
<sp-tags>
|
|
65
|
-
<sp-tag>Tag 1</sp-tag>
|
|
66
|
-
<sp-tag invalid>Tag 2</sp-tag>
|
|
67
|
-
<sp-tag disabled>Tag 3</sp-tag>
|
|
68
|
-
</sp-tags>
|
|
69
|
-
`);
|
|
70
|
-
await elementUpdated(el);
|
|
71
|
-
await expect(el).to.be.accessible();
|
|
72
|
-
expect(el.hasAttribute('role')).to.be.true;
|
|
73
|
-
expect(el.hasAttribute('aria-label')).to.be.true;
|
|
74
|
-
});
|
|
75
|
-
it('accepts keyboard events while focused', async () => {
|
|
76
|
-
const el = await fixture(html `
|
|
77
|
-
<sp-tags>
|
|
78
|
-
<sp-tag deletable>Tag 1</sp-tag>
|
|
79
|
-
<sp-tag deletable>Tag 2</sp-tag>
|
|
80
|
-
<sp-tag deletable>Tag 3</sp-tag>
|
|
81
|
-
<sp-tag deletable>Tag 4</sp-tag>
|
|
82
|
-
<sp-tag deletable>Tag 5</sp-tag>
|
|
83
|
-
</sp-tags>
|
|
84
|
-
`);
|
|
85
|
-
await elementUpdated(el);
|
|
86
|
-
const tag1 = el.querySelector('sp-tag:nth-child(1)');
|
|
87
|
-
const tag2 = el.querySelector('sp-tag:nth-child(2)');
|
|
88
|
-
const tag3 = el.querySelector('sp-tag:nth-child(3)');
|
|
89
|
-
const tag4 = el.querySelector('sp-tag:nth-child(4)');
|
|
90
|
-
const tag5 = el.querySelector('sp-tag:nth-child(5)');
|
|
91
|
-
tag1.focus();
|
|
92
|
-
await elementUpdated(el);
|
|
93
|
-
el.dispatchEvent(pageUpEvent);
|
|
94
|
-
el.dispatchEvent(arrowRightEvent);
|
|
95
|
-
await elementUpdated(el);
|
|
96
|
-
expect(document.activeElement === tag2).to.be.true;
|
|
97
|
-
el.dispatchEvent(arrowDownEvent);
|
|
98
|
-
await elementUpdated(el);
|
|
99
|
-
expect(document.activeElement === tag3).to.be.true;
|
|
100
|
-
el.dispatchEvent(endEvent);
|
|
101
|
-
await elementUpdated(el);
|
|
102
|
-
expect(document.activeElement === tag5).to.be.true;
|
|
103
|
-
el.dispatchEvent(arrowLeftEvent);
|
|
104
|
-
await elementUpdated(el);
|
|
105
|
-
expect(document.activeElement === tag4).to.be.true;
|
|
106
|
-
el.dispatchEvent(arrowUpEvent);
|
|
107
|
-
await elementUpdated(el);
|
|
108
|
-
expect(document.activeElement === tag3).to.be.true;
|
|
109
|
-
el.dispatchEvent(homeEvent);
|
|
110
|
-
await elementUpdated(el);
|
|
111
|
-
expect(document.activeElement === tag1).to.be.true;
|
|
112
|
-
tag1.blur();
|
|
113
|
-
});
|
|
114
|
-
it('will not focus [disabled] children', async () => {
|
|
115
|
-
const el = await fixture(html `
|
|
116
|
-
<sp-tags>
|
|
117
|
-
<sp-tag disabled deletable>Tag 1</sp-tag>
|
|
118
|
-
<sp-tag deletable>Tag 2</sp-tag>
|
|
119
|
-
<sp-tag deletable>Tag 3</sp-tag>
|
|
120
|
-
<sp-tag deletable>Tag 4</sp-tag>
|
|
121
|
-
<sp-tag disabled deletable>Tag 5</sp-tag>
|
|
122
|
-
</sp-tags>
|
|
123
|
-
`);
|
|
124
|
-
await elementUpdated(el);
|
|
125
|
-
const tag2 = el.querySelector('sp-tag:nth-child(2)');
|
|
126
|
-
const tag4 = el.querySelector('sp-tag:nth-child(4)');
|
|
127
|
-
tag2.focus();
|
|
128
|
-
await elementUpdated(el);
|
|
129
|
-
el.dispatchEvent(enterEvent);
|
|
130
|
-
el.dispatchEvent(endEvent);
|
|
131
|
-
await elementUpdated(el);
|
|
132
|
-
expect(document.activeElement === tag4).to.be.true;
|
|
133
|
-
el.dispatchEvent(homeEvent);
|
|
134
|
-
await elementUpdated(el);
|
|
135
|
-
expect(document.activeElement === tag2).to.be.true;
|
|
136
|
-
el.dispatchEvent(arrowUpEvent);
|
|
137
|
-
await elementUpdated(el);
|
|
138
|
-
expect(document.activeElement === tag4).to.be.true;
|
|
139
|
-
el.dispatchEvent(arrowDownEvent);
|
|
140
|
-
await elementUpdated(el);
|
|
141
|
-
expect(document.activeElement === tag2).to.be.true;
|
|
142
|
-
});
|
|
143
|
-
it('will only tab index [deletable] children', async () => {
|
|
144
|
-
const el = await fixture(html `
|
|
145
|
-
<sp-tags>
|
|
146
|
-
<sp-tag deletable>Tag 1</sp-tag>
|
|
147
|
-
<sp-tag>Tag 2</sp-tag>
|
|
148
|
-
<sp-tag>Tag 3</sp-tag>
|
|
149
|
-
<sp-tag>Tag 4</sp-tag>
|
|
150
|
-
<sp-tag deletable>Tag 5</sp-tag>
|
|
151
|
-
</sp-tags>
|
|
152
|
-
`);
|
|
153
|
-
await elementUpdated(el);
|
|
154
|
-
const tag1 = el.querySelector('sp-tag:nth-child(1)');
|
|
155
|
-
const tag5 = el.querySelector('sp-tag:nth-child(5)');
|
|
156
|
-
tag1.focus();
|
|
157
|
-
await elementUpdated(el);
|
|
158
|
-
el.dispatchEvent(enterEvent);
|
|
159
|
-
el.dispatchEvent(endEvent);
|
|
160
|
-
await elementUpdated(el);
|
|
161
|
-
expect(document.activeElement === tag5).to.be.true;
|
|
162
|
-
el.dispatchEvent(homeEvent);
|
|
163
|
-
await elementUpdated(el);
|
|
164
|
-
expect(document.activeElement === tag1).to.be.true;
|
|
165
|
-
el.dispatchEvent(arrowUpEvent);
|
|
166
|
-
await elementUpdated(el);
|
|
167
|
-
expect(document.activeElement === tag5).to.be.true;
|
|
168
|
-
el.dispatchEvent(arrowUpEvent);
|
|
169
|
-
await elementUpdated(el);
|
|
170
|
-
expect(document.activeElement === tag1).to.be.true;
|
|
171
|
-
});
|
|
172
|
-
it('utilises floating tab index for [deletable] children', async () => {
|
|
173
|
-
const el = await fixture(html `
|
|
174
|
-
<div>
|
|
175
|
-
<a href="#">Heyo</a>
|
|
176
|
-
<sp-tags>
|
|
177
|
-
<sp-tag deletable>Tag 1</sp-tag>
|
|
178
|
-
<sp-tag deletable>Tag 2</sp-tag>
|
|
179
|
-
</sp-tags>
|
|
180
|
-
<sp-tags>
|
|
181
|
-
<sp-tag deletable>Tag A</sp-tag>
|
|
182
|
-
<sp-tag deletable>Tag B</sp-tag>
|
|
183
|
-
</sp-tags>
|
|
184
|
-
</div>
|
|
185
|
-
`);
|
|
186
|
-
const anchor = el.querySelector('a');
|
|
187
|
-
anchor.focus();
|
|
188
|
-
const tagset1 = el.querySelector('sp-tags:nth-child(2)');
|
|
189
|
-
const tagset2 = el.querySelector('sp-tags:nth-child(3)');
|
|
190
|
-
const tag1 = tagset1.querySelector('sp-tag:nth-child(1)');
|
|
191
|
-
const tagA = tagset2.querySelector('sp-tag:nth-child(1)');
|
|
192
|
-
const tagB = tagset2.querySelector('sp-tag:nth-child(2)');
|
|
193
|
-
await executeServerCommand('send-keys', {
|
|
194
|
-
press: 'Tab',
|
|
195
|
-
});
|
|
196
|
-
expect(document.activeElement === tag1).to.be.true;
|
|
197
|
-
await executeServerCommand('send-keys', {
|
|
198
|
-
press: 'Tab',
|
|
199
|
-
});
|
|
200
|
-
expect(document.activeElement === tagA).to.be.true;
|
|
201
|
-
tagset2.dispatchEvent(arrowDownEvent);
|
|
202
|
-
expect(document.activeElement === tagB).to.be.true;
|
|
203
|
-
});
|
|
204
|
-
it('loads accepts "PageUp" and "PageDown" keys', async () => {
|
|
205
|
-
const el = await fixture(html `
|
|
206
|
-
<div>
|
|
207
|
-
<sp-tags>
|
|
208
|
-
<sp-tag deletable>Tag 1</sp-tag>
|
|
209
|
-
</sp-tags>
|
|
210
|
-
<sp-tags>
|
|
211
|
-
<sp-tag deletable>Tag 2</sp-tag>
|
|
212
|
-
</sp-tags>
|
|
213
|
-
<sp-tags></sp-tags>
|
|
214
|
-
<sp-tags>
|
|
215
|
-
<sp-tag disabled deletable>Tag 3</sp-tag>
|
|
216
|
-
<sp-tag deletable>Tag 4</sp-tag>
|
|
217
|
-
</sp-tags>
|
|
218
|
-
</div>
|
|
219
|
-
`);
|
|
220
|
-
const tags1 = el.querySelector('sp-tags:nth-child(1)');
|
|
221
|
-
const tags2 = el.querySelector('sp-tags:nth-child(2)');
|
|
222
|
-
const tags4 = el.querySelector('sp-tags:nth-child(4)');
|
|
223
|
-
const tag1 = tags1.querySelector('sp-tag');
|
|
224
|
-
const tag2 = tags2.querySelector('sp-tag');
|
|
225
|
-
const tag4 = tags4.querySelector('sp-tag:not([disabled])');
|
|
226
|
-
tag1.focus();
|
|
227
|
-
tag1.dispatchEvent(pageUpEvent);
|
|
228
|
-
expect(document.activeElement === tag4).to.be.true;
|
|
229
|
-
tag4.dispatchEvent(pageDownEvent);
|
|
230
|
-
expect(document.activeElement === tag1).to.be.true;
|
|
231
|
-
tag1.dispatchEvent(pageDownEvent);
|
|
232
|
-
expect(document.activeElement === tag2).to.be.true;
|
|
233
|
-
tag2.dispatchEvent(pageDownEvent);
|
|
234
|
-
expect(document.activeElement === tag4, 'Focuses `tag4`').to.be.true;
|
|
235
|
-
});
|
|
236
|
-
});
|
|
237
|
-
//# sourceMappingURL=tags.test.js.map
|
package/test/tags.test.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tags.test.js","sourceRoot":"","sources":["tags.test.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit/static-html.js';\n\nimport '../sp-tag.js';\nimport '../sp-tags.js';\nimport { Tag, Tags } from '..';\nimport {\n arrowDownEvent,\n arrowLeftEvent,\n arrowRightEvent,\n arrowUpEvent,\n endEvent,\n enterEvent,\n homeEvent,\n pageDownEvent,\n pageUpEvent,\n} from '../../../test/testing-helpers.js';\nimport { executeServerCommand } from '@web/test-runner-commands';\n\ndescribe('Tags', () => {\n it('loads default tags accessibly', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.hasAttribute('role')).to.be.true;\n expect(el.hasAttribute('aria-label')).to.be.true;\n });\n it('does not accept focus when empty', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags></sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n });\n it('does not accept focus when no tag has `deletable`', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n );\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag3 = el.querySelector('sp-tag:nth-child(3)') as Tag;\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n expect(document.activeElement === tag1).to.be.false;\n expect(document.activeElement === tag2).to.be.false;\n expect(document.activeElement === tag3).to.be.false;\n });\n it('loads default tags with `role` and `aria-label` from the outside', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.hasAttribute('role')).to.be.true;\n expect(el.hasAttribute('aria-label')).to.be.true;\n });\n it('accepts keyboard events while focused', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n <sp-tag deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n <sp-tag deletable>Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag3 = el.querySelector('sp-tag:nth-child(3)') as Tag;\n const tag4 = el.querySelector('sp-tag:nth-child(4)') as Tag;\n const tag5 = el.querySelector('sp-tag:nth-child(5)') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(pageUpEvent);\n el.dispatchEvent(arrowRightEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n\n el.dispatchEvent(arrowDownEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag3).to.be.true;\n\n el.dispatchEvent(endEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(arrowLeftEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(arrowUpEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag3).to.be.true;\n\n el.dispatchEvent(homeEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n\n tag1.blur();\n });\n it('will not focus [disabled] children', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag disabled deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n <sp-tag deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n <sp-tag disabled deletable>Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag4 = el.querySelector('sp-tag:nth-child(4)') as Tag;\n\n tag2.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(enterEvent);\n el.dispatchEvent(endEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(homeEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n\n el.dispatchEvent(arrowUpEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(arrowDownEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n });\n it('will only tab index [deletable] children', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag>Tag 2</sp-tag>\n <sp-tag>Tag 3</sp-tag>\n <sp-tag>Tag 4</sp-tag>\n <sp-tag deletable>Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag5 = el.querySelector('sp-tag:nth-child(5)') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(enterEvent);\n el.dispatchEvent(endEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(homeEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n\n el.dispatchEvent(arrowUpEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(arrowUpEvent);\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n });\n it('utilises floating tab index for [deletable] children', async () => {\n const el = await fixture<Tags>(\n html`\n <div>\n <a href=\"#\">Heyo</a>\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n </sp-tags>\n <sp-tags>\n <sp-tag deletable>Tag A</sp-tag>\n <sp-tag deletable>Tag B</sp-tag>\n </sp-tags>\n </div>\n `\n );\n const anchor = el.querySelector('a') as HTMLElement;\n\n anchor.focus();\n\n const tagset1 = el.querySelector('sp-tags:nth-child(2)') as Tags;\n const tagset2 = el.querySelector('sp-tags:nth-child(3)') as Tags;\n\n const tag1 = tagset1.querySelector('sp-tag:nth-child(1)') as Tag;\n const tagA = tagset2.querySelector('sp-tag:nth-child(1)') as Tag;\n const tagB = tagset2.querySelector('sp-tag:nth-child(2)') as Tag;\n\n await executeServerCommand('send-keys', {\n press: 'Tab',\n });\n expect(document.activeElement === tag1).to.be.true;\n\n await executeServerCommand('send-keys', {\n press: 'Tab',\n });\n expect(document.activeElement === tagA).to.be.true;\n\n tagset2.dispatchEvent(arrowDownEvent);\n expect(document.activeElement === tagB).to.be.true;\n });\n it('loads accepts \"PageUp\" and \"PageDown\" keys', async () => {\n const el = await fixture<HTMLDivElement>(\n html`\n <div>\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n </sp-tags>\n <sp-tags>\n <sp-tag deletable>Tag 2</sp-tag>\n </sp-tags>\n <sp-tags></sp-tags>\n <sp-tags>\n <sp-tag disabled deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n </sp-tags>\n </div>\n `\n );\n\n const tags1 = el.querySelector('sp-tags:nth-child(1)') as Tags;\n const tags2 = el.querySelector('sp-tags:nth-child(2)') as Tags;\n const tags4 = el.querySelector('sp-tags:nth-child(4)') as Tags;\n\n const tag1 = tags1.querySelector('sp-tag') as Tag;\n const tag2 = tags2.querySelector('sp-tag') as Tag;\n const tag4 = tags4.querySelector('sp-tag:not([disabled])') as Tag;\n\n tag1.focus();\n tag1.dispatchEvent(pageUpEvent);\n\n expect(document.activeElement === tag4).to.be.true;\n\n tag4.dispatchEvent(pageDownEvent);\n\n expect(document.activeElement === tag1).to.be.true;\n\n tag1.dispatchEvent(pageDownEvent);\n\n expect(document.activeElement === tag2).to.be.true;\n\n tag2.dispatchEvent(pageDownEvent);\n\n expect(document.activeElement === tag4, 'Focuses `tag4`').to.be.true;\n });\n});\n"]}
|