@spectrum-web-components/tags 0.10.5 → 0.10.6

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 (11) hide show
  1. package/custom-elements.json +6 -6
  2. package/package.json +4 -4
  3. package/src/spectrum-config.js +48 -82
  4. package/src/spectrum-tag.css.dev.js +92 -36
  5. package/src/spectrum-tag.css.dev.js.map +2 -2
  6. package/src/spectrum-tag.css.js +94 -38
  7. package/src/spectrum-tag.css.js.map +2 -2
  8. package/src/tag.css.dev.js +92 -36
  9. package/src/tag.css.dev.js.map +2 -2
  10. package/src/tag.css.js +92 -36
  11. package/src/tag.css.js.map +2 -2
package/custom-elements.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "sp-tag.ts",
7
+ "path": "sp-tag.js",
8
8
  "declarations": [],
9
9
  "exports": [
10
10
  {
@@ -19,7 +19,7 @@
19
19
  },
20
20
  {
21
21
  "kind": "javascript-module",
22
- "path": "sp-tags.ts",
22
+ "path": "sp-tags.js",
23
23
  "declarations": [],
24
24
  "exports": [
25
25
  {
@@ -34,7 +34,7 @@
34
34
  },
35
35
  {
36
36
  "kind": "javascript-module",
37
- "path": "src/Tag.ts",
37
+ "path": "src/Tag.js",
38
38
  "declarations": [
39
39
  {
40
40
  "kind": "class",
@@ -184,14 +184,14 @@
184
184
  "name": "Tag",
185
185
  "declaration": {
186
186
  "name": "Tag",
187
- "module": "src/Tag.ts"
187
+ "module": "src/Tag.js"
188
188
  }
189
189
  }
190
190
  ]
191
191
  },
192
192
  {
193
193
  "kind": "javascript-module",
194
- "path": "src/Tags.ts",
194
+ "path": "src/Tags.js",
195
195
  "declarations": [
196
196
  {
197
197
  "kind": "class",
@@ -281,7 +281,7 @@
281
281
  "name": "Tags",
282
282
  "declaration": {
283
283
  "name": "Tags",
284
- "module": "src/Tags.ts"
284
+ "module": "src/Tags.js"
285
285
  }
286
286
  }
287
287
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/tags",
3
- "version": "0.10.5",
3
+ "version": "0.10.6",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -67,12 +67,12 @@
67
67
  ],
68
68
  "dependencies": {
69
69
  "@spectrum-web-components/base": "^0.7.4",
70
- "@spectrum-web-components/button": "^0.20.2",
70
+ "@spectrum-web-components/button": "^0.20.3",
71
71
  "@spectrum-web-components/reactive-controllers": "^0.3.5",
72
72
  "@spectrum-web-components/shared": "^0.15.5"
73
73
  },
74
74
  "devDependencies": {
75
- "@spectrum-css/tag": "^4.0.9",
75
+ "@spectrum-css/tag": "^5.0.9",
76
76
  "@spectrum-css/taggroup": "^3.3.21"
77
77
  },
78
78
  "types": "./src/index.d.ts",
@@ -81,5 +81,5 @@
81
81
  "./sp-*.js",
82
82
  "./**/*.dev.js"
83
83
  ],
84
- "gitHead": "5e11d828243bb3ff572c25b33a8d58844a89f524"
84
+ "gitHead": "1e25ee121f3bc838dbb99bac62f3c95857570f7a"
85
85
  }
package/src/spectrum-config.js CHANGED
@@ -1,101 +1,67 @@
1
+ // @ts-check
1
2
  /*
2
- Copyright 2022 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
3
+ Copyright 2023 Adobe. All rights reserved.
4
+ This file is licensed to you under the Apache License, Version 2.0 (the 'License');
4
5
  you may not use this file except in compliance with the License. You may obtain a copy
5
6
  of the License at http://www.apache.org/licenses/LICENSE-2.0
6
7
 
7
8
  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
+ the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
10
  OF ANY KIND, either express or implied. See the License for the specific language
10
11
  governing permissions and limitations under the License.
11
12
  */
12
13
 
14
+ import {
15
+ builder,
16
+ converterFor,
17
+ } from '../../../tasks/process-spectrum-utils.js';
18
+
19
+ const converter = converterFor('spectrum-Tag');
20
+
21
+ /**
22
+ * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
23
+ */
13
24
  const config = {
14
- spectrum: 'tag',
15
- components: [
25
+ conversions: [
16
26
  {
17
- name: 'tag',
18
- host: {
19
- selector: '.spectrum-Tag',
20
- },
21
- attributes: [
22
- {
23
- selector: '.is-disabled',
24
- type: 'boolean',
25
- name: 'disabled',
26
- },
27
+ inPackage: '@spectrum-css/tag',
28
+ outPackage: 'tags',
29
+ fileName: 'tag',
30
+ components: [
27
31
  {
28
- selector: '.is-invalid',
29
- type: 'boolean',
30
- name: 'invalid',
32
+ find: builder.pseudoClass('active'),
33
+ hoist: true,
31
34
  },
32
35
  {
33
- selector: '.is-selected',
34
- type: 'boolean',
35
- name: 'selected',
36
+ find: builder.pseudoClass('focus-visible'),
37
+ hoist: true,
36
38
  },
37
- {
38
- selector: '.spectrum-Tag--removable',
39
- type: 'boolean',
40
- name: 'deletable',
41
- },
42
- {
43
- type: 'enum',
44
- name: 'size',
45
- values: [
46
- {
47
- name: 's',
48
- selector: '.spectrum-Tag--sizeS',
49
- },
50
- {
51
- name: 'm',
52
- selector: '.spectrum-Tag--sizeM',
53
- },
54
- {
55
- name: 'l',
56
- selector: '.spectrum-Tag--sizeL',
57
- },
39
+ converter.classToHost(),
40
+ converter.classToAttribute('is-emphasized', 'emphasized'),
41
+ converter.classToAttribute('is-focused', 'focused'),
42
+ converter.classToAttribute('is-disabled', 'disabled'),
43
+ converter.classToAttribute('is-invalid', 'invalid'),
44
+ converter.classToAttribute('is-selected', 'selected'),
45
+ converter.classToAttribute(
46
+ 'spectrum-Tag--removable',
47
+ 'deletable'
48
+ ),
49
+ ...converter.enumerateAttributes(
50
+ [
51
+ ['spectrum-Tag--sizeS', 's'],
52
+ ['spectrum-Tag--sizeM', 'm'],
53
+ ['spectrum-Tag--sizeL', 'l'],
58
54
  ],
59
- },
60
- ],
61
- classes: [
62
- {
63
- selector: '.spectrum-Tag-clearButton',
64
- name: 'clear-button',
65
- },
66
- {
67
- selector: '.spectrum-ClearButton',
68
- name: 'clear-button',
69
- },
70
- {
71
- selector: '.spectrum-Tags-itemLabel',
72
- name: 'label',
73
- },
74
- ],
75
- slots: [
76
- {
77
- selector: '.spectrum-Avatar',
78
- name: 'avatar',
79
- },
80
- {
81
- selector: '.spectrum-Tags-itemIcon',
82
- name: 'icon',
83
- },
84
- ],
85
- complexSelectors: [
86
- {
87
- replacement: ' > .spectrum-Avatar',
88
- selector: /\s+\.spectrum-Tag\s?\>\s?\.spectrum-Avatar/,
89
- },
90
- {
91
- replacement: " > slot[name='avatar'] ~ .label",
92
- selector:
93
- /\s+\>\s?\.spectrum-Avatar\s?\~\s?\.spectrum-Tags-itemLabel/,
94
- },
95
- ],
96
- exclude: [
97
- /\.spectrum-Tags /,
98
- /\.spectrum-ClearButton \.spectrum-Icon/,
55
+ 'size'
56
+ ),
57
+ converter.classToClass(
58
+ 'spectrum-Tag-clearButton',
59
+ 'clear-button'
60
+ ),
61
+ converter.classToClass('spectrum-ClearButton', 'clear-button'),
62
+ converter.classToClass('spectrum-Tags-itemLabel', 'label'),
63
+ converter.classToSlotted('spectrum-Avatar', 'avatar'),
64
+ converter.classToSlotted('spectrum-Tags-itemIcon', 'icon'),
99
65
  ],
100
66
  },
101
67
  ],
package/src/spectrum-tag.css.dev.js CHANGED
@@ -3,7 +3,7 @@ import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
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
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-font-weight-regular);--spectrum-tag-content-color-selected:var(--spectrum-white);--spectrum-tag-border-color-invalid:var(--spectrum-negative-color-900);--spectrum-tag-border-color-invalid-hover:var(
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-white);--spectrum-tag-border-color-invalid:var(--spectrum-negative-color-900);--spectrum-tag-border-color-invalid-hover:var(
7
7
  --spectrum-negative-color-1000
8
8
  );--spectrum-tag-border-color-invalid-active:var(
9
9
  --spectrum-negative-color-1100
@@ -67,9 +67,7 @@ const styles = css`
67
67
  --spectrum-text-to-visual-100
68
68
  );--spectrum-tag-height:var(--spectrum-component-height-100);--spectrum-tag-font-size:var(--spectrum-font-size-100);--spectrum-tag-clear-button-spacing-block:var(
69
69
  --spectrum-tag-top-to-cross-icon-medium
70
- )}:host([size=s]){--spectrum-tag-height:var(
71
- --spectrum-component-height-75
72
- );--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(
70
+ )}: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(
73
71
  --spectrum-text-to-visual-75
74
72
  );--spectrum-tag-clear-button-spacing-block:var(
75
73
  --spectrum-tag-top-to-cross-icon-small
@@ -89,9 +87,7 @@ const styles = css`
89
87
  --spectrum-tag-size-small-label-spacing-inline-end
90
88
  );--spectrum-tag-clear-button-spacing-inline-end:var(
91
89
  --spectrum-tag-size-small-clear-button-spacing-inline-end
92
- )}:host([size=m]){--spectrum-tag-height:var(
93
- --spectrum-component-height-100
94
- );--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(
90
+ )}:host([size=m]){--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(
95
91
  --spectrum-text-to-visual-100
96
92
  );--spectrum-tag-clear-button-spacing-block:var(
97
93
  --spectrum-tag-top-to-cross-icon-medium
@@ -113,9 +109,7 @@ const styles = css`
113
109
  --spectrum-tag-size-medium-label-spacing-inline-end
114
110
  );--spectrum-tag-clear-button-spacing-inline-end:var(
115
111
  --spectrum-tag-size-medium-clear-button-spacing-inline-end
116
- )}:host([size=l]){--spectrum-tag-height:var(
117
- --spectrum-component-height-200
118
- );--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(
112
+ )}: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(
119
113
  --spectrum-text-to-visual-200
120
114
  );--spectrum-tag-clear-button-spacing-block:var(
121
115
  --spectrum-tag-top-to-cross-icon-large
@@ -156,9 +150,7 @@ var(--spectrum-tag-spacing-inline-start)
156
150
  --mod-tag-animation-duration,var(--spectrum-tag-animation-duration)
157
151
  ) ease-in-out,background-color var(
158
152
  --mod-tag-animation-duration,var(--spectrum-tag-animation-duration)
159
- ) ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:bottom}::slotted([slot=icon]){block-size:var(
160
- --mod-tag-icon-size,var(--spectrum-tag-icon-size)
161
- );inline-size:var(--mod-tag-icon-size,var(--spectrum-tag-icon-size));margin-block-end:calc(var(
153
+ ) 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(
162
154
  --mod-tag-icon-spacing-block-end,
163
155
  var(--spectrum-tag-icon-spacing-block-end)
164
156
  ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));margin-block-start:calc(var(
@@ -174,7 +166,7 @@ var(--spectrum-tag-avatar-spacing-block-end)
174
166
  var(--spectrum-tag-avatar-spacing-block-start)
175
167
  ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));margin-inline-end:var(
176
168
  --mod-tag-avatar-spacing-inline-end,var(--spectrum-tag-avatar-spacing-inline-end)
177
- )}.clear-button{--spectrum-clearbutton-fill-size:fit-content;--spectrum-clearbutton-fill-background-color:transparent;box-sizing:border-box;color:currentcolor;margin-inline-end:calc(var(
169
+ )}.clear-button{--spectrum-clearbutton-fill-size:fit-content;--spectrum-clearbutton-fill-background-color:transparent;box-sizing:border-box;color:currentColor;margin-inline-end:calc(var(
178
170
  --mod-tag-clear-button-spacing-inline-end,
179
171
  var(--spectrum-tag-clear-button-spacing-inline-end)
180
172
  ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));margin-inline-start:calc(var(
@@ -195,7 +187,7 @@ var(--spectrum-tag-clear-button-spacing-block)
195
187
  --mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size)
196
188
  );inline-size:var(
197
189
  --mod-clearbutton-fill-size,var(--spectrum-clearbutton-fill-size)
198
- )}.label{block-size:100%;box-sizing:border-box;cursor:default;flex:1 1 auto;font-size:var(--mod-tag-font-size,var(--spectrum-tag-font-size));font-weight:var(
190
+ )}.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(
199
191
  --mod-tag-label-font-weight,var(--spectrum-tag-label-font-weight)
200
192
  );line-height:var(
201
193
  --mod-tag-label-line-height,var(--spectrum-tag-label-line-height)
@@ -229,7 +221,7 @@ var(--spectrum-tag-label-spacing-block)
229
221
  --highcontrast-tag-content-color-active,var(
230
222
  --mod-tag-content-color-active,var(--spectrum-tag-content-color-active)
231
223
  )
232
- )}:host(.focus-visible),:host(.is-focused){background-color:var(
224
+ )}:host(.focus-visible),:host([focused]){background-color:var(
233
225
  --highcontrast-tag-background-color-focus,var(
234
226
  --mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)
235
227
  )
@@ -241,7 +233,7 @@ var(--spectrum-tag-label-spacing-block)
241
233
  --highcontrast-tag-content-color-focus,var(
242
234
  --mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)
243
235
  )
244
- )}:host(.is-focused),:host(:focus-visible){background-color:var(
236
+ )}:host(.focus-visible),:host([focused]){background-color:var(
245
237
  --highcontrast-tag-background-color-focus,var(
246
238
  --mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)
247
239
  )
@@ -253,11 +245,23 @@ var(--spectrum-tag-label-spacing-block)
253
245
  --highcontrast-tag-content-color-focus,var(
254
246
  --mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)
255
247
  )
256
- )}:host(.focus-visible):after,:host(.is-focused):after{block-size:calc(100% + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap))*2 + var(--mod-tag-border-width, var(--spectrum-tag-border-width))*2);border-color:var(
248
+ )}:host(:focus-visible),:host([focused]){background-color:var(
249
+ --highcontrast-tag-background-color-focus,var(
250
+ --mod-tag-background-color-focus,var(--spectrum-tag-background-color-focus)
251
+ )
252
+ );border-color:var(
253
+ --highcontrast-tag-border-color-focus,var(
254
+ --mod-tag-border-color-focus,var(--spectrum-tag-border-color-focus)
255
+ )
256
+ );color:var(
257
+ --highcontrast-tag-content-color-focus,var(
258
+ --mod-tag-content-color-focus,var(--spectrum-tag-content-color-focus)
259
+ )
260
+ )}:host(.focus-visible):after,:host([focused]):after{block-size:calc(100% + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap))*2 + var(--mod-tag-border-width, var(--spectrum-tag-border-width))*2);border-color:var(
257
261
  --highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color))
258
262
  );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(
259
263
  --mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)
260
- );bottom:0;content:"";display:inline-block;inline-size:calc(100% + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap))*2 + var(--mod-tag-border-width, var(--spectrum-tag-border-width))*2);left:0;margin:auto;margin-block-start:calc((var(
264
+ );content:"";display:inline-block;inline-size:calc(100% + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap))*2 + var(--mod-tag-border-width, var(--spectrum-tag-border-width))*2);inset:0;margin:auto;margin-block-start:calc((var(
261
265
  --mod-tag-focus-ring-gap,
262
266
  var(--spectrum-tag-focus-ring-gap)
263
267
  ) + var(
@@ -275,11 +279,11 @@ var(--spectrum-tag-border-width)
275
279
  ) + var(
276
280
  --mod-tag-focus-ring-thickness,
277
281
  var(--spectrum-tag-focus-ring-thickness)
278
- ))*-1);position:absolute;right:0;top:0}:host(.is-focused):after,:host(:focus-visible):after{block-size:calc(100% + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap))*2 + var(--mod-tag-border-width, var(--spectrum-tag-border-width))*2);border-color:var(
282
+ ))*-1);position:absolute}:host(.focus-visible):after,:host([focused]):after{block-size:calc(100% + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap))*2 + var(--mod-tag-border-width, var(--spectrum-tag-border-width))*2);border-color:var(
279
283
  --highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color))
280
284
  );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(
281
285
  --mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)
282
- );bottom:0;content:"";display:inline-block;inline-size:calc(100% + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap))*2 + var(--mod-tag-border-width, var(--spectrum-tag-border-width))*2);left:0;margin:auto;margin-block-start:calc((var(
286
+ );content:"";display:inline-block;inline-size:calc(100% + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap))*2 + var(--mod-tag-border-width, var(--spectrum-tag-border-width))*2);inset:0;margin:auto;margin-block-start:calc((var(
283
287
  --mod-tag-focus-ring-gap,
284
288
  var(--spectrum-tag-focus-ring-gap)
285
289
  ) + var(
@@ -297,7 +301,29 @@ var(--spectrum-tag-border-width)
297
301
  ) + var(
298
302
  --mod-tag-focus-ring-thickness,
299
303
  var(--spectrum-tag-focus-ring-thickness)
300
- ))*-1);position:absolute;right:0;top:0}:host([selected]){background-color:var(
304
+ ))*-1);position:absolute}:host(:focus-visible):after,:host([focused]):after{block-size:calc(100% + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap))*2 + var(--mod-tag-border-width, var(--spectrum-tag-border-width))*2);border-color:var(
305
+ --highcontrast-tag-focus-ring-color,var(--mod-tag-focus-ring-color,var(--spectrum-tag-focus-ring-color))
306
+ );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(
307
+ --mod-tag-focus-ring-thickness,var(--spectrum-tag-focus-ring-thickness)
308
+ );content:"";display:inline-block;inline-size:calc(100% + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap))*2 + var(--mod-tag-border-width, var(--spectrum-tag-border-width))*2);inset:0;margin:auto;margin-block-start:calc((var(
309
+ --mod-tag-focus-ring-gap,
310
+ var(--spectrum-tag-focus-ring-gap)
311
+ ) + var(
312
+ --mod-tag-border-width,
313
+ var(--spectrum-tag-border-width)
314
+ ) + var(
315
+ --mod-tag-focus-ring-thickness,
316
+ var(--spectrum-tag-focus-ring-thickness)
317
+ ))*-1);margin-inline-start:calc((var(
318
+ --mod-tag-focus-ring-gap,
319
+ var(--spectrum-tag-focus-ring-gap)
320
+ ) + var(
321
+ --mod-tag-border-width,
322
+ var(--spectrum-tag-border-width)
323
+ ) + var(
324
+ --mod-tag-focus-ring-thickness,
325
+ var(--spectrum-tag-focus-ring-thickness)
326
+ ))*-1);position:absolute}:host([selected]){background-color:var(
301
327
  --highcontrast-tag-background-color-selected,var(
302
328
  --mod-tag-background-color-selected,var(--spectrum-tag-background-color-selected)
303
329
  )
@@ -325,7 +351,15 @@ var(--spectrum-tag-focus-ring-thickness)
325
351
  --highcontrast-tag-border-color-selected-active,var(
326
352
  --mod-tag-border-color-selected-active,var(--spectrum-tag-border-color-selected-active)
327
353
  )
328
- )}:host([selected].focus-visible),:host([selected].is-focused){background-color:var(
354
+ )}:host([selected].focus-visible),:host([selected][focused]){background-color:var(
355
+ --highcontrast-tag-background-color-selected-focus,var(
356
+ --mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)
357
+ )
358
+ );border-color:var(
359
+ --highcontrast-tag-border-color-selected-focus,var(
360
+ --mod-tag-border-color-selected-focus,var(--spectrum-tag-border-color-selected-focus)
361
+ )
362
+ )}:host([selected].focus-visible),:host([selected][focused]){background-color:var(
329
363
  --highcontrast-tag-background-color-selected-focus,var(
330
364
  --mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)
331
365
  )
@@ -333,7 +367,7 @@ var(--spectrum-tag-focus-ring-thickness)
333
367
  --highcontrast-tag-border-color-selected-focus,var(
334
368
  --mod-tag-border-color-selected-focus,var(--spectrum-tag-border-color-selected-focus)
335
369
  )
336
- )}:host([selected].is-focused),:host([selected]:focus-visible){background-color:var(
370
+ )}:host([selected]:focus-visible),:host([selected][focused]){background-color:var(
337
371
  --highcontrast-tag-background-color-selected-focus,var(
338
372
  --mod-tag-background-color-selected-focus,var(--spectrum-tag-background-color-selected-focus)
339
373
  )
@@ -365,7 +399,15 @@ var(--spectrum-tag-focus-ring-thickness)
365
399
  --highcontrast-tag-content-color-invalid-active,var(
366
400
  --mod-tag-content-color-invalid-active,var(--spectrum-tag-content-color-invalid-active)
367
401
  )
368
- )}:host([invalid].focus-visible),:host([invalid].is-focused){border-color:var(
402
+ )}:host([invalid].focus-visible),:host([invalid][focused]){border-color:var(
403
+ --highcontrast-tag-border-color-invalid-focus,var(
404
+ --mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)
405
+ )
406
+ );color:var(
407
+ --highcontrast-tag-content-color-invalid-focus,var(
408
+ --mod-tag-content-color-invalid-focus,var(--spectrum-tag-content-color-invalid-focus)
409
+ )
410
+ )}:host([invalid].focus-visible),:host([invalid][focused]){border-color:var(
369
411
  --highcontrast-tag-border-color-invalid-focus,var(
370
412
  --mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)
371
413
  )
@@ -373,7 +415,7 @@ var(--spectrum-tag-focus-ring-thickness)
373
415
  --highcontrast-tag-content-color-invalid-focus,var(
374
416
  --mod-tag-content-color-invalid-focus,var(--spectrum-tag-content-color-invalid-focus)
375
417
  )
376
- )}:host([invalid].is-focused),:host([invalid]:focus-visible){border-color:var(
418
+ )}:host([invalid]:focus-visible),:host([invalid][focused]){border-color:var(
377
419
  --highcontrast-tag-border-color-invalid-focus,var(
378
420
  --mod-tag-border-color-invalid-focus,var(--spectrum-tag-border-color-invalid-focus)
379
421
  )
@@ -409,7 +451,7 @@ var(--spectrum-tag-focus-ring-thickness)
409
451
  --highcontrast-tag-border-color-invalid-selected-active,var(
410
452
  --mod-tag-border-color-invalid-selected-active,var(--spectrum-tag-border-color-invalid-selected-active)
411
453
  )
412
- )}:host([invalid][selected].focus-visible),:host([invalid][selected].is-focused){background-color:var(
454
+ )}:host([invalid][selected].focus-visible),:host([invalid][selected][focused]){background-color:var(
413
455
  --highcontrast-tag-background-color-invalid-selected-focus,var(
414
456
  --mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)
415
457
  )
@@ -417,7 +459,7 @@ var(--spectrum-tag-focus-ring-thickness)
417
459
  --highcontrast-tag-border-color-invalid-selected-focus,var(
418
460
  --mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)
419
461
  )
420
- )}:host([invalid][selected].is-focused),:host([invalid][selected]:focus-visible){background-color:var(
462
+ )}:host([invalid][selected].focus-visible),:host([invalid][selected][focused]){background-color:var(
421
463
  --highcontrast-tag-background-color-invalid-selected-focus,var(
422
464
  --mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)
423
465
  )
@@ -425,7 +467,15 @@ var(--spectrum-tag-focus-ring-thickness)
425
467
  --highcontrast-tag-border-color-invalid-selected-focus,var(
426
468
  --mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)
427
469
  )
428
- )}:host(.is-emphasized){background-color:var(
470
+ )}:host([invalid][selected]:focus-visible),:host([invalid][selected][focused]){background-color:var(
471
+ --highcontrast-tag-background-color-invalid-selected-focus,var(
472
+ --mod-tag-background-color-invalid-selected-focus,var(--spectrum-tag-background-color-invalid-selected-focus)
473
+ )
474
+ );border-color:var(
475
+ --highcontrast-tag-border-color-invalid-selected-focus,var(
476
+ --mod-tag-border-color-invalid-selected-focus,var(--spectrum-tag-border-color-invalid-selected-focus)
477
+ )
478
+ )}:host([emphasized]){background-color:var(
429
479
  --highcontrast-tag-background-color-emphasized,var(
430
480
  --mod-tag-background-color-emphasized,var(--spectrum-tag-background-color-emphasized)
431
481
  )
@@ -437,7 +487,7 @@ var(--spectrum-tag-focus-ring-thickness)
437
487
  --highcontrast-tag-content-color-emphasized,var(
438
488
  --mod-tag-content-color-emphasized,var(--spectrum-tag-content-color-emphasized)
439
489
  )
440
- )}:host(.is-emphasized:hover){background-color:var(
490
+ )}:host([emphasized]:hover){background-color:var(
441
491
  --highcontrast-tag-background-color-emphasized-hover,var(
442
492
  --mod-tag-background-color-emphasized-hover,var(--spectrum-tag-background-color-emphasized-hover)
443
493
  )
@@ -445,7 +495,7 @@ var(--spectrum-tag-focus-ring-thickness)
445
495
  --highcontrast-tag-border-color-emphasized-hover,var(
446
496
  --mod-tag-border-color-emphasized-hover,var(--spectrum-tag-border-color-emphasized-hover)
447
497
  )
448
- )}:host(.is-emphasized:active){background-color:var(
498
+ )}:host([emphasized]:active){background-color:var(
449
499
  --highcontrast-tag-background-color-emphasized-active,var(
450
500
  --mod-tag-background-color-emphasized-active,var(--spectrum-tag-background-color-emphasized-active)
451
501
  )
@@ -453,7 +503,15 @@ var(--spectrum-tag-focus-ring-thickness)
453
503
  --highcontrast-tag-border-color-emphasized-active,var(
454
504
  --mod-tag-border-color-emphasized-active,var(--spectrum-tag-border-color-emphasized-active)
455
505
  )
456
- )}:host(.is-emphasized.focus-visible),:host(.is-emphasized.is-focused){background-color:var(
506
+ )}:host([emphasized].focus-visible),:host([emphasized][focused]){background-color:var(
507
+ --highcontrast-tag-background-color-emphasized-focus,var(
508
+ --mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)
509
+ )
510
+ );border-color:var(
511
+ --highcontrast-tag-border-color-emphasized-focus,var(
512
+ --mod-tag-border-color-emphasized-focus,var(--spectrum-tag-border-color-emphasized-focus)
513
+ )
514
+ )}:host([emphasized].focus-visible),:host([emphasized][focused]){background-color:var(
457
515
  --highcontrast-tag-background-color-emphasized-focus,var(
458
516
  --mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)
459
517
  )
@@ -461,7 +519,7 @@ var(--spectrum-tag-focus-ring-thickness)
461
519
  --highcontrast-tag-border-color-emphasized-focus,var(
462
520
  --mod-tag-border-color-emphasized-focus,var(--spectrum-tag-border-color-emphasized-focus)
463
521
  )
464
- )}:host(.is-emphasized.is-focused),:host(.is-emphasized:focus-visible){background-color:var(
522
+ )}:host([emphasized]:focus-visible),:host([emphasized][focused]){background-color:var(
465
523
  --highcontrast-tag-background-color-emphasized-focus,var(
466
524
  --mod-tag-background-color-emphasized-focus,var(--spectrum-tag-background-color-emphasized-focus)
467
525
  )
@@ -483,9 +541,7 @@ var(--spectrum-tag-focus-ring-thickness)
483
541
  )
484
542
  );pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(
485
543
  --mod-avatar-opacity-disabled,var(--spectrum-avatar-opacity-disabled)
486
- )}@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:ButtonText;--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;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(.is-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(
487
- --system-spectrum-tag-border-color
488
- );--spectrum-tag-border-color-hover:var(
544
+ )}@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:ButtonText;--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;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-border-color:var(--system-spectrum-tag-border-color);--spectrum-tag-border-color-hover:var(
489
545
  --system-spectrum-tag-border-color-hover
490
546
  );--spectrum-tag-border-color-active:var(
491
547
  --system-spectrum-tag-border-color-active