@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/UiText.d.ts CHANGED
@@ -48,6 +48,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
48
48
  type: PropType<"default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning" | null>;
49
49
  default: string;
50
50
  };
51
+ trim: {
52
+ type: PropType<boolean | null>;
53
+ default: boolean;
54
+ };
51
55
  truncate: {
52
56
  type: PropType<boolean | null>;
53
57
  default: boolean;
@@ -89,6 +93,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
89
93
  type: PropType<"default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning" | null>;
90
94
  default: string;
91
95
  };
96
+ trim: {
97
+ type: PropType<boolean | null>;
98
+ default: boolean;
99
+ };
92
100
  truncate: {
93
101
  type: PropType<boolean | null>;
94
102
  default: boolean;
@@ -113,6 +121,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
113
121
  align: "center" | "start" | null;
114
122
  as: "div" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "small" | "span" | "strong" | null;
115
123
  wrap: "normal" | "anywhere" | null;
124
+ trim: boolean | null;
116
125
  grow: boolean | null;
117
126
  truncate: boolean | null;
118
127
  weight: "inherit" | "medium" | "normal" | "semibold" | null;
package/vue/UiText.vue CHANGED
@@ -61,6 +61,14 @@ const propValidityContract = {
61
61
  values: ['default', 'secondary', 'muted', 'accent', 'danger', 'success', 'info', 'warning'],
62
62
  default: 'default',
63
63
  },
64
+ trim: {
65
+ type: { kind: 'terminal', name: 'boolean' },
66
+ required: false,
67
+ target: { attribute: 'trim' },
68
+ description:
69
+ '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.',
70
+ default: false,
71
+ },
64
72
  truncate: {
65
73
  type: { kind: 'terminal', name: 'boolean' },
66
74
  required: false,
@@ -125,6 +133,7 @@ const props = defineProps({
125
133
  >,
126
134
  default: 'default',
127
135
  },
136
+ trim: { type: null as unknown as PropType<boolean | null>, default: false },
128
137
  truncate: { type: null as unknown as PropType<boolean | null>, default: false },
129
138
  variant: {
130
139
  type: null as unknown as PropType<'body' | 'eyebrow' | 'code' | null>,
@@ -143,6 +152,7 @@ const acceptedProps: Record<string, unknown> = {
143
152
  grow: false,
144
153
  size: 'inherit',
145
154
  tone: 'default',
155
+ trim: false,
146
156
  truncate: false,
147
157
  variant: 'body',
148
158
  weight: 'inherit',
@@ -202,6 +212,13 @@ const checkedProps = computed(() => ({
202
212
  | 'success'
203
213
  | 'info'
204
214
  | 'warning',
215
+ trim: checkedProp<boolean>(
216
+ props['trim'],
217
+ { kind: 'terminal', name: 'boolean' },
218
+ false,
219
+ 'trim',
220
+ acceptedProps,
221
+ ) as boolean,
205
222
  truncate: checkedProp<boolean>(
206
223
  props['truncate'],
207
224
  { kind: 'terminal', name: 'boolean' },
@@ -311,6 +328,7 @@ const hostState = computed(() =>
311
328
  checkedProps.value.grow && 'grow',
312
329
  checkedProps.value.size && 'size',
313
330
  checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
331
+ checkedProps.value.trim && 'trim',
314
332
  checkedProps.value.tone && 'tone',
315
333
  checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
316
334
  checkedProps.value.weight && 'weight',
@@ -341,6 +359,7 @@ const hostState = computed(() =>
341
359
  :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
342
360
  :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
343
361
  :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
362
+ :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
344
363
  :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
345
364
  :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
346
365
  :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
@@ -359,6 +378,7 @@ const hostState = computed(() =>
359
378
  :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
360
379
  :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
361
380
  :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
381
+ :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
362
382
  :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
363
383
  :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
364
384
  :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
@@ -379,6 +399,7 @@ const hostState = computed(() =>
379
399
  :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
380
400
  :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
381
401
  :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
402
+ :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
382
403
  :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
383
404
  :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
384
405
  :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
@@ -397,6 +418,7 @@ const hostState = computed(() =>
397
418
  :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
398
419
  :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
399
420
  :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
421
+ :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
400
422
  :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
401
423
  :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
402
424
  :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
@@ -415,6 +437,7 @@ const hostState = computed(() =>
415
437
  :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
416
438
  :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
417
439
  :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
440
+ :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
418
441
  :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
419
442
  :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
420
443
  :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
@@ -433,6 +456,7 @@ const hostState = computed(() =>
433
456
  :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
434
457
  :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
435
458
  :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
459
+ :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
436
460
  :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
437
461
  :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
438
462
  :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
@@ -453,6 +477,7 @@ const hostState = computed(() =>
453
477
  :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
454
478
  :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
455
479
  :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
480
+ :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
456
481
  :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
457
482
  :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
458
483
  :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
@@ -473,6 +498,7 @@ const hostState = computed(() =>
473
498
  :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
474
499
  :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
475
500
  :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
501
+ :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
476
502
  :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
477
503
  :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
478
504
  :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
@@ -493,6 +519,7 @@ const hostState = computed(() =>
493
519
  :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
494
520
  :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
495
521
  :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
522
+ :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
496
523
  :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
497
524
  :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
498
525
  :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
@@ -513,6 +540,7 @@ const hostState = computed(() =>
513
540
  :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
514
541
  :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
515
542
  :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
543
+ :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
516
544
  :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
517
545
  :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
518
546
  :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
@@ -533,6 +561,7 @@ const hostState = computed(() =>
533
561
  :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
534
562
  :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
535
563
  :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
564
+ :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
536
565
  :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
537
566
  :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
538
567
  :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
@@ -583,6 +612,12 @@ const hostState = computed(() =>
583
612
  line-height: var(--ui-line-height-relaxed);
584
613
  }
585
614
 
615
+ /* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
616
+ [data-component~="ui-text"][data-ui-text-state~="trim"] {
617
+ text-box-trim: trim-both;
618
+ text-box-edge: cap alphabetic;
619
+ }
620
+
586
621
  [data-component~="ui-text"][data-ui-text-state~="tone=secondary"] {
587
622
  color: var(--ui-text-secondary);
588
623
  }
@@ -642,6 +677,12 @@ const hostState = computed(() =>
642
677
  white-space: nowrap;
643
678
  }
644
679
 
680
+ /* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
681
+ [data-component~="ui-text"][data-ui-text-state~="trim"][data-ui-text-state~="truncate"] {
682
+ overflow-x: clip;
683
+ overflow-y: visible;
684
+ }
685
+
645
686
  [data-component~="ui-text"][data-ui-text-state~="align=center"] {
646
687
  text-align: center;
647
688
  }