@threadlabs/looma 0.26.10 → 0.26.12

package/vue/components.css

@@ -1461,13 +1461,43 @@ html[data-ui-input-modality="touch"]
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-callout"][data-v-ca7a11cb] {
+[data-component~="ui-callout"][data-v-c8674799] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-callout-icon-column: var(--ui-callout-icon-column);
   --_ui-callout-icon: var(--ui-callout-icon);
   --_ui-callout-icon-size: var(--ui-callout-icon-size);
 
   --_callout-surface: var(--ui-info-soft);
+  --_ui-selection-context-surface: light-dark(
+    oklch(
+      from var(--ui-callout-surface, var(--_callout-surface))
+      calc(l - 0.045)
+      calc(max(c, min(0.045, c * 3)))
+      h
+    ),
+    oklch(
+      from var(--ui-callout-surface, var(--_callout-surface))
+      calc(l + 0.045)
+      calc(max(c, min(0.045, c * 3)))
+      h
+    )
+  );
+  --_ui-selection-context-border: light-dark(
+    oklch(
+      from var(--ui-callout-surface, var(--_callout-surface))
+      calc(l - 0.085)
+      calc(max(c, min(0.045, c * 3)))
+      h
+    ),
+    oklch(
+      from var(--ui-callout-surface, var(--_callout-surface))
+      calc(l + 0.085)
+      calc(max(c, min(0.045, c * 3)))
+      h
+    )
+  );
+  --_ui-selection-context-text: var(--ui-text-primary);
+
   --_callout-border: var(--ui-info-solid);
   --_callout-icon: var(--ui-info-solid);
 
@@ -1495,44 +1525,47 @@ html[data-ui-input-modality="touch"]
 }
 
 /* One line box tall, so the icon centres on the first line of text. */
-.icon[data-v-ca7a11cb] {
+.icon[data-v-c8674799] {
   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-ca7a11cb] {
+.icon svg[data-v-c8674799] {
   inline-size: var(--_ui-callout-icon-size, 1.125rem);
   block-size: var(--_ui-callout-icon-size, 1.125rem);
 }
-.content[data-v-ca7a11cb] {
+.content[data-v-c8674799] {
   min-inline-size: 0;
 }
-[data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"][data-v-ca7a11cb],
-[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-ca7a11cb] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"][data-v-c8674799],
+[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-c8674799] {
+  --_ui-selection-context-surface: initial;
+  --_ui-selection-context-border: initial;
+  --_ui-selection-context-text: initial;
   --_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-ca7a11cb] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-c8674799] {
   --_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-ca7a11cb] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-c8674799] {
   --_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-ca7a11cb] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-c8674799] {
   --_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-ca7a11cb-s] {
+.content a[data-v-c8674799-s] {
   color: var(--ui-accent-active);
   text-decoration: underline;
   text-decoration-thickness: 0.06em;
@@ -1540,13 +1573,17 @@ html[data-ui-input-modality="touch"]
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-callout"][hidden][data-v-ca7a11cb] {
+[data-component~="ui-callout"][hidden][data-v-c8674799] {
   display: none;
 }
 
 /* A surface that groups content. Its children stack with even space between them, so a card
        needs no layout of its own. */
-[data-component~="ui-card"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-v-150bfc3d] {
+  --_ui-card-surface: var(--ui-surface-raised);
+  --_ui-selection-context-surface: initial;
+  --_ui-selection-context-border: initial;
+  --_ui-selection-context-text: initial;
   display: flex;
   flex-direction: column;
   gap: var(--ui-space-4);
@@ -1555,67 +1592,84 @@ html[data-ui-input-modality="touch"]
   padding: var(--ui-space-5);
   border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
-  background: var(--ui-surface-raised);
+  background: var(--_ui-card-surface);
   color: var(--ui-text-primary);
 }
-[data-component~="ui-card"][data-ui-card-state~="padding=xs"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="padding=xs"][data-v-150bfc3d] {
   gap: var(--ui-space-1);
   padding: var(--ui-space-2);
 }
-[data-component~="ui-card"][data-ui-card-state~="padding=sm"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="padding=sm"][data-v-150bfc3d] {
   gap: var(--ui-space-2);
   padding: var(--ui-space-3);
 }
-[data-component~="ui-card"][data-ui-card-state~="padding=lg"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="padding=lg"][data-v-150bfc3d] {
   padding: var(--ui-space-6);
 }
-[data-component~="ui-card"][data-ui-card-state~="variant=subtle"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="variant=subtle"][data-v-150bfc3d] {
   border-color: transparent;
-  background: var(--ui-surface-muted);
+  --_ui-card-surface: var(--ui-surface-muted);
 }
-[data-component~="ui-card"][data-ui-card-state~="variant=elevated"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="variant=elevated"][data-v-150bfc3d] {
   border-color: var(--ui-border-subtle);
   box-shadow: var(--ui-shadow-lg);
 }
-[data-component~="ui-card"][data-ui-card-state~="tone=accent"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="tone=accent"][data-v-150bfc3d] {
   border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
-  background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
+  --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
 }
-[data-component~="ui-card"][data-ui-card-state~="tone=info"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="tone=info"][data-v-150bfc3d] {
   border-color: color-mix(in srgb, var(--ui-info) 25%, var(--ui-border-default));
-  background: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
+  --_ui-card-surface: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
 }
-[data-component~="ui-card"][data-ui-card-state~="tone=success"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="tone=success"][data-v-150bfc3d] {
   border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-border-default));
-  background: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
+  --_ui-card-surface: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
 }
-[data-component~="ui-card"][data-ui-card-state~="tone=warning"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="tone=warning"][data-v-150bfc3d] {
   border-color: color-mix(in srgb, var(--ui-warning) 25%, var(--ui-border-default));
-  background: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
+  --_ui-card-surface: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
 }
-[data-component~="ui-card"][data-ui-card-state~="variant=subtle"][data-v-aeaaae4a]:is([data-ui-card-state~="tone=accent"], [data-ui-card-state~="tone=info"], [data-ui-card-state~="tone=success"], [data-ui-card-state~="tone=warning"]) {
+[data-component~="ui-card"][data-ui-card-state~="variant=subtle"][data-v-150bfc3d]:is([data-ui-card-state~="tone=accent"], [data-ui-card-state~="tone=info"], [data-ui-card-state~="tone=success"], [data-ui-card-state~="tone=warning"]) {
   border-color: transparent;
 }
-[data-component~="ui-card"][data-ui-card-state~="tone=danger"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="tone=danger"][data-v-150bfc3d] {
   border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
   border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
-  background: var(--ui-danger-soft);
+  --_ui-card-surface: var(--ui-danger-soft);
+}
+
+/* A colored panel shades rows in its own hue, without changing button intent. */
+[data-component~="ui-card"][data-ui-card-state~="tone=accent"][data-v-150bfc3d],
+[data-component~="ui-card"][data-ui-card-state~="tone=info"][data-v-150bfc3d],
+[data-component~="ui-card"][data-ui-card-state~="tone=success"][data-v-150bfc3d],
+[data-component~="ui-card"][data-ui-card-state~="tone=warning"][data-v-150bfc3d],
+[data-component~="ui-card"][data-ui-card-state~="tone=danger"][data-v-150bfc3d] {
+  --_ui-selection-context-surface: light-dark(
+    oklch(from var(--_ui-card-surface) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
+    oklch(from var(--_ui-card-surface) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
+  );
+  --_ui-selection-context-border: light-dark(
+    oklch(from var(--_ui-card-surface) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
+    oklch(from var(--_ui-card-surface) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
+  );
+  --_ui-selection-context-text: var(--ui-text-primary);
 }
-[data-component~="ui-card"][data-ui-card-state~="size=sm"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="size=sm"][data-v-150bfc3d] {
   inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
   max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
 }
-[data-component~="ui-card"][data-ui-card-state~="size=md"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="size=md"][data-v-150bfc3d] {
   inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
   max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
 }
-[data-component~="ui-card"][data-ui-card-state~="size=lg"][data-v-aeaaae4a] {
+[data-component~="ui-card"][data-ui-card-state~="size=lg"][data-v-150bfc3d] {
   inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
   max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-card"][hidden][data-v-aeaaae4a] {
+[data-component~="ui-card"][hidden][data-v-150bfc3d] {
   display: none;
 }
 
@@ -5933,7 +5987,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-deeac109] {
+[data-component~="ui-list-item"][data-v-2363907e] {
   /* 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,110 +6012,111 @@ 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-deeac109] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-2363907e] {
   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-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-v-2363907e]:where(:has(.title a[href])):hover,
+[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-2363907e],
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-2363907e] {
+  background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
+  box-shadow: inset 0 0 0 var(--ui-border-width)
+    var(--_ui-selection-context-border, var(--ui-selection-border));
 }
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-deeac109]:where(:has(.title
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-2363907e]:where(:has(.title
   a[href])):hover {
   border-color: var(--ui-border-strong);
 }
-[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-ui-list-item-state~="current"][data-v-2363907e] {
+  color: var(--_ui-selection-context-text, var(--ui-selection-text));
 }
 
 /* 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] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-2363907e] {
   box-shadow: none;
 }
-[data-component~="ui-list-item"][data-v-deeac109]:has(.title a[href]:focus-visible) {
+[data-component~="ui-list-item"][data-v-2363907e]:has(.title a[href]:focus-visible) {
   box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
 }
-.leading[data-v-deeac109],
-.trailing[data-v-deeac109] {
+.leading[data-v-2363907e],
+.trailing[data-v-2363907e] {
   display: inline-flex;
   flex: none;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.leading[data-v-deeac109] {
+.leading[data-v-2363907e] {
   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-deeac109] {
-  color: var(--ui-selection-text);
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading[data-v-2363907e] {
+  color: var(--_ui-selection-context-text, 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-deeac109] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="leadingInteractive"] .leading[data-v-2363907e] {
   position: relative;
   z-index: 1;
 }
 
 /* Trailing controls take their own clicks, above the title link's stretched hit area. */
-.trailing[data-v-deeac109] {
+.trailing[data-v-2363907e] {
   position: relative;
   z-index: 1;
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
 }
-.content[data-v-deeac109] {
+.content[data-v-2363907e] {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: var(--ui-space-0-5, 2px);
   min-inline-size: 0;
 }
-.title[data-v-deeac109],
-.description[data-v-deeac109] {
+.title[data-v-2363907e],
+.description[data-v-2363907e] {
   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-deeac109],
-[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description[data-v-deeac109] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .title[data-v-2363907e],
+[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description[data-v-2363907e] {
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.title[data-v-deeac109] {
+.title[data-v-2363907e] {
   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-deeac109] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"][data-v-2363907e] {
   align-items: flex-start;
 }
-[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] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .leading[data-v-2363907e],
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .trailing[data-v-2363907e] {
   min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
 }
-.description[data-v-deeac109] {
+.description[data-v-2363907e] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-tight);
 }
-.title > a[data-v-deeac109-s] {
+.title > a[data-v-2363907e-s] {
   color: inherit;
   text-decoration: none;
 }
-.title > a[data-v-deeac109-s]:focus-visible {
+.title > a[data-v-2363907e-s]:focus-visible {
   outline: none;
   box-shadow: none;
 }
-.title > a[href][data-v-deeac109-s]::after {
+.title > a[href][data-v-2363907e-s]::after {
   position: absolute;
   inset: 0;
   border-radius: inherit;
@@ -6069,24 +6124,24 @@ svg[data-v-219fa683-s] {
 }
 
 /* An unused region takes no space. */
-.leading[data-v-deeac109]:empty,
-.description[data-v-deeac109]:empty,
-.trailing[data-v-deeac109]:empty {
+.leading[data-v-2363907e]:empty,
+.description[data-v-2363907e]:empty,
+.trailing[data-v-2363907e]:empty {
   display: none;
 }
 @media (forced-colors: active) {
-[data-component~="ui-list-item"][data-v-deeac109]:has(a:focus-visible) {
+[data-component~="ui-list-item"][data-v-2363907e]: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-deeac109], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-deeac109]):not(:has(a:focus-visible)) {
+:is([data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-2363907e], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"][data-v-2363907e]):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-deeac109] {
+[data-component~="ui-list-item"][hidden][data-v-2363907e] {
   display: none;
 }
 
@@ -6623,7 +6678,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-e4b23866] {
+[data-component~="ui-nav-item"][data-v-f82c0272] {
   --_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;
@@ -6651,27 +6706,31 @@ 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-e4b23866]:hover:not([aria-current]) {
-  background: var(--ui-nav-hover-surface);
+[data-component~="ui-nav-item"][data-v-f82c0272]:hover:not([aria-current]) {
+  background: var(--_ui-selection-context-surface, 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-e4b23866]:focus-visible {
+[data-component~="ui-nav-item"][data-v-f82c0272]: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-e4b23866] {
-  background: var(--ui-nav-item-current-surface, var(--ui-selection-surface));
-  color: var(--ui-selection-text);
+[data-component~="ui-nav-item"][aria-current][data-v-f82c0272] {
+  background: var(
+    --ui-nav-item-current-surface,
+    var(--_ui-selection-context-surface, var(--ui-selection-surface))
+  );
+  color: var(--_ui-selection-context-text, var(--ui-selection-text));
 }
 
 /* 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=surface"][data-v-f82c0272]:is(:hover, [aria-current]) {
+  box-shadow: inset 0 0 0 var(--ui-border-width)
+    var(--_ui-selection-context-border, var(--ui-selection-border));
 }
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][data-v-e4b23866] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][data-v-f82c0272] {
   border-radius: 0;
 }
 
@@ -6680,29 +6739,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-e4b23866] {
+.indicator[data-v-f82c0272] {
   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-e4b23866] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][aria-current] .indicator[data-v-f82c0272] {
   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-e4b23866]:not(:focus-visible) {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=surface"][aria-current][data-v-f82c0272]:not(:focus-visible) {
     outline: var(--ui-border-width) solid Highlight;
     outline-offset: calc(-1 * var(--ui-border-width));
 }
-.indicator[data-v-e4b23866] {
+.indicator[data-v-f82c0272] {
     border-inline-start-color: Highlight;
 }
 }
-.leading[data-v-e4b23866],
-.trailing[data-v-e4b23866] {
+.leading[data-v-f82c0272],
+.trailing[data-v-f82c0272] {
   display: inline-flex;
   flex: none;
   align-items: center;
@@ -6711,54 +6770,54 @@ svg[data-v-219fa683-s] {
   color: inherit;
   font-size: var(--ui-nav-icon-size);
 }
-.content[data-v-e4b23866] {
+.content[data-v-f82c0272] {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: var(--ui-space-0-5, 2px);
   min-inline-size: 0;
 }
-.label[data-v-e4b23866],
-.description[data-v-e4b23866] {
+.label[data-v-f82c0272],
+.description[data-v-f82c0272] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.label[data-v-e4b23866] {
+.label[data-v-f82c0272] {
   font-size: var(--ui-font-size-md);
   line-height: var(--ui-line-height-tight);
 }
-.description[data-v-e4b23866] {
+.description[data-v-f82c0272] {
   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-e4b23866] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"][data-v-f82c0272] {
   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-e4b23866] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .label[data-v-f82c0272] {
   font-size: var(--ui-font-size-sm);
 }
 @media (pointer: coarse) {
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"][data-v-e4b23866] {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"][data-v-f82c0272] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
 
 /* An unused region takes no space. */
-.leading[data-v-e4b23866]:empty,
-.trailing[data-v-e4b23866]:empty,
-.description[data-v-e4b23866]:empty {
+.leading[data-v-f82c0272]:empty,
+.trailing[data-v-f82c0272]:empty,
+.description[data-v-f82c0272]: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-e4b23866] {
+[data-component~="ui-nav-item"][hidden][data-v-f82c0272] {
   display: none;
 }
 
@@ -7208,7 +7267,7 @@ legend[data-v-0bead1b5] + * {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-search-result-row"][data-v-6ea384f9] {
+[data-component~="ui-search-result-row"][data-v-3f6b9d17] {
   appearance: none;
   inline-size: 100%;
   min-block-size: var(--ui-search-result-row-min-height, 56px);
@@ -7226,7 +7285,7 @@ legend[data-v-0bead1b5] + * {
   text-align: left;
   transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"][data-v-6ea384f9] {
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"][data-v-3f6b9d17] {
   min-block-size: var(--ui-search-result-row-min-height, 3.125rem);
   padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1));
   padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2));
@@ -7237,75 +7296,75 @@ legend[data-v-0bead1b5] + * {
 
 /* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
 [data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"]
-  .title[data-v-6ea384f9] {
+  .title[data-v-3f6b9d17] {
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"] .meta[data-v-6ea384f9] {
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"] .meta[data-v-3f6b9d17] {
   font-size: var(--ui-font-size-xs);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-search-result-row"][data-v-6ea384f9]:hover:enabled {
+[data-component~="ui-search-result-row"][data-v-3f6b9d17]:hover:enabled {
   background: var(
     --ui-search-result-row-hover-surface,
-    color-mix(in srgb, var(--ui-surface) 85%, black 3%)
+    var(--_ui-selection-context-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
   );
 }
-[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"][data-v-6ea384f9] {
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"][data-v-3f6b9d17] {
   background: var(
     --ui-search-result-row-selected-bg,
-    var(--ui-selection-surface)
+    var(--_ui-selection-context-surface, var(--ui-selection-surface))
   );
-  color: var(--ui-selection-text);
+  color: var(--_ui-selection-context-text, var(--ui-selection-text));
 }
-[data-component~="ui-search-result-row"][data-v-6ea384f9]:focus-visible {
+[data-component~="ui-search-result-row"][data-v-3f6b9d17]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
   outline-offset: calc(-1 * var(--ui-focus-width));
 }
-[data-component~="ui-search-result-row"][data-v-6ea384f9]:disabled {
+[data-component~="ui-search-result-row"][data-v-3f6b9d17]:disabled {
   background: var(--ui-disabled-surface);
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.leading[data-v-6ea384f9],
-.trailing[data-v-6ea384f9] {
+.leading[data-v-3f6b9d17],
+.trailing[data-v-3f6b9d17] {
   display: inline-flex;
   align-items: flex-start;
   flex-shrink: 0;
 }
-.content[data-v-6ea384f9] {
+.content[data-v-3f6b9d17] {
   min-inline-size: 0;
   flex: 1;
   display: flex;
   flex-direction: column;
 }
-.title[data-v-6ea384f9],
-.meta[data-v-6ea384f9],
-.excerpt[data-v-6ea384f9] {
+.title[data-v-3f6b9d17],
+.meta[data-v-3f6b9d17],
+.excerpt[data-v-3f6b9d17] {
   display: block;
   min-inline-size: 0;
 }
 
 /* An unused region takes no space. */
-.leading[data-v-6ea384f9]:empty,
-.meta[data-v-6ea384f9]:empty,
-.excerpt[data-v-6ea384f9]:empty,
-.trailing[data-v-6ea384f9]:empty {
+.leading[data-v-3f6b9d17]:empty,
+.meta[data-v-3f6b9d17]:empty,
+.excerpt[data-v-3f6b9d17]:empty,
+.trailing[data-v-3f6b9d17]:empty {
   display: none;
 }
-[slot="title"][data-v-6ea384f9-s],[slot="meta"][data-v-6ea384f9-s],[slot="excerpt"][data-v-6ea384f9-s] {
+[slot="title"][data-v-3f6b9d17-s],[slot="meta"][data-v-3f6b9d17-s],[slot="excerpt"][data-v-3f6b9d17-s] {
   display: block;
   margin: 0;
 }
 @media (forced-colors: active) {
-[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"][data-v-6ea384f9]:not(:focus-visible):not(:disabled) {
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"][data-v-3f6b9d17]:not(:focus-visible):not(:disabled) {
     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-search-result-row"][hidden][data-v-6ea384f9] {
+[data-component~="ui-search-result-row"][hidden][data-v-3f6b9d17] {
   display: none;
 }
 
@@ -7503,77 +7562,89 @@ dialog[data-v-0778ed20] {
 
 /* A part of a view: a heading, an optional line under it, actions for the whole section at its
        end, and the content. Sections space themselves out through the Stack around them. */
-[data-component~="ui-section"][data-v-efbbec43] {
+[data-component~="ui-section"][data-v-93e8cb94] {
   display: flex;
   flex-direction: column;
   gap: var(--ui-space-4);
   min-inline-size: 0;
 }
-[data-component~="ui-section"][data-ui-section-state~="variant=card"][data-v-efbbec43] {
+[data-component~="ui-section"][data-ui-section-state~="variant=card"][data-v-93e8cb94] {
+  --_ui-selection-context-surface: initial;
+  --_ui-selection-context-border: initial;
+  --_ui-selection-context-text: initial;
   padding: var(--ui-space-5);
   border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   background: var(--ui-surface-raised);
 }
-[data-component~="ui-section"][data-ui-section-state~="variant=divided"][data-v-efbbec43] {
+[data-component~="ui-section"][data-ui-section-state~="variant=divided"][data-v-93e8cb94] {
   padding-block-start: var(--ui-space-6);
   border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
-[data-component~="ui-section"][data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"][data-v-efbbec43] {
+[data-component~="ui-section"][data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"][data-v-93e8cb94] {
+  --_ui-selection-context-surface: light-dark(
+    oklch(from var(--ui-danger-soft) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
+    oklch(from var(--ui-danger-soft) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
+  );
+  --_ui-selection-context-border: light-dark(
+    oklch(from var(--ui-danger-soft) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
+    oklch(from var(--ui-danger-soft) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
+  );
+  --_ui-selection-context-text: var(--ui-text-primary);
   border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
   border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
   background: var(--ui-danger-soft);
 }
-.head[data-v-efbbec43] {
+.head[data-v-93e8cb94] {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--ui-space-2) var(--ui-space-4);
 }
-.copy[data-v-efbbec43] {
+.copy[data-v-93e8cb94] {
   display: flex;
   flex: 1 1 16rem;
   flex-direction: column;
   gap: var(--ui-space-1);
   min-inline-size: 0;
 }
-.heading[data-v-efbbec43] {
+.heading[data-v-93e8cb94] {
   margin: 0;
   color: var(--ui-text-primary);
   font-size: var(--ui-font-size-lg);
   font-weight: var(--ui-font-semibold);
   line-height: var(--ui-line-height-tight);
 }
-[data-component~="ui-section"][data-ui-section-state~="tone=danger"] .heading[data-v-efbbec43] {
+[data-component~="ui-section"][data-ui-section-state~="tone=danger"] .heading[data-v-93e8cb94] {
   color: var(--ui-danger);
 }
-.description[data-v-efbbec43] {
+.description[data-v-93e8cb94] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-.actions[data-v-efbbec43] {
+.actions[data-v-93e8cb94] {
   display: inline-flex;
   flex-wrap: wrap;
   gap: var(--ui-space-2);
 }
-.body[data-v-efbbec43] {
+.body[data-v-93e8cb94] {
   display: flex;
   flex-direction: column;
   gap: var(--ui-space-4);
   min-inline-size: 0;
 }
-.description[data-v-efbbec43]:empty,
-.actions[data-v-efbbec43]:empty {
+.description[data-v-93e8cb94]:empty,
+.actions[data-v-93e8cb94]:empty {
   display: none;
 }
-.head[data-v-efbbec43]:has(.heading[hidden]):has(.description:empty):has(.actions:empty) {
+.head[data-v-93e8cb94]:has(.heading[hidden]):has(.description:empty):has(.actions:empty) {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-section"][hidden][data-v-efbbec43] {
+[data-component~="ui-section"][hidden][data-v-93e8cb94] {
   display: none;
 }
 
@@ -9319,7 +9390,7 @@ to {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-tree-item"][data-v-b69b9249] {
+[data-component~="ui-tree-item"][data-v-8f2cc947] {
   /* 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(
@@ -9341,7 +9412,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-b69b9249] {
+.row[data-v-8f2cc947] {
   position: relative;
   display: grid;
   grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
@@ -9358,57 +9429,59 @@ 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-b69b9249]:hover,
-.row[data-v-b69b9249]:focus-within {
+.row[data-v-8f2cc947]:hover,
+.row[data-v-8f2cc947]: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);
+  background: var(--_ui-selection-context-surface, var(--ui-surface-muted));
+  box-shadow: inset 0 0 0 var(--ui-border-width)
+    var(--_ui-selection-context-border, 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-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"] > .row[data-v-8f2cc947] {
+  color: var(--_ui-selection-context-text, var(--ui-selection-text));
+  background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
+  box-shadow: inset 0 0 0 var(--ui-border-width)
+    var(--_ui-selection-context-border, var(--ui-selection-border));
 }
 [data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"]:not([aria-disabled="true"])
   > .row
-  > .leading[data-v-b69b9249] {
-  color: var(--ui-selection-text);
+  > .leading[data-v-8f2cc947] {
+  color: var(--_ui-selection-context-text, var(--ui-selection-text));
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-b69b9249] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-8f2cc947] {
   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-b69b9249] {
+[data-component~="ui-tree-item"][data-dragging]:not([data-move-source]) .row[data-v-8f2cc947] {
   opacity: 0.42;
 }
-[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] {
+[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-8f2cc947],
+[data-component~="ui-tree-item"][data-move-source] > .row > .leading[data-v-8f2cc947] {
   opacity: 0.42;
 }
-[data-component~="ui-tree-item"][data-v-b69b9249]:focus {
+[data-component~="ui-tree-item"][data-v-8f2cc947]:focus {
   outline: none;
 }
-[data-component~="ui-tree-item"]:focus-visible .row[data-v-b69b9249] {
+[data-component~="ui-tree-item"]:focus-visible .row[data-v-8f2cc947] {
   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-b69b9249] {
+[data-component~="ui-tree-item"][data-drop-position="inside"] > .row[data-v-8f2cc947] {
   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-b69b9249],
-.disclosure-spacer[data-v-b69b9249] {
+.disclosure[data-v-8f2cc947],
+.disclosure-spacer[data-v-8f2cc947] {
   grid-column: 1;
   grid-row: 1;
   inline-size: var(--_tree-disclosure-size);
   block-size: 28px;
 }
-.disclosure[data-v-b69b9249] {
+.disclosure[data-v-8f2cc947] {
   display: grid;
   /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
   place-items: center start;
@@ -9419,10 +9492,10 @@ to {
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
 }
-.disclosure[hidden][data-v-b69b9249] {
+.disclosure[hidden][data-v-8f2cc947] {
   display: none;
 }
-.selection-hit[data-v-b69b9249] {
+.selection-hit[data-v-8f2cc947] {
   display: none;
   grid-column: 2;
   grid-row: 1;
@@ -9431,29 +9504,29 @@ to {
   block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
   cursor: pointer;
 }
-.selection-checkbox[data-v-b69b9249] {
+.selection-checkbox[data-v-8f2cc947] {
   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-b69b9249] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row[data-v-8f2cc947] {
   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-b69b9249] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .selection-hit[data-v-8f2cc947] {
   display: grid;
 }
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .leading[data-v-b69b9249] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .leading[data-v-8f2cc947] {
   grid-column: 3;
 }
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .label[data-v-b69b9249] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .label[data-v-8f2cc947] {
   grid-column: 4;
 }
-.disclosure[data-v-b69b9249]:hover {
+.disclosure[data-v-8f2cc947]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-elevated);
 }
-.disclosure-icon[data-v-b69b9249] {
+.disclosure-icon[data-v-8f2cc947] {
   display: grid;
   place-items: center;
   inline-size: 12px;
@@ -9461,7 +9534,7 @@ to {
   transform: rotate(-90deg);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.disclosure-icon[data-v-b69b9249]::before {
+.disclosure-icon[data-v-8f2cc947]::before {
   display: block;
   inline-size: 0.375rem;
   block-size: 0.375rem;
@@ -9471,19 +9544,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-b69b9249] {
+[data-component~="ui-tree-item"][aria-expanded="true"] > .row > .disclosure > .disclosure-icon[data-v-8f2cc947] {
   transform: rotate(0deg);
 }
 
 /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
-.drag-handle svg[data-v-b69b9249] {
+.drag-handle svg[data-v-8f2cc947] {
   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-b69b9249] {
+.leading[data-v-8f2cc947] {
   display: inline-grid;
   place-items: center;
   grid-column: 2;
@@ -9496,12 +9569,12 @@ to {
   position: relative;
   z-index: 1;
 }
-.leading[data-v-b69b9249]:empty {
+.leading[data-v-8f2cc947]: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-b69b9249-s],img[data-v-b69b9249-s] {
+svg[data-v-8f2cc947-s],img[data-v-8f2cc947-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -9510,7 +9583,7 @@ svg[data-v-b69b9249-s],img[data-v-b69b9249-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-b69b9249] {
+.label[data-v-8f2cc947] {
   grid-column: 3;
   grid-row: 1;
   align-self: stretch;
@@ -9528,7 +9601,7 @@ svg[data-v-b69b9249-s],img[data-v-b69b9249-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-b69b9249] {
+.label-text[data-v-8f2cc947] {
   display: flex;
   align-items: center;
   /* Stretches, so slotted content can still be the row's full-height hit area. */
@@ -9538,17 +9611,17 @@ svg[data-v-b69b9249-s],img[data-v-b69b9249-s] {
   inline-size: 100%;
   white-space: nowrap;
 }
-.label-text > [data-v-b69b9249-s] {
+.label-text > [data-v-8f2cc947-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-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] {
+.row:hover > .label[data-v-8f2cc947],
+.row:focus-within > .label[data-v-8f2cc947],
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .label[data-v-8f2cc947],
+[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-8f2cc947] {
   text-overflow: clip;
   mask-image: linear-gradient(
     to right,
@@ -9556,12 +9629,12 @@ svg[data-v-b69b9249-s],img[data-v-b69b9249-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row:hover > .label[data-v-b69b9249]:dir(rtl),
-.row:focus-within > .label[data-v-b69b9249]:dir(rtl),
+.row:hover > .label[data-v-8f2cc947]:dir(rtl),
+.row:focus-within > .label[data-v-8f2cc947]:dir(rtl),
 [data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"]
   > .row
-  > .label[data-v-b69b9249]:dir(rtl),
-[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-b69b9249]:dir(rtl) {
+  > .label[data-v-8f2cc947]:dir(rtl),
+[data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-8f2cc947]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
@@ -9573,10 +9646,10 @@ svg[data-v-b69b9249-s],img[data-v-b69b9249-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-b69b9249] {
+.row[data-ui-marquee] > .label > .label-text[data-v-8f2cc947] {
   /* 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-b69b9249 var(--_marquee-duration) linear 0.5s 1 normal forwards;
+  animation: ui-tree-item-marquee-8f2cc947 var(--_marquee-duration) linear 0.5s 1 normal forwards;
   will-change: transform;
 }
 
@@ -9584,7 +9657,7 @@ svg[data-v-b69b9249-s],img[data-v-b69b9249-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-b69b9249] {
+.row[data-ui-marquee] > .label[data-v-8f2cc947] {
   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))
@@ -9599,7 +9672,7 @@ svg[data-v-b69b9249-s],img[data-v-b69b9249-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row[data-ui-marquee] > .label[data-v-b69b9249]:dir(rtl) {
+.row[data-ui-marquee] > .label[data-v-8f2cc947]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     transparent var(--_marquee-icon-width, 0px),
@@ -9610,7 +9683,7 @@ svg[data-v-b69b9249-s],img[data-v-b69b9249-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-@keyframes ui-tree-item-marquee-b69b9249 {
+@keyframes ui-tree-item-marquee-8f2cc947 {
 from {
     transform: translateX(0);
 }
@@ -9621,15 +9694,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-b69b9249] {
+.row[data-ui-marquee] > .label > .label-text[data-v-8f2cc947] {
     animation: none;
 }
 }
-.row:hover > .label > [data-v-b69b9249-s],
-.row:focus-within > .label > [data-v-b69b9249-s] {
+.row:hover > .label > [data-v-8f2cc947-s],
+.row:focus-within > .label > [data-v-8f2cc947-s] {
   text-overflow: clip;
 }
-.actions[data-v-b69b9249] {
+.actions[data-v-8f2cc947] {
   position: absolute;
   z-index: 1;
   inset-block: 0;
@@ -9641,20 +9714,20 @@ to {
   pointer-events: none;
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.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] {
+.row:hover > .actions[data-v-8f2cc947],
+.row:focus-within > .actions[data-v-8f2cc947],
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .actions[data-v-8f2cc947],
+[data-component~="ui-tree-item"][data-move-source] > .row > .actions[data-v-8f2cc947] {
   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-b69b9249] {
+.row[data-v-8f2cc947] {
     grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
 }
-.actions[data-v-b69b9249] {
+.actions[data-v-8f2cc947] {
     position: static;
     grid-column: 4;
     grid-row: 1;
@@ -9663,13 +9736,13 @@ to {
     opacity: 1;
     pointer-events: auto;
 }
-.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) {
+.row:is(:hover, :focus-within) > .label[data-v-8f2cc947],
+  .row:is(:hover, :focus-within) > .label[data-v-8f2cc947]:dir(rtl),
+  [data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-8f2cc947],
+  [data-component~="ui-tree-item"][data-move-source] > .row > .label[data-v-8f2cc947]:dir(rtl) {
     mask-image: none;
 }
-.row[data-ui-marquee] > .label[data-v-b69b9249] {
+.row[data-ui-marquee] > .label[data-v-8f2cc947] {
     mask-image: linear-gradient(
       to right,
       transparent var(--_marquee-icon-width, 0px),
@@ -9680,15 +9753,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-b69b9249] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .label[data-v-8f2cc947] {
     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-b69b9249]:dir(rtl) {
+    > .label[data-v-8f2cc947]:dir(rtl) {
     mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
 }
-.row[data-ui-marquee] > .label[data-v-b69b9249]:dir(rtl) {
+.row[data-ui-marquee] > .label[data-v-8f2cc947]:dir(rtl) {
     mask-image: linear-gradient(
       to left,
       transparent var(--_marquee-icon-width, 0px),
@@ -9697,10 +9770,10 @@ to {
       )
     );
 }
-[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row[data-v-b69b9249] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row[data-v-8f2cc947] {
     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-b69b9249] {
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .actions[data-v-8f2cc947] {
     grid-column: 5;
 }
 }
@@ -9709,7 +9782,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-b69b9249] {
+.drag-handle[data-v-8f2cc947] {
   position: absolute;
   z-index: 2;
   inset-block-start: 50%;
@@ -9730,24 +9803,24 @@ to {
   transform: translateY(-50%);
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.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] {
+.row:hover .drag-handle[data-v-8f2cc947],
+.drag-handle[data-v-8f2cc947]:hover,
+.drag-handle[data-v-8f2cc947]:focus-visible,
+[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-8f2cc947] {
   opacity: 1;
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-b69b9249] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-8f2cc947] {
   inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
 }
-.drag-handle[data-v-b69b9249]:hover,
-.drag-handle[data-v-b69b9249]:focus-visible {
+.drag-handle[data-v-8f2cc947]:hover,
+.drag-handle[data-v-8f2cc947]:focus-visible {
   color: var(--ui-text-primary);
   background: var(--ui-surface-hover);
 }
-.drag-handle[data-v-b69b9249]:active {
+.drag-handle[data-v-8f2cc947]:active {
   cursor: grabbing;
 }
-.drop-indicator[data-v-b69b9249] {
+.drop-indicator[data-v-8f2cc947] {
   position: absolute;
   z-index: 3;
   inset-inline: 1px;
@@ -9757,8 +9830,8 @@ to {
   background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
   pointer-events: none;
 }
-.drop-indicator[data-v-b69b9249]::before,
-.drop-indicator[data-v-b69b9249]::after {
+.drop-indicator[data-v-8f2cc947]::before,
+.drop-indicator[data-v-8f2cc947]::after {
   content: "";
   position: absolute;
   inset-block-start: 50%;
@@ -9769,34 +9842,34 @@ to {
   background: var(--ui-surface-elevated);
   transform: translateY(-50%);
 }
-.drop-indicator[data-v-b69b9249]::before {
+.drop-indicator[data-v-8f2cc947]::before {
   inset-inline-start: -1px;
 }
-.drop-indicator[data-v-b69b9249]::after {
+.drop-indicator[data-v-8f2cc947]::after {
   inset-inline-end: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-b69b9249] {
+[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-8f2cc947] {
   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-b69b9249] {
+[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-8f2cc947] {
   display: block;
   inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
 }
-.children[hidden][data-v-b69b9249] {
+.children[hidden][data-v-8f2cc947] {
   display: none;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-b69b9249] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-8f2cc947] {
   --_tree-row-min-height: 44px;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row[data-v-b69b9249] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row[data-v-8f2cc947] {
   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-b69b9249],
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-8f2cc947],
 html[data-ui-input-modality="touch"]
   [data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"]
   > .row
-  > .drag-handle[data-v-b69b9249] {
+  > .drag-handle[data-v-8f2cc947] {
   position: relative;
   grid-column: 1;
   grid-row: 1;
@@ -9808,24 +9881,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-b69b9249] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .disclosure[data-v-8f2cc947] {
   grid-column: 2;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .leading[data-v-b69b9249] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .leading[data-v-8f2cc947] {
   grid-column: 3;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .label[data-v-b69b9249] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .label[data-v-8f2cc947] {
   grid-column: 4;
 }
 html[data-ui-input-modality="touch"]
   [data-component~="ui-tree-item"][data-selection-mode="multiple"]
-  > .row[data-v-b69b9249] {
+  > .row[data-v-8f2cc947] {
   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-b69b9249] {
+  > .selection-hit[data-v-8f2cc947] {
   grid-column: 3;
   inline-size: 44px;
   block-size: 44px;
@@ -9833,57 +9906,93 @@ 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-b69b9249] {
+  > .leading[data-v-8f2cc947] {
   grid-column: 4;
 }
 html[data-ui-input-modality="touch"]
   [data-component~="ui-tree-item"][data-selection-mode="multiple"]
   > .row
-  > .label[data-v-b69b9249] {
+  > .label[data-v-8f2cc947] {
   grid-column: 5;
 }
 @media (hover: none), (pointer: coarse) {
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row[data-v-b69b9249] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row[data-v-8f2cc947] {
     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-b69b9249] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .actions[data-v-8f2cc947] {
     grid-column: 5;
 }
 html[data-ui-input-modality="touch"]
     [data-component~="ui-tree-item"][data-selection-mode="multiple"]
-    > .row[data-v-b69b9249] {
+    > .row[data-v-8f2cc947] {
     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-b69b9249] {
+    > .actions[data-v-8f2cc947] {
     grid-column: 6;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.row[data-v-b69b9249],
-  .disclosure-icon[data-v-b69b9249],
-  .drag-handle[data-v-b69b9249] {
+.row[data-v-8f2cc947],
+  .disclosure-icon[data-v-8f2cc947],
+  .drag-handle[data-v-8f2cc947] {
     transition: none;
 }
 }
 @media (forced-colors: active) {
-[data-component~="ui-tree-item"]:focus-visible > .row[data-v-b69b9249] {
+[data-component~="ui-tree-item"]:focus-visible > .row[data-v-8f2cc947] {
     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-b69b9249] {
+    > .row[data-v-8f2cc947] {
     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-b69b9249] {
+[data-component~="ui-tree-item"][hidden][data-v-8f2cc947] {
   display: none;
 }
+/* Short-form field primitive: the same field tokens as Textarea. */
+.looma-compact-editor {
+  min-inline-size: 0;
+  border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+  border-radius: var(--ui-field-radius, var(--ui-radius-md));
+  background: var(--ui-control-surface, var(--ui-surface-elevated));
+  color: var(--ui-text-primary);
+  box-shadow: var(--ui-control-inset);
+}
+.looma-compact-editor:focus-within {
+  outline: var(--ui-focus-ring-width, 2px) solid var(--ui-focus-ring, var(--ui-accent-solid));
+  outline-offset: var(--ui-focus-ring-offset, 2px);
+}
+.looma-compact-editor .ProseMirror {
+  min-block-size: calc(3 * 1.5em);
+  max-block-size: 12em;
+  overflow-y: auto;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  outline: none;
+}
+.looma-compact-editor, .looma-compact-content {
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal, 400);
+  line-height: var(--ui-line-height-md);
+  overflow-wrap: anywhere;
+}
+.looma-compact-editor p, .looma-compact-content p { margin: 0; }
+.looma-compact-editor p + p, .looma-compact-content p + p { margin-block-start: var(--ui-space-2); }
+.looma-compact-editor strong, .looma-compact-content strong { font-weight: var(--ui-font-bold); }
+.looma-compact-editor code, .looma-compact-content code {
+  font-family: var(--ui-font-mono);
+  padding-inline: var(--ui-space-1);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-surface-muted);
+}
+@media (pointer: coarse) { .looma-compact-editor { font-size: var(--ui-font-size-md); } }
 /* The editor surface owns its renderer canvas. Existing hooks retain their defaults. */
 [data-component~="ui-editor-surface"] .ProseMirror {
   min-height: var(--ui-editor-content-min-height, var(--_ui-editor-content-min-height, 300px));