@threadlabs/looma 0.26.16 → 0.26.18

package/vue/components.css

@@ -6254,7 +6254,7 @@ svg[data-v-219fa683-s] {
 
 /* Compact sets its items' defaults, so nothing has to rescale a global; an item's own hooks
    still win. */
-[data-component~="ui-menu"][data-ui-menu-state~="density=compact"][data-v-672d5adf] {
+[data-component~="ui-menu"][data-ui-menu-state~="density=compact"][data-v-b6bd5ab3] {
   --_ui-default-menu-item-padding-block: var(--ui-space-1);
   --_ui-default-menu-item-padding-inline: var(--ui-space-2);
   --_ui-default-menu-item-font-size: var(--ui-font-size-sm);
@@ -6264,7 +6264,7 @@ svg[data-v-219fa683-s] {
 }
 
 /* Small follows its trigger down: an item's own hooks still win. */
-[data-component~="ui-menu"][data-ui-menu-state~="size=sm"][data-v-672d5adf] {
+[data-component~="ui-menu"][data-ui-menu-state~="size=sm"][data-v-b6bd5ab3] {
   --_ui-default-menu-item-padding-block: var(--ui-space-0-5);
   --_ui-default-menu-item-padding-inline: var(--ui-space-2);
   --_ui-default-menu-item-font-size: var(--ui-font-size-xs);
@@ -6275,7 +6275,10 @@ svg[data-v-219fa683-s] {
   padding: var(--ui-space-1);
   gap: 0;
 }
-[data-component~="ui-menu"][data-v-672d5adf] {
+[data-component~="ui-menu"][data-ui-menu-state~="icons"][data-v-b6bd5ab3] {
+  --_ui-default-menu-icon-display: inline-flex;
+}
+[data-component~="ui-menu"][data-v-b6bd5ab3] {
   --_ui-menu-surface: var(--ui-menu-surface);
   --_ui-menu-border: var(--ui-menu-border);
   --_ui-menu-radius: var(--ui-menu-radius);
@@ -6287,6 +6290,7 @@ svg[data-v-219fa683-s] {
   --_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;
@@ -6301,7 +6305,7 @@ svg[data-v-219fa683-s] {
   box-shadow: none;
   overflow: visible;
 }
-.surface[data-v-672d5adf] {
+.surface[data-v-b6bd5ab3] {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -6318,17 +6322,17 @@ svg[data-v-219fa683-s] {
   max-block-size: inherit;
   overflow: auto;
 }
-.surface hr[data-v-672d5adf] {
+.surface hr[data-v-b6bd5ab3] {
   align-self: stretch;
   block-size: 0;
   margin: var(--ui-space-1) 0;
   border: 0;
   border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
-[data-component~="ui-menu"][data-v-672d5adf]:not([data-component~="ui-menu"][data-ui-menu-state~="internalOpen"]):not([data-component~="ui-menu"][data-ui-menu-state~="inline"]) {
+[data-component~="ui-menu"][data-v-b6bd5ab3]:not([data-component~="ui-menu"][data-ui-menu-state~="internalOpen"]):not([data-component~="ui-menu"][data-ui-menu-state~="inline"]) {
   display: none;
 }
-[data-component~="ui-menu"][popover][data-v-672d5adf] {
+[data-component~="ui-menu"][popover][data-v-b6bd5ab3] {
   position: fixed;
   inset: auto;
   margin: 0;
@@ -6342,21 +6346,21 @@ svg[data-v-219fa683-s] {
     display var(--ui-motion-fast) allow-discrete,
     overlay var(--ui-motion-fast) allow-discrete;
 }
-[data-component~="ui-menu"][popover][data-v-672d5adf]:popover-open {
+[data-component~="ui-menu"][popover][data-v-b6bd5ab3]:popover-open {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
 @starting-style {
-[data-component~="ui-menu"][popover][data-v-672d5adf]:popover-open {
+[data-component~="ui-menu"][popover][data-v-b6bd5ab3]:popover-open {
     opacity: 0;
     transform: translateY(-4px) scale(0.99);
 }
 }
-[data-component~="ui-menu"][hidden][data-v-672d5adf] {
+[data-component~="ui-menu"][hidden][data-v-b6bd5ab3] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-menu"][popover][data-v-672d5adf] {
+[data-component~="ui-menu"][popover][data-v-b6bd5ab3] {
     transition: none;
 }
 }
@@ -6401,7 +6405,7 @@ svg[data-v-219fa683-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-menu-item"][data-v-3aab9247] {
+[data-component~="ui-menu-item"][data-v-32e2a3e1] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
@@ -6433,14 +6437,34 @@ svg[data-v-219fa683-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.label[data-v-3aab9247] {
+
+/* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
+.icon[data-v-32e2a3e1] {
+  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[data-v-32e2a3e1]:not(:empty) {
+  display: inline-flex;
+}
+.icon svg[data-v-32e2a3e1-s] {
+  inline-size: 100%;
+  block-size: 100%;
+}
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="tone=danger"][data-v-32e2a3e1] {
+  color: var(--ui-danger);
+}
+.label[data-v-32e2a3e1] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   flex: 1;
   min-inline-size: 0;
 }
-.indicator[data-v-3aab9247] {
+.indicator[data-v-32e2a3e1] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -6453,39 +6477,39 @@ svg[data-v-219fa683-s] {
   color: var(--ui-surface);
   --_ui-default-icon-size: 0.75rem;
 }
-[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=action"] .indicator[data-v-3aab9247] {
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=action"] .indicator[data-v-32e2a3e1] {
   display: none;
 }
 [data-component~="ui-menu-item"][data-ui-menu-item-state~="type=checkbox"][aria-checked="true"]
-  .indicator[data-v-3aab9247] {
+  .indicator[data-v-32e2a3e1] {
   border-color: var(--ui-accent);
   background: var(--ui-accent);
 }
 
 /* A menu marks its chosen item with a check, as menus conventionally do; a radio circle reads
    as a form control. The empty slot keeps unchosen labels aligned with the chosen one. */
-[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"] .indicator[data-v-3aab9247] {
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"] .indicator[data-v-32e2a3e1] {
   border-color: transparent;
   color: var(--ui-text-secondary);
 }
-.shortcut[data-v-3aab9247] {
+.shortcut[data-v-32e2a3e1] {
   margin-inline-start: auto;
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-normal);
 }
-.shortcut[data-v-3aab9247]:empty {
+.shortcut[data-v-32e2a3e1]:empty {
   display: none;
 }
 
 /* A <kbd> takes the browser's monospace; the hint reads in the item's own type. */
-.shortcut kbd[data-v-3aab9247-s] {
+.shortcut kbd[data-v-32e2a3e1-s] {
   font: inherit;
 }
 
 /* Keep the text row at the shared control height where cap trimming is available. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-menu-item"][data-v-3aab9247] {
+[data-component~="ui-menu-item"][data-v-32e2a3e1] {
     min-block-size: var(
       --ui-menu-item-min-block-size,
       var(--_ui-default-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem))
@@ -6494,34 +6518,34 @@ svg[data-v-219fa683-s] {
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-menu-item"][data-v-3aab9247]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
+[data-component~="ui-menu-item"][data-v-32e2a3e1]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
   background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
 }
-[data-component~="ui-menu-item"][data-v-3aab9247]:focus-visible {
+[data-component~="ui-menu-item"][data-v-32e2a3e1]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
   outline-offset: calc(-1 * var(--ui-focus-width));
 }
-[data-component~="ui-menu-item"][aria-disabled="true"][data-v-3aab9247] {
+[data-component~="ui-menu-item"][aria-disabled="true"][data-v-32e2a3e1] {
   background: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-3aab9247] {
+[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-32e2a3e1] {
   border-color: var(--ui-disabled-border);
   background: transparent;
   color: var(--ui-disabled-text);
 }
-[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-3aab9247]::after {
+[data-component~="ui-menu-item"][aria-disabled="true"] .indicator[data-v-32e2a3e1]::after {
   background: var(--ui-disabled-text);
 }
 @media (forced-colors: active) {
-[data-component~="ui-menu-item"][data-v-3aab9247]:focus-visible {
+[data-component~="ui-menu-item"][data-v-32e2a3e1]:focus-visible {
     outline-color: Highlight;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-menu-item"][hidden][data-v-3aab9247] {
+[data-component~="ui-menu-item"][hidden][data-v-32e2a3e1] {
   display: none;
 }
 
@@ -6532,7 +6556,7 @@ svg[data-v-219fa683-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-meter"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-v-c308c037] {
   --_meter-fill: var(--ui-text-muted);
 
   display: inline-block;
@@ -6548,30 +6572,30 @@ svg[data-v-219fa683-s] {
   /* Unseen until forced colours draw it, where the track's own colour is gone. */
   outline: var(--ui-border-width) solid transparent;
 }
-[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-v-c308c037] {
   inline-size: var(--ui-meter-inline-size, 5rem);
   block-size: var(--ui-space-1);
 }
-.fill[data-v-76fefbc5] {
+.fill[data-v-c308c037] {
   display: block;
   block-size: 100%;
   background-color: var(--_meter-fill);
   background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.26), transparent 70%);
   box-shadow: inset 0 1px rgb(255 255 255 / 0.26), inset 0 -1px rgb(0 0 0 / 0.1);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=accent"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=accent"][data-v-c308c037] {
   --_meter-fill: var(--ui-accent-solid);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=info"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=info"][data-v-c308c037] {
   --_meter-fill: var(--ui-info-solid);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=success"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=success"][data-v-c308c037] {
   --_meter-fill: var(--ui-success-solid);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=warning"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=warning"][data-v-c308c037] {
   --_meter-fill: var(--ui-warning-solid);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=danger"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=danger"][data-v-c308c037] {
   --_meter-fill: var(--ui-danger-solid);
 }
 
@@ -6583,40 +6607,40 @@ svg[data-v-219fa683-s] {
    The count arrives as an attribute, not an inline custom property (which would add a style
    attribute to every meter), so a continuous meter renders exactly as before, and the rules below
    turn it into a number. That caps it at 12, until attr() with a type reads any count in every engine. */
-[data-component~="ui-meter"][data-ui-meter-segments="2"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="2"][data-v-c308c037] {
   --_segments: 2;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="3"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="3"][data-v-c308c037] {
   --_segments: 3;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="4"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="4"][data-v-c308c037] {
   --_segments: 4;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="5"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="5"][data-v-c308c037] {
   --_segments: 5;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="6"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="6"][data-v-c308c037] {
   --_segments: 6;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="7"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="7"][data-v-c308c037] {
   --_segments: 7;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="8"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="8"][data-v-c308c037] {
   --_segments: 8;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="9"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="9"][data-v-c308c037] {
   --_segments: 9;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="10"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="10"][data-v-c308c037] {
   --_segments: 10;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="11"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="11"][data-v-c308c037] {
   --_segments: 11;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="12"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="12"][data-v-c308c037] {
   --_segments: 12;
 }
-[data-component~="ui-meter"][data-ui-meter-segments][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments][data-v-c308c037] {
   --_meter-gap: var(--ui-space-1);
   --_meter-period: calc((100% + var(--_meter-gap)) / var(--_segments));
   --_meter-segment: calc(var(--_meter-period) - var(--_meter-gap));
@@ -6627,20 +6651,45 @@ svg[data-v-219fa683-s] {
     transparent 0 var(--_meter-period)
   );
 }
-[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-ui-meter-segments][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-ui-meter-segments][data-v-c308c037] {
   --_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. */
+[data-component~="ui-meter"][data-ui-meter-state~="variant=distribution"][data-v-c308c037] {
+  display: flex;
+  inline-size: 100%;
+  block-size: var(--ui-space-4);
+  gap: var(--ui-space-0-5);
+}
+[data-component~="ui-meter"][data-ui-meter-state~="variant=distribution"][size="sm"][data-v-c308c037] {
+  block-size: var(--ui-space-2);
+}
+.part[data-v-c308c037] {
+  flex-basis: 0;
+  min-inline-size: 0;
+  block-size: 100%;
+}
+@media (forced-colors: active) {
+.part[data-v-c308c037] {
+    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[data-v-76fefbc5] {
+.fill[data-v-c308c037] {
     forced-color-adjust: none;
     background: CanvasText;
 }
 
   /* The mask clips the track's outline, so each segment draws its own: the inset shadow draws the
      top and bottom edges and the gradient the ends. */
-[data-component~="ui-meter"][data-ui-meter-segments][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments][data-v-c308c037] {
     forced-color-adjust: none;
     background: repeating-linear-gradient(
       to right,
@@ -6654,7 +6703,7 @@ svg[data-v-219fa683-s] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-meter"][hidden][data-v-76fefbc5] {
+[data-component~="ui-meter"][hidden][data-v-c308c037] {
   display: none;
 }