@scattered-light/loomiere-mojave 0.10.0 → 0.12.0

package/dist/exports/design-system/components/bundle.css

@@ -1875,6 +1875,7 @@
     --sl-badge-dot-condense: var(--sl-space-2); /** 8px, the default. */
     --sl-badge-dot-base: var(--sl-space-2); /** 8px. The base badge is taller, but the dot stays a mark. */
     --sl-collection-tree-indent: var(--sl-space-4); /** How far each deeper level steps in, so a child sits under its parent's text. */
+    --sl-collection-disclosure-size-small: var(--sl-space-5); /** The expand and collapse button when a table sets disclosure="small", small enough that a parent row keeps its siblings' height. */
     --sl-collection-list-row-padding-block: var(--sl-space-3); /** Vertical padding of a list row. The row is not a fixed height, because a second line and an extra slot have to fit. */
     --sl-collection-list-row-gap: var(--sl-space-2); /** Between the checkbox, the text, the amount and the actions in a list row. */
     --sl-collection-toolbar-gap: var(--sl-space-2); /** Between the search, the filters and the actions. */
@@ -1903,9 +1904,10 @@
     --sl-side-nav-item-gap: var(--sl-space-2); /** Space between a row's label and its count. */
     --sl-side-nav-indicator-width: var(--sl-stroke-medium); /** The line under the current row. */
     --sl-side-nav-group-padding-top: var(--sl-space-5); /** Space above a group heading. */
-    --sl-side-nav-toggle-size: var(--sl-space-6); /** The collapse button's width and height. It sits on the column's edge. */
-    --sl-side-nav-toggle-offset: var(--sl-space-4); /** Distance of the collapse button from the top of the column. */
-    --sl-side-nav-collapsed-width: var(--sl-space-11); /** Width of the column when it is collapsed, wide enough for the collapse button. */
+    --sl-side-nav-toggle-width: var(--sl-space-6); /** The collapse handle's width. It straddles the column's edge. */
+    --sl-side-nav-toggle-height: var(--sl-space-11); /** The collapse handle's height, a tall tab on the column's edge. */
+    --sl-side-nav-toggle-offset: var(--sl-space-7); /** Distance of the collapse button from the top of the column. */
+    --sl-side-nav-collapsed-width: var(--sl-space-11); /** Width of the column when it is collapsed, wide enough for the collapse handle. */
     --sl-slider-thumb-size: var(--sl-space-5); /** Knob diameter, big enough to grab with a finger on a 4px track. */
     --sl-splitter-handle-hit-size: var(--sl-a11y-min-touch-target); /** The part a finger grabs. The line stays one stroke. A fine pointer uses a11y.min-target (24px) instead, so the grab area does not cover the panel's scrollbar. Coarse pointers keep this 44px. */
     --sl-splitter-grip-size: var(--sl-space-1); /** 4px. The diameter of one grip dot. Small enough to sit on the hairline without becoming a second control. */
@@ -2179,6 +2181,7 @@
     --sl-sheet-border-width: var(--sl-stroke-default); /** Thickness of the sides and bottom. */
     --sl-sheet-radius: var(--sl-radius-surface); /** Corners, like any card or panel. The top corners stay square under a tab label, so the tab sits flush on the rule. */
     --sl-side-nav-item-height: var(--sl-control-height-md); /** Least height of a row: the regular control height, so a row is as tall as a button. */
+    --sl-side-nav-toggle-radius: var(--sl-radius-control); /** The collapse handle's corners. */
     --sl-splitter-handle-size: var(--sl-stroke-default); /** The visible separator. One stroke, the same hairline as Separator, so a splitter reads as a divider you can grab. */
     --sl-focus-shadow-3px-error: 0 0 0 3px var(--sl-status-error); /** Focus halo for a field with an error. */
     --sl-calendar-day-color: var(--sl-text-primary); /** A day in the month being shown. */
@@ -2279,6 +2282,7 @@
     --sl-status-level-error-bold-fg: var(--sl-scope-error-on-solid); /** bold in error: solid in error */
     --sl-description-list-value-color: var(--sl-text-primary); /** Values. */
     --sl-side-nav-item-color: var(--sl-text-primary); /** A row's text. */
+    --sl-side-nav-toggle-border-color: var(--sl-text-primary); /** The collapse handle's outline and chevron. It fills with this color on hover. */
     --sl-stat-figure-figure-color: var(--sl-text-primary); /** The figure's color. */
     --sl-focus-shadow-3px-primary: 0 0 0 3px var(--sl-interactive-tint-hover); /** Soft focus halo for inputs. */
     --sl-focus-shadow-3px-primary-soft: 0 0 0 3px var(--sl-interactive-tint-active); /** Slightly stronger focus halo for inputs on tinted surfaces. */
@@ -2366,6 +2370,7 @@
     --sl-status-level-default-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
     --sl-app-bar-background: var(--sl-surface-raised); /** The bar's fill: one step off the page, like a card, so the page reads as sitting under it. */
     --sl-app-bar-divider-color: var(--sl-border-strong); /** Color of a vertical Separator in the bar. */
+    --sl-collection-tree-line-color: var(--sl-border-strong); /** The elbow connector from a child row back to its parent, with treeLines. */
     --sl-description-list-row-border-color: var(--sl-border-subtle); /** Hairline between pairs, as quiet as a table's row lines. */
     --sl-description-list-label-color: var(--sl-text-secondary); /** Labels. */
     --sl-description-list-leader-color: var(--sl-border-control); /** The dotted leader at variant="leader". The control edge color: dark enough to lead the eye, still lighter than the text. */
@@ -2383,8 +2388,7 @@
     --sl-side-nav-count-color: var(--sl-text-accent); /** A count at the end of a row, such as items open. Accent text so it asks for attention. */
     --sl-side-nav-count-color-quiet: var(--sl-text-secondary); /** A count that is only information (tone="quiet"), such as a total. */
     --sl-side-nav-group-label-color: var(--sl-text-secondary); /** A group heading's caps label. */
-    --sl-side-nav-toggle-background: var(--sl-surface-raised); /** The collapse button's fill. */
-    --sl-side-nav-toggle-border-color: var(--sl-border-strong); /** The collapse button's outline. */
+    --sl-side-nav-toggle-background: var(--sl-surface-raised); /** The collapse handle's fill. */
     --sl-stat-figure-figure-color-accent: var(--sl-text-accent); /** The figure's color at tone="accent", for a figure that asks for action (open questions, items to review). */
     --sl-stat-figure-label-color: var(--sl-text-secondary); /** The caps label above the figure. */
     --sl-stat-figure-caption-color: var(--sl-text-secondary); /** The caption under the figure. */
@@ -5900,6 +5904,7 @@
     --sl-app-bar-background: var(--sl-surface-raised);
     --sl-app-bar-border-color: var(--sl-rule-color);
     --sl-app-bar-divider-color: var(--sl-border-strong);
+    --sl-collection-tree-line-color: var(--sl-border-strong);
     --sl-description-list-row-border-color: var(--sl-border-subtle);
     --sl-description-list-label-color: var(--sl-text-secondary);
     --sl-description-list-value-color: var(--sl-text-primary);
@@ -5923,7 +5928,7 @@
     --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
     --sl-side-nav-group-label-color: var(--sl-text-secondary);
     --sl-side-nav-toggle-background: var(--sl-surface-raised);
-    --sl-side-nav-toggle-border-color: var(--sl-border-strong);
+    --sl-side-nav-toggle-border-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
     --sl-stat-figure-underline-color: var(--sl-rule-color);
@@ -6084,6 +6089,7 @@
     --sl-app-bar-background: var(--sl-surface-raised);
     --sl-app-bar-border-color: var(--sl-rule-color);
     --sl-app-bar-divider-color: var(--sl-border-strong);
+    --sl-collection-tree-line-color: var(--sl-border-strong);
     --sl-description-list-row-border-color: var(--sl-border-subtle);
     --sl-description-list-label-color: var(--sl-text-secondary);
     --sl-description-list-value-color: var(--sl-text-primary);
@@ -6107,7 +6113,7 @@
     --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
     --sl-side-nav-group-label-color: var(--sl-text-secondary);
     --sl-side-nav-toggle-background: var(--sl-surface-raised);
-    --sl-side-nav-toggle-border-color: var(--sl-border-strong);
+    --sl-side-nav-toggle-border-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
     --sl-stat-figure-underline-color: var(--sl-rule-color);
@@ -6268,6 +6274,7 @@
     --sl-app-bar-background: var(--sl-surface-raised);
     --sl-app-bar-border-color: var(--sl-rule-color);
     --sl-app-bar-divider-color: var(--sl-border-strong);
+    --sl-collection-tree-line-color: var(--sl-border-strong);
     --sl-description-list-row-border-color: var(--sl-border-subtle);
     --sl-description-list-label-color: var(--sl-text-secondary);
     --sl-description-list-value-color: var(--sl-text-primary);
@@ -6291,7 +6298,7 @@
     --sl-side-nav-count-color-quiet: var(--sl-text-secondary);
     --sl-side-nav-group-label-color: var(--sl-text-secondary);
     --sl-side-nav-toggle-background: var(--sl-surface-raised);
-    --sl-side-nav-toggle-border-color: var(--sl-border-strong);
+    --sl-side-nav-toggle-border-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color: var(--sl-text-primary);
     --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
     --sl-stat-figure-underline-color: var(--sl-rule-color);
@@ -6657,7 +6664,7 @@
 }
 
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
    Loomiere theme. Load the theme first:
      @import '<your theme>/tokens.css';
@@ -6667,7 +6674,7 @@
 /* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
    frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -7111,7 +7118,7 @@ hr {
 }
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
 
 /* Remove default focus; keyboard focus styled in accessibility-theme.css */
@@ -7224,7 +7231,7 @@ main:focus {
 
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {
@@ -7292,7 +7299,7 @@ button,
 
 }
 /* Component styles */
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -7413,7 +7420,7 @@ button,
   overflow: hidden;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Alert Dialog - Mojave Theme
  *
  * No component tokens and no rules of its own. An alert dialog looks exactly like a
@@ -7422,7 +7429,7 @@ button,
  * cancel quiet, and a destructive one bold with data-color="error".
  */
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Autocomplete - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css), the clear button is an icon
@@ -7624,7 +7631,7 @@ button,
    (reset-accessibility.css).
    ============================================ */
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Avatar - Mojave Theme
  *
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in
@@ -7732,7 +7739,7 @@ button,
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Button - Mojave Theme
  *
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
@@ -7882,7 +7889,7 @@ button,
   font-size: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox - Mojave Theme
  * Sizes follow the label: the box is the icon size one tier above the label's text
  * tier (like a button's icon) and the check mark one tier below it.
@@ -8039,7 +8046,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox Group - Mojave Theme */
 
 /* Each checkbox row is already a full tap target tall, so the rows sit close. */
@@ -8055,7 +8062,7 @@ button,
   pointer-events: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -8171,7 +8178,7 @@ button,
   background: var(--sl-surface-raised);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Combobox - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css); the chips box is a field; the
@@ -8656,7 +8663,7 @@ button,
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Context Menu - Mojave Theme
  *
  * No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the
@@ -8825,7 +8832,7 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Dialog and Alert dialog - Mojave Theme
  *
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
@@ -8971,7 +8978,7 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Drawer - a panel that slides in from an edge and can be swiped away.
    The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
    drawer reads as a dialog's sibling; only its size and grab bar are its own
@@ -9104,7 +9111,7 @@ button,
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -9165,7 +9172,7 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Fieldset - Mojave Theme
  *
  * No component tokens: a titled group of fields, spaced by the stack gaps, with
@@ -9207,7 +9214,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Form - Mojave Theme
  *
  * No component tokens: fields stack with the large block space, and the action
@@ -9227,7 +9234,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Input - Mojave Theme
  *
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -9364,7 +9371,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Menu - Mojave Theme
  *
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
@@ -9513,7 +9520,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Menubar - Mojave Theme
  *
  * No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
@@ -9706,7 +9713,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Meter - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
@@ -9769,7 +9776,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Navigation Menu - Mojave Theme
  *
  * The strip is the bar concept, the panel is the popup concept and each link is an item
@@ -10189,7 +10196,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Number Field - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css) and the label, description and
@@ -10280,7 +10287,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* OTP Field - Mojave Theme
  *
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input
@@ -10343,7 +10350,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -10508,7 +10515,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Preview Card - Mojave Theme
  *
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense
@@ -10625,7 +10632,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Progress - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
@@ -10702,7 +10709,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Radio - Mojave Theme
  * Same box as Checkbox, always round. Sizes follow the label the same way, and the
  * dot is a share of the circle (check.dot-scale).
@@ -10854,7 +10861,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Scroll Area - Mojave Theme
  *
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
@@ -10936,7 +10943,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Select - Mojave Theme
  *
  * The trigger is a field (the field pattern, control sizes, the base text style); the
@@ -11221,7 +11228,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Separator - Mojave Theme
  *
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
@@ -11249,7 +11256,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Slider - Mojave Theme
  *
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
@@ -11415,7 +11422,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Switch - Mojave Theme
  * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
  * worked out from them: the thumb fills the track's height inside the padding,
@@ -11581,7 +11588,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Tabs - Mojave Theme
  *
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -11717,7 +11724,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Toast - Mojave Theme
  *
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -11953,7 +11960,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle - Mojave Theme
  * A toggle is a button that stays pressed: the same heights, padding, gap and
  * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
@@ -12065,7 +12072,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle Group - Mojave Theme
  *
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -12127,7 +12134,7 @@ textarea.FieldControl {
   outline-offset: var(--sl-focus-outline-offset-inset);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -12189,7 +12196,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Tooltip - Mojave Theme
  *
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
@@ -12250,7 +12257,7 @@ textarea.FieldControl {
 }
 
 /* Custom components: not Base UI parts. Built from existing concepts and tokens. */
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Badge
  *
  * A status or count label. Not a Base UI part, and not interactive: no hover or focus.
@@ -12355,7 +12362,7 @@ textarea.FieldControl {
   height: var(--sl-badge-dot-base);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /*
  * DatePicker: a field that opens a calendar for one date or a period.
  * Not a Base UI part. The popup is Popover on a wide viewport and Drawer
@@ -12928,7 +12935,7 @@ textarea.FieldControl {
   flex-basis: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Money field
  *
  * An amount of money, built on Number field. The value is an integer in minor units
@@ -13273,7 +13280,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* ListDetail
  *
  * The detail of one item, next to its list. Not a Base UI part. It is a Splitter
@@ -13400,7 +13407,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Splitter
  *
  * Two or more panels and a handle between them. Not a Base UI part. It follows the
@@ -13608,7 +13615,7 @@ textarea.FieldControl {
   background: var(--sl-border-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* EmptyState
  *
  * The block a page, pane, table, list or popup shows when it has nothing to show.
@@ -13864,7 +13871,7 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Table - Mojave Theme
  *
  * Base UI has no table, so this styles the native <table class="Table"> elements with the
@@ -14098,7 +14105,7 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Collection
  *
  * DataTable, DataList, the toolbar and the pagination, in one place so the two views
@@ -14109,7 +14116,7 @@ textarea.FieldControl {
  * the tabs and the search where they are, so selecting rows does not grow the toolbar.
  */
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Collection toolbar
  *
  * The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
@@ -14250,7 +14257,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* DataTable additions on top of .Table.
  *
  * Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
@@ -14371,7 +14378,50 @@ textarea.FieldControl {
   color: var(--sl-table-subtle-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* Tree rows. `treeLines` draws an elbow from each child's name back up to its parent. */
+.DataTable {
+  --row-depth: 0;
+}
+
+.DataTable[data-tree-lines] tbody tr[data-depth] > th[scope='row'] {
+  position: relative;
+}
+
+.DataTable[data-tree-lines] tbody tr[data-depth] > th[scope='row']::before {
+  content: '';
+  position: absolute;
+  inset-block: 0 50%;
+  inset-inline-start: calc(
+    var(--sl-table-cell-padding-inline) + var(--sl-collection-tree-indent) * (var(--row-depth) - 1) + var(--sl-collection-tree-indent) * 0.5
+  );
+  inline-size: calc(var(--sl-collection-tree-indent) * 0.375);
+  border-inline-start: var(--sl-stroke-default) solid var(--sl-collection-tree-line-color);
+  border-block-end: var(--sl-stroke-default) solid var(--sl-collection-tree-line-color);
+  pointer-events: none;
+}
+
+/* A small expand and collapse button, so a parent row stays the height of its siblings. */
+.DataTable[data-disclosure='small'] .CollectionGroupButton:has(> .material-symbols-outlined:only-child) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--sl-collection-disclosure-size-small);
+  block-size: var(--sl-collection-disclosure-size-small);
+  margin-inline-end: var(--sl-space-1);
+  vertical-align: middle;
+}
+
+.DataTable[data-disclosure='small'] .CollectionGroupButton > .material-symbols-outlined {
+  font-size: var(--sl-collection-disclosure-size-small);
+}
+
+/* A row that opens more rows or a page: its name reads as a link. */
+.DataTable tbody tr[data-kind='link'] :is(a, .CollectionRowButton) {
+  color: var(--sl-content-link-color);
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* DataList
  *
  * The same rows as the table, in one container with the table's borders, hover, selected
@@ -14513,7 +14563,7 @@ textarea.FieldControl {
   transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Pagination
  *
  * Not tied to a collection. Anything with a page, a page count and a total can use it.
@@ -14538,7 +14588,7 @@ textarea.FieldControl {
   margin: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* EditableList
  *
  * One table at every width, so a field is not submitted twice. Under the stack width each
@@ -14637,7 +14687,7 @@ textarea.FieldControl {
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* Sheet
  *
  * A working-paper surface: the raised surface with a heavier rule across its top
@@ -14728,7 +14778,7 @@ textarea.FieldControl {
   border-top: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* StatFigure
  *
  * One large figure with a caps label above and a caption under it. The label is
@@ -14789,7 +14839,7 @@ textarea.FieldControl {
   color: var(--sl-stat-figure-caption-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* DescriptionList
  *
  * Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
@@ -14865,7 +14915,7 @@ textarea.FieldControl {
   text-align: end;
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* AppBar
  *
  * The bar across the top of an app window, one row on a line in the rule color. The line is
@@ -14899,7 +14949,7 @@ textarea.FieldControl {
   background: var(--sl-app-bar-divider-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* PickerButton
  *
  * A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
@@ -14985,13 +15035,13 @@ textarea.FieldControl {
   transform: rotate(180deg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
 /* SideNav
  *
  * The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
  * current row (aria-current="page") sits on the raised surface with a rule under it in the
  * working-paper ink; counts are figures; group headings are caps labels. SideNavToggle is a
- * small round button on the column's edge, whose chevron turns with the state. The parent
+ * small tab-shaped handle on the column's edge, whose chevron turns with the state. The parent
  * sets the width and must not clip the toggle (overflow: visible), since it hangs over the edge.
  * Tokens: side-nav.* (tokens/component/side-nav.json).
  */
@@ -15115,24 +15165,25 @@ textarea.FieldControl {
   position: absolute;
   z-index: 1;
   top: var(--sl-side-nav-toggle-offset);
-  inset-inline-end: calc(-0.5 * var(--sl-side-nav-toggle-size));
+  inset-inline-end: calc(-0.5 * var(--sl-side-nav-toggle-width));
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--sl-side-nav-toggle-size);
-  height: var(--sl-side-nav-toggle-size);
-  border-radius: var(--sl-radius-pill);
+  width: var(--sl-side-nav-toggle-width);
+  height: var(--sl-side-nav-toggle-height);
+  border-radius: var(--sl-side-nav-toggle-radius);
   background: var(--sl-side-nav-toggle-background);
   border: var(--sl-stroke-default) solid var(--sl-side-nav-toggle-border-color);
-  color: var(--sl-text-secondary);
+  color: var(--sl-side-nav-toggle-border-color);
   cursor: pointer;
   transition: color var(--sl-duration-fast) var(--sl-easing-default),
+    background var(--sl-duration-fast) var(--sl-easing-default),
     border-color var(--sl-duration-fast) var(--sl-easing-default);
 }
 
 .SideNavToggle:hover {
-  color: var(--sl-text-primary);
-  border-color: var(--sl-text-primary);
+  color: var(--sl-side-nav-toggle-background);
+  background: var(--sl-side-nav-toggle-border-color);
 }
 
 .SideNavToggle:focus-visible {