@threadlabs/looma 0.23.11 → 0.23.13

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 (7) hide show
  1. package/components/ui-badge/ui-badge.html +16 -6
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/styles/ui-badge.css +20 -8
  5. package/vue/UiBadge.vue +16 -6
  6. package/vue/chunks/UiBadge.js +2 -2
  7. package/vue/components.css +48 -38
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threadlabs/looma",
3
- "version": "0.23.11",
3
+ "version": "0.23.13",
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
@@ -73,7 +73,9 @@
73
73
  display: inline-flex;
74
74
  align-items: center;
75
75
  justify-content: center;
76
- max-width: 100%;
76
+ box-sizing: border-box;
77
+ min-inline-size: 0;
78
+ max-inline-size: 100%;
77
79
  padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
78
80
  border: var(--ui-border-width) solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
79
81
  border-radius: var(--ui-radius-round);
@@ -86,9 +88,17 @@
86
88
  white-space: nowrap;
87
89
  }
88
90
 
89
- /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
90
- * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
91
- * replaces, still sizes to its label rather than filling its container. */
91
+ /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
92
+ text stays in the DOM for accessible names and consumers' selected values. */
93
+ .label {
94
+ display: block;
95
+ min-inline-size: 0;
96
+ overflow: hidden;
97
+ text-overflow: ellipsis;
98
+ }
99
+
100
+ /* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
101
+ would crop glyphs where the label clips horizontal overflow for ellipsis. */
92
102
  @supports (text-box-trim: trim-both) {
93
103
  :scope {
94
104
  display: inline-block;
@@ -96,7 +106,7 @@
96
106
  text-align: center;
97
107
  align-content: center;
98
108
  text-box-trim: trim-both;
99
- text-box-edge: cap alphabetic;
109
+ text-box-edge: text;
100
110
  }
101
111
  }
102
112
 
@@ -319,9 +329,11 @@
319
329
  @scope ([data-component~="ui-badge"]) to ([data-component]) {
320
330
  /* This component's hooks style the element they are set on, and never a nested one. */
321
331
 
322
- /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
323
- * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
324
- * replaces, still sizes to its label rather than filling its container. */
332
+ /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
333
+ text stays in the DOM for accessible names and consumers' selected values. */
334
+
335
+ /* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
336
+ would crop glyphs where the label clips horizontal overflow for ellipsis. */
325
337
  @supports (text-box-trim: trim-both) {
326
338
  }
327
339
 
package/vue/UiBadge.vue CHANGED
@@ -40,7 +40,7 @@ const propValidityContract = {
40
40
  required: false,
41
41
  target: { attribute: 'variant' },
42
42
  description:
43
- 'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n Neutral looks the same in solid and subtle.',
43
+ 'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n Neutral looks the same in solid and subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.',
44
44
  values: ['solid', 'subtle', 'outline'],
45
45
  default: 'subtle',
46
46
  },
@@ -261,7 +261,9 @@ const hostState = computed(() =>
261
261
  display: inline-flex;
262
262
  align-items: center;
263
263
  justify-content: center;
264
- max-width: 100%;
264
+ box-sizing: border-box;
265
+ min-inline-size: 0;
266
+ max-inline-size: 100%;
265
267
  padding: var(--ui-badge-padding-block, var(--ui-space-0-5))
266
268
  var(--ui-badge-padding-inline, var(--ui-space-2));
267
269
  border: var(--ui-border-width) solid
@@ -276,9 +278,17 @@ const hostState = computed(() =>
276
278
  white-space: nowrap;
277
279
  }
278
280
 
279
- /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
280
- * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
281
- * replaces, still sizes to its label rather than filling its container. */
281
+ /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
282
+ text stays in the DOM for accessible names and consumers' selected values. */
283
+ .label {
284
+ display: block;
285
+ min-inline-size: 0;
286
+ overflow: hidden;
287
+ text-overflow: ellipsis;
288
+ }
289
+
290
+ /* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
291
+ would crop glyphs where the label clips horizontal overflow for ellipsis. */
282
292
  @supports (text-box-trim: trim-both) {
283
293
  [data-component~="ui-badge"] {
284
294
  display: inline-block;
@@ -286,7 +296,7 @@ const hostState = computed(() =>
286
296
  text-align: center;
287
297
  align-content: center;
288
298
  text-box-trim: trim-both;
289
- text-box-edge: cap alphabetic;
299
+ text-box-edge: text;
290
300
  }
291
301
  }
292
302
 
package/vue/chunks/UiBadge.js CHANGED
@@ -87,7 +87,7 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
87
87
  },
88
88
  required: false,
89
89
  target: { attribute: "variant" },
90
- description: "Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n Neutral looks the same in solid and subtle.",
90
+ description: "Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n Neutral looks the same in solid and subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.",
91
91
  values: [
92
92
  "solid",
93
93
  "subtle",
@@ -169,6 +169,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
169
169
  }]]);
170
170
  };
171
171
  }
172
- }), [["__scopeId", "data-v-470f6e28"]]);
172
+ }), [["__scopeId", "data-v-83521ab0"]]);
173
173
  //#endregion
174
174
  export { UiBadge_default as t };
package/vue/components.css CHANGED
@@ -349,7 +349,7 @@ svg[data-v-47b12d9e] {
349
349
  syntax: "*";
350
350
  inherits: false;
351
351
  }
352
- [data-component~="ui-badge"][data-v-470f6e28] {
352
+ [data-component~="ui-badge"][data-v-83521ab0] {
353
353
  --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
354
354
  --_badge-text: var(--ui-text-secondary);
355
355
  /* Sit between the soft fill and its stronger theme ink. */
@@ -375,7 +375,9 @@ svg[data-v-47b12d9e] {
375
375
  display: inline-flex;
376
376
  align-items: center;
377
377
  justify-content: center;
378
- max-width: 100%;
378
+ box-sizing: border-box;
379
+ min-inline-size: 0;
380
+ max-inline-size: 100%;
379
381
  padding: var(--ui-badge-padding-block, var(--ui-space-0-5))
380
382
  var(--ui-badge-padding-inline, var(--ui-space-2));
381
383
  border: var(--ui-border-width) solid
@@ -390,20 +392,28 @@ svg[data-v-47b12d9e] {
390
392
  white-space: nowrap;
391
393
  }
392
394
 
393
- /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
394
- * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
395
- * replaces, still sizes to its label rather than filling its container. */
395
+ /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
396
+ text stays in the DOM for accessible names and consumers' selected values. */
397
+ .label[data-v-83521ab0] {
398
+ display: block;
399
+ min-inline-size: 0;
400
+ overflow: hidden;
401
+ text-overflow: ellipsis;
402
+ }
403
+
404
+ /* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
405
+ would crop glyphs where the label clips horizontal overflow for ellipsis. */
396
406
  @supports (text-box-trim: trim-both) {
397
- [data-component~="ui-badge"][data-v-470f6e28] {
407
+ [data-component~="ui-badge"][data-v-83521ab0] {
398
408
  display: inline-block;
399
409
  min-block-size: var(--ui-badge-min-block-size, 1.5rem);
400
410
  text-align: center;
401
411
  align-content: center;
402
412
  text-box-trim: trim-both;
403
- text-box-edge: cap alphabetic;
413
+ text-box-edge: text;
404
414
  }
405
415
  }
406
- [data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-470f6e28] {
416
+ [data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-83521ab0] {
407
417
  box-sizing: border-box;
408
418
  min-inline-size: 1rem;
409
419
  min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -411,52 +421,52 @@ svg[data-v-47b12d9e] {
411
421
  font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
412
422
  line-height: var(--ui-badge-line-height, 1);
413
423
  }
414
- [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-470f6e28] {
424
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-83521ab0] {
415
425
  --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
416
426
  --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
417
427
  --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
418
428
  }
419
- [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-470f6e28] {
429
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-83521ab0] {
420
430
  --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
421
431
  --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
422
432
  --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
423
433
  }
424
- [data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-470f6e28] {
434
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-83521ab0] {
425
435
  --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
426
436
  --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
427
437
  --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
428
438
  }
429
- [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-470f6e28] {
439
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-83521ab0] {
430
440
  --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
431
441
  --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
432
442
  --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
433
443
  }
434
- [data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-470f6e28] {
444
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-83521ab0] {
435
445
  --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
436
446
  --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
437
447
  --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
438
448
  }
439
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-470f6e28] {
449
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-83521ab0] {
440
450
  --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
441
451
  --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
442
452
  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
443
453
  }
444
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-470f6e28] {
454
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-83521ab0] {
445
455
  --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
446
456
  --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
447
457
  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
448
458
  }
449
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-470f6e28] {
459
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-83521ab0] {
450
460
  --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
451
461
  --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
452
462
  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
453
463
  }
454
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-470f6e28] {
464
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-83521ab0] {
455
465
  --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
456
466
  --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
457
467
  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
458
468
  }
459
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-470f6e28] {
469
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-83521ab0] {
460
470
  --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
461
471
  --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
462
472
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -464,12 +474,12 @@ svg[data-v-47b12d9e] {
464
474
 
465
475
  /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
466
476
  invalid while the hook is unset. */
467
- [data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-470f6e28] {
477
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-83521ab0] {
468
478
  --_badge-color-surface: var(--_badge-color-ink);
469
479
  --_badge-color-border: var(--_badge-color-ink);
470
480
  --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
471
481
  }
472
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-470f6e28] {
482
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-83521ab0] {
473
483
  --_badge-surface: var(--ui-surface-default);
474
484
  --_badge-border: var(--ui-border-strong);
475
485
  --_badge-text: var(--ui-text-secondary);
@@ -477,29 +487,29 @@ svg[data-v-47b12d9e] {
477
487
  --_badge-color-surface: initial;
478
488
  --_badge-color-border: var(--_badge-color-ink);
479
489
  }
480
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-470f6e28] {
490
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-83521ab0] {
481
491
  --_badge-border: var(--ui-accent-solid);
482
492
  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
483
493
  }
484
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-470f6e28] {
494
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-83521ab0] {
485
495
  --_badge-border: var(--ui-danger-solid);
486
496
  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
487
497
  }
488
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-470f6e28] {
498
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-83521ab0] {
489
499
  --_badge-border: var(--ui-success-solid);
490
500
  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
491
501
  }
492
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-470f6e28] {
502
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-83521ab0] {
493
503
  --_badge-border: var(--ui-warning-solid);
494
504
  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
495
505
  }
496
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-470f6e28] {
506
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-83521ab0] {
497
507
  --_badge-border: var(--ui-info-solid);
498
508
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
499
509
  }
500
510
 
501
511
  /* 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] {
512
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-83521ab0] {
503
513
  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
504
514
  display: inline-flex;
505
515
  box-sizing: border-box;
@@ -512,17 +522,17 @@ svg[data-v-47b12d9e] {
512
522
  border-radius: var(--ui-radius-md);
513
523
  text-box-trim: none;
514
524
  }
515
- [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-470f6e28] {
525
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-83521ab0] {
516
526
  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
517
527
  }
518
- [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-470f6e28] {
528
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-83521ab0] {
519
529
  display: inline-flex;
520
530
  align-items: center;
521
531
  justify-content: center;
522
532
  }
523
533
 
524
534
  /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
525
- [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-470f6e28] {
535
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-83521ab0] {
526
536
  position: relative;
527
537
  box-sizing: border-box;
528
538
  flex: none;
@@ -534,7 +544,7 @@ svg[data-v-47b12d9e] {
534
544
  border-radius: var(--ui-radius-round);
535
545
  text-box-trim: none;
536
546
  }
537
- [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-470f6e28] {
547
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-83521ab0] {
538
548
  position: absolute;
539
549
  inline-size: 1px;
540
550
  block-size: 1px;
@@ -545,7 +555,7 @@ svg[data-v-47b12d9e] {
545
555
 
546
556
  /* The clipped point needs an inset surface over an outer border-colour shape: a native border
547
557
  has no diagonal edge to follow. Keep this edge for every tag variant. */
548
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28] {
558
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0] {
549
559
  --_badge-point: var(--ui-badge-point, var(--ui-space-2));
550
560
 
551
561
  position: relative;
@@ -562,7 +572,7 @@ svg[data-v-47b12d9e] {
562
572
  0 100%
563
573
  );
564
574
  }
565
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]::before {
575
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0]::before {
566
576
  content: "";
567
577
  position: absolute;
568
578
  inset: 0;
@@ -577,34 +587,34 @@ svg[data-v-47b12d9e] {
577
587
  );
578
588
  pointer-events: none;
579
589
  }
580
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]:dir(rtl) {
590
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0]:dir(rtl) {
581
591
  padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
582
592
  padding-inline-start: calc(
583
593
  var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
584
594
  );
585
595
  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
586
596
  }
587
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]:dir(rtl)::before {
597
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0]:dir(rtl)::before {
588
598
  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
589
599
  }
590
600
  @media (forced-colors: active) {
591
- [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-470f6e28] {
601
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-83521ab0] {
592
602
  forced-color-adjust: none;
593
603
  border-color: CanvasText;
594
604
  background: CanvasText;
595
605
  }
596
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28] {
606
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0] {
597
607
  forced-color-adjust: none;
598
608
  background: CanvasText;
599
609
  color: CanvasText;
600
610
  }
601
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]::before {
611
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-83521ab0]::before {
602
612
  background: Canvas;
603
613
  }
604
614
  }
605
615
 
606
616
  /* A component that sets its display still honours the hidden attribute on its root. */
607
- [data-component~="ui-badge"][hidden][data-v-470f6e28] {
617
+ [data-component~="ui-badge"][hidden][data-v-83521ab0] {
608
618
  display: none;
609
619
  }
610
620