@scattered-light/loomiere-mojave 0.7.1 → 0.9.0

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

@@ -94,6 +94,7 @@
     --sl-letter-spacing-normal: 0; /** Body text. */
     --sl-letter-spacing-wide: 0.025em; /** Small text that needs air. */
     --sl-letter-spacing-wider: 0.05em; /** Small caps and labels. */
+    --sl-letter-spacing-caps: 0.08em; /** Uppercase labels that sit beside figures, such as a column head or a working-paper caption. Between wider and widest. */
     --sl-letter-spacing-widest: 0.1em; /** Uppercase group labels. */
     --sl-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; /** Platform UI font. Fallback when a brand typeface is unavailable. */
     --sl-font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; /** Platform serif stack. */
@@ -764,8 +765,12 @@
     --sl-popup-scale-closed: 0.95; /** Popups grow from just under full size as they open, so they seem to come from the trigger. */
     --sl-popup-list-max-height: 300px; /** A long list scrolls inside the popup after about seven rows. */
     --sl-popup-min-width: 200px; /** Narrowest a free-floating popup or menu gets, so short labels don't make a sliver. */
+    --sl-rule-width: 0px; /** Thickness of the top rule. 0 turns it off and leaves every top edge as it was. Point it at a stroke step (stroke.medium or stroke.thick) to turn it on. */
     --sl-color-scheme: light; /** Which way native browser parts (scrollbars, date pickers, autofill) draw: light, or dark wherever the dark theme is on. Set as color-scheme on the root and handed to AG Grid's browserColorScheme, so they follow data-theme as well as the system setting. */
+    --sl-font-figures-base-font-variant-numeric: tabular-nums; /** font-variant-numeric of font.figures-base. */
+    --sl-font-figures-condense-font-variant-numeric: tabular-nums; /** font-variant-numeric of font.figures-condense. */
     --sl-font-eyebrow-condense-text-transform: uppercase; /** text-transform of font.eyebrow-condense. */
+    --sl-font-caps-condense-text-transform: uppercase; /** text-transform of font.caps-condense. */
     --sl-font-eyebrow-minimize-text-transform: uppercase; /** text-transform of font.eyebrow-minimize. */
     --sl-emphasis-standard-bg: transparent; /** standard in default: outline in accent (primary) */
     --sl-emphasis-quiet-bg: transparent; /** quiet in default: outline in chrome (neutral) */
@@ -780,6 +785,7 @@
     --sl-status-level-error-standard-bg: transparent; /** standard in error: outline in error */
     --sl-status-level-error-quiet-bg: transparent; /** quiet in error: outline in error */
     --sl-button-opacity-disabled: 0.5; /** A disabled button fades as a whole, keeping its shape so the layout doesn't jump. */
+    --sl-description-list-label-width: minmax(8rem, 1fr); /** The label column in the default variant. The value column takes twice the room. */
     --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. */
@@ -788,6 +794,7 @@
     --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-picker-button-max-width: 18rem; /** Widest the button grows. A longer choice is cut with an ellipsis; the label never is. */
     --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. */
@@ -1444,7 +1451,6 @@
     --sl-vision-achromatopsia-color-data-19: var(--sl-vision-achromatopsia-color-data-chartreuse); /** Data series 19: chartreuse. Categorical; use in order. */
     --sl-vision-achromatopsia-color-data-20: var(--sl-vision-achromatopsia-color-data-ivory); /** Data series 20: ivory. Categorical; use in order. */
     --sl-focus-ring-width: var(--sl-a11y-focus-outline-width); /** Alias for the focus outline width, kept for components that style rings with box-shadow. */
-    --sl-focus-outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring); /** The one keyboard focus ring. Every control uses it, outside or inset. */
     --sl-focus-outline-offset: var(--sl-a11y-focus-outline-offset); /** Outside ring: a gap between the control and the ring so it never blends into the control border. The default. */
     --sl-focus-outline-offset-inset: calc(-1 * var(--sl-a11y-focus-outline-width)); /** Inset ring: drawn just inside the control's edge, for controls packed into a container (menus, tab lists, steppers) where an outside ring would be clipped or overlap a neighbor. */
     --sl-focus-halo-spread: calc(var(--sl-a11y-focus-outline-offset) + var(--sl-a11y-focus-outline-width) + 2px); /** A soft glow just outside the focus ring: the gap, the ring, then 2px of tint. The ring carries the contrast (WCAG 1.4.11), so the glow can stay pale. */
@@ -1549,6 +1555,7 @@
     --sl-spacing-stack-md: var(--sl-space-6);
     --sl-spacing-stack-sm: var(--sl-space-4);
     --sl-spacing-stack-xs: var(--sl-space-2);
+    --sl-table-grand-total-rule-width: var(--sl-stroke-thick); /** The double line under a grand total row (tr data-total="grand"). It is drawn as a CSS double border, which needs at least 3px to show two strokes. */
     --sl-font-body-base-font-family: var(--sl-font-family-body); /** font-family of font.body-base. */
     --sl-font-body-base-font-size: var(--sl-font-size-md); /** font-size of font.body-base. */
     --sl-font-body-base-font-weight: var(--sl-font-weight-normal); /** font-weight of font.body-base. */
@@ -1584,11 +1591,21 @@
     --sl-font-title-base-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.title-base. */
     --sl-font-title-base-line-height: var(--sl-line-height-md); /** line-height of font.title-base. */
     --sl-font-title-base-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.title-base. */
+    --sl-font-figures-base-font-family: var(--sl-font-family-mono); /** font-family of font.figures-base. */
+    --sl-font-figures-base-font-size: var(--sl-font-size-md); /** font-size of font.figures-base. */
+    --sl-font-figures-base-font-weight: var(--sl-font-weight-normal); /** font-weight of font.figures-base. */
+    --sl-font-figures-base-line-height: var(--sl-line-height-md); /** line-height of font.figures-base. */
+    --sl-font-figures-base-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.figures-base. */
     --sl-font-code-condense-font-family: var(--sl-font-family-mono); /** font-family of font.code-condense. */
     --sl-font-code-condense-font-size: var(--sl-font-size-sm); /** font-size of font.code-condense. */
     --sl-font-code-condense-font-weight: var(--sl-font-weight-normal); /** font-weight of font.code-condense. */
     --sl-font-code-condense-line-height: var(--sl-line-height-sm); /** line-height of font.code-condense. */
     --sl-font-code-condense-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.code-condense. */
+    --sl-font-figures-condense-font-family: var(--sl-font-family-mono); /** font-family of font.figures-condense. */
+    --sl-font-figures-condense-font-size: var(--sl-font-size-sm); /** font-size of font.figures-condense. */
+    --sl-font-figures-condense-font-weight: var(--sl-font-weight-normal); /** font-weight of font.figures-condense. */
+    --sl-font-figures-condense-line-height: var(--sl-line-height-sm); /** line-height of font.figures-condense. */
+    --sl-font-figures-condense-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.figures-condense. */
     --sl-font-body-condense-font-family: var(--sl-font-family-body); /** font-family of font.body-condense. */
     --sl-font-body-condense-font-size: var(--sl-font-size-sm); /** font-size of font.body-condense. */
     --sl-font-body-condense-font-weight: var(--sl-font-weight-normal); /** font-weight of font.body-condense. */
@@ -1619,6 +1636,11 @@
     --sl-font-eyebrow-condense-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.eyebrow-condense. */
     --sl-font-eyebrow-condense-line-height: var(--sl-line-height-sm); /** line-height of font.eyebrow-condense. */
     --sl-font-eyebrow-condense-letter-spacing: var(--sl-letter-spacing-wider); /** letter-spacing of font.eyebrow-condense. */
+    --sl-font-caps-condense-font-family: var(--sl-font-family-body); /** font-family of font.caps-condense. */
+    --sl-font-caps-condense-font-size: var(--sl-font-size-sm); /** font-size of font.caps-condense. */
+    --sl-font-caps-condense-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.caps-condense. */
+    --sl-font-caps-condense-line-height: var(--sl-line-height-sm); /** line-height of font.caps-condense. */
+    --sl-font-caps-condense-letter-spacing: var(--sl-letter-spacing-caps); /** letter-spacing of font.caps-condense. */
     --sl-font-title-condense-font-family: var(--sl-font-family-display); /** font-family of font.title-condense. */
     --sl-font-title-condense-font-size: var(--sl-font-size-sm); /** font-size of font.title-condense. */
     --sl-font-title-condense-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.title-condense. */
@@ -1826,6 +1848,10 @@
     --sl-scope-info-signal: var(--sl-color-info-500); /** info signal: 500 in light, 400 in dark */
     --sl-scope-info-focus: var(--sl-color-info-500); /** info focus: 500 in light, 400 in dark */
     --sl-scope-chrome-fg: var(--sl-color-primary-1000); /** chrome fg, picked in the brand file (roles.concepts). */
+    --sl-app-bar-height: var(--sl-space-16); /** Least height of the bar. It grows if its contents wrap. */
+    --sl-app-bar-padding-inline: var(--sl-space-6); /** Space at the bar's start and end. */
+    --sl-app-bar-gap: var(--sl-space-2-5); /** Space between the things in the bar. */
+    --sl-app-bar-divider-height: var(--sl-space-6); /** Height of a vertical Separator between groups of actions in the bar. */
     --sl-avatar-size-xs: var(--sl-space-8); /** 32px, inline with text and in dense lists. */
     --sl-avatar-size-sm: var(--sl-space-10); /** 40px, in list rows and comments. */
     --sl-avatar-size-md: var(--sl-space-12); /** 48px, the default. */
@@ -1856,6 +1882,10 @@
     --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-description-list-row-padding-block: var(--sl-space-2); /** Space above and below each pair. */
+    --sl-description-list-row-padding-inline: var(--sl-space-4); /** Space either side of each pair, so pairs inside a sheet line up with its tab label. */
+    --sl-description-list-column-gap: var(--sl-space-4); /** Space between the label column and the value column in the default variant. */
+    --sl-description-list-leader-gap: var(--sl-space-1-5); /** Space between the leader and the label or value either side of it. */
     --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. */
@@ -1863,9 +1893,22 @@
     --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-sheet-rule-width: var(--sl-stroke-medium); /** The top rule. A sheet always has one, so it is its own token rather than rule.width (which is 0 until a brand turns it on for tables and drawers). */
+    --sl-sheet-padding: var(--sl-space-4); /** Space inside a sheet with inset set. Without it, rows and tables inside run edge to edge. */
+    --sl-sheet-tab-height: var(--sl-space-7); /** Height of the tab label. */
+    --sl-sheet-tab-padding-inline: var(--sl-space-3-5); /** Space either side of the tab label's text. */
+    --sl-sheet-tab-radius: var(--sl-radius-sm); /** The tab label's top corners. Its bottom corners stay square where it meets the rule. */
+    --sl-sheet-header-gap: var(--sl-space-3); /** Space between the tab label and an action at the end of the header row, such as an Edit link. */
     --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-stat-figure-figure-font-size: var(--sl-font-size-4xl); /** Size of the figure. Large enough to lead the page, a step under the page title. */
+    --sl-stat-figure-figure-font-size-sm: var(--sl-font-size-2xl); /** Size of the figure at size="sm", for a row of figures in a card or a sheet header. */
+    --sl-stat-figure-figure-line-height: var(--sl-line-height-4xl); /** Line height paired with figure-font-size. */
+    --sl-stat-figure-figure-line-height-sm: var(--sl-line-height-2xl); /** Line height paired with figure-font-size-sm. */
+    --sl-stat-figure-figure-font-weight: var(--sl-font-weight-semibold); /** Weight of the figure. */
+    --sl-stat-figure-underline-width: var(--sl-stroke-thick); /** The double underline at underline="double", the accountant's mark for a final total. A CSS double border, so at least 3px. */
+    --sl-stat-figure-gap: var(--sl-space-1); /** Space between the label, the figure and the caption. */
     --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. */
@@ -1897,7 +1940,6 @@
     --sl-color-chrome-on-1100: var(--sl-color-neutral-on-1100);
     --sl-color-chrome-on-1200: var(--sl-color-neutral-on-1200);
     --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. */
@@ -1916,6 +1958,7 @@
     --sl-status-warning-dark: var(--sl-scope-warning-fg); /** Warning color for text or icons that need more contrast. */
     --sl-status-warning-light: var(--sl-scope-warning-soft); /** Warning tint for caution backgrounds. */
     --sl-text-primary: var(--sl-scope-chrome-fg); /** Body text and headings. The highest-contrast neutral. */
+    --sl-content-pre-radius: var(--sl-radius-surface); /** Code block corners, like any panel, so a brand that squares its surfaces squares code blocks too. */
     --sl-disclosure-indicator-width: var(--sl-stroke-emphasis); /** Selected tab line thickness. */
     --sl-field-border-width: var(--sl-stroke-default); /** Field edge thickness. */
     --sl-field-radius: var(--sl-radius-control); /** Field corners, the same as every other control. */
@@ -1937,32 +1980,36 @@
     --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. */
     --sl-table-radius: var(--sl-radius-surface); /** Grid corners, like any card or panel. */
-    --sl-font-body-base-font: var(--sl-font-body-base-font-weight) var(--sl-font-body-base-font-size) / var(--sl-font-body-base-line-height) var(--sl-font-body-base-font-family); /** Body copy in the base tier, the default UI and body text. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-selected-base-font: var(--sl-font-selected-base-font-weight) var(--sl-font-selected-base-font-size) / var(--sl-font-selected-base-line-height) var(--sl-font-selected-base-font-family); /** The selected or current item in the base tier (the default UI and body text): selected tabs and toggles, the current nav item or page. Base body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-label-base-font: var(--sl-font-label-base-font-weight) var(--sl-font-label-base-font-size) / var(--sl-font-label-base-line-height) var(--sl-font-label-base-font-family); /** Form labels in the base tier, the default UI and body text. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-link-base-font: var(--sl-font-link-base-font-weight) var(--sl-font-link-base-font-size) / var(--sl-font-link-base-line-height) var(--sl-font-link-base-font-family); /** Links in the base tier. The same type as base body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-subtitle-base-font: var(--sl-font-subtitle-base-font-weight) var(--sl-font-subtitle-base-font-size) / var(--sl-font-subtitle-base-line-height) var(--sl-font-subtitle-base-font-family); /** Subtitles in the base tier, the default UI and body text. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-trigger-base-font: var(--sl-font-trigger-base-font-weight) var(--sl-font-trigger-base-font-size) / var(--sl-font-trigger-base-line-height) var(--sl-font-trigger-base-font-family); /** Buttons and triggers in the base tier, the default UI and body text. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-title-base-font: var(--sl-font-title-base-font-weight) var(--sl-font-title-base-font-size) / var(--sl-font-title-base-line-height) var(--sl-font-title-base-font-family); /** Titles in the base tier: a toast, an accordion row, a list item heading. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-code-condense-font: var(--sl-font-code-condense-font-weight) var(--sl-font-code-condense-font-size) / var(--sl-font-code-condense-line-height) var(--sl-font-code-condense-font-family); /** Code uses the mono family so characters line up. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-body-condense-font: var(--sl-font-body-condense-font-weight) var(--sl-font-body-condense-font-size) / var(--sl-font-body-condense-line-height) var(--sl-font-body-condense-font-family); /** Body copy in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-trigger-condense-font: var(--sl-font-trigger-condense-font-weight) var(--sl-font-trigger-condense-font-size) / var(--sl-font-trigger-condense-line-height) var(--sl-font-trigger-condense-font-family); /** Buttons and triggers in the condense tier (dense UI): condense body text at medium, like base-trigger one tier down. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-selected-condense-font: var(--sl-font-selected-condense-font-weight) var(--sl-font-selected-condense-font-size) / var(--sl-font-selected-condense-line-height) var(--sl-font-selected-condense-font-family); /** The selected or current item in the condense tier (dense UI text): selected tabs and toggles, the current nav item or page. Condense body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-link-condense-font: var(--sl-font-link-condense-font-weight) var(--sl-font-link-condense-font-size) / var(--sl-font-link-condense-line-height) var(--sl-font-link-condense-font-family); /** Links in the condense tier. The same type as condense body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-subtitle-condense-font: var(--sl-font-subtitle-condense-font-weight) var(--sl-font-subtitle-condense-font-size) / var(--sl-font-subtitle-condense-line-height) var(--sl-font-subtitle-condense-font-family); /** Subtitles in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-eyebrow-condense-font: var(--sl-font-eyebrow-condense-font-weight) var(--sl-font-eyebrow-condense-font-size) / var(--sl-font-eyebrow-condense-line-height) var(--sl-font-eyebrow-condense-font-family); /** Small uppercase eyebrow labels in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-title-condense-font: var(--sl-font-title-condense-font-weight) var(--sl-font-title-condense-font-size) / var(--sl-font-title-condense-line-height) var(--sl-font-title-condense-font-family); /** Titles in the condense tier: group headers in tables, menus and dense panels. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-body-magnify-font: var(--sl-font-body-magnify-font-weight) var(--sl-font-body-magnify-font-size) / var(--sl-font-body-magnify-line-height) var(--sl-font-body-magnify-font-family); /** Body copy in the magnify tier, emphasized body text (lead paragraphs). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-trigger-magnify-font: var(--sl-font-trigger-magnify-font-weight) var(--sl-font-trigger-magnify-font-size) / var(--sl-font-trigger-magnify-line-height) var(--sl-font-trigger-magnify-font-family); /** Buttons and triggers in the magnify tier (emphasized, larger UI): magnify body text at medium, like base-trigger one tier up. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-title-magnify-font: var(--sl-font-title-magnify-font-weight) var(--sl-font-title-magnify-font-size) / var(--sl-font-title-magnify-line-height) var(--sl-font-title-magnify-font-family); /** Titles in the magnify tier: popovers, cards and fieldsets. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-body-minimize-font: var(--sl-font-body-minimize-font-weight) var(--sl-font-body-minimize-font-size) / var(--sl-font-body-minimize-line-height) var(--sl-font-body-minimize-font-family); /** Body copy in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-trigger-minimize-font: var(--sl-font-trigger-minimize-font-weight) var(--sl-font-trigger-minimize-font-size) / var(--sl-font-trigger-minimize-line-height) var(--sl-font-trigger-minimize-font-family); /** Buttons and triggers in the minimize tier (the smallest UI): minimize body text at medium, like base-trigger one tier down. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-selected-minimize-font: var(--sl-font-selected-minimize-font-weight) var(--sl-font-selected-minimize-font-size) / var(--sl-font-selected-minimize-line-height) var(--sl-font-selected-minimize-font-family); /** The selected or current item in the minimize tier (the smallest functional text): selected tabs and toggles, the current nav item or page. Minimize body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-link-minimize-font: var(--sl-font-link-minimize-font-weight) var(--sl-font-link-minimize-font-size) / var(--sl-font-link-minimize-line-height) var(--sl-font-link-minimize-font-family); /** Links in the minimize tier. The same type as minimize body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-subtitle-minimize-font: var(--sl-font-subtitle-minimize-font-weight) var(--sl-font-subtitle-minimize-font-size) / var(--sl-font-subtitle-minimize-line-height) var(--sl-font-subtitle-minimize-font-family); /** Subtitles in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-eyebrow-minimize-font: var(--sl-font-eyebrow-minimize-font-weight) var(--sl-font-eyebrow-minimize-font-size) / var(--sl-font-eyebrow-minimize-line-height) var(--sl-font-eyebrow-minimize-font-family); /** Small uppercase eyebrow labels in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-title-amplify-font: var(--sl-font-title-amplify-font-weight) var(--sl-font-title-amplify-font-size) / var(--sl-font-title-amplify-line-height) var(--sl-font-title-amplify-font-family); /** Titles in the amplify tier: dialogs, drawers and page sections. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-title-maximize-font: var(--sl-font-title-maximize-font-weight) var(--sl-font-title-maximize-font-size) / var(--sl-font-title-maximize-line-height) var(--sl-font-title-maximize-font-family); /** Titles in the maximize tier: the page head. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-table-subtotal-rule-width: var(--sl-stroke-default); /** The single line above a subtotal row (tr data-total="subtotal"), the line an accountant draws before adding a column. */
+    --sl-font-body-base-font: var(--sl-font-body-base-font-weight) var(--sl-font-body-base-font-size) / var(--sl-font-body-base-line-height) var(--sl-font-body-base-font-family); /** Body copy in the base tier, the default UI and body text. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-selected-base-font: var(--sl-font-selected-base-font-weight) var(--sl-font-selected-base-font-size) / var(--sl-font-selected-base-line-height) var(--sl-font-selected-base-font-family); /** The selected or current item in the base tier (the default UI and body text): selected tabs and toggles, the current nav item or page. Base body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-label-base-font: var(--sl-font-label-base-font-weight) var(--sl-font-label-base-font-size) / var(--sl-font-label-base-line-height) var(--sl-font-label-base-font-family); /** Form labels in the base tier, the default UI and body text. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-link-base-font: var(--sl-font-link-base-font-weight) var(--sl-font-link-base-font-size) / var(--sl-font-link-base-line-height) var(--sl-font-link-base-font-family); /** Links in the base tier. The same type as base body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-subtitle-base-font: var(--sl-font-subtitle-base-font-weight) var(--sl-font-subtitle-base-font-size) / var(--sl-font-subtitle-base-line-height) var(--sl-font-subtitle-base-font-family); /** Subtitles in the base tier, the default UI and body text. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-trigger-base-font: var(--sl-font-trigger-base-font-weight) var(--sl-font-trigger-base-font-size) / var(--sl-font-trigger-base-line-height) var(--sl-font-trigger-base-font-family); /** Buttons and triggers in the base tier, the default UI and body text. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-title-base-font: var(--sl-font-title-base-font-weight) var(--sl-font-title-base-font-size) / var(--sl-font-title-base-line-height) var(--sl-font-title-base-font-family); /** Titles in the base tier: a toast, an accordion row, a list item heading. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-figures-base-font: var(--sl-font-figures-base-font-weight) var(--sl-font-figures-base-font-size) / var(--sl-font-figures-base-line-height) var(--sl-font-figures-base-font-family); /** Figures in the base tier: an amount beside base text, a balance in a card. The mono family with tabular numbers, so digits line up. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-code-condense-font: var(--sl-font-code-condense-font-weight) var(--sl-font-code-condense-font-size) / var(--sl-font-code-condense-line-height) var(--sl-font-code-condense-font-family); /** Code uses the mono family so characters line up. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-figures-condense-font: var(--sl-font-figures-condense-font-weight) var(--sl-font-figures-condense-font-size) / var(--sl-font-figures-condense-line-height) var(--sl-font-figures-condense-font-family); /** Figures in the condense tier: amounts and counts in tables and dense rows. The mono family with tabular numbers, so digits line up down a column. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-body-condense-font: var(--sl-font-body-condense-font-weight) var(--sl-font-body-condense-font-size) / var(--sl-font-body-condense-line-height) var(--sl-font-body-condense-font-family); /** Body copy in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-trigger-condense-font: var(--sl-font-trigger-condense-font-weight) var(--sl-font-trigger-condense-font-size) / var(--sl-font-trigger-condense-line-height) var(--sl-font-trigger-condense-font-family); /** Buttons and triggers in the condense tier (dense UI): condense body text at medium, like base-trigger one tier down. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-selected-condense-font: var(--sl-font-selected-condense-font-weight) var(--sl-font-selected-condense-font-size) / var(--sl-font-selected-condense-line-height) var(--sl-font-selected-condense-font-family); /** The selected or current item in the condense tier (dense UI text): selected tabs and toggles, the current nav item or page. Condense body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-link-condense-font: var(--sl-font-link-condense-font-weight) var(--sl-font-link-condense-font-size) / var(--sl-font-link-condense-line-height) var(--sl-font-link-condense-font-family); /** Links in the condense tier. The same type as condense body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-subtitle-condense-font: var(--sl-font-subtitle-condense-font-weight) var(--sl-font-subtitle-condense-font-size) / var(--sl-font-subtitle-condense-line-height) var(--sl-font-subtitle-condense-font-family); /** Subtitles in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-eyebrow-condense-font: var(--sl-font-eyebrow-condense-font-weight) var(--sl-font-eyebrow-condense-font-size) / var(--sl-font-eyebrow-condense-line-height) var(--sl-font-eyebrow-condense-font-family); /** Small uppercase eyebrow labels in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-caps-condense-font: var(--sl-font-caps-condense-font-weight) var(--sl-font-caps-condense-font-size) / var(--sl-font-caps-condense-line-height) var(--sl-font-caps-condense-font-family); /** Caps labels in the condense tier: a working-paper caption, a column head over figures, a sheet's tab label. Uppercase and tracked a little wider than an eyebrow, so it reads as a label and not a heading. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-title-condense-font: var(--sl-font-title-condense-font-weight) var(--sl-font-title-condense-font-size) / var(--sl-font-title-condense-line-height) var(--sl-font-title-condense-font-family); /** Titles in the condense tier: group headers in tables, menus and dense panels. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-body-magnify-font: var(--sl-font-body-magnify-font-weight) var(--sl-font-body-magnify-font-size) / var(--sl-font-body-magnify-line-height) var(--sl-font-body-magnify-font-family); /** Body copy in the magnify tier, emphasized body text (lead paragraphs). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-trigger-magnify-font: var(--sl-font-trigger-magnify-font-weight) var(--sl-font-trigger-magnify-font-size) / var(--sl-font-trigger-magnify-line-height) var(--sl-font-trigger-magnify-font-family); /** Buttons and triggers in the magnify tier (emphasized, larger UI): magnify body text at medium, like base-trigger one tier up. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-title-magnify-font: var(--sl-font-title-magnify-font-weight) var(--sl-font-title-magnify-font-size) / var(--sl-font-title-magnify-line-height) var(--sl-font-title-magnify-font-family); /** Titles in the magnify tier: popovers, cards and fieldsets. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-body-minimize-font: var(--sl-font-body-minimize-font-weight) var(--sl-font-body-minimize-font-size) / var(--sl-font-body-minimize-line-height) var(--sl-font-body-minimize-font-family); /** Body copy in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-trigger-minimize-font: var(--sl-font-trigger-minimize-font-weight) var(--sl-font-trigger-minimize-font-size) / var(--sl-font-trigger-minimize-line-height) var(--sl-font-trigger-minimize-font-family); /** Buttons and triggers in the minimize tier (the smallest UI): minimize body text at medium, like base-trigger one tier down. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-selected-minimize-font: var(--sl-font-selected-minimize-font-weight) var(--sl-font-selected-minimize-font-size) / var(--sl-font-selected-minimize-line-height) var(--sl-font-selected-minimize-font-family); /** The selected or current item in the minimize tier (the smallest functional text): selected tabs and toggles, the current nav item or page. Minimize body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-link-minimize-font: var(--sl-font-link-minimize-font-weight) var(--sl-font-link-minimize-font-size) / var(--sl-font-link-minimize-line-height) var(--sl-font-link-minimize-font-family); /** Links in the minimize tier. The same type as minimize body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-subtitle-minimize-font: var(--sl-font-subtitle-minimize-font-weight) var(--sl-font-subtitle-minimize-font-size) / var(--sl-font-subtitle-minimize-line-height) var(--sl-font-subtitle-minimize-font-family); /** Subtitles in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-eyebrow-minimize-font: var(--sl-font-eyebrow-minimize-font-weight) var(--sl-font-eyebrow-minimize-font-size) / var(--sl-font-eyebrow-minimize-line-height) var(--sl-font-eyebrow-minimize-font-family); /** Small uppercase eyebrow labels in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-title-amplify-font: var(--sl-font-title-amplify-font-weight) var(--sl-font-title-amplify-font-size) / var(--sl-font-title-amplify-line-height) var(--sl-font-title-amplify-font-family); /** Titles in the amplify tier: dialogs, drawers and page sections. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
+    --sl-font-title-maximize-font: var(--sl-font-title-maximize-font-weight) var(--sl-font-title-maximize-font-size) / var(--sl-font-title-maximize-line-height) var(--sl-font-title-maximize-font-family); /** Titles in the maximize tier: the page head. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing, text-transform and font-variant-numeric are separate. */
     --sl-emphasis-quiet-fg: var(--sl-scope-chrome-fg); /** quiet in default: outline in chrome (neutral) */
     --sl-pair-ember-dune-hover: color-mix(in oklab, var(--sl-pair-ember-dune-accent) 85%, var(--sl-pair-ember-dune-bg)); /** Accent on hover: accent moved 15% toward bg. 4.76:1 against bg, which is the button label. */
     --sl-pair-ember-dune-active: var(--sl-pair-ember-dune-accent); /** Accent while pressed: the accent itself, because moving it would drop the button label below AA. */
@@ -2115,11 +2162,15 @@
     --sl-status-level-error-quiet-fg: var(--sl-scope-error-fg); /** quiet in error: outline in error */
     --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-app-bar-border-width: var(--sl-stroke-default); /** The line under the bar while rule.width is 0. With rule.width on, the line takes the thicker of the two. */
     --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-description-list-leader-width: var(--sl-stroke-default); /** Thickness of the dotted leader. */
+    --sl-sheet-border-width: var(--sl-stroke-default); /** Thickness of the sides and bottom. */
+    --sl-sheet-radius: var(--sl-radius-surface); /** Corners, like any card or panel. The top corners stay square under a tab label, so the tab sits flush on the rule. */
     --sl-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. */
@@ -2158,6 +2209,9 @@
     --sl-content-prose-color: var(--sl-text-primary); /** Long-form body text. The same as body text, so prose and UI read as one voice. */
     --sl-content-selection-text: var(--sl-text-primary); /** Selected text stays body text so it reads the same on the tint. */
     --sl-field-border-color-error: var(--sl-status-error); /** Field edge when the value is invalid. */
+    --sl-focus-ring: var(--sl-interactive-default); /** Focus ring color. Uses the interactive accent so focus reads as "this is the thing you can act on". */
+    --sl-focus-outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring); /** The one keyboard focus ring. Every control uses it, outside or inset. */
+    --sl-bar-border-width: var(--sl-stroke-default); /** Strip edge thickness. */
     --sl-field-color: var(--sl-text-primary); /** The value you typed. */
     --sl-gauge-label-color: var(--sl-text-primary); /** What is being measured. */
     --sl-icon-button-color-hover: var(--sl-text-primary); /** Darkens on hover to confirm it's the target. */
@@ -2215,7 +2269,8 @@
     --sl-status-level-success-bold-fg: var(--sl-scope-success-on-solid); /** bold in success: solid in success */
     --sl-status-level-warning-bold-fg: var(--sl-scope-warning-on-solid); /** bold in warning: solid in warning */
     --sl-status-level-error-bold-fg: var(--sl-scope-error-on-solid); /** bold in error: solid in error */
-    --sl-focus-ring: var(--sl-interactive-default); /** Focus ring color. Uses the interactive accent so focus reads as "this is the thing you can act on". */
+    --sl-description-list-value-color: var(--sl-text-primary); /** Values. */
+    --sl-stat-figure-figure-color: var(--sl-text-primary); /** The figure's color. */
     --sl-focus-shadow-3px-primary: 0 0 0 3px var(--sl-interactive-tint-hover); /** Soft focus halo for inputs. */
     --sl-focus-shadow-3px-primary-soft: 0 0 0 3px var(--sl-interactive-tint-active); /** Slightly stronger focus halo for inputs on tinted surfaces. */
     --sl-focus-halo-color: var(--sl-interactive-tint-hover); /** The pale tint of the focus glow. Components on a colored scope use that scope's soft-hover instead. */
@@ -2287,6 +2342,7 @@
     --sl-notice-description-color: var(--sl-text-secondary); /** Description on the plain surface. A tinted notice uses its palette's text color for both lines. */
     --sl-popup-border-color: var(--sl-border-default); /** Popup edge, a quiet line that separates it from the page under it. */
     --sl-popup-separator-color: var(--sl-border-subtle); /** Line between groups of rows, quieter than the popup edge. */
+    --sl-rule-color: var(--sl-border-strong); /** Color of the top rule. The chrome's strong border, so the rule reads as structure, not as an accent or a selection. A brand can point it at text.primary for an ink rule. */
     --sl-table-background: var(--sl-surface-canvas); /** Cell area. The page color, so a grid sits on the page like body text. */
     --sl-table-subtle-color: var(--sl-text-secondary); /** Secondary text in cells and panels: counts, hints, group totals. */
     --sl-table-header-background: var(--sl-surface-tray); /** Header row, side bar and other grid chrome. The tray step, so it sits a step off the cells in both themes and secondary text on it still passes AA. */
@@ -2299,7 +2355,21 @@
     --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-app-bar-background: var(--sl-surface-raised); /** The bar's fill: one step off the page, like a card, so the page reads as sitting under it. */
+    --sl-app-bar-divider-color: var(--sl-border-strong); /** Color of a vertical Separator in the bar. */
+    --sl-description-list-row-border-color: var(--sl-border-subtle); /** Hairline between pairs, as quiet as a table's row lines. */
+    --sl-description-list-label-color: var(--sl-text-secondary); /** Labels. */
+    --sl-description-list-leader-color: var(--sl-border-control); /** The dotted leader at variant="leader". The control edge color: dark enough to lead the eye, still lighter than the text. */
     --sl-drawer-handle-color: var(--sl-border-strong); /** The grab bar on bottom drawers. Strong border so it reads as something to drag. */
+    --sl-picker-button-label-color: var(--sl-text-secondary); /** The caps label, quieter than the choice it names. */
+    --sl-sheet-background: var(--sl-surface-raised); /** The sheet's fill: the raised surface, one level above the page like any card or panel. */
+    --sl-sheet-border-color: var(--sl-border-default); /** The sheet's sides and bottom, the everyday divider. */
+    --sl-sheet-tab-background: var(--sl-surface-inverse); /** The tab label's fill: the inverse surface, so the label reads as the sheet's name, and its text passes AA in every theme. */
+    --sl-stat-figure-figure-color-accent: var(--sl-text-accent); /** The figure's color at tone="accent", for a figure that asks for action (open questions, items to review). */
+    --sl-stat-figure-label-color: var(--sl-text-secondary); /** The caps label above the figure. */
+    --sl-stat-figure-caption-color: var(--sl-text-secondary); /** The caption under the figure. */
+    --sl-toggle-group-segmented-background: var(--sl-surface-raised); /** Fill of a toggle that is not pressed. */
+    --sl-toggle-group-segmented-pressed-background: var(--sl-fill-inverse); /** Fill of the pressed toggle: the solid chrome color, dark on light pages and light on dark ones. */
     --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. */
@@ -2315,6 +2385,14 @@
     --sl-table-row-hover: var(--sl-item-background-hover); /** Row under the pointer. Same tint as a highlighted menu row. */
     --sl-table-row-selected: var(--sl-item-background-selected); /** Selected rows. Same tint as the chosen menu row. */
     --sl-table-range-border: var(--sl-focus-ring); /** Edge of a range selection and of the focused cell, the same color as every focus ring. */
+    --sl-table-total-rule-color: var(--sl-rule-color); /** The line above a subtotal or total row and the double line under a grand total. The working-paper rule color, so totals and sheet tops are ruled in the same ink. */
+    --sl-table-total-background: var(--sl-table-background); /** Fill of a subtotal or grand total row: the cell color, so the rules mark the total instead of a band. The footer's default totals row keeps the header tray. */
+    --sl-app-bar-border-color: var(--sl-rule-color); /** The line under the bar, in the rule color, so an ink rule brand gets an ink line here too. */
+    --sl-sheet-rule-color: var(--sl-rule-color); /** The top rule's color: the working-paper rule color, so sheets and ruled tables match. */
+    --sl-sheet-tab-color: var(--sl-text-on-inverse-surface); /** Text on the tab label. */
+    --sl-stat-figure-underline-color: var(--sl-rule-color); /** The double underline's color: the working-paper rule color, like a grand total's double rule. */
+    --sl-toggle-group-segmented-border-color: var(--sl-rule-color); /** The outline around a segmented group and the line between its toggles. The rule color, so it is a control edge by default and ink with an ink rule. */
+    --sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse); /** Text on the pressed toggle. */
     --sl-check-background: var(--sl-field-background); /** Empty box, the same fill as a field so it reads as something to fill in. */
     --sl-popup-arrow-fill: var(--sl-popup-background); /** The arrow is part of the popup, so it takes the popup's fill. */
   }
@@ -5780,6 +5858,7 @@
     --sl-popup-arrow-fill: var(--sl-popup-background);
     --sl-popup-arrow-stroke: var(--sl-popup-border-color);
     --sl-popup-separator-color: var(--sl-border-subtle);
+    --sl-rule-color: var(--sl-border-strong);
     --sl-table-background: var(--sl-surface-canvas);
     --sl-table-color: var(--sl-text-primary);
     --sl-table-subtle-color: var(--sl-text-secondary);
@@ -5795,7 +5874,31 @@
     --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-table-total-rule-color: var(--sl-rule-color);
+    --sl-table-total-background: var(--sl-table-background);
+    --sl-app-bar-background: var(--sl-surface-raised);
+    --sl-app-bar-border-color: var(--sl-rule-color);
+    --sl-app-bar-divider-color: var(--sl-border-strong);
+    --sl-description-list-row-border-color: var(--sl-border-subtle);
+    --sl-description-list-label-color: var(--sl-text-secondary);
+    --sl-description-list-value-color: var(--sl-text-primary);
+    --sl-description-list-leader-color: var(--sl-border-control);
     --sl-drawer-handle-color: var(--sl-border-strong);
+    --sl-picker-button-label-color: var(--sl-text-secondary);
+    --sl-sheet-background: var(--sl-surface-raised);
+    --sl-sheet-border-color: var(--sl-border-default);
+    --sl-sheet-rule-color: var(--sl-rule-color);
+    --sl-sheet-tab-background: var(--sl-surface-inverse);
+    --sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
+    --sl-stat-figure-figure-color: var(--sl-text-primary);
+    --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
+    --sl-stat-figure-underline-color: var(--sl-rule-color);
+    --sl-stat-figure-label-color: var(--sl-text-secondary);
+    --sl-stat-figure-caption-color: var(--sl-text-secondary);
+    --sl-toggle-group-segmented-border-color: var(--sl-rule-color);
+    --sl-toggle-group-segmented-background: var(--sl-surface-raised);
+    --sl-toggle-group-segmented-pressed-background: var(--sl-fill-inverse);
+    --sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse);
     --sl-calendar-day-background-hover: var(--sl-item-background-hover);
     --sl-check-background: var(--sl-field-background);
   }
@@ -5926,6 +6029,7 @@
     --sl-popup-arrow-fill: var(--sl-popup-background);
     --sl-popup-arrow-stroke: var(--sl-popup-border-color);
     --sl-popup-separator-color: var(--sl-border-subtle);
+    --sl-rule-color: var(--sl-border-strong);
     --sl-table-background: var(--sl-surface-canvas);
     --sl-table-color: var(--sl-text-primary);
     --sl-table-subtle-color: var(--sl-text-secondary);
@@ -5941,7 +6045,31 @@
     --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-table-total-rule-color: var(--sl-rule-color);
+    --sl-table-total-background: var(--sl-table-background);
+    --sl-app-bar-background: var(--sl-surface-raised);
+    --sl-app-bar-border-color: var(--sl-rule-color);
+    --sl-app-bar-divider-color: var(--sl-border-strong);
+    --sl-description-list-row-border-color: var(--sl-border-subtle);
+    --sl-description-list-label-color: var(--sl-text-secondary);
+    --sl-description-list-value-color: var(--sl-text-primary);
+    --sl-description-list-leader-color: var(--sl-border-control);
     --sl-drawer-handle-color: var(--sl-border-strong);
+    --sl-picker-button-label-color: var(--sl-text-secondary);
+    --sl-sheet-background: var(--sl-surface-raised);
+    --sl-sheet-border-color: var(--sl-border-default);
+    --sl-sheet-rule-color: var(--sl-rule-color);
+    --sl-sheet-tab-background: var(--sl-surface-inverse);
+    --sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
+    --sl-stat-figure-figure-color: var(--sl-text-primary);
+    --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
+    --sl-stat-figure-underline-color: var(--sl-rule-color);
+    --sl-stat-figure-label-color: var(--sl-text-secondary);
+    --sl-stat-figure-caption-color: var(--sl-text-secondary);
+    --sl-toggle-group-segmented-border-color: var(--sl-rule-color);
+    --sl-toggle-group-segmented-background: var(--sl-surface-raised);
+    --sl-toggle-group-segmented-pressed-background: var(--sl-fill-inverse);
+    --sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse);
     --sl-calendar-day-background-hover: var(--sl-item-background-hover);
     --sl-check-background: var(--sl-field-background);
   }
@@ -6072,6 +6200,7 @@
     --sl-popup-arrow-fill: var(--sl-popup-background);
     --sl-popup-arrow-stroke: var(--sl-popup-border-color);
     --sl-popup-separator-color: var(--sl-border-subtle);
+    --sl-rule-color: var(--sl-border-strong);
     --sl-table-background: var(--sl-surface-canvas);
     --sl-table-color: var(--sl-text-primary);
     --sl-table-subtle-color: var(--sl-text-secondary);
@@ -6087,7 +6216,31 @@
     --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-table-total-rule-color: var(--sl-rule-color);
+    --sl-table-total-background: var(--sl-table-background);
+    --sl-app-bar-background: var(--sl-surface-raised);
+    --sl-app-bar-border-color: var(--sl-rule-color);
+    --sl-app-bar-divider-color: var(--sl-border-strong);
+    --sl-description-list-row-border-color: var(--sl-border-subtle);
+    --sl-description-list-label-color: var(--sl-text-secondary);
+    --sl-description-list-value-color: var(--sl-text-primary);
+    --sl-description-list-leader-color: var(--sl-border-control);
     --sl-drawer-handle-color: var(--sl-border-strong);
+    --sl-picker-button-label-color: var(--sl-text-secondary);
+    --sl-sheet-background: var(--sl-surface-raised);
+    --sl-sheet-border-color: var(--sl-border-default);
+    --sl-sheet-rule-color: var(--sl-rule-color);
+    --sl-sheet-tab-background: var(--sl-surface-inverse);
+    --sl-sheet-tab-color: var(--sl-text-on-inverse-surface);
+    --sl-stat-figure-figure-color: var(--sl-text-primary);
+    --sl-stat-figure-figure-color-accent: var(--sl-text-accent);
+    --sl-stat-figure-underline-color: var(--sl-rule-color);
+    --sl-stat-figure-label-color: var(--sl-text-secondary);
+    --sl-stat-figure-caption-color: var(--sl-text-secondary);
+    --sl-toggle-group-segmented-border-color: var(--sl-rule-color);
+    --sl-toggle-group-segmented-background: var(--sl-surface-raised);
+    --sl-toggle-group-segmented-pressed-background: var(--sl-fill-inverse);
+    --sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse);
     --sl-calendar-day-background-hover: var(--sl-item-background-hover);
     --sl-check-background: var(--sl-field-background);
   }
@@ -6160,6 +6313,16 @@
   letter-spacing: var(--sl-font-title-base-letter-spacing);
 }
 
+/* Figures in the base tier: an amount beside base text, a balance in a card. The mono family with tabular numbers, so digits line up. */
+.text-style-figures-base {
+  font-family: var(--sl-font-figures-base-font-family);
+  font-size: var(--sl-font-figures-base-font-size);
+  font-weight: var(--sl-font-figures-base-font-weight);
+  line-height: var(--sl-font-figures-base-line-height);
+  letter-spacing: var(--sl-font-figures-base-letter-spacing);
+  font-variant-numeric: var(--sl-font-figures-base-font-variant-numeric);
+}
+
 /* Code uses the mono family so characters line up. */
 .text-style-code-condense {
   font-family: var(--sl-font-code-condense-font-family);
@@ -6169,6 +6332,16 @@
   letter-spacing: var(--sl-font-code-condense-letter-spacing);
 }
 
+/* Figures in the condense tier: amounts and counts in tables and dense rows. The mono family with tabular numbers, so digits line up down a column. */
+.text-style-figures-condense {
+  font-family: var(--sl-font-figures-condense-font-family);
+  font-size: var(--sl-font-figures-condense-font-size);
+  font-weight: var(--sl-font-figures-condense-font-weight);
+  line-height: var(--sl-font-figures-condense-line-height);
+  letter-spacing: var(--sl-font-figures-condense-letter-spacing);
+  font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
+}
+
 /* Body copy in the condense tier, dense UI text (tables, secondary labels). */
 .text-style-body-condense {
   font-family: var(--sl-font-body-condense-font-family);
@@ -6224,6 +6397,16 @@
   text-transform: var(--sl-font-eyebrow-condense-text-transform);
 }
 
+/* Caps labels in the condense tier: a working-paper caption, a column head over figures, a sheet's tab label. Uppercase and tracked a little wider than an eyebrow, so it reads as a label and not a heading. */
+.text-style-caps-condense {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+}
+
 /* Titles in the condense tier: group headers in tables, menus and dense panels. Titles use the display family; the tier sets the size. */
 .text-style-title-condense {
   font-family: var(--sl-font-title-condense-font-family);
@@ -6414,7 +6597,7 @@
 }
 
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
    Loomiere theme. Load the theme first:
      @import '<your theme>/tokens.css';
@@ -6424,7 +6607,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.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -6698,7 +6881,7 @@ pre {
   background: var(--sl-content-pre-background);
   border: var(--sl-stroke-thin) solid var(--sl-content-pre-border);
   color: var(--sl-content-pre-text);
-  border-radius: var(--sl-space-2);
+  border-radius: var(--sl-content-pre-radius);
   overflow-x: auto;
   margin-block: var(--sl-space-6);
 }
@@ -6868,7 +7051,7 @@ hr {
 }
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
 
 /* Remove default focus; keyboard focus styled in accessibility-theme.css */
@@ -6981,7 +7164,7 @@ main:focus {
 
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {
@@ -7049,7 +7232,7 @@ button,
 
 }
 /* Component styles */
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -7170,7 +7353,7 @@ button,
   overflow: hidden;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Alert Dialog - Mojave Theme
  *
  * No component tokens and no rules of its own. An alert dialog looks exactly like a
@@ -7179,7 +7362,7 @@ button,
  * cancel quiet, and a destructive one bold with data-color="error".
  */
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Autocomplete - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css), the clear button is an icon
@@ -7381,7 +7564,7 @@ button,
    (reset-accessibility.css).
    ============================================ */
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Avatar - Mojave Theme
  *
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in
@@ -7489,7 +7672,7 @@ button,
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Button - Mojave Theme
  *
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
@@ -7639,7 +7822,7 @@ button,
   font-size: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox - Mojave Theme
  * Sizes follow the label: the box is the icon size one tier above the label's text
  * tier (like a button's icon) and the check mark one tier below it.
@@ -7796,7 +7979,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox Group - Mojave Theme */
 
 /* Each checkbox row is already a full tap target tall, so the rows sit close. */
@@ -7812,7 +7995,7 @@ button,
   pointer-events: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -7928,7 +8111,7 @@ button,
   background: var(--sl-surface-raised);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Combobox - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css); the chips box is a field; the
@@ -8413,7 +8596,7 @@ button,
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Context Menu - Mojave Theme
  *
  * No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the
@@ -8582,7 +8765,7 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Dialog and Alert dialog - Mojave Theme
  *
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
@@ -8728,12 +8911,14 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Drawer - a panel that slides in from an edge and can be swiped away.
    The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
    drawer reads as a dialog's sibling; only its size and grab bar are its own
    (--sl-drawer-*). Base UI supplies the swipe through
-   --drawer-swipe-movement-x/y and data-swipe-direction on the popup. */
+   --drawer-swipe-movement-x/y and data-swipe-direction on the popup.
+   The working-paper rule (rule.width, 0 by default) replaces the top border with a heavier
+   line in rule.color. It is an inset shadow, so it stays put while the drawer scrolls. */
 
 .DrawerBackdrop {
   position: fixed;
@@ -8770,6 +8955,8 @@ button,
   overflow-y: auto;
   overscroll-behavior: contain;
   pointer-events: auto;
+  border-top-width: max(0px, var(--sl-modal-border-width) - var(--sl-rule-width) * 1000);
+  box-shadow: inset 0 var(--sl-rule-width) 0 0 var(--sl-rule-color), var(--sl-modal-shadow);
   transform: translate(var(--drawer-swipe-movement-x, 0px), var(--drawer-swipe-movement-y, 0px));
   transition: transform calc(var(--sl-modal-animation-duration) * var(--drawer-swipe-strength, 1)) var(--sl-modal-animation-easing);
 }
@@ -8800,6 +8987,8 @@ button,
   max-height: var(--sl-drawer-popup-max-size);
   border-top: 0;
   border-radius: 0 0 var(--sl-modal-radius) var(--sl-modal-radius);
+  /* Its top edge is the screen's, so no rule. */
+  box-shadow: var(--sl-modal-shadow);
 }
 
 .DrawerPopup[data-swipe-direction='right'] {
@@ -8855,7 +9044,7 @@ button,
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -8916,7 +9105,7 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Fieldset - Mojave Theme
  *
  * No component tokens: a titled group of fields, spaced by the stack gaps, with
@@ -8958,7 +9147,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Form - Mojave Theme
  *
  * No component tokens: fields stack with the large block space, and the action
@@ -8978,7 +9167,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Input - Mojave Theme
  *
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -9115,7 +9304,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Menu - Mojave Theme
  *
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
@@ -9264,7 +9453,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Menubar - Mojave Theme
  *
  * No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
@@ -9457,7 +9646,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Meter - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
@@ -9520,7 +9709,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Navigation Menu - Mojave Theme
  *
  * The strip is the bar concept, the panel is the popup concept and each link is an item
@@ -9940,7 +10129,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Number Field - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css) and the label, description and
@@ -10031,7 +10220,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* OTP Field - Mojave Theme
  *
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input
@@ -10094,7 +10283,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -10259,7 +10448,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Preview Card - Mojave Theme
  *
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense
@@ -10376,7 +10565,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Progress - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
@@ -10453,7 +10642,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Radio - Mojave Theme
  * Same box as Checkbox, always round. Sizes follow the label the same way, and the
  * dot is a share of the circle (check.dot-scale).
@@ -10605,7 +10794,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Scroll Area - Mojave Theme
  *
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
@@ -10687,7 +10876,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Select - Mojave Theme
  *
  * The trigger is a field (the field pattern, control sizes, the base text style); the
@@ -10972,7 +11161,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Separator - Mojave Theme
  *
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
@@ -11000,7 +11189,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Slider - Mojave Theme
  *
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
@@ -11166,7 +11355,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Switch - Mojave Theme
  * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
  * worked out from them: the thumb fills the track's height inside the padding,
@@ -11332,7 +11521,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Tabs - Mojave Theme
  *
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -11468,7 +11657,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Toast - Mojave Theme
  *
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -11704,7 +11893,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle - Mojave Theme
  * A toggle is a button that stays pressed: the same heights, padding, gap and
  * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
@@ -11816,7 +12005,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle Group - Mojave Theme
  *
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -11837,7 +12026,48 @@ textarea.FieldControl {
   border-radius: var(--sl-radius-item);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* ============================================
+   SEGMENTED (data-variant="segmented")
+   Joined toggles in one outline, the pressed one filled solid: a switch between a few
+   views or modules. Tokens: toggle-group.segmented-* (tokens/component/toggle-group.json).
+   ============================================ */
+
+.ToggleGroup[data-variant='segmented'] {
+  padding: 0;
+  gap: 0;
+  background: var(--sl-toggle-group-segmented-background);
+  border: var(--sl-stroke-default) solid var(--sl-toggle-group-segmented-border-color);
+  border-radius: var(--sl-radius-chrome);
+  overflow: hidden;
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle {
+  height: calc(var(--sl-control-height-md) - 2 * var(--sl-stroke-default));
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--sl-text-primary);
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle + .Toggle {
+  border-inline-start: var(--sl-stroke-default) solid var(--sl-toggle-group-segmented-border-color);
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle:hover:not([data-disabled]):not(:disabled) {
+  background: var(--sl-fill-subtle);
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle[data-pressed],
+.ToggleGroup[data-variant='segmented'] .Toggle[data-pressed]:hover:not([data-disabled]):not(:disabled) {
+  background: var(--sl-toggle-group-segmented-pressed-background);
+  color: var(--sl-toggle-group-segmented-pressed-color);
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle:focus-visible {
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -11899,7 +12129,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Tooltip - Mojave Theme
  *
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
@@ -11960,7 +12190,7 @@ textarea.FieldControl {
 }
 
 /* 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 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Badge
  *
  * A status or count label. Not a Base UI part, and not interactive: no hover or focus.
@@ -12065,7 +12295,7 @@ textarea.FieldControl {
   height: var(--sl-badge-dot-base);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /*
  * DatePicker: a field that opens a calendar for one date or a period.
  * Not a Base UI part. The popup is Popover on a wide viewport and Drawer
@@ -12638,7 +12868,7 @@ textarea.FieldControl {
   flex-basis: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Money field
  *
  * An amount of money, built on Number field. The value is an integer in minor units
@@ -12983,7 +13213,7 @@ textarea.FieldControl {
   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 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* ListDetail
  *
  * The detail of one item, next to its list. Not a Base UI part. It is a Splitter
@@ -13110,7 +13340,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Splitter
  *
  * Two or more panels and a handle between them. Not a Base UI part. It follows the
@@ -13318,7 +13548,7 @@ textarea.FieldControl {
   background: var(--sl-border-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* EmptyState
  *
  * The block a page, pane, table, list or popup shows when it has nothing to show.
@@ -13574,7 +13804,7 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -13587,6 +13817,13 @@ textarea.FieldControl {
  * `<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.
+ *
+ * Totals: tr data-total="subtotal" draws a single rule above the row, and data-total="grand"
+ * a rule above and a double rule under, as on a working paper (table.total-*). They work in
+ * tbody or tfoot. A tfoot row without data-total keeps the header tray band.
+ *
+ * The working-paper rule (rule.width, 0 by default) replaces the table's top border with a
+ * heavier line in rule.color, drawn on the first row's cells so it stays with a sticky header.
  */
 
 .Table {
@@ -13605,6 +13842,15 @@ textarea.FieldControl {
   border-radius: var(--sl-table-radius);
   overflow: hidden;
   font-variant-numeric: tabular-nums;
+  /* The top border steps aside while the working-paper rule is on (any rule.width above 0). */
+  border-top-width: max(0px, var(--sl-stroke-default) - var(--sl-rule-width) * 1000);
+}
+
+/* The working-paper rule, on the first row: the header, or the body when there is none.
+   At rule.width 0 this is no border at all. */
+.Table > thead > tr:first-child > *,
+.Table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > * {
+  border-top: var(--sl-rule-width) solid var(--sl-rule-color);
 }
 
 .Table caption {
@@ -13716,6 +13962,52 @@ textarea.FieldControl {
   border-bottom: none;
 }
 
+/* Subtotal and grand total rows: rules instead of a band, in the subtitle weight.
+   Hover and selection don't apply: a total is not a record. */
+.Table tr[data-total] > * {
+  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-total-background);
+  color: var(--sl-table-color);
+  border-top: var(--sl-table-subtotal-rule-width) solid var(--sl-table-total-rule-color);
+}
+
+.Table tbody tr[data-total] > * {
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+.Table tbody tr[data-total]:last-child:not([data-total='grand']) > * {
+  border-bottom: none;
+}
+
+/* The grand total: a double rule under the figures. */
+.Table :is(tbody, tfoot) tr[data-total='grand'] > * {
+  border-bottom: var(--sl-table-grand-total-rule-width) double var(--sl-table-total-rule-color);
+}
+
+/* A label or blank cell in a total row can leave the rules off, so they only run under the
+   figures: data-rule="none" on the cell. */
+.Table :is(tbody, tfoot) tr[data-total] > [data-rule='none'] {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+
+/* In the footer the body's last row has no line under it, so those cells keep the footer's
+   usual line on top. */
+.Table tfoot tr[data-total] > [data-rule='none'] {
+  border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
+}
+
+@media (hover: hover) {
+  .Table tbody tr[data-total]:hover > * {
+    background: var(--sl-table-total-background);
+    color: var(--sl-table-color);
+  }
+}
+
 /* A header that stays put while the body scrolls (the table's wrapper scrolls) */
 .Table[data-sticky-header] thead th {
   position: sticky;
@@ -13746,7 +14038,7 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Collection
  *
  * DataTable, DataList, the toolbar and the pagination, in one place so the two views
@@ -13757,7 +14049,7 @@ textarea.FieldControl {
  * the tabs and the search where they are, so selecting rows does not grow the toolbar.
  */
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Collection toolbar
  *
  * The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
@@ -13898,7 +14190,7 @@ textarea.FieldControl {
   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 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* DataTable additions on top of .Table.
  *
  * Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
@@ -14019,12 +14311,15 @@ textarea.FieldControl {
   color: var(--sl-table-subtle-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* DataList
  *
  * The same rows as the table, in one container with the table's borders, hover, selected
  * 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.
+ *
+ * The working-paper rule (rule.width, 0 by default) replaces the top border with a heavier
+ * line in rule.color: on the first row, or on each card's top edge.
  */
 
 .DataList {
@@ -14043,6 +14338,13 @@ textarea.FieldControl {
   background: var(--sl-table-background);
   border: var(--sl-stroke-default) solid var(--sl-table-border-color);
   border-radius: var(--sl-table-radius);
+  /* The top border steps aside while the working-paper rule is on (any rule.width above 0). */
+  border-top-width: max(0px, var(--sl-stroke-default) - var(--sl-rule-width) * 1000);
+}
+
+/* The working-paper rule on the first row. At rule.width 0 this is no border at all. */
+.DataList ul > li:first-child {
+  border-top: var(--sl-rule-width) solid var(--sl-rule-color);
 }
 
 .DataList li {
@@ -14136,6 +14438,14 @@ textarea.FieldControl {
   background: var(--sl-table-background);
   border: var(--sl-stroke-default) solid var(--sl-table-border-color);
   border-radius: var(--sl-table-radius);
+  border-top-width: max(0px, var(--sl-stroke-default) - var(--sl-rule-width) * 1000);
+  box-shadow: inset 0 var(--sl-rule-width) 0 0 var(--sl-rule-color);
+}
+
+.DataList[data-variant='cards'] li[aria-current='true'] {
+  box-shadow:
+    inset var(--sl-stroke-strong) 0 0 0 var(--sl-border-accent),
+    inset 0 var(--sl-rule-width) 0 0 var(--sl-rule-color);
 }
 
 .DataList[data-loading] ul {
@@ -14143,7 +14453,7 @@ textarea.FieldControl {
   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 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Pagination
  *
  * Not tied to a collection. Anything with a page, a page count and a total can use it.
@@ -14168,7 +14478,7 @@ textarea.FieldControl {
   margin: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* EditableList
  *
  * One table at every width, so a field is not submitted twice. Under the stack width each
@@ -14266,3 +14576,351 @@ textarea.FieldControl {
     letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
   }
 }
+
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* Sheet
+ *
+ * A working-paper surface: the raised surface with a heavier rule across its top
+ * (sheet.rule-width in sheet.rule-color) instead of its top border, and an optional tab
+ * label that sits on the rule like the tab of a ledger page. The tab is caps-condense on
+ * the inverse surface. An action (an Edit link, a count) sits at the end of the header row.
+ * Tokens: sheet.* (tokens/component/sheet.json).
+ *
+ * Content runs edge to edge, so a Table, DataList or leader DescriptionList inside lines up
+ * with the sheet's sides; data-inset on SheetBody pads it by sheet.padding instead. A Table
+ * inside drops its own outer border and corners, since the sheet is its frame.
+ */
+
+.Sheet {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.SheetHeader {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--sl-sheet-header-gap);
+  min-height: var(--sl-sheet-tab-height);
+}
+
+.SheetTab {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  display: inline-flex;
+  align-items: center;
+  height: var(--sl-sheet-tab-height);
+  padding-inline: var(--sl-sheet-tab-padding-inline);
+  background: var(--sl-sheet-tab-background);
+  color: var(--sl-sheet-tab-color);
+  border-radius: var(--sl-sheet-tab-radius) var(--sl-sheet-tab-radius) 0 0;
+  white-space: nowrap;
+}
+
+.SheetAction {
+  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);
+  margin-inline-start: auto;
+  padding-block-end: var(--sl-space-1);
+}
+
+.SheetBody {
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+  background: var(--sl-sheet-background);
+  border: var(--sl-sheet-border-width) solid var(--sl-sheet-border-color);
+  border-top: var(--sl-sheet-rule-width) solid var(--sl-sheet-rule-color);
+  border-radius: var(--sl-sheet-radius);
+  /* Rows inside keep to the rounded corners. clip, not hidden, so a sticky header still sticks. */
+  overflow: clip;
+}
+
+/* Under a tab the top corners stay square, so the tab sits flush on the rule. */
+.Sheet[data-tab] > .SheetBody {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.SheetBody[data-inset] {
+  padding: var(--sl-sheet-padding);
+}
+
+/* The sheet is the frame: a table or list inside drops its own outer edge. */
+.SheetBody > .Table,
+.SheetBody > .CollectionView .Table,
+.SheetBody > .DataList ul {
+  border: 0;
+  border-radius: 0;
+}
+
+.SheetBody > .Table > thead > tr:first-child > *,
+.SheetBody > .Table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > *,
+.SheetBody > .DataList ul > li:first-child {
+  border-top: 0;
+}
+
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* StatFigure
+ *
+ * One large figure with a caps label above and a caption under it. The label is
+ * caps-condense, the figure uses the figures text family (mono, tabular numbers) at
+ * stat-figure.figure-font-size, the caption is body-condense. data-underline="double"
+ * draws a double rule under the figure only, the accountant's mark for a final total;
+ * data-tone="accent" colors the figure; data-size="sm" makes it smaller for a row of figures.
+ * Tokens: stat-figure.* (tokens/component/stat-figure.json).
+ */
+
+.StatFigure {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sl-stat-figure-gap);
+  min-width: 0;
+}
+
+.StatFigureLabel {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  color: var(--sl-stat-figure-label-color);
+}
+
+.StatFigureValue {
+  font-family: var(--sl-font-figures-base-font-family);
+  font-variant-numeric: var(--sl-font-figures-base-font-variant-numeric);
+  font-size: var(--sl-stat-figure-figure-font-size);
+  font-weight: var(--sl-stat-figure-figure-font-weight);
+  line-height: var(--sl-stat-figure-figure-line-height);
+  color: var(--sl-stat-figure-figure-color);
+  white-space: nowrap;
+}
+
+.StatFigure[data-size='sm'] .StatFigureValue {
+  font-size: var(--sl-stat-figure-figure-font-size-sm);
+  line-height: var(--sl-stat-figure-figure-line-height-sm);
+}
+
+.StatFigure[data-tone='accent'] .StatFigureValue {
+  color: var(--sl-stat-figure-figure-color-accent);
+}
+
+.StatFigure[data-underline='double'] .StatFigureValue {
+  border-bottom: var(--sl-stat-figure-underline-width) double var(--sl-stat-figure-underline-color);
+}
+
+.StatFigureCaption {
+  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-stat-figure-caption-color);
+}
+
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* DescriptionList
+ *
+ * Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
+ * per pair, with a hairline between pairs. The default variant sets labels in a column
+ * beside their values. data-variant="leader" runs a dotted leader from each label to its
+ * value, which sits at the end of the row, as on a working paper. Labels are body text
+ * in the secondary color, values primary text with tabular numbers.
+ * Tokens: description-list.* (tokens/component/description-list.json).
+ */
+
+.DescriptionList {
+  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;
+  padding: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.DescriptionItem {
+  display: grid;
+  grid-template-columns: var(--sl-description-list-label-width) 2fr;
+  align-items: baseline;
+  column-gap: var(--sl-description-list-column-gap);
+  padding-block: var(--sl-description-list-row-padding-block);
+  padding-inline: var(--sl-description-list-row-padding-inline);
+  border-bottom: var(--sl-stroke-default) solid var(--sl-description-list-row-border-color);
+}
+
+.DescriptionItem:last-child {
+  border-bottom: none;
+}
+
+.DescriptionTerm {
+  margin: 0;
+  color: var(--sl-description-list-label-color);
+}
+
+.DescriptionDetails {
+  margin: 0;
+  min-width: 0;
+  color: var(--sl-description-list-value-color);
+  overflow-wrap: anywhere;
+}
+
+/* Leader: the label grows to fill the row, and its ::after is the dotted line that leads
+   to the value. The line sits on the text's baseline. */
+.DescriptionList[data-variant='leader'] .DescriptionItem {
+  display: flex;
+  column-gap: var(--sl-description-list-leader-gap);
+}
+
+.DescriptionList[data-variant='leader'] .DescriptionTerm {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: baseline;
+  gap: var(--sl-description-list-leader-gap);
+  min-width: 0;
+}
+
+.DescriptionList[data-variant='leader'] .DescriptionTerm::after {
+  content: '';
+  flex: 1 1 var(--sl-space-6);
+  min-width: var(--sl-space-6);
+  border-bottom: var(--sl-description-list-leader-width) dotted var(--sl-description-list-leader-color);
+}
+
+.DescriptionList[data-variant='leader'] .DescriptionDetails {
+  flex: 0 1 auto;
+  max-width: 60%;
+  text-align: end;
+}
+
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* AppBar
+ *
+ * The bar across the top of an app window, one row on a line in the rule color. The line is
+ * app-bar.border-width while rule.width is 0, and the thicker of the two once a brand turns the
+ * rule on, so an ink-rule brand gets the working-paper rule under its app bar.
+ * AppBarSpacer pushes what follows it to the end. A vertical Separator inside is a short
+ * divider between groups of icon actions. Tokens: app-bar.* (tokens/component/app-bar.json).
+ */
+
+.AppBar {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--sl-app-bar-gap);
+  min-height: var(--sl-app-bar-height);
+  padding-inline: var(--sl-app-bar-padding-inline);
+  padding-block: var(--sl-space-2);
+  background: var(--sl-app-bar-background);
+  border-bottom: max(var(--sl-app-bar-border-width), var(--sl-rule-width)) solid var(--sl-app-bar-border-color);
+  min-width: 0;
+}
+
+.AppBarSpacer {
+  flex: 1 1 var(--sl-space-4);
+  min-width: 0;
+}
+
+.AppBar .Separator[data-orientation='vertical'] {
+  height: var(--sl-app-bar-divider-height);
+  margin-inline: var(--sl-space-1);
+  background: var(--sl-app-bar-divider-color);
+}
+
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* PickerButton
+ *
+ * A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
+ * look and states of a Select trigger; the label is caps-condense in picker-button.label-color,
+ * the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while
+ * its popup is open. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
+ */
+
+.PickerButton {
+  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: inline-flex;
+  align-items: center;
+  gap: var(--sl-gap-control);
+  max-width: var(--sl-picker-button-max-width);
+  min-width: 0;
+  height: var(--sl-control-height-md);
+  margin: 0;
+  padding-block: var(--sl-control-padding-block);
+  padding-inline: var(--sl-control-padding-inline);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.PickerButton:hover:not(:disabled) {
+  border-color: var(--sl-field-border-color-hover);
+}
+
+.PickerButton:focus-visible {
+  border-color: var(--sl-field-border-color-focus);
+  box-shadow: var(--sl-field-shadow-focus);
+}
+
+.PickerButton:disabled {
+  background: var(--sl-field-background-disabled);
+  color: var(--sl-field-color-disabled);
+  cursor: not-allowed;
+}
+
+.PickerButtonLabel {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  flex: none;
+  color: var(--sl-picker-button-label-color);
+}
+
+.PickerButtonValue {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--sl-field-color);
+}
+
+.PickerButtonValue[data-placeholder] {
+  color: var(--sl-field-placeholder-color);
+}
+
+.PickerButtonIcon {
+  flex: none;
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  color: var(--sl-text-tertiary);
+  transition: transform var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.PickerButton[aria-expanded='true'] .PickerButtonIcon,
+.PickerButton[data-popup-open] .PickerButtonIcon {
+  transform: rotate(180deg);
+}