@scalewing/react 1.38.0 → 1.40.0

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

@@ -0,0 +1,54 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+/** The counts drawn as the pill: SectionNav's and a Nav word's. */
+const pills = ['sw-section-nav-count', 'sw-nav-count'];
+/*
+ * A count after a destination's words (a number waiting there, such as
+ * tasks to do) 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. SectionNav's item count and Nav's
+ * NavCount share it, so an area's count reads the same in both.
+ */
+export function cssCountPillClasses() {
+    const selector = pills.map((name) => `[data-theme] .${name}`).join(',\n');
+    return `${selector} {
+  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);
+}
+
+/*
+ * A Nav link holding a count lays out as SectionNav's link does: the words
+ * and the pill centred on one line a space-2 apart (the space text node
+ * that keeps the name collapses), so the link is as tall as its siblings
+ * and its words stay level with theirs. A Button already does this. At
+ * zero specificity, so a link's \`hideBelow\` or \`hideFrom\` still hides it.
+ * In forced colours a current link's underline runs under the pill's
+ * figure too, as the pill is a flex item of the link.
+ */
+:where(.sw-nav a:has(> .sw-nav-count)) {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  ${selector.replaceAll('\n', '\n  ')} { border: 1px solid CanvasText; }
+}`;
+}
+export function countPillClassCatalog() {
+    return [...pills];
+}

package/dist/css/css-data-bar.d.ts

@@ -1,16 +1,11 @@
 /**
  * What a range bar's fill means: the start or a carried figure (`neutral`),
  * money in (`success`), money out (`muted`, never danger: an outflow is not
- * an error), a subtotal (`strong`) and what was counted or recorded
- * (`accent`).
+ * an error), a subtotal (`strong`), what was counted or recorded
+ * (`accent`), and a shortage (`danger`, light red: for a shortage, never
+ * for cash leaving).
  */
-export declare const dataBarTones: readonly ["neutral", "success", "muted", "strong", "accent"];
+export declare const dataBarTones: readonly ["neutral", "success", "muted", "strong", "accent", "danger"];
 export type DataBarTone = (typeof dataBarTones)[number];
-export declare const dataBarToneMixes: Record<DataBarTone, {
-    color: 'muted' | 'success' | 'text' | 'accent';
-    share: number;
-}>;
-/** A tone's fill: its colour, mixed into the surface by its share. */
-export declare function dataBarToneFill(tone: DataBarTone): string;
 export declare function cssDataBarClasses(): string;
 export declare function dataBarClassCatalog(): string[];

package/dist/css/css-data-bar.js

@@ -1,42 +1,26 @@
+import { chartFill, statementFillTones } from './chart-tones.js';
 /**
  * What a range bar's fill means: the start or a carried figure (`neutral`),
  * money in (`success`), money out (`muted`, never danger: an outflow is not
- * an error), a subtotal (`strong`) and what was counted or recorded
- * (`accent`).
+ * an error), a subtotal (`strong`), what was counted or recorded
+ * (`accent`), and a shortage (`danger`, light red: for a shortage, never
+ * for cash leaving).
  */
-export const dataBarTones = [
-    'neutral',
-    'success',
-    'muted',
-    'strong',
-    'accent',
-];
+export const dataBarTones = statementFillTones;
 /*
- * Each tone is a semantic colour, mixed into the surface where the board
- * draws a lighter fill: the bar is decorative (the figure is the cell's
- * text), so the mixes keep the tones apart from one another rather than
- * meeting a text contrast: every tone at 1.5:1 or more on the surface, and
- * the three greys (out, start, subtotal) 1.5:1 or more from the next one,
- * in every palette and scheme (`data-bar.test.tsx`). `accent` is the
- * accent itself.
+ * Each tone is a chart fill (`chart-tones.ts`, shared with ChartLegend's
+ * `bar` swatch so a statement's legend matches its bars): a semantic
+ * colour mixed into the surface where the board draws a lighter fill. The
+ * bar is decorative (the figure is the cell's text), so the mixes keep the
+ * tones apart from one another rather than meeting a text contrast: every
+ * tone at 1.5:1 or more on the surface, and the three greys (out, start,
+ * subtotal) 1.5:1 or more from the next one, in every palette and scheme
+ * (`data-bar.test.tsx`). `accent` is the accent itself; `danger` is the
+ * danger colour at 40 %.
  */
-export const dataBarToneMixes = {
-    neutral: { color: 'muted', share: 0.65 },
-    success: { color: 'success', share: 0.55 },
-    muted: { color: 'muted', share: 0.35 },
-    strong: { color: 'text', share: 0.85 },
-    accent: { color: 'accent', share: 1 },
-};
-/** A tone's fill: its colour, mixed into the surface by its share. */
-export function dataBarToneFill(tone) {
-    const { color, share } = dataBarToneMixes[tone];
-    if (share === 1)
-        return `var(--sw-color-${color})`;
-    return `color-mix(in srgb, var(--sw-color-${color}) ${Math.round(share * 100)}%, var(--sw-color-surface))`;
-}
 function toneRules() {
     return dataBarTones
-        .map((tone) => `.sw-data-bar-${tone} > .sw-data-bar-fill { background: ${dataBarToneFill(tone)}; }`)
+        .map((tone) => `.sw-data-bar-${tone} > .sw-data-bar-fill { background: ${chartFill(tone)}; }`)
         .join('\n');
 }
 /*

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

@@ -2,6 +2,7 @@ import { typographyVariants } from '@scalewing/tokens';
 import { disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
 import { zIndex } from './stacking.js';
 import { quietFill } from './quiet-fill.js';
+import { rangeBand, rangeBandHover } from './range-band.js';
 const body = typographyVariants.body;
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
@@ -241,7 +242,7 @@ function calendarRules() {
  * accent ring (3:1 or more on the band). The selected day sits on top.
  */
 .sw-date-field-day-in-range {
-  background: color-mix(in srgb, var(--sw-color-accent) 16%, transparent);
+  background: ${rangeBand};
   border-radius: 0;
   color: var(--sw-color-text);
 }
@@ -267,7 +268,7 @@ function calendarRules() {
 }
 
 .sw-date-field-day-in-range:hover:not([aria-disabled='true']) {
-  background: color-mix(in srgb, var(--sw-color-accent) 24%, transparent);
+  background: ${rangeBandHover};
 }
 
 .sw-date-field-day[aria-selected='true'],

package/dist/css/css-date-range-presets.d.ts

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

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

@@ -0,0 +1,109 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+const body = typographyVariants.body;
+/*
+ * DateRangeButton's presets. In the popover they are a list beside the
+ * months from `lg` up, the pressed one on the quiet fill in the label
+ * weight; from `md` to `lg`, where two months and a list do not fit side
+ * by side, the same list wraps in a row above the months and takes no
+ * width of its own. In the sheet they are one row of pills that scrolls
+ * sideways, the pressed one in the text colour.
+ */
+export function cssDateRangePresetsClasses() {
+    return `.sw-date-range-presets {
+  contain: inline-size;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-1);
+  padding: var(--sw-space-3) var(--sw-space-3) 0;
+}
+
+@media ${breakpointQuery('from', 'lg')} {
+  .sw-date-range-presets:not(.sw-date-range-presets-row) {
+    border-inline-end: 1px solid var(--sw-color-border);
+    contain: none;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    padding: var(--sw-space-3) var(--sw-space-2);
+  }
+}
+
+.sw-date-range-preset {
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  flex: none;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${body.fontWeight};
+  line-height: ${label.lineHeight}px;
+  margin: 0;
+  min-height: var(--sw-control-sm-min-height);
+  padding: 0 var(--sw-control-sm-padding-inline);
+  text-align: start;
+  white-space: nowrap;
+}
+
+.sw-date-range-preset:hover,
+.sw-date-range-preset[aria-pressed='true'] {
+  background: ${quietFill};
+}
+
+.sw-date-range-preset[aria-pressed='true'] {
+  font-weight: ${label.fontWeight};
+}
+
+.sw-date-range-preset:focus { outline: none; }
+
+.sw-date-range-preset:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-date-range-presets-row {
+  contain: none;
+  flex-wrap: nowrap;
+  gap: var(--sw-space-2);
+  overflow-x: auto;
+  padding: var(--sw-focus-ring-width) var(--sw-focus-ring-offset);
+}
+
+.sw-date-range-presets-row .sw-date-range-preset {
+  background: ${quietFill};
+  border-radius: var(--sw-radius-pill);
+}
+
+.sw-date-range-presets-row .sw-date-range-preset[aria-pressed='true'] {
+  background: var(--sw-color-text);
+  color: var(--sw-color-surface);
+}
+
+@media ${coarsePointerQuery} {
+  .sw-date-range-preset { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  .sw-date-range-presets { border-color: CanvasText; }
+  .sw-date-range-presets-row .sw-date-range-preset { border-color: ButtonText; }
+  .sw-date-range-preset[aria-pressed='true'],
+  .sw-date-range-presets-row .sw-date-range-preset[aria-pressed='true'] {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+}`;
+}
+export function dateRangePresetsClassCatalog() {
+    return [
+        'sw-date-range-presets',
+        'sw-date-range-presets-row',
+        'sw-date-range-preset',
+    ];
+}

package/dist/css/css-date-range.d.ts

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

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-line-chart.d.ts

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

package/dist/css/css-line-chart.js

@@ -0,0 +1,31 @@
+import { chartAreaShare } from './chart-tones.js';
+/*
+ * The marks only a line chart draws, beside the shared plot classes
+ * (`css-chart-plot.ts`): the area under the line, a quiet tint of its
+ * stroke; a marker's triangle in its tone's stroke; and the marker's
+ * words in its tone's ink. Forced colours drop the area and draw markers
+ * and their words in the text colour, apart from the line's highlight
+ * colour.
+ */
+export function cssLineChartClasses() {
+    return `.sw-chart-area {
+  fill: color-mix(in srgb, var(--sw-chart-stroke) ${chartAreaShare * 100}%, transparent);
+}
+
+.sw-chart-marker { fill: var(--sw-chart-stroke); }
+
+.sw-chart-marker-label {
+  fill: var(--sw-chart-ink);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+@media (forced-colors: active) {
+  .sw-chart-area { fill: none; }
+  .sw-chart-marker,
+  .sw-chart-marker-label { fill: CanvasText; }
+}`;
+}
+export function lineChartClassCatalog() {
+    return ['sw-chart-area', 'sw-chart-marker', 'sw-chart-marker-label'];
+}

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

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