@scalewing/react 1.40.0 → 1.42.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-viewer.d.ts

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

package/dist/css/css-document-viewer.js

@@ -0,0 +1,186 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { quietFill } from './quiet-fill.js';
+const label = typographyVariants.label;
+/** How much accent tints a selection of the page's text, in percent. */
+const selectionTint = 30;
+/*
+ * The viewer: a quiet grey stage at the large radius holding the page,
+ * and under it the page steps around "Page n of m". The stage scrolls
+ * sideways when the page is zoomed past its width; it only pans, so two
+ * fingers zoom the page, not the screen. The page is centred in it with a
+ * space-5 margin (space-3 on a phone), on the surface with the small
+ * elevation until PDF.js paints it.
+ */
+function stageRules() {
+    return `.sw-document-viewer {
+  background: ${quietFill};
+  border-radius: var(--sw-radius-lg);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding-block-end: var(--sw-space-4);
+}
+
+.sw-document-viewer-stage {
+  box-sizing: border-box;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: var(--sw-space-5);
+  touch-action: pan-x pan-y;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-document-viewer-stage { padding: var(--sw-space-3); }
+}
+
+.sw-document-viewer-stage:focus { outline: none; }
+
+.sw-document-viewer-stage:focus-visible {
+  border-radius: var(--sw-radius-lg);
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-document-viewer-page {
+  aspect-ratio: 1 / var(--sw-document-page-aspect);
+  background: var(--sw-color-surface);
+  box-shadow: var(--sw-elevation-sm);
+  margin-inline: auto;
+  position: relative;
+  width: var(--sw-document-page-width);
+}
+
+.sw-document-viewer-page > canvas {
+  display: block;
+  height: 100%;
+  width: 100%;
+}`;
+}
+/*
+ * The page's text, laid over the drawing by PDF.js's TextLayer: each run
+ * transparent at its place and size, so it is read by assistive
+ * technology and selected, never seen. These are the rules PDF.js's own
+ * viewer gives its text layer, at the scale the viewer sets
+ * (--total-scale-factor) with whole-pixel rounding; a selection shows in a
+ * tint of the accent.
+ */
+function textLayerRules() {
+    return `.sw-document-viewer-text {
+  --scale-round-x: 1px;
+  --scale-round-y: 1px;
+  --min-font-size: 1;
+  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
+  --min-font-size-inv: calc(1 / var(--min-font-size));
+  forced-color-adjust: none;
+  inset: 0;
+  letter-spacing: normal;
+  line-height: 1;
+  overflow: clip;
+  position: absolute;
+  text-align: initial;
+  text-size-adjust: none;
+  transform-origin: 0 0;
+  word-spacing: normal;
+}
+
+.sw-document-viewer-text :is(span, br) {
+  color: transparent;
+  cursor: text;
+  position: absolute;
+  transform-origin: 0% 0%;
+  user-select: text;
+  white-space: pre;
+}
+
+.sw-document-viewer-text > :not(.markedContent),
+.sw-document-viewer-text .markedContent span:not(.markedContent) {
+  --font-height: 0;
+  --scale-x: 1;
+  --rotate: 0deg;
+  font-size: calc(var(--text-scale-factor) * var(--font-height));
+  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
+}
+
+.sw-document-viewer-text .markedContent { display: contents; }
+
+.sw-document-viewer-text ::selection {
+  background: color-mix(in srgb, var(--sw-color-accent) ${selectionTint}%, transparent);
+  color: transparent;
+}`;
+}
+/*
+ * The steps are 48-point round neutral Buttons (spacing step 8) with the
+ * pager's private chevron, around the page words in label type; with one
+ * page only the words show. Loading and a failed page centre their words
+ * (and the consumer's actions) in the stage.
+ */
+function barRules() {
+    return `.sw-document-viewer-bar {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-3);
+  justify-content: center;
+  padding-inline: var(--sw-space-3);
+}
+
+.sw-button.sw-document-viewer-step {
+  border-radius: var(--sw-radius-pill);
+  flex: none;
+  min-height: var(--sw-space-8);
+  min-width: var(--sw-space-8);
+  padding-inline: 0;
+}
+
+.sw-document-viewer-status {
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  line-height: ${label.lineHeight}px;
+  text-align: center;
+}
+
+.sw-document-viewer-message {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  justify-content: center;
+  min-height: calc(4 * var(--sw-space-8));
+  text-align: center;
+}
+
+.sw-document-viewer-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: center;
+  margin-block-start: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  .sw-document-viewer { border: 1px solid CanvasText; }
+  .sw-document-viewer-page { outline: 1px solid CanvasText; }
+}`;
+}
+export function cssDocumentViewerClasses() {
+    return `${stageRules()}
+
+${textLayerRules()}
+
+${barRules()}`;
+}
+export function documentViewerClassCatalog() {
+    return [
+        'sw-document-viewer',
+        'sw-document-viewer-stage',
+        'sw-document-viewer-page',
+        'sw-document-viewer-text',
+        'sw-document-viewer-bar',
+        'sw-document-viewer-step',
+        'sw-document-viewer-status',
+        'sw-document-viewer-message',
+        'sw-document-viewer-actions',
+    ];
+}

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-file-field.d.ts

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