@scalewing/react 1.40.0 → 1.42.0

package/dist/css/chart-tones.js

@@ -70,6 +70,10 @@ export const chartStrokeColors = {
     danger: { semantic: 'danger' },
     neutral: { semantic: 'muted' },
 };
+/** A stroke tone's colour as CSS, such as a line's or a bar's. */
+export function chartStroke(tone) {
+    return sourceProperty(chartStrokeColors[tone]);
+}
 /**
  * How much of a line's stroke the area under it takes, over transparency:
  * a quiet tint behind the line, decorative (the line carries the values).
@@ -115,7 +119,7 @@ function toneDeclarations(tone) {
     if (isOneOf(chartFillTones, tone))
         declarations.push(`--sw-chart-fill: ${chartFill(tone)};`);
     if (isOneOf(chartStrokeTones, tone))
-        declarations.push(`--sw-chart-stroke: ${sourceProperty(chartStrokeColors[tone])};`);
+        declarations.push(`--sw-chart-stroke: ${chartStroke(tone)};`);
     if (isOneOf(chartInkTones, tone))
         declarations.push(`--sw-chart-ink: ${chartColorMix(chartInkMixes[tone])};`);
     return declarations.join(' ');

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

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

package/dist/css/css-article.js

@@ -0,0 +1,110 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+const { caption, label } = typographyVariants;
+/*
+ * An article is a card at the reading width (--sw-reading-max): its cover
+ * photo edge to edge across the top at 3:1 (2:1 on a phone), rounded with
+ * the card's top corners, then its words a space-6 below and above and a
+ * space-8 in from the sides (space-5 all round on a phone). The eyebrow
+ * is caption type at the label's weight, muted, with the actions at its
+ * row's end (when the row is too narrow they wrap under it, at its
+ * start); the title a space-3 under it; the meta line muted caption type
+ * a space-3 under the title; a hairline a space-3 under that, and the
+ * body a space-4 under the hairline. The card sits at the start of a
+ * wider column, as a page's main column does.
+ */
+export function cssArticleClasses() {
+    return `.sw-article {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  max-inline-size: var(--sw-reading-max);
+  min-width: 0;
+}
+
+.sw-article-cover {
+  aspect-ratio: 3 / 1;
+  background: var(--sw-color-subtle);
+  border-start-end-radius: inherit;
+  border-start-start-radius: inherit;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+.sw-article-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: var(--sw-space-6) var(--sw-space-8);
+}
+
+.sw-article-header {
+  display: flex;
+  flex-direction: column;
+  margin-block-end: var(--sw-space-3);
+  min-width: 0;
+}
+
+.sw-article-top {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+  justify-content: space-between;
+  margin-block-end: var(--sw-space-3);
+}
+
+.sw-article-eyebrow {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  font-weight: ${label.fontWeight};
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sw-article-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+}
+
+.sw-article-actions:only-child { margin-inline-start: auto; }
+
+.sw-article-title { overflow-wrap: anywhere; }
+
+.sw-article-meta {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  margin-block-start: var(--sw-space-3);
+  overflow-wrap: anywhere;
+}
+
+.sw-article-content {
+  margin-block-start: var(--sw-space-4);
+  min-width: 0;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-article-cover { aspect-ratio: 2 / 1; }
+  .sw-article-body { padding: var(--sw-space-5); }
+}`;
+}
+export function articleClassCatalog() {
+    return [
+        'sw-article',
+        'sw-article-cover',
+        'sw-article-body',
+        'sw-article-header',
+        'sw-article-top',
+        'sw-article-eyebrow',
+        'sw-article-actions',
+        'sw-article-title',
+        'sw-article-meta',
+        'sw-article-content',
+    ];
+}

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

@@ -1,9 +1,24 @@
+import { type ChartStrokeTone } from './chart-tones.js';
 /**
  * The meanings a bar's fill can take in place of its sign's default (the
  * accent, or danger for a negative value), such as a diverging chart whose
  * overage is a warning and whose shortage is danger.
  */
-export declare const barChartTones: readonly ["accent", "success", "warning", "danger"];
-export type BarChartTone = (typeof barChartTones)[number];
+export declare const barChartTones: readonly ["accent", "success", "warning", "danger", "neutral"];
+export type BarChartTone = ChartStrokeTone;
+/**
+ * A tone's colour: the charts' stroke colour of that tone (`chart-tones.ts`),
+ * a semantic colour at 3:1 or more, the muted grey for `neutral`, a bar
+ * that is counted but not the point (the other days beside the busiest
+ * ones). Not the lighter fill mix a column takes, which is 1.5:1.
+ */
+export declare function barChartToneColor(tone: BarChartTone): string;
+/**
+ * `track` (the default) draws each bar in a track with the value axis
+ * under the bars; `bare` draws the bars alone, with no track and no axis,
+ * for bars whose values are all written beside them.
+ */
+export declare const barChartAppearances: readonly ["track", "bare"];
+export type BarChartAppearance = (typeof barChartAppearances)[number];
 export declare function cssBarChartClasses(): string;
 export declare function barChartClassCatalog(): string[];

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

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { chartStroke, chartStrokeTones, } from './chart-tones.js';
 const caption = typographyVariants.caption;
 const data = typographyVariants.data;
 /**
@@ -6,12 +7,22 @@ const data = typographyVariants.data;
  * accent, or danger for a negative value), such as a diverging chart whose
  * overage is a warning and whose shortage is danger.
  */
-export const barChartTones = [
-    'accent',
-    'success',
-    'warning',
-    'danger',
-];
+export const barChartTones = chartStrokeTones;
+/**
+ * A tone's colour: the charts' stroke colour of that tone (`chart-tones.ts`),
+ * a semantic colour at 3:1 or more, the muted grey for `neutral`, a bar
+ * that is counted but not the point (the other days beside the busiest
+ * ones). Not the lighter fill mix a column takes, which is 1.5:1.
+ */
+export function barChartToneColor(tone) {
+    return chartStroke(tone);
+}
+/**
+ * `track` (the default) draws each bar in a track with the value axis
+ * under the bars; `bare` draws the bars alone, with no track and no axis,
+ * for bars whose values are all written beside them.
+ */
+export const barChartAppearances = ['track', 'bare'];
 /*
  * A tone's rule follows the negative fill's, at the same specificity, so a
  * toned negative bar keeps its diverging geometry and takes the tone's
@@ -22,7 +33,7 @@ export const barChartTones = [
  */
 function toneRules() {
     return barChartTones
-        .map((tone) => `.sw-bar-chart-fill-${tone} { background: var(--sw-color-${tone}); }`)
+        .map((tone) => `.sw-bar-chart-fill-${tone} { background: ${barChartToneColor(tone)}; }`)
         .join('\n');
 }
 /*
@@ -66,6 +77,23 @@ function divergingRules() {
   .sw-bar-chart-diverging .sw-bar-chart-track::before { background: CanvasText; }
 }`;
 }
+/*
+ * A bare chart draws no track: the bar sits on the surface around it, the
+ * track's room kept so the labels and values line up as before (in forced
+ * colours its edge is the canvas colour, as forcing replaces a transparent
+ * one). A diverging bare chart keeps its zero hairline.
+ */
+function bareRules() {
+    return `.sw-bar-chart-bare .sw-bar-chart-track {
+  background: transparent;
+  border-color: transparent;
+}
+
+/* Forced colours replace a transparent edge; the canvas colour hides it. */
+@media (forced-colors: active) {
+  .sw-bar-chart-bare .sw-bar-chart-track { border-color: Canvas; }
+}`;
+}
 export function cssBarChartClasses() {
     return `.sw-bar-chart {
   display: grid;
@@ -151,6 +179,8 @@ ${toneRules()}
 
 ${divergingRules()}
 
+${bareRules()}
+
 @media (forced-colors: active) {
   .sw-bar-chart-fill { background: CanvasText; }
 }`;
@@ -169,5 +199,6 @@ export function barChartClassCatalog() {
         'sw-bar-chart-value',
         'sw-bar-chart-axis-track',
         'sw-bar-chart-diverging',
+        'sw-bar-chart-bare',
     ];
 }

package/dist/css/css-button-group-attached.d.ts

@@ -1,2 +1,5 @@
+import { type Breakpoint } from './breakpoints.js';
+/** The class that stretches an attached group below a breakpoint. */
+export declare function buttonGroupFullWidthClass(breakpoint: Breakpoint): string;
 export declare function cssButtonGroupAttachedClasses(): string;
 export declare function buttonGroupAttachedClassCatalog(): string[];

package/dist/css/css-button-group-attached.js

@@ -1,6 +1,10 @@
 import { breakpointQuery } from './breakpoints.js';
 import { buttonGroupTrackClassCatalog, cssButtonGroupTrackClasses, } from './css-button-group-track.js';
 import { joinedZIndex } from './stacking.js';
+/** The class that stretches an attached group below a breakpoint. */
+export function buttonGroupFullWidthClass(breakpoint) {
+    return `sw-button-group-full-below-${breakpoint}`;
+}
 /*
  * An attached ButtonGroup is one joined control, such as Previous, Today
  * and Next: its direct Button children side by side with no gap and one
@@ -17,6 +21,9 @@ import { joinedZIndex } from './stacking.js';
  * button renders beside itself (CalendarButton, DateRangeButton) does not
  * cost the next button its divider or the last one its rounded corners.
  *
+ * With `fullWidthBelow`, below that breakpoint the group fills its column
+ * and its buttons share the width equally.
+ *
  * The group is its own stacking context: a pressed button's ring paints
  * over its neighbours and the focused button's standard outer ring over
  * both, so neither is covered by the next button.
@@ -70,8 +77,18 @@ ${group} > .sw-button:focus-visible {
   ${group} > * { width: auto; }
 }
 
+/* Its own block, after the phone row's, so a group that does not fill is unchanged. */
+@media ${breakpointQuery('below', 'md')} {
+  ${group}.${buttonGroupFullWidthClass('md')} { width: 100%; }
+  ${group}.${buttonGroupFullWidthClass('md')} > .sw-button { flex: 1 1 0; min-width: 0; }
+}
+
 ${cssButtonGroupTrackClasses()}`;
 }
 export function buttonGroupAttachedClassCatalog() {
-    return ['sw-button-group-attached', ...buttonGroupTrackClassCatalog()];
+    return [
+        'sw-button-group-attached',
+        buttonGroupFullWidthClass('md'),
+        ...buttonGroupTrackClassCatalog(),
+    ];
 }

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-components.js

@@ -5,7 +5,11 @@ 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 { cssFileFieldClasses } from './css-file-field.js';
+import { cssArticleClasses } from './css-article.js';
+import { cssDocumentViewerClasses } from './css-document-viewer.js';
 import { cssListClasses } from './css-list.js';
+import { cssMarkdownClasses } from './css-markdown.js';
 import { cssCountPillClasses } from './css-count-pill.js';
 import { cssBarChartClasses } from './css-bar-chart.js';
 import { cssChartLegendClasses } from './css-chart-legend.js';
@@ -24,6 +28,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';
@@ -148,6 +154,14 @@ ${cssDateRangeClasses()}
 
 ${cssListClasses()}
 
+${cssFileFieldClasses()}
+
+${cssArticleClasses()}
+
+${cssDocumentViewerClasses()}
+
+${cssMarkdownClasses()}
+
 ${cssCountPillClasses()}
 
 ${cssBarChartClasses()}
@@ -174,6 +188,10 @@ ${cssDialogFrameClasses()}
 
 ${cssDialogBandedClasses()}
 
+${cssDialogCanvasClasses()}
+
+${cssDialogGrabberClasses()}
+
 ${cssAccordionClasses()}
 
 ${cssSelectClasses()}

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

@@ -2,6 +2,8 @@ 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'];
+/** NavCount's news tone, a modifier of its pill. */
+const accentPill = 'sw-nav-count-accent';
 /*
  * 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
@@ -30,6 +32,17 @@ export function cssCountPillClasses() {
   padding-inline: var(--sw-space-1);
 }
 
+/*
+ * NavCount's \`tone="accent"\`: a count that is news, not work waiting (what
+ * was added since the person last looked), is the accent fill with its
+ * on-colour figures (4.5:1 in every palette, as a primary Button's label).
+ * One class more specific than the pill, so it wins in any order.
+ */
+[data-theme] .sw-nav-count.${accentPill} {
+  background: var(--sw-color-accent);
+  color: var(--sw-color-onAccent);
+}
+
 /*
  * 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
@@ -50,5 +63,5 @@ export function cssCountPillClasses() {
 }`;
 }
 export function countPillClassCatalog() {
-    return [...pills];
+    return [...pills, accentPill];
 }

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,5 +1,6 @@
 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';
@@ -334,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-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[];