@scalewing/react 1.52.0 → 1.54.0

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/box/external-link.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+/** What a `Box` passes to check and draw its external link. */
+export type BoxExternalOptions = {
+    as: string;
+    external: boolean | undefined;
+    newTabLabel: string | undefined;
+};
+/**
+ * Refuses an external box that is not a link or has no words for its new
+ * tab, and new-tab words on a box that is not external.
+ */
+export declare function assertBoxExternal({ as, external, newTabLabel, }: BoxExternalOptions): void;
+/** The consumer's `rel` words with `noopener noreferrer`, each once. */
+export declare function externalLinkRel(rel: string | undefined): string;
+/**
+ * An external link's content: its words, the decorative new-tab mark
+ * right after them (no space, so it never wraps alone) and the hidden
+ * words read after the name, such as "(opens in a new tab)".
+ */
+export declare function externalLinkContent(children: ReactNode, newTabLabel: string): ReactNode;

package/dist/components/box/external-link.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { externalLinkMarkClass } from '../../css/css-box-link.js';
+/** The `rel` words a link that opens a new tab always carries. */
+const newTabRelWords = ['noopener', 'noreferrer'];
+/**
+ * Refuses an external box that is not a link or has no words for its new
+ * tab, and new-tab words on a box that is not external.
+ */
+export function assertBoxExternal({ as, external, newTabLabel, }) {
+    if (external === undefined || external === false) {
+        if (newTabLabel !== undefined)
+            throw new TypeError('Box newTabLabel is for an external link');
+        return;
+    }
+    if (external !== true)
+        throw new RangeError('Box external must be a boolean');
+    if (as !== 'a')
+        throw new TypeError('Box external is for a link (as="a")');
+    if (typeof newTabLabel !== 'string' || newTabLabel.trim() === '')
+        throw new RangeError('Box external needs a non-empty newTabLabel');
+}
+/** The consumer's `rel` words with `noopener noreferrer`, each once. */
+export function externalLinkRel(rel) {
+    const words = (rel ?? '').split(/\s+/).filter((word) => word !== '');
+    for (const word of newTabRelWords)
+        if (!words.includes(word))
+            words.push(word);
+    return words.join(' ');
+}
+/**
+ * An external link's content: its words, the decorative new-tab mark
+ * right after them (no space, so it never wraps alone) and the hidden
+ * words read after the name, such as "(opens in a new tab)".
+ */
+export function externalLinkContent(children, newTabLabel) {
+    return (_jsxs(_Fragment, { children: [children, _jsx("span", { "aria-hidden": "true", className: externalLinkMarkClass }), _jsxs("span", { className: "sw-sr-only", children: [" ", newTabLabel] })] }));
+}

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/stepper/stepper-props.d.ts

@@ -0,0 +1,78 @@
+/** `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 finished count, once per entry, for a page that saves as you go:
+     * on blur, on Enter, and `commitDelay` ms after the last − / + press or
+     * step key (ArrowUp, ArrowDown, Home, End). Never per typed digit, and
+     * never when the count is the one last committed (or held before the
+     * first edit). It gives the count you hold then, `null` or outside the
+     * bounds included, as `onChange` reports typed counts. `onChange` is
+     * unchanged.
+     */
+    onCommit?: (value: number | null) => void;
+    /** How long − / + presses and step keys settle before `onCommit`, in ms; defaults to 600. */
+    commitDelay?: number;
+    /** 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;
+};

package/dist/components/stepper/stepper-props.js

@@ -0,0 +1 @@
+export const stepperLimitAppearances = ['faded', 'plain'];

package/dist/components/stepper/use-stepper-commit.d.ts

@@ -0,0 +1,22 @@
+/** How long after the last − / + press or arrow key a count commits, in ms. */
+export declare const defaultStepperCommitDelay = 600;
+/** Refuses a commit delay that is not a finite number of zero or more ms. */
+export declare function assertStepperCommitDelay(delay: number): void;
+/** What a Stepper calls as its count is edited and finished. */
+export type StepperCommit = {
+    /** A typed change: it waits for blur or Enter. */
+    edited: () => void;
+    /** A − / + press or a step key: it commits once the presses settle. */
+    stepped: () => void;
+    /** Blur or Enter: commits now. */
+    finish: () => void;
+};
+/**
+ * Turns a Stepper's edits into one `onCommit` per finished entry: on blur,
+ * on Enter, and `delay` ms after the last − / + press or step key. A
+ * commit gives the count the consumer holds then, and only when it differs
+ * from the last committed count (or the count before the first edit). A
+ * count the consumer changes while nothing is waiting becomes the new
+ * baseline. A commit still waiting when the Stepper unmounts is made then.
+ */
+export declare function useStepperCommit(value: number | null, onCommit: ((value: number | null) => void) | undefined, delay: number): StepperCommit;

package/dist/components/stepper/use-stepper-commit.js

@@ -0,0 +1,66 @@
+import { useEffect, useRef } from 'react';
+/** How long after the last − / + press or arrow key a count commits, in ms. */
+export const defaultStepperCommitDelay = 600;
+/** Refuses a commit delay that is not a finite number of zero or more ms. */
+export function assertStepperCommitDelay(delay) {
+    if (!Number.isFinite(delay) || delay < 0)
+        throw new RangeError('Stepper commitDelay must be a finite number of zero or more');
+}
+/**
+ * Turns a Stepper's edits into one `onCommit` per finished entry: on blur,
+ * on Enter, and `delay` ms after the last − / + press or step key. A
+ * commit gives the count the consumer holds then, and only when it differs
+ * from the last committed count (or the count before the first edit). A
+ * count the consumer changes while nothing is waiting becomes the new
+ * baseline. A commit still waiting when the Stepper unmounts is made then.
+ */
+export function useStepperCommit(value, onCommit, delay) {
+    const latest = useRef({ value, onCommit });
+    const baseline = useRef(value);
+    const pending = useRef(false);
+    const timer = useRef(null);
+    useEffect(() => {
+        latest.current = { value, onCommit };
+        if (!pending.current)
+            baseline.current = value;
+    }, [value, onCommit]);
+    function clearTimer() {
+        if (timer.current === null)
+            return;
+        clearTimeout(timer.current);
+        timer.current = null;
+    }
+    function finish() {
+        clearTimer();
+        if (!pending.current)
+            return;
+        pending.current = false;
+        const { value: current, onCommit: commit } = latest.current;
+        if (current === baseline.current)
+            return;
+        baseline.current = current;
+        commit?.(current);
+    }
+    // The latest finish, for the timer and the unmount to call.
+    const finishRef = useRef(finish);
+    useEffect(() => {
+        finishRef.current = finish;
+    });
+    useEffect(() => () => finishRef.current(), []);
+    function edited() {
+        if (latest.current.onCommit === undefined)
+            return;
+        pending.current = true;
+    }
+    function stepped() {
+        if (latest.current.onCommit === undefined)
+            return;
+        pending.current = true;
+        clearTimer();
+        timer.current = setTimeout(() => {
+            timer.current = null;
+            finishRef.current();
+        }, delay);
+    }
+    return { edited, stepped, finish };
+}

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-box-link.d.ts

@@ -6,8 +6,11 @@
  */
 export declare const boxLinkAppearances: readonly ["accent", "quiet"];
 export type BoxLinkAppearance = (typeof boxLinkAppearances)[number];
+/** The decorative new-tab mark after an external link's words. */
+export declare const externalLinkMarkClass = "sw-link-external-mark";
 export declare function assertBoxLink(link: unknown, as: string): void;
 /** The generated class for a Box `link` prop, or none for the canvas link. */
 export declare function boxLinkClass(link: BoxLinkAppearance | undefined): string | undefined;
 export declare function cssBoxLinkClasses(): string;
+export declare function cssExternalLinkMarkClasses(): string;
 export declare function boxLinkClassCatalog(): string[];

package/dist/css/css-box-link.js

@@ -7,6 +7,8 @@ import { typographyVariants } from '@scalewing/tokens';
  */
 export const boxLinkAppearances = ['accent', 'quiet'];
 const quietLinkClass = 'sw-link-quiet';
+/** The decorative new-tab mark after an external link's words. */
+export const externalLinkMarkClass = 'sw-link-external-mark';
 export function assertBoxLink(link, as) {
     if (link === undefined)
         return;
@@ -43,8 +45,45 @@ ${quiet}:hover,
 ${quiet}:focus-visible {
   color: inherit;
   text-decoration-line: underline;
-}`;
+}
+
+${cssExternalLinkMarkClasses()}`;
+}
+/*
+ * An external link's new-tab mark: an arrow to the inline end and up (↗),
+ * drawn with borders in the link's colour so forced colours keep it as the
+ * system link colour. Its head is the top and inline-end borders of a
+ * space-2 square; its shaft is one border on the square's diagonal. It
+ * follows the link's colour (accent, the hover text colour, a quiet link's
+ * inherited one) and is mirrored in right-to-left text. It sits a space-1
+ * after the last word with no space between them, so it never wraps alone.
+ */
+export function cssExternalLinkMarkClasses() {
+    const mark = `.${externalLinkMarkClass}`;
+    return `${mark} {
+  border-right: 2px solid currentColor;
+  border-top: 2px solid currentColor;
+  box-sizing: border-box;
+  display: inline-block;
+  height: var(--sw-space-2);
+  margin-inline-start: var(--sw-space-1);
+  position: relative;
+  vertical-align: middle;
+  width: var(--sw-space-2);
+}
+
+${mark}::after {
+  border-left: 2px solid currentColor;
+  content: '';
+  height: calc(var(--sw-space-2) * 1.25);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+${mark}:dir(rtl) { transform: scaleX(-1); }`;
 }
 export function boxLinkClassCatalog() {
-    return [quietLinkClass];
+    return [quietLinkClass, externalLinkMarkClass];
 }

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()}