@threadlabs/looma 0.26.2 → 0.26.3

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 (25) hide show
  1. package/components/ui-avatar/ui-avatar.html +6 -1
  2. package/components/ui-badge/ui-badge.html +62 -12
  3. package/components/ui-list-item/ui-list-item.html +13 -0
  4. package/dist/index.js +1 -1
  5. package/package.json +1 -1
  6. package/styles/ui-avatar.css +4 -0
  7. package/styles/ui-badge.css +67 -8
  8. package/styles/ui-list-item.css +12 -0
  9. package/vanilla/UiBadge.d.ts +2 -2
  10. package/vanilla/UiBadge.js +1 -1
  11. package/vanilla/UiListItem.d.ts +1 -0
  12. package/vanilla/UiListItem.js +6 -6
  13. package/vue/UiAvatar.vue +6 -1
  14. package/vue/UiBadge.d.ts +6 -6
  15. package/vue/UiBadge.vue +81 -17
  16. package/vue/UiCard.d.ts +1 -1
  17. package/vue/UiListItem.d.ts +9 -0
  18. package/vue/UiListItem.vue +31 -0
  19. package/vue/UiPopover.d.ts +1 -1
  20. package/vue/UiScrollArea.d.ts +1 -1
  21. package/vue/UiTooltip.d.ts +1 -1
  22. package/vue/chunks/UiAvatar.js +2 -2
  23. package/vue/chunks/UiBadge.js +11 -6
  24. package/vue/chunks/UiListItem.js +26 -2
  25. package/vue/components.css +167 -95
package/vue/components.css CHANGED
@@ -134,7 +134,7 @@ svg[data-v-abaeb064] {
134
134
  syntax: "*";
135
135
  inherits: false;
136
136
  }
137
- [data-component~="ui-avatar"][data-v-8b3c5fb3] {
137
+ [data-component~="ui-avatar"][data-v-03720dc1] {
138
138
  --_ui-default-icon-size: 1.25rem;
139
139
  display: inline-grid;
140
140
  place-items: center;
@@ -156,13 +156,13 @@ svg[data-v-abaeb064] {
156
156
  line-height: 1;
157
157
  text-transform: uppercase;
158
158
  }
159
- [data-component~="ui-avatar"][data-ui-avatar-state~="size=sm"][data-v-8b3c5fb3] {
159
+ [data-component~="ui-avatar"][data-ui-avatar-state~="size=sm"][data-v-03720dc1] {
160
160
  --_ui-default-icon-size: 1rem;
161
161
  inline-size: 1.75rem;
162
162
  block-size: 1.75rem;
163
163
  font-size: var(--ui-font-size-xs);
164
164
  }
165
- [data-component~="ui-avatar"][data-ui-avatar-state~="size=xs"][data-v-8b3c5fb3] {
165
+ [data-component~="ui-avatar"][data-ui-avatar-state~="size=xs"][data-v-03720dc1] {
166
166
  --_ui-default-icon-size: 0.75rem;
167
167
  inline-size: 1.25rem;
168
168
  block-size: 1.25rem;
@@ -170,26 +170,29 @@ svg[data-v-abaeb064] {
170
170
  font-size: calc(var(--ui-font-size) * 0.5625);
171
171
  letter-spacing: 0.02em;
172
172
  }
173
- [data-component~="ui-avatar"][data-ui-avatar-state~="hasImage"][data-v-8b3c5fb3] {
173
+ [data-component~="ui-avatar"][data-ui-avatar-state~="hasImage"][data-v-03720dc1] {
174
174
  border-color: var(--ui-avatar-border, var(--ui-border-strong));
175
175
  }
176
- [data-component~="ui-avatar"][data-ui-avatar-state~="shape=square"][data-v-8b3c5fb3] {
176
+ [data-component~="ui-avatar"][data-ui-avatar-state~="shape=circle"][data-v-03720dc1] {
177
+ box-shadow: var(--ui-shadow-sm);
178
+ }
179
+ [data-component~="ui-avatar"][data-ui-avatar-state~="shape=square"][data-v-03720dc1] {
177
180
  border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
178
181
  }
179
182
 
180
183
  /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
181
184
  outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
182
- [data-component~="ui-avatar"][data-ui-avatar-state~="active"][data-v-8b3c5fb3] {
185
+ [data-component~="ui-avatar"][data-ui-avatar-state~="active"][data-v-03720dc1] {
183
186
  outline: var(--ui-border-width) solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
184
187
  outline-offset: var(--ui-border-width);
185
188
  }
186
- .image[data-v-8b3c5fb3],img[data-v-8b3c5fb3-s] {
189
+ .image[data-v-03720dc1],img[data-v-03720dc1-s] {
187
190
  grid-area: 1 / 1;
188
191
  inline-size: 100%;
189
192
  block-size: 100%;
190
193
  object-fit: cover;
191
194
  }
192
- .fallback[data-v-8b3c5fb3] {
195
+ .fallback[data-v-03720dc1] {
193
196
  grid-area: 1 / 1;
194
197
  display: inline-flex;
195
198
  align-items: center;
@@ -202,7 +205,7 @@ svg[data-v-abaeb064] {
202
205
  /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
203
206
  * Trimming applies to block containers, so the box is a block with centred content. */
204
207
  @supports (text-box-trim: trim-both) {
205
- .fallback[data-v-8b3c5fb3] {
208
+ .fallback[data-v-03720dc1] {
206
209
  display: block;
207
210
  text-align: center;
208
211
  align-content: center;
@@ -210,12 +213,12 @@ svg[data-v-abaeb064] {
210
213
  text-box-edge: cap alphabetic;
211
214
  }
212
215
  }
213
- [hidden][data-v-8b3c5fb3] {
216
+ [hidden][data-v-03720dc1] {
214
217
  display: none;
215
218
  }
216
219
 
217
220
  /* A component that sets its display still honours the hidden attribute on its root. */
218
- [data-component~="ui-avatar"][hidden][data-v-8b3c5fb3] {
221
+ [data-component~="ui-avatar"][hidden][data-v-03720dc1] {
219
222
  display: none;
220
223
  }
221
224
 
@@ -353,7 +356,7 @@ svg[data-v-abaeb064] {
353
356
  syntax: "*";
354
357
  inherits: false;
355
358
  }
356
- [data-component~="ui-badge"][data-v-c96818e7] {
359
+ [data-component~="ui-badge"][data-v-4d2f1396] {
357
360
  --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
358
361
  --_badge-text: var(--ui-text-secondary);
359
362
  /* Sit between the soft fill and its stronger theme ink. */
@@ -399,27 +402,27 @@ svg[data-v-abaeb064] {
399
402
 
400
403
  /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
401
404
  text stays in the DOM for accessible names and consumers' selected values. */
402
- .label[data-v-c96818e7] {
405
+ .label[data-v-4d2f1396] {
403
406
  display: block;
404
407
  min-inline-size: 0;
405
408
  overflow: hidden;
406
409
  text-overflow: ellipsis;
407
410
  }
408
- .label[data-v-c96818e7]:empty {
411
+ .label[data-v-4d2f1396]:empty {
409
412
  display: none;
410
413
  }
411
414
 
412
415
  /* Icon content has its own flex item so label ellipsis never clips its strokes. */
413
- .icon[data-v-c96818e7] {
416
+ .icon[data-v-4d2f1396] {
414
417
  display: inline-flex;
415
418
  align-items: center;
416
419
  justify-content: center;
417
420
  flex: none;
418
421
  }
419
- .icon[data-v-c96818e7]:empty {
422
+ .icon[data-v-4d2f1396]:empty {
420
423
  display: none;
421
424
  }
422
- .icon svg[data-v-c96818e7-s] {
425
+ .icon svg[data-v-4d2f1396-s] {
423
426
  display: block;
424
427
  inline-size: 1em;
425
428
  block-size: 1em;
@@ -427,38 +430,39 @@ svg[data-v-abaeb064] {
427
430
  }
428
431
 
429
432
  /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
430
- .label svg[data-v-c96818e7-s] {
433
+ .label svg[data-v-4d2f1396-s] {
431
434
  inline-size: 1em;
432
435
  block-size: 1em;
433
436
  vertical-align: middle;
434
437
  margin-inline-end: var(--ui-space-1);
435
438
  }
436
- .label[data-v-c96818e7]:has(svg) {
439
+ .label[data-v-4d2f1396]:has(svg) {
437
440
  text-box-trim: none;
438
441
  }
439
442
 
440
- /* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
441
- trimming its label separately keeps the glyph centered without changing adjacent lines. */
443
+ /* Center the capital/baseline text box, while clipping only inline overflow for ellipsis.
444
+ Vertical ink remains visible so trimming never cuts off ascenders or descenders. */
442
445
  @supports (text-box-trim: trim-both) {
443
- [data-component~="ui-badge"][data-v-c96818e7] {
446
+ [data-component~="ui-badge"][data-v-4d2f1396] {
444
447
  display: inline-block;
445
448
  min-block-size: var(--ui-badge-min-block-size, 1.5rem);
446
449
  text-align: center;
447
450
  align-content: center;
448
- text-box-trim: trim-both;
449
- text-box-edge: text;
451
+ text-box-trim: none;
450
452
  }
451
- [data-component~="ui-badge"][data-v-c96818e7]:has(.icon:not(:empty)),
452
- [data-component~="ui-badge"][data-v-c96818e7]:has(.label svg) {
453
+ [data-component~="ui-badge"][data-v-4d2f1396]:has(.icon:not(:empty)),
454
+ [data-component~="ui-badge"][data-v-4d2f1396]:has(.label svg) {
453
455
  display: inline-flex;
454
456
  text-box-trim: none;
455
457
  }
456
- [data-component~="ui-badge"]:has(.icon:not(:empty)) .label[data-v-c96818e7] {
458
+ .label[data-v-4d2f1396]:not(:has(svg)) {
457
459
  text-box-trim: trim-both;
458
- text-box-edge: text;
460
+ text-box-edge: cap alphabetic;
461
+ overflow-x: clip;
462
+ overflow-y: visible;
459
463
  }
460
464
  }
461
- [data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-c96818e7] {
465
+ [data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-4d2f1396] {
462
466
  box-sizing: border-box;
463
467
  min-inline-size: 1rem;
464
468
  min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -466,52 +470,52 @@ svg[data-v-abaeb064] {
466
470
  font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
467
471
  line-height: var(--ui-badge-line-height, 1);
468
472
  }
469
- [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-c96818e7] {
473
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-4d2f1396] {
470
474
  --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
471
475
  --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
472
476
  --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
473
477
  }
474
- [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-c96818e7] {
478
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-4d2f1396] {
475
479
  --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
476
480
  --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
477
481
  --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
478
482
  }
479
- [data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-c96818e7] {
483
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-4d2f1396] {
480
484
  --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
481
485
  --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
482
486
  --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
483
487
  }
484
- [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-c96818e7] {
488
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-4d2f1396] {
485
489
  --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
486
490
  --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
487
491
  --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
488
492
  }
489
- [data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-c96818e7] {
493
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-4d2f1396] {
490
494
  --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
491
495
  --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
492
496
  --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
493
497
  }
494
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-c96818e7] {
498
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-4d2f1396] {
495
499
  --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
496
500
  --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
497
501
  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
498
502
  }
499
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-c96818e7] {
503
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-4d2f1396] {
500
504
  --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
501
505
  --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
502
506
  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
503
507
  }
504
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-c96818e7] {
508
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-4d2f1396] {
505
509
  --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
506
510
  --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
507
511
  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
508
512
  }
509
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-c96818e7] {
513
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-4d2f1396] {
510
514
  --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
511
515
  --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
512
516
  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
513
517
  }
514
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-c96818e7] {
518
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-4d2f1396] {
515
519
  --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
516
520
  --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
517
521
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -519,12 +523,47 @@ svg[data-v-abaeb064] {
519
523
 
520
524
  /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
521
525
  invalid while the hook is unset. */
522
- [data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-c96818e7] {
526
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-4d2f1396] {
523
527
  --_badge-color-surface: var(--_badge-color-ink);
524
528
  --_badge-color-border: var(--_badge-color-ink);
525
529
  --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
526
530
  }
527
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-c96818e7] {
531
+
532
+ /* A translucent inverse surface picks up its filled control's tone. Deepen the tone ink
533
+ toward the theme text to retain contrast against that composed surface. */
534
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-v-4d2f1396] {
535
+ --_badge-color-surface: color-mix(
536
+ in srgb,
537
+ color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%,
538
+ transparent
539
+ );
540
+ --_badge-color-border: var(--_badge-color-surface);
541
+ --_badge-color-text: color-mix(in srgb, var(--_badge-color-ink) 85%, var(--ui-text-primary));
542
+ --_badge-outline-surface: var(
543
+ --ui-badge-surface,
544
+ var(--_badge-color-surface, color-mix(in srgb, var(--_badge-text) 88%, transparent))
545
+ );
546
+ border-color: var(
547
+ --ui-badge-border,
548
+ var(--_badge-color-border, color-mix(in srgb, var(--_badge-text) 88%, transparent))
549
+ );
550
+ color: var(
551
+ --ui-badge-text,
552
+ var(--_badge-color-text, color-mix(in srgb, var(--_badge-surface) 85%, var(--ui-text-primary)))
553
+ );
554
+ /* Paint each translucent layer once, including the border, without a bright double-painted ring. */
555
+ background-clip: padding-box;
556
+ }
557
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"][data-v-4d2f1396] {
558
+ box-shadow: var(--ui-shadow-sm);
559
+ }
560
+
561
+ /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
562
+ surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
563
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"][data-v-4d2f1396] {
564
+ color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
565
+ }
566
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-4d2f1396] {
528
567
  --_badge-surface: var(--ui-surface-default);
529
568
  --_badge-border: var(--ui-border-strong);
530
569
  --_badge-text: var(--ui-text-secondary);
@@ -532,29 +571,29 @@ svg[data-v-abaeb064] {
532
571
  --_badge-color-surface: initial;
533
572
  --_badge-color-border: var(--_badge-color-ink);
534
573
  }
535
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-c96818e7] {
574
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-4d2f1396] {
536
575
  --_badge-border: var(--ui-accent-solid);
537
576
  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
538
577
  }
539
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-c96818e7] {
578
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-4d2f1396] {
540
579
  --_badge-border: var(--ui-danger-solid);
541
580
  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
542
581
  }
543
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-c96818e7] {
582
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-4d2f1396] {
544
583
  --_badge-border: var(--ui-success-solid);
545
584
  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
546
585
  }
547
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-c96818e7] {
586
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-4d2f1396] {
548
587
  --_badge-border: var(--ui-warning-solid);
549
588
  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
550
589
  }
551
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-c96818e7] {
590
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-4d2f1396] {
552
591
  --_badge-border: var(--ui-info-solid);
553
592
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
554
593
  }
555
594
 
556
595
  /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
557
- [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-c96818e7] {
596
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-4d2f1396] {
558
597
  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
559
598
  display: inline-flex;
560
599
  box-sizing: border-box;
@@ -567,23 +606,29 @@ svg[data-v-abaeb064] {
567
606
  border-radius: var(--ui-radius-md);
568
607
  text-box-trim: none;
569
608
  }
570
- [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-c96818e7] {
609
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-4d2f1396] {
571
610
  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
572
611
  }
573
- [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-c96818e7] {
612
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"][data-v-4d2f1396] {
613
+ --_badge-square-size: var(
614
+ --ui-badge-square-size,
615
+ calc(var(--ui-space-4) * 2 + var(--ui-space-2))
616
+ );
617
+ }
618
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-4d2f1396] {
574
619
  display: inline-flex;
575
620
  align-items: center;
576
621
  justify-content: center;
577
622
  }
578
- [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-c96818e7-s] {
623
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-4d2f1396-s] {
579
624
  margin-inline-end: 0;
580
625
  }
581
- [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-c96818e7]:empty {
626
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-4d2f1396]:empty {
582
627
  display: none;
583
628
  }
584
629
 
585
630
  /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
586
- [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-v-c96818e7] {
631
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-v-4d2f1396] {
587
632
  --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
588
633
  display: inline-flex;
589
634
  flex: none;
@@ -595,25 +640,40 @@ svg[data-v-abaeb064] {
595
640
  border-radius: var(--ui-radius-round);
596
641
  text-box-trim: none;
597
642
  }
598
- [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"][data-v-c96818e7] {
643
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"][data-v-4d2f1396] {
599
644
  --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
600
645
  }
601
- [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-c96818e7] {
646
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"][data-v-4d2f1396] {
647
+ --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) * 2));
648
+ }
649
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-4d2f1396] {
602
650
  display: inline-flex;
603
651
  align-items: center;
604
652
  justify-content: center;
605
653
  line-height: 1;
606
654
  text-box-trim: none;
607
655
  }
608
- [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label svg[data-v-c96818e7-s] {
656
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label svg[data-v-4d2f1396-s] {
609
657
  margin-inline-end: 0;
610
658
  }
611
- [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-c96818e7]:empty {
659
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-4d2f1396]:empty {
612
660
  display: none;
613
661
  }
614
662
 
663
+ /* Center capital and numeral ink, rather than the font's ascent/descent line box.
664
+ Icon labels retain flex geometry; untrimmed browsers keep that fallback too. */
665
+ @supports (text-box-trim: trim-both) {
666
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-4d2f1396]:not(:has(svg)),
667
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-4d2f1396]:not(:has(svg)) {
668
+ display: block;
669
+ text-box-trim: trim-both;
670
+ text-box-edge: cap alphabetic;
671
+ overflow: visible;
672
+ }
673
+ }
674
+
615
675
  /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
616
- [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-c96818e7] {
676
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-4d2f1396] {
617
677
  position: relative;
618
678
  box-sizing: border-box;
619
679
  flex: none;
@@ -625,7 +685,7 @@ svg[data-v-abaeb064] {
625
685
  border-radius: var(--ui-radius-round);
626
686
  text-box-trim: none;
627
687
  }
628
- [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-c96818e7] {
688
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-4d2f1396] {
629
689
  position: absolute;
630
690
  inline-size: 1px;
631
691
  block-size: 1px;
@@ -636,7 +696,7 @@ svg[data-v-abaeb064] {
636
696
 
637
697
  /* The clipped point needs an inset surface over an outer border-colour shape: a native border
638
698
  has no diagonal edge to follow. Keep this edge for every tag variant. */
639
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c96818e7] {
699
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4d2f1396] {
640
700
  --_badge-point: var(--ui-badge-point, var(--ui-space-2));
641
701
 
642
702
  position: relative;
@@ -653,7 +713,7 @@ svg[data-v-abaeb064] {
653
713
  0 100%
654
714
  );
655
715
  }
656
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c96818e7]::before {
716
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4d2f1396]::before {
657
717
  content: "";
658
718
  position: absolute;
659
719
  inset: 0;
@@ -668,34 +728,37 @@ svg[data-v-abaeb064] {
668
728
  );
669
729
  pointer-events: none;
670
730
  }
671
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c96818e7]:dir(rtl) {
731
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"][data-v-4d2f1396] {
732
+ background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
733
+ }
734
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4d2f1396]:dir(rtl) {
672
735
  padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
673
736
  padding-inline-start: calc(
674
737
  var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
675
738
  );
676
739
  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
677
740
  }
678
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c96818e7]:dir(rtl)::before {
741
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4d2f1396]:dir(rtl)::before {
679
742
  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
680
743
  }
681
744
  @media (forced-colors: active) {
682
- [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-c96818e7] {
745
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-4d2f1396] {
683
746
  forced-color-adjust: none;
684
747
  border-color: CanvasText;
685
748
  background: CanvasText;
686
749
  }
687
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c96818e7] {
750
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4d2f1396] {
688
751
  forced-color-adjust: none;
689
752
  background: CanvasText;
690
753
  color: CanvasText;
691
754
  }
692
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c96818e7]::before {
755
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4d2f1396]::before {
693
756
  background: Canvas;
694
757
  }
695
758
  }
696
759
 
697
760
  /* A component that sets its display still honours the hidden attribute on its root. */
698
- [data-component~="ui-badge"][hidden][data-v-c96818e7] {
761
+ [data-component~="ui-badge"][hidden][data-v-4d2f1396] {
699
762
  display: none;
700
763
  }
701
764
 
@@ -5718,7 +5781,7 @@ svg[data-v-b66a1661-s] {
5718
5781
  padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
5719
5782
  a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
5720
5783
  stay their own. */
5721
- [data-component~="ui-list-item"][data-v-bb9ba09d] {
5784
+ [data-component~="ui-list-item"][data-v-6c3bc8f3] {
5722
5785
  /* Hooks do not inherit, so the parts below read them from the root. */
5723
5786
  --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
5724
5787
 
@@ -5743,97 +5806,106 @@ svg[data-v-b66a1661-s] {
5743
5806
  background-color var(--ui-motion-fast) var(--ui-motion-ease),
5744
5807
  border-color var(--ui-motion-fast) var(--ui-motion-ease);
5745
5808
  }
5746
- [data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-bb9ba09d] {
5809
+ [data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-6c3bc8f3] {
5747
5810
  padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
5748
5811
  padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
5749
5812
  border: var(--ui-border-width) solid var(--ui-border-strong);
5750
5813
  border-radius: var(--ui-radius-lg);
5751
5814
  background: var(--ui-surface-raised);
5752
5815
  }
5753
- [data-component~="ui-list-item"][data-v-bb9ba09d]:where(:has(.title a[href])):hover {
5816
+ [data-component~="ui-list-item"][data-v-6c3bc8f3]:where(:has(.title a[href])):hover {
5754
5817
  background: var(--ui-selection-surface);
5755
5818
  }
5756
- [data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-bb9ba09d]:where(:has(.title
5819
+ [data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-6c3bc8f3]:where(:has(.title
5757
5820
  a[href])):hover {
5758
5821
  border-color: var(--ui-border-strong);
5759
5822
  }
5760
- [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-bb9ba09d] {
5823
+ [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-6c3bc8f3] {
5761
5824
  background: var(--ui-selection-surface);
5762
5825
  }
5763
- [data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-bb9ba09d] {
5826
+ [data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-6c3bc8f3] {
5764
5827
  background: var(--ui-selection-surface);
5765
5828
  color: var(--ui-selection-text);
5766
5829
  }
5767
- [data-component~="ui-list-item"][data-v-bb9ba09d]:has(.title a[href]:focus-visible) {
5830
+ [data-component~="ui-list-item"][data-v-6c3bc8f3]:has(.title a[href]:focus-visible) {
5768
5831
  box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
5769
5832
  }
5770
- .leading[data-v-bb9ba09d],
5771
- .trailing[data-v-bb9ba09d] {
5833
+ .leading[data-v-6c3bc8f3],
5834
+ .trailing[data-v-6c3bc8f3] {
5772
5835
  display: inline-flex;
5773
5836
  flex: none;
5774
5837
  align-items: center;
5775
5838
  gap: var(--ui-space-2);
5776
5839
  }
5777
- .leading[data-v-bb9ba09d] {
5840
+ .leading[data-v-6c3bc8f3] {
5778
5841
  color: var(--ui-text-muted);
5779
5842
  font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
5780
5843
  }
5781
- [data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-bb9ba09d] {
5844
+ [data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-6c3bc8f3] {
5782
5845
  color: var(--ui-selection-text);
5783
5846
  }
5784
5847
 
5785
5848
  /* An explicitly independent leading control sits above the stretched row link. */
5786
- [data-component~="ui-list-item"][data-ui-list-item-state~="leadingInteractive"] .leading[data-v-bb9ba09d] {
5849
+ [data-component~="ui-list-item"][data-ui-list-item-state~="leadingInteractive"] .leading[data-v-6c3bc8f3] {
5787
5850
  position: relative;
5788
5851
  z-index: 1;
5789
5852
  }
5790
5853
 
5791
5854
  /* Trailing controls take their own clicks, above the title link's stretched hit area. */
5792
- .trailing[data-v-bb9ba09d] {
5855
+ .trailing[data-v-6c3bc8f3] {
5793
5856
  position: relative;
5794
5857
  z-index: 1;
5795
5858
  color: var(--ui-text-muted);
5796
5859
  font-size: var(--ui-font-size-sm);
5797
5860
  }
5798
- .content[data-v-bb9ba09d] {
5861
+ .content[data-v-6c3bc8f3] {
5799
5862
  display: flex;
5800
5863
  flex: 1;
5801
5864
  flex-direction: column;
5802
5865
  gap: var(--ui-space-0-5, 2px);
5803
5866
  min-inline-size: 0;
5804
5867
  }
5805
- .title[data-v-bb9ba09d],
5806
- .description[data-v-bb9ba09d] {
5868
+ .title[data-v-6c3bc8f3],
5869
+ .description[data-v-6c3bc8f3] {
5807
5870
  display: block;
5808
5871
  min-inline-size: 0;
5809
5872
  overflow: hidden;
5810
5873
  text-overflow: ellipsis;
5811
5874
  white-space: nowrap;
5812
5875
  }
5813
- [data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .title[data-v-bb9ba09d],
5814
- [data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description[data-v-bb9ba09d] {
5876
+ [data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .title[data-v-6c3bc8f3],
5877
+ [data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description[data-v-6c3bc8f3] {
5815
5878
  white-space: normal;
5816
5879
  overflow-wrap: anywhere;
5817
5880
  }
5818
- .title[data-v-bb9ba09d] {
5881
+ .title[data-v-6c3bc8f3] {
5819
5882
  font-size: var(--ui-font-size-md);
5820
5883
  font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
5821
5884
  line-height: var(--ui-line-height-tight);
5822
5885
  }
5823
- .description[data-v-bb9ba09d] {
5886
+
5887
+ /* Keep identity and disclosure marks beside the first line, even with a long description. */
5888
+ [data-component~="ui-list-item"][data-ui-list-item-state~="align=title"][data-v-6c3bc8f3] {
5889
+ align-items: flex-start;
5890
+ }
5891
+ [data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .leading[data-v-6c3bc8f3],
5892
+ [data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .trailing[data-v-6c3bc8f3] {
5893
+ min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
5894
+ }
5895
+ .description[data-v-6c3bc8f3] {
5824
5896
  color: var(--ui-text-muted);
5825
5897
  font-size: var(--ui-font-size-sm);
5826
5898
  line-height: var(--ui-line-height-tight);
5827
5899
  }
5828
- .title > a[data-v-bb9ba09d-s] {
5900
+ .title > a[data-v-6c3bc8f3-s] {
5829
5901
  color: inherit;
5830
5902
  text-decoration: none;
5831
5903
  }
5832
- .title > a[data-v-bb9ba09d-s]:focus-visible {
5904
+ .title > a[data-v-6c3bc8f3-s]:focus-visible {
5833
5905
  outline: none;
5834
5906
  box-shadow: none;
5835
5907
  }
5836
- .title > a[href][data-v-bb9ba09d-s]::after {
5908
+ .title > a[href][data-v-6c3bc8f3-s]::after {
5837
5909
  position: absolute;
5838
5910
  inset: 0;
5839
5911
  border-radius: inherit;
@@ -5841,24 +5913,24 @@ svg[data-v-b66a1661-s] {
5841
5913
  }
5842
5914
 
5843
5915
  /* An unused region takes no space. */
5844
- .leading[data-v-bb9ba09d]:empty,
5845
- .description[data-v-bb9ba09d]:empty,
5846
- .trailing[data-v-bb9ba09d]:empty {
5916
+ .leading[data-v-6c3bc8f3]:empty,
5917
+ .description[data-v-6c3bc8f3]:empty,
5918
+ .trailing[data-v-6c3bc8f3]:empty {
5847
5919
  display: none;
5848
5920
  }
5849
5921
  @media (forced-colors: active) {
5850
- [data-component~="ui-list-item"][data-v-bb9ba09d]:has(a:focus-visible) {
5922
+ [data-component~="ui-list-item"][data-v-6c3bc8f3]:has(a:focus-visible) {
5851
5923
  outline: var(--ui-focus-width) solid Highlight;
5852
5924
  outline-offset: calc(-1 * var(--ui-focus-width));
5853
5925
  }
5854
- :is([data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-bb9ba09d], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-bb9ba09d]):not(:has(a:focus-visible)) {
5926
+ :is([data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-6c3bc8f3], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-6c3bc8f3]):not(:has(a:focus-visible)) {
5855
5927
  outline: var(--ui-border-width) solid Highlight;
5856
5928
  outline-offset: calc(-1 * var(--ui-border-width));
5857
5929
  }
5858
5930
  }
5859
5931
 
5860
5932
  /* A component that sets its display still honours the hidden attribute on its root. */
5861
- [data-component~="ui-list-item"][hidden][data-v-bb9ba09d] {
5933
+ [data-component~="ui-list-item"][hidden][data-v-6c3bc8f3] {
5862
5934
  display: none;
5863
5935
  }
5864
5936