@threadlabs/looma 0.7.3 → 0.8.0

package/vue/components.css

@@ -12,7 +12,7 @@
   display: none;
 }
 
-[data-component~="ui-avatar"][data-v-64e52bdd] {
+[data-component~="ui-avatar"][data-v-eb16b513] {
   display: inline-grid;
   place-items: center;
   overflow: hidden;
@@ -23,17 +23,17 @@
   background: var(--ui-avatar-surface, var(--ui-accent-soft));
   color: var(--ui-avatar-text, var(--ui-accent-solid));
   font: inherit;
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
   font-weight: 600;
   text-transform: uppercase;
 }
-.image[data-v-64e52bdd],img[data-v-64e52bdd-s] {
+.image[data-v-eb16b513],img[data-v-eb16b513-s] {
   grid-area: 1 / 1;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
 }
-.fallback[data-v-64e52bdd] {
+.fallback[data-v-eb16b513] {
   grid-area: 1 / 1;
   display: inline-flex;
   align-items: center;
@@ -46,7 +46,7 @@
 /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
  * Trimming applies to block containers, so the box is a block with centred content. */
 @supports (text-box-trim: trim-both) {
-.fallback[data-v-64e52bdd] {
+.fallback[data-v-eb16b513] {
     display: block;
     text-align: center;
     align-content: center;
@@ -54,16 +54,16 @@
     text-box-edge: cap alphabetic;
 }
 }
-[hidden][data-v-64e52bdd] {
+[hidden][data-v-eb16b513] {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar"][hidden][data-v-64e52bdd] {
+[data-component~="ui-avatar"][hidden][data-v-eb16b513] {
   display: none;
 }
 
-[data-component~="ui-avatar-group"][data-v-cbb93f58] {
+[data-component~="ui-avatar-group"][data-v-9e8e1291] {
   /* Avatars separate with a tight, crisp edge, matching Looma's 1px borders rather than the
    * diffuse elevation overlays use. */
   --_overlap-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.22);
@@ -77,15 +77,15 @@
 
 /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
  * component roots outside this style scope. */
-[data-v-cbb93f58-s] {
+[data-v-9e8e1291-s] {
   margin-inline-start: -0.625rem;
   flex-shrink: 0;
   border-radius: 999px;
 }
-[data-v-cbb93f58-s]:first-child {
+[data-v-9e8e1291-s]:first-child {
   margin-inline-start: 0;
 }
-.overflow[data-v-cbb93f58] {
+.overflow[data-v-9e8e1291] {
   margin-inline-start: -0.625rem;
   display: inline-flex;
   align-items: center;
@@ -100,20 +100,20 @@
     var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
     var(--ui-avatar-group-edge-ring, var(--_edge-ring));
   font: inherit;
-  font-size: 0.75rem;
+  font-size: var(--ui-font-size-xs);
   font-weight: 600;
   flex-shrink: 0;
 }
-.overflow[hidden][data-v-cbb93f58] {
+.overflow[hidden][data-v-9e8e1291] {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar-group"][hidden][data-v-cbb93f58] {
+[data-component~="ui-avatar-group"][hidden][data-v-9e8e1291] {
   display: none;
 }
 
-[data-component~="ui-badge"][data-v-90c7d1bb] {
+[data-component~="ui-badge"][data-v-c0ffc4d8] {
   --_badge-surface: var(--ui-surface-subtle);
   --_badge-text: var(--ui-text-secondary);
   --_badge-border: color-mix(in srgb, var(--ui-text-secondary) 30%, transparent);
@@ -139,7 +139,7 @@
 /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
  * Trimming applies to block containers, so the box is a block with centred content. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-badge"][data-v-90c7d1bb] {
+[data-component~="ui-badge"][data-v-c0ffc4d8] {
     display: block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
@@ -148,63 +148,88 @@
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-90c7d1bb] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-c0ffc4d8] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-90c7d1bb] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-c0ffc4d8] {
   --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-90c7d1bb] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-c0ffc4d8] {
   --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-90c7d1bb] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-c0ffc4d8] {
   --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-90c7d1bb] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-c0ffc4d8] {
   --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-90c7d1bb] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-c0ffc4d8] {
   --_badge-surface: var(--ui-accent-soft);
   --_badge-border: var(--ui-accent-soft);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-90c7d1bb] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-c0ffc4d8] {
   --_badge-surface: var(--ui-danger-soft);
   --_badge-border: var(--ui-danger-soft);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-90c7d1bb] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-c0ffc4d8] {
   --_badge-surface: var(--ui-success-soft);
   --_badge-border: var(--ui-success-soft);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-90c7d1bb] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-c0ffc4d8] {
   --_badge-surface: var(--ui-warning-soft);
   --_badge-border: var(--ui-warning-soft);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-90c7d1bb] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-c0ffc4d8] {
   --_badge-surface: var(--ui-info-soft);
   --_badge-border: var(--ui-info-soft);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
+/* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
+   outline to follow: the edge is the fill. The end padding grows by the point's depth so the
+   label never runs into it. */
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c0ffc4d8] {
+  --_badge-point: var(--ui-badge-point, var(--ui-space-2));
+
+  border-color: transparent;
+  border-radius: 0;
+  padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
+  clip-path: polygon(
+    0 0,
+    calc(100% - var(--_badge-point)) 0,
+    100% 50%,
+    calc(100% - var(--_badge-point)) 100%,
+    0 100%
+  );
+}
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-c0ffc4d8]:dir(rtl) {
+  padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
+  padding-inline-start: calc(
+    var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
+  );
+  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-90c7d1bb] {
+[data-component~="ui-badge"][hidden][data-v-c0ffc4d8] {
   display: none;
 }
 
-[data-component~="ui-button"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-v-1cd0b390] {
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);
   --_hue-active: var(--ui-accent-active);
@@ -223,15 +248,15 @@
   vertical-align: middle;
   color: var(--_tone-text);
 }
-[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-1cd0b390] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-1cd0b390] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-v-1cd0b390] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
@@ -242,6 +267,7 @@
   color: var(--ui-button-text, var(--_tone-text));
   font: inherit;
   font-weight: var(--ui-font-medium);
+  text-decoration: none;
   line-height: var(--ui-line-height-tight);
   padding: var(--ui-space-2) var(--ui-space-3);
   background-image: var(--ui-raised-highlight);
@@ -255,44 +281,47 @@
   margin: 0;
 }
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-button"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-v-1cd0b390] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-1cd0b390] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
 }
-[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-1cd0b390] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
-  font-size: 1rem;
+  font-size: var(--ui-font-size-md);
 }
-[data-component~="ui-button"][data-v-c6ef4679]:hover:enabled {
+
+/* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
+   is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
+[data-component~="ui-button"][data-v-1cd0b390]:hover:not(:disabled, [aria-disabled="true"]) {
   border-color: var(--ui-button-hover-border, var(--_tone-hover));
   background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
 }
 
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
-[data-component~="ui-button"][data-v-c6ef4679]:active:enabled {
+[data-component~="ui-button"][data-v-1cd0b390]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
   background-image: none;
   box-shadow: var(--ui-pressed);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-1cd0b390],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-1cd0b390] {
   border-color: var(--_tone);
   background-color: var(--_tone);
   color: var(--_on-tone);
   box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679]):hover:enabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-1cd0b390], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-1cd0b390]):hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-hover);
   border-color: var(--_tone-hover);
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679]):active:enabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-1cd0b390], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-1cd0b390]):active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -301,43 +330,43 @@
 
 /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
    destructive secondary action, not a special case. */
-[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-1cd0b390] {
   --_hue: var(--ui-text);
   --_hue-hover: var(--ui-text);
   --_hue-active: var(--ui-text);
   --_hue-text: var(--ui-text);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-c6ef4679],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-1cd0b390],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-1cd0b390] {
   --_hue: var(--ui-danger);
   --_hue-hover: var(--ui-danger-hover);
   --_hue-active: var(--ui-danger-hover);
   --_hue-text: var(--ui-danger-hover);
   --_on-hue: var(--ui-on-danger);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-1cd0b390] {
   --_hue: var(--ui-success);
   --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-1cd0b390] {
   --_hue: var(--ui-warning);
   --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-1cd0b390] {
   --_hue: var(--ui-info);
   --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-1cd0b390] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -345,24 +374,24 @@
 }
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-c6ef4679]:hover:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-1cd0b390]:hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
   border-color: transparent;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-c6ef4679]:active:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-1cd0b390]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
   border-color: transparent;
   box-shadow: var(--ui-pressed);
 }
 
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
-[data-component~="ui-button"][data-v-c6ef4679]:focus-visible {
+[data-component~="ui-button"][data-v-1cd0b390]:focus-visible {
   outline: none;
   box-shadow:
     var(--ui-button-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-1cd0b390]:focus-visible {
   box-shadow:
     var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
@@ -372,7 +401,7 @@
    disabled outline is still an outline and a disabled ghost still has no edge. Intent goes — an
    unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
    highlight and shadow, because nothing that cannot be pressed should look raised. */
-[data-component~="ui-button"][data-v-c6ef4679]:disabled {
+[data-component~="ui-button"][data-v-1cd0b390]:is(:disabled, [aria-disabled="true"]) {
   /* Derived from the tone itself, not from a separate disabled palette: faded toward the
      page, which desaturates it at the same time. Toward the page rather than toward white,
      so a dark theme dims where a light one lightens — the same rule, both schemes. */
@@ -389,7 +418,7 @@
 }
 
 /* A filled button keeps its fill, faded further so its text stays legible on it. */
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679]):disabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-1cd0b390], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-1cd0b390]):is(:disabled, [aria-disabled="true"]) {
   --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
 }
 
@@ -397,19 +426,19 @@
    it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
    the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
    hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-c6ef4679]:disabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-1cd0b390]:is(:disabled, [aria-disabled="true"]) {
   background-color: oklch(from var(--_tone) l c h / 14%);
   border-color: transparent;
 }
 @media (pointer: coarse) {
-[data-component~="ui-button"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-v-1cd0b390] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
 
 /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
    WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-1cd0b390] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -427,22 +456,22 @@
     color var(--ui-motion-fast) var(--ui-motion-ease),
     text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679]:hover:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-1cd0b390]:hover:not(:disabled, [aria-disabled="true"]) {
   color: var(--ui-button-link-hover-text, var(--ui-text-primary));
   text-decoration-color: currentColor;
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679]:active:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-1cd0b390]:active:not(:disabled, [aria-disabled="true"]) {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679]:disabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-1cd0b390]:is(:disabled, [aria-disabled="true"]) {
   background: none;
   border-color: transparent;
   color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-1cd0b390]:focus-visible {
   box-shadow: none;
   /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
   outline: 2px solid var(--ui-focus-ring);
@@ -450,7 +479,7 @@
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-button"][hidden][data-v-c6ef4679] {
+[data-component~="ui-button"][hidden][data-v-1cd0b390] {
   display: none;
 }
 
@@ -741,27 +770,27 @@ input[data-v-964081a0]:focus-visible {
 }
 }
 
-[data-component~="ui-combobox"][data-v-1aba7b21] {
+[data-component~="ui-combobox"][data-v-3b8b0ecf] {
   display: grid;
   gap: var(--ui-space-1);
   min-inline-size: 0;
   color: var(--ui-text-primary);
   font: inherit;
 }
-label[data-v-1aba7b21] {
+label[data-v-3b8b0ecf] {
   color: var(--ui-combobox-label-text, var(--ui-text-primary));
-  font-size: var(--ui-combobox-label-font-size, 0.875rem);
+  font-size: var(--ui-combobox-label-font-size, var(--ui-font-size-sm));
   font-weight: 500;
 }
 /* The field and anything that annotates it sit on one row; the help button is beside the box,
    not inside it, because a control's box holds its value. */
-.control[data-v-1aba7b21] {
+.control[data-v-3b8b0ecf] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   min-inline-size: 0;
 }
-.field[data-v-1aba7b21] {
+.field[data-v-3b8b0ecf] {
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
@@ -773,14 +802,14 @@ label[data-v-1aba7b21] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.field[data-v-1aba7b21]:focus-within {
+.field[data-v-3b8b0ecf]:focus-within {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
 /* A ghost icon button: the affordance is the mark, not a box around it. */
-.help[data-v-1aba7b21] {
+.help[data-v-3b8b0ecf] {
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -797,28 +826,28 @@ label[data-v-1aba7b21] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.help[data-v-1aba7b21]:hover:enabled,
-.help[aria-expanded="true"][data-v-1aba7b21] {
+.help[data-v-3b8b0ecf]:hover:enabled,
+.help[aria-expanded="true"][data-v-3b8b0ecf] {
   background: color-mix(in srgb, currentColor 8%, transparent);
   color: var(--ui-text-primary);
 }
-.help[data-v-1aba7b21]:focus-visible {
+.help[data-v-3b8b0ecf]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
-.help[data-v-1aba7b21]:disabled {
+.help[data-v-3b8b0ecf]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.help-icon[data-v-1aba7b21] {
+.help-icon[data-v-3b8b0ecf] {
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-input[data-v-1aba7b21]::selection {
+input[data-v-3b8b0ecf]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-input[data-v-1aba7b21] {
+input[data-v-3b8b0ecf] {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
@@ -834,11 +863,11 @@ input[data-v-1aba7b21] {
   margin: 0;
   outline: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-1aba7b21] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-3b8b0ecf] {
   min-block-size: calc(var(--ui-control-size-sm) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
 }
-button[data-v-1aba7b21] {
+button[data-v-3b8b0ecf] {
   appearance: none;
   display: inline-grid;
   place-items: center;
@@ -853,31 +882,31 @@ button[data-v-1aba7b21] {
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
-.affordance-icon[data-v-1aba7b21] {
+.affordance-icon[data-v-3b8b0ecf] {
   display: block;
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-button[data-v-1aba7b21]:hover:enabled {
+button[data-v-3b8b0ecf]:hover:enabled {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-button[data-v-1aba7b21]:focus-visible {
+button[data-v-3b8b0ecf]:focus-visible {
   outline: none;
   background: var(--ui-surface-muted);
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
-input[data-v-1aba7b21]:disabled, button[data-v-1aba7b21]:disabled {
+input[data-v-3b8b0ecf]:disabled, button[data-v-3b8b0ecf]:disabled {
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }
-.field[data-v-1aba7b21]:has(input:disabled) {
+.field[data-v-3b8b0ecf]:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-1aba7b21] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-3b8b0ecf] {
   border-color: var(--ui-danger-solid, var(--ui-accent-active));
 }
-.popup[data-v-1aba7b21] {
+.popup[data-v-3b8b0ecf] {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
@@ -891,40 +920,40 @@ input[data-v-1aba7b21]:disabled, button[data-v-1aba7b21]:disabled {
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
 }
-[hidden][data-v-1aba7b21] {
+[hidden][data-v-3b8b0ecf] {
   display: none;
 }
-.option[data-v-1aba7b21] {
+.option[data-v-3b8b0ecf] {
   padding: var(--ui-space-2) var(--ui-space-3);
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
   overflow-wrap: anywhere;
 }
-.option[data-v-1aba7b21]:hover, .option.active[data-v-1aba7b21] {
+.option[data-v-3b8b0ecf]:hover, .option.active[data-v-3b8b0ecf] {
   background: var(--ui-surface-muted);
   outline: 1px solid var(--ui-focus-ring);
   outline-offset: -1px;
 }
-.option[aria-disabled="true"][data-v-1aba7b21] {
+.option[aria-disabled="true"][data-v-3b8b0ecf] {
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }
-.primary[data-v-1aba7b21] {
+.primary[data-v-3b8b0ecf] {
   display: block;
   color: var(--ui-combobox-option-text, var(--ui-text-primary));
   font-weight: 500;
 }
-.message[data-v-1aba7b21], .group[data-v-1aba7b21] {
+.message[data-v-3b8b0ecf], .group[data-v-3b8b0ecf] {
   color: var(--ui-combobox-message-text, var(--ui-text-secondary));
   font-weight: 400;
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
   overflow-wrap: anywhere;
 }
-.group[data-v-1aba7b21], .popup .message[data-v-1aba7b21] {
+.group[data-v-3b8b0ecf], .popup .message[data-v-3b8b0ecf] {
   padding: var(--ui-space-2) var(--ui-space-3);
 }
-.sr-only[data-v-1aba7b21] {
+.sr-only[data-v-3b8b0ecf] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -933,16 +962,16 @@ input[data-v-1aba7b21]:disabled, button[data-v-1aba7b21]:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
-button[data-v-1aba7b21] {
+button[data-v-3b8b0ecf] {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
 }
 }
 @media (forced-colors: active) {
-.field[data-v-1aba7b21], .popup[data-v-1aba7b21] {
+.field[data-v-3b8b0ecf], .popup[data-v-3b8b0ecf] {
     border-color: CanvasText;
 }
-.option.active[data-v-1aba7b21] {
+.option.active[data-v-3b8b0ecf] {
     outline-color: Highlight;
 }
 }
@@ -950,12 +979,12 @@ button[data-v-1aba7b21] {
 /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
    before anything is picked. aria-selected is the state; this draws it.
    Longhands, not shorthands: lowering drops a shorthand that omits a component. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-1aba7b21] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-3b8b0ecf] {
   display: flex;
   gap: var(--ui-space-2);
   align-items: center;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-1aba7b21]::before {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-3b8b0ecf]::before {
   content: "";
   flex: none;
   inline-size: 1.125rem;
@@ -970,7 +999,7 @@ button[data-v-1aba7b21] {
   background-size: 0.7rem;
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"]
-  .option[aria-selected="true"][data-v-1aba7b21]::before {
+  .option[aria-selected="true"][data-v-3b8b0ecf]::before {
   border-color: var(--ui-accent-solid);
   background-color: var(--ui-accent-solid);
   background-image: var(
@@ -980,20 +1009,20 @@ button[data-v-1aba7b21] {
 }
 
 /* Multiple mode: chips wrap before the cursor on one flexible field line. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-1aba7b21] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-3b8b0ecf] {
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-1);
   min-block-size: var(--ui-combobox-item-min-block-size, 2.5rem);
   padding: var(--ui-space-1);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-1aba7b21] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-3b8b0ecf] {
   flex: 1 0 var(--ui-combobox-item-input-min-inline-size, 5rem);
   width: auto;
   min-block-size: 1.75rem;
   padding: var(--ui-space-0-5) var(--ui-space-1);
 }
-.item[data-v-1aba7b21] {
+.item[data-v-3b8b0ecf] {
   appearance: none;
   display: inline-flex;
   min-inline-size: 0;
@@ -1007,16 +1036,16 @@ button[data-v-1aba7b21] {
   font: inherit;
   cursor: default;
 }
-.item[data-v-1aba7b21]:focus-visible {
+.item[data-v-3b8b0ecf]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 1px;
 }
-.item[data-v-1aba7b21]:disabled {
+.item[data-v-3b8b0ecf]:disabled {
   opacity: 0.6;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-combobox"][hidden][data-v-1aba7b21] {
+[data-component~="ui-combobox"][hidden][data-v-3b8b0ecf] {
   display: none;
 }
 
@@ -1637,10 +1666,10 @@ svg[data-v-7b1048a0] {
   display: none;
 }
 
-[data-component~="ui-editor-slash-menu"][data-v-346835f7] {
+[data-component~="ui-editor-slash-menu"][data-v-e7d0f904] {
   user-select: none;
 }
-[data-component~="ui-editor-slash-menu"][data-v-346835f7] {
+[data-component~="ui-editor-slash-menu"][data-v-e7d0f904] {
   background: var(--ui-surface);
   border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius-dialog);
@@ -1650,12 +1679,12 @@ svg[data-v-7b1048a0] {
   flex-direction: column;
 }
 @media (max-width: 767px) {
-[data-component~="ui-editor-slash-menu"][data-v-346835f7] {
+[data-component~="ui-editor-slash-menu"][data-v-e7d0f904] {
     border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
     border-bottom: none;
 }
 }
-.header[data-v-346835f7] {
+.header[data-v-e7d0f904] {
   display: none;
   align-items: center;
   gap: var(--ui-space-2);
@@ -1668,11 +1697,11 @@ svg[data-v-7b1048a0] {
   letter-spacing: 0.05em;
 }
 @media (max-width: 767px) {
-.header[data-v-346835f7] {
+.header[data-v-e7d0f904] {
     display: flex;
 }
 }
-.header-query[data-v-346835f7] {
+.header-query[data-v-e7d0f904] {
   background: var(--ui-surface-hover);
   border-radius: var(--ui-radius-sm);
   padding: 0.1em 0.4em;
@@ -1682,7 +1711,7 @@ svg[data-v-7b1048a0] {
   text-transform: none;
   letter-spacing: 0;
 }
-.list[data-v-346835f7] {
+.list[data-v-e7d0f904] {
   list-style: none;
   margin: 0;
   padding: var(--ui-space-1) 0;
@@ -1691,12 +1720,12 @@ svg[data-v-7b1048a0] {
   overscroll-behavior: contain;
 }
 @media (max-width: 767px) {
-.list[data-v-346835f7] {
+.list[data-v-e7d0f904] {
     max-height: calc(60dvh - 80px);
     padding: var(--ui-space-1) 0 var(--ui-space-2);
 }
 }
-.item[data-v-346835f7] {
+.item[data-v-e7d0f904] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-3);
@@ -1705,10 +1734,10 @@ svg[data-v-7b1048a0] {
   cursor: pointer;
   transition: background-color 120ms ease;
 }
-.item.active[data-v-346835f7] {
+.item.active[data-v-e7d0f904] {
   background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
-.icon[data-v-346835f7] {
+.icon[data-v-e7d0f904] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1724,22 +1753,22 @@ svg[data-v-7b1048a0] {
   flex-shrink: 0;
   line-height: 1;
 }
-.item.active .icon[data-v-346835f7] {
+.item.active .icon[data-v-e7d0f904] {
   background: var(--ui-accent);
   border-color: var(--ui-accent);
   color: var(--ui-accent-contrast);
 }
-.icon[data-v-346835f7] {
+.icon[data-v-e7d0f904] {
   --ui-icon-size: 1rem;
   --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
-.body[data-v-346835f7] {
+.body[data-v-e7d0f904] {
   display: flex;
   min-width: 0;
   flex-direction: column;
   gap: 1px;
 }
-.title[data-v-346835f7] {
+.title[data-v-e7d0f904] {
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-medium);
   color: var(--ui-text);
@@ -1747,14 +1776,14 @@ svg[data-v-7b1048a0] {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.description[data-v-346835f7] {
+.description[data-v-e7d0f904] {
   font-size: var(--ui-font-size-xs);
   color: var(--ui-text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.footer[data-v-346835f7] {
+.footer[data-v-e7d0f904] {
   display: none;
   padding: var(--ui-space-2) var(--ui-space-3);
   border-top: 1px solid var(--ui-border);
@@ -1762,27 +1791,27 @@ svg[data-v-7b1048a0] {
   color: var(--ui-text-muted);
 }
 @media (min-width: 768px) {
-.footer[data-v-346835f7] {
+.footer[data-v-e7d0f904] {
     display: block;
 }
 }
-[data-component~="ui-editor-slash-menu"] kbd[data-v-346835f7] {
+[data-component~="ui-editor-slash-menu"] kbd[data-v-e7d0f904] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: 10px;
+  font-size: var(--ui-font-size-2xs);
   background: var(--ui-surface-hover);
   border: 1px solid var(--ui-border);
   border-radius: 3px;
   padding: 0 3px;
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-editor-slash-menu"][hidden][data-v-346835f7] {
+[data-component~="ui-editor-slash-menu"][hidden][data-v-e7d0f904] {
   display: none;
 }
 
-[data-component~="ui-editor-table-context-menu"][data-v-ae062630] {
+[data-component~="ui-editor-table-context-menu"][data-v-2d9eb67c] {
   /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
   box-sizing: border-box;
   min-width: 14rem;
@@ -1800,12 +1829,12 @@ svg[data-v-7b1048a0] {
   overscroll-behavior: contain;
   scrollbar-width: thin;
 }
-.section[data-v-ae062630] {
+.section[data-v-2d9eb67c] {
   display: flex;
   flex-direction: column;
   gap: 3px;
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-ae062630] {
+[data-component~="ui-editor-table-context-menu"] button[data-v-2d9eb67c] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
@@ -1820,30 +1849,30 @@ svg[data-v-7b1048a0] {
   cursor: pointer;
   color: var(--ui-text);
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-ae062630] {
+[data-component~="ui-editor-table-context-menu"] button[data-v-2d9eb67c] {
   --ui-icon-size: 1rem;
   --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-ae062630]:hover:not(:disabled) {
+[data-component~="ui-editor-table-context-menu"] button[data-v-2d9eb67c]:hover:not(:disabled) {
   background: var(--ui-surface-hover);
 }
-[data-component~="ui-editor-table-context-menu"] button.selected[data-v-ae062630] {
+[data-component~="ui-editor-table-context-menu"] button.selected[data-v-2d9eb67c] {
   background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
-[data-component~="ui-editor-table-context-menu"] button.danger[data-v-ae062630] {
+[data-component~="ui-editor-table-context-menu"] button.danger[data-v-2d9eb67c] {
   color: var(--ui-danger);
 }
-.swatches[data-v-ae062630] {
+.swatches[data-v-2d9eb67c] {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 3px;
 }
-.swatch-button[data-v-ae062630] {
+.swatch-button[data-v-2d9eb67c] {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.swatch[data-v-ae062630] {
+.swatch[data-v-2d9eb67c] {
   display: inline-flex;
   width: 1rem;
   height: 1rem;
@@ -1853,7 +1882,7 @@ svg[data-v-7b1048a0] {
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
   flex-shrink: 0;
 }
-.swatch.default[data-v-ae062630] {
+.swatch.default[data-v-2d9eb67c] {
   position: relative;
   background:
     linear-gradient(
@@ -1865,24 +1894,24 @@ svg[data-v-7b1048a0] {
     ),
     var(--ui-surface);
 }
-.swatch-label[data-v-ae062630] {
+.swatch-label[data-v-2d9eb67c] {
   min-width: 0;
   white-space: nowrap;
 }
-.heading[data-v-ae062630] {
+.heading[data-v-2d9eb67c] {
   padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.6875rem;
+  font-size: var(--ui-font-size-2xs);
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--ui-text-muted);
 }
-.sep[data-v-ae062630] {
+.sep[data-v-2d9eb67c] {
   height: 1px;
   background: var(--ui-border);
   margin: var(--ui-space-1) 0;
 }
-[data-component~="ui-editor-table-context-menu"][hidden][data-v-ae062630] {
+[data-component~="ui-editor-table-context-menu"][hidden][data-v-2d9eb67c] {
   display: none;
 }
 
@@ -2157,7 +2186,7 @@ svg[data-v-7b1048a0] {
   display: none;
 }
 
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"][data-v-31b70e7c] {
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"][data-v-1b253cb1] {
   min-width: max-content;
   min-height: 100%;
   padding: 0;
@@ -2167,15 +2196,15 @@ svg[data-v-7b1048a0] {
   box-shadow: none;
   backdrop-filter: none;
 }
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button[data-v-31b70e7c] {
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button[data-v-1b253cb1] {
   min-height: 44px;
   background: transparent;
 }
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active[data-v-31b70e7c],
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected[data-v-31b70e7c] {
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active[data-v-1b253cb1],
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected[data-v-1b253cb1] {
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
 }
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu[data-v-31b70e7c] {
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu[data-v-1b253cb1] {
   top: auto;
   right: 0;
   bottom: calc(100% + var(--ui-space-2));
@@ -2183,7 +2212,7 @@ svg[data-v-7b1048a0] {
   overflow-y: auto;
   overscroll-behavior: contain;
 }
-[data-component~="ui-editor-table-toolbar"][data-v-31b70e7c] {
+[data-component~="ui-editor-table-toolbar"][data-v-1b253cb1] {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-1);
@@ -2194,21 +2223,21 @@ svg[data-v-7b1048a0] {
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   backdrop-filter: blur(10px);
 }
-.group[data-v-31b70e7c] {
+.group[data-v-1b253cb1] {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   overflow: hidden;
 }
-.sep[data-v-31b70e7c] {
+.sep[data-v-1b253cb1] {
   width: 1px;
   align-self: stretch;
   background: var(--ui-border);
 }
-.overflow[data-v-31b70e7c] {
+.overflow[data-v-1b253cb1] {
   position: relative;
 }
-[data-component~="ui-editor-table-toolbar"] button[data-v-31b70e7c] {
+[data-component~="ui-editor-table-toolbar"] button[data-v-1b253cb1] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2225,39 +2254,39 @@ svg[data-v-7b1048a0] {
   padding: var(--ui-space-2) var(--ui-space-2);
   white-space: nowrap;
 }
-[data-component~="ui-editor-table-toolbar"] button[data-v-31b70e7c]:hover {
+[data-component~="ui-editor-table-toolbar"] button[data-v-1b253cb1]:hover {
   background: var(--ui-surface-hover);
 }
-[data-component~="ui-editor-table-toolbar"] button.active[data-v-31b70e7c] {
+[data-component~="ui-editor-table-toolbar"] button.active[data-v-1b253cb1] {
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
   color: var(--ui-accent-active);
 }
-.group button[data-v-31b70e7c] {
+.group button[data-v-1b253cb1] {
   border-radius: var(--ui-radius-sm);
 }
-.group button + button[data-v-31b70e7c] {
+.group button + button[data-v-1b253cb1] {
   border-left: 0;
 }
-[data-component~="ui-editor-table-toolbar"] .more[data-v-31b70e7c] {
+[data-component~="ui-editor-table-toolbar"] .more[data-v-1b253cb1] {
   border: 0;
   border-radius: var(--ui-radius-sm);
 }
-[data-component~="ui-editor-table-toolbar"] button.danger[data-v-31b70e7c] {
+[data-component~="ui-editor-table-toolbar"] button.danger[data-v-1b253cb1] {
   color: var(--ui-danger);
 }
-[data-component~="ui-editor-table-toolbar"][data-v-31b70e7c] {
+[data-component~="ui-editor-table-toolbar"][data-v-1b253cb1] {
   --ui-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
   --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
-.chevron[data-v-31b70e7c] {
+.chevron[data-v-1b253cb1] {
   display: inline-flex;
   --ui-icon-size: 0.875rem;
 }
-[data-component~="ui-editor-table-toolbar"] .icon-button[data-v-31b70e7c] {
+[data-component~="ui-editor-table-toolbar"] .icon-button[data-v-1b253cb1] {
   width: 32px;
   padding-inline: 0;
 }
-.menu[data-v-31b70e7c] {
+.menu[data-v-1b253cb1] {
   position: absolute;
   top: calc(100% + var(--ui-space-2));
   right: 0;
@@ -2272,35 +2301,35 @@ svg[data-v-7b1048a0] {
   gap: 2px;
   z-index: 2;
 }
-.menu-section + .menu-section[data-v-31b70e7c] {
+.menu-section + .menu-section[data-v-1b253cb1] {
   margin-top: var(--ui-space-1);
   padding-top: var(--ui-space-1);
   border-top: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent);
 }
-.menu-heading[data-v-31b70e7c] {
+.menu-heading[data-v-1b253cb1] {
   padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.6875rem;
+  font-size: var(--ui-font-size-2xs);
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--ui-text-muted);
 }
-.menu button[data-v-31b70e7c] {
+.menu button[data-v-1b253cb1] {
   display: flex;
   justify-content: flex-start;
   width: 100%;
   text-align: left;
 }
-.swatches[data-v-31b70e7c] {
+.swatches[data-v-1b253cb1] {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 2px;
 }
-[data-component~="ui-editor-table-toolbar"] .swatch-button[data-v-31b70e7c] {
+[data-component~="ui-editor-table-toolbar"] .swatch-button[data-v-1b253cb1] {
   gap: var(--ui-space-1);
   justify-content: flex-start;
 }
-.swatch[data-v-31b70e7c] {
+.swatch[data-v-1b253cb1] {
   width: 14px;
   height: 14px;
   flex: 0 0 14px;
@@ -2308,15 +2337,15 @@ svg[data-v-7b1048a0] {
   border-radius: 3px;
   background: var(--_swatch);
 }
-.swatch.default[data-v-31b70e7c] {
+.swatch.default[data-v-1b253cb1] {
   background:
     linear-gradient(135deg, transparent 44%, var(--ui-danger) 46% 54%, transparent 56%),
     var(--ui-surface);
 }
-.swatch-button.selected[data-v-31b70e7c] {
+.swatch-button.selected[data-v-1b253cb1] {
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
 }
-[data-component~="ui-editor-table-toolbar"][hidden][data-v-31b70e7c] {
+[data-component~="ui-editor-table-toolbar"][hidden][data-v-1b253cb1] {
   display: none;
 }
 
@@ -2495,7 +2524,7 @@ svg[data-v-62b77471-s] {
   display: none;
 }
 
-[data-component~="ui-form-field"][data-v-605db5c0] {
+[data-component~="ui-form-field"][data-v-13b85af2] {
   display: grid;
   gap: var(--ui-space-2);
   min-inline-size: 0;
@@ -2505,30 +2534,30 @@ svg[data-v-62b77471-s] {
 
 /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
    in Vue), and generates no box of its own, so an empty region adds no gap. */
-.label[data-v-605db5c0],
-.help[data-v-605db5c0],
-.error[data-v-605db5c0] {
+.label[data-v-13b85af2],
+.help[data-v-13b85af2],
+.error[data-v-13b85af2] {
   display: contents;
 }
-.label[data-v-605db5c0] {
+.label[data-v-13b85af2] {
   color: var(--ui-text-secondary);
-  font-size: 0.95rem;
+  font-size: var(--ui-font-size-sm);
 }
-.help[data-v-605db5c0] {
+.help[data-v-13b85af2] {
   color: var(--ui-text-muted);
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
 }
-.help > [data-v-605db5c0-s] {
+.help > [data-v-13b85af2-s] {
   min-block-size: var(--ui-form-field-help-min-block-size, 0);
 }
-.error[data-v-605db5c0],[role="alert"][data-v-605db5c0-s] {
+.error[data-v-13b85af2],[role="alert"][data-v-13b85af2-s] {
   color: var(--ui-accent-active);
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-form-field"][hidden][data-v-605db5c0] {
+[data-component~="ui-form-field"][hidden][data-v-13b85af2] {
   display: none;
 }
 
@@ -4052,7 +4081,7 @@ to {
   display: none;
 }
 
-[data-component~="ui-tree-item"][data-v-9b8fd08d] {
+[data-component~="ui-tree-item"][data-v-d093d318] {
   --_tree-row-min-height: 32px;
   --_tree-disclosure-size: 16px;
 
@@ -4061,14 +4090,14 @@ to {
   min-inline-size: 0;
   margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent, 16px));
 }
-.row[data-v-9b8fd08d] {
+.row[data-v-d093d318] {
   position: relative;
   display: grid;
   grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
   align-items: center;
   min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
   min-inline-size: 0;
-  font-size: var(--ui-tree-item-font-size, var(--ui-font-size-ui));
+  font-size: var(--ui-tree-item-font-size, var(--ui-font-size-sm));
   border-radius: var(--ui-radius-md);
   color: var(--ui-text-secondary);
   transition:
@@ -4078,38 +4107,38 @@ to {
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
     min-block-size var(--ui-motion-base) var(--ui-motion-ease);
 }
-.row[data-v-9b8fd08d]:hover,
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-9b8fd08d],
-.row[data-v-9b8fd08d]:focus-within {
+.row[data-v-d093d318]:hover,
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-d093d318],
+.row[data-v-d093d318]:focus-within {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-9b8fd08d] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-d093d318] {
   opacity: 0.55;
 }
-[data-component~="ui-tree-item"][data-dragging] .row[data-v-9b8fd08d] {
+[data-component~="ui-tree-item"][data-dragging] .row[data-v-d093d318] {
   opacity: 0.42;
 }
-[data-component~="ui-tree-item"][data-v-9b8fd08d]:focus {
+[data-component~="ui-tree-item"][data-v-d093d318]:focus {
   outline: none;
 }
-[data-component~="ui-tree-item"]:focus-visible .row[data-v-9b8fd08d] {
+[data-component~="ui-tree-item"]:focus-visible .row[data-v-d093d318] {
   box-shadow: 0 0 0 2px var(--ui-focus-ring);
 }
 
 /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
-[data-component~="ui-tree-item"][data-drop-position="inside"] > .row[data-v-9b8fd08d] {
+[data-component~="ui-tree-item"][data-drop-position="inside"] > .row[data-v-d093d318] {
   background: var(--ui-accent-subtle);
   box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
 }
-.disclosure[data-v-9b8fd08d],
-.disclosure-spacer[data-v-9b8fd08d] {
+.disclosure[data-v-d093d318],
+.disclosure-spacer[data-v-d093d318] {
   grid-column: 1;
   grid-row: 1;
   inline-size: var(--_tree-disclosure-size);
   block-size: 28px;
 }
-.disclosure[data-v-9b8fd08d] {
+.disclosure[data-v-d093d318] {
   display: grid;
   /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
   place-items: center start;
@@ -4120,14 +4149,14 @@ to {
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
 }
-.disclosure[hidden][data-v-9b8fd08d] {
+.disclosure[hidden][data-v-d093d318] {
   display: none;
 }
-.disclosure[data-v-9b8fd08d]:hover {
+.disclosure[data-v-d093d318]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-elevated);
 }
-.disclosure-icon[data-v-9b8fd08d] {
+.disclosure-icon[data-v-d093d318] {
   display: grid;
   place-items: center;
   inline-size: 12px;
@@ -4135,7 +4164,7 @@ to {
   transform: rotate(-90deg);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.disclosure-icon[data-v-9b8fd08d]::before {
+.disclosure-icon[data-v-d093d318]::before {
   display: block;
   inline-size: 0.375rem;
   block-size: 0.375rem;
@@ -4145,19 +4174,19 @@ to {
   /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
   transform: translateY(-20%) rotate(45deg);
 }
-[data-component~="ui-tree-item"][aria-expanded="true"] .disclosure-icon[data-v-9b8fd08d] {
+[data-component~="ui-tree-item"][aria-expanded="true"] .disclosure-icon[data-v-d093d318] {
   transform: rotate(0deg);
 }
 
 /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
-.drag-handle svg[data-v-9b8fd08d] {
+.drag-handle svg[data-v-d093d318] {
   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-9b8fd08d] {
+.leading[data-v-d093d318] {
   display: inline-grid;
   place-items: center;
   grid-column: 2;
@@ -4167,12 +4196,12 @@ to {
   margin-inline-start: var(--ui-space-1);
   color: var(--ui-text-muted);
 }
-.leading[data-v-9b8fd08d]:empty {
+.leading[data-v-d093d318]: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-9b8fd08d-s],img[data-v-9b8fd08d-s] {
+svg[data-v-d093d318-s],img[data-v-d093d318-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -4181,7 +4210,7 @@ svg[data-v-9b8fd08d-s],img[data-v-9b8fd08d-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-9b8fd08d] {
+.label[data-v-d093d318] {
   grid-column: 3;
   grid-row: 1;
   align-self: stretch;
@@ -4194,15 +4223,15 @@ svg[data-v-9b8fd08d-s],img[data-v-9b8fd08d-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 > [data-v-9b8fd08d-s] {
+.label > [data-v-d093d318-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-9b8fd08d],
-.row:focus-within > .label[data-v-9b8fd08d] {
+.row:hover > .label[data-v-d093d318],
+.row:focus-within > .label[data-v-d093d318] {
   text-overflow: clip;
   mask-image: linear-gradient(
     to right,
@@ -4210,19 +4239,19 @@ svg[data-v-9b8fd08d-s],img[data-v-9b8fd08d-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row:hover > .label[data-v-9b8fd08d]:dir(rtl),
-.row:focus-within > .label[data-v-9b8fd08d]:dir(rtl) {
+.row:hover > .label[data-v-d093d318]:dir(rtl),
+.row:focus-within > .label[data-v-d093d318]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row:hover > .label > [data-v-9b8fd08d-s],
-.row:focus-within > .label > [data-v-9b8fd08d-s] {
+.row:hover > .label > [data-v-d093d318-s],
+.row:focus-within > .label > [data-v-d093d318-s] {
   text-overflow: clip;
 }
-.actions[data-v-9b8fd08d] {
+.actions[data-v-d093d318] {
   position: absolute;
   z-index: 1;
   inset-block: 0;
@@ -4234,18 +4263,18 @@ svg[data-v-9b8fd08d-s],img[data-v-9b8fd08d-s] {
   pointer-events: none;
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover > .actions[data-v-9b8fd08d],
-.row:focus-within > .actions[data-v-9b8fd08d] {
+.row:hover > .actions[data-v-d093d318],
+.row:focus-within > .actions[data-v-d093d318] {
   opacity: 1;
   pointer-events: auto;
 }
 
 /* Without hover there is no reveal, so the controls keep their own column. */
 @media (hover: none) {
-.row[data-v-9b8fd08d] {
+.row[data-v-d093d318] {
     grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
 }
-.actions[data-v-9b8fd08d] {
+.actions[data-v-d093d318] {
     position: static;
     grid-column: 4;
     grid-row: 1;
@@ -4255,7 +4284,7 @@ svg[data-v-9b8fd08d-s],img[data-v-9b8fd08d-s] {
     pointer-events: auto;
 }
 }
-.drag-handle[data-v-9b8fd08d] {
+.drag-handle[data-v-d093d318] {
   position: absolute;
   z-index: 2;
   inset-block-start: 50%;
@@ -4276,16 +4305,16 @@ svg[data-v-9b8fd08d-s],img[data-v-9b8fd08d-s] {
   transform: translateY(-50%);
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover .drag-handle[data-v-9b8fd08d],
-.drag-handle[data-v-9b8fd08d]:hover,
-.drag-handle[data-v-9b8fd08d]:focus-visible,
-[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-9b8fd08d] {
+.row:hover .drag-handle[data-v-d093d318],
+.drag-handle[data-v-d093d318]:hover,
+.drag-handle[data-v-d093d318]:focus-visible,
+[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-d093d318] {
   opacity: 1;
 }
-.drag-handle[data-v-9b8fd08d]:active {
+.drag-handle[data-v-d093d318]:active {
   cursor: grabbing;
 }
-.drop-indicator[data-v-9b8fd08d] {
+.drop-indicator[data-v-d093d318] {
   position: absolute;
   z-index: 3;
   inset-inline: 1px;
@@ -4295,8 +4324,8 @@ svg[data-v-9b8fd08d-s],img[data-v-9b8fd08d-s] {
   background: var(--ui-tree-drop-color, var(--ui-accent-solid));
   pointer-events: none;
 }
-.drop-indicator[data-v-9b8fd08d]::before,
-.drop-indicator[data-v-9b8fd08d]::after {
+.drop-indicator[data-v-d093d318]::before,
+.drop-indicator[data-v-d093d318]::after {
   content: "";
   position: absolute;
   inset-block-start: 50%;
@@ -4307,39 +4336,39 @@ svg[data-v-9b8fd08d-s],img[data-v-9b8fd08d-s] {
   background: var(--ui-surface-elevated);
   transform: translateY(-50%);
 }
-.drop-indicator[data-v-9b8fd08d]::before {
+.drop-indicator[data-v-d093d318]::before {
   inset-inline-start: -1px;
 }
-.drop-indicator[data-v-9b8fd08d]::after {
+.drop-indicator[data-v-d093d318]::after {
   inset-inline-end: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-9b8fd08d] {
+[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-d093d318] {
   display: block;
   inset-block-start: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-9b8fd08d] {
+[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-d093d318] {
   display: block;
   inset-block-end: -1px;
 }
-.children[hidden][data-v-9b8fd08d] {
+.children[hidden][data-v-d093d318] {
   display: none;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-9b8fd08d] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-d093d318] {
   --_tree-row-min-height: 44px;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-9b8fd08d] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-d093d318] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-.row[data-v-9b8fd08d],
-  .disclosure-icon[data-v-9b8fd08d],
-  .drag-handle[data-v-9b8fd08d] {
+.row[data-v-d093d318],
+  .disclosure-icon[data-v-d093d318],
+  .drag-handle[data-v-d093d318] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tree-item"][hidden][data-v-9b8fd08d] {
+[data-component~="ui-tree-item"][hidden][data-v-d093d318] {
   display: none;
 }
 /**