@threadlabs/looma 0.26.16 → 0.26.18

package/components/ui-menu/ui-menu.html

@@ -2,6 +2,7 @@
   <defs>
     <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >Compact trades padding and type size for rows that fit more on screen.</prop>
+    <prop name="icons" type="boolean" default="false">Reserves a fixed icon column in every item, including items without an icon. Supply item icons through their icon slot.</prop>
     <prop name="size" type="keyword" values="sm, md" default="md"
     >sm sizes the menu to a small trigger, such as an xs or sm button: smallest text, short rows, a small check, and a narrower minimum width. md is the
       standard size.</prop>
@@ -77,6 +78,10 @@
       gap: 0;
     }
 
+    :host([icons]) {
+      --_ui-default-menu-icon-display: inline-flex;
+    }
+
     :host {
       --_ui-menu-surface: var(--ui-menu-surface);
       --_ui-menu-border: var(--ui-menu-border);
@@ -89,6 +94,7 @@
       --_ui-default-menu-item-radius: initial;
       --_ui-default-menu-item-min-block-size: initial;
       --_ui-default-menu-indicator-size: initial;
+      --_ui-default-menu-icon-display: none;
       display: flex;
       flex-direction: column;
       box-sizing: border-box;

package/components/ui-menu-item/ui-menu-item.html

@@ -10,6 +10,7 @@
     <prop name="type" type="keyword" values="action, checkbox, radio" default="action"
     >An action closes its menu; a checkbox toggles, and a radio chooses one item within its nearest Menu Group. Checkable items keep the menu open.</prop>
     <prop name="checked" type="boolean" default="false">Initial or externally controlled checked state of a checkbox or radio item.</prop>
+    <prop name="tone" type="keyword" values="neutral, danger" default="neutral">Danger identifies a destructive action without changing its behavior.</prop>
     <state type="boolean" name="internalChecked" value="false"></state>
     <event name="change" type="object">
       <prop name="checked" required type="boolean"></prop>
@@ -27,6 +28,7 @@
       from:data-value="$value"
       from:href="{ true: null, false: $href }[concat($disabled)]"
     >
+      <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
       <span class="label"><slot></slot></span>
       <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>
     </a>
@@ -41,6 +43,7 @@
       <span class="indicator" aria-hidden="true">
         <ui-icon $if="($type = 'checkbox' or $type = 'radio') and $internalChecked" name="check"></ui-icon>
       </span>
+      <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
       <span class="label"><slot></slot></span>
       <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>
     </div>
@@ -91,6 +94,29 @@
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
+    .icon {
+      display: var(--_ui-default-menu-icon-display, none);
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
+    }
+
+    .icon:not(:empty) {
+      display: inline-flex;
+    }
+
+    .icon :slotted(svg) {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    :host([tone="danger"]) {
+      color: var(--ui-danger);
+    }
+
     .label {
       display: flex;
       align-items: center;

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 {