@threadlabs/looma 0.26.6 → 0.26.7

package/vue/components.css

@@ -5933,7 +5933,7 @@ svg[data-v-219fa683-s] {
    padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
    a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
    stay their own. */
-[data-component~="ui-list-item"][data-v-6c3bc8f3] {
+[data-component~="ui-list-item"][data-v-deeac109] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
 
@@ -5958,106 +5958,110 @@ svg[data-v-219fa683-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     border-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-6c3bc8f3] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-deeac109] {
   padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
   padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
   border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   background: var(--ui-surface-raised);
 }
-[data-component~="ui-list-item"][data-v-6c3bc8f3]:where(:has(.title a[href])):hover {
+[data-component~="ui-list-item"][data-v-deeac109]:where(:has(.title a[href])):hover,
+[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-deeac109],
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-deeac109] {
   background: var(--ui-selection-surface);
+  box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-6c3bc8f3]:where(:has(.title
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-deeac109]:where(:has(.title
   a[href])):hover {
   border-color: var(--ui-border-strong);
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-6c3bc8f3] {
-  background: var(--ui-selection-surface);
-}
-[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-6c3bc8f3] {
-  background: var(--ui-selection-surface);
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-deeac109] {
   color: var(--ui-selection-text);
 }
-[data-component~="ui-list-item"][data-v-6c3bc8f3]:has(.title a[href]:focus-visible) {
+
+/* Framed cards already have their own edge; the stronger focus ring stays separate. */
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-deeac109] {
+  box-shadow: none;
+}
+[data-component~="ui-list-item"][data-v-deeac109]:has(.title a[href]:focus-visible) {
   box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
 }
-.leading[data-v-6c3bc8f3],
-.trailing[data-v-6c3bc8f3] {
+.leading[data-v-deeac109],
+.trailing[data-v-deeac109] {
   display: inline-flex;
   flex: none;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.leading[data-v-6c3bc8f3] {
+.leading[data-v-deeac109] {
   color: var(--ui-text-muted);
   font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-6c3bc8f3] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-deeac109] {
   color: var(--ui-selection-text);
 }
 
 /* An explicitly independent leading control sits above the stretched row link. */
-[data-component~="ui-list-item"][data-ui-list-item-state~="leadingInteractive"] .leading[data-v-6c3bc8f3] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="leadingInteractive"] .leading[data-v-deeac109] {
   position: relative;
   z-index: 1;
 }
 
 /* Trailing controls take their own clicks, above the title link's stretched hit area. */
-.trailing[data-v-6c3bc8f3] {
+.trailing[data-v-deeac109] {
   position: relative;
   z-index: 1;
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
 }
-.content[data-v-6c3bc8f3] {
+.content[data-v-deeac109] {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: var(--ui-space-0-5, 2px);
   min-inline-size: 0;
 }
-.title[data-v-6c3bc8f3],
-.description[data-v-6c3bc8f3] {
+.title[data-v-deeac109],
+.description[data-v-deeac109] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .title[data-v-6c3bc8f3],
-[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description[data-v-6c3bc8f3] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .title[data-v-deeac109],
+[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description[data-v-deeac109] {
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.title[data-v-6c3bc8f3] {
+.title[data-v-deeac109] {
   font-size: var(--ui-font-size-md);
   font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
   line-height: var(--ui-line-height-tight);
 }
 
 /* Keep identity and disclosure marks beside the first line, even with a long description. */
-[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"][data-v-6c3bc8f3] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"][data-v-deeac109] {
   align-items: flex-start;
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .leading[data-v-6c3bc8f3],
-[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .trailing[data-v-6c3bc8f3] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .leading[data-v-deeac109],
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .trailing[data-v-deeac109] {
   min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
 }
-.description[data-v-6c3bc8f3] {
+.description[data-v-deeac109] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-tight);
 }
-.title > a[data-v-6c3bc8f3-s] {
+.title > a[data-v-deeac109-s] {
   color: inherit;
   text-decoration: none;
 }
-.title > a[data-v-6c3bc8f3-s]:focus-visible {
+.title > a[data-v-deeac109-s]:focus-visible {
   outline: none;
   box-shadow: none;
 }
-.title > a[href][data-v-6c3bc8f3-s]::after {
+.title > a[href][data-v-deeac109-s]::after {
   position: absolute;
   inset: 0;
   border-radius: inherit;
@@ -6065,24 +6069,24 @@ svg[data-v-219fa683-s] {
 }
 
 /* An unused region takes no space. */
-.leading[data-v-6c3bc8f3]:empty,
-.description[data-v-6c3bc8f3]:empty,
-.trailing[data-v-6c3bc8f3]:empty {
+.leading[data-v-deeac109]:empty,
+.description[data-v-deeac109]:empty,
+.trailing[data-v-deeac109]:empty {
   display: none;
 }
 @media (forced-colors: active) {
-[data-component~="ui-list-item"][data-v-6c3bc8f3]:has(a:focus-visible) {
+[data-component~="ui-list-item"][data-v-deeac109]:has(a:focus-visible) {
     outline: var(--ui-focus-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-focus-width));
 }
-:is([data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-6c3bc8f3], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-6c3bc8f3]):not(:has(a:focus-visible)) {
+:is([data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-deeac109], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-deeac109]):not(:has(a:focus-visible)) {
     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-list-item"][hidden][data-v-6c3bc8f3] {
+[data-component~="ui-list-item"][hidden][data-v-deeac109] {
   display: none;
 }
 
@@ -6619,7 +6623,7 @@ svg[data-v-219fa683-s] {
    default slot), and an optional line under it (description), such as the record a section
    belongs to. Label and description are one line each and end in an ellipsis, so every item in a
    navigation has the same height and the rail never grows sideways. */
-[data-component~="ui-nav-item"][data-v-5ff984a2] {
+[data-component~="ui-nav-item"][data-v-e4b23866] {
   --_indicator-width: var(--ui-nav-item-indicator-width, var(--ui-accent-line-width));
   --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
   position: relative;
@@ -6647,22 +6651,27 @@ svg[data-v-219fa683-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-nav-item"][data-v-5ff984a2]:hover:not([aria-current]) {
+[data-component~="ui-nav-item"][data-v-e4b23866]:hover:not([aria-current]) {
   background: var(--ui-nav-hover-surface);
   color: var(--ui-text-primary);
 }
 
 /* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
    box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
-[data-component~="ui-nav-item"][data-v-5ff984a2]:focus-visible {
+[data-component~="ui-nav-item"][data-v-e4b23866]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
   outline-offset: calc(-1 * var(--ui-focus-width));
 }
-[data-component~="ui-nav-item"][aria-current][data-v-5ff984a2] {
+[data-component~="ui-nav-item"][aria-current][data-v-e4b23866] {
   background: var(--ui-nav-item-current-surface, var(--ui-selection-surface));
   color: var(--ui-selection-text);
 }
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][data-v-5ff984a2] {
+
+/* A complete inset edge separates pale fills without changing rail geometry. */
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=surface"][data-v-e4b23866]:is(:hover, [aria-current]) {
+  box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
+}
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][data-v-e4b23866] {
   border-radius: 0;
 }
 
@@ -6671,29 +6680,29 @@ svg[data-v-219fa683-s] {
    The line is a border, not a fill: forced colors replace backgrounds but keep a
    border, so the current item stays marked in high contrast. Logical edges mirror it in a
    right-to-left page. */
-.indicator[data-v-5ff984a2] {
+.indicator[data-v-e4b23866] {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
   display: none;
   border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
 }
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][aria-current] .indicator[data-v-5ff984a2] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][aria-current] .indicator[data-v-e4b23866] {
   display: block;
 }
 @media (forced-colors: active) {
   /* System colors may erase the selected fill. Trace the complete surface, without
      creating an edge stripe; the stronger keyboard focus outline keeps precedence. */
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=surface"][aria-current][data-v-5ff984a2]:not(:focus-visible) {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=surface"][aria-current][data-v-e4b23866]:not(:focus-visible) {
     outline: var(--ui-border-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-border-width));
 }
-.indicator[data-v-5ff984a2] {
+.indicator[data-v-e4b23866] {
     border-inline-start-color: Highlight;
 }
 }
-.leading[data-v-5ff984a2],
-.trailing[data-v-5ff984a2] {
+.leading[data-v-e4b23866],
+.trailing[data-v-e4b23866] {
   display: inline-flex;
   flex: none;
   align-items: center;
@@ -6702,54 +6711,54 @@ svg[data-v-219fa683-s] {
   color: inherit;
   font-size: var(--ui-nav-icon-size);
 }
-.content[data-v-5ff984a2] {
+.content[data-v-e4b23866] {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: var(--ui-space-0-5, 2px);
   min-inline-size: 0;
 }
-.label[data-v-5ff984a2],
-.description[data-v-5ff984a2] {
+.label[data-v-e4b23866],
+.description[data-v-e4b23866] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.label[data-v-5ff984a2] {
+.label[data-v-e4b23866] {
   font-size: var(--ui-font-size-md);
   line-height: var(--ui-line-height-tight);
 }
-.description[data-v-5ff984a2] {
+.description[data-v-e4b23866] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-normal);
   line-height: var(--ui-line-height-tight);
 }
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"][data-v-5ff984a2] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"][data-v-e4b23866] {
   min-block-size: var(--ui-nav-compact-min-block-size);
   padding-block: var(--ui-nav-compact-padding-block);
   padding-inline: var(--ui-nav-compact-padding-inline);
 }
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .label[data-v-5ff984a2] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .label[data-v-e4b23866] {
   font-size: var(--ui-font-size-sm);
 }
 @media (pointer: coarse) {
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"][data-v-5ff984a2] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"][data-v-e4b23866] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
 
 /* An unused region takes no space. */
-.leading[data-v-5ff984a2]:empty,
-.trailing[data-v-5ff984a2]:empty,
-.description[data-v-5ff984a2]:empty {
+.leading[data-v-e4b23866]:empty,
+.trailing[data-v-e4b23866]:empty,
+.description[data-v-e4b23866]:empty {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-nav-item"][hidden][data-v-5ff984a2] {
+[data-component~="ui-nav-item"][hidden][data-v-e4b23866] {
   display: none;
 }
 
@@ -9310,7 +9319,7 @@ to {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-tree-item"][data-v-9fa5fb80] {
+[data-component~="ui-tree-item"][data-v-b69b9249] {
   /* 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(
@@ -9332,7 +9341,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-9fa5fb80] {
+.row[data-v-b69b9249] {
   position: relative;
   display: grid;
   grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
@@ -9349,54 +9358,57 @@ 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-9fa5fb80]:hover,
-.row[data-v-9fa5fb80]:focus-within {
+.row[data-v-b69b9249]:hover,
+.row[data-v-b69b9249]:focus-within {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
+  box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
 }
 
 /* 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-9fa5fb80] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] > .row[data-v-b69b9249] {
   color: var(--ui-selection-text);
   background: var(--ui-selection-surface);
+  box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
 }
 [data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"]:not([aria-disabled="true"])
   > .row
-  > .leading[data-v-9fa5fb80] {
+  > .leading[data-v-b69b9249] {
   color: var(--ui-selection-text);
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-9fa5fb80] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-b69b9249] {
   color: var(--ui-disabled-text);
   background: var(--ui-disabled-surface);
+  box-shadow: none;
 }
-[data-component~="ui-tree-item"][data-dragging]:not([data-move-source]) .row[data-v-9fa5fb80] {
+[data-component~="ui-tree-item"][data-dragging]:not([data-move-source]) .row[data-v-b69b9249] {
   opacity: 0.42;
 }
-[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-9fa5fb80],
-[data-component~="ui-tree-item"][data-move-source] > .row > .leading[data-v-9fa5fb80] {
+[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-b69b9249],
+[data-component~="ui-tree-item"][data-move-source] > .row > .leading[data-v-b69b9249] {
   opacity: 0.42;
 }
-[data-component~="ui-tree-item"][data-v-9fa5fb80]:focus {
+[data-component~="ui-tree-item"][data-v-b69b9249]:focus {
   outline: none;
 }
-[data-component~="ui-tree-item"]:focus-visible .row[data-v-9fa5fb80] {
+[data-component~="ui-tree-item"]:focus-visible .row[data-v-b69b9249] {
   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-9fa5fb80] {
+[data-component~="ui-tree-item"][data-drop-position="inside"] > .row[data-v-b69b9249] {
   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-9fa5fb80],
-.disclosure-spacer[data-v-9fa5fb80] {
+.disclosure[data-v-b69b9249],
+.disclosure-spacer[data-v-b69b9249] {
   grid-column: 1;
   grid-row: 1;
   inline-size: var(--_tree-disclosure-size);
   block-size: 28px;
 }
-.disclosure[data-v-9fa5fb80] {
+.disclosure[data-v-b69b9249] {
   display: grid;
   /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
   place-items: center start;
@@ -9407,10 +9419,10 @@ to {
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
 }
-.disclosure[hidden][data-v-9fa5fb80] {
+.disclosure[hidden][data-v-b69b9249] {
   display: none;
 }
-.selection-hit[data-v-9fa5fb80] {
+.selection-hit[data-v-b69b9249] {
   display: none;
   grid-column: 2;
   grid-row: 1;
@@ -9419,29 +9431,29 @@ to {
   block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
   cursor: pointer;
 }
-.selection-checkbox[data-v-9fa5fb80] {
+.selection-checkbox[data-v-b69b9249] {
   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-9fa5fb80] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row[data-v-b69b9249] {
   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-9fa5fb80] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .selection-hit[data-v-b69b9249] {
   display: grid;
 }
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .leading[data-v-9fa5fb80] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .leading[data-v-b69b9249] {
   grid-column: 3;
 }
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .label[data-v-9fa5fb80] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .label[data-v-b69b9249] {
   grid-column: 4;
 }
-.disclosure[data-v-9fa5fb80]:hover {
+.disclosure[data-v-b69b9249]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-elevated);
 }
-.disclosure-icon[data-v-9fa5fb80] {
+.disclosure-icon[data-v-b69b9249] {
   display: grid;
   place-items: center;
   inline-size: 12px;
@@ -9449,7 +9461,7 @@ to {
   transform: rotate(-90deg);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.disclosure-icon[data-v-9fa5fb80]::before {
+.disclosure-icon[data-v-b69b9249]::before {
   display: block;
   inline-size: 0.375rem;
   block-size: 0.375rem;
@@ -9459,19 +9471,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"] > .row > .disclosure > .disclosure-icon[data-v-9fa5fb80] {
+[data-component~="ui-tree-item"][aria-expanded="true"] > .row > .disclosure > .disclosure-icon[data-v-b69b9249] {
   transform: rotate(0deg);
 }
 
 /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
-.drag-handle svg[data-v-9fa5fb80] {
+.drag-handle svg[data-v-b69b9249] {
   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-9fa5fb80] {
+.leading[data-v-b69b9249] {
   display: inline-grid;
   place-items: center;
   grid-column: 2;
@@ -9484,12 +9496,12 @@ to {
   position: relative;
   z-index: 1;
 }
-.leading[data-v-9fa5fb80]:empty {
+.leading[data-v-b69b9249]: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-9fa5fb80-s],img[data-v-9fa5fb80-s] {
+svg[data-v-b69b9249-s],img[data-v-b69b9249-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -9498,7 +9510,7 @@ svg[data-v-9fa5fb80-s],img[data-v-9fa5fb80-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-9fa5fb80] {
+.label[data-v-b69b9249] {
   grid-column: 3;
   grid-row: 1;
   align-self: stretch;
@@ -9516,7 +9528,7 @@ svg[data-v-9fa5fb80-s],img[data-v-9fa5fb80-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-9fa5fb80] {
+.label-text[data-v-b69b9249] {
   display: flex;
   align-items: center;
   /* Stretches, so slotted content can still be the row's full-height hit area. */
@@ -9526,17 +9538,17 @@ svg[data-v-9fa5fb80-s],img[data-v-9fa5fb80-s] {
   inline-size: 100%;
   white-space: nowrap;
 }
-.label-text > [data-v-9fa5fb80-s] {
+.label-text > [data-v-b69b9249-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-9fa5fb80],
-.row:focus-within > .label[data-v-9fa5fb80],
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .label[data-v-9fa5fb80],
-[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-9fa5fb80] {
+.row:hover > .label[data-v-b69b9249],
+.row:focus-within > .label[data-v-b69b9249],
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .label[data-v-b69b9249],
+[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-b69b9249] {
   text-overflow: clip;
   mask-image: linear-gradient(
     to right,
@@ -9544,12 +9556,12 @@ svg[data-v-9fa5fb80-s],img[data-v-9fa5fb80-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row:hover > .label[data-v-9fa5fb80]:dir(rtl),
-.row:focus-within > .label[data-v-9fa5fb80]:dir(rtl),
+.row:hover > .label[data-v-b69b9249]:dir(rtl),
+.row:focus-within > .label[data-v-b69b9249]:dir(rtl),
 [data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"]
   > .row
-  > .label[data-v-9fa5fb80]:dir(rtl),
-[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-9fa5fb80]:dir(rtl) {
+  > .label[data-v-b69b9249]:dir(rtl),
+[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-b69b9249]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
@@ -9561,10 +9573,10 @@ svg[data-v-9fa5fb80-s],img[data-v-9fa5fb80-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-9fa5fb80] {
+.row[data-ui-marquee] > .label > .label-text[data-v-b69b9249] {
   /* 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-9fa5fb80 var(--_marquee-duration) linear 0.5s 1 normal forwards;
+  animation: ui-tree-item-marquee-b69b9249 var(--_marquee-duration) linear 0.5s 1 normal forwards;
   will-change: transform;
 }
 
@@ -9572,7 +9584,7 @@ svg[data-v-9fa5fb80-s],img[data-v-9fa5fb80-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-9fa5fb80] {
+.row[data-ui-marquee] > .label[data-v-b69b9249] {
   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))
@@ -9587,7 +9599,7 @@ svg[data-v-9fa5fb80-s],img[data-v-9fa5fb80-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row[data-ui-marquee] > .label[data-v-9fa5fb80]:dir(rtl) {
+.row[data-ui-marquee] > .label[data-v-b69b9249]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     transparent var(--_marquee-icon-width, 0px),
@@ -9598,7 +9610,7 @@ svg[data-v-9fa5fb80-s],img[data-v-9fa5fb80-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-@keyframes ui-tree-item-marquee-9fa5fb80 {
+@keyframes ui-tree-item-marquee-b69b9249 {
 from {
     transform: translateX(0);
 }
@@ -9609,15 +9621,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-9fa5fb80] {
+.row[data-ui-marquee] > .label > .label-text[data-v-b69b9249] {
     animation: none;
 }
 }
-.row:hover > .label > [data-v-9fa5fb80-s],
-.row:focus-within > .label > [data-v-9fa5fb80-s] {
+.row:hover > .label > [data-v-b69b9249-s],
+.row:focus-within > .label > [data-v-b69b9249-s] {
   text-overflow: clip;
 }
-.actions[data-v-9fa5fb80] {
+.actions[data-v-b69b9249] {
   position: absolute;
   z-index: 1;
   inset-block: 0;
@@ -9629,20 +9641,20 @@ to {
   pointer-events: none;
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover > .actions[data-v-9fa5fb80],
-.row:focus-within > .actions[data-v-9fa5fb80],
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .actions[data-v-9fa5fb80],
-[data-component~="ui-tree-item"][data-move-source] > .row > .actions[data-v-9fa5fb80] {
+.row:hover > .actions[data-v-b69b9249],
+.row:focus-within > .actions[data-v-b69b9249],
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .actions[data-v-b69b9249],
+[data-component~="ui-tree-item"][data-move-source] > .row > .actions[data-v-b69b9249] {
   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-9fa5fb80] {
+.row[data-v-b69b9249] {
     grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
 }
-.actions[data-v-9fa5fb80] {
+.actions[data-v-b69b9249] {
     position: static;
     grid-column: 4;
     grid-row: 1;
@@ -9651,13 +9663,13 @@ to {
     opacity: 1;
     pointer-events: auto;
 }
-.row:is(:hover, :focus-within) > .label[data-v-9fa5fb80],
-  .row:is(:hover, :focus-within) > .label[data-v-9fa5fb80]:dir(rtl),
-  [data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-9fa5fb80],
-  [data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-9fa5fb80]:dir(rtl) {
+.row:is(:hover, :focus-within) > .label[data-v-b69b9249],
+  .row:is(:hover, :focus-within) > .label[data-v-b69b9249]:dir(rtl),
+  [data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-b69b9249],
+  [data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-b69b9249]:dir(rtl) {
     mask-image: none;
 }
-.row[data-ui-marquee] > .label[data-v-9fa5fb80] {
+.row[data-ui-marquee] > .label[data-v-b69b9249] {
     mask-image: linear-gradient(
       to right,
       transparent var(--_marquee-icon-width, 0px),
@@ -9668,15 +9680,15 @@ to {
 }
 
   /* Persistent content has its own column on touch. Fade only the label's end. */
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .label[data-v-9fa5fb80] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .label[data-v-b69b9249] {
     mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
 }
 [data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"]
     > .row
-    > .label[data-v-9fa5fb80]:dir(rtl) {
+    > .label[data-v-b69b9249]:dir(rtl) {
     mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
 }
-.row[data-ui-marquee] > .label[data-v-9fa5fb80]:dir(rtl) {
+.row[data-ui-marquee] > .label[data-v-b69b9249]:dir(rtl) {
     mask-image: linear-gradient(
       to left,
       transparent var(--_marquee-icon-width, 0px),
@@ -9685,10 +9697,10 @@ to {
       )
     );
 }
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row[data-v-9fa5fb80] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row[data-v-b69b9249] {
     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-9fa5fb80] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .actions[data-v-b69b9249] {
     grid-column: 5;
 }
 }
@@ -9697,7 +9709,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-9fa5fb80] {
+.drag-handle[data-v-b69b9249] {
   position: absolute;
   z-index: 2;
   inset-block-start: 50%;
@@ -9718,24 +9730,24 @@ to {
   transform: translateY(-50%);
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover .drag-handle[data-v-9fa5fb80],
-.drag-handle[data-v-9fa5fb80]:hover,
-.drag-handle[data-v-9fa5fb80]:focus-visible,
-[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-9fa5fb80] {
+.row:hover .drag-handle[data-v-b69b9249],
+.drag-handle[data-v-b69b9249]:hover,
+.drag-handle[data-v-b69b9249]:focus-visible,
+[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-b69b9249] {
   opacity: 1;
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-9fa5fb80] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-b69b9249] {
   inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
 }
-.drag-handle[data-v-9fa5fb80]:hover,
-.drag-handle[data-v-9fa5fb80]:focus-visible {
+.drag-handle[data-v-b69b9249]:hover,
+.drag-handle[data-v-b69b9249]:focus-visible {
   color: var(--ui-text-primary);
   background: var(--ui-surface-hover);
 }
-.drag-handle[data-v-9fa5fb80]:active {
+.drag-handle[data-v-b69b9249]:active {
   cursor: grabbing;
 }
-.drop-indicator[data-v-9fa5fb80] {
+.drop-indicator[data-v-b69b9249] {
   position: absolute;
   z-index: 3;
   inset-inline: 1px;
@@ -9745,8 +9757,8 @@ to {
   background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
   pointer-events: none;
 }
-.drop-indicator[data-v-9fa5fb80]::before,
-.drop-indicator[data-v-9fa5fb80]::after {
+.drop-indicator[data-v-b69b9249]::before,
+.drop-indicator[data-v-b69b9249]::after {
   content: "";
   position: absolute;
   inset-block-start: 50%;
@@ -9757,34 +9769,34 @@ to {
   background: var(--ui-surface-elevated);
   transform: translateY(-50%);
 }
-.drop-indicator[data-v-9fa5fb80]::before {
+.drop-indicator[data-v-b69b9249]::before {
   inset-inline-start: -1px;
 }
-.drop-indicator[data-v-9fa5fb80]::after {
+.drop-indicator[data-v-b69b9249]::after {
   inset-inline-end: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-9fa5fb80] {
+[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-b69b9249] {
   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-9fa5fb80] {
+[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-b69b9249] {
   display: block;
   inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
 }
-.children[hidden][data-v-9fa5fb80] {
+.children[hidden][data-v-b69b9249] {
   display: none;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-9fa5fb80] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-b69b9249] {
   --_tree-row-min-height: 44px;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row[data-v-9fa5fb80] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row[data-v-b69b9249] {
   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-9fa5fb80],
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-b69b9249],
 html[data-ui-input-modality="touch"]
   [data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"]
   > .row
-  > .drag-handle[data-v-9fa5fb80] {
+  > .drag-handle[data-v-b69b9249] {
   position: relative;
   grid-column: 1;
   grid-row: 1;
@@ -9796,24 +9808,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-9fa5fb80] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .disclosure[data-v-b69b9249] {
   grid-column: 2;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .leading[data-v-9fa5fb80] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .leading[data-v-b69b9249] {
   grid-column: 3;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .label[data-v-9fa5fb80] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .label[data-v-b69b9249] {
   grid-column: 4;
 }
 html[data-ui-input-modality="touch"]
   [data-component~="ui-tree-item"][data-selection-mode="multiple"]
-  > .row[data-v-9fa5fb80] {
+  > .row[data-v-b69b9249] {
   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-9fa5fb80] {
+  > .selection-hit[data-v-b69b9249] {
   grid-column: 3;
   inline-size: 44px;
   block-size: 44px;
@@ -9821,55 +9833,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-9fa5fb80] {
+  > .leading[data-v-b69b9249] {
   grid-column: 4;
 }
 html[data-ui-input-modality="touch"]
   [data-component~="ui-tree-item"][data-selection-mode="multiple"]
   > .row
-  > .label[data-v-9fa5fb80] {
+  > .label[data-v-b69b9249] {
   grid-column: 5;
 }
 @media (hover: none), (pointer: coarse) {
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row[data-v-9fa5fb80] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row[data-v-b69b9249] {
     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-9fa5fb80] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .actions[data-v-b69b9249] {
     grid-column: 5;
 }
 html[data-ui-input-modality="touch"]
     [data-component~="ui-tree-item"][data-selection-mode="multiple"]
-    > .row[data-v-9fa5fb80] {
+    > .row[data-v-b69b9249] {
     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-9fa5fb80] {
+    > .actions[data-v-b69b9249] {
     grid-column: 6;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.row[data-v-9fa5fb80],
-  .disclosure-icon[data-v-9fa5fb80],
-  .drag-handle[data-v-9fa5fb80] {
+.row[data-v-b69b9249],
+  .disclosure-icon[data-v-b69b9249],
+  .drag-handle[data-v-b69b9249] {
     transition: none;
 }
 }
 @media (forced-colors: active) {
-[data-component~="ui-tree-item"]:focus-visible > .row[data-v-9fa5fb80] {
+[data-component~="ui-tree-item"]:focus-visible > .row[data-v-b69b9249] {
     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-9fa5fb80] {
+    > .row[data-v-b69b9249] {
     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-9fa5fb80] {
+[data-component~="ui-tree-item"][hidden][data-v-b69b9249] {
   display: none;
 }
 /* The editor surface owns its renderer canvas. Existing hooks retain their defaults. */