@scalewing/react 1.55.0 → 1.57.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- 384520b: `FixtureRow` `select` (opt-in, `{ label, checked, onCheckedChange, disabled? }`): a leading checkbox with its label visually hidden, before the row and outside its press area, in the run's new first column (`sw-fixture-list` is now `auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto auto`, six below `md`; the row spans `2 / -2`); the standard 24 px box, 44 px on a coarse pointer; works with `flag`, `action`, `href` and `onPress`. New type `FixtureSelect`; new classes `sw-fixture-item-select`, `sw-fixture-select`, `sw-fixture-row-flag-inline`. Fixes: below `md` a flagged row with no details' line keeps its flag inline; `ScheduleGrid` `labels.pickedUp` receives the input as a second argument (`ScheduleGridCarryMode`: `keyboard`, `tap`, `drag`; one-argument functions you pass still work, but a call to `defaultScheduleGridLabels.pickedUp` now needs the mode) and the default words fit it; a key or tap carry is cancelled when focus leaves the grid (a press on a header keeps focus and the carry); a drag release handled before the pick-up renders no longer leaves the item held; `DateToggleCalendar` `onChange` drops `value` entries outside `min`–`max` or on disabled days.
+
 ## 1.55.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`.
 
@@ -1241,7 +1241,7 @@ const { headings, omissions } = inspectMarkdown(page.body, {
 </FixtureGroup>
 ```
 
-`FixtureRow` `flag` (opt-in, `FixtureFlag`: `{ label, tone? }`) marks an issue at the row's start, such as a clash: a round mark a space-4 across with a "!", in the tone's tint and ink (`warning`, amber, the default, for something that needs the person; `danger`, red), its edge keeping 3:1 on the surface in every palette and the text colour in forced colors. The mark is `aria-hidden` with `label` as its `title` tooltip, and `label` is read first in the row from a visually hidden span ("Can't-play clash Heron Marsh 8:00 Otter Pool"); with `aria-label` it is put before your words with a comma ("Can't-play clash, Heron Marsh vs Otter Pool, 8:00"), so do not repeat it there. From `md` the mark sits on the first line at the row's start, the home side kept clear of it; below `md` it leads the second line, before the details, so it never squeezes the home name (a row with no details gains that line for it). A blank `label` or an unknown `tone` throws a `RangeError`. `action` (opt-in) is a control after the row, such as a small neutral `Button` ("Move", named in your words: `aria-label="Move Heron Marsh vs Otter Pool"`): it is the row's sibling in its list item, outside a link or button row's press area and after it in the Tab order, a press on it never opens the row, and it stays centred on the row's height in the run's last column at every width (from `md` the row's one line, below `md` both lines), so every row's action lines up. Where `:has` is supported the hover fill spans the row and its action. An empty slot draws nothing. The run gains a sixth column for it (`sw-fixture-list` is `minmax(0, 1fr) auto minmax(0, 1fr) auto auto auto`, five below `md`); a row spans every column but the action's. New classes `sw-fixture-row-flagged`, `sw-fixture-flag`, `sw-fixture-flag-mark`, `sw-fixture-flag-warning`, `sw-fixture-flag-danger`, `sw-fixture-item-action` and `sw-fixture-action`.
+`FixtureRow` `flag` (opt-in, `FixtureFlag`: `{ label, tone? }`) marks an issue at the row's start, such as a clash: a round mark a space-4 across with a "!", in the tone's tint and ink (`warning`, amber, the default, for something that needs the person; `danger`, red), its edge keeping 3:1 on the surface in every palette and the text colour in forced colors. The mark is `aria-hidden` with `label` as its `title` tooltip, and `label` is read first in the row from a visually hidden span ("Can't-play clash Heron Marsh 8:00 Otter Pool"); with `aria-label` it is put before your words with a comma ("Can't-play clash, Heron Marsh vs Otter Pool, 8:00"), so do not repeat it there. From `md` the mark sits on the first line at the row's start, the home side kept clear of it; below `md` it leads the second line, before the details, so it never squeezes the home name. A row with nothing on that line below `md` (no `status`, and no `meta` or one hidden below `md` by `metaHideBelow`) keeps the mark inline on its first line instead, as from `md` (class `sw-fixture-row-flag-inline`), rather than gaining a line that holds only the flag. A blank `label` or an unknown `tone` throws a `RangeError`. `action` (opt-in) is a control after the row, such as a small neutral `Button` ("Move", named in your words: `aria-label="Move Heron Marsh vs Otter Pool"`): it is the row's sibling in its list item, outside a link or button row's press area and after it in the Tab order, a press on it never opens the row, and it stays centred on the row's height in the run's last column at every width (from `md` the row's one line, below `md` both lines), so every row's action lines up. Where `:has` is supported the hover fill spans the row and its action. An empty slot draws nothing. The run has a column for it at the end, and one for `select` at the start (`sw-fixture-list` is `auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto auto`, six below `md`); a row spans every column but those two (`grid-column: 2 / -2`), and an `auto` column no row uses takes no space. New classes `sw-fixture-row-flagged`, `sw-fixture-flag`, `sw-fixture-flag-mark`, `sw-fixture-flag-warning`, `sw-fixture-flag-danger`, `sw-fixture-item-action` and `sw-fixture-action`.
 
 ```tsx
 // move is your own handler, such as opening a Move dialog.
@@ -1264,7 +1264,74 @@ const { headings, omissions } = inspectMarkdown(page.body, {
 />
 ```
 
-`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)`, `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. 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`.
+`FixtureRow` `select` (opt-in, `FixtureSelect`: `{ label, checked, onCheckedChange, disabled? }`) is a leading checkbox that chooses the row, such as games picked to postpone. It is a `Checkbox` with its `label` visually hidden ("Select Heron Marsh vs Pine Ridge"; name it by the words the row shows), the row's sibling in its list item before the row: outside a link or button row's press area, before it in the Tab order, and a press on it (or Space) calls `onCheckedChange` and never opens the row. The box is the standard 24 px `Checkbox` box, its own target on a fine pointer and 44 × 44 px on a coarse one (the row's start padding dropped there, as the target pads the box); it is centred on the row's height in the run's first column at every width, so the boxes line up down the run. `disabled` keeps it shown and unchanged. It works with `flag` (the box comes first, then the mark), `action`, `href` and `onPress`, and the hover fill spans the whole item where `:has` is supported. The run's columns are shared, so on a phone a select, side marks, a chevron and an action in one run leave the names little room: leave the marks out or hide `meta` there. A `select` without a nonempty `label`, a boolean `checked` or an `onCheckedChange` throws a `RangeError`. New type `FixtureSelect`; new classes `sw-fixture-item-select`, `sw-fixture-select` and `sw-fixture-row-flag-inline`.
+
+```tsx
+// chosen, choose and pickTime are your own state and handlers.
+<FixtureRow
+  home={{ name: 'Heron Marsh' }}
+  away={{ name: 'Pine Ridge' }}
+  center="8:00"
+  select={{
+    label: 'Select Heron Marsh vs Pine Ridge',
+    checked: chosen.has('g1'),
+    onCheckedChange: (checked) => choose('g1', checked),
+  }}
+  action={
+    <Button
+      aria-label="Pick a time for Heron Marsh vs Pine Ridge"
+      onPress={pickTime}
+      size="sm"
+      variant="neutral"
+    >
+      Pick a time
+    </Button>
+  }
+/>
+```
+
+`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
 // TalkCard, napping, move and swap are your own component and functions.
@@ -1299,7 +1366,7 @@ const { headings, omissions } = inspectMarkdown(page.body, {
 />
 ```
 
-`DateToggleCalendar` is month grids where each day that can be toggled is a toggle button, such as the days off in a season. Props: `label` (names its `group`), `min` and `max` (`YYYY-MM-DD`: the first and last day that can be toggled; the months shown run from `min`'s month to `max`'s, at most 24), `value` (the days on, `YYYY-MM-DD`, in any order) and `onChange` (the days on after a press, sorted and without repeats), `isDateDisabled` (opt-in, `(date) => boolean`, days between the bounds that cannot be toggled, such as days with no games), `toggledLabel` (opt-in, words read after a day that is on, "day off"), `locale` (a BCP 47 tag; by default the nearest `lang`, then en-US), `weekStartsOn` (0 Sunday, the default, or 1 Monday) and `disabled` (opt-in: the days keep focus, `aria-disabled`, and presses change nothing). Each month is a `grid` named by its title ("April 2027") with weekday column headers; a day that can be toggled is a `button` with `aria-pressed`, named by its full date ("Sunday, April 4, 2027", then ", day off" while on); a day outside the bounds or disabled is its muted number in a `gridcell` that is `aria-disabled` and named by its date, not a control; neighbouring months' days are blank. The whole calendar is one Tab stop: the first day on, else the first day that can be toggled, then wherever focus last was. The arrows move between days that can be toggled, skipping the rest: left and right to the previous or next one (swapped in right-to-left), up and down by weeks to the nearest one on the same weekday; Home and End go to the month's first and last, PageUp and PageDown to the first of the nearest earlier or later month that has one; a key at an edge does nothing and keeps the page still. Space and Enter toggle (the native button). A day is DateField's 44 px round square: a day that is on takes the accent fill and onAccent figures at weight 600 (Highlight in forced colors), hover the quiet fill on a day that is off. The months sit side by side in as many columns as fit, each seven days wide, and stack on a phone. Classes `sw-date-toggle*`. A blank `label` or `toggledLabel`, a bound or value that is not a `YYYY-MM-DD` date, `min` after `max`, more than 24 months, or an unknown `weekStartsOn` throws a `RangeError`.
+`DateToggleCalendar` is month grids where each day that can be toggled is a toggle button, such as the days off in a season. Props: `label` (names its `group`), `min` and `max` (`YYYY-MM-DD`: the first and last day that can be toggled; the months shown run from `min`'s month to `max`'s, at most 24), `value` (the days on, `YYYY-MM-DD`, in any order) and `onChange` (the days on after a press, sorted and without repeats, holding only days that can be toggled: a `value` entry outside `min`–`max` or on a day `isDateDisabled` refuses is not drawn and is dropped from the next `onChange`, so keep such days elsewhere if you need them), `isDateDisabled` (opt-in, `(date) => boolean`, days between the bounds that cannot be toggled, such as days with no games), `toggledLabel` (opt-in, words read after a day that is on, "day off"), `locale` (a BCP 47 tag; by default the nearest `lang`, then en-US), `weekStartsOn` (0 Sunday, the default, or 1 Monday) and `disabled` (opt-in: the days keep focus, `aria-disabled`, and presses change nothing). Each month is a `grid` named by its title ("April 2027") with weekday column headers; a day that can be toggled is a `button` with `aria-pressed`, named by its full date ("Sunday, April 4, 2027", then ", day off" while on); a day outside the bounds or disabled is its muted number in a `gridcell` that is `aria-disabled` and named by its date, not a control; neighbouring months' days are blank. The whole calendar is one Tab stop: the first day on, else the first day that can be toggled, then wherever focus last was. The arrows move between days that can be toggled, skipping the rest: left and right to the previous or next one (swapped in right-to-left), up and down by weeks to the nearest one on the same weekday; Home and End go to the month's first and last, PageUp and PageDown to the first of the nearest earlier or later month that has one; a key at an edge does nothing and keeps the page still. Space and Enter toggle (the native button). A day is DateField's 44 px round square: a day that is on takes the accent fill and onAccent figures at weight 600 (Highlight in forced colors), hover the quiet fill on a day that is off. The months sit side by side in as many columns as fit, each seven days wide, and stack on a phone. Classes `sw-date-toggle*`. A blank `label` or `toggledLabel`, a bound or value that is not a `YYYY-MM-DD` date, `min` after `max`, more than 24 months, or an unknown `weekStartsOn` throws a `RangeError`.
 
 ```tsx
 // surveyDays (a Set of YYYY-MM-DD days that can be toggled), daysOff and setDaysOff are your own.

package/dist/components/DateToggleCalendar.d.ts

@@ -4,6 +4,8 @@ export type { DateToggleCalendarProps } from './date-toggle/types.js';
  * Month grids from `min`'s month to `max`'s, where each day that can be
  * toggled is a toggle button, such as days off in a season. One Tab stop;
  * the arrow keys move between days that can be toggled, skipping the rest.
- * Invalid props throw a `RangeError`.
+ * `onChange` hands back only days that can be toggled: `value` entries
+ * outside `min`–`max` or on a disabled day are dropped. Invalid props throw
+ * a `RangeError`.
  */
 export declare function DateToggleCalendar(props: DateToggleCalendarProps): import("react").JSX.Element;

package/dist/components/DateToggleCalendar.js

@@ -11,7 +11,9 @@ import { assertDateToggleCalendar } from './date-toggle/validate.js';
  * Month grids from `min`'s month to `max`'s, where each day that can be
  * toggled is a toggle button, such as days off in a season. One Tab stop;
  * the arrow keys move between days that can be toggled, skipping the rest.
- * Invalid props throw a `RangeError`.
+ * `onChange` hands back only days that can be toggled: `value` entries
+ * outside `min`–`max` or on a disabled day are dropped. Invalid props throw
+ * a `RangeError`.
  */
 export function DateToggleCalendar(props) {
     assertDateToggleCalendar(props);
@@ -47,5 +49,5 @@ export function DateToggleCalendar(props) {
         requestFocus();
         setChosenFocus(target);
     }
-    return (_jsx("div", { "aria-label": label, className: "sw-date-toggle", onKeyDown: onKeyDown, ref: containerRef, role: "group", ...focusHandlers, children: months.map((month) => (_jsx(ToggleMonth, { disabled: disabled, focusDate: focusDate, isEnabled: isEnabled, locale: locale, month: month, onFocusDate: setChosenFocus, onToggle: (date) => onChange(toggleDate(value, date)), toggled: toggled, toggledLabel: toggledLabel, weekStartsOn: weekStartsOn }, `${month.year}-${month.month}`))) }));
+    return (_jsx("div", { "aria-label": label, className: "sw-date-toggle", onKeyDown: onKeyDown, ref: containerRef, role: "group", ...focusHandlers, children: months.map((month) => (_jsx(ToggleMonth, { disabled: disabled, focusDate: focusDate, isEnabled: isEnabled, locale: locale, month: month, onFocusDate: setChosenFocus, onToggle: (date) => onChange(toggleDate(value, date).filter(isEnabled)), toggled: toggled, toggledLabel: toggledLabel, weekStartsOn: weekStartsOn }, `${month.year}-${month.month}`))) }));
 }

package/dist/components/FixtureRow.d.ts

@@ -1,12 +1,14 @@
 import { type FixtureRowProps } from './fixture/types.js';
-export type { FixtureFlag, FixtureRowProps, 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
  * the details and a status at the end (under the sides below `md`). With
  * `href` or `onPress` the whole row is a link or a button with a chevron.
- * `flag` marks an issue at the row's start; `action` is a control after the
- * row, outside its press area.
- * Invalid words or props throw a `RangeError`.
+ * `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.
+ * `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,45 +1,43 @@
 '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 { 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 })] }));
-}
-/** 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
  * the details and a status at the end (under the sides below `md`). With
  * `href` or `onPress` the whole row is a link or a button with a chevron.
- * `flag` marks an issue at the row's start; `action` is a control after the
- * row, outside its press area.
- * Invalid words or props throw a `RangeError`.
+ * `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.
+ * `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, 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 rowClass = cx('sw-fixture-row', pressable && 'sw-fixture-row-pressable', flag && 'sw-fixture-row-flagged');
+    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
@@ -54,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', hasAction && 'sw-fixture-item-action'), children: [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/ScheduleGrid.d.ts

@@ -1,11 +1,12 @@
 import { type ScheduleGridProps } from './schedule-grid/types.js';
 export { defaultScheduleGridLabels } from './schedule-grid/labels.js';
-export type { ScheduleGridAxisEntry, ScheduleGridDisabledCell, ScheduleGridDropCheck, ScheduleGridItem, ScheduleGridLabels, ScheduleGridProps, ScheduleGridSlot, ScheduleGridTarget, } from './schedule-grid/types.js';
+export type { ScheduleGridAxisEntry, ScheduleGridCarryMode, ScheduleGridDisabledCell, ScheduleGridDropCheck, ScheduleGridItem, ScheduleGridLabels, ScheduleGridProps, ScheduleGridSlot, ScheduleGridTarget, } from './schedule-grid/types.js';
 /**
  * Items in a grid of rows (such as times) by columns (such as fields),
  * moved between cells: a mouse drag with one hover target, a press then a
  * press (touch), or keys (M or Space picks up, arrows choose, Enter drops,
- * Escape cancels). Dropping on another item swaps the two. The consumer's
+ * Escape cancels). A carry by keys or presses is cancelled when focus or a
+ * press leaves the grid. Dropping on another item swaps the two. The consumer's
  * `canDrop` decides every target; each step is announced politely. Invalid
  * props throw a `RangeError`.
  */

package/dist/components/ScheduleGrid.js

@@ -14,7 +14,8 @@ export { defaultScheduleGridLabels } from './schedule-grid/labels.js';
  * Items in a grid of rows (such as times) by columns (such as fields),
  * moved between cells: a mouse drag with one hover target, a press then a
  * press (touch), or keys (M or Space picks up, arrows choose, Enter drops,
- * Escape cancels). Dropping on another item swaps the two. The consumer's
+ * Escape cancels). A carry by keys or presses is cancelled when focus or a
+ * press leaves the grid. Dropping on another item swaps the two. The consumer's
  * `canDrop` decides every target; each step is announced politely. Invalid
  * props throw a `RangeError`.
  */
@@ -69,6 +70,24 @@ export function ScheduleGrid(props) {
         document.addEventListener('pointerdown', onDown);
         return () => document.removeEventListener('pointerdown', onDown);
     }, [cancel, carry]);
+    // Focus leaving the grid puts a key or press carry back; the window
+    // losing focus (another app, a devtools click) does not.
+    function onBlur(event) {
+        if (!carry || carry.mode === 'drag')
+            return;
+        const next = event.relatedTarget;
+        if (next instanceof Node && event.currentTarget.contains(next))
+            return;
+        if (next === null && !document.hasFocus())
+            return;
+        cancel();
+    }
+    // A press on a header (not focusable) keeps focus where it is, so it
+    // never reads as focus leaving the grid and a carry survives it.
+    function onMouseDown(event) {
+        if (!event.target.closest('[role="gridcell"]'))
+            event.preventDefault();
+    }
     function onKeyDown(event) {
         const position = cellPositionOf(event.target);
         if (!position)
@@ -106,7 +125,7 @@ export function ScheduleGrid(props) {
             pickUp(item.id, 'tap');
     }
     const activeTarget = carry?.mode === 'drag' ? hover : carry?.mode === 'keyboard' ? focus : null;
-    return (_jsxs("div", { className: cx('sw-schedule-grid', carry?.mode === 'drag' && 'sw-schedule-grid-dragging'), children: [_jsxs("table", { "aria-describedby": instructionsId, "aria-label": label, className: "sw-schedule-grid-table", onKeyDown: onKeyDown, ref: tableRef, role: "grid", style: { '--sw-schedule-grid-columns': columns.length }, children: [_jsx("thead", { children: _jsxs("tr", { children: [rowsLabel !== undefined ? (_jsx("th", { className: "sw-schedule-grid-corner", scope: "col", children: rowsLabel })) : (_jsx("td", { "aria-hidden": "true", className: "sw-schedule-grid-corner" })), columns.map((column) => (_jsx("th", { className: "sw-schedule-grid-column", scope: "col", children: column.label }, column.id)))] }) }), _jsx("tbody", { children: rows.map((row, rowIndex) => (_jsxs("tr", { children: [_jsx("th", { className: "sw-schedule-grid-row", scope: "row", children: row.label }), columns.map((column, columnIndex) => {
+    return (_jsxs("div", { className: cx('sw-schedule-grid', carry?.mode === 'drag' && 'sw-schedule-grid-dragging'), children: [_jsxs("table", { "aria-describedby": instructionsId, "aria-label": label, className: "sw-schedule-grid-table", onBlur: onBlur, onKeyDown: onKeyDown, onMouseDown: onMouseDown, ref: tableRef, role: "grid", style: { '--sw-schedule-grid-columns': columns.length }, children: [_jsx("thead", { children: _jsxs("tr", { children: [rowsLabel !== undefined ? (_jsx("th", { className: "sw-schedule-grid-corner", scope: "col", children: rowsLabel })) : (_jsx("td", { "aria-hidden": "true", className: "sw-schedule-grid-corner" })), columns.map((column) => (_jsx("th", { className: "sw-schedule-grid-column", scope: "col", children: column.label }, column.id)))] }) }), _jsx("tbody", { children: rows.map((row, rowIndex) => (_jsxs("tr", { children: [_jsx("th", { className: "sw-schedule-grid-row", scope: "row", children: row.label }), columns.map((column, columnIndex) => {
                                     const position = { row: rowIndex, column: columnIndex };
                                     return (_jsx(ScheduleCell, { activeTarget: activeTarget?.row === rowIndex &&
                                             activeTarget.column === columnIndex, labels: words, model: model, movable: !disabled, onFocus: setFocused, onItemPointerDown: drag.onPointerDown, onPress: onPress, position: position, status: cellStatus(model, carry?.itemId ?? null, position, canDrop), tabStop: focus.row === rowIndex && focus.column === columnIndex }, column.id));

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/date-toggle/types.d.ts

@@ -6,9 +6,16 @@ export type DateToggleCalendarProps = {
     min: string;
     /** The last day that can be toggled (YYYY-MM-DD); the last month shown is its month. */
     max: string;
-    /** The days toggled on (YYYY-MM-DD), in any order. */
+    /**
+     * The days toggled on (YYYY-MM-DD), in any order. Days outside
+     * `min`–`max` or disabled are not drawn, and `onChange` drops them.
+     */
     value: readonly string[];
-    /** The days toggled on after a press, sorted and without repeats. */
+    /**
+     * The days toggled on after a press, sorted and without repeats; only
+     * days that can be toggled (inside `min`–`max` and not disabled), so a
+     * `value` entry outside them is dropped on the next press.
+     */
     onChange: (value: string[]) => void;
     /** Days between `min` and `max` that cannot be toggled, such as days with no games. */
     isDateDisabled?: (date: string) => boolean;

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);
+}