@scalewing/react 1.39.0 → 1.41.0

package/dist/css/css-denomination-transposed.js

@@ -0,0 +1,178 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { pinnedStartShadeRules } from './css-scroll-region.js';
+import { zIndex } from './stacking.js';
+const body = typographyVariants.body;
+const data = typographyVariants.data;
+const label = typographyVariants.label;
+/** A grid whose entry counts keep room for `--sw-denomination-count-digits` digits. */
+export const denominationCountDigitsClass = 'sw-denomination-count-digits';
+const transposed = '.sw-denomination-transposed';
+/*
+ * A transposed strip, for a phone: a row per denomination under a
+ * hairline, each grid row's head on one line (the region scrolls rather
+ * than break a head word by word), the denomination column pinned with the
+ * strip's start shade,
+ * its label in the text colour at label size, then each grid row's counts
+ * (end-aligned, centred over steppers as in the strip) and its value line on
+ * the subtle fill, centred; the totals in a last row in each row's tone. A
+ * quiet grid row's heads and cells take the subtle fill; a disabled one's
+ * heads, read-only counts (toned ones too), values and total fade, its
+ * steppers disabled by the Stepper.
+ */
+function transposedRules() {
+    return `${transposed} {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+${transposed} th,
+${transposed} td {
+  padding: var(--sw-space-1) var(--sw-space-2);
+  vertical-align: middle;
+}
+
+${transposed} tbody tr,
+${transposed} tfoot tr {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+${transposed} .sw-denomination-transposed-head {
+  vertical-align: bottom;
+  white-space: nowrap;
+}
+
+${transposed} .sw-denomination-label-line {
+  justify-content: flex-end;
+}
+
+.sw-denomination-transposed-label {
+  color: var(--sw-color-text);
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  text-align: start;
+  white-space: nowrap;
+}
+
+${transposed} td.sw-denomination-entry {
+  padding: var(--sw-space-1);
+}
+
+.sw-denomination-transposed-entry .sw-denomination-transposed-head,
+.sw-denomination-transposed-entry .sw-denomination-cell {
+  text-align: center;
+}
+
+.sw-denomination-transposed-entry .sw-denomination-label-line {
+  justify-content: center;
+}
+
+.sw-denomination-transposed-value {
+  background: var(--sw-color-subtle);
+  font-size: ${label.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: ${data.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.sw-denomination-transposed-total {
+  color: var(--sw-denomination-tone);
+  font-size: ${data.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: ${data.letterSpacing}px;
+  line-height: ${data.lineHeight}px;
+  text-align: end;
+  white-space: nowrap;
+}
+
+.sw-denomination-transposed-entry .sw-denomination-transposed-total {
+  text-align: center;
+}
+
+/* The denomination column and its corner stay in view, as the strip's labels do. */
+${transposed} .sw-denomination-transposed-label,
+${transposed} :is(thead, tfoot) .sw-denomination-corner:first-child {
+  background: var(--sw-glass-fill);
+  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));
+  inset-inline-start: 0;
+  position: sticky;
+  ${zIndex('stickyCell')}
+}
+
+${pinnedStartShadeRules('.sw-denomination-scroll-transposed', [
+        '.sw-denomination-transposed-label',
+    ])}
+
+.sw-denomination-transposed-quiet {
+  background: var(--sw-color-subtle);
+}
+
+/* Over a toned count's full strength (three classes, emitted later). */
+.sw-denomination-grid${transposed} .sw-denomination-transposed-disabled:is(.sw-denomination-cell, .sw-denomination-transposed-value, .sw-denomination-transposed-total, .sw-denomination-transposed-head) {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-transposed-value,
+  .sw-denomination-transposed-quiet { background: Canvas; }
+  .sw-denomination-transposed-label,
+  .sw-denomination-transposed-value,
+  .sw-denomination-transposed-total { color: CanvasText; }
+}`;
+}
+/*
+ * The count's last options. A signed count's success colour reads from the
+ * cell too, so a transposed column (no row element) keeps it; a plain
+ * negative count is the text colour (cash out by design, never red). An
+ * entry count with room for more digits sets its track in the input's own
+ * type, so a digit's width (1ch) there is the input's, and keeps that many
+ * digits, its padding and its two hairlines before the strip scrolls.
+ */
+function countRules() {
+    return `.sw-denomination-cell-signed.sw-denomination-cell-positive {
+  color: var(--sw-color-success);
+}
+
+.sw-denomination-cell-negative.sw-denomination-cell-plain {
+  color: var(--sw-color-text);
+}
+
+.${denominationCountDigitsClass} .sw-denomination-entry .sw-stepper-full .sw-stepper-track {
+  font-size: ${body.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: ${label.fontWeight};
+  grid-template-columns: var(--sw-space-6) minmax(calc(var(--sw-denomination-count-digits) * 1ch + 2 * var(--sw-space-1) + 2px), 1fr) var(--sw-space-6);
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-cell-signed.sw-denomination-cell-positive,
+  .sw-denomination-cell-negative.sw-denomination-cell-plain { color: CanvasText; }
+}`;
+}
+export function cssDenominationTransposedClasses() {
+    return `${transposedRules()}
+
+${countRules()}`;
+}
+export function denominationTransposedClassCatalog() {
+    return [
+        'sw-denomination-transposed',
+        'sw-denomination-transposed-entry',
+        'sw-denomination-scroll-transposed',
+        'sw-denomination-transposed-head',
+        'sw-denomination-transposed-label',
+        'sw-denomination-transposed-value',
+        'sw-denomination-transposed-total',
+        'sw-denomination-transposed-quiet',
+        'sw-denomination-transposed-disabled',
+        'sw-denomination-cell-signed',
+        'sw-denomination-cell-plain',
+        denominationCountDigitsClass,
+    ];
+}

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

@@ -0,0 +1,3 @@
+export declare const dialogCanvasClass = "sw-dialog-canvas-grouped";
+export declare function cssDialogCanvasClasses(): string;
+export declare function dialogCanvasClassCatalog(): string[];

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

@@ -0,0 +1,20 @@
+import { groupedCanvasFill } from './css-canvas-grouped.js';
+export const dialogCanvasClass = 'sw-dialog-canvas-grouped';
+/*
+ * A dialog on the grouped canvas: its fill is the grouped canvas grey, solid
+ * with no blur, so Cards inside it stand apart as they do on a grouped page.
+ * The selector carries two classes so it wins over the glass and banded
+ * fills at any order. A banded title row and the pinned footer keep their
+ * own surface, so they stay bands over the grey. Forced colours paint the
+ * system canvas as they do any dialog.
+ */
+export function cssDialogCanvasClasses() {
+    return `.sw-dialog.${dialogCanvasClass} {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: ${groupedCanvasFill};
+}`;
+}
+export function dialogCanvasClassCatalog() {
+    return [dialogCanvasClass];
+}

package/dist/css/css-dialog-frame.js

@@ -1,3 +1,5 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
 /*
  * The dialog's frame beyond its title: a consumer icon before the title, a
  * muted description under it, and a footer pinned to the bottom edge.
@@ -42,13 +44,27 @@ export function cssDialogFrameClasses() {
 
 .sw-dialog-footer-status {
   align-items: center;
+  column-gap: var(--sw-space-2);
   display: flex;
   flex: 1 1 auto;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+/* The status line: muted caption words beside the actions. Its children
+   sit on one row and wrap as one phrase. */
+.sw-dialog-footer-note {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
   min-width: 0;
+  overflow-wrap: anywhere;
 }
 
-/* With no summary the live region stays in the dialog, so a first figure
-   is still announced, but it takes no room in the footer. */
+/* With no figure and no status line the live region stays in the
+   dialog, so a first figure is still announced, but it takes no room in
+   the footer. */
 .sw-dialog-footer-status:empty {
   clip-path: inset(50%);
   height: 1px;
@@ -78,6 +94,7 @@ export function dialogFrameClassCatalog() {
         'sw-dialog-description',
         'sw-dialog-footer',
         'sw-dialog-footer-status',
+        'sw-dialog-footer-note',
         'sw-dialog-footer-actions',
     ];
 }

package/dist/css/css-dialog-grabber.d.ts

@@ -0,0 +1,4 @@
+export declare const dialogGrabberClass = "sw-dialog-grabber";
+export declare const dialogHasGrabberClass = "sw-dialog-has-grabber";
+export declare function cssDialogGrabberClasses(): string;
+export declare function dialogGrabberClassCatalog(): string[];

package/dist/css/css-dialog-grabber.js

@@ -0,0 +1,56 @@
+import { breakpointQuery, breakpoints } from './breakpoints.js';
+import { dialogSheetClass } from './css-dialog.js';
+import { dialogBandedClass } from './css-dialog-banded.js';
+import { zIndex } from './stacking.js';
+export const dialogGrabberClass = 'sw-dialog-grabber';
+export const dialogHasGrabberClass = 'sw-dialog-has-grabber';
+/* How far the grabber sits from the sheet's top edge. */
+const inset = 'var(--sw-space-2)';
+/*
+ * A bottom sheet's grabber: a space-6 by space-1 bar on the muted colour at
+ * 40 %, centered a space-2 step under the top edge. Its margins add up to
+ * nothing (up into the dialog's space-5 padding to the space-2 inset, its
+ * space-1 height, then a space-3 step down), so the title keeps its place
+ * a space-3 under the bar. It is sticky at that inset while the content
+ * scrolls (sticky insets count from the padding edge, so it steps back
+ * past the space-5 padding) and sits over a banded title band, whose top padding grows to space-5 to keep the space-3
+ * step under the bar. Drawn only below the sheet's breakpoint; forced colours
+ * draw it in the text colour (inside the same breakpoint, at the same
+ * specificity, so the override wins).
+ */
+function sheetGrabberRules() {
+    return breakpoints
+        .map((breakpoint) => {
+        const sheet = `.${dialogSheetClass(breakpoint)}`;
+        return `@media ${breakpointQuery('below', breakpoint)} {
+  ${sheet} .${dialogGrabberClass} {
+    background: color-mix(in srgb, var(--sw-color-muted) 40%, transparent);
+    border-radius: var(--sw-radius-pill);
+    display: block;
+    height: var(--sw-space-1);
+    margin: calc(${inset} - var(--sw-space-5)) auto var(--sw-space-3);
+    position: sticky;
+    top: calc(${inset} - var(--sw-space-5));
+    width: var(--sw-space-6);
+    ${zIndex('sheetGrabber')}
+  }
+
+  ${sheet}.${dialogBandedClass}.${dialogHasGrabberClass} .sw-dialog-header {
+    padding-top: var(--sw-space-5);
+  }
+
+  @media (forced-colors: active) {
+    ${sheet} .${dialogGrabberClass} { background: CanvasText; forced-color-adjust: none; }
+  }
+}`;
+    })
+        .join('\n\n');
+}
+export function cssDialogGrabberClasses() {
+    return `.${dialogGrabberClass} { display: none; }
+
+${sheetGrabberRules()}`;
+}
+export function dialogGrabberClassCatalog() {
+    return [dialogGrabberClass, dialogHasGrabberClass];
+}

package/dist/css/css-dialog.js

@@ -16,8 +16,9 @@ export function dialogSheetClass(sheetBelow) {
  * shows above it), and padding that clears the safe areas. A pinned
  * footer steps past that padding so its surface reaches the bottom edge,
  * and pads itself clear of the home indicator. Emitted after
- * `sw-dialog-lg` and `sw-dialog-xl` so it wins at equal specificity. No
- * grabber: there is no drag gesture.
+ * `sw-dialog-lg` and `sw-dialog-xl` so it wins at equal specificity. A
+ * grabber is opt-in (css-dialog-grabber.ts) and marks the sheet only: there
+ * is no drag gesture.
  */
 function sheetRules() {
     return breakpoints

package/dist/css/css-document.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { cssBoxLinkClasses } from './css-box-link.js';
+import { cssCanvasGroupedRules } from './css-canvas-grouped.js';
 const body = typographyVariants.body;
 /** The native controls that take typed text: the canvas's text controls. */
 export const typedInputs = [
@@ -84,6 +85,8 @@ body {
   color-scheme: dark;
 }
 
+${cssCanvasGroupedRules()}
+
 [data-theme] a {
   color: var(--sw-color-accent);
   text-decoration: none;

package/dist/css/css-field-width.d.ts

@@ -0,0 +1,12 @@
+import { type TableColumnSize } from './css-table-layout.js';
+/**
+ * The widths a field's control can be capped at: the Table column sizes
+ * (`xs` 4rem to `xl` 16rem), so a short value such as a rate or a count
+ * sits in a box its own size instead of across the form's column.
+ */
+export type FieldWidth = TableColumnSize;
+export declare const fieldWidths: FieldWidth[];
+export declare function fieldWidthClass(width: FieldWidth): string;
+export declare function assertFieldWidth(width: unknown): void;
+export declare function cssFieldWidthClasses(): string;
+export declare function fieldWidthClassCatalog(): string[];

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

@@ -0,0 +1,49 @@
+import { typedInputs } from './css-document.js';
+import { tableColumnSizes } from './css-table-layout.js';
+export const fieldWidths = Object.keys(tableColumnSizes);
+export function fieldWidthClass(width) {
+    return `sw-field-width-${width}`;
+}
+export function assertFieldWidth(width) {
+    if (width !== undefined && !fieldWidths.includes(width))
+        throw new RangeError(`Unknown Field width: ${String(width)}`);
+}
+/**
+ * The field's own control: a native text control or select, or the frame
+ * round an adorned or search input. A checkbox, radio, range, colour or
+ * file input keeps its own size.
+ */
+const control = `:is(${typedInputs}, select, .sw-field-adorned, .sw-field-search)`;
+/*
+ * A sized field keeps its label, description and error at the column's
+ * width and caps only its control, at the start of the column, never wider
+ * than the column on a narrow screen. Every capped control measures its
+ * border box, and a resized textarea stays inside the column. A select
+ * is a content box in the canvas (its height leaves out its two
+ * hairlines), so a sized one states the whole control height instead, at
+ * md or xs.
+ */
+export function cssFieldWidthClasses() {
+    const widths = Object.entries(tableColumnSizes)
+        .map(([size, rem]) => `.${fieldWidthClass(size)} { --sw-field-width: ${rem}rem; }`)
+        .join('\n');
+    return `${widths}
+
+.sw-field-sized > ${control} {
+  align-self: flex-start;
+  box-sizing: border-box;
+  inline-size: min(100%, var(--sw-field-width));
+  max-inline-size: 100%;
+}
+
+[data-theme] .sw-field-sized > select {
+  height: var(--sw-control-md-min-height);
+}
+
+[data-theme] .sw-field-xs.sw-field-sized > select {
+  height: var(--sw-control-xs-min-height);
+}`;
+}
+export function fieldWidthClassCatalog() {
+    return ['sw-field-sized', ...fieldWidths.map(fieldWidthClass)];
+}

package/dist/css/css-field.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { controlSurface, disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
 import { cssFieldChangedClasses } from './css-field-changed.js';
+import { cssFieldWidthClasses, fieldWidthClassCatalog, } from './css-field-width.js';
 import { cssFieldSearchClasses, fieldSearchClassCatalog, } from './css-field-search.js';
 const caption = typographyVariants.caption;
 /*
@@ -88,6 +89,8 @@ ${cssFieldSearchClasses()}
 
 ${cssFieldChangedClasses()}
 
+${cssFieldWidthClasses()}
+
 @media (forced-colors: active) {
   [data-theme] .sw-field-invalid :is(input, select, textarea),
   .sw-field-invalid .sw-field-adorned { border-color: Mark; }
@@ -110,5 +113,6 @@ export function fieldClassCatalog() {
         'sw-field-prefix',
         'sw-field-suffix',
         ...fieldSearchClassCatalog(),
+        ...fieldWidthClassCatalog(),
     ];
 }

package/dist/css/css-filter-chips-layout.d.ts

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

package/dist/css/css-filter-chips-layout.js

@@ -0,0 +1,42 @@
+/*
+ * The chips' opt-in layouts.
+ *
+ * An inline count is set in the chip's own words, at tabular figures, after
+ * a middle dot ("Open · 3"); a chosen chip keeps it in its own ink.
+ *
+ * Chips that scroll keep one row and scroll sideways inside their own box
+ * (never the page) when they do not fit, each chip at its words' width on
+ * one line (no wrapping, which overrides the wrapping row's
+ * `overflow-wrap: anywhere`). The box is padded by the focus ring's reach and pulled back by
+ * the same amount, so a focused chip's ring is not clipped and the chips
+ * stay where a wrapped row puts them. A focused chip past the edge is
+ * scrolled into view by the browser. The scrollbar stays, thin, so a
+ * pointer without a sideways wheel can still reach the last chip.
+ */
+const ringReach = 'calc(var(--sw-focus-ring-width) + var(--sw-focus-ring-offset))';
+export function cssFilterChipsLayoutClasses() {
+    return `.sw-filter-chip-count-inline {
+  font-variant-numeric: tabular-nums;
+}
+
+.sw-filter-chips-scroll .sw-filter-chips-options {
+  flex-wrap: nowrap;
+  margin: calc(-1 * ${ringReach});
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: ${ringReach};
+  scrollbar-width: thin;
+}
+
+.sw-filter-chips-scroll .sw-filter-chip {
+  flex: none;
+  max-width: none;
+}
+
+.sw-filter-chips-scroll .sw-filter-chip-face {
+  white-space: nowrap;
+}`;
+}
+export function filterChipsLayoutClassCatalog() {
+    return ['sw-filter-chip-count-inline', 'sw-filter-chips-scroll'];
+}

package/dist/css/css-filter-chips.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { cssFilterChipsLayoutClasses, filterChipsLayoutClassCatalog, } from './css-filter-chips-layout.js';
 const label = typographyVariants.label;
 const data = typographyVariants.data;
 const caption = typographyVariants.caption;
@@ -123,6 +124,8 @@ export function cssFilterChipsClasses() {
   border-color: var(--sw-color-danger);
 }
 
+${cssFilterChipsLayoutClasses()}
+
 @media (forced-colors: active) {
   .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
   .sw-filter-chips-error { color: Mark; }
@@ -144,5 +147,6 @@ export function filterChipsClassCatalog() {
         'sw-filter-chip-count',
         'sw-filter-chip-quiet',
         'sw-filter-chips-error',
+        ...filterChipsLayoutClassCatalog(),
     ];
 }

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

@@ -0,0 +1,8 @@
+/**
+ * The colours a row's value can take: a table cell's, and `warning`, for a
+ * figure that needs a look but is not wrong yet.
+ */
+export declare const listRowValueTones: readonly ["success", "danger", "muted", "accent", "warning"];
+export type ListRowValueTone = (typeof listRowValueTones)[number];
+export declare function cssListRowClasses(): string;
+export declare function listRowClassCatalog(): string[];