@scattered-light/loomiere-mojave 0.15.5 → 0.16.0

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

@@ -1456,12 +1456,9 @@
     --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. */
-    --sl-bar-padding: var(--sl-space-1); /** Space between the strip's edge and its controls, small so the controls nearly fill it. */
     --sl-bar-gap: var(--sl-space-1); /** Space between controls in one group. */
-    --sl-bar-group-gap: var(--sl-space-2); /** Space between groups in a toolbar, wider than inside a group. */
     --sl-bar-separator-length: var(--sl-space-6); /** Divider height, shorter than the controls so the groups still read as one strip. */
     --sl-bar-separator-spacing: var(--sl-space-1); /** Extra space either side of a divider. */
-    --sl-calendar-day-size: var(--sl-space-10); /** A day cell on a pointer. space.10 keeps seven columns inside a phone; touch layouts raise the cell to the minimum touch target in CSS. */
     --sl-calendar-grid-gap: var(--sl-space-0-5); /** Space between week rows. Days in a week share an edge, so the range band reads as one shape. */
     --sl-calendar-month-gap: var(--sl-space-4); /** Space between months shown side by side, the same step as panel padding so the two columns line up. */
     --sl-calendar-header-gap: var(--sl-space-2); /** Space between the month title and the weekday row. */
@@ -1916,6 +1913,10 @@
     --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-card-rule-width: var(--sl-stroke-medium); /** The rule across the top of the card, as on a sheet. */
+    --sl-stat-card-header-padding-block: var(--sl-space-3); /** Space above and below the name and caption. */
+    --sl-stat-card-padding-inline: var(--sl-space-4); /** Space either side of the name, the figures and the footer. */
+    --sl-stat-card-facts-padding-block: var(--sl-space-2-5); /** Space above and below each figure. */
     --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. */
@@ -1954,8 +1955,8 @@
     --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. */
@@ -2188,8 +2189,9 @@
     --sl-side-nav-item-height: var(--sl-control-height-md); /** Least height of a row: the regular control height, so a row is as tall as a button. */
     --sl-side-nav-toggle-radius: var(--sl-radius-control); /** The collapse handle's corners. */
     --sl-splitter-handle-size: var(--sl-stroke-default); /** The visible separator. One stroke, the same hairline as Separator, so a splitter reads as a divider you can grab. */
+    --sl-stat-card-border-width: var(--sl-stroke-default); /** Thickness of the sides and bottom. */
+    --sl-stat-card-radius: var(--sl-radius-surface); /** Corners, like any card or panel. */
     --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. */
@@ -2204,6 +2206,13 @@
     --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-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-padding: var(--sl-space-1); /** Space between the strip's edge and its controls, small so the controls nearly fill it. */
+    --sl-bar-group-gap: var(--sl-space-2); /** Space between groups in a toolbar, wider than inside a group. */
+    --sl-calendar-day-size: var(--sl-space-10); /** A day cell on a pointer. space.10 keeps seven columns inside a phone; touch layouts raise the cell to the minimum touch target in CSS. */
+    --sl-calendar-day-radius: var(--sl-radius-pill); /** Selected days are circles. The pill radius is the same full radius badges and switches use. */
+    --sl-calendar-day-color: var(--sl-text-primary); /** A day in the month being shown. */
     --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. */
@@ -2225,9 +2234,6 @@
     --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. */
@@ -2399,6 +2405,12 @@
     --sl-side-nav-count-color-quiet: var(--sl-text-secondary); /** A count that is only information (tone="quiet"), such as a total. */
     --sl-side-nav-group-label-color: var(--sl-text-secondary); /** A group heading's caps label. */
     --sl-side-nav-toggle-background: var(--sl-surface-raised); /** The collapse handle's fill. */
+    --sl-stat-card-background: var(--sl-surface-raised); /** The card's fill: the raised surface, like a sheet. */
+    --sl-stat-card-background-hover: var(--sl-fill-subtle); /** The fill under the pointer on a card that opens something. */
+    --sl-stat-card-border-color: var(--sl-border-default); /** The card's sides and bottom. */
+    --sl-stat-card-facts-divider-color: var(--sl-border-subtle); /** The hairline between figures. */
+    --sl-stat-card-caption-color: var(--sl-text-secondary); /** The caption under the name. */
+    --sl-stat-card-footer-border-color: var(--sl-border-subtle); /** The hairline above the footer. */
     --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. */
@@ -2427,6 +2439,7 @@
     --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-side-nav-indicator-color: var(--sl-rule-color); /** The current row's line: the working-paper rule color, so the nav and the sheets share one ink. */
+    --sl-stat-card-rule-color: var(--sl-rule-color); /** The top rule's color, and the rule above the figures. */
     --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. */
@@ -5952,6 +5965,13 @@
     --sl-side-nav-group-label-color: var(--sl-text-secondary);
     --sl-side-nav-toggle-background: var(--sl-surface-raised);
     --sl-side-nav-toggle-border-color: var(--sl-text-primary);
+    --sl-stat-card-background: var(--sl-surface-raised);
+    --sl-stat-card-background-hover: var(--sl-fill-subtle);
+    --sl-stat-card-border-color: var(--sl-border-default);
+    --sl-stat-card-rule-color: var(--sl-rule-color);
+    --sl-stat-card-facts-divider-color: var(--sl-border-subtle);
+    --sl-stat-card-caption-color: var(--sl-text-secondary);
+    --sl-stat-card-footer-border-color: var(--sl-border-subtle);
     --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);
@@ -6142,6 +6162,13 @@
     --sl-side-nav-group-label-color: var(--sl-text-secondary);
     --sl-side-nav-toggle-background: var(--sl-surface-raised);
     --sl-side-nav-toggle-border-color: var(--sl-text-primary);
+    --sl-stat-card-background: var(--sl-surface-raised);
+    --sl-stat-card-background-hover: var(--sl-fill-subtle);
+    --sl-stat-card-border-color: var(--sl-border-default);
+    --sl-stat-card-rule-color: var(--sl-rule-color);
+    --sl-stat-card-facts-divider-color: var(--sl-border-subtle);
+    --sl-stat-card-caption-color: var(--sl-text-secondary);
+    --sl-stat-card-footer-border-color: var(--sl-border-subtle);
     --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);
@@ -6332,6 +6359,13 @@
     --sl-side-nav-group-label-color: var(--sl-text-secondary);
     --sl-side-nav-toggle-background: var(--sl-surface-raised);
     --sl-side-nav-toggle-border-color: var(--sl-text-primary);
+    --sl-stat-card-background: var(--sl-surface-raised);
+    --sl-stat-card-background-hover: var(--sl-fill-subtle);
+    --sl-stat-card-border-color: var(--sl-border-default);
+    --sl-stat-card-rule-color: var(--sl-rule-color);
+    --sl-stat-card-facts-divider-color: var(--sl-border-subtle);
+    --sl-stat-card-caption-color: var(--sl-text-secondary);
+    --sl-stat-card-footer-border-color: var(--sl-border-subtle);
     --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);
@@ -6697,7 +6731,7 @@
 }
 
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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';
@@ -6707,7 +6741,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.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -7151,7 +7185,7 @@ hr {
 }
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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 */
@@ -7264,7 +7298,7 @@ main:focus {
 
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {
@@ -7332,7 +7366,7 @@ button,
 
 }
 /* Component styles */
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -7453,7 +7487,7 @@ button,
   overflow: hidden;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -7462,7 +7496,7 @@ button,
  * cancel quiet, and a destructive one bold with data-color="error".
  */
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -7664,7 +7698,7 @@ button,
    (reset-accessibility.css).
    ============================================ */
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -7772,7 +7806,7 @@ button,
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -7922,7 +7956,7 @@ button,
   font-size: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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.
@@ -8079,7 +8113,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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. */
@@ -8095,7 +8129,7 @@ button,
   pointer-events: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -8211,7 +8245,7 @@ button,
   background: var(--sl-surface-raised);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -8696,7 +8730,7 @@ button,
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -8865,7 +8899,7 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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):
@@ -9011,7 +9045,7 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -9144,7 +9178,7 @@ button,
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -9205,7 +9239,7 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -9247,7 +9281,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -9267,7 +9301,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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),
@@ -9305,6 +9339,16 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline);
 }
 
+/* Search fields draw their own clear button where they want one, so the browser's built-in
+   one must not show a second x. */
+.Input[type='search']::-webkit-search-cancel-button,
+.FieldControl[type='search']::-webkit-search-cancel-button,
+.AutocompleteInput[type='search']::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+
 .Input::placeholder,
 .FieldControl::placeholder,
 .NumberFieldInput::placeholder,
@@ -9404,7 +9448,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -9553,7 +9597,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -9746,7 +9790,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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:
@@ -9809,7 +9853,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -10229,7 +10273,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -10320,7 +10364,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -10383,7 +10427,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -10548,7 +10592,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -10665,7 +10709,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -10742,7 +10786,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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).
@@ -10894,7 +10938,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -10976,7 +11020,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -11261,7 +11305,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -11289,7 +11333,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -11455,7 +11499,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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,
@@ -11621,7 +11665,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -11757,7 +11801,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -11993,7 +12037,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -12105,7 +12149,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -12167,7 +12211,7 @@ textarea.FieldControl {
   outline-offset: var(--sl-focus-outline-offset-inset);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -12229,7 +12273,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -12290,7 +12334,7 @@ textarea.FieldControl {
 }
 
 /* Custom components: not Base UI parts. Built from existing concepts and tokens. */
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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.
@@ -12395,7 +12439,7 @@ textarea.FieldControl {
   height: var(--sl-badge-dot-base);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -12968,7 +13012,7 @@ textarea.FieldControl {
   flex-basis: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -13313,7 +13357,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -13440,7 +13484,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -13648,7 +13692,7 @@ textarea.FieldControl {
   background: var(--sl-border-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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.
@@ -13904,7 +13948,7 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -14181,7 +14225,7 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
 /* Collection
  *
  * DataTable, DataList, the toolbar and the pagination, in one place so the two views
@@ -14192,7 +14236,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.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -14358,7 +14402,7 @@ textarea.FieldControl {
   border-block-end: var(--sl-stroke-default) solid var(--sl-table-border-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -14557,7 +14601,7 @@ textarea.FieldControl {
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -14699,7 +14743,7 @@ textarea.FieldControl {
   transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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.
@@ -14724,7 +14768,7 @@ textarea.FieldControl {
   margin: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -14823,7 +14867,7 @@ textarea.FieldControl {
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
 /* Sheet
  *
  * A working-paper surface: the raised surface with a heavier rule across its top
@@ -14922,7 +14966,7 @@ textarea.FieldControl {
   border-top: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -14983,7 +15027,104 @@ textarea.FieldControl {
   color: var(--sl-stat-figure-caption-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
+/* StatCard
+ *
+ * A card for one thing a page lists: a name (the heading), a caption, and a row of StatFigures
+ * ruled off under them. With data-interactive the title is a link or a button and its ::after
+ * covers the card, so the whole card is the target and the title names it. The hover fill and
+ * the focus ring follow the card, not just the title.
+ * Tokens: stat-card.* (tokens/component/stat-card.json).
+ */
+
+.StatCard {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--sl-stat-card-background);
+  border: var(--sl-stat-card-border-width) solid var(--sl-stat-card-border-color);
+  border-top: var(--sl-stat-card-rule-width) solid var(--sl-stat-card-rule-color);
+  border-radius: var(--sl-stat-card-radius);
+}
+
+.StatCard[data-interactive]:hover {
+  background: var(--sl-stat-card-background-hover);
+}
+
+.StatCard[data-interactive]:has(.StatCardLink:focus-visible) {
+  outline: var(--sl-focus-outline);
+  outline-offset: 2px;
+}
+
+.StatCardHeader {
+  padding: var(--sl-stat-card-header-padding-block) var(--sl-stat-card-padding-inline);
+}
+
+.StatCardTitle {
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
+  margin: 0;
+}
+
+.StatCardCaption {
+  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);
+  margin: 0;
+  text-transform: uppercase;
+  color: var(--sl-stat-card-caption-color);
+}
+
+/* The title's control: bare text that stretches over the whole card. */
+.StatCardLink {
+  all: unset;
+  cursor: pointer;
+}
+
+.StatCardLink::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+
+.StatCardLink:focus-visible {
+  outline: none;
+}
+
+.StatCardFacts {
+  display: grid;
+  margin-top: auto;
+  border-top: var(--sl-stat-card-border-width) solid var(--sl-stat-card-rule-color);
+}
+
+.StatCardFacts > * {
+  padding: var(--sl-stat-card-facts-padding-block) var(--sl-stat-card-padding-inline);
+  border-inline-start: var(--sl-stat-card-border-width) solid var(--sl-stat-card-facts-divider-color);
+}
+
+.StatCardFacts > :first-child {
+  border-inline-start: 0;
+}
+
+.StatCardFooter {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  padding: var(--sl-stat-card-header-padding-block) var(--sl-stat-card-padding-inline);
+  border-top: var(--sl-stat-card-border-width) solid var(--sl-stat-card-footer-border-color);
+}
+
+/* @scattered-light/loomiere-base-ui 0.16.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)
@@ -15059,7 +15200,7 @@ textarea.FieldControl {
   text-align: end;
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -15093,7 +15234,7 @@ textarea.FieldControl {
   background: var(--sl-app-bar-divider-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.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
@@ -15193,7 +15334,7 @@ textarea.FieldControl {
   transform: rotate(180deg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
 /* PickerSplit
  *
  * A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts,
@@ -15291,7 +15432,7 @@ textarea.FieldControl {
   transform: rotate(180deg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.15.5 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
 /* SideNav
  *
  * The column of links down the side of a workspace. Rows are ruled apart with a hairline; the