@scattered-light/loomiere-mojave 0.6.0 → 0.7.1

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

@@ -742,6 +742,7 @@
     --sl-a11y-focus-outline-width: 2px; /** Focus ring thickness. 2px is the WCAG 2.2 minimum that stays visible on every surface. */
     --sl-a11y-link-focus-outline-offset: 0.25em; /** Links sit inside text, so the offset scales with the font (em) instead of a fixed px. */
     --sl-a11y-link-focus-ring-radius: 0.125em; /** A slight em-based rounding so inline focus rings hug the text. */
+    --sl-a11y-min-target: 24px; /** Smallest target for a fine pointer (WCAG 2.5.8). A mouse can hit 24px; a finger still needs min-touch-target. The splitter handle uses this so the grab area does not cover the scrollbar beside it. */
     --sl-a11y-min-touch-target: 44px; /** Smallest tap area for any control (WCAG 2.5.5 and Apple HIG both use 44px). */
     --sl-check-dot-scale: 0.4; /** A radio's dot as a share of the circle, so it scales with the size. */
     --sl-check-opacity-disabled: 0.5; /** A disabled box fades as a whole; its label turns to disabled text. */
@@ -781,11 +782,17 @@
     --sl-button-opacity-disabled: 0.5; /** A disabled button fades as a whole, keeping its shape so the layout doesn't jump. */
     --sl-drawer-popup-size: min(420px, 90vw); /** Width of a side drawer. A bottom or top drawer sizes to its content up to max-size. */
     --sl-drawer-popup-max-size: 85vh; /** Tallest a bottom or top drawer gets, leaving the page visible above it. */
+    --sl-list-detail-split-min-width: 720px; /** Side by side once this element, not the window, is this wide. Dryden used 1100px of the window. A container needs less: a list around 320px and a form around 400px still read at 720px. Narrower, the detail becomes a drawer or a page. */
+    --sl-list-detail-detail-default-size: 45%; /** The detail's share when it opens. The list fills the rest, about 55%, which is the split Dryden started from. */
+    --sl-list-detail-detail-min-size: 35%; /** The detail cannot be dragged narrower than this, so the form stays readable. */
+    --sl-list-detail-detail-max-size: 65%; /** The detail cannot cover more than this, so the list stays usable. Dryden kept the detail between 35% and 65%. */
     --sl-navigation-menu-popup-min-width: 400px; /** Narrowest a navigation panel gets on wider screens, and the widest a single column of links grows. */
     --sl-navigation-menu-column-width: 12rem; /** Width of each column in a two-column link list. */
     --sl-preview-card-popup-min-width: 300px; /** Narrowest a preview card gets, so a short title still has room for its image. */
     --sl-preview-card-popup-max-width: 450px; /** Widest a preview card gets, so its description keeps a comfortable line length. */
     --sl-slider-vertical-height: 200px; /** Default length of a vertical slider. */
+    --sl-splitter-key-step: 5%; /** One arrow press moves the handle by 5% of the splitter. Dryden used 5%: a nudge you can see, not a jump. */
+    --sl-splitter-key-step-large: 10%; /** The Shift step. Twice the arrow step, so a few presses cross the panel without holding the key. */
     --sl-switch-track-width: 48px; /** Wide enough for the thumb plus the ON/OFF text. */
     --sl-switch-track-width-sm: 44px;
     --sl-switch-track-width-lg: 68px;
@@ -1446,6 +1453,11 @@
     --sl-bar-group-gap: var(--sl-space-2); /** Space between groups in a toolbar, wider than inside a group. */
     --sl-bar-separator-length: var(--sl-space-6); /** Divider height, shorter than the controls so the groups still read as one strip. */
     --sl-bar-separator-spacing: var(--sl-space-1); /** Extra space either side of a divider. */
+    --sl-calendar-day-size: var(--sl-space-10); /** A day cell on a pointer. space.10 keeps seven columns inside a phone; touch layouts raise the cell to the minimum touch target in CSS. */
+    --sl-calendar-grid-gap: var(--sl-space-0-5); /** Space between week rows. Days in a week share an edge, so the range band reads as one shape. */
+    --sl-calendar-month-gap: var(--sl-space-4); /** Space between months shown side by side, the same step as panel padding so the two columns line up. */
+    --sl-calendar-header-gap: var(--sl-space-2); /** Space between the month title and the weekday row. */
+    --sl-calendar-panel-padding: var(--sl-space-4); /** Padding inside the popup. The shared popup padding is one step and is too tight for a calendar. */
     --sl-overlay-base: var(--sl-color-black); /** Base color for scrims behind modals. Components apply their own opacity. */
     --sl-disclosure-animation-duration: var(--sl-duration-normal); /** How long a panel takes to open or close, and the chevron to turn. */
     --sl-disclosure-animation-easing: var(--sl-easing-in-out); /** Panels grow and shrink in place, so they ease both ways. */
@@ -1456,6 +1468,22 @@
     --sl-elevation-sm: var(--sl-shadow-sm);
     --sl-elevation-xl: var(--sl-shadow-xl);
     --sl-elevation-xs: var(--sl-shadow-xs);
+    --sl-empty-padding-block-compact: var(--sl-space-6); /** 24px above and below a compact empty state. The same room a popup already gives a plain 'No results' line, so the two stay one height. */
+    --sl-empty-padding-block-standard: var(--sl-space-10); /** 40px. A pane or a section needs more air than a table row, or the block looks stuck to the content around it. */
+    --sl-empty-padding-block-spacious: var(--sl-space-16); /** 64px. A page with nothing else on it. The extra space above keeps the block off the top of the viewport. */
+    --sl-empty-padding-inline-compact: var(--sl-space-4); /** 16px. Enough that a compact row doesn't touch the cell or popup edge. */
+    --sl-empty-padding-inline-standard: var(--sl-space-6); /** 24px. A pane can be wide; the inline padding keeps the block off the sides before the description's own cap does. */
+    --sl-empty-padding-inline-spacious: var(--sl-space-8); /** 32px. A full page, a step wider than a pane. */
+    --sl-empty-gap-compact: var(--sl-space-3); /** 12px between the icon, the text and the actions in a table row or a popup. Tight, because the row is short. */
+    --sl-empty-gap-standard: var(--sl-space-4); /** 16px. The stack in a pane: media, then words, then actions. */
+    --sl-empty-gap-spacious: var(--sl-space-6); /** 24px. A page-sized stack needs the steps to separate, or the circle sits on the title. */
+    --sl-empty-text-gap-compact: var(--sl-space-1); /** 4px between the title and the description in a compact row. They read as one message. */
+    --sl-empty-text-gap-standard: var(--sl-space-1); /** 4px. Same as compact: the description belongs to the title, so it stays close. */
+    --sl-empty-text-gap-spacious: var(--sl-space-2); /** 8px. The page title is larger, so the description steps down a little further. */
+    --sl-empty-media-size-standard: var(--sl-space-12); /** 48px circle around a magnify icon (20px). The icon needs a field, or it reads as a bullet. */
+    --sl-empty-media-size-spacious: var(--sl-space-16); /** 64px circle around a maximize icon (24px). A page can carry a larger mark. Compact has no circle: the icon is icon-size.condense on its own. */
+    --sl-empty-description-max-width: var(--sl-measure-narrow); /** 45ch. A description is one sentence. Past a caption's measure it stretches across a wide pane and stops being a sentence. */
+    --sl-empty-actions-gap: var(--sl-space-2); /** 8px between actions, the same gap a control uses between its icon and its label. The first action is the main one; the rest sit beside it. */
     --sl-field-gap: var(--sl-space-1-5); /** Between a field's label, control and messages. */
     --sl-field-label-spacing: var(--sl-space-1); /** Extra room under the label, so it reads as belonging to the control below it. */
     --sl-field-message-spacing: var(--sl-space-1); /** Extra room above a description or error, so it reads as a note on the control. */
@@ -1498,7 +1526,6 @@
     --sl-popup-separator-spacing: var(--sl-space-1); /** Space above and below a separator. */
     --sl-popup-group-label-padding-top: var(--sl-space-2); /** Space above a group label, so it sits closer to its own rows than to the group before. */
     --sl-popup-group-label-padding-bottom: var(--sl-space-1); /** Space between a group label and its first row. */
-    --sl-popup-empty-padding-block: var(--sl-space-6); /** Room around a 'No results' message, so an empty list doesn't collapse to a sliver. */
     --sl-control-height-lg: var(--sl-space-13);
     --sl-control-height-md: var(--sl-space-11);
     --sl-control-height-sm: var(--sl-space-9);
@@ -1809,11 +1836,36 @@
     --sl-avatar-initials-font-size-md: var(--sl-font-size-md); /** Sized to the avatar, not a text style: initials have to fit inside the circle at each size. The rest of the type is title-base. */
     --sl-avatar-initials-font-size-lg: var(--sl-font-size-lg); /** Sized to the avatar, not a text style: initials have to fit inside the circle at each size. The rest of the type is title-base. */
     --sl-avatar-initials-font-size-xl: var(--sl-font-size-2xl); /** Sized to the avatar, not a text style: initials have to fit inside the circle at each size. The rest of the type is title-base. */
+    --sl-badge-height-minimize: var(--sl-space-5); /** 20px. The smallest pill that still holds trigger-minimize. */
+    --sl-badge-height-condense: var(--sl-space-6); /** 24px, the default. Sits in a line of text and in dense rows. */
+    --sl-badge-height-base: var(--sl-space-7); /** 28px, the small control height, for a badge beside base text. */
+    --sl-badge-padding-inline-minimize: var(--sl-space-1); /** 4px. Tighter than a control so a short label stays a pill, not a button. */
+    --sl-badge-padding-inline-condense: var(--sl-space-1-5); /** 6px, the default. */
+    --sl-badge-padding-inline-base: var(--sl-space-2); /** 8px, still inside the small control's inline padding. */
+    --sl-badge-gap-minimize: var(--sl-space-1); /** 4px between a dot or icon and the label at the smallest size. */
+    --sl-badge-gap-condense: var(--sl-space-1); /** 4px, the default. The same gap as the smallest control. */
+    --sl-badge-gap-base: var(--sl-space-1-5); /** 6px, a step wider once the label is base-sized. */
+    --sl-badge-dot-minimize: var(--sl-space-1-5); /** 6px status dot. Smaller than icon-size-minimize so it reads as a mark, not an icon. */
+    --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-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. */
+    --sl-collection-search-min-width: var(--sl-space-60); /** The narrowest the toolbar search gets beside the filters and actions. Under it, the search wraps to its own line, so a few words of a query still show. */
+    --sl-collection-narrow-width: var(--sl-space-96); /** Below this, a table with narrow="list" becomes a list, and the toolbar's search takes the full width. A 360px pane is under it. */
+    --sl-collection-editable-list-stack-width: var(--sl-space-80); /** Below this, editable rows stack and show their own labels. 320px matches. */
+    --sl-collection-selection-column-width: var(--sl-space-10); /** The checkbox column. Wide enough for the control, no wider, so the data keeps the room. */
     --sl-drawer-handle-width: var(--sl-space-10); /** Grab bar length. */
     --sl-drawer-handle-height: var(--sl-space-1); /** Grab bar thickness. */
+    --sl-list-detail-header-gap: var(--sl-space-3); /** Space between the title, the actions and Close. */
+    --sl-list-detail-header-padding: var(--sl-space-4); /** Padding inside the detail header. One step under a dialog, because this is a pane, not a modal. */
+    --sl-money-field-picker-min-inline-size: var(--sl-space-56); /** The currency list shows a code, a name and a symbol, so the popup is wider than the code trigger inside the field. */
     --sl-popover-text-max-width: var(--sl-measure-narrow); /** Keeps the title and description to a readable line length. The popup itself has no fixed cap, so wider content such as a calendar or a form fits; it stops at the space Base UI reports beside the trigger. */
     --sl-popover-popup-min-width: var(--sl-popup-min-width); /** Narrow enough for a short note, wide enough that a title doesn't wrap word by word. */
     --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. */
     --sl-switch-track-text-font-size: var(--sl-font-size-xs); /** Sized to the track, not a text style: the ON/OFF label has to fit inside the switch at each size. The rest of the label uses condense-subtitle-label. */
     --sl-switch-track-text-font-size-sm: var(--sl-font-size-xxs); /** Sized to the track, not a text style: the ON/OFF label has to fit inside the switch at each size. The rest of the label uses condense-subtitle-label. */
     --sl-switch-track-text-font-size-lg: var(--sl-font-size-sm); /** Sized to the track, not a text style: the ON/OFF label has to fit inside the switch at each size. The rest of the label uses condense-subtitle-label. */
@@ -1847,6 +1899,7 @@
     --sl-a11y-focus-ring-radius: var(--sl-radius-focus); /** Rounds the focus ring to match the small control radius. */
     --sl-bar-border-width: var(--sl-stroke-default); /** Strip edge thickness. */
     --sl-bar-radius: var(--sl-radius-surface); /** Strip corners. Controls inside a toggle group take radius.item, so the inner corners follow the outer ones. */
+    --sl-calendar-day-radius: var(--sl-radius-pill); /** Selected days are circles. The pill radius is the same full radius badges and switches use. */
     --sl-check-border-width: var(--sl-stroke-default); /** Edge thickness. */
     --sl-check-radius: var(--sl-radius-box); /** Checkbox corners. Radios are always round. */
     --sl-check-transition: var(--sl-transition-input); /** Changes at the same speed as a field. */
@@ -1879,6 +1932,7 @@
     --sl-popup-radius: var(--sl-radius-surface); /** Corners of a free-floating popup. */
     --sl-popup-radius-field: var(--sl-radius-control); /** Corners of a list that drops from a field, matching the field so the two read as one control. */
     --sl-popup-shadow: var(--sl-elevation-lg); /** Lifts the popup above the page. */
+    --sl-popup-empty-padding-block: var(--sl-empty-padding-block-compact); /** Room around a plain 'No results' line. The same padding as a compact empty state, so a sentence and an EmptyState in that slot take the same space. An EmptyState drops this padding and uses its own. */
     --sl-table-row-height: var(--sl-control-height-sm); /** Row height: the small control height, so a checkbox, input or button in a cell fits without growing the row. */
     --sl-table-header-height: var(--sl-control-height-md); /** Header row height: the regular control height, a little taller than rows so the header reads as its own band. */
     --sl-table-cell-padding-inline: var(--sl-control-padding-inline-sm); /** Space either side of cell text, matching small controls. */
@@ -2062,7 +2116,13 @@
     --sl-status-level-error-quiet-border: var(--sl-scope-error-border); /** quiet in error: outline in error */
     --sl-status-level-error-quiet-border-hover: var(--sl-scope-error-solid-hover); /** quiet in error: outline in error */
     --sl-button-radius: var(--sl-radius-pill); /** Buttons are pills, so they read as actions and never as fields or cards. */
+    --sl-collection-row-height-sm: var(--sl-control-height-sm); /** The dense row, the same height the plain table already uses, so a checkbox fits. */
+    --sl-collection-row-height-md: var(--sl-control-height-md); /** A roomier row when the collection is the page rather than a dense register. */
+    --sl-collection-header-height-sm: var(--sl-control-height-md); /** The dense header, a step above the dense row, matching today's table header. */
+    --sl-collection-header-height-md: var(--sl-control-height-lg); /** The header for the roomier row. */
+    --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. */
     --sl-border-accent: var(--sl-scope-accent-border); /** Borders that signal selection or the active item. */
     --sl-border-default: var(--sl-scope-chrome-divider); /** Everyday dividers and control outlines. Darkens under prefers-contrast: more. */
     --sl-border-strong: var(--sl-scope-chrome-border-strong); /** Borders that identify a control, such as inputs and unchecked checkboxes. 3:1 against the canvas, as WCAG asks for control boundaries. */
@@ -2162,6 +2222,12 @@
     --sl-bar-background: var(--sl-surface-tray); /** Strip fill. */
     --sl-bar-border-color: var(--sl-border-default); /** Strip edge. */
     --sl-bar-separator-color: var(--sl-border-default); /** Divider between groups. */
+    --sl-calendar-day-color-outside: var(--sl-text-tertiary); /** A day from the previous or next month, still selectable, drawn back so it does not compete with this month. */
+    --sl-calendar-day-color-disabled: var(--sl-text-disabled); /** A day outside the allowed period, or one a length rule rejects. It stays in the tab order so the reason can be read. */
+    --sl-calendar-range-background: var(--sl-interactive-tint-active); /** The band between the start and end of a period. Same tint as a selected list item, quieter than the start and end circles. */
+    --sl-calendar-range-color: var(--sl-text-on-tint-strong); /** Day numbers that sit on the range band. The on-tint text color is the one that stays readable on interactive.tint-active. */
+    --sl-calendar-today-ring: var(--sl-border-accent); /** An inset ring on today, including when today is also selected, so today is never only a color of the number. */
+    --sl-calendar-weekday-color: var(--sl-text-tertiary); /** Weekday initials and week numbers are labels, not choices. */
     --sl-check-border-color: var(--sl-border-control); /** Empty box edge. Passes 3:1 so the box can be found before it's ticked. */
     --sl-check-border-color-hover: var(--sl-border-control-hover); /** Edge under the pointer. */
     --sl-check-background-checked: var(--sl-interactive-default); /** Ticked box fill, the brand's interactive color. */
@@ -2204,6 +2270,7 @@
     --sl-field-color-disabled: var(--sl-text-disabled); /** The value in a disabled field. */
     --sl-field-placeholder-color: var(--sl-text-tertiary); /** Hint text before anything is typed. */
     --sl-field-shadow-focus-error: var(--sl-focus-shadow-3px-error); /** Halo while typing in an invalid field. */
+    --sl-field-affix-color: var(--sl-text-secondary); /** A prefix or suffix drawn inside the field (a currency symbol, a unit). Muted so it reads as part of the control, not as the value. */
     --sl-gauge-track-color: var(--sl-fill-track); /** The empty part of the bar. Every palette's fill reads 3:1 on it, so the amount is clear in both themes. */
     --sl-gauge-value-color: var(--sl-text-secondary); /** The number, quieter than its label. */
     --sl-icon-button-color: var(--sl-text-tertiary); /** Quiet at rest so it doesn't compete with the content. */
@@ -2226,12 +2293,15 @@
     --sl-table-header-background-hover: var(--sl-fill-subtle); /** A header cell under the pointer, showing it can be clicked to sort. */
     --sl-table-border-color: var(--sl-border-default); /** The grid's outer edge and the line under the header. */
     --sl-table-row-border-color: var(--sl-border-subtle); /** Hairlines between rows, quiet so the data leads. */
+    --sl-table-row-current: var(--sl-surface-tray); /** The open row beside a detail pane. The tray, a step off the page, so secondary text on it still passes AA in dark. A selected row keeps its own tint, so a checked row and the row you are reading can both show. */
+    --sl-table-group-header-background: var(--sl-surface-tray); /** A group header. The tray, like the column header, so a group reads as chrome rather than another data row. */
     --sl-table-column-hover: var(--sl-fill-subtle); /** Column under the pointer, when column hover is on. Neutral so it never reads as a selection. */
     --sl-table-range-background: var(--sl-interactive-tint); /** Cells inside a dragged range selection. */
     --sl-emphasis-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
     --sl-status-level-default-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
     --sl-drawer-handle-color: var(--sl-border-strong); /** The grab bar on bottom drawers. Strong border so it reads as something to drag. */
     --sl-shadow-outline: 0 0 0 3px color-mix(in oklab, var(--sl-focus-ring) 60%, transparent); /** Focus halo for controls that use box-shadow instead of outline: the focus ring color at 60% opacity, so it follows the accent and the theme. Becomes currentColor under prefers-contrast: more. */
+    --sl-calendar-day-background-hover: var(--sl-item-background-hover); /** The same hover tint as a list item, so a day feels like a choice in a list. */
     --sl-check-mark-color: var(--sl-text-on-primary); /** Check mark, dash or dot on a ticked fill. */
     --sl-text-on-accent: var(--sl-text-on-primary); /** Alias for text placed on any accent fill. */
     --sl-content-kbd-text: var(--sl-text-on-inverse); /** Text on keycaps. */
@@ -5478,7 +5548,8 @@
   [data-emphasis='bold'],
   .Button[data-variant='solid']:not([data-emphasis]),
   .Button:not([data-variant]):not([data-emphasis]),
-  .AvatarRoot:not([data-emphasis]) {
+  .AvatarRoot:not([data-emphasis]),
+  .CalendarDay[data-selected]:not([data-emphasis]) {
     --sl-e-bg: var(--sl-scope-solid);
     --sl-e-bg-hover: var(--sl-scope-solid-hover);
     --sl-e-bg-active: var(--sl-scope-solid-active);
@@ -5498,7 +5569,9 @@
     --sl-e-border-hover: var(--sl-scope-solid-hover);
   }
 
-  [data-emphasis='subtle'] {
+  [data-emphasis='subtle'],
+  .Badge:not([data-emphasis]),
+  .EmptyStateMedia:not([data-emphasis]) {
     --sl-e-bg: var(--sl-scope-soft);
     --sl-e-bg-hover: var(--sl-scope-soft-hover);
     --sl-e-bg-active: var(--sl-scope-soft-active);
@@ -5507,7 +5580,9 @@
     --sl-e-border-hover: var(--sl-scope-soft-hover);
   }
 
-  [data-emphasis='subtle']:not([data-color], [data-status], [data-status] *, .Toast[data-type], .Toast[data-type] *) {
+  [data-emphasis='subtle']:not([data-color], [data-status], [data-status] *, .Toast[data-type], .Toast[data-type] *),
+  .Badge:not([data-emphasis]):not([data-color], [data-status], [data-status] *, .Toast[data-type], .Toast[data-type] *),
+  .EmptyStateMedia:not([data-emphasis]):not([data-color], [data-color] *, [data-status], [data-status] *, .Toast[data-type], .Toast[data-type] *) {
     --sl-scope-solid: var(--sl-scope-chrome-solid);
     --sl-scope-solid-hover: var(--sl-scope-chrome-solid-hover);
     --sl-scope-solid-active: var(--sl-scope-chrome-solid-active);
@@ -5646,6 +5721,13 @@
     --sl-bar-background: var(--sl-surface-tray);
     --sl-bar-border-color: var(--sl-border-default);
     --sl-bar-separator-color: var(--sl-border-default);
+    --sl-calendar-day-color: var(--sl-text-primary);
+    --sl-calendar-day-color-outside: var(--sl-text-tertiary);
+    --sl-calendar-day-color-disabled: var(--sl-text-disabled);
+    --sl-calendar-range-background: var(--sl-interactive-tint-active);
+    --sl-calendar-range-color: var(--sl-text-on-tint-strong);
+    --sl-calendar-today-ring: var(--sl-border-accent);
+    --sl-calendar-weekday-color: var(--sl-text-tertiary);
     --sl-check-border-color: var(--sl-border-control);
     --sl-check-border-color-hover: var(--sl-border-control-hover);
     --sl-check-background-checked: var(--sl-interactive-default);
@@ -5674,6 +5756,7 @@
     --sl-field-color-disabled: var(--sl-text-disabled);
     --sl-field-placeholder-color: var(--sl-text-tertiary);
     --sl-field-shadow-focus: var(--sl-focus-shadow-3px-primary);
+    --sl-field-affix-color: var(--sl-text-secondary);
     --sl-gauge-track-color: var(--sl-fill-track);
     --sl-gauge-label-color: var(--sl-text-primary);
     --sl-gauge-value-color: var(--sl-text-secondary);
@@ -5707,10 +5790,13 @@
     --sl-table-row-border-color: var(--sl-border-subtle);
     --sl-table-row-hover: var(--sl-item-background-hover);
     --sl-table-row-selected: var(--sl-item-background-selected);
+    --sl-table-row-current: var(--sl-surface-tray);
+    --sl-table-group-header-background: var(--sl-surface-tray);
     --sl-table-column-hover: var(--sl-fill-subtle);
     --sl-table-range-background: var(--sl-interactive-tint);
     --sl-table-range-border: var(--sl-focus-ring);
     --sl-drawer-handle-color: var(--sl-border-strong);
+    --sl-calendar-day-background-hover: var(--sl-item-background-hover);
     --sl-check-background: var(--sl-field-background);
   }
 
@@ -5781,6 +5867,13 @@
     --sl-bar-background: var(--sl-surface-tray);
     --sl-bar-border-color: var(--sl-border-default);
     --sl-bar-separator-color: var(--sl-border-default);
+    --sl-calendar-day-color: var(--sl-text-primary);
+    --sl-calendar-day-color-outside: var(--sl-text-tertiary);
+    --sl-calendar-day-color-disabled: var(--sl-text-disabled);
+    --sl-calendar-range-background: var(--sl-interactive-tint-active);
+    --sl-calendar-range-color: var(--sl-text-on-tint-strong);
+    --sl-calendar-today-ring: var(--sl-border-accent);
+    --sl-calendar-weekday-color: var(--sl-text-tertiary);
     --sl-check-border-color: var(--sl-border-control);
     --sl-check-border-color-hover: var(--sl-border-control-hover);
     --sl-check-background-checked: var(--sl-interactive-default);
@@ -5809,6 +5902,7 @@
     --sl-field-color-disabled: var(--sl-text-disabled);
     --sl-field-placeholder-color: var(--sl-text-tertiary);
     --sl-field-shadow-focus: var(--sl-focus-shadow-3px-primary);
+    --sl-field-affix-color: var(--sl-text-secondary);
     --sl-gauge-track-color: var(--sl-fill-track);
     --sl-gauge-label-color: var(--sl-text-primary);
     --sl-gauge-value-color: var(--sl-text-secondary);
@@ -5842,10 +5936,13 @@
     --sl-table-row-border-color: var(--sl-border-subtle);
     --sl-table-row-hover: var(--sl-item-background-hover);
     --sl-table-row-selected: var(--sl-item-background-selected);
+    --sl-table-row-current: var(--sl-surface-tray);
+    --sl-table-group-header-background: var(--sl-surface-tray);
     --sl-table-column-hover: var(--sl-fill-subtle);
     --sl-table-range-background: var(--sl-interactive-tint);
     --sl-table-range-border: var(--sl-focus-ring);
     --sl-drawer-handle-color: var(--sl-border-strong);
+    --sl-calendar-day-background-hover: var(--sl-item-background-hover);
     --sl-check-background: var(--sl-field-background);
   }
 
@@ -5916,6 +6013,13 @@
     --sl-bar-background: var(--sl-surface-tray);
     --sl-bar-border-color: var(--sl-border-default);
     --sl-bar-separator-color: var(--sl-border-default);
+    --sl-calendar-day-color: var(--sl-text-primary);
+    --sl-calendar-day-color-outside: var(--sl-text-tertiary);
+    --sl-calendar-day-color-disabled: var(--sl-text-disabled);
+    --sl-calendar-range-background: var(--sl-interactive-tint-active);
+    --sl-calendar-range-color: var(--sl-text-on-tint-strong);
+    --sl-calendar-today-ring: var(--sl-border-accent);
+    --sl-calendar-weekday-color: var(--sl-text-tertiary);
     --sl-check-border-color: var(--sl-border-control);
     --sl-check-border-color-hover: var(--sl-border-control-hover);
     --sl-check-background-checked: var(--sl-interactive-default);
@@ -5944,6 +6048,7 @@
     --sl-field-color-disabled: var(--sl-text-disabled);
     --sl-field-placeholder-color: var(--sl-text-tertiary);
     --sl-field-shadow-focus: var(--sl-focus-shadow-3px-primary);
+    --sl-field-affix-color: var(--sl-text-secondary);
     --sl-gauge-track-color: var(--sl-fill-track);
     --sl-gauge-label-color: var(--sl-text-primary);
     --sl-gauge-value-color: var(--sl-text-secondary);
@@ -5977,10 +6082,13 @@
     --sl-table-row-border-color: var(--sl-border-subtle);
     --sl-table-row-hover: var(--sl-item-background-hover);
     --sl-table-row-selected: var(--sl-item-background-selected);
+    --sl-table-row-current: var(--sl-surface-tray);
+    --sl-table-group-header-background: var(--sl-surface-tray);
     --sl-table-column-hover: var(--sl-fill-subtle);
     --sl-table-range-background: var(--sl-interactive-tint);
     --sl-table-range-border: var(--sl-focus-ring);
     --sl-drawer-handle-color: var(--sl-border-strong);
+    --sl-calendar-day-background-hover: var(--sl-item-background-hover);
     --sl-check-background: var(--sl-field-background);
   }
 }
@@ -6306,7 +6414,7 @@
 }
 
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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';
@@ -6316,7 +6424,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.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -6760,7 +6868,7 @@ hr {
 }
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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 */
@@ -6873,7 +6981,7 @@ main:focus {
 
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {
@@ -6941,7 +7049,7 @@ button,
 
 }
 /* Component styles */
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -7062,7 +7170,7 @@ button,
   overflow: hidden;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -7071,7 +7179,7 @@ button,
  * cancel quiet, and a destructive one bold with data-color="error".
  */
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -7273,7 +7381,7 @@ button,
    (reset-accessibility.css).
    ============================================ */
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -7381,7 +7489,7 @@ button,
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -7531,7 +7639,7 @@ button,
   font-size: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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.
@@ -7688,7 +7796,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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. */
@@ -7704,7 +7812,7 @@ button,
   pointer-events: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -7820,7 +7928,7 @@ button,
   background: var(--sl-surface-raised);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -8305,7 +8413,7 @@ button,
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -8474,7 +8582,7 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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):
@@ -8620,7 +8728,7 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -8747,7 +8855,7 @@ button,
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -8808,7 +8916,7 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -8850,7 +8958,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* Form - Mojave Theme
  *
  * No component tokens: fields stack with the large block space, and the action
@@ -8870,7 +8978,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* Input - Mojave Theme
  *
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -9007,7 +9115,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -9156,7 +9264,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -9349,7 +9457,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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:
@@ -9412,7 +9520,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -9832,7 +9940,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -9923,7 +10031,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -9986,7 +10094,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -10151,7 +10259,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -10268,7 +10376,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -10345,7 +10453,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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).
@@ -10497,7 +10605,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -10579,7 +10687,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -10864,7 +10972,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -10892,7 +11000,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -11058,7 +11166,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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,
@@ -11224,152 +11332,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.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
- * table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small
- * hand-built table and a full grid look alike. Rows answer to aria-selected="true" (or
- * data-selected) for selection; cells take data-align="end" for numbers.
- */
-
-.Table {
-  font-family: var(--sl-font-body-condense-font-family);
-  font-size: var(--sl-font-body-condense-font-size);
-  font-weight: var(--sl-font-body-condense-font-weight);
-  line-height: var(--sl-font-body-condense-line-height);
-  letter-spacing: var(--sl-font-body-condense-letter-spacing);
-  box-sizing: border-box;
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  background: var(--sl-table-background);
-  color: var(--sl-table-color);
-  border: var(--sl-stroke-default) solid var(--sl-table-border-color);
-  border-radius: var(--sl-table-radius);
-  overflow: hidden;
-  font-variant-numeric: tabular-nums;
-}
-
-.Table caption {
-  font-family: var(--sl-font-body-condense-font-family);
-  font-size: var(--sl-font-body-condense-font-size);
-  font-weight: var(--sl-font-body-condense-font-weight);
-  line-height: var(--sl-font-body-condense-line-height);
-  letter-spacing: var(--sl-font-body-condense-letter-spacing);
-  caption-side: bottom;
-  padding-block: var(--sl-space-2);
-  color: var(--sl-table-subtle-color);
-  text-align: start;
-}
-
-/* Header: the tray band, a little taller than the rows */
-.Table th {
-  font-family: var(--sl-font-subtitle-condense-font-family);
-  font-size: var(--sl-font-subtitle-condense-font-size);
-  font-weight: var(--sl-font-subtitle-condense-font-weight);
-  line-height: var(--sl-font-subtitle-condense-line-height);
-  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
-  height: var(--sl-table-header-height);
-  padding-block: 0;
-  padding-inline: var(--sl-table-cell-padding-inline);
-  background: var(--sl-table-header-background);
-  color: var(--sl-table-header-color);
-  text-align: start;
-  vertical-align: middle;
-  border-bottom: var(--sl-stroke-default) solid var(--sl-table-border-color);
-}
-
-/* A header that sorts: aria-sort on the th */
-.Table th[aria-sort] {
-  cursor: pointer;
-  transition: background-color var(--sl-duration-fast) var(--sl-easing-default);
-}
-
-.Table th[aria-sort]:hover {
-  background: var(--sl-table-header-background-hover);
-}
-
-/* Body cells */
-.Table td {
-  height: var(--sl-table-row-height);
-  padding-block: 0;
-  padding-inline: var(--sl-table-cell-padding-inline);
-  vertical-align: middle;
-  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
-}
-
-.Table tbody tr:last-child td,
-.Table tbody:last-child tr:last-child td {
-  border-bottom: none;
-}
-
-/* A row header (th in tbody) reads like a cell, in the header's weight */
-.Table tbody th {
-  background: transparent;
-  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
-}
-
-/* Numbers and amounts: right-aligned so digits line up */
-.Table [data-align='end'] {
-  text-align: end;
-}
-
-.Table [data-align='center'] {
-  text-align: center;
-}
-
-/* Secondary text in a cell */
-.Table [data-subtle] {
-  color: var(--sl-table-subtle-color);
-}
-
-/* Hover and selection: the same tints as list items */
-@media (hover: hover) {
-  .Table tbody tr:hover > * {
-    background: var(--sl-table-row-hover);
-    color: var(--sl-item-color-hover);
-  }
-}
-
-.Table tbody tr:is([aria-selected='true'], [data-selected]) > * {
-  background: var(--sl-table-row-selected);
-  color: var(--sl-item-color-selected);
-}
-
-/* Footer: totals on the tray band */
-.Table tfoot td {
-  font-family: var(--sl-font-subtitle-condense-font-family);
-  font-size: var(--sl-font-subtitle-condense-font-size);
-  font-weight: var(--sl-font-subtitle-condense-font-weight);
-  line-height: var(--sl-font-subtitle-condense-line-height);
-  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
-  background: var(--sl-table-header-background);
-  border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
-  border-bottom: none;
-}
-
-/* A header that stays put while the body scrolls (the table's wrapper scrolls) */
-.Table[data-sticky-header] thead th {
-  position: sticky;
-  top: 0;
-  z-index: var(--sl-z-index-docked);
-}
-
-/* Empty state: one cell spanning the columns */
-.Table td[data-empty] {
-  height: auto;
-  padding-block: var(--sl-space-10);
-  color: var(--sl-text-tertiary);
-  text-align: center;
-}
-
-.Table tbody tr:has(> td[data-empty]):hover > * {
-  background: transparent;
-  color: var(--sl-text-tertiary);
-}
-
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -11505,7 +11468,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -11741,7 +11704,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -11853,7 +11816,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -11874,7 +11837,7 @@ textarea.FieldControl {
   border-radius: var(--sl-radius-item);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -11936,7 +11899,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
@@ -11995,3 +11958,2311 @@ textarea.FieldControl {
     transform: none;
   }
 }
+
+/* Custom components: not Base UI parts. Built from existing concepts and tokens. */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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.
+ * Colors are the emphasis levels (--sl-e-bg, --sl-e-fg, --sl-e-border), so data-emphasis,
+ * data-status and data-color all recolor it. The default level is subtle, from
+ * DEFAULT_LEVELS. The shape is radius.pill. Sizes are badge.* (tokens/component/badge.json).
+ *
+ * Text is the trigger style of the same tier (trigger-minimize, trigger-condense,
+ * trigger-base): medium weight, and those three tiers already exist. subtitle is bold,
+ * which would shout, and label only exists at base. Icons use icon-size of that same
+ * tier (a badge icon is a mark beside the label, not a control that fills the line the
+ * way a Button icon does).
+ *
+ * Min width equals the height on every badge, so a single digit is a circle and a
+ * wider label is unchanged. Padding stays, so "12" does not touch the pill edges.
+ */
+
+.Badge {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sl-badge-gap-condense);
+  height: var(--sl-badge-height-condense);
+  min-width: var(--sl-badge-height-condense);
+  padding-inline: var(--sl-badge-padding-inline-condense);
+  border: var(--sl-stroke-default) solid var(--sl-e-border);
+  border-radius: var(--sl-radius-pill);
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+  white-space: nowrap;
+}
+
+.Badge[data-size='minimize'] {
+  font-family: var(--sl-font-trigger-minimize-font-family);
+  font-size: var(--sl-font-trigger-minimize-font-size);
+  font-weight: var(--sl-font-trigger-minimize-font-weight);
+  line-height: var(--sl-font-trigger-minimize-line-height);
+  letter-spacing: var(--sl-font-trigger-minimize-letter-spacing);
+  gap: var(--sl-badge-gap-minimize);
+  height: var(--sl-badge-height-minimize);
+  min-width: var(--sl-badge-height-minimize);
+  padding-inline: var(--sl-badge-padding-inline-minimize);
+}
+
+.Badge[data-size='base'] {
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
+  gap: var(--sl-badge-gap-base);
+  height: var(--sl-badge-height-base);
+  min-width: var(--sl-badge-height-base);
+  padding-inline: var(--sl-badge-padding-inline-base);
+}
+
+.Badge svg,
+.Badge .material-symbols-outlined {
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.Badge[data-size='minimize'] svg,
+.Badge[data-size='minimize'] .material-symbols-outlined {
+  width: var(--sl-icon-size-minimize);
+  height: var(--sl-icon-size-minimize);
+  font-size: var(--sl-icon-size-minimize);
+}
+
+.Badge[data-size='base'] svg,
+.Badge[data-size='base'] .material-symbols-outlined {
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  font-size: var(--sl-icon-size-base);
+}
+
+/* A status dot, in the label color. */
+.Badge[data-dot]::before {
+  content: '';
+  width: var(--sl-badge-dot-condense);
+  height: var(--sl-badge-dot-condense);
+  border-radius: var(--sl-radius-pill);
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+.Badge[data-size='minimize'][data-dot]::before {
+  width: var(--sl-badge-dot-minimize);
+  height: var(--sl-badge-dot-minimize);
+}
+
+.Badge[data-size='base'][data-dot]::before {
+  width: var(--sl-badge-dot-base);
+  height: var(--sl-badge-dot-base);
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
+ * below the md breakpoint. Calendar is the grid on its own; DatePresets is
+ * the quick-selection list. Both are usable without the field.
+ *
+ * Concepts: calendar (day cell, range band, today ring), item (preset rows),
+ * field (the trigger), emphasis bold (the selected day, via the default
+ * emphasis level, so it follows data-color).
+ *
+ * Text styles, one whole style each: day numbers are trigger-condense and
+ * selected days are selected-condense, weekday initials are eyebrow-minimize,
+ * the month title is subtitle-base, a preset label is trigger-condense with
+ * its hint in body-minimize, and the footer summary is body-condense.
+ * The trigger text is text-body-base, the same style as Input.
+ *
+ * How many months are on screen is measured on the panel (40rem two months,
+ * 32rem one, and one month in a drawer or for a coarse pointer under 48rem).
+ * Those lengths are layout, not tokens. CSS only switches the preset row and
+ * the sticky footer, from data-layout and data-compact.
+ *
+ * Keyboard (WAI-ARIA APG date picker dialog): Left/Right one day (they swap
+ * in RTL), Up/Down one week, Home/End the week, PageUp/PageDown one month,
+ * Shift+PageUp/PageDown one year, Enter/Space pick. With two months showing,
+ * paging forward lands the focused day in the last column, so the view shifts
+ * by one month. Delete or Backspace clears the draft. Escape drops a
+ * half-picked range first, then closes. Escape in the month or year chooser
+ * returns to the days. A range is a start click, then an end click; an end
+ * before the start swaps. Hover or focus previews the band until the end is
+ * chosen. Direction is read when the picker opens; a dir change while it is
+ * open is not picked up.
+ *
+ * Day state: data-selected, data-range-start, data-range-end, data-in-range,
+ * data-preview, data-today, data-outside-month, data-disabled, data-focused.
+ * aria-selected is only the real value (the day, or the start and end).
+ */
+
+/* CALENDAR */
+
+.Calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-calendar-month-gap);
+  min-width: 0;
+}
+
+.DatePickerMonths {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sl-calendar-month-gap);
+  min-width: 0;
+}
+
+.DatePickerNav {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-calendar-header-gap);
+  flex: 1 0 100%;
+}
+
+.DatePickerNav .DatePickerMonthTitle {
+  flex: 1 1 auto;
+}
+
+.DatePickerMonth {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-calendar-header-gap);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.DatePickerMonthBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sl-calendar-header-gap);
+  min-height: var(--sl-control-height-sm);
+}
+
+.DatePickerMonthSpacer {
+  inline-size: var(--sl-control-height-sm);
+  flex: 0 0 auto;
+}
+
+.DatePickerMonthTitle {
+  font-family: var(--sl-font-subtitle-base-font-family);
+  font-size: var(--sl-font-subtitle-base-font-size);
+  font-weight: var(--sl-font-subtitle-base-font-weight);
+  line-height: var(--sl-font-subtitle-base-line-height);
+  letter-spacing: var(--sl-font-subtitle-base-letter-spacing);
+  outline: none;
+  margin: 0;
+  padding: var(--sl-space-1) var(--sl-space-2);
+  border: 0;
+  border-radius: var(--sl-radius-control);
+  background: transparent;
+  color: var(--sl-text-primary);
+  cursor: pointer;
+}
+
+.DatePickerMonthTitle:hover {
+  background: var(--sl-item-background-hover);
+}
+
+.DatePickerMonthTitle:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.CalendarGrid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-calendar-grid-gap);
+}
+
+.Calendar,
+.DatePickerPanel {
+  --sl-calendar-cell: var(--sl-calendar-day-size);
+}
+
+.DatePickerPanel[data-touch] {
+  --sl-calendar-cell: max(var(--sl-calendar-day-size), var(--sl-a11y-min-touch-target));
+}
+
+@media (pointer: coarse) {
+  .Calendar {
+    --sl-calendar-cell: max(var(--sl-calendar-day-size), var(--sl-a11y-min-touch-target));
+  }
+}
+
+.CalendarWeek {
+  display: grid;
+  grid-template-columns: repeat(7, var(--sl-calendar-cell));
+  column-gap: 0;
+  row-gap: var(--sl-calendar-grid-gap);
+}
+
+.CalendarGrid:has(.CalendarWeekNumber) .CalendarWeek {
+  grid-template-columns: auto repeat(7, var(--sl-calendar-cell));
+}
+
+.CalendarWeekday,
+.CalendarWeekNumber {
+  font-family: var(--sl-font-eyebrow-minimize-font-family);
+  font-size: var(--sl-font-eyebrow-minimize-font-size);
+  font-weight: var(--sl-font-eyebrow-minimize-font-weight);
+  line-height: var(--sl-font-eyebrow-minimize-line-height);
+  letter-spacing: var(--sl-font-eyebrow-minimize-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-minimize-text-transform);
+  display: grid;
+  place-items: center;
+  min-block-size: var(--sl-space-6);
+  color: var(--sl-calendar-weekday-color);
+  text-decoration: none;
+}
+
+.CalendarWeekNumber {
+  padding-inline: var(--sl-space-1);
+}
+
+.CalendarDay {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
+  position: relative;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  inline-size: 100%;
+  aspect-ratio: 1;
+  min-inline-size: 0;
+  min-block-size: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--sl-calendar-day-radius);
+  outline: none;
+  background: transparent;
+  color: var(--sl-calendar-day-color);
+  cursor: pointer;
+}
+
+.CalendarDay:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.CalendarDay--empty {
+  cursor: default;
+  pointer-events: none;
+}
+
+.CalendarDayNumber {
+  position: relative;
+  z-index: 1;
+}
+
+.CalendarDay:hover:not([data-disabled]):not([data-selected]) {
+  background: var(--sl-calendar-day-background-hover);
+}
+
+.CalendarDay[data-outside-month] {
+  color: var(--sl-calendar-day-color-outside);
+}
+
+.CalendarDay[data-disabled] {
+  color: var(--sl-calendar-day-color-disabled);
+  cursor: default;
+}
+
+.CalendarDay[data-selected] {
+  font-family: var(--sl-font-selected-condense-font-family);
+  font-size: var(--sl-font-selected-condense-font-size);
+  font-weight: var(--sl-font-selected-condense-font-weight);
+  line-height: var(--sl-font-selected-condense-line-height);
+  letter-spacing: var(--sl-font-selected-condense-letter-spacing);
+}
+
+.CalendarDay[data-selected]:not([data-range-start]):not([data-range-end]) {
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+}
+
+.CalendarDay[data-range-start],
+.CalendarDay[data-range-end] {
+  overflow: hidden;
+  background: transparent;
+}
+
+.CalendarDay[data-range-start] .CalendarDayNumber,
+.CalendarDay[data-range-end] .CalendarDayNumber {
+  display: grid;
+  place-items: center;
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: var(--sl-calendar-day-radius);
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+}
+
+.CalendarDay[data-in-range],
+.CalendarDay[data-preview]:not([data-selected]) {
+  border-radius: 0;
+  background: var(--sl-calendar-range-background);
+  color: var(--sl-calendar-range-color);
+}
+
+.CalendarDay[data-range-start]::before,
+.CalendarDay[data-range-end]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: linear-gradient(to right, transparent 50%, var(--sl-calendar-range-background) 50%);
+}
+
+.CalendarDay[data-range-end]::before {
+  background: linear-gradient(to left, transparent 50%, var(--sl-calendar-range-background) 50%);
+}
+
+[dir='rtl'] .CalendarDay[data-range-start]::before {
+  background: linear-gradient(to left, transparent 50%, var(--sl-calendar-range-background) 50%);
+}
+
+[dir='rtl'] .CalendarDay[data-range-end]::before {
+  background: linear-gradient(to right, transparent 50%, var(--sl-calendar-range-background) 50%);
+}
+
+.CalendarDay[data-range-start][data-range-end]::before {
+  content: none;
+}
+
+.CalendarDay[data-focused] {
+  z-index: 1;
+}
+
+.CalendarDay[data-today] .CalendarDayNumber {
+  box-shadow: inset 0 0 0 var(--sl-stroke-default) var(--sl-calendar-today-ring);
+  border-radius: var(--sl-calendar-day-radius);
+  padding-inline: var(--sl-space-1);
+}
+
+/* The selected fill is the bold accent, the same hue as the today ring, so the ring switches to the text color. */
+.CalendarDay[data-today][data-selected] .CalendarDayNumber {
+  box-shadow: inset 0 0 0 var(--sl-stroke-default) var(--sl-e-fg);
+}
+
+[data-theme$='high-contrast'] .CalendarDay[data-in-range],
+[data-theme$='high-contrast'] .CalendarDay[data-preview]:not([data-selected]) {
+  box-shadow: inset 0 calc(var(--sl-stroke-default) * -1) 0 var(--sl-border-accent);
+}
+
+.CalendarChooser {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-calendar-header-gap);
+}
+
+.CalendarChooserGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--sl-calendar-grid-gap);
+}
+
+.CalendarChoice {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
+  outline: none;
+  min-block-size: var(--sl-control-height-sm);
+  padding: var(--sl-space-1) var(--sl-space-2);
+  border: 0;
+  border-radius: var(--sl-radius-control);
+  background: transparent;
+  color: var(--sl-text-primary);
+  cursor: pointer;
+}
+
+.CalendarChoice:hover:not([aria-disabled='true']) {
+  background: var(--sl-item-background-hover);
+}
+
+.CalendarChoice:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.CalendarChoice[aria-disabled='true'] {
+  color: var(--sl-calendar-day-color-disabled);
+  cursor: default;
+}
+
+/* PRESETS */
+
+.DatePickerPresets {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-1);
+  min-width: 0;
+}
+
+.DatePickerPresets[data-layout='row'] {
+  flex-direction: row;
+  overflow-x: auto;
+}
+
+.DatePickerPreset {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sl-space-0-5);
+  inline-size: 100%;
+  padding: var(--sl-item-padding-block) var(--sl-item-padding-inline);
+  border: 0;
+  border-radius: var(--sl-item-radius);
+  background: transparent;
+  color: var(--sl-item-color);
+  text-align: start;
+  cursor: pointer;
+}
+
+.DatePickerPresets[data-layout='row'] .DatePickerPreset {
+  flex-direction: row;
+  align-items: baseline;
+  inline-size: auto;
+  white-space: nowrap;
+}
+
+.DatePickerPreset:hover:not([data-disabled]) {
+  background: var(--sl-item-background-hover);
+}
+
+.DatePickerPreset:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.DatePickerPreset[data-checked] {
+  background: var(--sl-item-background-selected);
+  color: var(--sl-item-color-selected);
+}
+
+.DatePickerPreset[data-disabled] {
+  color: var(--sl-text-disabled);
+  cursor: default;
+}
+
+.DatePickerPresetHint {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  color: var(--sl-text-tertiary);
+}
+
+.DatePickerPreset[data-checked] .DatePickerPresetHint {
+  color: var(--sl-item-color-selected);
+}
+
+/* PICKER */
+
+.DatePickerField {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.DatePickerField .DatePickerTrigger {
+  box-sizing: border-box;
+  color: var(--sl-field-color);
+  background: var(--sl-field-background);
+  border: var(--sl-field-border-width) solid var(--sl-field-border-color);
+  border-radius: var(--sl-field-radius);
+  transition: var(--sl-field-transition);
+  outline: none;
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sl-gap-control);
+  inline-size: 100%;
+  block-size: var(--sl-control-height-md);
+  padding-inline: var(--sl-control-padding-inline);
+  text-align: start;
+  cursor: pointer;
+}
+
+.DatePickerTrigger:disabled {
+  color: var(--sl-text-disabled);
+  cursor: default;
+}
+
+.DatePickerField .DatePickerTrigger:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.DatePickerValue[data-placeholder] {
+  color: var(--sl-text-tertiary);
+}
+
+.DatePickerClear {
+  position: absolute;
+  inset-inline-end: var(--sl-space-1);
+  z-index: 1;
+}
+
+.DatePickerTrigger:has(~ .DatePickerClear) {
+  padding-inline-end: var(--sl-control-height-sm);
+}
+
+.DatePickerPopup {
+  /* 52rem fits two months and the preset column; three months ask for 64rem. Layout, not a brand size. */
+  inline-size: min(var(--available-width, 100vw), 52rem);
+  max-inline-size: var(--available-width, 100vw);
+  padding: 0;
+}
+
+.DatePickerPopup[data-months='3'] {
+  inline-size: min(var(--available-width, 100vw), 64rem);
+}
+
+.DatePickerPanel {
+  display: grid;
+  /* 11rem is the preset column. Layout, not a brand size: wide enough for "Year to date" and a hint. */
+  grid-template-columns: 11rem minmax(0, 1fr);
+  align-items: start;
+  gap: var(--sl-calendar-month-gap);
+  padding: var(--sl-calendar-panel-padding);
+  min-width: 0;
+}
+
+.DatePickerPanel .DatePickerPresets {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  inline-size: auto;
+}
+
+.DatePickerPanel .Calendar {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 0;
+}
+
+.DatePickerPanel:not(:has(.DatePickerPresets)) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.DatePickerPanel:not(:has(.DatePickerPresets)) .Calendar,
+.DatePickerPanel:not(:has(.DatePickerPresets)) .DatePickerFooter {
+  grid-column: 1;
+}
+
+.DatePickerFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sl-space-3);
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.DatePickerSummary {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  margin: 0;
+  color: var(--sl-text-secondary);
+}
+
+.DatePickerActions {
+  display: flex;
+  gap: var(--sl-space-2);
+  margin-inline-start: auto;
+}
+
+/* Presets become a row once the measured panel is under 40rem, or the popup is a drawer. */
+.DatePickerPanel[data-layout='row'],
+.DatePickerPanel[data-layout='row']:not(:has(.DatePickerPresets)) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.DatePickerPanel[data-layout='row'] .DatePickerPresets,
+.DatePickerPanel[data-layout='row'] .Calendar,
+.DatePickerPanel[data-layout='row'] .DatePickerFooter {
+  grid-column: 1;
+  grid-row: auto;
+}
+
+.DatePickerPanel[data-compact] .DatePickerFooter {
+  position: sticky;
+  inset-block-end: 0;
+  flex-wrap: wrap;
+  background: var(--sl-popup-background);
+}
+
+/* The action row shrinks to its buttons, so a percentage width on Apply never
+   resolves. A 100% basis wraps Apply onto its own row of the footer. */
+.DatePickerPanel[data-compact] .DatePickerActions {
+  flex-basis: 100%;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-inline-start: 0;
+}
+
+.DatePickerPanel[data-compact] .DatePickerApply {
+  flex-basis: 100%;
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
+ * (cents, yen, fils) so 0.1 + 0.2 and 1.005 * 100 cannot drift, and so the number matches
+ * what a payment API sends. Number field counts in major units; Money field converts at
+ * the edge and rounds half away from zero. The default maximum is 10^15 - 1 minor
+ * units, so the major amount stays inside 15 significant digits. Changing currency
+ * keeps the number the person typed and re-rounds it to the new currency's digits
+ * (12.50 USD becomes 13 JPY). There is no exchange rate. When the app
+ * controls both the value and the currency, it decides whether to apply that rounding:
+ * onValueChange still reports the re-rounded minor units.
+ *
+ * Keyboard is Number field's: ArrowUp and ArrowDown step one major unit, Shift steps 100
+ * major units, Alt steps one minor unit, Home and End jump to the minimum and maximum.
+ * The currency symbol is not in the text, so the caret does not fight it. A fixed symbol
+ * is aria-hidden; the currency name is in the input's accessible description. A picker
+ * is its own tab stop, before the input when the locale puts the symbol first and after
+ * it when the locale puts the symbol last.
+ *
+ * State on the root: data-currency (USD), data-affix (start or end), data-affix-kind
+ * (symbol or picker), data-negative (below zero; set data-color on the field to color
+ * it, never on by default), data-align (start or end),
+ * data-size (xs, sm, md, lg), data-readonly, plus data-invalid, data-disabled,
+ * data-focused and data-scrubbing.
+ *
+ * The affix (symbol or picker) is drawn inside the field so it can later be lifted into
+ * a general Input affix for units, https://, or @. Position comes from the locale, with
+ * logical properties so RTL mirrors it. The group, not the input, carries the field
+ * border, hover, focus halo, invalid edge and disabled fill, so the affix reads as part
+ * of the field.
+ */
+
+/* ============================================
+   FIELD
+   ============================================ */
+
+.MoneyField {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--sl-field-gap);
+  width: 100%;
+}
+
+.MoneyFieldGroup {
+  box-sizing: border-box;
+  color: var(--sl-field-color);
+  background: var(--sl-field-background);
+  border: var(--sl-field-border-width) solid var(--sl-field-border-color);
+  border-radius: var(--sl-field-radius);
+  transition: var(--sl-field-transition);
+  outline: none;
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: var(--sl-control-height-md);
+  padding: 0;
+}
+
+.MoneyField[data-size='xs'] .MoneyFieldGroup {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  height: var(--sl-control-height-xs);
+}
+
+.MoneyField[data-size='sm'] .MoneyFieldGroup {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  height: var(--sl-control-height-sm);
+}
+
+.MoneyField[data-size='lg'] .MoneyFieldGroup {
+  font-family: var(--sl-font-body-magnify-font-family);
+  font-size: var(--sl-font-body-magnify-font-size);
+  font-weight: var(--sl-font-body-magnify-font-weight);
+  line-height: var(--sl-font-body-magnify-line-height);
+  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
+  height: var(--sl-control-height-lg);
+}
+
+.MoneyFieldGroup .MoneyFieldInput,
+.MoneyFieldAffix,
+.MoneyFieldGroup .MoneyFieldCurrencyTrigger {
+  font: inherit;
+}
+
+.MoneyFieldGroup .MoneyFieldInput {
+  flex: 1;
+  min-inline-size: 0;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.MoneyFieldGroup .MoneyFieldInput:hover,
+.MoneyFieldGroup .MoneyFieldInput:focus,
+.MoneyField[data-invalid] .MoneyFieldInput,
+.MoneyField[data-invalid] .MoneyFieldInput:focus,
+.MoneyField[data-disabled] .MoneyFieldInput {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* A symbol brings its own padding. A picker has a divider, so the amount keeps its inset. */
+.MoneyField[data-affix-kind='symbol'][data-affix='start'] .MoneyFieldInput {
+  padding-inline-start: 0;
+}
+
+.MoneyField[data-affix-kind='symbol'][data-affix='end']:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: 0;
+}
+
+/* Number field always pads for its steppers. Those buttons are absent unless asked for. */
+.MoneyField:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: var(--sl-control-padding-inline);
+}
+
+.MoneyField[data-size='xs']:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: var(--sl-control-padding-inline-xs);
+}
+
+.MoneyField[data-size='sm']:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: var(--sl-control-padding-inline-sm);
+}
+
+.MoneyField[data-size='lg']:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: var(--sl-control-padding-inline-lg);
+}
+
+.MoneyField[data-align='end'] .MoneyFieldInput {
+  text-align: end;
+}
+
+.MoneyField[data-align='start'] .MoneyFieldInput {
+  text-align: start;
+}
+
+.MoneyFieldGroup:hover:not(:focus-within) {
+  border-color: var(--sl-field-border-color-hover);
+}
+
+.MoneyFieldGroup:focus-within,
+.MoneyField[data-focused] .MoneyFieldGroup {
+  border-color: var(--sl-field-border-color-focus);
+  box-shadow: var(--sl-field-shadow-focus);
+}
+
+.MoneyField[data-invalid] .MoneyFieldGroup {
+  border-color: var(--sl-field-border-color-error);
+}
+
+.MoneyField[data-invalid] .MoneyFieldGroup:focus-within,
+.MoneyField[data-invalid][data-focused] .MoneyFieldGroup {
+  border-color: var(--sl-field-border-color-error);
+  box-shadow: var(--sl-field-shadow-focus-error);
+}
+
+.MoneyField[data-disabled] .MoneyFieldGroup {
+  background: var(--sl-field-background-disabled);
+  cursor: not-allowed;
+}
+
+.MoneyField[data-readonly] .MoneyFieldInput {
+  cursor: default;
+}
+
+/* The palette is the one on the field. An ancestor data-color does not recolor a balance. */
+.MoneyField[data-negative][data-color] .MoneyFieldInput {
+  color: var(--sl-scope-fg);
+}
+
+.MoneyField[data-scrubbing] .MoneyFieldInput {
+  cursor: ns-resize;
+}
+
+/* The sign toggle is for coarse pointers: an iOS decimal keypad has no minus key. */
+.MoneyFieldSign {
+  display: none;
+  align-self: center;
+  flex: none;
+}
+
+@media (pointer: coarse) {
+  .MoneyFieldSign {
+    display: inline-flex;
+  }
+}
+
+/* ============================================
+   AFFIX
+   ============================================ */
+
+.MoneyFieldAffix {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  padding-inline: var(--sl-control-padding-inline);
+  color: var(--sl-field-affix-color);
+  user-select: none;
+}
+
+.MoneyField[data-size='xs'] .MoneyFieldAffix {
+  padding-inline: var(--sl-control-padding-inline-xs);
+}
+
+.MoneyField[data-size='sm'] .MoneyFieldAffix {
+  padding-inline: var(--sl-control-padding-inline-sm);
+}
+
+.MoneyField[data-size='lg'] .MoneyFieldAffix {
+  padding-inline: var(--sl-control-padding-inline-lg);
+}
+
+/* ============================================
+   CURRENCY SELECT
+   ============================================ */
+
+.MoneyFieldCurrency {
+  display: flex;
+  align-self: stretch;
+  flex: none;
+}
+
+.MoneyFieldCurrencyTrigger {
+  display: inline-flex;
+  align-items: center;
+  align-self: stretch;
+  flex: none;
+  gap: var(--sl-space-1);
+  height: auto;
+  min-height: 0;
+  padding-inline: var(--sl-control-padding-inline);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--sl-field-affix-color);
+}
+
+.MoneyField[data-size='xs'] .MoneyFieldCurrencyTrigger {
+  padding-inline: var(--sl-control-padding-inline-xs);
+}
+
+.MoneyField[data-size='sm'] .MoneyFieldCurrencyTrigger {
+  padding-inline: var(--sl-control-padding-inline-sm);
+}
+
+.MoneyField[data-size='lg'] .MoneyFieldCurrencyTrigger {
+  padding-inline: var(--sl-control-padding-inline-lg);
+}
+
+.MoneyField[data-affix='start'] .MoneyFieldCurrency {
+  border-inline-end: var(--sl-field-border-width) solid var(--sl-field-border-color);
+}
+
+.MoneyField[data-affix='end'] .MoneyFieldCurrency {
+  border-inline-start: var(--sl-field-border-width) solid var(--sl-field-border-color);
+}
+
+.MoneyFieldCurrencyTrigger:hover,
+.MoneyFieldCurrencyTrigger:focus,
+.MoneyFieldCurrencyTrigger[data-popup-open],
+.MoneyFieldCurrencyTrigger[aria-expanded='true'] {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  color: var(--sl-text-primary);
+}
+
+/* The group halo says the field is focused. This says the picker, not the amount, has the caret. */
+.MoneyFieldCurrencyTrigger:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+/* The picker is its own field, so it does not take the amount's label. */
+.MoneyFieldCurrencyField,
+.MoneyFieldGroup .ComboboxRoot {
+  display: contents;
+}
+
+.MoneyFieldCurrencyIcon {
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  font-size: var(--sl-icon-size-base);
+}
+
+.MoneyField[data-size='xs'] .MoneyFieldCurrencyIcon {
+  width: var(--sl-icon-size-minimize);
+  height: var(--sl-icon-size-minimize);
+  font-size: var(--sl-icon-size-minimize);
+}
+
+.MoneyField[data-size='sm'] .MoneyFieldCurrencyIcon {
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+}
+
+.MoneyField[data-size='lg'] .MoneyFieldCurrencyIcon {
+  width: var(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+  font-size: var(--sl-icon-size-magnify);
+}
+
+.MoneyFieldCurrencyPopup {
+  min-inline-size: var(--sl-money-field-picker-min-inline-size);
+}
+
+.MoneyFieldCurrencyItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sl-space-4);
+  width: 100%;
+}
+
+.MoneyFieldCurrencySymbol {
+  color: var(--sl-text-secondary);
+}
+
+.MoneyFieldCurrencyPopup .ComboboxInput {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
+ * when this element is at least list-detail.split-min-width wide, measured on the
+ * element itself so it still works inside another panel. Narrower, the detail is
+ * the existing Drawer (the default) or it replaces the list, which stays mounted
+ * and hidden so its scroll position survives Back.
+ *
+ * The list stays in the splitter's first panel whether the detail is open, closed,
+ * or in a drawer, so its scroll survives. The detail is portaled into a node the
+ * component created, and that node moves. The list sits on the page surface. The
+ * detail sits on surface.raised: a pane
+ * beside the list, one step off the page, with the splitter line as the only
+ * divider. A modal surface would make the pane look like a dialog stuck in the
+ * layout. Drawer mode does not restyle that; it uses the Drawer's own modal
+ * surface, title and Close, so it matches every other drawer.
+ *
+ * The header title is text-title-condense. title-amplify is for a dialog or a
+ * drawer, a layer over the page. A pane heading shares the view with the list,
+ * so the condensed title fits the row. Close is a quiet icon-only Button: a
+ * text Close would compete with the title and the actions in a short header.
+ * Page mode puts Back, icon and word, where Close was.
+ *
+ * Focus moves to the heading when the detail opens, and back to the row when it
+ * closes. Changing the title because another row was picked does not move focus.
+ * Escape closes only when it bubbles out of the detail, so an open menu handles
+ * it first. Nothing listens on window. Page changes are announced by that focus
+ * move; there is no live region.
+ *
+ * data-layout is split, drawer or page. data-open is set while the detail is open.
+ */
+
+.ListDetail {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ListDetailHost,
+.ListDetailSlot,
+.ListDetailSplit,
+.ListDetailList,
+.ListDetailDetail {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  flex: 1;
+}
+
+.ListDetailList {
+  overflow: auto;
+  background: transparent;
+}
+
+.ListDetail[data-layout='split'],
+.ListDetail[data-layout='drawer'],
+.ListDetail[data-layout='page'] {
+  min-width: 0;
+}
+
+.ListDetail[data-open] .ListDetailList {
+  min-height: 0;
+}
+
+.ListDetailDetail[data-layout='split'],
+.ListDetailDetail[data-layout='page'] {
+  background: var(--sl-surface-raised);
+}
+
+.ListDetailDetail[data-layout='drawer'] {
+  background: transparent;
+}
+
+.DrawerPopup .ListDetailHeader,
+.ListDetailDetail[data-layout='drawer'] .ListDetailBody {
+  padding: 0;
+}
+
+.ListDetailHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-list-detail-header-gap);
+  padding: var(--sl-list-detail-header-padding);
+  flex: none;
+}
+
+.ListDetailTitle {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.ListDetailHeader .DrawerTitle {
+  flex: 1;
+  min-width: 0;
+}
+
+.ListDetailActions {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-list-detail-header-gap);
+  flex: none;
+}
+
+.ListDetailBody {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding-inline: var(--sl-list-detail-header-padding);
+  padding-block-end: var(--sl-list-detail-header-padding);
+}
+
+.ListDetail[data-layout='drawer'] .ListDetailDetail {
+  background: transparent;
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
+ * window splitter pattern: the handle is a separator you drag or move with the arrow
+ * keys. Each panel's size is --sl-splitter-panel-size, so a drag can update the line
+ * without rendering the tree again. The parent gives the root its height.
+ *
+ * One panel has no size and fills what the others leave (the last panel, when every
+ * panel has a size). Px and percent mix, so a workstation can pin its sides in pixels
+ * while a list keeps a percent.
+ *
+ * Arrow keys move one key step, 5% of the splitter; Shift uses the larger step.
+ * Home and End jump to that panel's min and max. Enter collapses a collapsible panel
+ * and restores the size it had. Double-click resets to the default size. In RTL,
+ * Left and Right swap. A panel collapsed to nothing is hidden, so its contents leave
+ * the tab order.
+ *
+ * data-orientation is on the root, the panel and the handle. data-dragging is on the
+ * root and the handle while the pointer is down. data-collapsed is on a collapsed
+ * panel and on the handle that resizes it. data-disabled is on the handle. data-grip
+ * draws the grip. data-fill marks the panel that takes the leftover space.
+ *
+ * The line is one stroke. The part you grab sits on the next panel's inline-start,
+ * not centered, so it does not cover the previous panel's scrollbar. A fine pointer
+ * gets a11y.min-target (24px). A coarse pointer gets the 44px touch target. The
+ * focus ring is drawn on that grab area: a ring around the 1px line reads as a
+ * second hairline. Collapse animates with duration.normal. A drag does not animate.
+ * Reduced motion is the shared reset, which finishes every transition at once.
+ */
+
+.Splitter {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.Splitter[data-orientation='horizontal'] {
+  flex-direction: row;
+}
+
+.Splitter[data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+.Splitter[data-dragging] .SplitterPanel {
+  transition: none;
+}
+
+.SplitterPanel {
+  --sl-splitter-panel-size: auto;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  flex: 0 0 var(--sl-splitter-panel-size);
+  transition:
+    flex-basis var(--sl-duration-normal) var(--sl-easing-default),
+    width var(--sl-duration-normal) var(--sl-easing-default),
+    height var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.SplitterPanel[data-orientation='horizontal'] {
+  width: var(--sl-splitter-panel-size);
+  height: auto;
+}
+
+.SplitterPanel[data-orientation='vertical'] {
+  height: var(--sl-splitter-panel-size);
+  width: auto;
+}
+
+.SplitterPanel[data-orientation='horizontal'][data-fill]:not([data-collapsed]) {
+  flex: 1 1 auto;
+  width: auto;
+}
+
+.SplitterPanel[data-orientation='vertical'][data-fill]:not([data-collapsed]) {
+  flex: 1 1 auto;
+  height: auto;
+}
+
+/* A ScrollArea thumb still stacks above the grab area, for a bar that lives in the
+   next panel, under the part of the hit area that crosses the line. */
+.SplitterPanel .ScrollAreaScrollbar {
+  z-index: 2;
+}
+
+.SplitterHandle {
+  position: relative;
+  flex: none;
+  box-sizing: border-box;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  touch-action: none;
+  color: var(--sl-border-default);
+}
+
+.SplitterHandle[data-orientation='horizontal'] {
+  width: var(--sl-splitter-handle-size);
+  height: auto;
+  align-self: stretch;
+  cursor: col-resize;
+}
+
+.SplitterHandle[data-orientation='vertical'] {
+  height: var(--sl-splitter-handle-size);
+  width: auto;
+  align-self: stretch;
+  cursor: row-resize;
+}
+
+.SplitterHandle::before,
+.SplitterHandle::after {
+  content: '';
+  position: absolute;
+}
+
+.SplitterHandle::before {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.SplitterHandle[data-orientation='horizontal']::before {
+  width: var(--sl-splitter-handle-size);
+  height: 100%;
+  background: var(--sl-border-default);
+}
+
+.SplitterHandle[data-orientation='vertical']::before {
+  height: var(--sl-splitter-handle-size);
+  width: 100%;
+  background: var(--sl-border-default);
+}
+
+/* The grab area starts on the line and extends into the next panel. The previous
+   panel keeps its scrollbar, which sits on its inline-end, against this line. */
+.SplitterHandle[data-orientation='horizontal']::after {
+  inset-inline-start: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--sl-a11y-min-target);
+  z-index: 1;
+}
+
+.SplitterHandle[data-orientation='vertical']::after {
+  inset-block-start: 0;
+  left: 0;
+  right: 0;
+  height: var(--sl-a11y-min-target);
+  z-index: 1;
+}
+
+@media (pointer: coarse) {
+  .SplitterHandle[data-orientation='horizontal']::after {
+    width: var(--sl-splitter-handle-hit-size);
+  }
+
+  .SplitterHandle[data-orientation='vertical']::after {
+    height: var(--sl-splitter-handle-hit-size);
+  }
+}
+
+.SplitterHandle:hover::before,
+.SplitterHandle[data-dragging]::before,
+.SplitterHandle[data-collapsed]::before {
+  background: var(--sl-border-strong);
+}
+
+/* The dot edge (45% to 50%) is the shape of the grip, not a size token. */
+/* The dots sit on the line, at the start of the grab area, not in its middle. */
+.SplitterHandle[data-orientation='horizontal'][data-grip]::after {
+  background:
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) inline-start calc(50% - var(--sl-splitter-grip-size) * 2) / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat,
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) inline-start center / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat,
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) inline-start calc(50% + var(--sl-splitter-grip-size) * 2) / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat;
+}
+
+.SplitterHandle[data-orientation='vertical'][data-grip]::after {
+  background:
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) calc(50% - var(--sl-splitter-grip-size) * 2) block-start / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat,
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) center block-start / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat,
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) calc(50% + var(--sl-splitter-grip-size) * 2) block-start / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat;
+}
+
+.SplitterHandle:focus {
+  outline: none;
+}
+
+.SplitterHandle:focus-visible::after {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.SplitterHandle[data-disabled] {
+  cursor: not-allowed;
+}
+
+.SplitterHandle[data-disabled]::before {
+  background: var(--sl-border-default);
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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.
+ * One look for every kind. data-kind only picks the media tone and, in the component,
+ * the default icon and whether the block is announced. Sizes are empty.*
+ * (tokens/semantic/empty.json). No border and no fill: the container provides those.
+ *
+ * The circle uses the subtle emphasis level (--sl-e-bg, --sl-e-fg), the same variables
+ * Badge uses. data-status on the media recolors it. A parent data-color does too:
+ * the subtle chrome pin skips this circle when a color scope is on an ancestor
+ * (Badge keeps the pin). A brand pair re-points fill and text, not that chrome
+ * scope. The circle stays chrome subtle inside a pair, the same as Badge, so a
+ * pair does not get its own selector. High contrast and the vision themes come
+ * with those variables. The title stays
+ * text-primary and the description text-secondary: an error's title is not red,
+ * because a sentence has to stay readable. Neutral kinds use the chrome palette,
+ * which is what subtle resolves to when no status is set.
+ *
+ * Text is a whole style per size, not a font-size on its own. Compact is a table
+ * row or a popup, so the title is subtitle-condense (bold, the row's size) and the
+ * description is body-condense. Standard is a pane: title-condense, the section
+ * heading, with body-base under it. Spacious is a page: title-magnify, the next
+ * title up, still body-base so the sentence doesn't grow with the heading.
+ * Unselected is the quiet pane beside a list, so it drops the circle, the icon is
+ * text-tertiary, and the title steps down one tier: subtitle-minimize where the
+ * others use a condense style (there is no title at minimize), and title-condense
+ * where the others use title-magnify.
+ *
+ * Compact is a row (icon, text, actions) centered across the cell. Standard and
+ * spacious are a column. They take margin-block: auto so a flex or grid column
+ * centers them in the leftover space; in normal flow that margin is zero, so a
+ * page that isn't a column doesn't grow a hole. There is no data-fill attribute.
+ *
+ * The icon for unselected is left_click: the pane is waiting for a choice in the
+ * list beside it, which an empty inbox would not say.
+ *
+ * A popup's empty slot already pads a plain sentence (popup-empty). When the child
+ * is an EmptyState, that padding drops so the two don't add. Menu.Empty has no
+ * popup-empty padding of its own, so it needs nothing here.
+ */
+
+/* ============================================
+   ROOT
+   ============================================ */
+
+.EmptyState {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sl-empty-gap-standard);
+  width: 100%;
+  padding-block: var(--sl-empty-padding-block-standard);
+  padding-inline: var(--sl-empty-padding-inline-standard);
+  color: var(--sl-text-primary);
+  text-align: center;
+}
+
+/* ============================================
+   MEDIA
+   ============================================ */
+
+.EmptyStateMedia {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--sl-empty-media-size-standard);
+  height: var(--sl-empty-media-size-standard);
+  border-radius: var(--sl-radius-pill);
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+}
+
+.EmptyStateMedia:not([data-custom]) .material-symbols-outlined,
+.EmptyStateMedia:not([data-custom]) svg {
+  width: var(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+}
+
+/* An illustration the app passed in. No circle and no tint. */
+.EmptyStateMedia[data-custom] {
+  width: auto;
+  height: auto;
+  background: none;
+  color: inherit;
+}
+
+/* ============================================
+   TEXT
+   ============================================ */
+
+.EmptyStateText {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sl-empty-text-gap-standard);
+  min-width: 0;
+  max-width: var(--sl-empty-description-max-width);
+}
+
+.EmptyStateTitle {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
+  margin: 0;
+  max-width: 100%;
+  color: var(--sl-text-primary);
+}
+
+.EmptyStateDescription {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  margin: 0;
+  max-width: 100%;
+  color: var(--sl-text-secondary);
+}
+
+/* ============================================
+   ACTIONS
+   ============================================ */
+
+.EmptyStateActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sl-empty-actions-gap);
+}
+
+/* ============================================
+   SIZES
+   ============================================ */
+
+.EmptyState[data-size='compact'] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--sl-empty-gap-compact);
+  padding-block: var(--sl-empty-padding-block-compact);
+  padding-inline: var(--sl-empty-padding-inline-compact);
+}
+
+.EmptyState[data-size='compact'] .EmptyStateText {
+  gap: var(--sl-empty-text-gap-compact);
+}
+
+.EmptyState[data-size='compact'] .EmptyStateTitle {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+}
+
+.EmptyState[data-size='compact'] .EmptyStateDescription {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+}
+
+/* Icon only. The tone stays on the glyph, so an error is still an error. */
+.EmptyState[data-size='compact'] .EmptyStateMedia {
+  width: auto;
+  height: auto;
+  background: none;
+}
+
+.EmptyState[data-size='compact'] .EmptyStateMedia:not([data-custom]) .material-symbols-outlined,
+.EmptyState[data-size='compact'] .EmptyStateMedia:not([data-custom]) svg {
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+}
+
+.EmptyState[data-size='spacious'] {
+  gap: var(--sl-empty-gap-spacious);
+  padding-block: var(--sl-empty-padding-block-spacious);
+  padding-inline: var(--sl-empty-padding-inline-spacious);
+}
+
+.EmptyState[data-size='spacious'] .EmptyStateText {
+  gap: var(--sl-empty-text-gap-spacious);
+}
+
+.EmptyState[data-size='spacious'] .EmptyStateTitle {
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
+}
+
+.EmptyState[data-size='spacious'] .EmptyStateMedia {
+  width: var(--sl-empty-media-size-spacious);
+  height: var(--sl-empty-media-size-spacious);
+}
+
+.EmptyState[data-size='spacious'] .EmptyStateMedia:not([data-custom]) .material-symbols-outlined,
+.EmptyState[data-size='spacious'] .EmptyStateMedia:not([data-custom]) svg {
+  width: var(--sl-icon-size-maximize);
+  height: var(--sl-icon-size-maximize);
+  font-size: var(--sl-icon-size-maximize);
+}
+
+/* ============================================
+   PLACES
+   ============================================ */
+
+/* A flex or grid column centers the block in the space left over. */
+.EmptyState:is([data-size='standard'], [data-size='spacious']) {
+  margin-block: auto;
+}
+
+/* The detail pane before a row is picked. Quieter than the list beside it. */
+.EmptyState[data-kind='unselected'] .EmptyStateMedia {
+  width: auto;
+  height: auto;
+  background: none;
+  color: var(--sl-text-tertiary);
+}
+
+.EmptyState[data-kind='unselected'][data-size='compact'] .EmptyStateTitle,
+.EmptyState[data-kind='unselected'][data-size='standard'] .EmptyStateTitle {
+  font-family: var(--sl-font-subtitle-minimize-font-family);
+  font-size: var(--sl-font-subtitle-minimize-font-size);
+  font-weight: var(--sl-font-subtitle-minimize-font-weight);
+  line-height: var(--sl-font-subtitle-minimize-line-height);
+  letter-spacing: var(--sl-font-subtitle-minimize-letter-spacing);
+}
+
+.EmptyState[data-kind='unselected'][data-size='spacious'] .EmptyStateTitle {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
+}
+
+/* The popup slot pads a plain sentence. An EmptyState brings its own padding. */
+.ComboboxEmpty:has(> .EmptyState),
+.AutocompleteEmpty:has(> .EmptyState) {
+  padding: 0;
+  color: inherit;
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
+ * table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small
+ * hand-built table and a full grid look alike. Rows answer to aria-selected="true",
+ * aria-current="true" (the row whose detail is open) or data-selected; cells take
+ * data-align="end" for numbers.
+ *
+ * An empty body keeps the header and the column widths: one cell spanning the columns,
+ * `<tr><td data-empty colSpan={n}><EmptyState size="compact" … /></td></tr>`. A cell with
+ * only text still uses this rule's padding. A cell whose child is an EmptyState lets the
+ * empty state pad itself. The empty row does not take the row hover.
+ */
+
+.Table {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  box-sizing: border-box;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--sl-table-background);
+  color: var(--sl-table-color);
+  border: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-radius: var(--sl-table-radius);
+  overflow: hidden;
+  font-variant-numeric: tabular-nums;
+}
+
+.Table caption {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  caption-side: bottom;
+  padding-block: var(--sl-space-2);
+  color: var(--sl-table-subtle-color);
+  text-align: start;
+}
+
+/* Header: the tray band, a little taller than the rows */
+.Table th {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  height: var(--sl-table-header-height);
+  padding-block: 0;
+  padding-inline: var(--sl-table-cell-padding-inline);
+  background: var(--sl-table-header-background);
+  color: var(--sl-table-header-color);
+  text-align: start;
+  vertical-align: middle;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-border-color);
+}
+
+/* A header that sorts: aria-sort on the th */
+.Table th[aria-sort] {
+  cursor: pointer;
+  transition: background-color var(--sl-duration-fast) var(--sl-easing-default);
+}
+
+.Table th[aria-sort]:hover {
+  background: var(--sl-table-header-background-hover);
+}
+
+/* Body cells */
+.Table td {
+  height: var(--sl-table-row-height);
+  padding-block: 0;
+  padding-inline: var(--sl-table-cell-padding-inline);
+  vertical-align: middle;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+.Table tbody tr:last-child td,
+.Table tbody:last-child tr:last-child td {
+  border-bottom: none;
+}
+
+/* A row header (th in tbody) reads like a cell, in the header's weight */
+.Table tbody th {
+  background: transparent;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+/* Numbers and amounts: right-aligned so digits line up */
+.Table [data-align='end'] {
+  text-align: end;
+}
+
+.Table [data-align='center'] {
+  text-align: center;
+}
+
+/* Secondary text in a cell */
+.Table [data-subtle] {
+  color: var(--sl-table-subtle-color);
+}
+
+/* Hover and selection: the same tints as list items */
+@media (hover: hover) {
+  .Table tbody tr:hover > * {
+    background: var(--sl-table-row-hover);
+    color: var(--sl-item-color-hover);
+  }
+}
+
+.Table tbody tr:is([aria-selected='true'], [data-selected]) > * {
+  background: var(--sl-table-row-selected);
+  color: var(--sl-item-color-selected);
+}
+
+/* The open row keeps a fill, and a bar on the inline start so it is not only a color. */
+.Table tbody tr[aria-current='true'] > * {
+  background: var(--sl-table-row-current);
+  color: var(--sl-table-color);
+  box-shadow: inset var(--sl-stroke-strong) 0 0 0 var(--sl-border-accent);
+}
+
+[dir='rtl'] .Table tbody tr[aria-current='true'] > * {
+  box-shadow: inset calc(var(--sl-stroke-strong) * -1) 0 0 0 var(--sl-border-accent);
+}
+
+/* Footer: totals on the tray band */
+.Table tfoot td {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  background: var(--sl-table-header-background);
+  border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-bottom: none;
+}
+
+/* A header that stays put while the body scrolls (the table's wrapper scrolls) */
+.Table[data-sticky-header] thead th {
+  position: sticky;
+  top: 0;
+  z-index: var(--sl-z-index-docked);
+}
+
+/* Empty state: one cell spanning the columns. Plain text keeps the old padding.
+   An EmptyState brings its own, and its title stays the normal text color on hover. */
+.Table td[data-empty] {
+  height: auto;
+  padding-block: var(--sl-space-10);
+  color: var(--sl-text-tertiary);
+  text-align: center;
+}
+
+.Table td[data-empty]:has(> .EmptyState) {
+  padding: 0;
+  color: inherit;
+}
+
+.Table tbody tr:has(> td[data-empty]):hover > * {
+  background: transparent;
+  color: var(--sl-text-tertiary);
+}
+
+.Table tbody tr:has(> td[data-empty] > .EmptyState):hover > * {
+  color: inherit;
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* Collection
+ *
+ * DataTable, DataList, the toolbar and the pagination, in one place so the two views
+ * share the table concept. Sections: toolbar, table additions, groups, list, pagination, sizes.
+ * Each section is its own file so the design system can name the part. This file brings them in.
+ *
+ * The selection bar replaces the trailing controls (filters, sort, actions) and leaves
+ * the tabs and the search where they are, so selecting rows does not grow the toolbar.
+ */
+
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
+ * even when the page is wide. Search grows to fill the row beside the trailing controls, and
+ * wraps to its own line before it shrinks under collection.search-min-width. Under the narrow
+ * width it takes the full row and filters wrap under it.
+ * A container query cannot read the width token, so the component also sets data-narrow.
+ *
+ * The search icon and the clear button sit inside the field. The browser's own search cancel
+ * is hidden by the reset, so the clear button is the only one, in every browser.
+ */
+
+.CollectionToolbar {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-collection-toolbar-gap);
+  margin-block-end: var(--sl-collection-toolbar-gap);
+}
+
+.CollectionToolbarMain,
+.CollectionSelectionBar,
+.CollectionSort {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-collection-toolbar-gap);
+}
+
+.CollectionSearch {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-collection-toolbar-gap);
+  flex: 1 1 0;
+  min-width: min(100%, var(--sl-collection-search-min-width));
+}
+
+.CollectionSearchField {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Scoped to the field so it wins over Input.css, which loads later. */
+.CollectionSearchField .Input {
+  min-width: 0;
+  padding-inline-start: calc(var(--sl-control-padding-inline) + var(--sl-icon-size-magnify) + var(--sl-space-2));
+}
+
+.CollectionSearchField[data-filled] .Input {
+  padding-inline-end: calc(var(--sl-control-padding-inline) + var(--sl-icon-button-size));
+}
+
+.CollectionSearchIcon {
+  position: absolute;
+  inset-inline-start: var(--sl-control-padding-inline);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  width: var(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+  color: var(--sl-field-affix-color);
+  pointer-events: none;
+}
+
+.CollectionSearchClear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--sl-icon-button-size);
+  height: var(--sl-icon-button-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--sl-icon-button-radius);
+  background: transparent;
+  color: var(--sl-icon-button-color);
+  cursor: pointer;
+  outline: none;
+  transition: var(--sl-icon-button-transition);
+  position: absolute;
+  inset-inline-end: var(--sl-space-3);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+}
+
+.CollectionSearchClear:hover {
+  background: var(--sl-icon-button-background-hover);
+  color: var(--sl-icon-button-color-hover);
+}
+
+.CollectionSearchClear:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+/* The trailing controls join the main row one by one, so each keeps its own width and
+   wraps under the search on its own rather than squeezing. Search takes what is left. */
+.CollectionToolbarTrailing {
+  display: contents;
+}
+
+.CollectionSelectionBar {
+  flex: 0 0 auto;
+  max-width: 100%;
+}
+
+/* Select.css and Combobox.css fill their container. In the row they size to their text. */
+.CollectionToolbarMain .SelectTrigger,
+.CollectionToolbarMain .ComboboxInputWrapper {
+  flex: none;
+  width: auto;
+  max-width: 100%;
+}
+
+.CollectionToolbarActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sl-collection-toolbar-gap);
+  margin-inline-start: auto;
+}
+
+/* The width token is measured in JS (data-narrow). A container query cannot read a custom property. */
+.CollectionToolbar[data-narrow] .CollectionSearch,
+.CollectionView[data-narrow] .CollectionSearch {
+  flex-basis: 100%;
+}
+
+.CollectionCount {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
+ * the hover it already had. The open row uses table.row-current, distinct from a selected row.
+ * Loading dims the rows in place. Nothing here changes a plain .Table.
+ */
+
+.CollectionScroll {
+  overflow: auto;
+  max-width: 100%;
+}
+
+.DataTable[data-size='sm'] {
+  --sl-table-row-height: var(--sl-collection-row-height-sm);
+  --sl-table-header-height: var(--sl-collection-header-height-sm);
+}
+
+.DataTable[data-size='md'] {
+  --sl-table-row-height: var(--sl-collection-row-height-md);
+  --sl-table-header-height: var(--sl-collection-header-height-md);
+}
+
+.Table th[aria-sort] > .TableSortButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  gap: var(--sl-collection-toolbar-gap);
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+.TableSortIcon[data-state='none'] {
+  visibility: hidden;
+}
+
+.Table th[aria-sort]:hover .TableSortIcon[data-state='none'],
+.Table th[aria-sort]:focus-within .TableSortIcon[data-state='none'] {
+  visibility: visible;
+}
+
+.Table[data-sticky-row-header] tbody tr {
+  --sl-row-fill: var(--sl-table-background);
+}
+
+.Table[data-sticky-row-header] tbody tr:hover {
+  --sl-row-fill: var(--sl-table-row-hover);
+}
+
+.Table[data-sticky-row-header] tbody tr:is([aria-selected='true'], [data-selected]) {
+  --sl-row-fill: var(--sl-table-row-selected);
+}
+
+.Table[data-sticky-row-header] tbody tr[aria-current='true'] {
+  --sl-row-fill: var(--sl-table-row-current);
+}
+
+.Table[data-sticky-row-header] tbody th[scope='row'] {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: var(--sl-z-index-docked);
+  background: var(--sl-row-fill);
+}
+
+.TableSortButton:focus-visible,
+.CollectionGroupButton:focus-visible,
+.CollectionRowButton:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.Table tr[data-group] th {
+  background: var(--sl-table-group-header-background);
+  color: var(--sl-table-header-color);
+}
+
+.CollectionGroupButton,
+.CollectionRowButton {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+.DataTable[data-loading] tbody {
+  opacity: var(--sl-item-opacity-disabled);
+  transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
+}
+
+.CollectionSelectColumn {
+  width: var(--sl-collection-selection-column-width);
+}
+
+.Table th[data-width='min'],
+.Table td[data-width='min'] {
+  width: min-content;
+  white-space: nowrap;
+}
+
+.CollectionStatus {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  color: var(--sl-table-subtle-color);
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
+ * and current states. Not a stack of floating cards: the two views should read as one family.
+ * variant=cards adds the surface radius and a gap when a queue should read as separate items.
+ */
+
+.DataList {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  color: var(--sl-table-color);
+}
+
+.DataList ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: var(--sl-table-background);
+  border: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-radius: var(--sl-table-radius);
+}
+
+.DataList li {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sl-collection-list-row-gap);
+  padding-block: var(--sl-collection-list-row-padding-block);
+  padding-inline: var(--sl-table-cell-padding-inline);
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+.DataList li:last-child {
+  border-bottom: none;
+}
+
+.DataList[data-size='md'] li {
+  padding-block: var(--sl-collection-list-row-padding-block);
+  min-height: var(--sl-collection-row-height-md);
+}
+
+.DataList li[data-selected] {
+  background: var(--sl-table-row-selected);
+  color: var(--sl-table-color);
+}
+
+.DataList li[aria-current='true'] {
+  background: var(--sl-table-row-current);
+  color: var(--sl-table-color);
+  box-shadow: inset var(--sl-stroke-strong) 0 0 0 var(--sl-border-accent);
+}
+
+@media (hover: hover) {
+  .DataList li:hover:not([data-selected], [aria-current='true']) {
+    background: var(--sl-table-row-hover);
+    color: var(--sl-table-color);
+  }
+}
+
+.DataListPrimary {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+}
+
+.DataListSecondary,
+.DataListMeta,
+.DataListSummary {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  color: var(--sl-table-subtle-color);
+}
+
+.DataListBody {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--sl-space-1);
+  min-width: 0;
+}
+
+.DataListMeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sl-collection-list-row-gap);
+}
+
+.DataListAmount {
+  margin-inline-start: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.DataListGroup {
+  background: var(--sl-table-group-header-background);
+  color: var(--sl-table-header-color);
+}
+
+.DataList[data-variant='cards'] ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-collection-list-row-gap);
+  background: transparent;
+  border: 0;
+}
+
+.DataList[data-variant='cards'] li {
+  background: var(--sl-table-background);
+  border: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-radius: var(--sl-table-radius);
+}
+
+.DataList[data-loading] ul {
+  opacity: var(--sl-item-opacity-disabled);
+  transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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.
+ * Previous and Next are quiet buttons. The count reads "1–25 of 312".
+ */
+
+.CollectionPagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-collection-toolbar-gap);
+  margin-block-start: var(--sl-collection-toolbar-gap);
+  color: var(--sl-table-subtle-color);
+}
+
+.CollectionPagination p {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  margin: 0;
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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
+ * field shows its own label, so the lost header association does not matter: the input's
+ * name comes from that label, not from the column header.
+ *
+ * Move up / Move down would be quiet buttons in the last cell, ahead of any future drag handle.
+ */
+
+.EditableList {
+  container-type: inline-size;
+}
+
+.EditableListAdd,
+.EditableListError,
+.EditableListBalance {
+  margin-block-start: var(--sl-collection-toolbar-gap);
+}
+
+.EditableListFieldLabel {
+  display: none;
+}
+
+.EditableListBalance {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  padding: var(--sl-space-2) var(--sl-space-3);
+  border-radius: var(--sl-radius-control);
+}
+
+.EditableListBalance[data-color] {
+  background: var(--sl-scope-soft);
+  color: var(--sl-scope-on-soft);
+}
+
+.EditableListStackedTitle {
+  display: none;
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+}
+
+.EditableList[data-stacked] .EditableListStackedTitle {
+  display: block;
+}
+
+.EditableListRowLead {
+  width: 0;
+  padding: 0;
+  border: 0;
+}
+
+.EditableList td .Input,
+.EditableList td input,
+.EditableList td select {
+  width: 100%;
+}
+
+/* The width token is measured in JS. data-stacked is that measurement. */
+.EditableList[data-stacked] {
+  .EditableListTable,
+  .EditableListTable thead,
+  .EditableListTable tbody,
+  .EditableListTable tr,
+  .EditableListTable td {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .EditableListTable thead {
+    position: absolute;
+    width: var(--sl-space-px);
+    height: var(--sl-space-px);
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+  }
+
+  .EditableListTable tr {
+    padding-block: var(--sl-collection-list-row-padding-block);
+    border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+  }
+
+  .EditableListFieldLabel {
+    display: block;
+    font-family: var(--sl-font-subtitle-condense-font-family);
+    font-size: var(--sl-font-subtitle-condense-font-size);
+    font-weight: var(--sl-font-subtitle-condense-font-weight);
+    line-height: var(--sl-font-subtitle-condense-line-height);
+    letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  }
+}