@scalewing/react 1.39.0 → 1.41.0

package/dist/css/css-canvas-grouped.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The page tones a canvas can take: `default`, the theme's background, and
+ * `grouped`, a quieter grey so white cards stand apart from the page, as a
+ * settings or report page groups its content in cards.
+ */
+export declare const themeCanvases: readonly ["default", "grouped"];
+export type ThemeCanvas = (typeof themeCanvases)[number];
+/**
+ * How much of the muted colour the light grouped canvas mixes into the
+ * background: a grey a step off white that keeps the text and muted
+ * colours at 4.5:1 or more in every palette (`canvas-grouped.test.tsx`).
+ */
+export declare const groupedCanvasMutedShare = 0.07;
+/** The grouped canvas's colour, for a surface that sits on it, such as a dialog's body. */
+export declare const groupedCanvasFill = "var(--sw-canvas-grouped)";
+export declare function cssCanvasGroupedRules(): string;
+export declare function assertThemeCanvas(canvas: unknown): void;

package/dist/css/css-canvas-grouped.js

@@ -0,0 +1,40 @@
+/**
+ * The page tones a canvas can take: `default`, the theme's background, and
+ * `grouped`, a quieter grey so white cards stand apart from the page, as a
+ * settings or report page groups its content in cards.
+ */
+export const themeCanvases = ['default', 'grouped'];
+/**
+ * How much of the muted colour the light grouped canvas mixes into the
+ * background: a grey a step off white that keeps the text and muted
+ * colours at 4.5:1 or more in every palette (`canvas-grouped.test.tsx`).
+ */
+export const groupedCanvasMutedShare = 0.07;
+/** The grouped canvas's colour, for a surface that sits on it, such as a dialog's body. */
+export const groupedCanvasFill = 'var(--sw-canvas-grouped)';
+/*
+ * The grouped canvas: in the light scheme the background with a little of
+ * the muted colour, in the dark scheme the background itself, which is
+ * already darker than its surface. The colour is declared on every themed
+ * node (a nested one recomputes it from its own colours) and painted only
+ * where `data-canvas="grouped"` asks for it, so no other page changes.
+ * Forced colours paint the system canvas as they do the default page.
+ */
+export function cssCanvasGroupedRules() {
+    const share = Math.round(groupedCanvasMutedShare * 100);
+    return `[data-theme] {
+  --sw-canvas-grouped: color-mix(in srgb, var(--sw-color-muted) ${share}%, var(--sw-color-background));
+}
+
+[data-theme='dark'] {
+  --sw-canvas-grouped: var(--sw-color-background);
+}
+
+[data-theme][data-canvas='grouped'] {
+  background-color: ${groupedCanvasFill};
+}`;
+}
+export function assertThemeCanvas(canvas) {
+    if (!themeCanvases.includes(canvas))
+        throw new RangeError(`Unknown ThemeProvider canvas: ${String(canvas)}`);
+}

package/dist/css/css-checkbox.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { checkStrokeIn } from './chevron.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
 export function cssCheckboxClasses() {
@@ -49,8 +50,7 @@ export function cssCheckboxClasses() {
 }
 
 .sw-checkbox-mark::after {
-  border-bottom: 2px solid var(--sw-color-surface);
-  border-right: 2px solid var(--sw-color-surface);
+  ${checkStrokeIn('var(--sw-color-surface)')}
   content: '';
   display: none;
   height: var(--sw-space-2);

package/dist/css/css-components.js

@@ -4,6 +4,9 @@ import { cssActionMenuClasses } from './css-action-menu.js';
 import { cssAccordionClasses } from './css-accordion.js';
 import { cssButtonClasses } from './css-button.js';
 import { cssCalendarButtonClasses } from './css-calendar-button.js';
+import { cssDateRangeClasses } from './css-date-range.js';
+import { cssListClasses } from './css-list.js';
+import { cssCountPillClasses } from './css-count-pill.js';
 import { cssBarChartClasses } from './css-bar-chart.js';
 import { cssChartLegendClasses } from './css-chart-legend.js';
 import { cssChartPlotClasses } from './css-chart-plot.js';
@@ -21,6 +24,8 @@ import { cssDateFieldClasses } from './css-date-field.js';
 import { cssDialogClasses } from './css-dialog.js';
 import { cssDialogBandedClasses } from './css-dialog-banded.js';
 import { cssDialogFrameClasses } from './css-dialog-frame.js';
+import { cssDialogCanvasClasses } from './css-dialog-canvas.js';
+import { cssDialogGrabberClasses } from './css-dialog-grabber.js';
 import { cssComboboxClasses } from './css-combobox.js';
 import { cssSelectClasses } from './css-select.js';
 import { cssMultiSelectClasses } from './css-multi-select.js';
@@ -141,6 +146,12 @@ ${cssDateFieldClasses()}
 
 ${cssCalendarButtonClasses()}
 
+${cssDateRangeClasses()}
+
+${cssListClasses()}
+
+${cssCountPillClasses()}
+
 ${cssBarChartClasses()}
 
 ${cssDataBarClasses()}
@@ -165,6 +176,10 @@ ${cssDialogFrameClasses()}
 
 ${cssDialogBandedClasses()}
 
+${cssDialogCanvasClasses()}
+
+${cssDialogGrabberClasses()}
+
 ${cssAccordionClasses()}
 
 ${cssSelectClasses()}

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

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

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-date-field-calendar-entry.d.ts

@@ -0,0 +1,11 @@
+/**
+ * DateField's calendar entry: one neutral Button showing the chosen day (or
+ * the words that ask for one) after the calendar glyph, shaped as a field's
+ * control rather than a pill, sized to its words on one line at the
+ * column's start, the danger edge while the field is invalid.
+ */
+export declare const dateFieldEntries: readonly ["typed", "calendar"];
+export type DateFieldEntry = (typeof dateFieldEntries)[number];
+export declare function assertDateFieldEntry(entry: unknown): void;
+export declare function cssDateFieldCalendarEntryClasses(): string;
+export declare function dateFieldCalendarEntryClassCatalog(): string[];

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

@@ -0,0 +1,50 @@
+/**
+ * DateField's calendar entry: one neutral Button showing the chosen day (or
+ * the words that ask for one) after the calendar glyph, shaped as a field's
+ * control rather than a pill, sized to its words on one line at the
+ * column's start, the danger edge while the field is invalid.
+ */
+export const dateFieldEntries = ['typed', 'calendar'];
+export function assertDateFieldEntry(entry) {
+    if (!dateFieldEntries.includes(entry))
+        throw new RangeError(`Unknown DateField entry: ${String(entry)}`);
+}
+const entry = '.sw-button.sw-date-field-calendar-entry';
+export function cssDateFieldCalendarEntryClasses() {
+    return `${entry} {
+  align-self: flex-start;
+  border-radius: var(--sw-radius-sm);
+  flex: none;
+  justify-content: flex-start;
+  max-width: 100%;
+  text-align: start;
+  white-space: nowrap;
+}
+
+/* A long day or word in a narrow column ends in an ellipsis; the name keeps it whole. */
+.sw-date-field-calendar-entry-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+${entry} .sw-date-field-glyph {
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
+${entry}.sw-date-field-calendar-entry-invalid {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  ${entry}.sw-date-field-calendar-entry-invalid { border-color: Mark; }
+}`;
+}
+export function dateFieldCalendarEntryClassCatalog() {
+    return [
+        'sw-date-field-calendar-entry',
+        'sw-date-field-calendar-entry-text',
+        'sw-date-field-calendar-entry-invalid',
+    ];
+}

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

@@ -1,7 +1,9 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
+import { cssDateFieldCalendarEntryClasses, dateFieldCalendarEntryClassCatalog, } from './css-date-field-calendar-entry.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 +243,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 +269,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'],
@@ -333,12 +335,15 @@ function adaptiveRules() {
 export function cssDateFieldClasses() {
     return `${fieldRules()}
 
+${cssDateFieldCalendarEntryClasses()}
+
 ${calendarRules()}
 
 ${adaptiveRules()}`;
 }
 export function dateFieldClassCatalog() {
     return [
+        ...dateFieldCalendarEntryClassCatalog(),
         'sw-date-field',
         'sw-date-field-label',
         'sw-date-field-control',

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-denomination-grid.js

@@ -6,6 +6,7 @@ import { cssDenominationLabelClasses, denominationLabelClassCatalog, } from './c
 import { cssDenominationAlignedClasses, denominationAlignedClassCatalog, } from './css-denomination-aligned.js';
 import { cssDenominationEntryClasses, denominationEntryClassCatalog, } from './css-denomination-entry.js';
 import { cssDenominationValueRowClasses, denominationValueRowClassCatalog, } from './css-denomination-value-row.js';
+import { cssDenominationTransposedClasses, denominationTransposedClassCatalog, } from './css-denomination-transposed.js';
 import { cssDenominationCellToneClasses, denominationCellToneClassCatalog, } from './css-denomination-cell-tones.js';
 import { pinnedStartShadeRules, scrollRegionRules, } from './css-scroll-region.js';
 import { visuallyHiddenDeclarations } from './css-utilities.js';
@@ -263,6 +264,8 @@ ${cssDenominationAppearanceClasses()}
 
 ${cssDenominationValueRowClasses()}
 
+${cssDenominationTransposedClasses()}
+
 @media (forced-colors: active) {
   .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
   .sw-denomination-strip .sw-denomination-label::before { background: CanvasText; forced-color-adjust: none; }
@@ -307,5 +310,6 @@ export function denominationGridClassCatalog() {
         ...denominationLabelClassCatalog(),
         ...denominationAppearanceClassCatalog(),
         ...denominationValueRowClassCatalog(),
+        ...denominationTransposedClassCatalog(),
     ];
 }

package/dist/css/css-denomination-transposed.d.ts

@@ -0,0 +1,4 @@
+/** A grid whose entry counts keep room for `--sw-denomination-count-digits` digits. */
+export declare const denominationCountDigitsClass = "sw-denomination-count-digits";
+export declare function cssDenominationTransposedClasses(): string;
+export declare function denominationTransposedClassCatalog(): string[];