@scalewing/react 1.56.0 → 1.58.0

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

@@ -0,0 +1,50 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+/*
+ * The run: one grid whose columns are the select, the home side, the
+ * centre, the away side, the end (details and status), the chevron and the
+ * action. Each item is a subgrid of it, and its row a subgrid of every
+ * column but the select's and the action's, so every row's centre, end and
+ * action line up down the run. The space between the columns is the
+ * centre's, the end's, the chevron's, the select's and the action's own
+ * margin, so a run with none of them keeps no gap.
+ */
+export function cssFixtureListRules() {
+    return `.sw-fixture-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.sw-fixture-group-title {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-weight: 600;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  padding-block: var(--sw-space-2) var(--sw-space-1);
+}
+
+.sw-fixture-list {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-fixture-item,
+.sw-fixture-row {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+}
+
+.sw-fixture-row {
+  grid-column: 2 / -2;
+}
+
+.sw-fixture-item {
+  border-top: 1px solid var(--sw-color-border);
+}`;
+}

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

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

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

@@ -0,0 +1,97 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const body = typographyVariants.body;
+const caption = typographyVariants.caption;
+const belowMd = breakpointQuery('below', 'md');
+/*
+ * A box is a text input, so the canvas already draws it as a control
+ * (`[data-theme] :is(input[type='text'], …)`: the surface, the hairline,
+ * the focus ring and the disabled look). `input.sw-fixture-score-box`
+ * matches that rule's specificity and comes later in the sheet, so the
+ * box's own size and figures win. It is a square the sm control height
+ * (32 px) on a fine pointer, so the row keeps its 44 px height, and the
+ * 44 px touch target on a coarse one; two tabular digits at weight 700
+ * fit it centred.
+ */
+const box = '[data-theme] input.sw-fixture-score-box';
+function boxRules() {
+    return `.sw-fixture-score {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-1);
+}
+
+${box} {
+  block-size: var(--sw-control-sm-min-height);
+  font-size: ${body.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  inline-size: var(--sw-control-sm-min-height);
+  line-height: ${body.lineHeight}px;
+  min-height: 0;
+  padding: 0;
+  text-align: center;
+}
+
+@media ${coarsePointerQuery} {
+  ${box} {
+    block-size: ${touchTarget};
+    inline-size: ${touchTarget};
+  }
+}
+
+/* A phone's run is narrow: the boxes keep a space-2 margin, not the centre's space-3, so the names keep room. */
+@media ${belowMd} {
+  .sw-fixture-score { margin-inline: var(--sw-space-2); }
+}
+
+[data-theme] input.sw-fixture-score-box[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-fixture-score-dash {
+  color: var(--sw-color-muted);
+}`;
+}
+/*
+ * The score's message, under the row in the run's columns from the home
+ * side's start to the action's end, in caption type and the danger ink.
+ * Empty, it takes no room, but stays in place as the live region.
+ */
+function errorRules() {
+    return `.sw-fixture-score-error {
+  color: var(--sw-color-danger);
+  display: block;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  grid-column: 2 / -1;
+  grid-row: 2;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-fixture-score-error:not(:empty) {
+  padding-block-end: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  [data-theme] input.sw-fixture-score-box[aria-invalid='true'] { border-color: Mark; }
+  .sw-fixture-score-dash { color: CanvasText; }
+}`;
+}
+/* FixtureRow's score (see components/fixture/FixtureScoreBoxes.tsx); after the row rules. */
+export function cssFixtureScoreClasses() {
+    return `${boxRules()}
+
+${errorRules()}`;
+}
+export function fixtureScoreClassCatalog() {
+    return [
+        'sw-fixture-score',
+        'sw-fixture-score-box',
+        'sw-fixture-score-dash',
+        'sw-fixture-score-error',
+    ];
+}

package/dist/css/css-fixture.js

@@ -3,7 +3,10 @@ import { breakpointQuery } from './breakpoints.js';
 import { chevronStrokeIn } from './chevron.js';
 import { quietFill } from './quiet-fill.js';
 import { cssFixtureActionClasses, fixtureActionClassCatalog, } from './css-fixture-action.js';
+import { cssFixtureListRules } 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';
 import { cssFixtureSelectClasses, fixtureSelectClassCatalog, } from './css-fixture-select.js';
 import { touchTarget } from './touch-target.js';
 const caption = typographyVariants.caption;
@@ -11,54 +14,6 @@ const label = typographyVariants.label;
 export const fixtureCenterKinds = ['time', 'score'];
 export { fixtureFlagTones } from './css-fixture-flag.js';
 const belowMd = breakpointQuery('below', 'md');
-/*
- * The run: one grid whose columns are the select, the home side, the
- * centre, the away side, the end (details and status), the chevron and the
- * action. Each item is a subgrid of it, and its row a subgrid of every
- * column but the select's and the action's, so every row's centre, end and
- * action line up down the run. The space between the columns is the
- * centre's, the end's, the chevron's, the select's and the action's own
- * margin, so a run with none of them keeps no gap.
- */
-function listRules() {
-    return `.sw-fixture-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.sw-fixture-group-title {
-  color: var(--sw-color-muted);
-  font-family: var(--sw-font-sans);
-  font-size: ${caption.fontSize}px;
-  font-weight: 600;
-  letter-spacing: ${caption.letterSpacing}px;
-  line-height: ${caption.lineHeight}px;
-  padding-block: var(--sw-space-2) var(--sw-space-1);
-}
-
-.sw-fixture-list {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto auto;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.sw-fixture-item,
-.sw-fixture-row {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
-}
-
-.sw-fixture-row {
-  grid-column: 2 / -2;
-}
-
-.sw-fixture-item {
-  border-top: 1px solid var(--sw-color-border);
-}`;
-}
 /*
  * A row: the md control height (44 px), its parts centred on one line a
  * space-3 apart; a link or button row is the whole target, the text
@@ -243,7 +198,7 @@ function fallbackRules() {
 }
 /* FixtureGroup and FixtureRow (see components/FixtureRow.tsx). */
 export function cssFixtureClasses() {
-    return `${listRules()}
+    return `${cssFixtureListRules()}
 
 ${rowRules()}
 
@@ -255,7 +210,11 @@ ${cssFixtureFlagClasses()}
 
 ${cssFixtureSelectClasses()}
 
-${cssFixtureActionClasses()}`;
+${cssFixtureActionClasses()}
+
+${cssFixtureScoreClasses()}
+
+${cssFixtureDetailClasses()}`;
 }
 export function fixtureClassCatalog() {
     return [
@@ -277,5 +236,7 @@ export function fixtureClassCatalog() {
         ...fixtureFlagClassCatalog(),
         ...fixtureSelectClassCatalog(),
         ...fixtureActionClassCatalog(),
+        ...fixtureScoreClassCatalog(),
+        ...fixtureDetailClassCatalog(),
     ];
 }

package/dist/css/css-font-mono.js

@@ -8,7 +8,8 @@ import { typedInputs } from './css-document.js';
 export const monospaceFamilies = 'ui-monospace, monospace';
 /*
  * Monospace text, for words read as typed code or marks (a Markdown source
- * being written), at the size the text already has. It outranks the
+ * being written, or a code set with `Text font="mono"`), at the size the
+ * text already has; it outranks a Text variant's sans family. It outranks the
  * canvas's text controls, which take the page's family, so a `textarea` or
  * a text input can take it too.
  */

package/dist/css/css-table-ledger.d.ts

@@ -7,7 +7,11 @@ export type TableCellTone = (typeof tableCellTones)[number];
  */
 export declare const tableRowVariants: readonly ["default", "sub", "total"];
 export type TableRowVariant = (typeof tableRowVariants)[number];
+/** A rule a row draws: `after`, a line under it, such as a cut. */
+export declare const tableRowRules: readonly ["after"];
+export type TableRowRule = (typeof tableRowRules)[number];
 export declare function assertTableCellTone(tone: unknown): void;
 export declare function assertTableRowVariant(variant: unknown): void;
+export declare function assertTableRowRule(rule: unknown): void;
 export declare function cssTableLedgerClasses(): string;
 export declare function tableLedgerClassCatalog(): string[];

package/dist/css/css-table-ledger.js

@@ -5,6 +5,8 @@ export const tableCellTones = ['success', 'danger', 'muted', 'accent'];
  * or a total of the rows above it, mid-table.
  */
 export const tableRowVariants = ['default', 'sub', 'total'];
+/** A rule a row draws: `after`, a line under it, such as a cut. */
+export const tableRowRules = ['after'];
 export function assertTableCellTone(tone) {
     if (tone !== undefined && !tableCellTones.includes(tone))
         throw new RangeError(`Unknown TableCell tone: ${String(tone)}`);
@@ -13,6 +15,10 @@ export function assertTableRowVariant(variant) {
     if (!tableRowVariants.includes(variant))
         throw new RangeError(`Unknown TableRow variant: ${String(variant)}`);
 }
+export function assertTableRowRule(rule) {
+    if (rule !== undefined && !tableRowRules.includes(rule))
+        throw new RangeError(`Unknown TableRow rule: ${String(rule)}`);
+}
 function toneRules() {
     return tableCellTones
         .map((tone) => `.sw-table .sw-table-tone-${tone} {

package/dist/css/css-table-row-rule.d.ts

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

package/dist/css/css-table-row-rule.js

@@ -0,0 +1,22 @@
+/*
+ * A rule under a row (`TableRow rule="after"`), such as the cut under the
+ * last playoff place: its cells' bottom border 2 px in the muted grey, a
+ * line that reads stronger than the 1 px hairlines between rows (3:1 on
+ * the surface, as a line that carries meaning needs) without taking a
+ * colour's meaning. The collapsed-border model resolves it over the next
+ * row's top, and a border, so forced colours keep it (in `CanvasText`) and
+ * right-to-left needs nothing. The row's words and fill are unchanged; say
+ * what the line means in words beside the table.
+ */
+export function cssTableRowRuleClasses() {
+    return `.sw-table .sw-table-row-rule-after > :is(th, td) {
+  border-bottom: 2px solid var(--sw-color-muted);
+}
+
+@media (forced-colors: active) {
+  .sw-table .sw-table-row-rule-after > :is(th, td) { border-bottom-color: CanvasText; }
+}`;
+}
+export function tableRowRuleClassCatalog() {
+    return ['sw-table-row-rule-after'];
+}

package/dist/css/css-table.js

@@ -6,6 +6,7 @@ import { cssTableLayoutClasses, tableLayoutClassCatalog, } from './css-table-lay
 import { cssTableLedgerClasses, tableLedgerClassCatalog, } from './css-table-ledger.js';
 import { cssTableFooterClasses, tableFooterClassCatalog, } from './css-table-footer.js';
 import { cssTablePagePinClasses, tablePagePinClassCatalog, } from './css-table-page-pin.js';
+import { cssTableRowRuleClasses, tableRowRuleClassCatalog, } from './css-table-row-rule.js';
 import { cssTableTotalRowClasses, tableTotalRowClassCatalog, } from './css-table-total-row.js';
 import { cssTableSelectClasses, tableSelectClassCatalog, } from './css-table-select.js';
 import { cssTablePressClasses, tablePressClassCatalog, } from './css-table-press.js';
@@ -96,6 +97,8 @@ ${cssTableLedgerClasses()}
 
 ${cssTableTotalRowClasses()}
 
+${cssTableRowRuleClasses()}
+
 ${cssTableFooterClasses()}
 
 ${cssTablePagePinClasses()}
@@ -122,6 +125,7 @@ export function tableClassCatalog() {
         ...tableSortClassCatalog(),
         ...tableLedgerClassCatalog(),
         ...tableTotalRowClassCatalog(),
+        ...tableRowRuleClassCatalog(),
         ...tableFooterClassCatalog(),
         ...tablePagePinClassCatalog(),
         ...tableBoundedClassCatalog(),

package/dist/index.d.ts

@@ -47,7 +47,7 @@ export { StatTile, type StatTileAppearance, statTileAppearances, type StatTileEm
 export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, type ToastAction, type ToastPlacement, } from './components/Toast.js';
 export type { ToastProps, ToastTone } from './components/Toast.js';
-export { Field, fieldVariants, type FieldProps, type FieldSize, type FieldVariant, } from './components/Field.js';
+export { Field, fieldDescriptionTones, fieldVariants, type FieldDescriptionTone, type FieldProps, type FieldSize, type FieldVariant, } from './components/Field.js';
 export { fieldWidths, type FieldWidth } from './css/css-field-width.js';
 export { requiredMarks, type RequiredMark, } from './components/FieldLabelText.js';
 export { Step, type StepHeadingLevel, type StepProps, Steps, type StepsLabels, type StepsProps, type StepStatus, } from './components/Steps.js';
@@ -59,7 +59,7 @@ 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 { FixtureGroup, type FixtureGroupProps, } from './components/FixtureGroup.js';
-export { FixtureRow, type FixtureRowProps, type FixtureFlag, type FixtureSelect, type FixtureSide, type FixtureStatus, } from './components/FixtureRow.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';
 export { DateToggleCalendar, type DateToggleCalendarProps, } from './components/DateToggleCalendar.js';
 export { CommandPalette, commandPaletteShortcuts, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, type CommandPaletteShortcut, } from './components/CommandPalette.js';
@@ -73,8 +73,8 @@ export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
 export { MultiSelect, type MultiSelectAlign, type MultiSelectOption, type MultiSelectProps, } from './components/MultiSelect.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
-export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, TableSelectCell, tableCellTones, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableMaxHeight, type TableProps, type TableRowProps, type TableRowVariant, type TableSelectCellProps, type TableSort, type TableStickyHeader, type TableVerticalAlign, } from './components/Table.js';
-export { Text, type TextAlign, type TextElement, type TextProps, } from './components/Text.js';
+export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, TableSelectCell, tableCellTones, tableRowRules, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableMaxHeight, type TableProps, type TableRowProps, type TableRowRule, type TableRowVariant, type TableSelectCellProps, type TableSort, type TableStickyHeader, type TableVerticalAlign, } from './components/Table.js';
+export { Text, textFonts, type TextAlign, type TextElement, type TextFont, type TextProps, } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
 export { themeCanvases, type ThemeCanvas } from './css/css-canvas-grouped.js';
 export { themeFrames, type ThemeFrame } from './css/css-theme-frame.js';

package/dist/index.js

@@ -45,7 +45,7 @@ export { Dialog, dialogAppearances, dialogPlacements, dialogSizes, } from './com
 export { StatTile, statTileAppearances, statTileTones, } from './components/StatTile.js';
 export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, } from './components/Toast.js';
-export { Field, fieldVariants, } from './components/Field.js';
+export { Field, fieldDescriptionTones, fieldVariants, } from './components/Field.js';
 export { fieldWidths } from './css/css-field-width.js';
 export { requiredMarks, } from './components/FieldLabelText.js';
 export { Step, Steps, } from './components/Steps.js';
@@ -69,8 +69,8 @@ export { Combobox, comboboxSizes, } from './components/Combobox.js';
 export { Select } from './components/Select.js';
 export { MultiSelect, } from './components/MultiSelect.js';
 export { Stack, } from './components/Stack.js';
-export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, TableSelectCell, tableCellTones, tableRowVariants, } from './components/Table.js';
-export { Text, } from './components/Text.js';
+export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, TableSelectCell, tableCellTones, tableRowRules, tableRowVariants, } from './components/Table.js';
+export { Text, textFonts, } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
 export { themeCanvases } from './css/css-canvas-grouped.js';
 export { themeFrames } from './css/css-theme-frame.js';

package/dist/styles.css

@@ -2021,6 +2021,14 @@ body {
   .sw-table .sw-table-row-total > :is(th, td) { border-top-color: CanvasText; }
 }
 
+.sw-table .sw-table-row-rule-after > :is(th, td) {
+  border-bottom: 2px solid var(--sw-color-muted);
+}
+
+@media (forced-colors: active) {
+  .sw-table .sw-table-row-rule-after > :is(th, td) { border-bottom-color: CanvasText; }
+}
+
 .sw-table tfoot :is(th, td) {
   font-weight: 600;
   position: relative;
@@ -3605,6 +3613,87 @@ button.sw-date-toggle-day[aria-disabled='true'] {
   }
 }
 
+.sw-fixture-score {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-1);
+}
+
+[data-theme] input.sw-fixture-score-box {
+  block-size: var(--sw-control-sm-min-height);
+  font-size: 17px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  inline-size: var(--sw-control-sm-min-height);
+  line-height: 25px;
+  min-height: 0;
+  padding: 0;
+  text-align: center;
+}
+
+@media (pointer: coarse) {
+  [data-theme] input.sw-fixture-score-box {
+    block-size: var(--sw-control-md-min-height);
+    inline-size: var(--sw-control-md-min-height);
+  }
+}
+
+/* A phone's run is narrow: the boxes keep a space-2 margin, not the centre's space-3, so the names keep room. */
+@media not all and (min-width: 48rem) {
+  .sw-fixture-score { margin-inline: var(--sw-space-2); }
+}
+
+[data-theme] input.sw-fixture-score-box[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-fixture-score-dash {
+  color: var(--sw-color-muted);
+}
+
+.sw-fixture-score-error {
+  color: var(--sw-color-danger);
+  display: block;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  grid-column: 2 / -1;
+  grid-row: 2;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-fixture-score-error:not(:empty) {
+  padding-block-end: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  [data-theme] input.sw-fixture-score-box[aria-invalid='true'] { border-color: Mark; }
+  .sw-fixture-score-dash { color: CanvasText; }
+}
+
+.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);
+}
+
+@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;
+  }
+}
+
 .sw-schedule-grid {
   max-width: 100%;
   overflow-x: auto;
@@ -9474,6 +9563,29 @@ html:has(.sw-site-header-sticky) {
 .sw-field-description { color: var(--sw-color-muted); }
 .sw-field-error { color: var(--sw-color-danger); }
 
+.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-4);
+  margin-block: 1px;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+  width: var(--sw-space-4);
+}
+
+@media (forced-colors: active) {
+  .sw-field-description-warning { color: CanvasText; }
+}
+
 /* 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; }
 

package/package.json

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