@threadlabs/looma 0.26.15 → 0.26.17

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 (17) hide show
  1. package/components/ui-meter/ui-meter.html +59 -8
  2. package/components/ui-text/ui-text.html +15 -0
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/styles/ui-meter.css +34 -0
  6. package/styles/ui-text.css +16 -0
  7. package/vanilla/UiMeter.d.ts +2 -0
  8. package/vanilla/UiMeter.js +136 -38
  9. package/vanilla/UiText.d.ts +1 -0
  10. package/vanilla/UiText.js +25 -25
  11. package/vue/UiMeter.d.ts +27 -0
  12. package/vue/UiMeter.vue +514 -77
  13. package/vue/UiText.d.ts +9 -0
  14. package/vue/UiText.vue +41 -0
  15. package/vue/chunks/UiMeter.js +271 -57
  16. package/vue/chunks/UiText.js +43 -1
  17. package/vue/components.css +86 -49
package/vue/chunks/UiText.js CHANGED
@@ -10,6 +10,7 @@ var _hoisted_1 = [
10
10
  "data-grow",
11
11
  "data-size",
12
12
  "data-tone",
13
+ "data-trim",
13
14
  "data-truncate",
14
15
  "data-variant",
15
16
  "data-weight",
@@ -23,6 +24,7 @@ var _hoisted_2 = [
23
24
  "data-grow",
24
25
  "data-size",
25
26
  "data-tone",
27
+ "data-trim",
26
28
  "data-truncate",
27
29
  "data-variant",
28
30
  "data-weight",
@@ -36,6 +38,7 @@ var _hoisted_3 = [
36
38
  "data-grow",
37
39
  "data-size",
38
40
  "data-tone",
41
+ "data-trim",
39
42
  "data-truncate",
40
43
  "data-variant",
41
44
  "data-weight",
@@ -49,6 +52,7 @@ var _hoisted_4 = [
49
52
  "data-grow",
50
53
  "data-size",
51
54
  "data-tone",
55
+ "data-trim",
52
56
  "data-truncate",
53
57
  "data-variant",
54
58
  "data-weight",
@@ -62,6 +66,7 @@ var _hoisted_5 = [
62
66
  "data-grow",
63
67
  "data-size",
64
68
  "data-tone",
69
+ "data-trim",
65
70
  "data-truncate",
66
71
  "data-variant",
67
72
  "data-weight",
@@ -75,6 +80,7 @@ var _hoisted_6 = [
75
80
  "data-grow",
76
81
  "data-size",
77
82
  "data-tone",
83
+ "data-trim",
78
84
  "data-truncate",
79
85
  "data-variant",
80
86
  "data-weight",
@@ -88,6 +94,7 @@ var _hoisted_7 = [
88
94
  "data-grow",
89
95
  "data-size",
90
96
  "data-tone",
97
+ "data-trim",
91
98
  "data-truncate",
92
99
  "data-variant",
93
100
  "data-weight",
@@ -101,6 +108,7 @@ var _hoisted_8 = [
101
108
  "data-grow",
102
109
  "data-size",
103
110
  "data-tone",
111
+ "data-trim",
104
112
  "data-truncate",
105
113
  "data-variant",
106
114
  "data-weight",
@@ -114,6 +122,7 @@ var _hoisted_9 = [
114
122
  "data-grow",
115
123
  "data-size",
116
124
  "data-tone",
125
+ "data-trim",
117
126
  "data-truncate",
118
127
  "data-variant",
119
128
  "data-weight",
@@ -127,6 +136,7 @@ var _hoisted_10 = [
127
136
  "data-grow",
128
137
  "data-size",
129
138
  "data-tone",
139
+ "data-trim",
130
140
  "data-truncate",
131
141
  "data-variant",
132
142
  "data-weight",
@@ -140,6 +150,7 @@ var _hoisted_11 = [
140
150
  "data-grow",
141
151
  "data-size",
142
152
  "data-tone",
153
+ "data-trim",
143
154
  "data-truncate",
144
155
  "data-variant",
145
156
  "data-weight",
@@ -176,6 +187,10 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
176
187
  type: null,
177
188
  default: "default"
178
189
  },
190
+ trim: {
191
+ type: null,
192
+ default: false
193
+ },
179
194
  truncate: {
180
195
  type: null,
181
196
  default: false
@@ -287,6 +302,16 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
287
302
  ],
288
303
  default: "default"
289
304
  },
305
+ trim: {
306
+ type: {
307
+ kind: "terminal",
308
+ name: "boolean"
309
+ },
310
+ required: false,
311
+ target: { attribute: "trim" },
312
+ description: "Removes extra font space above the capital height and below the baseline, for compact headings and labels. Prose keeps its existing line-edge space by\n default. Browsers without text-box-trim retain normal font metrics.",
313
+ default: false
314
+ },
290
315
  truncate: {
291
316
  type: {
292
317
  kind: "terminal",
@@ -348,6 +373,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
348
373
  grow: false,
349
374
  size: "inherit",
350
375
  tone: "default",
376
+ trim: false,
351
377
  truncate: false,
352
378
  variant: "body",
353
379
  weight: "inherit",
@@ -378,6 +404,10 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
378
404
  kind: "terminal",
379
405
  name: "keyword"
380
406
  }, false, "tone", acceptedProps),
407
+ trim: checkedProp(props["trim"], {
408
+ kind: "terminal",
409
+ name: "boolean"
410
+ }, false, "trim", acceptedProps),
381
411
  truncate: checkedProp(props["truncate"], {
382
412
  kind: "terminal",
383
413
  name: "boolean"
@@ -427,6 +457,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
427
457
  checkedProps.value.grow && "grow",
428
458
  checkedProps.value.size && "size",
429
459
  checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
460
+ checkedProps.value.trim && "trim",
430
461
  checkedProps.value.tone && "tone",
431
462
  checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
432
463
  checkedProps.value.weight && "weight",
@@ -452,6 +483,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
452
483
  "data-grow": reflectedProp("grow", "grow", checkedProps.value.grow, void 0, false),
453
484
  "data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
454
485
  "data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
486
+ "data-trim": reflectedProp("trim", "trim", checkedProps.value.trim, void 0, false),
455
487
  "data-truncate": reflectedProp("truncate", "truncate", checkedProps.value.truncate, void 0, false),
456
488
  "data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
457
489
  "data-weight": reflectedProp("weight", "weight", checkedProps.value.weight, void 0, false),
@@ -471,6 +503,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
471
503
  "data-grow": reflectedProp("grow", "grow", checkedProps.value.grow, void 0, false),
472
504
  "data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
473
505
  "data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
506
+ "data-trim": reflectedProp("trim", "trim", checkedProps.value.trim, void 0, false),
474
507
  "data-truncate": reflectedProp("truncate", "truncate", checkedProps.value.truncate, void 0, false),
475
508
  "data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
476
509
  "data-weight": reflectedProp("weight", "weight", checkedProps.value.weight, void 0, false),
@@ -490,6 +523,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
490
523
  "data-grow": reflectedProp("grow", "grow", checkedProps.value.grow, void 0, false),
491
524
  "data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
492
525
  "data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
526
+ "data-trim": reflectedProp("trim", "trim", checkedProps.value.trim, void 0, false),
493
527
  "data-truncate": reflectedProp("truncate", "truncate", checkedProps.value.truncate, void 0, false),
494
528
  "data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
495
529
  "data-weight": reflectedProp("weight", "weight", checkedProps.value.weight, void 0, false),
@@ -509,6 +543,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
509
543
  "data-grow": reflectedProp("grow", "grow", checkedProps.value.grow, void 0, false),
510
544
  "data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
511
545
  "data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
546
+ "data-trim": reflectedProp("trim", "trim", checkedProps.value.trim, void 0, false),
512
547
  "data-truncate": reflectedProp("truncate", "truncate", checkedProps.value.truncate, void 0, false),
513
548
  "data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
514
549
  "data-weight": reflectedProp("weight", "weight", checkedProps.value.weight, void 0, false),
@@ -528,6 +563,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
528
563
  "data-grow": reflectedProp("grow", "grow", checkedProps.value.grow, void 0, false),
529
564
  "data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
530
565
  "data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
566
+ "data-trim": reflectedProp("trim", "trim", checkedProps.value.trim, void 0, false),
531
567
  "data-truncate": reflectedProp("truncate", "truncate", checkedProps.value.truncate, void 0, false),
532
568
  "data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
533
569
  "data-weight": reflectedProp("weight", "weight", checkedProps.value.weight, void 0, false),
@@ -547,6 +583,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
547
583
  "data-grow": reflectedProp("grow", "grow", checkedProps.value.grow, void 0, false),
548
584
  "data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
549
585
  "data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
586
+ "data-trim": reflectedProp("trim", "trim", checkedProps.value.trim, void 0, false),
550
587
  "data-truncate": reflectedProp("truncate", "truncate", checkedProps.value.truncate, void 0, false),
551
588
  "data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
552
589
  "data-weight": reflectedProp("weight", "weight", checkedProps.value.weight, void 0, false),
@@ -566,6 +603,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
566
603
  "data-grow": reflectedProp("grow", "grow", checkedProps.value.grow, void 0, false),
567
604
  "data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
568
605
  "data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
606
+ "data-trim": reflectedProp("trim", "trim", checkedProps.value.trim, void 0, false),
569
607
  "data-truncate": reflectedProp("truncate", "truncate", checkedProps.value.truncate, void 0, false),
570
608
  "data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
571
609
  "data-weight": reflectedProp("weight", "weight", checkedProps.value.weight, void 0, false),
@@ -585,6 +623,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
585
623
  "data-grow": reflectedProp("grow", "grow", checkedProps.value.grow, void 0, false),
586
624
  "data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
587
625
  "data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
626
+ "data-trim": reflectedProp("trim", "trim", checkedProps.value.trim, void 0, false),
588
627
  "data-truncate": reflectedProp("truncate", "truncate", checkedProps.value.truncate, void 0, false),
589
628
  "data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
590
629
  "data-weight": reflectedProp("weight", "weight", checkedProps.value.weight, void 0, false),
@@ -604,6 +643,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
604
643
  "data-grow": reflectedProp("grow", "grow", checkedProps.value.grow, void 0, false),
605
644
  "data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
606
645
  "data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
646
+ "data-trim": reflectedProp("trim", "trim", checkedProps.value.trim, void 0, false),
607
647
  "data-truncate": reflectedProp("truncate", "truncate", checkedProps.value.truncate, void 0, false),
608
648
  "data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
609
649
  "data-weight": reflectedProp("weight", "weight", checkedProps.value.weight, void 0, false),
@@ -623,6 +663,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
623
663
  "data-grow": reflectedProp("grow", "grow", checkedProps.value.grow, void 0, false),
624
664
  "data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
625
665
  "data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
666
+ "data-trim": reflectedProp("trim", "trim", checkedProps.value.trim, void 0, false),
626
667
  "data-truncate": reflectedProp("truncate", "truncate", checkedProps.value.truncate, void 0, false),
627
668
  "data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
628
669
  "data-weight": reflectedProp("weight", "weight", checkedProps.value.weight, void 0, false),
@@ -642,6 +683,7 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
642
683
  "data-grow": reflectedProp("grow", "grow", checkedProps.value.grow, void 0, false),
643
684
  "data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
644
685
  "data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
686
+ "data-trim": reflectedProp("trim", "trim", checkedProps.value.trim, void 0, false),
645
687
  "data-truncate": reflectedProp("truncate", "truncate", checkedProps.value.truncate, void 0, false),
646
688
  "data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
647
689
  "data-weight": reflectedProp("weight", "weight", checkedProps.value.weight, void 0, false),
@@ -654,6 +696,6 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
654
696
  }]]);
655
697
  };
656
698
  }
657
- }), [["__scopeId", "data-v-7090f745"]]);
699
+ }), [["__scopeId", "data-v-a12d976f"]]);
658
700
  //#endregion
659
701
  export { UiText_default as t };
package/vue/components.css CHANGED
@@ -6532,7 +6532,7 @@ svg[data-v-219fa683-s] {
6532
6532
  syntax: "*";
6533
6533
  inherits: false;
6534
6534
  }
6535
- [data-component~="ui-meter"][data-v-76fefbc5] {
6535
+ [data-component~="ui-meter"][data-v-c308c037] {
6536
6536
  --_meter-fill: var(--ui-text-muted);
6537
6537
 
6538
6538
  display: inline-block;
@@ -6548,30 +6548,30 @@ svg[data-v-219fa683-s] {
6548
6548
  /* Unseen until forced colours draw it, where the track's own colour is gone. */
6549
6549
  outline: var(--ui-border-width) solid transparent;
6550
6550
  }
6551
- [data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-v-76fefbc5] {
6551
+ [data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-v-c308c037] {
6552
6552
  inline-size: var(--ui-meter-inline-size, 5rem);
6553
6553
  block-size: var(--ui-space-1);
6554
6554
  }
6555
- .fill[data-v-76fefbc5] {
6555
+ .fill[data-v-c308c037] {
6556
6556
  display: block;
6557
6557
  block-size: 100%;
6558
6558
  background-color: var(--_meter-fill);
6559
6559
  background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.26), transparent 70%);
6560
6560
  box-shadow: inset 0 1px rgb(255 255 255 / 0.26), inset 0 -1px rgb(0 0 0 / 0.1);
6561
6561
  }
6562
- [data-component~="ui-meter"][data-ui-meter-state~="tone=accent"][data-v-76fefbc5] {
6562
+ [data-component~="ui-meter"][data-ui-meter-state~="tone=accent"][data-v-c308c037] {
6563
6563
  --_meter-fill: var(--ui-accent-solid);
6564
6564
  }
6565
- [data-component~="ui-meter"][data-ui-meter-state~="tone=info"][data-v-76fefbc5] {
6565
+ [data-component~="ui-meter"][data-ui-meter-state~="tone=info"][data-v-c308c037] {
6566
6566
  --_meter-fill: var(--ui-info-solid);
6567
6567
  }
6568
- [data-component~="ui-meter"][data-ui-meter-state~="tone=success"][data-v-76fefbc5] {
6568
+ [data-component~="ui-meter"][data-ui-meter-state~="tone=success"][data-v-c308c037] {
6569
6569
  --_meter-fill: var(--ui-success-solid);
6570
6570
  }
6571
- [data-component~="ui-meter"][data-ui-meter-state~="tone=warning"][data-v-76fefbc5] {
6571
+ [data-component~="ui-meter"][data-ui-meter-state~="tone=warning"][data-v-c308c037] {
6572
6572
  --_meter-fill: var(--ui-warning-solid);
6573
6573
  }
6574
- [data-component~="ui-meter"][data-ui-meter-state~="tone=danger"][data-v-76fefbc5] {
6574
+ [data-component~="ui-meter"][data-ui-meter-state~="tone=danger"][data-v-c308c037] {
6575
6575
  --_meter-fill: var(--ui-danger-solid);
6576
6576
  }
6577
6577
 
@@ -6583,40 +6583,40 @@ svg[data-v-219fa683-s] {
6583
6583
  The count arrives as an attribute, not an inline custom property (which would add a style
6584
6584
  attribute to every meter), so a continuous meter renders exactly as before, and the rules below
6585
6585
  turn it into a number. That caps it at 12, until attr() with a type reads any count in every engine. */
6586
- [data-component~="ui-meter"][data-ui-meter-segments="2"][data-v-76fefbc5] {
6586
+ [data-component~="ui-meter"][data-ui-meter-segments="2"][data-v-c308c037] {
6587
6587
  --_segments: 2;
6588
6588
  }
6589
- [data-component~="ui-meter"][data-ui-meter-segments="3"][data-v-76fefbc5] {
6589
+ [data-component~="ui-meter"][data-ui-meter-segments="3"][data-v-c308c037] {
6590
6590
  --_segments: 3;
6591
6591
  }
6592
- [data-component~="ui-meter"][data-ui-meter-segments="4"][data-v-76fefbc5] {
6592
+ [data-component~="ui-meter"][data-ui-meter-segments="4"][data-v-c308c037] {
6593
6593
  --_segments: 4;
6594
6594
  }
6595
- [data-component~="ui-meter"][data-ui-meter-segments="5"][data-v-76fefbc5] {
6595
+ [data-component~="ui-meter"][data-ui-meter-segments="5"][data-v-c308c037] {
6596
6596
  --_segments: 5;
6597
6597
  }
6598
- [data-component~="ui-meter"][data-ui-meter-segments="6"][data-v-76fefbc5] {
6598
+ [data-component~="ui-meter"][data-ui-meter-segments="6"][data-v-c308c037] {
6599
6599
  --_segments: 6;
6600
6600
  }
6601
- [data-component~="ui-meter"][data-ui-meter-segments="7"][data-v-76fefbc5] {
6601
+ [data-component~="ui-meter"][data-ui-meter-segments="7"][data-v-c308c037] {
6602
6602
  --_segments: 7;
6603
6603
  }
6604
- [data-component~="ui-meter"][data-ui-meter-segments="8"][data-v-76fefbc5] {
6604
+ [data-component~="ui-meter"][data-ui-meter-segments="8"][data-v-c308c037] {
6605
6605
  --_segments: 8;
6606
6606
  }
6607
- [data-component~="ui-meter"][data-ui-meter-segments="9"][data-v-76fefbc5] {
6607
+ [data-component~="ui-meter"][data-ui-meter-segments="9"][data-v-c308c037] {
6608
6608
  --_segments: 9;
6609
6609
  }
6610
- [data-component~="ui-meter"][data-ui-meter-segments="10"][data-v-76fefbc5] {
6610
+ [data-component~="ui-meter"][data-ui-meter-segments="10"][data-v-c308c037] {
6611
6611
  --_segments: 10;
6612
6612
  }
6613
- [data-component~="ui-meter"][data-ui-meter-segments="11"][data-v-76fefbc5] {
6613
+ [data-component~="ui-meter"][data-ui-meter-segments="11"][data-v-c308c037] {
6614
6614
  --_segments: 11;
6615
6615
  }
6616
- [data-component~="ui-meter"][data-ui-meter-segments="12"][data-v-76fefbc5] {
6616
+ [data-component~="ui-meter"][data-ui-meter-segments="12"][data-v-c308c037] {
6617
6617
  --_segments: 12;
6618
6618
  }
6619
- [data-component~="ui-meter"][data-ui-meter-segments][data-v-76fefbc5] {
6619
+ [data-component~="ui-meter"][data-ui-meter-segments][data-v-c308c037] {
6620
6620
  --_meter-gap: var(--ui-space-1);
6621
6621
  --_meter-period: calc((100% + var(--_meter-gap)) / var(--_segments));
6622
6622
  --_meter-segment: calc(var(--_meter-period) - var(--_meter-gap));
@@ -6627,20 +6627,45 @@ svg[data-v-219fa683-s] {
6627
6627
  transparent 0 var(--_meter-period)
6628
6628
  );
6629
6629
  }
6630
- [data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-ui-meter-segments][data-v-76fefbc5] {
6630
+ [data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-ui-meter-segments][data-v-c308c037] {
6631
6631
  --_meter-gap: var(--ui-space-0-5);
6632
6632
  }
6633
6633
 
6634
+ /* A categorical distribution uses flex ratios, avoiding rounded percentages and retaining
6635
+ identical geometry before hydration. It has no progress mask or growing-value animation. */
6636
+ [data-component~="ui-meter"][data-ui-meter-state~="variant=distribution"][data-v-c308c037] {
6637
+ display: flex;
6638
+ inline-size: 100%;
6639
+ block-size: var(--ui-space-4);
6640
+ gap: var(--ui-space-0-5);
6641
+ }
6642
+ [data-component~="ui-meter"][data-ui-meter-state~="variant=distribution"][size="sm"][data-v-c308c037] {
6643
+ block-size: var(--ui-space-2);
6644
+ }
6645
+ .part[data-v-c308c037] {
6646
+ flex-basis: 0;
6647
+ min-inline-size: 0;
6648
+ block-size: 100%;
6649
+ }
6650
+ @media (forced-colors: active) {
6651
+ .part[data-v-c308c037] {
6652
+ forced-color-adjust: none;
6653
+ background: CanvasText !important;
6654
+ outline: var(--ui-border-width) solid Canvas;
6655
+ outline-offset: calc(-1 * var(--ui-border-width));
6656
+ }
6657
+ }
6658
+
6634
6659
  /* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
6635
6660
  @media (forced-colors: active) {
6636
- .fill[data-v-76fefbc5] {
6661
+ .fill[data-v-c308c037] {
6637
6662
  forced-color-adjust: none;
6638
6663
  background: CanvasText;
6639
6664
  }
6640
6665
 
6641
6666
  /* The mask clips the track's outline, so each segment draws its own: the inset shadow draws the
6642
6667
  top and bottom edges and the gradient the ends. */
6643
- [data-component~="ui-meter"][data-ui-meter-segments][data-v-76fefbc5] {
6668
+ [data-component~="ui-meter"][data-ui-meter-segments][data-v-c308c037] {
6644
6669
  forced-color-adjust: none;
6645
6670
  background: repeating-linear-gradient(
6646
6671
  to right,
@@ -6654,7 +6679,7 @@ svg[data-v-219fa683-s] {
6654
6679
  }
6655
6680
 
6656
6681
  /* A component that sets its display still honours the hidden attribute on its root. */
6657
- [data-component~="ui-meter"][hidden][data-v-76fefbc5] {
6682
+ [data-component~="ui-meter"][hidden][data-v-c308c037] {
6658
6683
  display: none;
6659
6684
  }
6660
6685
 
@@ -8660,10 +8685,10 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
8660
8685
  /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
8661
8686
  text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
8662
8687
  heading. */
8663
- [data-component~="ui-text"][data-ui-text-state~="grow"][data-v-7090f745] {
8688
+ [data-component~="ui-text"][data-ui-text-state~="grow"][data-v-a12d976f] {
8664
8689
  flex: 1;
8665
8690
  }
8666
- [data-component~="ui-text"][data-v-7090f745] {
8691
+ [data-component~="ui-text"][data-v-a12d976f] {
8667
8692
  margin: 0;
8668
8693
  min-inline-size: 0;
8669
8694
  color: var(--ui-text-primary);
@@ -8672,93 +8697,105 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
8672
8697
 
8673
8698
  /* A heading drops the browser's heading size and weight, so size and weight set it as they set
8674
8699
  any text, and inherit keeps the text around it. */
8675
- [data-component~="ui-text"][data-v-7090f745]:is(h2, h3, h4, h5, h6) {
8700
+ [data-component~="ui-text"][data-v-a12d976f]:is(h2, h3, h4, h5, h6) {
8676
8701
  font-size: inherit;
8677
8702
  font-weight: inherit;
8678
8703
  }
8679
- [data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-7090f745] {
8704
+ [data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-a12d976f] {
8680
8705
  font-size: var(--ui-font-size-xs);
8681
8706
  line-height: var(--ui-line-height);
8682
8707
  }
8683
- [data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-7090f745] {
8708
+ [data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-a12d976f] {
8684
8709
  font-size: var(--ui-font-size-sm);
8685
8710
  line-height: var(--ui-line-height);
8686
8711
  }
8687
- [data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-7090f745] {
8712
+ [data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-a12d976f] {
8688
8713
  font-size: var(--ui-font-size-md);
8689
8714
  line-height: var(--ui-line-height);
8690
8715
  }
8691
- [data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-7090f745] {
8716
+ [data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-a12d976f] {
8692
8717
  font-size: var(--ui-font-size-lg);
8693
8718
  line-height: var(--ui-line-height-relaxed);
8694
8719
  }
8695
- [data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-7090f745] {
8720
+
8721
+ /* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
8722
+ [data-component~="ui-text"][data-ui-text-state~="trim"][data-v-a12d976f] {
8723
+ text-box-trim: trim-both;
8724
+ text-box-edge: cap alphabetic;
8725
+ }
8726
+ [data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-a12d976f] {
8696
8727
  color: var(--ui-text-secondary);
8697
8728
  }
8698
- [data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-7090f745] {
8729
+ [data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-a12d976f] {
8699
8730
  color: var(--ui-text-muted);
8700
8731
  }
8701
- [data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-7090f745] {
8732
+ [data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-a12d976f] {
8702
8733
  color: var(--ui-accent-active);
8703
8734
  }
8704
8735
  /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
8705
8736
  in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
8706
- [data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-7090f745] {
8737
+ [data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-a12d976f] {
8707
8738
  color: var(--ui-danger-subtle-text);
8708
8739
  }
8709
- [data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-7090f745] {
8740
+ [data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-a12d976f] {
8710
8741
  color: var(--ui-success-subtle-text);
8711
8742
  }
8712
- [data-component~="ui-text"][data-ui-text-state~="tone=info"][data-v-7090f745] {
8743
+ [data-component~="ui-text"][data-ui-text-state~="tone=info"][data-v-a12d976f] {
8713
8744
  color: var(--ui-info-subtle-text);
8714
8745
  }
8715
- [data-component~="ui-text"][data-ui-text-state~="tone=warning"][data-v-7090f745] {
8746
+ [data-component~="ui-text"][data-ui-text-state~="tone=warning"][data-v-a12d976f] {
8716
8747
  color: var(--ui-warning-subtle-text);
8717
8748
  }
8718
- [data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-7090f745] {
8749
+ [data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-a12d976f] {
8719
8750
  font-weight: var(--ui-font-normal);
8720
8751
  }
8721
- [data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-7090f745] {
8752
+ [data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-a12d976f] {
8722
8753
  font-weight: var(--ui-font-medium);
8723
8754
  }
8724
- [data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-7090f745] {
8755
+ [data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-a12d976f] {
8725
8756
  font-weight: var(--ui-font-semibold);
8726
8757
  }
8727
- [data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-7090f745] {
8758
+ [data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-a12d976f] {
8728
8759
  font-size: var(--ui-font-size-xs);
8729
8760
  font-weight: var(--ui-font-semibold);
8730
8761
  letter-spacing: 0.06em;
8731
8762
  text-transform: uppercase;
8732
8763
  }
8733
- [data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-7090f745] {
8764
+ [data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-a12d976f] {
8734
8765
  font-family: var(--ui-font-family-mono);
8735
8766
  }
8736
8767
 
8737
8768
  /* A link in running text is underlined, so it stands apart from the words around it by more than
8738
8769
  colour. */
8739
- [data-component~="ui-text"] a[data-v-7090f745-s] {
8770
+ [data-component~="ui-text"] a[data-v-a12d976f-s] {
8740
8771
  color: var(--ui-accent-active);
8741
8772
  text-decoration: underline;
8742
8773
  text-decoration-thickness: 0.06em;
8743
8774
  text-underline-offset: 0.18em;
8744
8775
  }
8745
- [data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-7090f745] {
8776
+ [data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-a12d976f] {
8746
8777
  overflow: hidden;
8747
8778
  text-overflow: ellipsis;
8748
8779
  white-space: nowrap;
8749
8780
  }
8750
- [data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-7090f745] {
8781
+
8782
+ /* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
8783
+ [data-component~="ui-text"][data-ui-text-state~="trim"][data-ui-text-state~="truncate"][data-v-a12d976f] {
8784
+ overflow-x: clip;
8785
+ overflow-y: visible;
8786
+ }
8787
+ [data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-a12d976f] {
8751
8788
  text-align: center;
8752
8789
  }
8753
- [data-component~="ui-text"][data-ui-text-state~="font=sans"][data-v-7090f745] {
8790
+ [data-component~="ui-text"][data-ui-text-state~="font=sans"][data-v-a12d976f] {
8754
8791
  font-family: var(--ui-font-family-sans, sans-serif);
8755
8792
  }
8756
- [data-component~="ui-text"][data-ui-text-state~="wrap=anywhere"][data-v-7090f745] {
8793
+ [data-component~="ui-text"][data-ui-text-state~="wrap=anywhere"][data-v-a12d976f] {
8757
8794
  overflow-wrap: anywhere;
8758
8795
  }
8759
8796
 
8760
8797
  /* A component that sets its display still honours the hidden attribute on its root. */
8761
- [data-component~="ui-text"][hidden][data-v-7090f745] {
8798
+ [data-component~="ui-text"][hidden][data-v-a12d976f] {
8762
8799
  display: none;
8763
8800
  }
8764
8801