@scalewing/react 1.60.1 → 1.61.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @scalewing/react
 
+## 1.61.0
+
+### Minor Changes
+
+- 32040cb: Opt-in desktop primitives for a data tool (FutMas F-010-S28). Nothing changes for a consumer that does not opt in, except one fix: `FilterChips`' face lacked `box-sizing: border-box`, so a chip now measures its intended 44 px instead of 54 px.
+
+  - `ThemeProvider density="compact"`, on a fine pointer only: md controls 36/14, sm 28/10, xs 24/8, chips 32, Card corners the md radius, 15/22 reading text. Touch keeps 44 px.
+  - `PageHeader`: title, subtitle, back link, actions and a row below.
+  - `AppShell contentMaxWidth="container"` and `sidebarTone="subtle"`.
+  - `Grid rail`: a main column beside a fixed 20rem rail, stacking below the breakpoint it names.
+  - `FixtureGroup sides="fixed"`: the score at one place across runs.
+  - `DescriptionList termWidth`: `sm`, `md` or `lg`.
+  - `FilterChips selectedStyle="subtle"`.
+  - `TabItem` `count`, `countLabel` and `countTone`.
+  - `Text maxLines`, and the `bodySm` variant. Needs the matching `@scalewing/tokens`.
+
+  `Button` now reads the `--sw-control-*` variables instead of literal pixels. Their values are unchanged, so nothing moves, unless an app overrides those variables in its own CSS, which now moves its Buttons too.
+
+### Patch Changes
+
+- Updated dependencies [32040cb]
+  - @scalewing/tokens@1.8.0
+
 ## 1.60.1
 
 ### Patch Changes

package/dist/components/AppShell.d.ts

@@ -1,4 +1,5 @@
 import { type AppShellProps } from './app-shell/types.js';
+export { appShellContentMaxWidths, appShellSidebarTones, type AppShellContentMaxWidth, type AppShellSidebarTone, } from '../css/css-app-shell.js';
 export type { AppShellLabels, AppShellNavGroup, AppShellNavItem, AppShellProps, AppShellSkipLink, } from './app-shell/types.js';
 /**
  * A web workspace's frame: a pinned side navigation of grouped
@@ -8,7 +9,8 @@ export type { AppShellLabels, AppShellNavGroup, AppShellNavItem, AppShellProps,
  * `lg` a sticky top bar's menu button opens the same navigation in a modal
  * drawer from the inline start, its button optionally carrying a count.
  * `pageBar` is a sticky band at the top of `main` on every layout, and
- * `skipLink` a first link that moves focus to `main`. Invalid groups,
- * items, counts or words throw a `RangeError`.
+ * `skipLink` a first link that moves focus to `main`. `contentMaxWidth`
+ * caps the page and `sidebarTone` sets the sidebar's fill. Invalid groups,
+ * items, counts, words or layout options throw a `RangeError`.
  */
-export declare function AppShell({ barEnd, barTitle, children, footer, groups, header, labels, menuCount, menuCountLabel, menuCountTone, menuIcon, navLabel, onNavigate, pageBar, railFooter, railHeader, skipLink, }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ barEnd, barTitle, children, contentMaxWidth, footer, groups, header, labels, menuCount, menuCountLabel, menuCountTone, menuIcon, navLabel, onNavigate, pageBar, railFooter, railHeader, sidebarTone, skipLink, }: AppShellProps): import("react").JSX.Element;

package/dist/components/AppShell.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from 'react';
+import { cx } from '../class-names.js';
 import { breakpointQuery } from '../css/breakpoints.js';
 import { appShellWideQuery } from '../css/css-app-shell.js';
 import { appShellBarHeightVariable, appShellPageBarHeightVariable, } from '../css/css-app-shell-page-bar.js';
@@ -11,6 +12,7 @@ import { SkipToMain } from './app-shell/SkipToMain.js';
 import { assertAppShellProps } from './app-shell/validate.js';
 import { useElementHeight } from './use-element-height.js';
 import { useMediaQuery } from './use-media-query.js';
+export { appShellContentMaxWidths, appShellSidebarTones, } from '../css/css-app-shell.js';
 const fromLg = breakpointQuery('from', 'lg');
 /**
  * A web workspace's frame: a pinned side navigation of grouped
@@ -20,17 +22,20 @@ const fromLg = breakpointQuery('from', 'lg');
  * `lg` a sticky top bar's menu button opens the same navigation in a modal
  * drawer from the inline start, its button optionally carrying a count.
  * `pageBar` is a sticky band at the top of `main` on every layout, and
- * `skipLink` a first link that moves focus to `main`. Invalid groups,
- * items, counts or words throw a `RangeError`.
+ * `skipLink` a first link that moves focus to `main`. `contentMaxWidth`
+ * caps the page and `sidebarTone` sets the sidebar's fill. Invalid groups,
+ * items, counts, words or layout options throw a `RangeError`.
  */
-export function AppShell({ barEnd, barTitle, children, footer, groups, header, labels, menuCount, menuCountLabel, menuCountTone, menuIcon, navLabel, onNavigate, pageBar, railFooter, railHeader, skipLink, }) {
+export function AppShell({ barEnd, barTitle, children, contentMaxWidth = 'none', footer, groups, header, labels, menuCount, menuCountLabel, menuCountTone, menuIcon, navLabel, onNavigate, pageBar, railFooter, railHeader, sidebarTone = 'surface', skipLink, }) {
     assertAppShellProps({
+        contentMaxWidth,
         groups,
         labels,
         menuCount,
         menuCountLabel,
         menuCountTone,
         navLabel,
+        sidebarTone,
         skipLink,
     });
     const [menuOpen, setMenuOpen] = useState(false);
@@ -74,7 +79,7 @@ export function AppShell({ barEnd, barTitle, children, footer, groups, header, l
         refocusRef.current = false;
         menuRef.current?.focus();
     }, [menuOpen]);
-    return (_jsxs("div", { className: "sw-app-shell", style: shellStyle, children: [skipLink ? (_jsx(SkipToMain, { label: skipLink.label, mainId: mainId, mainRef: mainRef })) : null, _jsx(AppShellBar, { barEnd: barEnd, barRef: barRef, barTitle: barTitle, menuCount: menuCount, menuCountLabel: menuCountLabel, menuCountTone: menuCountTone, menuIcon: menuIcon, menuOpen: menuOpen, menuRef: menuRef, onOpenMenu: () => setMenuOpen(true), openMenuLabel: labels.openMenu }), _jsx(AppShellSidebar, { footer: footer, groups: groups, header: header, navLabel: navLabel, onNavigate: onNavigate, rail: sidebarShown && !wide, railFooter: railFooter, railHeader: railHeader }), _jsxs("main", { ref: mainRef, className: "sw-app-shell-main", id: skipLink ? mainId : undefined, tabIndex: skipLink ? -1 : undefined, children: [hasPageBar ? (_jsx("div", { ref: pageBarRef, className: "sw-app-shell-page-bar", children: pageBar })) : null, children] }), _jsx(AppShellDrawer, { closeLabel: labels.closeMenu, footer: footer, groups: groups, header: header, navLabel: navLabel, onChoose: () => setMenuOpen(false), onClose: () => {
+    return (_jsxs("div", { className: cx('sw-app-shell', sidebarTone === 'subtle' && 'sw-app-shell-sidebar-subtle'), style: shellStyle, children: [skipLink ? (_jsx(SkipToMain, { label: skipLink.label, mainId: mainId, mainRef: mainRef })) : null, _jsx(AppShellBar, { barEnd: barEnd, barRef: barRef, barTitle: barTitle, menuCount: menuCount, menuCountLabel: menuCountLabel, menuCountTone: menuCountTone, menuIcon: menuIcon, menuOpen: menuOpen, menuRef: menuRef, onOpenMenu: () => setMenuOpen(true), openMenuLabel: labels.openMenu }), _jsx(AppShellSidebar, { footer: footer, groups: groups, header: header, navLabel: navLabel, onNavigate: onNavigate, rail: sidebarShown && !wide, railFooter: railFooter, railHeader: railHeader }), _jsxs("main", { ref: mainRef, className: "sw-app-shell-main", id: skipLink ? mainId : undefined, tabIndex: skipLink ? -1 : undefined, children: [hasPageBar ? (_jsx("div", { ref: pageBarRef, className: "sw-app-shell-page-bar", children: pageBar })) : null, contentMaxWidth === 'container' ? (_jsx("div", { className: "sw-container", children: children })) : (children)] }), _jsx(AppShellDrawer, { closeLabel: labels.closeMenu, footer: footer, groups: groups, header: header, navLabel: navLabel, onChoose: () => setMenuOpen(false), onClose: () => {
                     refocusRef.current = true;
                     setMenuOpen(false);
                 }, onNavigate: onNavigate, open: menuOpen })] }));

package/dist/components/DescriptionList.d.ts

@@ -1,6 +1,6 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type DescriptionListLayout } from './description-list-layout.js';
-export { descriptionListLayouts, type DescriptionListLayout, } from './description-list-layout.js';
+import { type DescriptionListLayout, type DescriptionListTermWidth } from './description-list-layout.js';
+export { descriptionListLayouts, descriptionListTermWidths, type DescriptionListLayout, type DescriptionListTermWidth, } from './description-list-layout.js';
 export type DescriptionListProps = Omit<HTMLAttributes<HTMLDListElement>, 'children'> & {
     /** The list's `DescriptionItem`s. */
     children: ReactNode;
@@ -11,6 +11,14 @@ export type DescriptionListProps = Omit<HTMLAttributes<HTMLDListElement>, 'child
      * by side at every width, for a short box of facts.
      */
     layout?: DescriptionListLayout;
+    /**
+     * A fixed term column in place of one as wide as the widest term, so the
+     * details of several lists on a page start at the same place: `sm` 8rem,
+     * `md` 12rem, `lg` 16rem, from `md` up and never more than half the list
+     * (a longer term wraps). Below `md` a term still sits over its detail.
+     * Only with the `columns` layout.
+     */
+    termWidth?: DescriptionListTermWidth;
 };
 /**
  * Terms and what each one says, one item per row: the term in a start
@@ -19,7 +27,7 @@ export type DescriptionListProps = Omit<HTMLAttributes<HTMLDListElement>, 'child
  * the layout breakpoint (`md`) each term sits over its detail. `spread`
  * sets each detail at its row's end instead, beside its term at every width.
  */
-export declare function DescriptionList({ children, className, layout, ...rest }: DescriptionListProps): import("react").JSX.Element;
+export declare function DescriptionList({ children, className, layout, termWidth, ...rest }: DescriptionListProps): import("react").JSX.Element;
 export type DescriptionItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     /**
      * What the row describes, such as a name; the consumer's own `Text`. Each

package/dist/components/DescriptionList.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../class-names.js';
-import { assertDescriptionListLayout, } from './description-list-layout.js';
-export { descriptionListLayouts, } from './description-list-layout.js';
+import { assertDescriptionListLayout, assertDescriptionListTermWidth, } from './description-list-layout.js';
+export { descriptionListLayouts, descriptionListTermWidths, } from './description-list-layout.js';
 /**
  * Terms and what each one says, one item per row: the term in a start
  * column as wide as the widest term (up to 40% of the list), the detail
@@ -9,9 +9,10 @@ export { descriptionListLayouts, } from './description-list-layout.js';
  * the layout breakpoint (`md`) each term sits over its detail. `spread`
  * sets each detail at its row's end instead, beside its term at every width.
  */
-export function DescriptionList({ children, className, layout = 'columns', ...rest }) {
+export function DescriptionList({ children, className, layout = 'columns', termWidth, ...rest }) {
     assertDescriptionListLayout(layout);
-    return (_jsx("dl", { className: cx('sw-description-list', layout === 'spread' && 'sw-description-list-spread', className), ...rest, children: children }));
+    assertDescriptionListTermWidth(termWidth, layout);
+    return (_jsx("dl", { className: cx('sw-description-list', layout === 'spread' && 'sw-description-list-spread', termWidth && `sw-description-list-term-${termWidth}`, className), ...rest, children: children }));
 }
 /** One row of a `DescriptionList`: a `dt` and its `dd` in one group. */
 export function DescriptionItem({ term, children, className, ...rest }) {

package/dist/components/FilterChips.d.ts

@@ -1,5 +1,5 @@
 import { type FilterChipsProps } from './filter-chips/options.js';
-export { filterChipCountAppearances, filterChipsOverflows, filterChipTones, type FilterChipCountAppearance, type FilterChipOption, type FilterChipsOverflow, type FilterChipsProps, type FilterChipTone, } from './filter-chips/options.js';
+export { filterChipCountAppearances, filterChipsOverflows, filterChipsSelectedStyles, filterChipTones, type FilterChipCountAppearance, type FilterChipOption, type FilterChipsOverflow, type FilterChipsProps, type FilterChipsSelectedStyle, type FilterChipTone, } from './filter-chips/options.js';
 /**
  * A labelled row of chips: one choice (radios), or several at once
  * (`multiple`, checkboxes), each chip optionally counted.

package/dist/components/FilterChips.js

@@ -7,7 +7,7 @@ import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { showsRequiredMark } from './FieldLabelText.js';
 import { FilterChip } from './filter-chips/FilterChip.js';
 import { assertFilterChips } from './filter-chips/validate.js';
-export { filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './filter-chips/options.js';
+export { filterChipCountAppearances, filterChipsOverflows, filterChipsSelectedStyles, filterChipTones, } from './filter-chips/options.js';
 /** The values a change leaves on, in the options' order. */
 function toggled(options, chosen, value, checked) {
     return options
@@ -19,7 +19,7 @@ function toggled(options, chosen, value, checked) {
  * (`multiple`, checkboxes), each chip optionally counted.
  */
 export function FilterChips(props) {
-    const { label, options, labelVisuallyHidden = false, requiredMark = 'visible', countAppearance = 'figure', overflow = 'wrap', error, 'aria-describedby': describedByProp, } = props;
+    const { label, options, labelVisuallyHidden = false, requiredMark = 'visible', countAppearance = 'figure', overflow = 'wrap', selectedStyle = 'solid', error, 'aria-describedby': describedByProp, } = props;
     const name = useId();
     const errorId = useId();
     assertFilterChips(props);
@@ -39,5 +39,5 @@ export function FilterChips(props) {
         else if (checked)
             props.onChange(value);
     }
-    return (_jsxs("fieldset", { "aria-describedby": describedBy || undefined, "aria-invalid": error ? true : undefined, className: cx('sw-filter-chips', overflow === 'scroll' && 'sw-filter-chips-scroll'), children: [_jsxs("legend", { className: cx('sw-filter-chips-legend', labelVisuallyHidden && 'sw-sr-only'), children: [label, showsRequiredMark(required, requiredMark) ? (_jsxs("span", { "aria-hidden": "true", className: "sw-field-required", children: [' ', "*"] })) : null] }), _jsx("span", { className: "sw-filter-chips-options", children: options.map((option) => (_jsx(FilterChip, { checked: isChecked(option.value), countAppearance: countAppearance, name: name, onCheckedChange: (checked) => change(option.value, checked), option: option, required: required, tabStopHere: props.multiple ? true : option.value === entry, type: props.multiple ? 'checkbox' : 'radio' }, option.value))) }), _jsx(FieldErrorRegion, { className: "sw-filter-chips-error", id: errorId, message: error })] }));
+    return (_jsxs("fieldset", { "aria-describedby": describedBy || undefined, "aria-invalid": error ? true : undefined, className: cx('sw-filter-chips', overflow === 'scroll' && 'sw-filter-chips-scroll', selectedStyle === 'subtle' && 'sw-filter-chips-selected-subtle'), children: [_jsxs("legend", { className: cx('sw-filter-chips-legend', labelVisuallyHidden && 'sw-sr-only'), children: [label, showsRequiredMark(required, requiredMark) ? (_jsxs("span", { "aria-hidden": "true", className: "sw-field-required", children: [' ', "*"] })) : null] }), _jsx("span", { className: "sw-filter-chips-options", children: options.map((option) => (_jsx(FilterChip, { checked: isChecked(option.value), countAppearance: countAppearance, name: name, onCheckedChange: (checked) => change(option.value, checked), option: option, required: required, tabStopHere: props.multiple ? true : option.value === entry, type: props.multiple ? 'checkbox' : 'radio' }, option.value))) }), _jsx(FieldErrorRegion, { className: "sw-filter-chips-error", id: errorId, message: error })] }));
 }

package/dist/components/FixtureGroup.d.ts

@@ -1,10 +1,14 @@
+import { fixtureGroupSides } from '../css/css-fixture-list.js';
 import { type FixtureGroupProps } from './fixture/types.js';
 export type { FixtureGroupProps } from './fixture/types.js';
+export { fixtureGroupSides };
+export type { FixtureGroupSides } from '../css/css-fixture-list.js';
 /**
  * A run of fixtures under a caption, such as a match day at a venue: the
  * caption names a list of FixtureRows, whose columns line up across the
  * run (one grid, each row a subgrid of it). `titleHidden` keeps the
- * caption as the list's name without drawing it. A blank title throws a
- * `RangeError`.
+ * caption as the list's name without drawing it. `sides="fixed"` keeps the
+ * centre at one place across the runs of a page. A blank title or an unknown
+ * `sides` throws a `RangeError`.
  */
-export declare function FixtureGroup({ children, title, titleHidden, }: FixtureGroupProps): import("react").JSX.Element;
+export declare function FixtureGroup({ children, sides, title, titleHidden, }: FixtureGroupProps): import("react").JSX.Element;

package/dist/components/FixtureGroup.js

@@ -1,17 +1,24 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
+import { cx } from '../class-names.js';
+import { fixtureGroupSides } from '../css/css-fixture-list.js';
+import { isOneOf } from '../is-one-of.js';
 import { FixtureListContext } from './fixture/fixture-list-context.js';
+export { fixtureGroupSides };
 /**
  * A run of fixtures under a caption, such as a match day at a venue: the
  * caption names a list of FixtureRows, whose columns line up across the
  * run (one grid, each row a subgrid of it). `titleHidden` keeps the
- * caption as the list's name without drawing it. A blank title throws a
- * `RangeError`.
+ * caption as the list's name without drawing it. `sides="fixed"` keeps the
+ * centre at one place across the runs of a page. A blank title or an unknown
+ * `sides` throws a `RangeError`.
  */
-export function FixtureGroup({ children, title, titleHidden = false, }) {
+export function FixtureGroup({ children, sides = 'fluid', title, titleHidden = false, }) {
     if (typeof title !== 'string' || !title.trim())
         throw new RangeError('FixtureGroup title must be nonempty');
+    if (!isOneOf(fixtureGroupSides, sides))
+        throw new RangeError(`Unknown FixtureGroup sides: ${String(sides)}`);
     const titleId = useId();
-    return (_jsxs("div", { className: "sw-fixture-group", children: [_jsx("div", { className: titleHidden ? 'sw-sr-only' : 'sw-fixture-group-title', id: titleId, children: title }), _jsx("ul", { "aria-labelledby": titleId, className: "sw-fixture-list", role: "list", children: _jsx(FixtureListContext.Provider, { value: true, children: children }) })] }));
+    return (_jsxs("div", { className: "sw-fixture-group", children: [_jsx("div", { className: titleHidden ? 'sw-sr-only' : 'sw-fixture-group-title', id: titleId, children: title }), _jsx("ul", { "aria-labelledby": titleId, className: cx('sw-fixture-list', sides === 'fixed' && 'sw-fixture-list-sides-fixed'), role: "list", children: _jsx(FixtureListContext.Provider, { value: true, children: children }) })] }));
 }

package/dist/components/Grid.d.ts

@@ -1,9 +1,9 @@
 import { type SpacingStep } from '@scalewing/tokens';
 import { type Breakpoint } from '../css/breakpoints.js';
-import { type GridColumns, type GridFit, gridFits } from '../css/css-grid.js';
+import { type GridColumns, type GridFit, gridFits, type GridRail, gridRails } from '../css/css-grid.js';
 import { type BoxProps } from './Box.js';
 import { type Align } from './Stack.js';
-export { gridFits, type GridColumns, type GridFit };
+export { gridFits, gridRails, type GridColumns, type GridFit, type GridRail };
 export type GridProps = BoxProps & {
     /** Where each child sits in the height of its row; unset, children stretch. */
     align?: Align;
@@ -18,5 +18,13 @@ export type GridProps = BoxProps & {
      */
     fit?: GridFit;
     gap?: SpacingStep;
+    /**
+     * A main column beside a fixed 20rem side rail, the main column taking the
+     * free space: the first child is the main column, the second the rail.
+     * The value is the breakpoint from which they sit side by side (`md`
+     * 48rem, `lg` 64rem); below it they stack, the main column first. Not with
+     * `columns`, `columnsBelow` or `fit`; a child's `columnSpan` is ignored.
+     */
+    rail?: GridRail;
 };
-export declare function Grid({ align, className, columns, columnsBelow, fit, gap, ...rest }: GridProps): import("react").JSX.Element;
+export declare function Grid({ align, className, columns, columnsBelow, fit, gap, rail, ...rest }: GridProps): import("react").JSX.Element;

package/dist/components/Grid.js

@@ -1,21 +1,39 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../class-names.js';
 import { breakpoints } from '../css/breakpoints.js';
-import { gridColumnsBelowClass, gridColumnsClass, gridFitClass, gridFits, } from '../css/css-grid.js';
+import { gridColumnsBelowClass, gridColumnsClass, gridFitClass, gridFits, gridRailClass, gridRails, } from '../css/css-grid.js';
 import { spacingClass } from '../css/spacing-classes.js';
 import { assertGridCount } from '../grid-counts.js';
 import { isOneOf } from '../is-one-of.js';
 import { Box } from './Box.js';
-export { gridFits };
-export function Grid({ align, className, columns, columnsBelow, fit, gap = 0, ...rest }) {
+export { gridFits, gridRails };
+/** Fails closed on a layout that asks for two ways to set the columns. */
+function assertGridRail({ columns, columnsBelow, fit, rail, }) {
+    if (rail === undefined)
+        return;
+    if (!isOneOf(gridRails, rail))
+        throw new RangeError(`Unknown Grid rail: ${String(rail)}`);
+    if (columns !== undefined || columnsBelow !== undefined || fit !== undefined)
+        throw new RangeError('A rail Grid takes no columns, columnsBelow or fit; rail sets them');
+}
+/** The classes that set a grid's columns, from the one way it was asked for. */
+function columnClasses({ columns, fit, rail, }) {
+    if (rail)
+        return gridRailClass(rail);
+    if (fit)
+        return gridFitClass(fit);
+    const fixedColumns = columns ?? 1;
+    assertGridCount('columns', fixedColumns);
+    return gridColumnsClass(fixedColumns);
+}
+export function Grid({ align, className, columns, columnsBelow, fit, gap = 0, rail, ...rest }) {
+    assertGridRail({ columns, columnsBelow, fit, rail });
     if (fit !== undefined) {
         if (!isOneOf(gridFits, fit))
             throw new RangeError(`Unknown Grid fit: ${String(fit)}`);
         if (columns !== undefined || columnsBelow !== undefined)
             throw new RangeError('A fitted Grid takes no columns or columnsBelow; fit sets them');
     }
-    const fixedColumns = columns ?? 1;
-    assertGridCount('columns', fixedColumns);
     const belowClasses = breakpoints.flatMap((breakpoint) => {
         const count = columnsBelow?.[breakpoint];
         if (count === undefined)
@@ -23,5 +41,5 @@ export function Grid({ align, className, columns, columnsBelow, fit, gap = 0, ..
         assertGridCount('columnsBelow', count);
         return [gridColumnsBelowClass(breakpoint, count)];
     });
-    return (_jsx(Box, { className: cx('sw-grid', fit ? gridFitClass(fit) : gridColumnsClass(fixedColumns), ...belowClasses, spacingClass('gap', 'all', gap), align && `sw-align-${align}`, className), ...rest }));
+    return (_jsx(Box, { className: cx('sw-grid', columnClasses({ columns, fit, rail }), ...belowClasses, spacingClass('gap', 'all', gap), align && `sw-align-${align}`, className), ...rest }));
 }

package/dist/components/PageHeader.d.ts

@@ -0,0 +1,40 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** The link back to where the page was reached from, above the title. */
+export type PageHeaderBack = {
+    /** Its words, such as the parent page's name. */
+    label: string;
+    href: string;
+    /**
+     * Called for a plain press (the main button, no modifier key), after the
+     * browser's own navigation is prevented, so a client router moves instead.
+     * Without it the link navigates.
+     */
+    onNavigate?: () => void;
+};
+export type PageHeaderProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+    /** The page's title, its one `h1`, in the `heading` size (28/34). */
+    title: ReactNode;
+    /** A short muted line under the title, in the `bodySm` size (15/22). */
+    subtitle?: ReactNode;
+    /** A link back above the title. */
+    back?: PageHeaderBack;
+    /**
+     * The page's actions, at the title row's end; they move under the words
+     * when they do not fit beside them. Leave it out rather than passing an
+     * empty fragment, which keeps the slot.
+     */
+    actions?: ReactNode;
+    /**
+     * A row under the title, such as Tabs or FilterChips that switch the page.
+     * Leave it out rather than passing an empty fragment, which keeps the slot.
+     */
+    below?: ReactNode;
+};
+/**
+ * A workspace page's opening: an optional link back, the title (`h1`,
+ * `heading` size) with an optional muted subtitle under it and the actions at
+ * its end, and an optional row below. It wraps cleanly when narrow. Place it
+ * inside `main`, where a `header` is no banner landmark. A blank title or
+ * back link throws a `RangeError`.
+ */
+export declare function PageHeader({ actions, back, below, className, subtitle, title, ...rest }: PageHeaderProps): import("react").JSX.Element;

package/dist/components/PageHeader.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { tabStop } from '../tab-stop.js';
+import { plainPress } from './link-press.js';
+import { Text } from './Text.js';
+function isBlank(node) {
+    return (node === undefined ||
+        node === null ||
+        node === false ||
+        (typeof node === 'string' && node.trim() === ''));
+}
+/** Fails closed on a header with no title or a back link with nothing to say. */
+function assertPageHeader({ back, title, }) {
+    if (isBlank(title))
+        throw new RangeError('A PageHeader needs a title');
+    if (back !== undefined && (!back.label?.trim() || !back.href?.trim()))
+        throw new RangeError('A PageHeader back link needs a label and an href');
+}
+/**
+ * A workspace page's opening: an optional link back, the title (`h1`,
+ * `heading` size) with an optional muted subtitle under it and the actions at
+ * its end, and an optional row below. It wraps cleanly when narrow. Place it
+ * inside `main`, where a `header` is no banner landmark. A blank title or
+ * back link throws a `RangeError`.
+ */
+export function PageHeader({ actions, back, below, className, subtitle, title, ...rest }) {
+    assertPageHeader({ back, title });
+    function onBack(event) {
+        if (!back?.onNavigate || !plainPress(event))
+            return;
+        event.preventDefault();
+        back.onNavigate();
+    }
+    return (_jsxs("header", { ...rest, className: cx('sw-page-header', className), children: [back ? (_jsx("a", { className: "sw-page-header-back", href: back.href, onClick: onBack, tabIndex: tabStop, children: back.label })) : null, _jsxs("div", { className: "sw-page-header-row", children: [_jsxs("div", { className: "sw-page-header-words", children: [_jsx(Text, { as: "h1", variant: "heading", children: title }), isBlank(subtitle) ? null : (_jsx(Text, { as: "p", color: "muted", variant: "bodySm", children: subtitle }))] }), isBlank(actions) ? null : (_jsx("div", { className: "sw-page-header-actions", children: actions }))] }), isBlank(below) ? null : (_jsx("div", { className: "sw-page-header-below", children: below }))] }));
+}

package/dist/components/Tabs.d.ts

@@ -1,8 +1,27 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type AccessibleName } from '../accessible-name.js';
+import { type NavCountTone } from './NavCount.js';
 export type TabItem = {
     id: string;
     label: ReactNode;
+    /**
+     * How many things wait behind the tab: the shared count pill after its
+     * label, read in its name ("Postponed 4"). A whole number; 0 (or none)
+     * shows no pill. For a count that only says how many, with nothing to do,
+     * write it in the `label` ("Postponed (4)").
+     */
+    count?: number;
+    /**
+     * What the count means, in the consumer's words ("4 need a time"): read
+     * in the name in place of the bare number. Needs `count`.
+     */
+    countLabel?: string;
+    /**
+     * The pill's colour, NavCount's tones: `danger` (the default), `warning`
+     * (amber) for work that needs the person but is not urgent, `accent` for
+     * news. Needs `count`.
+     */
+    countTone?: NavCountTone;
 };
 export type TabsProps = AccessibleName & {
     /** Prefix for the tab and panel ids, so a `TabPanel` can point back at its tab. */

package/dist/components/Tabs.js

@@ -1,7 +1,8 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, } from 'react';
 import { cx } from '../class-names.js';
+import { NavCount } from './NavCount.js';
 import { useScrollOverflow } from './use-scroll-overflow.js';
 export function tabId(tabsId, id) {
     return `${tabsId}-tab-${id}`;
@@ -9,6 +10,14 @@ export function tabId(tabsId, id) {
 export function tabPanelId(tabsId, id) {
     return `${tabsId}-panel-${id}`;
 }
+/** Fails closed on a count's words or colour with no count to go with them. */
+function assertTabItems(items) {
+    for (const item of items) {
+        if (item.count === undefined &&
+            (item.countLabel !== undefined || item.countTone !== undefined))
+            throw new RangeError('A tab countLabel and countTone come with a count');
+    }
+}
 /**
  * A tab strip with `tablist` semantics for the sections of one page. Arrow
  * keys, Home and End move the focus and select at once; the strip scrolls
@@ -18,6 +27,7 @@ export function tabPanelId(tabsId, id) {
  * keeps it at the top of the viewport over a long panel.
  */
 export function Tabs({ id, items, onChange, sticky = false, value, ...labelProps }) {
+    assertTabItems(items);
     const tabs = useRef(new Map());
     const strip = useRef(null);
     const overflow = useScrollOverflow(strip);
@@ -51,14 +61,14 @@ export function Tabs({ id, items, onChange, sticky = false, value, ...labelProps
     }
     return (_jsx("div", { className: cx('sw-tabs', sticky && 'sw-tabs-sticky', overflow.start && 'sw-scroll-more-start', overflow.end && 'sw-scroll-more-end'), onKeyDown: onKeyDown, ref: strip, role: "tablist", ...labelProps, children: items.map((item) => {
             const selected = item.id === value;
-            return (_jsx("button", { "aria-controls": tabPanelId(id, item.id), "aria-selected": selected, className: cx('sw-tab', selected && 'sw-tab-selected'), id: tabId(id, item.id), onClick: () => select(item), ref: (node) => {
+            return (_jsxs("button", { "aria-controls": tabPanelId(id, item.id), "aria-selected": selected, className: cx('sw-tab', selected && 'sw-tab-selected', Boolean(item.count) && 'sw-tab-counted'), id: tabId(id, item.id), onClick: () => select(item), ref: (node) => {
                     if (node) {
                         tabs.current.set(item.id, node);
                     }
                     else {
                         tabs.current.delete(item.id);
                     }
-                }, role: "tab", tabIndex: selected ? 0 : -1, type: "button", children: item.label }, item.id));
+                }, role: "tab", tabIndex: selected ? 0 : -1, type: "button", children: [item.label, item.count !== undefined ? (_jsx(NavCount, { count: item.count, countLabel: item.countLabel, tone: item.countTone })) : null] }, item.id));
         }) }));
 }
 /** The content of one tab, labelled by its tab and hidden while another tab is current. */

package/dist/components/Text.d.ts

@@ -1,10 +1,12 @@
 import { type SemanticColorKey, type TypographyVariant } from '@scalewing/tokens';
 import { type HTMLAttributes, type LabelHTMLAttributes } from 'react';
+import { textMaxLines, type TextMaxLines } from '../css/css-text.js';
 export type TextElement = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'label' | 'strong';
 export type TextAlign = 'start' | 'center' | 'end';
 /** The faces Text sets its words in: the theme's sans or the platform's monospace. */
 export declare const textFonts: readonly ["sans", "mono"];
 export type TextFont = (typeof textFonts)[number];
+export { textMaxLines, type TextMaxLines };
 export type TextProps = HTMLAttributes<HTMLElement> & Pick<LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'> & {
     align?: TextAlign;
     as?: TextElement;
@@ -18,6 +20,15 @@ export type TextProps = HTMLAttributes<HTMLElement> & Pick<LabelHTMLAttributes<H
      */
     font?: TextFont;
     truncate?: boolean;
+    /**
+     * Cuts the words with "…" after this many lines, such as a long name in
+     * a ContextSwitcher's trigger, so a long one cannot push what follows
+     * it down. Only the drawing is cut: assistive technology still reads
+     * all the words, so show them in full somewhere a sighted person can
+     * reach too. Not with `truncate`; anything but 2 or 3 throws a
+     * `RangeError`.
+     */
+    maxLines?: TextMaxLines;
     variant?: TypographyVariant;
 };
 export declare const Text: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & Pick<LabelHTMLAttributes<HTMLLabelElement>, "htmlFor"> & {
@@ -33,5 +44,14 @@ export declare const Text: import("react").ForwardRefExoticComponent<HTMLAttribu
      */
     font?: TextFont;
     truncate?: boolean;
+    /**
+     * Cuts the words with "…" after this many lines, such as a long name in
+     * a ContextSwitcher's trigger, so a long one cannot push what follows
+     * it down. Only the drawing is cut: assistive technology still reads
+     * all the words, so show them in full somewhere a sighted person can
+     * reach too. Not with `truncate`; anything but 2 or 3 throws a
+     * `RangeError`.
+     */
+    maxLines?: TextMaxLines;
     variant?: TypographyVariant;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Text.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
 import { cx } from '../class-names.js';
+import { textClampClass, textMaxLines, } from '../css/css-text.js';
 /** The faces Text sets its words in: the theme's sans or the platform's monospace. */
 export const textFonts = ['sans', 'mono'];
+export { textMaxLines };
 const defaultElement = {
     body: 'p',
+    bodySm: 'p',
     caption: 'span',
     data: 'span',
     display: 'h1',
@@ -15,9 +18,13 @@ const defaultElement = {
     lead: 'p',
     title: 'h3',
 };
-export const Text = forwardRef(function Text({ align, as, className, color = 'text', font = 'sans', style, truncate = false, variant = 'body', ...rest }, ref) {
+export const Text = forwardRef(function Text({ align, as, className, color = 'text', font = 'sans', maxLines, style, truncate = false, variant = 'body', ...rest }, ref) {
     if (!textFonts.includes(font))
         throw new RangeError(`Unknown Text font: ${String(font)}`);
+    if (maxLines !== undefined && !textMaxLines.includes(maxLines))
+        throw new RangeError(`Unknown Text maxLines: ${String(maxLines)}`);
+    if (maxLines !== undefined && truncate)
+        throw new RangeError('Text takes truncate or maxLines, not both');
     const Component = as ?? defaultElement[variant];
-    return (_jsx(Component, { ref: ref, className: cx(`sw-text-${variant}`, align && `sw-text-align-${align}`, font === 'mono' && 'sw-font-mono', truncate && 'sw-truncate', className), style: { color: `var(--sw-color-${color})`, ...style }, ...rest }));
+    return (_jsx(Component, { ref: ref, className: cx(`sw-text-${variant}`, align && `sw-text-align-${align}`, font === 'mono' && 'sw-font-mono', truncate && 'sw-truncate', maxLines && textClampClass(maxLines), className), style: { color: `var(--sw-color-${color})`, ...style }, ...rest }));
 });

package/dist/components/app-shell/types.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type AppShellContentMaxWidth, type AppShellSidebarTone } from '../../css/css-app-shell.js';
 import { type NavCountTone } from '../NavCount.js';
 import { type NavItemCurrent } from '../nav-items.js';
 export type AppShellNavItem = {
@@ -134,6 +135,20 @@ export type AppShellProps = {
      * shell draws none.
      */
     skipLink?: AppShellSkipLink;
+    /**
+     * Caps the page beside the sidebar: `none` (the default) lets it fill
+     * `main`; `container` centres it at the container width (72rem), so a
+     * sparse table does not stretch on a wide window. `pageBar` stays the full
+     * width of `main`, and a sticky bar in the page keeps sticking, at the
+     * page's width.
+     */
+    contentMaxWidth?: AppShellContentMaxWidth;
+    /**
+     * The sidebar's and the drawer's fill: `surface` (the default) or `subtle`,
+     * a quiet grey that sets the navigation apart from a white page. The words
+     * on it and the current destination keep 4.5:1 in every palette.
+     */
+    sidebarTone?: AppShellSidebarTone;
     /** The page, rendered in `main`. */
     children: ReactNode;
 };

package/dist/components/app-shell/validate.d.ts

@@ -1,7 +1,7 @@
 import { type AppShellProps } from './types.js';
 /**
  * Fails closed on the shell's words (a skip link's too), the menu's count,
- * its groups and their items (ids unique across every group, each with an
- * icon, which is all the rail shows).
+ * its layout options, its groups and their items (ids unique across every
+ * group, each with an icon, which is all the rail shows).
  */
-export declare function assertAppShellProps({ groups, labels, menuCount, menuCountLabel, menuCountTone, navLabel, skipLink, }: Pick<AppShellProps, 'groups' | 'labels' | 'menuCount' | 'menuCountLabel' | 'menuCountTone' | 'navLabel' | 'skipLink'>): void;
+export declare function assertAppShellProps({ contentMaxWidth, groups, labels, menuCount, menuCountLabel, menuCountTone, navLabel, sidebarTone, skipLink, }: Pick<AppShellProps, 'contentMaxWidth' | 'groups' | 'labels' | 'menuCount' | 'menuCountLabel' | 'menuCountTone' | 'navLabel' | 'sidebarTone' | 'skipLink'>): void;

package/dist/components/app-shell/validate.js

@@ -1,3 +1,4 @@
+import { appShellContentMaxWidths, appShellSidebarTones, } from '../../css/css-app-shell.js';
 import { isOneOf } from '../../is-one-of.js';
 import { navCountTones } from '../NavCount.js';
 import { assertNavItems } from '../nav-items.js';
@@ -45,10 +46,15 @@ function assertMenuCount({ menuCount, menuCountLabel, menuCountTone, }) {
 }
 /**
  * Fails closed on the shell's words (a skip link's too), the menu's count,
- * its groups and their items (ids unique across every group, each with an
- * icon, which is all the rail shows).
+ * its layout options, its groups and their items (ids unique across every
+ * group, each with an icon, which is all the rail shows).
  */
-export function assertAppShellProps({ groups, labels, menuCount, menuCountLabel, menuCountTone, navLabel, skipLink, }) {
+export function assertAppShellProps({ contentMaxWidth, groups, labels, menuCount, menuCountLabel, menuCountTone, navLabel, sidebarTone, skipLink, }) {
+    if (contentMaxWidth !== undefined &&
+        !isOneOf(appShellContentMaxWidths, contentMaxWidth))
+        throw new RangeError(`AppShell contentMaxWidth must be one of ${appShellContentMaxWidths.join(', ')}`);
+    if (sidebarTone !== undefined && !isOneOf(appShellSidebarTones, sidebarTone))
+        throw new RangeError(`AppShell sidebarTone must be one of ${appShellSidebarTones.join(', ')}`);
     if (isBlank(navLabel))
         throw new RangeError('AppShell navLabel must be nonempty');
     if (isBlank(labels?.openMenu) || isBlank(labels?.closeMenu))