@threadlabs/looma 0.26.15 → 0.26.17

package/components/ui-meter/ui-meter.html

@@ -1,5 +1,17 @@
 <template component="ui-meter">
   <defs>
+    <prop name="variant" type="keyword" values="progress, distribution" default="progress"
+    >progress measures one value against max. distribution shows mutually exclusive parts of a whole as a full-width proportional bar; it uses parts rather than
+      value/max and is an image, not a progress reading.</prop>
+    <prop name="parts" type="list" default="[]">Categories in display order for distribution. Positive finite values determine each share without rounding; zero
+      and negative values draw nothing. Supply label and valueText to describe every category, and a visible text legend so colour is never the only
+      explanation.
+      <prop type="object">
+        <prop name="value" required type="number"></prop>
+        <prop name="color" required type="string"
+        >A CSS category colour, including a theme variable. This names category identity independently of status tones.</prop>
+      </prop>
+    </prop>
     <prop name="value" type="number" default="0"
     >How far along, from 0 to max. A value outside that range draws at the nearer end: below 0 is an empty track, above max a full bar.</prop>
     <prop name="max" type="number" default="1"
@@ -25,15 +37,26 @@
     <computed name="percent" from="{ true: $amount / $max * 100, false: 0 }[concat($max > 0)]"></computed>
   </defs>
   <span
-    role="meter"
-    aria-valuemin="0"
-    from:aria-valuemax="$max"
-    from:aria-valuenow="$amount"
-    from:aria-valuetext="{ true: $valueText, false: format($percent / 100, 'percent', { maximumFractionDigits: 0 }) }[concat($valueText != '')]"
-    from:aria-label="{ true: $label, false: null }[concat($label != '')]"
-    from:data-ui-meter-segments="{ true: $segments, false: null }[concat($segments > 1)]"
+    from:role="{ true: 'img', false: 'meter' }[concat($variant = 'distribution')]"
+    from:aria-valuemin="{ true: null, false: 0 }[concat($variant = 'distribution')]"
+    from:aria-valuemax="{ true: null, false: $max }[concat($variant = 'distribution')]"
+    from:aria-valuenow="{ true: null, false: $amount }[concat($variant = 'distribution')]"
+    from:aria-valuetext="{ true: null, false: { true: $valueText, false: format($percent / 100, 'percent', { maximumFractionDigits: 0 }) }[concat($valueText != '')] }[concat($variant = 'distribution')]"
+    from:aria-label="{ true: { true: concat($label, ': ', $valueText), false: $label }[concat($variant = 'distribution' and $valueText != '')], false: null }[concat($label != '')]"
+    from:data-ui-meter-segments="{ true: $segments, false: null }[concat($variant = 'progress' and $segments > 1)]"
   >
-    <span class="fill" style:inline-size="concat($percent, '%')"></span>
+    <span $if="$variant = 'progress'" class="fill" style:inline-size="concat($percent, '%')"></span>
+    <template $if="$variant = 'distribution'">
+      <template $each="part of $parts">
+        <span
+          $if="$part.value > 0 and $part.value - $part.value = 0"
+          class="part"
+          aria-hidden="true"
+          style:flex-grow="$part.value"
+          style:background-color="$part.color"
+        ></span>
+      </template>
+    </template>
   </span>
   <style>
     /* How far along something is: a track, filled from the start in the tone's colour. The track is a
@@ -158,6 +181,34 @@
       --_meter-gap: var(--ui-space-0-5);
     }
 
+    /* A categorical distribution uses flex ratios, avoiding rounded percentages and retaining
+       identical geometry before hydration. It has no progress mask or growing-value animation. */
+    :host([variant="distribution"]) {
+      display: flex;
+      inline-size: 100%;
+      block-size: var(--ui-space-4);
+      gap: var(--ui-space-0-5);
+    }
+
+    :host([variant="distribution"])[size="sm"] {
+      block-size: var(--ui-space-2);
+    }
+
+    .part {
+      flex-basis: 0;
+      min-inline-size: 0;
+      block-size: 100%;
+    }
+
+    @media (forced-colors: active) {
+      .part {
+        forced-color-adjust: none;
+        background: CanvasText !important;
+        outline: var(--ui-border-width) solid Canvas;
+        outline-offset: calc(-1 * var(--ui-border-width));
+      }
+    }
+
     /* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
     @media (forced-colors: active) {
       .fill {

package/components/ui-text/ui-text.html

@@ -1,5 +1,8 @@
 <template component="ui-text">
   <defs>
+    <prop name="trim" type="boolean" default="false"
+    >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
+      default. Browsers without text-box-trim retain normal font metrics.</prop>
     <prop name="grow" type="boolean" default="false">Lets this text use remaining inline space in a flex row, including when truncated.</prop>
     <prop name="font" type="keyword" values="inherit, sans" default="inherit"
     >Use sans for UI text rendered outside its original font context; inherit preserves the surrounding typeface.</prop>
@@ -75,6 +78,12 @@
       line-height: var(--ui-line-height-relaxed);
     }
 
+    /* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
+    :host([trim]) {
+      text-box-trim: trim-both;
+      text-box-edge: cap alphabetic;
+    }
+
     :host([tone="secondary"]) {
       color: var(--ui-text-secondary);
     }
@@ -134,6 +143,12 @@
       white-space: nowrap;
     }
 
+    /* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
+    :host([trim][truncate]) {
+      overflow-x: clip;
+      overflow-y: visible;
+    }
+
     :host([align="center"]) {
       text-align: center;
     }