@threadlabs/looma 0.25.2 → 0.25.4

package/vue/components.css

@@ -349,7 +349,7 @@ svg[data-v-bf7b9190] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-badge"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-v-5065fda2] {
   --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
   --_badge-text: var(--ui-text-secondary);
   /* Sit between the soft fill and its stronger theme ink. */
@@ -375,6 +375,7 @@ svg[data-v-bf7b9190] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--ui-space-1);
   box-sizing: border-box;
   min-inline-size: 0;
   max-inline-size: 100%;
@@ -394,17 +395,48 @@ svg[data-v-bf7b9190] {
 
 /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
    text stays in the DOM for accessible names and consumers' selected values. */
-.label[data-v-b1009c5d] {
+.label[data-v-5065fda2] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.label[data-v-5065fda2]:empty {
+  display: none;
+}
+
+/* Icon content has its own flex item so label ellipsis never clips its strokes. */
+.icon[data-v-5065fda2] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+.icon[data-v-5065fda2]:empty {
+  display: none;
+}
+.icon svg[data-v-5065fda2-s] {
+  display: block;
+  inline-size: 1em;
+  block-size: 1em;
+  flex: none;
+}
+
+/* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
+.label svg[data-v-5065fda2-s] {
+  inline-size: 1em;
+  block-size: 1em;
+  vertical-align: middle;
+  margin-inline-end: var(--ui-space-1);
+}
+.label[data-v-5065fda2]:has(svg) {
+  text-box-trim: none;
+}
 
-/* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
-   would crop glyphs where the label clips horizontal overflow for ellipsis. */
+/* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
+   trimming its label separately keeps the glyph centered without changing adjacent lines. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-badge"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-v-5065fda2] {
     display: inline-block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
@@ -412,8 +444,17 @@ svg[data-v-bf7b9190] {
     text-box-trim: trim-both;
     text-box-edge: text;
 }
+[data-component~="ui-badge"][data-v-5065fda2]:has(.icon:not(:empty)),
+  [data-component~="ui-badge"][data-v-5065fda2]:has(.label svg) {
+    display: inline-flex;
+    text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-b1009c5d] {
+[data-component~="ui-badge"]:has(.icon:not(:empty)) .label[data-v-5065fda2] {
+    text-box-trim: trim-both;
+    text-box-edge: text;
+}
+}
+[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-5065fda2] {
   box-sizing: border-box;
   min-inline-size: 1rem;
   min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -421,52 +462,52 @@ svg[data-v-bf7b9190] {
   font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
   line-height: var(--ui-badge-line-height, 1);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-5065fda2] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-5065fda2] {
   --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-5065fda2] {
   --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-5065fda2] {
   --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-5065fda2] {
   --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-5065fda2] {
   --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-5065fda2] {
   --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-5065fda2] {
   --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-5065fda2] {
   --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-5065fda2] {
   --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -474,12 +515,12 @@ svg[data-v-bf7b9190] {
 
 /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
    invalid while the hook is unset. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-5065fda2] {
   --_badge-color-surface: var(--_badge-color-ink);
   --_badge-color-border: var(--_badge-color-ink);
   --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-5065fda2] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
@@ -487,29 +528,29 @@ svg[data-v-bf7b9190] {
   --_badge-color-surface: initial;
   --_badge-color-border: var(--_badge-color-ink);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-5065fda2] {
   --_badge-border: var(--ui-accent-solid);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-5065fda2] {
   --_badge-border: var(--ui-danger-solid);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-5065fda2] {
   --_badge-border: var(--ui-success-solid);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-5065fda2] {
   --_badge-border: var(--ui-warning-solid);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-5065fda2] {
   --_badge-border: var(--ui-info-solid);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
 /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-5065fda2] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
   display: inline-flex;
   box-sizing: border-box;
@@ -522,17 +563,23 @@ svg[data-v-bf7b9190] {
   border-radius: var(--ui-radius-md);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-5065fda2] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-5065fda2] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-5065fda2-s] {
+  margin-inline-end: 0;
+}
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-5065fda2]:empty {
+  display: none;
+}
 
 /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-5065fda2] {
   position: relative;
   box-sizing: border-box;
   flex: none;
@@ -544,7 +591,7 @@ svg[data-v-bf7b9190] {
   border-radius: var(--ui-radius-round);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-5065fda2] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -555,7 +602,7 @@ svg[data-v-bf7b9190] {
 
 /* The clipped point needs an inset surface over an outer border-colour shape: a native border
    has no diagonal edge to follow. Keep this edge for every tag variant. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-5065fda2] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
   position: relative;
@@ -572,7 +619,7 @@ svg[data-v-bf7b9190] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-b1009c5d]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-5065fda2]::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -587,34 +634,34 @@ svg[data-v-bf7b9190] {
   );
   pointer-events: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-b1009c5d]:dir(rtl) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-5065fda2]:dir(rtl) {
   padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
   padding-inline-start: calc(
     var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
   );
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-b1009c5d]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-5065fda2]:dir(rtl)::before {
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
 @media (forced-colors: active) {
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-5065fda2] {
     forced-color-adjust: none;
     border-color: CanvasText;
     background: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-b1009c5d] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-5065fda2] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-b1009c5d]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-5065fda2]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-b1009c5d] {
+[data-component~="ui-badge"][hidden][data-v-5065fda2] {
   display: none;
 }
 
@@ -824,7 +871,7 @@ svg[data-v-fb67873c],
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-button"][data-v-5c174bca] {
+[data-component~="ui-button"][data-v-7c2bc2b4] {
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);
   --_hue-active: var(--ui-accent-active);
@@ -840,18 +887,19 @@ svg[data-v-fb67873c],
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  column-gap: var(--ui-space-2);
   vertical-align: middle;
   color: var(--_tone-text);
 }
-[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-7c2bc2b4] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-7c2bc2b4] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-5c174bca] {
+[data-component~="ui-button"][data-v-7c2bc2b4] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
@@ -879,35 +927,34 @@ svg[data-v-fb67873c],
 }
 
 /* An anchor keeps the boxed button look even when an app styles ordinary links. */
-[data-component~="ui-button"][data-v-5c174bca]:is(a) {
+[data-component~="ui-button"][data-v-7c2bc2b4]:is(a) {
   text-decoration: none;
 }
-.spinner-wrap[data-v-5c174bca] {
+.spinner-wrap[data-v-7c2bc2b4] {
   display: inline-flex;
   flex: none;
-  margin-inline-end: var(--ui-space-2);
   vertical-align: middle;
 }
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-button"][data-v-5c174bca] {
+[data-component~="ui-button"][data-v-7c2bc2b4] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=xs"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="size=xs"][data-v-7c2bc2b4] {
   min-block-size: 1.5rem;
   padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
   font-size: var(--ui-font-size-xs);
 }
-[data-component~="ui-button"][data-ui-button-state~="shape=pill"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="shape=pill"][data-v-7c2bc2b4] {
   border-radius: var(--ui-button-radius, var(--ui-radius-round));
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-7c2bc2b4] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-7c2bc2b4] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
@@ -915,7 +962,7 @@ svg[data-v-fb67873c],
 
 /* Card actions inherit Button's palette and behavior; only their shared layout changes.
    The icon may contain any decorative composition. Empty icons remove their column. */
-[data-component~="ui-button"][data-ui-button-state~="variant=card"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="variant=card"][data-v-7c2bc2b4] {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-content: center;
@@ -928,23 +975,23 @@ svg[data-v-fb67873c],
   box-shadow: none;
   background-image: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"][data-v-7c2bc2b4] {
   min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=card"][data-v-5c174bca]:has(.card-icon:empty) {
+[data-component~="ui-button"][data-ui-button-state~="variant=card"][data-v-7c2bc2b4]:has(.card-icon:empty) {
   grid-template-columns: minmax(0, 1fr) auto;
 }
-.card-icon[data-v-5c174bca] {
+.card-icon[data-v-7c2bc2b4] {
   display: flex;
   align-items: flex-start;
 }
-.card-icon[data-v-5c174bca]:empty {
+.card-icon[data-v-7c2bc2b4]:empty {
   display: none;
 }
-.card-content[data-v-5c174bca] {
+.card-content[data-v-7c2bc2b4] {
   min-inline-size: 0;
 }
-.card-action[data-v-5c174bca] {
+.card-action[data-v-7c2bc2b4] {
   display: flex;
   align-items: center;
   align-self: center;
@@ -952,29 +999,29 @@ svg[data-v-fb67873c],
 
 /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
    is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
-[data-component~="ui-button"][data-v-5c174bca]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-7c2bc2b4]:hover:not(:disabled, [aria-disabled="true"]) {
   border-color: var(--ui-button-hover-border, var(--_tone-hover));
   background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
 }
 
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
-[data-component~="ui-button"][data-v-5c174bca]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-7c2bc2b4]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
   background-image: none;
   box-shadow: var(--ui-pressed);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-5c174bca],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-7c2bc2b4],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-7c2bc2b4] {
   border-color: var(--_tone);
   background-color: var(--_tone);
   color: var(--_on-tone);
   box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-5c174bca], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-5c174bca]):hover:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-7c2bc2b4], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-7c2bc2b4]):hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-hover);
   border-color: var(--_tone-hover);
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-5c174bca], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-5c174bca]):active:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-7c2bc2b4], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-7c2bc2b4]):active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -983,43 +1030,43 @@ svg[data-v-fb67873c],
 
 /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
    destructive secondary action, not a special case. */
-[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-7c2bc2b4] {
   --_hue: var(--ui-text);
   --_hue-hover: var(--ui-text);
   --_hue-active: var(--ui-text);
   --_hue-text: var(--ui-text);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-5c174bca],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-7c2bc2b4],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-7c2bc2b4] {
   --_hue: var(--ui-danger);
   --_hue-hover: var(--ui-danger-hover);
   --_hue-active: var(--ui-danger-hover);
   --_hue-text: var(--ui-danger-hover);
   --_on-hue: var(--ui-on-danger);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-7c2bc2b4] {
   --_hue: var(--ui-success);
   --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-7c2bc2b4] {
   --_hue: var(--ui-warning);
   --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-7c2bc2b4] {
   --_hue: var(--ui-info);
   --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-7c2bc2b4] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -1027,14 +1074,14 @@ svg[data-v-fb67873c],
 }
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-5c174bca]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-7c2bc2b4]:hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
   border-color: transparent;
 }
 
 /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
    edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-5c174bca]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-7c2bc2b4]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
   background-color: var(
     --ui-button-ghost-active-surface,
     color-mix(in oklch, var(--ui-surface), var(--_tone) 3%)
@@ -1046,13 +1093,13 @@ svg[data-v-fb67873c],
 }
 
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
-[data-component~="ui-button"][data-v-5c174bca]:focus-visible {
+[data-component~="ui-button"][data-v-7c2bc2b4]:focus-visible {
   outline: none;
   box-shadow:
     var(--ui-button-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-5c174bca]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-7c2bc2b4]:focus-visible {
   box-shadow:
     var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
@@ -1060,7 +1107,7 @@ svg[data-v-fb67873c],
 
 /* A loading action stays visually active; only an explicitly disabled action takes the
    neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
-[data-component~="ui-button"][data-v-5c174bca]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-v-7c2bc2b4]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   border-color: var(--ui-disabled-border);
   background-color: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
@@ -1070,19 +1117,19 @@ svg[data-v-fb67873c],
   background-image: none;
   box-shadow: none;
 }
-:is([data-component~="ui-button"][data-ui-button-state~="loading"][data-v-5c174bca], [data-component~="ui-button"][data-ui-button-state~="pending"][data-v-5c174bca]):focus-visible {
+:is([data-component~="ui-button"][data-ui-button-state~="loading"][data-v-7c2bc2b4], [data-component~="ui-button"][data-ui-button-state~="pending"][data-v-7c2bc2b4]):focus-visible {
   box-shadow: var(--ui-focus-halo);
 }
 
 /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-5c174bca]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-7c2bc2b4]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   background-color: var(--ui-disabled-surface);
   border-color: transparent;
 }
 
 /* The size states outrank :host, so sm is named too, or a small button would stay small. */
 @media (pointer: coarse) {
-[data-component~="ui-button"][data-v-5c174bca], [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-5c174bca] {
+[data-component~="ui-button"][data-v-7c2bc2b4], [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-7c2bc2b4] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
@@ -1093,15 +1140,15 @@ svg[data-v-fb67873c],
    area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
    Only these need it: a hit area on every button would reach over its neighbours. */
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-5c174bca],
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7c2bc2b4],
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="size=xs"][data-v-5c174bca] {
+  [data-component~="ui-button"][data-ui-button-state~="size=xs"][data-v-7c2bc2b4] {
   position: relative;
 }
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-5c174bca]::after,
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7c2bc2b4]::after,
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="size=xs"][data-v-5c174bca]::after {
+  [data-component~="ui-button"][data-ui-button-state~="size=xs"][data-v-7c2bc2b4]::after {
   position: absolute;
   inset: 50% auto auto 50%;
   inline-size: max(100%, var(--ui-control-min-block-size));
@@ -1112,7 +1159,7 @@ html[data-ui-input-modality="touch"]
 
 /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
    WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-5c174bca] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7c2bc2b4] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -1130,21 +1177,21 @@ html[data-ui-input-modality="touch"]
     color var(--ui-motion-fast) var(--ui-motion-ease),
     text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-5c174bca]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7c2bc2b4]:hover:not(:disabled, [aria-disabled="true"]) {
   color: var(--ui-button-link-hover-text, var(--ui-text-primary));
   text-decoration-color: currentColor;
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-5c174bca]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7c2bc2b4]:active:not(:disabled, [aria-disabled="true"]) {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-5c174bca]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7c2bc2b4]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   background: none;
   border-color: transparent;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-5c174bca]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-7c2bc2b4]:focus-visible {
   box-shadow: none;
   /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
@@ -1152,7 +1199,7 @@ html[data-ui-input-modality="touch"]
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-button"][hidden][data-v-5c174bca] {
+[data-component~="ui-button"][hidden][data-v-7c2bc2b4] {
   display: none;
 }
 
@@ -8816,7 +8863,7 @@ to {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-tree-item"][data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-v-f2ec0a81] {
   /* Hooks do not inherit, so the parts below read them from the root. The tree's density
      sets the defaults, in --_ui-default-*. */
   --_ui-tree-item-min-block-size: var(
@@ -8838,7 +8885,7 @@ to {
   min-inline-size: 0;
   margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px));
 }
-.row[data-v-4981f1b6] {
+.row[data-v-f2ec0a81] {
   position: relative;
   display: grid;
   grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
@@ -8855,54 +8902,54 @@ to {
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
     min-block-size var(--ui-motion-base) var(--ui-motion-ease);
 }
-.row[data-v-4981f1b6]:hover,
-.row[data-v-4981f1b6]:focus-within {
+.row[data-v-f2ec0a81]:hover,
+.row[data-v-f2ec0a81]:focus-within {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
 }
 
 /* Selection is the same surface recipe as destination and choice rows. */
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] > .row[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] > .row[data-v-f2ec0a81] {
   color: var(--ui-selection-text);
   background: var(--ui-selection-surface);
 }
 [data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"]:not([aria-disabled="true"])
   > .row
-  > .leading[data-v-4981f1b6] {
+  > .leading[data-v-f2ec0a81] {
   color: var(--ui-selection-text);
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-f2ec0a81] {
   color: var(--ui-disabled-text);
   background: var(--ui-disabled-surface);
 }
-[data-component~="ui-tree-item"][data-dragging]:not([data-move-source]) .row[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-dragging]:not([data-move-source]) .row[data-v-f2ec0a81] {
   opacity: 0.42;
 }
-[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-4981f1b6],
-[data-component~="ui-tree-item"][data-move-source] > .row > .leading[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-f2ec0a81],
+[data-component~="ui-tree-item"][data-move-source] > .row > .leading[data-v-f2ec0a81] {
   opacity: 0.42;
 }
-[data-component~="ui-tree-item"][data-v-4981f1b6]:focus {
+[data-component~="ui-tree-item"][data-v-f2ec0a81]:focus {
   outline: none;
 }
-[data-component~="ui-tree-item"]:focus-visible .row[data-v-4981f1b6] {
+[data-component~="ui-tree-item"]:focus-visible .row[data-v-f2ec0a81] {
   box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
 }
 
 /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
-[data-component~="ui-tree-item"][data-drop-position="inside"] > .row[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-drop-position="inside"] > .row[data-v-f2ec0a81] {
   background: var(--ui-accent-subtle);
   box-shadow: inset 0 0 0 var(--ui-accent-line-width)
     var(--_ui-tree-drop-color, var(--ui-accent-solid));
 }
-.disclosure[data-v-4981f1b6],
-.disclosure-spacer[data-v-4981f1b6] {
+.disclosure[data-v-f2ec0a81],
+.disclosure-spacer[data-v-f2ec0a81] {
   grid-column: 1;
   grid-row: 1;
   inline-size: var(--_tree-disclosure-size);
   block-size: 28px;
 }
-.disclosure[data-v-4981f1b6] {
+.disclosure[data-v-f2ec0a81] {
   display: grid;
   /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
   place-items: center start;
@@ -8913,10 +8960,10 @@ to {
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
 }
-.disclosure[hidden][data-v-4981f1b6] {
+.disclosure[hidden][data-v-f2ec0a81] {
   display: none;
 }
-.selection-hit[data-v-4981f1b6] {
+.selection-hit[data-v-f2ec0a81] {
   display: none;
   grid-column: 2;
   grid-row: 1;
@@ -8925,29 +8972,29 @@ to {
   block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
   cursor: pointer;
 }
-.selection-checkbox[data-v-4981f1b6] {
+.selection-checkbox[data-v-f2ec0a81] {
   inline-size: 1rem;
   block-size: 1rem;
   margin: 0;
   accent-color: var(--ui-accent-solid);
 }
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row[data-v-f2ec0a81] {
   grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
 }
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .selection-hit[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .selection-hit[data-v-f2ec0a81] {
   display: grid;
 }
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .leading[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .leading[data-v-f2ec0a81] {
   grid-column: 3;
 }
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .label[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .label[data-v-f2ec0a81] {
   grid-column: 4;
 }
-.disclosure[data-v-4981f1b6]:hover {
+.disclosure[data-v-f2ec0a81]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-elevated);
 }
-.disclosure-icon[data-v-4981f1b6] {
+.disclosure-icon[data-v-f2ec0a81] {
   display: grid;
   place-items: center;
   inline-size: 12px;
@@ -8955,7 +9002,7 @@ to {
   transform: rotate(-90deg);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.disclosure-icon[data-v-4981f1b6]::before {
+.disclosure-icon[data-v-f2ec0a81]::before {
   display: block;
   inline-size: 0.375rem;
   block-size: 0.375rem;
@@ -8965,19 +9012,19 @@ to {
   /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
   transform: translateY(-20%) rotate(45deg);
 }
-[data-component~="ui-tree-item"][aria-expanded="true"] .disclosure-icon[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][aria-expanded="true"] > .row > .disclosure > .disclosure-icon[data-v-f2ec0a81] {
   transform: rotate(0deg);
 }
 
 /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
-.drag-handle svg[data-v-4981f1b6] {
+.drag-handle svg[data-v-f2ec0a81] {
   display: block;
   inline-size: 100%;
   block-size: 100%;
 }
 
 /* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
-.leading[data-v-4981f1b6] {
+.leading[data-v-f2ec0a81] {
   display: inline-grid;
   place-items: center;
   grid-column: 2;
@@ -8990,12 +9037,12 @@ to {
   position: relative;
   z-index: 1;
 }
-.leading[data-v-4981f1b6]:empty {
+.leading[data-v-f2ec0a81]:empty {
   display: none;
 }
 
 /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
-svg[data-v-4981f1b6-s],img[data-v-4981f1b6-s] {
+svg[data-v-f2ec0a81-s],img[data-v-f2ec0a81-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -9004,7 +9051,7 @@ svg[data-v-4981f1b6-s],img[data-v-4981f1b6-s] {
 
 /* The label spans the row's height and centres its content, so slotted content (a link) can
    stretch to fill the row as its own hit area; the padding tokens remove the inset. */
-.label[data-v-4981f1b6] {
+.label[data-v-f2ec0a81] {
   grid-column: 3;
   grid-row: 1;
   align-self: stretch;
@@ -9022,7 +9069,7 @@ svg[data-v-4981f1b6-s],img[data-v-4981f1b6-s] {
 
 /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
    its own text and reading as overflow. */
-.label-text[data-v-4981f1b6] {
+.label-text[data-v-f2ec0a81] {
   display: flex;
   align-items: center;
   /* Stretches, so slotted content can still be the row's full-height hit area. */
@@ -9032,16 +9079,16 @@ svg[data-v-4981f1b6-s],img[data-v-4981f1b6-s] {
   inline-size: 100%;
   white-space: nowrap;
 }
-.label-text > [data-v-4981f1b6-s] {
+.label-text > [data-v-f2ec0a81-s] {
   flex: 1 1 auto;
   min-inline-size: 0;
 }
 
 /* The controls sit over the label's end, so the text fades out where they begin. The fade is
    the truncation mark while it shows: an ellipsis under it would read as a second one. */
-.row:hover > .label[data-v-4981f1b6],
-.row:focus-within > .label[data-v-4981f1b6],
-[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-4981f1b6] {
+.row:hover > .label[data-v-f2ec0a81],
+.row:focus-within > .label[data-v-f2ec0a81],
+[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-f2ec0a81] {
   text-overflow: clip;
   mask-image: linear-gradient(
     to right,
@@ -9049,9 +9096,9 @@ svg[data-v-4981f1b6-s],img[data-v-4981f1b6-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row:hover > .label[data-v-4981f1b6]:dir(rtl),
-.row:focus-within > .label[data-v-4981f1b6]:dir(rtl),
-[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-4981f1b6]:dir(rtl) {
+.row:hover > .label[data-v-f2ec0a81]:dir(rtl),
+.row:focus-within > .label[data-v-f2ec0a81]:dir(rtl),
+[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-f2ec0a81]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
@@ -9063,10 +9110,10 @@ svg[data-v-4981f1b6-s],img[data-v-4981f1b6-s] {
    there, and starts again. Only when it actually overflows — the controller measures by how
    much — after the controls have taken their place over its end — and hands over the distance
    and a duration from it, so every name moves at the same speed. */
-.row[data-ui-marquee] > .label > .label-text[data-v-4981f1b6] {
+.row[data-ui-marquee] > .label > .label-text[data-v-f2ec0a81] {
   /* Once per pass: the controller restarts it after a rest at the end, so the name holds still
      long enough to read rather than sliding back and forth. */
-  animation: ui-tree-item-marquee-4981f1b6 var(--_marquee-duration) linear 0.5s 1 normal forwards;
+  animation: ui-tree-item-marquee-f2ec0a81 var(--_marquee-duration) linear 0.5s 1 normal forwards;
   will-change: transform;
 }
 
@@ -9074,7 +9121,7 @@ svg[data-v-4981f1b6-s],img[data-v-4981f1b6-s] {
    slides, the label reaches back under the icon (the controller measures how far) with its text
    where it was, and fades out across the gap before the icon, fully gone where the icon begins
    to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
-.row[data-ui-marquee] > .label[data-v-4981f1b6] {
+.row[data-ui-marquee] > .label[data-v-f2ec0a81] {
   margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
   padding-inline-start: calc(
     var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
@@ -9089,7 +9136,7 @@ svg[data-v-4981f1b6-s],img[data-v-4981f1b6-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row[data-ui-marquee] > .label[data-v-4981f1b6]:dir(rtl) {
+.row[data-ui-marquee] > .label[data-v-f2ec0a81]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     transparent var(--_marquee-icon-width, 0px),
@@ -9100,7 +9147,7 @@ svg[data-v-4981f1b6-s],img[data-v-4981f1b6-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-@keyframes ui-tree-item-marquee-4981f1b6 {
+@keyframes ui-tree-item-marquee-f2ec0a81 {
 from {
     transform: translateX(0);
 }
@@ -9111,15 +9158,15 @@ to {
 
 /* Reduced motion keeps the fade, which already says the name continues. */
 @media (prefers-reduced-motion: reduce) {
-.row[data-ui-marquee] > .label > .label-text[data-v-4981f1b6] {
+.row[data-ui-marquee] > .label > .label-text[data-v-f2ec0a81] {
     animation: none;
 }
 }
-.row:hover > .label > [data-v-4981f1b6-s],
-.row:focus-within > .label > [data-v-4981f1b6-s] {
+.row:hover > .label > [data-v-f2ec0a81-s],
+.row:focus-within > .label > [data-v-f2ec0a81-s] {
   text-overflow: clip;
 }
-.actions[data-v-4981f1b6] {
+.actions[data-v-f2ec0a81] {
   position: absolute;
   z-index: 1;
   inset-block: 0;
@@ -9131,19 +9178,19 @@ to {
   pointer-events: none;
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover > .actions[data-v-4981f1b6],
-.row:focus-within > .actions[data-v-4981f1b6],
-[data-component~="ui-tree-item"][data-move-source] > .row > .actions[data-v-4981f1b6] {
+.row:hover > .actions[data-v-f2ec0a81],
+.row:focus-within > .actions[data-v-f2ec0a81],
+[data-component~="ui-tree-item"][data-move-source] > .row > .actions[data-v-f2ec0a81] {
   opacity: 1;
   pointer-events: auto;
 }
 
 /* Without hover there is no reveal, so the controls keep their own column. */
 @media (hover: none), (pointer: coarse) {
-.row[data-v-4981f1b6] {
+.row[data-v-f2ec0a81] {
     grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
 }
-.actions[data-v-4981f1b6] {
+.actions[data-v-f2ec0a81] {
     position: static;
     grid-column: 4;
     grid-row: 1;
@@ -9152,13 +9199,13 @@ to {
     opacity: 1;
     pointer-events: auto;
 }
-.row:is(:hover, :focus-within) > .label[data-v-4981f1b6],
-  .row:is(:hover, :focus-within) > .label[data-v-4981f1b6]:dir(rtl),
-  [data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-4981f1b6],
-  [data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-4981f1b6]:dir(rtl) {
+.row:is(:hover, :focus-within) > .label[data-v-f2ec0a81],
+  .row:is(:hover, :focus-within) > .label[data-v-f2ec0a81]:dir(rtl),
+  [data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-f2ec0a81],
+  [data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-f2ec0a81]:dir(rtl) {
     mask-image: none;
 }
-.row[data-ui-marquee] > .label[data-v-4981f1b6] {
+.row[data-ui-marquee] > .label[data-v-f2ec0a81] {
     mask-image: linear-gradient(
       to right,
       transparent var(--_marquee-icon-width, 0px),
@@ -9167,7 +9214,7 @@ to {
       )
     );
 }
-.row[data-ui-marquee] > .label[data-v-4981f1b6]:dir(rtl) {
+.row[data-ui-marquee] > .label[data-v-f2ec0a81]:dir(rtl) {
     mask-image: linear-gradient(
       to left,
       transparent var(--_marquee-icon-width, 0px),
@@ -9176,10 +9223,10 @@ to {
       )
     );
 }
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row[data-v-f2ec0a81] {
     grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
 }
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .actions[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .actions[data-v-f2ec0a81] {
     grid-column: 5;
 }
 }
@@ -9188,7 +9235,7 @@ to {
    empty column, right before the icon; a branch's disclosure is there, so its handle sits just
    outside the row. It is bare until pointed at: a resting surface behind it read as a faint
    patch rather than as a control. */
-.drag-handle[data-v-4981f1b6] {
+.drag-handle[data-v-f2ec0a81] {
   position: absolute;
   z-index: 2;
   inset-block-start: 50%;
@@ -9209,24 +9256,24 @@ to {
   transform: translateY(-50%);
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover .drag-handle[data-v-4981f1b6],
-.drag-handle[data-v-4981f1b6]:hover,
-.drag-handle[data-v-4981f1b6]:focus-visible,
-[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-4981f1b6] {
+.row:hover .drag-handle[data-v-f2ec0a81],
+.drag-handle[data-v-f2ec0a81]:hover,
+.drag-handle[data-v-f2ec0a81]:focus-visible,
+[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-f2ec0a81] {
   opacity: 1;
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-f2ec0a81] {
   inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
 }
-.drag-handle[data-v-4981f1b6]:hover,
-.drag-handle[data-v-4981f1b6]:focus-visible {
+.drag-handle[data-v-f2ec0a81]:hover,
+.drag-handle[data-v-f2ec0a81]:focus-visible {
   color: var(--ui-text-primary);
   background: var(--ui-surface-hover);
 }
-.drag-handle[data-v-4981f1b6]:active {
+.drag-handle[data-v-f2ec0a81]:active {
   cursor: grabbing;
 }
-.drop-indicator[data-v-4981f1b6] {
+.drop-indicator[data-v-f2ec0a81] {
   position: absolute;
   z-index: 3;
   inset-inline: 1px;
@@ -9236,8 +9283,8 @@ to {
   background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
   pointer-events: none;
 }
-.drop-indicator[data-v-4981f1b6]::before,
-.drop-indicator[data-v-4981f1b6]::after {
+.drop-indicator[data-v-f2ec0a81]::before,
+.drop-indicator[data-v-f2ec0a81]::after {
   content: "";
   position: absolute;
   inset-block-start: 50%;
@@ -9248,34 +9295,34 @@ to {
   background: var(--ui-surface-elevated);
   transform: translateY(-50%);
 }
-.drop-indicator[data-v-4981f1b6]::before {
+.drop-indicator[data-v-f2ec0a81]::before {
   inset-inline-start: -1px;
 }
-.drop-indicator[data-v-4981f1b6]::after {
+.drop-indicator[data-v-f2ec0a81]::after {
   inset-inline-end: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-f2ec0a81] {
   display: block;
   inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
 }
-[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-4981f1b6] {
+[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-f2ec0a81] {
   display: block;
   inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
 }
-.children[hidden][data-v-4981f1b6] {
+.children[hidden][data-v-f2ec0a81] {
   display: none;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-4981f1b6] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-f2ec0a81] {
   --_tree-row-min-height: 44px;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row[data-v-4981f1b6] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row[data-v-f2ec0a81] {
   grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr);
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-4981f1b6],
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-f2ec0a81],
 html[data-ui-input-modality="touch"]
   [data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"]
   > .row
-  > .drag-handle[data-v-4981f1b6] {
+  > .drag-handle[data-v-f2ec0a81] {
   position: relative;
   grid-column: 1;
   grid-row: 1;
@@ -9287,24 +9334,24 @@ html[data-ui-input-modality="touch"]
   transform: none;
   cursor: pointer;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .disclosure[data-v-4981f1b6] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .disclosure[data-v-f2ec0a81] {
   grid-column: 2;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .leading[data-v-4981f1b6] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .leading[data-v-f2ec0a81] {
   grid-column: 3;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .label[data-v-4981f1b6] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .label[data-v-f2ec0a81] {
   grid-column: 4;
 }
 html[data-ui-input-modality="touch"]
   [data-component~="ui-tree-item"][data-selection-mode="multiple"]
-  > .row[data-v-4981f1b6] {
+  > .row[data-v-f2ec0a81] {
   grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr);
 }
 html[data-ui-input-modality="touch"]
   [data-component~="ui-tree-item"][data-selection-mode="multiple"]
   > .row
-  > .selection-hit[data-v-4981f1b6] {
+  > .selection-hit[data-v-f2ec0a81] {
   grid-column: 3;
   inline-size: 44px;
   block-size: 44px;
@@ -9312,55 +9359,55 @@ html[data-ui-input-modality="touch"]
 html[data-ui-input-modality="touch"]
   [data-component~="ui-tree-item"][data-selection-mode="multiple"]
   > .row
-  > .leading[data-v-4981f1b6] {
+  > .leading[data-v-f2ec0a81] {
   grid-column: 4;
 }
 html[data-ui-input-modality="touch"]
   [data-component~="ui-tree-item"][data-selection-mode="multiple"]
   > .row
-  > .label[data-v-4981f1b6] {
+  > .label[data-v-f2ec0a81] {
   grid-column: 5;
 }
 @media (hover: none), (pointer: coarse) {
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row[data-v-4981f1b6] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row[data-v-f2ec0a81] {
     grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .actions[data-v-4981f1b6] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .actions[data-v-f2ec0a81] {
     grid-column: 5;
 }
 html[data-ui-input-modality="touch"]
     [data-component~="ui-tree-item"][data-selection-mode="multiple"]
-    > .row[data-v-4981f1b6] {
+    > .row[data-v-f2ec0a81] {
     grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
 }
 html[data-ui-input-modality="touch"]
     [data-component~="ui-tree-item"][data-selection-mode="multiple"]
     > .row
-    > .actions[data-v-4981f1b6] {
+    > .actions[data-v-f2ec0a81] {
     grid-column: 6;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.row[data-v-4981f1b6],
-  .disclosure-icon[data-v-4981f1b6],
-  .drag-handle[data-v-4981f1b6] {
+.row[data-v-f2ec0a81],
+  .disclosure-icon[data-v-f2ec0a81],
+  .drag-handle[data-v-f2ec0a81] {
     transition: none;
 }
 }
 @media (forced-colors: active) {
-[data-component~="ui-tree-item"]:focus-visible > .row[data-v-4981f1b6] {
+[data-component~="ui-tree-item"]:focus-visible > .row[data-v-f2ec0a81] {
     outline: var(--ui-focus-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-focus-width));
 }
 [data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"])
-    > .row[data-v-4981f1b6] {
+    > .row[data-v-f2ec0a81] {
     outline: var(--ui-border-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-border-width));
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tree-item"][hidden][data-v-4981f1b6] {
+[data-component~="ui-tree-item"][hidden][data-v-f2ec0a81] {
   display: none;
 }
 /**