@scalewing/react 1.48.0 → 1.49.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @scalewing/react
 
+## 1.49.0
+
+### Minor Changes
+
+- 2ae2974: `Hero`: a public page's opening, a `section` named by its title. An optional `eyebrow` (muted label words), the `title` (the page's `h1` in the `hero` size), an optional `lead` and `actions`, and an optional `media` picture that keeps its own width beside the words from `md` and sits under them below it, where the actions stack to the full width. With no picture the words keep the reading width. New classes `sw-hero*`; a blank `title` throws a `RangeError`. No new tokens or dependencies. Request: `docs/requests/teisoro-hero.md`.
+- dc0c896: `EmptyState` (new): where a list or a page has nothing yet, a centred panel on the surface with a dashed hairline edge that fills its column (a page column or a Card). `title` is a heading at `titleAs` (`h2` by default, or `h3`; `emptyStateTitleElements`), `description` a muted line, `icon` a decorative glyph in a quiet square, `actions` a centred row that wraps (44 px Buttons on a coarse pointer). Forced colours keep the dashed edge. A blank `title` or `description` or an unknown `titleAs` throws a `RangeError`. New classes `sw-empty-state`, `sw-empty-state-icon`, `sw-empty-state-title`, `sw-empty-state-description`, `sw-empty-state-actions`. No new tokens or dependencies. Request: `docs/requests/futmas-empty-state.md`.
+- 6d3cbe8: `Grid` takes `fit` (`narrow` 15rem, `medium` 16.25rem, `wide` 18.75rem): as many columns as the grid's width holds at that minimum, sharing the row, one when the grid is narrower, so a row of cards reflows with no breakpoint. Not with `columns` or `columnsBelow`; either, or an unknown `fit`, throws a `RangeError`. New classes `sw-grid-fit-*` and the `gridFits` list and `GridFit` type. No new tokens or dependencies. Request: `docs/requests/teisoro-grid-fit.md`.
+- b466bbb: `Text` takes the tokens' new variants `hero` (an `h1` by default), `headline` (an `h2`) and `lead` (a `p`), each stepping down to its compact size below `md` like `display` and `heading`. New classes `sw-text-hero`, `sw-text-headline`, `sw-text-lead`, generated from the tokens. Needs `@scalewing/tokens` 1.7.0. Request: `docs/requests/teisoro-showcase-type.md`.
+- 7b57979: `Stepper` takes `unit` (opt-in), a short muted word after the count inside its frame, such as "min" or "players". The count is read with it (`aria-valuetext` "90 min") unless `valueText` says it in words; the unit itself is hidden from assistive technology. The frame draws the control surface, focus ring and the invalid, changed and disabled states; the count keeps its few-digit width, so the frame never follows it. A blank `unit` throws a `RangeError`. New classes `sw-stepper-count`, `sw-stepper-unit`. No new tokens or dependencies. Request: `docs/requests/futmas-stepper-unit.md`.
+
+### Patch Changes
+
+- Updated dependencies [b466bbb]
+  - @scalewing/tokens@1.7.0
+
 ## 1.48.0
 
 ### Minor Changes

package/README.md

@@ -35,10 +35,12 @@ import {
   InfoTip,
   Separator,
   Band,
+  Hero,
   SiteFooter,
   SiteHeader,
   DescriptionList,
   DescriptionItem,
+  EmptyState,
   FixtureGroup,
   FixtureRow,
   ListGroup,
@@ -189,7 +191,7 @@ A chosen photo can show itself: `value.preview` is the address of a small image
 />
 ```
 
-`Stepper` is a whole-number count changed with − and + or typed. The count is a native text input with `role="spinbutton"` and `inputmode="numeric"`, named by `label` (visible above it, or `labelVisuallyHidden` where table headers say it) and the one tab stop: ArrowUp and ArrowDown step it by `step` (default 1), Home goes to `min` and End to a finite `max` (a range below zero takes `inputmode="text"`, since a phone's numeric pad has no minus key). The − and + buttons are pointer targets outside the tab order, named by `decrementLabel` and `incrementLabel` (your copy), and a press on one leaves focus where it was; the count and both buttons sit in a `group` named by the label. − is disabled at `min` (default 0) and + at `max` (no upper bound when left out). `value` is a count or `null` for an empty box, which the buttons treat as `min` and `placeholder` can fill. Typed text is refused unless it is digits (with a leading minus when `min` is below zero), so `onChange` only receives a whole number or `null`; a typed count is reported as typed even outside the bounds, so say why in `error` (a polite message, `aria-invalid` and the danger border, as `Field`'s), and the buttons then move it back inside them. `aria-describedby` takes ids of elements that describe the count, such as the value it adds up to, read before an `error`'s message. `changed` takes `Field`'s changed look; `readOnly` keeps the count focusable and hides the buttons in their own room; `disabled` stops all three. `limitAppearance="plain"` (default `"faded"`) keeps − at `min` and + at `max` in their usual look instead of faded, for a count sheet where a faded − reads as broken; they are still disabled, a disabled or read-only Stepper is unchanged, forced colors still grey them, and an unknown value throws a `RangeError`. The count is a few digits wide and keeps that width (`width="fixed"`), or fills its container (`width="full"`, for a table cell). Bounds that are not whole numbers, `min` above `max`, or a `step` that is not above zero throw a `RangeError`.
+`Stepper` is a whole-number count changed with − and + or typed. The count is a native text input with `role="spinbutton"` and `inputmode="numeric"`, named by `label` (visible above it, or `labelVisuallyHidden` where table headers say it) and the one tab stop: ArrowUp and ArrowDown step it by `step` (default 1), Home goes to `min` and End to a finite `max` (a range below zero takes `inputmode="text"`, since a phone's numeric pad has no minus key). The − and + buttons are pointer targets outside the tab order, named by `decrementLabel` and `incrementLabel` (your copy), and a press on one leaves focus where it was; the count and both buttons sit in a `group` named by the label. − is disabled at `min` (default 0) and + at `max` (no upper bound when left out). `value` is a count or `null` for an empty box, which the buttons treat as `min` and `placeholder` can fill. Typed text is refused unless it is digits (with a leading minus when `min` is below zero), so `onChange` only receives a whole number or `null`; a typed count is reported as typed even outside the bounds, so say why in `error` (a polite message, `aria-invalid` and the danger border, as `Field`'s), and the buttons then move it back inside them. `aria-describedby` takes ids of elements that describe the count, such as the value it adds up to, read before an `error`'s message. `changed` takes `Field`'s changed look; `readOnly` keeps the count focusable and hides the buttons in their own room; `disabled` stops all three. `limitAppearance="plain"` (default `"faded"`) keeps − at `min` and + at `max` in their usual look instead of faded, for a count sheet where a faded − reads as broken; they are still disabled, a disabled or read-only Stepper is unchanged, forced colors still grey them, and an unknown value throws a `RangeError`. The count is a few digits wide and keeps that width (`width="fixed"`), or fills its container (`width="full"`, for a table cell). `unit` (opt-in) is a short muted word after the count inside its frame, such as "min" or "players": the frame (`sw-stepper-count`) draws the control surface, focus ring and the invalid, changed and disabled states, a press on the word focuses the count, and the count keeps its few-digit width with its digits against the word, so the frame never follows it. The word (`sw-stepper-unit`) is hidden from assistive technology; the count is read with it (`aria-valuetext` "90 min", none while the box is empty), and a `valueText` you pass wins. The default joins the count and the word as given, so a word that changes with the count ("players") reads "1 players": pass `valueText` in your language's right form ("1 player", "11 players"). A blank `unit` throws a `RangeError`. Bounds that are not whole numbers, `min` above `max`, or a `step` that is not above zero throw a `RangeError`.
 
 ```tsx
 <Stepper
@@ -840,6 +842,24 @@ The consumer needs no PDF.js dependency of its own. With another bundler, build
 <Skeleton label="Loading rangers" variant="rows" lines={4} />
 ```
 
+`EmptyState` is where a list or a page has nothing yet: a centred panel on the surface with a dashed hairline edge (the md radius) that fills its column, so it sits in a page column or inside a `Card`. `title` (required) says what is empty ("No teams in Spring 2027 yet"), a heading at `titleAs` (`emptyStateTitleElements`: `"h2"` by default in a page, `"h3"` inside a card under its own heading) in title type. `description` is a muted line under it, usually what to do next. `icon` is a decorative glyph (Lucide in your app) in a quiet subtle-fill square over the title, hidden from assistive technology. `actions` are the ways out, such as a primary and a neutral `Button`, in a centred row that wraps (a 44 px target on a touch screen). The panel is a plain `div`, not a landmark or a live region: if it replaces a list after a person's action, say so yourself. An empty slot (nothing, an empty Fragment or array, or blank words) draws no box. Inside a bordered `Card` (the default glass or `outlined`) the dashed edge sits just inside the card's own hairline and reads as a double edge: where the empty panel is the card's whole content, use it in place of the card, or in an `elevated` or `filled` Card, which draw no hairline. Forced colours keep the dashed edge. A blank `title` or `description` or an unknown `titleAs` throws a `RangeError`.
+
+```tsx
+<EmptyState
+  icon={<Users />}
+  title="No nests counted yet"
+  description="Bring back last spring's nests, or paste a list."
+  actions={
+    <>
+      <Button onPress={copy}>Copy last spring's 12 nests</Button>
+      <Button variant="neutral" onPress={paste}>
+        Paste a list
+      </Button>
+    </>
+  }
+/>
+```
+
 `GlyphTile` is a small rounded square in a categorical colour with the consumer's glyph in white: the mark of a kind beside its name, such as a service in a list. `hue` is one of the `@scalewing/tokens` categorical colours (`green`, `blue`, `orange`, `purple`, `teal`, `rose`, or `neutral`); which kind takes which hue is yours. `size` is `sm` (24), `md` (28, the default) or `lg` (32); the glyph is drawn at spacing step 4 in white, which keeps 3:1 on every fill; pass the SVG (a Lucide component) as the tile's direct child, since only a direct-child SVG is sized. It is always `aria-hidden`, so put the kind's name in visible text beside it. An unknown `hue` or `size` throws a `RangeError`. It may hold up to three letters in place of the glyph, such as initials (`<GlyphTile hue="neutral" size="sm">NSL</GlyphTile>`): words given as its children are drawn in one line at weight 600 and sized from the tile, not the text round it (one letter at half its side, two at 0.42, three at a third), so they fit every size; blank words or more than three letters throw a `RangeError`.
 
 ```tsx
@@ -1018,6 +1038,18 @@ const { headings, omissions } = inspectMarkdown(page.body, {
 />
 ```
 
+`Hero` is a public page's opening, a `section` named by its title: an optional `eyebrow` (muted label words), the `title` (the page's one `h1`, in the `hero` size), an optional `lead` (the `lead` size) and `actions` (links or buttons in a wrapping row, stacked to the full width below `md`), with an optional `media` picture. From `md` the picture keeps its own width at the row's end and the words take the rest; below `md` it sits centred under the words. With no picture the words keep the reading width (`--sw-reading-max`). Put it in the page's column (`sw-container`); it sets no gutter or fill of its own. The title always names the section (`aria-labelledby` is not a prop). Leave out `actions` or `media` rather than passing an empty fragment, which keeps its row or column. A blank `title` throws a `RangeError`.
+
+```tsx
+<Hero
+  eyebrow="For birdwatchers"
+  title="Every heron counted."
+  lead="The north marsh in every season, from the hide to the shore."
+  actions={<ButtonLink href="/visit">Plan a visit</ButtonLink>}
+  media={<img alt="The heron hide at dawn" src="/hide.jpg" />}
+/>
+```
+
 `SiteFooter` is a public site's footer on the dark inverse band (`Band tone="inverse"`, so a brand moves it with a theme overlay of `inverse`). Supply `brand` (such as a logo for a dark background), an optional `tagline`, and `groups`: each `{ id, label, links }` is a `nav` named by its label, which shows above its links (hidden from assistive technology, since the `nav` already carries it). Each link is `{ id, label, href, current?, lang?, hrefLang? }`; `lang` and `hrefLang` pass through to the link unchecked; `current` sets `aria-current="page"` and draws it in the band's words at label weight, the others in its muted words, underlined on hover and focus. `legal` and `end` fill the bottom row past a hairline, such as the copyright and a language switch. Below `md` the brand takes the full width and the groups two columns; from `md` the brand and the groups share one spread row. Links get the 44 px target on a coarse pointer. Put it last in the page's `body` (outside a `section` or `article`) so it is the page's `contentinfo` landmark. No groups, a group with no links, blank or repeated ids, blank labels or a blank `href` throw a `RangeError`.
 
 ```tsx
@@ -1181,7 +1213,7 @@ A row can also carry three trailing parts. `unread` marks it new for the person,
 
 `--sw-color-accentSubtle` is the accent tint from `@scalewing/tokens`: a quiet fill behind accent text or glyphs that keeps 4.5:1. The stylesheet and every palette file set it, and a palette that moves the accent or surface retints it.
 
-`Text` steps `display` and `heading` down to the compact token sizes below the `md` breakpoint; consumers do not size type per viewport.
+`Text` steps `hero`, `display`, `headline`, `heading` and `lead` down to the compact token sizes below the `md` breakpoint; consumers do not size type per viewport. `hero` (an `h1`), `headline` (an `h2`) and `lead` (a `p`) are a public page's sizes: its one opening title, its section titles and the sentence under them; an app's screens keep `display` and `heading`.
 
 `sw-container-reading` centres a column at the reading width (`--sw-reading-max`, 46rem, `Article`'s), as `sw-container` centres a page's column at the container width (72rem): `width: 100%`, the max width and auto inline margins, full width below it. Use it for a form or text that reads better narrower than the page, such as an open form of one column. As with `sw-container`, the width is the content box's, so put padding or a border on a child.
 
@@ -1193,6 +1225,16 @@ A row can also carry three trailing parts. `unread` marks it new for the person,
 
 `Grid` places children in one to four (or six) equal-width columns with a token `gap` step. `columnsBelow={{ md: 2 }}` drops to fewer columns below the `md` breakpoint so tiles and stat cards stay readable on a phone. It accepts every `Box` prop.
 
+`fit` (`narrow` 15rem, `medium` 16.25rem, `wide` 18.75rem) fits the columns to the grid's width instead of a fixed count: as many columns as fit at that minimum, sharing the row, and one column when the grid is narrower than it, so a row of cards reflows on a tablet and stacks on a phone with no breakpoint. A fitted grid takes no `columns` or `columnsBelow` (either throws a `RangeError`, as an unknown `fit` does); keep `columnSpan` for fixed-column grids. `gridFits` lists the names.
+
+```tsx
+<Grid fit="narrow" gap={4}>
+  {habitats.map((habitat) => (
+    <Card key={habitat.id}>…</Card>
+  ))}
+</Grid>
+```
+
 Every `Box`-based component (`Box`, `Stack`, `Inline`, `Card`, `Grid`, …) takes `columnSpan` (1, 2, 3, 4 or 6) to cover several columns of the `Grid` it sits in directly, through the generated `sw-grid-span-*` classes. A span is capped at the columns the grid has at the current width, so it never adds an implicit column, and `columnsBelow` still decides the phone layout. A form about twice the width of a side panel, stacking below `md`:
 
 ```tsx

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+export declare const emptyStateTitleElements: readonly ["h2", "h3"];
+/** The title's heading level: `h2` (the default) in a page, `h3` in a card under its own heading. */
+export type EmptyStateTitleElement = (typeof emptyStateTitleElements)[number];
+export type EmptyStateProps = {
+    /** What is empty, in the consumer's words ("No teams in Spring 2027 yet"). */
+    title: string;
+    /** `h2` (the default) in a page column; `h3` inside a card under its own heading. */
+    titleAs?: EmptyStateTitleElement;
+    /** A muted line under the title: what to do next. Not blank. */
+    description?: string;
+    /** A decorative glyph over the title (Lucide in the consumer), hidden from assistive technology. */
+    icon?: ReactNode;
+    /** The ways out, such as Buttons, in a centred row that wraps. */
+    actions?: ReactNode;
+};
+/**
+ * Where a list or a page has nothing yet: a centred panel on the surface
+ * with a dashed hairline edge, an optional decorative glyph, a title, a
+ * muted line and the actions that fill it. It fills its column, so it fits
+ * a page column or a Card.
+ */
+export declare function EmptyState({ title, titleAs, description, icon, actions, }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/EmptyState.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement } from 'react';
+import { isOneOf } from '../is-one-of.js';
+import { Text } from './Text.js';
+export const emptyStateTitleElements = ['h2', 'h3'];
+/** Fails closed on blank words or an unknown heading level. */
+function assertEmptyState({ title, titleAs, description }) {
+    if (typeof title !== 'string' || !title.trim())
+        throw new RangeError('EmptyState title must be nonempty');
+    if (titleAs !== undefined && !isOneOf(emptyStateTitleElements, titleAs))
+        throw new RangeError(`Unknown EmptyState titleAs: ${String(titleAs)}`);
+    if (description !== undefined &&
+        (typeof description !== 'string' || !description.trim()))
+        throw new RangeError('EmptyState description must be nonempty');
+}
+/**
+ * Whether a slot draws anything: nothing, a boolean, blank words, an empty
+ * array or a Fragment holding only those is no content, so the slot's box
+ * (and its gap) is left out.
+ */
+function hasContent(node) {
+    return Children.toArray(node).some((child) => {
+        if (typeof child === 'string')
+            return child.trim() !== '';
+        if (isValidElement(child) &&
+            child.type === Fragment)
+            return hasContent(child.props.children);
+        return true;
+    });
+}
+/**
+ * Where a list or a page has nothing yet: a centred panel on the surface
+ * with a dashed hairline edge, an optional decorative glyph, a title, a
+ * muted line and the actions that fill it. It fills its column, so it fits
+ * a page column or a Card.
+ */
+export function EmptyState({ title, titleAs = 'h2', description, icon, actions, }) {
+    assertEmptyState({ title, titleAs, description });
+    return (_jsxs("div", { className: "sw-empty-state", children: [hasContent(icon) ? (_jsx("span", { "aria-hidden": "true", className: "sw-empty-state-icon", children: icon })) : null, _jsx(Text, { as: titleAs, className: "sw-empty-state-title", variant: "title", children: title }), description !== undefined ? (_jsx(Text, { as: "p", className: "sw-empty-state-description", color: "muted", children: description })) : null, hasContent(actions) ? (_jsx("div", { className: "sw-empty-state-actions", children: actions })) : null] }));
+}

package/dist/components/Grid.d.ts

@@ -1,14 +1,22 @@
 import { type SpacingStep } from '@scalewing/tokens';
 import { type Breakpoint } from '../css/breakpoints.js';
-import { type GridColumns } from '../css/css-grid.js';
+import { type GridColumns, type GridFit, gridFits } from '../css/css-grid.js';
 import { type BoxProps } from './Box.js';
 import { type Align } from './Stack.js';
-export type { GridColumns };
+export { gridFits, type GridColumns, type GridFit };
 export type GridProps = BoxProps & {
     /** Where each child sits in the height of its row; unset, children stretch. */
     align?: Align;
     columns?: GridColumns;
     columnsBelow?: Partial<Record<Breakpoint, GridColumns>>;
+    /**
+     * Fits the columns to the grid's width instead of a fixed count: as many
+     * as fit at the named minimum (`narrow` 15rem, `medium` 16.25rem, `wide`
+     * 18.75rem), sharing the row, one column when narrower. Not with
+     * `columns` or `columnsBelow`; a child's `columnSpan` is ignored in a
+     * fitted grid, where every child takes one column.
+     */
+    fit?: GridFit;
     gap?: SpacingStep;
 };
-export declare function Grid({ align, className, columns, columnsBelow, gap, ...rest }: GridProps): import("react").JSX.Element;
+export declare function Grid({ align, className, columns, columnsBelow, fit, gap, ...rest }: GridProps): import("react").JSX.Element;

package/dist/components/Grid.js

@@ -1,12 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../class-names.js';
 import { breakpoints } from '../css/breakpoints.js';
-import { gridColumnsBelowClass, gridColumnsClass, } from '../css/css-grid.js';
+import { gridColumnsBelowClass, gridColumnsClass, gridFitClass, gridFits, } 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 function Grid({ align, className, columns = 1, columnsBelow, gap = 0, ...rest }) {
-    assertGridCount('columns', columns);
+export { gridFits };
+export function Grid({ align, className, columns, columnsBelow, fit, gap = 0, ...rest }) {
+    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)
@@ -14,5 +23,5 @@ export function Grid({ align, className, columns = 1, columnsBelow, gap = 0, ...
         assertGridCount('columnsBelow', count);
         return [gridColumnsBelowClass(breakpoint, count)];
     });
-    return (_jsx(Box, { className: cx('sw-grid', gridColumnsClass(columns), ...belowClasses, spacingClass('gap', 'all', gap), align && `sw-align-${align}`, className), ...rest }));
+    return (_jsx(Box, { className: cx('sw-grid', fit ? gridFitClass(fit) : gridColumnsClass(fixedColumns), ...belowClasses, spacingClass('gap', 'all', gap), align && `sw-align-${align}`, className), ...rest }));
 }

package/dist/components/Hero.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type HeroProps = Omit<HTMLAttributes<HTMLElement>, 'aria-labelledby' | 'children' | 'style' | 'title'> & {
+    /** The page's title, its one `h1`, in the `hero` size. */
+    title: ReactNode;
+    /** A short line above the title saying who or what the page is for. */
+    eyebrow?: ReactNode;
+    /** The sentence under the title, in the `lead` size. */
+    lead?: ReactNode;
+    /**
+     * Links or buttons in a row, stacked to the full width below `md`. Leave
+     * it out rather than passing an empty fragment, which keeps the row.
+     */
+    actions?: ReactNode;
+    /**
+     * A picture beside the words from `md`, under them below it. Leave it out
+     * rather than passing an empty fragment, which keeps its column.
+     */
+    media?: ReactNode;
+};
+/**
+ * A public page's opening, as a `section` named by its title: an optional
+ * eyebrow, the title (`h1`, `hero` size), an optional lead (`lead` size)
+ * and actions, with an optional picture beside them from `md`. The title
+ * always names the section. A blank title throws a `RangeError`.
+ */
+export declare function Hero({ actions, className, eyebrow, lead, media, title, ...rest }: HeroProps): import("react").JSX.Element;

package/dist/components/Hero.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cx } from '../class-names.js';
+import { Text } from './Text.js';
+function isBlank(node) {
+    return (node === undefined ||
+        node === null ||
+        node === false ||
+        (typeof node === 'string' && node.trim() === ''));
+}
+/**
+ * A public page's opening, as a `section` named by its title: an optional
+ * eyebrow, the title (`h1`, `hero` size), an optional lead (`lead` size)
+ * and actions, with an optional picture beside them from `md`. The title
+ * always names the section. A blank title throws a `RangeError`.
+ */
+export function Hero({ actions, className, eyebrow, lead, media, title, ...rest }) {
+    const titleId = useId();
+    if (isBlank(title))
+        throw new RangeError('A Hero needs a title');
+    const withMedia = !isBlank(media);
+    return (_jsxs("section", { ...rest, "aria-labelledby": titleId, className: cx('sw-hero', withMedia && 'sw-hero-with-media', className), children: [_jsxs("div", { className: "sw-hero-text", children: [isBlank(eyebrow) ? null : (_jsx(Text, { color: "muted", as: "p", variant: "label", children: eyebrow })), _jsx(Text, { id: titleId, variant: "hero", children: title }), isBlank(lead) ? null : _jsx(Text, { variant: "lead", children: lead }), isBlank(actions) ? null : (_jsx("div", { className: "sw-hero-actions", children: actions }))] }), withMedia ? _jsx("div", { className: "sw-hero-media", children: media }) : null] }));
+}

package/dist/components/Stepper.d.ts

@@ -36,8 +36,18 @@ export type StepperProps = {
     disabled?: boolean;
     /** Readable and focusable, never changed: the buttons are hidden and keep their room. */
     readOnly?: boolean;
-    /** Says the count in words for assistive technology (`aria-valuetext`), such as "12 straps". */
+    /**
+     * Says the count in words for assistive technology (`aria-valuetext`),
+     * such as "12 straps". It wins over the count and `unit` read together.
+     */
     valueText?: string;
+    /**
+     * A short muted word after the count, inside its frame, such as "min".
+     * Without `valueText` the count is read with it ("90 min"), word for
+     * word: a unit that changes with the count ("players") reads "1 players",
+     * so pass `valueText` with the right form ("1 player"). Not blank.
+     */
+    unit?: string;
     /**
      * Ids of elements that describe the count, such as the value it adds up
      * to; read before an `error`'s message.

package/dist/components/Stepper.js

@@ -2,9 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useState, } from 'react';
 import { cx } from '../class-names.js';
-import { assertStepperBounds, readStepperEntry, stepperMoves, stepperText, } from '../stepper-count.js';
+import { assertStepperBounds, assertStepperUnit, readStepperEntry, stepperMoves, stepperText, stepperValueText, } from '../stepper-count.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { FieldLabelText } from './FieldLabelText.js';
+import { StepperCountFrame } from './stepper/StepperCountFrame.js';
 export const stepperLimitAppearances = ['faded', 'plain'];
 /** Keeps focus where it was (the count, or nowhere) when a button is pressed. */
 function keepFocus(event) {
@@ -15,9 +16,10 @@ function keepFocus(event) {
  * tab stop (the count, a spin button that ArrowUp and ArrowDown step), with
  * the buttons as pointer targets beside it. − stops at `min`, + at `max`.
  */
-export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden = false, value, onChange, min = 0, max = Number.POSITIVE_INFINITY, step = 1, decrementLabel, incrementLabel, error, changed = false, disabled = false, readOnly = false, valueText, 'aria-describedby': describedBy, placeholder, name, width = 'fixed', limitAppearance = 'faded', }, ref) {
+export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden = false, value, onChange, min = 0, max = Number.POSITIVE_INFINITY, step = 1, decrementLabel, incrementLabel, error, changed = false, disabled = false, readOnly = false, valueText, unit, 'aria-describedby': describedBy, placeholder, name, width = 'fixed', limitAppearance = 'faded', }, ref) {
     const bounds = { min, max, step };
     assertStepperBounds(bounds);
+    assertStepperUnit(unit);
     if (!stepperLimitAppearances.includes(limitAppearance))
         throw new RangeError(`Unknown Stepper limitAppearance: ${String(limitAppearance)}`);
     if (value !== null && !Number.isSafeInteger(value))
@@ -76,10 +78,10 @@ export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden
     return (_jsxs("div", { className: cx('sw-stepper', width === 'full' && 'sw-stepper-full', invalid && 'sw-stepper-invalid', changed && !invalid && 'sw-stepper-changed', readOnly && 'sw-stepper-readonly', limitAppearance === 'plain' &&
             !disabled &&
             !readOnly &&
-            'sw-stepper-limit-plain'), children: [_jsx("label", { className: labelVisuallyHidden ? 'sw-sr-only' : undefined, htmlFor: inputId, id: labelId, children: _jsx(FieldLabelText, { label: label }) }), _jsxs("div", { "aria-labelledby": labelId, className: "sw-stepper-track", role: "group", children: [_jsx("button", { "aria-controls": inputId, "aria-label": decrementLabel, className: "sw-stepper-button", disabled: moves.down === null, onClick: () => move(moves.down), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: '−' }) }), _jsx("input", { ref: ref, "aria-describedby": [describedBy?.trim() || null, invalid ? errorId : null]
-                            .filter((id) => id !== null)
-                            .join(' ') || undefined, "aria-invalid": invalid || undefined, "aria-valuemax": Number.isFinite(max) ? max : undefined, "aria-valuemin": min, "aria-valuenow": value ?? undefined, "aria-valuetext": valueText, autoComplete: "off", className: "sw-stepper-input", disabled: disabled, id: inputId, 
-                        // iOS's numeric pad has no minus key, so a range below zero takes
-                        // the text keyboard.
-                        inputMode: allowsNegative ? 'text' : 'numeric', name: name, onBlur: () => setDraft(null), onChange: onType, onKeyDown: onKeyDown, placeholder: placeholder, readOnly: readOnly, role: "spinbutton", type: "text", value: text }), _jsx("button", { "aria-controls": inputId, "aria-label": incrementLabel, className: "sw-stepper-button", disabled: moves.up === null, onClick: () => move(moves.up), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "+" }) })] }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
+            'sw-stepper-limit-plain'), children: [_jsx("label", { className: labelVisuallyHidden ? 'sw-sr-only' : undefined, htmlFor: inputId, id: labelId, children: _jsx(FieldLabelText, { label: label }) }), _jsxs("div", { "aria-labelledby": labelId, className: "sw-stepper-track", role: "group", children: [_jsx("button", { "aria-controls": inputId, "aria-label": decrementLabel, className: "sw-stepper-button", disabled: moves.down === null, onClick: () => move(moves.down), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: '−' }) }), _jsx(StepperCountFrame, { unit: unit, children: _jsx("input", { ref: ref, "aria-describedby": [describedBy?.trim() || null, invalid ? errorId : null]
+                                .filter((id) => id !== null)
+                                .join(' ') || undefined, "aria-invalid": invalid || undefined, "aria-valuemax": Number.isFinite(max) ? max : undefined, "aria-valuemin": min, "aria-valuenow": value ?? undefined, "aria-valuetext": stepperValueText(value, unit, valueText), autoComplete: "off", className: "sw-stepper-input", disabled: disabled, id: inputId, 
+                            // iOS's numeric pad has no minus key, so a range below zero takes
+                            // the text keyboard.
+                            inputMode: allowsNegative ? 'text' : 'numeric', name: name, onBlur: () => setDraft(null), onChange: onType, onKeyDown: onKeyDown, placeholder: placeholder, readOnly: readOnly, role: "spinbutton", type: "text", value: text }) }), _jsx("button", { "aria-controls": inputId, "aria-label": incrementLabel, className: "sw-stepper-button", disabled: moves.up === null, onClick: () => move(moves.up), onMouseDown: keepFocus, tabIndex: -1, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "+" }) })] }), _jsx(FieldErrorRegion, { className: "sw-field-error", id: errorId, message: error })] }));
 });

package/dist/components/Text.js

@@ -7,7 +7,10 @@ const defaultElement = {
     data: 'span',
     display: 'h1',
     heading: 'h2',
+    headline: 'h2',
+    hero: 'h1',
     label: 'span',
+    lead: 'p',
     title: 'h3',
 };
 export const Text = forwardRef(function Text({ align, as, className, color = 'text', style, truncate = false, variant = 'body', ...rest }, ref) {

package/dist/components/stepper/StepperCountFrame.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export type StepperCountFrameProps = {
+    /** The count's input. */
+    children: ReactNode;
+    /** A short word after the count; no frame is drawn without one. */
+    unit?: string;
+};
+/**
+ * The count with its unit inside one control frame ("90 min"), as Field's
+ * suffix: the frame draws the control surface and focus ring, and the input
+ * inside it drops its own. The unit is hidden from assistive technology,
+ * which hears it in the count's `aria-valuetext` instead. Without a unit the
+ * input is the frame, unchanged.
+ */
+export declare function StepperCountFrame({ children, unit }: StepperCountFrameProps): import("react").JSX.Element;

package/dist/components/stepper/StepperCountFrame.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * A press on the frame's own chrome (the unit or the padding) focuses the
+ * count, as the text cursor over it promises. A press on the input itself
+ * keeps the browser's own caret placement and selection.
+ */
+function focusCount(event) {
+    const input = event.currentTarget.querySelector('input');
+    if (!input || input.disabled || event.target === input)
+        return;
+    event.preventDefault();
+    input.focus();
+}
+/**
+ * The count with its unit inside one control frame ("90 min"), as Field's
+ * suffix: the frame draws the control surface and focus ring, and the input
+ * inside it drops its own. The unit is hidden from assistive technology,
+ * which hears it in the count's `aria-valuetext` instead. Without a unit the
+ * input is the frame, unchanged.
+ */
+export function StepperCountFrame({ children, unit }) {
+    if (unit === undefined)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("span", { className: "sw-stepper-count", onMouseDown: focusCount, children: [children, _jsx("span", { "aria-hidden": "true", className: "sw-stepper-unit", children: unit.trim() })] }));
+}

package/dist/css/css-components.js

@@ -43,6 +43,7 @@ import { cssSwitchClasses } from './css-switch.js';
 import { cssTextClasses } from './css-text.js';
 import { cssFontMonoClasses } from './css-font-mono.js';
 import { cssSkeletonClasses } from './css-skeleton.js';
+import { cssEmptyStateClasses } from './css-empty-state.js';
 import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
 import { cssNoticeClasses } from './css-notice.js';
@@ -51,6 +52,7 @@ import { cssTooltipClasses } from './css-tooltip.js';
 import { cssInfoTipClasses } from './css-info-tip.js';
 import { cssSeparatorClasses } from './css-separator.js';
 import { cssBandClasses } from './css-band.js';
+import { cssHeroClasses } from './css-hero.js';
 import { cssSiteFooterClasses } from './css-site-footer.js';
 import { cssSiteHeaderClasses } from './css-site-header.js';
 import { cssStatTileClasses } from './css-stat-tile.js';
@@ -200,6 +202,8 @@ ${cssSectionNavClasses()}
 
 ${cssBandClasses()}
 
+${cssHeroClasses()}
+
 ${cssSiteFooterClasses()}
 
 ${cssSiteHeaderClasses()}
@@ -237,6 +241,8 @@ ${cssSpinnerClasses()}
 
 ${cssSkeletonClasses()}
 
+${cssEmptyStateClasses()}
+
 ${cssProgressClasses()}
 
 ${cssNoticeClasses()}

package/dist/css/css-empty-state.d.ts

@@ -0,0 +1,2 @@
+export declare function cssEmptyStateClasses(): string;
+export declare function emptyStateClassCatalog(): string[];

package/dist/css/css-empty-state.js

@@ -0,0 +1,77 @@
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+/*
+ * EmptyState: a centred column on the surface inside a dashed hairline
+ * (the md radius), spacing step 8 above and below and step 4 at the sides,
+ * its parts a step 3 apart. The glyph sits in a decorative step-8 square of
+ * the subtle fill in the muted colour, a direct-child SVG drawn at step 5.
+ * The title and line keep a readable measure and wrap; a long word breaks.
+ * The actions are a centred row that wraps, a step 2 apart, each Button a
+ * 44 px target on a coarse pointer. Forced colours keep the dashed edge in
+ * the system's border colour and draw the glyph in CanvasText.
+ */
+export function cssEmptyStateClasses() {
+    return `.sw-empty-state {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border: 1px dashed var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-8) var(--sw-space-4);
+  text-align: center;
+  width: 100%;
+}
+
+.sw-empty-state-icon {
+  align-items: center;
+  background: var(--sw-color-subtle);
+  border-radius: var(--sw-radius-md);
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  flex: none;
+  height: var(--sw-space-8);
+  justify-content: center;
+  width: var(--sw-space-8);
+}
+
+.sw-empty-state-icon > svg {
+  height: var(--sw-space-5);
+  width: var(--sw-space-5);
+}
+
+.sw-empty-state-title,
+.sw-empty-state-description {
+  margin: 0;
+  max-width: var(--sw-reading-max);
+}
+
+.sw-empty-state-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: center;
+  margin-top: var(--sw-space-1);
+}
+
+@media ${coarsePointerQuery} {
+  .sw-empty-state-actions .sw-button { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  .sw-empty-state { border-color: CanvasText; }
+  .sw-empty-state-icon { color: CanvasText; }
+}`;
+}
+export function emptyStateClassCatalog() {
+    return [
+        'sw-empty-state',
+        'sw-empty-state-icon',
+        'sw-empty-state-title',
+        'sw-empty-state-description',
+        'sw-empty-state-actions',
+    ];
+}

package/dist/css/css-grid-span.js

@@ -1,5 +1,5 @@
 import { breakpointQuery, breakpoints } from './breakpoints.js';
-import { gridColumnCounts, gridColumnsBelowClass, gridColumnsClass, } from './css-grid.js';
+import { gridColumnCounts, gridColumnsBelowClass, gridColumnsClass, gridFitClass, gridFits, } from './css-grid.js';
 export const gridColumnSpans = gridColumnCounts;
 export function gridSpanClass(span) {
     return `sw-grid-span-${span}`;
@@ -21,6 +21,9 @@ function widerSpans(columns) {
 export function cssGridSpanClasses() {
     const spans = gridColumnSpans.map((span) => spanRule(`.${gridSpanClass(span)}`, span));
     const caps = gridColumnCounts.flatMap((columns) => widerSpans(columns).map((span) => capRule(gridColumnsClass(columns), columns, span)));
+    // A fitted grid's column count follows its width, so a span there would
+    // add implicit columns: its children each take one column.
+    const fitted = gridFits.flatMap((fit) => widerSpans(1).map((span) => `:where(.${gridFitClass(fit)}) > .${gridSpanClass(span)} { grid-column: auto; }`));
     // Below a breakpoint every span wider than one is restated for the phone
     // column count, which also undoes a desktop cap when that count is larger.
     const below = breakpoints.map((breakpoint) => `@media ${breakpointQuery('below', breakpoint)} {
@@ -28,7 +31,7 @@ ${gridColumnCounts
         .flatMap((columns) => widerSpans(1).map((span) => `  ${capRule(gridColumnsBelowClass(breakpoint, columns), columns, span)}`))
         .join('\n')}
 }`);
-    return [...spans, ...caps, ...below].join('\n');
+    return [...spans, ...caps, ...fitted, ...below].join('\n');
 }
 export function gridSpanClassCatalog() {
     return gridColumnSpans.map((span) => gridSpanClass(span));

package/dist/css/css-grid.d.ts

@@ -1,6 +1,19 @@
 import { type Breakpoint } from './breakpoints.js';
 export declare const gridColumnCounts: readonly [1, 2, 3, 4, 6];
 export type GridColumns = (typeof gridColumnCounts)[number];
+/**
+ * A fitted grid's narrowest column: as many columns as fit the grid's width
+ * at this minimum, each stretched to share the row, and one column when
+ * the grid is narrower than the minimum.
+ */
+export declare const gridFitWidths: {
+    readonly narrow: "15rem";
+    readonly medium: "16.25rem";
+    readonly wide: "18.75rem";
+};
+export type GridFit = keyof typeof gridFitWidths;
+export declare const gridFits: GridFit[];
+export declare function gridFitClass(fit: GridFit): string;
 export declare function gridColumnsClass(columns: GridColumns): string;
 export declare function gridColumnsBelowClass(breakpoint: Breakpoint, columns: GridColumns): string;
 export declare function cssGridClasses(): string;

package/dist/css/css-grid.js

@@ -1,5 +1,19 @@
 import { breakpointQuery, breakpoints, } from './breakpoints.js';
 export const gridColumnCounts = [1, 2, 3, 4, 6];
+/**
+ * A fitted grid's narrowest column: as many columns as fit the grid's width
+ * at this minimum, each stretched to share the row, and one column when
+ * the grid is narrower than the minimum.
+ */
+export const gridFitWidths = {
+    narrow: '15rem',
+    medium: '16.25rem',
+    wide: '18.75rem',
+};
+export const gridFits = Object.keys(gridFitWidths);
+export function gridFitClass(fit) {
+    return `sw-grid-fit-${fit}`;
+}
 export function gridColumnsClass(columns) {
     return `sw-grid-cols-${columns}`;
 }
@@ -20,12 +34,14 @@ ${gridColumnCounts
         .map((count) => columnsRule(gridColumnsBelowClass(breakpoint, count), count))
         .join('\n')}
 }`);
-    return [base, ...columns, ...below].join('\n');
+    const fitted = gridFits.map((fit) => `.${gridFitClass(fit)} { grid-template-columns: repeat(auto-fit, minmax(min(100%, ${gridFitWidths[fit]}), 1fr)); }`);
+    return [base, ...columns, ...below, ...fitted].join('\n');
 }
 export function gridClassCatalog() {
     return [
         'sw-grid',
         ...gridColumnCounts.map((count) => gridColumnsClass(count)),
         ...breakpoints.flatMap((breakpoint) => gridColumnCounts.map((count) => gridColumnsBelowClass(breakpoint, count))),
+        ...gridFits.map(gridFitClass),
     ];
 }

package/dist/css/css-hero.d.ts

@@ -0,0 +1,2 @@
+export declare function cssHeroClasses(): string;
+export declare function heroClassCatalog(): string[];

package/dist/css/css-hero.js

@@ -0,0 +1,62 @@
+import { breakpointQuery } from './breakpoints.js';
+/*
+ * A public page's opening: the words in one column (an eyebrow, the hero
+ * title, the lead and the actions) and an optional picture beside them.
+ * From `md` the picture keeps its own width at the row's end and the words
+ * take the rest; below `md` the picture sits centred under the words and
+ * the actions stack to the full width, as a phone's thumb expects. With no
+ * picture the words keep the reading width, so a long title or lead does
+ * not run the page's full width. The actions sit one spacing step further
+ * from the lead than the text's gap, so the buttons read as their own row.
+ */
+export function cssHeroClasses() {
+    return `.sw-hero {
+  align-items: center;
+  display: grid;
+  gap: var(--sw-space-8);
+  min-width: 0;
+}
+
+.sw-hero-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-4);
+  min-width: 0;
+}
+
+.sw-hero:not(.sw-hero-with-media) .sw-hero-text {
+  max-width: var(--sw-reading-max);
+}
+
+.sw-hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+  padding-top: var(--sw-space-1);
+}
+
+.sw-hero-media {
+  justify-self: center;
+  max-width: 100%;
+  min-width: 0;
+}
+
+@media ${breakpointQuery('from', 'md')} {
+  .sw-hero-text { gap: var(--sw-space-5); }
+  .sw-hero-with-media { grid-template-columns: minmax(0, 1fr) auto; }
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-hero { gap: var(--sw-space-6); }
+  .sw-hero-actions { align-items: stretch; flex-direction: column; }
+}`;
+}
+export function heroClassCatalog() {
+    return [
+        'sw-hero',
+        'sw-hero-with-media',
+        'sw-hero-text',
+        'sw-hero-actions',
+        'sw-hero-media',
+    ];
+}

package/dist/css/css-stepper-unit.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A Stepper with a `unit`: the count and its muted word ("90 min") inside
+ * one control frame, as Field's suffix. The frame draws the canvas control
+ * surface, the focus ring and the states; the input inside drops its own and
+ * keeps its few-digit width, its digits against the unit, so the frame never
+ * follows the count. The pair is centred, also in a full-width stepper.
+ */
+export declare function cssStepperUnitClasses(): string;
+export declare function stepperUnitClassCatalog(): string[];

package/dist/css/css-stepper-unit.js

@@ -0,0 +1,102 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { controlSurface, disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
+import { changedTintLayer } from './css-field-changed.js';
+const body = typographyVariants.body;
+/*
+ * Outranks the stepper's own input rules and state rules (the invalid
+ * border, the changed shadow and tint), which the frame draws instead.
+ */
+const framedInput = '[data-theme] .sw-stepper .sw-stepper-count > input.sw-stepper-input';
+const tintedFrame = '.sw-stepper-changed .sw-stepper-count:not(:has(> input:placeholder-shown))';
+/**
+ * A Stepper with a `unit`: the count and its muted word ("90 min") inside
+ * one control frame, as Field's suffix. The frame draws the canvas control
+ * surface, the focus ring and the states; the input inside drops its own and
+ * keeps its few-digit width, its digits against the unit, so the frame never
+ * follows the count. The pair is centred, also in a full-width stepper.
+ */
+export function cssStepperUnitClasses() {
+    return `.sw-stepper-count {
+  ${controlSurface}
+  align-items: center;
+  box-sizing: border-box;
+  cursor: text;
+  display: inline-flex;
+  gap: var(--sw-space-1);
+  justify-content: center;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-stepper-full .sw-stepper-count { display: flex; }
+
+${framedInput} {
+  align-self: stretch;
+  background: transparent;
+  background-image: none;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  inline-size: 5ch;
+  min-height: 0;
+  padding-inline: 0;
+  text-align: end;
+}
+
+${framedInput}:focus-visible { outline: none; }
+
+.sw-stepper-count:focus-within {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-stepper-unit {
+  color: var(--sw-color-muted);
+  flex: none;
+  font-size: ${body.fontSize}px;
+  line-height: ${body.lineHeight}px;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.sw-stepper-invalid .sw-stepper-count { border-color: var(--sw-color-danger); }
+
+.sw-stepper-changed .sw-stepper-count {
+  border-color: var(--sw-color-accent);
+  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
+}
+
+${tintedFrame} { background-image: ${changedTintLayer}; }
+
+${tintedFrame} > .sw-stepper-unit { color: var(--sw-color-text); }
+
+/*
+ * The frame draws the surface, so it carries the disabled look for its count,
+ * and only that look: a locked count drops the invalid and changed edges and
+ * tint, which name nothing a person can act on.
+ */
+.sw-stepper .sw-stepper-count:has(> input:disabled) {
+  ${disabledControlSurface}
+  background-image: none;
+  border-color: var(--sw-color-border);
+  box-shadow: none;
+}
+
+.sw-stepper .sw-stepper-count:has(> input:disabled) > .sw-stepper-unit {
+  color: var(--sw-color-muted);
+}
+
+@media (forced-colors: active) {
+  .sw-stepper-unit { color: CanvasText; }
+  .sw-stepper-invalid .sw-stepper-count { border-color: Mark; }
+  .sw-stepper-changed .sw-stepper-count { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; background-image: none; }
+  .sw-stepper .sw-stepper-count:has(> input:disabled) {
+    ${disabledControlForcedColors}
+    box-shadow: none;
+  }
+}`;
+}
+export function stepperUnitClassCatalog() {
+    return ['sw-stepper-count', 'sw-stepper-unit'];
+}

package/dist/css/css-stepper.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { changedTintLayer } from './css-field-changed.js';
+import { cssStepperUnitClasses, stepperUnitClassCatalog, } from './css-stepper-unit.js';
 const body = typographyVariants.body;
 const label = typographyVariants.label;
 const title = typographyVariants.title;
@@ -116,7 +117,9 @@ ${input} {
 
 .sw-stepper-full input.sw-stepper-input { inline-size: 100%; }
 
-${stateRules()}`;
+${stateRules()}
+
+${cssStepperUnitClasses()}`;
 }
 export function stepperClassCatalog() {
     return [
@@ -129,5 +132,6 @@ export function stepperClassCatalog() {
         'sw-stepper-changed',
         'sw-stepper-readonly',
         'sw-stepper-limit-plain',
+        ...stepperUnitClassCatalog(),
     ];
 }

package/dist/css/stylesheet.js

@@ -19,6 +19,7 @@ import { countPillClassCatalog } from './css-count-pill.js';
 import { checkboxClassCatalog } from './css-checkbox.js';
 import { radioGroupClassCatalog } from './css-radio-group.js';
 import { skeletonClassCatalog } from './css-skeleton.js';
+import { emptyStateClassCatalog } from './css-empty-state.js';
 import { spinnerClassCatalog } from './css-spinner.js';
 import { progressClassCatalog } from './css-progress.js';
 import { noticeClassCatalog } from './css-notice.js';
@@ -27,6 +28,7 @@ import { tooltipClassCatalog } from './css-tooltip.js';
 import { infoTipClassCatalog } from './css-info-tip.js';
 import { separatorClassCatalog } from './css-separator.js';
 import { bandClassCatalog } from './css-band.js';
+import { heroClassCatalog } from './css-hero.js';
 import { siteFooterClassCatalog } from './css-site-footer.js';
 import { siteHeaderClassCatalog } from './css-site-header.js';
 import { statTileClassCatalog } from './css-stat-tile.js';
@@ -132,6 +134,7 @@ export function utilityClassCatalog() {
         ...radioGroupClassCatalog(),
         ...spinnerClassCatalog(),
         ...skeletonClassCatalog(),
+        ...emptyStateClassCatalog(),
         ...progressClassCatalog(),
         ...noticeClassCatalog(),
         ...glyphTileClassCatalog(),
@@ -139,6 +142,7 @@ export function utilityClassCatalog() {
         ...infoTipClassCatalog(),
         ...separatorClassCatalog(),
         ...bandClassCatalog(),
+        ...heroClassCatalog(),
         ...siteFooterClassCatalog(),
         ...siteHeaderClassCatalog(),
         ...statTileClassCatalog(),

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { listTileColumnCounts, type ListGroupTileColumns, } from './css/css-list
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { Skeleton, skeletonVariants, type SkeletonProps, type SkeletonVariant, } from './components/Skeleton.js';
+export { EmptyState, emptyStateTitleElements, type EmptyStateProps, type EmptyStateTitleElement, } from './components/EmptyState.js';
 export { GlyphTile, glyphTileSizes, type GlyphTileHue, type GlyphTileProps, type GlyphTileSize, } from './components/GlyphTile.js';
 export { Notice, noticeTones, noticeVariants, type NoticeProps, type NoticeRole, type NoticeTone, type NoticeVariant, } from './components/Notice.js';
 export { Progress, progressTones, type ProgressProps, type ProgressTone, } from './components/Progress.js';
@@ -79,14 +80,16 @@ export { Band, bandElements, bandTones, bandWidths, } from './components/Band.js
 export type { BandElement, BandProps, BandTone, BandWidth, } from './components/Band.js';
 export { SiteHeader } from './components/SiteHeader.js';
 export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, } from './components/SiteHeader.js';
+export { Hero } from './components/Hero.js';
+export type { HeroProps } from './components/Hero.js';
 export { SiteFooter } from './components/SiteFooter.js';
 export type { SiteFooterGroup, SiteFooterLink, SiteFooterProps, } from './components/SiteFooter.js';
 export { Separator } from './components/Separator.js';
 export type { SeparatorOrientation, SeparatorProps, } from './components/Separator.js';
 export { DescriptionItem, DescriptionList, descriptionListLayouts, } from './components/DescriptionList.js';
 export type { DescriptionItemProps, DescriptionListLayout, DescriptionListProps, } from './components/DescriptionList.js';
-export { Grid } from './components/Grid.js';
-export type { GridColumns, GridProps } from './components/Grid.js';
+export { Grid, gridFits } from './components/Grid.js';
+export type { GridColumns, GridFit, GridProps } from './components/Grid.js';
 export type { GridColumnSpan } from './css/css-grid-span.js';
 export type { ColumnSpanProps } from './column-span-classes.js';
 export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';

package/dist/index.js

@@ -16,6 +16,7 @@ export { listTileColumnCounts, } from './css/css-list-tiles.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
 export { Skeleton, skeletonVariants, } from './components/Skeleton.js';
+export { EmptyState, emptyStateTitleElements, } from './components/EmptyState.js';
 export { GlyphTile, glyphTileSizes, } from './components/GlyphTile.js';
 export { Notice, noticeTones, noticeVariants, } from './components/Notice.js';
 export { Progress, progressTones, } from './components/Progress.js';
@@ -71,10 +72,11 @@ export { utilityClassCatalog } from './css/stylesheet.js';
 export { breakpointQuery } from './css/breakpoints.js';
 export { Band, bandElements, bandTones, bandWidths, } from './components/Band.js';
 export { SiteHeader } from './components/SiteHeader.js';
+export { Hero } from './components/Hero.js';
 export { SiteFooter } from './components/SiteFooter.js';
 export { Separator } from './components/Separator.js';
 export { DescriptionItem, DescriptionList, descriptionListLayouts, } from './components/DescriptionList.js';
-export { Grid } from './components/Grid.js';
+export { Grid, gridFits } from './components/Grid.js';
 export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';
 export { FilterChips, filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './components/FilterChips.js';
 export { FilterChipsRow } from './components/FilterChipsRow.js';

package/dist/stepper-count.d.ts

@@ -35,3 +35,11 @@ export declare function stepperMoves(value: number | null, bounds: StepperBounds
 export declare function readStepperEntry(text: string, allowsNegative: boolean): StepperEntry;
 /** The box's text for a count: the plain number, or empty for none. */
 export declare function stepperText(value: number | null): string;
+/** A consumer bug: a unit, when given, is a word to show after the count. */
+export declare function assertStepperUnit(unit: string | undefined): void;
+/**
+ * The count in words for assistive technology: the consumer's own words
+ * when given, otherwise the count and its unit ("90 min"), or nothing extra
+ * (the bare count is `aria-valuenow`) when there is no unit or no count.
+ */
+export declare function stepperValueText(value: number | null, unit: string | undefined, valueText: string | undefined): string | undefined;

package/dist/stepper-count.js

@@ -48,3 +48,20 @@ export function readStepperEntry(text, allowsNegative) {
 export function stepperText(value) {
     return value === null ? '' : String(value);
 }
+/** A consumer bug: a unit, when given, is a word to show after the count. */
+export function assertStepperUnit(unit) {
+    if (unit !== undefined && unit.trim() === '')
+        throw new RangeError('Stepper unit must not be blank');
+}
+/**
+ * The count in words for assistive technology: the consumer's own words
+ * when given, otherwise the count and its unit ("90 min"), or nothing extra
+ * (the bare count is `aria-valuenow`) when there is no unit or no count.
+ */
+export function stepperValueText(value, unit, valueText) {
+    if (valueText !== undefined)
+        return valueText;
+    if (unit === undefined || value === null)
+        return undefined;
+    return `${value} ${unit.trim()}`;
+}

package/dist/styles.css

@@ -894,19 +894,25 @@ body {
 .sw-text-align-center { text-align: center; }
 .sw-text-align-end { text-align: end; }
 
-:where(.sw-text-display, .sw-text-heading, .sw-text-title, .sw-text-body, .sw-text-label, .sw-text-caption, .sw-text-data) { margin: 0; }
+:where(.sw-text-hero, .sw-text-display, .sw-text-headline, .sw-text-heading, .sw-text-title, .sw-text-lead, .sw-text-body, .sw-text-label, .sw-text-caption, .sw-text-data) { margin: 0; }
 
+.sw-text-hero { font-family: var(--sw-font-sans); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -1.7px; }
 .sw-text-display { font-family: var(--sw-font-sans); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.8px; }
+.sw-text-headline { font-family: var(--sw-font-sans); font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.7px; }
 .sw-text-heading { font-family: var(--sw-font-sans); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.45px; }
 .sw-text-title { font-family: var(--sw-font-sans); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
+.sw-text-lead { font-family: var(--sw-font-sans); font-size: 20px; line-height: 29px; font-weight: 400; letter-spacing: -0.3px; }
 .sw-text-body { font-family: var(--sw-font-sans); font-size: 17px; line-height: 25px; font-weight: 400; letter-spacing: -0.2px; }
 .sw-text-label { font-family: var(--sw-font-sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.2px; }
 .sw-text-caption { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: -0.08px; }
 .sw-text-data { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.08px; font-variant-numeric: tabular-nums; }
 
 @media not all and (min-width: 48rem) {
+  .sw-text-hero { font-size: 36px; line-height: 40px; letter-spacing: -0.7px; }
   .sw-text-display { font-size: 32px; line-height: 38px; letter-spacing: -0.6px; }
+  .sw-text-headline { font-size: 26px; line-height: 30px; letter-spacing: -0.4px; }
   .sw-text-heading { font-size: 24px; line-height: 30px; letter-spacing: -0.4px; }
+  .sw-text-lead { font-size: 17px; line-height: 25px; letter-spacing: -0.2px; }
 }
 
 [data-theme] .sw-font-mono,
@@ -4600,6 +4606,47 @@ body {
   .sw-band-inverse { border-block: 1px solid CanvasText; }
 }
 
+.sw-hero {
+  align-items: center;
+  display: grid;
+  gap: var(--sw-space-8);
+  min-width: 0;
+}
+
+.sw-hero-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-4);
+  min-width: 0;
+}
+
+.sw-hero:not(.sw-hero-with-media) .sw-hero-text {
+  max-width: var(--sw-reading-max);
+}
+
+.sw-hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+  padding-top: var(--sw-space-1);
+}
+
+.sw-hero-media {
+  justify-self: center;
+  max-width: 100%;
+  min-width: 0;
+}
+
+@media (min-width: 48rem) {
+  .sw-hero-text { gap: var(--sw-space-5); }
+  .sw-hero-with-media { grid-template-columns: minmax(0, 1fr) auto; }
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-hero { gap: var(--sw-space-6); }
+  .sw-hero-actions { align-items: stretch; flex-direction: column; }
+}
+
 .sw-site-footer-top {
   display: grid;
   gap: var(--sw-space-6) var(--sw-space-5);
@@ -7141,6 +7188,62 @@ body {
   .sw-skeleton-row + .sw-skeleton-row { border-color: GrayText; }
 }
 
+.sw-empty-state {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border: 1px dashed var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-8) var(--sw-space-4);
+  text-align: center;
+  width: 100%;
+}
+
+.sw-empty-state-icon {
+  align-items: center;
+  background: var(--sw-color-subtle);
+  border-radius: var(--sw-radius-md);
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  flex: none;
+  height: var(--sw-space-8);
+  justify-content: center;
+  width: var(--sw-space-8);
+}
+
+.sw-empty-state-icon > svg {
+  height: var(--sw-space-5);
+  width: var(--sw-space-5);
+}
+
+.sw-empty-state-title,
+.sw-empty-state-description {
+  margin: 0;
+  max-width: var(--sw-reading-max);
+}
+
+.sw-empty-state-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: center;
+  margin-top: var(--sw-space-1);
+}
+
+@media (pointer: coarse) {
+  .sw-empty-state-actions .sw-button { min-height: var(--sw-control-md-min-height); }
+}
+
+@media (forced-colors: active) {
+  .sw-empty-state { border-color: CanvasText; }
+  .sw-empty-state-icon { color: CanvasText; }
+}
+
 .sw-progress {
   display: flex;
   flex-direction: column;
@@ -7868,6 +7971,9 @@ body {
 .sw-grid-cols-below-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .sw-grid-cols-below-md-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 }
+.sw-grid-fit-narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
+.sw-grid-fit-medium { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr)); }
+.sw-grid-fit-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); }
 .sw-grid-span-1 { grid-column: span 1; }
 .sw-grid-span-2 { grid-column: span 2; }
 .sw-grid-span-3 { grid-column: span 3; }
@@ -7883,6 +7989,18 @@ body {
 :where(.sw-grid-cols-3) > .sw-grid-span-4 { grid-column: span 3; }
 :where(.sw-grid-cols-3) > .sw-grid-span-6 { grid-column: span 3; }
 :where(.sw-grid-cols-4) > .sw-grid-span-6 { grid-column: span 4; }
+:where(.sw-grid-fit-narrow) > .sw-grid-span-2 { grid-column: auto; }
+:where(.sw-grid-fit-narrow) > .sw-grid-span-3 { grid-column: auto; }
+:where(.sw-grid-fit-narrow) > .sw-grid-span-4 { grid-column: auto; }
+:where(.sw-grid-fit-narrow) > .sw-grid-span-6 { grid-column: auto; }
+:where(.sw-grid-fit-medium) > .sw-grid-span-2 { grid-column: auto; }
+:where(.sw-grid-fit-medium) > .sw-grid-span-3 { grid-column: auto; }
+:where(.sw-grid-fit-medium) > .sw-grid-span-4 { grid-column: auto; }
+:where(.sw-grid-fit-medium) > .sw-grid-span-6 { grid-column: auto; }
+:where(.sw-grid-fit-wide) > .sw-grid-span-2 { grid-column: auto; }
+:where(.sw-grid-fit-wide) > .sw-grid-span-3 { grid-column: auto; }
+:where(.sw-grid-fit-wide) > .sw-grid-span-4 { grid-column: auto; }
+:where(.sw-grid-fit-wide) > .sw-grid-span-6 { grid-column: auto; }
 @media not all and (min-width: 48rem) {
   :where(.sw-grid-cols-below-md-1) > .sw-grid-span-2 { grid-column: span 1; }
   :where(.sw-grid-cols-below-md-1) > .sw-grid-span-3 { grid-column: span 1; }
@@ -8915,6 +9033,99 @@ body {
   [data-theme] .sw-stepper-changed input.sw-stepper-input { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; background-image: none; }
 }
 
+.sw-stepper-count {
+  background-color: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  padding-inline: var(--sw-control-md-padding-inline);
+  align-items: center;
+  box-sizing: border-box;
+  cursor: text;
+  display: inline-flex;
+  gap: var(--sw-space-1);
+  justify-content: center;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-stepper-full .sw-stepper-count { display: flex; }
+
+[data-theme] .sw-stepper .sw-stepper-count > input.sw-stepper-input {
+  align-self: stretch;
+  background: transparent;
+  background-image: none;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  inline-size: 5ch;
+  min-height: 0;
+  padding-inline: 0;
+  text-align: end;
+}
+
+[data-theme] .sw-stepper .sw-stepper-count > input.sw-stepper-input:focus-visible { outline: none; }
+
+.sw-stepper-count:focus-within {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-stepper-unit {
+  color: var(--sw-color-muted);
+  flex: none;
+  font-size: 17px;
+  line-height: 25px;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.sw-stepper-invalid .sw-stepper-count { border-color: var(--sw-color-danger); }
+
+.sw-stepper-changed .sw-stepper-count {
+  border-color: var(--sw-color-accent);
+  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
+}
+
+.sw-stepper-changed .sw-stepper-count:not(:has(> input:placeholder-shown)) { background-image: linear-gradient(color-mix(in srgb, var(--sw-color-accent) 12%, transparent), color-mix(in srgb, var(--sw-color-accent) 12%, transparent)); }
+
+.sw-stepper-changed .sw-stepper-count:not(:has(> input:placeholder-shown)) > .sw-stepper-unit { color: var(--sw-color-text); }
+
+/*
+ * The frame draws the surface, so it carries the disabled look for its count,
+ * and only that look: a locked count drops the invalid and changed edges and
+ * tint, which name nothing a person can act on.
+ */
+.sw-stepper .sw-stepper-count:has(> input:disabled) {
+  background-color: var(--sw-color-subtle);
+  border-style: dashed;
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;
+  background-image: none;
+  border-color: var(--sw-color-border);
+  box-shadow: none;
+}
+
+.sw-stepper .sw-stepper-count:has(> input:disabled) > .sw-stepper-unit {
+  color: var(--sw-color-muted);
+}
+
+@media (forced-colors: active) {
+  .sw-stepper-unit { color: CanvasText; }
+  .sw-stepper-invalid .sw-stepper-count { border-color: Mark; }
+  .sw-stepper-changed .sw-stepper-count { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; background-image: none; }
+  .sw-stepper .sw-stepper-count:has(> input:disabled) {
+    border-color: GrayText;
+  color: GrayText;
+  -webkit-text-fill-color: GrayText;
+    box-shadow: none;
+  }
+}
+
 .sw-steps {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.48.0",
+  "version": "1.49.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",
@@ -45,7 +45,7 @@
   "dependencies": {
     "markdown-it": "14.3.2",
     "pdfjs-dist": "6.4.299",
-    "@scalewing/tokens": "^1.6.0"
+    "@scalewing/tokens": "^1.7.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",