@scalewing/react 1.56.0 → 1.58.0

package/dist/components/field/field-props.d.ts

@@ -0,0 +1,82 @@
+import { type SpacingStep } from '@scalewing/tokens';
+import { type ReactNode } from 'react';
+import { type FieldWidth } from '../../css/css-field-width.js';
+import { type RequiredMark } from '../FieldLabelText.js';
+import { type FieldDescriptionTone } from './FieldDescription.js';
+import { type FieldVariant } from './field-checks.js';
+export type FieldSize = 'xs' | 'md';
+export type FieldProps = {
+    children: ReactNode;
+    gap?: SpacingStep;
+    label: string;
+    labelVisuallyHidden?: boolean;
+    size?: FieldSize;
+    description?: string;
+    /**
+     * `warning` draws `description` in the warning colour after a small alert
+     * glyph, for a hint that needs the person but is not an error, such as a
+     * value another row already has. It stays the control's description and
+     * sets no invalid state; `error` still replaces it. Default `muted`; an
+     * unknown tone throws a `RangeError`.
+     */
+    descriptionTone?: FieldDescriptionTone;
+    error?: string;
+    /**
+     * Marks the control invalid (`aria-invalid` and the danger border) without
+     * a message of its own, for a field whose error is shown elsewhere, such
+     * as one message under a group of fields. Point the control's
+     * `aria-describedby` at that message. `error` implies it. Passing
+     * `invalid`, even `false` but not `undefined`, requires one native control
+     * child from the first render.
+     */
+    invalid?: boolean;
+    /**
+     * Marks a value the person changed from a saved one, such as a field in a
+     * correction: the control's border (or an adorned frame's) in the accent
+     * color, thicker than the plain hairline, and its fill tinted with 12 % of
+     * the accent, so a changed field reads apart from the focused one (focus
+     * draws a ring and never tints). The value keeps 4.5:1 on the tint; while
+     * a placeholder shows, the fill stays plain. It is a cue, not the record:
+     * say what it was in `description` ("Was 25"). `invalid` and `error`
+     * win. Like `invalid`, passing it, even `false` but not `undefined`,
+     * requires one native control child from the first render.
+     */
+    changed?: boolean;
+    required?: boolean;
+    /**
+     * `hidden` leaves out the label's " *" while the control stays required
+     * (and announced so); `visible` (default) draws it.
+     * When hidden, say in visible text which fields must be filled; a
+     * placeholder alone is not enough.
+     */
+    requiredMark?: RequiredMark;
+    /** Short text inside the control frame before the value, such as a currency sign. Not part of the value. */
+    prefix?: string;
+    /** Short text inside the control frame after the value, such as a unit. Not part of the value. */
+    suffix?: string;
+    /**
+     * `outlined` (default) is the labelled form field. `search` is a search
+     * box: the label is not drawn (it stays the input's name), a `leading`
+     * glyph sits at the frame's start, the input is `type="search"`, and a
+     * clear button named `clearLabel` shows while the input holds text and
+     * is enabled; it calls `onClear` (set the value to `''`) and puts focus
+     * back in the input. Needs one native `input` child with a `value`.
+     */
+    variant?: FieldVariant;
+    /** A search field's glyph at its start, such as a magnifier; hidden from assistive technology. */
+    leading?: ReactNode;
+    /** A search field's clear button name, such as "Clear search". */
+    clearLabel?: string;
+    /** Called by a search field's clear button; the consumer empties the value. */
+    onClear?: () => void;
+    /**
+     * Caps the control's width at a Table column size (`xs` 4rem, `sm` 6rem,
+     * `md` 8rem, `lg` 12rem, `xl` 16rem), at the start of the column and
+     * never wider than it, so a short value such as a rate or a count does
+     * not stretch across a form. The label and messages keep the column's
+     * width. Left out, the control fills the column. It needs one native
+     * text input, select or textarea child (a `TypeError` otherwise); an
+     * unknown width throws a `RangeError`.
+     */
+    width?: FieldWidth;
+};

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

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/fixture/FixtureScoreBoxes.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/fixture/validate.js

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

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

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

package/dist/components/table/TableRow.js

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

package/dist/css/css-field-description.d.ts

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

package/dist/css/css-field-description.js

@@ -0,0 +1,39 @@
+import { spacingScale, typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+const glyphStep = 4;
+/*
+ * A warning description (`descriptionTone="warning"`): the description's
+ * caption type in the warning colour (4.5:1 on the canvas in both schemes),
+ * led by a space-4 alert glyph centred on its first line, so the hint reads
+ * apart from a muted one without colour too. It never touches the control:
+ * no invalid border, no ARIA state. In forced colours the words and the
+ * glyph take CanvasText, apart from an error's Mark.
+ */
+export function cssFieldDescriptionClasses() {
+    const glyphInset = (caption.lineHeight - spacingScale[glyphStep]) / 2;
+    return `.sw-field-description-warning {
+  align-items: flex-start;
+  color: var(--sw-color-warning);
+  display: flex;
+  gap: var(--sw-space-1);
+}
+
+.sw-field-description-glyph {
+  fill: none;
+  flex: none;
+  height: var(--sw-space-${glyphStep});
+  margin-block: ${glyphInset}px;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+  width: var(--sw-space-${glyphStep});
+}
+
+@media (forced-colors: active) {
+  .sw-field-description-warning { color: CanvasText; }
+}`;
+}
+export function fieldDescriptionClassCatalog() {
+    return ['sw-field-description-warning', 'sw-field-description-glyph'];
+}

package/dist/css/css-field.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { controlSurface, disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
 import { cssFieldChangedClasses } from './css-field-changed.js';
+import { cssFieldDescriptionClasses, fieldDescriptionClassCatalog, } from './css-field-description.js';
 import { cssFieldWidthClasses, fieldWidthClassCatalog, } from './css-field-width.js';
 import { cssFieldSearchClasses, fieldSearchClassCatalog, } from './css-field-search.js';
 const caption = typographyVariants.caption;
@@ -76,6 +77,8 @@ export function cssFieldClasses() {
 .sw-field-description { color: var(--sw-color-muted); }
 .sw-field-error { color: var(--sw-color-danger); }
 
+${cssFieldDescriptionClasses()}
+
 /* An error region is always rendered as a live region; empty, it leaves the layout (and its gap) but stays in the accessibility tree. */
 .sw-field-error:empty { position: absolute; }
 
@@ -106,6 +109,7 @@ export function fieldClassCatalog() {
         'sw-field',
         'sw-field-required',
         'sw-field-description',
+        ...fieldDescriptionClassCatalog(),
         'sw-field-error',
         'sw-field-invalid',
         'sw-field-changed',

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

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

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

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

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

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