@threadlabs/looma 0.6.0 → 0.6.2

package/vue/components.css

@@ -12,7 +12,7 @@
   display: none;
 }
 
-[data-component~="ui-avatar"][data-v-038b6eb1] {
+[data-component~="ui-avatar"][data-v-3a27ff1d] {
   display: inline-grid;
   place-items: center;
   overflow: hidden;
@@ -27,13 +27,13 @@
   font-weight: 600;
   text-transform: uppercase;
 }
-.image[data-v-038b6eb1],img[data-v-038b6eb1-s] {
+.image[data-v-3a27ff1d],img[data-v-3a27ff1d-s] {
   grid-area: 1 / 1;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
 }
-.fallback[data-v-038b6eb1] {
+.fallback[data-v-3a27ff1d] {
   grid-area: 1 / 1;
   display: inline-flex;
   align-items: center;
@@ -41,16 +41,34 @@
   inline-size: 100%;
   block-size: 100%;
 }
-[hidden][data-v-038b6eb1] {
+
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* 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-3a27ff1d] {
+    display: block;
+    text-align: center;
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+}
+}
+[hidden][data-v-3a27ff1d] {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar"][hidden][data-v-038b6eb1] {
+[data-component~="ui-avatar"][hidden][data-v-3a27ff1d] {
   display: none;
 }
 
-[data-component~="ui-avatar-group"][data-v-6029679e] {
+[data-component~="ui-avatar-group"][data-v-2ad5d86f] {
+  /* 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);
+  --_edge-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
+
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -59,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-6029679e-s] {
+[data-v-2ad5d86f-s] {
   margin-inline-start: -0.625rem;
   flex-shrink: 0;
   border-radius: 999px;
 }
-[data-v-6029679e-s]:first-child {
+[data-v-2ad5d86f-s]:first-child {
   margin-inline-start: 0;
 }
-.overflow[data-v-6029679e] {
+.overflow[data-v-2ad5d86f] {
   margin-inline-start: -0.625rem;
   display: inline-flex;
   align-items: center;
@@ -79,23 +97,23 @@
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
   box-shadow:
-    var(--ui-avatar-group-overlap-shadow, -2px 0 5px -1px rgb(0 0 0 / 0.28)),
-    0 0 0 1px rgb(0 0 0 / 0.06);
+    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-weight: 600;
   flex-shrink: 0;
 }
-.overflow[hidden][data-v-6029679e] {
+.overflow[hidden][data-v-2ad5d86f] {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-avatar-group"][hidden][data-v-6029679e] {
+[data-component~="ui-avatar-group"][hidden][data-v-2ad5d86f] {
   display: none;
 }
 
-[data-component~="ui-badge"][data-v-43aa138f] {
+[data-component~="ui-badge"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-surface-subtle);
   --_badge-text: var(--ui-text-secondary);
   --_badge-border: color-mix(in srgb, var(--ui-text-secondary) 30%, transparent);
@@ -116,59 +134,73 @@
   line-height: var(--ui-badge-line-height, var(--ui-line-height-tight));
   white-space: nowrap;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-43aa138f] {
+
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* 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-7e9b5784] {
+    display: block;
+    min-block-size: var(--ui-badge-min-block-size, 1.5rem);
+    text-align: center;
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+}
+}
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-7e9b5784] {
   --_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-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-7e9b5784] {
   --_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-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-7e9b5784] {
   --_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-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-7e9b5784] {
   --_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-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-7e9b5784] {
   --_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-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-7e9b5784] {
   --_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-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-7e9b5784] {
   --_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-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-7e9b5784] {
   --_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-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-7e9b5784] {
   --_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-43aa138f] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-7e9b5784] {
   --_badge-surface: var(--ui-info-soft);
   --_badge-border: var(--ui-info-soft);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-43aa138f] {
+[data-component~="ui-badge"][hidden][data-v-7e9b5784] {
   display: none;
 }
 
@@ -556,47 +588,47 @@ input[data-v-acf71232]:focus-visible {
   display: none;
 }
 
-[data-component~="ui-cluster"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-v-6de2f2e4] {
   --_layout-gap: var(--ui-space-3);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--ui-layout-gap, var(--_layout-gap));
+  gap: var(--ui-cluster-gap, var(--_layout-gap));
   min-inline-size: 0;
   max-inline-size: 100%;
   margin: 0;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-6de2f2e4] {
   --_layout-gap: var(--ui-space-2);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-6de2f2e4] {
   --_layout-gap: var(--ui-space-3);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-6de2f2e4] {
   --_layout-gap: var(--ui-space-4);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-6de2f2e4] {
   --_layout-gap: var(--ui-space-5);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-6de2f2e4] {
   --_layout-gap: var(--ui-space-6);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-6de2f2e4] {
   align-items: flex-start;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-6de2f2e4] {
   align-items: flex-end;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-6de2f2e4] {
   align-items: stretch;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-cluster"][hidden][data-v-06d4310a] {
+[data-component~="ui-cluster"][hidden][data-v-6de2f2e4] {
   display: none;
 }
 
-[data-component~="ui-tooltip"][data-v-3099b119] {
+[data-component~="ui-tooltip"][data-v-3af2132e] {
   position: fixed;
   inset: auto;
   margin: 0;
@@ -617,7 +649,7 @@ input[data-v-acf71232]:focus-visible {
     display var(--ui-motion-fast) allow-discrete,
     overlay var(--ui-motion-fast) allow-discrete;
 }
-.surface[data-v-3099b119] {
+.surface[data-v-3af2132e] {
   --_tooltip-line: var(--ui-tooltip-border, var(--ui-border-default));
   position: relative;
   box-sizing: border-box;
@@ -632,7 +664,7 @@ input[data-v-acf71232]:focus-visible {
   line-height: var(--ui-line-height-tight);
   box-shadow: var(--ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
 }
-[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-3099b119] {
+[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-3af2132e] {
   --_tooltip-line: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
   background: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
   color: var(--ui-tooltip-inverse-text, var(--ui-surface-default));
@@ -640,7 +672,7 @@ input[data-v-acf71232]:focus-visible {
 
 /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
  * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
-.surface[data-v-3099b119]::after {
+.surface[data-v-3af2132e]::after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -657,7 +689,7 @@ input[data-v-acf71232]:focus-visible {
   transform: rotate(45deg);
 }
 :is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-start"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"])
-  .surface[data-v-3099b119]::after {
+  .surface[data-v-3af2132e]::after {
   inset-block-start: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
   inset-block-end: auto;
   border-inline-end-width: 0;
@@ -668,42 +700,51 @@ input[data-v-acf71232]:focus-visible {
   border-start-start-radius: 1px;
 }
 :is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=top-end"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"])
-  .surface[data-v-3099b119]::after {
+  .surface[data-v-3af2132e]::after {
   inset-inline-start: auto;
   inset-inline-end: var(--ui-space-3);
 }
-[data-component~="ui-tooltip"][data-v-3099b119]:popover-open {
+[data-component~="ui-tooltip"][data-v-3af2132e]:popover-open {
   opacity: 1;
   transform: translateY(0);
 }
 @starting-style {
-[data-component~="ui-tooltip"][data-v-3099b119]:popover-open {
+[data-component~="ui-tooltip"][data-v-3af2132e]:popover-open {
     opacity: 0;
     transform: translateY(4px);
 }
 }
-[data-component~="ui-tooltip"][hidden][data-v-3099b119] {
+[data-component~="ui-tooltip"][hidden][data-v-3af2132e] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-tooltip"][data-v-3099b119] {
+[data-component~="ui-tooltip"][data-v-3af2132e] {
     transition: none;
 }
 }
 
-[data-component~="ui-combobox"][data-v-147b231f] {
+[data-component~="ui-combobox"][data-v-f1d9bb8a] {
   display: grid;
   gap: var(--ui-space-1);
   min-inline-size: 0;
   color: var(--ui-text-primary);
   font: inherit;
 }
-label[data-v-147b231f] {
+label[data-v-f1d9bb8a] {
   color: var(--ui-combobox-label-text, var(--ui-text-primary));
   font-size: var(--ui-combobox-label-font-size, 0.875rem);
   font-weight: 500;
 }
-.field[data-v-147b231f] {
+/* 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-f1d9bb8a] {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-inline-size: 0;
+}
+.field[data-v-f1d9bb8a] {
+  flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
   border: 1px solid var(--ui-control-border, var(--ui-border-default));
@@ -714,17 +755,52 @@ label[data-v-147b231f] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.field[data-v-147b231f]:focus-within {
+.field[data-v-f1d9bb8a]:focus-within {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
-input[data-v-147b231f]::selection {
+/* A ghost icon button: the affordance is the mark, not a box around it. */
+.help[data-v-f1d9bb8a] {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--ui-control-size-sm);
+  block-size: var(--ui-control-size-sm);
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-radius-round);
+  background: transparent;
+  color: var(--ui-text-secondary);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+.help[data-v-f1d9bb8a]:hover:enabled,
+.help[aria-expanded="true"][data-v-f1d9bb8a] {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  color: var(--ui-text-primary);
+}
+.help[data-v-f1d9bb8a]:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-halo);
+}
+.help[data-v-f1d9bb8a]:disabled {
+  color: var(--ui-disabled-text);
+  cursor: not-allowed;
+}
+.help-icon[data-v-f1d9bb8a] {
+  inline-size: var(--ui-icon-size-sm);
+  block-size: var(--ui-icon-size-sm);
+}
+input[data-v-f1d9bb8a]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-input[data-v-147b231f] {
+input[data-v-f1d9bb8a] {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
@@ -740,11 +816,11 @@ input[data-v-147b231f] {
   margin: 0;
   outline: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-147b231f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-f1d9bb8a] {
   min-block-size: calc(var(--ui-control-size-sm) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
 }
-button[data-v-147b231f] {
+button[data-v-f1d9bb8a] {
   appearance: none;
   display: inline-grid;
   place-items: center;
@@ -759,31 +835,31 @@ button[data-v-147b231f] {
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
-.affordance-icon[data-v-147b231f] {
+.affordance-icon[data-v-f1d9bb8a] {
   display: block;
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-button[data-v-147b231f]:hover:enabled {
+button[data-v-f1d9bb8a]:hover:enabled {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-button[data-v-147b231f]:focus-visible {
+button[data-v-f1d9bb8a]: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-147b231f]:disabled, button[data-v-147b231f]:disabled {
+input[data-v-f1d9bb8a]:disabled, button[data-v-f1d9bb8a]:disabled {
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }
-.field[data-v-147b231f]:has(input:disabled) {
+.field[data-v-f1d9bb8a]: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-147b231f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-f1d9bb8a] {
   border-color: var(--ui-danger-solid, var(--ui-accent-active));
 }
-.popup[data-v-147b231f] {
+.popup[data-v-f1d9bb8a] {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
@@ -797,40 +873,40 @@ input[data-v-147b231f]:disabled, button[data-v-147b231f]:disabled {
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
 }
-[hidden][data-v-147b231f] {
+[hidden][data-v-f1d9bb8a] {
   display: none;
 }
-.option[data-v-147b231f] {
+.option[data-v-f1d9bb8a] {
   padding: var(--ui-space-2) var(--ui-space-3);
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
   overflow-wrap: anywhere;
 }
-.option[data-v-147b231f]:hover, .option.active[data-v-147b231f] {
+.option[data-v-f1d9bb8a]:hover, .option.active[data-v-f1d9bb8a] {
   background: var(--ui-surface-muted);
   outline: 1px solid var(--ui-focus-ring);
   outline-offset: -1px;
 }
-.option[aria-disabled="true"][data-v-147b231f] {
+.option[aria-disabled="true"][data-v-f1d9bb8a] {
   color: var(--ui-text-muted);
   cursor: not-allowed;
 }
-.primary[data-v-147b231f] {
+.primary[data-v-f1d9bb8a] {
   display: block;
   color: var(--ui-combobox-option-text, var(--ui-text-primary));
   font-weight: 500;
 }
-.message[data-v-147b231f], .group[data-v-147b231f] {
+.message[data-v-f1d9bb8a], .group[data-v-f1d9bb8a] {
   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-147b231f], .popup .message[data-v-147b231f] {
+.group[data-v-f1d9bb8a], .popup .message[data-v-f1d9bb8a] {
   padding: var(--ui-space-2) var(--ui-space-3);
 }
-.sr-only[data-v-147b231f] {
+.sr-only[data-v-f1d9bb8a] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -839,35 +915,35 @@ input[data-v-147b231f]:disabled, button[data-v-147b231f]:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
-button[data-v-147b231f] {
+button[data-v-f1d9bb8a] {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
 }
 }
 @media (forced-colors: active) {
-.field[data-v-147b231f], .popup[data-v-147b231f] {
+.field[data-v-f1d9bb8a], .popup[data-v-f1d9bb8a] {
     border-color: CanvasText;
 }
-.option.active[data-v-147b231f] {
+.option.active[data-v-f1d9bb8a] {
     outline-color: Highlight;
 }
 }
 
 /* Multiple mode: chips wrap before the cursor on one flexible field line. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-147b231f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-f1d9bb8a] {
   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-147b231f] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-f1d9bb8a] {
   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-147b231f] {
+.item[data-v-f1d9bb8a] {
   appearance: none;
   display: inline-flex;
   min-inline-size: 0;
@@ -881,16 +957,16 @@ button[data-v-147b231f] {
   font: inherit;
   cursor: default;
 }
-.item[data-v-147b231f]:focus-visible {
+.item[data-v-f1d9bb8a]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 1px;
 }
-.item[data-v-147b231f]:disabled {
+.item[data-v-f1d9bb8a]: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-147b231f] {
+[data-component~="ui-combobox"][hidden][data-v-f1d9bb8a] {
   display: none;
 }
 
@@ -1339,26 +1415,26 @@ from {
   display: none;
 }
 
-[data-component~="ui-editor-insert-table-grid"][data-v-c4064690] {
+[data-component~="ui-editor-insert-table-grid"][data-v-00e6602a] {
   padding: var(--ui-space-3);
   background: var(--ui-surface);
   border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius-md);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
 }
-.hint[data-v-c4064690] {
+.hint[data-v-00e6602a] {
   margin: 0 0 var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
   color: var(--ui-text-muted);
 }
-.grid[data-v-c4064690] {
+.grid[data-v-00e6602a] {
   display: grid;
-  grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
-  grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
+  grid-template-columns: repeat(var(--_cols, 8), 1.25rem);
+  grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
   gap: 2px;
   margin-bottom: var(--ui-space-2);
 }
-.cell[data-v-c4064690] {
+.cell[data-v-00e6602a] {
   width: 1.25rem;
   height: 1.25rem;
   padding: 0;
@@ -1367,17 +1443,17 @@ from {
   background: var(--ui-surface);
   cursor: pointer;
 }
-.cell.selected[data-v-c4064690] {
+.cell.selected[data-v-00e6602a] {
   background: var(--ui-accent-solid, var(--ui-accent));
   border-color: var(--ui-accent-solid, var(--ui-accent));
 }
-.header[data-v-c4064690] {
+.header[data-v-00e6602a] {
   display: block;
   margin-bottom: var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
   cursor: pointer;
 }
-[data-component~="ui-editor-insert-table-grid"] .insert[data-v-c4064690] {
+[data-component~="ui-editor-insert-table-grid"] .insert[data-v-00e6602a] {
   width: 100%;
   padding: var(--ui-space-2) var(--ui-space-3);
   border: 1px solid var(--ui-border);
@@ -1387,10 +1463,10 @@ from {
   font-size: var(--ui-font-size-sm);
   cursor: pointer;
 }
-[data-component~="ui-editor-insert-table-grid"] .insert[data-v-c4064690]:hover {
+[data-component~="ui-editor-insert-table-grid"] .insert[data-v-00e6602a]:hover {
   filter: brightness(1.05);
 }
-[data-component~="ui-editor-insert-table-grid"][hidden][data-v-c4064690] {
+[data-component~="ui-editor-insert-table-grid"][hidden][data-v-00e6602a] {
   display: none;
 }
 
@@ -1656,7 +1732,7 @@ svg[data-v-b2b50d17] {
   display: none;
 }
 
-[data-component~="ui-editor-table-context-menu"][data-v-7c984caf] {
+[data-component~="ui-editor-table-context-menu"][data-v-9cbdf038] {
   min-width: 14rem;
   max-width: min(17rem, calc(100vw - 24px));
   max-height: min(28rem, calc(100vh - 24px));
@@ -1672,12 +1748,12 @@ svg[data-v-b2b50d17] {
   overscroll-behavior: contain;
   scrollbar-width: thin;
 }
-.section[data-v-7c984caf] {
+.section[data-v-9cbdf038] {
   display: flex;
   flex-direction: column;
   gap: 3px;
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-7c984caf] {
+[data-component~="ui-editor-table-context-menu"] button[data-v-9cbdf038] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
@@ -1692,40 +1768,40 @@ svg[data-v-b2b50d17] {
   cursor: pointer;
   color: var(--ui-text);
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-7c984caf] {
+[data-component~="ui-editor-table-context-menu"] button[data-v-9cbdf038] {
   --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-7c984caf]:hover:not(:disabled) {
+[data-component~="ui-editor-table-context-menu"] button[data-v-9cbdf038]:hover:not(:disabled) {
   background: var(--ui-surface-hover);
 }
-[data-component~="ui-editor-table-context-menu"] button.selected[data-v-7c984caf] {
+[data-component~="ui-editor-table-context-menu"] button.selected[data-v-9cbdf038] {
   background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
-[data-component~="ui-editor-table-context-menu"] button.danger[data-v-7c984caf] {
+[data-component~="ui-editor-table-context-menu"] button.danger[data-v-9cbdf038] {
   color: var(--ui-danger);
 }
-.swatches[data-v-7c984caf] {
+.swatches[data-v-9cbdf038] {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 3px;
 }
-.swatch-button[data-v-7c984caf] {
+.swatch-button[data-v-9cbdf038] {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.swatch[data-v-7c984caf] {
+.swatch[data-v-9cbdf038] {
   display: inline-flex;
   width: 1rem;
   height: 1rem;
   border-radius: 999px;
   border: 1px solid var(--ui-border);
-  background: var(--ui-editor-table-context-swatch, #fff);
+  background: var(--_swatch, #fff);
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
   flex-shrink: 0;
 }
-.swatch.default[data-v-7c984caf] {
+.swatch.default[data-v-9cbdf038] {
   position: relative;
   background:
     linear-gradient(
@@ -1737,11 +1813,11 @@ svg[data-v-b2b50d17] {
     ),
     var(--ui-surface);
 }
-.swatch-label[data-v-7c984caf] {
+.swatch-label[data-v-9cbdf038] {
   min-width: 0;
   white-space: nowrap;
 }
-.heading[data-v-7c984caf] {
+.heading[data-v-9cbdf038] {
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.6875rem;
   font-weight: 700;
@@ -1749,12 +1825,12 @@ svg[data-v-b2b50d17] {
   text-transform: uppercase;
   color: var(--ui-text-muted);
 }
-.sep[data-v-7c984caf] {
+.sep[data-v-9cbdf038] {
   height: 1px;
   background: var(--ui-border);
   margin: var(--ui-space-1) 0;
 }
-[data-component~="ui-editor-table-context-menu"][hidden][data-v-7c984caf] {
+[data-component~="ui-editor-table-context-menu"][hidden][data-v-9cbdf038] {
   display: none;
 }
 
@@ -2029,7 +2105,7 @@ svg[data-v-b2b50d17] {
   display: none;
 }
 
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"][data-v-c7ed049b] {
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"][data-v-1066cfb2] {
   min-width: max-content;
   min-height: 100%;
   padding: 0;
@@ -2039,15 +2115,15 @@ svg[data-v-b2b50d17] {
   box-shadow: none;
   backdrop-filter: none;
 }
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button[data-v-c7ed049b] {
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button[data-v-1066cfb2] {
   min-height: 44px;
   background: transparent;
 }
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active[data-v-c7ed049b],
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected[data-v-c7ed049b] {
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active[data-v-1066cfb2],
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected[data-v-1066cfb2] {
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
 }
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu[data-v-c7ed049b] {
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu[data-v-1066cfb2] {
   top: auto;
   right: 0;
   bottom: calc(100% + var(--ui-space-2));
@@ -2055,7 +2131,7 @@ svg[data-v-b2b50d17] {
   overflow-y: auto;
   overscroll-behavior: contain;
 }
-[data-component~="ui-editor-table-toolbar"][data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"][data-v-1066cfb2] {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-1);
@@ -2066,21 +2142,21 @@ svg[data-v-b2b50d17] {
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   backdrop-filter: blur(10px);
 }
-.group[data-v-c7ed049b] {
+.group[data-v-1066cfb2] {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   overflow: hidden;
 }
-.sep[data-v-c7ed049b] {
+.sep[data-v-1066cfb2] {
   width: 1px;
   align-self: stretch;
   background: var(--ui-border);
 }
-.overflow[data-v-c7ed049b] {
+.overflow[data-v-1066cfb2] {
   position: relative;
 }
-[data-component~="ui-editor-table-toolbar"] button[data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"] button[data-v-1066cfb2] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2097,39 +2173,39 @@ svg[data-v-b2b50d17] {
   padding: var(--ui-space-2) var(--ui-space-2);
   white-space: nowrap;
 }
-[data-component~="ui-editor-table-toolbar"] button[data-v-c7ed049b]:hover {
+[data-component~="ui-editor-table-toolbar"] button[data-v-1066cfb2]:hover {
   background: var(--ui-surface-hover);
 }
-[data-component~="ui-editor-table-toolbar"] button.active[data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"] button.active[data-v-1066cfb2] {
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
   color: var(--ui-accent-active);
 }
-.group button[data-v-c7ed049b] {
+.group button[data-v-1066cfb2] {
   border-radius: var(--ui-radius-sm);
 }
-.group button + button[data-v-c7ed049b] {
+.group button + button[data-v-1066cfb2] {
   border-left: 0;
 }
-[data-component~="ui-editor-table-toolbar"] .more[data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"] .more[data-v-1066cfb2] {
   border: 0;
   border-radius: var(--ui-radius-sm);
 }
-[data-component~="ui-editor-table-toolbar"] button.danger[data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"] button.danger[data-v-1066cfb2] {
   color: var(--ui-danger);
 }
-[data-component~="ui-editor-table-toolbar"][data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"][data-v-1066cfb2] {
   --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-c7ed049b] {
+.chevron[data-v-1066cfb2] {
   display: inline-flex;
   --ui-icon-size: 0.875rem;
 }
-[data-component~="ui-editor-table-toolbar"] .icon-button[data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"] .icon-button[data-v-1066cfb2] {
   width: 32px;
   padding-inline: 0;
 }
-.menu[data-v-c7ed049b] {
+.menu[data-v-1066cfb2] {
   position: absolute;
   top: calc(100% + var(--ui-space-2));
   right: 0;
@@ -2144,12 +2220,12 @@ svg[data-v-b2b50d17] {
   gap: 2px;
   z-index: 2;
 }
-.menu-section + .menu-section[data-v-c7ed049b] {
+.menu-section + .menu-section[data-v-1066cfb2] {
   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-c7ed049b] {
+.menu-heading[data-v-1066cfb2] {
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.6875rem;
   font-weight: 700;
@@ -2157,42 +2233,42 @@ svg[data-v-b2b50d17] {
   text-transform: uppercase;
   color: var(--ui-text-muted);
 }
-.menu button[data-v-c7ed049b] {
+.menu button[data-v-1066cfb2] {
   display: flex;
   justify-content: flex-start;
   width: 100%;
   text-align: left;
 }
-.swatches[data-v-c7ed049b] {
+.swatches[data-v-1066cfb2] {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 2px;
 }
-[data-component~="ui-editor-table-toolbar"] .swatch-button[data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"] .swatch-button[data-v-1066cfb2] {
   gap: var(--ui-space-1);
   justify-content: flex-start;
 }
-.swatch[data-v-c7ed049b] {
+.swatch[data-v-1066cfb2] {
   width: 14px;
   height: 14px;
   flex: 0 0 14px;
   border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
   border-radius: 3px;
-  background: var(--ui-editor-table-toolbar-swatch);
+  background: var(--_swatch);
 }
-.swatch.default[data-v-c7ed049b] {
+.swatch.default[data-v-1066cfb2] {
   background:
     linear-gradient(135deg, transparent 44%, var(--ui-danger) 46% 54%, transparent 56%),
     var(--ui-surface);
 }
-.swatch-button.selected[data-v-c7ed049b] {
+.swatch-button.selected[data-v-1066cfb2] {
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
 }
-[data-component~="ui-editor-table-toolbar"][hidden][data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"][hidden][data-v-1066cfb2] {
   display: none;
 }
 
-[data-component~="ui-editor-toolbar"][data-v-472b5c16] {
+[data-component~="ui-editor-toolbar"][data-v-0da1a114] {
   position: sticky;
   top: 0;
   z-index: var(--ui-editor-toolbar-z-index, 10);
@@ -2203,26 +2279,28 @@ svg[data-v-b2b50d17] {
   padding: var(--ui-editor-toolbar-padding-block, 6px)
     var(--ui-editor-toolbar-padding-inline, 12px);
   min-height: var(--ui-editor-toolbar-min-height, 48px);
-  overflow-x: auto;
-  scrollbar-width: none;
-  white-space: nowrap;
+  /* More controls than the column is wide is normal at a readable measure, so the row wraps.
+     Scrolling hid the tail behind an invisible scrollbar. */
+  flex-wrap: wrap;
+  row-gap: var(--ui-editor-toolbar-row-gap, var(--ui-editor-toolbar-gap, 2px));
   background: var(--ui-editor-toolbar-surface, var(--ui-surface));
   border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
 }
-[data-component~="ui-editor-toolbar"][data-v-472b5c16]::-webkit-scrollbar {
+[data-component~="ui-editor-toolbar"][data-v-0da1a114]::-webkit-scrollbar {
   display: none;
 }
-[data-component~="ui-editor-toolbar"] > [data-v-472b5c16-s] {
+[data-component~="ui-editor-toolbar"] > [data-v-0da1a114-s] {
   flex: 0 0 auto;
 }
-.divider[data-v-472b5c16-s] {
+.divider[data-v-0da1a114-s] {
   width: 1px;
   height: 20px;
   background: var(--ui-editor-toolbar-divider, var(--ui-border));
   flex-shrink: 0;
   margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
 }
-[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-472b5c16] {
+[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-0da1a114] {
+  flex-wrap: nowrap;
   position: static;
   top: auto;
   width: max-content;
@@ -2244,7 +2322,7 @@ svg[data-v-b2b50d17] {
   backdrop-filter: blur(10px);
 }
 @media (max-width: 767px) {
-[data-component~="ui-editor-toolbar"][data-v-472b5c16] {
+[data-component~="ui-editor-toolbar"][data-v-0da1a114] {
     position: fixed;
     top: auto;
     bottom: env(safe-area-inset-bottom);
@@ -2255,7 +2333,7 @@ svg[data-v-b2b50d17] {
     border-bottom: none;
     box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
 }
-[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-472b5c16] {
+[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-0da1a114] {
     position: static;
     inset: auto;
     min-height: auto;
@@ -2269,7 +2347,7 @@ svg[data-v-b2b50d17] {
 }
 
 /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
-.looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"][data-v-472b5c16] {
+.looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"][data-v-0da1a114] {
   position: static;
   min-height: var(--ui-editor-toolbar-min-height, 48px);
   overscroll-behavior-inline: contain;
@@ -2280,7 +2358,7 @@ svg[data-v-b2b50d17] {
 
 /* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
 .looma-editor__mobile-toolbar-shell
-  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-472b5c16] {
+  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-0da1a114] {
   width: 100%;
   max-width: none;
   min-height: 100%;
@@ -2297,7 +2375,7 @@ svg[data-v-b2b50d17] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-editor-toolbar"][hidden][data-v-472b5c16] {
+[data-component~="ui-editor-toolbar"][hidden][data-v-0da1a114] {
   display: none;
 }
 
@@ -2761,7 +2839,7 @@ svg[data-v-80722d12-s] {
 }
 }
 
-[data-component~="ui-menu-item"][data-v-deb5a674] {
+[data-component~="ui-menu-item"][data-v-69407da9] {
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -2778,16 +2856,29 @@ svg[data-v-80722d12-s] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-menu-item"][data-v-deb5a674]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
+
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* 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-menu-item"][data-v-69407da9] {
+    display: block;
+    min-block-size: var(--ui-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem));
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+}
+}
+[data-component~="ui-menu-item"][data-v-69407da9]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
   background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
 }
-[data-component~="ui-menu-item"][aria-disabled="true"][data-v-deb5a674] {
+[data-component~="ui-menu-item"][aria-disabled="true"][data-v-69407da9] {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-menu-item"][hidden][data-v-deb5a674] {
+[data-component~="ui-menu-item"][hidden][data-v-69407da9] {
   display: none;
 }
 
@@ -3394,52 +3485,52 @@ hr[aria-orientation="vertical"][data-v-f0034397] {
   display: none;
 }
 
-[data-component~="ui-stack"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-v-9a903e2b] {
   --_layout-gap: var(--ui-space-4);
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: var(--ui-layout-gap, var(--_layout-gap));
+  gap: var(--ui-stack-gap, var(--_layout-gap));
   min-inline-size: 0;
   max-inline-size: 100%;
   margin: 0;
 }
-[data-component~="ui-stack"][data-ui-stack-state~="gap=xs"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="gap=xs"][data-v-9a903e2b] {
   --_layout-gap: var(--ui-space-2);
 }
-[data-component~="ui-stack"][data-ui-stack-state~="gap=s"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="gap=s"][data-v-9a903e2b] {
   --_layout-gap: var(--ui-space-3);
 }
-[data-component~="ui-stack"][data-ui-stack-state~="gap=m"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="gap=m"][data-v-9a903e2b] {
   --_layout-gap: var(--ui-space-4);
 }
-[data-component~="ui-stack"][data-ui-stack-state~="gap=l"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="gap=l"][data-v-9a903e2b] {
   --_layout-gap: var(--ui-space-5);
 }
-[data-component~="ui-stack"][data-ui-stack-state~="gap=xl"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="gap=xl"][data-v-9a903e2b] {
   --_layout-gap: var(--ui-space-6);
 }
-[data-component~="ui-stack"][data-ui-stack-state~="align=start"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="align=start"][data-v-9a903e2b] {
   align-items: flex-start;
 }
-[data-component~="ui-stack"][data-ui-stack-state~="align=center"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="align=center"][data-v-9a903e2b] {
   align-items: center;
 }
-[data-component~="ui-stack"][data-ui-stack-state~="align=end"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="align=end"][data-v-9a903e2b] {
   align-items: flex-end;
 }
-[data-component~="ui-stack"][data-ui-stack-state~="justify=center"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="justify=center"][data-v-9a903e2b] {
   justify-content: center;
 }
-[data-component~="ui-stack"][data-ui-stack-state~="justify=end"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="justify=end"][data-v-9a903e2b] {
   justify-content: flex-end;
 }
-[data-component~="ui-stack"][data-ui-stack-state~="justify=between"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="justify=between"][data-v-9a903e2b] {
   justify-content: space-between;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-stack"][hidden][data-v-aa8062a9] {
+[data-component~="ui-stack"][hidden][data-v-9a903e2b] {
   display: none;
 }
 
@@ -3572,22 +3663,22 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
 }
 
 /* Density resolves into the tab row's own values; the public tokens still override them. */
-[data-component~="ui-tabs"][data-v-b9e876c6] {
+[data-component~="ui-tabs"][data-v-3e89baea] {
   --_tab-min-block-size: var(--ui-control-size);
   --_tab-padding-block: var(--ui-space-2);
   --_tab-padding-inline: var(--ui-space-3);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="density=compact"][data-v-b9e876c6] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="density=compact"][data-v-3e89baea] {
   --_tab-min-block-size: var(--ui-control-size-sm);
   --_tab-padding-block: var(--ui-space-1);
   --_tab-padding-inline: var(--ui-space-2);
 }
-[data-component~="ui-tabs"][data-v-b9e876c6] {
+[data-component~="ui-tabs"][data-v-3e89baea] {
   display: grid;
   inline-size: 100%;
   min-inline-size: 0;
 }
-.list[data-v-b9e876c6] {
+.list[data-v-3e89baea] {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: max-content;
@@ -3603,7 +3694,7 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
   scrollbar-width: thin;
   border-block-end: 1px solid var(--ui-border-default);
 }
-.list button[data-v-b9e876c6] {
+.list button[data-v-3e89baea] {
   min-block-size: var(--ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
   margin: 0 0 -1px;
   padding: var(--ui-tabs-tab-padding-block, var(--_tab-padding-block))
@@ -3621,43 +3712,56 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     border-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="stretch"] .list[data-v-b9e876c6] {
+
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
+/* 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) {
+.list button[data-v-3e89baea] {
+    display: block;
+    text-align: center;
+    align-content: center;
+    text-box-trim: trim-both;
+    text-box-edge: cap alphabetic;
+}
+}
+[data-component~="ui-tabs"][data-ui-tabs-state~="stretch"] .list[data-v-3e89baea] {
   grid-auto-columns: minmax(max-content, 1fr);
 }
-.list button[data-v-b9e876c6] {
+.list button[data-v-3e89baea] {
   white-space: nowrap;
 }
-.list button[data-v-b9e876c6]:hover {
+.list button[data-v-3e89baea]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
 }
-.list button[aria-selected="true"][data-v-b9e876c6] {
+.list button[aria-selected="true"][data-v-3e89baea] {
   color: var(--ui-accent-solid);
   border-block-end-color: var(--ui-accent-solid);
 }
-.list button[data-v-b9e876c6]:focus-visible {
+.list button[data-v-3e89baea]:focus-visible {
   position: relative;
   outline: none;
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
   border-radius: var(--ui-radius-sm);
 }
-.panels[data-v-b9e876c6] {
+.panels[data-v-3e89baea] {
   min-inline-size: 0;
 }
-[data-v-b9e876c6-s] {
+[data-v-3e89baea-s] {
   padding: var(--ui-space-4);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"][data-v-b9e876c6] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"][data-v-3e89baea] {
   grid-template-columns: max-content minmax(0, 1fr);
   align-items: start;
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list[data-v-b9e876c6] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list[data-v-3e89baea] {
   grid-auto-flow: row;
   grid-auto-columns: auto;
   border-block-end: 0;
   border-inline-end: 1px solid var(--ui-border-default);
 }
-[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list button[data-v-b9e876c6] {
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list button[data-v-3e89baea] {
   margin: 0 -1px 0 0;
   border-block-end: 0;
   border-inline-end: 2px solid transparent;
@@ -3665,17 +3769,17 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
 }
 [data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
   .list
-  button[aria-selected="true"][data-v-b9e876c6] {
+  button[aria-selected="true"][data-v-3e89baea] {
   border-inline-end-color: var(--ui-accent-solid);
 }
 @media (prefers-reduced-motion: reduce) {
-.list button[data-v-b9e876c6] {
+.list button[data-v-3e89baea] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tabs"][hidden][data-v-b9e876c6] {
+[data-component~="ui-tabs"][hidden][data-v-3e89baea] {
   display: none;
 }
 
@@ -3746,7 +3850,7 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
   display: none;
 }
 
-[data-component~="ui-toast-region"][data-v-7d8dab78] {
+[data-component~="ui-toast-region"][data-v-660faa24] {
   position: fixed;
   top: calc(var(--ui-space-4) + env(safe-area-inset-top));
   right: auto;
@@ -3768,14 +3872,14 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
   box-shadow: none;
   pointer-events: none;
 }
-[data-component~="ui-toast-region"][data-v-7d8dab78]:not(:popover-open) {
+[data-component~="ui-toast-region"][data-v-660faa24]:not(:popover-open) {
   display: none;
 }
-[data-component~="ui-toast-region"] > .toast[data-v-7d8dab78],
-[data-component~="ui-toast-region"] > [data-v-7d8dab78-s] {
+[data-component~="ui-toast-region"] > .toast[data-v-660faa24],
+[data-component~="ui-toast-region"] > [data-v-660faa24-s] {
   pointer-events: auto;
 }
-.toast[data-v-7d8dab78] {
+.toast[data-v-660faa24] {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: var(--ui-space-2);
@@ -3786,16 +3890,16 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
-  animation: ui-toast-enter-7d8dab78 var(--ui-toast-enter-duration, 0.32s)
+  animation: ui-toast-enter-660faa24 var(--ui-toast-region-enter-duration, 0.32s)
     var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
-.toast.closing[data-v-7d8dab78] {
-  animation: ui-toast-exit-7d8dab78 var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease) both;
+.toast.closing[data-v-660faa24] {
+  animation: ui-toast-exit-660faa24 var(--ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
   pointer-events: none;
 }
-@keyframes ui-toast-enter-7d8dab78 {
+@keyframes ui-toast-enter-660faa24 {
 from {
     opacity: 0;
     transform: translateY(-1rem);
@@ -3805,7 +3909,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-7d8dab78 {
+@keyframes ui-toast-exit-660faa24 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -3816,21 +3920,21 @@ to {
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.toast[data-v-7d8dab78], .toast.closing[data-v-7d8dab78] {
+.toast[data-v-660faa24], .toast.closing[data-v-660faa24] {
     animation: none;
 }
 }
-.message[data-v-7d8dab78] {
+.message[data-v-660faa24] {
   min-inline-size: 0;
   align-self: center;
 }
-.dismiss[data-v-7d8dab78] {
+.dismiss[data-v-660faa24] {
   align-self: center;
   margin-inline-end: calc(var(--ui-space-2) * -1);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-toast-region"][hidden][data-v-7d8dab78] {
+[data-component~="ui-toast-region"][hidden][data-v-660faa24] {
   display: none;
 }
 
@@ -4237,7 +4341,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   padding: var(--ui-callout-padding-block) var(--ui-callout-padding-inline);
   border: var(--ui-callout-border-width) solid color-mix(in srgb, var(--ui-callout-border) 35%, transparent);
   border-inline-start: var(--ui-callout-leading-border-width) solid var(--ui-callout-border);
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: var(--ui-callout-surface);
   color: var(--ui-callout-text);
 }
@@ -4285,7 +4389,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   padding: var(--ui-space-4);
   overflow-x: auto;
   border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: var(--ui-surface-muted);
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
   font-size: var(--ui-font-size-sm);
@@ -4293,7 +4397,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
 
 .looma-editor .ProseMirror code {
   padding: 0.1em 0.3em;
-  border-radius: var(--ui-radius-1);
+  border-radius: var(--ui-radius-sm);
   background: var(--ui-surface-subtle);
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
   font-size: 0.9em;
@@ -4311,7 +4415,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
 }
 
 .looma-editor .ProseMirror mark {
-  border-radius: var(--ui-radius-1);
+  border-radius: var(--ui-radius-sm);
   background: var(--ui-editor-highlight-bg, var(--ui-warning-soft));
 }
 
@@ -4354,7 +4458,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   max-width: 100%;
   height: auto;
   margin: var(--ui-space-3) 0;
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
 }
 
 .looma-editor .ProseMirror img[data-looma-image]:focus-visible {
@@ -4378,7 +4482,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   margin-top: var(--ui-space-3);
   padding: var(--ui-space-2) var(--ui-space-3);
   border: 1px solid var(--ui-danger-solid);
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: var(--ui-danger-soft);
   color: var(--ui-text);
   font-size: var(--ui-font-size-sm);
@@ -4388,7 +4492,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   min-height: 2rem;
   padding: 0 var(--ui-space-3);
   border: 0;
-  border-radius: var(--ui-radius-1);
+  border-radius: var(--ui-radius-sm);
   background: var(--ui-danger-solid);
   color: var(--ui-text-on-accent);
   cursor: pointer;
@@ -4416,7 +4520,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   justify-content: center;
   gap: var(--ui-space-3);
   border: 2px dashed var(--ui-accent-solid);
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: color-mix(in srgb, var(--ui-accent-soft) 92%, transparent);
   color: var(--ui-accent-active);
   font-size: var(--ui-font-size-sm);
@@ -4432,10 +4536,17 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
 
 .looma-editor__toolbar-button {
   --ui-icon-button-size: var(--ui-editor-toolbar-button-size, 2rem);
-  --ui-icon-button-radius: var(--ui-editor-toolbar-button-radius, var(--ui-radius-1));
+  --ui-icon-button-radius: var(--ui-editor-toolbar-button-radius, var(--ui-radius-sm));
   --ui-icon-button-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
 }
 
+.looma-editor__toolbar-button[data-active="true"] {
+  --ui-icon-button-surface: var(--ui-editor-toolbar-active-surface, var(--ui-accent-subtle));
+  --ui-icon-button-text: var(--ui-editor-toolbar-active-text, var(--ui-accent-active));
+  color: var(--ui-editor-toolbar-active-text, var(--ui-accent-active));
+  box-shadow: inset 0 0 0 1px var(--ui-editor-toolbar-active-border, color-mix(in srgb, var(--ui-accent) 40%, transparent));
+}
+
 .looma-editor__toolbar-button > .looma-icon {
   width: var(--ui-editor-toolbar-icon-size, 1rem);
   height: var(--ui-editor-toolbar-icon-size, 1rem);
@@ -4447,7 +4558,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   top: var(--ui-editor-sticky-toolbar-top, 0);
   z-index: var(--ui-editor-toolbar-z-index, 10);
   min-width: 0;
-  background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
+  background: var(--ui-editor-toolbar-surface, var(--ui-surface, #fff));
   border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
 }
 
@@ -4485,7 +4596,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   -webkit-overflow-scrolling: touch;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
-  background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
+  background: var(--ui-editor-toolbar-surface, var(--ui-surface, #fff));
   border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
   box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
 }
@@ -4508,7 +4619,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--ui-space-1-5, 6px);
+  gap: var(--ui-space-2);
   min-width: 44px;
   min-height: 44px;
   padding: 0 var(--ui-space-3, 12px);
@@ -4642,7 +4753,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   left: calc(100% + 6px);
   width: max-content;
   padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
-  border-radius: var(--ui-radius-1, 4px);
+  border-radius: var(--ui-radius-sm, 4px);
   background: var(--ui-text-primary, #1a1a1a);
   color: var(--ui-surface-elevated, #fff);
   font-size: var(--ui-font-size-xs, 0.75rem);