@scalewing/react 1.47.0 → 1.49.0

package/dist/css/css-fixture.js

@@ -0,0 +1,260 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { chevronStrokeIn } from './chevron.js';
+import { quietFill } from './quiet-fill.js';
+import { touchTarget } from './touch-target.js';
+const caption = typographyVariants.caption;
+const label = typographyVariants.label;
+export const fixtureCenterKinds = ['time', 'score'];
+const belowMd = breakpointQuery('below', 'md');
+/*
+ * The run: one grid whose columns are the home side, the centre, the away
+ * side, the end (details and status) and the chevron. Each item and its
+ * row are subgrids of it, so every row's centre and end line up down the
+ * run. The space between the columns is the centre's, the end's and the
+ * chevron's own margin, so a run with no end or chevron keeps no gap for
+ * them.
+ */
+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: minmax(0, 1fr) auto minmax(0, 1fr) 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-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
+ * colour, the quiet fill on hover and an inset accent ring, with the
+ * shared chevron at the end. The sides' names are label type at weight 500
+ * and wrap; the home side ends at the centre (its mark nearest it), the
+ * away side starts from it, mirrored in right-to-left.
+ */
+function rowRules() {
+    return `.sw-fixture-row {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  margin: 0;
+  min-height: ${touchTarget};
+  padding: var(--sw-space-2);
+  row-gap: var(--sw-space-1);
+  text-align: start;
+  text-decoration: none;
+  width: 100%;
+}
+
+.sw-fixture-row-pressable { cursor: pointer; }
+
+@media (hover: hover) {
+  .sw-fixture-row-pressable:hover { background: ${quietFill}; }
+}
+
+.sw-fixture-row-pressable:focus { outline: none; }
+
+.sw-fixture-row-pressable:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+[data-theme] a.sw-fixture-row,
+[data-theme] a.sw-fixture-row:hover {
+  color: var(--sw-color-text);
+}
+
+[data-theme] a.sw-fixture-row:focus-visible {
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-fixture-team {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-2);
+  min-width: 0;
+}
+
+.sw-fixture-team-home {
+  grid-column: 1;
+  justify-content: flex-end;
+  text-align: end;
+}
+
+.sw-fixture-team-away {
+  grid-column: 3;
+}
+
+.sw-fixture-name {
+  font-weight: 500;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sw-fixture-mark {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-fixture-center {
+  font-variant-numeric: tabular-nums;
+  grid-column: 2;
+  margin-inline: var(--sw-space-3);
+  justify-self: center;
+  white-space: nowrap;
+}
+
+.sw-fixture-center-time {
+  background: var(--sw-color-subtle);
+  border-radius: var(--sw-radius-sm);
+  font-size: ${caption.fontSize}px;
+  font-weight: 600;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  padding: calc(var(--sw-space-1) / 2) var(--sw-space-2);
+}
+
+.sw-fixture-center-score {
+  font-weight: 700;
+}
+
+.sw-fixture-end {
+  align-items: center;
+  color: var(--sw-color-muted);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: ${caption.fontSize}px;
+  gap: var(--sw-space-2);
+  grid-column: 4;
+  justify-content: flex-end;
+  letter-spacing: ${caption.letterSpacing}px;
+  margin-inline-start: var(--sw-space-3);
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-fixture-chevron {
+  ${chevronStrokeIn('var(--sw-color-muted)')}
+  grid-column: 5;
+  justify-self: end;
+  margin-inline: var(--sw-space-3) var(--sw-space-1);
+  transform: rotate(-45deg);
+}
+
+.sw-fixture-chevron:dir(rtl) { transform: rotate(135deg); }
+
+@media (forced-colors: active) {
+  .sw-fixture-row-pressable:hover {
+    outline: var(--sw-focus-ring-width) solid Highlight;
+    outline-offset: calc(-1 * var(--sw-focus-ring-width));
+  }
+  .sw-fixture-center-time { border: 1px solid CanvasText; }
+  .sw-fixture-chevron { border-color: CanvasText; }
+}`;
+}
+/*
+ * Below `md`: three columns and the chevron, the end on a second line
+ * from the start. After the row rules, so it wins over their placement.
+ */
+function narrowRules() {
+    return `@media ${belowMd} {
+  .sw-fixture-list {
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
+  }
+
+  .sw-fixture-end {
+    grid-column: 1 / 4;
+    grid-row: 2;
+    justify-content: flex-start;
+    margin-inline-start: 0;
+  }
+
+  .sw-fixture-chevron {
+    grid-column: 4;
+    grid-row: 1 / span 2;
+  }
+}`;
+}
+/*
+ * Without subgrid (Chrome before 117, Safari before 16): each row is its
+ * own grid of the same columns, so a row still reads in order and the
+ * centres sit near the middle, but they do not line up down the run.
+ */
+function fallbackRules() {
+    return `@supports not (grid-template-columns: subgrid) {
+  .sw-fixture-item {
+    display: block;
+  }
+
+  .sw-fixture-row {
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto;
+  }
+
+  @media ${belowMd} {
+    .sw-fixture-row {
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
+    }
+  }
+}`;
+}
+/* FixtureGroup and FixtureRow (see components/FixtureRow.tsx). */
+export function cssFixtureClasses() {
+    return `${listRules()}
+
+${rowRules()}
+
+${narrowRules()}
+
+${fallbackRules()}`;
+}
+export function fixtureClassCatalog() {
+    return [
+        'sw-fixture-group',
+        'sw-fixture-group-title',
+        'sw-fixture-list',
+        'sw-fixture-item',
+        'sw-fixture-row',
+        'sw-fixture-row-pressable',
+        'sw-fixture-team',
+        'sw-fixture-team-home',
+        'sw-fixture-team-away',
+        'sw-fixture-name',
+        'sw-fixture-mark',
+        'sw-fixture-center',
+        ...fixtureCenterKinds.map((kind) => `sw-fixture-center-${kind}`),
+        'sw-fixture-end',
+        'sw-fixture-chevron',
+    ];
+}

package/dist/css/css-glyph-tile.d.ts

@@ -1,5 +1,7 @@
 export declare const glyphTileSizes: readonly ["sm", "md", "lg"];
 /** `sm` 24, `md` 28 (the xs control height), `lg` 32. */
 export type GlyphTileSize = (typeof glyphTileSizes)[number];
+/** The most letters a tile holds, such as a three-letter crest ("NSL"). */
+export declare const glyphTileLetterLimit = 3;
 export declare function cssGlyphTileClasses(): string;
 export declare function glyphTileClassCatalog(): string[];

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

@@ -1,5 +1,7 @@
 import { categoricalColorKeys } 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;
 const tileSide = {
     sm: 'var(--sw-space-5)',
     md: 'var(--sw-control-xs-min-height)',
@@ -12,7 +14,7 @@ function hueRules() {
 }
 function sizeRules() {
     return Object.entries(tileSide)
-        .map(([size, side]) => `.sw-glyph-tile-${size} { height: ${side}; width: ${side}; }`)
+        .map(([size, side]) => `.sw-glyph-tile-${size} { --sw-glyph-tile-side: ${side}; height: ${side}; width: ${side}; }`)
         .join('\n');
 }
 /*
@@ -40,6 +42,28 @@ export function cssGlyphTileClasses() {
   width: var(--sw-space-4);
 }
 
+/*
+ * Letters in place of a glyph: one line, centred, weight 600, the line as
+ * tall as the letters, sized from the tile's side rather than the text
+ * round it, so they fit at every size: one letter at half the side, two
+ * at 0.42 of it, three at a third, tightened a little, so even a wide
+ * trio ("WMW") fits inside the smallest tile.
+ */
+.sw-glyph-tile-text {
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.sw-glyph-tile-text-1 { font-size: calc(var(--sw-glyph-tile-side) / 2); }
+
+.sw-glyph-tile-text-2 { font-size: calc(var(--sw-glyph-tile-side) * 0.42); }
+
+.sw-glyph-tile-text-3 {
+  font-size: calc(var(--sw-glyph-tile-side) / 3);
+  letter-spacing: -0.02em;
+}
+
 ${hueRules()}
 
 ${sizeRules()}
@@ -53,5 +77,9 @@ export function glyphTileClassCatalog() {
         'sw-glyph-tile',
         ...categoricalColorKeys.map((key) => `sw-glyph-tile-${key}`),
         ...glyphTileSizes.map((size) => `sw-glyph-tile-${size}`),
+        'sw-glyph-tile-text',
+        'sw-glyph-tile-text-1',
+        'sw-glyph-tile-text-2',
+        'sw-glyph-tile-text-3',
     ];
 }

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

@@ -1,5 +1,5 @@
 import { breakpointQuery, breakpoints } from './breakpoints.js';
-import { gridColumnCounts, gridColumnsBelowClass, gridColumnsClass, } from './css-grid.js';
+import { gridColumnCounts, gridColumnsBelowClass, gridColumnsClass, gridFitClass, gridFits, } from './css-grid.js';
 export const gridColumnSpans = gridColumnCounts;
 export function gridSpanClass(span) {
     return `sw-grid-span-${span}`;
@@ -21,6 +21,9 @@ function widerSpans(columns) {
 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; }`));
     // 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)} {
@@ -28,7 +31,7 @@ ${gridColumnCounts
         .flatMap((columns) => widerSpans(1).map((span) => `  ${capRule(gridColumnsBelowClass(breakpoint, columns), columns, span)}`))
         .join('\n')}
 }`);
-    return [...spans, ...caps, ...below].join('\n');
+    return [...spans, ...caps, ...fitted, ...below].join('\n');
 }
 export function gridSpanClassCatalog() {
     return gridColumnSpans.map((span) => gridSpanClass(span));

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

@@ -1,6 +1,19 @@
 import { type Breakpoint } from './breakpoints.js';
 export declare const gridColumnCounts: readonly [1, 2, 3, 4, 6];
 export type GridColumns = (typeof gridColumnCounts)[number];
+/**
+ * A fitted grid's narrowest column: as many columns as fit the grid's width
+ * at this minimum, each stretched to share the row, and one column when
+ * the grid is narrower than the minimum.
+ */
+export declare const gridFitWidths: {
+    readonly narrow: "15rem";
+    readonly medium: "16.25rem";
+    readonly wide: "18.75rem";
+};
+export type GridFit = keyof typeof gridFitWidths;
+export declare const gridFits: GridFit[];
+export declare function gridFitClass(fit: GridFit): string;
 export declare function gridColumnsClass(columns: GridColumns): string;
 export declare function gridColumnsBelowClass(breakpoint: Breakpoint, columns: GridColumns): string;
 export declare function cssGridClasses(): string;

package/dist/css/css-grid.js

@@ -1,5 +1,19 @@
 import { breakpointQuery, breakpoints, } from './breakpoints.js';
 export const gridColumnCounts = [1, 2, 3, 4, 6];
+/**
+ * A fitted grid's narrowest column: as many columns as fit the grid's width
+ * at this minimum, each stretched to share the row, and one column when
+ * the grid is narrower than the minimum.
+ */
+export const gridFitWidths = {
+    narrow: '15rem',
+    medium: '16.25rem',
+    wide: '18.75rem',
+};
+export const gridFits = Object.keys(gridFitWidths);
+export function gridFitClass(fit) {
+    return `sw-grid-fit-${fit}`;
+}
 export function gridColumnsClass(columns) {
     return `sw-grid-cols-${columns}`;
 }
@@ -20,12 +34,14 @@ ${gridColumnCounts
         .map((count) => columnsRule(gridColumnsBelowClass(breakpoint, count), count))
         .join('\n')}
 }`);
-    return [base, ...columns, ...below].join('\n');
+    const fitted = gridFits.map((fit) => `.${gridFitClass(fit)} { grid-template-columns: repeat(auto-fit, minmax(min(100%, ${gridFitWidths[fit]}), 1fr)); }`);
+    return [base, ...columns, ...below, ...fitted].join('\n');
 }
 export function gridClassCatalog() {
     return [
         'sw-grid',
         ...gridColumnCounts.map((count) => gridColumnsClass(count)),
         ...breakpoints.flatMap((breakpoint) => gridColumnCounts.map((count) => gridColumnsBelowClass(breakpoint, count))),
+        ...gridFits.map(gridFitClass),
     ];
 }

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

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

package/dist/css/css-hero.js

@@ -0,0 +1,62 @@
+import { breakpointQuery } from './breakpoints.js';
+/*
+ * A public page's opening: the words in one column (an eyebrow, the hero
+ * title, the lead and the actions) and an optional picture beside them.
+ * From `md` the picture keeps its own width at the row's end and the words
+ * take the rest; below `md` the picture sits centred under the words and
+ * the actions stack to the full width, as a phone's thumb expects. With no
+ * picture the words keep the reading width, so a long title or lead does
+ * not run the page's full width. The actions sit one spacing step further
+ * from the lead than the text's gap, so the buttons read as their own row.
+ */
+export function cssHeroClasses() {
+    return `.sw-hero {
+  align-items: center;
+  display: grid;
+  gap: var(--sw-space-8);
+  min-width: 0;
+}
+
+.sw-hero-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-4);
+  min-width: 0;
+}
+
+.sw-hero:not(.sw-hero-with-media) .sw-hero-text {
+  max-width: var(--sw-reading-max);
+}
+
+.sw-hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+  padding-top: var(--sw-space-1);
+}
+
+.sw-hero-media {
+  justify-self: center;
+  max-width: 100%;
+  min-width: 0;
+}
+
+@media ${breakpointQuery('from', 'md')} {
+  .sw-hero-text { gap: var(--sw-space-5); }
+  .sw-hero-with-media { grid-template-columns: minmax(0, 1fr) auto; }
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-hero { gap: var(--sw-space-6); }
+  .sw-hero-actions { align-items: stretch; flex-direction: column; }
+}`;
+}
+export function heroClassCatalog() {
+    return [
+        'sw-hero',
+        'sw-hero-with-media',
+        'sw-hero-text',
+        'sw-hero-actions',
+        'sw-hero-media',
+    ];
+}

package/dist/css/css-site-footer.d.ts

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

package/dist/css/css-site-footer.js

@@ -0,0 +1,152 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+const caption = typographyVariants.caption;
+/** The font declarations of a typography variant, weight included or not. */
+function type(variant, weight = variant.fontWeight) {
+    return `font-size: ${variant.fontSize}px;
+  font-weight: ${weight};
+  letter-spacing: ${variant.letterSpacing}px;
+  line-height: ${variant.lineHeight}px;`;
+}
+/*
+ * The footer sits on the inverse band (`Band tone="inverse"`), which
+ * re-scopes the theme's words, muted words and hairline, so these rules
+ * read the ordinary variables. Group labels are the band's words at label
+ * weight; links are its muted words in label size, no underline (a list
+ * of links in a named `nav`), the band's words with an underline on hover
+ * and focus, and the current page in the band's words at label weight. The
+ * link rules match the band's running-text link rule's specificity and
+ * win by coming after it (`cssSiteFooterClasses` follows `cssBandClasses`;
+ * a test holds the order).
+ * Below `md` the brand spans two columns of groups; from `md` the brand
+ * and the groups share one wrapping row, spread apart.
+ */
+export function cssSiteFooterClasses() {
+    return `.sw-site-footer-top {
+  display: grid;
+  gap: var(--sw-space-6) var(--sw-space-5);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.sw-site-footer-brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  grid-column: 1 / -1;
+  max-width: 20rem;
+}
+
+.sw-site-footer-brand > :first-child {
+  align-self: flex-start;
+}
+
+.sw-site-footer-tagline {
+  color: var(--sw-color-muted);
+  margin: 0;
+  ${type(label, 400)}
+}
+
+.sw-site-footer-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  min-width: 0;
+}
+
+.sw-site-footer-label {
+  color: var(--sw-color-text);
+  margin: 0;
+  ${type(caption, 600)}
+}
+
+.sw-site-footer-links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+[data-theme] .sw-band-inverse a.sw-site-footer-link {
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  ${type(label, 400)}
+  overflow-wrap: anywhere;
+  text-decoration-color: transparent;
+}
+
+[data-theme] .sw-band-inverse a.sw-site-footer-link:is(:hover, :focus-visible) {
+  color: var(--sw-color-text);
+  text-decoration-color: currentColor;
+}
+
+[data-theme] .sw-band-inverse a.sw-site-footer-link[aria-current='page'] {
+  color: var(--sw-color-text);
+  font-weight: ${label.fontWeight};
+}
+
+.sw-site-footer-bottom {
+  align-items: center;
+  border-top: 1px solid var(--sw-color-border);
+  color: var(--sw-color-muted);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+  justify-content: space-between;
+  margin-top: var(--sw-space-6);
+  padding-top: var(--sw-space-4);
+  ${type(caption)}
+}
+
+.sw-site-footer-end {
+  margin-inline-start: auto;
+}
+
+@media ${breakpointQuery('from', 'md')} {
+  .sw-site-footer-top {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sw-space-6) var(--sw-space-8);
+    justify-content: space-between;
+  }
+}
+
+@media ${coarsePointerQuery} {
+  [data-theme] .sw-band-inverse a.sw-site-footer-link {
+    align-items: center;
+    min-height: ${touchTarget};
+  }
+
+  .sw-site-footer-links {
+    gap: 0;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-theme] .sw-band-inverse a.sw-site-footer-link {
+    color: LinkText;
+  }
+
+  .sw-site-footer-bottom {
+    border-top-color: CanvasText;
+  }
+}`;
+}
+export function siteFooterClassCatalog() {
+    return [
+        'sw-site-footer',
+        'sw-site-footer-top',
+        'sw-site-footer-brand',
+        'sw-site-footer-tagline',
+        'sw-site-footer-group',
+        'sw-site-footer-label',
+        'sw-site-footer-links',
+        'sw-site-footer-link',
+        'sw-site-footer-bottom',
+        'sw-site-footer-legal',
+        'sw-site-footer-end',
+    ];
+}

package/dist/css/css-site-header.d.ts

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