@scalewing/react 1.39.0 → 1.40.0

package/dist/css/css-date-range.js

@@ -0,0 +1,197 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { rangeBand, rangeBandHover } from './range-band.js';
+import { cssDateRangePresetsClasses, dateRangePresetsClassCatalog, } from './css-date-range-presets.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+const caption = typographyVariants.caption;
+/* The steps and days are one square control wide, as in DateField's calendar. */
+const square = 'var(--sw-control-md-min-height)';
+/* A day between a picked range's ends: selected, but drawn as the band. */
+const between = ".sw-date-range-months .sw-date-field-day-in-range[aria-selected='true']:not(.sw-date-field-day-range-start, .sw-date-field-day-range-end)";
+function buttonRules() {
+    return `.sw-date-range-button {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.sw-date-range-button:not(.sw-button-md) .sw-date-field-glyph {
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
+@media ${coarsePointerQuery} {
+  .sw-button.sw-date-range-button,
+  .sw-date-range-actions > .sw-button { min-height: ${touchTarget}; }
+}`;
+}
+/*
+ * The popover is DateField's calendar surface with no padding of its own:
+ * the presets, then the months, then a footer under a hairline. Below
+ * `lg` the presets sit above the months; from `lg` beside them.
+ */
+function popoverRules() {
+    return `.sw-date-field-calendar.sw-date-range-popover {
+  gap: 0;
+  padding: 0;
+}
+
+.sw-date-range-body {
+  display: flex;
+  flex-direction: column;
+}
+
+@media ${breakpointQuery('from', 'lg')} {
+  .sw-date-range-body { flex-direction: row; }
+}
+
+.sw-date-range-footer {
+  align-items: center;
+  border-top: 1px solid var(--sw-color-border);
+  contain: inline-size;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-4);
+  padding: var(--sw-space-3);
+}
+
+.sw-date-range-summary {
+  color: var(--sw-color-muted);
+  flex: 1 1 auto;
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+  min-width: 0;
+}
+
+.sw-date-range-status { display: inline; }
+
+.sw-date-range-line {
+  color: var(--sw-color-text);
+  display: block;
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  line-height: ${label.lineHeight}px;
+}
+
+.sw-date-range-actions {
+  display: flex;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+}`;
+}
+function monthRules() {
+    return `.sw-date-range-months {
+  display: flex;
+  gap: var(--sw-space-5);
+  justify-content: center;
+  padding: var(--sw-space-3);
+}
+
+.sw-date-range-month {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+}
+
+.sw-date-range-month-header {
+  align-items: center;
+  display: grid;
+  grid-template-columns: ${square} 1fr ${square};
+  min-height: ${square};
+}
+
+.sw-date-range-month-title {
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  grid-column: 2;
+  line-height: ${label.lineHeight}px;
+  text-align: center;
+}
+
+${between} {
+  background: ${rangeBand};
+  border-color: transparent;
+  border-radius: 0;
+  color: var(--sw-color-text);
+  font-weight: inherit;
+}
+
+${between}:hover:not([aria-disabled='true']) { background: ${rangeBandHover}; }
+
+${between}[aria-current='date'] { border-color: var(--sw-color-accent); }`;
+}
+/*
+ * Below \`md\` the range is a Dialog bottom sheet: the presets in a
+ * scrolling row, one month, and a footer with the hint over Cancel and
+ * Apply, the primary twice as wide.
+ */
+function sheetRules() {
+    return `.sw-date-range-sheet .sw-date-range-months { padding: 0; }
+
+.sw-date-range-sheet .sw-dialog-footer-actions {
+  flex: 1 1 100%;
+  margin-inline-start: 0;
+}
+
+.sw-date-range-sheet-footer {
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+}
+
+.sw-date-range-sheet-footer .sw-date-range-hint {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-date-range-sheet-footer .sw-date-range-actions {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  margin-inline-start: 0;
+}`;
+}
+function forcedColorRules() {
+    return `@media (forced-colors: active) {
+  .sw-date-range-footer { border-top-color: CanvasText; }
+  ${between},
+  ${between}:hover:not([aria-disabled='true']) {
+    background: Mark;
+    color: MarkText;
+    forced-color-adjust: none;
+  }
+}`;
+}
+export function cssDateRangeClasses() {
+    return [
+        buttonRules(),
+        popoverRules(),
+        monthRules(),
+        sheetRules(),
+        cssDateRangePresetsClasses(),
+        forcedColorRules(),
+    ].join('\n\n');
+}
+export function dateRangeClassCatalog() {
+    return [
+        'sw-date-range-button',
+        'sw-date-range-popover',
+        'sw-date-range-body',
+        'sw-date-range-months',
+        'sw-date-range-month',
+        'sw-date-range-month-header',
+        'sw-date-range-month-title',
+        'sw-date-range-footer',
+        'sw-date-range-summary',
+        'sw-date-range-status',
+        'sw-date-range-line',
+        'sw-date-range-count',
+        'sw-date-range-separator',
+        'sw-date-range-hint',
+        'sw-date-range-actions',
+        'sw-date-range-sheet',
+        'sw-date-range-sheet-footer',
+        ...dateRangePresetsClassCatalog(),
+    ];
+}

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

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

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

@@ -0,0 +1,193 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { checkStrokeIn, chevronStrokeIn } from './chevron.js';
+import { tableCellTones as listRowValueTones } from './css-table-ledger.js';
+import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+const body = typographyVariants.body;
+const caption = typographyVariants.caption;
+/* Centres a mark of `size` on the title's first line. */
+function onTitleLine(size) {
+    return `calc((${label.lineHeight}px - ${size}) / 2)`;
+}
+/*
+ * A row: the leading mark, the title over its detail, the value over its
+ * detail at the end, then the chevron or check, each lined up with the
+ * title's first line. A pressable row is the whole button or link: a
+ * quiet fill under the pointer, the focus ring inside its edge, 44 px on a
+ * coarse pointer. Plain rows (inside a Card) have no inline padding.
+ */
+function rowRules() {
+    return `.sw-list-row {
+  align-items: flex-start;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  gap: var(--sw-space-3);
+  line-height: ${label.lineHeight}px;
+  margin: 0;
+  padding: var(--sw-space-3) var(--sw-space-4);
+  text-align: start;
+  text-decoration: none;
+  width: 100%;
+}
+
+.sw-list-group-plain .sw-list-row { padding-inline: 0; }
+
+.sw-list-row-pressable { cursor: pointer; }
+
+@media (hover: hover) {
+  .sw-list-row-pressable:hover:not(.sw-list-row-disabled) { background: ${quietFill}; }
+}
+
+.sw-list-row-pressable:active:not(.sw-list-row-disabled) { background: ${quietFill}; }
+
+.sw-list-row-pressable:focus { outline: none; }
+
+.sw-list-row-pressable:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+/* A link row keeps the text colour and the inset ring over the canvas link rules. */
+[data-theme] a.sw-list-row,
+[data-theme] a.sw-list-row:hover {
+  color: var(--sw-color-text);
+}
+
+[data-theme] a.sw-list-row:focus-visible {
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-list-row-disabled {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media ${coarsePointerQuery} {
+  .sw-list-row-pressable { min-height: ${touchTarget}; }
+}
+
+/* Forced colours drop the fill, so a hovered row is outlined instead, as a pressable table row is. */
+@media (forced-colors: active) {
+  .sw-list-row-pressable:hover:not(.sw-list-row-disabled) {
+    outline: var(--sw-focus-ring-width) solid Highlight;
+    outline-offset: calc(-1 * var(--sw-focus-ring-width));
+  }
+}`;
+}
+function partRules() {
+    const tones = listRowValueTones
+        .map((tone) => `.sw-list-row-value-${tone} { color: var(--sw-color-${tone}); }`)
+        .join('\n');
+    return `.sw-list-row-leading {
+  align-items: center;
+  display: flex;
+  flex: none;
+  height: ${label.lineHeight}px;
+}
+
+.sw-list-row-label,
+.sw-list-row-end {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-list-row-label { flex: 1 1 auto; }
+
+.sw-list-row-end {
+  align-items: flex-end;
+  flex: none;
+  max-width: 50%;
+  text-align: end;
+}
+
+.sw-list-row-title {
+  font-weight: ${label.fontWeight};
+  overflow-wrap: anywhere;
+}
+
+.sw-list-row-title-plain { font-weight: ${body.fontWeight}; }
+
+.sw-list-row-title-danger { color: var(--sw-color-danger); }
+
+.sw-list-row-detail,
+.sw-list-row-value-detail {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+/* The label takes the wrap; the end keeps its words whole up to half the row. */
+.sw-list-row-detail { overflow-wrap: anywhere; }
+
+.sw-list-row-value,
+.sw-list-row-value-detail { font-variant-numeric: tabular-nums; }
+
+.sw-list-row-value { font-weight: ${label.fontWeight}; }
+
+${tones}`;
+}
+/*
+ * The chevron is the stroke Accordion and the menus share, pointing to the
+ * inline end; the check is the same stroke in the accent, a short side and
+ * a long one. Both are borders, so forced colours keep them.
+ */
+function accessoryRules() {
+    return `.sw-list-row-chevron {
+  ${chevronStrokeIn('var(--sw-color-muted)')}
+  flex: none;
+  margin-block-start: ${onTitleLine('var(--sw-space-2)')};
+  margin-inline-end: var(--sw-space-1);
+  transform: rotate(-45deg);
+}
+
+.sw-list-row-chevron:dir(rtl) { transform: rotate(135deg); }
+
+.sw-list-row-check {
+  ${checkStrokeIn('var(--sw-color-accent)')}
+  box-sizing: border-box;
+  flex: none;
+  height: var(--sw-space-3);
+  margin-block-start: ${onTitleLine('var(--sw-space-3)')};
+  margin-inline-end: var(--sw-space-1);
+  transform: rotate(45deg);
+  width: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  .sw-list-row-check { border-color: CanvasText; }
+}`;
+}
+export function cssListRowClasses() {
+    return `${rowRules()}
+
+${partRules()}
+
+${accessoryRules()}`;
+}
+export function listRowClassCatalog() {
+    return [
+        'sw-list-row',
+        'sw-list-row-pressable',
+        'sw-list-row-disabled',
+        'sw-list-row-leading',
+        'sw-list-row-label',
+        'sw-list-row-title',
+        'sw-list-row-title-plain',
+        'sw-list-row-title-danger',
+        'sw-list-row-detail',
+        'sw-list-row-end',
+        'sw-list-row-value',
+        ...listRowValueTones.map((tone) => `sw-list-row-value-${tone}`),
+        'sw-list-row-value-detail',
+        'sw-list-row-chevron',
+        'sw-list-row-check',
+    ];
+}

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

@@ -0,0 +1,3 @@
+export declare const listRowPadBlock = "var(--sw-space-3)";
+export declare function cssListClasses(): string;
+export declare function listClassCatalog(): string[];

package/dist/css/css-list.js

@@ -0,0 +1,85 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { cssListRowClasses, listRowClassCatalog } from './css-list-row.js';
+import { blockEdgeShadeRules, scrollRegionRules } from './css-scroll-region.js';
+const label = typographyVariants.label;
+const caption = typographyVariants.caption;
+/* A row's padding, shared by the row rules and the bounded list's height. */
+export const listRowPadBlock = 'var(--sw-space-3)';
+const scroll = '.sw-list-group-scroll';
+/*
+ * A ListGroup is one list (`sw-list`) with a hairline between its rows:
+ * a bordered panel on the surface, or plain rows inside a surface that
+ * already has one, with a hairline above the first row too. A footer sits
+ * under the rows, outside any scroll, under a hairline.
+ */
+function groupRules() {
+    return `.sw-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-list > .sw-list-item + .sw-list-item,
+.sw-list-group-plain .sw-list > .sw-list-item:first-child,
+.sw-list-group-footer {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-list-group-panel {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  overflow: clip;
+}`;
+}
+/*
+ * A bounded list (\`maxHeight\`) is as tall as its row count
+ * (\`--sw-list-max-rows\`) of rows with a title and one detail line: the
+ * padding twice, the title's line, the detail's line and the hairline.
+ * Taller rows show fewer at a time. Its region is the shared scroll
+ * region (a named keyboard stop); while rows are past its top or bottom,
+ * that edge draws the scroll shade a spacing step 5 deep, a background
+ * layer under the rows. Forced colours draw no shade; printed, every row
+ * shows.
+ */
+function boundedRules() {
+    const top = `${scroll}.sw-scroll-more-top`;
+    const bottom = `${scroll}.sw-scroll-more-bottom`;
+    return `${scrollRegionRules(scroll)}
+
+${scroll} {
+  max-height: calc(var(--sw-list-max-rows) * (2 * ${listRowPadBlock} + ${label.lineHeight}px + ${caption.lineHeight}px + 1px));
+}
+
+${blockEdgeShadeRules({ top, bottom, both: `${top}.sw-scroll-more-bottom` })}
+
+@media (forced-colors: active) {
+  .sw-list > .sw-list-item + .sw-list-item,
+  .sw-list-group-plain .sw-list > .sw-list-item:first-child,
+  .sw-list-group-footer,
+  .sw-list-group-panel { border-color: CanvasText; }
+}
+
+@media print {
+  ${scroll} { max-height: none; }
+}`;
+}
+export function cssListClasses() {
+    return `${groupRules()}
+
+${boundedRules()}
+
+${cssListRowClasses()}`;
+}
+export function listClassCatalog() {
+    return [
+        'sw-list',
+        'sw-list-item',
+        'sw-list-group',
+        'sw-list-group-panel',
+        'sw-list-group-plain',
+        'sw-list-group-scroll',
+        'sw-list-group-footer',
+        ...listRowClassCatalog(),
+    ];
+}

package/dist/css/css-scroll-region.d.ts

@@ -23,6 +23,24 @@ export declare function scrollShadeRules(selector: string): string;
  * and the DenominationGrid strip share it.
  */
 export declare function scrollRegionRules(selector: string): string;
+/** The scroll shade fading away from an edge, a gradient toward `direction`. */
+export declare function blockShade(direction: 'bottom' | 'top'): string;
+/** The selectors of a region scrolled past its top, its bottom, or both. */
+export type BlockEdgeSelectors = {
+    top: string;
+    bottom: string;
+    both: string;
+};
+/**
+ * The shade a region of bounded height draws on its own top or bottom
+ * edge while `ScrollRegion` marks rows past it (`sw-scroll-more-top`,
+ * `sw-scroll-more-bottom`): a background layer a spacing step 5 deep,
+ * fixed to the box and under the rows. A caller narrows the selectors to
+ * the edges nothing pinned covers. Forced colours draw no shade; the
+ * system's scrollbar is the cue. A bounded Table and a bounded ListGroup
+ * share it.
+ */
+export declare function blockEdgeShadeRules({ top, bottom, both, }: BlockEdgeSelectors): string;
 export declare function scrollRegionClassCatalog(): string[];
 /**
  * A region whose start column is pinned (sticky, on an opaque fill) hides

package/dist/css/css-scroll-region.js

@@ -60,6 +60,47 @@ ${selector}:focus-visible {
 
 ${scrollShadeRules(selector)}`;
 }
+/** The scroll shade fading away from an edge, a gradient toward `direction`. */
+export function blockShade(direction) {
+    return `linear-gradient(to ${direction}, ${scrollShadeColor}, transparent)`;
+}
+/**
+ * The shade a region of bounded height draws on its own top or bottom
+ * edge while `ScrollRegion` marks rows past it (`sw-scroll-more-top`,
+ * `sw-scroll-more-bottom`): a background layer a spacing step 5 deep,
+ * fixed to the box and under the rows. A caller narrows the selectors to
+ * the edges nothing pinned covers. Forced colours draw no shade; the
+ * system's scrollbar is the cue. A bounded Table and a bounded ListGroup
+ * share it.
+ */
+export function blockEdgeShadeRules({ top, bottom, both, }) {
+    return `${top},
+${bottom} {
+  background-repeat: no-repeat;
+  background-size: 100% var(--sw-space-5);
+}
+
+${top} {
+  background-image: ${blockShade('bottom')};
+  background-position: top;
+}
+
+${bottom} {
+  background-image: ${blockShade('top')};
+  background-position: bottom;
+}
+
+${both} {
+  background-image: ${blockShade('bottom')}, ${blockShade('top')};
+  background-position: top, bottom;
+}
+
+@media (forced-colors: active) {
+  ${top},
+  ${bottom},
+  ${both} { background-image: none; }
+}`;
+}
 export function scrollRegionClassCatalog() {
     return [
         'sw-scroll-more-start',

package/dist/css/css-section-nav-filled.js

@@ -1,6 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
-const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 /** How a section navigation marks its current item. */
 export const sectionNavAppearances = ['underline', 'filled'];
@@ -18,10 +17,7 @@ export function assertSectionNavAppearance(appearance) {
  * hovered link. A 2 px transparent border keeps room for forced colours,
  * where the current link's border turns Highlight.
  *
- * A count after a label (a number waiting there) is a filled pill: the
- * danger colour with its on-colour figures (4.5:1 in every palette, as a
- * danger Button's label), caption size at weight 700, a space-5 less
- * space-1 (20) high and at least as wide. Forced colours draw its edge.
+ * A count after a label is the shared count pill (`css-count-pill.ts`).
  */
 export function cssSectionNavFilledClasses() {
     // Two classes, so every filled rule outranks the side list's (one class
@@ -48,33 +44,14 @@ export function cssSectionNavFilledClasses() {
   font-weight: ${label.fontWeight};
 }
 
-[data-theme] .sw-section-nav-count {
-  align-items: center;
-  background: var(--sw-color-danger);
-  border-radius: var(--sw-radius-pill);
-  box-sizing: border-box;
-  color: var(--sw-color-onDanger);
-  display: inline-flex;
-  font-size: ${caption.fontSize}px;
-  font-variant-numeric: tabular-nums;
-  font-weight: 700;
-  justify-content: center;
-  letter-spacing: ${caption.letterSpacing}px;
-  line-height: 1;
-  min-height: calc(var(--sw-space-5) - var(--sw-space-1));
-  min-width: calc(var(--sw-space-5) - var(--sw-space-1));
-  padding-inline: var(--sw-space-1);
-}
-
 @media ${coarsePointerQuery} {
   [data-theme] ${filled} .sw-section-nav-link { min-height: ${touchTarget}; }
 }
 
 @media (forced-colors: active) {
   [data-theme] ${filled} .sw-section-nav-link[aria-current] { border-color: Highlight; }
-  [data-theme] .sw-section-nav-count { border: 1px solid CanvasText; }
 }`;
 }
 export function sectionNavFilledClassCatalog() {
-    return ['sw-section-nav-filled', 'sw-section-nav-count'];
+    return ['sw-section-nav-filled'];
 }

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

@@ -1,5 +1,12 @@
 export declare const statTileTones: readonly ["default", "accent", "success", "danger", "warning"];
 export type StatTileTone = (typeof statTileTones)[number];
+/**
+ * `card` (the default) is a tile on the surface with its own hairline and
+ * radius; `plain` has no surface, edge or padding, for figures inside a
+ * card that already has them, such as a row of answers divided by hairlines.
+ */
+export declare const statTileAppearances: readonly ["card", "plain"];
+export type StatTileAppearance = (typeof statTileAppearances)[number];
 /** The figure tile: a glyph circle before a label, a tabular value and a caption. Text colours come from `Text color`. */
 export declare function cssStatTileClasses(): string;
 export declare function statTileClassCatalog(): string[];

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

@@ -5,6 +5,12 @@ export const statTileTones = [
     'danger',
     'warning',
 ];
+/**
+ * `card` (the default) is a tile on the surface with its own hairline and
+ * radius; `plain` has no surface, edge or padding, for figures inside a
+ * card that already has them, such as a row of answers divided by hairlines.
+ */
+export const statTileAppearances = ['card', 'plain'];
 /** The figure tile: a glyph circle before a label, a tabular value and a caption. Text colours come from `Text color`. */
 export function cssStatTileClasses() {
     return `.sw-stat-tile {
@@ -44,6 +50,15 @@ export function cssStatTileClasses() {
   overflow-wrap: anywhere;
 }
 
+/* A plain tile is its figure alone, top-aligned, inside the card around it. */
+.sw-stat-tile-plain {
+  align-items: flex-start;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+}
+
 .sw-stat-tile-primary {
   background: var(--sw-color-accent);
   border-color: transparent;
@@ -63,6 +78,7 @@ export function cssStatTileClasses() {
 export function statTileClassCatalog() {
     return [
         'sw-stat-tile',
+        'sw-stat-tile-plain',
         'sw-stat-tile-primary',
         'sw-stat-tile-glyph',
         'sw-stat-tile-body',

package/dist/css/css-steps.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { checkStrokeIn } from './chevron.js';
 const body = typographyVariants.body;
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
@@ -29,8 +30,7 @@ function markerRules() {
 
 /* Private chrome: a check drawn with two borders, as Checkbox's. */
 .sw-steps-item-done .sw-steps-marker::after {
-  border-bottom: 2px solid var(--sw-color-surface);
-  border-right: 2px solid var(--sw-color-surface);
+  ${checkStrokeIn('var(--sw-color-surface)')}
   content: '';
   height: var(--sw-space-3);
   margin-top: calc(-1 * var(--sw-space-1) / 2);