@scalewing/react 1.56.0 → 1.57.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalewing/react
 
+## 1.57.0
+
+### Minor Changes
+
+- 9a42d28: `FixtureRow` `score` (opt-in, `FixtureScore`: `{ label, home, away, onChange(side, value), onSubmit(), onCancel?(), disabled?, error? }`, boxes `FixtureScoreBox`: `{ value, label, ref?, invalid? }`): two score boxes between the sides in place of `center` (now optional when `score` is given), digits only (`inputmode="numeric"`, two digits, selected on focus) in a group named by `label`, each box named by its own `label`; Enter calls `onSubmit`, Escape `onCancel`; 32 px squares on a fine pointer and 44 px on a coarse one; `error` is said politely under the row and marks the boxes invalid. A score row is never a link or a button, and works with `flag`, `select` and `action`. `FixtureRow` `detail` (opt-in): a full-width part under the row, outside its press area. `TableRow` `rule="after"` (opt-in, `TableRowRule`, `tableRowRules`): a 2 px muted rule under the row, such as a cut under the last playoff place, `CanvasText` in forced colors. New types `FixtureScore`, `FixtureScoreBox`, `FixtureScoreSide`, `TableRowRule`; new classes `sw-fixture-score`, `sw-fixture-score-box`, `sw-fixture-score-dash`, `sw-fixture-score-error`, `sw-fixture-item-below`, `sw-fixture-detail`, `sw-table-row-rule-after`.
+
 ## 1.56.0
 
 ### Minor Changes

package/README.md

@@ -776,7 +776,7 @@ The layout follows the window, with generated media queries only. From 75rem (12
 
 A header `TableCell` (`as="th"`) with `sort` (`'ascending'`, `'descending'` or `'none'`) and `onSort` is its column's sort control: its children become a button in the header's own style with a chevron (before the name in a `numeric` or end-aligned column), and the cell carries `aria-sort` only while it is the sorted column. `sort` on a data cell, or one of the two without the other, throws a `TypeError`. `Table` `layout="fixed"` (default `auto`) sizes the columns from the header row alone, so a filter that hides a row moves no column, and `verticalAlign="top"` (default `middle`) starts every cell of a tall row on its first line. `TableCell` `width` is `min` (an auto table's column takes the least room its content allows, on one line; set it on each cell of the column) or a size, `xs` to `xl` (4, 6, 8, 12 and 16 rem); in a fixed table a column without a width shares what is left, so leave one column, such as a description, unsized. The HTML `width` attribute is not accepted. Unknown values throw a `RangeError`.
 
-A ledger read across as well as down takes `Table` `columnRules` (a hairline at the inline start of every cell after a row's first, mirrored right to left) and `TableCell` `tone` (`success`, `danger`, `muted` or `accent`: the cell's text in the theme colour, as `Text color` uses it; never the only signal, so keep the sign or the words). `TableRow` `variant="sub"` (default `"default"`) sets a row under the one above, as a batch's items: its row header, a `TableCell as="th" scope="row"`, is indented a `space-6` step with a guide bar at the indent (a sub row without a row header is not indented). `TableRow` `variant="total"` is a total mid-table, such as a subtotal the rows above add up to before the table goes on: its cells at weight 600 under a 2 px rule across its top (the cells' own collapsed top border, so forced colors keep it), as a `TableFooter` total is drawn, with no fill, so accent text in it keeps the contrast it has on the table's own surface. Name it with a row header and keep it in the body, after the rows it adds up (not the body's first row under a pinned header, whose rule would sit on its own); a cell's `tone` keeps its colour, and `struck` works on it. Its cells are all at weight 600, so a quiet link or a `TableCell onPress` action in it is no longer set apart by weight: keep a total row's name plain text (a `TableFooter` row is the same). `TableRow` `struck` keeps a voided row on the record: the subtle fill and the text muted and struck through, toned cells included; it works with any variant. A line-through is not read aloud, so say why in the row, such as a `Badge` "Voided": a Badge in a line of text is not struck, but one that is itself a flex item (a direct child of `Inline`) is, so put it in the title's line. A row header in the body or footer (`th scope="row"`) reads as body text. An unknown `tone` or `variant` throws a `RangeError`.
+A ledger read across as well as down takes `Table` `columnRules` (a hairline at the inline start of every cell after a row's first, mirrored right to left) and `TableCell` `tone` (`success`, `danger`, `muted` or `accent`: the cell's text in the theme colour, as `Text color` uses it; never the only signal, so keep the sign or the words). `TableRow` `variant="sub"` (default `"default"`) sets a row under the one above, as a batch's items: its row header, a `TableCell as="th" scope="row"`, is indented a `space-6` step with a guide bar at the indent (a sub row without a row header is not indented). `TableRow` `variant="total"` is a total mid-table, such as a subtotal the rows above add up to before the table goes on: its cells at weight 600 under a 2 px rule across its top (the cells' own collapsed top border, so forced colors keep it), as a `TableFooter` total is drawn, with no fill, so accent text in it keeps the contrast it has on the table's own surface. Name it with a row header and keep it in the body, after the rows it adds up (not the body's first row under a pinned header, whose rule would sit on its own); a cell's `tone` keeps its colour, and `struck` works on it. Its cells are all at weight 600, so a quiet link or a `TableCell onPress` action in it is no longer set apart by weight: keep a total row's name plain text (a `TableFooter` row is the same). `TableRow` `struck` keeps a voided row on the record: the subtle fill and the text muted and struck through, toned cells included; it works with any variant. A line-through is not read aloud, so say why in the row, such as a `Badge` "Voided": a Badge in a line of text is not struck, but one that is itself a flex item (a direct child of `Inline`) is, so put it in the title's line. A row header in the body or footer (`th scope="row"`) reads as body text. `TableRow` `rule="after"` (opt-in, `TableRowRule`; `tableRowRules` lists the values) draws a rule under the row, such as the cut under the last playoff place: its cells' bottom border 2 px in the muted grey, stronger than the 1 px hairlines between rows (3:1 on the surface) without a colour's meaning, kept in `CanvasText` in forced colors and resolved over the next row's top by the collapsed-border model. The row's words, weight and fill are unchanged and the line is not read aloud, so say what it means in words beside the table ("The line under 4th place marks the playoff places"). It works with any variant, `struck` and `selected`; class `sw-table-row-rule-after`. An unknown `tone`, `variant` or `rule` throws a `RangeError`.
 
 `Table` `stickyHeader` pins the header: the whole `TableHeader` as one group, every row in it (the column headings and any row under them, such as a running total) with all its cells, `th` and `td`, each row under the one above, on the glass with its row and column rules. `true` (default) pins it to the top of the table's own scroll region, `false` lets it scroll away, and `'page'` pins it to the page's top as the page scrolls. With `'page'`, while the table fits its width its region stops being a scroll box (`sw-table-sticky-page`), so the header stays in view under any sticky `AppHeader` (which covers it); a table wider than its region scrolls sideways in it and pins inside it. Use it for a long table whose last row, such as a non-sticky `TableFooter` total, should scroll with the rows. An unknown value throws a `RangeError`.
 
@@ -1290,6 +1290,47 @@ const { headings, omissions } = inspectMarkdown(page.body, {
 />
 ```
 
+`FixtureRow` `score` (opt-in, `FixtureScore`) puts two score boxes between the sides in place of `center`, for typing a result: `{ label, home, away, onChange(side, value), onSubmit(), onCancel?(), disabled?, error? }`, each box a `FixtureScoreBox` `{ value, label, ref?, invalid? }`. The boxes sit in a `role="group"` named by `label` ("Score, Heron Marsh v Otter Pool"), each a text input named by its own `label` (the side's name), home first, with a hidden en dash between them; none of those words is drawn, so name them in the consumer's language. Each box is `inputmode="numeric"`, `pattern="[0-9]*"`, `maxLength` 2 and `autocomplete="off"`; typed or pasted non-digits are dropped before `onChange` is called with the side (`'home'` or `'away'`) and the box's digits, and a change that keeps the same digits is not reported. Focus selects a box's text, so a typed score replaces it. Enter in either box calls `onSubmit` (not while an IME composition is open) and Escape calls `onCancel`, which should put the boxes back, such as to the saved score (Escape is prevented then, so an enclosing `Dialog` stays open; without `onCancel` it is left alone). `disabled` shows both boxes locked, with the canvas's disabled look. `error` ("Type both scores.") is said under the row in a polite live region in caption type and the danger ink, from the home side's start; it describes both boxes (`aria-describedby`) and marks them `aria-invalid` with a danger edge (`Mark` in forced colors), and a box's `invalid` (`true` or `false`) overrides that for the box, so a filled box can stay unmarked; an empty `error` shows nothing. `ref` reaches a box's input, such as to focus the home box of the row a link opened or the next game's after a save. The boxes are squares the sm control height (32 px) on a fine pointer, so the row keeps its 44 px height, and the 44 px touch target on a coarse one; below `md` their margin is a space-2 step. A row with `score` is never a link or a button (its boxes are their own controls), and it works with `flag`, `select`, `action`, `meta`, `status` and `detail`; the Tab order is the select, the home box, the away box, anything in `detail`, then the action. On a touch screen the numeric keypad may have no Return key (iOS), so give touch users a visible action, such as a small neutral "Record score" `Button` in `action`. With neither `center` nor `score`, with both, with `centerKind` beside `score`, with `href` or `onPress` beside `score`, or with a score lacking a nonempty `label`, boxes with a string `value` and a nonempty `label`, an `onChange` or an `onSubmit` (or with an `onCancel` that is not a function or an `error` that is not a string), it throws a `RangeError`. `center` is optional when `score` is given. New types `FixtureScore`, `FixtureScoreBox`, `FixtureScoreSide`; new classes `sw-fixture-score`, `sw-fixture-score-box`, `sw-fixture-score-dash`, `sw-fixture-score-error`.
+
+`FixtureRow` `detail` (opt-in, `ReactNode`) is a full-width part under the row, such as a reason field while an official score is changed: in the row's list item after the row (and after a score's message), outside a link or button row's press area, and before the action in the Tab order (so a reason field comes before a Record button), spanning the run's columns from the home side's start (after a `select`'s box) to the action's end, with the row's inline padding and a space-2 step below. An empty slot draws nothing. New classes `sw-fixture-item-below` (an item with a score or a detail) and `sw-fixture-detail`.
+
+```tsx
+// tally, missing, change, record, reset, reason, setReason and homeBox are your own.
+<FixtureRow
+  home={{ name: 'Heron Marsh' }}
+  away={{ name: 'Otter Pool' }}
+  score={{
+    label: 'Score, Heron Marsh v Otter Pool',
+    home: { value: tally.home, label: 'Heron Marsh', ref: homeBox },
+    away: { value: tally.away, label: 'Otter Pool' },
+    onChange: change,
+    onSubmit: record,
+    onCancel: reset,
+    error: missing ? 'Type both scores.' : undefined,
+  }}
+  meta="Changing the official 0–0"
+  action={
+    <Button
+      aria-label="Record Heron Marsh vs Otter Pool"
+      onPress={record}
+      size="sm"
+      variant="neutral"
+    >
+      Record score
+    </Button>
+  }
+  detail={
+    <Field label="Reason" labelVisuallyHidden>
+      <input
+        onChange={(event) => setReason(event.currentTarget.value)}
+        placeholder="Why?"
+        value={reason}
+      />
+    </Field>
+  }
+/>
+```
+
 `ScheduleGrid` is items in a grid of rows (such as times) by columns (such as places), moved between cells. Props: `label` (the grid's name), `columns` and `rows` (`{ id, label }[]`, in order), `rowsLabel` (opt-in, the header over the rows' labels, "Time"; without it that corner is blank and `aria-hidden`), `items` (`{ id, columnId, rowId, label, content }[]`: `label` is the item's name in words, `content` what its card draws; hold no controls in it), `disabledCells` (opt-in, `{ columnId, rowId, reason }[]`: never a target, drawn on the quiet fill with the reason), `canDrop` (opt-in, `(itemId, target) => true | { reason }`, where `target` is `{ kind: 'move', columnId, rowId }` for an empty cell or `{ kind: 'swap', itemId, columnId, rowId }` for another item; omitted, every target is allowed), `onMove(itemId, { columnId, rowId })`, `onSwap(itemId, otherItemId)`, `disabled` (opt-in: nothing can be picked up; the cells still take focus) and `labels` (`Partial<ScheduleGridLabels>`, an `undefined` entry keeping the default; `defaultScheduleGridLabels` holds the English words: `open`, `movingFrom`, `releaseToMove`, `releaseToSwap`, `instructions`, and the announcements `pickedUp(item, mode)`, `moved(item, row, column)`, `swapped(item, other)`, `cancelled(item)`). The grid holds no rules: `canDrop` decides every target and is asked for every cell while an item is carried (keep it cheap), and the grid moves nothing itself: `onMove` and `onSwap` report, and you update `items`. It is a `table` with `role="grid"` named by `label` and described by `labels.instructions` (visually hidden), its column and row headers `th`, and each cell a `gridcell` named by what it holds (the item's `label`, `labels.open` or a disabled cell's reason) and, while an item is carried, what it would do (", Moving from here", ", Release to move here", ", Release to swap", or ", " and the blocked reason); the drawing inside a cell (the card, its words and captions) is `aria-hidden`, so the name is read once. Cells with the same contents share a name, as the headers tell them apart for assistive technology: in a test, find one by its row (`within(getByRole('row', { name: /^10:30/ })).getAllByRole('gridcell')[1]`). The grid is one Tab stop with roving focus: the arrows move by a cell (the horizontal ones swapped in right-to-left), Home and End go to the row's ends and with Control (or ⌘) to the grid's first and last cells. On an item, M or Space picks it up; while carried, the arrows choose the target (the focused cell shows the accent ring and its caption), Enter or Space drops it there and Escape cancels and puts focus back on the item. A mouse drags (a press that moves 4 px; a pen too, where the browser does not pan the page under it): the cell under the pointer is the one hover target, and the release drops it; outside the grid it cancels. Touch never drags, so a finger still scrolls the page: a tap on an item picks it up and a tap on a cell drops it; a tap on its own cell, or a press anywhere outside the grid, cancels. A mouse may use the same press-then-press path (WCAG 2.5.7). Dropping on an empty allowed cell calls `onMove`, on another allowed item `onSwap`, on its own cell cancels; a blocked or disabled target is refused with its reason announced (a key or tap carry keeps the item to try elsewhere, a drag ends). Each step (picked up, moved, swapped, cancelled, refused) is said in a polite `role="status"` live region inside the grid, a repeat said again. `pickedUp` is given how the item was picked up as its second argument (`ScheduleGridCarryMode`: `'keyboard'`, `'tap'` for a press then a press, or `'drag'`), and the default words fit it ("Choose a cell with the arrow keys…" only for keys; "Press a cell to drop it there, or press outside the grid to cancel." for a tap; "Release it on a cell to drop it there." for a drag); a one-argument function still works. A carry by keys or taps is also cancelled (and announced) when focus leaves the grid, such as a Tab past it, but not when the window itself loses focus; a press on a row or column header keeps focus where it was, so it never cancels a carry. A drag's release always ends it, even one that arrives before the pick-up has rendered: it drops on the cell under it, or cancels outside the grid. While an item is carried its own cell takes a dashed edge and "Moving from here", every cell `canDrop` blocks shows its reason in the warning ink with a warning edge (an open one on the warning tint), the target has the accent ring (an open one on the accent tint), and disabled cells keep their grey look; only open cells are filled, so an item's card stays on the surface its words were made for. Columns share the width equally, each at least the `md` table column (8rem), the rows' labels the `sm` one; when they do not fit, the grid scrolls sideways inside its own box, never the page. Cells are at least 44 px plus a space-3 high. Forced colors keep every edge (a blocked one dotted) and draw rings in Highlight. Classes `sw-schedule-grid*` (see the catalog). A blank `label`, `rowsLabel` or word in `labels`, a message in `labels` that is not a function, no columns or rows, a blank or repeated id or label, an item or disabled cell outside the grid, two items in one cell, a cell disabled twice, a disabled cell that holds an item or has no reason, or a `canDrop` reason that is blank throws a `RangeError`.
 
 ```tsx

package/dist/components/FixtureRow.d.ts

@@ -1,5 +1,5 @@
 import { type FixtureRowProps } from './fixture/types.js';
-export type { FixtureFlag, FixtureRowProps, FixtureSelect, FixtureSide, FixtureStatus, } from './fixture/types.js';
+export type { FixtureFlag, FixtureRowProps, FixtureScore, FixtureScoreBox, FixtureScoreSide, FixtureSelect, FixtureSide, FixtureStatus, } from './fixture/types.js';
 /**
  * One fixture in a FixtureGroup: the home side ending at the centre, the
  * kickoff time or score in the middle, the away side starting from it, then
@@ -7,6 +7,8 @@ export type { FixtureFlag, FixtureRowProps, FixtureSelect, FixtureSide, FixtureS
  * `href` or `onPress` the whole row is a link or a button with a chevron.
  * `flag` marks an issue at the row's start; `select` is a checkbox before
  * the row and `action` a control after it, both outside its press area.
- * Invalid words or props throw a `RangeError`.
+ * `score` puts two score boxes in the middle in place of `center`, and
+ * `detail` is a part under the row. Invalid words or props throw a
+ * `RangeError`.
  */
 export declare function FixtureRow(props: FixtureRowProps): import("react").JSX.Element;

package/dist/components/FixtureRow.js

@@ -1,30 +1,16 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
 import { cx } from '../class-names.js';
 import { hideClass } from '../css/breakpoints.js';
 import { tabStop } from '../tab-stop.js';
 import { Badge } from './Badge.js';
-import { Checkbox } from './Checkbox.js';
 import { useFixtureList } from './fixture/fixture-list-context.js';
+import { FixtureScoreBoxes, FixtureScoreError, } from './fixture/FixtureScoreBoxes.js';
+import { Flag, Select, Side } from './fixture/row-parts.js';
 import { assertFixtureRow } from './fixture/validate.js';
 import { plainPress } from './link-press.js';
 import { hasSlot } from './slot.js';
-/**
- * The issue marker at the row's start: a drawn mark (its tooltip the
- * label) and the label in hidden words, read first in the row's name.
- */
-function Flag({ flag }) {
-    return (_jsxs("span", { className: `sw-fixture-flag sw-fixture-flag-${flag.tone ?? 'warning'}`, children: [_jsx("span", { "aria-hidden": "true", className: "sw-fixture-flag-mark", title: flag.label }), _jsx("span", { className: "sw-sr-only", children: flag.label })] }));
-}
-/** The leading checkbox: a Checkbox with its label visually hidden. */
-function Select({ select }) {
-    return (_jsx("div", { className: "sw-fixture-select", children: _jsx(Checkbox, { checked: select.checked, disabled: select.disabled ?? false, label: select.label, labelVisuallyHidden: true, onCheckedChange: select.onCheckedChange }) }));
-}
-/** One side: its name, and its mark on the centre's side (hidden). */
-function Side({ side, place }) {
-    const mark = hasSlot(side.mark) ? (_jsx("span", { "aria-hidden": "true", className: "sw-fixture-mark", children: side.mark })) : null;
-    return (_jsxs("span", { className: `sw-fixture-team sw-fixture-team-${place}`, children: [place === 'away' ? mark : null, _jsx("span", { className: "sw-fixture-name", children: side.name }), place === 'home' ? mark : null] }));
-}
 /**
  * One fixture in a FixtureGroup: the home side ending at the centre, the
  * kickoff time or score in the middle, the away side starting from it, then
@@ -32,22 +18,26 @@ function Side({ side, place }) {
  * `href` or `onPress` the whole row is a link or a button with a chevron.
  * `flag` marks an issue at the row's start; `select` is a checkbox before
  * the row and `action` a control after it, both outside its press area.
- * Invalid words or props throw a `RangeError`.
+ * `score` puts two score boxes in the middle in place of `center`, and
+ * `detail` is a part under the row. Invalid words or props throw a
+ * `RangeError`.
  */
 export function FixtureRow(props) {
     useFixtureList();
     assertFixtureRow(props);
-    const { action, away, center, centerKind = 'time', flag, home, href, meta, metaHideBelow, onPress, select, status, 'aria-label': ariaLabel, } = props;
+    const errorId = useId();
+    const { action, away, center, centerKind = 'time', detail, flag, home, href, meta, metaHideBelow, onPress, score, select, status, 'aria-label': ariaLabel, } = props;
     const hasMeta = hasSlot(meta);
     const pressable = href !== undefined || onPress !== undefined;
     const hasAction = hasSlot(action);
+    const hasDetail = hasSlot(detail);
     // Below md the end is a second line; with nothing on it (no status, and
     // meta absent or hidden below md) the flag stays on the first line.
     const endShownNarrow = status !== undefined || (hasMeta && metaHideBelow === undefined);
     const rowClass = cx('sw-fixture-row', pressable && 'sw-fixture-row-pressable', flag && 'sw-fixture-row-flagged', flag && !endShownNarrow && 'sw-fixture-row-flag-inline');
     const name = ariaLabel !== undefined && flag ? `${flag.label}, ${ariaLabel}` : ariaLabel;
     // Spaces as their own text nodes keep the parts apart in the name.
-    const parts = (_jsxs(_Fragment, { children: [flag ? (_jsxs(_Fragment, { children: [_jsx(Flag, { flag: flag }), ' '] })) : null, _jsx(Side, { place: "home", side: home }), ' ', _jsx("span", { className: `sw-fixture-center sw-fixture-center-${centerKind}`, children: center }), ' ', _jsx(Side, { place: "away", side: away }), hasMeta || status ? (_jsxs(_Fragment, { children: [' ', _jsxs("span", { className: "sw-fixture-end", children: [hasMeta ? (_jsx("span", { className: cx('sw-fixture-meta', metaHideBelow && hideClass('below', metaHideBelow)), children: meta })) : null, hasMeta && status ? ' ' : null, status ? (_jsx(Badge, { size: "sm", tone: status.tone, children: status.label })) : null] })] })) : null, pressable ? (_jsx("span", { "aria-hidden": "true", className: "sw-fixture-chevron" })) : null] }));
+    const parts = (_jsxs(_Fragment, { children: [flag ? (_jsxs(_Fragment, { children: [_jsx(Flag, { flag: flag }), ' '] })) : null, _jsx(Side, { place: "home", side: home }), ' ', score ? (_jsx(FixtureScoreBoxes, { errorId: errorId, score: score })) : (_jsx("span", { className: `sw-fixture-center sw-fixture-center-${centerKind}`, children: center })), ' ', _jsx(Side, { place: "away", side: away }), hasMeta || status ? (_jsxs(_Fragment, { children: [' ', _jsxs("span", { className: "sw-fixture-end", children: [hasMeta ? (_jsx("span", { className: cx('sw-fixture-meta', metaHideBelow && hideClass('below', metaHideBelow)), children: meta })) : null, hasMeta && status ? ' ' : null, status ? (_jsx(Badge, { size: "sm", tone: status.tone, children: status.label })) : null] })] })) : null, pressable ? (_jsx("span", { "aria-hidden": "true", className: "sw-fixture-chevron" })) : null] }));
     let row;
     if (href !== undefined)
         row = (_jsx("a", { "aria-label": name, className: rowClass, href: href, onClick: onPress
@@ -62,5 +52,5 @@ export function FixtureRow(props) {
         row = (_jsx("button", { "aria-label": name, className: rowClass, onClick: onPress, tabIndex: tabStop, type: "button", children: parts }));
     else
         row = _jsx("div", { className: rowClass, children: parts });
-    return (_jsxs("li", { className: cx('sw-fixture-item', select && 'sw-fixture-item-select', hasAction && 'sw-fixture-item-action'), children: [select ? _jsx(Select, { select: select }) : null, row, hasAction ? _jsx("span", { className: "sw-fixture-action", children: action }) : null] }));
+    return (_jsxs("li", { className: cx('sw-fixture-item', select && 'sw-fixture-item-select', hasAction && 'sw-fixture-item-action', (score || hasDetail) && 'sw-fixture-item-below'), children: [select ? _jsx(Select, { select: select }) : null, row, score ? _jsx(FixtureScoreError, { error: score.error, id: errorId }) : null, hasDetail ? _jsx("div", { className: "sw-fixture-detail", children: detail }) : null, hasAction ? _jsx("span", { className: "sw-fixture-action", children: action }) : null] }));
 }

package/dist/components/Table.d.ts

@@ -2,10 +2,10 @@ import { type HTMLAttributes } from 'react';
 import { type TableLayout, type TableStickyHeader, type TableVerticalAlign } from './table/table-layout.js';
 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 { TableRow, type TableRowProps, type TableRowRule, 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 { tableCellTones, tableRowRules, tableRowVariants, } from '../css/css-table-ledger.js';
 export type { TableLayout, TableMaxHeight, TableStickyHeader, TableVerticalAlign, };
 export type TableDensity = 'comfortable' | 'compact';
 export type TableProps = HTMLAttributes<HTMLTableElement> & {

package/dist/components/Table.js

@@ -7,7 +7,7 @@ import { assertTableMaxHeight, tableMaxHeightStyle, } from './table/table-max-he
 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';
+export { tableCellTones, tableRowRules, tableRowVariants, } from '../css/css-table-ledger.js';
 /**
  * A wide table scrolls inside its own `ScrollRegion`, named after the
  * table; a bounded one (`maxHeight`) scrolls its rows in it too.

package/dist/components/fixture/FixtureScoreBoxes.d.ts

@@ -0,0 +1,19 @@
+import { type FixtureScore } from './types.js';
+/**
+ * The row's middle when it takes a score: the home box, an en dash and
+ * the away box, in a group named by `label`. Each box is a text input
+ * named by its own `label`, digits only (non-digits are dropped before
+ * `onChange`), its text selected on focus so a typed score replaces it.
+ */
+export declare function FixtureScoreBoxes({ errorId, score, }: {
+    errorId: string;
+    score: FixtureScore;
+}): import("react").JSX.Element;
+/**
+ * The score's message under the row: a polite live region, present (and
+ * empty, taking no room) while there is no error, so a new one is said.
+ */
+export declare function FixtureScoreError({ error, id, }: {
+    error: string | undefined;
+    id: string;
+}): import("react").JSX.Element;

package/dist/components/fixture/FixtureScoreBoxes.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { scoreBoxMaxDigits, scoreDigits } from './score-digits.js';
+/** Whether a box is marked: its own `invalid`, else any error. */
+function boxInvalid(invalid, hasError) {
+    return invalid ?? hasError;
+}
+/**
+ * Enter records and Escape puts the boxes back. A key that ends an IME
+ * composition is the composition's, not the row's.
+ */
+function scoreKeyDown(score) {
+    return (event) => {
+        if (event.nativeEvent.isComposing)
+            return;
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            score.onSubmit();
+        }
+        else if (event.key === 'Escape' && score.onCancel) {
+            // Kept from an enclosing dialog, whose Escape would close it.
+            event.preventDefault();
+            score.onCancel();
+        }
+    };
+}
+function ScoreBox({ describedBy, disabled, inputRef, invalid, label, onDigits, onKeyDown, value, }) {
+    return (_jsx("input", { ref: inputRef, "aria-describedby": describedBy, "aria-invalid": invalid || undefined, "aria-label": label, autoComplete: "off", className: "sw-fixture-score-box", disabled: disabled, inputMode: "numeric", maxLength: scoreBoxMaxDigits, onChange: (event) => {
+            const digits = scoreDigits(event.currentTarget.value);
+            if (digits !== value)
+                onDigits(digits);
+        }, onFocus: (event) => event.currentTarget.select(), onKeyDown: onKeyDown, pattern: "[0-9]*", type: "text", value: value }));
+}
+/**
+ * The row's middle when it takes a score: the home box, an en dash and
+ * the away box, in a group named by `label`. Each box is a text input
+ * named by its own `label`, digits only (non-digits are dropped before
+ * `onChange`), its text selected on focus so a typed score replaces it.
+ */
+export function FixtureScoreBoxes({ errorId, score, }) {
+    const hasError = Boolean(score.error);
+    const disabled = score.disabled ?? false;
+    const onKeyDown = scoreKeyDown(score);
+    const box = (side) => {
+        const { invalid, label, ref, value } = score[side];
+        return (_jsx(ScoreBox, { describedBy: hasError ? errorId : undefined, disabled: disabled, inputRef: ref, invalid: boxInvalid(invalid, hasError), label: label, onDigits: (digits) => score.onChange(side, digits), onKeyDown: onKeyDown, value: value }));
+    };
+    return (_jsxs("span", { "aria-label": score.label, className: cx('sw-fixture-center', 'sw-fixture-score'), role: "group", children: [box('home'), _jsx("span", { "aria-hidden": "true", className: "sw-fixture-score-dash", children: "\u2013" }), box('away')] }));
+}
+/**
+ * The score's message under the row: a polite live region, present (and
+ * empty, taking no room) while there is no error, so a new one is said.
+ */
+export function FixtureScoreError({ error, id, }) {
+    return (_jsx("span", { "aria-live": "polite", className: "sw-fixture-score-error", id: id, children: error || null }));
+}

package/dist/components/fixture/row-parts.d.ts

@@ -0,0 +1,17 @@
+import { type FixtureFlag, type FixtureSelect, type FixtureSide } from './types.js';
+/**
+ * The issue marker at the row's start: a drawn mark (its tooltip the
+ * label) and the label in hidden words, read first in the row's name.
+ */
+export declare function Flag({ flag }: {
+    flag: FixtureFlag;
+}): import("react").JSX.Element;
+/** The leading checkbox: a Checkbox with its label visually hidden. */
+export declare function Select({ select }: {
+    select: FixtureSelect;
+}): import("react").JSX.Element;
+/** One side: its name, and its mark on the centre's side (hidden). */
+export declare function Side({ side, place, }: {
+    side: FixtureSide;
+    place: 'home' | 'away';
+}): import("react").JSX.Element;

package/dist/components/fixture/row-parts.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { hasSlot } from '../slot.js';
+import { Checkbox } from '../Checkbox.js';
+/**
+ * The issue marker at the row's start: a drawn mark (its tooltip the
+ * label) and the label in hidden words, read first in the row's name.
+ */
+export function Flag({ flag }) {
+    return (_jsxs("span", { className: `sw-fixture-flag sw-fixture-flag-${flag.tone ?? 'warning'}`, children: [_jsx("span", { "aria-hidden": "true", className: "sw-fixture-flag-mark", title: flag.label }), _jsx("span", { className: "sw-sr-only", children: flag.label })] }));
+}
+/** The leading checkbox: a Checkbox with its label visually hidden. */
+export function Select({ select }) {
+    return (_jsx("div", { className: "sw-fixture-select", children: _jsx(Checkbox, { checked: select.checked, disabled: select.disabled ?? false, label: select.label, labelVisuallyHidden: true, onCheckedChange: select.onCheckedChange }) }));
+}
+/** One side: its name, and its mark on the centre's side (hidden). */
+export function Side({ side, place, }) {
+    const mark = hasSlot(side.mark) ? (_jsx("span", { "aria-hidden": "true", className: "sw-fixture-mark", children: side.mark })) : null;
+    return (_jsxs("span", { className: `sw-fixture-team sw-fixture-team-${place}`, children: [place === 'away' ? mark : null, _jsx("span", { className: "sw-fixture-name", children: side.name }), place === 'home' ? mark : null] }));
+}

package/dist/components/fixture/score-digits.d.ts

@@ -0,0 +1,7 @@
+/** The most digits a score box holds. */
+export declare const scoreBoxMaxDigits = 2;
+/**
+ * What a score box keeps of typed or pasted text: its digits only, the
+ * first two ("1a2" → "12", "３" stays out as it is not an ASCII digit).
+ */
+export declare function scoreDigits(typed: string): string;

package/dist/components/fixture/score-digits.js

@@ -0,0 +1,9 @@
+/** The most digits a score box holds. */
+export const scoreBoxMaxDigits = 2;
+/**
+ * What a score box keeps of typed or pasted text: its digits only, the
+ * first two ("1a2" → "12", "３" stays out as it is not an ASCII digit).
+ */
+export function scoreDigits(typed) {
+    return typed.replace(/[^0-9]/g, '').slice(0, scoreBoxMaxDigits);
+}

package/dist/components/fixture/types.d.ts

@@ -1,4 +1,4 @@
-import { type MouseEvent, type ReactNode } from 'react';
+import { type MouseEvent, type ReactNode, type Ref } from 'react';
 import { type VisibilityBreakpoint } from '../../css/breakpoints.js';
 import { type BadgeTone } from '../../css/css-data.js';
 import { type FixtureCenterKind, type FixtureFlagTone } from '../../css/css-fixture.js';
@@ -35,14 +35,65 @@ export type FixtureSelect = {
     onCheckedChange: (checked: boolean) => void;
     disabled?: boolean;
 };
+/** Which side's score box: the home side's (first) or the away side's. */
+export type FixtureScoreSide = 'home' | 'away';
+/** One side's score box. */
+export type FixtureScoreBox = {
+    /** The box's digits, as typed ("" while empty); at most two. */
+    value: string;
+    /** Names the box, such as the side's name ("Heron Marsh"); not drawn. */
+    label: string;
+    /** The box's input, such as to focus it after a save. */
+    ref?: Ref<HTMLInputElement>;
+    /**
+     * Marks this box invalid. Without it, an `error` marks both boxes;
+     * `false` keeps this one unmarked, such as the box that is filled when
+     * the other is empty.
+     */
+    invalid?: boolean;
+};
+/**
+ * Two score boxes in the row's middle, typed by keyboard: the home side's
+ * and the away side's, digits only, in a group named by `label`.
+ */
+export type FixtureScore = {
+    /** Names the boxes' group ("Score, Heron Marsh v Otter Pool"); not drawn. */
+    label: string;
+    home: FixtureScoreBox;
+    away: FixtureScoreBox;
+    /** A box's digits changed: non-digits are dropped before this is called. */
+    onChange: (side: FixtureScoreSide, value: string) => void;
+    /** Enter in either box: record the score. */
+    onSubmit: () => void;
+    /** Escape in either box: put the boxes back, such as to the saved score. */
+    onCancel?: () => void;
+    /** Both boxes shown and locked, such as a game not played yet. */
+    disabled?: boolean;
+    /**
+     * What is wrong ("Type both scores."): said politely under the row in the
+     * danger ink, describing both boxes, which are marked invalid (see
+     * `FixtureScoreBox.invalid`). Empty or absent, nothing is shown.
+     */
+    error?: string;
+};
 export type FixtureRowProps = {
     home: FixtureSide;
     away: FixtureSide;
-    /** What sits between the sides: a kickoff time ("8:00") or a score ("2–1"). */
-    center: string;
+    /**
+     * What sits between the sides: a kickoff time ("8:00") or a score
+     * ("2–1"). Required unless `score` takes its place.
+     */
+    center?: string;
+    /**
+     * Score boxes between the sides in place of `center`, for typing a
+     * score: on a row that is not a link or a button (the boxes are their
+     * own controls). Works with `flag`, `select`, `action` and `detail`.
+     */
+    score?: FixtureScore;
     /**
      * `time` (default) draws the centre as a small grey chip; `score` as
-     * bold figures. Both are tabular, so the rows' centres line up.
+     * bold figures. Both are tabular, so the rows' centres line up. It
+     * styles `center`, so leave it out with `score`.
      */
     centerKind?: FixtureCenterKind;
     /** Details at the row's end, such as the field; under the sides below `md`. */
@@ -64,6 +115,13 @@ export type FixtureRowProps = {
      * `action`, `href` and `onPress`.
      */
     select?: FixtureSelect;
+    /**
+     * A full-width part under the row, such as a reason field while a score
+     * is changed: in the row's list item, outside its link or button, lined
+     * up with the home side's start (after `select`'s box) and reaching the
+     * action's end.
+     */
+    detail?: ReactNode;
     /** Makes the whole row a link to this address. */
     href?: string;
     /**

package/dist/components/fixture/validate-score.d.ts

@@ -0,0 +1,10 @@
+import { type FixtureRowProps } from './types.js';
+/**
+ * Fails closed on a middle the row cannot draw: neither a `center` nor a
+ * `score`, or both; a `centerKind` with a `score` (it styles `center`); a
+ * score on a link or button row (its boxes would sit inside the press
+ * target); a score without a group label, two boxes with string values
+ * and labels, an `onChange` and an `onSubmit`, or with an `onCancel` or
+ * `error` of the wrong type.
+ */
+export declare function assertFixtureMiddle({ center, centerKind, href, onPress, score, }: FixtureRowProps): void;

package/dist/components/fixture/validate-score.js

@@ -0,0 +1,39 @@
+function isBlank(words) {
+    return typeof words !== 'string' || !words.trim();
+}
+function isBox(box) {
+    return (box !== undefined &&
+        typeof box.value === 'string' &&
+        !isBlank(box.label) &&
+        (box.invalid === undefined || typeof box.invalid === 'boolean'));
+}
+/**
+ * Fails closed on a middle the row cannot draw: neither a `center` nor a
+ * `score`, or both; a `centerKind` with a `score` (it styles `center`); a
+ * score on a link or button row (its boxes would sit inside the press
+ * target); a score without a group label, two boxes with string values
+ * and labels, an `onChange` and an `onSubmit`, or with an `onCancel` or
+ * `error` of the wrong type.
+ */
+export function assertFixtureMiddle({ center, centerKind, href, onPress, score, }) {
+    const name = 'FixtureRow';
+    if (score === undefined) {
+        if (isBlank(center))
+            throw new RangeError(`${name} center must be nonempty`);
+        return;
+    }
+    if (center !== undefined)
+        throw new RangeError(`${name} takes a center or a score, not both`);
+    if (centerKind !== undefined)
+        throw new RangeError(`${name} centerKind styles center: leave it out with score`);
+    if (href !== undefined || onPress !== undefined)
+        throw new RangeError(`${name} score boxes are their own controls: leave out href and onPress`);
+    if (isBlank(score.label) ||
+        !isBox(score.home) ||
+        !isBox(score.away) ||
+        typeof score.onChange !== 'function' ||
+        typeof score.onSubmit !== 'function' ||
+        (score.onCancel !== undefined && typeof score.onCancel !== 'function') ||
+        (score.error !== undefined && typeof score.error !== 'string'))
+        throw new RangeError(`${name} score needs a label, home and away boxes (value and label), onChange and onSubmit`);
+}

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

@@ -1,10 +1,10 @@
 import { type FixtureRowProps } from './types.js';
 /**
  * Fails closed on a row it cannot name or draw: a side without a name, a
- * blank centre, an unknown centre kind or breakpoint, a status with blank
- * words or an unknown tone, a flag with blank words or an unknown tone, a
- * blank address or `aria-label`, a `select` without a label, a boolean
- * `checked` or an `onCheckedChange`, or an
- * `aria-label` on a row that is neither a link nor a button.
+ * middle `assertFixtureMiddle` refuses, an unknown centre kind or
+ * breakpoint, a status with blank words or an unknown tone, a flag with
+ * blank words or an unknown tone, a blank address or `aria-label`, a
+ * `select` without a label, a boolean `checked` or an `onCheckedChange`,
+ * or an `aria-label` on a row that is neither a link nor a button.
  */
-export declare function assertFixtureRow({ away, center, centerKind, flag, home, href, metaHideBelow, onPress, select, status, 'aria-label': ariaLabel, }: FixtureRowProps): void;
+export declare function assertFixtureRow(props: FixtureRowProps): void;

package/dist/components/fixture/validate.js

@@ -2,23 +2,27 @@ import { visibilityBreakpoints } from '../../css/breakpoints.js';
 import { badgeTones } from '../../css/css-data.js';
 import { fixtureCenterKinds, fixtureFlagTones } from '../../css/css-fixture.js';
 import { isOneOf } from '../../is-one-of.js';
+import { assertFixtureMiddle } from './validate-score.js';
 function isBlank(words) {
     return typeof words !== 'string' || !words.trim();
 }
 /**
  * Fails closed on a row it cannot name or draw: a side without a name, a
- * blank centre, an unknown centre kind or breakpoint, a status with blank
- * words or an unknown tone, a flag with blank words or an unknown tone, a
- * blank address or `aria-label`, a `select` without a label, a boolean
- * `checked` or an `onCheckedChange`, or an
- * `aria-label` on a row that is neither a link nor a button.
+ * middle `assertFixtureMiddle` refuses, an unknown centre kind or
+ * breakpoint, a status with blank words or an unknown tone, a flag with
+ * blank words or an unknown tone, a blank address or `aria-label`, a
+ * `select` without a label, a boolean `checked` or an `onCheckedChange`,
+ * or an `aria-label` on a row that is neither a link nor a button.
  */
-export function assertFixtureRow({ away, center, centerKind, flag, home, href, metaHideBelow, onPress, select, status, 'aria-label': ariaLabel, }) {
+export function assertFixtureRow(props) {
+    assertFixtureParts(props);
+    assertFixtureMiddle(props);
+}
+/** Everything but the middle: the sides, status, flag, select and names. */
+function assertFixtureParts({ away, centerKind, flag, home, href, metaHideBelow, onPress, select, status, 'aria-label': ariaLabel, }) {
     const name = 'FixtureRow';
     if (isBlank(home?.name) || isBlank(away?.name))
         throw new RangeError(`${name} home and away need nonempty names`);
-    if (isBlank(center))
-        throw new RangeError(`${name} center must be nonempty`);
     if (centerKind !== undefined && !isOneOf(fixtureCenterKinds, centerKind))
         throw new RangeError(`${name} centerKind must be one of ${fixtureCenterKinds.join(', ')}`);
     if (metaHideBelow !== undefined &&

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

@@ -1,6 +1,6 @@
 import { type HTMLAttributes } from 'react';
-import { type TableRowVariant } from '../../css/css-table-ledger.js';
-export type { TableRowVariant };
+import { type TableRowRule, type TableRowVariant } from '../../css/css-table-ledger.js';
+export type { TableRowRule, TableRowVariant };
 export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
     selected?: boolean;
     /**
@@ -21,6 +21,14 @@ export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
      * flex item, a direct child of `Inline`, is). Works with either variant.
      */
     struck?: boolean;
+    /**
+     * `after` draws a rule under the row, 2 px in the muted grey across
+     * every cell, such as the cut under the last playoff place. It is not
+     * colour-coded and is not read aloud: say what it means in words beside
+     * the table ("The line under 4th place marks the playoff places").
+     * Works with any variant.
+     */
+    rule?: TableRowRule;
     /**
      * Makes the whole row a press target for its one action, such as a
      * search result that is picked: the row's first link or button (a
@@ -57,6 +65,14 @@ export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAtt
      * flex item, a direct child of `Inline`, is). Works with either variant.
      */
     struck?: boolean;
+    /**
+     * `after` draws a rule under the row, 2 px in the muted grey across
+     * every cell, such as the cut under the last playoff place. It is not
+     * colour-coded and is not read aloud: say what it means in words beside
+     * the table ("The line under 4th place marks the playoff places").
+     * Works with any variant.
+     */
+    rule?: TableRowRule;
     /**
      * Makes the whole row a press target for its one action, such as a
      * search result that is picked: the row's first link or button (a

package/dist/components/table/TableRow.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, } from 'react';
 import { cx } from '../../class-names.js';
-import { assertTableRowVariant, } from '../../css/css-table-ledger.js';
+import { assertTableRowRule, assertTableRowVariant, } from '../../css/css-table-ledger.js';
 import { rowPressAction } from './row-press.js';
-export const TableRow = forwardRef(function TableRow({ className, onClick, pressable = false, selected = false, struck = false, variant = 'default', ...rest }, ref) {
+export const TableRow = forwardRef(function TableRow({ className, onClick, pressable = false, rule, selected = false, struck = false, variant = 'default', ...rest }, ref) {
     assertTableRowVariant(variant);
+    assertTableRowRule(rule);
     // The click the row hands its action bubbles back to the row; it is
     // the action's, so neither the row nor a consumer onClick takes it.
     const forwarding = useRef(false);
@@ -25,5 +26,5 @@ export const TableRow = forwardRef(function TableRow({ className, onClick, press
             forwarding.current = false;
         }
     };
-    return (_jsx("tr", { ref: ref, "aria-selected": selected || undefined, className: cx(selected && 'sw-table-row-selected', variant === 'sub' && 'sw-table-row-sub', variant === 'total' && 'sw-table-row-total', struck && 'sw-table-row-struck', pressable && 'sw-table-row-press', className), onClick: pressable || onClick ? press : undefined, ...rest }));
+    return (_jsx("tr", { ref: ref, "aria-selected": selected || undefined, className: cx(selected && 'sw-table-row-selected', variant === 'sub' && 'sw-table-row-sub', variant === 'total' && 'sw-table-row-total', struck && 'sw-table-row-struck', rule === 'after' && 'sw-table-row-rule-after', pressable && 'sw-table-row-press', className), onClick: pressable || onClick ? press : undefined, ...rest }));
 });

package/dist/css/css-fixture-detail.d.ts

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

package/dist/css/css-fixture-detail.js

@@ -0,0 +1,44 @@
+/*
+ * Parts under the row (a score's message, then `detail`) sit in the
+ * item's next grid rows, spanning the run's columns from the home side's
+ * start (after a select's box) to the action's end, outside the row's
+ * press area. Their inline padding is the row's, so they line up with
+ * the home side's start; `detail` keeps the row's padding below it.
+ */
+function detailRules() {
+    return `.sw-fixture-item-below > .sw-fixture-row {
+  grid-row: 1;
+}
+
+.sw-fixture-detail {
+  grid-column: 2 / -1;
+  grid-row: 3;
+  min-width: 0;
+  padding: 0 var(--sw-space-2) var(--sw-space-2);
+}`;
+}
+/*
+ * Without subgrid each item is a block (or a flex row with a select or an
+ * action): the parts under the row wrap onto lines of their own.
+ */
+function detailFallbackRules() {
+    return `@supports not (grid-template-columns: subgrid) {
+  .sw-fixture-item-below {
+    flex-wrap: wrap;
+  }
+
+  .sw-fixture-item-below > :is(.sw-fixture-score-error, .sw-fixture-detail) {
+    flex: 1 0 100%;
+    order: 1;
+  }
+}`;
+}
+/* The parts under a FixtureRow (see components/FixtureRow.tsx); after the row rules. */
+export function cssFixtureDetailClasses() {
+    return `${detailRules()}
+
+${detailFallbackRules()}`;
+}
+export function fixtureDetailClassCatalog() {
+    return ['sw-fixture-item-below', 'sw-fixture-detail'];
+}

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

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

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

@@ -0,0 +1,50 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+/*
+ * The run: one grid whose columns are the select, the home side, the
+ * centre, the away side, the end (details and status), the chevron and the
+ * action. Each item is a subgrid of it, and its row a subgrid of every
+ * column but the select's and the action's, so every row's centre, end and
+ * action line up down the run. The space between the columns is the
+ * centre's, the end's, the chevron's, the select's and the action's own
+ * margin, so a run with none of them keeps no gap.
+ */
+export function cssFixtureListRules() {
+    return `.sw-fixture-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.sw-fixture-group-title {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-weight: 600;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  padding-block: var(--sw-space-2) var(--sw-space-1);
+}
+
+.sw-fixture-list {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-fixture-item,
+.sw-fixture-row {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+}
+
+.sw-fixture-row {
+  grid-column: 2 / -2;
+}
+
+.sw-fixture-item {
+  border-top: 1px solid var(--sw-color-border);
+}`;
+}

package/dist/css/css-fixture-score.d.ts

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

package/dist/css/css-fixture-score.js

@@ -0,0 +1,97 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const body = typographyVariants.body;
+const caption = typographyVariants.caption;
+const belowMd = breakpointQuery('below', 'md');
+/*
+ * A box is a text input, so the canvas already draws it as a control
+ * (`[data-theme] :is(input[type='text'], …)`: the surface, the hairline,
+ * the focus ring and the disabled look). `input.sw-fixture-score-box`
+ * matches that rule's specificity and comes later in the sheet, so the
+ * box's own size and figures win. It is a square the sm control height
+ * (32 px) on a fine pointer, so the row keeps its 44 px height, and the
+ * 44 px touch target on a coarse one; two tabular digits at weight 700
+ * fit it centred.
+ */
+const box = '[data-theme] input.sw-fixture-score-box';
+function boxRules() {
+    return `.sw-fixture-score {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-1);
+}
+
+${box} {
+  block-size: var(--sw-control-sm-min-height);
+  font-size: ${body.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  inline-size: var(--sw-control-sm-min-height);
+  line-height: ${body.lineHeight}px;
+  min-height: 0;
+  padding: 0;
+  text-align: center;
+}
+
+@media ${coarsePointerQuery} {
+  ${box} {
+    block-size: ${touchTarget};
+    inline-size: ${touchTarget};
+  }
+}
+
+/* A phone's run is narrow: the boxes keep a space-2 margin, not the centre's space-3, so the names keep room. */
+@media ${belowMd} {
+  .sw-fixture-score { margin-inline: var(--sw-space-2); }
+}
+
+[data-theme] input.sw-fixture-score-box[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-fixture-score-dash {
+  color: var(--sw-color-muted);
+}`;
+}
+/*
+ * The score's message, under the row in the run's columns from the home
+ * side's start to the action's end, in caption type and the danger ink.
+ * Empty, it takes no room, but stays in place as the live region.
+ */
+function errorRules() {
+    return `.sw-fixture-score-error {
+  color: var(--sw-color-danger);
+  display: block;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  grid-column: 2 / -1;
+  grid-row: 2;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-fixture-score-error:not(:empty) {
+  padding-block-end: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  [data-theme] input.sw-fixture-score-box[aria-invalid='true'] { border-color: Mark; }
+  .sw-fixture-score-dash { color: CanvasText; }
+}`;
+}
+/* FixtureRow's score (see components/fixture/FixtureScoreBoxes.tsx); after the row rules. */
+export function cssFixtureScoreClasses() {
+    return `${boxRules()}
+
+${errorRules()}`;
+}
+export function fixtureScoreClassCatalog() {
+    return [
+        'sw-fixture-score',
+        'sw-fixture-score-box',
+        'sw-fixture-score-dash',
+        'sw-fixture-score-error',
+    ];
+}

package/dist/css/css-fixture.js

@@ -3,7 +3,10 @@ import { breakpointQuery } from './breakpoints.js';
 import { chevronStrokeIn } from './chevron.js';
 import { quietFill } from './quiet-fill.js';
 import { cssFixtureActionClasses, fixtureActionClassCatalog, } from './css-fixture-action.js';
+import { cssFixtureListRules } from './css-fixture-list.js';
+import { cssFixtureDetailClasses, fixtureDetailClassCatalog, } from './css-fixture-detail.js';
 import { cssFixtureFlagClasses, fixtureFlagClassCatalog, } from './css-fixture-flag.js';
+import { cssFixtureScoreClasses, fixtureScoreClassCatalog, } from './css-fixture-score.js';
 import { cssFixtureSelectClasses, fixtureSelectClassCatalog, } from './css-fixture-select.js';
 import { touchTarget } from './touch-target.js';
 const caption = typographyVariants.caption;
@@ -11,54 +14,6 @@ const label = typographyVariants.label;
 export const fixtureCenterKinds = ['time', 'score'];
 export { fixtureFlagTones } from './css-fixture-flag.js';
 const belowMd = breakpointQuery('below', 'md');
-/*
- * The run: one grid whose columns are the select, the home side, the
- * centre, the away side, the end (details and status), the chevron and the
- * action. Each item is a subgrid of it, and its row a subgrid of every
- * column but the select's and the action's, so every row's centre, end and
- * action line up down the run. The space between the columns is the
- * centre's, the end's, the chevron's, the select's and the action's own
- * margin, so a run with none of them keeps no gap.
- */
-function listRules() {
-    return `.sw-fixture-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.sw-fixture-group-title {
-  color: var(--sw-color-muted);
-  font-family: var(--sw-font-sans);
-  font-size: ${caption.fontSize}px;
-  font-weight: 600;
-  letter-spacing: ${caption.letterSpacing}px;
-  line-height: ${caption.lineHeight}px;
-  padding-block: var(--sw-space-2) var(--sw-space-1);
-}
-
-.sw-fixture-list {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto auto;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.sw-fixture-item,
-.sw-fixture-row {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
-}
-
-.sw-fixture-row {
-  grid-column: 2 / -2;
-}
-
-.sw-fixture-item {
-  border-top: 1px solid var(--sw-color-border);
-}`;
-}
 /*
  * A row: the md control height (44 px), its parts centred on one line a
  * space-3 apart; a link or button row is the whole target, the text
@@ -243,7 +198,7 @@ function fallbackRules() {
 }
 /* FixtureGroup and FixtureRow (see components/FixtureRow.tsx). */
 export function cssFixtureClasses() {
-    return `${listRules()}
+    return `${cssFixtureListRules()}
 
 ${rowRules()}
 
@@ -255,7 +210,11 @@ ${cssFixtureFlagClasses()}
 
 ${cssFixtureSelectClasses()}
 
-${cssFixtureActionClasses()}`;
+${cssFixtureActionClasses()}
+
+${cssFixtureScoreClasses()}
+
+${cssFixtureDetailClasses()}`;
 }
 export function fixtureClassCatalog() {
     return [
@@ -277,5 +236,7 @@ export function fixtureClassCatalog() {
         ...fixtureFlagClassCatalog(),
         ...fixtureSelectClassCatalog(),
         ...fixtureActionClassCatalog(),
+        ...fixtureScoreClassCatalog(),
+        ...fixtureDetailClassCatalog(),
     ];
 }

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

@@ -7,7 +7,11 @@ export type TableCellTone = (typeof tableCellTones)[number];
  */
 export declare const tableRowVariants: readonly ["default", "sub", "total"];
 export type TableRowVariant = (typeof tableRowVariants)[number];
+/** A rule a row draws: `after`, a line under it, such as a cut. */
+export declare const tableRowRules: readonly ["after"];
+export type TableRowRule = (typeof tableRowRules)[number];
 export declare function assertTableCellTone(tone: unknown): void;
 export declare function assertTableRowVariant(variant: unknown): void;
+export declare function assertTableRowRule(rule: unknown): void;
 export declare function cssTableLedgerClasses(): string;
 export declare function tableLedgerClassCatalog(): string[];

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

@@ -5,6 +5,8 @@ export const tableCellTones = ['success', 'danger', 'muted', 'accent'];
  * or a total of the rows above it, mid-table.
  */
 export const tableRowVariants = ['default', 'sub', 'total'];
+/** A rule a row draws: `after`, a line under it, such as a cut. */
+export const tableRowRules = ['after'];
 export function assertTableCellTone(tone) {
     if (tone !== undefined && !tableCellTones.includes(tone))
         throw new RangeError(`Unknown TableCell tone: ${String(tone)}`);
@@ -13,6 +15,10 @@ export function assertTableRowVariant(variant) {
     if (!tableRowVariants.includes(variant))
         throw new RangeError(`Unknown TableRow variant: ${String(variant)}`);
 }
+export function assertTableRowRule(rule) {
+    if (rule !== undefined && !tableRowRules.includes(rule))
+        throw new RangeError(`Unknown TableRow rule: ${String(rule)}`);
+}
 function toneRules() {
     return tableCellTones
         .map((tone) => `.sw-table .sw-table-tone-${tone} {

package/dist/css/css-table-row-rule.d.ts

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

package/dist/css/css-table-row-rule.js

@@ -0,0 +1,22 @@
+/*
+ * A rule under a row (`TableRow rule="after"`), such as the cut under the
+ * last playoff place: its cells' bottom border 2 px in the muted grey, a
+ * line that reads stronger than the 1 px hairlines between rows (3:1 on
+ * the surface, as a line that carries meaning needs) without taking a
+ * colour's meaning. The collapsed-border model resolves it over the next
+ * row's top, and a border, so forced colours keep it (in `CanvasText`) and
+ * right-to-left needs nothing. The row's words and fill are unchanged; say
+ * what the line means in words beside the table.
+ */
+export function cssTableRowRuleClasses() {
+    return `.sw-table .sw-table-row-rule-after > :is(th, td) {
+  border-bottom: 2px solid var(--sw-color-muted);
+}
+
+@media (forced-colors: active) {
+  .sw-table .sw-table-row-rule-after > :is(th, td) { border-bottom-color: CanvasText; }
+}`;
+}
+export function tableRowRuleClassCatalog() {
+    return ['sw-table-row-rule-after'];
+}

package/dist/css/css-table.js

@@ -6,6 +6,7 @@ import { cssTableLayoutClasses, tableLayoutClassCatalog, } from './css-table-lay
 import { cssTableLedgerClasses, tableLedgerClassCatalog, } from './css-table-ledger.js';
 import { cssTableFooterClasses, tableFooterClassCatalog, } from './css-table-footer.js';
 import { cssTablePagePinClasses, tablePagePinClassCatalog, } from './css-table-page-pin.js';
+import { cssTableRowRuleClasses, tableRowRuleClassCatalog, } from './css-table-row-rule.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';
@@ -96,6 +97,8 @@ ${cssTableLedgerClasses()}
 
 ${cssTableTotalRowClasses()}
 
+${cssTableRowRuleClasses()}
+
 ${cssTableFooterClasses()}
 
 ${cssTablePagePinClasses()}
@@ -122,6 +125,7 @@ export function tableClassCatalog() {
         ...tableSortClassCatalog(),
         ...tableLedgerClassCatalog(),
         ...tableTotalRowClassCatalog(),
+        ...tableRowRuleClassCatalog(),
         ...tableFooterClassCatalog(),
         ...tablePagePinClassCatalog(),
         ...tableBoundedClassCatalog(),

package/dist/index.d.ts

@@ -59,7 +59,7 @@ export type { SplitProps } from './components/Split.js';
 export { Nav, navAppearances, type NavAppearance, type NavProps, } from './components/Nav.js';
 export { NavCount, navCountTones, type NavCountProps, type NavCountTone, } from './components/NavCount.js';
 export { FixtureGroup, type FixtureGroupProps, } from './components/FixtureGroup.js';
-export { FixtureRow, type FixtureRowProps, type FixtureFlag, type FixtureSelect, type FixtureSide, type FixtureStatus, } from './components/FixtureRow.js';
+export { FixtureRow, type FixtureRowProps, type FixtureFlag, type FixtureScore, type FixtureScoreBox, type FixtureScoreSide, type FixtureSelect, type FixtureSide, type FixtureStatus, } from './components/FixtureRow.js';
 export { defaultScheduleGridLabels, ScheduleGrid, type ScheduleGridAxisEntry, type ScheduleGridCarryMode, type ScheduleGridDisabledCell, type ScheduleGridDropCheck, type ScheduleGridItem, type ScheduleGridLabels, type ScheduleGridProps, type ScheduleGridSlot, type ScheduleGridTarget, } from './components/ScheduleGrid.js';
 export { DateToggleCalendar, type DateToggleCalendarProps, } from './components/DateToggleCalendar.js';
 export { CommandPalette, commandPaletteShortcuts, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, type CommandPaletteShortcut, } from './components/CommandPalette.js';
@@ -73,7 +73,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, 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 { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, TableSelectCell, tableCellTones, tableRowRules, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableMaxHeight, type TableProps, type TableRowProps, type TableRowRule, 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

@@ -69,7 +69,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, TableSelectCell, tableCellTones, tableRowVariants, } from './components/Table.js';
+export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, TableSelectCell, tableCellTones, tableRowRules, 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

@@ -2021,6 +2021,14 @@ body {
   .sw-table .sw-table-row-total > :is(th, td) { border-top-color: CanvasText; }
 }
 
+.sw-table .sw-table-row-rule-after > :is(th, td) {
+  border-bottom: 2px solid var(--sw-color-muted);
+}
+
+@media (forced-colors: active) {
+  .sw-table .sw-table-row-rule-after > :is(th, td) { border-bottom-color: CanvasText; }
+}
+
 .sw-table tfoot :is(th, td) {
   font-weight: 600;
   position: relative;
@@ -3605,6 +3613,87 @@ button.sw-date-toggle-day[aria-disabled='true'] {
   }
 }
 
+.sw-fixture-score {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-1);
+}
+
+[data-theme] input.sw-fixture-score-box {
+  block-size: var(--sw-control-sm-min-height);
+  font-size: 17px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  inline-size: var(--sw-control-sm-min-height);
+  line-height: 25px;
+  min-height: 0;
+  padding: 0;
+  text-align: center;
+}
+
+@media (pointer: coarse) {
+  [data-theme] input.sw-fixture-score-box {
+    block-size: var(--sw-control-md-min-height);
+    inline-size: var(--sw-control-md-min-height);
+  }
+}
+
+/* A phone's run is narrow: the boxes keep a space-2 margin, not the centre's space-3, so the names keep room. */
+@media not all and (min-width: 48rem) {
+  .sw-fixture-score { margin-inline: var(--sw-space-2); }
+}
+
+[data-theme] input.sw-fixture-score-box[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-fixture-score-dash {
+  color: var(--sw-color-muted);
+}
+
+.sw-fixture-score-error {
+  color: var(--sw-color-danger);
+  display: block;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  grid-column: 2 / -1;
+  grid-row: 2;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-fixture-score-error:not(:empty) {
+  padding-block-end: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  [data-theme] input.sw-fixture-score-box[aria-invalid='true'] { border-color: Mark; }
+  .sw-fixture-score-dash { color: CanvasText; }
+}
+
+.sw-fixture-item-below > .sw-fixture-row {
+  grid-row: 1;
+}
+
+.sw-fixture-detail {
+  grid-column: 2 / -1;
+  grid-row: 3;
+  min-width: 0;
+  padding: 0 var(--sw-space-2) var(--sw-space-2);
+}
+
+@supports not (grid-template-columns: subgrid) {
+  .sw-fixture-item-below {
+    flex-wrap: wrap;
+  }
+
+  .sw-fixture-item-below > :is(.sw-fixture-score-error, .sw-fixture-detail) {
+    flex: 1 0 100%;
+    order: 1;
+  }
+}
+
 .sw-schedule-grid {
   max-width: 100%;
   overflow-x: auto;

package/package.json

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