@threadlabs/looma 0.11.2 → 0.11.4

package/vue/components.css

@@ -622,7 +622,7 @@ ol[data-v-0d86d58e] {
   display: none;
 }
 
-[data-component~="ui-callout"][data-v-2fd6ab30] {
+[data-component~="ui-callout"][data-v-36fb7e55] {
   --_callout-surface: var(--ui-info-soft);
   --_callout-border: var(--ui-info-solid);
   --_callout-icon: var(--ui-info-solid);
@@ -648,43 +648,51 @@ ol[data-v-0d86d58e] {
 }
 
 /* One line box tall, so the icon centres on the first line of text. */
-.icon[data-v-2fd6ab30] {
+.icon[data-v-36fb7e55] {
   display: grid;
   place-items: center;
   inline-size: var(--ui-callout-icon-column, 1.125rem);
   block-size: 1lh;
   color: var(--ui-callout-icon, var(--_callout-icon));
 }
-.icon svg[data-v-2fd6ab30] {
+.icon svg[data-v-36fb7e55] {
   inline-size: var(--ui-callout-icon-size, 1.125rem);
   block-size: var(--ui-callout-icon-size, 1.125rem);
 }
-.content[data-v-2fd6ab30] {
+.content[data-v-36fb7e55] {
   min-inline-size: 0;
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-2fd6ab30] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-36fb7e55] {
   --_callout-surface: var(--ui-surface-muted);
   --_callout-border: var(--ui-border-strong);
   --_callout-icon: var(--ui-text-secondary);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-2fd6ab30] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-36fb7e55] {
   --_callout-surface: var(--ui-warning-soft);
   --_callout-border: var(--ui-warning-solid);
   --_callout-icon: var(--ui-warning-solid);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-2fd6ab30] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-36fb7e55] {
   --_callout-surface: var(--ui-success-soft);
   --_callout-border: var(--ui-success-solid);
   --_callout-icon: var(--ui-success-solid);
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-2fd6ab30] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-36fb7e55] {
   --_callout-surface: var(--ui-danger-soft);
   --_callout-border: var(--ui-danger-solid);
   --_callout-icon: var(--ui-danger-solid);
 }
 
+/* A link in the callout's text is underlined, so it reads as a link by more than colour. */
+.content a[data-v-36fb7e55-s] {
+  color: var(--ui-accent-active);
+  text-decoration: underline;
+  text-decoration-thickness: 0.06em;
+  text-underline-offset: 0.18em;
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-callout"][hidden][data-v-2fd6ab30] {
+[data-component~="ui-callout"][hidden][data-v-36fb7e55] {
   display: none;
 }
 
@@ -2869,7 +2877,7 @@ svg[data-v-dc9b5621-s] {
   display: none;
 }
 
-[data-component~="ui-form-field"][data-v-eba1e76b] {
+[data-component~="ui-form-field"][data-v-4df6c2a6] {
   display: grid;
   gap: var(--ui-space-2);
   min-inline-size: 0;
@@ -2879,30 +2887,32 @@ svg[data-v-dc9b5621-s] {
 
 /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
    in Vue), and generates no box of its own, so an empty region adds no gap. */
-.label[data-v-eba1e76b],
-.help[data-v-eba1e76b],
-.error[data-v-eba1e76b] {
+.label[data-v-4df6c2a6],
+.help[data-v-4df6c2a6],
+.error[data-v-4df6c2a6] {
   display: contents;
 }
-.label[data-v-eba1e76b] {
+.label[data-v-4df6c2a6] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
 }
-.help[data-v-eba1e76b] {
+.help[data-v-4df6c2a6] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
 }
-.help > [data-v-eba1e76b-s] {
+.help > [data-v-4df6c2a6-s] {
   min-block-size: var(--ui-form-field-help-min-block-size, 0);
 }
-.error[data-v-eba1e76b],[role="alert"][data-v-eba1e76b-s] {
-  color: var(--ui-accent-active);
+
+/* An error reads in the danger colour, the one the invalid control's border takes. */
+.error[data-v-4df6c2a6],[role="alert"][data-v-4df6c2a6-s] {
+  color: var(--ui-danger);
   font-size: var(--ui-font-size-sm);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-form-field"][hidden][data-v-eba1e76b] {
+[data-component~="ui-form-field"][hidden][data-v-4df6c2a6] {
   display: none;
 }
 
@@ -3123,7 +3133,7 @@ svg[data-v-bcedd63e-s] {
   display: none;
 }
 
-[data-component~="ui-input"][data-v-12ffae5a] {
+[data-component~="ui-input"][data-v-c19f8322] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: 100%;
@@ -3146,21 +3156,21 @@ svg[data-v-bcedd63e-s] {
 }
 
 /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-[data-component~="ui-input"][data-v-12ffae5a]::selection {
+[data-component~="ui-input"][data-v-c19f8322]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-[data-component~="ui-input"][data-v-12ffae5a]::placeholder {
+[data-component~="ui-input"][data-v-c19f8322]::placeholder {
   color: var(--ui-control-placeholder, var(--ui-text-secondary));
   opacity: 1;
 }
-[data-component~="ui-input"][data-v-12ffae5a]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-input"][data-v-c19f8322]:hover:not(:focus):not(:disabled) {
   border-color: var(
     --ui-input-border-hover,
     var(--ui-control-border-hover, var(--ui-text-secondary))
   );
 }
-[data-component~="ui-input"][data-v-12ffae5a]:focus-visible {
+[data-component~="ui-input"][data-v-c19f8322]:focus-visible {
   border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
   outline: none;
   box-shadow: var(
@@ -3171,16 +3181,18 @@ svg[data-v-bcedd63e-s] {
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-input"][aria-invalid="true"][data-v-12ffae5a],
-[data-component~="ui-input"][data-v-12ffae5a]:is(:user-invalid, [data-user-invalid]) {
-  border-color: var(--ui-danger-solid);
+[data-component~="ui-input"][aria-invalid="true"][data-v-c19f8322],
+[data-component~="ui-input"][data-v-c19f8322]:is(:user-invalid, [data-user-invalid]) {
+  border-color: var(--ui-input-invalid-border, var(--ui-danger-solid));
 }
-[data-component~="ui-input"][data-v-12ffae5a]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-  box-shadow:
+[data-component~="ui-input"][data-v-c19f8322]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+  box-shadow: var(
+    --ui-input-invalid-focus-shadow,
     var(--ui-control-inset),
-    0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
+  );
 }
-[data-component~="ui-input"][data-v-12ffae5a]:disabled {
+[data-component~="ui-input"][data-v-c19f8322]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-text-muted);
   box-shadow: none;
@@ -3191,7 +3203,7 @@ svg[data-v-bcedd63e-s] {
  * scroll vertically inside the field. Native inputs already center their single line. */
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-input"][hidden][data-v-12ffae5a] {
+[data-component~="ui-input"][hidden][data-v-c19f8322] {
   display: none;
 }
 
@@ -3201,10 +3213,12 @@ svg[data-v-bcedd63e-s] {
        its custom properties, so it is still the one ui-input, with its form behaviour intact. The
        affixes are plain text beside the input, so name the input with a label that says what the
        whole value is. */
-[data-component~="ui-input-group"][data-v-0a135fc1] {
+[data-component~="ui-input-group"][data-v-42ff173c] {
   --ui-input-border: transparent;
   --ui-input-border-hover: transparent;
   --ui-input-focus-border: transparent;
+  --ui-input-invalid-border: transparent;
+  --ui-input-invalid-focus-shadow: none;
   --ui-input-shadow: none;
   --ui-input-focus-shadow: none;
   --ui-input-radius: 0;
@@ -3225,28 +3239,28 @@ svg[data-v-bcedd63e-s] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-input-group"][data-v-0a135fc1]:hover:not(:focus-within) {
+[data-component~="ui-input-group"][data-v-42ff173c]:hover:not(:focus-within) {
   border-color: var(--ui-text-secondary);
 }
-[data-component~="ui-input-group"][data-v-0a135fc1]:focus-within {
+[data-component~="ui-input-group"][data-v-42ff173c]:focus-within {
   border-color: var(--ui-accent-solid);
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
-[data-component~="ui-input-group"][data-v-0a135fc1]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
+[data-component~="ui-input-group"][data-v-42ff173c]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
   border-color: var(--ui-danger-solid);
 }
-[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"][data-v-0a135fc1] {
+[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"][data-v-42ff173c] {
   background: var(--ui-surface-muted);
   box-shadow: none;
 }
-.field[data-v-0a135fc1] {
+.field[data-v-42ff173c] {
   display: flex;
   flex: 1;
   min-inline-size: 0;
 }
-.affix[data-v-0a135fc1] {
+.affix[data-v-42ff173c] {
   display: inline-flex;
   flex: none;
   align-items: center;
@@ -3256,12 +3270,12 @@ svg[data-v-bcedd63e-s] {
   font-size: var(--ui-font-size-sm);
   white-space: nowrap;
 }
-.affix[data-v-0a135fc1]:empty {
+.affix[data-v-42ff173c]:empty {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-input-group"][hidden][data-v-0a135fc1] {
+[data-component~="ui-input-group"][hidden][data-v-42ff173c] {
   display: none;
 }
 
@@ -4788,72 +4802,81 @@ input[data-v-26ab3add], input[data-v-26ab3add]::after {
 
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
        text of its own. The root is a paragraph unless as= names a span, div, small, strong, or label. */
-[data-component~="ui-text"][data-v-70a75450] {
+[data-component~="ui-text"][data-v-b83a3ab9] {
   margin: 0;
   min-inline-size: 0;
   color: var(--ui-text-primary);
   text-align: start;
 }
-[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-b83a3ab9] {
   font-size: var(--ui-font-size-xs);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-b83a3ab9] {
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-b83a3ab9] {
   font-size: var(--ui-font-size-md);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-b83a3ab9] {
   font-size: var(--ui-font-size-lg);
   line-height: var(--ui-line-height-relaxed);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-b83a3ab9] {
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-b83a3ab9] {
   color: var(--ui-text-muted);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-b83a3ab9] {
   color: var(--ui-accent-active);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-b83a3ab9] {
   color: var(--ui-danger);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-b83a3ab9] {
   color: var(--ui-success);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-b83a3ab9] {
   font-weight: var(--ui-font-normal);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-b83a3ab9] {
   font-weight: var(--ui-font-medium);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-b83a3ab9] {
   font-weight: var(--ui-font-semibold);
 }
-[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-b83a3ab9] {
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-b83a3ab9] {
   font-family: var(--ui-font-family-mono);
 }
-[data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-70a75450] {
+
+/* A link in running text is underlined, so it stands apart from the words around it by more than
+   colour. */
+[data-component~="ui-text"] a[data-v-b83a3ab9-s] {
+  color: var(--ui-accent-active);
+  text-decoration: underline;
+  text-decoration-thickness: 0.06em;
+  text-underline-offset: 0.18em;
+}
+[data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-b83a3ab9] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-70a75450] {
+[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-b83a3ab9] {
   text-align: center;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-text"][hidden][data-v-70a75450] {
+[data-component~="ui-text"][hidden][data-v-b83a3ab9] {
   display: none;
 }
 
@@ -5080,7 +5103,7 @@ to {
   display: none;
 }
 
-[data-component~="ui-tree-item"][data-v-3778b642] {
+[data-component~="ui-tree-item"][data-v-dab96891] {
   --_tree-row-min-height: 32px;
   --_tree-disclosure-size: 16px;
 
@@ -5089,7 +5112,7 @@ to {
   min-inline-size: 0;
   margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent, 16px));
 }
-.row[data-v-3778b642] {
+.row[data-v-dab96891] {
   position: relative;
   display: grid;
   grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
@@ -5106,38 +5129,38 @@ 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-3778b642]:hover,
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-3778b642],
-.row[data-v-3778b642]:focus-within {
+.row[data-v-dab96891]:hover,
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-dab96891],
+.row[data-v-dab96891]:focus-within {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-3778b642] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-dab96891] {
   opacity: 0.55;
 }
-[data-component~="ui-tree-item"][data-dragging] .row[data-v-3778b642] {
+[data-component~="ui-tree-item"][data-dragging] .row[data-v-dab96891] {
   opacity: 0.42;
 }
-[data-component~="ui-tree-item"][data-v-3778b642]:focus {
+[data-component~="ui-tree-item"][data-v-dab96891]:focus {
   outline: none;
 }
-[data-component~="ui-tree-item"]:focus-visible .row[data-v-3778b642] {
+[data-component~="ui-tree-item"]:focus-visible .row[data-v-dab96891] {
   box-shadow: 0 0 0 2px 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-3778b642] {
+[data-component~="ui-tree-item"][data-drop-position="inside"] > .row[data-v-dab96891] {
   background: var(--ui-accent-subtle);
   box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
 }
-.disclosure[data-v-3778b642],
-.disclosure-spacer[data-v-3778b642] {
+.disclosure[data-v-dab96891],
+.disclosure-spacer[data-v-dab96891] {
   grid-column: 1;
   grid-row: 1;
   inline-size: var(--_tree-disclosure-size);
   block-size: 28px;
 }
-.disclosure[data-v-3778b642] {
+.disclosure[data-v-dab96891] {
   display: grid;
   /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
   place-items: center start;
@@ -5148,14 +5171,14 @@ to {
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
 }
-.disclosure[hidden][data-v-3778b642] {
+.disclosure[hidden][data-v-dab96891] {
   display: none;
 }
-.disclosure[data-v-3778b642]:hover {
+.disclosure[data-v-dab96891]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-elevated);
 }
-.disclosure-icon[data-v-3778b642] {
+.disclosure-icon[data-v-dab96891] {
   display: grid;
   place-items: center;
   inline-size: 12px;
@@ -5163,7 +5186,7 @@ to {
   transform: rotate(-90deg);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.disclosure-icon[data-v-3778b642]::before {
+.disclosure-icon[data-v-dab96891]::before {
   display: block;
   inline-size: 0.375rem;
   block-size: 0.375rem;
@@ -5173,19 +5196,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-3778b642] {
+[data-component~="ui-tree-item"][aria-expanded="true"] .disclosure-icon[data-v-dab96891] {
   transform: rotate(0deg);
 }
 
 /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
-.drag-handle svg[data-v-3778b642] {
+.drag-handle svg[data-v-dab96891] {
   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-3778b642] {
+.leading[data-v-dab96891] {
   display: inline-grid;
   place-items: center;
   grid-column: 2;
@@ -5198,12 +5221,12 @@ to {
   position: relative;
   z-index: 1;
 }
-.leading[data-v-3778b642]:empty {
+.leading[data-v-dab96891]: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-3778b642-s],img[data-v-3778b642-s] {
+svg[data-v-dab96891-s],img[data-v-dab96891-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -5212,7 +5235,7 @@ svg[data-v-3778b642-s],img[data-v-3778b642-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-3778b642] {
+.label[data-v-dab96891] {
   grid-column: 3;
   grid-row: 1;
   align-self: stretch;
@@ -5230,7 +5253,7 @@ svg[data-v-3778b642-s],img[data-v-3778b642-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-3778b642] {
+.label-text[data-v-dab96891] {
   display: flex;
   align-items: center;
   /* Stretches, so slotted content can still be the row's full-height hit area. */
@@ -5240,15 +5263,15 @@ svg[data-v-3778b642-s],img[data-v-3778b642-s] {
   inline-size: 100%;
   white-space: nowrap;
 }
-.label-text > [data-v-3778b642-s] {
+.label-text > [data-v-dab96891-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-3778b642],
-.row:focus-within > .label[data-v-3778b642] {
+.row:hover > .label[data-v-dab96891],
+.row:focus-within > .label[data-v-dab96891] {
   text-overflow: clip;
   mask-image: linear-gradient(
     to right,
@@ -5256,8 +5279,8 @@ svg[data-v-3778b642-s],img[data-v-3778b642-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row:hover > .label[data-v-3778b642]:dir(rtl),
-.row:focus-within > .label[data-v-3778b642]:dir(rtl) {
+.row:hover > .label[data-v-dab96891]:dir(rtl),
+.row:focus-within > .label[data-v-dab96891]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
@@ -5268,11 +5291,11 @@ svg[data-v-3778b642-s],img[data-v-3778b642-s] {
 /* A hovered row reads its whole name: the label slides far enough to show the end, waits
    there, and comes back. 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 a longer name travels no faster. */
-.row[data-ui-marquee] > .label > .label-text[data-v-3778b642] {
+   and a duration from it, so every name moves at the same speed. */
+.row[data-ui-marquee] > .label > .label-text[data-v-dab96891] {
   /* Once, and it stays at the end while the pointer is there: a name that keeps sliding back
      and forth under the pointer is harder to read than one that arrives and holds. */
-  animation: ui-tree-item-marquee-3778b642 var(--_marquee-duration) linear 0.5s 1 normal forwards;
+  animation: ui-tree-item-marquee-dab96891 var(--_marquee-duration) linear 0.5s 1 normal forwards;
   will-change: transform;
 }
 
@@ -5280,7 +5303,7 @@ svg[data-v-3778b642-s],img[data-v-3778b642-s] {
    slides, the label reaches back under the icon (the controller measures how far) with its text
    where it was, and fades out across that stretch, gone by the icon's middle: the name slips
    under the icon rather than stopping at a hard edge beside it. */
-.row[data-ui-marquee] > .label[data-v-3778b642] {
+.row[data-ui-marquee] > .label[data-v-dab96891] {
   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))
@@ -5295,7 +5318,7 @@ svg[data-v-3778b642-s],img[data-v-3778b642-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row[data-ui-marquee] > .label[data-v-3778b642]:dir(rtl) {
+.row[data-ui-marquee] > .label[data-v-dab96891]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     transparent calc(var(--_marquee-lead, 0px) / 2),
@@ -5306,7 +5329,7 @@ svg[data-v-3778b642-s],img[data-v-3778b642-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-@keyframes ui-tree-item-marquee-3778b642 {
+@keyframes ui-tree-item-marquee-dab96891 {
 from {
     transform: translateX(0);
 }
@@ -5317,15 +5340,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-3778b642] {
+.row[data-ui-marquee] > .label > .label-text[data-v-dab96891] {
     animation: none;
 }
 }
-.row:hover > .label > [data-v-3778b642-s],
-.row:focus-within > .label > [data-v-3778b642-s] {
+.row:hover > .label > [data-v-dab96891-s],
+.row:focus-within > .label > [data-v-dab96891-s] {
   text-overflow: clip;
 }
-.actions[data-v-3778b642] {
+.actions[data-v-dab96891] {
   position: absolute;
   z-index: 1;
   inset-block: 0;
@@ -5337,18 +5360,18 @@ to {
   pointer-events: none;
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover > .actions[data-v-3778b642],
-.row:focus-within > .actions[data-v-3778b642] {
+.row:hover > .actions[data-v-dab96891],
+.row:focus-within > .actions[data-v-dab96891] {
   opacity: 1;
   pointer-events: auto;
 }
 
 /* Without hover there is no reveal, so the controls keep their own column. */
 @media (hover: none) {
-.row[data-v-3778b642] {
+.row[data-v-dab96891] {
     grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
 }
-.actions[data-v-3778b642] {
+.actions[data-v-dab96891] {
     position: static;
     grid-column: 4;
     grid-row: 1;
@@ -5363,7 +5386,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-3778b642] {
+.drag-handle[data-v-dab96891] {
   position: absolute;
   z-index: 2;
   inset-block-start: 50%;
@@ -5384,24 +5407,24 @@ to {
   transform: translateY(-50%);
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover .drag-handle[data-v-3778b642],
-.drag-handle[data-v-3778b642]:hover,
-.drag-handle[data-v-3778b642]:focus-visible,
-[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-3778b642] {
+.row:hover .drag-handle[data-v-dab96891],
+.drag-handle[data-v-dab96891]:hover,
+.drag-handle[data-v-dab96891]:focus-visible,
+[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-dab96891] {
   opacity: 1;
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-3778b642] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-dab96891] {
   inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
 }
-.drag-handle[data-v-3778b642]:hover,
-.drag-handle[data-v-3778b642]:focus-visible {
+.drag-handle[data-v-dab96891]:hover,
+.drag-handle[data-v-dab96891]:focus-visible {
   color: var(--ui-text-primary);
   background: var(--ui-surface-hover);
 }
-.drag-handle[data-v-3778b642]:active {
+.drag-handle[data-v-dab96891]:active {
   cursor: grabbing;
 }
-.drop-indicator[data-v-3778b642] {
+.drop-indicator[data-v-dab96891] {
   position: absolute;
   z-index: 3;
   inset-inline: 1px;
@@ -5411,8 +5434,8 @@ to {
   background: var(--ui-tree-drop-color, var(--ui-accent-solid));
   pointer-events: none;
 }
-.drop-indicator[data-v-3778b642]::before,
-.drop-indicator[data-v-3778b642]::after {
+.drop-indicator[data-v-dab96891]::before,
+.drop-indicator[data-v-dab96891]::after {
   content: "";
   position: absolute;
   inset-block-start: 50%;
@@ -5423,39 +5446,39 @@ to {
   background: var(--ui-surface-elevated);
   transform: translateY(-50%);
 }
-.drop-indicator[data-v-3778b642]::before {
+.drop-indicator[data-v-dab96891]::before {
   inset-inline-start: -1px;
 }
-.drop-indicator[data-v-3778b642]::after {
+.drop-indicator[data-v-dab96891]::after {
   inset-inline-end: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-3778b642] {
+[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-dab96891] {
   display: block;
   inset-block-start: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-3778b642] {
+[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-dab96891] {
   display: block;
   inset-block-end: -1px;
 }
-.children[hidden][data-v-3778b642] {
+.children[hidden][data-v-dab96891] {
   display: none;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-3778b642] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-dab96891] {
   --_tree-row-min-height: 44px;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-3778b642] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-dab96891] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-.row[data-v-3778b642],
-  .disclosure-icon[data-v-3778b642],
-  .drag-handle[data-v-3778b642] {
+.row[data-v-dab96891],
+  .disclosure-icon[data-v-dab96891],
+  .drag-handle[data-v-dab96891] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tree-item"][hidden][data-v-3778b642] {
+[data-component~="ui-tree-item"][hidden][data-v-dab96891] {
   display: none;
 }
 /**