@threadlabs/looma 0.23.6 → 0.23.7

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 (10) hide show
  1. package/components/ui-badge/ui-badge.html +34 -3
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/styles/ui-badge.css +31 -0
  5. package/vanilla/UiBadge.d.ts +1 -1
  6. package/vanilla/UiBadge.js +1 -1
  7. package/vue/UiBadge.d.ts +3 -3
  8. package/vue/UiBadge.vue +38 -6
  9. package/vue/chunks/UiBadge.js +5 -4
  10. package/vue/components.css +57 -30
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threadlabs/looma",
3
- "version": "0.23.6",
3
+ "version": "0.23.7",
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
@@ -3,6 +3,10 @@
3
3
  syntax: "*";
4
4
  inherits: false;
5
5
  }
6
+ @property --ui-badge-square-size {
7
+ syntax: "*";
8
+ inherits: false;
9
+ }
6
10
  @property --ui-badge-dot-size {
7
11
  syntax: "*";
8
12
  inherits: false;
@@ -207,6 +211,31 @@
207
211
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
208
212
  }
209
213
 
214
+ /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
215
+ :scope[data-ui-badge-state~="shape=square"] {
216
+ --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
217
+ display: inline-flex;
218
+ box-sizing: border-box;
219
+ flex: none;
220
+ inline-size: var(--_badge-square-size);
221
+ block-size: var(--_badge-square-size);
222
+ min-inline-size: var(--_badge-square-size);
223
+ min-block-size: var(--_badge-square-size);
224
+ padding: 0;
225
+ border-radius: var(--ui-radius-md);
226
+ text-box-trim: none;
227
+ }
228
+
229
+ :scope[data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"] {
230
+ --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
231
+ }
232
+
233
+ :scope[data-ui-badge-state~="shape=square"] .label {
234
+ display: inline-flex;
235
+ align-items: center;
236
+ justify-content: center;
237
+ }
238
+
210
239
  /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
211
240
  :scope[data-ui-badge-state~="shape=dot"] {
212
241
  position: relative;
@@ -299,6 +328,8 @@
299
328
  /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
300
329
  invalid while the hook is unset. */
301
330
 
331
+ /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
332
+
302
333
  /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
303
334
 
304
335
  /* The clipped point needs an inset surface over an outer border-colour shape: a native border
package/vanilla/UiBadge.d.ts CHANGED
@@ -6,7 +6,7 @@ export interface UiBadgeElement extends HTMLSpanElement {
6
6
  removeEventListener<K extends keyof UiBadgeEventMap>(type: K, listener: (this: UiBadgeElement, event: UiBadgeEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
7
7
  }
8
8
  export interface UiBadgeProps {
9
- shape?: "pill" | "tag" | "dot" | null;
9
+ shape?: "pill" | "tag" | "dot" | "square" | null;
10
10
  size?: "xs" | "md" | null;
11
11
  tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
12
12
  variant?: "solid" | "subtle" | "outline" | null;
package/vanilla/UiBadge.js CHANGED
@@ -28,7 +28,7 @@ export function createUiBadge(options = {}) {
28
28
  }
29
29
  element.append(element0);
30
30
  manageGeneratedProps(element, [
31
- { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag","dot"], required: false },
31
+ { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag","dot","square"], required: false },
32
32
  { name: "size", attribute: "data-size", value: componentProps["size"], default: "md", type: ["xs","md"], required: false },
33
33
  { name: "tone", attribute: "data-tone", value: componentProps["tone"], default: "neutral", type: ["neutral","accent","info","success","warning","danger"], required: false },
34
34
  { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "subtle", type: ["solid","subtle","outline"], required: false },
package/vue/UiBadge.d.ts CHANGED
@@ -5,7 +5,7 @@ type __VLS_Slots = {} & {
5
5
  };
6
6
  declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
7
7
  shape: {
8
- type: PropType<"pill" | "tag" | "dot" | null>;
8
+ type: PropType<"pill" | "tag" | "dot" | "square" | null>;
9
9
  default: string;
10
10
  };
11
11
  size: {
@@ -22,7 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
22
22
  };
23
23
  }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
24
24
  shape: {
25
- type: PropType<"pill" | "tag" | "dot" | null>;
25
+ type: PropType<"pill" | "tag" | "dot" | "square" | null>;
26
26
  default: string;
27
27
  };
28
28
  size: {
@@ -38,7 +38,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
38
38
  default: string;
39
39
  };
40
40
  }>> & Readonly<{}>, {
41
- shape: "dot" | "tag" | "pill" | null;
41
+ shape: "dot" | "tag" | "square" | "pill" | null;
42
42
  size: "xs" | "md" | null;
43
43
  tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
44
44
  variant: "solid" | "subtle" | "outline" | null;
package/vue/UiBadge.vue CHANGED
@@ -13,8 +13,8 @@ const propValidityContract = {
13
13
  required: false,
14
14
  target: { attribute: 'shape' },
15
15
  description:
16
- 'Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n aria-hidden when the surrounding control already names that state.',
17
- values: ['pill', 'tag', 'dot'],
16
+ 'Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n decorative icon when adjacent words name it.',
17
+ values: ['pill', 'tag', 'dot', 'square'],
18
18
  default: 'pill',
19
19
  },
20
20
  size: {
@@ -22,7 +22,7 @@ const propValidityContract = {
22
22
  required: false,
23
23
  target: { attribute: 'size' },
24
24
  description:
25
- 'Scale. xs is a compact count beside small controls; md is the usual text badge.',
25
+ 'Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing.',
26
26
  values: ['xs', 'md'],
27
27
  default: 'md',
28
28
  },
@@ -47,7 +47,10 @@ const propValidityContract = {
47
47
  },
48
48
  } as const
49
49
  const props = defineProps({
50
- shape: { type: null as unknown as PropType<'pill' | 'tag' | 'dot' | null>, default: 'pill' },
50
+ shape: {
51
+ type: null as unknown as PropType<'pill' | 'tag' | 'dot' | 'square' | null>,
52
+ default: 'pill',
53
+ },
51
54
  size: { type: null as unknown as PropType<'xs' | 'md' | null>, default: 'md' },
52
55
  tone: {
53
56
  type: null as unknown as PropType<
@@ -67,13 +70,13 @@ const acceptedProps: Record<string, unknown> = {
67
70
  variant: 'subtle',
68
71
  }
69
72
  const checkedProps = computed(() => ({
70
- shape: checkedProp<'pill' | 'tag' | 'dot'>(
73
+ shape: checkedProp<'pill' | 'tag' | 'dot' | 'square'>(
71
74
  props['shape'],
72
75
  { kind: 'terminal', name: 'keyword' },
73
76
  false,
74
77
  'shape',
75
78
  acceptedProps,
76
- ) as 'pill' | 'tag' | 'dot',
79
+ ) as 'pill' | 'tag' | 'dot' | 'square',
77
80
  size: checkedProp<'xs' | 'md'>(
78
81
  props['size'],
79
82
  { kind: 'terminal', name: 'keyword' },
@@ -183,6 +186,10 @@ const hostState = computed(() =>
183
186
  syntax: "*";
184
187
  inherits: false;
185
188
  }
189
+ @property --ui-badge-square-size {
190
+ syntax: "*";
191
+ inherits: false;
192
+ }
186
193
  @property --ui-badge-dot-size {
187
194
  syntax: "*";
188
195
  inherits: false;
@@ -394,6 +401,31 @@ const hostState = computed(() =>
394
401
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
395
402
  }
396
403
 
404
+ /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
405
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] {
406
+ --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
407
+ display: inline-flex;
408
+ box-sizing: border-box;
409
+ flex: none;
410
+ inline-size: var(--_badge-square-size);
411
+ block-size: var(--_badge-square-size);
412
+ min-inline-size: var(--_badge-square-size);
413
+ min-block-size: var(--_badge-square-size);
414
+ padding: 0;
415
+ border-radius: var(--ui-radius-md);
416
+ text-box-trim: none;
417
+ }
418
+
419
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"] {
420
+ --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
421
+ }
422
+
423
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label {
424
+ display: inline-flex;
425
+ align-items: center;
426
+ justify-content: center;
427
+ }
428
+
397
429
  /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
398
430
  [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] {
399
431
  position: relative;
package/vue/chunks/UiBadge.js CHANGED
@@ -42,11 +42,12 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
42
42
  },
43
43
  required: false,
44
44
  target: { attribute: "shape" },
45
- description: "Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n aria-hidden when the surrounding control already names that state.",
45
+ description: "Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n decorative icon when adjacent words name it.",
46
46
  values: [
47
47
  "pill",
48
48
  "tag",
49
- "dot"
49
+ "dot",
50
+ "square"
50
51
  ],
51
52
  default: "pill"
52
53
  },
@@ -57,7 +58,7 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
57
58
  },
58
59
  required: false,
59
60
  target: { attribute: "size" },
60
- description: "Scale. xs is a compact count beside small controls; md is the usual text badge.",
61
+ description: "Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing.",
61
62
  values: ["xs", "md"],
62
63
  default: "md"
63
64
  },
@@ -168,6 +169,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
168
169
  }]]);
169
170
  };
170
171
  }
171
- }), [["__scopeId", "data-v-84736a7c"]]);
172
+ }), [["__scopeId", "data-v-470f6e28"]]);
172
173
  //#endregion
173
174
  export { UiBadge_default as t };
package/vue/components.css CHANGED
@@ -301,6 +301,10 @@ svg[data-v-47b12d9e] {
301
301
  syntax: "*";
302
302
  inherits: false;
303
303
  }
304
+ @property --ui-badge-square-size {
305
+ syntax: "*";
306
+ inherits: false;
307
+ }
304
308
  @property --ui-badge-dot-size {
305
309
  syntax: "*";
306
310
  inherits: false;
@@ -345,7 +349,7 @@ svg[data-v-47b12d9e] {
345
349
  syntax: "*";
346
350
  inherits: false;
347
351
  }
348
- [data-component~="ui-badge"][data-v-84736a7c] {
352
+ [data-component~="ui-badge"][data-v-470f6e28] {
349
353
  --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
350
354
  --_badge-text: var(--ui-text-secondary);
351
355
  /* Sit between the soft fill and its stronger theme ink. */
@@ -390,7 +394,7 @@ svg[data-v-47b12d9e] {
390
394
  * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
391
395
  * replaces, still sizes to its label rather than filling its container. */
392
396
  @supports (text-box-trim: trim-both) {
393
- [data-component~="ui-badge"][data-v-84736a7c] {
397
+ [data-component~="ui-badge"][data-v-470f6e28] {
394
398
  display: inline-block;
395
399
  min-block-size: var(--ui-badge-min-block-size, 1.5rem);
396
400
  text-align: center;
@@ -399,7 +403,7 @@ svg[data-v-47b12d9e] {
399
403
  text-box-edge: cap alphabetic;
400
404
  }
401
405
  }
402
- [data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-84736a7c] {
406
+ [data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-470f6e28] {
403
407
  box-sizing: border-box;
404
408
  min-inline-size: 1rem;
405
409
  min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -407,52 +411,52 @@ svg[data-v-47b12d9e] {
407
411
  font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
408
412
  line-height: var(--ui-badge-line-height, 1);
409
413
  }
410
- [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-84736a7c] {
414
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-470f6e28] {
411
415
  --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
412
416
  --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
413
417
  --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
414
418
  }
415
- [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-84736a7c] {
419
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-470f6e28] {
416
420
  --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
417
421
  --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
418
422
  --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
419
423
  }
420
- [data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-84736a7c] {
424
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-470f6e28] {
421
425
  --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
422
426
  --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
423
427
  --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
424
428
  }
425
- [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-84736a7c] {
429
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-470f6e28] {
426
430
  --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
427
431
  --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
428
432
  --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
429
433
  }
430
- [data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-84736a7c] {
434
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-470f6e28] {
431
435
  --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
432
436
  --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
433
437
  --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
434
438
  }
435
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-84736a7c] {
439
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-470f6e28] {
436
440
  --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
437
441
  --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
438
442
  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
439
443
  }
440
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-84736a7c] {
444
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-470f6e28] {
441
445
  --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
442
446
  --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
443
447
  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
444
448
  }
445
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-84736a7c] {
449
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-470f6e28] {
446
450
  --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
447
451
  --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
448
452
  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
449
453
  }
450
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-84736a7c] {
454
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-470f6e28] {
451
455
  --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
452
456
  --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
453
457
  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
454
458
  }
455
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-84736a7c] {
459
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-470f6e28] {
456
460
  --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
457
461
  --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
458
462
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -460,12 +464,12 @@ svg[data-v-47b12d9e] {
460
464
 
461
465
  /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
462
466
  invalid while the hook is unset. */
463
- [data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-84736a7c] {
467
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-470f6e28] {
464
468
  --_badge-color-surface: var(--_badge-color-ink);
465
469
  --_badge-color-border: var(--_badge-color-ink);
466
470
  --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
467
471
  }
468
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-84736a7c] {
472
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-470f6e28] {
469
473
  --_badge-surface: var(--ui-surface-default);
470
474
  --_badge-border: var(--ui-border-strong);
471
475
  --_badge-text: var(--ui-text-secondary);
@@ -473,29 +477,52 @@ svg[data-v-47b12d9e] {
473
477
  --_badge-color-surface: initial;
474
478
  --_badge-color-border: var(--_badge-color-ink);
475
479
  }
476
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-84736a7c] {
480
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-470f6e28] {
477
481
  --_badge-border: var(--ui-accent-solid);
478
482
  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
479
483
  }
480
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-84736a7c] {
484
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-470f6e28] {
481
485
  --_badge-border: var(--ui-danger-solid);
482
486
  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
483
487
  }
484
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-84736a7c] {
488
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-470f6e28] {
485
489
  --_badge-border: var(--ui-success-solid);
486
490
  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
487
491
  }
488
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-84736a7c] {
492
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-470f6e28] {
489
493
  --_badge-border: var(--ui-warning-solid);
490
494
  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
491
495
  }
492
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-84736a7c] {
496
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-470f6e28] {
493
497
  --_badge-border: var(--ui-info-solid);
494
498
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
495
499
  }
496
500
 
501
+ /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
502
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-470f6e28] {
503
+ --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
504
+ display: inline-flex;
505
+ box-sizing: border-box;
506
+ flex: none;
507
+ inline-size: var(--_badge-square-size);
508
+ block-size: var(--_badge-square-size);
509
+ min-inline-size: var(--_badge-square-size);
510
+ min-block-size: var(--_badge-square-size);
511
+ padding: 0;
512
+ border-radius: var(--ui-radius-md);
513
+ text-box-trim: none;
514
+ }
515
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-470f6e28] {
516
+ --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
517
+ }
518
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-470f6e28] {
519
+ display: inline-flex;
520
+ align-items: center;
521
+ justify-content: center;
522
+ }
523
+
497
524
  /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
498
- [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-84736a7c] {
525
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-470f6e28] {
499
526
  position: relative;
500
527
  box-sizing: border-box;
501
528
  flex: none;
@@ -507,7 +534,7 @@ svg[data-v-47b12d9e] {
507
534
  border-radius: var(--ui-radius-round);
508
535
  text-box-trim: none;
509
536
  }
510
- [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-84736a7c] {
537
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-470f6e28] {
511
538
  position: absolute;
512
539
  inline-size: 1px;
513
540
  block-size: 1px;
@@ -518,7 +545,7 @@ svg[data-v-47b12d9e] {
518
545
 
519
546
  /* The clipped point needs an inset surface over an outer border-colour shape: a native border
520
547
  has no diagonal edge to follow. Keep this edge for every tag variant. */
521
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c] {
548
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28] {
522
549
  --_badge-point: var(--ui-badge-point, var(--ui-space-2));
523
550
 
524
551
  position: relative;
@@ -535,7 +562,7 @@ svg[data-v-47b12d9e] {
535
562
  0 100%
536
563
  );
537
564
  }
538
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c]::before {
565
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]::before {
539
566
  content: "";
540
567
  position: absolute;
541
568
  inset: 0;
@@ -550,34 +577,34 @@ svg[data-v-47b12d9e] {
550
577
  );
551
578
  pointer-events: none;
552
579
  }
553
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c]:dir(rtl) {
580
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]:dir(rtl) {
554
581
  padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
555
582
  padding-inline-start: calc(
556
583
  var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
557
584
  );
558
585
  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
559
586
  }
560
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c]:dir(rtl)::before {
587
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]:dir(rtl)::before {
561
588
  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
562
589
  }
563
590
  @media (forced-colors: active) {
564
- [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-84736a7c] {
591
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-470f6e28] {
565
592
  forced-color-adjust: none;
566
593
  border-color: CanvasText;
567
594
  background: CanvasText;
568
595
  }
569
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c] {
596
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28] {
570
597
  forced-color-adjust: none;
571
598
  background: CanvasText;
572
599
  color: CanvasText;
573
600
  }
574
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-84736a7c]::before {
601
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]::before {
575
602
  background: Canvas;
576
603
  }
577
604
  }
578
605
 
579
606
  /* A component that sets its display still honours the hidden attribute on its root. */
580
- [data-component~="ui-badge"][hidden][data-v-84736a7c] {
607
+ [data-component~="ui-badge"][hidden][data-v-470f6e28] {
581
608
  display: none;
582
609
  }
583
610