@scalewing/react 1.52.0 → 1.53.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @scalewing/react
 
+## 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,
@@ -271,6 +272,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 +478,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 +562,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 +761,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 +974,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/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/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, };

package/dist/components/Table.js

@@ -6,6 +6,7 @@ import { assertTableLayout, assertTableStickyHeader, assertTableVerticalAlign, }
 import { assertTableMaxHeight, tableMaxHeightStyle, } from './table/table-max-height.js';
 export { TableCell, } from './table/TableCell.js';
 export { TableRow, } from './table/TableRow.js';
+export { TableSelectCell, } from './table/TableSelectCell.js';
 export { tableCellTones, tableRowVariants } from '../css/css-table-ledger.js';
 /**
  * A wide table scrolls inside its own `ScrollRegion`, named after the

package/dist/components/checkbox/CheckboxControl.d.ts

@@ -5,5 +5,5 @@ type CheckboxControlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'classNa
  * generated rules style (`input + .sw-checkbox-mark`). Shared by Checkbox
  * and MultiSelect's rows so the two cannot drift apart.
  */
-export declare function CheckboxControl({ tabIndex, ...props }: CheckboxControlProps): import("react").JSX.Element;
+export declare const CheckboxControl: import("react").ForwardRefExoticComponent<CheckboxControlProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/checkbox/CheckboxControl.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { tabStop } from '../../tab-stop.js';
 /**
  * The native checkbox and its drawn mark, the one markup Checkbox's
  * generated rules style (`input + .sw-checkbox-mark`). Shared by Checkbox
  * and MultiSelect's rows so the two cannot drift apart.
  */
-export function CheckboxControl({ tabIndex, ...props }) {
-    return (_jsxs("span", { className: "sw-checkbox-control", children: [_jsx("input", { tabIndex: tabIndex ?? tabStop, ...props, className: "sw-checkbox-input", type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-checkbox-mark" })] }));
-}
+export const CheckboxControl = forwardRef(function CheckboxControl({ tabIndex, ...props }, ref) {
+    return (_jsxs("span", { className: "sw-checkbox-control", children: [_jsx("input", { ref: ref, tabIndex: tabIndex ?? tabStop, ...props, className: "sw-checkbox-input", type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-checkbox-mark" })] }));
+});

package/dist/components/dialog/validate.d.ts

@@ -1,5 +1,6 @@
 import { type Breakpoint } from '../../css/breakpoints.js';
 import { type DialogAppearance } from '../../css/css-dialog-banded.js';
+import { type DialogPlacement } from '../../css/css-dialog-end.js';
 import { type ThemeCanvas } from '../../css/css-canvas-grouped.js';
 import { type ActionBarSummary } from '../action-bar/ActionBarSummary.js';
 export declare const dialogSizes: readonly ["md", "lg", "xl"];
@@ -20,5 +21,6 @@ export type DialogChecks = {
     canvas: ThemeCanvas;
     sheetBelow: Breakpoint | undefined;
     sheetGrabber: boolean;
+    placement: DialogPlacement;
 };
-export declare function assertDialogProps({ appearance, canvas, description, role, sheetBelow, sheetGrabber, size, summary, }: DialogChecks): void;
+export declare function assertDialogProps({ appearance, canvas, description, placement, role, sheetBelow, sheetGrabber, size, summary, }: DialogChecks): void;

package/dist/components/dialog/validate.js

@@ -1,4 +1,5 @@
 import { dialogAppearances, } from '../../css/css-dialog-banded.js';
+import { dialogPlacements, } from '../../css/css-dialog-end.js';
 import { themeCanvases, } from '../../css/css-canvas-grouped.js';
 import { assertActionBarSummary, } from '../action-bar/ActionBarSummary.js';
 export const dialogSizes = ['md', 'lg', 'xl'];
@@ -7,10 +8,11 @@ function oneOf(values, value, prop) {
     if (!values.includes(value))
         throw new RangeError(`Unknown Dialog ${prop}: ${String(value)}`);
 }
-export function assertDialogProps({ appearance, canvas, description, role, sheetBelow, sheetGrabber, size, summary, }) {
+export function assertDialogProps({ appearance, canvas, description, placement, role, sheetBelow, sheetGrabber, size, summary, }) {
     oneOf(dialogSizes, size, 'size');
     oneOf(dialogAppearances, appearance, 'appearance');
     oneOf(themeCanvases, canvas, 'canvas');
+    oneOf(dialogPlacements, placement, 'placement');
     if (role !== undefined)
         oneOf(dialogRoles, role, 'role');
     if (description !== undefined &&

package/dist/components/paste-rows/parse-pasted-rows.d.ts

@@ -0,0 +1,26 @@
+/**
+ * How pasted cells are split: `tab` (what a spreadsheet copies), `comma`
+ * (a CSV line), or `auto`, tab when the text holds a tab and comma
+ * otherwise. A list whose one column may hold commas ("Smith, Jones") is
+ * parsed with `tab`, so a comma never splits it.
+ */
+export type PastedRowsDelimiter = 'auto' | 'tab' | 'comma';
+export declare const pastedRowsDelimiters: readonly PastedRowsDelimiter[];
+export type PastedRows = {
+    /** The rows in order, each padded with `''` to `columnCount` cells. */
+    rows: string[][];
+    /** The most cells any row has; 0 when nothing but blank lines was pasted. */
+    columnCount: number;
+    /** The delimiter used, `auto` resolved. */
+    delimiter: 'tab' | 'comma';
+};
+/**
+ * Splits pasted text into rows of trimmed cells: rows on line breaks
+ * (CR, LF or CRLF), cells on the delimiter. A cell that starts with a
+ * double quote and has a closing one later is quoted, as spreadsheets and
+ * CSV write a cell holding the delimiter, a line break or a quote; any
+ * other quote is a plain character. Rows whose cells are all blank are
+ * left out. It knows nothing of what the columns mean: the consumer maps
+ * and checks them. Linear in the text's length.
+ */
+export declare function parsePastedRows(text: string, delimiter?: PastedRowsDelimiter): PastedRows;

package/dist/components/paste-rows/parse-pasted-rows.js

@@ -0,0 +1,123 @@
+export const pastedRowsDelimiters = [
+    'auto',
+    'tab',
+    'comma',
+];
+function resolveDelimiter(text, delimiter) {
+    if (!pastedRowsDelimiters.includes(delimiter))
+        throw new RangeError(`Unknown PasteRows delimiter: ${String(delimiter)}`);
+    if (delimiter !== 'auto')
+        return delimiter;
+    return text.includes('\t') ? 'tab' : 'comma';
+}
+/**
+ * Reads one quoted cell starting at the opening quote `start`: `""` is
+ * one quote, and delimiters and line breaks inside it are its words.
+ * Returns the words and the index after the closing quote, or `null` when
+ * no lone closing quote follows (the opening quote is then a character).
+ */
+function readQuoted(text, start) {
+    let words = '';
+    let index = start + 1;
+    while (index < text.length) {
+        const char = text[index];
+        if (char === '"') {
+            if (text[index + 1] === '"') {
+                words += '"';
+                index += 2;
+                continue;
+            }
+            return [words, index + 1];
+        }
+        words += char;
+        index += 1;
+    }
+    return null;
+}
+/**
+ * For each index, where a quoted cell's scan starting there would find its
+ * lone closing quote (`""` being one escaped quote), or -1 when none
+ * follows; one extra entry for the end. Built backwards in one pass, so
+ * each opening quote is checked in constant time and the parse stays
+ * linear: a run of quotes from i of odd length closes on its last quote,
+ * an even run is all escapes and the scan carries on after it.
+ */
+function closingQuoteTable(text) {
+    const closesFrom = new Int32Array(text.length + 1).fill(-1);
+    const runFrom = new Int32Array(text.length + 1);
+    for (let index = text.length - 1; index >= 0; index -= 1) {
+        if (text[index] !== '"') {
+            closesFrom[index] = closesFrom[index + 1];
+            continue;
+        }
+        const run = 1 + runFrom[index + 1];
+        runFrom[index] = run;
+        closesFrom[index] =
+            run % 2 === 1 ? index + run - 1 : closesFrom[index + run];
+    }
+    return closesFrom;
+}
+/**
+ * Splits pasted text into rows of trimmed cells: rows on line breaks
+ * (CR, LF or CRLF), cells on the delimiter. A cell that starts with a
+ * double quote and has a closing one later is quoted, as spreadsheets and
+ * CSV write a cell holding the delimiter, a line break or a quote; any
+ * other quote is a plain character. Rows whose cells are all blank are
+ * left out. It knows nothing of what the columns mean: the consumer maps
+ * and checks them. Linear in the text's length.
+ */
+export function parsePastedRows(text, delimiter = 'auto') {
+    const used = resolveDelimiter(text, delimiter);
+    const separator = used === 'tab' ? '\t' : ',';
+    const closesFrom = closingQuoteTable(text);
+    const rows = [];
+    let row = [];
+    let cell = '';
+    let cellStart = true;
+    const endCell = () => {
+        row.push(cell.trim());
+        cell = '';
+        cellStart = true;
+    };
+    const endRow = () => {
+        endCell();
+        if (row.some((value) => value !== ''))
+            rows.push(row);
+        row = [];
+    };
+    let index = 0;
+    while (index < text.length) {
+        const char = text[index];
+        const quoted = cellStart && char === '"' && closesFrom[index + 1] >= 0
+            ? readQuoted(text, index)
+            : null;
+        if (quoted) {
+            cell += quoted[0];
+            index = quoted[1];
+            cellStart = false;
+        }
+        else if (char === separator) {
+            endCell();
+            index += 1;
+        }
+        else if (char === '\r' || char === '\n') {
+            endRow();
+            index += char === '\r' && text[index + 1] === '\n' ? 2 : 1;
+        }
+        else {
+            // Spaces before a quoted cell's opening quote do not unquote it.
+            if (!(cellStart && char === ' ')) {
+                cell += char;
+                cellStart = false;
+            }
+            index += 1;
+        }
+    }
+    if (cell !== '' || row.length > 0)
+        endRow();
+    const columnCount = rows.reduce((most, cells) => Math.max(most, cells.length), 0);
+    for (const cells of rows)
+        while (cells.length < columnCount)
+            cells.push('');
+    return { rows, columnCount, delimiter: used };
+}

package/dist/components/table/TableSelectCell.d.ts

@@ -0,0 +1,26 @@
+export type TableSelectCellProps = {
+    /**
+     * The checkbox's name, not drawn: "Select Mallard" in a row, "Select
+     * all" in the header. Name the row by the words the row shows.
+     */
+    label: string;
+    checked: boolean;
+    /** The mixed state, for a header's "Select all" while some rows are chosen. */
+    indeterminate?: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    /**
+     * `th` in a `TableHeader` row (the column's header cell, `scope="col"`),
+     * `td` (the default) in a body row. A fixed table sizes its columns from
+     * the header row, so put one in the header too.
+     */
+    as?: 'td' | 'th';
+};
+/**
+ * A table's select column: a cell holding one `Checkbox` whose label is
+ * visually hidden. The column is as narrow as the box, which is its own
+ * target, at least 44 × 44 px on a coarse pointer. Pair a chosen row with
+ * `TableRow selected`; a press on the box is left alone by a
+ * `TableRow pressable`.
+ */
+export declare const TableSelectCell: import("react").ForwardRefExoticComponent<TableSelectCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/table/TableSelectCell.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { tableSelectCellClass } from '../../css/css-table-select.js';
+import { Checkbox } from '../Checkbox.js';
+/**
+ * A table's select column: a cell holding one `Checkbox` whose label is
+ * visually hidden. The column is as narrow as the box, which is its own
+ * target, at least 44 × 44 px on a coarse pointer. Pair a chosen row with
+ * `TableRow selected`; a press on the box is left alone by a
+ * `TableRow pressable`.
+ */
+export const TableSelectCell = forwardRef(function TableSelectCell({ as = 'td', checked, disabled = false, indeterminate = false, label, onCheckedChange, }, ref) {
+    if (typeof label !== 'string' || !label.trim())
+        throw new RangeError('TableSelectCell label must not be empty');
+    if (as !== 'td' && as !== 'th')
+        throw new RangeError(`Unknown TableSelectCell as: ${String(as)}`);
+    const Component = as;
+    return (_jsx(Component, { ref: ref, className: tableSelectCellClass, scope: as === 'th' ? 'col' : undefined, children: _jsx(Checkbox, { checked: checked, disabled: disabled, indeterminate: indeterminate, label: label, labelVisuallyHidden: true, onCheckedChange: onCheckedChange }) }));
+});

package/dist/css/css-checkbox.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { checkStrokeIn } from './chevron.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
 export function cssCheckboxClasses() {
@@ -68,6 +69,38 @@ export function cssCheckboxClasses() {
 
 .sw-checkbox-input:checked + .sw-checkbox-mark::after { display: block; }
 
+/* The mixed state: the accent fill with a dash in place of the check. */
+.sw-checkbox-input:indeterminate + .sw-checkbox-mark {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+}
+
+.sw-checkbox-input:indeterminate + .sw-checkbox-mark::after {
+  border-right: 0;
+  display: block;
+  height: 0;
+  inset-block-start: calc(50% - 1px);
+  inset-inline-start: calc(50% - var(--sw-space-3) / 2);
+  transform: none;
+  width: var(--sw-space-3);
+}
+
+/* A visually hidden label: the box alone is the target, its own size on a
+   fine pointer (so a compact table row keeps its height), the 44 px touch
+   target both ways on a coarse one. */
+.sw-checkbox-label-hidden {
+  justify-content: center;
+  min-height: 0;
+  position: relative;
+}
+
+@media ${coarsePointerQuery} {
+  .sw-checkbox-label-hidden {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+}
+
 .sw-checkbox-input:focus-visible + .sw-checkbox-mark {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
@@ -104,13 +137,13 @@ export function cssCheckboxClasses() {
 
 @media (prefers-reduced-transparency: reduce) {
   .sw-checkbox-mark { background: var(--sw-color-surface); }
-  .sw-checkbox-input:checked + .sw-checkbox-mark { background: var(--sw-color-accent); }
+  .sw-checkbox-input:is(:checked, :indeterminate) + .sw-checkbox-mark { background: var(--sw-color-accent); }
 }
 
 @media (forced-colors: active) {
   .sw-checkbox-mark { background: Canvas; border-color: CanvasText; }
-  .sw-checkbox-input:checked + .sw-checkbox-mark { background: Highlight; border-color: Highlight; }
-  .sw-checkbox-input:checked + .sw-checkbox-mark::after { border-color: HighlightText; }
+  .sw-checkbox-input:is(:checked, :indeterminate) + .sw-checkbox-mark { background: Highlight; border-color: Highlight; }
+  .sw-checkbox-input:is(:checked, :indeterminate) + .sw-checkbox-mark::after { border-color: HighlightText; }
   .sw-checkbox-input[aria-invalid='true'] + .sw-checkbox-mark { border-color: CanvasText; }
 }`;
 }
@@ -118,6 +151,7 @@ export function checkboxClassCatalog() {
     return [
         'sw-checkbox',
         'sw-checkbox-label',
+        'sw-checkbox-label-hidden',
         'sw-checkbox-control',
         'sw-checkbox-input',
         'sw-checkbox-mark',

package/dist/css/css-components.js

@@ -35,6 +35,7 @@ import { cssDialogBandedClasses } from './css-dialog-banded.js';
 import { cssDialogFrameClasses } from './css-dialog-frame.js';
 import { cssDialogCanvasClasses } from './css-dialog-canvas.js';
 import { cssDialogGrabberClasses } from './css-dialog-grabber.js';
+import { cssDialogEndClasses } from './css-dialog-end.js';
 import { cssComboboxClasses } from './css-combobox.js';
 import { cssSelectClasses } from './css-select.js';
 import { cssMultiSelectClasses } from './css-multi-select.js';
@@ -224,6 +225,8 @@ ${cssDialogCanvasClasses()}
 
 ${cssDialogGrabberClasses()}
 
+${cssDialogEndClasses()}
+
 ${cssAccordionClasses()}
 
 ${cssSelectClasses()}

package/dist/css/css-dialog-end.d.ts

@@ -0,0 +1,13 @@
+import { type Breakpoint } from './breakpoints.js';
+/**
+ * Where a Dialog sits from the layout breakpoint up: `center` (the
+ * default) in the middle of the window, `end` as a side panel docked to
+ * the inline end (the right, the left in right-to-left).
+ */
+export declare const dialogPlacements: readonly ["center", "end"];
+export type DialogPlacement = (typeof dialogPlacements)[number];
+export declare const dialogEndClass = "sw-dialog-end";
+/** The side panel takes its place from this breakpoint up. */
+export declare const dialogEndFrom: Breakpoint;
+export declare function cssDialogEndClasses(): string;
+export declare function dialogEndClassCatalog(): string[];

package/dist/css/css-dialog-end.js

@@ -0,0 +1,75 @@
+import { breakpointQuery } from './breakpoints.js';
+/**
+ * Where a Dialog sits from the layout breakpoint up: `center` (the
+ * default) in the middle of the window, `end` as a side panel docked to
+ * the inline end (the right, the left in right-to-left).
+ */
+export const dialogPlacements = ['center', 'end'];
+export const dialogEndClass = 'sw-dialog-end';
+/** The side panel takes its place from this breakpoint up. */
+export const dialogEndFrom = 'md';
+const end = `.${dialogEndClass}`;
+/*
+ * From md up, `placement="end"` is a side panel: the window's full height
+ * at the inline end, square corners, one hairline on its inline-start
+ * edge, the size's width (md 32rem, lg 56rem, xl 65rem) with a space-8
+ * strip of backdrop always in view. Its column grows to the full height so
+ * the pinned footer sits on the bottom edge even when the content is short;
+ * longer content scrolls inside the panel under the sticky footer, as in
+ * the centred dialog. It slides in from its edge unless reduced motion is
+ * asked for. Below md the class draws nothing: the dialog is centred, or a
+ * bottom sheet with `sheetBelow`. Emitted after the banded and grabber
+ * rules so its edges win at equal specificity.
+ */
+export function cssDialogEndClasses() {
+    return `@media ${breakpointQuery('from', dialogEndFrom)} {
+  ${end} {
+    border-color: var(--sw-color-border);
+    border-radius: 0;
+    border-width: 0;
+    border-inline-start-width: 1px;
+    height: 100%;
+    inset-block: 0;
+    margin: 0;
+    margin-inline-start: auto;
+    max-height: none;
+  }
+
+  ${end}[open] {
+    animation: sw-dialog-end-in var(--sw-motion-default) var(--sw-motion-easing);
+    display: flex;
+    flex-direction: column;
+  }
+
+  ${end}[open]:dir(rtl) {
+    animation-name: sw-dialog-end-in-rtl;
+  }
+
+  ${end} > .sw-stack {
+    flex: 1 0 auto;
+  }
+
+  ${end} .sw-dialog-footer {
+    margin-top: auto;
+  }
+}
+
+@keyframes sw-dialog-end-in {
+  from { translate: 100% 0; }
+}
+
+@keyframes sw-dialog-end-in-rtl {
+  from { translate: -100% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ${end}[open] { animation: none; }
+}
+
+@media (forced-colors: active) {
+  ${end} { border-inline-start-color: CanvasText; }
+}`;
+}
+export function dialogEndClassCatalog() {
+    return [dialogEndClass];
+}

package/dist/css/css-select.js

@@ -2,6 +2,7 @@ import { typographyVariants } from '@scalewing/tokens';
 import { chevronStroke } from './chevron.js';
 import { zIndex } from './stacking.js';
 import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 export function cssSelectClasses() {
@@ -186,6 +187,15 @@ export function cssSelectClasses() {
   border-top: 1px solid var(--sw-color-border);
   color: var(--sw-color-accent);
   margin-top: var(--sw-space-1);
+}
+
+/* The comfortable touch target on a coarse pointer, at every size: the
+   trigger and each option are at least 44 px high (the md control height),
+   as every Button is. Type and padding keep the size's; the rule follows
+   the size rules, which it outranks only by order. */
+@media ${coarsePointerQuery} {
+  .sw-select .sw-select-trigger,
+  .sw-select .sw-select-option { min-height: ${touchTarget}; }
 }`;
 }
 export function selectClassCatalog() {

package/dist/css/css-table-select.d.ts

@@ -0,0 +1,3 @@
+export declare const tableSelectCellClass = "sw-table-select";
+export declare function cssTableSelectClasses(): string;
+export declare function tableSelectClassCatalog(): string[];

package/dist/css/css-table-select.js

@@ -0,0 +1,24 @@
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+export const tableSelectCellClass = 'sw-table-select';
+/*
+ * TableSelectCell's column: as wide as the checkbox (its padding outside),
+ * in an auto or a fixed table alike; the box centred in the cell. On a
+ * coarse pointer the column widens to the box's 44 px target
+ * (`sw-checkbox-label-hidden`, css-checkbox.ts).
+ */
+export function cssTableSelectClasses() {
+    return `.sw-table .${tableSelectCellClass} {
+  width: var(--sw-space-5);
+}
+
+.sw-table .${tableSelectCellClass} .sw-checkbox {
+  align-items: center;
+}
+
+@media ${coarsePointerQuery} {
+  .sw-table .${tableSelectCellClass} { width: ${touchTarget}; }
+}`;
+}
+export function tableSelectClassCatalog() {
+    return [tableSelectCellClass];
+}

package/dist/css/css-table.js

@@ -7,6 +7,7 @@ import { cssTableLedgerClasses, tableLedgerClassCatalog, } from './css-table-led
 import { cssTableFooterClasses, tableFooterClassCatalog, } from './css-table-footer.js';
 import { cssTablePagePinClasses, tablePagePinClassCatalog, } from './css-table-page-pin.js';
 import { cssTableTotalRowClasses, tableTotalRowClassCatalog, } from './css-table-total-row.js';
+import { cssTableSelectClasses, tableSelectClassCatalog, } from './css-table-select.js';
 import { cssTablePressClasses, tablePressClassCatalog, } from './css-table-press.js';
 import { cssTableStickyHeaderClasses, tableStickyHeaderClassCatalog, } from './css-table-sticky-header.js';
 import { cssTableSortClasses, tableSortClassCatalog, } from './css-table-sort.js';
@@ -103,6 +104,8 @@ ${cssTableBoundedClasses()}
 
 ${cssTablePressClasses()}
 
+${cssTableSelectClasses()}
+
 ${selectedRowRules()}`;
 }
 export function tableClassCatalog() {
@@ -123,5 +126,6 @@ export function tableClassCatalog() {
         ...tablePagePinClassCatalog(),
         ...tableBoundedClassCatalog(),
         ...tablePressClassCatalog(),
+        ...tableSelectClassCatalog(),
     ];
 }

package/dist/css/stylesheet.js

@@ -68,6 +68,7 @@ import { dialogBandedClassCatalog } from './css-dialog-banded.js';
 import { dialogFrameClassCatalog } from './css-dialog-frame.js';
 import { dialogCanvasClassCatalog } from './css-dialog-canvas.js';
 import { dialogGrabberClassCatalog } from './css-dialog-grabber.js';
+import { dialogEndClassCatalog } from './css-dialog-end.js';
 import { selectClassCatalog } from './css-select.js';
 import { multiSelectClassCatalog } from './css-multi-select.js';
 import { comboboxClassCatalog } from './css-combobox.js';
@@ -113,6 +114,7 @@ export function utilityClassCatalog() {
         ...dialogBandedClassCatalog(),
         ...dialogCanvasClassCatalog(),
         ...dialogGrabberClassCatalog(),
+        ...dialogEndClassCatalog(),
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),

package/dist/index.d.ts

@@ -15,6 +15,8 @@ export { ListRow, type ListRowProps } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, type ListGroupMaxHeight, type ListGroupVariant, type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone, } from './list-options.js';
 export { listTileColumnCounts, type ListGroupTileColumns, } from './css/css-list-tiles.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
+export { PasteRows, type PasteRowsColumn, type PasteRowsProps, } from './components/PasteRows.js';
+export { parsePastedRows, type PastedRows, type PastedRowsDelimiter, pastedRowsDelimiters, } from './components/paste-rows/parse-pasted-rows.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { Skeleton, skeletonVariants, type SkeletonProps, type SkeletonVariant, } from './components/Skeleton.js';
 export { EmptyState, emptyStateTitleElements, type EmptyStateProps, type EmptyStateTitleElement, } from './components/EmptyState.js';
@@ -40,7 +42,7 @@ export { Box, type BoxBorder, type BoxElement, type BoxLink, type BoxProps, } fr
 export { boxLinkAppearances } from './css/css-box-link.js';
 export { ButtonGroup, buttonGroupAppearances, type ButtonGroupAppearance, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
-export { Dialog, dialogAppearances, dialogSizes, type DialogAppearance, type DialogProps, type DialogRole, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
+export { Dialog, dialogAppearances, dialogPlacements, dialogSizes, type DialogAppearance, type DialogPlacement, type DialogProps, type DialogRole, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
 export { StatTile, type StatTileAppearance, statTileAppearances, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
 export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, type ToastAction, type ToastPlacement, } from './components/Toast.js';
@@ -69,7 +71,7 @@ export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
 export { MultiSelect, type MultiSelectAlign, type MultiSelectOption, type MultiSelectProps, } from './components/MultiSelect.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
-export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableMaxHeight, type TableProps, type TableRowProps, type TableRowVariant, type TableSort, type TableStickyHeader, type TableVerticalAlign, } from './components/Table.js';
+export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, TableSelectCell, tableCellTones, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableMaxHeight, type TableProps, type TableRowProps, type TableRowVariant, type TableSelectCellProps, type TableSort, type TableStickyHeader, type TableVerticalAlign, } from './components/Table.js';
 export { Text, type TextAlign, type TextElement, type TextProps, } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
 export { themeCanvases, type ThemeCanvas } from './css/css-canvas-grouped.js';

package/dist/index.js

@@ -14,6 +14,8 @@ export { ListRow } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, } from './list-options.js';
 export { listTileColumnCounts, } from './css/css-list-tiles.js';
 export { Checkbox } from './components/Checkbox.js';
+export { PasteRows, } from './components/PasteRows.js';
+export { parsePastedRows, pastedRowsDelimiters, } from './components/paste-rows/parse-pasted-rows.js';
 export { Spinner, } from './components/Spinner.js';
 export { Skeleton, skeletonVariants, } from './components/Skeleton.js';
 export { EmptyState, emptyStateTitleElements, } from './components/EmptyState.js';
@@ -39,7 +41,7 @@ export { Box, } from './components/Box.js';
 export { boxLinkAppearances } from './css/css-box-link.js';
 export { ButtonGroup, buttonGroupAppearances, } from './components/ButtonGroup.js';
 export { Card } from './components/Card.js';
-export { Dialog, dialogAppearances, dialogSizes, } from './components/Dialog.js';
+export { Dialog, dialogAppearances, dialogPlacements, dialogSizes, } from './components/Dialog.js';
 export { StatTile, statTileAppearances, statTileTones, } from './components/StatTile.js';
 export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, } from './components/Toast.js';
@@ -65,7 +67,7 @@ export { Combobox, comboboxSizes, } from './components/Combobox.js';
 export { Select } from './components/Select.js';
 export { MultiSelect, } from './components/MultiSelect.js';
 export { Stack, } from './components/Stack.js';
-export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, } from './components/Table.js';
+export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, TableSelectCell, tableCellTones, tableRowVariants, } from './components/Table.js';
 export { Text, } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
 export { themeCanvases } from './css/css-canvas-grouped.js';

package/dist/styles.css

@@ -1185,6 +1185,38 @@ body {
 
 .sw-checkbox-input:checked + .sw-checkbox-mark::after { display: block; }
 
+/* The mixed state: the accent fill with a dash in place of the check. */
+.sw-checkbox-input:indeterminate + .sw-checkbox-mark {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+}
+
+.sw-checkbox-input:indeterminate + .sw-checkbox-mark::after {
+  border-right: 0;
+  display: block;
+  height: 0;
+  inset-block-start: calc(50% - 1px);
+  inset-inline-start: calc(50% - var(--sw-space-3) / 2);
+  transform: none;
+  width: var(--sw-space-3);
+}
+
+/* A visually hidden label: the box alone is the target, its own size on a
+   fine pointer (so a compact table row keeps its height), the 44 px touch
+   target both ways on a coarse one. */
+.sw-checkbox-label-hidden {
+  justify-content: center;
+  min-height: 0;
+  position: relative;
+}
+
+@media (pointer: coarse) {
+  .sw-checkbox-label-hidden {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+}
+
 .sw-checkbox-input:focus-visible + .sw-checkbox-mark {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
@@ -1221,13 +1253,13 @@ body {
 
 @media (prefers-reduced-transparency: reduce) {
   .sw-checkbox-mark { background: var(--sw-color-surface); }
-  .sw-checkbox-input:checked + .sw-checkbox-mark { background: var(--sw-color-accent); }
+  .sw-checkbox-input:is(:checked, :indeterminate) + .sw-checkbox-mark { background: var(--sw-color-accent); }
 }
 
 @media (forced-colors: active) {
   .sw-checkbox-mark { background: Canvas; border-color: CanvasText; }
-  .sw-checkbox-input:checked + .sw-checkbox-mark { background: Highlight; border-color: Highlight; }
-  .sw-checkbox-input:checked + .sw-checkbox-mark::after { border-color: HighlightText; }
+  .sw-checkbox-input:is(:checked, :indeterminate) + .sw-checkbox-mark { background: Highlight; border-color: Highlight; }
+  .sw-checkbox-input:is(:checked, :indeterminate) + .sw-checkbox-mark::after { border-color: HighlightText; }
   .sw-checkbox-input[aria-invalid='true'] + .sw-checkbox-mark { border-color: CanvasText; }
 }
 
@@ -2174,6 +2206,18 @@ body {
   .sw-table-action { color: ButtonText; }
 }
 
+.sw-table .sw-table-select {
+  width: var(--sw-space-5);
+}
+
+.sw-table .sw-table-select .sw-checkbox {
+  align-items: center;
+}
+
+@media (pointer: coarse) {
+  .sw-table .sw-table-select { width: var(--sw-control-md-min-height); }
+}
+
 .sw-table-row-selected > :first-child {
   position: relative;
 }
@@ -5837,6 +5881,54 @@ html:has(.sw-site-header-sticky) {
   }
 }
 
+@media (min-width: 48rem) {
+  .sw-dialog-end {
+    border-color: var(--sw-color-border);
+    border-radius: 0;
+    border-width: 0;
+    border-inline-start-width: 1px;
+    height: 100%;
+    inset-block: 0;
+    margin: 0;
+    margin-inline-start: auto;
+    max-height: none;
+  }
+
+  .sw-dialog-end[open] {
+    animation: sw-dialog-end-in var(--sw-motion-default) var(--sw-motion-easing);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sw-dialog-end[open]:dir(rtl) {
+    animation-name: sw-dialog-end-in-rtl;
+  }
+
+  .sw-dialog-end > .sw-stack {
+    flex: 1 0 auto;
+  }
+
+  .sw-dialog-end .sw-dialog-footer {
+    margin-top: auto;
+  }
+}
+
+@keyframes sw-dialog-end-in {
+  from { translate: 100% 0; }
+}
+
+@keyframes sw-dialog-end-in-rtl {
+  from { translate: -100% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-dialog-end[open] { animation: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-dialog-end { border-inline-start-color: CanvasText; }
+}
+
 .sw-accordion {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -6091,6 +6183,15 @@ html:has(.sw-site-header-sticky) {
   margin-top: var(--sw-space-1);
 }
 
+/* The comfortable touch target on a coarse pointer, at every size: the
+   trigger and each option are at least 44 px high (the md control height),
+   as every Button is. Type and padding keep the size's; the rule follows
+   the size rules, which it outranks only by order. */
+@media (pointer: coarse) {
+  .sw-select .sw-select-trigger,
+  .sw-select .sw-select-option { min-height: var(--sw-control-md-min-height); }
+}
+
 .sw-action-menu {
   display: inline-flex;
   position: relative;

package/package.json

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