@scalewing/react 1.50.0 → 1.52.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @scalewing/react
 
+## 1.52.0
+
+### Minor Changes
+
+- 03f2e78: Site chrome follow-ups from Teisoro's marketing-site UX review. `SiteHeader` takes an optional `skipLink` (`{ label, href }`, exported as `SiteHeaderSkipLink`): a "skip to content" link that is the header's first focusable element, visually hidden until it has focus, then a pill on the surface with the accent ring laid over the bar's start (`sw-site-header-skip-link`); a blank label or an `href` that is not a `#fragment` throws a `RangeError`. While a sticky `SiteHeader` is on the page, the document's `scroll-padding-top` clears the bar (56 px, 72 px from `lg`), its hairline and a small gap, so `#fragment` links, `:target` and `scrollIntoView` land below the bar; a header with `sticky={false}` changes nothing. Below `lg`, the bar's `compactActions` (now in a `sw-site-header-compact-actions` box with `display: contents`) step aside while the menu is open, since the menu holds its own `menuActions`, leaving the brand and the close button. On a coarse pointer, a plain link that is all of a `SiteFooter` bottom-row slot (`legal` or `end`) gets the 44 px touch target, as the group links have. No new tokens or dependencies. Request: `docs/requests/teisoro-site-chrome-follow-ups.md`.
+
+## 1.51.0
+
+### Minor Changes
+
+- cf5de2a: `TaskList`: a setup checklist, an `ol` (`role="list"`) named by `label` with one row per `items` entry (`{ id, title, detail?, status, action? }`): a 24 px status marker hidden from assistive technology (`done` a check on the success fill, `next` an accent ring round a dot, `todo` a grey ring, `waiting` a muted lock), the title, a muted detail line and an optional action at the row's end that wraps under the words on a narrow column. Each title is read with its status word ("Season, Done") as one hidden line; `labels` (`Partial<TaskListLabels>`) replaces the English words (`defaultTaskListLabels`), a word left out or `undefined` staying English. `action` may be a function given `{ titleId }` to describe the action by its task. Exports `TaskList`, `TaskListProps`, `TaskListItem`, `TaskListActionContext`, `TaskListLabels`, `TaskListStatus`, `taskListStatuses`, `defaultTaskListLabels`. New classes `sw-task-list*`; a blank label, word, id, title or detail, a repeated id, or an unknown status throws a `RangeError`. Request: `docs/requests/futmas-task-list.md`.
+
+  `Button` (and `ButtonLink` and the controls built on them): on a coarse pointer every size is at least 44 × 44 px, the md control height, so an `xs` or `sm` Button in a table row or a checklist is a comfortable touch target. Padding and type keep the size's; only the minimum box grows, so rows and popovers holding small Buttons are taller on phones and tablets (DateField's calendar footer, Toast's action, a Step's Edit). Two layouts keep `min-width: 0` so they can share a row: a full-width attached `ButtonGroup` below md and a `width="full"` Button in an `Inline`; both keep the 44 px height. A fine pointer is unchanged. Request: `docs/requests/futmas-button-touch-target.md`.
+
+  No new tokens or dependencies.
+
 ## 1.50.0
 
 ### Minor Changes

package/README.md

@@ -123,6 +123,55 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 </Steps>
 ```
 
+`TaskList` is a setup checklist: an `ol` (with `role="list"`, which Safari drops from a list without bullets) named by `label` holding one row per item of `items`, in order, a hairline between rows. Each item is `{ id, title, detail?, status, action? }` (`TaskListItem`): `status` (`taskListStatuses`: `'done' | 'next' | 'todo' | 'waiting'`, type `TaskListStatus`) draws a 24 px marker hidden from assistive technology, a different shape for each so colour is never the only cue: `done` a check on the success fill, `next` an accent ring round an accent dot, `todo` the grey hairline ring of a step ahead, and `waiting` a lock in the muted colour (waiting is not work that needs the person, so it is grey, not the warning amber). Then the `title` (label type, a waiting task's muted at the body weight), a muted caption `detail` under it, and `action` at the row's end, such as a small `Button`; the marker and the action sit on the row's middle, and on a narrow column an action that would leave the words less than half the row wraps to a line of its own at the row's end. Each title is read with its status word after a comma, as one visually hidden line ("Season, Done"; the drawn title is `aria-hidden`, as in a folded `Step`), then the detail, then the action. The words are English by default (`defaultTaskListLabels`: Done, Next step, To do, Waiting); `labels` (`Partial<TaskListLabels>`) takes yours, any you leave out or pass as `undefined` staying English. A row's text content holds the title twice (drawn, then spoken), so find a task in tests by its spoken line or by role. `action` may be a function given `{ titleId }`, the id of the drawn title, for the action's `aria-describedby` (or its `aria-labelledby` with its own id), so two "Change" buttons are told apart by their tasks out of the list. Scalewing holds no order rules and adds no `aria-current`: you set every status, and which action is the page's primary (the next task's, by convention) and which are `neutral`. On a coarse pointer the row's Buttons are 44 px like every Button, so rows grow. Forced colours draw every ring as a `CanvasText` border (the next one `Highlight`) and keep the check, dot and lock, which are borders. A blank `label`, status word, id, title or `detail`, a repeated id, or an unknown status throws a `RangeError`; an empty `items` draws an empty list. Other `ol` attributes (`className`, `id`, `data-*`, `aria-describedby`) pass through.
+
+```tsx
+<TaskList
+  label="Get the spring survey ready"
+  labels={{
+    done: 'Listo',
+    next: 'Siguiente paso',
+    todo: 'Pendiente',
+    waiting: 'En espera',
+  }}
+  items={[
+    {
+      id: 'site',
+      title: 'The site',
+      detail: 'North marsh',
+      status: 'done',
+      action: ({ titleId }) => (
+        <Button
+          size="sm"
+          variant="neutral"
+          aria-describedby={titleId}
+          onPress={change}
+        >
+          Change
+        </Button>
+      ),
+    },
+    {
+      id: 'count',
+      title: 'The count',
+      detail: 'Count the herons at dawn',
+      status: 'next',
+      action: (
+        <Button size="sm" onPress={count}>
+          Start counting
+        </Button>
+      ),
+    },
+    {
+      id: 'report',
+      title: 'Send the report',
+      detail: 'Needs the count',
+      status: 'waiting',
+    },
+  ]}
+/>
+```
+
 `Select` is a labeled listbox menu when the open list must match the canvas.
 
 `Field` supports optional `description`, `error`, and `required` on one native input, select, or textarea child. It preserves an existing `aria-describedby` and appends a stable ID for the hint, or for the error, which replaces the hint on screen while it is supplied. `error` sets `aria-invalid` and token-owned invalid styling. The error sits in a polite live region (`aria-live="polite"`) that is always rendered, empty while there is no error, so an error that appears while the person types, or after a submit, is announced once, politely, when its text is swapped in; it is never `role="alert"`, so a submit that finds several errors does not fire several assertive alerts at once. Empty, the region takes no room in the layout. The consumer owns validation and localized messages, and after a refused submit it moves focus to the first invalid control (or to one form-level summary). `Checkbox`, `RadioGroup` and `DateField` expose their `error` the same way. `invalid` marks the control invalid the same way (`aria-invalid` and the danger border, `Mark` in forced colors) without a message of its own, for fields whose one error is shown elsewhere, such as a count that adds up to nothing under a group of count fields: point each control's `aria-describedby` at that message so it is read with the field. The field's own polite region stays empty and its `description` stays on screen; `error` implies `invalid`. Passing `invalid`, even `invalid={false}` but not `invalid={undefined}`, needs one native control child and throws a `TypeError` on the first render otherwise, so a form learns it while the fields are valid, not on its first failed submit. `error` keeps its rule: it needs the native control only while it holds a message. `invalid` is `Field`'s only: `DateField`, `Select` and the other controls with `error` do not have it yet.
@@ -327,6 +376,8 @@ On the web, `variant="neutral"` is a quiet grey fill (the muted color at 16 %, t
 
 `Button` `width` is `'content'` (the default: as wide as its words) or `'full'`: the button fills its container's inline size in a `Stack`, a `Grid` cell or any column, and in an `Inline` row takes the space its siblings leave, as a full `Select` does, so an Edit beside a ••• `ActionMenu` fills the row and the menu keeps its own square at the end. The row rule holds for a `Button` that is a direct child of the `Inline`; wrapped in another box it fills that box instead. In a wrapping `Inline` (`wrap`) a full button grows from its words' width and moves to a line of its own when the row runs out, rather than shrinking past its words. Inside a `ButtonGroup` it is not needed: the group already stacks its buttons full width below `md`. The words stay centred. An unknown width throws a `RangeError`. The class is `sw-button-full`.
 
+On a coarse pointer (a phone or a tablet, `(pointer: coarse)`) every `Button`, `ButtonLink` and control built on them is at least 44 × 44 px (the md control height), whatever its `size`: an `xs` or `sm` Button keeps its padding and type but its box grows to the touch target, so a small row action in a table or a checklist is still easy to tap. A fine pointer keeps each size's height (28, 32 and 44 px). Rows holding small Buttons are taller on touch; two layouts keep `min-width: 0` so their Buttons can share a row, a full-width attached `ButtonGroup` below `md` and a `width="full"` Button in an `Inline`, and both keep the 44 px height. Popovers holding small Buttons grow too, such as `DateField`'s calendar with its footer.
+
 `ButtonLink` is a link drawn as a `Button`, for a destination that reads as an action, such as a site's Contact us or Sign in: an `<a href>` with the Button's `variant` (default `primary`), `size` (default `md`) and `width`, so it opens like any link (a new tab, a page rendered with no script) and keeps its variant's words over the canvas link colour, hover included. `aria-current="page"` marks the one that is the current page with the pressed button's ring (a Highlight border in forced colours). A link has no disabled state: render none instead. Use `Button` for a press that does something on the page. An unknown variant, size or width throws a `RangeError`; the class is `sw-button-link` beside the Button's own.
 
 ```tsx
@@ -1028,10 +1079,11 @@ const { headings, omissions } = inspectMarkdown(page.body, {
 </Band>
 ```
 
-`SiteHeader` is a public site's header. Supply `brand` (such as a logo linked to the home page), `navLabel` and `items` (`{ id, label, href, current? }`, `current` as SectionNav's: `page`, `location` or `true` sets `aria-current`), `labels` (`openMenu`, `closeMenu`) and the decorative `menuIcon` and `closeIcon` glyphs. From `lg` the bar shows the brand, the destinations as a row of links (the current one at label weight over a bar in the words' colour, a thick underline in forced colours) and `actions` at its end, such as a language switch, Sign in (`Box as="a" link="quiet"`) and a `ButtonLink`. Below `lg` it shows the brand, `compactActions` and a menu button that opens, under the bar over the rest of the window, the destinations as large rows (the current one in the accent) and `menuActions` at the panel's foot, such as full-width `ButtonLink`s. The menu is a native `details`, so it opens and closes by touch, click and keyboard with no script, as a page rendered on the server needs; its `summary` is the button, named `openMenu` or `closeMenu` by its state. Script adds Escape (focus back on the button), and closes it when a link in it is chosen, focus leaves it, a press lands outside it, or the window widens to `lg`; nothing traps focus. A page rendered on the server has the no-script menu until it hydrates; a site that never hydrates keeps it, which still opens and closes. The bar is 56 px tall below `lg` and 72 px from it, on the solid surface with a hairline under it; `sticky` (default `true`) keeps it at the window's top. No items, blank or repeated ids, blank labels or hrefs, or a blank `navLabel` or menu label throw a `RangeError`.
+`SiteHeader` is a public site's header. Supply `brand` (such as a logo linked to the home page), `navLabel` and `items` (`{ id, label, href, current? }`, `current` as SectionNav's: `page`, `location` or `true` sets `aria-current`), `labels` (`openMenu`, `closeMenu`) and the decorative `menuIcon` and `closeIcon` glyphs. From `lg` the bar shows the brand, the destinations as a row of links (the current one at label weight over a bar in the words' colour, a thick underline in forced colours) and `actions` at its end, such as a language switch, Sign in (`Box as="a" link="quiet"`) and a `ButtonLink`. Below `lg` it shows the brand, `compactActions` and a menu button that opens, under the bar over the rest of the window, the destinations as large rows (the current one in the accent) and `menuActions` at the panel's foot, such as full-width `ButtonLink`s. The menu is a native `details`, so it opens and closes by touch, click and keyboard with no script, as a page rendered on the server needs; its `summary` is the button, named `openMenu` or `closeMenu` by its state. Script adds Escape (focus back on the button), and closes it when a link in it is chosen, focus leaves it, a press lands outside it, or the window widens to `lg`; nothing traps focus. A page rendered on the server has the no-script menu until it hydrates; a site that never hydrates keeps it, which still opens and closes. While the menu is open the bar's `compactActions` step aside (the menu holds its own `menuActions`), so the bar shows only the brand and the close button. The bar is 56 px tall below `lg` and 72 px from it, on the solid surface with a hairline under it; `sticky` (default `true`) keeps it at the window's top. While a sticky header is on the page the document's `scroll-padding-top` clears the bar, its hairline and a small gap, so a `#fragment` link, `:target` and `scrollIntoView` land below the bar instead of under it; a header with `sticky={false}` leaves the scroll padding alone. An optional `skipLink` (`{ label, href }`, such as `{ label: 'Skip to content', href: '#main' }`) is the header's first focusable element: visually hidden until it has focus, then a pill on the surface with the focus ring over the bar's start. Give the target (usually `main`) the matching `id`, and `tabIndex={-1}` so every browser moves focus there with the jump. No items, blank or repeated ids, blank labels or hrefs, a blank `navLabel` or menu label, or a skip link with a blank label or an `href` that is not a `#fragment` throw a `RangeError`.
 
 ```tsx
 <SiteHeader
+  skipLink={{ label: 'Skip to content', href: '#main' }}
   brand={<a href="/">Wetland Trust</a>}
   navLabel="Main"
   items={[{ id: 'marsh', label: 'Marsh', href: '/marsh', current: 'page' }]}
@@ -1081,7 +1133,7 @@ const { headings, omissions } = inspectMarkdown(page.body, {
 </ScreenPreview>
 ```
 
-`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`.
+`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; a plain link that is all of `legal` or `end` gets the 44 px target on a coarse pointer too (a link inside running legal words stays inline). 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
 <SiteFooter

package/dist/components/SiteHeader.d.ts

@@ -1,5 +1,5 @@
 import { type SiteHeaderProps } from './site-header/types.js';
-export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, } from './site-header/types.js';
+export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, SiteHeaderSkipLink, } from './site-header/types.js';
 /**
  * A public site's header: the brand at the start; from `lg` the main
  * destinations as a row of links (the current one marked by weight and a
@@ -9,6 +9,9 @@ export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, } from './site-
  * it opens and closes by touch, click and keyboard with no script, as a
  * page rendered on the server needs; script adds Escape (focus back on the
  * button) and closes it when a link is chosen or focus leaves it. It traps
- * no focus. Invalid items or words throw a `RangeError`.
+ * no focus. While the menu is open the compact actions step aside, so the
+ * bar shows only the brand and the close button. An optional skip link
+ * comes first, hidden until it has focus. Invalid items or words throw a
+ * `RangeError`.
  */
-export declare function SiteHeader({ actions, brand, closeIcon, compactActions, items, labels, menuActions, menuIcon, navLabel, sticky, }: SiteHeaderProps): import("react").JSX.Element;
+export declare function SiteHeader({ actions, brand, closeIcon, compactActions, items, labels, menuActions, menuIcon, navLabel, skipLink, sticky, }: SiteHeaderProps): import("react").JSX.Element;

package/dist/components/SiteHeader.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { cx } from '../class-names.js';
+import { tabStop } from '../tab-stop.js';
 import { SiteHeaderLinks } from './site-header/SiteHeaderLinks.js';
 import { useMenuDismiss } from './site-header/use-menu-dismiss.js';
 import { assertSiteHeaderProps } from './site-header/validate.js';
@@ -14,11 +15,14 @@ import { assertSiteHeaderProps } from './site-header/validate.js';
  * it opens and closes by touch, click and keyboard with no script, as a
  * page rendered on the server needs; script adds Escape (focus back on the
  * button) and closes it when a link is chosen or focus leaves it. It traps
- * no focus. Invalid items or words throw a `RangeError`.
+ * no focus. While the menu is open the compact actions step aside, so the
+ * bar shows only the brand and the close button. An optional skip link
+ * comes first, hidden until it has focus. Invalid items or words throw a
+ * `RangeError`.
  */
-export function SiteHeader({ actions, brand, closeIcon, compactActions, items, labels, menuActions, menuIcon, navLabel, sticky = true, }) {
-    assertSiteHeaderProps({ items, labels, navLabel });
+export function SiteHeader({ actions, brand, closeIcon, compactActions, items, labels, menuActions, menuIcon, navLabel, skipLink, sticky = true, }) {
+    assertSiteHeaderProps({ items, labels, navLabel, skipLink });
     const menuRef = useRef(null);
     useMenuDismiss(menuRef);
-    return (_jsx("header", { className: cx('sw-site-header', sticky && 'sw-site-header-sticky'), children: _jsxs("div", { className: "sw-site-header-bar", children: [_jsx("div", { className: "sw-site-header-brand", children: brand }), _jsx(SiteHeaderLinks, { className: "sw-site-header-nav", items: items, navLabel: navLabel }), actions ? (_jsx("div", { className: "sw-site-header-actions", children: actions })) : null, _jsxs("div", { className: "sw-site-header-compact", children: [compactActions, _jsxs("details", { className: "sw-site-header-menu", ref: menuRef, children: [_jsxs("summary", { className: "sw-site-header-menu-button", children: [_jsxs("span", { className: "sw-site-header-menu-open", children: [_jsx("span", { "aria-hidden": "true", className: "sw-site-header-glyph", children: menuIcon }), _jsx("span", { className: "sw-sr-only", children: labels.openMenu })] }), _jsxs("span", { className: "sw-site-header-menu-close", children: [_jsx("span", { "aria-hidden": "true", className: "sw-site-header-glyph", children: closeIcon }), _jsx("span", { className: "sw-sr-only", children: labels.closeMenu })] })] }), _jsxs("div", { className: "sw-site-header-panel", children: [_jsx(SiteHeaderLinks, { className: "sw-site-header-menu-nav", items: items, navLabel: navLabel }), menuActions ? (_jsx("div", { className: "sw-site-header-menu-actions", children: menuActions })) : null] })] })] })] }) }));
+    return (_jsxs("header", { className: cx('sw-site-header', sticky && 'sw-site-header-sticky'), children: [skipLink ? (_jsx("a", { className: "sw-site-header-skip-link", href: skipLink.href, tabIndex: tabStop, children: skipLink.label })) : null, _jsxs("div", { className: "sw-site-header-bar", children: [_jsx("div", { className: "sw-site-header-brand", children: brand }), _jsx(SiteHeaderLinks, { className: "sw-site-header-nav", items: items, navLabel: navLabel }), actions ? (_jsx("div", { className: "sw-site-header-actions", children: actions })) : null, _jsxs("div", { className: "sw-site-header-compact", children: [compactActions ? (_jsx("div", { className: "sw-site-header-compact-actions", children: compactActions })) : null, _jsxs("details", { className: "sw-site-header-menu", ref: menuRef, children: [_jsxs("summary", { className: "sw-site-header-menu-button", children: [_jsxs("span", { className: "sw-site-header-menu-open", children: [_jsx("span", { "aria-hidden": "true", className: "sw-site-header-glyph", children: menuIcon }), _jsx("span", { className: "sw-sr-only", children: labels.openMenu })] }), _jsxs("span", { className: "sw-site-header-menu-close", children: [_jsx("span", { "aria-hidden": "true", className: "sw-site-header-glyph", children: closeIcon }), _jsx("span", { className: "sw-sr-only", children: labels.closeMenu })] })] }), _jsxs("div", { className: "sw-site-header-panel", children: [_jsx(SiteHeaderLinks, { className: "sw-site-header-menu-nav", items: items, navLabel: navLabel }), menuActions ? (_jsx("div", { className: "sw-site-header-menu-actions", children: menuActions })) : null] })] })] })] })] }));
 }

package/dist/components/TaskList.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes } from 'react';
+import type { TaskListItem } from './task-list/task-list-item.js';
+import { type TaskListLabels } from './task-list/task-list-status.js';
+export type { TaskListActionContext, TaskListItem, } from './task-list/task-list-item.js';
+export { defaultTaskListLabels, type TaskListLabels, type TaskListStatus, taskListStatuses, } from './task-list/task-list-status.js';
+export type TaskListProps = Omit<HTMLAttributes<HTMLOListElement>, 'aria-label' | 'children'> & {
+    /** The list's name, such as "Get Spring 2027 ready". */
+    label: string;
+    /** The tasks, in order. */
+    items: readonly TaskListItem[];
+    /** The status words heard after each title. English by default. */
+    labels?: Partial<TaskListLabels>;
+};
+/**
+ * A setup checklist: an ordered list of tasks, each with a status marker
+ * (done: a check on the success fill; next: an accent ring round a dot;
+ * todo: a grey ring; waiting: a muted lock), its title, a muted detail
+ * line and an optional action at the row's end. Each title is followed by
+ * its status word for assistive technology. Scalewing holds no order
+ * rules: the consumer sets every task's status and action.
+ */
+export declare function TaskList({ label, items, labels, className, ...rest }: TaskListProps): import("react").JSX.Element;

package/dist/components/TaskList.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cx } from '../class-names.js';
+import { assertTaskList } from './task-list/assert-task-list.js';
+import { taskListWords, taskSpokenTitle, } from './task-list/task-list-status.js';
+export { defaultTaskListLabels, taskListStatuses, } from './task-list/task-list-status.js';
+function TaskRow({ item, labels, titleId, }) {
+    const action = typeof item.action === 'function' ? item.action({ titleId }) : item.action;
+    const hasAction = action !== undefined && action !== null && action !== false;
+    return (_jsxs("li", { className: cx('sw-task-list-item', `sw-task-list-item-${item.status}`), children: [_jsx("span", { "aria-hidden": "true", className: "sw-task-list-marker" }), _jsxs("span", { className: "sw-task-list-body", children: [_jsxs("span", { className: "sw-task-list-title", children: [_jsx("span", { "aria-hidden": "true", id: titleId, children: item.title }), _jsx("span", { className: "sw-sr-only", children: taskSpokenTitle(item.title, item.status, labels) })] }), item.detail !== undefined ? (_jsx("span", { className: "sw-task-list-detail", children: item.detail })) : null] }), hasAction ? _jsx("span", { className: "sw-task-list-action", children: action }) : null] }));
+}
+/**
+ * A setup checklist: an ordered list of tasks, each with a status marker
+ * (done: a check on the success fill; next: an accent ring round a dot;
+ * todo: a grey ring; waiting: a muted lock), its title, a muted detail
+ * line and an optional action at the row's end. Each title is followed by
+ * its status word for assistive technology. Scalewing holds no order
+ * rules: the consumer sets every task's status and action.
+ */
+export function TaskList({ label, items, labels, className, ...rest }) {
+    const words = taskListWords(labels);
+    assertTaskList(label, items, words);
+    const baseId = useId();
+    // role="list" keeps the list a list where list-style: none drops it (Safari).
+    return (_jsx("ol", { "aria-label": label, className: cx('sw-task-list', className), role: "list", ...rest, children: items.map((item, index) => (_jsx(TaskRow, { item: item, labels: words, titleId: `${baseId}-${index}` }, item.id))) }));
+}

package/dist/components/site-header/types.d.ts

@@ -15,6 +15,16 @@ export type SiteHeaderLabels = {
     /** The open menu button's name, such as "Close the menu". */
     closeMenu: string;
 };
+/**
+ * A "skip to content" link, the header's first focusable element: hidden
+ * until it has focus, then shown at the bar's start.
+ */
+export type SiteHeaderSkipLink = {
+    /** The link's words, such as "Skip to content". */
+    label: string;
+    /** The main content's fragment, such as `#main`. */
+    href: string;
+};
 export type SiteHeaderProps = {
     /** The site's mark at the start, such as a logo linked to the home page. */
     brand: ReactNode;
@@ -24,7 +34,10 @@ export type SiteHeaderProps = {
     items: readonly SiteHeaderItem[];
     /** The bar's end from `lg`, such as a language switch, Sign in and a ButtonLink. */
     actions?: ReactNode;
-    /** Beside the menu button below `lg`, such as the language switch. */
+    /**
+     * Beside the menu button below `lg`, such as the language switch. They
+     * step aside while the menu is open, which holds its own `menuActions`.
+     */
     compactActions?: ReactNode;
     /** In the open menu under its links, such as full-width ButtonLinks. */
     menuActions?: ReactNode;
@@ -35,4 +48,6 @@ export type SiteHeaderProps = {
     closeIcon: ReactNode;
     /** Whether the bar sticks to the window's top as the page scrolls (default `true`). */
     sticky?: boolean;
+    /** A "skip to content" link before everything else in the header. */
+    skipLink?: SiteHeaderSkipLink;
 };

package/dist/components/site-header/validate.d.ts

@@ -1,7 +1,8 @@
 import { type SiteHeaderProps } from './types.js';
 /**
  * Fails closed on the header's words and destinations: no items, blank or
- * repeated ids, blank labels or hrefs, and a blank navigation name or menu
- * button name.
+ * repeated ids, blank labels or hrefs, a blank navigation name or menu
+ * button name, and a skip link with blank words or an address that is not
+ * a fragment on the page.
  */
-export declare function assertSiteHeaderProps({ items, labels, navLabel, }: Pick<SiteHeaderProps, 'items' | 'labels' | 'navLabel'>): void;
+export declare function assertSiteHeaderProps({ items, labels, navLabel, skipLink, }: Pick<SiteHeaderProps, 'items' | 'labels' | 'navLabel' | 'skipLink'>): void;

package/dist/components/site-header/validate.js

@@ -1,10 +1,11 @@
 import { assertNavItems } from '../nav-items.js';
 /**
  * Fails closed on the header's words and destinations: no items, blank or
- * repeated ids, blank labels or hrefs, and a blank navigation name or menu
- * button name.
+ * repeated ids, blank labels or hrefs, a blank navigation name or menu
+ * button name, and a skip link with blank words or an address that is not
+ * a fragment on the page.
  */
-export function assertSiteHeaderProps({ items, labels, navLabel, }) {
+export function assertSiteHeaderProps({ items, labels, navLabel, skipLink, }) {
     if (items.length === 0)
         throw new RangeError('SiteHeader needs at least one item');
     assertNavItems('SiteHeader', items);
@@ -14,4 +15,12 @@ export function assertSiteHeaderProps({ items, labels, navLabel, }) {
         throw new RangeError('SiteHeader needs a nonempty navLabel');
     if (!labels.openMenu.trim() || !labels.closeMenu.trim())
         throw new RangeError('SiteHeader labels need nonempty openMenu and closeMenu');
+    if (skipLink)
+        assertSkipLink(skipLink);
+}
+function assertSkipLink({ href, label }) {
+    if (!label.trim())
+        throw new RangeError('SiteHeader skipLink needs a nonempty label');
+    if (!/^#\S+$/.test(href))
+        throw new RangeError('SiteHeader skipLink href must be a fragment such as #main');
 }

package/dist/components/task-list/assert-task-list.d.ts

@@ -0,0 +1,8 @@
+import { type TaskListLabels } from './task-list-status.js';
+import type { TaskListItem } from './task-list-item.js';
+/**
+ * Fails closed on what would leave a task unnamed or unread: a blank list
+ * label or status word, a blank or repeated id, a blank title or detail,
+ * or an unknown status.
+ */
+export declare function assertTaskList(label: string, items: readonly TaskListItem[], labels: TaskListLabels): void;

package/dist/components/task-list/assert-task-list.js

@@ -0,0 +1,31 @@
+import { isTaskListStatus, taskListStatuses, } from './task-list-status.js';
+function isBlank(value) {
+    return typeof value !== 'string' || !value.trim();
+}
+function assertItem(item, ids) {
+    if (isBlank(item.id))
+        throw new RangeError('TaskList item id must not be empty');
+    if (ids.has(item.id))
+        throw new RangeError(`TaskList item ids must be unique: ${item.id}`);
+    ids.add(item.id);
+    if (isBlank(item.title))
+        throw new RangeError('TaskList item title must not be empty');
+    if (item.detail !== undefined && isBlank(item.detail))
+        throw new RangeError('TaskList item detail must not be empty');
+    if (!isTaskListStatus(item.status))
+        throw new RangeError(`Unknown TaskList status: ${String(item.status)} (use ${taskListStatuses.join(', ')})`);
+}
+/**
+ * Fails closed on what would leave a task unnamed or unread: a blank list
+ * label or status word, a blank or repeated id, a blank title or detail,
+ * or an unknown status.
+ */
+export function assertTaskList(label, items, labels) {
+    if (isBlank(label))
+        throw new RangeError('TaskList label must not be empty');
+    if (taskListStatuses.some((status) => isBlank(labels[status])))
+        throw new RangeError('TaskList labels must not be empty');
+    const ids = new Set();
+    for (const item of items)
+        assertItem(item, ids);
+}

package/dist/components/task-list/task-list-item.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { TaskListStatus } from './task-list-status.js';
+/** What a task's action is given: the id of its drawn title. */
+export type TaskListActionContext = {
+    /**
+     * The id of the task's drawn title, for the action's `aria-describedby`
+     * (or `aria-labelledby` with the action's own id), so a "Change" button
+     * is heard as "Change" for "Season" out of the list too.
+     */
+    titleId: string;
+};
+/** One task of a `TaskList`. */
+export type TaskListItem = {
+    /** Unique within the list; the row's React key. */
+    id: string;
+    title: string;
+    /** One muted line under the title: what is done, or what is left. */
+    detail?: string;
+    status: TaskListStatus;
+    /**
+     * A control at the row's end, such as a small `Button`. A function gets
+     * the title's id to name or describe the control by its task.
+     */
+    action?: ReactNode | ((context: TaskListActionContext) => ReactNode);
+};

package/dist/components/task-list/task-list-item.js

@@ -0,0 +1 @@
+export {};

package/dist/components/task-list/task-list-status.d.ts

@@ -0,0 +1,11 @@
+/** Where a task stands in a checklist. */
+export declare const taskListStatuses: readonly ["done", "next", "todo", "waiting"];
+export type TaskListStatus = (typeof taskListStatuses)[number];
+/** The status words assistive technology hears after each task's title. */
+export type TaskListLabels = Record<TaskListStatus, string>;
+export declare const defaultTaskListLabels: TaskListLabels;
+export declare function isTaskListStatus(value: unknown): value is TaskListStatus;
+/** The words read for one task: its title, a comma, and its status word. */
+export declare function taskSpokenTitle(title: string, status: TaskListStatus, labels: TaskListLabels): string;
+/** The consumer's words over the English ones; a word left out or `undefined` stays English. */
+export declare function taskListWords(labels: Partial<TaskListLabels> | undefined): TaskListLabels;

package/dist/components/task-list/task-list-status.js

@@ -0,0 +1,24 @@
+/** Where a task stands in a checklist. */
+export const taskListStatuses = ['done', 'next', 'todo', 'waiting'];
+export const defaultTaskListLabels = {
+    done: 'Done',
+    next: 'Next step',
+    todo: 'To do',
+    waiting: 'Waiting',
+};
+export function isTaskListStatus(value) {
+    return taskListStatuses.includes(value);
+}
+/** The words read for one task: its title, a comma, and its status word. */
+export function taskSpokenTitle(title, status, labels) {
+    return `${title}, ${labels[status]}`;
+}
+/** The consumer's words over the English ones; a word left out or `undefined` stays English. */
+export function taskListWords(labels) {
+    return {
+        done: labels?.done ?? defaultTaskListLabels.done,
+        next: labels?.next ?? defaultTaskListLabels.next,
+        todo: labels?.todo ?? defaultTaskListLabels.todo,
+        waiting: labels?.waiting ?? defaultTaskListLabels.waiting,
+    };
+}

package/dist/css/css-button.js

@@ -3,6 +3,7 @@ import { breakpointQuery } from './breakpoints.js';
 import { buttonGroupAttachedClassCatalog, cssButtonGroupAttachedClasses, } from './css-button-group-attached.js';
 import { buttonWidthClassCatalog, cssButtonWidthClasses, } from './css-button-width.js';
 import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
 /**
  * The web Button's variants: the shared tiers from `@scalewing/tokens`, plus
@@ -82,13 +83,25 @@ function ariaDisabledForcedRules() {
   .sw-button-disabled-neutral[aria-disabled='true']:not(.sw-button-ghost) { border-color: GrayText; color: GrayText; }
 }`;
 }
+/*
+ * Each size's height and side padding for a fine pointer, then the
+ * comfortable touch target (44 px both ways, the md control height) for
+ * every size on a coarse pointer, so an xs or sm Button in a table row or a
+ * checklist is still easy to tap. Its look stays the size's (padding and
+ * type); only the minimum box grows. The coarse rule follows the sizes,
+ * which it outranks only by order.
+ */
 function sizeRules() {
-    return buttonSizes
+    const sizes = buttonSizes
         .map((size) => {
         const control = controlScale[size];
         return `.sw-button-${size} { min-height: ${control.minHeight}px; padding-inline: ${control.paddingInline}px; }`;
     })
         .join('\n');
+    return `${sizes}
+@media ${coarsePointerQuery} {
+  .sw-button { min-height: ${touchTarget}; min-width: ${touchTarget}; }
+}`;
 }
 /*
  * The button's own children are its flex items, so a glyph and its label

package/dist/css/css-components.js

@@ -67,6 +67,7 @@ import { cssDenominationGridClasses } from './css-denomination-grid.js';
 import { cssFieldClasses } from './css-field.js';
 import { cssStepperClasses } from './css-stepper.js';
 import { cssStepsClasses } from './css-steps.js';
+import { cssTaskListClasses } from './css-task-list.js';
 import { cssToastClasses } from './css-toast.js';
 import { cssToastCardClasses } from './css-toast-card.js';
 import { cssBoxBorderClasses } from './css-box-border.js';
@@ -276,6 +277,8 @@ ${cssStepperClasses()}
 
 ${cssStepsClasses()}
 
+${cssTaskListClasses()}
+
 ${cssSplitClasses()}
 
 ${cssToastClasses()}

package/dist/css/css-site-footer.js

@@ -21,7 +21,10 @@ function type(variant, weight = variant.fontWeight) {
  * win by coming after it (`cssSiteFooterClasses` follows `cssBandClasses`;
  * a test holds the order).
  * Below `md` the brand spans two columns of groups; from `md` the brand
- * and the groups share one wrapping row, spread apart.
+ * and the groups share one wrapping row, spread apart. On a coarse pointer
+ * the group links and a link that is all of a bottom-row slot (`legal` or
+ * `end`, such as a language switch) are the 44 px touch target; a link
+ * inside running legal words stays inline.
  */
 export function cssSiteFooterClasses() {
     return `.sw-site-footer-top {
@@ -120,6 +123,13 @@ export function cssSiteFooterClasses() {
     min-height: ${touchTarget};
   }
 
+  [data-theme] .sw-band-inverse :is(.sw-site-footer-legal, .sw-site-footer-end) > a:not(.sw-button) {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-height: ${touchTarget};
+  }
+
   .sw-site-footer-links {
     gap: 0;
   }

package/dist/css/css-site-header-anchors.d.ts

@@ -0,0 +1 @@
+export declare function cssSiteHeaderAnchorRules(): string;

package/dist/css/css-site-header-anchors.js

@@ -0,0 +1,22 @@
+import { siteHeaderCompactHeight, siteHeaderWideHeight, siteHeaderWideQuery, } from './site-header-geometry.js';
+/** The room an in-page jump leaves above its target: the bar, its hairline and a gap. */
+function scrollPadding(barHeight) {
+    return `calc(${barHeight} + 1px + var(--sw-space-3))`;
+}
+/*
+ * While a sticky SiteHeader is on the page, the document's scroll padding
+ * clears the bar (its height at each width, its hairline) and a small gap,
+ * so a #fragment link, :target and scrollIntoView land below the bar
+ * instead of under it. A header in the page flow changes nothing.
+ */
+export function cssSiteHeaderAnchorRules() {
+    return `html:has(.sw-site-header-sticky) {
+  scroll-padding-top: ${scrollPadding(siteHeaderCompactHeight)};
+}
+
+@media ${siteHeaderWideQuery} {
+  html:has(.sw-site-header-sticky) {
+    scroll-padding-top: ${scrollPadding(siteHeaderWideHeight)};
+  }
+}`;
+}

package/dist/css/css-site-header-skip-link.d.ts

@@ -0,0 +1 @@
+export declare function cssSiteHeaderSkipLinkRules(): string;

package/dist/css/css-site-header-skip-link.js

@@ -0,0 +1,49 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { visuallyHiddenDeclarations } from './css-utilities.js';
+import { siteHeaderContentStart, siteHeaderGutter, siteHeaderGutterQuery, } from './site-header-geometry.js';
+const label = typographyVariants.label;
+/*
+ * The header's skip link, its first focusable element: visually hidden
+ * until it has focus, then a pill on the surface in the text colour with
+ * the accent ring, laid over the bar's start (centred in its height and
+ * lined up with the brand), the control height tall only then. Positioned,
+ * it paints over the bar's content, which is not, so it needs no layer of
+ * its own.
+ */
+export function cssSiteHeaderSkipLinkRules() {
+    return `.sw-site-header-skip-link {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  inset-block-start: 50%;
+  inset-inline-start: ${siteHeaderContentStart(siteHeaderGutter.compact)};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  padding-inline: var(--sw-space-4);
+  position: absolute;
+  transform: translateY(-50%);
+  white-space: nowrap;
+}
+
+[data-theme] .sw-site-header-skip-link {
+  color: var(--sw-color-text);
+  text-decoration: none;
+}
+
+[data-theme] .sw-site-header-skip-link:focus {
+  min-height: var(--sw-control-md-min-height);
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-site-header-skip-link:not(:focus) { ${visuallyHiddenDeclarations} }
+
+@media ${siteHeaderGutterQuery} {
+  .sw-site-header-skip-link { inset-inline-start: ${siteHeaderContentStart(siteHeaderGutter.wide)}; }
+}`;
+}

package/dist/css/css-site-header.js

@@ -1,19 +1,18 @@
 import { typographyVariants } from '@scalewing/tokens';
-import { breakpointQuery } from './breakpoints.js';
+import { cssSiteHeaderAnchorRules } from './css-site-header-anchors.js';
+import { cssSiteHeaderSkipLinkRules } from './css-site-header-skip-link.js';
 import { quietFill } from './quiet-fill.js';
+import { siteHeaderBarMaxWidth, siteHeaderCompactHeight as compactHeight, siteHeaderGutter, siteHeaderGutterQuery, siteHeaderWideHeight as wideHeight, siteHeaderWideQuery as wide, } from './site-header-geometry.js';
 import { zIndex } from './stacking.js';
 const label = typographyVariants.label;
 const title = typographyVariants.title;
-/** The bar's height: 56 px on a phone, 72 px from `lg`. */
-const compactHeight = 'calc(var(--sw-control-md-min-height) + var(--sw-space-3))';
-const wideHeight = 'calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1))';
-const wide = breakpointQuery('from', 'lg');
 /*
  * The bar: the solid surface with a hairline under it, its content in the
  * page container with the page gutter. Below `lg` it holds the brand, the
  * compact actions and the menu button; from `lg` the brand, the
  * destinations (the current one at label weight over a bar in the words'
- * colour, as tall as the bar) and the actions, spread apart.
+ * colour, as tall as the bar) and the actions, spread apart. The compact
+ * actions' box adds no layout of its own (`display: contents`).
  */
 function barRules() {
     return `.sw-site-header {
@@ -38,9 +37,9 @@ function barRules() {
   gap: var(--sw-space-5);
   justify-content: space-between;
   margin-inline: auto;
-  max-width: calc(var(--sw-container-max) + 2 * var(--sw-space-5));
+  max-width: ${siteHeaderBarMaxWidth};
   min-height: var(--sw-site-header-height);
-  padding-inline: var(--sw-space-4);
+  padding-inline: ${siteHeaderGutter.compact};
 }
 
 .sw-site-header-brand {
@@ -60,6 +59,10 @@ function barRules() {
   gap: var(--sw-space-1);
 }
 
+.sw-site-header-compact-actions {
+  display: contents;
+}
+
 .sw-site-header-list {
   list-style: none;
   margin: 0;
@@ -101,8 +104,8 @@ function barRules() {
   gap: var(--sw-space-4);
 }
 
-@media ${breakpointQuery('from', 'md')} {
-  .sw-site-header-bar { padding-inline: var(--sw-space-5); }
+@media ${siteHeaderGutterQuery} {
+  .sw-site-header-bar { padding-inline: ${siteHeaderGutter.wide}; }
 }
 
 @media ${wide} {
@@ -118,13 +121,19 @@ function barRules() {
  * open, the other pair hidden so only one is read), and its panel lies
  * under the bar over the rest of the window, the destinations as large
  * rows with hairlines and the menu's actions at the panel's foot. It
- * scrolls on its own when the window is short.
+ * scrolls on its own when the window is short. While it is open the bar's
+ * compact actions step aside, since the menu holds its own actions, so the
+ * bar shows only the brand and the close button.
  */
 function menuRules() {
     return `.sw-site-header-menu > summary {
   list-style: none;
 }
 
+.sw-site-header-compact:has(> .sw-site-header-menu[open]) > .sw-site-header-compact-actions {
+  display: none;
+}
+
 .sw-site-header-menu > summary::-webkit-details-marker {
   display: none;
 }
@@ -214,6 +223,10 @@ export function cssSiteHeaderClasses() {
 
 ${menuRules()}
 
+${cssSiteHeaderSkipLinkRules()}
+
+${cssSiteHeaderAnchorRules()}
+
 /*
  * Forced colours drop box shadows, so the current destination's bar is a
  * thick underline there.
@@ -248,6 +261,8 @@ export function siteHeaderClassCatalog() {
         'sw-site-header-nav',
         'sw-site-header-actions',
         'sw-site-header-compact',
+        'sw-site-header-compact-actions',
+        'sw-site-header-skip-link',
         'sw-site-header-list',
         'sw-site-header-link',
         'sw-site-header-menu',

package/dist/css/css-task-list.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A setup checklist: an ordered list of rows a hairline apart, each a
+ * marker, the title (label type) over a muted caption detail, and an
+ * action at the row's end. The marker and the action sit on the row's
+ * middle. On a narrow column, an action that would leave the words less
+ * than half the row wraps to a line of its own at the row's end. A
+ * waiting task's title is muted at the body weight.
+ */
+export declare function cssTaskListClasses(): string;
+export declare function taskListClassCatalog(): string[];

package/dist/css/css-task-list.js

@@ -0,0 +1,182 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { checkStrokeIn } from './chevron.js';
+const body = typographyVariants.body;
+const caption = typographyVariants.caption;
+const label = typographyVariants.label;
+/** The marker's side: spacing step 5 (24 px). */
+const marker = 'var(--sw-space-5)';
+/** The width of a ring, and of the check's and the lock's strokes. */
+const stroke = '2px';
+/*
+ * Each status's marker is private chrome drawn with borders and an inset
+ * ring, so the shapes differ (a check, a ring round a dot, an empty ring,
+ * a lock) and colour is never the only cue: done is the success fill with
+ * a check in the surface colour, as Steps' done marker; next an accent
+ * ring round an accent dot (a zero-size box with a step-1 border, so forced
+ * colours keep it); todo the hairline ring of a step ahead; waiting a lock
+ * in the muted colour with no ring (a shackle of three borders, 8 px
+ * square, over a 12 × 8 px body that is all border).
+ */
+function markerRules() {
+    return `.sw-task-list-item-todo .sw-task-list-marker {
+  box-shadow: inset 0 0 0 ${stroke} var(--sw-color-border);
+}
+
+.sw-task-list-item-next .sw-task-list-marker {
+  box-shadow: inset 0 0 0 ${stroke} var(--sw-color-accent);
+}
+
+.sw-task-list-item-next .sw-task-list-marker::after {
+  border: var(--sw-space-1) solid var(--sw-color-accent);
+  border-radius: var(--sw-radius-pill);
+  content: '';
+}
+
+.sw-task-list-item-done .sw-task-list-marker {
+  background: var(--sw-color-success);
+}
+
+.sw-task-list-item-done .sw-task-list-marker::after {
+  ${checkStrokeIn('var(--sw-color-surface)')}
+  content: '';
+  height: var(--sw-space-3);
+  margin-top: calc(-1 * var(--sw-space-1) / 2);
+  transform: rotate(45deg);
+  width: calc(var(--sw-space-3) / 2);
+}
+
+.sw-task-list-item-waiting .sw-task-list-marker {
+  color: var(--sw-color-muted);
+  flex-direction: column;
+}
+
+.sw-task-list-item-waiting .sw-task-list-marker::before {
+  border: ${stroke} solid currentColor;
+  border-bottom: 0;
+  border-radius: var(--sw-space-1) var(--sw-space-1) 0 0;
+  content: '';
+  height: calc(var(--sw-space-2) - ${stroke});
+  width: calc(var(--sw-space-2) - 2 * ${stroke});
+}
+
+.sw-task-list-item-waiting .sw-task-list-marker::after {
+  border: var(--sw-space-1) solid currentColor;
+  border-radius: calc(var(--sw-space-1) / 2);
+  content: '';
+  width: calc(var(--sw-space-3) - 2 * var(--sw-space-1));
+}`;
+}
+/* Forced colours drop fills and inset shadows: every ring becomes a
+   border, the next one Highlight, and the strokes take CanvasText. */
+function forcedColorRules() {
+    return `@media (forced-colors: active) {
+  .sw-task-list-item:not(.sw-task-list-item-waiting) .sw-task-list-marker {
+    border: ${stroke} solid CanvasText;
+    box-shadow: none;
+  }
+  .sw-task-list-item-next .sw-task-list-marker { border-color: Highlight; }
+  .sw-task-list-item-next .sw-task-list-marker::after { border-color: Highlight; }
+  .sw-task-list-item-done .sw-task-list-marker::after { border-color: CanvasText; }
+  .sw-task-list-item-waiting .sw-task-list-marker { color: CanvasText; }
+  .sw-task-list-item-waiting .sw-task-list-title { color: GrayText; }
+}`;
+}
+/**
+ * A setup checklist: an ordered list of rows a hairline apart, each a
+ * marker, the title (label type) over a muted caption detail, and an
+ * action at the row's end. The marker and the action sit on the row's
+ * middle. On a narrow column, an action that would leave the words less
+ * than half the row wraps to a line of its own at the row's end. A
+ * waiting task's title is muted at the body weight.
+ */
+export function cssTaskListClasses() {
+    return `.sw-task-list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+}
+
+.sw-task-list-item {
+  align-items: center;
+  color: var(--sw-color-text);
+  column-gap: var(--sw-space-3);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--sw-font-sans);
+  min-width: 0;
+  padding-block: var(--sw-space-2);
+  row-gap: var(--sw-space-2);
+}
+
+.sw-task-list-item + .sw-task-list-item {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-task-list-marker {
+  align-items: center;
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  height: ${marker};
+  justify-content: center;
+  width: ${marker};
+}
+
+.sw-task-list-body {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-width: 50%;
+}
+
+.sw-task-list-title {
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  overflow-wrap: anywhere;
+}
+
+.sw-task-list-item-waiting .sw-task-list-title {
+  color: var(--sw-color-muted);
+  font-weight: ${body.fontWeight};
+}
+
+.sw-task-list-detail {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  overflow-wrap: anywhere;
+}
+
+.sw-task-list-action {
+  display: inline-flex;
+  flex: none;
+  margin-inline-start: auto;
+  max-width: 100%;
+}
+
+${markerRules()}
+
+${forcedColorRules()}`;
+}
+export function taskListClassCatalog() {
+    return [
+        'sw-task-list',
+        'sw-task-list-item',
+        'sw-task-list-item-done',
+        'sw-task-list-item-next',
+        'sw-task-list-item-todo',
+        'sw-task-list-item-waiting',
+        'sw-task-list-marker',
+        'sw-task-list-body',
+        'sw-task-list-title',
+        'sw-task-list-detail',
+        'sw-task-list-action',
+    ];
+}

package/dist/css/site-header-geometry.d.ts

@@ -0,0 +1,21 @@
+/** The bar's height below `lg`: 56 px. */
+export declare const siteHeaderCompactHeight = "calc(var(--sw-control-md-min-height) + var(--sw-space-3))";
+/** The bar's height from `lg`: 72 px. */
+export declare const siteHeaderWideHeight = "calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1))";
+/** The bar's content: the page container plus the page gutter each side. */
+export declare const siteHeaderBarMaxWidth = "calc(var(--sw-container-max) + 2 * var(--sw-space-5))";
+/** From here the bar is the wide one with its row of destinations. */
+export declare const siteHeaderWideQuery: string;
+/** From here the bar's gutter is the wider one. */
+export declare const siteHeaderGutterQuery: string;
+/** The bar's gutter below `md` (`compact`) and from it (`wide`). */
+export declare const siteHeaderGutter: {
+    readonly compact: "var(--sw-space-4)";
+    readonly wide: "var(--sw-space-5)";
+};
+/**
+ * Where the bar's content starts, measured from the header's start: the
+ * centred bar's margin (none on a window narrower than the bar) plus its
+ * gutter, so something laid over the bar lines up with the brand.
+ */
+export declare function siteHeaderContentStart(gutter: string): string;

package/dist/css/site-header-geometry.js

@@ -0,0 +1,28 @@
+import { breakpointQuery } from './breakpoints.js';
+/*
+ * The site header's measures, shared by the bar, its skip link and the
+ * document's scroll padding so all three agree on where the bar ends.
+ */
+/** The bar's height below `lg`: 56 px. */
+export const siteHeaderCompactHeight = 'calc(var(--sw-control-md-min-height) + var(--sw-space-3))';
+/** The bar's height from `lg`: 72 px. */
+export const siteHeaderWideHeight = 'calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1))';
+/** The bar's content: the page container plus the page gutter each side. */
+export const siteHeaderBarMaxWidth = 'calc(var(--sw-container-max) + 2 * var(--sw-space-5))';
+/** From here the bar is the wide one with its row of destinations. */
+export const siteHeaderWideQuery = breakpointQuery('from', 'lg');
+/** From here the bar's gutter is the wider one. */
+export const siteHeaderGutterQuery = breakpointQuery('from', 'md');
+/** The bar's gutter below `md` (`compact`) and from it (`wide`). */
+export const siteHeaderGutter = {
+    compact: 'var(--sw-space-4)',
+    wide: 'var(--sw-space-5)',
+};
+/**
+ * Where the bar's content starts, measured from the header's start: the
+ * centred bar's margin (none on a window narrower than the bar) plus its
+ * gutter, so something laid over the bar lines up with the brand.
+ */
+export function siteHeaderContentStart(gutter) {
+    return `calc(max(0px, (100% - ${siteHeaderBarMaxWidth}) / 2) + ${gutter})`;
+}

package/dist/css/stylesheet.js

@@ -45,6 +45,7 @@ import { scrollRegionClassCatalog } from './css-scroll-region.js';
 import { fieldClassCatalog } from './css-field.js';
 import { stepperClassCatalog } from './css-stepper.js';
 import { stepsClassCatalog } from './css-steps.js';
+import { taskListClassCatalog } from './css-task-list.js';
 import { boxBorderClassCatalog } from './css-box-border.js';
 import { boxLinkClassCatalog } from './css-box-link.js';
 import { cssComponentClasses } from './css-components.js';
@@ -158,6 +159,7 @@ export function utilityClassCatalog() {
         ...fieldClassCatalog(),
         ...stepperClassCatalog(),
         ...stepsClassCatalog(),
+        ...taskListClassCatalog(),
         ...splitClassCatalog(),
         ...toastClassCatalog(),
         ...toastCardClassCatalog(),

package/dist/index.d.ts

@@ -49,6 +49,7 @@ export { Field, fieldVariants, type FieldProps, type FieldSize, type FieldVarian
 export { fieldWidths, type FieldWidth } from './css/css-field-width.js';
 export { requiredMarks, type RequiredMark, } from './components/FieldLabelText.js';
 export { Step, type StepHeadingLevel, type StepProps, Steps, type StepsLabels, type StepsProps, type StepStatus, } from './components/Steps.js';
+export { defaultTaskListLabels, TaskList, type TaskListActionContext, type TaskListItem, type TaskListLabels, type TaskListProps, type TaskListStatus, taskListStatuses, } from './components/TaskList.js';
 export { Stepper, stepperLimitAppearances, type StepperLimitAppearance, type StepperProps, type StepperWidth, } from './components/Stepper.js';
 export { Inline, type InlineProps } from './components/Inline.js';
 export { Split } from './components/Split.js';
@@ -80,7 +81,7 @@ export { breakpointQuery } from './css/breakpoints.js';
 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 type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, SiteHeaderSkipLink, } from './components/SiteHeader.js';
 export { ScreenPreview, screenPreviewFrames, } from './components/ScreenPreview.js';
 export type { ScreenPreviewFrame, ScreenPreviewProps, } from './components/ScreenPreview.js';
 export { PreviewGroup } from './components/screen-preview/PreviewGroup.js';

package/dist/index.js

@@ -47,6 +47,7 @@ export { Field, fieldVariants, } from './components/Field.js';
 export { fieldWidths } from './css/css-field-width.js';
 export { requiredMarks, } from './components/FieldLabelText.js';
 export { Step, Steps, } from './components/Steps.js';
+export { defaultTaskListLabels, TaskList, taskListStatuses, } from './components/TaskList.js';
 export { Stepper, stepperLimitAppearances, } from './components/Stepper.js';
 export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';

package/dist/styles.css

@@ -986,6 +986,9 @@ body {
 .sw-button-xs { min-height: 28px; padding-inline: 10px; }
 .sw-button-sm { min-height: 32px; padding-inline: 12px; }
 .sw-button-md { min-height: 44px; padding-inline: 16px; }
+@media (pointer: coarse) {
+  .sw-button { min-height: var(--sw-control-md-min-height); min-width: var(--sw-control-md-min-height); }
+}
 .sw-button-full {
   width: 100%;
 }
@@ -4936,6 +4939,13 @@ body {
     min-height: var(--sw-control-md-min-height);
   }
 
+  [data-theme] .sw-band-inverse :is(.sw-site-footer-legal, .sw-site-footer-end) > a:not(.sw-button) {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-height: var(--sw-control-md-min-height);
+  }
+
   .sw-site-footer-links {
     gap: 0;
   }
@@ -4995,6 +5005,10 @@ body {
   gap: var(--sw-space-1);
 }
 
+.sw-site-header-compact-actions {
+  display: contents;
+}
+
 .sw-site-header-list {
   list-style: none;
   margin: 0;
@@ -5051,6 +5065,10 @@ body {
   list-style: none;
 }
 
+.sw-site-header-compact:has(> .sw-site-header-menu[open]) > .sw-site-header-compact-actions {
+  display: none;
+}
+
 .sw-site-header-menu > summary::-webkit-details-marker {
   display: none;
 }
@@ -5135,6 +5153,52 @@ body {
   padding-top: var(--sw-space-5);
 }
 
+.sw-site-header-skip-link {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  inset-block-start: 50%;
+  inset-inline-start: calc(max(0px, (100% - calc(var(--sw-container-max) + 2 * var(--sw-space-5))) / 2) + var(--sw-space-4));
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  padding-inline: var(--sw-space-4);
+  position: absolute;
+  transform: translateY(-50%);
+  white-space: nowrap;
+}
+
+[data-theme] .sw-site-header-skip-link {
+  color: var(--sw-color-text);
+  text-decoration: none;
+}
+
+[data-theme] .sw-site-header-skip-link:focus {
+  min-height: var(--sw-control-md-min-height);
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-site-header-skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+
+@media (min-width: 48rem) {
+  .sw-site-header-skip-link { inset-inline-start: calc(max(0px, (100% - calc(var(--sw-container-max) + 2 * var(--sw-space-5))) / 2) + var(--sw-space-5)); }
+}
+
+html:has(.sw-site-header-sticky) {
+  scroll-padding-top: calc(calc(var(--sw-control-md-min-height) + var(--sw-space-3)) + 1px + var(--sw-space-3));
+}
+
+@media (min-width: 64rem) {
+  html:has(.sw-site-header-sticky) {
+    scroll-padding-top: calc(calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1)) + 1px + var(--sw-space-3));
+  }
+}
+
 /*
  * Forced colours drop box shadows, so the current destination's bar is a
  * thick underline there.
@@ -9493,6 +9557,138 @@ body {
   .sw-steps-item-skipped .sw-steps-title { color: GrayText; }
 }
 
+.sw-task-list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+}
+
+.sw-task-list-item {
+  align-items: center;
+  color: var(--sw-color-text);
+  column-gap: var(--sw-space-3);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--sw-font-sans);
+  min-width: 0;
+  padding-block: var(--sw-space-2);
+  row-gap: var(--sw-space-2);
+}
+
+.sw-task-list-item + .sw-task-list-item {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-task-list-marker {
+  align-items: center;
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  height: var(--sw-space-5);
+  justify-content: center;
+  width: var(--sw-space-5);
+}
+
+.sw-task-list-body {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-width: 50%;
+}
+
+.sw-task-list-title {
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+
+.sw-task-list-item-waiting .sw-task-list-title {
+  color: var(--sw-color-muted);
+  font-weight: 400;
+}
+
+.sw-task-list-detail {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  overflow-wrap: anywhere;
+}
+
+.sw-task-list-action {
+  display: inline-flex;
+  flex: none;
+  margin-inline-start: auto;
+  max-width: 100%;
+}
+
+.sw-task-list-item-todo .sw-task-list-marker {
+  box-shadow: inset 0 0 0 2px var(--sw-color-border);
+}
+
+.sw-task-list-item-next .sw-task-list-marker {
+  box-shadow: inset 0 0 0 2px var(--sw-color-accent);
+}
+
+.sw-task-list-item-next .sw-task-list-marker::after {
+  border: var(--sw-space-1) solid var(--sw-color-accent);
+  border-radius: var(--sw-radius-pill);
+  content: '';
+}
+
+.sw-task-list-item-done .sw-task-list-marker {
+  background: var(--sw-color-success);
+}
+
+.sw-task-list-item-done .sw-task-list-marker::after {
+  border-bottom: 2px solid var(--sw-color-surface);
+  border-right: 2px solid var(--sw-color-surface);
+  content: '';
+  height: var(--sw-space-3);
+  margin-top: calc(-1 * var(--sw-space-1) / 2);
+  transform: rotate(45deg);
+  width: calc(var(--sw-space-3) / 2);
+}
+
+.sw-task-list-item-waiting .sw-task-list-marker {
+  color: var(--sw-color-muted);
+  flex-direction: column;
+}
+
+.sw-task-list-item-waiting .sw-task-list-marker::before {
+  border: 2px solid currentColor;
+  border-bottom: 0;
+  border-radius: var(--sw-space-1) var(--sw-space-1) 0 0;
+  content: '';
+  height: calc(var(--sw-space-2) - 2px);
+  width: calc(var(--sw-space-2) - 2 * 2px);
+}
+
+.sw-task-list-item-waiting .sw-task-list-marker::after {
+  border: var(--sw-space-1) solid currentColor;
+  border-radius: calc(var(--sw-space-1) / 2);
+  content: '';
+  width: calc(var(--sw-space-3) - 2 * var(--sw-space-1));
+}
+
+@media (forced-colors: active) {
+  .sw-task-list-item:not(.sw-task-list-item-waiting) .sw-task-list-marker {
+    border: 2px solid CanvasText;
+    box-shadow: none;
+  }
+  .sw-task-list-item-next .sw-task-list-marker { border-color: Highlight; }
+  .sw-task-list-item-next .sw-task-list-marker::after { border-color: Highlight; }
+  .sw-task-list-item-done .sw-task-list-marker::after { border-color: CanvasText; }
+  .sw-task-list-item-waiting .sw-task-list-marker { color: CanvasText; }
+  .sw-task-list-item-waiting .sw-task-list-title { color: GrayText; }
+}
+
 .sw-split {
   align-items: stretch;
   align-self: start;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.50.0",
+  "version": "1.52.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",