@spectrum-web-components/tags 0.41.1 → 0.42.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.
Files changed (17) hide show
  1. package/package.json +8 -8
  2. package/src/spectrum-tag.css.dev.js +1 -523
  3. package/src/spectrum-tag.css.dev.js.map +2 -2
  4. package/src/spectrum-tag.css.js +3 -525
  5. package/src/spectrum-tag.css.js.map +2 -2
  6. package/src/spectrum-tags.css.dev.js +1 -5
  7. package/src/spectrum-tags.css.dev.js.map +2 -2
  8. package/src/spectrum-tags.css.js +1 -5
  9. package/src/spectrum-tags.css.js.map +2 -2
  10. package/src/tag.css.dev.js +1 -541
  11. package/src/tag.css.dev.js.map +2 -2
  12. package/src/tag.css.js +3 -543
  13. package/src/tag.css.js.map +2 -2
  14. package/src/tags.css.dev.js +1 -5
  15. package/src/tags.css.dev.js.map +2 -2
  16. package/src/tags.css.js +3 -7
  17. package/src/tags.css.js.map +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/tags",
3
- "version": "0.41.1",
3
+ "version": "0.42.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -66,14 +66,14 @@
66
66
  "lit-html"
67
67
  ],
68
68
  "dependencies": {
69
- "@spectrum-web-components/base": "^0.41.1",
70
- "@spectrum-web-components/button": "^0.41.1",
71
- "@spectrum-web-components/reactive-controllers": "^0.41.1",
72
- "@spectrum-web-components/shared": "^0.41.1"
69
+ "@spectrum-web-components/base": "^0.42.0",
70
+ "@spectrum-web-components/button": "^0.42.0",
71
+ "@spectrum-web-components/reactive-controllers": "^0.42.0",
72
+ "@spectrum-web-components/shared": "^0.42.0"
73
73
  },
74
74
  "devDependencies": {
75
- "@spectrum-css/tag": "^8.1.1",
76
- "@spectrum-css/taggroup": "^4.1.1"
75
+ "@spectrum-css/tag": "^8.1.4",
76
+ "@spectrum-css/taggroup": "^4.1.4"
77
77
  },
78
78
  "types": "./src/index.d.ts",
79
79
  "customElements": "custom-elements.json",
@@ -81,5 +81,5 @@
81
81
  "./sp-*.js",
82
82
  "./**/*.dev.js"
83
83
  ],
84
- "gitHead": "1eded35d98d01973b40990486b86840ba464a2da"
84
+ "gitHead": "9b3bd55ff8e8f9438817255976e77fd456b19d72"
85
85
  }
package/src/spectrum-tag.css.dev.js CHANGED
@@ -1,529 +1,7 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-avatar-opacity-disabled:0.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(
5
- --spectrum-focus-indicator-thickness
6
- );--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-content-color-selected:var(--spectrum-gray-50);--spectrum-tag-background-color-selected:var(
7
- --spectrum-neutral-background-color-selected-default
8
- );--spectrum-tag-background-color-selected-hover:var(
9
- --spectrum-neutral-background-color-selected-hover
10
- );--spectrum-tag-background-color-selected-active:var(
11
- --spectrum-neutral-background-color-selected-down
12
- );--spectrum-tag-background-color-selected-focus:var(
13
- --spectrum-neutral-background-color-selected-key-focus
14
- );--spectrum-tag-border-color-invalid:var(--spectrum-negative-color-900);--spectrum-tag-border-color-invalid-hover:var(
15
- --spectrum-negative-color-1000
16
- );--spectrum-tag-border-color-invalid-active:var(
17
- --spectrum-negative-color-1100
18
- );--spectrum-tag-border-color-invalid-focus:var(
19
- --spectrum-negative-color-1000
20
- );--spectrum-tag-content-color-invalid:var(
21
- --spectrum-negative-content-color-default
22
- );--spectrum-tag-content-color-invalid-hover:var(
23
- --spectrum-negative-content-color-hover
24
- );--spectrum-tag-content-color-invalid-active:var(
25
- --spectrum-negative-content-color-down
26
- );--spectrum-tag-content-color-invalid-focus:var(
27
- --spectrum-negative-content-color-key-focus
28
- );--spectrum-tag-border-color-invalid-selected:var(
29
- --spectrum-negative-background-color-default
30
- );--spectrum-tag-border-color-invalid-selected-hover:var(
31
- --spectrum-negative-background-color-hover
32
- );--spectrum-tag-border-color-invalid-selected-focus:var(
33
- --spectrum-negative-background-color-down
34
- );--spectrum-tag-border-color-invalid-selected-active:var(
35
- --spectrum-negative-background-color-key-focus
36
- );--spectrum-tag-background-color-invalid-selected:var(
37
- --spectrum-negative-background-color-default
38
- );--spectrum-tag-background-color-invalid-selected-hover:var(
39
- --spectrum-negative-background-color-hover
40
- );--spectrum-tag-background-color-invalid-selected-active:var(
41
- --spectrum-negative-background-color-down
42
- );--spectrum-tag-background-color-invalid-selected-focus:var(
43
- --spectrum-negative-background-color-key-focus
44
- );--spectrum-tag-content-color-invalid-selected:var(--spectrum-white);--spectrum-tag-border-color-emphasized:var(
45
- --spectrum-accent-background-color-default
46
- );--spectrum-tag-border-color-emphasized-hover:var(
47
- --spectrum-accent-background-color-hover
48
- );--spectrum-tag-border-color-emphasized-active:var(
49
- --spectrum-accent-background-color-down
50
- );--spectrum-tag-border-color-emphasized-focus:var(
51
- --spectrum-accent-background-color-key-focus
52
- );--spectrum-tag-background-color-emphasized:var(
53
- --spectrum-accent-background-color-default
54
- );--spectrum-tag-background-color-emphasized-hover:var(
55
- --spectrum-accent-background-color-hover
56
- );--spectrum-tag-background-color-emphasized-active:var(
57
- --spectrum-accent-background-color-down
58
- );--spectrum-tag-background-color-emphasized-focus:var(
59
- --spectrum-accent-background-color-key-focus
60
- );--spectrum-tag-content-color-emphasized:var(--spectrum-white);--spectrum-tag-content-color-disabled:var(
61
- --spectrum-disabled-content-color
62
- )}: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(
63
- --spectrum-text-to-visual-75
64
- );--spectrum-tag-clear-button-spacing-block:var(
65
- --spectrum-tag-top-to-cross-icon-small
66
- );--spectrum-tag-icon-spacing-block-start:var(
67
- --spectrum-component-top-to-workflow-icon-75
68
- );--spectrum-tag-icon-spacing-block-end:var(
69
- --spectrum-component-top-to-workflow-icon-75
70
- );--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-avatar-spacing-block-start:var(
71
- --spectrum-tag-top-to-avatar-small
72
- );--spectrum-tag-avatar-spacing-block-end:var(
73
- --spectrum-tag-top-to-avatar-small
74
- );--spectrum-tag-avatar-spacing-inline-end:var(--spectrum-text-to-visual-75);--spectrum-tag-label-spacing-block:var(
75
- --spectrum-component-top-to-text-75
76
- );--spectrum-tag-corner-radius:var(--spectrum-tag-size-small-corner-radius);--spectrum-tag-spacing-inline-start:var(
77
- --spectrum-tag-size-small-spacing-inline-start
78
- );--spectrum-tag-label-spacing-inline-end:var(
79
- --spectrum-tag-size-small-label-spacing-inline-end
80
- );--spectrum-tag-clear-button-spacing-inline-end:var(
81
- --spectrum-tag-size-small-clear-button-spacing-inline-end
82
- )}: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(
83
- --spectrum-text-to-visual-100
84
- );--spectrum-tag-clear-button-spacing-block:var(
85
- --spectrum-tag-top-to-cross-icon-medium
86
- );--spectrum-tag-icon-spacing-block-start:var(
87
- --spectrum-component-top-to-workflow-icon-100
88
- );--spectrum-tag-icon-spacing-block-end:var(
89
- --spectrum-component-top-to-workflow-icon-100
90
- );--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-avatar-spacing-block-start:var(
91
- --spectrum-tag-top-to-avatar-medium
92
- );--spectrum-tag-avatar-spacing-block-end:var(
93
- --spectrum-tag-top-to-avatar-medium
94
- );--spectrum-tag-avatar-spacing-inline-end:var(
95
- --spectrum-text-to-visual-100
96
- );--spectrum-tag-label-spacing-block:var(
97
- --spectrum-component-top-to-text-100
98
- );--spectrum-tag-corner-radius:var(--spectrum-tag-size-medium-corner-radius);--spectrum-tag-spacing-inline-start:var(
99
- --spectrum-tag-size-medium-spacing-inline-start
100
- );--spectrum-tag-label-spacing-inline-end:var(
101
- --spectrum-tag-size-medium-label-spacing-inline-end
102
- );--spectrum-tag-clear-button-spacing-inline-end:var(
103
- --spectrum-tag-size-medium-clear-button-spacing-inline-end
104
- )}: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(
105
- --spectrum-text-to-visual-200
106
- );--spectrum-tag-clear-button-spacing-block:var(
107
- --spectrum-tag-top-to-cross-icon-large
108
- );--spectrum-tag-icon-spacing-block-start:var(
109
- --spectrum-component-top-to-workflow-icon-200
110
- );--spectrum-tag-icon-spacing-block-end:var(
111
- --spectrum-component-top-to-workflow-icon-200
112
- );--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-200);--spectrum-tag-avatar-spacing-block-start:var(
113
- --spectrum-tag-top-to-avatar-large
114
- );--spectrum-tag-avatar-spacing-block-end:var(
115
- --spectrum-tag-top-to-avatar-large
116
- );--spectrum-tag-avatar-spacing-inline-end:var(
117
- --spectrum-text-to-visual-200
118
- );--spectrum-tag-label-spacing-block:var(
119
- --spectrum-component-top-to-text-200
120
- );--spectrum-tag-corner-radius:var(--spectrum-tag-size-large-corner-radius);--spectrum-tag-spacing-inline-start:var(
121
- --spectrum-tag-size-large-spacing-inline-start
122
- );--spectrum-tag-label-spacing-inline-end:var(
123
- --spectrum-tag-size-large-label-spacing-inline-end
124
- );--spectrum-tag-clear-button-spacing-inline-end:var(
125
- --spectrum-tag-size-large-clear-button-spacing-inline-end
126
- )}:host{align-items:center;background-color:var(
127
- --highcontrast-tag-background-color,var(--mod-tag-background-color,var(--spectrum-tag-background-color))
128
- );block-size:var(--mod-tag-height,var(--spectrum-tag-height));border-color:var(
129
- --highcontrast-tag-border-color,var(--mod-tag-border-color,var(--spectrum-tag-border-color))
130
- );border-radius:var(
131
- --mod-tag-corner-radius,var(--spectrum-tag-corner-radius)
132
- );border-style:solid;border-width:var(--mod-tag-border-width,var(--spectrum-tag-border-width));box-sizing:border-box;color:var(
133
- --highcontrast-tag-content-color,var(--mod-tag-content-color,var(--spectrum-tag-content-color))
134
- );display:inline-flex;max-inline-size:100%;outline:none;padding-inline-end:0;padding-inline-start:calc(var(
135
- --mod-tag-spacing-inline-start,
136
- var(--spectrum-tag-spacing-inline-start)
137
- ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));position:relative;transition:border-color var(
138
- --mod-tag-animation-duration,var(--spectrum-tag-animation-duration)
139
- ) ease-in-out,color var(
140
- --mod-tag-animation-duration,var(--spectrum-tag-animation-duration)
141
- ) ease-in-out,box-shadow var(
142
- --mod-tag-animation-duration,var(--spectrum-tag-animation-duration)
143
- ) ease-in-out,background-color var(
144
- --mod-tag-animation-duration,var(--spectrum-tag-animation-duration)
145
- ) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}::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));margin-block-end:calc(var(
146
- --mod-tag-icon-spacing-block-end,
147
- var(--spectrum-tag-icon-spacing-block-end)
148
- ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));margin-block-start:calc(var(
149
- --mod-tag-icon-spacing-block-start,
150
- var(--spectrum-tag-icon-spacing-block-start)
151
- ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));margin-inline-end:var(
152
- --mod-tag-icon-spacing-inline-end,var(--spectrum-tag-icon-spacing-inline-end)
153
- )}::slotted([slot=avatar]){margin-block-end:calc(var(
154
- --mod-tag-avatar-spacing-block-end,
155
- var(--spectrum-tag-avatar-spacing-block-end)
156
- ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));margin-block-start:calc(var(
157
- --mod-tag-avatar-spacing-block-start,
158
- var(--spectrum-tag-avatar-spacing-block-start)
159
- ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));margin-inline-end:var(
160
- --mod-tag-avatar-spacing-inline-end,var(--spectrum-tag-avatar-spacing-inline-end)
161
- )}.clear-button{box-sizing:border-box;color:currentColor;--mod-clear-button-width:fit-content;--spectrum-clearbutton-fill-size:fit-content;--spectrum-clearbutton-fill-background-color:transparent;margin-inline-end:calc(var(
162
- --mod-tag-clear-button-spacing-inline-end,
163
- var(--spectrum-tag-clear-button-spacing-inline-end)
164
- ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));margin-inline-start:calc(var(
165
- --mod-tag-clear-button-spacing-inline-start,
166
- var(--spectrum-tag-clear-button-spacing-inline-start)
167
- ) + var(
168
- --mod-tag-label-spacing-inline-end,
169
- var(--spectrum-tag-label-spacing-inline-end)
170
- )*-1);padding-block-end:calc(var(
171
- --mod-tag-clear-button-spacing-block,
172
- var(--spectrum-tag-clear-button-spacing-block)
173
- ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));padding-block-start:calc(var(
174
- --mod-tag-clear-button-spacing-block,
175
- var(--spectrum-tag-clear-button-spacing-block)
176
- ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)))}.clear-button .spectrum-ClearButton-fill{background-color:var(
177
- --mod-clearbutton-fill-background-color,var(--spectrum-clearbutton-fill-background-color)
178
- );block-size:var(
179
- --mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size)
180
- );inline-size:var(
181
- --mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size)
182
- )}.label{block-size:100%;box-sizing:border-box;cursor:default;flex:auto;font-size:var(--mod-tag-font-size,var(--spectrum-tag-font-size));font-weight:var(
183
- --mod-tag-label-font-weight,var(--spectrum-tag-label-font-weight)
184
- );line-height:var(
185
- --mod-tag-label-line-height,var(--spectrum-tag-label-line-height)
186
- );margin-inline-end:calc(var(
187
- --mod-tag-label-spacing-inline-end,
188
- var(--spectrum-tag-label-spacing-inline-end)
189
- ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));overflow:hidden;padding-block-start:calc(var(
190
- --mod-tag-label-spacing-block,
191
- var(--spectrum-tag-label-spacing-block)
192
- ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));text-overflow:ellipsis;white-space:nowrap}:host(:active){background-color:var(
193
- --highcontrast-tag-background-color-active,var(
194
- --mod-tag-background-color-active,var(--spectrum-tag-background-color-active)
195
- )
196
- );border-color:var(
197
- --highcontrast-tag-border-color-active,var(
198
- --mod-tag-border-color-active,var(--spectrum-tag-border-color-active)
199
- )
200
- );color:var(
201
- --highcontrast-tag-content-color-active,var(
202
- --mod-tag-content-color-active,var(--spectrum-tag-content-color-active)
203
- )
204
- )}:host(.focus-visible),:host([focused]){background-color:var(
205
- --highcontrast-tag-background-color-focus,var(
206
- --mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)
207
- )
208
- );border-color:var(
209
- --highcontrast-tag-border-color-focus,var(
210
- --mod-tag-border-color-focus,var(--spectrum-tag-border-color-focus)
211
- )
212
- );color:var(
213
- --highcontrast-tag-content-color-focus,var(
214
- --mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)
215
- )
216
- )}:host(:focus-visible),:host([focused]){background-color:var(
217
- --highcontrast-tag-background-color-focus,var(
218
- --mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)
219
- )
220
- );border-color:var(
221
- --highcontrast-tag-border-color-focus,var(
222
- --mod-tag-border-color-focus,var(--spectrum-tag-border-color-focus)
223
- )
224
- );color:var(
225
- --highcontrast-tag-content-color-focus,var(
226
- --mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)
227
- )
228
- )}:host(.focus-visible):after,:host([focused]):after{border-color:var(
229
- --highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color))
230
- );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-style:solid;border-width:var(
231
- --mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)
232
- );content:"";display:inline-block;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(
233
- --mod-tag-focus-ring-thickness,
234
- var(--spectrum-tag-focus-ring-thickness)
235
- ));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(
236
- --mod-tag-focus-ring-thickness,
237
- var(--spectrum-tag-focus-ring-thickness)
238
- ));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(
239
- --mod-tag-focus-ring-thickness,
240
- var(--spectrum-tag-focus-ring-thickness)
241
- ));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(
242
- --mod-tag-focus-ring-thickness,
243
- var(--spectrum-tag-focus-ring-thickness)
244
- ));pointer-events:none;position:absolute}:host(:focus-visible):after,:host([focused]):after{border-color:var(
245
- --highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color))
246
- );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-style:solid;border-width:var(
247
- --mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)
248
- );content:"";display:inline-block;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(
249
- --mod-tag-focus-ring-thickness,
250
- var(--spectrum-tag-focus-ring-thickness)
251
- ));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(
252
- --mod-tag-focus-ring-thickness,
253
- var(--spectrum-tag-focus-ring-thickness)
254
- ));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(
255
- --mod-tag-focus-ring-thickness,
256
- var(--spectrum-tag-focus-ring-thickness)
257
- ));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(
258
- --mod-tag-focus-ring-thickness,
259
- var(--spectrum-tag-focus-ring-thickness)
260
- ));pointer-events:none;position:absolute}:host([selected]){background-color:var(
261
- --highcontrast-tag-background-color-selected,var(
262
- --mod-tag-background-color-selected,var(--spectrum-tag-background-color-selected)
263
- )
264
- );border-color:var(
265
- --highcontrast-tag-border-color-selected,var(
266
- --mod-tag-border-color-selected,var(--spectrum-tag-border-color-selected)
267
- )
268
- );color:var(
269
- --highcontrast-tag-content-color-selected,var(
270
- --mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)
271
- )
272
- )}:host([selected]:active){background-color:var(
273
- --highcontrast-tag-background-color-selected-active,var(
274
- --mod-tag-background-color-selected-active,var(--spectrum-tag-background-color-selected-active)
275
- )
276
- );border-color:var(
277
- --highcontrast-tag-border-color-selected-active,var(
278
- --mod-tag-border-color-selected-active,var(--spectrum-tag-border-color-selected-active)
279
- )
280
- )}:host([selected].focus-visible),:host([selected][focused]){background-color:var(
281
- --highcontrast-tag-background-color-selected-focus,var(
282
- --mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)
283
- )
284
- );border-color:var(
285
- --highcontrast-tag-border-color-selected-focus,var(
286
- --mod-tag-border-color-selected-focus,var(--spectrum-tag-border-color-selected-focus)
287
- )
288
- )}:host([selected]:focus-visible),:host([selected][focused]){background-color:var(
289
- --highcontrast-tag-background-color-selected-focus,var(
290
- --mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)
291
- )
292
- );border-color:var(
293
- --highcontrast-tag-border-color-selected-focus,var(
294
- --mod-tag-border-color-selected-focus,var(--spectrum-tag-border-color-selected-focus)
295
- )
296
- )}:host([invalid]){border-color:var(
297
- --highcontrast-tag-border-color-invalid,var(
298
- --mod-tag-border-color-invalid,var(--spectrum-tag-border-color-invalid)
299
- )
300
- );color:var(
301
- --highcontrast-tag-content-color-invalid,var(
302
- --mod-tag-content-color-invalid,var(--spectrum-tag-content-color-invalid)
303
- )
304
- )}:host([invalid]:active){border-color:var(
305
- --highcontrast-tag-border-color-invalid-active,var(
306
- --mod-tag-border-color-invalid-active,var(--spectrum-tag-border-color-invalid-active)
307
- )
308
- );color:var(
309
- --highcontrast-tag-content-color-invalid-active,var(
310
- --mod-tag-content-color-invalid-active,var(--spectrum-tag-content-color-invalid-active)
311
- )
312
- )}:host([invalid].focus-visible),:host([invalid][focused]){border-color:var(
313
- --highcontrast-tag-border-color-invalid-focus,var(
314
- --mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)
315
- )
316
- );color:var(
317
- --highcontrast-tag-content-color-invalid-focus,var(
318
- --mod-tag-content-color-invalid-focus,var(--spectrum-tag-content-color-invalid-focus)
319
- )
320
- )}:host([invalid]:focus-visible),:host([invalid][focused]){border-color:var(
321
- --highcontrast-tag-border-color-invalid-focus,var(
322
- --mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)
323
- )
324
- );color:var(
325
- --highcontrast-tag-content-color-invalid-focus,var(
326
- --mod-tag-content-color-invalid-focus,var(--spectrum-tag-content-color-invalid-focus)
327
- )
328
- )}:host([invalid][selected]){background-color:var(
329
- --highcontrast-tag-background-color-invalid-selected,var(
330
- --mod-tag-background-color-invalid-selected,var(--spectrum-tag-background-color-invalid-selected)
331
- )
332
- );border-color:var(
333
- --highcontrast-tag-border-color-invalid-selected,var(
334
- --mod-tag-border-color-invalid-selected,var(--spectrum-tag-border-color-invalid-selected)
335
- )
336
- );color:var(
337
- --highcontrast-tag-content-color-invalid-selected,var(
338
- --mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)
339
- )
340
- )}:host([invalid][selected]:active){background-color:var(
341
- --highcontrast-tag-background-color-invalid-selected-active,var(
342
- --mod-tag-background-color-invalid-selected-active,var(--spectrum-tag-background-color-invalid-selected-active)
343
- )
344
- );border-color:var(
345
- --highcontrast-tag-border-color-invalid-selected-active,var(
346
- --mod-tag-border-color-invalid-selected-active,var(--spectrum-tag-border-color-invalid-selected-active)
347
- )
348
- )}:host([invalid][selected].focus-visible),:host([invalid][selected][focused]){background-color:var(
349
- --highcontrast-tag-background-color-invalid-selected-focus,var(
350
- --mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)
351
- )
352
- );border-color:var(
353
- --highcontrast-tag-border-color-invalid-selected-focus,var(
354
- --mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)
355
- )
356
- )}:host([invalid][selected]:focus-visible),:host([invalid][selected][focused]){background-color:var(
357
- --highcontrast-tag-background-color-invalid-selected-focus,var(
358
- --mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)
359
- )
360
- );border-color:var(
361
- --highcontrast-tag-border-color-invalid-selected-focus,var(
362
- --mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)
363
- )
364
- )}:host([emphasized]){background-color:var(
365
- --highcontrast-tag-background-color-emphasized,var(
366
- --mod-tag-background-color-emphasized,var(--spectrum-tag-background-color-emphasized)
367
- )
368
- );border-color:var(
369
- --highcontrast-tag-border-color-emphasized,var(
370
- --mod-tag-border-color-emphasized,var(--spectrum-tag-border-color-emphasized)
371
- )
372
- );color:var(
373
- --highcontrast-tag-content-color-emphasized,var(
374
- --mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)
375
- )
376
- )}@media (hover:hover){:host([invalid][selected]:hover){background-color:var(
377
- --highcontrast-tag-background-color-invalid-selected-hover,var(
378
- --mod-tag-background-color-invalid-selected-hover,var(--spectrum-tag-background-color-invalid-selected-hover)
379
- )
380
- );border-color:var(
381
- --highcontrast-tag-border-color-invalid-selected-hover,var(
382
- --mod-tag-border-color-invalid-selected-hover,var(--spectrum-tag-border-color-invalid-selected-hover)
383
- )
384
- );color:var(
385
- --highcontrast-tag-content-color-invalid-selected,var(
386
- --mod-tag-content-color-invalid-selected,var(--spectrum-tag-content-color-invalid-selected)
387
- )
388
- )}:host(:hover){background-color:var(
389
- --highcontrast-tag-background-color-hover,var(
390
- --mod-tag-background-color-hover,var(--spectrum-tag-background-color-hover)
391
- )
392
- );border-color:var(
393
- --highcontrast-tag-border-color-hover,var(
394
- --mod-tag-border-color-hover,var(--spectrum-tag-border-color-hover)
395
- )
396
- );color:var(
397
- --highcontrast-tag-content-color-hover,var(
398
- --mod-tag-content-color-hover,var(--spectrum-tag-content-color-hover)
399
- )
400
- )}:host([selected]:hover){background-color:var(
401
- --highcontrast-tag-background-color-selected-hover,var(
402
- --mod-tag-background-color-selected-hover,var(--spectrum-tag-background-color-selected-hover)
403
- )
404
- );border-color:var(
405
- --highcontrast-tag-border-color-selected-hover,var(
406
- --mod-tag-border-color-selected-hover,var(--spectrum-tag-border-color-selected-hover)
407
- )
408
- );color:var(
409
- --highcontrast-tag-content-color-selected,var(
410
- --mod-tag-content-color-selected,var(--spectrum-tag-content-color-selected)
411
- )
412
- )}:host([invalid]:hover){border-color:var(
413
- --highcontrast-tag-border-color-invalid-hover,var(
414
- --mod-tag-border-color-invalid-hover,var(--spectrum-tag-border-color-invalid-hover)
415
- )
416
- );color:var(
417
- --highcontrast-tag-content-color-invalid-hover,var(
418
- --mod-tag-content-color-invalid-hover,var(--spectrum-tag-content-color-invalid-hover)
419
- )
420
- )}:host([emphasized]:hover){background-color:var(
421
- --highcontrast-tag-background-color-emphasized-hover,var(
422
- --mod-tag-background-color-emphasized-hover,var(--spectrum-tag-background-color-emphasized-hover)
423
- )
424
- );border-color:var(
425
- --highcontrast-tag-border-color-emphasized-hover,var(
426
- --mod-tag-border-color-emphasized-hover,var(--spectrum-tag-border-color-emphasized-hover)
427
- )
428
- );color:var(
429
- --highcontrast-tag-content-color-emphasized,var(
430
- --mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)
431
- )
432
- )}}:host([emphasized]:active){background-color:var(
433
- --highcontrast-tag-background-color-emphasized-active,var(
434
- --mod-tag-background-color-emphasized-active,var(--spectrum-tag-background-color-emphasized-active)
435
- )
436
- );border-color:var(
437
- --highcontrast-tag-border-color-emphasized-active,var(
438
- --mod-tag-border-color-emphasized-active,var(--spectrum-tag-border-color-emphasized-active)
439
- )
440
- )}:host([emphasized].focus-visible),:host([emphasized][focused]){background-color:var(
441
- --highcontrast-tag-background-color-emphasized-focus,var(
442
- --mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)
443
- )
444
- );border-color:var(
445
- --highcontrast-tag-border-color-emphasized-focus,var(
446
- --mod-tag-border-color-emphasized-focus,var(--spectrum-tag-border-color-emphasized-focus)
447
- )
448
- )}:host([emphasized]:focus-visible),:host([emphasized][focused]){background-color:var(
449
- --highcontrast-tag-background-color-emphasized-focus,var(
450
- --mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)
451
- )
452
- );border-color:var(
453
- --highcontrast-tag-border-color-emphasized-focus,var(
454
- --mod-tag-border-color-emphasized-focus,var(--spectrum-tag-border-color-emphasized-focus)
455
- )
456
- )}:host([disabled]){background-color:var(
457
- --highcontrast-tag-background-color-disabled,var(
458
- --mod-tag-background-color-disabled,var(--spectrum-tag-background-color-disabled)
459
- )
460
- );border-color:var(
461
- --highcontrast-tag-border-color-disabled,var(
462
- --mod-tag-border-color-disabled,var(--spectrum-tag-border-color-disabled)
463
- )
464
- );color:var(
465
- --highcontrast-tag-content-color-disabled,var(
466
- --mod-tag-content-color-disabled,var(--spectrum-tag-content-color-disabled)
467
- )
468
- );pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(
469
- --mod-avatar-opacity-disabled,var(--spectrum-avatar-opacity-disabled)
470
- )}@media (forced-colors:active){:host{forced-color-adjust:none;--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}: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-border-color:var(--system-spectrum-tag-border-color);--spectrum-tag-border-color-hover:var(
471
- --system-spectrum-tag-border-color-hover
472
- );--spectrum-tag-border-color-active:var(
473
- --system-spectrum-tag-border-color-active
474
- );--spectrum-tag-border-color-focus:var(
475
- --system-spectrum-tag-border-color-focus
476
- );--spectrum-tag-size-small-corner-radius:var(
477
- --system-spectrum-tag-size-small-corner-radius
478
- );--spectrum-tag-size-medium-corner-radius:var(
479
- --system-spectrum-tag-size-medium-corner-radius
480
- );--spectrum-tag-size-large-corner-radius:var(
481
- --system-spectrum-tag-size-large-corner-radius
482
- );--spectrum-tag-background-color:var(
483
- --system-spectrum-tag-background-color
484
- );--spectrum-tag-background-color-hover:var(
485
- --system-spectrum-tag-background-color-hover
486
- );--spectrum-tag-background-color-active:var(
487
- --system-spectrum-tag-background-color-active
488
- );--spectrum-tag-background-color-focus:var(
489
- --system-spectrum-tag-background-color-focus
490
- );--spectrum-tag-content-color:var(--system-spectrum-tag-content-color);--spectrum-tag-content-color-hover:var(
491
- --system-spectrum-tag-content-color-hover
492
- );--spectrum-tag-content-color-active:var(
493
- --system-spectrum-tag-content-color-active
494
- );--spectrum-tag-content-color-focus:var(
495
- --system-spectrum-tag-content-color-focus
496
- );--spectrum-tag-border-color-selected:var(
497
- --system-spectrum-tag-border-color-selected
498
- );--spectrum-tag-border-color-selected-hover:var(
499
- --system-spectrum-tag-border-color-selected-hover
500
- );--spectrum-tag-border-color-selected-active:var(
501
- --system-spectrum-tag-border-color-selected-active
502
- );--spectrum-tag-border-color-selected-focus:var(
503
- --system-spectrum-tag-border-color-selected-focus
504
- );--spectrum-tag-border-color-disabled:var(
505
- --system-spectrum-tag-border-color-disabled
506
- );--spectrum-tag-background-color-disabled:var(
507
- --system-spectrum-tag-background-color-disabled
508
- );--spectrum-tag-size-small-spacing-inline-start:var(
509
- --system-spectrum-tag-size-small-spacing-inline-start
510
- );--spectrum-tag-size-small-label-spacing-inline-end:var(
511
- --system-spectrum-tag-size-small-label-spacing-inline-end
512
- );--spectrum-tag-size-small-clear-button-spacing-inline-end:var(
513
- --system-spectrum-tag-size-small-clear-button-spacing-inline-end
514
- );--spectrum-tag-size-medium-spacing-inline-start:var(
515
- --system-spectrum-tag-size-medium-spacing-inline-start
516
- );--spectrum-tag-size-medium-label-spacing-inline-end:var(
517
- --system-spectrum-tag-size-medium-label-spacing-inline-end
518
- );--spectrum-tag-size-medium-clear-button-spacing-inline-end:var(
519
- --system-spectrum-tag-size-medium-clear-button-spacing-inline-end
520
- );--spectrum-tag-size-large-spacing-inline-start:var(
521
- --system-spectrum-tag-size-large-spacing-inline-start
522
- );--spectrum-tag-size-large-label-spacing-inline-end:var(
523
- --system-spectrum-tag-size-large-label-spacing-inline-end
524
- );--spectrum-tag-size-large-clear-button-spacing-inline-end:var(
525
- --system-spectrum-tag-size-large-clear-button-spacing-inline-end
526
- )}
4
+ :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-content-color-selected:var(--spectrum-gray-50);--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);--spectrum-tag-icon-spacing-inline-end:var(--spectrum-text-to-visual-100);--spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-100);--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-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-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-100);--spectrum-tag-height:var(--spectrum-component-height-100);--spectrum-tag-font-size:var(--spectrum-font-size-100);--spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-medium)}: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{--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=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;-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;max-inline-size:100%;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));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{box-sizing:border-box;color:currentColor;--mod-clear-button-width:fit-content;--spectrum-clearbutton-fill-size:fit-content;--spectrum-clearbutton-fill-background-color:transparent;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{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;block-size:100%;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(: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(:focus-visible),:host([focused]){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(:focus-visible):after,:host([focused]):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]: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]:focus-visible),:host([selected][focused]){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]: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]:focus-visible),:host([invalid][focused]){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]: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]:focus-visible),:host([invalid][selected][focused]){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([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(: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([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]: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]:focus-visible),:host([emphasized][focused]){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{forced-color-adjust:none;--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}: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-border-color:var(--system-spectrum-tag-border-color);--spectrum-tag-border-color-hover:var(--system-spectrum-tag-border-color-hover);--spectrum-tag-border-color-active:var(--system-spectrum-tag-border-color-active);--spectrum-tag-border-color-focus:var(--system-spectrum-tag-border-color-focus);--spectrum-tag-size-small-corner-radius:var(--system-spectrum-tag-size-small-corner-radius);--spectrum-tag-size-medium-corner-radius:var(--system-spectrum-tag-size-medium-corner-radius);--spectrum-tag-size-large-corner-radius:var(--system-spectrum-tag-size-large-corner-radius);--spectrum-tag-background-color:var(--system-spectrum-tag-background-color);--spectrum-tag-background-color-hover:var(--system-spectrum-tag-background-color-hover);--spectrum-tag-background-color-active:var(--system-spectrum-tag-background-color-active);--spectrum-tag-background-color-focus:var(--system-spectrum-tag-background-color-focus);--spectrum-tag-content-color:var(--system-spectrum-tag-content-color);--spectrum-tag-content-color-hover:var(--system-spectrum-tag-content-color-hover);--spectrum-tag-content-color-active:var(--system-spectrum-tag-content-color-active);--spectrum-tag-content-color-focus:var(--system-spectrum-tag-content-color-focus);--spectrum-tag-border-color-selected:var(--system-spectrum-tag-border-color-selected);--spectrum-tag-border-color-selected-hover:var(--system-spectrum-tag-border-color-selected-hover);--spectrum-tag-border-color-selected-active:var(--system-spectrum-tag-border-color-selected-active);--spectrum-tag-border-color-selected-focus:var(--system-spectrum-tag-border-color-selected-focus);--spectrum-tag-border-color-disabled:var(--system-spectrum-tag-border-color-disabled);--spectrum-tag-background-color-disabled:var(--system-spectrum-tag-background-color-disabled);--spectrum-tag-size-small-spacing-inline-start:var(--system-spectrum-tag-size-small-spacing-inline-start);--spectrum-tag-size-small-label-spacing-inline-end:var(--system-spectrum-tag-size-small-label-spacing-inline-end);--spectrum-tag-size-small-clear-button-spacing-inline-end:var(--system-spectrum-tag-size-small-clear-button-spacing-inline-end);--spectrum-tag-size-medium-spacing-inline-start:var(--system-spectrum-tag-size-medium-spacing-inline-start);--spectrum-tag-size-medium-label-spacing-inline-end:var(--system-spectrum-tag-size-medium-label-spacing-inline-end);--spectrum-tag-size-medium-clear-button-spacing-inline-end:var(--system-spectrum-tag-size-medium-clear-button-spacing-inline-end);--spectrum-tag-size-large-spacing-inline-start:var(--system-spectrum-tag-size-large-spacing-inline-start);--spectrum-tag-size-large-label-spacing-inline-end:var(--system-spectrum-tag-size-large-label-spacing-inline-end);--spectrum-tag-size-large-clear-button-spacing-inline-end:var(--system-spectrum-tag-size-large-clear-button-spacing-inline-end)}
527
5
  `;
528
6
  export default styles;
529
7
  //# sourceMappingURL=spectrum-tag.css.dev.js.map