@threadlabs/looma 0.22.7 → 0.22.9

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/components/ui-badge/ui-badge.html +10 -0
  2. package/components/ui-search-shell/ui-search-shell.js +3 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/styles/ui-badge.css +9 -0
  6. package/vanilla/UiBadge.d.ts +1 -0
  7. package/vanilla/UiBadge.js +4 -2
  8. package/vue/UiBadge.d.ts +9 -0
  9. package/vue/UiBadge.vue +28 -0
  10. package/vue/chunks/UiBadge.js +24 -1
  11. package/vue/components.css +34 -26
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threadlabs/looma",
3
- "version": "0.22.7",
3
+ "version": "0.22.9",
4
4
  "type": "module",
5
5
  "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
6
6
  "license": "MIT",
package/styles/ui-badge.css CHANGED
@@ -92,6 +92,15 @@
92
92
  }
93
93
  }
94
94
 
95
+ :scope[data-ui-badge-state~="size=xs"] {
96
+ box-sizing: border-box;
97
+ min-inline-size: 1rem;
98
+ min-block-size: var(--ui-badge-min-block-size, 1rem);
99
+ padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, 0.125rem);
100
+ font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
101
+ line-height: var(--ui-badge-line-height, 1);
102
+ }
103
+
95
104
  :scope[data-ui-badge-state~="tone=accent"] {
96
105
  --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
97
106
  --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
package/vanilla/UiBadge.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface UiBadgeElement extends HTMLSpanElement {
7
7
  }
8
8
  export interface UiBadgeProps {
9
9
  shape?: "pill" | "tag" | null;
10
+ size?: "xs" | "md" | null;
10
11
  tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
11
12
  variant?: "solid" | "subtle" | "outline" | null;
12
13
  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
package/vanilla/UiBadge.js CHANGED
@@ -6,8 +6,9 @@ export function createUiBadge(options = {}) {
6
6
  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
7
7
  const projected = [];
8
8
  const prop0 = componentProps["shape"] === undefined ? "pill" : componentProps["shape"];
9
- const prop1 = componentProps["tone"] === undefined ? "neutral" : componentProps["tone"];
10
- const prop2 = componentProps["variant"] === undefined ? "subtle" : componentProps["variant"];
9
+ const prop1 = componentProps["size"] === undefined ? "md" : componentProps["size"];
10
+ const prop2 = componentProps["tone"] === undefined ? "neutral" : componentProps["tone"];
11
+ const prop3 = componentProps["variant"] === undefined ? "subtle" : componentProps["variant"];
11
12
  const element = document.createElement("span");
12
13
  for (const [name, value] of Object.entries(attributes)) {
13
14
  if (value === null || value === undefined || value === false) continue;
@@ -25,6 +26,7 @@ export function createUiBadge(options = {}) {
25
26
  }
26
27
  manageGeneratedProps(element, [
27
28
  { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag"], required: false },
29
+ { name: "size", attribute: "data-size", value: componentProps["size"], default: "md", type: ["xs","md"], required: false },
28
30
  { name: "tone", attribute: "data-tone", value: componentProps["tone"], default: "neutral", type: ["neutral","accent","info","success","warning","danger"], required: false },
29
31
  { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "subtle", type: ["solid","subtle","outline"], required: false },
30
32
  ]);
package/vue/UiBadge.d.ts CHANGED
@@ -8,6 +8,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
8
8
  type: PropType<"pill" | "tag" | null>;
9
9
  default: string;
10
10
  };
11
+ size: {
12
+ type: PropType<"xs" | "md" | null>;
13
+ default: string;
14
+ };
11
15
  tone: {
12
16
  type: PropType<"neutral" | "accent" | "info" | "success" | "warning" | "danger" | null>;
13
17
  default: string;
@@ -21,6 +25,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
21
25
  type: PropType<"pill" | "tag" | null>;
22
26
  default: string;
23
27
  };
28
+ size: {
29
+ type: PropType<"xs" | "md" | null>;
30
+ default: string;
31
+ };
24
32
  tone: {
25
33
  type: PropType<"neutral" | "accent" | "info" | "success" | "warning" | "danger" | null>;
26
34
  default: string;
@@ -31,6 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
31
39
  };
32
40
  }>> & Readonly<{}>, {
33
41
  shape: "tag" | "pill" | null;
42
+ size: "xs" | "md" | null;
34
43
  tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
35
44
  variant: "solid" | "subtle" | "outline" | null;
36
45
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
package/vue/UiBadge.vue CHANGED
@@ -17,6 +17,15 @@ const propValidityContract = {
17
17
  values: ['pill', 'tag'],
18
18
  default: 'pill',
19
19
  },
20
+ size: {
21
+ type: { kind: 'terminal', name: 'keyword' },
22
+ required: false,
23
+ target: { attribute: 'size' },
24
+ description:
25
+ 'Scale. xs is a compact count beside small controls; md is the usual text badge.',
26
+ values: ['xs', 'md'],
27
+ default: 'md',
28
+ },
20
29
  tone: {
21
30
  type: { kind: 'terminal', name: 'keyword' },
22
31
  required: false,
@@ -39,6 +48,7 @@ const propValidityContract = {
39
48
  }
40
49
  const props = defineProps({
41
50
  shape: { type: null as unknown as PropType<'pill' | 'tag' | null>, default: 'pill' },
51
+ size: { type: null as unknown as PropType<'xs' | 'md' | null>, default: 'md' },
42
52
  tone: {
43
53
  type: null as unknown as PropType<
44
54
  'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
@@ -57,6 +67,12 @@ const checkedProps = computed(() => ({
57
67
  false,
58
68
  'shape',
59
69
  ) as 'pill' | 'tag',
70
+ size: checkedProp<'xs' | 'md'>(
71
+ props['size'],
72
+ { kind: 'terminal', name: 'keyword' },
73
+ false,
74
+ 'size',
75
+ ) as 'xs' | 'md',
60
76
  tone: checkedProp<'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'>(
61
77
  props['tone'],
62
78
  { kind: 'terminal', name: 'keyword' },
@@ -125,6 +141,8 @@ if (
125
141
  /** The values the styles' :host-state() rules test. */
126
142
  const hostState = computed(() =>
127
143
  [
144
+ checkedProps.value.size && 'size',
145
+ checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
128
146
  checkedProps.value.tone && 'tone',
129
147
  checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
130
148
  checkedProps.value.variant && 'variant',
@@ -142,6 +160,7 @@ const hostState = computed(() =>
142
160
  v-bind="nativeAttrs($attrs)"
143
161
  v-prop-validity="{ contract: propValidityContract, values: { ...checkedProps } }"
144
162
  :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
163
+ :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
145
164
  :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
146
165
  :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
147
166
  :data-ui-badge-state="hostState || undefined"
@@ -249,6 +268,15 @@ const hostState = computed(() =>
249
268
  }
250
269
  }
251
270
 
271
+ [data-component~="ui-badge"][data-ui-badge-state~="size=xs"] {
272
+ box-sizing: border-box;
273
+ min-inline-size: 1rem;
274
+ min-block-size: var(--ui-badge-min-block-size, 1rem);
275
+ padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, 0.125rem);
276
+ font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
277
+ line-height: var(--ui-badge-line-height, 1);
278
+ }
279
+
252
280
  [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"] {
253
281
  --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
254
282
  --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
package/vue/chunks/UiBadge.js CHANGED
@@ -4,6 +4,7 @@ import { computed, createElementBlock, defineComponent, getCurrentInstance, merg
4
4
  //#region .build/vue/UiBadge.vue?vue&type=script&setup=true&lang.ts
5
5
  var _hoisted_1 = [
6
6
  "data-shape",
7
+ "data-size",
7
8
  "data-tone",
8
9
  "data-variant",
9
10
  "data-ui-badge-state"
@@ -18,6 +19,10 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
18
19
  type: null,
19
20
  default: "pill"
20
21
  },
22
+ size: {
23
+ type: null,
24
+ default: "md"
25
+ },
21
26
  tone: {
22
27
  type: null,
23
28
  default: "neutral"
@@ -40,6 +45,17 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
40
45
  values: ["pill", "tag"],
41
46
  default: "pill"
42
47
  },
48
+ size: {
49
+ type: {
50
+ kind: "terminal",
51
+ name: "keyword"
52
+ },
53
+ required: false,
54
+ target: { attribute: "size" },
55
+ description: "Scale. xs is a compact count beside small controls; md is the usual text badge.",
56
+ values: ["xs", "md"],
57
+ default: "md"
58
+ },
43
59
  tone: {
44
60
  type: {
45
61
  kind: "terminal",
@@ -80,6 +96,10 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
80
96
  kind: "terminal",
81
97
  name: "keyword"
82
98
  }, false, "shape"),
99
+ size: checkedProp(props["size"], {
100
+ kind: "terminal",
101
+ name: "keyword"
102
+ }, false, "size"),
83
103
  tone: checkedProp(props["tone"], {
84
104
  kind: "terminal",
85
105
  name: "keyword"
@@ -115,6 +135,8 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
115
135
  });
116
136
  /** The values the styles' :host-state() rules test. */
117
137
  const hostState = computed(() => [
138
+ checkedProps.value.size && "size",
139
+ checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
118
140
  checkedProps.value.tone && "tone",
119
141
  checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
120
142
  checkedProps.value.variant && "variant",
@@ -125,6 +147,7 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
125
147
  return (_ctx, _cache) => {
126
148
  return withDirectives((openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, nativeAttrs(_ctx.$attrs), {
127
149
  "data-shape": reflectedProp("shape", "shape", checkedProps.value.shape, void 0, false),
150
+ "data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
128
151
  "data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
129
152
  "data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
130
153
  "data-ui-badge-state": hostState.value || void 0
@@ -134,6 +157,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
134
157
  }]]);
135
158
  };
136
159
  }
137
- }), [["__scopeId", "data-v-631cb54a"]]);
160
+ }), [["__scopeId", "data-v-5ec5f829"]]);
138
161
  //#endregion
139
162
  export { UiBadge_default as t };
package/vue/components.css CHANGED
@@ -341,7 +341,7 @@ svg[data-v-9c54b0e3] {
341
341
  syntax: "*";
342
342
  inherits: false;
343
343
  }
344
- [data-component~="ui-badge"][data-v-631cb54a] {
344
+ [data-component~="ui-badge"][data-v-5ec5f829] {
345
345
  --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
346
346
  --_badge-text: var(--ui-text-secondary);
347
347
  /* Sit between the soft fill and its stronger theme ink. */
@@ -385,7 +385,7 @@ svg[data-v-9c54b0e3] {
385
385
  * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
386
386
  * replaces, still sizes to its label rather than filling its container. */
387
387
  @supports (text-box-trim: trim-both) {
388
- [data-component~="ui-badge"][data-v-631cb54a] {
388
+ [data-component~="ui-badge"][data-v-5ec5f829] {
389
389
  display: inline-block;
390
390
  min-block-size: var(--ui-badge-min-block-size, 1.5rem);
391
391
  text-align: center;
@@ -394,52 +394,60 @@ svg[data-v-9c54b0e3] {
394
394
  text-box-edge: cap alphabetic;
395
395
  }
396
396
  }
397
- [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-631cb54a] {
397
+ [data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-5ec5f829] {
398
+ box-sizing: border-box;
399
+ min-inline-size: 1rem;
400
+ min-block-size: var(--ui-badge-min-block-size, 1rem);
401
+ padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, 0.125rem);
402
+ font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
403
+ line-height: var(--ui-badge-line-height, 1);
404
+ }
405
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-5ec5f829] {
398
406
  --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
399
407
  --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
400
408
  --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
401
409
  }
402
- [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-631cb54a] {
410
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-5ec5f829] {
403
411
  --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
404
412
  --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
405
413
  --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
406
414
  }
407
- [data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-631cb54a] {
415
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-5ec5f829] {
408
416
  --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
409
417
  --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
410
418
  --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
411
419
  }
412
- [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-631cb54a] {
420
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-5ec5f829] {
413
421
  --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
414
422
  --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
415
423
  --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
416
424
  }
417
- [data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-631cb54a] {
425
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-5ec5f829] {
418
426
  --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
419
427
  --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
420
428
  --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
421
429
  }
422
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-631cb54a] {
430
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-5ec5f829] {
423
431
  --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
424
432
  --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
425
433
  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
426
434
  }
427
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-631cb54a] {
435
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-5ec5f829] {
428
436
  --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
429
437
  --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
430
438
  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
431
439
  }
432
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-631cb54a] {
440
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-5ec5f829] {
433
441
  --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
434
442
  --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
435
443
  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
436
444
  }
437
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-631cb54a] {
445
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-5ec5f829] {
438
446
  --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
439
447
  --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
440
448
  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
441
449
  }
442
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-631cb54a] {
450
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-5ec5f829] {
443
451
  --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
444
452
  --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
445
453
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -447,12 +455,12 @@ svg[data-v-9c54b0e3] {
447
455
 
448
456
  /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
449
457
  invalid while the hook is unset. */
450
- [data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-631cb54a] {
458
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-5ec5f829] {
451
459
  --_badge-color-surface: var(--_badge-color-ink);
452
460
  --_badge-color-border: var(--_badge-color-ink);
453
461
  --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
454
462
  }
455
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-631cb54a] {
463
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-5ec5f829] {
456
464
  --_badge-surface: var(--ui-surface-default);
457
465
  --_badge-border: var(--ui-border-strong);
458
466
  --_badge-text: var(--ui-text-secondary);
@@ -460,30 +468,30 @@ svg[data-v-9c54b0e3] {
460
468
  --_badge-color-surface: initial;
461
469
  --_badge-color-border: var(--_badge-color-ink);
462
470
  }
463
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-631cb54a] {
471
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-5ec5f829] {
464
472
  --_badge-border: var(--ui-accent-solid);
465
473
  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
466
474
  }
467
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-631cb54a] {
475
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-5ec5f829] {
468
476
  --_badge-border: var(--ui-danger-solid);
469
477
  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
470
478
  }
471
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-631cb54a] {
479
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-5ec5f829] {
472
480
  --_badge-border: var(--ui-success-solid);
473
481
  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
474
482
  }
475
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-631cb54a] {
483
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-5ec5f829] {
476
484
  --_badge-border: var(--ui-warning-solid);
477
485
  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
478
486
  }
479
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-631cb54a] {
487
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-5ec5f829] {
480
488
  --_badge-border: var(--ui-info-solid);
481
489
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
482
490
  }
483
491
 
484
492
  /* The clipped point needs an inset surface over an outer border-colour shape: a native border
485
493
  has no diagonal edge to follow. Keep this edge for every tag variant. */
486
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-631cb54a] {
494
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-5ec5f829] {
487
495
  --_badge-point: var(--ui-badge-point, var(--ui-space-2));
488
496
 
489
497
  position: relative;
@@ -500,7 +508,7 @@ svg[data-v-9c54b0e3] {
500
508
  0 100%
501
509
  );
502
510
  }
503
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-631cb54a]::before {
511
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-5ec5f829]::before {
504
512
  content: "";
505
513
  position: absolute;
506
514
  inset: 0;
@@ -515,29 +523,29 @@ svg[data-v-9c54b0e3] {
515
523
  );
516
524
  pointer-events: none;
517
525
  }
518
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-631cb54a]:dir(rtl) {
526
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-5ec5f829]:dir(rtl) {
519
527
  padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
520
528
  padding-inline-start: calc(
521
529
  var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
522
530
  );
523
531
  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
524
532
  }
525
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-631cb54a]:dir(rtl)::before {
533
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-5ec5f829]:dir(rtl)::before {
526
534
  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
527
535
  }
528
536
  @media (forced-colors: active) {
529
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-631cb54a] {
537
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-5ec5f829] {
530
538
  forced-color-adjust: none;
531
539
  background: CanvasText;
532
540
  color: CanvasText;
533
541
  }
534
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-631cb54a]::before {
542
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-5ec5f829]::before {
535
543
  background: Canvas;
536
544
  }
537
545
  }
538
546
 
539
547
  /* A component that sets its display still honours the hidden attribute on its root. */
540
- [data-component~="ui-badge"][hidden][data-v-631cb54a] {
548
+ [data-component~="ui-badge"][hidden][data-v-5ec5f829] {
541
549
  display: none;
542
550
  }
543
551