@scattered-light/loomiere-base-ui 0.7.1 → 0.9.0

package/dist/{index-ChJXlxzq.d.ts → index-DdHpYalU.d.ts}

@@ -732,6 +732,89 @@ declare const EmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps,
     Actions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 
+type SheetProps = Omit<React.ComponentProps<'section'>, 'title'> & {
+    /** The tab label that sits on the top rule, set in caps. It also names the section. */
+    label?: React.ReactNode;
+    /** Something at the end of the header row, beside the tab label: an Edit link, a count. */
+    action?: React.ReactNode;
+    /** Pad the content by sheet.padding. Leave it off when rows or a table inside run edge to edge. */
+    inset?: boolean;
+};
+/**
+ * A working-paper surface: a raised panel with a heavier rule across its top (sheet.rule-*),
+ * and an optional tab label sitting on that rule. A section, named by its label; without
+ * a label, give it an `aria-label`. Not a Base UI part, so it does not take `render`.
+ */
+declare const Sheet: React.ForwardRefExoticComponent<Omit<SheetProps, "ref"> & React.RefAttributes<HTMLElement>>;
+
+type StatFigureProps = Omit<React.ComponentProps<'div'>, 'children'> & {
+    /** The caps label above the figure: "Book balance", "Open questions". */
+    label: React.ReactNode;
+    /** The figure itself, already formatted: "1,318.22", "(40.00)", "3". */
+    value: React.ReactNode;
+    /** A short line under the figure: "on client", "DR · Oct 29". */
+    caption?: React.ReactNode;
+    /** "double" draws the accountant's double underline, for a final total. Default none. */
+    underline?: 'none' | 'double';
+    /** "accent" colors the figure as a call to act on it. Default is the text color. */
+    tone?: 'default' | 'accent';
+    /** "sm" for a row of figures in a card or header. Default "md". */
+    size?: 'sm' | 'md';
+};
+/**
+ * One large figure with a caps label and an optional caption. The label, figure and caption
+ * are read in that order. Not interactive: wrap it in a link to make it one.
+ * Not a Base UI part, so it does not take `render`.
+ */
+declare const StatFigure: React.ForwardRefExoticComponent<Omit<StatFigureProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+type DescriptionListProps = React.ComponentProps<'dl'> & {
+    /**
+     * "columns" (the default) sets labels in a column beside their values. "leader" runs a dotted
+     * leader from each label to its value, which sits at the end of the row.
+     */
+    variant?: 'columns' | 'leader';
+};
+/** Label and value pairs. Children are DescriptionItems. */
+declare const DescriptionList: React.ForwardRefExoticComponent<Omit<DescriptionListProps, "ref"> & React.RefAttributes<HTMLDListElement>>;
+type DescriptionItemProps = Omit<React.ComponentProps<'div'>, 'children'> & {
+    /** The term: "Legal name", "Fiscal year". */
+    label: React.ReactNode;
+    /** The value. */
+    children?: React.ReactNode;
+};
+/** One pair: a dt and its dd, grouped in a div as HTML allows inside a dl. */
+declare const DescriptionItem: React.ForwardRefExoticComponent<Omit<DescriptionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+type AppBarProps = React.ComponentProps<'header'>;
+/**
+ * The bar across the top of an app window: wordmark, context pickers, a module switch and
+ * icon actions in one row, on a line in the rule color (app-bar.*). A `header`, so it is the
+ * page's banner landmark when it sits outside `main`. Put an {@link AppBarSpacer} where the
+ * row should split, and a vertical Separator between groups of icon actions.
+ * Not a Base UI part, so it does not take `render`.
+ */
+declare const AppBar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+type AppBarSpacerProps = Omit<React.ComponentProps<'div'>, 'children'>;
+/** Takes the free space in an AppBar, pushing what follows it to the end of the row. */
+declare const AppBarSpacer: React.ForwardRefExoticComponent<Omit<AppBarSpacerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+type PickerButtonProps = Omit<React.ComponentProps<'button'>, 'value'> & {
+    /** What the button picks, set in caps before the choice: "Client", "Entity". */
+    label: React.ReactNode;
+    /** The current choice. Cut with an ellipsis when it is long. */
+    value?: React.ReactNode;
+    /** Shown in place of the value while nothing is chosen. */
+    placeholder?: React.ReactNode;
+};
+/**
+ * A trigger that names what it picks with a caps label before the current choice, in the
+ * field look of a Select trigger. It opens nothing itself: render it as a Menu, Popover or
+ * Select trigger, `<Menu.Trigger render={(props) => <PickerButton {...props} label="Entity" value={name} />} />`.
+ * The label and the choice are both read as its name.
+ */
+declare const PickerButton: React.ForwardRefExoticComponent<Omit<PickerButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
 interface EditableListApi<T> {
     update: (patch: Partial<T>) => void;
     remove: () => void;
@@ -806,4 +889,4 @@ declare const EditableList: {
     Balance: typeof EditableListBalance;
 };
 
-export { nextMonth as $, addMonths as A, Badge as B, Calendar as C, DatePicker as D, EditableList as E, builtinPresets as F, clampDate as G, daysInMonth as H, defaultPresets as I, defaultWeekStartsOn as J, endOfWeek as K, ListDetail as L, MoneyField as M, NumberField as N, formatMoney as O, type Preset as P, fromMinorUnits as Q, getCurrencyDigits as R, Splitter as S, inclusiveDays as T, isValidCurrency as U, isoWeek as V, last30Days as W, last7Days as X, lastMonth as Y, lastWeek as Z, lengthBlockReason as _, type BadgeProps as a, roundingChangesValue as a$, nextWeek as a0, orderRange as a1, parseDecimalString as a2, resolvePreset as a3, startOfWeek as a4, thisMonth as a5, thisQuarter as a6, thisWeek as a7, toDecimalString as a8, toMinorUnits as a9, type SplitterKey as aA, SplitterPanel as aB, SplitterRoot as aC, type StoredLayout as aD, type StoredPanel as aE, affixSide as aF, applyKey as aG, applyStored as aH, ariaPercents as aI, createPanels as aJ, cssSize as aK, currencyName as aL, currencySymbol as aM, formatDay as aN, formatFull as aO, handleTarget as aP, layoutOf as aQ, measure as aR, monthCells as aS, moveFocusDate as aT, normalizePaste as aU, parseDate as aV, parseSize as aW, presetInBounds as aX, resetToDefault as aY, resizeByDelta as aZ, roundHalfExpand as a_, today as aa, todayDate as ab, tomorrow as ac, useListDetail as ad, yearToDate as ae, yesterday as af, CURRENCY_SEARCH_THRESHOLD as ag, CurrencySelect as ah, type KeyOptions as ai, ListDetailDetail as aj, ListDetailList as ak, ListDetailRoot as al, MAX_MINOR_UNITS as am, type MoneyChangeDetails as an, type MoneyDisplay as ao, MoneyFieldAffix as ap, MoneyFieldGroup as aq, MoneyFieldInput as ar, MoneyFieldRoot as as, type MoneyFieldSteps as at, type NormalizedPaste as au, type PanelSpec as av, type RuntimePanel as aw, type Size as ax, type SizeInput as ay, SplitterHandle as az, type CalendarProps as b, sameSelection as b0, serializeSize as b1, settle as b2, sizeText as b3, syncPanels as b4, toggleCollapsed as b5, valueText as b6, type CurrencyCode as c, type DatePickerProps as d, DatePresets as e, type DatePresetsProps as f, type DateRange as g, type DateValue as h, type EditableListApi as i, type EditableListRootProps as j, EmptyState as k, type EmptyStateKind as l, type EmptyStateProps as m, type ListDetailCloseReason as n, type ListDetailDetailProps as o, type ListDetailLayout as p, type ListDetailRootProps as q, type ListDetailValue as r, type MoneyFieldProps as s, type MoneyFieldRootProps as t, type NumberFieldLabelProps as u, type PresetValue as v, type SplitterHandleProps as w, type SplitterPanelProps as x, type SplitterRootProps as y, addDays as z };
+export { defaultPresets as $, AppBar as A, Badge as B, Calendar as C, DatePicker as D, EditableList as E, type MoneyFieldRootProps as F, type NumberFieldLabelProps as G, type PickerButtonProps as H, type Preset as I, type PresetValue as J, type SheetProps as K, ListDetail as L, MoneyField as M, NumberField as N, Splitter as O, PickerButton as P, type SplitterHandleProps as Q, type SplitterPanelProps as R, Sheet as S, type SplitterRootProps as T, StatFigure as U, type StatFigureProps as V, addDays as W, addMonths as X, builtinPresets as Y, clampDate as Z, daysInMonth as _, type AppBarProps as a, formatDay as a$, defaultWeekStartsOn as a0, endOfWeek as a1, formatMoney as a2, fromMinorUnits as a3, getCurrencyDigits as a4, inclusiveDays as a5, isValidCurrency as a6, isoWeek as a7, last30Days as a8, last7Days as a9, MAX_MINOR_UNITS as aA, type MoneyChangeDetails as aB, type MoneyDisplay as aC, MoneyFieldAffix as aD, MoneyFieldGroup as aE, MoneyFieldInput as aF, MoneyFieldRoot as aG, type MoneyFieldSteps as aH, type NormalizedPaste as aI, type PanelSpec as aJ, type RuntimePanel as aK, type Size as aL, type SizeInput as aM, SplitterHandle as aN, type SplitterKey as aO, SplitterPanel as aP, SplitterRoot as aQ, type StoredLayout as aR, type StoredPanel as aS, affixSide as aT, applyKey as aU, applyStored as aV, ariaPercents as aW, createPanels as aX, cssSize as aY, currencyName as aZ, currencySymbol as a_, lastMonth as aa, lastWeek as ab, lengthBlockReason as ac, nextMonth as ad, nextWeek as ae, orderRange as af, parseDecimalString as ag, resolvePreset as ah, startOfWeek as ai, thisMonth as aj, thisQuarter as ak, thisWeek as al, toDecimalString as am, toMinorUnits as an, today as ao, todayDate as ap, tomorrow as aq, useListDetail as ar, yearToDate as as, yesterday as at, CURRENCY_SEARCH_THRESHOLD as au, CurrencySelect as av, type KeyOptions as aw, ListDetailDetail as ax, ListDetailList as ay, ListDetailRoot as az, AppBarSpacer as b, formatFull as b0, handleTarget as b1, layoutOf as b2, measure as b3, monthCells as b4, moveFocusDate as b5, normalizePaste as b6, parseDate as b7, parseSize as b8, presetInBounds as b9, resetToDefault as ba, resizeByDelta as bb, roundHalfExpand as bc, roundingChangesValue as bd, sameSelection as be, serializeSize as bf, settle as bg, sizeText as bh, syncPanels as bi, toggleCollapsed as bj, valueText as bk, type AppBarSpacerProps as c, type BadgeProps as d, type CalendarProps as e, type CurrencyCode as f, type DatePickerProps as g, DatePresets as h, type DatePresetsProps as i, type DateRange as j, type DateValue as k, DescriptionItem as l, type DescriptionItemProps as m, DescriptionList as n, type DescriptionListProps as o, type EditableListApi as p, type EditableListRootProps as q, EmptyState as r, type EmptyStateKind as s, type EmptyStateProps as t, type ListDetailCloseReason as u, type ListDetailDetailProps as v, type ListDetailLayout as w, type ListDetailRootProps as x, type ListDetailValue as y, type MoneyFieldProps as z };

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { Fieldset as Fieldset$1 } from '@base-ui/react/fieldset';
 import { Form as Form$1 } from '@base-ui/react/form';
 import { NavigationMenu as NavigationMenu$1 } from '@base-ui/react/navigation-menu';
 import { Select as Select$1 } from '@base-ui/react/select';
-export { B as Badge, a as BadgeProps, C as Calendar, b as CalendarProps, c as CurrencyCode, D as DatePicker, d as DatePickerProps, e as DatePresets, f as DatePresetsProps, g as DateRange, h as DateValue, E as EditableList, i as EditableListApi, j as EditableListRootProps, k as EmptyState, l as EmptyStateKind, m as EmptyStateProps, L as ListDetail, n as ListDetailCloseReason, o as ListDetailDetailProps, p as ListDetailLayout, q as ListDetailRootProps, r as ListDetailValue, M as MoneyField, s as MoneyFieldProps, t as MoneyFieldRootProps, N as NumberField, u as NumberFieldLabelProps, P as Preset, v as PresetValue, S as Splitter, w as SplitterHandleProps, x as SplitterPanelProps, y as SplitterRootProps, z as addDays, A as addMonths, F as builtinPresets, G as clampDate, H as daysInMonth, I as defaultPresets, J as defaultWeekStartsOn, K as endOfWeek, O as formatMoney, Q as fromMinorUnits, R as getCurrencyDigits, T as inclusiveDays, U as isValidCurrency, V as isoWeek, W as last30Days, X as last7Days, Y as lastMonth, Z as lastWeek, _ as lengthBlockReason, $ as nextMonth, a0 as nextWeek, a1 as orderRange, a2 as parseDecimalString, a3 as resolvePreset, a4 as startOfWeek, a5 as thisMonth, a6 as thisQuarter, a7 as thisWeek, a8 as toDecimalString, a9 as toMinorUnits, aa as today, ab as todayDate, ac as tomorrow, ad as useListDetail, ae as yearToDate, af as yesterday } from './index-ChJXlxzq.js';
+export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, C as Calendar, e as CalendarProps, f as CurrencyCode, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, L as ListDetail, u as ListDetailCloseReason, v as ListDetailDetailProps, w as ListDetailLayout, x as ListDetailRootProps, y as ListDetailValue, M as MoneyField, z as MoneyFieldProps, F as MoneyFieldRootProps, N as NumberField, G as NumberFieldLabelProps, P as PickerButton, H as PickerButtonProps, I as Preset, J as PresetValue, S as Sheet, K as SheetProps, O as Splitter, Q as SplitterHandleProps, R as SplitterPanelProps, T as SplitterRootProps, U as StatFigure, V as StatFigureProps, W as addDays, X as addMonths, Y as builtinPresets, Z as clampDate, _ as daysInMonth, $ as defaultPresets, a0 as defaultWeekStartsOn, a1 as endOfWeek, a2 as formatMoney, a3 as fromMinorUnits, a4 as getCurrencyDigits, a5 as inclusiveDays, a6 as isValidCurrency, a7 as isoWeek, a8 as last30Days, a9 as last7Days, aa as lastMonth, ab as lastWeek, ac as lengthBlockReason, ad as nextMonth, ae as nextWeek, af as orderRange, ag as parseDecimalString, ah as resolvePreset, ai as startOfWeek, aj as thisMonth, ak as thisQuarter, al as thisWeek, am as toDecimalString, an as toMinorUnits, ao as today, ap as todayDate, aq as tomorrow, ar as useListDetail, as as yearToDate, at as yesterday } from './index-DdHpYalU.js';
 import * as _base_ui_react_internals_filter from '@base-ui/react/internals/filter';
 import { AutocompleteRootProps, Autocomplete as Autocomplete$1 } from '@base-ui/react/autocomplete';
 import { ComboboxRootProps, Combobox as Combobox$1 } from '@base-ui/react/combobox';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { Badge, Calendar, DatePicker, DatePresets, Drawer, EditableList, Field, ListDetail, MoneyField, NumberField, Popover, Splitter, addDays, addMonths, builtinPresets, clampDate, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatMoney, fromMinorUnits, getCurrencyDigits, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, lengthBlockReason, nextMonth, nextWeek, orderRange, parseDecimalString, resolvePreset, startOfWeek, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, tomorrow, useListDetail, yearToDate, yesterday } from './chunk-JUUPOOQQ.js';
+export { AppBar, AppBarSpacer, Badge, Calendar, DatePicker, DatePresets, DescriptionItem, DescriptionList, Drawer, EditableList, Field, ListDetail, MoneyField, NumberField, PickerButton, Popover, Sheet, Splitter, StatFigure, addDays, addMonths, builtinPresets, clampDate, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatMoney, fromMinorUnits, getCurrencyDigits, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, lengthBlockReason, nextMonth, nextWeek, orderRange, parseDecimalString, resolvePreset, startOfWeek, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, tomorrow, useListDetail, yearToDate, yesterday } from './chunk-LQWPDLLQ.js';
 export { Checkbox, CheckboxLabel, Input, Menu, Tabs } from './chunk-Y2CPBMFJ.js';
 import { cnState, styledPart, styledPartUnless, buttonPart, cn } from './chunk-M7KJASGK.js';
 export { Button, Combobox, EmptyState, Select, cn, cnState } from './chunk-M7KJASGK.js';

package/dist/styles/components/Accordion.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure

package/dist/styles/components/AlertDialog.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Alert Dialog - Mojave Theme
  *
  * No component tokens and no rules of its own. An alert dialog looks exactly like a

package/dist/styles/components/Autocomplete.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Autocomplete - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css), the clear button is an icon

package/dist/styles/components/Avatar.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Avatar - Mojave Theme
  *
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in

package/dist/styles/components/Button.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Button - Mojave Theme
  *
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger

package/dist/styles/components/Checkbox.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* 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.

package/dist/styles/components/CheckboxGroup.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox Group - Mojave Theme */
 
 /* Each checkbox row is already a full tap target tall, so the rows sit close. */

package/dist/styles/components/Collapsible.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept

package/dist/styles/components/Combobox.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Combobox - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css); the chips box is a field; the

package/dist/styles/components/ContextMenu.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* 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

package/dist/styles/components/Dialog.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Dialog and Alert dialog - Mojave Theme
  *
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):

package/dist/styles/components/Drawer.css

@@ -1,9 +1,11 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Drawer - a panel that slides in from an edge and can be swiped away.
    The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
    drawer reads as a dialog's sibling; only its size and grab bar are its own
    (--sl-drawer-*). Base UI supplies the swipe through
-   --drawer-swipe-movement-x/y and data-swipe-direction on the popup. */
+   --drawer-swipe-movement-x/y and data-swipe-direction on the popup.
+   The working-paper rule (rule.width, 0 by default) replaces the top border with a heavier
+   line in rule.color. It is an inset shadow, so it stays put while the drawer scrolls. */
 
 .DrawerBackdrop {
   position: fixed;
@@ -40,6 +42,8 @@
   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);
 }
@@ -70,6 +74,8 @@
   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'] {

package/dist/styles/components/Field.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field

package/dist/styles/components/Fieldset.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Fieldset - Mojave Theme
  *
  * No component tokens: a titled group of fields, spaced by the stack gaps, with

package/dist/styles/components/Form.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Form - Mojave Theme
  *
  * No component tokens: fields stack with the large block space, and the action

package/dist/styles/components/Input.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Input - Mojave Theme
  *
  * No component tokens: the look is the field concept (tokens/semantic/field.json),

package/dist/styles/components/Menu.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Menu - Mojave Theme
  *
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the

package/dist/styles/components/Menubar.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* 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

package/dist/styles/components/Meter.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Meter - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:

package/dist/styles/components/NavigationMenu.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Navigation Menu - Mojave Theme
  *
  * The strip is the bar concept, the panel is the popup concept and each link is an item

package/dist/styles/components/NumberField.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Number Field - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css) and the label, description and

package/dist/styles/components/OTPField.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* OTP Field - Mojave Theme
  *
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input

package/dist/styles/components/Popover.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================

package/dist/styles/components/PreviewCard.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Preview Card - Mojave Theme
  *
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense

package/dist/styles/components/Progress.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Progress - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of

package/dist/styles/components/Radio.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* 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).

package/dist/styles/components/ScrollArea.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Scroll Area - Mojave Theme
  *
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until

package/dist/styles/components/Select.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Select - Mojave Theme
  *
  * The trigger is a field (the field pattern, control sizes, the base text style); the

package/dist/styles/components/Separator.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Separator - Mojave Theme
  *
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of

package/dist/styles/components/Slider.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Slider - Mojave Theme
  *
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as

package/dist/styles/components/Switch.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* 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,

package/dist/styles/components/Tabs.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Tabs - Mojave Theme
  *
  * No component tokens. The divider, the selected line and color, hover and the disabled

package/dist/styles/components/Toast.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Toast - Mojave Theme
  *
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type

package/dist/styles/components/Toggle.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* 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

package/dist/styles/components/ToggleGroup.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle Group - Mojave Theme
  *
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -18,3 +18,44 @@
 .ToggleGroup .Toggle {
   border-radius: var(--sl-radius-item);
 }
+
+/* ============================================
+   SEGMENTED (data-variant="segmented")
+   Joined toggles in one outline, the pressed one filled solid: a switch between a few
+   views or modules. Tokens: toggle-group.segmented-* (tokens/component/toggle-group.json).
+   ============================================ */
+
+.ToggleGroup[data-variant='segmented'] {
+  padding: 0;
+  gap: 0;
+  background: var(--sl-toggle-group-segmented-background);
+  border: var(--sl-stroke-default) solid var(--sl-toggle-group-segmented-border-color);
+  border-radius: var(--sl-radius-chrome);
+  overflow: hidden;
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle {
+  height: calc(var(--sl-control-height-md) - 2 * var(--sl-stroke-default));
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--sl-text-primary);
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle + .Toggle {
+  border-inline-start: var(--sl-stroke-default) solid var(--sl-toggle-group-segmented-border-color);
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle:hover:not([data-disabled]):not(:disabled) {
+  background: var(--sl-fill-subtle);
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle[data-pressed],
+.ToggleGroup[data-variant='segmented'] .Toggle[data-pressed]:hover:not([data-disabled]):not(:disabled) {
+  background: var(--sl-toggle-group-segmented-pressed-background);
+  color: var(--sl-toggle-group-segmented-pressed-color);
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle:focus-visible {
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}

package/dist/styles/components/Toolbar.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects

package/dist/styles/components/Tooltip.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Tooltip - Mojave Theme
  *
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip

package/dist/styles/custom/AppBar.css

@@ -0,0 +1,33 @@
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* AppBar
+ *
+ * The bar across the top of an app window, one row on a line in the rule color. The line is
+ * app-bar.border-width while rule.width is 0, and the thicker of the two once a brand turns the
+ * rule on, so an ink-rule brand gets the working-paper rule under its app bar.
+ * AppBarSpacer pushes what follows it to the end. A vertical Separator inside is a short
+ * divider between groups of icon actions. Tokens: app-bar.* (tokens/component/app-bar.json).
+ */
+
+.AppBar {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--sl-app-bar-gap);
+  min-height: var(--sl-app-bar-height);
+  padding-inline: var(--sl-app-bar-padding-inline);
+  padding-block: var(--sl-space-2);
+  background: var(--sl-app-bar-background);
+  border-bottom: max(var(--sl-app-bar-border-width), var(--sl-rule-width)) solid var(--sl-app-bar-border-color);
+  min-width: 0;
+}
+
+.AppBarSpacer {
+  flex: 1 1 var(--sl-space-4);
+  min-width: 0;
+}
+
+.AppBar .Separator[data-orientation='vertical'] {
+  height: var(--sl-app-bar-divider-height);
+  margin-inline: var(--sl-space-1);
+  background: var(--sl-app-bar-divider-color);
+}

package/dist/styles/custom/Badge.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Badge
  *
  * A status or count label. Not a Base UI part, and not interactive: no hover or focus.

package/dist/styles/custom/Collection.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Collection
  *
  * DataTable, DataList, the toolbar and the pagination, in one place so the two views

package/dist/styles/custom/CollectionPagination.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Pagination
  *
  * Not tied to a collection. Anything with a page, a page count and a total can use it.

package/dist/styles/custom/CollectionToolbar.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Collection toolbar
  *
  * The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps

package/dist/styles/custom/DataList.css

@@ -1,9 +1,12 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* DataList
  *
  * The same rows as the table, in one container with the table's borders, hover, selected
  * and current states. Not a stack of floating cards: the two views should read as one family.
  * variant=cards adds the surface radius and a gap when a queue should read as separate items.
+ *
+ * The working-paper rule (rule.width, 0 by default) replaces the top border with a heavier
+ * line in rule.color: on the first row, or on each card's top edge.
  */
 
 .DataList {
@@ -22,6 +25,13 @@
   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 {
@@ -115,6 +125,14 @@
   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 {

package/dist/styles/custom/DataTable.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* DataTable additions on top of .Table.
  *
  * Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps

package/dist/styles/custom/DatePicker.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /*
  * 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