@scalewing/react 1.52.0 → 1.54.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @scalewing/react
 
+## 1.54.0
+
+### Minor Changes
+
+- 4c2d7cd: `Box` `external` and `newTabLabel` (opt-in, `as="a"` only): a link that opens in a new tab, `target="_blank"` with `noopener noreferrer` added to `rel`, a decorative arrow (↗) after its words drawn with borders in the link's colour, and `newTabLabel` (your words, such as "(opens in a new tab)", required with `external`) read after its name. New class `sw-link-external-mark`. `Stepper` `onCommit` and `commitDelay` (opt-in): the finished count once per entry, on blur, on Enter and `commitDelay` ms (default 600) after the last − / + press or step key, never per typed digit and never for an unchanged count; `onChange` is unchanged. Requests: `docs/requests/futmas-external-link.md`, `docs/requests/futmas-stepper-commit.md`.
+
+## 1.53.0
+
+### Minor Changes
+
+- 2d5e8ef: `Checkbox` `labelVisuallyHidden` (the label stays the name, not drawn; the box is its own target, 44 × 44 px on a coarse pointer) and `indeterminate` (the mixed state: a dash on the accent fill, the native `indeterminate` property and `aria-checked="mixed"`). `TableSelectCell` (`label`, `checked`, `indeterminate?`, `onCheckedChange`, `disabled?`, `as?: 'td' | 'th'`): a table's select column holding that Checkbox, as narrow as the box. New classes `sw-checkbox-label-hidden`, `sw-table-select`. Request: `docs/requests/futmas-table-row-selection.md`.
+
+  `Dialog` `placement` (`'center'`, the default, or `'end'`): from md up a full-height side panel at the inline end with Dialog's title row, close button, scrolling content and pinned footer; below md the centred dialog or the bottom sheet with `sheetBelow`. Exports `dialogPlacements`, `DialogPlacement`. New class `sw-dialog-end`. Request: `docs/requests/futmas-dialog-side-panel.md`.
+
+  `PasteRows`: a text area for rows pasted from a spreadsheet, a polite count of the columns found and one `Select size="xs"` per column choosing its meaning (`label`, `description?`, `value`, `onValueChange`, `columns`, `mapping`, `onMappingChange`, `countLabel`, `columnLabel?`, `delimiter?`, `rows?`, `placeholder?`, `error?`, `disabled?`, `required?`), with the pure `parsePastedRows(text, delimiter?)` (tab or comma cells, quoted cells, blank rows dropped). Exports `PasteRows`, `PasteRowsProps`, `PasteRowsColumn`, `parsePastedRows`, `PastedRows`, `PastedRowsDelimiter`, `pastedRowsDelimiters`. Request: `docs/requests/futmas-paste-rows.md`.
+
+  `Select`: on a coarse pointer the trigger and each option are at least 44 px high at every size, as every `Button` is since 1.51.0; a fine pointer keeps `xs` at 28 px, and an `xs` Select's open list is taller on touch. Request: `docs/requests/futmas-select-touch-target.md`.
+
+  No new tokens or dependencies.
+
 ## 1.52.0
 
 ### Minor Changes

package/README.md

@@ -25,6 +25,7 @@ import {
   DateRangeButton,
   Card,
   Checkbox,
+  PasteRows,
   RadioGroup,
   SectionNav,
   Skeleton,
@@ -105,7 +106,7 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 
 `AppHeader` is the page's top chrome, sticky by default (`sticky={false}` leaves it in flow). Its default `appearance="glass"` is a rounded frosted card. `appearance="bar"` (`AppHeaderAppearance`, `appHeaderAppearances`) is a full-width band of the solid surface with the border hairline under it: no blur, no rounding, no side or top border, the same under Reduce Transparency, and the hairline kept in forced colors. Set it against the page's edges (no side gutter round it) and put the gutter inside it. A `ref` reaches its `header` element. An unknown `appearance` throws a `RangeError`.
 
-`Box hideBelow="md"` hides a region under 48rem and `hideFrom="md"` hides it at 48rem and wider, so a product can swap a wide layout for a narrow one without its own stylesheet. They also take `lg` (64rem), for content that fits only from a laptop up, such as a row of labelled destinations that a tablet shows as glyphs (name each glyph-only control, for example with `Tooltip relationship="label"`); the layout props keep `md`. `breakpointQuery('below', 'lg')` returns the query a hide class uses (`not all and (min-width: 64rem)`), for an app whose script must follow the same width. An unknown breakpoint throws a `RangeError`. Hidden regions leave the accessibility tree; do not use this to protect data. `Box as="a"` is a layout link. Use `Button` for press actions. `Box as="a" link="quiet"` (opt-in; `link="accent"`, the default, is the canvas link) is a title that opens something, such as a table row's title: it keeps the surrounding text's colour at weight 600 (`sw-link-quiet`) and is underlined on hover and keyboard focus. Its weight is the non-colour cue WCAG 1.4.1 asks for (axe's `link-in-text-block` passes it on colour, the same colour and background as its text, or on its weight; the weight is what keeps it visibly a link), so use it in text lighter than 600. In text already at 600 the quiet look has no cue: an accent link there needs at least 3:1 contrast against the text. `link` on a box that is not `as="a"` throws a `TypeError`, an unknown value a `RangeError`. `Field` associates a native `<input>` or `<select>` with a label and token gap; native text controls inherit the generated document canvas. `Steps` is a one-page vertical stepper: an `ol` of `Step` panels in order, numbered by their place, a line joining each marker to the next (in the success color below a done step). A `Step` takes `status` (`'upcoming' | 'current' | 'done' | 'error' | 'skipped'`) and `title` (a heading at the list's `headingLevel`, 2 by default, or the step's own). The current step is open with its `children` and has `aria-current="step"`; an error step stays open with a "!" marker. A done step folds to one line: a check, the title, its `summary` (truncated) and, with `onEdit` and `editLabel`, a ghost small `Button` at the end named by its label and the title ("Edit The site"). A step ahead is greyed with its number in a ring; a skipped step is greyed with its `skippedReason` after the title (pass your own separator, such as "· not needed"). A folded step's heading ends in its status word for assistive technology (visually hidden; English by default, `labels` on `Steps` takes your words): its name is one visually hidden line, the title, a comma and the word ("The site, Done"), and the drawn title is `aria-hidden`, because a browser lays a hidden box out as a block and would put a space before the comma ("The site , Done"). The step's region and its Edit button are still named by the drawn title. A current step, and a skipped step showing its reason, draw and read their words as they are. The heading's text content now holds the title twice (drawn, then in the spoken line), so a test reading a folded heading's `textContent` or finding its title with a pattern (`getByText(/The site/)`) finds both: query headings by role and name (`getByRole('heading', { name: 'The site, Done' })`). Copying a folded heading, or finding its title in the page, meets the words twice too. The comma after the title is Scalewing's, as before; the word is yours. When a step becomes current from a folded state (upcoming, done or skipped), focus moves to its heading, a programmatic focus target; if several do in one update, the first in the list takes it. A first render, a move between current and error, and a step that turns to error leave focus alone: after a refused submit, move focus to the first invalid field yourself, as with `Field`. An error step has no `aria-current`; its heading's status word says it needs attention. Scalewing holds no order rules: the consumer sets each step's status. `Steps open` (off by default) keeps every step open at once, for a form whose sections are all filled on one page: each step shows its `children` whatever its status, inside a `section` named by its title (a region, class `sw-steps-region`), every title at the open size; the marker still follows the status (a number to fill, a check when done, "!" in error, a grey ring and muted title when greyed, such as after a blocking step), no step is `aria-current`, and no step takes focus when its status changes. `titleDetail` (opt-in) is muted words after an open step's title, on its line, such as "Optional" on a step a person may skip, or "Wetlands done · Woodlands empty" on a step with a part per habitat: the label size at the body's weight in the muted colour, a space-2 after the title on its baseline, or on a line of their own under the title where they do not fit beside it (a long title on a phone), never past the panel (a long word breaks). They are drawn while the step is open (current or error, or every step of an open list, with fields or without) and stay as the step turns done in an open list; a folded step draws its summary or reason instead. They sit outside the heading, so the heading's name stays the title (and its status word) and a heading list reads the titles alone; an open list's region keeps the title as its name and is described by the words, read as a person enters it, and in a stepped list they follow the heading in reading order. Write your own separators inside the words; Scalewing draws only the gap after the title. The words share a skipped step's reason's muted colour, not its size: a reason is part of the title, these are a note beside it. Give a step its `titleDetail` from its first render: setting or clearing it later moves the heading into or out of the title line, which remounts it (and drops its focus if it has it). A blank `titleDetail` throws a `RangeError`. Pass the `Step`s as direct children (a Fragment around several would share one number). A `Step` outside `Steps`, a Fragment child, a blank title or reason, an unknown status or heading level, `onEdit` without `editLabel`, or a blank status word throws a `RangeError`.
+`Box hideBelow="md"` hides a region under 48rem and `hideFrom="md"` hides it at 48rem and wider, so a product can swap a wide layout for a narrow one without its own stylesheet. They also take `lg` (64rem), for content that fits only from a laptop up, such as a row of labelled destinations that a tablet shows as glyphs (name each glyph-only control, for example with `Tooltip relationship="label"`); the layout props keep `md`. `breakpointQuery('below', 'lg')` returns the query a hide class uses (`not all and (min-width: 64rem)`), for an app whose script must follow the same width. An unknown breakpoint throws a `RangeError`. Hidden regions leave the accessibility tree; do not use this to protect data. `Box as="a"` is a layout link. Use `Button` for press actions. `Box as="a" link="quiet"` (opt-in; `link="accent"`, the default, is the canvas link) is a title that opens something, such as a table row's title: it keeps the surrounding text's colour at weight 600 (`sw-link-quiet`) and is underlined on hover and keyboard focus. Its weight is the non-colour cue WCAG 1.4.1 asks for (axe's `link-in-text-block` passes it on colour, the same colour and background as its text, or on its weight; the weight is what keeps it visibly a link), so use it in text lighter than 600. In text already at 600 the quiet look has no cue: an accent link there needs at least 3:1 contrast against the text. `link` on a box that is not `as="a"` throws a `TypeError`, an unknown value a `RangeError`. `Box as="a" external` (opt-in) opens the address in a new tab: it sets `target="_blank"` (always), adds `noopener noreferrer` to your `rel` words (each once), draws a decorative arrow (↗, `sw-link-external-mark`, `aria-hidden`) right after the words with no space, so it never wraps alone, and reads `newTabLabel` after the link's name from a visually hidden span ("Check the marsh map (opens in a new tab)"). The arrow is drawn with borders in the link's colour (accent, the hover colour, a quiet link's), so forced colours keep it, and is mirrored in right-to-left text. `newTabLabel` is your words in your language; it is required with `external` (blank throws a `RangeError`) and refused without it (`TypeError`); `external` on a box that is not `as="a"` throws a `TypeError`. `Field` associates a native `<input>` or `<select>` with a label and token gap; native text controls inherit the generated document canvas. `Steps` is a one-page vertical stepper: an `ol` of `Step` panels in order, numbered by their place, a line joining each marker to the next (in the success color below a done step). A `Step` takes `status` (`'upcoming' | 'current' | 'done' | 'error' | 'skipped'`) and `title` (a heading at the list's `headingLevel`, 2 by default, or the step's own). The current step is open with its `children` and has `aria-current="step"`; an error step stays open with a "!" marker. A done step folds to one line: a check, the title, its `summary` (truncated) and, with `onEdit` and `editLabel`, a ghost small `Button` at the end named by its label and the title ("Edit The site"). A step ahead is greyed with its number in a ring; a skipped step is greyed with its `skippedReason` after the title (pass your own separator, such as "· not needed"). A folded step's heading ends in its status word for assistive technology (visually hidden; English by default, `labels` on `Steps` takes your words): its name is one visually hidden line, the title, a comma and the word ("The site, Done"), and the drawn title is `aria-hidden`, because a browser lays a hidden box out as a block and would put a space before the comma ("The site , Done"). The step's region and its Edit button are still named by the drawn title. A current step, and a skipped step showing its reason, draw and read their words as they are. The heading's text content now holds the title twice (drawn, then in the spoken line), so a test reading a folded heading's `textContent` or finding its title with a pattern (`getByText(/The site/)`) finds both: query headings by role and name (`getByRole('heading', { name: 'The site, Done' })`). Copying a folded heading, or finding its title in the page, meets the words twice too. The comma after the title is Scalewing's, as before; the word is yours. When a step becomes current from a folded state (upcoming, done or skipped), focus moves to its heading, a programmatic focus target; if several do in one update, the first in the list takes it. A first render, a move between current and error, and a step that turns to error leave focus alone: after a refused submit, move focus to the first invalid field yourself, as with `Field`. An error step has no `aria-current`; its heading's status word says it needs attention. Scalewing holds no order rules: the consumer sets each step's status. `Steps open` (off by default) keeps every step open at once, for a form whose sections are all filled on one page: each step shows its `children` whatever its status, inside a `section` named by its title (a region, class `sw-steps-region`), every title at the open size; the marker still follows the status (a number to fill, a check when done, "!" in error, a grey ring and muted title when greyed, such as after a blocking step), no step is `aria-current`, and no step takes focus when its status changes. `titleDetail` (opt-in) is muted words after an open step's title, on its line, such as "Optional" on a step a person may skip, or "Wetlands done · Woodlands empty" on a step with a part per habitat: the label size at the body's weight in the muted colour, a space-2 after the title on its baseline, or on a line of their own under the title where they do not fit beside it (a long title on a phone), never past the panel (a long word breaks). They are drawn while the step is open (current or error, or every step of an open list, with fields or without) and stay as the step turns done in an open list; a folded step draws its summary or reason instead. They sit outside the heading, so the heading's name stays the title (and its status word) and a heading list reads the titles alone; an open list's region keeps the title as its name and is described by the words, read as a person enters it, and in a stepped list they follow the heading in reading order. Write your own separators inside the words; Scalewing draws only the gap after the title. The words share a skipped step's reason's muted colour, not its size: a reason is part of the title, these are a note beside it. Give a step its `titleDetail` from its first render: setting or clearing it later moves the heading into or out of the title line, which remounts it (and drops its focus if it has it). A blank `titleDetail` throws a `RangeError`. Pass the `Step`s as direct children (a Fragment around several would share one number). A `Step` outside `Steps`, a Fragment child, a blank title or reason, an unknown status or heading level, `onEdit` without `editLabel`, or a blank status word throws a `RangeError`.
 
 ```tsx
 <Steps aria-label="Heron survey">
@@ -256,6 +257,8 @@ 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). `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`.
 
+`Stepper` `onCommit` (opt-in) is the finished count once per entry, for a page that saves as you go: it fires on blur, on Enter (a form round the count still submits), and `commitDelay` ms (default 600) after the last − / + press or step key (ArrowUp, ArrowDown, Home, End), each press restarting the wait; blur or Enter while it waits commits at once. Typed digits never commit by themselves. It gives the count you hold at that moment, `null` or outside the bounds included as `onChange` reports them, so check it before saving. It does not fire when that count is the one last committed, or, before the first commit, the one held before the first edit; a count you set while nothing waits (a server's answer) becomes the new baseline. A commit still waiting when the Stepper unmounts is made then. `onChange` is unchanged. A `commitDelay` that is negative or not finite throws a `RangeError`.
+
 ```tsx
 <Stepper
   label="Herons"
@@ -271,6 +274,8 @@ A chosen photo can show itself: `value.preview` is the address of a small image
 
 `Select` is a labeled listbox menu: supply `label`, `options` (`value` and `label`), a controlled `value` and `onChange`; `size="xs"` and `labelVisuallyHidden` are for toolbar chrome, and `action` is a last listbox command that never becomes the value. The closed trigger matches `Field`: its text is centred in the control, it ends in the `Accordion` chevron, and it is as wide as its longest option (as a native select is), so it keeps its width when the value changes; past the available width the label ellipsizes. The option labels that size it are drawn by CSS from `data-label`, so the trigger's text content and accessible value are only the current label. Its label is drawn as `Field`'s (the same label words and mark inside a `<label>` that keeps the canvas type), so a `Select` beside a `Field` lines up at the label and the control.
 
+On a coarse pointer every `Select` size's trigger and each option in its open list are at least 44 px high (the md control height), as every `Button` is; type and padding keep the size's, so an `xs` Select in a toolbar or a table row is still easy to tap. A fine pointer keeps `xs` at 28 px.
+
 `Select` `aria-labelledby`, in place of `label`, names the select by words the page already draws, such as a label above a choice that is a `SegmentedControl` on a wide screen and a `Select` on a phone. The select then draws no label of its own, hidden or shown, so a screen reader meets the words once (as the page's text, then as the combobox's name) instead of the page's words followed by the select's hidden copy of them; the open list is named by the same words. `required` still sets `aria-required` but draws no mark, since the page owns the words. `label` and `aria-labelledby` are exclusive: a blank `label` with no `aria-labelledby`, a blank `aria-labelledby`, or `aria-labelledby` with `label`, `labelVisuallyHidden` or `requiredMark` throws a `RangeError`. The id must name an element in the page while the select is shown: a missing one leaves the select unnamed, which neither the types nor the select can check.
 
 ```tsx
@@ -475,6 +480,8 @@ A `Button` that toggles something passes `aria-pressed`. The pressed button gets
 
 `Dialog` is a modal `<dialog>` controlled by `open`. Escape, a backdrop press, a platform close request, and a `<form method="dialog">` submit (or a submitter with `formmethod="dialog"`) are each prevented and call `onClose`; none of them closes the dialog itself. A consumer `onKeyDown`, `onCancel`, `onSubmit` or `onPointerDown` that prevents the event vetoes that request. Escape in a search field that holds text clears the field first, and a descendant's own `cancel` (a dismissed file picker) is not a close request. Set `open` to false to close it, or keep it true (for example while a form is saving) and it stays shown. `onClose` is not called when `open` turns false, and it is required: a dialog that must not be dismissed passes a callback that keeps `open` true. The `title` is an `h3` in the title style by default; `titleLevel={2}` renders it as an `h2` in the same style, for a dialog whose own section labels are `h3` headings, so they read as parts of the dialog and not as its peers. The default stays `3` so existing dialogs keep their outline; any value other than `2` renders an `h3`. `sheetBelow="md"` makes the dialog a bottom sheet below `md`: docked to the bottom edge at the full viewport width, top corners rounded and bottom corners square, a `space-8` strip of backdrop above it, and bottom padding that clears `env(safe-area-inset-bottom)` (with `viewport-fit=cover`); it slides up on open unless reduced motion is asked for, and has no grabber, since there is no drag. From `md` up it is the centered dialog at its `size`. `closeLabel` (such as "Close") adds an icon-only ghost close button at the end of the title row, named by the label, which calls `onClose` like Escape; the title still names the dialog. The button is the dialog's first control, so the browser focuses it on open; give a field `autoFocus` to start there instead. Without `closeLabel` the dialog has no close button and its markup is unchanged.
 
+`Dialog` `placement="end"` (opt-in; `center` is the default) is a side panel from md up: the window's full height at the inline end (the right, the left in right-to-left), its `size`'s width (md 32rem, lg 56rem, xl 65rem, always leaving a space-8 strip of backdrop), square corners and one hairline on its inner edge, sliding in from its edge unless reduced motion is asked for. Its title row, `closeLabel` button, `description`, scrolling content and `footer` (pinned to the bottom edge even when the content is short) are Dialog's, as are its focus trap (the native modal), Escape and backdrop requests to `onClose`, and focus returning to the opener. Below md it is the centred dialog, or the bottom sheet with `sheetBelow="md"` (the usual pairing). `appearance="banded"` gives it the solid surface. An unknown placement throws a `RangeError`.
+
 A sheet over a page takes a fuller frame. `icon` is a consumer glyph or tile before the title (hidden from assistive technology) and `description` a muted line under the title that also describes the dialog (unless you pass `aria-describedby`). `footer` holds the actions, pinned to the dialog's bottom edge under a hairline while the content scrolls, and `summary` (ActionBar's `{ label, value, detail?, tone? }`) puts a labelled figure at the footer's start in a polite live region. `size="xl"` (65rem) holds a six-column count grid with its labels and total. `role="alertdialog"` is for a warning that interrupts, such as an idle sign-out: give its safe action `autoFocus` (the browser otherwise focuses the first footer button), and point `aria-describedby` at the warning in its body when that is not the `description`. `appearance="banded"` (default `"glass"`) draws the dialog on the solid surface with the medium elevation instead of the frosted panel: its title row is a full-width band over a hairline (a lone title too), the footer the band it already is, and the close button a circle on the quiet muted fill in the text color, keeping its touch target; forced colors outline the dialog and keep the hairlines. `status` is one short line in the footer after the summary and before the actions, in the same polite live region: muted caption words, or a `Badge` and a short line in one `span` (a status alone makes a footer; blank words or `false` leave it out). `canvas="grouped"` (default `"default"`) fills the dialog with the grouped canvas grey that `ThemeProvider canvas="grouped"` paints, solid with no blur, so `Card`s inside stand apart; a banded title row and the footer keep the surface. `sheetGrabber` (with `sheetBelow`, which it needs) draws a grabber, a short rounded bar centered at the top of the bottom sheet, hidden from assistive technology; it stays at the top while the content scrolls, does not drag, and is not drawn from the breakpoint up. An unknown `size`, `role`, `appearance` or `canvas`, a blank `description`, an invalid `summary`, or `sheetGrabber` without `sheetBelow` throws a `RangeError`.
 
 ```tsx
@@ -557,6 +564,8 @@ A toast can also be a corner card that confirms a save: `placement="top-end"` pu
 
 `Checkbox` is a controlled native checkbox for one independent form or confirmation choice. `checked` and `onCheckedChange` own its state. The consumer supplies `error` after validation to describe and style an invalid choice (associated by `aria-describedby` with `aria-invalid` and announced from a polite live region, as `Field`'s error is, never an alert); `required` retains native form semantics.
 
+`Checkbox` `labelVisuallyHidden` (opt-in) keeps `label` as the checkbox's name but does not draw it, for a box that stands alone, such as a table's select column ("Select Mallard"); the box is then its own target, its drawn size (24 px) on a fine pointer and at least 44 × 44 px on a coarse one. `indeterminate` (opt-in) is the mixed state, such as "Select all" while only some rows are chosen: a dash on the accent fill (Highlight in forced colours), the native `indeterminate` property and `aria-checked="mixed"`, so Playwright's `toBeChecked({ indeterminate: true })` and `getByRole('checkbox', { checked: 'mixed' })` find it (Testing Library's `checked` query ignores the mixed state of a native checkbox; assert `aria-checked="mixed"` or the `indeterminate` property there). It wins over `checked` in the drawing and the state read out. A press reports `!checked` (with `checked` false: `true`, choose all); the box stays mixed until the props change.
+
 `RadioGroup` is a controlled fieldset of native radio choices. Supply a unique nonempty `value` for each option, one selected `value` or an empty value for no selection, a `legend`, and `onChange`. Long labels wrap in a vertical group. The consumer provides localized option labels and validation `error`; `required` keeps native form semantics. An option's optional `icon` (a `ReactNode`, such as a Lucide glyph) sits between the radio and the label, in the text color and the option's gap; it is `aria-hidden`, so the radio's accessible name stays the `label` text, and a press on it chooses the option as the label does.
 
 ```tsx
@@ -754,6 +763,8 @@ The layout follows the window, with generated media queries only. From 75rem (12
 
 `TableRow pressable` (opt-in) makes the whole row the pointer target of its one action, such as a search result that is picked: a plain primary press anywhere on it calls `click()` on the row's first link or button, so the action's own handler runs. Left alone: a modifier key or non-primary button, a press already handled, a press on another control, a press that ends a text selection (text stays selectable), and a disabled or missing action. Keep one control in the row: a control placed before the action (an icon button, say) would take the row's press. The row is not a control (no role, no tab stop), so keyboard and screen reader users use the action itself. It takes the pointer cursor and the quiet fill while hovered, pressed (a brief flash on touch) or while its action has keyboard focus (a `Highlight` outline in forced colours), and underlines its action on hover (`sw-table-row-press`). A consumer `onClick` runs once per press. Each click of a double click presses the action, as a native button's would, so keep it safe to repeat. `TableCell onPress` (a body cell or a row header in `TableBody`) makes the cell's children that action: a button in the cell's own text style at weight 600, underlined on hover and focus, with the accent focus ring (`sw-table-action`); a non-function value or one on a sortable header throws a `TypeError`.
 
+`TableSelectCell` is a table's select column: a cell (`as="td"`, the default, in a body row, or `as="th"` in a `TableHeader` row, which gets `scope="col"`) holding one `Checkbox` with `labelVisuallyHidden`. Its props are `label` (the box's name, not drawn: "Select all", "Select Mallard"), `checked`, `indeterminate`, `onCheckedChange` and `disabled`. The column is as wide as the box (`sw-table-select`), and 44 px wide on a coarse pointer, where the box is the 44 × 44 px target; a fixed table sizes columns from its header row, so put one in the header too. Mark a chosen row with `TableRow selected`; a press on the box is left alone by `TableRow pressable`. The consumer keeps the chosen set and works out "Select all"'s `checked` and `indeterminate`. A blank label or an unknown `as` throws a `RangeError`.
+
 ```tsx
 <TableRow pressable>
   <TableCell onPress={() => pick('Red fox')}>Red fox</TableCell>
@@ -965,6 +976,8 @@ The consumer needs no PDF.js dependency of its own. With another bundler, build
 
 `MultiSelect` is several choices from a short list behind one trigger, such as which kinds a list shows. The trigger reads the muted `label` and then `summary` (your words for what is chosen, such as "All entries" or "2 services") with a chevron; it opens a panel named by the label with `allLabel` and `clearLabel` commands over one checkbox per option, each with an optional `icon` (use a small `GlyphTile`, never a bare dot) and a hairline before an option with `separatorBefore`. `onChange` reports the checked values in the options' order. It is a disclosure of native checkboxes, not a listbox: the first checkbox takes focus as it opens, Escape closes it and returns focus to the trigger, focus or a press outside closes it, and disabling it while open closes it. Blank words, no or duplicate options, a value that is not an option, or an unknown `align` throw a `RangeError`.
 
+`PasteRows` is rows pasted from a spreadsheet: a `Field` text area (`label`, `description`, `error`, `required`, `disabled`, `placeholder`, `rows` default 6, spell check off) for the controlled `value` (`onValueChange`), and, once something is pasted, a polite status line (`countLabel(n)`, such as "Found 2 columns") followed by one `Select` `size="xs"` per found column, its label visually hidden (`columnLabel(position)`, default "Column 1", a 1-based position), offering `columns` (`{ id, label }[]`, such as Team, Division, Don’t use). `mapping` holds one column id per found column, in order; a change calls `onMappingChange` with the whole new array (a missing entry, or an id not in `columns`, counts as the first choice). It parses rows and cells only, with the exported pure `parsePastedRows(text, delimiter?)` (`{ rows, columnCount, delimiter }`): rows on CR, LF or CRLF, cells on tabs or commas (`delimiter`: `auto`, tab when the text holds a tab, else comma; `tab`; `comma`; pass `tab` when one column may hold commas), quoted cells as spreadsheets write them (a cell that starts with a quote runs to the next closing quote, across tabs and line breaks), cells trimmed, blank rows dropped, short rows padded with `''`. Call it on the same `value` to derive the default mapping and the preview; what the columns mean, headers, checks and the preview are the consumer's. Query the text area by its label (role `textbox`), each column by `getByRole('combobox', { name: 'Column 1' })`, and the count by role `status`. While `disabled` the text area is disabled and the column Selects are left out (the count line stays). A blank label, no columns, a blank or repeated column id or label, or `rows` under 1 throws a `RangeError`.
+
 ```tsx
 <MultiSelect
   label="Show"

package/dist/components/Box.d.ts

@@ -24,6 +24,19 @@ export type BoxProps = SpacingProps & VisibilityProps & ColumnSpanProps & HTMLAt
      * text lighter than 600. Only for `as="a"`; an unknown value throws.
      */
     link?: BoxLink;
+    /**
+     * A `Box as="a"` that opens in a new tab: it sets `target="_blank"`,
+     * adds `noopener noreferrer` to `rel`, draws a decorative arrow (↗)
+     * after its words and reads `newTabLabel` after its name. Only for
+     * `as="a"`; it needs `newTabLabel`.
+     */
+    external?: boolean;
+    /**
+     * The hidden words read after an external link's name, in your
+     * language, such as "(opens in a new tab)". Required with `external`,
+     * refused without it.
+     */
+    newTabLabel?: string;
 };
 export type BoxBorder = BoxBorderValue;
 export type BoxLink = BoxLinkAppearance;
@@ -45,4 +58,17 @@ export declare const Box: import("react").ForwardRefExoticComponent<SpacingProps
      * text lighter than 600. Only for `as="a"`; an unknown value throws.
      */
     link?: BoxLink;
+    /**
+     * A `Box as="a"` that opens in a new tab: it sets `target="_blank"`,
+     * adds `noopener noreferrer` to `rel`, draws a decorative arrow (↗)
+     * after its words and reads `newTabLabel` after its name. Only for
+     * `as="a"`; it needs `newTabLabel`.
+     */
+    external?: boolean;
+    /**
+     * The hidden words read after an external link's name, in your
+     * language, such as "(opens in a new tab)". Required with `external`,
+     * refused without it.
+     */
+    newTabLabel?: string;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Box.js

@@ -5,10 +5,14 @@ import { boxBorderClass } from '../css/css-box-border.js';
 import { assertBoxLink, boxLinkClass, } from '../css/css-box-link.js';
 import { columnSpanClassNames, } from '../column-span-classes.js';
 import { spacingClassNames } from '../spacing-classes.js';
+import { assertBoxExternal, externalLinkContent, externalLinkRel, } from './box/external-link.js';
 import { tabStop } from '../tab-stop.js';
 import { visibilityClassNames, } from '../visibility-classes.js';
-export const Box = forwardRef(function Box({ as = 'div', background, border, className, columnSpan, hideBelow, hideFrom, link, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, radius, style, tabIndex, ...rest }, ref) {
+export const Box = forwardRef(function Box({ as = 'div', background, border, children, className, columnSpan, external, hideBelow, hideFrom, link, newTabLabel, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, radius, rel, style, tabIndex, target, ...rest }, ref) {
     assertBoxLink(link, as);
+    assertBoxExternal({ as, external, newTabLabel });
+    // assertBoxExternal has made sure an external link has its words.
+    const opensNewTab = external === true && newTabLabel !== undefined;
     const Component = as;
     // A link with a destination is a tab stop in Safari too (see tabStop).
     const linkTabStop = as === 'a' && rest.href !== undefined ? tabStop : undefined;
@@ -26,5 +30,5 @@ export const Box = forwardRef(function Box({ as = 'div', background, border, cla
                 : undefined,
             borderRadius: radius ? `var(--sw-radius-${radius})` : undefined,
             ...style,
-        }, tabIndex: tabIndex ?? linkTabStop, ...rest }));
+        }, tabIndex: tabIndex ?? linkTabStop, ...rest, rel: opensNewTab ? externalLinkRel(rel) : rel, target: opensNewTab ? '_blank' : target, children: opensNewTab ? externalLinkContent(children, newTabLabel) : children }));
 });

package/dist/components/Checkbox.d.ts

@@ -6,5 +6,22 @@ export type CheckboxProps = {
     required?: boolean;
     description?: string;
     error?: string;
+    /**
+     * Keeps `label` as the checkbox's name but does not draw it, so the box
+     * stands alone, as in a table's select column ("Select Mallard"). The
+     * box is then its own target: its size on a fine pointer, at least
+     * 44 × 44 px on a coarse one. Say what the box picks in words the page
+     * draws nearby (the row's name), not by position alone.
+     */
+    labelVisuallyHidden?: boolean;
+    /**
+     * The mixed state, such as "Select all" while only some rows are
+     * chosen: a dash in place of the check, the native `indeterminate`
+     * property and `aria-checked="mixed"`. It wins over `checked` in the
+     * drawing and the state read out. A press reports `!checked` (so with
+     * `checked` false, `true`: choose all) and the consumer decides what
+     * stays mixed.
+     */
+    indeterminate?: boolean;
 };
-export declare function Checkbox({ label, checked, onCheckedChange, disabled, required, description, error, }: CheckboxProps): import("react").JSX.Element;
+export declare function Checkbox({ label, checked, onCheckedChange, disabled, required, description, error, labelVisuallyHidden, indeterminate, }: CheckboxProps): import("react").JSX.Element;

package/dist/components/Checkbox.js

@@ -1,19 +1,29 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
+import { useId, useLayoutEffect, useRef } from 'react';
+import { cx } from '../class-names.js';
 import { CheckboxControl } from './checkbox/CheckboxControl.js';
 import { FieldErrorRegion } from './FieldErrorRegion.js';
-export function Checkbox({ label, checked, onCheckedChange, disabled = false, required = false, description, error, }) {
+export function Checkbox({ label, checked, onCheckedChange, disabled = false, required = false, description, error, labelVisuallyHidden = false, indeterminate = false, }) {
     const descriptionId = useId();
     const errorId = useId();
+    const inputRef = useRef(null);
     const describedBy = [
         description ? descriptionId : null,
         error ? errorId : null,
     ]
         .filter((id) => id !== null)
         .join(' ');
-    return (_jsxs("div", { className: "sw-checkbox", children: [_jsxs("label", { className: "sw-checkbox-label", children: [_jsx(CheckboxControl, { "aria-describedby": describedBy || undefined, "aria-invalid": Boolean(error), checked: checked, disabled: disabled, onChange: (event) => {
+    // A press clears the native property, so set it again after every render.
+    useLayoutEffect(() => {
+        if (inputRef.current)
+            inputRef.current.indeterminate = indeterminate;
+    });
+    return (_jsxs("div", { className: "sw-checkbox", children: [_jsxs("label", { className: cx('sw-checkbox-label', labelVisuallyHidden && 'sw-checkbox-label-hidden'), children: [_jsx(CheckboxControl, { ref: inputRef, "aria-checked": indeterminate ? 'mixed' : undefined, "aria-describedby": describedBy || undefined, "aria-invalid": Boolean(error), checked: checked, disabled: disabled, onChange: (event) => {
+                            const input = event.currentTarget;
+                            // The press cleared the mixed state; keep it until the props say.
+                            input.indeterminate = indeterminate;
                             if (!disabled)
-                                onCheckedChange(event.currentTarget.checked);
-                        }, required: required }), _jsx("span", { className: "sw-checkbox-text", children: label })] }), description ? (_jsx("span", { className: "sw-checkbox-description", id: descriptionId, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-checkbox-error", id: errorId, message: error })] }));
+                                onCheckedChange(input.checked);
+                        }, required: required }), _jsx("span", { className: labelVisuallyHidden ? 'sw-sr-only' : 'sw-checkbox-text', children: label })] }), description ? (_jsx("span", { className: "sw-checkbox-description", id: descriptionId, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-checkbox-error", id: errorId, message: error })] }));
 }

package/dist/components/Dialog.d.ts

@@ -2,10 +2,12 @@ import { type DialogHTMLAttributes, type ReactNode } from 'react';
 import { type Breakpoint } from '../css/breakpoints.js';
 import { type DialogAppearance, dialogAppearances } from '../css/css-dialog-banded.js';
 import { type ThemeCanvas } from '../css/css-canvas-grouped.js';
+import { type DialogPlacement, dialogPlacements } from '../css/css-dialog-end.js';
 import { type ActionBarSummary } from './action-bar/ActionBarSummary.js';
 import { type DialogRole, type DialogSize, dialogSizes } from './dialog/validate.js';
 export { dialogAppearances, type DialogAppearance };
 export { dialogSizes, type DialogRole, type DialogSize };
+export { dialogPlacements, type DialogPlacement };
 /**
  * The heading level of the dialog's title. It changes only the element (and
  * so the outline a screen reader reads), never the title's look.
@@ -98,6 +100,17 @@ export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose
      * footer stay on the surface. `default` keeps the appearance's fill.
      */
     canvas?: ThemeCanvas;
+    /**
+     * `end` makes the dialog a side panel from md up: the window's full
+     * height at the inline end (the right, the left in right-to-left), its
+     * `size`'s width, square corners and a hairline on its inner edge, with
+     * the same title row, close button, scrolling content and footer pinned
+     * to the bottom edge. Below md it is the centred dialog, or the bottom
+     * sheet with `sheetBelow="md"`. It is the same modal: focus stays inside,
+     * Escape and a backdrop press ask `onClose`, and focus returns to the
+     * opener on close. `center` (the default) is unchanged.
+     */
+    placement?: DialogPlacement;
     children: ReactNode;
 };
-export declare function Dialog({ 'aria-describedby': describedBy, appearance, canvas, children, className, closeLabel, description, footer, icon, role, summary, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, sheetBelow, sheetGrabber, size, status, title, titleLevel, ...rest }: DialogProps): import("react").JSX.Element;
+export declare function Dialog({ 'aria-describedby': describedBy, appearance, canvas, children, className, closeLabel, description, footer, icon, role, summary, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, placement, sheetBelow, sheetGrabber, size, status, title, titleLevel, ...rest }: DialogProps): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -5,6 +5,7 @@ import { cx } from '../class-names.js';
 import { dialogSheetClass } from '../css/css-dialog.js';
 import { dialogAppearances, dialogBandedClass, } from '../css/css-dialog-banded.js';
 import { dialogCanvasClass } from '../css/css-dialog-canvas.js';
+import { dialogEndClass, dialogPlacements, } from '../css/css-dialog-end.js';
 import { dialogGrabberClass, dialogHasGrabberClass, } from '../css/css-dialog-grabber.js';
 import { spacingClassNames } from '../spacing-classes.js';
 import { useDialogCloseRequests } from './dialog-close-requests.js';
@@ -14,11 +15,13 @@ import { assertDialogProps, dialogSizes, } from './dialog/validate.js';
 import { Stack } from './Stack.js';
 export { dialogAppearances };
 export { dialogSizes };
-export function Dialog({ 'aria-describedby': describedBy, appearance = 'glass', canvas = 'default', children, className, closeLabel, description, footer, icon, role, summary, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, sheetBelow, sheetGrabber = false, size = 'md', status, title, titleLevel = 3, ...rest }) {
+export { dialogPlacements };
+export function Dialog({ 'aria-describedby': describedBy, appearance = 'glass', canvas = 'default', children, className, closeLabel, description, footer, icon, role, summary, onCancel, onClose, onKeyDown, onPointerDown, onSubmit, open, placement = 'center', sheetBelow, sheetGrabber = false, size = 'md', status, title, titleLevel = 3, ...rest }) {
     assertDialogProps({
         appearance,
         canvas,
         description,
+        placement,
         role,
         sheetBelow,
         sheetGrabber,
@@ -41,5 +44,5 @@ export function Dialog({ 'aria-describedby': describedBy, appearance = 'glass',
         onPointerDown,
         onSubmit,
     });
-    return (_jsxs("dialog", { ...rest, ref: nodeRef, "aria-describedby": describedBy ?? (description ? descriptionId : undefined), "aria-labelledby": titleId, className: cx('sw-dialog', size !== 'md' && `sw-dialog-${size}`, sheetBelow && dialogSheetClass(sheetBelow), appearance === 'banded' && dialogBandedClass, canvas === 'grouped' && dialogCanvasClass, sheetGrabber && dialogHasGrabberClass, ...spacingClassNames({ padding: 5 }), className), role: role === 'alertdialog' ? 'alertdialog' : undefined, ...handlers, children: [sheetGrabber ? (_jsx("span", { "aria-hidden": "true", className: dialogGrabberClass })) : null, _jsxs(Stack, { gap: 4, children: [_jsx(DialogTitle, { banded: appearance === 'banded', closeLabel: closeLabel, description: description, descriptionId: descriptionId, icon: icon, id: titleId, level: titleLevel === 2 ? 2 : 3, onClose: onClose, title: title }), children, hasFooter ? (_jsx(DialogFooter, { status: hasStatus ? status : undefined, summary: summary, children: footer })) : null] })] }));
+    return (_jsxs("dialog", { ...rest, ref: nodeRef, "aria-describedby": describedBy ?? (description ? descriptionId : undefined), "aria-labelledby": titleId, className: cx('sw-dialog', size !== 'md' && `sw-dialog-${size}`, sheetBelow && dialogSheetClass(sheetBelow), appearance === 'banded' && dialogBandedClass, canvas === 'grouped' && dialogCanvasClass, sheetGrabber && dialogHasGrabberClass, placement === 'end' && dialogEndClass, ...spacingClassNames({ padding: 5 }), className), role: role === 'alertdialog' ? 'alertdialog' : undefined, ...handlers, children: [sheetGrabber ? (_jsx("span", { "aria-hidden": "true", className: dialogGrabberClass })) : null, _jsxs(Stack, { gap: 4, children: [_jsx(DialogTitle, { banded: appearance === 'banded', closeLabel: closeLabel, description: description, descriptionId: descriptionId, icon: icon, id: titleId, level: titleLevel === 2 ? 2 : 3, onClose: onClose, title: title }), children, hasFooter ? (_jsx(DialogFooter, { status: hasStatus ? status : undefined, summary: summary, children: footer })) : null] })] }));
 }

package/dist/components/PasteRows.d.ts

@@ -0,0 +1,55 @@
+import { type PastedRowsDelimiter } from './paste-rows/parse-pasted-rows.js';
+export type PasteRowsColumn = {
+    /** What `mapping` holds for a found column given this meaning. */
+    id: string;
+    /** The choice's words in each column's Select, such as "Team" or "Don’t use". */
+    label: string;
+};
+export type PasteRowsProps = {
+    /** The text area's label, such as "Paste here". */
+    label: string;
+    /** A muted line under the label, read as the text area's description. */
+    description?: string;
+    /** The pasted text, as typed. */
+    value: string;
+    onValueChange: (value: string) => void;
+    /** The meanings each found column can be given, in menu order. */
+    columns: readonly PasteRowsColumn[];
+    /**
+     * One `columns` id per found column, in order. Derive it from the same
+     * `value` and `delimiter` with `parsePastedRows` (its `columnCount`), so a new column
+     * gets its default in the same render. A missing entry, or an id not
+     * in `columns`, counts as the first choice: it is drawn so and filled in
+     * on the next change.
+     */
+    mapping: readonly string[];
+    /** Called with the whole new mapping when one column's Select changes. */
+    onMappingChange: (mapping: string[]) => void;
+    /** The line before the Selects, such as `(n) => \`Found ${n} columns\``. */
+    countLabel: (count: number) => string;
+    /**
+     * The name of the Select for the column at a 1-based position, not
+     * drawn: "Column 1" (the default, English).
+     */
+    columnLabel?: (position: number) => string;
+    /** How cells are split (`parsePastedRows`); default `auto`. */
+    delimiter?: PastedRowsDelimiter;
+    /** The text area's visible rows; default 6. */
+    rows?: number;
+    placeholder?: string;
+    error?: string;
+    /**
+     * Disables the text area and leaves the column Selects out (the count
+     * line stays), so nothing changes while the consumer saves.
+     */
+    disabled?: boolean;
+    required?: boolean;
+};
+/**
+ * A text area for rows pasted from a spreadsheet (cells split on tabs or
+ * commas) and, once something is pasted, a polite count line and one
+ * small Select per found column choosing what that column means. It parses
+ * only rows and cells (`parsePastedRows`); the consumer gives the
+ * meanings, keeps the mapping, checks the values and draws the preview.
+ */
+export declare function PasteRows({ columnLabel, columns, countLabel, delimiter, description, disabled, error, label, mapping, onMappingChange, onValueChange, placeholder, required, rows, value, }: PasteRowsProps): import("react").JSX.Element;

package/dist/components/PasteRows.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } from './Field.js';
+import { Inline } from './Inline.js';
+import { parsePastedRows, } from './paste-rows/parse-pasted-rows.js';
+import { Select } from './Select.js';
+import { Stack } from './Stack.js';
+import { Text } from './Text.js';
+const defaultColumnLabel = (position) => `Column ${position}`;
+function assertPasteRowsProps({ columns, label, rows, }) {
+    if (typeof label !== 'string' || !label.trim())
+        throw new RangeError('PasteRows label must not be empty');
+    if (columns.length === 0)
+        throw new RangeError('PasteRows needs at least one column');
+    const ids = new Set();
+    const labels = new Set();
+    for (const column of columns) {
+        if (!column.id.trim() || !column.label.trim())
+            throw new RangeError('PasteRows column id and label must not be empty');
+        if (ids.has(column.id))
+            throw new RangeError(`Repeated PasteRows column id: ${column.id}`);
+        if (labels.has(column.label))
+            throw new RangeError(`Repeated PasteRows column label: ${column.label}`);
+        ids.add(column.id);
+        labels.add(column.label);
+    }
+    if (rows !== undefined && (!Number.isInteger(rows) || rows < 1))
+        throw new RangeError('PasteRows rows must be a whole number from 1');
+}
+/**
+ * A text area for rows pasted from a spreadsheet (cells split on tabs or
+ * commas) and, once something is pasted, a polite count line and one
+ * small Select per found column choosing what that column means. It parses
+ * only rows and cells (`parsePastedRows`); the consumer gives the
+ * meanings, keeps the mapping, checks the values and draws the preview.
+ */
+export function PasteRows({ columnLabel = defaultColumnLabel, columns, countLabel, delimiter = 'auto', description, disabled = false, error, label, mapping, onMappingChange, onValueChange, placeholder, required = false, rows = 6, value, }) {
+    assertPasteRowsProps({ columns, label, rows });
+    const { columnCount } = parsePastedRows(value, delimiter);
+    const options = columns.map((column) => ({
+        value: column.id,
+        label: column.label,
+    }));
+    // A missing entry, or an id not in `columns`, counts as the first choice.
+    const chosenId = (position) => {
+        const id = mapping[position];
+        return columns.some((column) => column.id === id) ? id : columns[0].id;
+    };
+    const choose = (index, id) => {
+        const next = Array.from({ length: columnCount }, (_, position) => chosenId(position));
+        next[index] = id;
+        onMappingChange(next);
+    };
+    return (_jsxs(Stack, { gap: 2, children: [_jsx(Field, { description: description, error: error, label: label, required: required, children: _jsx("textarea", { disabled: disabled, onChange: (event) => onValueChange(event.currentTarget.value), placeholder: placeholder, required: required, rows: rows, spellCheck: false, value: value }) }), _jsxs(Inline, { align: "center", gap: 2, wrap: true, children: [_jsx(Text, { color: "muted", role: "status", variant: "caption", children: columnCount > 0 ? countLabel(columnCount) : '' }), (disabled ? [] : Array.from({ length: columnCount })).map((_, index) => (_jsx(Select, { label: columnLabel(index + 1), labelVisuallyHidden: true, onChange: (id) => choose(index, id), options: options, size: "xs", value: chosenId(index) }, index)))] })] }));
+}

package/dist/components/Stepper.d.ts

@@ -1,69 +1,5 @@
-/** `fixed` sizes the count for a few digits; `full` fills its container, such as a table cell. */
-export type StepperWidth = 'fixed' | 'full';
-export declare const stepperLimitAppearances: readonly ["faded", "plain"];
-/**
- * How − looks at `min` and + at `max`, where a press cannot move the count:
- * `faded` (the default) fades the button as any disabled control; `plain`
- * keeps its usual look. Either way the button is disabled.
- */
-export type StepperLimitAppearance = (typeof stepperLimitAppearances)[number];
-export type StepperProps = {
-    /** Names the count. Keep it visible unless headers around it say it (`labelVisuallyHidden`). */
-    label: string;
-    labelVisuallyHidden?: boolean;
-    /** The count, or `null` for an empty box (none). */
-    value: number | null;
-    /** A whole count, or `null` when the box is emptied. Typed counts are reported as typed, even outside the bounds. */
-    onChange: (value: number | null) => void;
-    /** The lowest count − reaches; defaults to 0. */
-    min?: number;
-    /** The highest count + reaches; no upper bound when left out. */
-    max?: number;
-    /** How much one press, or one arrow key, moves the count; defaults to 1. */
-    step?: number;
-    /** The − button's name, such as "One less". */
-    decrementLabel: string;
-    /** The + button's name, such as "One more". */
-    incrementLabel: string;
-    /**
-     * A message under the control, as `Field`'s: a polite live region linked by
-     * `aria-describedby`, with `aria-invalid` and the danger border. An empty
-     * string is no error.
-     */
-    error?: string;
-    /** `Field`'s changed look (the accent border and tint) for a count someone changed, or a suggestion. `error` wins. */
-    changed?: boolean;
-    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". 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.
-     */
-    'aria-describedby'?: string;
-    /** Shown in an empty box, such as "0". */
-    placeholder?: string;
-    name?: string;
-    width?: StepperWidth;
-    /**
-     * `plain` keeps − at `min` and + at `max` in their usual look instead of
-     * fading them (`faded`, the default). The button is still disabled, and a
-     * disabled or read-only Stepper is unchanged.
-     */
-    limitAppearance?: StepperLimitAppearance;
-};
+import { type StepperProps } from './stepper/stepper-props.js';
+export { stepperLimitAppearances, type StepperLimitAppearance, type StepperProps, type StepperWidth, } from './stepper/stepper-props.js';
 /**
  * A whole-number count between − and + buttons that can also be typed: one
  * tab stop (the count, a spin button that ArrowUp and ArrowDown step), with

package/dist/components/Stepper.js

@@ -6,7 +6,9 @@ import { assertStepperBounds, assertStepperUnit, readStepperEntry, stepperMoves,
 import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { FieldLabelText } from './FieldLabelText.js';
 import { StepperCountFrame } from './stepper/StepperCountFrame.js';
-export const stepperLimitAppearances = ['faded', 'plain'];
+import { stepperLimitAppearances, } from './stepper/stepper-props.js';
+import { assertStepperCommitDelay, defaultStepperCommitDelay, useStepperCommit, } from './stepper/use-stepper-commit.js';
+export { stepperLimitAppearances, } from './stepper/stepper-props.js';
 /** Keeps focus where it was (the count, or nowhere) when a button is pressed. */
 function keepFocus(event) {
     event.preventDefault();
@@ -16,10 +18,11 @@ 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, unit, 'aria-describedby': describedBy, placeholder, name, width = 'fixed', limitAppearance = 'faded', }, ref) {
+export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden = false, value, onChange, onCommit, commitDelay = defaultStepperCommitDelay, 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);
+    assertStepperCommitDelay(commitDelay);
     if (!stepperLimitAppearances.includes(limitAppearance))
         throw new RangeError(`Unknown Stepper limitAppearance: ${String(limitAppearance)}`);
     if (value !== null && !Number.isSafeInteger(value))
@@ -28,6 +31,7 @@ export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden
     const labelId = useId();
     const errorId = useId();
     const [draft, setDraft] = useState(null);
+    const commit = useStepperCommit(value, onCommit, commitDelay);
     const allowsNegative = min < 0;
     const moves = stepperMoves(value, bounds, disabled || readOnly);
     // The typed text stays while it means the count the consumer holds, so
@@ -42,6 +46,7 @@ export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden
         if (next === null)
             return;
         setDraft(null);
+        commit.stepped();
         onChange(next);
     }
     function onType(event) {
@@ -52,8 +57,10 @@ export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden
             return;
         setDraft(next);
         const count = entry.kind === 'count' ? entry.value : null;
-        if (count !== value)
-            onChange(count);
+        if (count === value)
+            return;
+        commit.edited();
+        onChange(count);
     }
     /** ArrowUp and ArrowDown step; Home and End go to min and a finite max. */
     function keyTarget(key) {
@@ -68,6 +75,9 @@ export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden
         return undefined;
     }
     function onKeyDown(event) {
+        // Enter finishes the entry; a form round the count still submits.
+        if (event.key === 'Enter')
+            commit.finish();
         const target = keyTarget(event.key);
         if (target === undefined)
             return;
@@ -83,5 +93,8 @@ export const Stepper = forwardRef(function Stepper({ label, labelVisuallyHidden
                                 .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 })] }));
+                            inputMode: allowsNegative ? 'text' : 'numeric', name: name, onBlur: () => {
+                                setDraft(null);
+                                commit.finish();
+                            }, 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/Table.d.ts

@@ -3,6 +3,7 @@ import { type TableLayout, type TableStickyHeader, type TableVerticalAlign } fro
 import { type TableMaxHeight } from './table/table-max-height.js';
 export { TableCell, type TableCellProps, type TableColumnWidth, type TableSort, } from './table/TableCell.js';
 export { TableRow, type TableRowProps, type TableRowVariant, } from './table/TableRow.js';
+export { TableSelectCell, type TableSelectCellProps, } from './table/TableSelectCell.js';
 export type { TableCellTone } from '../css/css-table-ledger.js';
 export { tableCellTones, tableRowVariants } from '../css/css-table-ledger.js';
 export type { TableLayout, TableMaxHeight, TableStickyHeader, TableVerticalAlign, };