@scalewing/react 1.60.0 → 1.61.0

package/dist/components/description-list-layout.d.ts

@@ -8,3 +8,12 @@ export declare const descriptionListLayouts: readonly ["columns", "spread"];
 export type DescriptionListLayout = (typeof descriptionListLayouts)[number];
 /** Fails closed on a layout the list cannot draw. */
 export declare function assertDescriptionListLayout(layout: unknown): void;
+/**
+ * A fixed term column, so details line up across several lists on a page:
+ * `sm` 8rem, `md` 12rem, `lg` 16rem, from `md` up and never more than half
+ * the list. Only with the `columns` layout.
+ */
+export declare const descriptionListTermWidths: readonly ["sm", "md", "lg"];
+export type DescriptionListTermWidth = (typeof descriptionListTermWidths)[number];
+/** Fails closed on a term width the list cannot draw. */
+export declare function assertDescriptionListTermWidth(termWidth: unknown, layout: DescriptionListLayout): void;

package/dist/components/description-list-layout.js

@@ -11,3 +11,18 @@ export function assertDescriptionListLayout(layout) {
     if (!isOneOf(descriptionListLayouts, layout))
         throw new RangeError(`Unknown DescriptionList layout: ${String(layout)}`);
 }
+/**
+ * A fixed term column, so details line up across several lists on a page:
+ * `sm` 8rem, `md` 12rem, `lg` 16rem, from `md` up and never more than half
+ * the list. Only with the `columns` layout.
+ */
+export const descriptionListTermWidths = ['sm', 'md', 'lg'];
+/** Fails closed on a term width the list cannot draw. */
+export function assertDescriptionListTermWidth(termWidth, layout) {
+    if (termWidth === undefined)
+        return;
+    if (!isOneOf(descriptionListTermWidths, termWidth))
+        throw new RangeError(`Unknown DescriptionList termWidth: ${String(termWidth)}`);
+    if (layout !== 'columns')
+        throw new RangeError('DescriptionList termWidth needs the columns layout');
+}

package/dist/components/filter-chips/options.d.ts

@@ -1,4 +1,6 @@
+import { filterChipsSelectedStyles, type FilterChipsSelectedStyle } from '../../css/css-filter-chips.js';
 import { type RequiredMark } from '../FieldLabelText.js';
+export { filterChipsSelectedStyles, type FilterChipsSelectedStyle };
 /**
  * A chip's colour while it is not chosen: `neutral` (the default), the
  * glass chip; `warning`, the warning tint with its words in the warning
@@ -72,6 +74,14 @@ export type FilterChipsProps = FilterChipsChoice & {
     requiredMark?: RequiredMark;
     countAppearance?: FilterChipCountAppearance;
     overflow?: FilterChipsOverflow;
+    /**
+     * How a chosen chip looks: `solid` (the default) is the accent fill;
+     * `subtle` is the accent's quiet tint with the accent's ink inside an accent
+     * edge (4.5:1 in every palette), for a page where a chosen filter should
+     * not outweigh the page's primary action. Forced colours draw either in
+     * Highlight.
+     */
+    selectedStyle?: FilterChipsSelectedStyle;
     /**
      * A message under the chips, such as "Pick a reason": a polite live
      * region linked to the group by `aria-describedby`; the group is marked
@@ -82,4 +92,3 @@ export type FilterChipsProps = FilterChipsChoice & {
     /** More ids that describe the group, such as a hint beside it. */
     'aria-describedby'?: string;
 };
-export {};

package/dist/components/filter-chips/options.js

@@ -1,3 +1,5 @@
+import { filterChipsSelectedStyles, } from '../../css/css-filter-chips.js';
+export { filterChipsSelectedStyles };
 /**
  * A chip's colour while it is not chosen: `neutral` (the default), the
  * glass chip; `warning`, the warning tint with its words in the warning

package/dist/components/filter-chips/validate.d.ts

@@ -2,8 +2,8 @@ import { type FilterChipsProps } from './options.js';
 /**
  * Fails closed on chips it cannot draw: an empty label, no options, blank
  * or repeated values, a chosen value that is no option, a count that is
- * not a whole number from 0, an unknown chip tone, count appearance or
- * overflow, and a multiple choice asked to be required or given a value
+ * not a whole number from 0, an unknown chip tone, count appearance,
+ * overflow or selected style, and a multiple choice asked to be required or given a value
  * that is not a list.
  */
 export declare function assertFilterChips(props: FilterChipsProps): void;

package/dist/components/filter-chips/validate.js

@@ -1,5 +1,5 @@
 import { assertRequiredMark } from '../FieldLabelText.js';
-import { filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './options.js';
+import { filterChipCountAppearances, filterChipsOverflows, filterChipsSelectedStyles, filterChipTones, } from './options.js';
 function isCount(count) {
     return count === undefined || (Number.isInteger(count) && count >= 0);
 }
@@ -11,8 +11,8 @@ function chosenValues(props) {
 /**
  * Fails closed on chips it cannot draw: an empty label, no options, blank
  * or repeated values, a chosen value that is no option, a count that is
- * not a whole number from 0, an unknown chip tone, count appearance or
- * overflow, and a multiple choice asked to be required or given a value
+ * not a whole number from 0, an unknown chip tone, count appearance,
+ * overflow or selected style, and a multiple choice asked to be required or given a value
  * that is not a list.
  */
 export function assertFilterChips(props) {
@@ -49,4 +49,7 @@ export function assertFilterChips(props) {
     const overflow = props.overflow ?? 'wrap';
     if (!filterChipsOverflows.includes(overflow))
         throw new RangeError(`Unknown FilterChips overflow: ${String(overflow)}`);
+    const selectedStyle = props.selectedStyle ?? 'solid';
+    if (!filterChipsSelectedStyles.includes(selectedStyle))
+        throw new RangeError(`Unknown FilterChips selectedStyle: ${String(selectedStyle)}`);
 }

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

@@ -2,6 +2,7 @@ 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';
+import { type FixtureGroupSides } from '../../css/css-fixture-list.js';
 /** One side of a fixture: its name and an optional decorative mark (a crest). */
 export type FixtureSide = {
     name: string;
@@ -146,6 +147,15 @@ export type FixtureGroupProps = {
      * the game and its day. Default `false`.
      */
     titleHidden?: boolean;
+    /**
+     * `fluid` (the default): the sides share the row, so the centre moves with
+     * the run's width. `fixed`: from `md` the sides are at most 16rem each and
+     * the end column takes the rest, its details and action at the row's end,
+     * so the score sits at the same place in every run of the same width on a
+     * page (a run with a `select` starts one box later). Below `md` both are
+     * the same.
+     */
+    sides?: FixtureGroupSides;
     /** The run's FixtureRows. */
     children: ReactNode;
 };

package/dist/css/breakpoints.d.ts

@@ -7,7 +7,8 @@ export declare const breakpoints: Breakpoint[];
 /**
  * The breakpoints `hideBelow` and `hideFrom` take: `md`, and `lg` (64rem)
  * for content that fits only from a laptop up, such as a row of labelled
- * destinations a tablet shows as glyphs. The layout props (`columnsBelow`,
+ * destinations a tablet shows as glyphs, and `Grid rail` takes them for a rail
+ * that needs a laptop's room. The other layout props (`columnsBelow`,
  * `stickyBelow`, `verticalFrom`, …) keep the one layout breakpoint.
  */
 export declare const visibilityBreakpointScale: {

package/dist/css/breakpoints.js

@@ -6,7 +6,8 @@ export const breakpoints = Object.keys(breakpointScale);
 /**
  * The breakpoints `hideBelow` and `hideFrom` take: `md`, and `lg` (64rem)
  * for content that fits only from a laptop up, such as a row of labelled
- * destinations a tablet shows as glyphs. The layout props (`columnsBelow`,
+ * destinations a tablet shows as glyphs, and `Grid rail` takes them for a rail
+ * that needs a laptop's room. The other layout props (`columnsBelow`,
  * `stickyBelow`, `verticalFrom`, …) keep the one layout breakpoint.
  */
 export const visibilityBreakpointScale = {

package/dist/css/css-app-shell.d.ts

@@ -1,3 +1,9 @@
+/** `container` centres the page beside the sidebar at the container width. */
+export declare const appShellContentMaxWidths: readonly ["none", "container"];
+export type AppShellContentMaxWidth = (typeof appShellContentMaxWidths)[number];
+/** The sidebar's and the drawer's fill. */
+export declare const appShellSidebarTones: readonly ["surface", "subtle"];
+export type AppShellSidebarTone = (typeof appShellSidebarTones)[number];
 /** From this width up AppShell draws its full sidebar; script reads it too. */
 export declare const appShellWideQuery = "(min-width: 75rem)";
 export declare function cssAppShellClasses(): string;

package/dist/css/css-app-shell.js

@@ -4,6 +4,10 @@ import { appShellNavClassCatalog, cssAppShellNavClasses, cssAppShellRailNavRules
 import { appShellPageBarClassCatalog, cssAppShellPageBarClasses, } from './css-app-shell-page-bar.js';
 import { appShellSkipLinkClassCatalog, cssAppShellSkipLinkRules, } from './css-app-shell-skip-link.js';
 import { iconButtonRules } from './css-icon-button.js';
+/** `container` centres the page beside the sidebar at the container width. */
+export const appShellContentMaxWidths = ['none', 'container'];
+/** The sidebar's and the drawer's fill. */
+export const appShellSidebarTones = ['surface', 'subtle'];
 /*
  * The width from which AppShell's sidebar is full rather than a rail: an
  * internal media query of the component, not a public breakpoint (the
@@ -109,6 +113,18 @@ ${cssAppShellRailNavRules('    ')}
   }
 }`;
 }
+/*
+ * `sidebarTone="subtle"`: the sidebar and the drawer on the subtle fill, a
+ * class more than their own surface rules. The words keep 4.5:1 there in
+ * every palette: the text colour, a group's muted caption, and the text
+ * colour on the current link's fill over the grey (tested in every theme).
+ * Forced colours replace the fill.
+ */
+function sidebarToneRules() {
+    return `.sw-app-shell-sidebar-subtle :is(.sw-app-shell-sidebar, .sw-app-shell-drawer) {
+  background: var(--sw-color-subtle);
+}`;
+}
 /*
  * AppShell: a workspace frame with a pinned side navigation (see
  * components/AppShell.tsx). The links, groups and the rail's nav are
@@ -137,7 +153,9 @@ ${sidebarRules()}
 
 ${cssAppShellDrawerClasses()}
 
-${cssAppShellSkipLinkRules()}`;
+${cssAppShellSkipLinkRules()}
+
+${sidebarToneRules()}`;
 }
 export function appShellClassCatalog() {
     return [
@@ -148,6 +166,7 @@ export function appShellClassCatalog() {
         'sw-app-shell-bar-end',
         'sw-app-shell-main',
         'sw-app-shell-sidebar',
+        'sw-app-shell-sidebar-subtle',
         'sw-app-shell-slot',
         'sw-app-shell-rail-slot',
         'sw-app-shell-header',

package/dist/css/css-button.js

@@ -1,4 +1,4 @@
-import { buttonSizes, buttonVariants, controlScale, typographyVariants, } from '@scalewing/tokens';
+import { buttonSizes, buttonVariants, typographyVariants, } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { buttonGroupAttachedClassCatalog, cssButtonGroupAttachedClasses, } from './css-button-group-attached.js';
 import { buttonWidthClassCatalog, cssButtonWidthClasses, } from './css-button-width.js';
@@ -84,19 +84,17 @@ function ariaDisabledForcedRules() {
 }`;
 }
 /*
- * Each size's height and side padding for a fine pointer, then the
- * comfortable touch target (44 px both ways, the md control height) for
- * every size on a coarse pointer, so an xs or sm Button in a table row or a
- * checklist is still easy to tap. Its look stays the size's (padding and
- * type); only the minimum box grows. The coarse rule follows the sizes,
- * which it outranks only by order.
+ * Each size's height and side padding for a fine pointer, from the control
+ * variables (which the compact density restates), then the comfortable
+ * touch target (44 px both ways, the md control height) for every size on a
+ * coarse pointer, so an xs or sm Button in a table row or a checklist is
+ * still easy to tap. Its look stays the size's (padding and type); only the
+ * minimum box grows. The coarse rule follows the sizes, which it outranks
+ * only by order.
  */
 function sizeRules() {
     const sizes = buttonSizes
-        .map((size) => {
-        const control = controlScale[size];
-        return `.sw-button-${size} { min-height: ${control.minHeight}px; padding-inline: ${control.paddingInline}px; }`;
-    })
+        .map((size) => `.sw-button-${size} { min-height: var(--sw-control-${size}-min-height); padding-inline: var(--sw-control-${size}-padding-inline); }`)
         .join('\n');
     return `${sizes}
 @media ${coarsePointerQuery} {

package/dist/css/css-components.js

@@ -57,6 +57,7 @@ import { cssSeparatorClasses } from './css-separator.js';
 import { cssBandClasses } from './css-band.js';
 import { cssScreenPreviewClasses } from './css-screen-preview.js';
 import { cssHeroClasses } from './css-hero.js';
+import { cssPageHeaderClasses } from './css-page-header.js';
 import { cssSiteFooterClasses } from './css-site-footer.js';
 import { cssSiteHeaderClasses } from './css-site-header.js';
 import { cssStatTileClasses } from './css-stat-tile.js';
@@ -74,6 +75,7 @@ import { cssTaskListClasses } from './css-task-list.js';
 import { cssToastClasses } from './css-toast.js';
 import { cssToastCardClasses } from './css-toast-card.js';
 import { cssBoxBorderClasses } from './css-box-border.js';
+import { cssDensityClasses } from './css-density.js';
 import { cssPopupHostRules } from './stacking.js';
 /*
  * Reduce Transparency swaps every glass surface for the solid surface. It is
@@ -215,6 +217,8 @@ ${cssScreenPreviewClasses()}
 
 ${cssHeroClasses()}
 
+${cssPageHeaderClasses()}
+
 ${cssSiteFooterClasses()}
 
 ${cssSiteHeaderClasses()}
@@ -298,5 +302,7 @@ ${cssResponsiveClasses()}
 
 ${cssBoxBorderClasses()}
 
+${cssDensityClasses()}
+
 ${reducedTransparencyRules()}`;
 }

package/dist/css/css-density.d.ts

@@ -0,0 +1,9 @@
+/**
+ * How tightly the themed root draws its controls: `comfortable` (the
+ * default) is the touch-sized scale; `compact` (opt-in, on a fine pointer
+ * only) is a desktop data tool's smaller controls and reading text.
+ */
+export declare const themeDensities: readonly ["comfortable", "compact"];
+export type ThemeDensity = (typeof themeDensities)[number];
+export declare function assertThemeDensity(density: unknown): asserts density is ThemeDensity;
+export declare function cssDensityClasses(): string;

package/dist/css/css-density.js

@@ -0,0 +1,95 @@
+import { compactControlScale, compactFilterChipMinHeight, typographyVariants, } from '@scalewing/tokens';
+import { tableRowLineVariable } from './css-table-metrics.js';
+import { finePointerQuery } from './touch-target.js';
+/**
+ * How tightly the themed root draws its controls: `comfortable` (the
+ * default) is the touch-sized scale; `compact` (opt-in, on a fine pointer
+ * only) is a desktop data tool's smaller controls and reading text.
+ */
+export const themeDensities = ['comfortable', 'compact'];
+export function assertThemeDensity(density) {
+    if (!themeDensities.includes(density))
+        throw new RangeError(`Unknown ThemeProvider density: ${String(density)}`);
+}
+/**
+ * The compact themed root. Two attributes outrank the `[data-theme]` block
+ * that declares the comfortable values, in any order.
+ */
+const compactRoot = "[data-theme][data-density='compact']";
+/*
+ * The controls that state the body size for their own words rather than
+ * inherit it, which would otherwise stand 2 px over a compact Field beside
+ * them. An xs segmented track states its own caption size and stays.
+ */
+const statedBodyControls = [
+    '.sw-date-field-input',
+    '.sw-fixture-score-box',
+    '.sw-segmented-filled .sw-segmented-item',
+    '.sw-stepper-input',
+    '.sw-stepper-unit',
+].join(', ');
+function compactControlDeclarations() {
+    return Object.entries(compactControlScale)
+        .flatMap(([size, value]) => [
+        `    --sw-control-${size}-min-height: ${value.minHeight}px;`,
+        `    --sw-control-${size}-padding-inline: ${value.paddingInline}px;`,
+    ])
+        .join('\n');
+}
+function bodySmDeclarations(indent) {
+    const { fontSize, letterSpacing, lineHeight } = typographyVariants.bodySm;
+    return [
+        `font-size: ${fontSize}px;`,
+        `letter-spacing: ${letterSpacing}px;`,
+        `line-height: ${lineHeight}px;`,
+    ]
+        .map((line) => `${indent}${line}`)
+        .join('\n');
+}
+/*
+ * `ThemeProvider density="compact"`, and everything it changes, on a fine
+ * pointer only: a touch screen keeps the comfortable scale, its 44 px
+ * targets (`touchTarget` reads the md variable) included, and a coarse rule
+ * never runs where these do.
+ *
+ * Every size-aware rule reads the control variables, so restating them here
+ * moves them all, and geometry derived from them (the rail's width, a page
+ * bar's clearance, a calendar's days) moves in step. The themed root's own
+ * type steps to `bodySm`, so what inherits it follows: a table's cells, a
+ * field's label and its control's words (the same in a Card and outside
+ * one). `Text`'s default `body` variant states its own size, so it follows
+ * only where the reading text is asked for: in a Card, a Table and a
+ * DescriptionList. A rail's smaller link would bury its glyph under the count
+ * pill, so the pill moves out into the gutter (the full sidebar's is in flow,
+ * where this has no effect).
+ */
+export function cssDensityClasses() {
+    return `@media ${finePointerQuery} {
+  ${compactRoot} {
+${compactControlDeclarations()}
+    --sw-filter-chip-min-height: ${compactFilterChipMinHeight}px;
+${bodySmDeclarations('    ')}
+  }
+
+  ${compactRoot} :is(.sw-card, .sw-table, .sw-description-list) .sw-text-body {
+${bodySmDeclarations('    ')}
+  }
+
+  ${compactRoot} :is(${statedBodyControls}) {
+${bodySmDeclarations('    ')}
+  }
+
+  ${compactRoot} .sw-table-bounded {
+    ${tableRowLineVariable}: ${typographyVariants.bodySm.lineHeight}px;
+  }
+
+  ${compactRoot} .sw-card {
+    border-radius: var(--sw-radius-md);
+  }
+
+  ${compactRoot} .sw-app-shell-sidebar .sw-app-shell-count {
+    inset-block-start: calc(-1 * var(--sw-space-1));
+    inset-inline-end: calc(-1 * var(--sw-space-2));
+  }
+}`;
+}

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

@@ -1,4 +1,22 @@
 import { breakpointQuery } from './breakpoints.js';
+/** The fixed term columns of `termWidth`, a named geometry of this list. */
+const termWidths = { sm: '8rem', md: '12rem', lg: '16rem' };
+function termWidthClass(width) {
+    return `sw-description-list-term-${width}`;
+}
+/*
+ * From `md` only, where the list has a term column at all; below it the
+ * base rule stacks each term over its detail. The column never takes more
+ * than half the list, so a narrow card keeps room for its details.
+ */
+function termWidthRules() {
+    const widths = Object.entries(termWidths);
+    return `@media ${breakpointQuery('from', 'md')} {
+${widths
+        .map(([width, size]) => `  .${termWidthClass(width)} { grid-template-columns: min(${size}, 50%) minmax(0, 1fr); }`)
+        .join('\n')}
+}`;
+}
 /*
  * A spread list sets each row on its own two columns, at every width: the
  * term fits its words up to half the row at the start, and the detail
@@ -72,6 +90,8 @@ export function cssDescriptionListClasses() {
 
 ${spreadRules()}
 
+${termWidthRules()}
+
 @media (forced-colors: active) {
   .sw-description-item + .sw-description-item { border-top-color: CanvasText; }
 }`;
@@ -80,6 +100,7 @@ export function descriptionListClassCatalog() {
     return [
         'sw-description-list',
         'sw-description-list-spread',
+        ...Object.keys(termWidths).map(termWidthClass),
         'sw-description-item',
         'sw-description-term',
         'sw-description-detail',

package/dist/css/css-filter-chips.d.ts

@@ -1,2 +1,10 @@
+/**
+ * How a chosen chip looks: `solid` (the default) is the accent fill with its
+ * on-colour words; `subtle` is the accent's quiet tint with the accent's
+ * words inside an accent edge, for a page where the chosen chip should not
+ * outweigh the page's primary action.
+ */
+export declare const filterChipsSelectedStyles: readonly ["solid", "subtle"];
+export type FilterChipsSelectedStyle = (typeof filterChipsSelectedStyles)[number];
 export declare function cssFilterChipsClasses(): string;
 export declare function filterChipsClassCatalog(): string[];

package/dist/css/css-filter-chips.js

@@ -1,10 +1,38 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { toneTintFill, toneTintInk } from './tone-tint.js';
 import { cssFilterChipToneClasses, filterChipToneClassCatalog, } from './css-filter-chip-tones.js';
 import { cssFilterChipsLayoutClasses, filterChipsLayoutClassCatalog, } from './css-filter-chips-layout.js';
 import { cssFilterChipsRowClasses, filterChipsRowClassCatalog, } from './css-filter-chips-row.js';
 const label = typographyVariants.label;
 const data = typographyVariants.data;
 const caption = typographyVariants.caption;
+/**
+ * How a chosen chip looks: `solid` (the default) is the accent fill with its
+ * on-colour words; `subtle` is the accent's quiet tint with the accent's
+ * words inside an accent edge, for a page where the chosen chip should not
+ * outweigh the page's primary action.
+ */
+export const filterChipsSelectedStyles = ['solid', 'subtle'];
+/*
+ * The compact density's chip height (`--sw-filter-chip-min-height`, set only
+ * there), else the md control's.
+ */
+const chipMinHeight = 'var(--sw-filter-chip-min-height, var(--sw-control-md-min-height))';
+/*
+ * `selectedStyle="subtle"`. The words are the accent's ink, the accent moved
+ * toward the text colour, a Notice's way with a tint: the bare accent falls
+ * to 4.24:1 on the tint in harvest dark, and the ink keeps 4.5:1 in every
+ * palette. `:where()` holds the rule at the chosen chip's own specificity, so
+ * what follows it wins as it does over the accent fill: an error's danger
+ * edge and the forced colours' Highlight.
+ */
+function selectedSubtleRules() {
+    return `:where(.sw-filter-chips-selected-subtle) .sw-filter-chip-input:checked + .sw-filter-chip-face {
+  background: ${toneTintFill('accent')};
+  border-color: var(--sw-color-accent);
+  color: ${toneTintInk('accent')};
+}`;
+}
 export function cssFilterChipsClasses() {
     return `.sw-filter-chips {
   border: 0;
@@ -52,13 +80,14 @@ export function cssFilterChipsClasses() {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
   color: var(--sw-color-text);
   display: inline-flex;
   font-family: var(--sw-font-sans);
   font-size: ${label.fontSize}px;
   gap: var(--sw-space-2);
   line-height: ${label.lineHeight}px;
-  min-height: var(--sw-control-md-min-height);
+  min-height: ${chipMinHeight};
   min-width: 0;
   overflow-wrap: anywhere;
   padding: var(--sw-space-1) var(--sw-space-3);
@@ -91,6 +120,8 @@ export function cssFilterChipsClasses() {
   color: var(--sw-color-onAccent);
 }
 
+${selectedSubtleRules()}
+
 .sw-filter-chip-input:checked + .sw-filter-chip-face .sw-filter-chip-count {
   color: inherit;
 }
@@ -153,6 +184,9 @@ export function filterChipsClassCatalog() {
         'sw-filter-chip-face',
         'sw-filter-chip-count',
         'sw-filter-chip-quiet',
+        ...filterChipsSelectedStyles
+            .filter((style) => style !== 'solid')
+            .map((style) => `sw-filter-chips-selected-${style}`),
         'sw-filter-chips-error',
         ...filterChipsLayoutClassCatalog(),
         ...filterChipToneClassCatalog(),

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

@@ -1 +1,11 @@
+/**
+ * How a FixtureGroup's sides take the row: `fluid` (the default) share all
+ * of it, so the centre sits in the middle of whatever is left; `fixed` are
+ * at most 16rem each, the end column taking the rest, so the centre sits at
+ * the same place in every run on a page.
+ */
+export declare const fixtureGroupSides: readonly ["fluid", "fixed"];
+export type FixtureGroupSides = (typeof fixtureGroupSides)[number];
 export declare function cssFixtureListRules(): string;
+/** After the row's narrow and fallback rules, which `fixed` outranks only from md. */
+export declare function cssFixtureListSidesRules(): string;

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

@@ -1,5 +1,39 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
 const caption = typographyVariants.caption;
+/**
+ * How a FixtureGroup's sides take the row: `fluid` (the default) share all
+ * of it, so the centre sits in the middle of whatever is left; `fixed` are
+ * at most 16rem each, the end column taking the rest, so the centre sits at
+ * the same place in every run on a page.
+ */
+export const fixtureGroupSides = ['fluid', 'fixed'];
+const fixedSide = 'minmax(0, 16rem)';
+/*
+ * The centre's least width in a `fixed` run: an `auto` column alone is as
+ * wide as its widest centre, which differs between a run of scores and a run
+ * of kickoff times and would move the centres apart. This holds either, and
+ * two score boxes, with its margins.
+ */
+const fixedCentre = 'minmax(7rem, auto)';
+/*
+ * From \`md\` only: below it the narrow rules' columns stand, the end on a
+ * second line. Without subgrid each row is its own grid of the same fixed
+ * columns, which line up on their own.
+ */
+function fixedSidesRules() {
+    return `@media ${breakpointQuery('from', 'md')} {
+  .sw-fixture-list-sides-fixed {
+    grid-template-columns: auto ${fixedSide} ${fixedCentre} ${fixedSide} 1fr auto auto;
+  }
+
+  @supports not (grid-template-columns: subgrid) {
+    .sw-fixture-list-sides-fixed .sw-fixture-row {
+      grid-template-columns: ${fixedSide} ${fixedCentre} ${fixedSide} 1fr auto;
+    }
+  }
+}`;
+}
 /*
  * 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
@@ -48,3 +82,7 @@ export function cssFixtureListRules() {
   border-top: 1px solid var(--sw-color-border);
 }`;
 }
+/** After the row's narrow and fallback rules, which `fixed` outranks only from md. */
+export function cssFixtureListSidesRules() {
+    return fixedSidesRules();
+}

package/dist/css/css-fixture.js

@@ -3,7 +3,7 @@ import { breakpointQuery } from './breakpoints.js';
 import { chevronStrokeIn } from './chevron.js';
 import { mutedReadsAsText, quietFill } from './quiet-fill.js';
 import { cssFixtureActionClasses, fixtureActionClassCatalog, } from './css-fixture-action.js';
-import { cssFixtureListRules } from './css-fixture-list.js';
+import { cssFixtureListRules, cssFixtureListSidesRules, } from './css-fixture-list.js';
 import { cssFixtureDetailClasses, fixtureDetailClassCatalog, } from './css-fixture-detail.js';
 import { cssFixtureFlagClasses, fixtureFlagClassCatalog, } from './css-fixture-flag.js';
 import { cssFixtureScoreClasses, fixtureScoreClassCatalog, } from './css-fixture-score.js';
@@ -209,6 +209,8 @@ ${narrowRules()}
 
 ${fallbackRules()}
 
+${cssFixtureListSidesRules()}
+
 ${cssFixtureFlagClasses()}
 
 ${cssFixtureSelectClasses()}
@@ -224,6 +226,7 @@ export function fixtureClassCatalog() {
         'sw-fixture-group',
         'sw-fixture-group-title',
         'sw-fixture-list',
+        'sw-fixture-list-sides-fixed',
         'sw-fixture-item',
         'sw-fixture-row',
         'sw-fixture-row-pressable',

package/dist/css/css-glyph-tile.js

@@ -1,4 +1,4 @@
-import { categoricalColorKeys } from '@scalewing/tokens';
+import { categoricalColorKeys, controlScale } from '@scalewing/tokens';
 export const glyphTileSizes = ['sm', 'md', 'lg'];
 /** The most letters a tile holds, such as a three-letter crest ("NSL"). */
 export const glyphTileLetterLimit = 3;
@@ -10,9 +10,13 @@ export const glyphTileLetterLimit = 3;
  * the mix, 5.08:1). A glyph keeps the fill as it is.
  */
 export const glyphTileLetterDarken = 0.25;
+/*
+ * `md` reads the token, not the variable: a tile holds up to three letters,
+ * which a compact density's smaller xs control would crowd.
+ */
 const tileSide = {
     sm: 'var(--sw-space-5)',
-    md: 'var(--sw-control-xs-min-height)',
+    md: `${controlScale.xs.minHeight}px`,
     lg: 'var(--sw-space-6)',
 };
 function hueRules() {

package/dist/css/css-grid-span.js

@@ -1,5 +1,5 @@
 import { breakpointQuery, breakpoints } from './breakpoints.js';
-import { gridColumnCounts, gridColumnsBelowClass, gridColumnsClass, gridFitClass, gridFits, } from './css-grid.js';
+import { gridColumnCounts, gridColumnsBelowClass, gridColumnsClass, gridFitClass, gridFits, gridRailClass, gridRails, } from './css-grid.js';
 export const gridColumnSpans = gridColumnCounts;
 export function gridSpanClass(span) {
     return `sw-grid-span-${span}`;
@@ -22,8 +22,13 @@ export function cssGridSpanClasses() {
     const spans = gridColumnSpans.map((span) => spanRule(`.${gridSpanClass(span)}`, span));
     const caps = gridColumnCounts.flatMap((columns) => widerSpans(columns).map((span) => capRule(gridColumnsClass(columns), columns, span)));
     // A fitted grid's column count follows its width, so a span there would
-    // add implicit columns: its children each take one column.
-    const fitted = gridFits.flatMap((fit) => widerSpans(1).map((span) => `:where(.${gridFitClass(fit)}) > .${gridSpanClass(span)} { grid-column: auto; }`));
+    // add implicit columns: its children each take one column. A rail grid's
+    // two columns are not interchangeable, so the same holds there.
+    const oneColumnEach = [
+        ...gridFits.map(gridFitClass),
+        ...gridRails.map(gridRailClass),
+    ];
+    const fitted = oneColumnEach.flatMap((gridClass) => widerSpans(1).map((span) => `:where(.${gridClass}) > .${gridSpanClass(span)} { grid-column: auto; }`));
     // Below a breakpoint every span wider than one is restated for the phone
     // column count, which also undoes a desktop cap when that count is larger.
     const below = breakpoints.map((breakpoint) => `@media ${breakpointQuery('below', breakpoint)} {