@scattered-light/loomiere-mojave 0.7.0 → 0.8.0

package/dist/tokens.css

@@ -92,6 +92,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. */
@@ -762,8 +763,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) */
@@ -778,6 +783,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. */
@@ -1442,7 +1448,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. */
@@ -1547,6 +1552,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. */
@@ -1582,11 +1588,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. */
@@ -1617,6 +1633,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. */
@@ -1657,6 +1678,111 @@
     --sl-font-link-minimize-font-weight: var(--sl-font-weight-normal); /** font-weight of font.link-minimize. */
     --sl-font-link-minimize-line-height: var(--sl-line-height-xs); /** line-height of font.link-minimize. */
     --sl-font-link-minimize-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.link-minimize. */
+    --sl-a11y-focus-ring-radius: var(--sl-radius-focus); /** Rounds the focus ring to match the small control radius. */
+    --sl-bar-radius: var(--sl-radius-surface); /** Strip corners. Controls inside a toggle group take radius.item, so the inner corners follow the outer ones. */
+    --sl-calendar-day-radius: var(--sl-radius-pill); /** Selected days are circles. The pill radius is the same full radius badges and switches use. */
+    --sl-check-border-width: var(--sl-stroke-default); /** Edge thickness. */
+    --sl-check-radius: var(--sl-radius-box); /** Checkbox corners. Radios are always round. */
+    --sl-check-transition: var(--sl-transition-input); /** Changes at the same speed as a field. */
+    --sl-status-error: var(--sl-scope-error-signal); /** Errors and destructive actions. */
+    --sl-status-error-dark: var(--sl-scope-error-fg); /** Error color for text or icons that need more contrast than the base color. */
+    --sl-status-error-light: var(--sl-scope-error-soft); /** Error tint for backgrounds behind error messages. */
+    --sl-status-info: var(--sl-scope-info-signal); /** Neutral notices and help. */
+    --sl-status-info-dark: var(--sl-scope-info-fg); /** Info color for text or icons that need more contrast. */
+    --sl-status-info-light: var(--sl-scope-info-soft); /** Info tint for notice backgrounds. */
+    --sl-status-success: var(--sl-scope-success-signal); /** Confirmations and completed states. */
+    --sl-status-success-dark: var(--sl-scope-success-fg); /** Success color for text or icons that need more contrast. */
+    --sl-status-success-light: var(--sl-scope-success-soft); /** Success tint for confirmation backgrounds. */
+    --sl-status-warning: var(--sl-scope-warning-signal); /** Warnings, and the required-field marker. */
+    --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. */
+    --sl-field-transition: var(--sl-transition-input); /** Border and halo ease in, never snap. */
+    --sl-gauge-radius: var(--sl-radius-pill); /** Round ends on the track and the fill. */
+    --sl-icon-button-radius: var(--sl-radius-item); /** Rounded like a menu item, since its hover fill reads as a highlighted item. */
+    --sl-icon-button-transition: var(--sl-transition-button); /** Responds as fast as a button. */
+    --sl-item-radius: var(--sl-radius-item); /** Row corners inside the popup. */
+    --sl-modal-border-width: var(--sl-stroke-default); /** Modal edge thickness. */
+    --sl-modal-radius: var(--sl-radius-modal); /** The largest radius, so a modal reads as its own layer. A drawer rounds only the edge facing the page. */
+    --sl-modal-shadow: var(--sl-elevation-xl); /** The deepest shadow, because a modal sits above everything but popups and toasts. */
+    --sl-modal-backdrop: color-mix(in srgb, var(--sl-overlay-base) 50%, transparent); /** Scrim that dims the page behind a modal. */
+    --sl-popup-border-width: var(--sl-stroke-default); /** Popup edge thickness. */
+    --sl-popup-radius: var(--sl-radius-surface); /** Corners of a free-floating popup. */
+    --sl-popup-radius-field: var(--sl-radius-control); /** Corners of a list that drops from a field, matching the field so the two read as one control. */
+    --sl-popup-shadow: var(--sl-elevation-lg); /** Lifts the popup above the page. */
+    --sl-popup-empty-padding-block: var(--sl-empty-padding-block-compact); /** Room around a plain 'No results' line. The same padding as a compact empty state, so a sentence and an EmptyState in that slot take the same space. An EmptyState drops this padding and uses its own. */
+    --sl-table-row-height: var(--sl-control-height-sm); /** Row height: the small control height, so a checkbox, input or button in a cell fits without growing the row. */
+    --sl-table-header-height: var(--sl-control-height-md); /** Header row height: the regular control height, a little taller than rows so the header reads as its own band. */
+    --sl-table-cell-padding-inline: var(--sl-control-padding-inline-sm); /** Space either side of cell text, matching small controls. */
+    --sl-table-radius: var(--sl-radius-surface); /** Grid corners, like any card or panel. */
+    --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-focus-shadow-3px-error: 0 0 0 3px var(--sl-status-error); /** Focus halo for a field with an error. */
+    --sl-calendar-day-color: var(--sl-text-primary); /** A day in the month being shown. */
+    --sl-border-accent: var(--sl-scope-accent-border); /** Borders that signal selection or the active item. */
+    --sl-border-default: var(--sl-scope-chrome-divider); /** Everyday dividers and control outlines. Darkens under prefers-contrast: more. */
+    --sl-border-strong: var(--sl-scope-chrome-border-strong); /** Borders that identify a control, such as inputs and unchecked checkboxes. 3:1 against the canvas, as WCAG asks for control boundaries. */
+    --sl-border-subtle: var(--sl-scope-chrome-border-subtle); /** Hairlines inside a surface (table rows, list separators) that should barely register. */
+    --sl-border-control: var(--sl-scope-chrome-border); /** Edge of a small control (checkbox, radio, switch) that must be found before it is filled. */
+    --sl-border-control-hover: var(--sl-scope-chrome-border-hover); /** Control edge under the pointer: one clear step darker than border.control. */
+    --sl-interactive-active: var(--sl-scope-accent-solid-active); /** Pressed state of the main accent. Darker than hover so the press is felt. */
+    --sl-interactive-default: var(--sl-scope-accent-solid); /** Primary accent for buttons, links and selected states. Step 600 is 6.1:1 on paper; step 400 is 5.6:1 on the dark canvas. */
+    --sl-interactive-disabled: var(--sl-scope-chrome-soft-active); /** Fill for disabled accent controls. Low contrast on purpose, but never invisible. */
+    --sl-interactive-hover: var(--sl-scope-accent-solid-hover); /** Hover state of the main accent. One step away from default in the direction of more contrast. */
+    --sl-interactive-tint: var(--sl-scope-accent-soft); /** Faint accent wash behind a ghost or outline control on hover, or a selected row. */
+    --sl-interactive-tint-hover: var(--sl-scope-accent-soft-hover); /** Accent wash for a highlighted menu item or a pressed toggle. */
+    --sl-interactive-tint-active: var(--sl-scope-accent-soft-active); /** Accent wash for a selected or pressed item: one step past tint-hover. */
+    --sl-interactive-tint-strong: var(--sl-scope-accent-soft-strong); /** Strongest accent wash, for hovering an item that is already pressed. */
+    --sl-surface-canvas: var(--sl-scope-chrome-canvas); /** The page itself. Paper in light mode, the darkest neutral in dark mode. */
+    --sl-surface-overlay: var(--sl-scope-chrome-overlay); /** Popups, menus and code blocks that sit above raised surfaces. */
+    --sl-surface-raised: var(--sl-scope-chrome-raised); /** Cards and panels one level above the canvas. */
+    --sl-surface-modal: var(--sl-scope-chrome-modal); /** Dialogs and drawers. Paper in light mode; in dark mode one step lighter than the page, so a modal lifts off the dimmed page under it. */
+    --sl-surface-tray: var(--sl-scope-chrome-tray); /** The strip behind a row of controls (toolbars, toggle groups). A step off the page in both themes, so the controls sitting on it stand out, while secondary and accent text on it still pass AA. */
+    --sl-surface-inverse: var(--sl-scope-chrome-inverse); /** Dark-on-light flip for small floating things such as tooltips. Inside a brand pair it becomes the pair's text color. */
+    --sl-text-accent: var(--sl-scope-accent-fg); /** Accent text such as active tabs. One step darker than the interactive color so it stays AA as text. */
+    --sl-text-disabled: var(--sl-scope-chrome-fg-disabled); /** Text in disabled controls. Deliberately below AA, which WCAG allows for disabled UI. */
+    --sl-text-secondary: var(--sl-scope-chrome-fg-secondary); /** Supporting text such as descriptions and helper copy. Over 7:1 on every surface, and darker still under prefers-contrast: more. */
+    --sl-text-tertiary: var(--sl-scope-chrome-fg-tertiary); /** Placeholders, captions and metadata. The lightest text that still passes AA (4.5:1) on every surface. */
+    --sl-text-on-tint: var(--sl-scope-accent-on-soft); /** Text on an accent wash (interactive.tint*). Stays in the accent family. */
+    --sl-text-on-tint-strong: var(--sl-scope-accent-ink); /** Text on the selected accent wash, a step darker than on-tint. */
+    --sl-fill-subtle: var(--sl-scope-chrome-soft); /** Lightest fill: hovered rows, chips, empty tracks. */
+    --sl-fill-default: var(--sl-scope-chrome-soft-hover); /** Standard fill: slider and switch tracks, pressed rows. */
+    --sl-fill-strong: var(--sl-scope-chrome-soft-active); /** Heaviest fill: scroll thumbs, slider marks, hovered tracks. */
+    --sl-fill-inverse: var(--sl-scope-chrome-solid); /** A small solid chip in the chrome color that flips with the theme: dark on light pages, light on dark ones. Keyboard keys use it. */
+    --sl-fill-stronger: var(--sl-scope-chrome-soft-strong); /** One step past fill.strong, for the hover state of a strong fill such as a scrollbar thumb. */
+    --sl-fill-track: var(--sl-scope-chrome-track); /** The empty part of a meter or progress bar. Light like fill.subtle in light mode; near the page in dark mode, so any palette's fill reads 3:1 against it. */
+    --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-font-subtitle-minimize-font-family: var(--sl-font-family-body); /** font-family of font.subtitle-minimize. */
     --sl-font-subtitle-minimize-font-size: var(--sl-font-size-xs); /** font-size of font.subtitle-minimize. */
     --sl-font-subtitle-minimize-font-weight: var(--sl-font-weight-bold); /** font-weight of font.subtitle-minimize. */
@@ -1850,9 +1976,14 @@
     --sl-collection-list-row-padding-block: var(--sl-space-3); /** Vertical padding of a list row. The row is not a fixed height, because a second line and an extra slot have to fit. */
     --sl-collection-list-row-gap: var(--sl-space-2); /** Between the checkbox, the text, the amount and the actions in a list row. */
     --sl-collection-toolbar-gap: var(--sl-space-2); /** Between the search, the filters and the actions. */
+    --sl-collection-search-min-width: var(--sl-space-60); /** The narrowest the toolbar search gets beside the filters and actions. Under it, the search wraps to its own line, so a few words of a query still show. */
     --sl-collection-narrow-width: var(--sl-space-96); /** Below this, a table with narrow="list" becomes a list, and the toolbar's search takes the full width. A 360px pane is under it. */
     --sl-collection-editable-list-stack-width: var(--sl-space-80); /** Below this, editable rows stack and show their own labels. 320px matches. */
     --sl-collection-selection-column-width: var(--sl-space-10); /** The checkbox column. Wide enough for the control, no wider, so the data keeps the room. */
+    --sl-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. */
@@ -1860,9 +1991,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. */
@@ -1893,73 +2037,12 @@
     --sl-color-chrome-on-1000: var(--sl-color-neutral-on-1000);
     --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. */
-    --sl-check-radius: var(--sl-radius-box); /** Checkbox corners. Radios are always round. */
-    --sl-check-transition: var(--sl-transition-input); /** Changes at the same speed as a field. */
-    --sl-status-error: var(--sl-scope-error-signal); /** Errors and destructive actions. */
-    --sl-status-error-dark: var(--sl-scope-error-fg); /** Error color for text or icons that need more contrast than the base color. */
-    --sl-status-error-light: var(--sl-scope-error-soft); /** Error tint for backgrounds behind error messages. */
-    --sl-status-info: var(--sl-scope-info-signal); /** Neutral notices and help. */
-    --sl-status-info-dark: var(--sl-scope-info-fg); /** Info color for text or icons that need more contrast. */
-    --sl-status-info-light: var(--sl-scope-info-soft); /** Info tint for notice backgrounds. */
-    --sl-status-success: var(--sl-scope-success-signal); /** Confirmations and completed states. */
-    --sl-status-success-dark: var(--sl-scope-success-fg); /** Success color for text or icons that need more contrast. */
-    --sl-status-success-light: var(--sl-scope-success-soft); /** Success tint for confirmation backgrounds. */
-    --sl-status-warning: var(--sl-scope-warning-signal); /** Warnings, and the required-field marker. */
-    --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-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. */
-    --sl-field-transition: var(--sl-transition-input); /** Border and halo ease in, never snap. */
-    --sl-gauge-radius: var(--sl-radius-pill); /** Round ends on the track and the fill. */
-    --sl-icon-button-radius: var(--sl-radius-item); /** Rounded like a menu item, since its hover fill reads as a highlighted item. */
-    --sl-icon-button-transition: var(--sl-transition-button); /** Responds as fast as a button. */
-    --sl-item-radius: var(--sl-radius-item); /** Row corners inside the popup. */
-    --sl-modal-border-width: var(--sl-stroke-default); /** Modal edge thickness. */
-    --sl-modal-radius: var(--sl-radius-modal); /** The largest radius, so a modal reads as its own layer. A drawer rounds only the edge facing the page. */
-    --sl-modal-shadow: var(--sl-elevation-xl); /** The deepest shadow, because a modal sits above everything but popups and toasts. */
-    --sl-modal-backdrop: color-mix(in srgb, var(--sl-overlay-base) 50%, transparent); /** Scrim that dims the page behind a modal. */
-    --sl-popup-border-width: var(--sl-stroke-default); /** Popup edge thickness. */
-    --sl-popup-radius: var(--sl-radius-surface); /** Corners of a free-floating popup. */
-    --sl-popup-radius-field: var(--sl-radius-control); /** Corners of a list that drops from a field, matching the field so the two read as one control. */
-    --sl-popup-shadow: var(--sl-elevation-lg); /** Lifts the popup above the page. */
-    --sl-popup-empty-padding-block: var(--sl-empty-padding-block-compact); /** Room around a plain 'No results' line. The same padding as a compact empty state, so a sentence and an EmptyState in that slot take the same space. An EmptyState drops this padding and uses its own. */
-    --sl-table-row-height: var(--sl-control-height-sm); /** Row height: the small control height, so a checkbox, input or button in a cell fits without growing the row. */
-    --sl-table-header-height: var(--sl-control-height-md); /** Header row height: the regular control height, a little taller than rows so the header reads as its own band. */
-    --sl-table-cell-padding-inline: var(--sl-control-padding-inline-sm); /** Space either side of cell text, matching small controls. */
-    --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-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. */
@@ -2117,44 +2200,10 @@
     --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. */
-    --sl-border-accent: var(--sl-scope-accent-border); /** Borders that signal selection or the active item. */
-    --sl-border-default: var(--sl-scope-chrome-divider); /** Everyday dividers and control outlines. Darkens under prefers-contrast: more. */
-    --sl-border-strong: var(--sl-scope-chrome-border-strong); /** Borders that identify a control, such as inputs and unchecked checkboxes. 3:1 against the canvas, as WCAG asks for control boundaries. */
-    --sl-border-subtle: var(--sl-scope-chrome-border-subtle); /** Hairlines inside a surface (table rows, list separators) that should barely register. */
-    --sl-border-control: var(--sl-scope-chrome-border); /** Edge of a small control (checkbox, radio, switch) that must be found before it is filled. */
-    --sl-border-control-hover: var(--sl-scope-chrome-border-hover); /** Control edge under the pointer: one clear step darker than border.control. */
-    --sl-interactive-active: var(--sl-scope-accent-solid-active); /** Pressed state of the main accent. Darker than hover so the press is felt. */
-    --sl-interactive-default: var(--sl-scope-accent-solid); /** Primary accent for buttons, links and selected states. Step 600 is 6.1:1 on paper; step 400 is 5.6:1 on the dark canvas. */
-    --sl-interactive-disabled: var(--sl-scope-chrome-soft-active); /** Fill for disabled accent controls. Low contrast on purpose, but never invisible. */
-    --sl-interactive-hover: var(--sl-scope-accent-solid-hover); /** Hover state of the main accent. One step away from default in the direction of more contrast. */
-    --sl-interactive-tint: var(--sl-scope-accent-soft); /** Faint accent wash behind a ghost or outline control on hover, or a selected row. */
-    --sl-interactive-tint-hover: var(--sl-scope-accent-soft-hover); /** Accent wash for a highlighted menu item or a pressed toggle. */
-    --sl-interactive-tint-active: var(--sl-scope-accent-soft-active); /** Accent wash for a selected or pressed item: one step past tint-hover. */
-    --sl-interactive-tint-strong: var(--sl-scope-accent-soft-strong); /** Strongest accent wash, for hovering an item that is already pressed. */
-    --sl-surface-canvas: var(--sl-scope-chrome-canvas); /** The page itself. Paper in light mode, the darkest neutral in dark mode. */
-    --sl-surface-overlay: var(--sl-scope-chrome-overlay); /** Popups, menus and code blocks that sit above raised surfaces. */
-    --sl-surface-raised: var(--sl-scope-chrome-raised); /** Cards and panels one level above the canvas. */
-    --sl-surface-modal: var(--sl-scope-chrome-modal); /** Dialogs and drawers. Paper in light mode; in dark mode one step lighter than the page, so a modal lifts off the dimmed page under it. */
-    --sl-surface-tray: var(--sl-scope-chrome-tray); /** The strip behind a row of controls (toolbars, toggle groups). A step off the page in both themes, so the controls sitting on it stand out, while secondary and accent text on it still pass AA. */
-    --sl-surface-inverse: var(--sl-scope-chrome-inverse); /** Dark-on-light flip for small floating things such as tooltips. Inside a brand pair it becomes the pair's text color. */
-    --sl-text-accent: var(--sl-scope-accent-fg); /** Accent text such as active tabs. One step darker than the interactive color so it stays AA as text. */
-    --sl-text-disabled: var(--sl-scope-chrome-fg-disabled); /** Text in disabled controls. Deliberately below AA, which WCAG allows for disabled UI. */
-    --sl-text-secondary: var(--sl-scope-chrome-fg-secondary); /** Supporting text such as descriptions and helper copy. Over 7:1 on every surface, and darker still under prefers-contrast: more. */
-    --sl-text-tertiary: var(--sl-scope-chrome-fg-tertiary); /** Placeholders, captions and metadata. The lightest text that still passes AA (4.5:1) on every surface. */
-    --sl-text-on-tint: var(--sl-scope-accent-on-soft); /** Text on an accent wash (interactive.tint*). Stays in the accent family. */
-    --sl-text-on-tint-strong: var(--sl-scope-accent-ink); /** Text on the selected accent wash, a step darker than on-tint. */
-    --sl-fill-subtle: var(--sl-scope-chrome-soft); /** Lightest fill: hovered rows, chips, empty tracks. */
-    --sl-fill-default: var(--sl-scope-chrome-soft-hover); /** Standard fill: slider and switch tracks, pressed rows. */
-    --sl-fill-strong: var(--sl-scope-chrome-soft-active); /** Heaviest fill: scroll thumbs, slider marks, hovered tracks. */
-    --sl-fill-inverse: var(--sl-scope-chrome-solid); /** A small solid chip in the chrome color that flips with the theme: dark on light pages, light on dark ones. Keyboard keys use it. */
-    --sl-fill-stronger: var(--sl-scope-chrome-soft-strong); /** One step past fill.strong, for the hover state of a strong fill such as a scrollbar thumb. */
-    --sl-fill-track: var(--sl-scope-chrome-track); /** The empty part of a meter or progress bar. Light like fill.subtle in light mode; near the page in dark mode, so any palette's fill reads 3:1 against it. */
-    --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-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. */
@@ -2212,7 +2261,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. */
@@ -2284,6 +2334,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. */
@@ -2296,7 +2347,16 @@
     --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-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-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-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. */
@@ -2312,6 +2372,11 @@
     --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-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-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. */
   }
@@ -5777,6 +5842,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);
@@ -5792,7 +5858,23 @@
     --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-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-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-calendar-day-background-hover: var(--sl-item-background-hover);
     --sl-check-background: var(--sl-field-background);
   }
@@ -5923,6 +6005,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);
@@ -5938,7 +6021,23 @@
     --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-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-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-calendar-day-background-hover: var(--sl-item-background-hover);
     --sl-check-background: var(--sl-field-background);
   }
@@ -6069,6 +6168,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);
@@ -6084,7 +6184,23 @@
     --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-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-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-calendar-day-background-hover: var(--sl-item-background-hover);
     --sl-check-background: var(--sl-field-background);
   }