@spectrum-web-components/tags 0.8.4 → 0.8.6

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.
Files changed (33) hide show
  1. package/custom-elements.json +2 -2
  2. package/package.json +8 -8
  3. package/sp-tag.d.ts +0 -6
  4. package/sp-tag.js +0 -14
  5. package/sp-tag.js.map +0 -1
  6. package/sp-tags.d.ts +0 -6
  7. package/sp-tags.js +0 -14
  8. package/sp-tags.js.map +0 -1
  9. package/src/Tag.d.ts +0 -30
  10. package/src/Tag.js +0 -135
  11. package/src/Tag.js.map +0 -1
  12. package/src/Tags.d.ts +0 -24
  13. package/src/Tags.js +0 -97
  14. package/src/Tags.js.map +0 -1
  15. package/src/index.d.ts +0 -2
  16. package/src/index.js +0 -14
  17. package/src/index.js.map +0 -1
  18. package/src/spectrum-tag.css.d.ts +0 -2
  19. package/src/spectrum-tag.css.js +0 -263
  20. package/src/spectrum-tag.css.js.map +0 -1
  21. package/src/spectrum-tags.css.d.ts +0 -2
  22. package/src/spectrum-tags.css.js +0 -29
  23. package/src/spectrum-tags.css.js.map +0 -1
  24. package/src/tag.css.d.ts +0 -2
  25. package/src/tag.css.js +0 -305
  26. package/src/tag.css.js.map +0 -1
  27. package/src/tags.css.d.ts +0 -2
  28. package/src/tags.css.js +0 -23
  29. package/src/tags.css.js.map +0 -1
  30. package/stories/tags-sizes.stories.js +0 -41
  31. package/stories/tags-sizes.stories.js.map +0 -1
  32. package/stories/tags.stories.js +0 -148
  33. package/stories/tags.stories.js.map +0 -1
package/custom-elements.json CHANGED
@@ -316,7 +316,7 @@
316
316
  {
317
317
  "kind": "variable",
318
318
  "name": "styles",
319
- "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(var(--spectrum-tag-texticon-padding-right)*-1)}:host([dir=rtl]) .clear-button{margin-left:calc(var(--spectrum-tag-texticon-padding-right)*-1)}.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`"
319
+ "default": "css`\n:host([size=s]){--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-s-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-s-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-s-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-alias-tag-height-s)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-alias-tag-padding-right-s)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-s-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-s-textonly-padding-right,var(--spectrum-alias-tag-padding-right-s)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-75\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-m-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-m-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-m-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-alias-tag-height-m)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-alias-tag-padding-right-m)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-m-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-m-textonly-padding-right,var(--spectrum-alias-tag-padding-right-m)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-100\n)}:host([size=l]){--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-l-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-l-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-l-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-alias-tag-height-l)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-alias-tag-padding-right-l)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-l-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-l-textonly-padding-right,var(--spectrum-alias-tag-padding-right-l)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-200\n)}:host([dir=ltr]){padding-left:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=rtl]){padding-right:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=ltr]){padding-right:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=rtl]){padding-left:var(\n--spectrum-tag-textonly-padding-right\n)}:host{align-items:center;border-radius:var(--spectrum-tag-texticon-border-radius);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;max-width:100%;min-height:calc(var(--spectrum-tag-texticon-height) + var(--spectrum-tag-texticon-border-size) + var(--spectrum-tag-texticon-border-size));outline:none;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]){padding-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){padding-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-padding-left) - var(--spectrum-tag-textonly-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-textonly-padding-left))}:host([dir=ltr]) .clear-button{margin-right:calc(var(--spectrum-tag-texticon-padding-right)*-1)}:host([dir=rtl]) .clear-button{margin-left:calc(var(--spectrum-tag-texticon-padding-right)*-1)}.clear-button{padding-bottom:0;padding-top:0}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-font-size);font-weight:var(--spectrum-tag-removable-texticon-text-font-weight);height:100%;line-height:var(--spectrum-tag-texticon-text-line-height);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-focusring-border-size) var(\n--spectrum-tag-m-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focusring-border-size) var(\n--spectrum-tag-m-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-alias-tag-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-tag-border-color-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-tag-text-color-default)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-tag-icon-color-default)\n)}.clear-button .spectrum-ClearButton-fill{background:transparent}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-alias-tag-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-tag-border-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-tag-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-alias-tag-background-color-key-focus)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focusring-border-width,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-alias-tag-background-color-key-focus)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focusring-border-width,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(.focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host(:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-alias-tag-background-color-selected-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-alias-tag-background-color-selected-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-alias-tag-background-color-selected-hover)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\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-focusring-border-color-selected-key-focus,var(--spectrum-alias-tag-focusring-border-color-selected-key-focus)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\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-focusring-border-color-selected-key-focus,var(--spectrum-alias-tag-focusring-border-color-selected-key-focus)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected].focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-alias-tag-background-color-error-selected-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\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-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\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-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-alias-tag-background-color-error-selected-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-alias-tag-border-color-error-selected)\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-tag-icon-color-selected)\n)}:host([selected][invalid]:hover) .clear-button .spectrum-ClearButton-fill,:host([selected][invalid]:hover) .spectrum-Tag-icon .spectrum-ClearButton-fill,:host([selected][invalid]:hover) .spectrum-Tag-label .spectrum-ClearButton-fill{background:transparent}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-alias-tag-border-color-error-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-alias-tag-border-color-error-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\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-global-color-red-700)\n)}:host([invalid]:hover) .clear-button .spectrum-ClearButton-fill,:host([invalid]:hover) .spectrum-Tag-icon .spectrum-ClearButton-fill{background:transparent}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-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-tag-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-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-tag-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-key-focus,var(--spectrum-global-color-red-700)\n)}:host([invalid]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-key-focus,var(--spectrum-global-color-red-700)\n)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]) .clear-button .spectrum-ClearButton-fill,:host([invalid]) .spectrum-Tag-icon .spectrum-ClearButton-fill{background:transparent}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-tag-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-tag-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-tag-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-tag-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-tag-icon-color-disabled)\n)}:host([disabled]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-tag-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-tag-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-tag-icon-color-down)\n)}:host([deletable]:active) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-alias-tag-border-color-error-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-alias-tag-text-color-error-hover)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([deletable][invalid]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-alias-tag-border-color-error-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-alias-tag-text-color-error-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([deletable][invalid]:active) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-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-tag-icon-color-hover)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable].focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n)}:host([deletable][selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([deletable][selected]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([deletable][selected]) .clear-button:hover .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-alias-tag-text-color-error-key-focus)\n)}\n`"
320
320
  }
321
321
  ],
322
322
  "exports": [
@@ -358,7 +358,7 @@
358
358
  {
359
359
  "kind": "variable",
360
360
  "name": "styles",
361
- "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(var(--spectrum-tag-texticon-padding-right)*-1)}:host([dir=rtl]) .clear-button{margin-left:calc(var(--spectrum-tag-texticon-padding-right)*-1)}.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`"
361
+ "default": "css`\n:host([size=s]){--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-s-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-s-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-s-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-alias-tag-height-s)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-alias-tag-padding-right-s)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-s-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-s-textonly-padding-right,var(--spectrum-alias-tag-padding-right-s)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-75\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-m-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-m-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-m-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-alias-tag-height-m)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-alias-tag-padding-right-m)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-m-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-m-textonly-padding-right,var(--spectrum-alias-tag-padding-right-m)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-100\n)}:host([size=l]){--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-l-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-l-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-l-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-alias-tag-height-l)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-alias-tag-padding-right-l)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-l-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-l-textonly-padding-right,var(--spectrum-alias-tag-padding-right-l)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-200\n)}:host([dir=ltr]){padding-left:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=rtl]){padding-right:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=ltr]){padding-right:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=rtl]){padding-left:var(\n--spectrum-tag-textonly-padding-right\n)}:host{align-items:center;border-radius:var(--spectrum-tag-texticon-border-radius);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;max-width:100%;min-height:calc(var(--spectrum-tag-texticon-height) + var(--spectrum-tag-texticon-border-size) + var(--spectrum-tag-texticon-border-size));outline:none;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]){padding-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){padding-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-padding-left) - var(--spectrum-tag-textonly-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-textonly-padding-left))}:host([dir=ltr]) .clear-button{margin-right:calc(var(--spectrum-tag-texticon-padding-right)*-1)}:host([dir=rtl]) .clear-button{margin-left:calc(var(--spectrum-tag-texticon-padding-right)*-1)}.clear-button{padding-bottom:0;padding-top:0}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-font-size);font-weight:var(--spectrum-tag-removable-texticon-text-font-weight);height:100%;line-height:var(--spectrum-tag-texticon-text-line-height);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-focusring-border-size) var(\n--spectrum-tag-m-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focusring-border-size) var(\n--spectrum-tag-m-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-alias-tag-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-tag-border-color-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-tag-text-color-default)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-tag-icon-color-default)\n)}.clear-button .spectrum-ClearButton-fill{background:transparent}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-alias-tag-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-tag-border-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-tag-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-alias-tag-background-color-key-focus)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focusring-border-width,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-alias-tag-background-color-key-focus)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focusring-border-width,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(.focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host(:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-alias-tag-background-color-selected-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-alias-tag-background-color-selected-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-alias-tag-background-color-selected-hover)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\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-focusring-border-color-selected-key-focus,var(--spectrum-alias-tag-focusring-border-color-selected-key-focus)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\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-focusring-border-color-selected-key-focus,var(--spectrum-alias-tag-focusring-border-color-selected-key-focus)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected].focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-alias-tag-background-color-error-selected-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\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-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\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-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-alias-tag-background-color-error-selected-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-alias-tag-border-color-error-selected)\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-tag-icon-color-selected)\n)}:host([selected][invalid]:hover) .clear-button .spectrum-ClearButton-fill,:host([selected][invalid]:hover) .spectrum-Tag-icon .spectrum-ClearButton-fill,:host([selected][invalid]:hover) .spectrum-Tag-label .spectrum-ClearButton-fill{background:transparent}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-alias-tag-border-color-error-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-alias-tag-border-color-error-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\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-global-color-red-700)\n)}:host([invalid]:hover) .clear-button .spectrum-ClearButton-fill,:host([invalid]:hover) .spectrum-Tag-icon .spectrum-ClearButton-fill{background:transparent}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-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-tag-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-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-tag-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-key-focus,var(--spectrum-global-color-red-700)\n)}:host([invalid]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-key-focus,var(--spectrum-global-color-red-700)\n)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]) .clear-button .spectrum-ClearButton-fill,:host([invalid]) .spectrum-Tag-icon .spectrum-ClearButton-fill{background:transparent}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-tag-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-tag-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-tag-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-tag-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-tag-icon-color-disabled)\n)}:host([disabled]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-tag-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-tag-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-tag-icon-color-down)\n)}:host([deletable]:active) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-alias-tag-border-color-error-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-alias-tag-text-color-error-hover)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([deletable][invalid]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-alias-tag-border-color-error-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-alias-tag-text-color-error-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([deletable][invalid]:active) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-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-tag-icon-color-hover)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable].focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n)}:host([deletable][selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([deletable][selected]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([deletable][selected]) .clear-button:hover .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-alias-tag-text-color-error-key-focus)\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`"
362
362
  }
363
363
  ],
364
364
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/tags",
3
- "version": "0.8.4",
3
+ "version": "0.8.6",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -46,20 +46,20 @@
46
46
  "lit-html"
47
47
  ],
48
48
  "dependencies": {
49
- "@spectrum-web-components/base": "^0.5.1",
50
- "@spectrum-web-components/button": "^0.16.3",
51
- "@spectrum-web-components/reactive-controllers": "^0.2.0",
52
- "@spectrum-web-components/shared": "^0.13.3",
49
+ "@spectrum-web-components/base": "^0.5.3",
50
+ "@spectrum-web-components/button": "^0.17.0",
51
+ "@spectrum-web-components/reactive-controllers": "^0.2.1",
52
+ "@spectrum-web-components/shared": "^0.13.5",
53
53
  "tslib": "^2.0.0"
54
54
  },
55
55
  "devDependencies": {
56
- "@spectrum-css/tag": "^3.3.0",
57
- "@spectrum-css/taggroup": "^3.3.0"
56
+ "@spectrum-css/tag": "^3.3.3",
57
+ "@spectrum-css/taggroup": "^3.3.3"
58
58
  },
59
59
  "types": "./src/index.d.ts",
60
60
  "customElements": "custom-elements.json",
61
61
  "sideEffects": [
62
62
  "./sp-*.js"
63
63
  ],
64
- "gitHead": "f23b15ec952d7450272a8275524c905e028b4ddc"
64
+ "gitHead": "57aba8030b6af96af4015a0aa830e342a17dc219"
65
65
  }
package/sp-tag.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import { Tag } from './src/Tag.js';
2
- declare global {
3
- interface HTMLElementTagNameMap {
4
- 'sp-tag': Tag;
5
- }
6
- }
package/sp-tag.js DELETED
@@ -1,14 +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 { Tag } from './src/Tag.js';
13
- customElements.define('sp-tag', Tag);
14
- //# sourceMappingURL=sp-tag.js.map
package/sp-tag.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"sp-tag.js","sourceRoot":"","sources":["sp-tag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,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*/\nimport { Tag } from './src/Tag.js';\n\ncustomElements.define('sp-tag', Tag);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tag': Tag;\n }\n}\n"]}
package/sp-tags.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import { Tags } from './src/Tags.js';
2
- declare global {
3
- interface HTMLElementTagNameMap {
4
- 'sp-tags': Tags;
5
- }
6
- }
package/sp-tags.js DELETED
@@ -1,14 +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 { Tags } from './src/Tags.js';
13
- customElements.define('sp-tags', Tags);
14
- //# sourceMappingURL=sp-tags.js.map
package/sp-tags.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"sp-tags.js","sourceRoot":"","sources":["sp-tags.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,IAAI,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*/\nimport { Tags } from './src/Tags.js';\n\ncustomElements.define('sp-tags', Tags);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tags': Tags;\n }\n}\n"]}
package/src/Tag.d.ts DELETED
@@ -1,30 +0,0 @@
1
- import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
2
- import '@spectrum-web-components/button/sp-clear-button.js';
3
- declare const Tag_base: typeof SpectrumElement & {
4
- new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
5
- prototype: import("@spectrum-web-components/base").SizedElementInterface;
6
- };
7
- /**
8
- * @element sp-tag
9
- *
10
- * @slot - text content for labeling the tag
11
- * @slot avatar - an avatar element to display within the Tag
12
- * @slot icon - an icon element to display within the Tag
13
- */
14
- export declare class Tag extends Tag_base {
15
- static get styles(): CSSResultArray;
16
- deletable: boolean;
17
- disabled: boolean;
18
- readonly: boolean;
19
- private get hasIcon();
20
- private get hasAvatar();
21
- constructor();
22
- private handleFocusin;
23
- private handleFocusout;
24
- private handleKeydown;
25
- private delete;
26
- protected render(): TemplateResult;
27
- protected firstUpdated(changes: PropertyValues): void;
28
- protected updated(changes: PropertyValues): void;
29
- }
30
- export {};
package/src/Tag.js DELETED
@@ -1,135 +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 { __decorate } from "tslib";
13
- import { html, SizedMixin, SpectrumElement, } from '@spectrum-web-components/base';
14
- import { property } from '@spectrum-web-components/base/src/decorators.js';
15
- import '@spectrum-web-components/button/sp-clear-button.js';
16
- import styles from './tag.css.js';
17
- /**
18
- * @element sp-tag
19
- *
20
- * @slot - text content for labeling the tag
21
- * @slot avatar - an avatar element to display within the Tag
22
- * @slot icon - an icon element to display within the Tag
23
- */
24
- export class Tag extends SizedMixin(SpectrumElement, {
25
- validSizes: ['s', 'm', 'l'],
26
- }) {
27
- constructor() {
28
- super();
29
- this.deletable = false;
30
- this.disabled = false;
31
- this.readonly = false;
32
- this.handleFocusin = () => {
33
- this.addEventListener('focusout', this.handleFocusout);
34
- this.addEventListener('keydown', this.handleKeydown);
35
- };
36
- this.handleFocusout = () => {
37
- this.removeEventListener('keydown', this.handleKeydown);
38
- this.removeEventListener('focusout', this.handleFocusout);
39
- };
40
- this.handleKeydown = (event) => {
41
- if (!this.deletable) {
42
- return;
43
- }
44
- const { code } = event;
45
- switch (code) {
46
- case 'Backspace':
47
- case 'Space':
48
- case 'Delete':
49
- this.delete();
50
- return;
51
- default:
52
- return;
53
- }
54
- };
55
- this.addEventListener('focusin', this.handleFocusin);
56
- }
57
- static get styles() {
58
- return [styles];
59
- }
60
- get hasIcon() {
61
- return !!this.querySelector('[slot="icon"]');
62
- }
63
- get hasAvatar() {
64
- return !!this.querySelector('[slot="avatar"]');
65
- }
66
- delete() {
67
- if (this.readonly) {
68
- return;
69
- }
70
- this.dispatchEvent(new Event('delete', {
71
- bubbles: true,
72
- }));
73
- }
74
- render() {
75
- const slots = [];
76
- if (this.hasAvatar) {
77
- slots.push(html `
78
- <slot name="avatar"></slot>
79
- `);
80
- }
81
- if (this.hasIcon) {
82
- slots.push(html `
83
- <slot name="icon"></slot>
84
- `);
85
- }
86
- return html `
87
- ${slots}
88
- <span class="label"><slot></slot></span>
89
- ${this.deletable
90
- ? html `
91
- <sp-clear-button
92
- class="clear-button"
93
- ?disabled=${this.disabled}
94
- label="Remove"
95
- size="s"
96
- tabindex="-1"
97
- @click=${this.delete}
98
- ></sp-clear-button>
99
- `
100
- : html ``}
101
- `;
102
- }
103
- firstUpdated(changes) {
104
- super.firstUpdated(changes);
105
- if (!this.hasAttribute('role')) {
106
- this.setAttribute('role', 'listitem');
107
- }
108
- if (this.deletable) {
109
- this.setAttribute('tabindex', !this.disabled && this.matches(':first-of-type:not([disabled])')
110
- ? '0'
111
- : '-1');
112
- }
113
- }
114
- updated(changes) {
115
- super.updated(changes);
116
- if (changes.has('disabled')) {
117
- if (this.disabled) {
118
- this.setAttribute('aria-disabled', 'true');
119
- }
120
- else {
121
- this.removeAttribute('aria-disabled');
122
- }
123
- }
124
- }
125
- }
126
- __decorate([
127
- property({ type: Boolean, reflect: true })
128
- ], Tag.prototype, "deletable", void 0);
129
- __decorate([
130
- property({ type: Boolean, reflect: true })
131
- ], Tag.prototype, "disabled", void 0);
132
- __decorate([
133
- property({ type: Boolean, reflect: true })
134
- ], Tag.prototype, "readonly", void 0);
135
- //# sourceMappingURL=Tag.js.map
package/src/Tag.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tag.js","sourceRoot":"","sources":["Tag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EAEJ,UAAU,EACV,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAE3E,OAAO,oDAAoD,CAAC;AAE5D,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC;;;;;;GAMG;AACH,MAAM,OAAO,GAAI,SAAQ,UAAU,CAAC,eAAe,EAAE;IACjD,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;CAC9B,CAAC;IAsBE;QACI,KAAK,EAAE,CAAC;QAjBL,cAAS,GAAG,KAAK,CAAC;QAGlB,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAehB,kBAAa,GAAG,GAAS,EAAE;YAC/B,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YACvD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAS,EAAE;YAChC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YACxD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC9D,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACnD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACjB,OAAO;aACV;YACD,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;YACvB,QAAQ,IAAI,EAAE;gBACV,KAAK,WAAW,CAAC;gBACjB,KAAK,OAAO,CAAC;gBACb,KAAK,QAAQ;oBACT,IAAI,CAAC,MAAM,EAAE,CAAC;oBACd,OAAO;gBACX;oBACI,OAAO;aACd;QACL,CAAC,CAAC;QA3BE,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,CAAC;IAxBM,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAWD,IAAY,OAAO;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACjD,CAAC;IAED,IAAY,SAAS;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACnD,CAAC;IAiCO,MAAM;QACV,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;QACD,IAAI,CAAC,aAAa,CACd,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,OAAO,EAAE,IAAI;SAChB,CAAC,CACL,CAAC;IACN,CAAC;IAES,MAAM;QACZ,MAAM,KAAK,GAAqB,EAAE,CAAC;QACnC,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,KAAK,CAAC,IAAI,CACN,IAAI,CAAA;;iBAEH,CACJ,CAAC;SACL;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,KAAK,CAAC,IAAI,CACN,IAAI,CAAA;;iBAEH,CACJ,CAAC;SACL;QACD,OAAO,IAAI,CAAA;cACL,KAAK;;cAEL,IAAI,CAAC,SAAS;YACZ,CAAC,CAAC,IAAI,CAAA;;;sCAGgB,IAAI,CAAC,QAAQ;;;;mCAIhB,IAAI,CAAC,MAAM;;mBAE3B;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;SACf,CAAC;IACN,CAAC;IAES,YAAY,CAAC,OAAuB;QAC1C,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;YAC5B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;SACzC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,YAAY,CACb,UAAU,EACV,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,gCAAgC,CAAC;gBAC5D,CAAC,CAAC,GAAG;gBACL,CAAC,CAAC,IAAI,CACb,CAAC;SACL;IACL,CAAC;IAES,OAAO,CAAC,OAAuB;QACrC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACf,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;aAC9C;iBAAM;gBACH,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;aACzC;SACJ;IACL,CAAC;CACJ;AArHG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAClB;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACnB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACnB","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/Tags.d.ts DELETED
@@ -1,24 +0,0 @@
1
- import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
2
- import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
3
- import { Tag } from './Tag.js';
4
- declare const Tags_base: typeof SpectrumElement;
5
- /**
6
- * @element sp-tags
7
- *
8
- * @slot - Tag elements to manage as a group
9
- */
10
- export declare class Tags extends Tags_base {
11
- static get styles(): CSSResultArray;
12
- defaultNodes: Node[];
13
- get tags(): Tag[];
14
- rovingTabindexController: RovingTabindexController<Tag>;
15
- constructor();
16
- focus(): void;
17
- private handleFocusin;
18
- private handleKeydown;
19
- private handleFocusout;
20
- private handleSlotchange;
21
- protected render(): TemplateResult;
22
- protected firstUpdated(): void;
23
- }
24
- export {};
package/src/Tags.js DELETED
@@ -1,97 +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 { __decorate } from "tslib";
13
- import { html, SpectrumElement, } from '@spectrum-web-components/base';
14
- import { queryAssignedNodes } from '@spectrum-web-components/base/src/decorators.js';
15
- import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
16
- import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
17
- import { Tag } from './Tag.js';
18
- import styles from './tags.css.js';
19
- /**
20
- * @element sp-tags
21
- *
22
- * @slot - Tag elements to manage as a group
23
- */
24
- export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
25
- constructor() {
26
- super();
27
- this.rovingTabindexController = new RovingTabindexController(this, {
28
- focusInIndex: (elements) => {
29
- return elements.findIndex((el) => {
30
- return !el.disabled && el.deletable;
31
- });
32
- },
33
- elements: () => this.tags,
34
- isFocusableElement: (el) => !el.disabled && el.deletable,
35
- });
36
- this.handleFocusin = () => {
37
- this.addEventListener('focusout', this.handleFocusout);
38
- this.addEventListener('keydown', this.handleKeydown);
39
- };
40
- this.handleKeydown = (event) => {
41
- const { code } = event;
42
- if (code !== 'PageUp' && code !== 'PageDown')
43
- return;
44
- const circularIndexedElement = (list, index) => list[(list.length + index) % list.length];
45
- const tagsSiblings = [
46
- ...this.getRootNode().querySelectorAll('sp-tags'),
47
- ];
48
- if (tagsSiblings.length < 2) {
49
- return;
50
- }
51
- event.preventDefault();
52
- const currentIndex = tagsSiblings.indexOf(this);
53
- const offset = code === 'PageUp' ? -1 : 1;
54
- let nextTagsIndex = currentIndex + offset;
55
- let nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);
56
- while (!nextTags.tags.length) {
57
- nextTagsIndex += offset;
58
- nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);
59
- }
60
- nextTags.focus();
61
- };
62
- this.handleFocusout = () => {
63
- this.removeEventListener('keydown', this.handleKeydown);
64
- this.removeEventListener('focusout', this.handleFocusout);
65
- };
66
- this.addEventListener('focusin', this.handleFocusin);
67
- }
68
- static get styles() {
69
- return [styles];
70
- }
71
- get tags() {
72
- return this.defaultNodes.filter((node) => node instanceof Tag);
73
- }
74
- focus() {
75
- this.rovingTabindexController.focus();
76
- }
77
- handleSlotchange() {
78
- this.rovingTabindexController.clearElementCache();
79
- }
80
- render() {
81
- return html `
82
- <slot @slotchange=${this.handleSlotchange}></slot>
83
- `;
84
- }
85
- firstUpdated() {
86
- if (!this.hasAttribute('role')) {
87
- this.setAttribute('role', 'list');
88
- }
89
- if (!this.hasAttribute('aria-label')) {
90
- this.setAttribute('aria-label', 'Tags');
91
- }
92
- }
93
- }
94
- __decorate([
95
- queryAssignedNodes('')
96
- ], Tags.prototype, "defaultNodes", void 0);
97
- //# sourceMappingURL=Tags.js.map