@scalewing/react 1.47.0 → 1.48.0

package/dist/css/css-context-switcher.js

@@ -0,0 +1,219 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { checkStrokeIn } from './chevron.js';
+import { contextSwitcherTriggerClassCatalog, cssContextSwitcherTriggerClasses, } from './css-context-switcher-trigger.js';
+import { quietFill } from './quiet-fill.js';
+import { zIndex } from './stacking.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const caption = typographyVariants.caption;
+const label = typographyVariants.label;
+/* The popup's least width, a named geometry of this control. */
+const popupMinWidth = '15rem';
+/** The trigger's width, set on the open popup so it is never narrower. */
+export const contextSwitcherTriggerWidthVariable = '--sw-context-switcher-trigger-width';
+const viewportCap = 'calc(100% - var(--sw-space-2) - var(--sw-space-2))';
+/*
+ * The popup: a glass panel on the top layer beside the trigger (placed by
+ * script, as the menus are), at least 15rem and as wide as the trigger
+ * (its width set by the component), capped by the dialog width (or the
+ * trigger's, when wider) and the viewport. A column: the filter field,
+ * the listbox (the only part that scrolls), the empty words, the footer.
+ */
+function popupRules() {
+    return `.sw-context-switcher-popup {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-sm);
+  box-shadow: var(--sw-elevation-sm), inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  inset: auto;
+  margin: 0;
+  max-height: ${viewportCap};
+  max-width: min(max(var(--sw-dialog-max), var(${contextSwitcherTriggerWidthVariable}, 0px)), ${viewportCap});
+  min-width: min(max(${popupMinWidth}, var(${contextSwitcherTriggerWidthVariable}, 0px)), ${viewportCap});
+  padding: var(--sw-space-1);
+  position: fixed;
+  width: max-content;
+  ${zIndex('popup')}
+}
+
+.sw-context-switcher-filter {
+  box-sizing: border-box;
+  flex: none;
+  margin: var(--sw-space-1);
+  width: calc(100% - var(--sw-space-2));
+}
+
+.sw-context-switcher-list {
+  flex: 1 1 auto;
+  max-height: var(--sw-select-max);
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.sw-context-switcher-list:focus {
+  outline: none;
+}
+
+.sw-context-switcher-heading {
+  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: var(--sw-space-2) var(--sw-space-2) var(--sw-space-1);
+}
+
+.sw-context-switcher-empty {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  margin: 0;
+  padding: var(--sw-space-2);
+}
+
+.sw-context-switcher-footer {
+  border-top: 1px solid var(--sw-color-border);
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: var(--sw-space-1);
+  padding-top: var(--sw-space-1);
+}
+
+.sw-context-switcher-action-icon {
+  display: inline-flex;
+  flex: none;
+}`;
+}
+/*
+ * An option: the mark, the label over its muted detail, then the badge,
+ * the count pill and the current one's check at the inline end. The sm
+ * control height (44 px on a coarse pointer). The active row (the arrow
+ * keys' or the pointer's) takes the quiet fill, and an accent ring while
+ * the list itself has visible focus; the current one is at label weight
+ * with the accent check. Forced colours draw the active row in Highlight.
+ */
+function optionRules() {
+    return `.sw-context-switcher-option {
+  align-items: center;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  gap: var(--sw-space-2);
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-control-sm-min-height);
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-1) var(--sw-space-2);
+}
+
+.sw-context-switcher-option[data-active='true'] {
+  background: ${quietFill};
+}
+
+/* On the quiet fill the muted detail moves toward the text colour, keeping 4.5:1. */
+.sw-context-switcher-option[data-active='true'] .sw-context-switcher-detail {
+  color: color-mix(in srgb, var(--sw-color-muted) 70%, var(--sw-color-text));
+}
+
+.sw-context-switcher-list:focus-visible .sw-context-switcher-option[data-active='true'] {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-context-switcher-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-context-switcher-words {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-context-switcher-option[aria-selected='true'] .sw-context-switcher-label {
+  font-weight: ${label.fontWeight};
+}
+
+.sw-context-switcher-detail {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-context-switcher-count {
+  flex: none;
+}
+
+.sw-context-switcher-check {
+  ${checkStrokeIn('var(--sw-color-accent)')}
+  box-sizing: border-box;
+  flex: none;
+  height: var(--sw-space-3);
+  margin-inline: var(--sw-space-1);
+  transform: rotate(45deg);
+  width: var(--sw-space-2);
+}
+
+@media ${coarsePointerQuery} {
+  .sw-context-switcher-option { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  .sw-context-switcher-popup { border-color: CanvasText; }
+  .sw-context-switcher-option[data-active='true'] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
+  .sw-context-switcher-option[data-active='true'] .sw-context-switcher-detail { color: HighlightText; }
+  .sw-context-switcher-option[data-active='true'] .sw-badge,
+  .sw-context-switcher-option[data-active='true'] .sw-context-switcher-count { forced-color-adjust: auto; }
+  .sw-context-switcher-check { border-color: CanvasText; }
+  .sw-context-switcher-option[data-active='true'] .sw-context-switcher-check { border-color: HighlightText; }
+  .sw-context-switcher-footer { border-color: CanvasText; }
+}`;
+}
+/*
+ * ContextSwitcher (see components/ContextSwitcher.tsx): the trigger is
+ * `css-context-switcher-trigger.ts`; its count joins the shared pill
+ * (`css-count-pill.ts`).
+ */
+export function cssContextSwitcherClasses() {
+    return `${cssContextSwitcherTriggerClasses()}
+
+${popupRules()}
+
+${optionRules()}`;
+}
+export function contextSwitcherClassCatalog() {
+    return [
+        ...contextSwitcherTriggerClassCatalog(),
+        'sw-context-switcher-popup',
+        'sw-context-switcher-filter',
+        'sw-context-switcher-list',
+        'sw-context-switcher-heading',
+        'sw-context-switcher-option',
+        'sw-context-switcher-icon',
+        'sw-context-switcher-words',
+        'sw-context-switcher-label',
+        'sw-context-switcher-detail',
+        'sw-context-switcher-check',
+        'sw-context-switcher-empty',
+        'sw-context-switcher-footer',
+        'sw-context-switcher-action-icon',
+        // sw-context-switcher-count is the shared pill's (css-count-pill.ts).
+    ];
+}

package/dist/css/css-count-pill.d.ts

@@ -1,5 +1,5 @@
-/** The pills that take a tone modifier: NavCount's and AppShell's item count. */
-declare const tonedPills: readonly ["sw-nav-count", "sw-app-shell-count"];
+/** The pills that take a tone modifier: all but SectionNav's. */
+declare const tonedPills: readonly ["sw-nav-count", "sw-app-shell-count", "sw-context-switcher-count"];
 /** The tones other than the pill's own danger. */
 declare const pillTones: readonly ["accent", "warning"];
 /** A toned pill's modifier class, such as `sw-nav-count-warning`. */

package/dist/css/css-count-pill.js

@@ -1,14 +1,22 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { toneTintFill, toneTintInk } from './tone-tint.js';
 const caption = typographyVariants.caption;
-/** The counts drawn as the pill: SectionNav's, a Nav word's and AppShell's. */
+/**
+ * The counts drawn as the pill: SectionNav's, a Nav word's, AppShell's and
+ * a ContextSwitcher option's.
+ */
 const pills = [
     'sw-section-nav-count',
     'sw-nav-count',
     'sw-app-shell-count',
+    'sw-context-switcher-count',
+];
+/** The pills that take a tone modifier: all but SectionNav's. */
+const tonedPills = [
+    'sw-nav-count',
+    'sw-app-shell-count',
+    'sw-context-switcher-count',
 ];
-/** The pills that take a tone modifier: NavCount's and AppShell's item count. */
-const tonedPills = ['sw-nav-count', 'sw-app-shell-count'];
 /** The tones other than the pill's own danger. */
 const pillTones = ['accent', 'warning'];
 /** A toned pill's modifier class, such as `sw-nav-count-warning`. */

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

@@ -0,0 +1,5 @@
+export declare const fixtureCenterKinds: readonly ["time", "score"];
+/** `time` is a kickoff time in a grey chip; `score` is bold figures. */
+export type FixtureCenterKind = (typeof fixtureCenterKinds)[number];
+export declare function cssFixtureClasses(): string;
+export declare function fixtureClassCatalog(): string[];

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-site-footer.d.ts

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