@spectrum-web-components/tags 0.9.0-devmode.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +6 -6
- package/sp-tag.js +1 -2
- package/sp-tag.js.map +1 -1
- package/sp-tags.js +1 -2
- package/sp-tags.js.map +1 -1
- package/src/Tag.js +7 -114
- package/src/Tag.js.map +1 -1
- package/src/Tags.js +2 -92
- package/src/Tags.js.map +1 -1
- package/src/index.js +1 -2
- package/src/index.js.map +1 -1
- package/src/spectrum-tag.css.js +2 -4
- package/src/spectrum-tag.css.js.map +1 -1
- package/src/spectrum-tags.css.js +2 -4
- package/src/spectrum-tags.css.js.map +1 -1
- package/src/tag.css.js +2 -4
- package/src/tag.css.js.map +1 -1
- package/src/tags.css.js +2 -4
- package/src/tags.css.js.map +1 -1
- package/stories/tags-sizes.stories.js +5 -20
- package/stories/tags-sizes.stories.js.map +1 -1
- package/stories/tags.stories.js +12 -32
- package/stories/tags.stories.js.map +1 -1
- package/test/benchmark/basic-test.js +1 -5
- package/test/benchmark/basic-test.js.map +1 -1
- package/test/tag.test.js +10 -95
- package/test/tag.test.js.map +1 -1
- package/test/tags-sizes.test-vrt.js +1 -3
- package/test/tags-sizes.test-vrt.js.map +1 -1
- package/test/tags.test-vrt.js +1 -3
- package/test/tags.test-vrt.js.map +1 -1
- package/test/tags.test.js +11 -178
- package/test/tags.test.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tags",
|
|
3
|
-
"version": "0.9.0
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -66,10 +66,10 @@
|
|
|
66
66
|
"lit-html"
|
|
67
67
|
],
|
|
68
68
|
"dependencies": {
|
|
69
|
-
"@spectrum-web-components/base": "^0.
|
|
70
|
-
"@spectrum-web-components/button": "^0.19.0
|
|
71
|
-
"@spectrum-web-components/reactive-controllers": "^0.
|
|
72
|
-
"@spectrum-web-components/shared": "^0.15.0
|
|
69
|
+
"@spectrum-web-components/base": "^0.7.0",
|
|
70
|
+
"@spectrum-web-components/button": "^0.19.0",
|
|
71
|
+
"@spectrum-web-components/reactive-controllers": "^0.3.0",
|
|
72
|
+
"@spectrum-web-components/shared": "^0.15.0",
|
|
73
73
|
"tslib": "^2.0.0"
|
|
74
74
|
},
|
|
75
75
|
"devDependencies": {
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"./sp-*.js",
|
|
83
83
|
"./**/*.dev.js"
|
|
84
84
|
],
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "05c81318844160db3f8156144106e643507fef97"
|
|
86
86
|
}
|
package/sp-tag.js
CHANGED
package/sp-tag.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tag.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { Tag } from './src/Tag.js';\n\ncustomElements.define('sp-tag', Tag);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tag': Tag;\n }\n}\n"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,mCAEA,eAAe,OAAO,SAAU,CAAG",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-tags.js
CHANGED
package/sp-tags.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tags.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { Tags } from './src/Tags.js';\n\ncustomElements.define('sp-tags', Tags);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tags': Tags;\n }\n}\n"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,qCAEA,eAAe,OAAO,UAAW,CAAI",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Tag.js
CHANGED
|
@@ -1,88 +1,11 @@
|
|
|
1
|
-
var
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
-
if (decorator = decorators[i])
|
|
7
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
-
if (kind && result)
|
|
9
|
-
__defProp(target, key, result);
|
|
10
|
-
return result;
|
|
11
|
-
};
|
|
12
|
-
import {
|
|
13
|
-
html,
|
|
14
|
-
SizedMixin,
|
|
15
|
-
SpectrumElement
|
|
16
|
-
} from "@spectrum-web-components/base";
|
|
17
|
-
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
18
|
-
import "@spectrum-web-components/button/sp-clear-button.js";
|
|
19
|
-
import styles from "./tag.css.js";
|
|
20
|
-
export class Tag extends SizedMixin(SpectrumElement, {
|
|
21
|
-
validSizes: ["s", "m", "l"]
|
|
22
|
-
}) {
|
|
23
|
-
constructor() {
|
|
24
|
-
super();
|
|
25
|
-
this.deletable = false;
|
|
26
|
-
this.disabled = false;
|
|
27
|
-
this.readonly = false;
|
|
28
|
-
this.handleFocusin = () => {
|
|
29
|
-
this.addEventListener("focusout", this.handleFocusout);
|
|
30
|
-
this.addEventListener("keydown", this.handleKeydown);
|
|
31
|
-
};
|
|
32
|
-
this.handleFocusout = () => {
|
|
33
|
-
this.removeEventListener("keydown", this.handleKeydown);
|
|
34
|
-
this.removeEventListener("focusout", this.handleFocusout);
|
|
35
|
-
};
|
|
36
|
-
this.handleKeydown = (event) => {
|
|
37
|
-
if (!this.deletable) {
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
const { code } = event;
|
|
41
|
-
switch (code) {
|
|
42
|
-
case "Backspace":
|
|
43
|
-
case "Space":
|
|
44
|
-
case "Delete":
|
|
45
|
-
this.delete();
|
|
46
|
-
return;
|
|
47
|
-
default:
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
this.addEventListener("focusin", this.handleFocusin);
|
|
52
|
-
}
|
|
53
|
-
static get styles() {
|
|
54
|
-
return [styles];
|
|
55
|
-
}
|
|
56
|
-
get hasIcon() {
|
|
57
|
-
return !!this.querySelector('[slot="icon"]');
|
|
58
|
-
}
|
|
59
|
-
get hasAvatar() {
|
|
60
|
-
return !!this.querySelector('[slot="avatar"]');
|
|
61
|
-
}
|
|
62
|
-
delete() {
|
|
63
|
-
if (this.readonly) {
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
this.dispatchEvent(new Event("delete", {
|
|
67
|
-
bubbles: true
|
|
68
|
-
}));
|
|
69
|
-
}
|
|
70
|
-
render() {
|
|
71
|
-
const slots = [];
|
|
72
|
-
if (this.hasAvatar) {
|
|
73
|
-
slots.push(html`
|
|
1
|
+
var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var a=(l,e,s,r)=>{for(var t=r>1?void 0:r?h(e,s):e,o=l.length-1,d;o>=0;o--)(d=l[o])&&(t=(r?d(e,s,t):d(t))||t);return r&&t&&u(e,s,t),t};import{html as i,SizedMixin as c,SpectrumElement as p}from"@spectrum-web-components/base";import{property as n}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/button/sp-clear-button.js";import b from"./tag.css.js";export class Tag extends c(p,{validSizes:["s","m","l"]}){constructor(){super();this.deletable=!1;this.disabled=!1;this.readonly=!1;this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)};this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)};this.handleKeydown=e=>{if(!this.deletable)return;const{code:s}=e;switch(s){case"Backspace":case"Space":case"Delete":this.delete();return;default:return}};this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[b]}get hasIcon(){return!!this.querySelector('[slot="icon"]')}get hasAvatar(){return!!this.querySelector('[slot="avatar"]')}delete(){this.readonly||this.dispatchEvent(new Event("delete",{bubbles:!0}))}render(){const e=[];return this.hasAvatar&&e.push(i`
|
|
74
2
|
<slot name="avatar"></slot>
|
|
75
|
-
`)
|
|
76
|
-
}
|
|
77
|
-
if (this.hasIcon) {
|
|
78
|
-
slots.push(html`
|
|
3
|
+
`),this.hasIcon&&e.push(i`
|
|
79
4
|
<slot name="icon"></slot>
|
|
80
|
-
`)
|
|
81
|
-
|
|
82
|
-
return html`
|
|
83
|
-
${slots}
|
|
5
|
+
`),i`
|
|
6
|
+
${e}
|
|
84
7
|
<span class="label"><slot></slot></span>
|
|
85
|
-
${this.deletable
|
|
8
|
+
${this.deletable?i`
|
|
86
9
|
<sp-clear-button
|
|
87
10
|
class="clear-button"
|
|
88
11
|
?disabled=${this.disabled}
|
|
@@ -91,36 +14,6 @@ export class Tag extends SizedMixin(SpectrumElement, {
|
|
|
91
14
|
tabindex="-1"
|
|
92
15
|
@click=${this.delete}
|
|
93
16
|
></sp-clear-button>
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}
|
|
97
|
-
firstUpdated(changes) {
|
|
98
|
-
super.firstUpdated(changes);
|
|
99
|
-
if (!this.hasAttribute("role")) {
|
|
100
|
-
this.setAttribute("role", "listitem");
|
|
101
|
-
}
|
|
102
|
-
if (this.deletable) {
|
|
103
|
-
this.setAttribute("tabindex", !this.disabled && this.matches(":first-of-type:not([disabled])") ? "0" : "-1");
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
updated(changes) {
|
|
107
|
-
super.updated(changes);
|
|
108
|
-
if (changes.has("disabled")) {
|
|
109
|
-
if (this.disabled) {
|
|
110
|
-
this.setAttribute("aria-disabled", "true");
|
|
111
|
-
} else {
|
|
112
|
-
this.removeAttribute("aria-disabled");
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
__decorateClass([
|
|
118
|
-
property({ type: Boolean, reflect: true })
|
|
119
|
-
], Tag.prototype, "deletable", 2);
|
|
120
|
-
__decorateClass([
|
|
121
|
-
property({ type: Boolean, reflect: true })
|
|
122
|
-
], Tag.prototype, "disabled", 2);
|
|
123
|
-
__decorateClass([
|
|
124
|
-
property({ type: Boolean, reflect: true })
|
|
125
|
-
], Tag.prototype, "readonly", 2);
|
|
17
|
+
`:i``}
|
|
18
|
+
`}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("role")||this.setAttribute("role","listitem"),this.deletable&&this.setAttribute("tabindex",!this.disabled&&this.matches(":first-of-type:not([disabled])")?"0":"-1")}updated(e){super.updated(e),e.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}a([n({type:Boolean,reflect:!0})],Tag.prototype,"deletable",2),a([n({type:Boolean,reflect:!0})],Tag.prototype,"disabled",2),a([n({type:Boolean,reflect:!0})],Tag.prototype,"readonly",2);
|
|
126
19
|
//# sourceMappingURL=Tag.js.map
|
package/src/Tag.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tag.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/button/sp-clear-button.js';\n\nimport styles from './tag.css.js';\n\n/**\n * @element sp-tag\n *\n * @slot - text content for labeling the tag\n * @slot avatar - an avatar element to display within the Tag\n * @slot icon - an icon element to display within the Tag\n */\nexport class Tag extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm', 'l'],\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public deletable = false;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n private get hasIcon(): boolean {\n return !!this.querySelector('[slot=\"icon\"]');\n }\n\n private get hasAvatar(): boolean {\n return !!this.querySelector('[slot=\"avatar\"]');\n }\n\n constructor() {\n super();\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n private handleFocusin = (): void => {\n this.addEventListener('focusout', this.handleFocusout);\n this.addEventListener('keydown', this.handleKeydown);\n };\n\n private handleFocusout = (): void => {\n this.removeEventListener('keydown', this.handleKeydown);\n this.removeEventListener('focusout', this.handleFocusout);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.deletable) {\n return;\n }\n const { code } = event;\n switch (code) {\n case 'Backspace':\n case 'Space':\n case 'Delete':\n this.delete();\n return;\n default:\n return;\n }\n };\n\n private delete(): void {\n if (this.readonly) {\n return;\n }\n this.dispatchEvent(\n new Event('delete', {\n bubbles: true,\n })\n );\n }\n\n protected override render(): TemplateResult {\n const slots: TemplateResult[] = [];\n if (this.hasAvatar) {\n slots.push(\n html`\n <slot name=\"avatar\"></slot>\n `\n );\n }\n if (this.hasIcon) {\n slots.push(\n html`\n <slot name=\"icon\"></slot>\n `\n );\n }\n return html`\n ${slots}\n <span class=\"label\"><slot></slot></span>\n ${this.deletable\n ? html`\n <sp-clear-button\n class=\"clear-button\"\n ?disabled=${this.disabled}\n label=\"Remove\"\n size=\"s\"\n tabindex=\"-1\"\n @click=${this.delete}\n ></sp-clear-button>\n `\n : html``}\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n if (this.deletable) {\n this.setAttribute(\n 'tabindex',\n !this.disabled && this.matches(':first-of-type:not([disabled])')\n ? '0'\n : '-1'\n );\n }\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "wMAYA,0FAQA,2EAEA,2DAEA,4BASO,aAAM,WAAY,GAAW,EAAiB,CACjD,WAAY,CAAC,IAAK,IAAK,GAAG,CAC9B,CAAC,CAAE,CAsBC,aAAc,CACV,MAAM,EAjBH,eAAY,GAGZ,cAAW,GAGX,cAAW,GAeV,mBAAgB,IAAY,CAChC,KAAK,iBAAiB,WAAY,KAAK,cAAc,EACrD,KAAK,iBAAiB,UAAW,KAAK,aAAa,CACvD,EAEQ,oBAAiB,IAAY,CACjC,KAAK,oBAAoB,UAAW,KAAK,aAAa,EACtD,KAAK,oBAAoB,WAAY,KAAK,cAAc,CAC5D,EAEQ,mBAAgB,AAAC,GAA+B,CACpD,GAAI,CAAC,KAAK,UACN,OAEJ,KAAM,CAAE,QAAS,EACjB,OAAQ,OACC,gBACA,YACA,SACD,KAAK,OAAO,EACZ,eAEA,OAEZ,EA3BI,KAAK,iBAAiB,UAAW,KAAK,aAAa,CACvD,WAxB2B,SAAyB,CAChD,MAAO,CAAC,CAAM,CAClB,IAWY,UAAmB,CAC3B,MAAO,CAAC,CAAC,KAAK,cAAc,eAAe,CAC/C,IAEY,YAAqB,CAC7B,MAAO,CAAC,CAAC,KAAK,cAAc,iBAAiB,CACjD,CAiCQ,QAAe,CACnB,AAAI,KAAK,UAGT,KAAK,cACD,GAAI,OAAM,SAAU,CAChB,QAAS,EACb,CAAC,CACL,CACJ,CAEmB,QAAyB,CACxC,KAAM,GAA0B,CAAC,EACjC,MAAI,MAAK,WACL,EAAM,KACF;AAAA;AAAA,iBAGJ,EAEA,KAAK,SACL,EAAM,KACF;AAAA;AAAA,iBAGJ,EAEG;AAAA,cACD;AAAA;AAAA,cAEA,KAAK,UACD;AAAA;AAAA;AAAA,sCAGoB,KAAK;AAAA;AAAA;AAAA;AAAA,mCAIR,KAAK;AAAA;AAAA,oBAGtB;AAAA,SAEd,CAEmB,aAAa,EAA+B,CAC3D,MAAM,aAAa,CAAO,EACrB,KAAK,aAAa,MAAM,GACzB,KAAK,aAAa,OAAQ,UAAU,EAEpC,KAAK,WACL,KAAK,aACD,WACA,CAAC,KAAK,UAAY,KAAK,QAAQ,gCAAgC,EACzD,IACA,IACV,CAER,CAEmB,QAAQ,EAA+B,CACtD,MAAM,QAAQ,CAAO,EACjB,EAAQ,IAAI,UAAU,GACtB,CAAI,KAAK,SACL,KAAK,aAAa,gBAAiB,MAAM,EAEzC,KAAK,gBAAgB,eAAe,EAGhD,CACJ,CArHW,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AARJ,IAQI,yBAGA,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AAXJ,IAWI,wBAGA,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AAdJ,IAcI",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Tags.js
CHANGED
|
@@ -1,94 +1,4 @@
|
|
|
1
|
-
var
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
-
if (decorator = decorators[i])
|
|
7
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
-
if (kind && result)
|
|
9
|
-
__defProp(target, key, result);
|
|
10
|
-
return result;
|
|
11
|
-
};
|
|
12
|
-
import {
|
|
13
|
-
html,
|
|
14
|
-
SpectrumElement
|
|
15
|
-
} from "@spectrum-web-components/base";
|
|
16
|
-
import { queryAssignedNodes } from "@spectrum-web-components/base/src/decorators.js";
|
|
17
|
-
import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
|
|
18
|
-
import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
|
|
19
|
-
import { Tag } from "./Tag.js";
|
|
20
|
-
import styles from "./tags.css.js";
|
|
21
|
-
export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
|
|
22
|
-
constructor() {
|
|
23
|
-
super();
|
|
24
|
-
this.rovingTabindexController = new RovingTabindexController(this, {
|
|
25
|
-
focusInIndex: (elements) => {
|
|
26
|
-
return elements.findIndex((el) => {
|
|
27
|
-
return !el.disabled && el.deletable;
|
|
28
|
-
});
|
|
29
|
-
},
|
|
30
|
-
elements: () => this.tags,
|
|
31
|
-
isFocusableElement: (el) => !el.disabled && el.deletable
|
|
32
|
-
});
|
|
33
|
-
this.handleFocusin = () => {
|
|
34
|
-
this.addEventListener("focusout", this.handleFocusout);
|
|
35
|
-
this.addEventListener("keydown", this.handleKeydown);
|
|
36
|
-
};
|
|
37
|
-
this.handleKeydown = (event) => {
|
|
38
|
-
const { code } = event;
|
|
39
|
-
if (code !== "PageUp" && code !== "PageDown")
|
|
40
|
-
return;
|
|
41
|
-
const circularIndexedElement = (list, index) => list[(list.length + index) % list.length];
|
|
42
|
-
const tagsSiblings = [
|
|
43
|
-
...this.getRootNode().querySelectorAll("sp-tags")
|
|
44
|
-
];
|
|
45
|
-
if (tagsSiblings.length < 2) {
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
event.preventDefault();
|
|
49
|
-
const currentIndex = tagsSiblings.indexOf(this);
|
|
50
|
-
const offset = code === "PageUp" ? -1 : 1;
|
|
51
|
-
let nextTagsIndex = currentIndex + offset;
|
|
52
|
-
let nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);
|
|
53
|
-
while (!nextTags.tags.length) {
|
|
54
|
-
nextTagsIndex += offset;
|
|
55
|
-
nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);
|
|
56
|
-
}
|
|
57
|
-
nextTags.focus();
|
|
58
|
-
};
|
|
59
|
-
this.handleFocusout = () => {
|
|
60
|
-
this.removeEventListener("keydown", this.handleKeydown);
|
|
61
|
-
this.removeEventListener("focusout", this.handleFocusout);
|
|
62
|
-
};
|
|
63
|
-
this.addEventListener("focusin", this.handleFocusin);
|
|
64
|
-
}
|
|
65
|
-
static get styles() {
|
|
66
|
-
return [styles];
|
|
67
|
-
}
|
|
68
|
-
get tags() {
|
|
69
|
-
return this.defaultNodes.filter((node) => node instanceof Tag);
|
|
70
|
-
}
|
|
71
|
-
focus() {
|
|
72
|
-
this.rovingTabindexController.focus();
|
|
73
|
-
}
|
|
74
|
-
handleSlotchange() {
|
|
75
|
-
this.rovingTabindexController.clearElementCache();
|
|
76
|
-
}
|
|
77
|
-
render() {
|
|
78
|
-
return html`
|
|
1
|
+
var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=(r,e,s,o)=>{for(var t=o>1?void 0:o?g(e,s):e,i=r.length-1,n;i>=0;i--)(n=r[i])&&(t=(o?n(e,s,t):n(t))||t);return o&&t&&c(e,s,t),t};import{html as f,SpectrumElement as m}from"@spectrum-web-components/base";import{queryAssignedNodes as p}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as v}from"@spectrum-web-components/shared/src/focus-visible.js";import{RovingTabindexController as b}from"@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";import{Tag as T}from"./Tag.js";import x from"./tags.css.js";export class Tags extends v(m){constructor(){super();this.rovingTabindexController=new b(this,{focusInIndex:e=>e.findIndex(s=>!s.disabled&&s.deletable),elements:()=>this.tags,isFocusableElement:e=>!e.disabled&&e.deletable});this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)};this.handleKeydown=e=>{const{code:s}=e;if(s!=="PageUp"&&s!=="PageDown")return;const o=(d,h)=>d[(d.length+h)%d.length],t=[...this.getRootNode().querySelectorAll("sp-tags")];if(t.length<2)return;e.preventDefault();const i=t.indexOf(this),n=s==="PageUp"?-1:1;let l=i+n,a=o(t,l);for(;!a.tags.length;)l+=n,a=o(t,l);a.focus()};this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)};this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[x]}get tags(){return this.defaultNodes.filter(e=>e instanceof T)}focus(){this.rovingTabindexController.focus()}handleSlotchange(){this.rovingTabindexController.clearElementCache()}render(){return f`
|
|
79
2
|
<slot @slotchange=${this.handleSlotchange}></slot>
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
firstUpdated() {
|
|
83
|
-
if (!this.hasAttribute("role")) {
|
|
84
|
-
this.setAttribute("role", "list");
|
|
85
|
-
}
|
|
86
|
-
if (!this.hasAttribute("aria-label")) {
|
|
87
|
-
this.setAttribute("aria-label", "Tags");
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
__decorateClass([
|
|
92
|
-
queryAssignedNodes("")
|
|
93
|
-
], Tags.prototype, "defaultNodes", 2);
|
|
3
|
+
`}firstUpdated(){this.hasAttribute("role")||this.setAttribute("role","list"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Tags")}}u([p("")],Tags.prototype,"defaultNodes",2);
|
|
94
4
|
//# sourceMappingURL=Tags.js.map
|
package/src/Tags.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tags.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { queryAssignedNodes } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport { Tag } from './Tag.js';\n\nimport styles from './tags.css.js';\n\n/**\n * @element sp-tags\n *\n * @slot - Tag elements to manage as a group\n */\nexport class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @queryAssignedNodes('')\n public defaultNodes!: Node[];\n\n public get tags(): Tag[] {\n return this.defaultNodes.filter(\n (node) => (node as HTMLElement) instanceof Tag\n ) as Tag[];\n }\n\n rovingTabindexController = new RovingTabindexController<Tag>(this, {\n focusInIndex: (elements: Tag[]) => {\n return elements.findIndex((el) => {\n return !el.disabled && el.deletable;\n });\n },\n elements: () => this.tags,\n isFocusableElement: (el: Tag) => !el.disabled && el.deletable,\n });\n\n constructor() {\n super();\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n public override focus(): void {\n this.rovingTabindexController.focus();\n }\n\n private handleFocusin = (): void => {\n this.addEventListener('focusout', this.handleFocusout);\n this.addEventListener('keydown', this.handleKeydown);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n if (code !== 'PageUp' && code !== 'PageDown') return;\n\n const circularIndexedElement = <T extends HTMLElement>(\n list: T[],\n index: number\n ): T => list[(list.length + index) % list.length];\n const tagsSiblings = [\n ...(this.getRootNode() as Document).querySelectorAll<Tags>(\n 'sp-tags'\n ),\n ];\n if (tagsSiblings.length < 2) {\n return;\n }\n event.preventDefault();\n const currentIndex = tagsSiblings.indexOf(this);\n const offset = code === 'PageUp' ? -1 : 1;\n let nextTagsIndex = currentIndex + offset;\n let nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);\n while (!nextTags.tags.length) {\n nextTagsIndex += offset;\n nextTags = circularIndexedElement(tagsSiblings, nextTagsIndex);\n }\n nextTags.focus();\n };\n\n private handleFocusout = (): void => {\n this.removeEventListener('keydown', this.handleKeydown);\n this.removeEventListener('focusout', this.handleFocusout);\n };\n\n private handleSlotchange(): void {\n this.rovingTabindexController.clearElementCache();\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot @slotchange=${this.handleSlotchange}></slot>\n `;\n }\n\n protected override firstUpdated(): void {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'list');\n }\n if (!this.hasAttribute('aria-label')) {\n this.setAttribute('aria-label', 'Tags');\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "wMAYA,0EAMA,qFACA,iGACA,+GAEA,+BAEA,6BAOO,aAAM,YAAa,GAA0B,CAAe,CAAE,CAwBjE,aAAc,CACV,MAAM,EAXV,8BAA2B,GAAI,GAA8B,KAAM,CAC/D,aAAc,AAAC,GACJ,EAAS,UAAU,AAAC,GAChB,CAAC,EAAG,UAAY,EAAG,SAC7B,EAEL,SAAU,IAAM,KAAK,KACrB,mBAAoB,AAAC,GAAY,CAAC,EAAG,UAAY,EAAG,SACxD,CAAC,EAWO,mBAAgB,IAAY,CAChC,KAAK,iBAAiB,WAAY,KAAK,cAAc,EACrD,KAAK,iBAAiB,UAAW,KAAK,aAAa,CACvD,EAEQ,mBAAgB,AAAC,GAA+B,CACpD,KAAM,CAAE,QAAS,EACjB,GAAI,IAAS,UAAY,IAAS,WAAY,OAE9C,KAAM,GAAyB,CAC3B,EACA,IACI,EAAM,GAAK,OAAS,GAAS,EAAK,QACpC,EAAe,CACjB,GAAI,KAAK,YAAY,EAAe,iBAChC,SACJ,CACJ,EACA,GAAI,EAAa,OAAS,EACtB,OAEJ,EAAM,eAAe,EACrB,KAAM,GAAe,EAAa,QAAQ,IAAI,EACxC,EAAS,IAAS,SAAW,GAAK,EACxC,GAAI,GAAgB,EAAe,EAC/B,EAAW,EAAuB,EAAc,CAAa,EACjE,KAAO,CAAC,EAAS,KAAK,QAClB,GAAiB,EACjB,EAAW,EAAuB,EAAc,CAAa,EAEjE,EAAS,MAAM,CACnB,EAEQ,oBAAiB,IAAY,CACjC,KAAK,oBAAoB,UAAW,KAAK,aAAa,EACtD,KAAK,oBAAoB,WAAY,KAAK,cAAc,CAC5D,EA3CI,KAAK,iBAAiB,UAAW,KAAK,aAAa,CACvD,WA1B2B,SAAyB,CAChD,MAAO,CAAC,CAAM,CAClB,IAKW,OAAc,CACrB,MAAO,MAAK,aAAa,OACrB,AAAC,GAAU,YAAgC,EAC/C,CACJ,CAiBgB,OAAc,CAC1B,KAAK,yBAAyB,MAAM,CACxC,CAwCQ,kBAAyB,CAC7B,KAAK,yBAAyB,kBAAkB,CACpD,CAEmB,QAAyB,CACxC,MAAO;AAAA,gCACiB,KAAK;AAAA,SAEjC,CAEmB,cAAqB,CACpC,AAAK,KAAK,aAAa,MAAM,GACzB,KAAK,aAAa,OAAQ,MAAM,EAE/B,KAAK,aAAa,YAAY,GAC/B,KAAK,aAAa,aAAc,MAAM,CAE9C,CACJ,CAnFW,GADP,AAAC,EAAmB,EAAE,GACf,AANJ,KAMI",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/index.js
CHANGED
package/src/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
4
|
"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\nexport * from './Tags.js';\nexport * from './Tag.js';\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,uBACA",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/spectrum-tag.css.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as t}from"@spectrum-web-components/base";const e=t`
|
|
3
2
|
:host([size=s]){--spectrum-tag-removable-texticon-text-font-weight:var(
|
|
4
3
|
--spectrum-tag-s-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)
|
|
5
4
|
);--spectrum-tag-texticon-border-size:var(
|
|
@@ -287,6 +286,5 @@ const styles = css`
|
|
|
287
286
|
)}:host([selected][invalid]:focus-visible) .clear-button{color:var(
|
|
288
287
|
--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-tag-icon-color-selected)
|
|
289
288
|
)}}
|
|
290
|
-
`;
|
|
291
|
-
export default styles;
|
|
289
|
+
`;export default e;
|
|
292
290
|
//# sourceMappingURL=spectrum-tag.css.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tag.css.ts"],
|
|
4
4
|
"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)}@media (forced-colors:active){:host{--spectrum-tag-s-removable-texticon-border-color-error-down:Highlight;--spectrum-tag-s-removable-texticon-border-color-error-hover:Highlight;--spectrum-tag-s-removable-texticon-icon-color:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-disabled:GrayText;--spectrum-tag-s-removable-texticon-icon-color-down:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-error:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-error-down:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-error-hover:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-error-selected:HighlightText;--spectrum-tag-s-removable-texticon-icon-color-hover:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-key-focus:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-selected:HighlightText;--spectrum-tag-s-removable-texticon-icon-color-selected-hover:HighlightText;--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus:HighlightText;--spectrum-tag-s-removable-texticon-text-color-down:ButtonText;--spectrum-tag-s-removable-texticon-text-color-error-down:ButtonText;--spectrum-tag-s-removable-texticon-text-color-error-hover:ButtonText;--spectrum-tag-s-removable-texticon-text-color-error-key-focus:ButtonText;--spectrum-tag-s-removable-texticon-text-color-error-selected:HighlightText;--spectrum-tag-s-removable-texticon-text-color-hover:ButtonText;--spectrum-tag-s-removable-texticon-text-color-key-focus:ButtonText;--spectrum-tag-s-removable-texticon-text-color-selected:HighlightText;--spectrum-tag-s-removable-texticon-text-color-selected-key-focus:HighlightText;--spectrum-tag-s-texticon-background-color:ButtonFace;--spectrum-tag-s-texticon-background-color-disabled:ButtonFace;--spectrum-tag-s-texticon-background-color-error-selected:Highlight;--spectrum-tag-s-texticon-background-color-error-selected-hover:Highlight;--spectrum-tag-s-texticon-background-color-hover:ButtonFace;--spectrum-tag-s-texticon-background-color-key-focus:ButtonFace;--spectrum-tag-s-texticon-background-color-selected:Highlight;--spectrum-tag-s-texticon-background-color-selected-hover:Highlight;--spectrum-tag-s-texticon-border-color:ButtonText;--spectrum-tag-s-texticon-border-color-disabled:GrayText;--spectrum-tag-s-texticon-border-color-error:Highlight;--spectrum-tag-s-texticon-border-color-error-hover:Highlight;--spectrum-tag-s-texticon-border-color-error-selected:HighlightText;--spectrum-tag-s-texticon-border-color-error-selected-hover:HighlightText;--spectrum-tag-s-texticon-border-color-error-selected-key-focus:HighlightText;--spectrum-tag-s-texticon-border-color-hover:ButtonText;--spectrum-tag-s-texticon-border-color-key-focus:ButtonText;--spectrum-tag-s-texticon-border-color-selected:HighlightText;--spectrum-tag-s-texticon-focusring-border-color-key-focus:ButtonText;--spectrum-tag-s-texticon-focusring-border-color-selected-key-focus:ButtonText;--spectrum-tag-s-texticon-icon-color-disabled:GrayText;--spectrum-tag-s-texticon-icon-color-error:ButtonText;--spectrum-tag-s-texticon-icon-color-error-hover:ButtonText;--spectrum-tag-s-texticon-icon-color-error-key-focus:ButtonText;--spectrum-tag-s-texticon-icon-color-error-selected-hover:HighlightText;--spectrum-tag-s-texticon-icon-color-selected:HighlightText;--spectrum-tag-s-texticon-text-color:ButtonText;--spectrum-tag-s-texticon-text-color-disabled:GrayText;--spectrum-tag-s-texticon-text-color-hover:ButtonText;--spectrum-tag-s-texticon-text-color-key-focus:ButtonText;--spectrum-tag-s-texticon-text-color-selected:HighlightText;--spectrum-tag-s-texticon-text-color-selected-key-focus:HighlightText;forced-color-adjust:none}:host([selected][invalid].focus-visible){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(\n--spectrum-alias-tag-focusring-border-color-selected-key-focus\n)\n)}:host([selected][invalid]:focus-visible){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(\n--spectrum-alias-tag-focusring-border-color-selected-key-focus\n)\n)}:host([selected][invalid].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiSf,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/spectrum-tags.css.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as t}from"@spectrum-web-components/base";const a=t`
|
|
3
2
|
:host{--spectrum-tag-border-size:var(
|
|
4
3
|
--spectrum-tag-s-border-size,var(--spectrum-alias-border-size-thin)
|
|
5
4
|
);--spectrum-tag-icon-gap:var(
|
|
@@ -13,6 +12,5 @@ const styles = css`
|
|
|
13
12
|
);--spectrum-tag-padding-right:var(
|
|
14
13
|
--spectrum-tag-s-padding-right,var(--spectrum-alias-item-padding-s)
|
|
15
14
|
);--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}
|
|
16
|
-
`;
|
|
17
|
-
export default styles;
|
|
15
|
+
`;export default a;
|
|
18
16
|
//# sourceMappingURL=spectrum-tags.css.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tags.css.ts"],
|
|
4
4
|
"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;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAef,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/tag.css.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as t}from"@spectrum-web-components/base";const e=t`
|
|
3
2
|
:host([size=s]){--spectrum-tag-removable-texticon-text-font-weight:var(
|
|
4
3
|
--spectrum-tag-s-removable-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)
|
|
5
4
|
);--spectrum-tag-texticon-border-size:var(
|
|
@@ -329,6 +328,5 @@ const styles = css`
|
|
|
329
328
|
);--spectrum-ui-icon-tshirt-size-width:var(
|
|
330
329
|
--spectrum-alias-ui-icon-cornertriangle-size-200
|
|
331
330
|
)}
|
|
332
|
-
`;
|
|
333
|
-
export default styles;
|
|
331
|
+
`;export default e;
|
|
334
332
|
//# sourceMappingURL=tag.css.js.map
|
package/src/tag.css.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tag.css.ts"],
|
|
4
4
|
"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)}@media (forced-colors:active){:host{--spectrum-tag-s-removable-texticon-border-color-error-down:Highlight;--spectrum-tag-s-removable-texticon-border-color-error-hover:Highlight;--spectrum-tag-s-removable-texticon-icon-color:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-disabled:GrayText;--spectrum-tag-s-removable-texticon-icon-color-down:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-error:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-error-down:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-error-hover:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-error-selected:HighlightText;--spectrum-tag-s-removable-texticon-icon-color-hover:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-key-focus:ButtonText;--spectrum-tag-s-removable-texticon-icon-color-selected:HighlightText;--spectrum-tag-s-removable-texticon-icon-color-selected-hover:HighlightText;--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus:HighlightText;--spectrum-tag-s-removable-texticon-text-color-down:ButtonText;--spectrum-tag-s-removable-texticon-text-color-error-down:ButtonText;--spectrum-tag-s-removable-texticon-text-color-error-hover:ButtonText;--spectrum-tag-s-removable-texticon-text-color-error-key-focus:ButtonText;--spectrum-tag-s-removable-texticon-text-color-error-selected:HighlightText;--spectrum-tag-s-removable-texticon-text-color-hover:ButtonText;--spectrum-tag-s-removable-texticon-text-color-key-focus:ButtonText;--spectrum-tag-s-removable-texticon-text-color-selected:HighlightText;--spectrum-tag-s-removable-texticon-text-color-selected-key-focus:HighlightText;--spectrum-tag-s-texticon-background-color:ButtonFace;--spectrum-tag-s-texticon-background-color-disabled:ButtonFace;--spectrum-tag-s-texticon-background-color-error-selected:Highlight;--spectrum-tag-s-texticon-background-color-error-selected-hover:Highlight;--spectrum-tag-s-texticon-background-color-hover:ButtonFace;--spectrum-tag-s-texticon-background-color-key-focus:ButtonFace;--spectrum-tag-s-texticon-background-color-selected:Highlight;--spectrum-tag-s-texticon-background-color-selected-hover:Highlight;--spectrum-tag-s-texticon-border-color:ButtonText;--spectrum-tag-s-texticon-border-color-disabled:GrayText;--spectrum-tag-s-texticon-border-color-error:Highlight;--spectrum-tag-s-texticon-border-color-error-hover:Highlight;--spectrum-tag-s-texticon-border-color-error-selected:HighlightText;--spectrum-tag-s-texticon-border-color-error-selected-hover:HighlightText;--spectrum-tag-s-texticon-border-color-error-selected-key-focus:HighlightText;--spectrum-tag-s-texticon-border-color-hover:ButtonText;--spectrum-tag-s-texticon-border-color-key-focus:ButtonText;--spectrum-tag-s-texticon-border-color-selected:HighlightText;--spectrum-tag-s-texticon-focusring-border-color-key-focus:ButtonText;--spectrum-tag-s-texticon-focusring-border-color-selected-key-focus:ButtonText;--spectrum-tag-s-texticon-icon-color-disabled:GrayText;--spectrum-tag-s-texticon-icon-color-error:ButtonText;--spectrum-tag-s-texticon-icon-color-error-hover:ButtonText;--spectrum-tag-s-texticon-icon-color-error-key-focus:ButtonText;--spectrum-tag-s-texticon-icon-color-error-selected-hover:HighlightText;--spectrum-tag-s-texticon-icon-color-selected:HighlightText;--spectrum-tag-s-texticon-text-color:ButtonText;--spectrum-tag-s-texticon-text-color-disabled:GrayText;--spectrum-tag-s-texticon-text-color-hover:ButtonText;--spectrum-tag-s-texticon-text-color-key-focus:ButtonText;--spectrum-tag-s-texticon-text-color-selected:HighlightText;--spectrum-tag-s-texticon-text-color-selected-key-focus:HighlightText;forced-color-adjust:none}:host([selected][invalid].focus-visible){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(\n--spectrum-alias-tag-focusring-border-color-selected-key-focus\n)\n)}:host([selected][invalid]:focus-visible){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(\n--spectrum-alias-tag-focusring-border-color-selected-key-focus\n)\n)}:host([selected][invalid].focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\n)}:host([selected][invalid]:focus-visible) .clear-button{color:var(\n--spectrum-tag-s-texticon-icon-color-error-selected-hover,var(--spectrum-alias-tag-icon-color-selected)\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;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2Uf,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/tags.css.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as a}from"@spectrum-web-components/base";const s=a`
|
|
3
2
|
: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(
|
|
4
3
|
--spectrum-taggroup-tag-gap-y,
|
|
5
4
|
var(--spectrum-global-dimension-size-100)
|
|
@@ -7,6 +6,5 @@ var(--spectrum-global-dimension-size-100)
|
|
|
7
6
|
--spectrum-taggroup-tag-gap-x,
|
|
8
7
|
var(--spectrum-global-dimension-size-100)
|
|
9
8
|
)/2)}
|
|
10
|
-
`;
|
|
11
|
-
export default styles;
|
|
9
|
+
`;export default s;
|
|
12
10
|
//# sourceMappingURL=tags.css.js.map
|