@scalewing/react 1.55.0 → 1.57.0

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';
@@ -23,14 +23,77 @@ export type FixtureFlag = {
     /** `warning` (default) is amber, for something that needs the person; `danger` is red. */
     tone?: FixtureFlagTone;
 };
+/**
+ * A leading checkbox that chooses the row, such as games picked to
+ * postpone: its own control before the home side, outside the row's link
+ * or button. `label` names it, not drawn ("Select Heron Marsh vs Otter
+ * Pool").
+ */
+export type FixtureSelect = {
+    label: string;
+    checked: boolean;
+    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`. */
@@ -46,6 +109,19 @@ export type FixtureRowProps = {
      * stop. Name it in your words ("Move Heron Marsh vs Otter Pool").
      */
     action?: ReactNode;
+    /**
+     * A leading checkbox before the row, outside its press area: the
+     * standard 24 px box, a 44 px target on a coarse pointer. Works with `flag`,
+     * `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,9 +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`, 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, status, 'aria-label': ariaLabel, }: FixtureRowProps): void;
+export declare function assertFixtureRow(props: FixtureRowProps): void;

package/dist/components/fixture/validate.js

@@ -2,22 +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`, 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, 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 &&
@@ -30,6 +35,11 @@ export function assertFixtureRow({ away, center, centerKind, flag, home, href, m
         (isBlank(flag?.label) ||
             (flag.tone !== undefined && !isOneOf(fixtureFlagTones, flag.tone))))
         throw new RangeError(`${name} flag needs a label and one of ${fixtureFlagTones.join(', ')}`);
+    if (select !== undefined &&
+        (isBlank(select?.label) ||
+            typeof select.checked !== 'boolean' ||
+            typeof select.onCheckedChange !== 'function'))
+        throw new RangeError(`${name} select needs a label, checked and onCheckedChange`);
     if (href !== undefined && isBlank(href))
         throw new RangeError(`${name} href must be nonempty when given`);
     if (ariaLabel !== undefined) {

package/dist/components/schedule-grid/labels.js

@@ -1,10 +1,15 @@
+const pickedUpNext = {
+    keyboard: 'Choose a cell with the arrow keys, then press Enter to drop it or Escape to cancel.',
+    tap: 'Press a cell to drop it there, or press outside the grid to cancel.',
+    drag: 'Release it on a cell to drop it there.',
+};
 export const defaultScheduleGridLabels = {
     open: 'Open',
     movingFrom: 'Moving from here',
     releaseToMove: 'Release to move here',
     releaseToSwap: 'Release to swap',
     instructions: 'To move an item, press M or Space on it, choose a cell with the arrow keys, then press Enter to drop it or Escape to cancel. Dropping it on another item swaps the two.',
-    pickedUp: (item) => `Picked up ${item}. Choose a cell with the arrow keys, then press Enter to drop it or Escape to cancel.`,
+    pickedUp: (item, mode) => `Picked up ${item}. ${pickedUpNext[mode] ?? pickedUpNext.keyboard}`,
     moved: (item, row, column) => `Moved ${item} to ${row}, ${column}.`,
     swapped: (item, other) => `Swapped ${item} with ${other}.`,
     cancelled: (item) => `Cancelled. ${item} stays where it was.`,

package/dist/components/schedule-grid/types.d.ts

@@ -32,6 +32,11 @@ export type ScheduleGridTarget = ({
 export type ScheduleGridDropCheck = true | {
     reason: string;
 };
+/**
+ * How an item was picked up: by keys, by a press then a press (touch or a
+ * click), or by a mouse or pen drag.
+ */
+export type ScheduleGridCarryMode = 'keyboard' | 'tap' | 'drag';
 /** The grid's own words, English by default. */
 export type ScheduleGridLabels = {
     /** An empty cell. */
@@ -44,8 +49,11 @@ export type ScheduleGridLabels = {
     releaseToSwap: string;
     /** How to move an item with keys; the grid's description. */
     instructions: string;
-    /** Announced when an item is picked up. */
-    pickedUp: (item: string) => string;
+    /**
+     * Announced when an item is picked up; `mode` says how, so the words can
+     * fit the input (a one-argument function still works).
+     */
+    pickedUp: (item: string, mode: ScheduleGridCarryMode) => string;
     /** Announced after a move to an empty cell. */
     moved: (item: string, row: string, column: string) => string;
     /** Announced after a swap. */

package/dist/components/schedule-grid/use-schedule-carry.d.ts

@@ -1,7 +1,7 @@
 import { type GridModel, type GridPosition } from './grid-model.js';
-import { type ScheduleGridLabels, type ScheduleGridProps } from './types.js';
+import { type ScheduleGridCarryMode, type ScheduleGridLabels, type ScheduleGridProps } from './types.js';
 /** How an item is being carried: by keys, by a press then a press, or by a drag. */
-export type CarryMode = 'keyboard' | 'tap' | 'drag';
+export type CarryMode = ScheduleGridCarryMode;
 export type Carry = {
     itemId: string;
     mode: CarryMode;
@@ -19,7 +19,9 @@ type CarryOptions = Pick<ScheduleGridProps, 'canDrop' | 'columns' | 'disabled' |
  * The carried item and what picking up, dropping and cancelling do: the
  * consumer's `canDrop` decides each drop, `onMove` or `onSwap` reports it,
  * and each step is announced. A carry ends when its item leaves the grid
- * or the grid is disabled.
+ * or the grid is disabled. Drops and cancels read the carry from a ref set
+ * as it changes, so a release handled before React commits the pick-up
+ * still ends it.
  */
 export declare function useScheduleCarry({ canDrop, columns, disabled, labels, model, onMove, onSwap, rows, }: CarryOptions): {
     announcement: Announcement;

package/dist/components/schedule-grid/use-schedule-carry.js

@@ -1,13 +1,20 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { cellStatus } from './grid-model.js';
 /**
  * The carried item and what picking up, dropping and cancelling do: the
  * consumer's `canDrop` decides each drop, `onMove` or `onSwap` reports it,
  * and each step is announced. A carry ends when its item leaves the grid
- * or the grid is disabled.
+ * or the grid is disabled. Drops and cancels read the carry from a ref set
+ * as it changes, so a release handled before React commits the pick-up
+ * still ends it.
  */
 export function useScheduleCarry({ canDrop, columns, disabled, labels, model, onMove, onSwap, rows, }) {
-    const [held, setHeld] = useState(null);
+    const [held, setHeldState] = useState(null);
+    const heldRef = useRef(null);
+    const setHeld = useCallback((next) => {
+        heldRef.current = next;
+        setHeldState(next);
+    }, []);
     const [announcement, setAnnouncement] = useState({
         text: '',
         id: 0,
@@ -17,7 +24,19 @@ export function useScheduleCarry({ canDrop, columns, disabled, labels, model, on
     // stays ended: re-enabling never resumes it (state adjusted while
     // rendering, as React recommends over an effect).
     if (held !== null && carry === null)
-        setHeld(null);
+        setHeldState(null);
+    useLayoutEffect(() => {
+        const live = heldRef.current;
+        if (live !== null && (disabled || !model.itemById(live.itemId)))
+            heldRef.current = null;
+    });
+    /** The live carry, current even before a render commits it. */
+    const current = useCallback(() => {
+        const live = heldRef.current;
+        return live !== null && !disabled && model.itemById(live.itemId)
+            ? live
+            : null;
+    }, [disabled, model]);
     const announce = useCallback((text) => {
         setAnnouncement((last) => ({ text, id: last.id + 1 }));
     }, []);
@@ -26,22 +45,24 @@ export function useScheduleCarry({ canDrop, columns, disabled, labels, model, on
         if (disabled || !item)
             return;
         setHeld({ itemId, mode });
-        announce(labels.pickedUp(item.label));
-    }, [announce, disabled, labels, model]);
+        announce(labels.pickedUp(item.label, mode));
+    }, [announce, disabled, labels, model, setHeld]);
     /** Puts the item back; returns where it is, for focus. */
     const cancel = useCallback(() => {
-        if (!carry)
-            return undefined;
+        const live = current();
         setHeld(null);
-        announce(labels.cancelled(model.itemById(carry.itemId).label));
-        return model.positionOf(carry.itemId);
-    }, [announce, carry, labels, model]);
+        if (!live)
+            return undefined;
+        announce(labels.cancelled(model.itemById(live.itemId).label));
+        return model.positionOf(live.itemId);
+    }, [announce, current, labels, model, setHeld]);
     /** Drops on a cell: moves, swaps, cancels on its own cell, or says why not. */
     const drop = useCallback((position) => {
-        if (!carry)
+        const live = current();
+        if (!live)
             return;
-        const item = model.itemById(carry.itemId);
-        const status = cellStatus(model, carry.itemId, position, canDrop);
+        const item = model.itemById(live.itemId);
+        const status = cellStatus(model, live.itemId, position, canDrop);
         if (status.kind === 'source') {
             cancel();
             return;
@@ -49,7 +70,7 @@ export function useScheduleCarry({ canDrop, columns, disabled, labels, model, on
         if (status.kind === 'blocked') {
             announce(status.reason);
             // A refused drag ends; keys and presses keep the item to try again.
-            if (carry.mode === 'drag')
+            if (live.mode === 'drag')
                 setHeld(null);
             return;
         }
@@ -66,13 +87,14 @@ export function useScheduleCarry({ canDrop, columns, disabled, labels, model, on
         announce,
         canDrop,
         cancel,
-        carry,
         columns,
+        current,
         labels,
         model,
         onMove,
         onSwap,
         rows,
+        setHeld,
     ]);
     return { announcement, cancel, carry, drop, pickUp };
 }

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-action.js

@@ -3,7 +3,7 @@ import { quietFill } from './quiet-fill.js';
  * The action sits after the row in its own column, centred on the row's
  * height, outside the row's press area, keeping the row's end padding
  * after it. Where :has() is supported the hover fill spans the whole item,
- * so the row and its action read as one line.
+ * so the row, its select and its action read as one line.
  */
 function actionRules() {
     return `.sw-fixture-action {
@@ -17,11 +17,11 @@ function actionRules() {
 
 @supports selector(:has(*)) {
   @media (hover: hover) {
-    .sw-fixture-item-action:has(> .sw-fixture-row-pressable:hover) {
+    :is(.sw-fixture-item-action, .sw-fixture-item-select):has(> .sw-fixture-row-pressable:hover) {
       background: ${quietFill};
     }
 
-    .sw-fixture-item-action > .sw-fixture-row-pressable:hover {
+    :is(.sw-fixture-item-action, .sw-fixture-item-select) > .sw-fixture-row-pressable:hover {
       background: transparent;
     }
   }

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-flag.js

@@ -53,7 +53,11 @@ ${fixtureFlagTones
   .sw-fixture-flag .sw-fixture-flag-mark { color: CanvasText; }
 }`;
 }
-/* Below `md` the flag leads the details' line; after the row's narrow rules. */
+/*
+ * Below `md` the flag leads the details' line; after the row's narrow
+ * rules. A row with no details' line there (no status, and no meta or one
+ * hidden below md) keeps the flag inline on its first line instead.
+ */
 function flagNarrowRules() {
     return `@media ${belowMd} {
   .sw-fixture-flag { grid-row: 2; }
@@ -63,6 +67,12 @@ function flagNarrowRules() {
   .sw-fixture-row-flagged .sw-fixture-end {
     padding-inline-start: calc(var(--sw-space-4) + var(--sw-space-2));
   }
+
+  .sw-fixture-row-flag-inline .sw-fixture-flag { grid-row: 1; }
+
+  .sw-fixture-row-flag-inline .sw-fixture-team-home {
+    padding-inline-start: calc(var(--sw-space-4) + var(--sw-space-2));
+  }
 }`;
 }
 /* FixtureRow's flag (see components/FixtureRow.tsx); after the row rules. */
@@ -74,6 +84,7 @@ ${flagNarrowRules()}`;
 export function fixtureFlagClassCatalog() {
     return [
         'sw-fixture-row-flagged',
+        'sw-fixture-row-flag-inline',
         'sw-fixture-flag',
         'sw-fixture-flag-mark',
         ...fixtureFlagTones.map((tone) => `sw-fixture-flag-${tone}`),

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[];