@spectrum-web-components/tags 1.7.0 → 1.8.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/README.md +47 -12
- package/package.json +5 -5
- package/sp-tag.d.ts +11 -0
- package/sp-tag.dev.js.map +1 -1
- package/sp-tag.js.map +1 -1
- package/sp-tags.d.ts +11 -0
- package/sp-tags.dev.js.map +1 -1
- package/sp-tags.js.map +1 -1
- package/src/Tag.d.ts +11 -0
- package/src/Tag.dev.js.map +1 -1
- package/src/Tag.js.map +1 -1
- package/src/Tags.d.ts +11 -0
- package/src/Tags.dev.js.map +1 -1
- package/src/Tags.js.map +1 -1
- package/src/index.d.ts +11 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js.map +1 -1
- package/src/spectrum-tag.css.dev.js.map +1 -1
- package/src/spectrum-tag.css.js.map +1 -1
- package/src/spectrum-tags.css.dev.js.map +1 -1
- package/src/spectrum-tags.css.js.map +1 -1
- package/src/tag-overrides.css.dev.js.map +1 -1
- package/src/tag-overrides.css.js.map +1 -1
- package/src/tag.css.dev.js.map +1 -1
- package/src/tag.css.js.map +1 -1
- package/src/tags-overrides.css.dev.js.map +1 -1
- package/src/tags-overrides.css.js.map +1 -1
- package/src/tags.css.dev.js.map +1 -1
- package/src/tags.css.js.map +1 -1
package/README.md
CHANGED
|
@@ -1,36 +1,46 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Overview
|
|
2
2
|
|
|
3
3
|
`<sp-tags>` elements contain a collection of `<sp-tag>` elements and allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.
|
|
4
4
|
|
|
5
|
+
[View the design documentation for this component.](https://spectrum.adobe.com/page/tag/)
|
|
6
|
+
|
|
5
7
|
### Usage
|
|
6
8
|
|
|
7
9
|
[](https://www.npmjs.com/package/@spectrum-web-components/tags)
|
|
8
10
|
[](https://bundlephobia.com/result?p=@spectrum-web-components/tags)
|
|
9
11
|
[](https://stackblitz.com/edit/vitejs-vite-pbqsxwt5)
|
|
10
12
|
|
|
11
|
-
```
|
|
13
|
+
```zsh
|
|
12
14
|
yarn add @spectrum-web-components/tags
|
|
13
15
|
```
|
|
14
16
|
|
|
15
17
|
Import the side effectful registration of `<sp-tags>` or `<sp-tag>` via:
|
|
16
18
|
|
|
17
|
-
```
|
|
19
|
+
```js
|
|
18
20
|
import '@spectrum-web-components/tags/sp-tags.js';
|
|
19
21
|
import '@spectrum-web-components/tags/sp-tag.js';
|
|
20
22
|
```
|
|
21
23
|
|
|
22
24
|
When looking to leverage the `Tags` or `Tag` base classes as a type and/or for extension purposes, do so via:
|
|
23
25
|
|
|
26
|
+
```js
|
|
27
|
+
import { Tags, Tag } from '@spectrum-web-components/tags';
|
|
24
28
|
```
|
|
25
|
-
import {
|
|
26
|
-
Tags,
|
|
27
|
-
Tag
|
|
28
|
-
} from '@spectrum-web-components/tags';
|
|
29
|
-
```
|
|
30
29
|
|
|
31
|
-
|
|
30
|
+
### Anatomy
|
|
31
|
+
|
|
32
|
+
Tags are created from the following parts:
|
|
32
33
|
|
|
33
|
-
|
|
34
|
+
- **Tags**: The container component (`<sp-tags>`) that manages a collection of `<sp-tag>` elements.
|
|
35
|
+
- **Tag**: The individual tag element (`<sp-tag>`) represents a single tag. [Read more about the `Tag` component.](/components/tag/)
|
|
36
|
+
|
|
37
|
+
### Options
|
|
38
|
+
|
|
39
|
+
<sp-tabs selected="basic" auto label="Tag Examples">
|
|
40
|
+
<sp-tab value="basic">Basic Tags</sp-tab>
|
|
41
|
+
<sp-tab-panel value="basic">
|
|
42
|
+
|
|
43
|
+
```html
|
|
34
44
|
<sp-tags>
|
|
35
45
|
<sp-tag>Tag 1</sp-tag>
|
|
36
46
|
<sp-tag invalid>Tag 2</sp-tag>
|
|
@@ -38,7 +48,11 @@ import {
|
|
|
38
48
|
</sp-tags>
|
|
39
49
|
```
|
|
40
50
|
|
|
41
|
-
|
|
51
|
+
</sp-tab-panel>
|
|
52
|
+
<sp-tab value="with-avatars">With Avatars</sp-tab>
|
|
53
|
+
<sp-tab-panel value="with-avatars">
|
|
54
|
+
|
|
55
|
+
```html
|
|
42
56
|
<sp-tags>
|
|
43
57
|
<sp-tag>
|
|
44
58
|
Tag 1
|
|
@@ -67,7 +81,11 @@ import {
|
|
|
67
81
|
</sp-tags>
|
|
68
82
|
```
|
|
69
83
|
|
|
70
|
-
|
|
84
|
+
</sp-tab-panel>
|
|
85
|
+
<sp-tab value="with-icons">With Icons</sp-tab>
|
|
86
|
+
<sp-tab-panel value="with-icons">
|
|
87
|
+
|
|
88
|
+
```html
|
|
71
89
|
<sp-tags>
|
|
72
90
|
<sp-tag>
|
|
73
91
|
Tag 1
|
|
@@ -83,3 +101,20 @@ import {
|
|
|
83
101
|
</sp-tag>
|
|
84
102
|
</sp-tags>
|
|
85
103
|
```
|
|
104
|
+
|
|
105
|
+
</sp-tab-panel>
|
|
106
|
+
</sp-tabs>
|
|
107
|
+
|
|
108
|
+
### Accessibility
|
|
109
|
+
|
|
110
|
+
`<sp-tags>` is a `role="list"` container that manages a collection of `<sp-tag>` elements. It has an `aria-label` attribute that defaults to `Tags`.
|
|
111
|
+
|
|
112
|
+
`<sp-tags>` uses the [roving tabindex](/tools/roving-tab-index) pattern for efficient keyboard navigation. `Tab` enters the collection, arrow keys navigate between tags, and only deletable tags are focusable. The container provides `role="list"` semantics with each tag as a `role="listitem"` for proper screen reader support.
|
|
113
|
+
|
|
114
|
+
**Mouse**
|
|
115
|
+
|
|
116
|
+
- Read-only tags: Do not get mouse functionality besides a mouse cursor on hover and do not have interactive functionality.
|
|
117
|
+
|
|
118
|
+
**Keyboard**
|
|
119
|
+
|
|
120
|
+
- Read-only tags: Cannot be operated by a keyboard and have no interactive functionality.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tags",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -74,10 +74,10 @@
|
|
|
74
74
|
"css"
|
|
75
75
|
],
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"@spectrum-web-components/base": "1.
|
|
78
|
-
"@spectrum-web-components/button": "1.
|
|
79
|
-
"@spectrum-web-components/reactive-controllers": "1.
|
|
80
|
-
"@spectrum-web-components/shared": "1.
|
|
77
|
+
"@spectrum-web-components/base": "1.8.0",
|
|
78
|
+
"@spectrum-web-components/button": "1.8.0",
|
|
79
|
+
"@spectrum-web-components/reactive-controllers": "1.8.0",
|
|
80
|
+
"@spectrum-web-components/shared": "1.8.0"
|
|
81
81
|
},
|
|
82
82
|
"types": "./src/index.d.ts",
|
|
83
83
|
"customElements": "custom-elements.json",
|
package/sp-tag.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { Tag } from './src/Tag.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
package/sp-tag.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tag.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { Tag } from './src/Tag.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-tag', Tag);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tag': Tag;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,SAAS,qBAAqB;AAE9B,cAAc,UAAU,GAAG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-tag.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tag.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { Tag } from './src/Tag.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-tag', Tag);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tag': Tag;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,eACpB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,SAAUD,CAAG",
|
|
6
6
|
"names": ["Tag", "defineElement"]
|
|
7
7
|
}
|
package/sp-tags.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { Tags } from './src/Tags.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
package/sp-tags.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tags.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { Tags } from './src/Tags.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-tags', Tags);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tags': Tags;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,cAAc,WAAW,IAAI;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-tags.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-tags.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { Tags } from './src/Tags.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-tags', Tags);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-tags': Tags;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAWA,OAAS,QAAAA,MAAY,gBACrB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,UAAWD,CAAI",
|
|
6
6
|
"names": ["Tags", "defineElement"]
|
|
7
7
|
}
|
package/src/Tag.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
import '@spectrum-web-components/button/sp-clear-button.js';
|
|
3
14
|
declare const Tag_base: typeof SpectrumElement & {
|
package/src/Tag.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tag.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n nothing,\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 noDefaultSize: true,\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 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 || this.disabled) {\n return;\n }\n const { code } = event;\n\n switch (code) {\n case 'Backspace':\n case 'Space':\n case 'Delete':\n this.delete();\n default:\n return;\n }\n };\n\n private delete(): void {\n if (this.readonly) {\n return;\n }\n const applyDefault = this.dispatchEvent(\n new Event('delete', {\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n return;\n }\n this.remove();\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot name=\"avatar\"></slot>\n <slot name=\"icon\"></slot>\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 : nothing}\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('tabindex', '0');\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
5
|
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAEzB,OAAO;AAEP,OAAO,YAAY;AASZ,aAAM,YAAY,WAAW,iBAAiB;AAAA,EACjD,YAAY,CAAC,KAAK,KAAK,GAAG;AAAA,EAC1B,eAAe;AACnB,CAAC,EAAE;AAAA,EAcC,cAAc;AACV,UAAM;AATV,SAAO,YAAY;AAGnB,SAAO,WAAW;AAGlB,SAAO,WAAW;AAOlB,SAAQ,gBAAgB,MAAY;AAChC,WAAK,iBAAiB,YAAY,KAAK,cAAc;AACrD,WAAK,iBAAiB,WAAW,KAAK,aAAa;AAAA,IACvD;AAEA,SAAQ,iBAAiB,MAAY;AACjC,WAAK,oBAAoB,WAAW,KAAK,aAAa;AACtD,WAAK,oBAAoB,YAAY,KAAK,cAAc;AAAA,IAC5D;AAEA,SAAQ,gBAAgB,CAAC,UAA+B;AACpD,UAAI,CAAC,KAAK,aAAa,KAAK,UAAU;AAClC;AAAA,MACJ;AACA,YAAM,EAAE,KAAK,IAAI;AAEjB,cAAQ,MAAM;AAAA,QACV,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AACD,eAAK,OAAO;AAAA,QAChB;AACI;AAAA,MACR;AAAA,IACJ;AA3BI,SAAK,iBAAiB,WAAW,KAAK,aAAa;AAAA,EACvD;AAAA,EAhBA,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EA0CQ,SAAe;AACnB,QAAI,KAAK,UAAU;AACf;AAAA,IACJ;AACA,UAAM,eAAe,KAAK;AAAA,MACtB,IAAI,MAAM,UAAU;AAAA,QAChB,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AACA,QAAI,CAAC,cAAc;AACf;AAAA,IACJ;AACA,SAAK,OAAO;AAAA,EAChB;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA;AAAA,cAID,KAAK,YACD;AAAA;AAAA;AAAA,sCAGoB,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,mCAIhB,KAAK,MAAM;AAAA;AAAA,sBAG5B,OAAO;AAAA;AAAA,EAErB;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,QAAQ,UAAU;AAAA,IACxC;AACA,QAAI,KAAK,WAAW;AAChB,WAAK,aAAa,YAAY,GAAG;AAAA,IACrC;AAAA,EACJ;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,UAAI,KAAK,UAAU;AACf,aAAK,aAAa,iBAAiB,MAAM;AAAA,MAC7C,OAAO;AACH,aAAK,gBAAgB,eAAe;AAAA,MACxC;AAAA,IACJ;AAAA,EACJ;AACJ;AAhGW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GARjC,IASF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAXjC,IAYF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAdjC,IAeF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Tag.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tag.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n nothing,\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 noDefaultSize: true,\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 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 || this.disabled) {\n return;\n }\n const { code } = event;\n\n switch (code) {\n case 'Backspace':\n case 'Space':\n case 'Delete':\n this.delete();\n default:\n return;\n }\n };\n\n private delete(): void {\n if (this.readonly) {\n return;\n }\n const applyDefault = this.dispatchEvent(\n new Event('delete', {\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n return;\n }\n this.remove();\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot name=\"avatar\"></slot>\n <slot name=\"icon\"></slot>\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 : nothing}\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('tabindex', '0');\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
5
|
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDAEzB,MAAO,qDAEP,OAAOC,MAAY,eASZ,aAAM,YAAYH,EAAWC,EAAiB,CACjD,WAAY,CAAC,IAAK,IAAK,GAAG,EAC1B,cAAe,EACnB,CAAC,CAAE,CAcC,aAAc,CACV,MAAM,EATV,KAAO,UAAY,GAGnB,KAAO,SAAW,GAGlB,KAAO,SAAW,GAOlB,KAAQ,cAAgB,IAAY,CAChC,KAAK,iBAAiB,WAAY,KAAK,cAAc,EACrD,KAAK,iBAAiB,UAAW,KAAK,aAAa,CACvD,EAEA,KAAQ,eAAiB,IAAY,CACjC,KAAK,oBAAoB,UAAW,KAAK,aAAa,EACtD,KAAK,oBAAoB,WAAY,KAAK,cAAc,CAC5D,EAEA,KAAQ,cAAiBG,GAA+B,CACpD,GAAI,CAAC,KAAK,WAAa,KAAK,SACxB,OAEJ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAQC,EAAM,CACV,IAAK,YACL,IAAK,QACL,IAAK,SACD,KAAK,OAAO,EAChB,QACI,MACR,CACJ,EA3BI,KAAK,iBAAiB,UAAW,KAAK,aAAa,CACvD,CAhBA,WAA2B,QAAyB,CAChD,MAAO,CAACF,CAAM,CAClB,CA0CQ,QAAe,CACf,KAAK,UAUL,CAPiB,KAAK,cACtB,IAAI,MAAM,SAAU,CAChB,QAAS,GACT,WAAY,GACZ,SAAU,EACd,CAAC,CACL,GAIA,KAAK,OAAO,CAChB,CAEmB,QAAyB,CACxC,OAAOL;AAAA;AAAA;AAAA;AAAA,cAID,KAAK,UACDA;AAAA;AAAA;AAAA,sCAGoB,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,mCAIhB,KAAK,MAAM;AAAA;AAAA,oBAG5BC,CAAO;AAAA,SAErB,CAEmB,aAAaO,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EACrB,KAAK,aAAa,MAAM,GACzB,KAAK,aAAa,OAAQ,UAAU,EAEpC,KAAK,WACL,KAAK,aAAa,WAAY,GAAG,CAEzC,CAEmB,QAAQA,EAA+B,CACtD,MAAM,QAAQA,CAAO,EACjBA,EAAQ,IAAI,UAAU,IAClB,KAAK,SACL,KAAK,aAAa,gBAAiB,MAAM,EAEzC,KAAK,gBAAgB,eAAe,EAGhD,CACJ,CAhGWC,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARjC,IASF,yBAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAXjC,IAYF,wBAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdjC,IAeF",
|
|
6
6
|
"names": ["html", "nothing", "SizedMixin", "SpectrumElement", "property", "styles", "event", "code", "changes", "__decorateClass"]
|
|
7
7
|
}
|
package/src/Tags.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
|
|
3
14
|
import { Tag } from './Tag.js';
|
package/src/Tags.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tags.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing 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.dev.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
5
|
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,0BAA0B;AACnC,SAAS,iCAAiC;AAC1C,SAAS,gCAAgC;AAEzC,SAAS,WAAW;AAEpB,OAAO,YAAY;AAOZ,aAAM,aAAa,0BAA0B,eAAe,EAAE;AAAA,EAwBjE,cAAc;AACV,UAAM;AAXV,oCAA2B,IAAI,yBAA8B,MAAM;AAAA,MAC/D,cAAc,CAAC,aAAoB;AAC/B,eAAO,SAAS,UAAU,CAAC,OAAO;AAC9B,iBAAO,CAAC,GAAG,YAAY,GAAG;AAAA,QAC9B,CAAC;AAAA,MACL;AAAA,MACA,UAAU,MAAM,KAAK;AAAA,MACrB,oBAAoB,CAAC,OAAY,CAAC,GAAG,YAAY,GAAG;AAAA,IACxD,CAAC;AAWD,SAAQ,gBAAgB,MAAY;AAChC,WAAK,iBAAiB,YAAY,KAAK,cAAc;AACrD,WAAK,iBAAiB,WAAW,KAAK,aAAa;AAAA,IACvD;AAEA,SAAQ,gBAAgB,CAAC,UAA+B;AACpD,YAAM,EAAE,KAAK,IAAI;AACjB,UAAI,SAAS,YAAY,SAAS,WAAY;AAE9C,YAAM,yBAAyB,CAC3B,MACA,UACI,MAAM,KAAK,SAAS,SAAS,KAAK,MAAM;AAChD,YAAM,eAAe;AAAA,QACjB,GAAI,KAAK,YAAY,EAAe;AAAA,UAChC;AAAA,QACJ;AAAA,MACJ;AACA,UAAI,aAAa,SAAS,GAAG;AACzB;AAAA,MACJ;AACA,YAAM,eAAe;AACrB,YAAM,eAAe,aAAa,QAAQ,IAAI;AAC9C,YAAM,SAAS,SAAS,WAAW,KAAK;AACxC,UAAI,gBAAgB,eAAe;AACnC,UAAI,WAAW,uBAAuB,cAAc,aAAa;AACjE,aAAO,CAAC,SAAS,KAAK,QAAQ;AAC1B,yBAAiB;AACjB,mBAAW,uBAAuB,cAAc,aAAa;AAAA,MACjE;AACA,eAAS,MAAM;AAAA,IACnB;AAEA,SAAQ,iBAAiB,MAAY;AACjC,WAAK,oBAAoB,WAAW,KAAK,aAAa;AACtD,WAAK,oBAAoB,YAAY,KAAK,cAAc;AAAA,IAC5D;AA3CI,SAAK,iBAAiB,WAAW,KAAK,aAAa;AAAA,EACvD;AAAA,EA1BA,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAKA,IAAW,OAAc;AACrB,WAAO,KAAK,aAAa;AAAA,MACrB,CAAC,SAAU,gBAAgC;AAAA,IAC/C;AAAA,EACJ;AAAA,EAiBgB,QAAc;AAC1B,SAAK,yBAAyB,MAAM;AAAA,EACxC;AAAA,EAwCQ,mBAAyB;AAC7B,SAAK,yBAAyB,kBAAkB;AAAA,EACpD;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA,gCACiB,KAAK,gBAAgB;AAAA;AAAA,EAEjD;AAAA,EAEmB,eAAqB;AACpC,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,QAAQ,MAAM;AAAA,IACpC;AACA,QAAI,CAAC,KAAK,aAAa,YAAY,GAAG;AAClC,WAAK,aAAa,cAAc,MAAM;AAAA,IAC1C;AAAA,EACJ;AACJ;AAnFW;AAAA,EADN,mBAAmB;AAAA,GALX,KAMF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Tags.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Tags.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing 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
5
|
"mappings": "qNAYA,OAEI,QAAAA,EACA,mBAAAC,MAEG,gCACP,OAAS,sBAAAC,MAA0B,kDACnC,OAAS,6BAAAC,MAAiC,uDAC1C,OAAS,4BAAAC,MAAgC,sEAEzC,OAAS,OAAAC,MAAW,WAEpB,OAAOC,MAAY,gBAOZ,aAAM,aAAaH,EAA0BF,CAAe,CAAE,CAwBjE,aAAc,CACV,MAAM,EAXV,8BAA2B,IAAIG,EAA8B,KAAM,CAC/D,aAAeG,GACJA,EAAS,UAAWC,GAChB,CAACA,EAAG,UAAYA,EAAG,SAC7B,EAEL,SAAU,IAAM,KAAK,KACrB,mBAAqBA,GAAY,CAACA,EAAG,UAAYA,EAAG,SACxD,CAAC,EAWD,KAAQ,cAAgB,IAAY,CAChC,KAAK,iBAAiB,WAAY,KAAK,cAAc,EACrD,KAAK,iBAAiB,UAAW,KAAK,aAAa,CACvD,EAEA,KAAQ,cAAiBC,GAA+B,CACpD,KAAM,CAAE,KAAAC,CAAK,EAAID,EACjB,GAAIC,IAAS,UAAYA,IAAS,WAAY,OAE9C,MAAMC,EAAyB,CAC3BC,EACAC,IACID,GAAMA,EAAK,OAASC,GAASD,EAAK,MAAM,EAC1CE,EAAe,CACjB,GAAI,KAAK,YAAY,EAAe,iBAChC,SACJ,CACJ,EACA,GAAIA,EAAa,OAAS,EACtB,OAEJL,EAAM,eAAe,EACrB,MAAMM,EAAeD,EAAa,QAAQ,IAAI,EACxCE,EAASN,IAAS,SAAW,GAAK,EACxC,IAAIO,EAAgBF,EAAeC,EAC/BE,EAAWP,EAAuBG,EAAcG,CAAa,EACjE,KAAO,CAACC,EAAS,KAAK,QAClBD,GAAiBD,EACjBE,EAAWP,EAAuBG,EAAcG,CAAa,EAEjEC,EAAS,MAAM,CACnB,EAEA,KAAQ,eAAiB,IAAY,CACjC,KAAK,oBAAoB,UAAW,KAAK,aAAa,EACtD,KAAK,oBAAoB,WAAY,KAAK,cAAc,CAC5D,EA3CI,KAAK,iBAAiB,UAAW,KAAK,aAAa,CACvD,CA1BA,WAA2B,QAAyB,CAChD,MAAO,CAACZ,CAAM,CAClB,CAKA,IAAW,MAAc,CACrB,OAAO,KAAK,aAAa,OACpBa,GAAUA,aAAgCd,CAC/C,CACJ,CAiBgB,OAAc,CAC1B,KAAK,yBAAyB,MAAM,CACxC,CAwCQ,kBAAyB,CAC7B,KAAK,yBAAyB,kBAAkB,CACpD,CAEmB,QAAyB,CACxC,OAAOL;AAAA,gCACiB,KAAK,gBAAgB;AAAA,SAEjD,CAEmB,cAAqB,CAC/B,KAAK,aAAa,MAAM,GACzB,KAAK,aAAa,OAAQ,MAAM,EAE/B,KAAK,aAAa,YAAY,GAC/B,KAAK,aAAa,aAAc,MAAM,CAE9C,CACJ,CAnFWoB,EAAA,CADNlB,EAAmB,GALX,KAMF",
|
|
6
6
|
"names": ["html", "SpectrumElement", "queryAssignedNodes", "FocusVisiblePolyfillMixin", "RovingTabindexController", "Tag", "styles", "elements", "el", "event", "code", "circularIndexedElement", "list", "index", "tagsSiblings", "currentIndex", "offset", "nextTagsIndex", "nextTags", "node", "__decorateClass"]
|
|
7
7
|
}
|
package/src/index.d.ts
CHANGED
|
@@ -1,2 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
export * from './Tags.js';
|
|
2
13
|
export * from './Tag.js';
|
package/src/index.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './Tags.dev.js'\nexport * from './Tag.dev.js'\n"],
|
|
5
5
|
"mappings": ";AAYA,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './Tags.js';\nexport * from './Tag.js';\n"],
|
|
5
5
|
"mappings": "aAYA,WAAc,YACd,WAAc",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tag.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2025 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-avatar-opacity-disabled:.3;--spectrum-tag-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tag-border-width:var(--spectrum-border-width-100);--spectrum-tag-focus-ring-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-tag-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-tag-focus-ring-color:var(--spectrum-focus-indicator-color);--spectrum-tag-label-line-height:var(--spectrum-line-height-100);--spectrum-tag-label-font-weight:var(--spectrum-regular-font-weight);--spectrum-tag-background-color-selected:var(--spectrum-neutral-background-color-selected-default);--spectrum-tag-background-color-selected-hover:var(--spectrum-neutral-background-color-selected-hover);--spectrum-tag-background-color-selected-active:var(--spectrum-neutral-background-color-selected-down);--spectrum-tag-background-color-selected-focus:var(--spectrum-neutral-background-color-selected-key-focus);--spectrum-tag-border-color-invalid:var(--spectrum-negative-color-900);--spectrum-tag-border-color-invalid-hover:var(--spectrum-negative-color-1000);--spectrum-tag-border-color-invalid-active:var(--spectrum-negative-color-1100);--spectrum-tag-border-color-invalid-focus:var(--spectrum-negative-color-1000);--spectrum-tag-content-color-invalid:var(--spectrum-negative-content-color-default);--spectrum-tag-content-color-invalid-hover:var(--spectrum-negative-content-color-hover);--spectrum-tag-content-color-invalid-active:var(--spectrum-negative-content-color-down);--spectrum-tag-content-color-invalid-focus:var(--spectrum-negative-content-color-key-focus);--spectrum-tag-border-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-border-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-border-color-invalid-selected-focus:var(--spectrum-negative-background-color-down);--spectrum-tag-border-color-invalid-selected-active:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-background-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-background-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-background-color-invalid-selected-active:var(--spectrum-negative-background-color-down);--spectrum-tag-background-color-invalid-selected-focus:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-content-color-invalid-selected:var(--spectrum-white);--spectrum-tag-border-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-border-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-border-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-border-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-background-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-background-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-background-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-background-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-content-color-emphasized:var(--spectrum-white);--spectrum-tag-content-color-disabled:var(--spectrum-disabled-content-color)}:host,:host{--spectrum-tag-height:var(--spectrum-component-height-100);--spectrum-tag-font-size:var(--spectrum-font-size-100);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-100);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-medium);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-100);--spectrum-tag-corner-radius:var(--spectrum-tag-size-medium-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-medium-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-medium-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-medium-clear-button-spacing-inline-end)}:host([size=s]){--spectrum-tag-height:var(--spectrum-component-height-75);--spectrum-tag-font-size:var(--spectrum-font-size-75);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-75);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-small);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-75);--spectrum-tag-corner-radius:var(--spectrum-tag-size-small-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-small-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-small-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-small-clear-button-spacing-inline-end)}:host([size=l]){--spectrum-tag-height:var(--spectrum-component-height-200);--spectrum-tag-font-size:var(--spectrum-font-size-200);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-200);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-large);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-200);--spectrum-tag-corner-radius:var(--spectrum-tag-size-large-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-large-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-large-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-large-clear-button-spacing-inline-end)}:host{border-color:var(--highcontrast-tag-border-color,var(--mod-tag-border-color,var(--spectrum-tag-border-color)));background-color:var(--highcontrast-tag-background-color,var(--mod-tag-background-color,var(--spectrum-tag-background-color)));color:var(--highcontrast-tag-content-color,var(--mod-tag-content-color,var(--spectrum-tag-content-color)));border-radius:var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius));border-width:var(--mod-tag-border-width,var(--spectrum-tag-border-width));block-size:var(--mod-tag-height,var(--spectrum-tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,box-shadow var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,background-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out;border-style:solid;outline:none;align-items:center;padding-inline-start:calc(var(--mod-tag-spacing-inline-start,var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));inline-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));flex-shrink:0;margin-block-start:calc(var(--mod-tag-icon-spacing-block-start,var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-icon-spacing-block-end,var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-icon-spacing-inline-end,var(--spectrum-tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-block-start:calc(var(--mod-tag-avatar-spacing-block-start,var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-avatar-spacing-block-end,var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-avatar-spacing-inline-end,var(--spectrum-tag-avatar-spacing-inline-end))}.clear-button{--mod-clear-button-width:fit-content;--spectrum-clearbutton-fill-size:fit-content;--spectrum-clearbutton-fill-background-color:transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--mod-tag-clear-button-spacing-inline-start,var(--spectrum-tag-clear-button-spacing-inline-start)) + var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end))*-1);margin-inline-end:calc(var(--mod-tag-clear-button-spacing-inline-end,var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-end:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)))}.clear-button .spectrum-ClearButton-fill{background-color:var(--mod-clearbutton-fill-background-color,var(--spectrum-clearbutton-fill-background-color));inline-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size));block-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--mod-tag-label-line-height,var(--spectrum-tag-label-line-height));font-weight:var(--mod-tag-label-font-weight,var(--spectrum-tag-label-font-weight));font-size:var(--mod-tag-font-size,var(--spectrum-tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;margin-inline-end:calc(var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-label-spacing-block,var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active,var(--mod-tag-border-color-active,var(--spectrum-tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active,var(--mod-tag-background-color-active,var(--spectrum-tag-background-color-active)));color:var(--highcontrast-tag-content-color-active,var(--mod-tag-content-color-active,var(--spectrum-tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus,var(--mod-tag-border-color-focus,var(--spectrum-tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus,var(--mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus,var(--mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:\"\";border-color:var(--highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color)));border-radius:calc(var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width,var(--spectrum-tag-border-width)));border-width:var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-block-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected,var(--mod-tag-border-color-selected,var(--spectrum-tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected,var(--mod-tag-background-color-selected,var(--spectrum-tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active,var(--mod-tag-border-color-selected-active,var(--spectrum-tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active,var(--mod-tag-background-color-selected-active,var(--spectrum-tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus,var(--mod-tag-border-color-selected-focus,var(--spectrum-tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus,var(--mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid,var(--mod-tag-border-color-invalid,var(--spectrum-tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid,var(--mod-tag-content-color-invalid,var(--spectrum-tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active,var(--mod-tag-border-color-invalid-active,var(--spectrum-tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active,var(--mod-tag-content-color-invalid-active,var(--spectrum-tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus,var(--mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus,var(--mod-tag-content-color-invalid-focus,var(--spectrum-tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected,var(--mod-tag-border-color-invalid-selected,var(--spectrum-tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected,var(--mod-tag-background-color-invalid-selected,var(--spectrum-tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active,var(--mod-tag-border-color-invalid-selected-active,var(--spectrum-tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active,var(--mod-tag-background-color-invalid-selected-active,var(--spectrum-tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus,var(--mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus,var(--mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized,var(--mod-tag-border-color-emphasized,var(--spectrum-tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized,var(--mod-tag-background-color-emphasized,var(--spectrum-tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}@media (hover:hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover,var(--mod-tag-border-color-hover,var(--spectrum-tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover,var(--mod-tag-background-color-hover,var(--spectrum-tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover,var(--mod-tag-content-color-hover,var(--spectrum-tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover,var(--mod-tag-border-color-selected-hover,var(--spectrum-tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover,var(--mod-tag-background-color-selected-hover,var(--spectrum-tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover,var(--mod-tag-border-color-invalid-hover,var(--spectrum-tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover,var(--mod-tag-content-color-invalid-hover,var(--spectrum-tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover,var(--mod-tag-border-color-invalid-selected-hover,var(--spectrum-tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover,var(--mod-tag-background-color-invalid-selected-hover,var(--spectrum-tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover,var(--mod-tag-border-color-emphasized-hover,var(--spectrum-tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover,var(--mod-tag-background-color-emphasized-hover,var(--spectrum-tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active,var(--mod-tag-border-color-emphasized-active,var(--spectrum-tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active,var(--mod-tag-background-color-emphasized-active,var(--spectrum-tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus,var(--mod-tag-border-color-emphasized-focus,var(--spectrum-tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus,var(--mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled,var(--mod-tag-border-color-disabled,var(--spectrum-tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled,var(--mod-tag-background-color-disabled,var(--spectrum-tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled,var(--mod-tag-content-color-disabled,var(--spectrum-tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--mod-avatar-opacity-disabled,var(--spectrum-avatar-opacity-disabled))}@media (forced-colors:active){:host{--highcontrast-tag-border-color:ButtonText;--highcontrast-tag-border-color-hover:ButtonText;--highcontrast-tag-border-color-active:ButtonText;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:ButtonFace;--highcontrast-tag-background-color-hover:ButtonFace;--highcontrast-tag-background-color-active:ButtonFace;--highcontrast-tag-background-color-focus:ButtonFace;--highcontrast-tag-content-color:ButtonText;--highcontrast-tag-content-color-hover:ButtonText;--highcontrast-tag-content-color-active:ButtonText;--highcontrast-tag-content-color-focus:ButtonText;--highcontrast-tag-focus-ring-color:Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected:Highlight;--highcontrast-tag-border-color-selected-hover:Highlight;--highcontrast-tag-border-color-selected-active:Highlight;--highcontrast-tag-border-color-selected-focus:Highlight;--highcontrast-tag-background-color-selected:Highlight;--highcontrast-tag-background-color-selected-hover:Highlight;--highcontrast-tag-background-color-selected-active:Highlight;--highcontrast-tag-background-color-selected-focus:Highlight;--highcontrast-tag-content-color-selected:HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled:GrayText;--highcontrast-tag-background-color-disabled:ButtonFace;--highcontrast-tag-content-color-disabled:GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid:Highlight;--highcontrast-tag-border-color-invalid-hover:Highlight;--highcontrast-tag-border-color-invalid-active:Highlight;--highcontrast-tag-border-color-invalid-focus:Highlight;--highcontrast-tag-content-color-invalid:CanvasText;--highcontrast-tag-content-color-invalid-hover:CanvasText;--highcontrast-tag-content-color-invalid-active:CanvasText;--highcontrast-tag-content-color-invalid-focus:CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected:Highlight;--highcontrast-tag-border-color-invalid-selected-hover:Highlight;--highcontrast-tag-border-color-invalid-selected-focus:Highlight;--highcontrast-tag-border-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected:Highlight;--highcontrast-tag-background-color-invalid-selected-hover:Highlight;--highcontrast-tag-background-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected-focus:Highlight;--highcontrast-tag-content-color-invalid-selected:HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized:Highlight;--highcontrast-tag-border-color-emphasized-hover:Highlight;--highcontrast-tag-border-color-emphasized-active:Highlight;--highcontrast-tag-border-color-emphasized-focus:Highlight;--highcontrast-tag-background-color-emphasized:ButtonFace;--highcontrast-tag-background-color-emphasized-hover:ButtonFace;--highcontrast-tag-background-color-emphasized-active:ButtonFace;--highcontrast-tag-background-color-emphasized-focus:ButtonFace;--highcontrast-tag-content-color-emphasized:CanvasText}}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-avatar-opacity-disabled:.3;--spectrum-tag-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tag-border-width:var(--spectrum-border-width-100);--spectrum-tag-focus-ring-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-tag-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-tag-focus-ring-color:var(--spectrum-focus-indicator-color);--spectrum-tag-label-line-height:var(--spectrum-line-height-100);--spectrum-tag-label-font-weight:var(--spectrum-regular-font-weight);--spectrum-tag-background-color-selected:var(--spectrum-neutral-background-color-selected-default);--spectrum-tag-background-color-selected-hover:var(--spectrum-neutral-background-color-selected-hover);--spectrum-tag-background-color-selected-active:var(--spectrum-neutral-background-color-selected-down);--spectrum-tag-background-color-selected-focus:var(--spectrum-neutral-background-color-selected-key-focus);--spectrum-tag-border-color-invalid:var(--spectrum-negative-color-900);--spectrum-tag-border-color-invalid-hover:var(--spectrum-negative-color-1000);--spectrum-tag-border-color-invalid-active:var(--spectrum-negative-color-1100);--spectrum-tag-border-color-invalid-focus:var(--spectrum-negative-color-1000);--spectrum-tag-content-color-invalid:var(--spectrum-negative-content-color-default);--spectrum-tag-content-color-invalid-hover:var(--spectrum-negative-content-color-hover);--spectrum-tag-content-color-invalid-active:var(--spectrum-negative-content-color-down);--spectrum-tag-content-color-invalid-focus:var(--spectrum-negative-content-color-key-focus);--spectrum-tag-border-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-border-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-border-color-invalid-selected-focus:var(--spectrum-negative-background-color-down);--spectrum-tag-border-color-invalid-selected-active:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-background-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-background-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-background-color-invalid-selected-active:var(--spectrum-negative-background-color-down);--spectrum-tag-background-color-invalid-selected-focus:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-content-color-invalid-selected:var(--spectrum-white);--spectrum-tag-border-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-border-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-border-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-border-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-background-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-background-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-background-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-background-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-content-color-emphasized:var(--spectrum-white);--spectrum-tag-content-color-disabled:var(--spectrum-disabled-content-color)}:host,:host{--spectrum-tag-height:var(--spectrum-component-height-100);--spectrum-tag-font-size:var(--spectrum-font-size-100);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-100);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-medium);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-100);--spectrum-tag-corner-radius:var(--spectrum-tag-size-medium-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-medium-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-medium-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-medium-clear-button-spacing-inline-end)}:host([size=s]){--spectrum-tag-height:var(--spectrum-component-height-75);--spectrum-tag-font-size:var(--spectrum-font-size-75);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-75);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-small);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-75);--spectrum-tag-corner-radius:var(--spectrum-tag-size-small-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-small-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-small-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-small-clear-button-spacing-inline-end)}:host([size=l]){--spectrum-tag-height:var(--spectrum-component-height-200);--spectrum-tag-font-size:var(--spectrum-font-size-200);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-200);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-large);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-200);--spectrum-tag-corner-radius:var(--spectrum-tag-size-large-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-large-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-large-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-large-clear-button-spacing-inline-end)}:host{border-color:var(--highcontrast-tag-border-color,var(--mod-tag-border-color,var(--spectrum-tag-border-color)));background-color:var(--highcontrast-tag-background-color,var(--mod-tag-background-color,var(--spectrum-tag-background-color)));color:var(--highcontrast-tag-content-color,var(--mod-tag-content-color,var(--spectrum-tag-content-color)));border-radius:var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius));border-width:var(--mod-tag-border-width,var(--spectrum-tag-border-width));block-size:var(--mod-tag-height,var(--spectrum-tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,box-shadow var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,background-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out;border-style:solid;outline:none;align-items:center;padding-inline-start:calc(var(--mod-tag-spacing-inline-start,var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));inline-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));flex-shrink:0;margin-block-start:calc(var(--mod-tag-icon-spacing-block-start,var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-icon-spacing-block-end,var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-icon-spacing-inline-end,var(--spectrum-tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-block-start:calc(var(--mod-tag-avatar-spacing-block-start,var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-avatar-spacing-block-end,var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-avatar-spacing-inline-end,var(--spectrum-tag-avatar-spacing-inline-end))}.clear-button{--mod-clear-button-width:fit-content;--spectrum-clearbutton-fill-size:fit-content;--spectrum-clearbutton-fill-background-color:transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--mod-tag-clear-button-spacing-inline-start,var(--spectrum-tag-clear-button-spacing-inline-start)) + var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end))*-1);margin-inline-end:calc(var(--mod-tag-clear-button-spacing-inline-end,var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-end:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)))}.clear-button .spectrum-ClearButton-fill{background-color:var(--mod-clearbutton-fill-background-color,var(--spectrum-clearbutton-fill-background-color));inline-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size));block-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--mod-tag-label-line-height,var(--spectrum-tag-label-line-height));font-weight:var(--mod-tag-label-font-weight,var(--spectrum-tag-label-font-weight));font-size:var(--mod-tag-font-size,var(--spectrum-tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;margin-inline-end:calc(var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-label-spacing-block,var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active,var(--mod-tag-border-color-active,var(--spectrum-tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active,var(--mod-tag-background-color-active,var(--spectrum-tag-background-color-active)));color:var(--highcontrast-tag-content-color-active,var(--mod-tag-content-color-active,var(--spectrum-tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus,var(--mod-tag-border-color-focus,var(--spectrum-tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus,var(--mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus,var(--mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:\"\";border-color:var(--highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color)));border-radius:calc(var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width,var(--spectrum-tag-border-width)));border-width:var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-block-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected,var(--mod-tag-border-color-selected,var(--spectrum-tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected,var(--mod-tag-background-color-selected,var(--spectrum-tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active,var(--mod-tag-border-color-selected-active,var(--spectrum-tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active,var(--mod-tag-background-color-selected-active,var(--spectrum-tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus,var(--mod-tag-border-color-selected-focus,var(--spectrum-tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus,var(--mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid,var(--mod-tag-border-color-invalid,var(--spectrum-tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid,var(--mod-tag-content-color-invalid,var(--spectrum-tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active,var(--mod-tag-border-color-invalid-active,var(--spectrum-tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active,var(--mod-tag-content-color-invalid-active,var(--spectrum-tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus,var(--mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus,var(--mod-tag-content-color-invalid-focus,var(--spectrum-tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected,var(--mod-tag-border-color-invalid-selected,var(--spectrum-tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected,var(--mod-tag-background-color-invalid-selected,var(--spectrum-tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active,var(--mod-tag-border-color-invalid-selected-active,var(--spectrum-tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active,var(--mod-tag-background-color-invalid-selected-active,var(--spectrum-tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus,var(--mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus,var(--mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized,var(--mod-tag-border-color-emphasized,var(--spectrum-tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized,var(--mod-tag-background-color-emphasized,var(--spectrum-tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}@media (hover:hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover,var(--mod-tag-border-color-hover,var(--spectrum-tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover,var(--mod-tag-background-color-hover,var(--spectrum-tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover,var(--mod-tag-content-color-hover,var(--spectrum-tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover,var(--mod-tag-border-color-selected-hover,var(--spectrum-tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover,var(--mod-tag-background-color-selected-hover,var(--spectrum-tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover,var(--mod-tag-border-color-invalid-hover,var(--spectrum-tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover,var(--mod-tag-content-color-invalid-hover,var(--spectrum-tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover,var(--mod-tag-border-color-invalid-selected-hover,var(--spectrum-tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover,var(--mod-tag-background-color-invalid-selected-hover,var(--spectrum-tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover,var(--mod-tag-border-color-emphasized-hover,var(--spectrum-tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover,var(--mod-tag-background-color-emphasized-hover,var(--spectrum-tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active,var(--mod-tag-border-color-emphasized-active,var(--spectrum-tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active,var(--mod-tag-background-color-emphasized-active,var(--spectrum-tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus,var(--mod-tag-border-color-emphasized-focus,var(--spectrum-tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus,var(--mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled,var(--mod-tag-border-color-disabled,var(--spectrum-tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled,var(--mod-tag-background-color-disabled,var(--spectrum-tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled,var(--mod-tag-content-color-disabled,var(--spectrum-tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--mod-avatar-opacity-disabled,var(--spectrum-avatar-opacity-disabled))}@media (forced-colors:active){:host{--highcontrast-tag-border-color:ButtonText;--highcontrast-tag-border-color-hover:ButtonText;--highcontrast-tag-border-color-active:ButtonText;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:ButtonFace;--highcontrast-tag-background-color-hover:ButtonFace;--highcontrast-tag-background-color-active:ButtonFace;--highcontrast-tag-background-color-focus:ButtonFace;--highcontrast-tag-content-color:ButtonText;--highcontrast-tag-content-color-hover:ButtonText;--highcontrast-tag-content-color-active:ButtonText;--highcontrast-tag-content-color-focus:ButtonText;--highcontrast-tag-focus-ring-color:Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected:Highlight;--highcontrast-tag-border-color-selected-hover:Highlight;--highcontrast-tag-border-color-selected-active:Highlight;--highcontrast-tag-border-color-selected-focus:Highlight;--highcontrast-tag-background-color-selected:Highlight;--highcontrast-tag-background-color-selected-hover:Highlight;--highcontrast-tag-background-color-selected-active:Highlight;--highcontrast-tag-background-color-selected-focus:Highlight;--highcontrast-tag-content-color-selected:HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled:GrayText;--highcontrast-tag-background-color-disabled:ButtonFace;--highcontrast-tag-content-color-disabled:GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid:Highlight;--highcontrast-tag-border-color-invalid-hover:Highlight;--highcontrast-tag-border-color-invalid-active:Highlight;--highcontrast-tag-border-color-invalid-focus:Highlight;--highcontrast-tag-content-color-invalid:CanvasText;--highcontrast-tag-content-color-invalid-hover:CanvasText;--highcontrast-tag-content-color-invalid-active:CanvasText;--highcontrast-tag-content-color-invalid-focus:CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected:Highlight;--highcontrast-tag-border-color-invalid-selected-hover:Highlight;--highcontrast-tag-border-color-invalid-selected-focus:Highlight;--highcontrast-tag-border-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected:Highlight;--highcontrast-tag-background-color-invalid-selected-hover:Highlight;--highcontrast-tag-background-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected-focus:Highlight;--highcontrast-tag-content-color-invalid-selected:HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized:Highlight;--highcontrast-tag-border-color-emphasized-hover:Highlight;--highcontrast-tag-border-color-emphasized-active:Highlight;--highcontrast-tag-border-color-emphasized-focus:Highlight;--highcontrast-tag-background-color-emphasized:ButtonFace;--highcontrast-tag-background-color-emphasized-hover:ButtonFace;--highcontrast-tag-background-color-emphasized-active:ButtonFace;--highcontrast-tag-background-color-emphasized-focus:ButtonFace;--highcontrast-tag-content-color-emphasized:CanvasText}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tag.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2025 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-avatar-opacity-disabled:.3;--spectrum-tag-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tag-border-width:var(--spectrum-border-width-100);--spectrum-tag-focus-ring-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-tag-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-tag-focus-ring-color:var(--spectrum-focus-indicator-color);--spectrum-tag-label-line-height:var(--spectrum-line-height-100);--spectrum-tag-label-font-weight:var(--spectrum-regular-font-weight);--spectrum-tag-background-color-selected:var(--spectrum-neutral-background-color-selected-default);--spectrum-tag-background-color-selected-hover:var(--spectrum-neutral-background-color-selected-hover);--spectrum-tag-background-color-selected-active:var(--spectrum-neutral-background-color-selected-down);--spectrum-tag-background-color-selected-focus:var(--spectrum-neutral-background-color-selected-key-focus);--spectrum-tag-border-color-invalid:var(--spectrum-negative-color-900);--spectrum-tag-border-color-invalid-hover:var(--spectrum-negative-color-1000);--spectrum-tag-border-color-invalid-active:var(--spectrum-negative-color-1100);--spectrum-tag-border-color-invalid-focus:var(--spectrum-negative-color-1000);--spectrum-tag-content-color-invalid:var(--spectrum-negative-content-color-default);--spectrum-tag-content-color-invalid-hover:var(--spectrum-negative-content-color-hover);--spectrum-tag-content-color-invalid-active:var(--spectrum-negative-content-color-down);--spectrum-tag-content-color-invalid-focus:var(--spectrum-negative-content-color-key-focus);--spectrum-tag-border-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-border-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-border-color-invalid-selected-focus:var(--spectrum-negative-background-color-down);--spectrum-tag-border-color-invalid-selected-active:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-background-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-background-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-background-color-invalid-selected-active:var(--spectrum-negative-background-color-down);--spectrum-tag-background-color-invalid-selected-focus:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-content-color-invalid-selected:var(--spectrum-white);--spectrum-tag-border-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-border-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-border-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-border-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-background-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-background-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-background-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-background-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-content-color-emphasized:var(--spectrum-white);--spectrum-tag-content-color-disabled:var(--spectrum-disabled-content-color)}:host,:host{--spectrum-tag-height:var(--spectrum-component-height-100);--spectrum-tag-font-size:var(--spectrum-font-size-100);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-100);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-medium);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-100);--spectrum-tag-corner-radius:var(--spectrum-tag-size-medium-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-medium-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-medium-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-medium-clear-button-spacing-inline-end)}:host([size=s]){--spectrum-tag-height:var(--spectrum-component-height-75);--spectrum-tag-font-size:var(--spectrum-font-size-75);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-75);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-small);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-75);--spectrum-tag-corner-radius:var(--spectrum-tag-size-small-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-small-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-small-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-small-clear-button-spacing-inline-end)}:host([size=l]){--spectrum-tag-height:var(--spectrum-component-height-200);--spectrum-tag-font-size:var(--spectrum-font-size-200);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-200);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-large);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-200);--spectrum-tag-corner-radius:var(--spectrum-tag-size-large-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-large-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-large-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-large-clear-button-spacing-inline-end)}:host{border-color:var(--highcontrast-tag-border-color,var(--mod-tag-border-color,var(--spectrum-tag-border-color)));background-color:var(--highcontrast-tag-background-color,var(--mod-tag-background-color,var(--spectrum-tag-background-color)));color:var(--highcontrast-tag-content-color,var(--mod-tag-content-color,var(--spectrum-tag-content-color)));border-radius:var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius));border-width:var(--mod-tag-border-width,var(--spectrum-tag-border-width));block-size:var(--mod-tag-height,var(--spectrum-tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,box-shadow var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,background-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out;border-style:solid;outline:none;align-items:center;padding-inline-start:calc(var(--mod-tag-spacing-inline-start,var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));inline-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));flex-shrink:0;margin-block-start:calc(var(--mod-tag-icon-spacing-block-start,var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-icon-spacing-block-end,var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-icon-spacing-inline-end,var(--spectrum-tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-block-start:calc(var(--mod-tag-avatar-spacing-block-start,var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-avatar-spacing-block-end,var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-avatar-spacing-inline-end,var(--spectrum-tag-avatar-spacing-inline-end))}.clear-button{--mod-clear-button-width:fit-content;--spectrum-clearbutton-fill-size:fit-content;--spectrum-clearbutton-fill-background-color:transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--mod-tag-clear-button-spacing-inline-start,var(--spectrum-tag-clear-button-spacing-inline-start)) + var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end))*-1);margin-inline-end:calc(var(--mod-tag-clear-button-spacing-inline-end,var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-end:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)))}.clear-button .spectrum-ClearButton-fill{background-color:var(--mod-clearbutton-fill-background-color,var(--spectrum-clearbutton-fill-background-color));inline-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size));block-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--mod-tag-label-line-height,var(--spectrum-tag-label-line-height));font-weight:var(--mod-tag-label-font-weight,var(--spectrum-tag-label-font-weight));font-size:var(--mod-tag-font-size,var(--spectrum-tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;margin-inline-end:calc(var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-label-spacing-block,var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active,var(--mod-tag-border-color-active,var(--spectrum-tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active,var(--mod-tag-background-color-active,var(--spectrum-tag-background-color-active)));color:var(--highcontrast-tag-content-color-active,var(--mod-tag-content-color-active,var(--spectrum-tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus,var(--mod-tag-border-color-focus,var(--spectrum-tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus,var(--mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus,var(--mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:\"\";border-color:var(--highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color)));border-radius:calc(var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width,var(--spectrum-tag-border-width)));border-width:var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-block-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected,var(--mod-tag-border-color-selected,var(--spectrum-tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected,var(--mod-tag-background-color-selected,var(--spectrum-tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active,var(--mod-tag-border-color-selected-active,var(--spectrum-tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active,var(--mod-tag-background-color-selected-active,var(--spectrum-tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus,var(--mod-tag-border-color-selected-focus,var(--spectrum-tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus,var(--mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid,var(--mod-tag-border-color-invalid,var(--spectrum-tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid,var(--mod-tag-content-color-invalid,var(--spectrum-tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active,var(--mod-tag-border-color-invalid-active,var(--spectrum-tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active,var(--mod-tag-content-color-invalid-active,var(--spectrum-tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus,var(--mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus,var(--mod-tag-content-color-invalid-focus,var(--spectrum-tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected,var(--mod-tag-border-color-invalid-selected,var(--spectrum-tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected,var(--mod-tag-background-color-invalid-selected,var(--spectrum-tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active,var(--mod-tag-border-color-invalid-selected-active,var(--spectrum-tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active,var(--mod-tag-background-color-invalid-selected-active,var(--spectrum-tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus,var(--mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus,var(--mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized,var(--mod-tag-border-color-emphasized,var(--spectrum-tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized,var(--mod-tag-background-color-emphasized,var(--spectrum-tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}@media (hover:hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover,var(--mod-tag-border-color-hover,var(--spectrum-tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover,var(--mod-tag-background-color-hover,var(--spectrum-tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover,var(--mod-tag-content-color-hover,var(--spectrum-tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover,var(--mod-tag-border-color-selected-hover,var(--spectrum-tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover,var(--mod-tag-background-color-selected-hover,var(--spectrum-tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover,var(--mod-tag-border-color-invalid-hover,var(--spectrum-tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover,var(--mod-tag-content-color-invalid-hover,var(--spectrum-tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover,var(--mod-tag-border-color-invalid-selected-hover,var(--spectrum-tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover,var(--mod-tag-background-color-invalid-selected-hover,var(--spectrum-tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover,var(--mod-tag-border-color-emphasized-hover,var(--spectrum-tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover,var(--mod-tag-background-color-emphasized-hover,var(--spectrum-tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active,var(--mod-tag-border-color-emphasized-active,var(--spectrum-tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active,var(--mod-tag-background-color-emphasized-active,var(--spectrum-tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus,var(--mod-tag-border-color-emphasized-focus,var(--spectrum-tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus,var(--mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled,var(--mod-tag-border-color-disabled,var(--spectrum-tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled,var(--mod-tag-background-color-disabled,var(--spectrum-tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled,var(--mod-tag-content-color-disabled,var(--spectrum-tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--mod-avatar-opacity-disabled,var(--spectrum-avatar-opacity-disabled))}@media (forced-colors:active){:host{--highcontrast-tag-border-color:ButtonText;--highcontrast-tag-border-color-hover:ButtonText;--highcontrast-tag-border-color-active:ButtonText;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:ButtonFace;--highcontrast-tag-background-color-hover:ButtonFace;--highcontrast-tag-background-color-active:ButtonFace;--highcontrast-tag-background-color-focus:ButtonFace;--highcontrast-tag-content-color:ButtonText;--highcontrast-tag-content-color-hover:ButtonText;--highcontrast-tag-content-color-active:ButtonText;--highcontrast-tag-content-color-focus:ButtonText;--highcontrast-tag-focus-ring-color:Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected:Highlight;--highcontrast-tag-border-color-selected-hover:Highlight;--highcontrast-tag-border-color-selected-active:Highlight;--highcontrast-tag-border-color-selected-focus:Highlight;--highcontrast-tag-background-color-selected:Highlight;--highcontrast-tag-background-color-selected-hover:Highlight;--highcontrast-tag-background-color-selected-active:Highlight;--highcontrast-tag-background-color-selected-focus:Highlight;--highcontrast-tag-content-color-selected:HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled:GrayText;--highcontrast-tag-background-color-disabled:ButtonFace;--highcontrast-tag-content-color-disabled:GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid:Highlight;--highcontrast-tag-border-color-invalid-hover:Highlight;--highcontrast-tag-border-color-invalid-active:Highlight;--highcontrast-tag-border-color-invalid-focus:Highlight;--highcontrast-tag-content-color-invalid:CanvasText;--highcontrast-tag-content-color-invalid-hover:CanvasText;--highcontrast-tag-content-color-invalid-active:CanvasText;--highcontrast-tag-content-color-invalid-focus:CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected:Highlight;--highcontrast-tag-border-color-invalid-selected-hover:Highlight;--highcontrast-tag-border-color-invalid-selected-focus:Highlight;--highcontrast-tag-border-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected:Highlight;--highcontrast-tag-background-color-invalid-selected-hover:Highlight;--highcontrast-tag-background-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected-focus:Highlight;--highcontrast-tag-content-color-invalid-selected:HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized:Highlight;--highcontrast-tag-border-color-emphasized-hover:Highlight;--highcontrast-tag-border-color-emphasized-active:Highlight;--highcontrast-tag-border-color-emphasized-focus:Highlight;--highcontrast-tag-background-color-emphasized:ButtonFace;--highcontrast-tag-background-color-emphasized-hover:ButtonFace;--highcontrast-tag-background-color-emphasized-active:ButtonFace;--highcontrast-tag-background-color-emphasized-focus:ButtonFace;--highcontrast-tag-content-color-emphasized:CanvasText}}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-avatar-opacity-disabled:.3;--spectrum-tag-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tag-border-width:var(--spectrum-border-width-100);--spectrum-tag-focus-ring-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-tag-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-tag-focus-ring-color:var(--spectrum-focus-indicator-color);--spectrum-tag-label-line-height:var(--spectrum-line-height-100);--spectrum-tag-label-font-weight:var(--spectrum-regular-font-weight);--spectrum-tag-background-color-selected:var(--spectrum-neutral-background-color-selected-default);--spectrum-tag-background-color-selected-hover:var(--spectrum-neutral-background-color-selected-hover);--spectrum-tag-background-color-selected-active:var(--spectrum-neutral-background-color-selected-down);--spectrum-tag-background-color-selected-focus:var(--spectrum-neutral-background-color-selected-key-focus);--spectrum-tag-border-color-invalid:var(--spectrum-negative-color-900);--spectrum-tag-border-color-invalid-hover:var(--spectrum-negative-color-1000);--spectrum-tag-border-color-invalid-active:var(--spectrum-negative-color-1100);--spectrum-tag-border-color-invalid-focus:var(--spectrum-negative-color-1000);--spectrum-tag-content-color-invalid:var(--spectrum-negative-content-color-default);--spectrum-tag-content-color-invalid-hover:var(--spectrum-negative-content-color-hover);--spectrum-tag-content-color-invalid-active:var(--spectrum-negative-content-color-down);--spectrum-tag-content-color-invalid-focus:var(--spectrum-negative-content-color-key-focus);--spectrum-tag-border-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-border-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-border-color-invalid-selected-focus:var(--spectrum-negative-background-color-down);--spectrum-tag-border-color-invalid-selected-active:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-background-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-background-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-background-color-invalid-selected-active:var(--spectrum-negative-background-color-down);--spectrum-tag-background-color-invalid-selected-focus:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-content-color-invalid-selected:var(--spectrum-white);--spectrum-tag-border-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-border-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-border-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-border-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-background-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-background-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-background-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-background-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-content-color-emphasized:var(--spectrum-white);--spectrum-tag-content-color-disabled:var(--spectrum-disabled-content-color)}:host,:host{--spectrum-tag-height:var(--spectrum-component-height-100);--spectrum-tag-font-size:var(--spectrum-font-size-100);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-100);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-medium);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-100);--spectrum-tag-corner-radius:var(--spectrum-tag-size-medium-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-medium-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-medium-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-medium-clear-button-spacing-inline-end)}:host([size=s]){--spectrum-tag-height:var(--spectrum-component-height-75);--spectrum-tag-font-size:var(--spectrum-font-size-75);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-75);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-small);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-75);--spectrum-tag-corner-radius:var(--spectrum-tag-size-small-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-small-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-small-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-small-clear-button-spacing-inline-end)}:host([size=l]){--spectrum-tag-height:var(--spectrum-component-height-200);--spectrum-tag-font-size:var(--spectrum-font-size-200);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-200);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-large);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-200);--spectrum-tag-corner-radius:var(--spectrum-tag-size-large-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-large-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-large-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-large-clear-button-spacing-inline-end)}:host{border-color:var(--highcontrast-tag-border-color,var(--mod-tag-border-color,var(--spectrum-tag-border-color)));background-color:var(--highcontrast-tag-background-color,var(--mod-tag-background-color,var(--spectrum-tag-background-color)));color:var(--highcontrast-tag-content-color,var(--mod-tag-content-color,var(--spectrum-tag-content-color)));border-radius:var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius));border-width:var(--mod-tag-border-width,var(--spectrum-tag-border-width));block-size:var(--mod-tag-height,var(--spectrum-tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,box-shadow var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,background-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out;border-style:solid;outline:none;align-items:center;padding-inline-start:calc(var(--mod-tag-spacing-inline-start,var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));inline-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));flex-shrink:0;margin-block-start:calc(var(--mod-tag-icon-spacing-block-start,var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-icon-spacing-block-end,var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-icon-spacing-inline-end,var(--spectrum-tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-block-start:calc(var(--mod-tag-avatar-spacing-block-start,var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-avatar-spacing-block-end,var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-avatar-spacing-inline-end,var(--spectrum-tag-avatar-spacing-inline-end))}.clear-button{--mod-clear-button-width:fit-content;--spectrum-clearbutton-fill-size:fit-content;--spectrum-clearbutton-fill-background-color:transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--mod-tag-clear-button-spacing-inline-start,var(--spectrum-tag-clear-button-spacing-inline-start)) + var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end))*-1);margin-inline-end:calc(var(--mod-tag-clear-button-spacing-inline-end,var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-end:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)))}.clear-button .spectrum-ClearButton-fill{background-color:var(--mod-clearbutton-fill-background-color,var(--spectrum-clearbutton-fill-background-color));inline-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size));block-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--mod-tag-label-line-height,var(--spectrum-tag-label-line-height));font-weight:var(--mod-tag-label-font-weight,var(--spectrum-tag-label-font-weight));font-size:var(--mod-tag-font-size,var(--spectrum-tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;margin-inline-end:calc(var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-label-spacing-block,var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active,var(--mod-tag-border-color-active,var(--spectrum-tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active,var(--mod-tag-background-color-active,var(--spectrum-tag-background-color-active)));color:var(--highcontrast-tag-content-color-active,var(--mod-tag-content-color-active,var(--spectrum-tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus,var(--mod-tag-border-color-focus,var(--spectrum-tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus,var(--mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus,var(--mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:\"\";border-color:var(--highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color)));border-radius:calc(var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width,var(--spectrum-tag-border-width)));border-width:var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-block-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected,var(--mod-tag-border-color-selected,var(--spectrum-tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected,var(--mod-tag-background-color-selected,var(--spectrum-tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active,var(--mod-tag-border-color-selected-active,var(--spectrum-tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active,var(--mod-tag-background-color-selected-active,var(--spectrum-tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus,var(--mod-tag-border-color-selected-focus,var(--spectrum-tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus,var(--mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid,var(--mod-tag-border-color-invalid,var(--spectrum-tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid,var(--mod-tag-content-color-invalid,var(--spectrum-tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active,var(--mod-tag-border-color-invalid-active,var(--spectrum-tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active,var(--mod-tag-content-color-invalid-active,var(--spectrum-tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus,var(--mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus,var(--mod-tag-content-color-invalid-focus,var(--spectrum-tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected,var(--mod-tag-border-color-invalid-selected,var(--spectrum-tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected,var(--mod-tag-background-color-invalid-selected,var(--spectrum-tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active,var(--mod-tag-border-color-invalid-selected-active,var(--spectrum-tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active,var(--mod-tag-background-color-invalid-selected-active,var(--spectrum-tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus,var(--mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus,var(--mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized,var(--mod-tag-border-color-emphasized,var(--spectrum-tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized,var(--mod-tag-background-color-emphasized,var(--spectrum-tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}@media (hover:hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover,var(--mod-tag-border-color-hover,var(--spectrum-tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover,var(--mod-tag-background-color-hover,var(--spectrum-tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover,var(--mod-tag-content-color-hover,var(--spectrum-tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover,var(--mod-tag-border-color-selected-hover,var(--spectrum-tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover,var(--mod-tag-background-color-selected-hover,var(--spectrum-tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover,var(--mod-tag-border-color-invalid-hover,var(--spectrum-tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover,var(--mod-tag-content-color-invalid-hover,var(--spectrum-tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover,var(--mod-tag-border-color-invalid-selected-hover,var(--spectrum-tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover,var(--mod-tag-background-color-invalid-selected-hover,var(--spectrum-tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover,var(--mod-tag-border-color-emphasized-hover,var(--spectrum-tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover,var(--mod-tag-background-color-emphasized-hover,var(--spectrum-tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active,var(--mod-tag-border-color-emphasized-active,var(--spectrum-tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active,var(--mod-tag-background-color-emphasized-active,var(--spectrum-tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus,var(--mod-tag-border-color-emphasized-focus,var(--spectrum-tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus,var(--mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled,var(--mod-tag-border-color-disabled,var(--spectrum-tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled,var(--mod-tag-background-color-disabled,var(--spectrum-tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled,var(--mod-tag-content-color-disabled,var(--spectrum-tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--mod-avatar-opacity-disabled,var(--spectrum-avatar-opacity-disabled))}@media (forced-colors:active){:host{--highcontrast-tag-border-color:ButtonText;--highcontrast-tag-border-color-hover:ButtonText;--highcontrast-tag-border-color-active:ButtonText;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:ButtonFace;--highcontrast-tag-background-color-hover:ButtonFace;--highcontrast-tag-background-color-active:ButtonFace;--highcontrast-tag-background-color-focus:ButtonFace;--highcontrast-tag-content-color:ButtonText;--highcontrast-tag-content-color-hover:ButtonText;--highcontrast-tag-content-color-active:ButtonText;--highcontrast-tag-content-color-focus:ButtonText;--highcontrast-tag-focus-ring-color:Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected:Highlight;--highcontrast-tag-border-color-selected-hover:Highlight;--highcontrast-tag-border-color-selected-active:Highlight;--highcontrast-tag-border-color-selected-focus:Highlight;--highcontrast-tag-background-color-selected:Highlight;--highcontrast-tag-background-color-selected-hover:Highlight;--highcontrast-tag-background-color-selected-active:Highlight;--highcontrast-tag-background-color-selected-focus:Highlight;--highcontrast-tag-content-color-selected:HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled:GrayText;--highcontrast-tag-background-color-disabled:ButtonFace;--highcontrast-tag-content-color-disabled:GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid:Highlight;--highcontrast-tag-border-color-invalid-hover:Highlight;--highcontrast-tag-border-color-invalid-active:Highlight;--highcontrast-tag-border-color-invalid-focus:Highlight;--highcontrast-tag-content-color-invalid:CanvasText;--highcontrast-tag-content-color-invalid-hover:CanvasText;--highcontrast-tag-content-color-invalid-active:CanvasText;--highcontrast-tag-content-color-invalid-focus:CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected:Highlight;--highcontrast-tag-border-color-invalid-selected-hover:Highlight;--highcontrast-tag-border-color-invalid-selected-focus:Highlight;--highcontrast-tag-border-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected:Highlight;--highcontrast-tag-background-color-invalid-selected-hover:Highlight;--highcontrast-tag-background-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected-focus:Highlight;--highcontrast-tag-content-color-invalid-selected:HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized:Highlight;--highcontrast-tag-border-color-emphasized-hover:Highlight;--highcontrast-tag-border-color-emphasized-active:Highlight;--highcontrast-tag-border-color-emphasized-focus:Highlight;--highcontrast-tag-background-color-emphasized:ButtonFace;--highcontrast-tag-background-color-emphasized-hover:ButtonFace;--highcontrast-tag-background-color-emphasized-active:ButtonFace;--highcontrast-tag-background-color-emphasized-focus:ButtonFace;--highcontrast-tag-content-color-emphasized:CanvasText}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tags.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-tag-group-item-margin-block:var(--spectrum-spacing-75);--spectrum-tag-group-item-margin-inline:var(--spectrum-spacing-75);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:inline-flex}::slotted(*){margin-block:var(--mod-tag-group-item-margin-block,var(--spectrum-tag-group-item-margin-block));margin-inline:var(--mod-tag-group-item-margin-inline,var(--spectrum-tag-group-item-margin-inline))}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-tags.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-tag-group-item-margin-block:var(--spectrum-spacing-75);--spectrum-tag-group-item-margin-inline:var(--spectrum-spacing-75);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:inline-flex}::slotted(*){margin-block:var(--mod-tag-group-item-margin-block,var(--spectrum-tag-group-item-margin-block));margin-inline:var(--mod-tag-group-item-margin-inline,var(--spectrum-tag-group-item-margin-inline))}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tag-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-tag-background-color:var(--system-tag-background-color);--spectrum-tag-background-color-hover:var(--system-tag-background-color-hover);--spectrum-tag-background-color-active:var(--system-tag-background-color-active);--spectrum-tag-background-color-focus:var(--system-tag-background-color-focus);--spectrum-tag-size-small-corner-radius:var(--system-tag-size-small-corner-radius);--spectrum-tag-size-medium-corner-radius:var(--system-tag-size-medium-corner-radius);--spectrum-tag-size-large-corner-radius:var(--system-tag-size-large-corner-radius);--spectrum-tag-border-color:var(--system-tag-border-color);--spectrum-tag-border-color-hover:var(--system-tag-border-color-hover);--spectrum-tag-border-color-active:var(--system-tag-border-color-active);--spectrum-tag-border-color-focus:var(--system-tag-border-color-focus);--spectrum-tag-content-color:var(--system-tag-content-color);--spectrum-tag-content-color-hover:var(--system-tag-content-color-hover);--spectrum-tag-content-color-active:var(--system-tag-content-color-active);--spectrum-tag-content-color-focus:var(--system-tag-content-color-focus);--spectrum-tag-content-color-selected:var(--system-tag-content-color-selected);--spectrum-tag-border-color-selected:var(--system-tag-border-color-selected);--spectrum-tag-border-color-selected-hover:var(--system-tag-border-color-selected-hover);--spectrum-tag-border-color-selected-active:var(--system-tag-border-color-selected-active);--spectrum-tag-border-color-selected-focus:var(--system-tag-border-color-selected-focus);--spectrum-tag-border-color-disabled:var(--system-tag-border-color-disabled);--spectrum-tag-background-color-disabled:var(--system-tag-background-color-disabled);--spectrum-tag-size-small-spacing-inline-start:var(--system-tag-size-small-spacing-inline-start);--spectrum-tag-size-small-label-spacing-inline-end:var(--system-tag-size-small-label-spacing-inline-end);--spectrum-tag-size-small-clear-button-spacing-inline-end:var(--system-tag-size-small-clear-button-spacing-inline-end);--spectrum-tag-size-medium-spacing-inline-start:var(--system-tag-size-medium-spacing-inline-start);--spectrum-tag-size-medium-label-spacing-inline-end:var(--system-tag-size-medium-label-spacing-inline-end);--spectrum-tag-size-medium-clear-button-spacing-inline-end:var(--system-tag-size-medium-clear-button-spacing-inline-end);--spectrum-tag-size-large-spacing-inline-start:var(--system-tag-size-large-spacing-inline-start);--spectrum-tag-size-large-label-spacing-inline-end:var(--system-tag-size-large-label-spacing-inline-end);--spectrum-tag-size-large-clear-button-spacing-inline-end:var(--system-tag-size-large-clear-button-spacing-inline-end)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tag-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-tag-background-color:var(--system-tag-background-color);--spectrum-tag-background-color-hover:var(--system-tag-background-color-hover);--spectrum-tag-background-color-active:var(--system-tag-background-color-active);--spectrum-tag-background-color-focus:var(--system-tag-background-color-focus);--spectrum-tag-size-small-corner-radius:var(--system-tag-size-small-corner-radius);--spectrum-tag-size-medium-corner-radius:var(--system-tag-size-medium-corner-radius);--spectrum-tag-size-large-corner-radius:var(--system-tag-size-large-corner-radius);--spectrum-tag-border-color:var(--system-tag-border-color);--spectrum-tag-border-color-hover:var(--system-tag-border-color-hover);--spectrum-tag-border-color-active:var(--system-tag-border-color-active);--spectrum-tag-border-color-focus:var(--system-tag-border-color-focus);--spectrum-tag-content-color:var(--system-tag-content-color);--spectrum-tag-content-color-hover:var(--system-tag-content-color-hover);--spectrum-tag-content-color-active:var(--system-tag-content-color-active);--spectrum-tag-content-color-focus:var(--system-tag-content-color-focus);--spectrum-tag-content-color-selected:var(--system-tag-content-color-selected);--spectrum-tag-border-color-selected:var(--system-tag-border-color-selected);--spectrum-tag-border-color-selected-hover:var(--system-tag-border-color-selected-hover);--spectrum-tag-border-color-selected-active:var(--system-tag-border-color-selected-active);--spectrum-tag-border-color-selected-focus:var(--system-tag-border-color-selected-focus);--spectrum-tag-border-color-disabled:var(--system-tag-border-color-disabled);--spectrum-tag-background-color-disabled:var(--system-tag-background-color-disabled);--spectrum-tag-size-small-spacing-inline-start:var(--system-tag-size-small-spacing-inline-start);--spectrum-tag-size-small-label-spacing-inline-end:var(--system-tag-size-small-label-spacing-inline-end);--spectrum-tag-size-small-clear-button-spacing-inline-end:var(--system-tag-size-small-clear-button-spacing-inline-end);--spectrum-tag-size-medium-spacing-inline-start:var(--system-tag-size-medium-spacing-inline-start);--spectrum-tag-size-medium-label-spacing-inline-end:var(--system-tag-size-medium-label-spacing-inline-end);--spectrum-tag-size-medium-clear-button-spacing-inline-end:var(--system-tag-size-medium-clear-button-spacing-inline-end);--spectrum-tag-size-large-spacing-inline-start:var(--system-tag-size-large-spacing-inline-start);--spectrum-tag-size-large-label-spacing-inline-end:var(--system-tag-size-large-label-spacing-inline-end);--spectrum-tag-size-large-clear-button-spacing-inline-end:var(--system-tag-size-large-clear-button-spacing-inline-end)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/tag.css.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tag.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2025 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-avatar-opacity-disabled:.3;--spectrum-tag-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tag-border-width:var(--spectrum-border-width-100);--spectrum-tag-focus-ring-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-tag-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-tag-focus-ring-color:var(--spectrum-focus-indicator-color);--spectrum-tag-label-line-height:var(--spectrum-line-height-100);--spectrum-tag-label-font-weight:var(--spectrum-regular-font-weight);--spectrum-tag-background-color-selected:var(--spectrum-neutral-background-color-selected-default);--spectrum-tag-background-color-selected-hover:var(--spectrum-neutral-background-color-selected-hover);--spectrum-tag-background-color-selected-active:var(--spectrum-neutral-background-color-selected-down);--spectrum-tag-background-color-selected-focus:var(--spectrum-neutral-background-color-selected-key-focus);--spectrum-tag-border-color-invalid:var(--spectrum-negative-color-900);--spectrum-tag-border-color-invalid-hover:var(--spectrum-negative-color-1000);--spectrum-tag-border-color-invalid-active:var(--spectrum-negative-color-1100);--spectrum-tag-border-color-invalid-focus:var(--spectrum-negative-color-1000);--spectrum-tag-content-color-invalid:var(--spectrum-negative-content-color-default);--spectrum-tag-content-color-invalid-hover:var(--spectrum-negative-content-color-hover);--spectrum-tag-content-color-invalid-active:var(--spectrum-negative-content-color-down);--spectrum-tag-content-color-invalid-focus:var(--spectrum-negative-content-color-key-focus);--spectrum-tag-border-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-border-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-border-color-invalid-selected-focus:var(--spectrum-negative-background-color-down);--spectrum-tag-border-color-invalid-selected-active:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-background-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-background-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-background-color-invalid-selected-active:var(--spectrum-negative-background-color-down);--spectrum-tag-background-color-invalid-selected-focus:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-content-color-invalid-selected:var(--spectrum-white);--spectrum-tag-border-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-border-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-border-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-border-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-background-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-background-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-background-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-background-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-content-color-emphasized:var(--spectrum-white);--spectrum-tag-content-color-disabled:var(--spectrum-disabled-content-color)}:host,:host{--spectrum-tag-height:var(--spectrum-component-height-100);--spectrum-tag-font-size:var(--spectrum-font-size-100);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-100);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-medium);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-100);--spectrum-tag-corner-radius:var(--spectrum-tag-size-medium-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-medium-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-medium-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-medium-clear-button-spacing-inline-end)}:host([size=s]){--spectrum-tag-height:var(--spectrum-component-height-75);--spectrum-tag-font-size:var(--spectrum-font-size-75);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-75);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-small);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-75);--spectrum-tag-corner-radius:var(--spectrum-tag-size-small-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-small-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-small-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-small-clear-button-spacing-inline-end)}:host([size=l]){--spectrum-tag-height:var(--spectrum-component-height-200);--spectrum-tag-font-size:var(--spectrum-font-size-200);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-200);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-large);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-200);--spectrum-tag-corner-radius:var(--spectrum-tag-size-large-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-large-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-large-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-large-clear-button-spacing-inline-end)}:host{border-color:var(--highcontrast-tag-border-color,var(--mod-tag-border-color,var(--spectrum-tag-border-color)));background-color:var(--highcontrast-tag-background-color,var(--mod-tag-background-color,var(--spectrum-tag-background-color)));color:var(--highcontrast-tag-content-color,var(--mod-tag-content-color,var(--spectrum-tag-content-color)));border-radius:var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius));border-width:var(--mod-tag-border-width,var(--spectrum-tag-border-width));block-size:var(--mod-tag-height,var(--spectrum-tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,box-shadow var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,background-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out;border-style:solid;outline:none;align-items:center;padding-inline-start:calc(var(--mod-tag-spacing-inline-start,var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));inline-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));flex-shrink:0;margin-block-start:calc(var(--mod-tag-icon-spacing-block-start,var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-icon-spacing-block-end,var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-icon-spacing-inline-end,var(--spectrum-tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-block-start:calc(var(--mod-tag-avatar-spacing-block-start,var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-avatar-spacing-block-end,var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-avatar-spacing-inline-end,var(--spectrum-tag-avatar-spacing-inline-end))}.clear-button{--mod-clear-button-width:fit-content;--spectrum-clearbutton-fill-size:fit-content;--spectrum-clearbutton-fill-background-color:transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--mod-tag-clear-button-spacing-inline-start,var(--spectrum-tag-clear-button-spacing-inline-start)) + var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end))*-1);margin-inline-end:calc(var(--mod-tag-clear-button-spacing-inline-end,var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-end:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)))}.clear-button .spectrum-ClearButton-fill{background-color:var(--mod-clearbutton-fill-background-color,var(--spectrum-clearbutton-fill-background-color));inline-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size));block-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--mod-tag-label-line-height,var(--spectrum-tag-label-line-height));font-weight:var(--mod-tag-label-font-weight,var(--spectrum-tag-label-font-weight));font-size:var(--mod-tag-font-size,var(--spectrum-tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;margin-inline-end:calc(var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-label-spacing-block,var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active,var(--mod-tag-border-color-active,var(--spectrum-tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active,var(--mod-tag-background-color-active,var(--spectrum-tag-background-color-active)));color:var(--highcontrast-tag-content-color-active,var(--mod-tag-content-color-active,var(--spectrum-tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus,var(--mod-tag-border-color-focus,var(--spectrum-tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus,var(--mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus,var(--mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:\"\";border-color:var(--highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color)));border-radius:calc(var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width,var(--spectrum-tag-border-width)));border-width:var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-block-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected,var(--mod-tag-border-color-selected,var(--spectrum-tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected,var(--mod-tag-background-color-selected,var(--spectrum-tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active,var(--mod-tag-border-color-selected-active,var(--spectrum-tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active,var(--mod-tag-background-color-selected-active,var(--spectrum-tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus,var(--mod-tag-border-color-selected-focus,var(--spectrum-tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus,var(--mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid,var(--mod-tag-border-color-invalid,var(--spectrum-tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid,var(--mod-tag-content-color-invalid,var(--spectrum-tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active,var(--mod-tag-border-color-invalid-active,var(--spectrum-tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active,var(--mod-tag-content-color-invalid-active,var(--spectrum-tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus,var(--mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus,var(--mod-tag-content-color-invalid-focus,var(--spectrum-tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected,var(--mod-tag-border-color-invalid-selected,var(--spectrum-tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected,var(--mod-tag-background-color-invalid-selected,var(--spectrum-tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active,var(--mod-tag-border-color-invalid-selected-active,var(--spectrum-tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active,var(--mod-tag-background-color-invalid-selected-active,var(--spectrum-tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus,var(--mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus,var(--mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized,var(--mod-tag-border-color-emphasized,var(--spectrum-tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized,var(--mod-tag-background-color-emphasized,var(--spectrum-tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}@media (hover:hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover,var(--mod-tag-border-color-hover,var(--spectrum-tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover,var(--mod-tag-background-color-hover,var(--spectrum-tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover,var(--mod-tag-content-color-hover,var(--spectrum-tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover,var(--mod-tag-border-color-selected-hover,var(--spectrum-tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover,var(--mod-tag-background-color-selected-hover,var(--spectrum-tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover,var(--mod-tag-border-color-invalid-hover,var(--spectrum-tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover,var(--mod-tag-content-color-invalid-hover,var(--spectrum-tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover,var(--mod-tag-border-color-invalid-selected-hover,var(--spectrum-tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover,var(--mod-tag-background-color-invalid-selected-hover,var(--spectrum-tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover,var(--mod-tag-border-color-emphasized-hover,var(--spectrum-tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover,var(--mod-tag-background-color-emphasized-hover,var(--spectrum-tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active,var(--mod-tag-border-color-emphasized-active,var(--spectrum-tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active,var(--mod-tag-background-color-emphasized-active,var(--spectrum-tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus,var(--mod-tag-border-color-emphasized-focus,var(--spectrum-tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus,var(--mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled,var(--mod-tag-border-color-disabled,var(--spectrum-tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled,var(--mod-tag-background-color-disabled,var(--spectrum-tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled,var(--mod-tag-content-color-disabled,var(--spectrum-tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--mod-avatar-opacity-disabled,var(--spectrum-avatar-opacity-disabled))}@media (forced-colors:active){:host{--highcontrast-tag-border-color:ButtonText;--highcontrast-tag-border-color-hover:ButtonText;--highcontrast-tag-border-color-active:ButtonText;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:ButtonFace;--highcontrast-tag-background-color-hover:ButtonFace;--highcontrast-tag-background-color-active:ButtonFace;--highcontrast-tag-background-color-focus:ButtonFace;--highcontrast-tag-content-color:ButtonText;--highcontrast-tag-content-color-hover:ButtonText;--highcontrast-tag-content-color-active:ButtonText;--highcontrast-tag-content-color-focus:ButtonText;--highcontrast-tag-focus-ring-color:Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected:Highlight;--highcontrast-tag-border-color-selected-hover:Highlight;--highcontrast-tag-border-color-selected-active:Highlight;--highcontrast-tag-border-color-selected-focus:Highlight;--highcontrast-tag-background-color-selected:Highlight;--highcontrast-tag-background-color-selected-hover:Highlight;--highcontrast-tag-background-color-selected-active:Highlight;--highcontrast-tag-background-color-selected-focus:Highlight;--highcontrast-tag-content-color-selected:HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled:GrayText;--highcontrast-tag-background-color-disabled:ButtonFace;--highcontrast-tag-content-color-disabled:GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid:Highlight;--highcontrast-tag-border-color-invalid-hover:Highlight;--highcontrast-tag-border-color-invalid-active:Highlight;--highcontrast-tag-border-color-invalid-focus:Highlight;--highcontrast-tag-content-color-invalid:CanvasText;--highcontrast-tag-content-color-invalid-hover:CanvasText;--highcontrast-tag-content-color-invalid-active:CanvasText;--highcontrast-tag-content-color-invalid-focus:CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected:Highlight;--highcontrast-tag-border-color-invalid-selected-hover:Highlight;--highcontrast-tag-border-color-invalid-selected-focus:Highlight;--highcontrast-tag-border-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected:Highlight;--highcontrast-tag-background-color-invalid-selected-hover:Highlight;--highcontrast-tag-background-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected-focus:Highlight;--highcontrast-tag-content-color-invalid-selected:HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized:Highlight;--highcontrast-tag-border-color-emphasized-hover:Highlight;--highcontrast-tag-border-color-emphasized-active:Highlight;--highcontrast-tag-border-color-emphasized-focus:Highlight;--highcontrast-tag-background-color-emphasized:ButtonFace;--highcontrast-tag-background-color-emphasized-hover:ButtonFace;--highcontrast-tag-background-color-emphasized-active:ButtonFace;--highcontrast-tag-background-color-emphasized-focus:ButtonFace;--highcontrast-tag-content-color-emphasized:CanvasText}}:host{--spectrum-tag-background-color:var(--system-tag-background-color);--spectrum-tag-background-color-hover:var(--system-tag-background-color-hover);--spectrum-tag-background-color-active:var(--system-tag-background-color-active);--spectrum-tag-background-color-focus:var(--system-tag-background-color-focus);--spectrum-tag-size-small-corner-radius:var(--system-tag-size-small-corner-radius);--spectrum-tag-size-medium-corner-radius:var(--system-tag-size-medium-corner-radius);--spectrum-tag-size-large-corner-radius:var(--system-tag-size-large-corner-radius);--spectrum-tag-border-color:var(--system-tag-border-color);--spectrum-tag-border-color-hover:var(--system-tag-border-color-hover);--spectrum-tag-border-color-active:var(--system-tag-border-color-active);--spectrum-tag-border-color-focus:var(--system-tag-border-color-focus);--spectrum-tag-content-color:var(--system-tag-content-color);--spectrum-tag-content-color-hover:var(--system-tag-content-color-hover);--spectrum-tag-content-color-active:var(--system-tag-content-color-active);--spectrum-tag-content-color-focus:var(--system-tag-content-color-focus);--spectrum-tag-content-color-selected:var(--system-tag-content-color-selected);--spectrum-tag-border-color-selected:var(--system-tag-border-color-selected);--spectrum-tag-border-color-selected-hover:var(--system-tag-border-color-selected-hover);--spectrum-tag-border-color-selected-active:var(--system-tag-border-color-selected-active);--spectrum-tag-border-color-selected-focus:var(--system-tag-border-color-selected-focus);--spectrum-tag-border-color-disabled:var(--system-tag-border-color-disabled);--spectrum-tag-background-color-disabled:var(--system-tag-background-color-disabled);--spectrum-tag-size-small-spacing-inline-start:var(--system-tag-size-small-spacing-inline-start);--spectrum-tag-size-small-label-spacing-inline-end:var(--system-tag-size-small-label-spacing-inline-end);--spectrum-tag-size-small-clear-button-spacing-inline-end:var(--system-tag-size-small-clear-button-spacing-inline-end);--spectrum-tag-size-medium-spacing-inline-start:var(--system-tag-size-medium-spacing-inline-start);--spectrum-tag-size-medium-label-spacing-inline-end:var(--system-tag-size-medium-label-spacing-inline-end);--spectrum-tag-size-medium-clear-button-spacing-inline-end:var(--system-tag-size-medium-clear-button-spacing-inline-end);--spectrum-tag-size-large-spacing-inline-start:var(--system-tag-size-large-spacing-inline-start);--spectrum-tag-size-large-label-spacing-inline-end:var(--system-tag-size-large-label-spacing-inline-end);--spectrum-tag-size-large-clear-button-spacing-inline-end:var(--system-tag-size-large-clear-button-spacing-inline-end)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(--spectrum-tag-icon-color-error-key-focus,var(--spectrum-red-600));--spectrum-clearbutton-medium-icon-color-hover:var(--spectrum-clearbutton-medium-icon-color);--spectrum-clearbutton-medium-icon-color-down:var(--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-red-700))}:host([invalid]):hover .clear-button,:host([invalid]:is(:active,[active])) .clear-button{--spectrum-clearbutton-medium-icon-color:var(--spectrum-tag-icon-color-error-hover,var(--spectrum-red-600));--spectrum-clearbutton-medium-icon-color-hover:var(--spectrum-clearbutton-medium-icon-color);--spectrum-clearbutton-medium-icon-color-down:var(--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-red-700))}:host([size=xs]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-50)}:host([size=s]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=m]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-100)}:host([size=l]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-300)}:host([size=xxl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-400)}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-avatar-opacity-disabled:.3;--spectrum-tag-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tag-border-width:var(--spectrum-border-width-100);--spectrum-tag-focus-ring-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-tag-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-tag-focus-ring-color:var(--spectrum-focus-indicator-color);--spectrum-tag-label-line-height:var(--spectrum-line-height-100);--spectrum-tag-label-font-weight:var(--spectrum-regular-font-weight);--spectrum-tag-background-color-selected:var(--spectrum-neutral-background-color-selected-default);--spectrum-tag-background-color-selected-hover:var(--spectrum-neutral-background-color-selected-hover);--spectrum-tag-background-color-selected-active:var(--spectrum-neutral-background-color-selected-down);--spectrum-tag-background-color-selected-focus:var(--spectrum-neutral-background-color-selected-key-focus);--spectrum-tag-border-color-invalid:var(--spectrum-negative-color-900);--spectrum-tag-border-color-invalid-hover:var(--spectrum-negative-color-1000);--spectrum-tag-border-color-invalid-active:var(--spectrum-negative-color-1100);--spectrum-tag-border-color-invalid-focus:var(--spectrum-negative-color-1000);--spectrum-tag-content-color-invalid:var(--spectrum-negative-content-color-default);--spectrum-tag-content-color-invalid-hover:var(--spectrum-negative-content-color-hover);--spectrum-tag-content-color-invalid-active:var(--spectrum-negative-content-color-down);--spectrum-tag-content-color-invalid-focus:var(--spectrum-negative-content-color-key-focus);--spectrum-tag-border-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-border-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-border-color-invalid-selected-focus:var(--spectrum-negative-background-color-down);--spectrum-tag-border-color-invalid-selected-active:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-background-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-background-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-background-color-invalid-selected-active:var(--spectrum-negative-background-color-down);--spectrum-tag-background-color-invalid-selected-focus:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-content-color-invalid-selected:var(--spectrum-white);--spectrum-tag-border-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-border-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-border-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-border-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-background-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-background-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-background-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-background-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-content-color-emphasized:var(--spectrum-white);--spectrum-tag-content-color-disabled:var(--spectrum-disabled-content-color)}:host,:host{--spectrum-tag-height:var(--spectrum-component-height-100);--spectrum-tag-font-size:var(--spectrum-font-size-100);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-100);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-medium);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-100);--spectrum-tag-corner-radius:var(--spectrum-tag-size-medium-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-medium-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-medium-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-medium-clear-button-spacing-inline-end)}:host([size=s]){--spectrum-tag-height:var(--spectrum-component-height-75);--spectrum-tag-font-size:var(--spectrum-font-size-75);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-75);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-small);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-75);--spectrum-tag-corner-radius:var(--spectrum-tag-size-small-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-small-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-small-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-small-clear-button-spacing-inline-end)}:host([size=l]){--spectrum-tag-height:var(--spectrum-component-height-200);--spectrum-tag-font-size:var(--spectrum-font-size-200);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-200);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-large);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-200);--spectrum-tag-corner-radius:var(--spectrum-tag-size-large-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-large-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-large-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-large-clear-button-spacing-inline-end)}:host{border-color:var(--highcontrast-tag-border-color,var(--mod-tag-border-color,var(--spectrum-tag-border-color)));background-color:var(--highcontrast-tag-background-color,var(--mod-tag-background-color,var(--spectrum-tag-background-color)));color:var(--highcontrast-tag-content-color,var(--mod-tag-content-color,var(--spectrum-tag-content-color)));border-radius:var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius));border-width:var(--mod-tag-border-width,var(--spectrum-tag-border-width));block-size:var(--mod-tag-height,var(--spectrum-tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,box-shadow var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,background-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out;border-style:solid;outline:none;align-items:center;padding-inline-start:calc(var(--mod-tag-spacing-inline-start,var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));inline-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));flex-shrink:0;margin-block-start:calc(var(--mod-tag-icon-spacing-block-start,var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-icon-spacing-block-end,var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-icon-spacing-inline-end,var(--spectrum-tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-block-start:calc(var(--mod-tag-avatar-spacing-block-start,var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-avatar-spacing-block-end,var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-avatar-spacing-inline-end,var(--spectrum-tag-avatar-spacing-inline-end))}.clear-button{--mod-clear-button-width:fit-content;--spectrum-clearbutton-fill-size:fit-content;--spectrum-clearbutton-fill-background-color:transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--mod-tag-clear-button-spacing-inline-start,var(--spectrum-tag-clear-button-spacing-inline-start)) + var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end))*-1);margin-inline-end:calc(var(--mod-tag-clear-button-spacing-inline-end,var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-end:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)))}.clear-button .spectrum-ClearButton-fill{background-color:var(--mod-clearbutton-fill-background-color,var(--spectrum-clearbutton-fill-background-color));inline-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size));block-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--mod-tag-label-line-height,var(--spectrum-tag-label-line-height));font-weight:var(--mod-tag-label-font-weight,var(--spectrum-tag-label-font-weight));font-size:var(--mod-tag-font-size,var(--spectrum-tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;margin-inline-end:calc(var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-label-spacing-block,var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active,var(--mod-tag-border-color-active,var(--spectrum-tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active,var(--mod-tag-background-color-active,var(--spectrum-tag-background-color-active)));color:var(--highcontrast-tag-content-color-active,var(--mod-tag-content-color-active,var(--spectrum-tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus,var(--mod-tag-border-color-focus,var(--spectrum-tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus,var(--mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus,var(--mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:\"\";border-color:var(--highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color)));border-radius:calc(var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width,var(--spectrum-tag-border-width)));border-width:var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-block-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected,var(--mod-tag-border-color-selected,var(--spectrum-tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected,var(--mod-tag-background-color-selected,var(--spectrum-tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active,var(--mod-tag-border-color-selected-active,var(--spectrum-tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active,var(--mod-tag-background-color-selected-active,var(--spectrum-tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus,var(--mod-tag-border-color-selected-focus,var(--spectrum-tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus,var(--mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid,var(--mod-tag-border-color-invalid,var(--spectrum-tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid,var(--mod-tag-content-color-invalid,var(--spectrum-tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active,var(--mod-tag-border-color-invalid-active,var(--spectrum-tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active,var(--mod-tag-content-color-invalid-active,var(--spectrum-tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus,var(--mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus,var(--mod-tag-content-color-invalid-focus,var(--spectrum-tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected,var(--mod-tag-border-color-invalid-selected,var(--spectrum-tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected,var(--mod-tag-background-color-invalid-selected,var(--spectrum-tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active,var(--mod-tag-border-color-invalid-selected-active,var(--spectrum-tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active,var(--mod-tag-background-color-invalid-selected-active,var(--spectrum-tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus,var(--mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus,var(--mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized,var(--mod-tag-border-color-emphasized,var(--spectrum-tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized,var(--mod-tag-background-color-emphasized,var(--spectrum-tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}@media (hover:hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover,var(--mod-tag-border-color-hover,var(--spectrum-tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover,var(--mod-tag-background-color-hover,var(--spectrum-tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover,var(--mod-tag-content-color-hover,var(--spectrum-tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover,var(--mod-tag-border-color-selected-hover,var(--spectrum-tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover,var(--mod-tag-background-color-selected-hover,var(--spectrum-tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover,var(--mod-tag-border-color-invalid-hover,var(--spectrum-tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover,var(--mod-tag-content-color-invalid-hover,var(--spectrum-tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover,var(--mod-tag-border-color-invalid-selected-hover,var(--spectrum-tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover,var(--mod-tag-background-color-invalid-selected-hover,var(--spectrum-tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover,var(--mod-tag-border-color-emphasized-hover,var(--spectrum-tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover,var(--mod-tag-background-color-emphasized-hover,var(--spectrum-tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active,var(--mod-tag-border-color-emphasized-active,var(--spectrum-tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active,var(--mod-tag-background-color-emphasized-active,var(--spectrum-tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus,var(--mod-tag-border-color-emphasized-focus,var(--spectrum-tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus,var(--mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled,var(--mod-tag-border-color-disabled,var(--spectrum-tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled,var(--mod-tag-background-color-disabled,var(--spectrum-tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled,var(--mod-tag-content-color-disabled,var(--spectrum-tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--mod-avatar-opacity-disabled,var(--spectrum-avatar-opacity-disabled))}@media (forced-colors:active){:host{--highcontrast-tag-border-color:ButtonText;--highcontrast-tag-border-color-hover:ButtonText;--highcontrast-tag-border-color-active:ButtonText;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:ButtonFace;--highcontrast-tag-background-color-hover:ButtonFace;--highcontrast-tag-background-color-active:ButtonFace;--highcontrast-tag-background-color-focus:ButtonFace;--highcontrast-tag-content-color:ButtonText;--highcontrast-tag-content-color-hover:ButtonText;--highcontrast-tag-content-color-active:ButtonText;--highcontrast-tag-content-color-focus:ButtonText;--highcontrast-tag-focus-ring-color:Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected:Highlight;--highcontrast-tag-border-color-selected-hover:Highlight;--highcontrast-tag-border-color-selected-active:Highlight;--highcontrast-tag-border-color-selected-focus:Highlight;--highcontrast-tag-background-color-selected:Highlight;--highcontrast-tag-background-color-selected-hover:Highlight;--highcontrast-tag-background-color-selected-active:Highlight;--highcontrast-tag-background-color-selected-focus:Highlight;--highcontrast-tag-content-color-selected:HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled:GrayText;--highcontrast-tag-background-color-disabled:ButtonFace;--highcontrast-tag-content-color-disabled:GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid:Highlight;--highcontrast-tag-border-color-invalid-hover:Highlight;--highcontrast-tag-border-color-invalid-active:Highlight;--highcontrast-tag-border-color-invalid-focus:Highlight;--highcontrast-tag-content-color-invalid:CanvasText;--highcontrast-tag-content-color-invalid-hover:CanvasText;--highcontrast-tag-content-color-invalid-active:CanvasText;--highcontrast-tag-content-color-invalid-focus:CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected:Highlight;--highcontrast-tag-border-color-invalid-selected-hover:Highlight;--highcontrast-tag-border-color-invalid-selected-focus:Highlight;--highcontrast-tag-border-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected:Highlight;--highcontrast-tag-background-color-invalid-selected-hover:Highlight;--highcontrast-tag-background-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected-focus:Highlight;--highcontrast-tag-content-color-invalid-selected:HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized:Highlight;--highcontrast-tag-border-color-emphasized-hover:Highlight;--highcontrast-tag-border-color-emphasized-active:Highlight;--highcontrast-tag-border-color-emphasized-focus:Highlight;--highcontrast-tag-background-color-emphasized:ButtonFace;--highcontrast-tag-background-color-emphasized-hover:ButtonFace;--highcontrast-tag-background-color-emphasized-active:ButtonFace;--highcontrast-tag-background-color-emphasized-focus:ButtonFace;--highcontrast-tag-content-color-emphasized:CanvasText}}:host{--spectrum-tag-background-color:var(--system-tag-background-color);--spectrum-tag-background-color-hover:var(--system-tag-background-color-hover);--spectrum-tag-background-color-active:var(--system-tag-background-color-active);--spectrum-tag-background-color-focus:var(--system-tag-background-color-focus);--spectrum-tag-size-small-corner-radius:var(--system-tag-size-small-corner-radius);--spectrum-tag-size-medium-corner-radius:var(--system-tag-size-medium-corner-radius);--spectrum-tag-size-large-corner-radius:var(--system-tag-size-large-corner-radius);--spectrum-tag-border-color:var(--system-tag-border-color);--spectrum-tag-border-color-hover:var(--system-tag-border-color-hover);--spectrum-tag-border-color-active:var(--system-tag-border-color-active);--spectrum-tag-border-color-focus:var(--system-tag-border-color-focus);--spectrum-tag-content-color:var(--system-tag-content-color);--spectrum-tag-content-color-hover:var(--system-tag-content-color-hover);--spectrum-tag-content-color-active:var(--system-tag-content-color-active);--spectrum-tag-content-color-focus:var(--system-tag-content-color-focus);--spectrum-tag-content-color-selected:var(--system-tag-content-color-selected);--spectrum-tag-border-color-selected:var(--system-tag-border-color-selected);--spectrum-tag-border-color-selected-hover:var(--system-tag-border-color-selected-hover);--spectrum-tag-border-color-selected-active:var(--system-tag-border-color-selected-active);--spectrum-tag-border-color-selected-focus:var(--system-tag-border-color-selected-focus);--spectrum-tag-border-color-disabled:var(--system-tag-border-color-disabled);--spectrum-tag-background-color-disabled:var(--system-tag-background-color-disabled);--spectrum-tag-size-small-spacing-inline-start:var(--system-tag-size-small-spacing-inline-start);--spectrum-tag-size-small-label-spacing-inline-end:var(--system-tag-size-small-label-spacing-inline-end);--spectrum-tag-size-small-clear-button-spacing-inline-end:var(--system-tag-size-small-clear-button-spacing-inline-end);--spectrum-tag-size-medium-spacing-inline-start:var(--system-tag-size-medium-spacing-inline-start);--spectrum-tag-size-medium-label-spacing-inline-end:var(--system-tag-size-medium-label-spacing-inline-end);--spectrum-tag-size-medium-clear-button-spacing-inline-end:var(--system-tag-size-medium-clear-button-spacing-inline-end);--spectrum-tag-size-large-spacing-inline-start:var(--system-tag-size-large-spacing-inline-start);--spectrum-tag-size-large-label-spacing-inline-end:var(--system-tag-size-large-label-spacing-inline-end);--spectrum-tag-size-large-clear-button-spacing-inline-end:var(--system-tag-size-large-clear-button-spacing-inline-end)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(--spectrum-tag-icon-color-error-key-focus,var(--spectrum-red-600));--spectrum-clearbutton-medium-icon-color-hover:var(--spectrum-clearbutton-medium-icon-color);--spectrum-clearbutton-medium-icon-color-down:var(--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-red-700))}:host([invalid]):hover .clear-button,:host([invalid]:is(:active,[active])) .clear-button{--spectrum-clearbutton-medium-icon-color:var(--spectrum-tag-icon-color-error-hover,var(--spectrum-red-600));--spectrum-clearbutton-medium-icon-color-hover:var(--spectrum-clearbutton-medium-icon-color);--spectrum-clearbutton-medium-icon-color-down:var(--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-red-700))}:host([size=xs]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-50)}:host([size=s]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=m]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-100)}:host([size=l]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-300)}:host([size=xxl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-400)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/tag.css.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tag.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2025 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-avatar-opacity-disabled:.3;--spectrum-tag-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tag-border-width:var(--spectrum-border-width-100);--spectrum-tag-focus-ring-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-tag-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-tag-focus-ring-color:var(--spectrum-focus-indicator-color);--spectrum-tag-label-line-height:var(--spectrum-line-height-100);--spectrum-tag-label-font-weight:var(--spectrum-regular-font-weight);--spectrum-tag-background-color-selected:var(--spectrum-neutral-background-color-selected-default);--spectrum-tag-background-color-selected-hover:var(--spectrum-neutral-background-color-selected-hover);--spectrum-tag-background-color-selected-active:var(--spectrum-neutral-background-color-selected-down);--spectrum-tag-background-color-selected-focus:var(--spectrum-neutral-background-color-selected-key-focus);--spectrum-tag-border-color-invalid:var(--spectrum-negative-color-900);--spectrum-tag-border-color-invalid-hover:var(--spectrum-negative-color-1000);--spectrum-tag-border-color-invalid-active:var(--spectrum-negative-color-1100);--spectrum-tag-border-color-invalid-focus:var(--spectrum-negative-color-1000);--spectrum-tag-content-color-invalid:var(--spectrum-negative-content-color-default);--spectrum-tag-content-color-invalid-hover:var(--spectrum-negative-content-color-hover);--spectrum-tag-content-color-invalid-active:var(--spectrum-negative-content-color-down);--spectrum-tag-content-color-invalid-focus:var(--spectrum-negative-content-color-key-focus);--spectrum-tag-border-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-border-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-border-color-invalid-selected-focus:var(--spectrum-negative-background-color-down);--spectrum-tag-border-color-invalid-selected-active:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-background-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-background-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-background-color-invalid-selected-active:var(--spectrum-negative-background-color-down);--spectrum-tag-background-color-invalid-selected-focus:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-content-color-invalid-selected:var(--spectrum-white);--spectrum-tag-border-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-border-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-border-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-border-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-background-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-background-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-background-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-background-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-content-color-emphasized:var(--spectrum-white);--spectrum-tag-content-color-disabled:var(--spectrum-disabled-content-color)}:host,:host{--spectrum-tag-height:var(--spectrum-component-height-100);--spectrum-tag-font-size:var(--spectrum-font-size-100);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-100);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-medium);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-100);--spectrum-tag-corner-radius:var(--spectrum-tag-size-medium-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-medium-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-medium-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-medium-clear-button-spacing-inline-end)}:host([size=s]){--spectrum-tag-height:var(--spectrum-component-height-75);--spectrum-tag-font-size:var(--spectrum-font-size-75);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-75);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-small);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-75);--spectrum-tag-corner-radius:var(--spectrum-tag-size-small-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-small-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-small-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-small-clear-button-spacing-inline-end)}:host([size=l]){--spectrum-tag-height:var(--spectrum-component-height-200);--spectrum-tag-font-size:var(--spectrum-font-size-200);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-200);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-large);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-200);--spectrum-tag-corner-radius:var(--spectrum-tag-size-large-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-large-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-large-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-large-clear-button-spacing-inline-end)}:host{border-color:var(--highcontrast-tag-border-color,var(--mod-tag-border-color,var(--spectrum-tag-border-color)));background-color:var(--highcontrast-tag-background-color,var(--mod-tag-background-color,var(--spectrum-tag-background-color)));color:var(--highcontrast-tag-content-color,var(--mod-tag-content-color,var(--spectrum-tag-content-color)));border-radius:var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius));border-width:var(--mod-tag-border-width,var(--spectrum-tag-border-width));block-size:var(--mod-tag-height,var(--spectrum-tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,box-shadow var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,background-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out;border-style:solid;outline:none;align-items:center;padding-inline-start:calc(var(--mod-tag-spacing-inline-start,var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));inline-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));flex-shrink:0;margin-block-start:calc(var(--mod-tag-icon-spacing-block-start,var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-icon-spacing-block-end,var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-icon-spacing-inline-end,var(--spectrum-tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-block-start:calc(var(--mod-tag-avatar-spacing-block-start,var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-avatar-spacing-block-end,var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-avatar-spacing-inline-end,var(--spectrum-tag-avatar-spacing-inline-end))}.clear-button{--mod-clear-button-width:fit-content;--spectrum-clearbutton-fill-size:fit-content;--spectrum-clearbutton-fill-background-color:transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--mod-tag-clear-button-spacing-inline-start,var(--spectrum-tag-clear-button-spacing-inline-start)) + var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end))*-1);margin-inline-end:calc(var(--mod-tag-clear-button-spacing-inline-end,var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-end:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)))}.clear-button .spectrum-ClearButton-fill{background-color:var(--mod-clearbutton-fill-background-color,var(--spectrum-clearbutton-fill-background-color));inline-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size));block-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--mod-tag-label-line-height,var(--spectrum-tag-label-line-height));font-weight:var(--mod-tag-label-font-weight,var(--spectrum-tag-label-font-weight));font-size:var(--mod-tag-font-size,var(--spectrum-tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;margin-inline-end:calc(var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-label-spacing-block,var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active,var(--mod-tag-border-color-active,var(--spectrum-tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active,var(--mod-tag-background-color-active,var(--spectrum-tag-background-color-active)));color:var(--highcontrast-tag-content-color-active,var(--mod-tag-content-color-active,var(--spectrum-tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus,var(--mod-tag-border-color-focus,var(--spectrum-tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus,var(--mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus,var(--mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:\"\";border-color:var(--highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color)));border-radius:calc(var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width,var(--spectrum-tag-border-width)));border-width:var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-block-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected,var(--mod-tag-border-color-selected,var(--spectrum-tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected,var(--mod-tag-background-color-selected,var(--spectrum-tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active,var(--mod-tag-border-color-selected-active,var(--spectrum-tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active,var(--mod-tag-background-color-selected-active,var(--spectrum-tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus,var(--mod-tag-border-color-selected-focus,var(--spectrum-tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus,var(--mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid,var(--mod-tag-border-color-invalid,var(--spectrum-tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid,var(--mod-tag-content-color-invalid,var(--spectrum-tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active,var(--mod-tag-border-color-invalid-active,var(--spectrum-tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active,var(--mod-tag-content-color-invalid-active,var(--spectrum-tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus,var(--mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus,var(--mod-tag-content-color-invalid-focus,var(--spectrum-tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected,var(--mod-tag-border-color-invalid-selected,var(--spectrum-tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected,var(--mod-tag-background-color-invalid-selected,var(--spectrum-tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active,var(--mod-tag-border-color-invalid-selected-active,var(--spectrum-tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active,var(--mod-tag-background-color-invalid-selected-active,var(--spectrum-tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus,var(--mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus,var(--mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized,var(--mod-tag-border-color-emphasized,var(--spectrum-tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized,var(--mod-tag-background-color-emphasized,var(--spectrum-tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}@media (hover:hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover,var(--mod-tag-border-color-hover,var(--spectrum-tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover,var(--mod-tag-background-color-hover,var(--spectrum-tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover,var(--mod-tag-content-color-hover,var(--spectrum-tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover,var(--mod-tag-border-color-selected-hover,var(--spectrum-tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover,var(--mod-tag-background-color-selected-hover,var(--spectrum-tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover,var(--mod-tag-border-color-invalid-hover,var(--spectrum-tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover,var(--mod-tag-content-color-invalid-hover,var(--spectrum-tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover,var(--mod-tag-border-color-invalid-selected-hover,var(--spectrum-tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover,var(--mod-tag-background-color-invalid-selected-hover,var(--spectrum-tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover,var(--mod-tag-border-color-emphasized-hover,var(--spectrum-tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover,var(--mod-tag-background-color-emphasized-hover,var(--spectrum-tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active,var(--mod-tag-border-color-emphasized-active,var(--spectrum-tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active,var(--mod-tag-background-color-emphasized-active,var(--spectrum-tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus,var(--mod-tag-border-color-emphasized-focus,var(--spectrum-tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus,var(--mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled,var(--mod-tag-border-color-disabled,var(--spectrum-tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled,var(--mod-tag-background-color-disabled,var(--spectrum-tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled,var(--mod-tag-content-color-disabled,var(--spectrum-tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--mod-avatar-opacity-disabled,var(--spectrum-avatar-opacity-disabled))}@media (forced-colors:active){:host{--highcontrast-tag-border-color:ButtonText;--highcontrast-tag-border-color-hover:ButtonText;--highcontrast-tag-border-color-active:ButtonText;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:ButtonFace;--highcontrast-tag-background-color-hover:ButtonFace;--highcontrast-tag-background-color-active:ButtonFace;--highcontrast-tag-background-color-focus:ButtonFace;--highcontrast-tag-content-color:ButtonText;--highcontrast-tag-content-color-hover:ButtonText;--highcontrast-tag-content-color-active:ButtonText;--highcontrast-tag-content-color-focus:ButtonText;--highcontrast-tag-focus-ring-color:Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected:Highlight;--highcontrast-tag-border-color-selected-hover:Highlight;--highcontrast-tag-border-color-selected-active:Highlight;--highcontrast-tag-border-color-selected-focus:Highlight;--highcontrast-tag-background-color-selected:Highlight;--highcontrast-tag-background-color-selected-hover:Highlight;--highcontrast-tag-background-color-selected-active:Highlight;--highcontrast-tag-background-color-selected-focus:Highlight;--highcontrast-tag-content-color-selected:HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled:GrayText;--highcontrast-tag-background-color-disabled:ButtonFace;--highcontrast-tag-content-color-disabled:GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid:Highlight;--highcontrast-tag-border-color-invalid-hover:Highlight;--highcontrast-tag-border-color-invalid-active:Highlight;--highcontrast-tag-border-color-invalid-focus:Highlight;--highcontrast-tag-content-color-invalid:CanvasText;--highcontrast-tag-content-color-invalid-hover:CanvasText;--highcontrast-tag-content-color-invalid-active:CanvasText;--highcontrast-tag-content-color-invalid-focus:CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected:Highlight;--highcontrast-tag-border-color-invalid-selected-hover:Highlight;--highcontrast-tag-border-color-invalid-selected-focus:Highlight;--highcontrast-tag-border-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected:Highlight;--highcontrast-tag-background-color-invalid-selected-hover:Highlight;--highcontrast-tag-background-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected-focus:Highlight;--highcontrast-tag-content-color-invalid-selected:HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized:Highlight;--highcontrast-tag-border-color-emphasized-hover:Highlight;--highcontrast-tag-border-color-emphasized-active:Highlight;--highcontrast-tag-border-color-emphasized-focus:Highlight;--highcontrast-tag-background-color-emphasized:ButtonFace;--highcontrast-tag-background-color-emphasized-hover:ButtonFace;--highcontrast-tag-background-color-emphasized-active:ButtonFace;--highcontrast-tag-background-color-emphasized-focus:ButtonFace;--highcontrast-tag-content-color-emphasized:CanvasText}}:host{--spectrum-tag-background-color:var(--system-tag-background-color);--spectrum-tag-background-color-hover:var(--system-tag-background-color-hover);--spectrum-tag-background-color-active:var(--system-tag-background-color-active);--spectrum-tag-background-color-focus:var(--system-tag-background-color-focus);--spectrum-tag-size-small-corner-radius:var(--system-tag-size-small-corner-radius);--spectrum-tag-size-medium-corner-radius:var(--system-tag-size-medium-corner-radius);--spectrum-tag-size-large-corner-radius:var(--system-tag-size-large-corner-radius);--spectrum-tag-border-color:var(--system-tag-border-color);--spectrum-tag-border-color-hover:var(--system-tag-border-color-hover);--spectrum-tag-border-color-active:var(--system-tag-border-color-active);--spectrum-tag-border-color-focus:var(--system-tag-border-color-focus);--spectrum-tag-content-color:var(--system-tag-content-color);--spectrum-tag-content-color-hover:var(--system-tag-content-color-hover);--spectrum-tag-content-color-active:var(--system-tag-content-color-active);--spectrum-tag-content-color-focus:var(--system-tag-content-color-focus);--spectrum-tag-content-color-selected:var(--system-tag-content-color-selected);--spectrum-tag-border-color-selected:var(--system-tag-border-color-selected);--spectrum-tag-border-color-selected-hover:var(--system-tag-border-color-selected-hover);--spectrum-tag-border-color-selected-active:var(--system-tag-border-color-selected-active);--spectrum-tag-border-color-selected-focus:var(--system-tag-border-color-selected-focus);--spectrum-tag-border-color-disabled:var(--system-tag-border-color-disabled);--spectrum-tag-background-color-disabled:var(--system-tag-background-color-disabled);--spectrum-tag-size-small-spacing-inline-start:var(--system-tag-size-small-spacing-inline-start);--spectrum-tag-size-small-label-spacing-inline-end:var(--system-tag-size-small-label-spacing-inline-end);--spectrum-tag-size-small-clear-button-spacing-inline-end:var(--system-tag-size-small-clear-button-spacing-inline-end);--spectrum-tag-size-medium-spacing-inline-start:var(--system-tag-size-medium-spacing-inline-start);--spectrum-tag-size-medium-label-spacing-inline-end:var(--system-tag-size-medium-label-spacing-inline-end);--spectrum-tag-size-medium-clear-button-spacing-inline-end:var(--system-tag-size-medium-clear-button-spacing-inline-end);--spectrum-tag-size-large-spacing-inline-start:var(--system-tag-size-large-spacing-inline-start);--spectrum-tag-size-large-label-spacing-inline-end:var(--system-tag-size-large-label-spacing-inline-end);--spectrum-tag-size-large-clear-button-spacing-inline-end:var(--system-tag-size-large-clear-button-spacing-inline-end)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(--spectrum-tag-icon-color-error-key-focus,var(--spectrum-red-600));--spectrum-clearbutton-medium-icon-color-hover:var(--spectrum-clearbutton-medium-icon-color);--spectrum-clearbutton-medium-icon-color-down:var(--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-red-700))}:host([invalid]):hover .clear-button,:host([invalid]:is(:active,[active])) .clear-button{--spectrum-clearbutton-medium-icon-color:var(--spectrum-tag-icon-color-error-hover,var(--spectrum-red-600));--spectrum-clearbutton-medium-icon-color-hover:var(--spectrum-clearbutton-medium-icon-color);--spectrum-clearbutton-medium-icon-color-down:var(--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-red-700))}:host([size=xs]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-50)}:host([size=s]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=m]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-100)}:host([size=l]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-300)}:host([size=xxl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-400)}\n`;\nexport default styles;"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-avatar-opacity-disabled:.3;--spectrum-tag-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tag-border-width:var(--spectrum-border-width-100);--spectrum-tag-focus-ring-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-tag-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-tag-focus-ring-color:var(--spectrum-focus-indicator-color);--spectrum-tag-label-line-height:var(--spectrum-line-height-100);--spectrum-tag-label-font-weight:var(--spectrum-regular-font-weight);--spectrum-tag-background-color-selected:var(--spectrum-neutral-background-color-selected-default);--spectrum-tag-background-color-selected-hover:var(--spectrum-neutral-background-color-selected-hover);--spectrum-tag-background-color-selected-active:var(--spectrum-neutral-background-color-selected-down);--spectrum-tag-background-color-selected-focus:var(--spectrum-neutral-background-color-selected-key-focus);--spectrum-tag-border-color-invalid:var(--spectrum-negative-color-900);--spectrum-tag-border-color-invalid-hover:var(--spectrum-negative-color-1000);--spectrum-tag-border-color-invalid-active:var(--spectrum-negative-color-1100);--spectrum-tag-border-color-invalid-focus:var(--spectrum-negative-color-1000);--spectrum-tag-content-color-invalid:var(--spectrum-negative-content-color-default);--spectrum-tag-content-color-invalid-hover:var(--spectrum-negative-content-color-hover);--spectrum-tag-content-color-invalid-active:var(--spectrum-negative-content-color-down);--spectrum-tag-content-color-invalid-focus:var(--spectrum-negative-content-color-key-focus);--spectrum-tag-border-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-border-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-border-color-invalid-selected-focus:var(--spectrum-negative-background-color-down);--spectrum-tag-border-color-invalid-selected-active:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-background-color-invalid-selected:var(--spectrum-negative-background-color-default);--spectrum-tag-background-color-invalid-selected-hover:var(--spectrum-negative-background-color-hover);--spectrum-tag-background-color-invalid-selected-active:var(--spectrum-negative-background-color-down);--spectrum-tag-background-color-invalid-selected-focus:var(--spectrum-negative-background-color-key-focus);--spectrum-tag-content-color-invalid-selected:var(--spectrum-white);--spectrum-tag-border-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-border-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-border-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-border-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-background-color-emphasized:var(--spectrum-accent-background-color-default);--spectrum-tag-background-color-emphasized-hover:var(--spectrum-accent-background-color-hover);--spectrum-tag-background-color-emphasized-active:var(--spectrum-accent-background-color-down);--spectrum-tag-background-color-emphasized-focus:var(--spectrum-accent-background-color-key-focus);--spectrum-tag-content-color-emphasized:var(--spectrum-white);--spectrum-tag-content-color-disabled:var(--spectrum-disabled-content-color)}:host,:host{--spectrum-tag-height:var(--spectrum-component-height-100);--spectrum-tag-font-size:var(--spectrum-font-size-100);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-100);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-medium);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-100);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-medium);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-100);--spectrum-tag-corner-radius:var(--spectrum-tag-size-medium-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-medium-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-medium-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-medium-clear-button-spacing-inline-end)}:host([size=s]){--spectrum-tag-height:var(--spectrum-component-height-75);--spectrum-tag-font-size:var(--spectrum-font-size-75);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-75);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-small);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-75);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-small);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-75);--spectrum-tag-corner-radius:var(--spectrum-tag-size-small-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-small-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-small-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-small-clear-button-spacing-inline-end)}:host([size=l]){--spectrum-tag-height:var(--spectrum-component-height-200);--spectrum-tag-font-size:var(--spectrum-font-size-200);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-tag-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-200);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-large);--spectrum-tag-icon-spacing-block-start:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-block-end:var(--spectrum-component-top-to-workflow-icon-200);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-avatar-spacing-block-start:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-block-end:var(--spectrum-tag-top-to-avatar-large);--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-label-spacing-block:var(--spectrum-component-top-to-text-200);--spectrum-tag-corner-radius:var(--spectrum-tag-size-large-corner-radius);--spectrum-tag-spacing-inline-start:var(--spectrum-tag-size-large-spacing-inline-start);--spectrum-tag-label-spacing-inline-end:var(--spectrum-tag-size-large-label-spacing-inline-end);--spectrum-tag-clear-button-spacing-inline-end:var(--spectrum-tag-size-large-clear-button-spacing-inline-end)}:host{border-color:var(--highcontrast-tag-border-color,var(--mod-tag-border-color,var(--spectrum-tag-border-color)));background-color:var(--highcontrast-tag-background-color,var(--mod-tag-background-color,var(--spectrum-tag-background-color)));color:var(--highcontrast-tag-content-color,var(--mod-tag-content-color,var(--spectrum-tag-content-color)));border-radius:var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius));border-width:var(--mod-tag-border-width,var(--spectrum-tag-border-width));block-size:var(--mod-tag-height,var(--spectrum-tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,box-shadow var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out,background-color var(--mod-tag-animation-duration,var(--spectrum-tag-animation-duration))ease-in-out;border-style:solid;outline:none;align-items:center;padding-inline-start:calc(var(--mod-tag-spacing-inline-start,var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));inline-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));flex-shrink:0;margin-block-start:calc(var(--mod-tag-icon-spacing-block-start,var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-icon-spacing-block-end,var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-icon-spacing-inline-end,var(--spectrum-tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-block-start:calc(var(--mod-tag-avatar-spacing-block-start,var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-block-end:calc(var(--mod-tag-avatar-spacing-block-end,var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));margin-inline-end:var(--mod-tag-avatar-spacing-inline-end,var(--spectrum-tag-avatar-spacing-inline-end))}.clear-button{--mod-clear-button-width:fit-content;--spectrum-clearbutton-fill-size:fit-content;--spectrum-clearbutton-fill-background-color:transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--mod-tag-clear-button-spacing-inline-start,var(--spectrum-tag-clear-button-spacing-inline-start)) + var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end))*-1);margin-inline-end:calc(var(--mod-tag-clear-button-spacing-inline-end,var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-end:calc(var(--mod-tag-clear-button-spacing-block,var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)))}.clear-button .spectrum-ClearButton-fill{background-color:var(--mod-clearbutton-fill-background-color,var(--spectrum-clearbutton-fill-background-color));inline-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size));block-size:var(--mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--mod-tag-label-line-height,var(--spectrum-tag-label-line-height));font-weight:var(--mod-tag-label-font-weight,var(--spectrum-tag-label-font-weight));font-size:var(--mod-tag-font-size,var(--spectrum-tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;margin-inline-end:calc(var(--mod-tag-label-spacing-inline-end,var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));padding-block-start:calc(var(--mod-tag-label-spacing-block,var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width,var(--spectrum-tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active,var(--mod-tag-border-color-active,var(--spectrum-tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active,var(--mod-tag-background-color-active,var(--spectrum-tag-background-color-active)));color:var(--highcontrast-tag-content-color-active,var(--mod-tag-content-color-active,var(--spectrum-tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus,var(--mod-tag-border-color-focus,var(--spectrum-tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus,var(--mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus,var(--mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:\"\";border-color:var(--highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color)));border-radius:calc(var(--mod-tag-corner-radius,var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width,var(--spectrum-tag-border-width)));border-width:var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-block-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-start:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)));inset-inline-end:calc(var(--mod-tag-focus-ring-gap,var(--spectrum-tag-focus-ring-gap))*-1 - var(--mod-tag-border-width,var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected,var(--mod-tag-border-color-selected,var(--spectrum-tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected,var(--mod-tag-background-color-selected,var(--spectrum-tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active,var(--mod-tag-border-color-selected-active,var(--spectrum-tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active,var(--mod-tag-background-color-selected-active,var(--spectrum-tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus,var(--mod-tag-border-color-selected-focus,var(--spectrum-tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus,var(--mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid,var(--mod-tag-border-color-invalid,var(--spectrum-tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid,var(--mod-tag-content-color-invalid,var(--spectrum-tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active,var(--mod-tag-border-color-invalid-active,var(--spectrum-tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active,var(--mod-tag-content-color-invalid-active,var(--spectrum-tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus,var(--mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus,var(--mod-tag-content-color-invalid-focus,var(--spectrum-tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected,var(--mod-tag-border-color-invalid-selected,var(--spectrum-tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected,var(--mod-tag-background-color-invalid-selected,var(--spectrum-tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active,var(--mod-tag-border-color-invalid-selected-active,var(--spectrum-tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active,var(--mod-tag-background-color-invalid-selected-active,var(--spectrum-tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus,var(--mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus,var(--mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized,var(--mod-tag-border-color-emphasized,var(--spectrum-tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized,var(--mod-tag-background-color-emphasized,var(--spectrum-tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}@media (hover:hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover,var(--mod-tag-border-color-hover,var(--spectrum-tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover,var(--mod-tag-background-color-hover,var(--spectrum-tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover,var(--mod-tag-content-color-hover,var(--spectrum-tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover,var(--mod-tag-border-color-selected-hover,var(--spectrum-tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover,var(--mod-tag-background-color-selected-hover,var(--spectrum-tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected,var(--mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover,var(--mod-tag-border-color-invalid-hover,var(--spectrum-tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover,var(--mod-tag-content-color-invalid-hover,var(--spectrum-tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover,var(--mod-tag-border-color-invalid-selected-hover,var(--spectrum-tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover,var(--mod-tag-background-color-invalid-selected-hover,var(--spectrum-tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected,var(--mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover,var(--mod-tag-border-color-emphasized-hover,var(--spectrum-tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover,var(--mod-tag-background-color-emphasized-hover,var(--spectrum-tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized,var(--mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active,var(--mod-tag-border-color-emphasized-active,var(--spectrum-tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active,var(--mod-tag-background-color-emphasized-active,var(--spectrum-tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus,var(--mod-tag-border-color-emphasized-focus,var(--spectrum-tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus,var(--mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled,var(--mod-tag-border-color-disabled,var(--spectrum-tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled,var(--mod-tag-background-color-disabled,var(--spectrum-tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled,var(--mod-tag-content-color-disabled,var(--spectrum-tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--mod-avatar-opacity-disabled,var(--spectrum-avatar-opacity-disabled))}@media (forced-colors:active){:host{--highcontrast-tag-border-color:ButtonText;--highcontrast-tag-border-color-hover:ButtonText;--highcontrast-tag-border-color-active:ButtonText;--highcontrast-tag-border-color-focus:Highlight;--highcontrast-tag-background-color:ButtonFace;--highcontrast-tag-background-color-hover:ButtonFace;--highcontrast-tag-background-color-active:ButtonFace;--highcontrast-tag-background-color-focus:ButtonFace;--highcontrast-tag-content-color:ButtonText;--highcontrast-tag-content-color-hover:ButtonText;--highcontrast-tag-content-color-active:ButtonText;--highcontrast-tag-content-color-focus:ButtonText;--highcontrast-tag-focus-ring-color:Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected:Highlight;--highcontrast-tag-border-color-selected-hover:Highlight;--highcontrast-tag-border-color-selected-active:Highlight;--highcontrast-tag-border-color-selected-focus:Highlight;--highcontrast-tag-background-color-selected:Highlight;--highcontrast-tag-background-color-selected-hover:Highlight;--highcontrast-tag-background-color-selected-active:Highlight;--highcontrast-tag-background-color-selected-focus:Highlight;--highcontrast-tag-content-color-selected:HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled:GrayText;--highcontrast-tag-background-color-disabled:ButtonFace;--highcontrast-tag-content-color-disabled:GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid:Highlight;--highcontrast-tag-border-color-invalid-hover:Highlight;--highcontrast-tag-border-color-invalid-active:Highlight;--highcontrast-tag-border-color-invalid-focus:Highlight;--highcontrast-tag-content-color-invalid:CanvasText;--highcontrast-tag-content-color-invalid-hover:CanvasText;--highcontrast-tag-content-color-invalid-active:CanvasText;--highcontrast-tag-content-color-invalid-focus:CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected:Highlight;--highcontrast-tag-border-color-invalid-selected-hover:Highlight;--highcontrast-tag-border-color-invalid-selected-focus:Highlight;--highcontrast-tag-border-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected:Highlight;--highcontrast-tag-background-color-invalid-selected-hover:Highlight;--highcontrast-tag-background-color-invalid-selected-active:Highlight;--highcontrast-tag-background-color-invalid-selected-focus:Highlight;--highcontrast-tag-content-color-invalid-selected:HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized:Highlight;--highcontrast-tag-border-color-emphasized-hover:Highlight;--highcontrast-tag-border-color-emphasized-active:Highlight;--highcontrast-tag-border-color-emphasized-focus:Highlight;--highcontrast-tag-background-color-emphasized:ButtonFace;--highcontrast-tag-background-color-emphasized-hover:ButtonFace;--highcontrast-tag-background-color-emphasized-active:ButtonFace;--highcontrast-tag-background-color-emphasized-focus:ButtonFace;--highcontrast-tag-content-color-emphasized:CanvasText}}:host{--spectrum-tag-background-color:var(--system-tag-background-color);--spectrum-tag-background-color-hover:var(--system-tag-background-color-hover);--spectrum-tag-background-color-active:var(--system-tag-background-color-active);--spectrum-tag-background-color-focus:var(--system-tag-background-color-focus);--spectrum-tag-size-small-corner-radius:var(--system-tag-size-small-corner-radius);--spectrum-tag-size-medium-corner-radius:var(--system-tag-size-medium-corner-radius);--spectrum-tag-size-large-corner-radius:var(--system-tag-size-large-corner-radius);--spectrum-tag-border-color:var(--system-tag-border-color);--spectrum-tag-border-color-hover:var(--system-tag-border-color-hover);--spectrum-tag-border-color-active:var(--system-tag-border-color-active);--spectrum-tag-border-color-focus:var(--system-tag-border-color-focus);--spectrum-tag-content-color:var(--system-tag-content-color);--spectrum-tag-content-color-hover:var(--system-tag-content-color-hover);--spectrum-tag-content-color-active:var(--system-tag-content-color-active);--spectrum-tag-content-color-focus:var(--system-tag-content-color-focus);--spectrum-tag-content-color-selected:var(--system-tag-content-color-selected);--spectrum-tag-border-color-selected:var(--system-tag-border-color-selected);--spectrum-tag-border-color-selected-hover:var(--system-tag-border-color-selected-hover);--spectrum-tag-border-color-selected-active:var(--system-tag-border-color-selected-active);--spectrum-tag-border-color-selected-focus:var(--system-tag-border-color-selected-focus);--spectrum-tag-border-color-disabled:var(--system-tag-border-color-disabled);--spectrum-tag-background-color-disabled:var(--system-tag-background-color-disabled);--spectrum-tag-size-small-spacing-inline-start:var(--system-tag-size-small-spacing-inline-start);--spectrum-tag-size-small-label-spacing-inline-end:var(--system-tag-size-small-label-spacing-inline-end);--spectrum-tag-size-small-clear-button-spacing-inline-end:var(--system-tag-size-small-clear-button-spacing-inline-end);--spectrum-tag-size-medium-spacing-inline-start:var(--system-tag-size-medium-spacing-inline-start);--spectrum-tag-size-medium-label-spacing-inline-end:var(--system-tag-size-medium-label-spacing-inline-end);--spectrum-tag-size-medium-clear-button-spacing-inline-end:var(--system-tag-size-medium-clear-button-spacing-inline-end);--spectrum-tag-size-large-spacing-inline-start:var(--system-tag-size-large-spacing-inline-start);--spectrum-tag-size-large-label-spacing-inline-end:var(--system-tag-size-large-label-spacing-inline-end);--spectrum-tag-size-large-clear-button-spacing-inline-end:var(--system-tag-size-large-clear-button-spacing-inline-end)}:host([invalid]) .clear-button{--spectrum-clearbutton-medium-icon-color:var(--spectrum-tag-icon-color-error-key-focus,var(--spectrum-red-600));--spectrum-clearbutton-medium-icon-color-hover:var(--spectrum-clearbutton-medium-icon-color);--spectrum-clearbutton-medium-icon-color-down:var(--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-red-700))}:host([invalid]):hover .clear-button,:host([invalid]:is(:active,[active])) .clear-button{--spectrum-clearbutton-medium-icon-color:var(--spectrum-tag-icon-color-error-hover,var(--spectrum-red-600));--spectrum-clearbutton-medium-icon-color-hover:var(--spectrum-clearbutton-medium-icon-color);--spectrum-clearbutton-medium-icon-color-down:var(--spectrum-tag-deletable-icon-color-error-down,var(--spectrum-red-700))}:host([size=xs]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-50)}:host([size=s]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=m]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-100)}:host([size=l]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-300)}:host([size=xxl]){--spectrum-icon-size:var(--spectrum-workflow-icon-size-400)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tags-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tags-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/tags.css.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tags.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-tag-group-item-margin-block:var(--spectrum-spacing-75);--spectrum-tag-group-item-margin-inline:var(--spectrum-spacing-75);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:inline-flex}::slotted(*){margin-block:var(--mod-tag-group-item-margin-block,var(--spectrum-tag-group-item-margin-block));margin-inline:var(--mod-tag-group-item-margin-inline,var(--spectrum-tag-group-item-margin-inline))}:host{--mod-clear-button-width:fit-content;margin:0;padding:0;list-style:none;display:inline-flex}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/tags.css.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tags.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-tag-group-item-margin-block:var(--spectrum-spacing-75);--spectrum-tag-group-item-margin-inline:var(--spectrum-spacing-75);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:inline-flex}::slotted(*){margin-block:var(--mod-tag-group-item-margin-block,var(--spectrum-tag-group-item-margin-block));margin-inline:var(--mod-tag-group-item-margin-inline,var(--spectrum-tag-group-item-margin-inline))}:host{--mod-clear-button-width:fit-content;margin:0;padding:0;list-style:none;display:inline-flex}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|