@spectrum-web-components/tags 0.8.2 → 0.8.4

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 (11) hide show
  1. package/custom-elements.json +17 -2
  2. package/package.json +7 -6
  3. package/src/Tags.d.ts +3 -0
  4. package/src/Tags.js +30 -79
  5. package/src/Tags.js.map +1 -1
  6. package/src/spectrum-tag.css.js +1 -1
  7. package/src/spectrum-tag.css.js.map +1 -1
  8. package/src/tag.css.js +1 -1
  9. package/src/tag.css.js.map +1 -1
  10. package/stories/tags.stories.js +5 -4
  11. package/stories/tags.stories.js.map +1 -1
package/custom-elements.json CHANGED
@@ -220,6 +220,11 @@
220
220
  },
221
221
  "privacy": "public"
222
222
  },
223
+ {
224
+ "kind": "field",
225
+ "name": "rovingTabindexController",
226
+ "default": "new RovingTabindexController<Tag>(this, {\n focusInIndex: (elements: Tag[]) => {\n return elements.findIndex((el) => {\n return !el.disabled && el.deletable;\n });\n },\n elements: () => this.tags,\n isFocusableElement: (el: Tag) => !el.disabled && el.deletable,\n })"
227
+ },
223
228
  {
224
229
  "kind": "method",
225
230
  "name": "focus",
@@ -244,6 +249,16 @@
244
249
  "kind": "field",
245
250
  "name": "handleFocusout",
246
251
  "privacy": "private"
252
+ },
253
+ {
254
+ "kind": "method",
255
+ "name": "handleSlotchange",
256
+ "privacy": "private",
257
+ "return": {
258
+ "type": {
259
+ "text": "void"
260
+ }
261
+ }
247
262
  }
248
263
  ],
249
264
  "mixins": [
@@ -301,7 +316,7 @@
301
316
  {
302
317
  "kind": "variable",
303
318
  "name": "styles",
304
- "default": "css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-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-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`"
305
320
  }
306
321
  ],
307
322
  "exports": [
@@ -343,7 +358,7 @@
343
358
  {
344
359
  "kind": "variable",
345
360
  "name": "styles",
346
- "default": "css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-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-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`"
347
362
  }
348
363
  ],
349
364
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/tags",
3
- "version": "0.8.2",
3
+ "version": "0.8.4",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -47,18 +47,19 @@
47
47
  ],
48
48
  "dependencies": {
49
49
  "@spectrum-web-components/base": "^0.5.1",
50
- "@spectrum-web-components/button": "^0.16.2",
51
- "@spectrum-web-components/shared": "^0.13.2",
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",
52
53
  "tslib": "^2.0.0"
53
54
  },
54
55
  "devDependencies": {
55
- "@spectrum-css/tag": "^3.1.4",
56
- "@spectrum-css/taggroup": "^3.1.4"
56
+ "@spectrum-css/tag": "^3.3.0",
57
+ "@spectrum-css/taggroup": "^3.3.0"
57
58
  },
58
59
  "types": "./src/index.d.ts",
59
60
  "customElements": "custom-elements.json",
60
61
  "sideEffects": [
61
62
  "./sp-*.js"
62
63
  ],
63
- "gitHead": "5ad16bd185710525afa48bd76099cb0ebde4c4cb"
64
+ "gitHead": "f23b15ec952d7450272a8275524c905e028b4ddc"
64
65
  }
package/src/Tags.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
2
+ import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
2
3
  import { Tag } from './Tag.js';
3
4
  declare const Tags_base: typeof SpectrumElement;
4
5
  /**
@@ -10,11 +11,13 @@ export declare class Tags extends Tags_base {
10
11
  static get styles(): CSSResultArray;
11
12
  defaultNodes: Node[];
12
13
  get tags(): Tag[];
14
+ rovingTabindexController: RovingTabindexController<Tag>;
13
15
  constructor();
14
16
  focus(): void;
15
17
  private handleFocusin;
16
18
  private handleKeydown;
17
19
  private handleFocusout;
20
+ private handleSlotchange;
18
21
  protected render(): TemplateResult;
19
22
  protected firstUpdated(): void;
20
23
  }
package/src/Tags.js CHANGED
@@ -13,6 +13,7 @@ import { __decorate } from "tslib";
13
13
  import { html, SpectrumElement, } from '@spectrum-web-components/base';
14
14
  import { queryAssignedNodes } from '@spectrum-web-components/base/src/decorators.js';
15
15
  import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
16
+ import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
16
17
  import { Tag } from './Tag.js';
17
18
  import styles from './tags.css.js';
18
19
  /**
@@ -23,89 +24,42 @@ import styles from './tags.css.js';
23
24
  export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
24
25
  constructor() {
25
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
+ });
26
36
  this.handleFocusin = () => {
27
37
  this.addEventListener('focusout', this.handleFocusout);
28
38
  this.addEventListener('keydown', this.handleKeydown);
29
- requestAnimationFrame(() => {
30
- const firstTagWithTabIndex = this.tags.find((tag) => tag.tabIndex === 0);
31
- if (firstTagWithTabIndex) {
32
- firstTagWithTabIndex.tabIndex = -1;
33
- }
34
- });
35
39
  };
36
40
  this.handleKeydown = (event) => {
37
41
  const { code } = event;
38
- const activeElement = this.getRootNode()
39
- .activeElement;
40
- /* c8 ignore next 3 */
41
- if (!activeElement) {
42
+ if (code !== 'PageUp' && code !== 'PageDown')
42
43
  return;
43
- }
44
- let nextIndex = this.tags.indexOf(activeElement);
45
- /* c8 ignore next 3 */
46
- if (nextIndex === -1) {
47
- return;
48
- }
49
44
  const circularIndexedElement = (list, index) => list[(list.length + index) % list.length];
50
- const tagFromDelta = (delta) => {
51
- nextIndex += delta;
52
- let nextTag = circularIndexedElement(this.tags, nextIndex);
53
- while (nextTag.disabled || !nextTag.deletable) {
54
- nextIndex += delta;
55
- nextTag = circularIndexedElement(this.tags, nextIndex);
56
- }
57
- };
58
- switch (code) {
59
- case 'ArrowUp':
60
- tagFromDelta(-1);
61
- break;
62
- case 'ArrowLeft':
63
- tagFromDelta(this.isLTR ? -1 : 1);
64
- break;
65
- case 'ArrowRight':
66
- tagFromDelta(this.isLTR ? 1 : -1);
67
- break;
68
- case 'ArrowDown':
69
- tagFromDelta(1);
70
- break;
71
- case 'End':
72
- nextIndex = this.tags.length;
73
- tagFromDelta(-1);
74
- break;
75
- case 'Home':
76
- nextIndex = -1;
77
- tagFromDelta(1);
78
- break;
79
- case 'PageUp':
80
- case 'PageDown':
81
- const tagsSiblings = [
82
- ...this.getRootNode().querySelectorAll('sp-tags'),
83
- ];
84
- if (tagsSiblings.length < 2) {
85
- return;
86
- }
87
- event.preventDefault();
88
- const currentIndex = tagsSiblings.indexOf(this);
89
- const offset = code === 'PageUp' ? -1 : 1;
90
- let nextTagsIndex = currentIndex + offset;
91
- let nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);
92
- while (!nextTags.tags.length) {
93
- nextTagsIndex += offset;
94
- nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);
95
- }
96
- nextTags.focus();
97
- return;
98
- default:
99
- return;
45
+ const tagsSiblings = [
46
+ ...this.getRootNode().querySelectorAll('sp-tags'),
47
+ ];
48
+ if (tagsSiblings.length < 2) {
49
+ return;
100
50
  }
101
51
  event.preventDefault();
102
- circularIndexedElement(this.tags, nextIndex).focus();
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();
103
61
  };
104
62
  this.handleFocusout = () => {
105
- const firstFocusableTag = this.tags.find((tag) => !tag.disabled && tag.deletable);
106
- if (firstFocusableTag) {
107
- firstFocusableTag.tabIndex = 0;
108
- }
109
63
  this.removeEventListener('keydown', this.handleKeydown);
110
64
  this.removeEventListener('focusout', this.handleFocusout);
111
65
  };
@@ -118,17 +72,14 @@ export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
118
72
  return this.defaultNodes.filter((node) => node instanceof Tag);
119
73
  }
120
74
  focus() {
121
- if (!this.tags.length) {
122
- return;
123
- }
124
- const firstFocusableTag = this.tags.find((tag) => !tag.disabled && tag.deletable);
125
- if (firstFocusableTag) {
126
- firstFocusableTag.focus();
127
- }
75
+ this.rovingTabindexController.focus();
76
+ }
77
+ handleSlotchange() {
78
+ this.rovingTabindexController.clearElementCache();
128
79
  }
129
80
  render() {
130
81
  return html `
131
- <slot></slot>
82
+ <slot @slotchange=${this.handleSlotchange}></slot>
132
83
  `;
133
84
  }
134
85
  firstUpdated() {
package/src/Tags.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tags.js","sourceRoot":"","sources":["Tags.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EACJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AACrF,OAAO,EAAE,yBAAyB,EAAE,MAAM,sDAAsD,CAAC;AAEjG,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,MAAM,MAAM,eAAe,CAAC;AAEnC;;;;GAIG;AACH,MAAM,OAAO,IAAK,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAchE;QACI,KAAK,EAAE,CAAC;QAgBJ,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;YACrD,qBAAqB,CAAC,GAAG,EAAE;gBACvB,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CACvC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,KAAK,CAAC,CAC9B,CAAC;gBACF,IAAI,oBAAoB,EAAE;oBACtB,oBAAoB,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;iBACtC;YACL,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACnD,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;YACvB,MAAM,aAAa,GAAI,IAAI,CAAC,WAAW,EAAe;iBACjD,aAAoB,CAAC;YAC1B,sBAAsB;YACtB,IAAI,CAAC,aAAa,EAAE;gBAChB,OAAO;aACV;YACD,IAAI,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YACjD,sBAAsB;YACtB,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;gBAClB,OAAO;aACV;YACD,MAAM,sBAAsB,GAAG,CAC3B,IAAS,EACT,KAAa,EACZ,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;YAClD,MAAM,YAAY,GAAG,CAAC,KAAa,EAAQ,EAAE;gBACzC,SAAS,IAAI,KAAK,CAAC;gBACnB,IAAI,OAAO,GAAG,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;gBAC3D,OAAO,OAAO,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;oBAC3C,SAAS,IAAI,KAAK,CAAC;oBACnB,OAAO,GAAG,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;iBAC1D;YACL,CAAC,CAAC;YACF,QAAQ,IAAI,EAAE;gBACV,KAAK,SAAS;oBACV,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;oBACjB,MAAM;gBACV,KAAK,WAAW;oBACZ,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAClC,MAAM;gBACV,KAAK,YAAY;oBACb,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAClC,MAAM;gBACV,KAAK,WAAW;oBACZ,YAAY,CAAC,CAAC,CAAC,CAAC;oBAChB,MAAM;gBACV,KAAK,KAAK;oBACN,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;oBAC7B,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;oBACjB,MAAM;gBACV,KAAK,MAAM;oBACP,SAAS,GAAG,CAAC,CAAC,CAAC;oBACf,YAAY,CAAC,CAAC,CAAC,CAAC;oBAChB,MAAM;gBACV,KAAK,QAAQ,CAAC;gBACd,KAAK,UAAU;oBACX,MAAM,YAAY,GAAG;wBACjB,GAAI,IAAI,CAAC,WAAW,EAAe,CAAC,gBAAgB,CAChD,SAAS,CACZ;qBACJ,CAAC;oBACF,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;wBACzB,OAAO;qBACV;oBACD,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;oBAChD,MAAM,MAAM,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAC1C,IAAI,aAAa,GAAG,YAAY,GAAG,MAAM,CAAC;oBAC1C,IAAI,QAAQ,GAAG,sBAAsB,CACjC,YAAY,EACZ,aAAa,CAChB,CAAC;oBACF,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE;wBAC1B,aAAa,IAAI,MAAM,CAAC;wBACxB,QAAQ,GAAG,sBAAsB,CAC7B,YAAY,EACZ,aAAa,CAChB,CAAC;qBACL;oBACD,QAAQ,CAAC,KAAK,EAAE,CAAC;oBACjB,OAAO;gBACX;oBACI,OAAO;aACd;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC;QACzD,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAS,EAAE;YAChC,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CACpC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,SAAS,CAC1C,CAAC;YACF,IAAI,iBAAiB,EAAE;gBACnB,iBAAiB,CAAC,QAAQ,GAAG,CAAC,CAAC;aAClC;YACD,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;QArHE,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,CAAC;IAhBM,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAKD,IAAW,IAAI;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAC3B,CAAC,IAAI,EAAE,EAAE,CAAE,IAAoB,YAAY,GAAG,CACxC,CAAC;IACf,CAAC;IAOM,KAAK;QACR,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACnB,OAAO;SACV;QACD,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CACpC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,SAAS,CAC1C,CAAC;QACF,IAAI,iBAAiB,EAAE;YACnB,iBAAiB,CAAC,KAAK,EAAE,CAAC;SAC7B;IACL,CAAC;IA0GS,MAAM;QACZ,OAAO,IAAI,CAAA;;SAEV,CAAC;IACN,CAAC;IAES,YAAY;QAClB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;YAC5B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;SACrC;QACD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;YAClC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;SAC3C;IACL,CAAC;CACJ;AA/IG;IADC,kBAAkB,CAAC,EAAE,CAAC;0CACM","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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { queryAssignedNodes } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\n\nimport { Tag } from './Tag.js';\n\nimport styles from './tags.css.js';\n\n/**\n * @element sp-tags\n *\n * @slot - Tag elements to manage as a group\n */\nexport class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @queryAssignedNodes('')\n public defaultNodes!: Node[];\n\n public get tags(): Tag[] {\n return this.defaultNodes.filter(\n (node) => (node as HTMLElement) instanceof Tag\n ) as Tag[];\n }\n\n constructor() {\n super();\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n public focus(): void {\n if (!this.tags.length) {\n return;\n }\n const firstFocusableTag = this.tags.find(\n (tag) => !tag.disabled && tag.deletable\n );\n if (firstFocusableTag) {\n firstFocusableTag.focus();\n }\n }\n\n private handleFocusin = (): void => {\n this.addEventListener('focusout', this.handleFocusout);\n this.addEventListener('keydown', this.handleKeydown);\n requestAnimationFrame(() => {\n const firstTagWithTabIndex = this.tags.find(\n (tag) => tag.tabIndex === 0\n );\n if (firstTagWithTabIndex) {\n firstTagWithTabIndex.tabIndex = -1;\n }\n });\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n const activeElement = (this.getRootNode() as Document)\n .activeElement as Tag;\n /* c8 ignore next 3 */\n if (!activeElement) {\n return;\n }\n let nextIndex = this.tags.indexOf(activeElement);\n /* c8 ignore next 3 */\n if (nextIndex === -1) {\n return;\n }\n const circularIndexedElement = <T extends HTMLElement>(\n list: T[],\n index: number\n ): T => list[(list.length + index) % list.length];\n const tagFromDelta = (delta: number): void => {\n nextIndex += delta;\n let nextTag = circularIndexedElement(this.tags, nextIndex);\n while (nextTag.disabled || !nextTag.deletable) {\n nextIndex += delta;\n nextTag = circularIndexedElement(this.tags, nextIndex);\n }\n };\n switch (code) {\n case 'ArrowUp':\n tagFromDelta(-1);\n break;\n case 'ArrowLeft':\n tagFromDelta(this.isLTR ? -1 : 1);\n break;\n case 'ArrowRight':\n tagFromDelta(this.isLTR ? 1 : -1);\n break;\n case 'ArrowDown':\n tagFromDelta(1);\n break;\n case 'End':\n nextIndex = this.tags.length;\n tagFromDelta(-1);\n break;\n case 'Home':\n nextIndex = -1;\n tagFromDelta(1);\n break;\n case 'PageUp':\n case 'PageDown':\n const tagsSiblings = [\n ...(this.getRootNode() as Document).querySelectorAll<Tags>(\n 'sp-tags'\n ),\n ];\n if (tagsSiblings.length < 2) {\n return;\n }\n event.preventDefault();\n const currentIndex = tagsSiblings.indexOf(this);\n const offset = code === 'PageUp' ? -1 : 1;\n let nextTagsIndex = currentIndex + offset;\n let nextTags = circularIndexedElement(\n tagsSiblings,\n nextTagsIndex\n );\n while (!nextTags.tags.length) {\n nextTagsIndex += offset;\n nextTags = circularIndexedElement(\n tagsSiblings,\n nextTagsIndex\n );\n }\n nextTags.focus();\n return;\n default:\n return;\n }\n event.preventDefault();\n circularIndexedElement(this.tags, nextIndex).focus();\n };\n\n private handleFocusout = (): void => {\n const firstFocusableTag = this.tags.find(\n (tag) => !tag.disabled && tag.deletable\n );\n if (firstFocusableTag) {\n firstFocusableTag.tabIndex = 0;\n }\n this.removeEventListener('keydown', this.handleKeydown);\n this.removeEventListener('focusout', this.handleFocusout);\n };\n\n protected render(): TemplateResult {\n return html`\n <slot></slot>\n `;\n }\n\n protected firstUpdated(): void {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'list');\n }\n if (!this.hasAttribute('aria-label')) {\n this.setAttribute('aria-label', 'Tags');\n }\n }\n}\n"]}
1
+ {"version":3,"file":"Tags.js","sourceRoot":"","sources":["Tags.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EACJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AACrF,OAAO,EAAE,yBAAyB,EAAE,MAAM,sDAAsD,CAAC;AACjG,OAAO,EAAE,wBAAwB,EAAE,MAAM,qEAAqE,CAAC;AAE/G,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,MAAM,MAAM,eAAe,CAAC;AAEnC;;;;GAIG;AACH,MAAM,OAAO,IAAK,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAwBhE;QACI,KAAK,EAAE,CAAC;QAXZ,6BAAwB,GAAG,IAAI,wBAAwB,CAAM,IAAI,EAAE;YAC/D,YAAY,EAAE,CAAC,QAAe,EAAE,EAAE;gBAC9B,OAAO,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE;oBAC7B,OAAO,CAAC,EAAE,CAAC,QAAQ,IAAI,EAAE,CAAC,SAAS,CAAC;gBACxC,CAAC,CAAC,CAAC;YACP,CAAC;YACD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI;YACzB,kBAAkB,EAAE,CAAC,EAAO,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,IAAI,EAAE,CAAC,SAAS;SAChE,CAAC,CAAC;QAWK,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,kBAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACnD,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;YACvB,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,UAAU;gBAAE,OAAO;YAErD,MAAM,sBAAsB,GAAG,CAC3B,IAAS,EACT,KAAa,EACZ,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;YAClD,MAAM,YAAY,GAAG;gBACjB,GAAI,IAAI,CAAC,WAAW,EAAe,CAAC,gBAAgB,CAChD,SAAS,CACZ;aACJ,CAAC;YACF,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;gBACzB,OAAO;aACV;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAChD,MAAM,MAAM,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1C,IAAI,aAAa,GAAG,YAAY,GAAG,MAAM,CAAC;YAC1C,IAAI,QAAQ,GAAG,sBAAsB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;YACnE,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE;gBAC1B,aAAa,IAAI,MAAM,CAAC;gBACxB,QAAQ,GAAG,sBAAsB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;aAClE;YACD,QAAQ,CAAC,KAAK,EAAE,CAAC;QACrB,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;QA3CE,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,CAAC;IA1BM,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAKD,IAAW,IAAI;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAC3B,CAAC,IAAI,EAAE,EAAE,CAAE,IAAoB,YAAY,GAAG,CACxC,CAAC;IACf,CAAC;IAiBM,KAAK;QACR,IAAI,CAAC,wBAAwB,CAAC,KAAK,EAAE,CAAC;IAC1C,CAAC;IAwCO,gBAAgB;QACpB,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,EAAE,CAAC;IACtD,CAAC;IAES,MAAM;QACZ,OAAO,IAAI,CAAA;gCACa,IAAI,CAAC,gBAAgB;SAC5C,CAAC;IACN,CAAC;IAES,YAAY;QAClB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;YAC5B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;SACrC;QACD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;YAClC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;SAC3C;IACL,CAAC;CACJ;AAnFG;IADC,kBAAkB,CAAC,EAAE,CAAC;0CACM","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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { queryAssignedNodes } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport { Tag } from './Tag.js';\n\nimport styles from './tags.css.js';\n\n/**\n * @element sp-tags\n *\n * @slot - Tag elements to manage as a group\n */\nexport class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @queryAssignedNodes('')\n public defaultNodes!: Node[];\n\n public get tags(): Tag[] {\n return this.defaultNodes.filter(\n (node) => (node as HTMLElement) instanceof Tag\n ) as Tag[];\n }\n\n rovingTabindexController = new RovingTabindexController<Tag>(this, {\n focusInIndex: (elements: Tag[]) => {\n return elements.findIndex((el) => {\n return !el.disabled && el.deletable;\n });\n },\n elements: () => this.tags,\n isFocusableElement: (el: Tag) => !el.disabled && el.deletable,\n });\n\n constructor() {\n super();\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n public focus(): void {\n this.rovingTabindexController.focus();\n }\n\n private handleFocusin = (): void => {\n this.addEventListener('focusout', this.handleFocusout);\n this.addEventListener('keydown', this.handleKeydown);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n if (code !== 'PageUp' && code !== 'PageDown') return;\n\n const circularIndexedElement = <T extends HTMLElement>(\n list: T[],\n index: number\n ): T => list[(list.length + index) % list.length];\n const tagsSiblings = [\n ...(this.getRootNode() as Document).querySelectorAll<Tags>(\n 'sp-tags'\n ),\n ];\n if (tagsSiblings.length < 2) {\n return;\n }\n event.preventDefault();\n const currentIndex = tagsSiblings.indexOf(this);\n const offset = code === 'PageUp' ? -1 : 1;\n let nextTagsIndex = currentIndex + offset;\n let nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);\n while (!nextTags.tags.length) {\n nextTagsIndex += offset;\n nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);\n }\n nextTags.focus();\n };\n\n private handleFocusout = (): void => {\n this.removeEventListener('keydown', this.handleKeydown);\n this.removeEventListener('focusout', this.handleFocusout);\n };\n\n private handleSlotchange(): void {\n this.rovingTabindexController.clearElementCache();\n }\n\n protected render(): TemplateResult {\n return html`\n <slot @slotchange=${this.handleSlotchange}></slot>\n `;\n }\n\n protected firstUpdated(): void {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'list');\n }\n if (!this.hasAttribute('aria-label')) {\n this.setAttribute('aria-label', 'Tags');\n }\n }\n}\n"]}
package/src/spectrum-tag.css.js CHANGED
@@ -61,7 +61,7 @@ const styles = css `
61
61
  --spectrum-tag-texticon-icon-gap
62
62
  )}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(
63
63
  --spectrum-tag-texticon-icon-gap
64
- )}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(
64
+ )}: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(
65
65
  --spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
66
66
  )}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(
67
67
  --spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
package/src/spectrum-tag.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spectrum-tag.css.js","sourceRoot":"","sources":["spectrum-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwPjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n)}:host([selected][invalid]:hover) .clear-button,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .clear-button,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable]) .clear-button.is-focused{background-color:var(\n--spectrum-tag-s-removable-texticon-button-fill-background-color-key-focus,var(\n--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus\n)\n);border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]) .clear-button:active{background-color:var(\n--spectrum-tag-s-removable-texticon-button-fill-background-color-hover,var(\n--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover\n)\n)}\n`;\nexport default styles;"]}
1
+ {"version":3,"file":"spectrum-tag.css.js","sourceRoot":"","sources":["spectrum-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwPjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(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`;\nexport default styles;"]}
package/src/tag.css.js CHANGED
@@ -61,7 +61,7 @@ const styles = css `
61
61
  --spectrum-tag-texticon-icon-gap
62
62
  )}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(
63
63
  --spectrum-tag-texticon-icon-gap
64
- )}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(
64
+ )}: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(
65
65
  --spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
66
66
  )}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(
67
67
  --spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
package/src/tag.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tag.css.js","sourceRoot":"","sources":["tag.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkSjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n)}:host([selected][invalid]:hover) .clear-button,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .clear-button,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable]) .clear-button.is-focused{background-color:var(\n--spectrum-tag-s-removable-texticon-button-fill-background-color-key-focus,var(\n--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus\n)\n);border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]) .clear-button:active{background-color:var(\n--spectrum-tag-s-removable-texticon-button-fill-background-color-hover,var(\n--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover\n)\n)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-key-focus,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):hover .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):active .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}\n`;\nexport default styles;"]}
1
+ {"version":3,"file":"tag.css.js","sourceRoot":"","sources":["tag.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkSjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(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`;\nexport default styles;"]}
package/stories/tags.stories.js CHANGED
@@ -19,6 +19,7 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
19
19
  export default {
20
20
  title: 'Tags',
21
21
  component: 'sp-tags',
22
+ argTypes: { onDelete: { action: 'delete' } },
22
23
  };
23
24
  export const Default = () => {
24
25
  return html `
@@ -73,16 +74,16 @@ export const Default = () => {
73
74
  </sp-tags>
74
75
  `;
75
76
  };
76
- export const deletable = () => {
77
+ export const deletable = (args) => {
77
78
  return html `
78
- <sp-tags>
79
+ <sp-tags @delete=${args.onDelete}>
79
80
  <sp-tag deletable>Tag 1</sp-tag>
80
81
  <sp-tag invalid deletable>Tag 2</sp-tag>
81
82
  <sp-tag disabled deletable>Tag 3</sp-tag>
82
83
  </sp-tags>
83
84
  <br />
84
85
  <br />
85
- <sp-tags>
86
+ <sp-tags @delete=${args.onDelete}>
86
87
  <sp-tag deletable>
87
88
  Tag 1
88
89
  <sp-avatar
@@ -110,7 +111,7 @@ export const deletable = () => {
110
111
  </sp-tags>
111
112
  <br />
112
113
  <br />
113
- <sp-tags>
114
+ <sp-tags @delete=${args.onDelete}>
114
115
  <sp-tag deletable>
115
116
  Tag 1
116
117
  <sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
package/stories/tags.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tags.stories.js","sourceRoot":"","sources":["tags.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAErE,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,8CAA8C,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,0CAA0C,CAAC;AAClD,OAAO,kEAAkE,CAAC;AAE1E,eAAe;IACX,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,SAAS;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAmB,EAAE;IACxC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;0BAcW,MAAM;;;;;;;;0BAQN,MAAM;;;;;;;;0BAQN,MAAM;;;;;;;;;;;;;;;;;;;;KAoB3B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAmB,EAAE;IAC1C,OAAO,IAAI,CAAA;;;;;;;;;;;;;;0BAcW,MAAM;;;;;;;;0BAQN,MAAM;;;;;;;;0BAQN,MAAM;;;;;;;;;;;;;;;;;;;;KAoB3B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAmB,EAAE;IACzC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-tag.js';\nimport '../sp-tags.js';\nimport '@spectrum-web-components/avatar/sp-avatar.js';\nimport { avatar } from '../../avatar/stories/images';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\n\nexport default {\n title: 'Tags',\n component: 'sp-tags',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n <br />\n <br />\n <sp-tags>\n <sp-tag>\n Tag 1\n <sp-avatar\n slot=\"avatar\"\n label=\"Tag 1\"\n src=${avatar}\n ></sp-avatar>\n </sp-tag>\n <sp-tag invalid>\n Tag 2\n <sp-avatar\n slot=\"avatar\"\n label=\"Tag 1\"\n src=${avatar}\n ></sp-avatar>\n </sp-tag>\n <sp-tag disabled>\n Tag 3\n <sp-avatar\n slot=\"avatar\"\n label=\"Tag 1\"\n src=${avatar}\n ></sp-avatar>\n </sp-tag>\n </sp-tags>\n <br />\n <br />\n <sp-tags>\n <sp-tag>\n Tag 1\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n <sp-tag invalid>\n Tag 2\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n <sp-tag disabled>\n Tag 3\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n </sp-tags>\n `;\n};\n\nexport const deletable = (): TemplateResult => {\n return html`\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag invalid deletable>Tag 2</sp-tag>\n <sp-tag disabled deletable>Tag 3</sp-tag>\n </sp-tags>\n <br />\n <br />\n <sp-tags>\n <sp-tag deletable>\n Tag 1\n <sp-avatar\n slot=\"avatar\"\n label=\"Tag 1\"\n src=${avatar}\n ></sp-avatar>\n </sp-tag>\n <sp-tag invalid deletable>\n Tag 2\n <sp-avatar\n slot=\"avatar\"\n label=\"Tag 1\"\n src=${avatar}\n ></sp-avatar>\n </sp-tag>\n <sp-tag disabled deletable>\n Tag 3\n <sp-avatar\n slot=\"avatar\"\n label=\"Tag 1\"\n src=${avatar}\n ></sp-avatar>\n </sp-tag>\n </sp-tags>\n <br />\n <br />\n <sp-tags>\n <sp-tag deletable>\n Tag 1\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n <sp-tag invalid deletable>\n Tag 2\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n <sp-tag disabled deletable>\n Tag 3\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n </sp-tags>\n `;\n};\n\nexport const readonly = (): TemplateResult => {\n return html`\n <sp-tags>\n <sp-tag deletable readonly>\n Tag 1\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n <sp-tag invalid deletable readonly>\n Tag 2\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n <sp-tag disabled deletable>\n Tag 3\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n </sp-tags>\n `;\n};\n"]}
1
+ {"version":3,"file":"tags.stories.js","sourceRoot":"","sources":["tags.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAErE,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,8CAA8C,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,0CAA0C,CAAC;AAClD,OAAO,kEAAkE,CAAC;AAE1E,eAAe;IACX,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;CAC/C,CAAC;AAMF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAmB,EAAE;IACxC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;0BAcW,MAAM;;;;;;;;0BAQN,MAAM;;;;;;;;0BAQN,MAAM;;;;;;;;;;;;;;;;;;;;KAoB3B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAW,EAAkB,EAAE;IACrD,OAAO,IAAI,CAAA;2BACY,IAAI,CAAC,QAAQ;;;;;;;2BAOb,IAAI,CAAC,QAAQ;;;;;;0BAMd,MAAM;;;;;;;;0BAQN,MAAM;;;;;;;;0BAQN,MAAM;;;;;;2BAML,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;KAcnC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAmB,EAAE;IACzC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;KAeV,CAAC;AACN,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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-tag.js';\nimport '../sp-tags.js';\nimport '@spectrum-web-components/avatar/sp-avatar.js';\nimport { avatar } from '../../avatar/stories/images';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\n\nexport default {\n title: 'Tags',\n component: 'sp-tags',\n argTypes: { onDelete: { action: 'delete' } },\n};\n\ntype Props = {\n onDelete: () => void;\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n <br />\n <br />\n <sp-tags>\n <sp-tag>\n Tag 1\n <sp-avatar\n slot=\"avatar\"\n label=\"Tag 1\"\n src=${avatar}\n ></sp-avatar>\n </sp-tag>\n <sp-tag invalid>\n Tag 2\n <sp-avatar\n slot=\"avatar\"\n label=\"Tag 1\"\n src=${avatar}\n ></sp-avatar>\n </sp-tag>\n <sp-tag disabled>\n Tag 3\n <sp-avatar\n slot=\"avatar\"\n label=\"Tag 1\"\n src=${avatar}\n ></sp-avatar>\n </sp-tag>\n </sp-tags>\n <br />\n <br />\n <sp-tags>\n <sp-tag>\n Tag 1\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n <sp-tag invalid>\n Tag 2\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n <sp-tag disabled>\n Tag 3\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n </sp-tags>\n `;\n};\n\nexport const deletable = (args: Props): TemplateResult => {\n return html`\n <sp-tags @delete=${args.onDelete}>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag invalid deletable>Tag 2</sp-tag>\n <sp-tag disabled deletable>Tag 3</sp-tag>\n </sp-tags>\n <br />\n <br />\n <sp-tags @delete=${args.onDelete}>\n <sp-tag deletable>\n Tag 1\n <sp-avatar\n slot=\"avatar\"\n label=\"Tag 1\"\n src=${avatar}\n ></sp-avatar>\n </sp-tag>\n <sp-tag invalid deletable>\n Tag 2\n <sp-avatar\n slot=\"avatar\"\n label=\"Tag 1\"\n src=${avatar}\n ></sp-avatar>\n </sp-tag>\n <sp-tag disabled deletable>\n Tag 3\n <sp-avatar\n slot=\"avatar\"\n label=\"Tag 1\"\n src=${avatar}\n ></sp-avatar>\n </sp-tag>\n </sp-tags>\n <br />\n <br />\n <sp-tags @delete=${args.onDelete}>\n <sp-tag deletable>\n Tag 1\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n <sp-tag invalid deletable>\n Tag 2\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n <sp-tag disabled deletable>\n Tag 3\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n </sp-tags>\n `;\n};\n\nexport const readonly = (): TemplateResult => {\n return html`\n <sp-tags>\n <sp-tag deletable readonly>\n Tag 1\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n <sp-tag invalid deletable readonly>\n Tag 2\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n <sp-tag disabled deletable>\n Tag 3\n <sp-icon-magnify slot=\"icon\" size=\"s\"></sp-icon-magnify>\n </sp-tag>\n </sp-tags>\n `;\n};\n"]}