@scalewing/react 1.61.0 → 1.62.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @scalewing/react
 
+## 1.62.1
+
+### Patch Changes
+
+- 1b9b367: `FixtureCard`'s enabled score boxes take the page's background, so an empty box stays visible on a tinted dark `Card` (FutMas F-010). `FixtureRow`'s boxes are unchanged.
+
+## 1.62.0
+
+### Minor Changes
+
+- 4585080: `FixtureCard`, one pairing as a small vertical scorecard for inside a `Card` (FutMas F-010, Scores redesign): an optional top line (`meta`, `menu`), the two sides with `note`s and a score box at each one's end, the score's polite error line, then `actions` and `detail`. It takes `FixtureRow`'s `FixtureScore` and the same boxes, needs no `FixtureGroup`, and draws no edge or fill. New exports: `FixtureCard`, `FixtureCardProps`, `FixtureCardSide`. New classes: `sw-fixture-card` and `sw-fixture-card-*`. Purely additive: `FixtureRow`'s output and CSS are unchanged.
+
 ## 1.61.0
 
 ### Minor Changes

package/README.md

@@ -47,6 +47,7 @@ import {
   DescriptionList,
   DescriptionItem,
   EmptyState,
+  FixtureCard,
   FixtureGroup,
   FixtureRow,
   ScheduleGrid,
@@ -1296,6 +1297,43 @@ When the real screenshot exists, a `PreviewImage` (`src`, `width`, `height`) hol
 </FixtureGroup>
 ```
 
+`FixtureCard` is one pairing as a small vertical scorecard, for a narrow column where `FixtureRow`'s boxes in the row's middle cannot fit. It draws no edge, fill or radius: it sits inside a `Card`, and you separate several with your own divider. It needs no `FixtureGroup`. `home` and `away` (`{ name, note? }`) are stacked, each name in body at weight 500 with its `note` under it in muted caption, and that side's score box at the end, the boxes in one column. Names wrap and never truncate. `score` is `FixtureRow`'s `FixtureScore`, with the same boxes and keys (digits only, selected on focus, Enter calls `onSubmit`, Escape calls `onCancel`, 32 px on a fine pointer, 44 px on a coarse one) and the same polite `error` line, here under the sides; the root is a group named by `score.label`. `meta` (caption size in the muted ink; a coloured `Text` inside it keeps its colour) and `menu` make a top line, drawn only with one of them; `actions` is a wrapping row under the sides and `detail` is under the actions with no type of its own, so give it a `Text`. A blank name or score label throws a `RangeError`.
+
+```tsx
+<Card padding={4}>
+  <Stack gap={3}>
+    <FixtureCard
+      meta="Sun, Oct 18"
+      menu={
+        <ActionMenu
+          label="More for Heron Marsh v Otter Pool"
+          items={items}
+          trigger={<Dots />}
+          triggerAppearance="icon"
+        />
+      }
+      home={{ name: 'Heron Marsh', note: 'North hide' }}
+      away={{ name: 'Otter Pool' }}
+      score={{
+        label: 'Count, Heron Marsh v Otter Pool',
+        home: { value: tally.home, label: 'Heron Marsh count' },
+        away: { value: tally.away, label: 'Otter Pool count' },
+        onChange: change,
+        onSubmit: record,
+        onCancel: reset,
+      }}
+      actions={
+        <Button size="sm" variant="neutral" onPress={record}>
+          Record
+        </Button>
+      }
+    />
+    <Separator decorative />
+    {/* the next FixtureCard */}
+  </Stack>
+</Card>
+```
+
 Muted words on a row's quiet fill: a pressable `FixtureRow` (and a detail under one with an `action` or `select`, which the fill spans), a pressable `ListRow` (hovered or pressed) and a `TableRow pressable` (hovered, pressed or with its action focused) show the quiet grey fill, on which the muted colour falls under 4.5:1 in most palettes (4.14:1 in `ink` light, 3.47:1 in `harvest` dark). While the fill shows, the parts on it read the muted token as the text colour, which keeps 4.5:1 there in every palette and scheme: the details, the meta, a muted `TableCell`, the chevron, and a consumer's `Text color="muted"` inside the row, with no prop and no change at rest. Toned words (a value's or a cell's success, danger or accent, a danger title, a Badge) keep their tone. Forced colours replace both colours and outline the hovered row in `Highlight`, as before.
 
 `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`.

package/dist/components/FixtureCard.d.ts

@@ -0,0 +1,11 @@
+import { type FixtureCardProps } from './fixture/types.js';
+export type { FixtureCardProps, FixtureCardSide } from './fixture/types.js';
+/**
+ * One fixture as a small vertical scorecard, for inside a `Card`: an
+ * optional top line, the two sides each with its score box at the end (the
+ * boxes in one column), the score's message, then `actions` and `detail`.
+ * It draws no edge or fill of its own, and the consumer separates several
+ * with its own divider. The boxes are FixtureRow's. The root is a group
+ * named by `score.label`. Invalid words or props throw a `RangeError`.
+ */
+export declare function FixtureCard(props: FixtureCardProps): import("react").JSX.Element;

package/dist/components/FixtureCard.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { FixtureScoreError } from './fixture/FixtureScoreBoxes.js';
+import { ScoreBox } from './fixture/ScoreBox.js';
+import { assertFixtureCard } from './fixture/validate-card.js';
+import { hasSlot } from './slot.js';
+/** One side's row: its name and note, then its score box at the end. */
+function CardSide({ errorId, place, score, side, }) {
+    return (_jsxs("div", { className: "sw-fixture-card-side", children: [_jsxs("div", { className: "sw-fixture-card-team", children: [_jsx("div", { className: "sw-fixture-card-name", children: side.name }), hasSlot(side.note) ? (_jsx("div", { className: "sw-fixture-card-note", children: side.note })) : null] }), _jsx(ScoreBox, { errorId: errorId, score: score, side: place })] }));
+}
+/**
+ * One fixture as a small vertical scorecard, for inside a `Card`: an
+ * optional top line, the two sides each with its score box at the end (the
+ * boxes in one column), the score's message, then `actions` and `detail`.
+ * It draws no edge or fill of its own, and the consumer separates several
+ * with its own divider. The boxes are FixtureRow's. The root is a group
+ * named by `score.label`. Invalid words or props throw a `RangeError`.
+ */
+export function FixtureCard(props) {
+    assertFixtureCard(props);
+    const errorId = useId();
+    const { actions, away, detail, home, menu, meta, score } = props;
+    const hasMeta = hasSlot(meta);
+    const hasMenu = hasSlot(menu);
+    return (_jsxs("div", { "aria-label": score.label, className: "sw-fixture-card", role: "group", children: [hasMeta || hasMenu ? (_jsxs("div", { className: "sw-fixture-card-top", children: [hasMeta ? _jsx("div", { className: "sw-fixture-card-meta", children: meta }) : null, hasMenu ? _jsx("div", { className: "sw-fixture-card-menu", children: menu }) : null] })) : null, _jsx(CardSide, { errorId: errorId, place: "home", score: score, side: home }), _jsx(CardSide, { errorId: errorId, place: "away", score: score, side: away }), _jsx(FixtureScoreError, { className: "sw-fixture-card-error", error: score.error, id: errorId }), hasSlot(actions) ? (_jsx("div", { className: "sw-fixture-card-actions", children: actions })) : null, hasSlot(detail) ? (_jsx("div", { className: "sw-fixture-card-detail", children: detail })) : null] }));
+}

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

@@ -1,19 +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.
+ * the away box, in a group named by `label`.
  */
 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.
+ * The score's message: a polite live region, present (and empty, taking no
+ * room) while there is no error, so a new one is said. `className` is where
+ * it is drawn: under a FixtureRow by default.
  */
-export declare function FixtureScoreError({ error, id, }: {
+export declare function FixtureScoreError({ className, error, id, }: {
+    className?: string;
     error: string | undefined;
     id: string;
 }): import("react").JSX.Element;

package/dist/components/fixture/FixtureScoreBoxes.js

@@ -1,57 +1,19 @@
 '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 }));
-}
+import { ScoreBox } from './ScoreBox.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.
+ * the away box, in a group named by `label`.
  */
 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')] }));
+    return (_jsxs("span", { "aria-label": score.label, className: cx('sw-fixture-center', 'sw-fixture-score'), role: "group", children: [_jsx(ScoreBox, { errorId: errorId, score: score, side: "home" }), _jsx("span", { "aria-hidden": "true", className: "sw-fixture-score-dash", children: "\u2013" }), _jsx(ScoreBox, { errorId: errorId, score: score, side: "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.
+ * The score's message: a polite live region, present (and empty, taking no
+ * room) while there is no error, so a new one is said. `className` is where
+ * it is drawn: under a FixtureRow by default.
  */
-export function FixtureScoreError({ error, id, }) {
-    return (_jsx("span", { "aria-live": "polite", className: "sw-fixture-score-error", id: id, children: error || null }));
+export function FixtureScoreError({ className = 'sw-fixture-score-error', error, id, }) {
+    return (_jsx("span", { "aria-live": "polite", className: className, id: id, children: error || null }));
 }

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

@@ -0,0 +1,19 @@
+import { type KeyboardEvent } from 'react';
+import { type FixtureScore, type FixtureScoreSide } from './types.js';
+/**
+ * Enter records and Escape puts the boxes back. A key that ends an IME
+ * composition is the composition's, not the row's.
+ */
+export declare function scoreKeyDown(score: FixtureScore): (event: KeyboardEvent<HTMLInputElement>) => void;
+/**
+ * One side's score box, wherever a fixture draws it: a text input named by
+ * the box's `label`, digits only (non-digits are dropped before `onChange`),
+ * its text selected on focus so a typed score replaces it. It is described
+ * by the score's error while there is one, and marked by its own `invalid`,
+ * else by any error.
+ */
+export declare function ScoreBox({ errorId, score, side, }: {
+    errorId: string;
+    score: FixtureScore;
+    side: FixtureScoreSide;
+}): import("react").JSX.Element;

package/dist/components/fixture/ScoreBox.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { scoreBoxMaxDigits, scoreDigits } from './score-digits.js';
+/**
+ * Enter records and Escape puts the boxes back. A key that ends an IME
+ * composition is the composition's, not the row's.
+ */
+export 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();
+        }
+    };
+}
+/**
+ * One side's score box, wherever a fixture draws it: a text input named by
+ * the box's `label`, digits only (non-digits are dropped before `onChange`),
+ * its text selected on focus so a typed score replaces it. It is described
+ * by the score's error while there is one, and marked by its own `invalid`,
+ * else by any error.
+ */
+export function ScoreBox({ errorId, score, side, }) {
+    const { invalid, label, ref, value } = score[side];
+    const hasError = Boolean(score.error);
+    const marked = invalid ?? hasError;
+    return (_jsx("input", { ref: ref, "aria-describedby": hasError ? errorId : undefined, "aria-invalid": marked || undefined, "aria-label": label, autoComplete: "off", className: "sw-fixture-score-box", disabled: score.disabled ?? false, inputMode: "numeric", maxLength: scoreBoxMaxDigits, onChange: (event) => {
+            const digits = scoreDigits(event.currentTarget.value);
+            if (digits !== value)
+                score.onChange(side, digits);
+        }, onFocus: (event) => event.currentTarget.select(), onKeyDown: scoreKeyDown(score), pattern: "[0-9]*", type: "text", value: value }));
+}

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

@@ -138,6 +138,32 @@ export type FixtureRowProps = {
      */
     'aria-label'?: string;
 };
+/** One side of a FixtureCard. */
+export type FixtureCardSide = {
+    name: string;
+    /** Muted words under the name, such as a side's form or a walkover. */
+    note?: ReactNode;
+};
+export type FixtureCardProps = {
+    home: FixtureCardSide;
+    away: FixtureCardSide;
+    /**
+     * The score boxes, one at each side's end. `label` names the card's group;
+     * `error` is said under the sides.
+     */
+    score: FixtureScore;
+    /**
+     * The start of the top line, such as the day: caption size in the muted
+     * ink. A coloured `Text` inside it keeps its own colour.
+     */
+    meta?: ReactNode;
+    /** The end of the top line, such as an icon `ActionMenu`. */
+    menu?: ReactNode;
+    /** Under the sides in a wrapping row, such as small neutral `Button`s. */
+    actions?: ReactNode;
+    /** Under the actions, such as a save message: no type of its own, so give it a `Text`. */
+    detail?: ReactNode;
+};
 export type FixtureGroupProps = {
     /** The run's caption, such as a date and a venue; it names the list. */
     title: string;

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

@@ -0,0 +1,3 @@
+import { type FixtureCardProps } from './types.js';
+/** Fails closed on a card it cannot name: a side without a name, or a score `assertFixtureScore` refuses. */
+export declare function assertFixtureCard({ away, home, score, }: FixtureCardProps): void;

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

@@ -0,0 +1,8 @@
+import { assertFixtureScore, isBlank } from './validate-score.js';
+/** Fails closed on a card it cannot name: a side without a name, or a score `assertFixtureScore` refuses. */
+export function assertFixtureCard({ away, home, score, }) {
+    const name = 'FixtureCard';
+    if (isBlank(home?.name) || isBlank(away?.name))
+        throw new RangeError(`${name} home and away need nonempty names`);
+    assertFixtureScore(name, score);
+}

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

@@ -1,10 +1,15 @@
-import { type FixtureRowProps } from './types.js';
+import { type FixtureRowProps, type FixtureScore } from './types.js';
+export declare function isBlank(words: unknown): boolean;
+/**
+ * Fails closed on 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. `name` is the component that was given it.
+ */
+export declare function assertFixtureScore(name: string, score: FixtureScore | undefined): void;
 /**
  * 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.
+ * target); or a score `assertFixtureScore` refuses.
  */
 export declare function assertFixtureMiddle({ center, centerKind, href, onPress, score, }: FixtureRowProps): void;

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

@@ -1,4 +1,4 @@
-function isBlank(words) {
+export function isBlank(words) {
     return typeof words !== 'string' || !words.trim();
 }
 function isBox(box) {
@@ -7,13 +7,26 @@ function isBox(box) {
         !isBlank(box.label) &&
         (box.invalid === undefined || typeof box.invalid === 'boolean'));
 }
+/**
+ * Fails closed on 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. `name` is the component that was given it.
+ */
+export function assertFixtureScore(name, score) {
+    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`);
+}
 /**
  * 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.
+ * target); or a score `assertFixtureScore` refuses.
  */
 export function assertFixtureMiddle({ center, centerKind, href, onPress, score, }) {
     const name = 'FixtureRow';
@@ -28,12 +41,5 @@ export function assertFixtureMiddle({ center, centerKind, href, onPress, score,
         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`);
+    assertFixtureScore(name, score);
 }

package/dist/components/fixture/validate.js

@@ -2,10 +2,7 @@ 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();
-}
+import { assertFixtureMiddle, isBlank } from './validate-score.js';
 /**
  * Fails closed on a row it cannot name or draw: a side without a name, a
  * middle `assertFixtureMiddle` refuses, an unknown centre kind or

package/dist/css/css-density.js

@@ -23,6 +23,7 @@ const compactRoot = "[data-theme][data-density='compact']";
  */
 const statedBodyControls = [
     '.sw-date-field-input',
+    '.sw-fixture-card-name',
     '.sw-fixture-score-box',
     '.sw-segmented-filled .sw-segmented-item',
     '.sw-stepper-input',

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

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

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

@@ -0,0 +1,131 @@
+import { typographyVariants } from '@scalewing/tokens';
+const body = typographyVariants.body;
+const caption = typographyVariants.caption;
+/*
+ * FixtureCard draws no edge, fill or radius: it sits inside a Card. The two
+ * side rows share one shape, a name column and an `auto` box column, so
+ * their boxes (FixtureRow's `sw-fixture-score-box`, 32 px on a fine pointer
+ * and 44 px on a coarse one, and FixtureRow's forced-colours rules with it)
+ * line up at the end. Names wrap and never truncate.
+ */
+function cardRules() {
+    return `.sw-fixture-card {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  min-width: 0;
+}
+
+.sw-fixture-card-top {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-2);
+  margin-block-end: var(--sw-space-2);
+}
+
+.sw-fixture-card-meta {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  min-width: 0;
+}
+
+.sw-fixture-card-menu {
+  flex: none;
+  margin-inline-start: auto;
+}
+
+.sw-fixture-card-side {
+  align-items: center;
+  column-gap: var(--sw-space-3);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.sw-fixture-card-side + .sw-fixture-card-side {
+  margin-block-start: var(--sw-space-2);
+}
+
+.sw-fixture-card-team {
+  min-width: 0;
+}
+
+.sw-fixture-card-name {
+  font-size: ${body.fontSize}px;
+  font-weight: 500;
+  letter-spacing: ${body.letterSpacing}px;
+  line-height: ${body.lineHeight}px;
+  overflow-wrap: anywhere;
+}
+
+.sw-fixture-card-note {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  overflow-wrap: anywhere;
+}`;
+}
+/*
+ * A box on the Card's surface would share its fill in a tinted dark palette
+ * and nearly vanish while empty, so it takes the page's. A disabled box keeps
+ * the canvas's disabled look.
+ */
+function boxRules() {
+    return `[data-theme] .sw-fixture-card input.sw-fixture-score-box:not(:disabled) {
+  background: var(--sw-color-background);
+}`;
+}
+/*
+ * The score's message is a live region, so it stays in place while empty; a
+ * block with no words has no height, and its margin comes only with words.
+ */
+function belowRules() {
+    return `.sw-fixture-card-error {
+  color: var(--sw-color-danger);
+  display: block;
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-fixture-card-error:not(:empty) {
+  margin-block-start: var(--sw-space-2);
+}
+
+.sw-fixture-card-actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  margin-block-start: var(--sw-space-3);
+}
+
+.sw-fixture-card-detail {
+  margin-block-start: var(--sw-space-2);
+  min-width: 0;
+}`;
+}
+/* FixtureCard (see components/FixtureCard.tsx); after the score's rules. */
+export function cssFixtureCardClasses() {
+    return `${cardRules()}
+
+${boxRules()}
+
+${belowRules()}`;
+}
+export function fixtureCardClassCatalog() {
+    return [
+        'sw-fixture-card',
+        'sw-fixture-card-top',
+        'sw-fixture-card-meta',
+        'sw-fixture-card-menu',
+        'sw-fixture-card-side',
+        'sw-fixture-card-team',
+        'sw-fixture-card-name',
+        'sw-fixture-card-note',
+        'sw-fixture-card-error',
+        'sw-fixture-card-actions',
+        'sw-fixture-card-detail',
+    ];
+}

package/dist/css/css-fixture.js

@@ -4,6 +4,7 @@ import { chevronStrokeIn } from './chevron.js';
 import { mutedReadsAsText, quietFill } from './quiet-fill.js';
 import { cssFixtureActionClasses, fixtureActionClassCatalog, } from './css-fixture-action.js';
 import { cssFixtureListRules, cssFixtureListSidesRules, } from './css-fixture-list.js';
+import { cssFixtureCardClasses, fixtureCardClassCatalog, } from './css-fixture-card.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';
@@ -219,6 +220,8 @@ ${cssFixtureActionClasses()}
 
 ${cssFixtureScoreClasses()}
 
+${cssFixtureCardClasses()}
+
 ${cssFixtureDetailClasses()}`;
 }
 export function fixtureClassCatalog() {
@@ -243,6 +246,7 @@ export function fixtureClassCatalog() {
         ...fixtureSelectClassCatalog(),
         ...fixtureActionClassCatalog(),
         ...fixtureScoreClassCatalog(),
+        ...fixtureCardClassCatalog(),
         ...fixtureDetailClassCatalog(),
     ];
 }

package/dist/index.d.ts

@@ -59,6 +59,7 @@ export { Split } from './components/Split.js';
 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 { FixtureCard, type FixtureCardProps, type FixtureCardSide, } from './components/FixtureCard.js';
 export { FixtureGroup, fixtureGroupSides, type FixtureGroupProps, type FixtureGroupSides, } from './components/FixtureGroup.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';

package/dist/index.js

@@ -56,6 +56,7 @@ export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export { Nav, navAppearances, } from './components/Nav.js';
 export { NavCount, navCountTones, } from './components/NavCount.js';
+export { FixtureCard, } from './components/FixtureCard.js';
 export { FixtureGroup, fixtureGroupSides, } from './components/FixtureGroup.js';
 export { FixtureRow, } from './components/FixtureRow.js';
 export { defaultScheduleGridLabels, ScheduleGrid, } from './components/ScheduleGrid.js';

package/dist/styles.css

@@ -3738,6 +3738,92 @@ button.sw-date-toggle-day[aria-disabled='true'] {
   .sw-fixture-score-dash { color: CanvasText; }
 }
 
+.sw-fixture-card {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  min-width: 0;
+}
+
+.sw-fixture-card-top {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-2);
+  margin-block-end: var(--sw-space-2);
+}
+
+.sw-fixture-card-meta {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  min-width: 0;
+}
+
+.sw-fixture-card-menu {
+  flex: none;
+  margin-inline-start: auto;
+}
+
+.sw-fixture-card-side {
+  align-items: center;
+  column-gap: var(--sw-space-3);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.sw-fixture-card-side + .sw-fixture-card-side {
+  margin-block-start: var(--sw-space-2);
+}
+
+.sw-fixture-card-team {
+  min-width: 0;
+}
+
+.sw-fixture-card-name {
+  font-size: 17px;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 25px;
+  overflow-wrap: anywhere;
+}
+
+.sw-fixture-card-note {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  overflow-wrap: anywhere;
+}
+
+[data-theme] .sw-fixture-card input.sw-fixture-score-box:not(:disabled) {
+  background: var(--sw-color-background);
+}
+
+.sw-fixture-card-error {
+  color: var(--sw-color-danger);
+  display: block;
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+.sw-fixture-card-error:not(:empty) {
+  margin-block-start: var(--sw-space-2);
+}
+
+.sw-fixture-card-actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  margin-block-start: var(--sw-space-3);
+}
+
+.sw-fixture-card-detail {
+  margin-block-start: var(--sw-space-2);
+  min-width: 0;
+}
+
 .sw-fixture-item-below > .sw-fixture-row {
   grid-row: 1;
 }
@@ -10946,7 +11032,7 @@ html:has(.sw-site-header-sticky) {
     line-height: 22px;
   }
 
-  [data-theme][data-density='compact'] :is(.sw-date-field-input, .sw-fixture-score-box, .sw-segmented-filled .sw-segmented-item, .sw-stepper-input, .sw-stepper-unit) {
+  [data-theme][data-density='compact'] :is(.sw-date-field-input, .sw-fixture-card-name, .sw-fixture-score-box, .sw-segmented-filled .sw-segmented-item, .sw-stepper-input, .sw-stepper-unit) {
     font-size: 15px;
     letter-spacing: -0.2px;
     line-height: 22px;

package/package.json

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