@spectrum-web-components/tags 0.8.7 → 0.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/tags",
-    "version": "0.8.7",
+    "version": "0.8.10",
     "publishConfig": {
         "access": "public"
     },
@@ -46,20 +46,20 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.5.4",
-        "@spectrum-web-components/button": "^0.17.1",
-        "@spectrum-web-components/reactive-controllers": "^0.2.2",
-        "@spectrum-web-components/shared": "^0.13.6",
+        "@spectrum-web-components/base": "^0.5.6",
+        "@spectrum-web-components/button": "^0.17.4",
+        "@spectrum-web-components/reactive-controllers": "^0.2.3",
+        "@spectrum-web-components/shared": "^0.14.1",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/tag": "^3.3.3",
-        "@spectrum-css/taggroup": "^3.3.3"
+        "@spectrum-css/tag": "^3.3.11",
+        "@spectrum-css/taggroup": "^3.3.11"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "caf12727e7f91dcf961e1fadacc727eea9ece27b"
+    "gitHead": "32e049a0da090ffc1a54cfe3234be4d5efc73339"
 }

package/src/spectrum-tag.css.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Adobe. All rights reserved.
+Copyright 2022 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0

package/src/spectrum-tag.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"spectrum-tag.css.js","sourceRoot":"","sources":["spectrum-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgRjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-s-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-s-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-s-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-alias-tag-height-s)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-alias-tag-padding-right-s)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-s-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-s-textonly-padding-right,var(--spectrum-alias-tag-padding-right-s)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-75\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-m-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-m-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-m-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-alias-tag-height-m)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-alias-tag-padding-right-m)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-m-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-m-textonly-padding-right,var(--spectrum-alias-tag-padding-right-m)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-100\n)}:host([size=l]){--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-l-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-l-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-l-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-alias-tag-height-l)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-alias-tag-padding-right-l)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-l-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-l-textonly-padding-right,var(--spectrum-alias-tag-padding-right-l)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-200\n)}:host([dir=ltr]){padding-left:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=rtl]){padding-right:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=ltr]){padding-right:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=rtl]){padding-left:var(\n--spectrum-tag-textonly-padding-right\n)}:host{align-items:center;border-radius:var(--spectrum-tag-texticon-border-radius);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;max-width:100%;min-height:calc(var(--spectrum-tag-texticon-height) + var(--spectrum-tag-texticon-border-size) + var(--spectrum-tag-texticon-border-size));outline:none;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){padding-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){padding-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-textonly-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-textonly-padding-left))}:host([dir=ltr]) .clear-button{margin-right:calc(var(--spectrum-tag-texticon-padding-right)*-1)}:host([dir=rtl]) .clear-button{margin-left:calc(var(--spectrum-tag-texticon-padding-right)*-1)}.clear-button{padding-bottom:0;padding-top:0}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-font-size);font-weight:var(--spectrum-tag-removable-texticon-text-font-weight);height:100%;line-height:var(--spectrum-tag-texticon-text-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focusring-border-size) var(\n--spectrum-tag-m-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focusring-border-size) var(\n--spectrum-tag-m-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-alias-tag-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-tag-border-color-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-tag-text-color-default)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-tag-icon-color-default)\n)}.clear-button .spectrum-ClearButton-fill{background:transparent}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-alias-tag-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-tag-border-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-tag-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-alias-tag-background-color-key-focus)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focusring-border-width,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-alias-tag-background-color-key-focus)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focusring-border-width,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(.focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host(:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-alias-tag-background-color-selected-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-alias-tag-background-color-selected-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-alias-tag-background-color-selected-hover)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-selected-key-focus,var(--spectrum-alias-tag-focusring-border-color-selected-key-focus)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-selected-key-focus,var(--spectrum-alias-tag-focusring-border-color-selected-key-focus)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected].focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-alias-tag-background-color-error-selected-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-alias-tag-background-color-error-selected-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:hover) .clear-button,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]:hover) .clear-button .spectrum-ClearButton-fill,:host([selected][invalid]:hover) .spectrum-Tag-icon .spectrum-ClearButton-fill,:host([selected][invalid]:hover) .spectrum-Tag-label .spectrum-ClearButton-fill{background:transparent}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-alias-tag-border-color-error-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-alias-tag-border-color-error-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:hover) .clear-button,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:hover) .clear-button .spectrum-ClearButton-fill,:host([invalid]:hover) .spectrum-Tag-icon .spectrum-ClearButton-fill{background:transparent}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-key-focus,var(--spectrum-global-color-red-700)\n)}:host([invalid]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-key-focus,var(--spectrum-global-color-red-700)\n)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]) .clear-button .spectrum-ClearButton-fill,:host([invalid]) .spectrum-Tag-icon .spectrum-ClearButton-fill{background:transparent}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-tag-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-tag-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-tag-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-tag-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-tag-icon-color-disabled)\n)}:host([disabled]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-tag-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-tag-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-tag-icon-color-down)\n)}:host([deletable]:active) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-alias-tag-border-color-error-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-alias-tag-text-color-error-hover)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([deletable][invalid]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-alias-tag-border-color-error-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-alias-tag-text-color-error-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([deletable][invalid]:active) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable].focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n)}:host([deletable][selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([deletable][selected]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([deletable][selected]) .clear-button:hover .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-alias-tag-text-color-error-key-focus)\n)}\n`;\nexport default styles;"]}
+{"version":3,"file":"spectrum-tag.css.js","sourceRoot":"","sources":["spectrum-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgRjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-s-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-s-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-s-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-alias-tag-height-s)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-alias-tag-padding-right-s)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-s-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-s-textonly-padding-right,var(--spectrum-alias-tag-padding-right-s)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-75\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-m-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-m-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-m-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-alias-tag-height-m)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-alias-tag-padding-right-m)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-m-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-m-textonly-padding-right,var(--spectrum-alias-tag-padding-right-m)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-100\n)}:host([size=l]){--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-l-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-l-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-l-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-alias-tag-height-l)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-alias-tag-padding-right-l)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-l-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-l-textonly-padding-right,var(--spectrum-alias-tag-padding-right-l)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-200\n)}:host([dir=ltr]){padding-left:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=rtl]){padding-right:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=ltr]){padding-right:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=rtl]){padding-left:var(\n--spectrum-tag-textonly-padding-right\n)}:host{align-items:center;border-radius:var(--spectrum-tag-texticon-border-radius);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;max-width:100%;min-height:calc(var(--spectrum-tag-texticon-height) + var(--spectrum-tag-texticon-border-size) + var(--spectrum-tag-texticon-border-size));outline:none;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){padding-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){padding-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-textonly-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-textonly-padding-left))}:host([dir=ltr]) .clear-button{margin-right:calc(var(--spectrum-tag-texticon-padding-right)*-1)}:host([dir=rtl]) .clear-button{margin-left:calc(var(--spectrum-tag-texticon-padding-right)*-1)}.clear-button{padding-bottom:0;padding-top:0}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-font-size);font-weight:var(--spectrum-tag-removable-texticon-text-font-weight);height:100%;line-height:var(--spectrum-tag-texticon-text-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focusring-border-size) var(\n--spectrum-tag-m-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focusring-border-size) var(\n--spectrum-tag-m-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-alias-tag-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-tag-border-color-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-tag-text-color-default)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-tag-icon-color-default)\n)}.clear-button .spectrum-ClearButton-fill{background:transparent}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-alias-tag-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-tag-border-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-tag-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-alias-tag-background-color-key-focus)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focusring-border-width,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-alias-tag-background-color-key-focus)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focusring-border-width,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(.focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host(:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-alias-tag-background-color-selected-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-alias-tag-background-color-selected-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-alias-tag-background-color-selected-hover)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-selected-key-focus,var(--spectrum-alias-tag-focusring-border-color-selected-key-focus)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-selected-key-focus,var(--spectrum-alias-tag-focusring-border-color-selected-key-focus)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected].focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-alias-tag-background-color-error-selected-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-alias-tag-background-color-error-selected-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:hover) .clear-button,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]:hover) .clear-button .spectrum-ClearButton-fill,:host([selected][invalid]:hover) .spectrum-Tag-icon .spectrum-ClearButton-fill,:host([selected][invalid]:hover) .spectrum-Tag-label .spectrum-ClearButton-fill{background:transparent}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-alias-tag-border-color-error-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-alias-tag-border-color-error-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:hover) .clear-button,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:hover) .clear-button .spectrum-ClearButton-fill,:host([invalid]:hover) .spectrum-Tag-icon .spectrum-ClearButton-fill{background:transparent}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-key-focus,var(--spectrum-global-color-red-700)\n)}:host([invalid]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-key-focus,var(--spectrum-global-color-red-700)\n)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]) .clear-button .spectrum-ClearButton-fill,:host([invalid]) .spectrum-Tag-icon .spectrum-ClearButton-fill{background:transparent}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-tag-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-tag-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-tag-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-tag-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-tag-icon-color-disabled)\n)}:host([disabled]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-tag-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-tag-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-tag-icon-color-down)\n)}:host([deletable]:active) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-alias-tag-border-color-error-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-alias-tag-text-color-error-hover)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([deletable][invalid]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-alias-tag-border-color-error-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-alias-tag-text-color-error-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([deletable][invalid]:active) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable].focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n)}:host([deletable][selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([deletable][selected]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([deletable][selected]) .clear-button:hover .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-alias-tag-text-color-error-key-focus)\n)}\n`;\nexport default styles;"]}

package/src/spectrum-tags.css.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Adobe. All rights reserved.
+Copyright 2022 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0

package/src/spectrum-tags.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"spectrum-tags.css.js","sourceRoot":"","sources":["spectrum-tags.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAcjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-tag-border-size:var(\n--spectrum-tag-s-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-icon-gap:var(\n--spectrum-tag-s-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-s)\n);--spectrum-tag-text-size:var(\n--spectrum-tag-s-text-size,var(--spectrum-alias-item-text-size-s)\n);--spectrum-tag-height:var(\n--spectrum-tag-s-height,var(--spectrum-alias-item-height-s)\n);--spectrum-tag-padding-left:var(\n--spectrum-tag-s-padding-left,var(--spectrum-alias-item-workflow-padding-left-s)\n);--spectrum-tag-padding-right:var(\n--spectrum-tag-s-padding-right,var(--spectrum-alias-item-padding-s)\n);--spectrum-tag-avatar-padding-x:var(--spectrum-tag-icon-gap);--spectrum-taggroup-tag-gap-x:var(--spectrum-global-dimension-size-100);--spectrum-taggroup-tag-gap-y:var(--spectrum-global-dimension-size-100)}:host{display:inline-block;list-style:none;margin:0;padding:0}\n`;\nexport default styles;"]}
+{"version":3,"file":"spectrum-tags.css.js","sourceRoot":"","sources":["spectrum-tags.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAcjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-tag-border-size:var(\n--spectrum-tag-s-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-tag-icon-gap:var(\n--spectrum-tag-s-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-s)\n);--spectrum-tag-text-size:var(\n--spectrum-tag-s-text-size,var(--spectrum-alias-item-text-size-s)\n);--spectrum-tag-height:var(\n--spectrum-tag-s-height,var(--spectrum-alias-item-height-s)\n);--spectrum-tag-padding-left:var(\n--spectrum-tag-s-padding-left,var(--spectrum-alias-item-workflow-padding-left-s)\n);--spectrum-tag-padding-right:var(\n--spectrum-tag-s-padding-right,var(--spectrum-alias-item-padding-s)\n);--spectrum-tag-avatar-padding-x:var(--spectrum-tag-icon-gap);--spectrum-taggroup-tag-gap-x:var(--spectrum-global-dimension-size-100);--spectrum-taggroup-tag-gap-y:var(--spectrum-global-dimension-size-100)}:host{display:inline-block;list-style:none;margin:0;padding:0}\n`;\nexport default styles;"]}

package/src/tag.css.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Adobe. All rights reserved.
+Copyright 2022 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0

package/src/tag.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.css.js","sourceRoot":"","sources":["tag.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0TjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-s-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-s-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-s-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-alias-tag-height-s)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-alias-tag-padding-right-s)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-s-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-s-textonly-padding-right,var(--spectrum-alias-tag-padding-right-s)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-75\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-m-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-m-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-m-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-alias-tag-height-m)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-alias-tag-padding-right-m)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-m-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-m-textonly-padding-right,var(--spectrum-alias-tag-padding-right-m)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-100\n)}:host([size=l]){--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-l-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-l-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-l-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-alias-tag-height-l)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-alias-tag-padding-right-l)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-l-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-l-textonly-padding-right,var(--spectrum-alias-tag-padding-right-l)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-200\n)}:host([dir=ltr]){padding-left:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=rtl]){padding-right:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=ltr]){padding-right:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=rtl]){padding-left:var(\n--spectrum-tag-textonly-padding-right\n)}:host{align-items:center;border-radius:var(--spectrum-tag-texticon-border-radius);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;max-width:100%;min-height:calc(var(--spectrum-tag-texticon-height) + var(--spectrum-tag-texticon-border-size) + var(--spectrum-tag-texticon-border-size));outline:none;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){padding-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){padding-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-textonly-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-textonly-padding-left))}:host([dir=ltr]) .clear-button{margin-right:calc(var(--spectrum-tag-texticon-padding-right)*-1)}:host([dir=rtl]) .clear-button{margin-left:calc(var(--spectrum-tag-texticon-padding-right)*-1)}.clear-button{padding-bottom:0;padding-top:0}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-font-size);font-weight:var(--spectrum-tag-removable-texticon-text-font-weight);height:100%;line-height:var(--spectrum-tag-texticon-text-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focusring-border-size) var(\n--spectrum-tag-m-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focusring-border-size) var(\n--spectrum-tag-m-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-alias-tag-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-tag-border-color-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-tag-text-color-default)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-tag-icon-color-default)\n)}.clear-button .spectrum-ClearButton-fill{background:transparent}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-alias-tag-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-tag-border-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-tag-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-alias-tag-background-color-key-focus)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focusring-border-width,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-alias-tag-background-color-key-focus)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focusring-border-width,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(.focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host(:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-alias-tag-background-color-selected-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-alias-tag-background-color-selected-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-alias-tag-background-color-selected-hover)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-selected-key-focus,var(--spectrum-alias-tag-focusring-border-color-selected-key-focus)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-selected-key-focus,var(--spectrum-alias-tag-focusring-border-color-selected-key-focus)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected].focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-alias-tag-background-color-error-selected-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-alias-tag-background-color-error-selected-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:hover) .clear-button,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]:hover) .clear-button .spectrum-ClearButton-fill,:host([selected][invalid]:hover) .spectrum-Tag-icon .spectrum-ClearButton-fill,:host([selected][invalid]:hover) .spectrum-Tag-label .spectrum-ClearButton-fill{background:transparent}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-alias-tag-border-color-error-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-alias-tag-border-color-error-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:hover) .clear-button,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:hover) .clear-button .spectrum-ClearButton-fill,:host([invalid]:hover) .spectrum-Tag-icon .spectrum-ClearButton-fill{background:transparent}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-key-focus,var(--spectrum-global-color-red-700)\n)}:host([invalid]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-key-focus,var(--spectrum-global-color-red-700)\n)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]) .clear-button .spectrum-ClearButton-fill,:host([invalid]) .spectrum-Tag-icon .spectrum-ClearButton-fill{background:transparent}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-tag-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-tag-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-tag-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-tag-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-tag-icon-color-disabled)\n)}:host([disabled]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-tag-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-tag-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-tag-icon-color-down)\n)}:host([deletable]:active) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-alias-tag-border-color-error-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-alias-tag-text-color-error-hover)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([deletable][invalid]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-alias-tag-border-color-error-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-alias-tag-text-color-error-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([deletable][invalid]:active) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable].focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n)}:host([deletable][selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([deletable][selected]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([deletable][selected]) .clear-button:hover .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-alias-tag-text-color-error-key-focus)\n)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-key-focus,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):hover .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):active .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}\n`;\nexport default styles;"]}
+{"version":3,"file":"tag.css.js","sourceRoot":"","sources":["tag.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0TjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-s-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-s-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-s-texticon-icon-gap,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-s-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-s-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-s-texticon-height,var(--spectrum-alias-tag-height-s)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-s-texticon-padding-right,var(--spectrum-alias-tag-padding-right-s)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-s-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-s-texticon-padding-left,var(--spectrum-global-dimension-size-85)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-s-textonly-padding-right,var(--spectrum-alias-tag-padding-right-s)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-s-textonly-padding-left,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-75\n)}:host([size=m]){--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-m-texticon-padding-left\n);--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-m-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-m-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-m-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-m-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-m-texticon-height,var(--spectrum-alias-tag-height-m)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-m-texticon-padding-right,var(--spectrum-alias-tag-padding-right-m)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-m-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-m-textonly-padding-right,var(--spectrum-alias-tag-padding-right-m)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-m-textonly-padding-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-100\n)}:host([size=l]){--spectrum-tag-removable-texticon-text-font-weight:var(\n--spectrum-tag-l-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tag-texticon-border-size:var(\n--spectrum-tag-l-texticon-border-size,var(--spectrum-alias-tag-border-size-default)\n);--spectrum-tag-texticon-icon-gap:var(\n--spectrum-tag-l-texticon-icon-gap,var(--spectrum-global-dimension-size-115)\n);--spectrum-tag-texticon-text-line-height:var(\n--spectrum-tag-l-texticon-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-tag-texticon-focusring-border-size:var(\n--spectrum-tag-l-texticon-focusring-border-size,var(--spectrum-alias-tag-focusring-size)\n);--spectrum-tag-texticon-height:var(\n--spectrum-tag-l-texticon-height,var(--spectrum-alias-tag-height-l)\n);--spectrum-tag-texticon-padding-right:var(\n--spectrum-tag-l-texticon-padding-right,var(--spectrum-alias-tag-padding-right-l)\n);--spectrum-tag-texticon-border-radius:var(\n--spectrum-tag-l-texticon-border-radius,var(--spectrum-alias-tag-border-radius)\n);--spectrum-tag-texticon-padding-left:var(\n--spectrum-tag-l-texticon-padding-left,var(--spectrum-global-dimension-size-160)\n);--spectrum-tag-textonly-padding-right:var(\n--spectrum-tag-l-textonly-padding-right,var(--spectrum-alias-tag-padding-right-l)\n);--spectrum-tag-textonly-padding-left:var(\n--spectrum-tag-l-textonly-padding-left,var(--spectrum-global-dimension-size-185)\n);--spectrum-tag-texticon-text-font-size:var(\n--spectrum-global-dimension-font-size-200\n)}:host([dir=ltr]){padding-left:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=rtl]){padding-right:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=ltr]){padding-right:var(\n--spectrum-tag-textonly-padding-right\n)}:host([dir=rtl]){padding-left:var(\n--spectrum-tag-textonly-padding-right\n)}:host{align-items:center;border-radius:var(--spectrum-tag-texticon-border-radius);border-style:solid;border-width:var(--spectrum-tag-texticon-border-size);box-sizing:border-box;display:inline-flex;max-width:100%;min-height:calc(var(--spectrum-tag-texticon-height) + var(--spectrum-tag-texticon-border-size) + var(--spectrum-tag-texticon-border-size));outline:none;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}:host([disabled]){pointer-events:none}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){padding-right:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){padding-left:var(\n--spectrum-tag-texticon-icon-gap\n)}:host([dir=ltr])>::slotted([slot=avatar]),:host([dir=ltr])>::slotted([slot=icon]){margin-left:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-textonly-padding-left))}:host([dir=rtl])>::slotted([slot=avatar]),:host([dir=rtl])>::slotted([slot=icon]){margin-right:calc(var(--spectrum-tag-texticon-padding-left) - var(--spectrum-tag-textonly-padding-left))}:host([dir=ltr]) .clear-button{margin-right:calc(var(--spectrum-tag-texticon-padding-right)*-1)}:host([dir=rtl]) .clear-button{margin-left:calc(var(--spectrum-tag-texticon-padding-right)*-1)}.clear-button{padding-bottom:0;padding-top:0}.spectrum-Tag-label{cursor:default;flex:1 1 auto;font-size:var(--spectrum-tag-texticon-text-font-size);font-weight:var(--spectrum-tag-removable-texticon-text-font-weight);height:100%;line-height:var(--spectrum-tag-texticon-text-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([selected].focus-visible):after,:host([selected].is-focused):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focusring-border-size) var(\n--spectrum-tag-m-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n)}:host([selected].is-focused):after,:host([selected]:focus-visible):after{box-shadow:0 0 0 var(--spectrum-tag-texticon-focusring-border-size) var(\n--spectrum-tag-m-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n)}:host{background-color:var(\n--spectrum-tag-s-texticon-background-color,var(--spectrum-alias-tag-background-color-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color,var(--spectrum-alias-tag-border-color-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color,var(--spectrum-alias-tag-text-color-default)\n)}.clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color,var(--spectrum-alias-tag-icon-color-default)\n)}.clear-button .spectrum-ClearButton-fill{background:transparent}:host(:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-hover,var(--spectrum-alias-tag-background-color-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-hover,var(--spectrum-alias-tag-border-color-hover)\n);color:var(\n--spectrum-tag-s-texticon-text-color-hover,var(--spectrum-alias-tag-text-color-hover)\n)}:host(:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host(.focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-alias-tag-background-color-key-focus)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focusring-border-width,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host(:focus-visible){background-color:var(\n--spectrum-tag-s-texticon-background-color-key-focus,var(--spectrum-alias-tag-background-color-key-focus)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-tag-s-texticon-focusring-border-width,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-key-focus,var(--spectrum-alias-tag-focusring-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host(.focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host(.focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host(:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected,var(--spectrum-alias-tag-background-color-selected-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-selected,var(--spectrum-alias-tag-background-color-selected-default)\n);color:var(\n--spectrum-tag-s-texticon-text-color-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([selected]) .spectrum-TagIcon{color:var(\n--spectrum-tag-s-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-selected-hover,var(--spectrum-alias-tag-background-color-selected-hover)\n)}:host([selected]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-selected-key-focus,var(--spectrum-alias-tag-focusring-border-color-selected-key-focus)\n)}:host([selected]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-focusring-border-color-selected-key-focus,var(--spectrum-alias-tag-focusring-border-color-selected-key-focus)\n)}:host([selected].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected].focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected]:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected][invalid]){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected,var(--spectrum-alias-tag-background-color-error-selected-default)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([selected][invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([selected][invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-error-selected-key-focus,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:hover){background-color:var(\n--spectrum-tag-s-texticon-background-color-error-selected-hover,var(--spectrum-alias-tag-background-color-error-selected-hover)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-error-selected-hover,var(--spectrum-alias-tag-border-color-error-selected)\n)}:host([selected][invalid]:hover) .clear-button,:host([selected][invalid]:hover) .spectrum-Tag-icon,:host([selected][invalid]:hover) .spectrum-Tag-label{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]:hover) .clear-button .spectrum-ClearButton-fill,:host([selected][invalid]:hover) .spectrum-Tag-icon .spectrum-ClearButton-fill,:host([selected][invalid]:hover) .spectrum-Tag-label .spectrum-ClearButton-fill{background:transparent}:host([invalid]){border-color:var(\n--spectrum-tag-s-texticon-border-color-error,var(--spectrum-alias-tag-border-color-error-default)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]:hover){border-color:var(\n--spectrum-tag-s-texticon-border-color-error-hover,var(--spectrum-alias-tag-border-color-error-hover)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:hover) .clear-button,:host([invalid]:hover) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:hover) .clear-button .spectrum-ClearButton-fill,:host([invalid]:hover) .spectrum-Tag-icon .spectrum-ClearButton-fill{background:transparent}:host([invalid].focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid]:focus-visible){border-color:var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);box-shadow:0 0 0 var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-tag-s-texticon-border-color-key-focus,var(--spectrum-alias-tag-border-color-key-focus)\n);color:var(\n--spectrum-tag-s-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([invalid].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-key-focus,var(--spectrum-global-color-red-700)\n)}:host([invalid]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-key-focus,var(--spectrum-global-color-red-700)\n)}:host([invalid]) .clear-button,:host([invalid]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]) .clear-button .spectrum-ClearButton-fill,:host([invalid]) .spectrum-Tag-icon .spectrum-ClearButton-fill{background:transparent}:host([invalid]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error,var(--spectrum-global-color-red-600)\n)}:host([invalid]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([disabled]){background-color:var(\n--spectrum-tag-s-texticon-background-color-disabled,var(--spectrum-alias-tag-background-color-disabled)\n);border-color:var(\n--spectrum-tag-s-texticon-border-color-disabled,var(--spectrum-alias-tag-border-color-disabled)\n);color:var(\n--spectrum-tag-s-texticon-text-color-disabled,var(--spectrum-alias-tag-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=avatar]){opacity:var(\n--spectrum-avatar-size-100-opacity-disabled,var(--spectrum-global-color-opacity-30)\n)}:host([disabled]) .spectrum-Tag-icon{color:var(\n--spectrum-tag-s-texticon-icon-color-disabled,var(--spectrum-alias-tag-icon-color-disabled)\n)}:host([disabled]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-disabled,var(--spectrum-alias-tag-icon-color-disabled)\n)}:host([disabled]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:hover){color:var(\n--spectrum-tag-s-removable-texticon-text-color-hover,var(--spectrum-alias-tag-text-color-hover)\n)}:host([deletable]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-hover,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:active){color:var(\n--spectrum-tag-s-removable-texticon-text-color-down,var(--spectrum-alias-tag-text-color-down)\n)}:host([deletable]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-down,var(--spectrum-alias-tag-icon-color-down)\n)}:host([deletable]:active) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][invalid]:hover){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-hover,var(--spectrum-alias-tag-border-color-error-hover)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-hover,var(--spectrum-alias-tag-text-color-error-hover)\n)}:host([deletable][invalid]:hover) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([deletable][invalid]:hover) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][invalid]:active){border-color:var(\n--spectrum-tag-s-removable-texticon-border-color-error-down,var(--spectrum-alias-tag-border-color-error-down)\n);color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-down,var(--spectrum-alias-tag-text-color-error-down)\n)}:host([deletable][invalid]:active) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([deletable][invalid]:active) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable].focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host([deletable]:focus-visible){color:var(\n--spectrum-tag-s-removable-texticon-text-color-key-focus,var(--spectrum-alias-tag-text-color-key-focus)\n)}:host([deletable].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-key-focus,var(--spectrum-alias-tag-icon-color-hover)\n)}:host([deletable].focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable]:focus-visible) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected,var(--spectrum-alias-tag-text-color-selected)\n)}:host([deletable][selected]) .is-focused{color:var(\n--spectrum-tag-s-removable-texticon-text-color-selected-key-focus,var(--spectrum-alias-tag-text-color-selected)\n)}:host([deletable][selected]) .clear-button{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([deletable][selected]) .clear-button .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected]) .clear-button:hover{color:var(\n--spectrum-tag-s-removable-texticon-icon-color-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([deletable][selected]) .clear-button:hover .spectrum-ClearButton-fill{background:transparent}:host([deletable][selected][invalid]){color:var(\n--spectrum-tag-s-removable-texticon-text-color-error-key-focus,var(--spectrum-alias-tag-text-color-error-key-focus)\n)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-key-focus,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):hover .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([invalid]):active .clear-button{--spectrum-clearbutton-medium-icon-color:var(\n--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600)\n);--spectrum-clearbutton-medium-icon-color-hover:var(\n--spectrum-clearbutton-medium-icon-color\n);--spectrum-clearbutton-medium-icon-color-down:var(\n--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}\n`;\nexport default styles;"]}

package/src/tags.css.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Adobe. All rights reserved.
+Copyright 2022 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0

package/src/tags.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags.css.js","sourceRoot":"","sources":["tags.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;CAQjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-taggroup-tag-gap-x:var(--spectrum-global-dimension-size-100);--spectrum-taggroup-tag-gap-y:var(--spectrum-global-dimension-size-100);display:inline-flex;list-style:none;margin:0;padding:0}::slotted(*){margin:calc(var(\n--spectrum-taggroup-tag-gap-y,\nvar(--spectrum-global-dimension-size-100)\n)/2) calc(var(\n--spectrum-taggroup-tag-gap-x,\nvar(--spectrum-global-dimension-size-100)\n)/2)}\n`;\nexport default styles;"]}
+{"version":3,"file":"tags.css.js","sourceRoot":"","sources":["tags.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;CAQjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-taggroup-tag-gap-x:var(--spectrum-global-dimension-size-100);--spectrum-taggroup-tag-gap-y:var(--spectrum-global-dimension-size-100);display:inline-flex;list-style:none;margin:0;padding:0}::slotted(*){margin:calc(var(\n--spectrum-taggroup-tag-gap-y,\nvar(--spectrum-global-dimension-size-100)\n)/2) calc(var(\n--spectrum-taggroup-tag-gap-x,\nvar(--spectrum-global-dimension-size-100)\n)/2)}\n`;\nexport default styles;"]}

package/test/benchmark/basic-test.js

@@ -0,0 +1,23 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import '@spectrum-web-components/tags/sp-tag.js';
+import '@spectrum-web-components/tags/sp-tags.js';
+import { html } from 'lit';
+import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+measureFixtureCreation(html `
+    <sp-tags>
+        <sp-tags-item>Tag 1</sp-tags-item>
+        <sp-tags-item invalid>Tag 2</sp-tags-item>
+        <sp-tags-item disabled>Tag 3</sp-tags-item>
+    </sp-tags>
+`);
+//# sourceMappingURL=basic-test.js.map

package/test/benchmark/basic-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-test.js","sourceRoot":"","sources":["basic-test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,yCAAyC,CAAC;AACjD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAE/E,sBAAsB,CAAC,IAAI,CAAA;;;;;;CAM1B,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/tags/sp-tag.js';\nimport '@spectrum-web-components/tags/sp-tags.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n    <sp-tags>\n        <sp-tags-item>Tag 1</sp-tags-item>\n        <sp-tags-item invalid>Tag 2</sp-tags-item>\n        <sp-tags-item disabled>Tag 3</sp-tags-item>\n    </sp-tags>\n`);\n"]}

package/test/tag.test.js

@@ -0,0 +1,117 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { elementUpdated, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { spy } from 'sinon';
+import '../sp-tag.js';
+import '../sp-tags.js';
+import { backspaceEvent, deleteEvent, enterEvent, spaceEvent, } from '../../../test/testing-helpers.js';
+describe('Tag', () => {
+    it('loads default tags accessibly', async () => {
+        const el = await fixture(html `
+                <sp-tags>
+                    <sp-tag>Tag 1</sp-tag>
+                    <sp-tag invalid>Tag 2</sp-tag>
+                    <sp-tag disabled>Tag 3</sp-tag>
+                    <sp-tag deletable>Tag 4</sp-tag>
+                </sp-tags>
+            `);
+        await elementUpdated(el);
+        await expect(el).to.be.accessible();
+    });
+    it('[disabled] manages [aria-disabled]', async () => {
+        const el = await fixture(html `
+                <sp-tags>
+                    <sp-tag>Tag 1</sp-tag>
+                    <sp-tag invalid>Tag 2</sp-tag>
+                    <sp-tag disabled>Tag 3</sp-tag>
+                    <sp-tag deletable>Tag 4</sp-tag>
+                </sp-tags>
+            `);
+        const notDisabled = el.querySelector('sp-tag');
+        const disabled = el.querySelector('[disabled]');
+        await elementUpdated(disabled);
+        expect(notDisabled.hasAttribute('aria-disabled')).to.be.false;
+        expect(disabled.hasAttribute('aria-disabled')).to.be.true;
+        expect(disabled.getAttribute('aria-disabled')).to.equal('true');
+    });
+    it('dispatches `delete` events on click', async () => {
+        const deleteSpy = spy();
+        const handleDelete = () => deleteSpy();
+        const el = await fixture(html `
+                <sp-tag @delete=${handleDelete} deletable>Tag 1</sp-tag>
+            `);
+        await elementUpdated(el);
+        expect(deleteSpy.called).to.be.false;
+        const root = el.shadowRoot
+            ? el.shadowRoot
+            : el;
+        const deleteButton = root.querySelector('sp-clear-button');
+        deleteButton.click();
+        await elementUpdated(el);
+        expect(deleteSpy.called).to.be.true;
+        expect(deleteSpy.callCount).to.equal(1);
+    });
+    it('does not dispatch `delete` events when [readonly]', async () => {
+        const deleteSpy = spy();
+        const handleDelete = () => deleteSpy();
+        const el = await fixture(html `
+                <sp-tag @delete=${handleDelete} deletable readonly>
+                    Tag 1
+                </sp-tag>
+            `);
+        await elementUpdated(el);
+        expect(deleteSpy.called).to.be.false;
+        const root = el.shadowRoot
+            ? el.shadowRoot
+            : el;
+        const deleteButton = root.querySelector('sp-clear-button');
+        deleteButton.click();
+        await elementUpdated(el);
+        expect(deleteSpy.called).to.be.false;
+    });
+    it('dispatches `delete` events on keyboard input', async () => {
+        const deleteSpy = spy();
+        const handleDelete = () => deleteSpy();
+        let expectedEventCount = 0;
+        const el = await fixture(html `
+                <sp-tag @delete=${handleDelete}>Tag 1</sp-tag>
+            `);
+        const testKeyboardEvent = async (event) => {
+            expectedEventCount += 1;
+            el.dispatchEvent(event);
+            await elementUpdated(el);
+            expect(deleteSpy.called).to.be.true;
+            expect(deleteSpy.callCount, `Accepts "${event.code}" key input`).to.equal(expectedEventCount);
+        };
+        await elementUpdated(el);
+        expect(deleteSpy.called).to.be.false;
+        el.dispatchEvent(new FocusEvent('focusin'));
+        await elementUpdated(el);
+        el.dispatchEvent(deleteEvent());
+        await elementUpdated(el);
+        expect(deleteSpy.called).to.be.false;
+        el.deletable = true;
+        await elementUpdated(el);
+        el.dispatchEvent(enterEvent());
+        await elementUpdated(el);
+        expect(deleteSpy.called).to.be.false;
+        testKeyboardEvent(deleteEvent());
+        testKeyboardEvent(spaceEvent());
+        testKeyboardEvent(backspaceEvent());
+        el.dispatchEvent(new FocusEvent('focusout'));
+        await elementUpdated(el);
+        el.dispatchEvent(deleteEvent());
+        expect(deleteSpy.callCount, 'Does not respond after `focusout`').to.equal(expectedEventCount);
+    });
+});
+//# sourceMappingURL=tag.test.js.map

package/test/tag.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.test.js","sourceRoot":"","sources":["tag.test.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit/static-html.js';\nimport { spy } from 'sinon';\n\nimport '../sp-tag.js';\nimport '../sp-tags.js';\nimport { Tag } from '..';\nimport { ClearButton } from '@spectrum-web-components/button';\nimport {\n    backspaceEvent,\n    deleteEvent,\n    enterEvent,\n    spaceEvent,\n} from '../../../test/testing-helpers.js';\n\ndescribe('Tag', () => {\n    it('loads default tags accessibly', async () => {\n        const el = await fixture<Tag>(\n            html`\n                <sp-tags>\n                    <sp-tag>Tag 1</sp-tag>\n                    <sp-tag invalid>Tag 2</sp-tag>\n                    <sp-tag disabled>Tag 3</sp-tag>\n                    <sp-tag deletable>Tag 4</sp-tag>\n                </sp-tags>\n            `\n        );\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n    it('[disabled] manages [aria-disabled]', async () => {\n        const el = await fixture<Tag>(\n            html`\n                <sp-tags>\n                    <sp-tag>Tag 1</sp-tag>\n                    <sp-tag invalid>Tag 2</sp-tag>\n                    <sp-tag disabled>Tag 3</sp-tag>\n                    <sp-tag deletable>Tag 4</sp-tag>\n                </sp-tags>\n            `\n        );\n        const notDisabled = el.querySelector('sp-tag') as Tag;\n        const disabled = el.querySelector('[disabled]') as Tag;\n\n        await elementUpdated(disabled);\n\n        expect(notDisabled.hasAttribute('aria-disabled')).to.be.false;\n        expect(disabled.hasAttribute('aria-disabled')).to.be.true;\n        expect(disabled.getAttribute('aria-disabled')).to.equal('true');\n    });\n    it('dispatches `delete` events on click', async () => {\n        const deleteSpy = spy();\n        const handleDelete = (): void => deleteSpy();\n        const el = await fixture<Tag>(\n            html`\n                <sp-tag @delete=${handleDelete} deletable>Tag 1</sp-tag>\n            `\n        );\n\n        await elementUpdated(el);\n\n        expect(deleteSpy.called).to.be.false;\n\n        const root: HTMLElement | DocumentFragment = el.shadowRoot\n            ? el.shadowRoot\n            : el;\n        const deleteButton = root.querySelector(\n            'sp-clear-button'\n        ) as ClearButton;\n        deleteButton.click();\n\n        await elementUpdated(el);\n\n        expect(deleteSpy.called).to.be.true;\n        expect(deleteSpy.callCount).to.equal(1);\n    });\n    it('does not dispatch `delete` events when [readonly]', async () => {\n        const deleteSpy = spy();\n        const handleDelete = (): void => deleteSpy();\n        const el = await fixture<Tag>(\n            html`\n                <sp-tag @delete=${handleDelete} deletable readonly>\n                    Tag 1\n                </sp-tag>\n            `\n        );\n\n        await elementUpdated(el);\n\n        expect(deleteSpy.called).to.be.false;\n\n        const root: HTMLElement | DocumentFragment = el.shadowRoot\n            ? el.shadowRoot\n            : el;\n        const deleteButton = root.querySelector(\n            'sp-clear-button'\n        ) as ClearButton;\n        deleteButton.click();\n\n        await elementUpdated(el);\n\n        expect(deleteSpy.called).to.be.false;\n    });\n    it('dispatches `delete` events on keyboard input', async () => {\n        const deleteSpy = spy();\n        const handleDelete = (): void => deleteSpy();\n        let expectedEventCount = 0;\n        const el = await fixture<Tag>(\n            html`\n                <sp-tag @delete=${handleDelete}>Tag 1</sp-tag>\n            `\n        );\n        const testKeyboardEvent = async (\n            event: KeyboardEvent\n        ): Promise<void> => {\n            expectedEventCount += 1;\n\n            el.dispatchEvent(event);\n            await elementUpdated(el);\n\n            expect(deleteSpy.called).to.be.true;\n            expect(\n                deleteSpy.callCount,\n                `Accepts \"${event.code}\" key input`\n            ).to.equal(expectedEventCount);\n        };\n\n        await elementUpdated(el);\n\n        expect(deleteSpy.called).to.be.false;\n\n        el.dispatchEvent(new FocusEvent('focusin'));\n        await elementUpdated(el);\n\n        el.dispatchEvent(deleteEvent());\n        await elementUpdated(el);\n\n        expect(deleteSpy.called).to.be.false;\n\n        el.deletable = true;\n        await elementUpdated(el);\n\n        el.dispatchEvent(enterEvent());\n        await elementUpdated(el);\n\n        expect(deleteSpy.called).to.be.false;\n\n        testKeyboardEvent(deleteEvent());\n        testKeyboardEvent(spaceEvent());\n        testKeyboardEvent(backspaceEvent());\n\n        el.dispatchEvent(new FocusEvent('focusout'));\n        await elementUpdated(el);\n\n        el.dispatchEvent(deleteEvent());\n        expect(\n            deleteSpy.callCount,\n            'Does not respond after `focusout`'\n        ).to.equal(expectedEventCount);\n    });\n});\n"]}

package/test/tags-sizes.test-vrt.js

@@ -0,0 +1,15 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import * as stories from '../stories/tags-sizes.stories.js';
+import { regressVisuals } from '../../../test/visual/test.js';
+regressVisuals('TagsSizesStories', stories);
+//# sourceMappingURL=tags-sizes.test-vrt.js.map

package/test/tags-sizes.test-vrt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-sizes.test-vrt.js","sourceRoot":"","sources":["tags-sizes.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/tags-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TagsSizesStories', stories);\n"]}

package/test/tags.test-vrt.js

@@ -0,0 +1,15 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import * as stories from '../stories/tags.stories.js';
+import { regressVisuals } from '../../../test/visual/test.js';
+regressVisuals('TagsStories', stories);
+//# sourceMappingURL=tags.test-vrt.js.map

package/test/tags.test-vrt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags.test-vrt.js","sourceRoot":"","sources":["tags.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/tags.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TagsStories', stories);\n"]}

package/test/tags.test.js

@@ -0,0 +1,238 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { elementUpdated, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import '../sp-tag.js';
+import '../sp-tags.js';
+import { arrowDownEvent, arrowLeftEvent, arrowRightEvent, arrowUpEvent, endEvent, enterEvent, homeEvent, pageDownEvent, pageUpEvent, } from '../../../test/testing-helpers.js';
+import { executeServerCommand } from '@web/test-runner-commands';
+describe('Tags', () => {
+    it('loads default tags accessibly', async () => {
+        const el = await fixture(html `
+                <sp-tags>
+                    <sp-tag>Tag 1</sp-tag>
+                    <sp-tag invalid>Tag 2</sp-tag>
+                    <sp-tag disabled>Tag 3</sp-tag>
+                </sp-tags>
+            `);
+        await elementUpdated(el);
+        await expect(el).to.be.accessible();
+        expect(el.hasAttribute('role')).to.be.true;
+        expect(el.hasAttribute('aria-label')).to.be.true;
+    });
+    it('does not accept focus when empty', async () => {
+        const el = await fixture(html `
+                <sp-tags></sp-tags>
+            `);
+        await elementUpdated(el);
+        expect(document.activeElement === el).to.be.false;
+        el.focus();
+        await elementUpdated(el);
+        expect(document.activeElement === el).to.be.false;
+    });
+    it('does not accept focus when no tag has `deletable`', async () => {
+        const el = await fixture(html `
+                <sp-tags>
+                    <sp-tag>Tag 1</sp-tag>
+                    <sp-tag invalid>Tag 2</sp-tag>
+                    <sp-tag disabled>Tag 3</sp-tag>
+                </sp-tags>
+            `);
+        await elementUpdated(el);
+        const tag1 = el.querySelector('sp-tag:nth-child(1)');
+        const tag2 = el.querySelector('sp-tag:nth-child(2)');
+        const tag3 = el.querySelector('sp-tag:nth-child(3)');
+        expect(document.activeElement === el).to.be.false;
+        el.focus();
+        await elementUpdated(el);
+        expect(document.activeElement === el).to.be.false;
+        expect(document.activeElement === tag1).to.be.false;
+        expect(document.activeElement === tag2).to.be.false;
+        expect(document.activeElement === tag3).to.be.false;
+    });
+    it('loads default tags with `role` and `aria-label` from the outside', async () => {
+        const el = await fixture(html `
+                <sp-tags>
+                    <sp-tag>Tag 1</sp-tag>
+                    <sp-tag invalid>Tag 2</sp-tag>
+                    <sp-tag disabled>Tag 3</sp-tag>
+                </sp-tags>
+            `);
+        await elementUpdated(el);
+        await expect(el).to.be.accessible();
+        expect(el.hasAttribute('role')).to.be.true;
+        expect(el.hasAttribute('aria-label')).to.be.true;
+    });
+    it('accepts keyboard events while focused', async () => {
+        const el = await fixture(html `
+                <sp-tags>
+                    <sp-tag deletable>Tag 1</sp-tag>
+                    <sp-tag deletable>Tag 2</sp-tag>
+                    <sp-tag deletable>Tag 3</sp-tag>
+                    <sp-tag deletable>Tag 4</sp-tag>
+                    <sp-tag deletable>Tag 5</sp-tag>
+                </sp-tags>
+            `);
+        await elementUpdated(el);
+        const tag1 = el.querySelector('sp-tag:nth-child(1)');
+        const tag2 = el.querySelector('sp-tag:nth-child(2)');
+        const tag3 = el.querySelector('sp-tag:nth-child(3)');
+        const tag4 = el.querySelector('sp-tag:nth-child(4)');
+        const tag5 = el.querySelector('sp-tag:nth-child(5)');
+        tag1.focus();
+        await elementUpdated(el);
+        el.dispatchEvent(pageUpEvent());
+        el.dispatchEvent(arrowRightEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag2).to.be.true;
+        el.dispatchEvent(arrowDownEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag3).to.be.true;
+        el.dispatchEvent(endEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag5).to.be.true;
+        el.dispatchEvent(arrowLeftEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag4).to.be.true;
+        el.dispatchEvent(arrowUpEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag3).to.be.true;
+        el.dispatchEvent(homeEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag1).to.be.true;
+        tag1.blur();
+    });
+    it('will not focus [disabled] children', async () => {
+        const el = await fixture(html `
+                <sp-tags>
+                    <sp-tag disabled deletable>Tag 1</sp-tag>
+                    <sp-tag deletable>Tag 2</sp-tag>
+                    <sp-tag deletable>Tag 3</sp-tag>
+                    <sp-tag deletable>Tag 4</sp-tag>
+                    <sp-tag disabled deletable>Tag 5</sp-tag>
+                </sp-tags>
+            `);
+        await elementUpdated(el);
+        const tag2 = el.querySelector('sp-tag:nth-child(2)');
+        const tag4 = el.querySelector('sp-tag:nth-child(4)');
+        tag2.focus();
+        await elementUpdated(el);
+        el.dispatchEvent(enterEvent());
+        el.dispatchEvent(endEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag4).to.be.true;
+        el.dispatchEvent(homeEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag2).to.be.true;
+        el.dispatchEvent(arrowUpEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag4).to.be.true;
+        el.dispatchEvent(arrowDownEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag2).to.be.true;
+    });
+    it('will only tab index [deletable] children', async () => {
+        const el = await fixture(html `
+                <sp-tags>
+                    <sp-tag deletable>Tag 1</sp-tag>
+                    <sp-tag>Tag 2</sp-tag>
+                    <sp-tag>Tag 3</sp-tag>
+                    <sp-tag>Tag 4</sp-tag>
+                    <sp-tag deletable>Tag 5</sp-tag>
+                </sp-tags>
+            `);
+        await elementUpdated(el);
+        const tag1 = el.querySelector('sp-tag:nth-child(1)');
+        const tag5 = el.querySelector('sp-tag:nth-child(5)');
+        tag1.focus();
+        await elementUpdated(el);
+        el.dispatchEvent(enterEvent());
+        el.dispatchEvent(endEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag5).to.be.true;
+        el.dispatchEvent(homeEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag1).to.be.true;
+        el.dispatchEvent(arrowUpEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag5).to.be.true;
+        el.dispatchEvent(arrowUpEvent());
+        await elementUpdated(el);
+        expect(document.activeElement === tag1).to.be.true;
+    });
+    it('utilises floating tab index for [deletable] children', async () => {
+        const el = await fixture(html `
+                <div>
+                    <a href="#">Heyo</a>
+                    <sp-tags>
+                        <sp-tag deletable>Tag 1</sp-tag>
+                        <sp-tag deletable>Tag 2</sp-tag>
+                    </sp-tags>
+                    <sp-tags>
+                        <sp-tag deletable>Tag A</sp-tag>
+                        <sp-tag deletable>Tag B</sp-tag>
+                    </sp-tags>
+                </div>
+            `);
+        const anchor = el.querySelector('a');
+        anchor.focus();
+        expect(document.activeElement === anchor).to.be.true;
+        const tagset1 = el.querySelector('sp-tags:nth-child(2)');
+        const tagset2 = el.querySelector('sp-tags:nth-child(3)');
+        const tag1 = tagset1.querySelector('sp-tag:nth-child(1)');
+        const tagA = tagset2.querySelector('sp-tag:nth-child(1)');
+        const tagB = tagset2.querySelector('sp-tag:nth-child(2)');
+        await executeServerCommand('send-keys', {
+            press: 'Tab',
+        });
+        expect(document.activeElement === tag1).to.be.true;
+        await executeServerCommand('send-keys', {
+            press: 'Tab',
+        });
+        expect(document.activeElement === tagA).to.be.true;
+        tagset2.dispatchEvent(arrowDownEvent());
+        expect(document.activeElement === tagB).to.be.true;
+    });
+    it('loads accepts "PageUp" and "PageDown" keys', async () => {
+        const el = await fixture(html `
+                <div>
+                    <sp-tags>
+                        <sp-tag deletable>Tag 1</sp-tag>
+                    </sp-tags>
+                    <sp-tags>
+                        <sp-tag deletable>Tag 2</sp-tag>
+                    </sp-tags>
+                    <sp-tags></sp-tags>
+                    <sp-tags>
+                        <sp-tag disabled deletable>Tag 3</sp-tag>
+                        <sp-tag deletable>Tag 4</sp-tag>
+                    </sp-tags>
+                </div>
+            `);
+        const tags1 = el.querySelector('sp-tags:nth-child(1)');
+        const tags2 = el.querySelector('sp-tags:nth-child(2)');
+        const tags4 = el.querySelector('sp-tags:nth-child(4)');
+        const tag1 = tags1.querySelector('sp-tag');
+        const tag2 = tags2.querySelector('sp-tag');
+        const tag4 = tags4.querySelector('sp-tag:not([disabled])');
+        tag1.focus();
+        tag1.dispatchEvent(pageUpEvent());
+        expect(document.activeElement === tag4).to.be.true;
+        tag4.dispatchEvent(pageDownEvent());
+        expect(document.activeElement === tag1).to.be.true;
+        tag1.dispatchEvent(pageDownEvent());
+        expect(document.activeElement === tag2).to.be.true;
+        tag2.dispatchEvent(pageDownEvent());
+        expect(document.activeElement === tag4, 'Focuses `tag4`').to.be.true;
+    });
+});
+//# sourceMappingURL=tags.test.js.map

package/test/tags.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags.test.js","sourceRoot":"","sources":["tags.test.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit/static-html.js';\n\nimport '../sp-tag.js';\nimport '../sp-tags.js';\nimport { Tag, Tags } from '..';\nimport {\n    arrowDownEvent,\n    arrowLeftEvent,\n    arrowRightEvent,\n    arrowUpEvent,\n    endEvent,\n    enterEvent,\n    homeEvent,\n    pageDownEvent,\n    pageUpEvent,\n} from '../../../test/testing-helpers.js';\nimport { executeServerCommand } from '@web/test-runner-commands';\n\ndescribe('Tags', () => {\n    it('loads default tags accessibly', async () => {\n        const el = await fixture<Tags>(\n            html`\n                <sp-tags>\n                    <sp-tag>Tag 1</sp-tag>\n                    <sp-tag invalid>Tag 2</sp-tag>\n                    <sp-tag disabled>Tag 3</sp-tag>\n                </sp-tags>\n            `\n        );\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n        expect(el.hasAttribute('role')).to.be.true;\n        expect(el.hasAttribute('aria-label')).to.be.true;\n    });\n    it('does not accept focus when empty', async () => {\n        const el = await fixture<Tags>(\n            html`\n                <sp-tags></sp-tags>\n            `\n        );\n\n        await elementUpdated(el);\n\n        expect(document.activeElement === el).to.be.false;\n\n        el.focus();\n        await elementUpdated(el);\n\n        expect(document.activeElement === el).to.be.false;\n    });\n    it('does not accept focus when no tag has `deletable`', async () => {\n        const el = await fixture<Tags>(\n            html`\n                <sp-tags>\n                    <sp-tag>Tag 1</sp-tag>\n                    <sp-tag invalid>Tag 2</sp-tag>\n                    <sp-tag disabled>Tag 3</sp-tag>\n                </sp-tags>\n            `\n        );\n        await elementUpdated(el);\n\n        const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n        const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n        const tag3 = el.querySelector('sp-tag:nth-child(3)') as Tag;\n\n        expect(document.activeElement === el).to.be.false;\n\n        el.focus();\n        await elementUpdated(el);\n\n        expect(document.activeElement === el).to.be.false;\n        expect(document.activeElement === tag1).to.be.false;\n        expect(document.activeElement === tag2).to.be.false;\n        expect(document.activeElement === tag3).to.be.false;\n    });\n    it('loads default tags with `role` and `aria-label` from the outside', async () => {\n        const el = await fixture<Tags>(\n            html`\n                <sp-tags>\n                    <sp-tag>Tag 1</sp-tag>\n                    <sp-tag invalid>Tag 2</sp-tag>\n                    <sp-tag disabled>Tag 3</sp-tag>\n                </sp-tags>\n            `\n        );\n\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n        expect(el.hasAttribute('role')).to.be.true;\n        expect(el.hasAttribute('aria-label')).to.be.true;\n    });\n    it('accepts keyboard events while focused', async () => {\n        const el = await fixture<Tags>(\n            html`\n                <sp-tags>\n                    <sp-tag deletable>Tag 1</sp-tag>\n                    <sp-tag deletable>Tag 2</sp-tag>\n                    <sp-tag deletable>Tag 3</sp-tag>\n                    <sp-tag deletable>Tag 4</sp-tag>\n                    <sp-tag deletable>Tag 5</sp-tag>\n                </sp-tags>\n            `\n        );\n\n        await elementUpdated(el);\n\n        const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n        const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n        const tag3 = el.querySelector('sp-tag:nth-child(3)') as Tag;\n        const tag4 = el.querySelector('sp-tag:nth-child(4)') as Tag;\n        const tag5 = el.querySelector('sp-tag:nth-child(5)') as Tag;\n\n        tag1.focus();\n        await elementUpdated(el);\n\n        el.dispatchEvent(pageUpEvent());\n        el.dispatchEvent(arrowRightEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag2).to.be.true;\n\n        el.dispatchEvent(arrowDownEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag3).to.be.true;\n\n        el.dispatchEvent(endEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag5).to.be.true;\n\n        el.dispatchEvent(arrowLeftEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag4).to.be.true;\n\n        el.dispatchEvent(arrowUpEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag3).to.be.true;\n\n        el.dispatchEvent(homeEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag1).to.be.true;\n\n        tag1.blur();\n    });\n    it('will not focus [disabled] children', async () => {\n        const el = await fixture<Tags>(\n            html`\n                <sp-tags>\n                    <sp-tag disabled deletable>Tag 1</sp-tag>\n                    <sp-tag deletable>Tag 2</sp-tag>\n                    <sp-tag deletable>Tag 3</sp-tag>\n                    <sp-tag deletable>Tag 4</sp-tag>\n                    <sp-tag disabled deletable>Tag 5</sp-tag>\n                </sp-tags>\n            `\n        );\n\n        await elementUpdated(el);\n\n        const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n        const tag4 = el.querySelector('sp-tag:nth-child(4)') as Tag;\n\n        tag2.focus();\n        await elementUpdated(el);\n\n        el.dispatchEvent(enterEvent());\n        el.dispatchEvent(endEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag4).to.be.true;\n\n        el.dispatchEvent(homeEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag2).to.be.true;\n\n        el.dispatchEvent(arrowUpEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag4).to.be.true;\n\n        el.dispatchEvent(arrowDownEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag2).to.be.true;\n    });\n    it('will only tab index [deletable] children', async () => {\n        const el = await fixture<Tags>(\n            html`\n                <sp-tags>\n                    <sp-tag deletable>Tag 1</sp-tag>\n                    <sp-tag>Tag 2</sp-tag>\n                    <sp-tag>Tag 3</sp-tag>\n                    <sp-tag>Tag 4</sp-tag>\n                    <sp-tag deletable>Tag 5</sp-tag>\n                </sp-tags>\n            `\n        );\n\n        await elementUpdated(el);\n\n        const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n        const tag5 = el.querySelector('sp-tag:nth-child(5)') as Tag;\n\n        tag1.focus();\n        await elementUpdated(el);\n\n        el.dispatchEvent(enterEvent());\n        el.dispatchEvent(endEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag5).to.be.true;\n\n        el.dispatchEvent(homeEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag1).to.be.true;\n\n        el.dispatchEvent(arrowUpEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag5).to.be.true;\n\n        el.dispatchEvent(arrowUpEvent());\n        await elementUpdated(el);\n\n        expect(document.activeElement === tag1).to.be.true;\n    });\n    it('utilises floating tab index for [deletable] children', async () => {\n        const el = await fixture<Tags>(\n            html`\n                <div>\n                    <a href=\"#\">Heyo</a>\n                    <sp-tags>\n                        <sp-tag deletable>Tag 1</sp-tag>\n                        <sp-tag deletable>Tag 2</sp-tag>\n                    </sp-tags>\n                    <sp-tags>\n                        <sp-tag deletable>Tag A</sp-tag>\n                        <sp-tag deletable>Tag B</sp-tag>\n                    </sp-tags>\n                </div>\n            `\n        );\n        const anchor = el.querySelector('a') as HTMLElement;\n\n        anchor.focus();\n        expect(document.activeElement === anchor).to.be.true;\n\n        const tagset1 = el.querySelector('sp-tags:nth-child(2)') as Tags;\n        const tagset2 = el.querySelector('sp-tags:nth-child(3)') as Tags;\n\n        const tag1 = tagset1.querySelector('sp-tag:nth-child(1)') as Tag;\n        const tagA = tagset2.querySelector('sp-tag:nth-child(1)') as Tag;\n        const tagB = tagset2.querySelector('sp-tag:nth-child(2)') as Tag;\n\n        await executeServerCommand('send-keys', {\n            press: 'Tab',\n        });\n        expect(document.activeElement === tag1).to.be.true;\n\n        await executeServerCommand('send-keys', {\n            press: 'Tab',\n        });\n        expect(document.activeElement === tagA).to.be.true;\n\n        tagset2.dispatchEvent(arrowDownEvent());\n        expect(document.activeElement === tagB).to.be.true;\n    });\n    it('loads accepts \"PageUp\" and \"PageDown\" keys', async () => {\n        const el = await fixture<HTMLDivElement>(\n            html`\n                <div>\n                    <sp-tags>\n                        <sp-tag deletable>Tag 1</sp-tag>\n                    </sp-tags>\n                    <sp-tags>\n                        <sp-tag deletable>Tag 2</sp-tag>\n                    </sp-tags>\n                    <sp-tags></sp-tags>\n                    <sp-tags>\n                        <sp-tag disabled deletable>Tag 3</sp-tag>\n                        <sp-tag deletable>Tag 4</sp-tag>\n                    </sp-tags>\n                </div>\n            `\n        );\n\n        const tags1 = el.querySelector('sp-tags:nth-child(1)') as Tags;\n        const tags2 = el.querySelector('sp-tags:nth-child(2)') as Tags;\n        const tags4 = el.querySelector('sp-tags:nth-child(4)') as Tags;\n\n        const tag1 = tags1.querySelector('sp-tag') as Tag;\n        const tag2 = tags2.querySelector('sp-tag') as Tag;\n        const tag4 = tags4.querySelector('sp-tag:not([disabled])') as Tag;\n\n        tag1.focus();\n        tag1.dispatchEvent(pageUpEvent());\n\n        expect(document.activeElement === tag4).to.be.true;\n\n        tag4.dispatchEvent(pageDownEvent());\n\n        expect(document.activeElement === tag1).to.be.true;\n\n        tag1.dispatchEvent(pageDownEvent());\n\n        expect(document.activeElement === tag2).to.be.true;\n\n        tag2.dispatchEvent(pageDownEvent());\n\n        expect(document.activeElement === tag4, 'Focuses `tag4`').to.be.true;\n    });\n});\n"]}