@spectrum-web-components/tags 0.8.0 → 0.8.3

package/custom-elements.json

@@ -220,6 +220,11 @@
               },
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "rovingTabindexController",
+              "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    })"
+            },
             {
               "kind": "method",
               "name": "focus",
@@ -244,6 +249,16 @@
               "kind": "field",
               "name": "handleFocusout",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotchange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             }
           ],
           "mixins": [
@@ -301,7 +316,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-clearButton,:host([selected][invalid]) .spectrum-Tag-icon,:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n)}:host([selected][invalid]:hover) .spectrum-Tag-clearButton,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .spectrum-Tag-clearButton,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .spectrum-Tag-clearButton,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .spectrum-Tag-clearButton{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected]) .spectrum-Tag-clearButton:hover{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable]) .spectrum-Tag-clearButton.is-focused{background-color:var(\n--spectrum-tag-s-removable-texticon-button-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]) .spectrum-Tag-clearButton:hover{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]) .spectrum-Tag-clearButton:active{background-color:var(\n--spectrum-tag-s-removable-texticon-button-background-color-hover,var(--spectrum-global-color-gray-75)\n)}\n`"
+          "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`"
         }
       ],
       "exports": [
@@ -343,7 +358,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host([size=s]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-s-texticon-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-global-dimension-size-300)\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-m-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host([size=l]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-size:var(\n--spectrum-tag-l-texticon-text-size,var(--spectrum-global-dimension-font-size-200)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-focus-ring-size:var(\n--spectrum-tag-l-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-global-dimension-size-500)\n)}:host{--spectrum-tag-texticon-avatar-padding-x:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr]){padding-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-texticon-border-size))}:host([dir=ltr]){padding-right:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host([dir=rtl]){padding-left:calc(var(--spectrum-tag-texticon-padding-right) - var(--spectrum-tag-texticon-border-size))}:host{align-items:center;border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;height:var(--spectrum-tag-texticon-height);max-width:100%;outline:none;padding-bottom:0;padding-top:0;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-left))}:host([dir=ltr])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=ltr])>slot[name=icon]~.spectrum-Tag-label{margin-right:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl])>slot[name=avatar]~.spectrum-Tag-label,:host([dir=rtl])>slot[name=icon]~.spectrum-Tag-label{margin-left:calc(var(--spectrum-tag-texticon-avatar-padding-x) - var(--spectrum-tag-texticon-padding-right))}:host([dir=ltr]) .clear-button{margin-right:calc(-1*var(--spectrum-tag-texticon-padding-right))}:host([dir=rtl]) .clear-button{margin-left:calc(-1*var(--spectrum-tag-texticon-padding-right))}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-size);height:100%;line-height:calc(var(--spectrum-tag-texticon-height) - var(--spectrum-tag-texticon-border-size)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focus-ring-size) var(\n--spectrum-tag-m-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-border-color-darker-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-label-text-color)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-border-color-darker-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-global-color-gray-700)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-global-color-gray-700)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus,var(--spectrum-alias-focus-ring-color)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-semantic-negative-background-color-default)\n)}:host([selected][invalid]) .spectrum-Tag-clearButton,:host([selected][invalid]) .spectrum-Tag-icon,:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-semantic-negative-background-color-key-focus)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-semantic-negative-background-color-hover)\n)}:host([selected][invalid]:hover) .spectrum-Tag-clearButton,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-semantic-negative-color-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:hover) .spectrum-Tag-clearButton,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .spectrum-Tag-clearButton,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-semantic-negative-icon-color)\n)}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-semantic-negative-color-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-semantic-negative-color-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-semantic-negative-icon-color)\n)}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-text-color-overbackground)\n)}:host([deletable][selected]) .spectrum-Tag-clearButton{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-selected,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected]) .spectrum-Tag-clearButton:hover{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-selected-hover,var(--spectrum-alias-icon-color-overbackground)\n)}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-semantic-negative-color-down)\n)}:host([deletable]) .spectrum-Tag-clearButton.is-focused{background-color:var(\n--spectrum-tag-s-removable-texticon-button-background-color-key-focus,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-key-focus,var(--spectrum-alias-icon-color-key-focus)\n)}:host([deletable]) .spectrum-Tag-clearButton:hover{color:var(\n--spectrum-tag-s-removable-texticon-button-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([deletable]) .spectrum-Tag-clearButton:active{background-color:var(\n--spectrum-tag-s-removable-texticon-button-background-color-hover,var(--spectrum-global-color-gray-75)\n)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-key-focus,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):hover .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):active .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}\n`"
+          "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`"
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/tags",
-    "version": "0.8.0",
+    "version": "0.8.3",
     "publishConfig": {
         "access": "public"
     },
@@ -46,19 +46,20 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.5.0",
-        "@spectrum-web-components/button": "^0.16.0",
-        "@spectrum-web-components/shared": "^0.13.0",
+        "@spectrum-web-components/base": "^0.5.1",
+        "@spectrum-web-components/button": "^0.16.3",
+        "@spectrum-web-components/reactive-controllers": "^0.1.0",
+        "@spectrum-web-components/shared": "^0.13.3",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/tag": "^3.0.0",
-        "@spectrum-css/taggroup": "^3.0.0"
+        "@spectrum-css/tag": "^3.3.0",
+        "@spectrum-css/taggroup": "^3.3.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "7ce77352f6894043bceac9ef92b21e5f85420969"
+    "gitHead": "279380c6d72c0819fe224b405844af9ddcb87f8a"
 }

package/src/Tag.js

@@ -92,7 +92,7 @@ export class Tag extends SizedMixin(SpectrumElement, {
                           class="clear-button"
                           ?disabled=${this.disabled}
                           label="Remove"
-                          small
+                          size="s"
                           tabindex="-1"
                           @click=${this.delete}
                       ></sp-clear-button>

package/src/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["Tag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EAEJ,UAAU,EACV,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAE3E,OAAO,oDAAoD,CAAC;AAE5D,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC;;;;;;GAMG;AACH,MAAM,OAAO,GAAI,SAAQ,UAAU,CAAC,eAAe,EAAE;IACjD,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;CAC9B,CAAC;IAsBE;QACI,KAAK,EAAE,CAAC;QAjBL,cAAS,GAAG,KAAK,CAAC;QAGlB,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAehB,kBAAa,GAAG,GAAS,EAAE;YAC/B,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YACvD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAS,EAAE;YAChC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YACxD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC9D,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACnD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACjB,OAAO;aACV;YACD,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;YACvB,QAAQ,IAAI,EAAE;gBACV,KAAK,WAAW,CAAC;gBACjB,KAAK,OAAO,CAAC;gBACb,KAAK,QAAQ;oBACT,IAAI,CAAC,MAAM,EAAE,CAAC;oBACd,OAAO;gBACX;oBACI,OAAO;aACd;QACL,CAAC,CAAC;QA3BE,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,CAAC;IAxBM,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAWD,IAAY,OAAO;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACjD,CAAC;IAED,IAAY,SAAS;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACnD,CAAC;IAiCO,MAAM;QACV,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;QACD,IAAI,CAAC,aAAa,CACd,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,OAAO,EAAE,IAAI;SAChB,CAAC,CACL,CAAC;IACN,CAAC;IAES,MAAM;QACZ,MAAM,KAAK,GAAqB,EAAE,CAAC;QACnC,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,KAAK,CAAC,IAAI,CACN,IAAI,CAAA;;iBAEH,CACJ,CAAC;SACL;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,KAAK,CAAC,IAAI,CACN,IAAI,CAAA;;iBAEH,CACJ,CAAC;SACL;QACD,OAAO,IAAI,CAAA;cACL,KAAK;;cAEL,IAAI,CAAC,SAAS;YACZ,CAAC,CAAC,IAAI,CAAA;;;sCAGgB,IAAI,CAAC,QAAQ;;;;mCAIhB,IAAI,CAAC,MAAM;;mBAE3B;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;SACf,CAAC;IACN,CAAC;IAES,YAAY,CAAC,OAAuB;QAC1C,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;YAC5B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;SACzC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,YAAY,CACb,UAAU,EACV,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,gCAAgC,CAAC;gBAC5D,CAAC,CAAC,GAAG;gBACL,CAAC,CAAC,IAAI,CACb,CAAC;SACL;IACL,CAAC;IAES,OAAO,CAAC,OAAuB;QACrC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACf,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;aAC9C;iBAAM;gBACH,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;aACzC;SACJ;IACL,CAAC;CACJ;AArHG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAClB;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACnB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACnB","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/button/sp-clear-button.js';\n\nimport styles from './tag.css.js';\n\n/**\n * @element sp-tag\n *\n * @slot - text content for labeling the tag\n * @slot avatar - an avatar element to display within the Tag\n * @slot icon - an icon element to display within the Tag\n */\nexport class Tag extends SizedMixin(SpectrumElement, {\n    validSizes: ['s', 'm', 'l'],\n}) {\n    public static get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    public deletable = false;\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    private get hasIcon(): boolean {\n        return !!this.querySelector('[slot=\"icon\"]');\n    }\n\n    private get hasAvatar(): boolean {\n        return !!this.querySelector('[slot=\"avatar\"]');\n    }\n\n    constructor() {\n        super();\n        this.addEventListener('focusin', this.handleFocusin);\n    }\n\n    private handleFocusin = (): void => {\n        this.addEventListener('focusout', this.handleFocusout);\n        this.addEventListener('keydown', this.handleKeydown);\n    };\n\n    private handleFocusout = (): void => {\n        this.removeEventListener('keydown', this.handleKeydown);\n        this.removeEventListener('focusout', this.handleFocusout);\n    };\n\n    private handleKeydown = (event: KeyboardEvent): void => {\n        if (!this.deletable) {\n            return;\n        }\n        const { code } = event;\n        switch (code) {\n            case 'Backspace':\n            case 'Space':\n            case 'Delete':\n                this.delete();\n                return;\n            default:\n                return;\n        }\n    };\n\n    private delete(): void {\n        if (this.readonly) {\n            return;\n        }\n        this.dispatchEvent(\n            new Event('delete', {\n                bubbles: true,\n            })\n        );\n    }\n\n    protected render(): TemplateResult {\n        const slots: TemplateResult[] = [];\n        if (this.hasAvatar) {\n            slots.push(\n                html`\n                    <slot name=\"avatar\"></slot>\n                `\n            );\n        }\n        if (this.hasIcon) {\n            slots.push(\n                html`\n                    <slot name=\"icon\"></slot>\n                `\n            );\n        }\n        return html`\n            ${slots}\n            <span class=\"label\"><slot></slot></span>\n            ${this.deletable\n                ? html`\n                      <sp-clear-button\n                          class=\"clear-button\"\n                          ?disabled=${this.disabled}\n                          label=\"Remove\"\n                          small\n                          tabindex=\"-1\"\n                          @click=${this.delete}\n                      ></sp-clear-button>\n                  `\n                : html``}\n        `;\n    }\n\n    protected firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        if (!this.hasAttribute('role')) {\n            this.setAttribute('role', 'listitem');\n        }\n        if (this.deletable) {\n            this.setAttribute(\n                'tabindex',\n                !this.disabled && this.matches(':first-of-type:not([disabled])')\n                    ? '0'\n                    : '-1'\n            );\n        }\n    }\n\n    protected updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (changes.has('disabled')) {\n            if (this.disabled) {\n                this.setAttribute('aria-disabled', 'true');\n            } else {\n                this.removeAttribute('aria-disabled');\n            }\n        }\n    }\n}\n"]}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["Tag.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/button/sp-clear-button.js';\n\nimport styles from './tag.css.js';\n\n/**\n * @element sp-tag\n *\n * @slot - text content for labeling the tag\n * @slot avatar - an avatar element to display within the Tag\n * @slot icon - an icon element to display within the Tag\n */\nexport class Tag extends SizedMixin(SpectrumElement, {\n    validSizes: ['s', 'm', 'l'],\n}) {\n    public static get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    public deletable = false;\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    private get hasIcon(): boolean {\n        return !!this.querySelector('[slot=\"icon\"]');\n    }\n\n    private get hasAvatar(): boolean {\n        return !!this.querySelector('[slot=\"avatar\"]');\n    }\n\n    constructor() {\n        super();\n        this.addEventListener('focusin', this.handleFocusin);\n    }\n\n    private handleFocusin = (): void => {\n        this.addEventListener('focusout', this.handleFocusout);\n        this.addEventListener('keydown', this.handleKeydown);\n    };\n\n    private handleFocusout = (): void => {\n        this.removeEventListener('keydown', this.handleKeydown);\n        this.removeEventListener('focusout', this.handleFocusout);\n    };\n\n    private handleKeydown = (event: KeyboardEvent): void => {\n        if (!this.deletable) {\n            return;\n        }\n        const { code } = event;\n        switch (code) {\n            case 'Backspace':\n            case 'Space':\n            case 'Delete':\n                this.delete();\n                return;\n            default:\n                return;\n        }\n    };\n\n    private delete(): void {\n        if (this.readonly) {\n            return;\n        }\n        this.dispatchEvent(\n            new Event('delete', {\n                bubbles: true,\n            })\n        );\n    }\n\n    protected render(): TemplateResult {\n        const slots: TemplateResult[] = [];\n        if (this.hasAvatar) {\n            slots.push(\n                html`\n                    <slot name=\"avatar\"></slot>\n                `\n            );\n        }\n        if (this.hasIcon) {\n            slots.push(\n                html`\n                    <slot name=\"icon\"></slot>\n                `\n            );\n        }\n        return html`\n            ${slots}\n            <span class=\"label\"><slot></slot></span>\n            ${this.deletable\n                ? html`\n                      <sp-clear-button\n                          class=\"clear-button\"\n                          ?disabled=${this.disabled}\n                          label=\"Remove\"\n                          size=\"s\"\n                          tabindex=\"-1\"\n                          @click=${this.delete}\n                      ></sp-clear-button>\n                  `\n                : html``}\n        `;\n    }\n\n    protected firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        if (!this.hasAttribute('role')) {\n            this.setAttribute('role', 'listitem');\n        }\n        if (this.deletable) {\n            this.setAttribute(\n                'tabindex',\n                !this.disabled && this.matches(':first-of-type:not([disabled])')\n                    ? '0'\n                    : '-1'\n            );\n        }\n    }\n\n    protected updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (changes.has('disabled')) {\n            if (this.disabled) {\n                this.setAttribute('aria-disabled', 'true');\n            } else {\n                this.removeAttribute('aria-disabled');\n            }\n        }\n    }\n}\n"]}

package/src/Tags.d.ts

@@ -1,4 +1,5 @@
 import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 import { Tag } from './Tag.js';
 declare const Tags_base: typeof SpectrumElement;
 /**
@@ -10,11 +11,13 @@ export declare class Tags extends Tags_base {
     static get styles(): CSSResultArray;
     defaultNodes: Node[];
     get tags(): Tag[];
+    rovingTabindexController: RovingTabindexController<Tag>;
     constructor();
     focus(): void;
     private handleFocusin;
     private handleKeydown;
     private handleFocusout;
+    private handleSlotchange;
     protected render(): TemplateResult;
     protected firstUpdated(): void;
 }

package/src/Tags.js

@@ -13,6 +13,7 @@ import { __decorate } from "tslib";
 import { html, SpectrumElement, } from '@spectrum-web-components/base';
 import { queryAssignedNodes } from '@spectrum-web-components/base/src/decorators.js';
 import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
+import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 import { Tag } from './Tag.js';
 import styles from './tags.css.js';
 /**
@@ -23,89 +24,42 @@ import styles from './tags.css.js';
 export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
     constructor() {
         super();
+        this.rovingTabindexController = new RovingTabindexController(this, {
+            focusInIndex: (elements) => {
+                return elements.findIndex((el) => {
+                    return !el.disabled && el.deletable;
+                });
+            },
+            elements: () => this.tags,
+            isFocusableElement: (el) => !el.disabled && el.deletable,
+        });
         this.handleFocusin = () => {
             this.addEventListener('focusout', this.handleFocusout);
             this.addEventListener('keydown', this.handleKeydown);
-            requestAnimationFrame(() => {
-                const firstTagWithTabIndex = this.tags.find((tag) => tag.tabIndex === 0);
-                if (firstTagWithTabIndex) {
-                    firstTagWithTabIndex.tabIndex = -1;
-                }
-            });
         };
         this.handleKeydown = (event) => {
             const { code } = event;
-            const activeElement = this.getRootNode()
-                .activeElement;
-            /* c8 ignore next 3 */
-            if (!activeElement) {
+            if (code !== 'PageUp' && code !== 'PageDown')
                 return;
-            }
-            let nextIndex = this.tags.indexOf(activeElement);
-            /* c8 ignore next 3 */
-            if (nextIndex === -1) {
-                return;
-            }
             const circularIndexedElement = (list, index) => list[(list.length + index) % list.length];
-            const tagFromDelta = (delta) => {
-                nextIndex += delta;
-                let nextTag = circularIndexedElement(this.tags, nextIndex);
-                while (nextTag.disabled || !nextTag.deletable) {
-                    nextIndex += delta;
-                    nextTag = circularIndexedElement(this.tags, nextIndex);
-                }
-            };
-            switch (code) {
-                case 'ArrowUp':
-                    tagFromDelta(-1);
-                    break;
-                case 'ArrowLeft':
-                    tagFromDelta(this.isLTR ? -1 : 1);
-                    break;
-                case 'ArrowRight':
-                    tagFromDelta(this.isLTR ? 1 : -1);
-                    break;
-                case 'ArrowDown':
-                    tagFromDelta(1);
-                    break;
-                case 'End':
-                    nextIndex = this.tags.length;
-                    tagFromDelta(-1);
-                    break;
-                case 'Home':
-                    nextIndex = -1;
-                    tagFromDelta(1);
-                    break;
-                case 'PageUp':
-                case 'PageDown':
-                    const tagsSiblings = [
-                        ...this.getRootNode().querySelectorAll('sp-tags'),
-                    ];
-                    if (tagsSiblings.length < 2) {
-                        return;
-                    }
-                    event.preventDefault();
-                    const currentIndex = tagsSiblings.indexOf(this);
-                    const offset = code === 'PageUp' ? -1 : 1;
-                    let nextTagsIndex = currentIndex + offset;
-                    let nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);
-                    while (!nextTags.tags.length) {
-                        nextTagsIndex += offset;
-                        nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);
-                    }
-                    nextTags.focus();
-                    return;
-                default:
-                    return;
+            const tagsSiblings = [
+                ...this.getRootNode().querySelectorAll('sp-tags'),
+            ];
+            if (tagsSiblings.length < 2) {
+                return;
             }
             event.preventDefault();
-            circularIndexedElement(this.tags, nextIndex).focus();
+            const currentIndex = tagsSiblings.indexOf(this);
+            const offset = code === 'PageUp' ? -1 : 1;
+            let nextTagsIndex = currentIndex + offset;
+            let nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);
+            while (!nextTags.tags.length) {
+                nextTagsIndex += offset;
+                nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);
+            }
+            nextTags.focus();
         };
         this.handleFocusout = () => {
-            const firstFocusableTag = this.tags.find((tag) => !tag.disabled && tag.deletable);
-            if (firstFocusableTag) {
-                firstFocusableTag.tabIndex = 0;
-            }
             this.removeEventListener('keydown', this.handleKeydown);
             this.removeEventListener('focusout', this.handleFocusout);
         };
@@ -118,17 +72,14 @@ export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
         return this.defaultNodes.filter((node) => node instanceof Tag);
     }
     focus() {
-        if (!this.tags.length) {
-            return;
-        }
-        const firstFocusableTag = this.tags.find((tag) => !tag.disabled && tag.deletable);
-        if (firstFocusableTag) {
-            firstFocusableTag.focus();
-        }
+        this.rovingTabindexController.focus();
+    }
+    handleSlotchange() {
+        this.rovingTabindexController.clearElementCache();
     }
     render() {
         return html `
-            <slot></slot>
+            <slot @slotchange=${this.handleSlotchange}></slot>
         `;
     }
     firstUpdated() {

package/src/Tags.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tags.js","sourceRoot":"","sources":["Tags.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    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"]}
+{"version":3,"file":"Tags.js","sourceRoot":"","sources":["Tags.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    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-config.js

@@ -59,6 +59,10 @@ const config = {
                 },
             ],
             classes: [
+                {
+                    selector: '.spectrum-Tag-clearButton',
+                    name: 'clear-button',
+                },
                 {
                     selector: '.spectrum-ClearButton',
                     name: 'clear-button',