@scattered-light/loomiere-base-ui 0.7.0 → 0.8.0

package/dist/design-system/components/styles.css

@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0');
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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';
@@ -9,7 +9,7 @@
 /* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
    frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -283,7 +283,7 @@ pre {
   background: var(--sl-content-pre-background);
   border: var(--sl-stroke-thin) solid var(--sl-content-pre-border);
   color: var(--sl-content-pre-text);
-  border-radius: var(--sl-space-2);
+  border-radius: var(--sl-content-pre-radius);
   overflow-x: auto;
   margin-block: var(--sl-space-6);
 }
@@ -453,7 +453,7 @@ hr {
 }
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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 */
@@ -566,7 +566,7 @@ main:focus {
 
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {
@@ -634,7 +634,7 @@ button,
 
 }
 /* Component styles */
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -755,7 +755,7 @@ button,
   overflow: hidden;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -764,7 +764,7 @@ button,
  * cancel quiet, and a destructive one bold with data-color="error".
  */
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -966,7 +966,7 @@ button,
    (reset-accessibility.css).
    ============================================ */
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -1074,7 +1074,7 @@ button,
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -1224,7 +1224,7 @@ button,
   font-size: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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.
@@ -1381,7 +1381,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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. */
@@ -1397,7 +1397,7 @@ button,
   pointer-events: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -1513,7 +1513,7 @@ button,
   background: var(--sl-surface-raised);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -1998,7 +1998,7 @@ button,
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -2167,7 +2167,7 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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):
@@ -2313,12 +2313,14 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
 /* Drawer - a panel that slides in from an edge and can be swiped away.
    The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
    drawer reads as a dialog's sibling; only its size and grab bar are its own
    (--sl-drawer-*). Base UI supplies the swipe through
-   --drawer-swipe-movement-x/y and data-swipe-direction on the popup. */
+   --drawer-swipe-movement-x/y and data-swipe-direction on the popup.
+   The working-paper rule (rule.width, 0 by default) replaces the top border with a heavier
+   line in rule.color. It is an inset shadow, so it stays put while the drawer scrolls. */
 
 .DrawerBackdrop {
   position: fixed;
@@ -2355,6 +2357,8 @@ button,
   overflow-y: auto;
   overscroll-behavior: contain;
   pointer-events: auto;
+  border-top-width: max(0px, var(--sl-modal-border-width) - var(--sl-rule-width) * 1000);
+  box-shadow: inset 0 var(--sl-rule-width) 0 0 var(--sl-rule-color), var(--sl-modal-shadow);
   transform: translate(var(--drawer-swipe-movement-x, 0px), var(--drawer-swipe-movement-y, 0px));
   transition: transform calc(var(--sl-modal-animation-duration) * var(--drawer-swipe-strength, 1)) var(--sl-modal-animation-easing);
 }
@@ -2385,6 +2389,8 @@ button,
   max-height: var(--sl-drawer-popup-max-size);
   border-top: 0;
   border-radius: 0 0 var(--sl-modal-radius) var(--sl-modal-radius);
+  /* Its top edge is the screen's, so no rule. */
+  box-shadow: var(--sl-modal-shadow);
 }
 
 .DrawerPopup[data-swipe-direction='right'] {
@@ -2440,7 +2446,7 @@ button,
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -2501,7 +2507,7 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -2543,7 +2549,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -2563,7 +2569,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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),
@@ -2700,7 +2706,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -2849,7 +2855,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -3042,7 +3048,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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:
@@ -3105,7 +3111,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -3525,7 +3531,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -3616,7 +3622,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -3679,7 +3685,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -3844,7 +3850,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -3961,7 +3967,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -4038,7 +4044,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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).
@@ -4190,7 +4196,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -4272,7 +4278,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -4557,7 +4563,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -4585,7 +4591,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -4751,7 +4757,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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,
@@ -4917,7 +4923,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -5053,7 +5059,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -5289,7 +5295,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -5401,7 +5407,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -5422,7 +5428,7 @@ textarea.FieldControl {
   border-radius: var(--sl-radius-item);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -5484,7 +5490,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -5545,7 +5551,7 @@ textarea.FieldControl {
 }
 
 /* Custom components: not Base UI parts. Built from existing concepts and tokens. */
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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.
@@ -5650,7 +5656,7 @@ textarea.FieldControl {
   height: var(--sl-badge-dot-base);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -6223,7 +6229,7 @@ textarea.FieldControl {
   flex-basis: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -6568,7 +6574,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -6695,7 +6701,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -6903,7 +6909,7 @@ textarea.FieldControl {
   background: var(--sl-border-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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.
@@ -7159,7 +7165,7 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -7172,6 +7178,13 @@ textarea.FieldControl {
  * `<tr><td data-empty colSpan={n}><EmptyState size="compact" … /></td></tr>`. A cell with
  * only text still uses this rule's padding. A cell whose child is an EmptyState lets the
  * empty state pad itself. The empty row does not take the row hover.
+ *
+ * Totals: tr data-total="subtotal" draws a single rule above the row, and data-total="grand"
+ * a rule above and a double rule under, as on a working paper (table.total-*). They work in
+ * tbody or tfoot. A tfoot row without data-total keeps the header tray band.
+ *
+ * The working-paper rule (rule.width, 0 by default) replaces the table's top border with a
+ * heavier line in rule.color, drawn on the first row's cells so it stays with a sticky header.
  */
 
 .Table {
@@ -7190,6 +7203,15 @@ textarea.FieldControl {
   border-radius: var(--sl-table-radius);
   overflow: hidden;
   font-variant-numeric: tabular-nums;
+  /* The top border steps aside while the working-paper rule is on (any rule.width above 0). */
+  border-top-width: max(0px, var(--sl-stroke-default) - var(--sl-rule-width) * 1000);
+}
+
+/* The working-paper rule, on the first row: the header, or the body when there is none.
+   At rule.width 0 this is no border at all. */
+.Table > thead > tr:first-child > *,
+.Table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > * {
+  border-top: var(--sl-rule-width) solid var(--sl-rule-color);
 }
 
 .Table caption {
@@ -7301,6 +7323,52 @@ textarea.FieldControl {
   border-bottom: none;
 }
 
+/* Subtotal and grand total rows: rules instead of a band, in the subtitle weight.
+   Hover and selection don't apply: a total is not a record. */
+.Table tr[data-total] > * {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  background: var(--sl-table-total-background);
+  color: var(--sl-table-color);
+  border-top: var(--sl-table-subtotal-rule-width) solid var(--sl-table-total-rule-color);
+}
+
+.Table tbody tr[data-total] > * {
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+.Table tbody tr[data-total]:last-child:not([data-total='grand']) > * {
+  border-bottom: none;
+}
+
+/* The grand total: a double rule under the figures. */
+.Table :is(tbody, tfoot) tr[data-total='grand'] > * {
+  border-bottom: var(--sl-table-grand-total-rule-width) double var(--sl-table-total-rule-color);
+}
+
+/* A label or blank cell in a total row can leave the rules off, so they only run under the
+   figures: data-rule="none" on the cell. */
+.Table :is(tbody, tfoot) tr[data-total] > [data-rule='none'] {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+
+/* In the footer the body's last row has no line under it, so those cells keep the footer's
+   usual line on top. */
+.Table tfoot tr[data-total] > [data-rule='none'] {
+  border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
+}
+
+@media (hover: hover) {
+  .Table tbody tr[data-total]:hover > * {
+    background: var(--sl-table-total-background);
+    color: var(--sl-table-color);
+  }
+}
+
 /* A header that stays put while the body scrolls (the table's wrapper scrolls) */
 .Table[data-sticky-header] thead th {
   position: sticky;
@@ -7331,23 +7399,28 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
 /* Collection
  *
  * DataTable, DataList, the toolbar and the pagination, in one place so the two views
  * share the table concept. Sections: toolbar, table additions, groups, list, pagination, sizes.
  * Each section is its own file so the design system can name the part. This file brings them in.
  *
- * The selection bar replaces the trailing controls (filters, sort, clear, actions) and leaves
+ * The selection bar replaces the trailing controls (filters, sort, actions) and leaves
  * the tabs and the search where they are, so selecting rows does not grow the toolbar.
  */
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
- * even when the page is wide. Search takes the full width first. Filters wrap under it.
+ * even when the page is wide. Search grows to fill the row beside the trailing controls, and
+ * wraps to its own line before it shrinks under collection.search-min-width. Under the narrow
+ * width it takes the full row and filters wrap under it.
  * A container query cannot read the width token, so the component also sets data-narrow.
+ *
+ * The search icon and the clear button sit inside the field. The browser's own search cancel
+ * is hidden by the reset, so the clear button is the only one, in every browser.
  */
 
 .CollectionToolbar {
@@ -7359,7 +7432,6 @@ textarea.FieldControl {
 }
 
 .CollectionToolbarMain,
-.CollectionToolbarTrailing,
 .CollectionSelectionBar,
 .CollectionSort {
   display: flex;
@@ -7372,11 +7444,90 @@ textarea.FieldControl {
   display: flex;
   align-items: center;
   gap: var(--sl-collection-toolbar-gap);
+  flex: 1 1 0;
+  min-width: min(100%, var(--sl-collection-search-min-width));
+}
+
+.CollectionSearchField {
+  position: relative;
+  flex: 1 1 auto;
   min-width: 0;
 }
 
-.CollectionSearch .Input {
+/* Scoped to the field so it wins over Input.css, which loads later. */
+.CollectionSearchField .Input {
   min-width: 0;
+  padding-inline-start: calc(var(--sl-control-padding-inline) + var(--sl-icon-size-magnify) + var(--sl-space-2));
+}
+
+.CollectionSearchField[data-filled] .Input {
+  padding-inline-end: calc(var(--sl-control-padding-inline) + var(--sl-icon-button-size));
+}
+
+.CollectionSearchIcon {
+  position: absolute;
+  inset-inline-start: var(--sl-control-padding-inline);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  width: var(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+  color: var(--sl-field-affix-color);
+  pointer-events: none;
+}
+
+.CollectionSearchClear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--sl-icon-button-size);
+  height: var(--sl-icon-button-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--sl-icon-button-radius);
+  background: transparent;
+  color: var(--sl-icon-button-color);
+  cursor: pointer;
+  outline: none;
+  transition: var(--sl-icon-button-transition);
+  position: absolute;
+  inset-inline-end: var(--sl-space-3);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+}
+
+.CollectionSearchClear:hover {
+  background: var(--sl-icon-button-background-hover);
+  color: var(--sl-icon-button-color-hover);
+}
+
+.CollectionSearchClear:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+/* The trailing controls join the main row one by one, so each keeps its own width and
+   wraps under the search on its own rather than squeezing. Search takes what is left. */
+.CollectionToolbarTrailing {
+  display: contents;
+}
+
+.CollectionSelectionBar {
+  flex: 0 0 auto;
+  max-width: 100%;
+}
+
+/* Select.css and Combobox.css fill their container. In the row they size to their text. */
+.CollectionToolbarMain .SelectTrigger,
+.CollectionToolbarMain .ComboboxInputWrapper {
+  flex: none;
+  width: auto;
+  max-width: 100%;
 }
 
 .CollectionToolbarActions {
@@ -7400,7 +7551,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -7521,12 +7672,15 @@ textarea.FieldControl {
   color: var(--sl-table-subtle-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
 /* DataList
  *
  * The same rows as the table, in one container with the table's borders, hover, selected
  * and current states. Not a stack of floating cards: the two views should read as one family.
  * variant=cards adds the surface radius and a gap when a queue should read as separate items.
+ *
+ * The working-paper rule (rule.width, 0 by default) replaces the top border with a heavier
+ * line in rule.color: on the first row, or on each card's top edge.
  */
 
 .DataList {
@@ -7545,6 +7699,13 @@ textarea.FieldControl {
   background: var(--sl-table-background);
   border: var(--sl-stroke-default) solid var(--sl-table-border-color);
   border-radius: var(--sl-table-radius);
+  /* The top border steps aside while the working-paper rule is on (any rule.width above 0). */
+  border-top-width: max(0px, var(--sl-stroke-default) - var(--sl-rule-width) * 1000);
+}
+
+/* The working-paper rule on the first row. At rule.width 0 this is no border at all. */
+.DataList ul > li:first-child {
+  border-top: var(--sl-rule-width) solid var(--sl-rule-color);
 }
 
 .DataList li {
@@ -7638,6 +7799,14 @@ textarea.FieldControl {
   background: var(--sl-table-background);
   border: var(--sl-stroke-default) solid var(--sl-table-border-color);
   border-radius: var(--sl-table-radius);
+  border-top-width: max(0px, var(--sl-stroke-default) - var(--sl-rule-width) * 1000);
+  box-shadow: inset 0 var(--sl-rule-width) 0 0 var(--sl-rule-color);
+}
+
+.DataList[data-variant='cards'] li[aria-current='true'] {
+  box-shadow:
+    inset var(--sl-stroke-strong) 0 0 0 var(--sl-border-accent),
+    inset 0 var(--sl-rule-width) 0 0 var(--sl-rule-color);
 }
 
 .DataList[data-loading] ul {
@@ -7645,7 +7814,7 @@ textarea.FieldControl {
   transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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.
@@ -7670,7 +7839,7 @@ textarea.FieldControl {
   margin: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.8.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
@@ -7768,3 +7937,231 @@ textarea.FieldControl {
     letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
   }
 }
+
+/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* Sheet
+ *
+ * A working-paper surface: the raised surface with a heavier rule across its top
+ * (sheet.rule-width in sheet.rule-color) instead of its top border, and an optional tab
+ * label that sits on the rule like the tab of a ledger page. The tab is caps-condense on
+ * the inverse surface. An action (an Edit link, a count) sits at the end of the header row.
+ * Tokens: sheet.* (tokens/component/sheet.json).
+ *
+ * Content runs edge to edge, so a Table, DataList or leader DescriptionList inside lines up
+ * with the sheet's sides; data-inset on SheetBody pads it by sheet.padding instead. A Table
+ * inside drops its own outer border and corners, since the sheet is its frame.
+ */
+
+.Sheet {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.SheetHeader {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--sl-sheet-header-gap);
+  min-height: var(--sl-sheet-tab-height);
+}
+
+.SheetTab {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  display: inline-flex;
+  align-items: center;
+  height: var(--sl-sheet-tab-height);
+  padding-inline: var(--sl-sheet-tab-padding-inline);
+  background: var(--sl-sheet-tab-background);
+  color: var(--sl-sheet-tab-color);
+  border-radius: var(--sl-sheet-tab-radius) var(--sl-sheet-tab-radius) 0 0;
+  white-space: nowrap;
+}
+
+.SheetAction {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  margin-inline-start: auto;
+  padding-block-end: var(--sl-space-1);
+}
+
+.SheetBody {
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+  background: var(--sl-sheet-background);
+  border: var(--sl-sheet-border-width) solid var(--sl-sheet-border-color);
+  border-top: var(--sl-sheet-rule-width) solid var(--sl-sheet-rule-color);
+  border-radius: var(--sl-sheet-radius);
+  /* Rows inside keep to the rounded corners. clip, not hidden, so a sticky header still sticks. */
+  overflow: clip;
+}
+
+/* Under a tab the top corners stay square, so the tab sits flush on the rule. */
+.Sheet[data-tab] > .SheetBody {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.SheetBody[data-inset] {
+  padding: var(--sl-sheet-padding);
+}
+
+/* The sheet is the frame: a table or list inside drops its own outer edge. */
+.SheetBody > .Table,
+.SheetBody > .CollectionView .Table,
+.SheetBody > .DataList ul {
+  border: 0;
+  border-radius: 0;
+}
+
+.SheetBody > .Table > thead > tr:first-child > *,
+.SheetBody > .Table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > *,
+.SheetBody > .DataList ul > li:first-child {
+  border-top: 0;
+}
+
+/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* StatFigure
+ *
+ * One large figure with a caps label above and a caption under it. The label is
+ * caps-condense, the figure uses the figures text family (mono, tabular numbers) at
+ * stat-figure.figure-font-size, the caption is body-condense. data-underline="double"
+ * draws a double rule under the figure only, the accountant's mark for a final total;
+ * data-tone="accent" colors the figure; data-size="sm" makes it smaller for a row of figures.
+ * Tokens: stat-figure.* (tokens/component/stat-figure.json).
+ */
+
+.StatFigure {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sl-stat-figure-gap);
+  min-width: 0;
+}
+
+.StatFigureLabel {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  color: var(--sl-stat-figure-label-color);
+}
+
+.StatFigureValue {
+  font-family: var(--sl-font-figures-base-font-family);
+  font-variant-numeric: var(--sl-font-figures-base-font-variant-numeric);
+  font-size: var(--sl-stat-figure-figure-font-size);
+  font-weight: var(--sl-stat-figure-figure-font-weight);
+  line-height: var(--sl-stat-figure-figure-line-height);
+  color: var(--sl-stat-figure-figure-color);
+  white-space: nowrap;
+}
+
+.StatFigure[data-size='sm'] .StatFigureValue {
+  font-size: var(--sl-stat-figure-figure-font-size-sm);
+  line-height: var(--sl-stat-figure-figure-line-height-sm);
+}
+
+.StatFigure[data-tone='accent'] .StatFigureValue {
+  color: var(--sl-stat-figure-figure-color-accent);
+}
+
+.StatFigure[data-underline='double'] .StatFigureValue {
+  border-bottom: var(--sl-stat-figure-underline-width) double var(--sl-stat-figure-underline-color);
+}
+
+.StatFigureCaption {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  color: var(--sl-stat-figure-caption-color);
+}
+
+/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* DescriptionList
+ *
+ * Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
+ * per pair, with a hairline between pairs. The default variant sets labels in a column
+ * beside their values. data-variant="leader" runs a dotted leader from each label to its
+ * value, which sits at the end of the row, as on a working paper. Labels are body text
+ * in the secondary color, values primary text with tabular numbers.
+ * Tokens: description-list.* (tokens/component/description-list.json).
+ */
+
+.DescriptionList {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  margin: 0;
+  padding: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.DescriptionItem {
+  display: grid;
+  grid-template-columns: var(--sl-description-list-label-width) 2fr;
+  align-items: baseline;
+  column-gap: var(--sl-description-list-column-gap);
+  padding-block: var(--sl-description-list-row-padding-block);
+  padding-inline: var(--sl-description-list-row-padding-inline);
+  border-bottom: var(--sl-stroke-default) solid var(--sl-description-list-row-border-color);
+}
+
+.DescriptionItem:last-child {
+  border-bottom: none;
+}
+
+.DescriptionTerm {
+  margin: 0;
+  color: var(--sl-description-list-label-color);
+}
+
+.DescriptionDetails {
+  margin: 0;
+  min-width: 0;
+  color: var(--sl-description-list-value-color);
+  overflow-wrap: anywhere;
+}
+
+/* Leader: the label grows to fill the row, and its ::after is the dotted line that leads
+   to the value. The line sits on the text's baseline. */
+.DescriptionList[data-variant='leader'] .DescriptionItem {
+  display: flex;
+  column-gap: var(--sl-description-list-leader-gap);
+}
+
+.DescriptionList[data-variant='leader'] .DescriptionTerm {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: baseline;
+  gap: var(--sl-description-list-leader-gap);
+  min-width: 0;
+}
+
+.DescriptionList[data-variant='leader'] .DescriptionTerm::after {
+  content: '';
+  flex: 1 1 var(--sl-space-6);
+  min-width: var(--sl-space-6);
+  border-bottom: var(--sl-description-list-leader-width) dotted var(--sl-description-list-leader-color);
+}
+
+.DescriptionList[data-variant='leader'] .DescriptionDetails {
+  flex: 0 1 auto;
+  max-width: 60%;
+  text-align: end;
+}