@scalewing/react 1.41.0 → 1.44.0

package/dist/css/css-description-list.js

@@ -1,4 +1,24 @@
 import { breakpointQuery } from './breakpoints.js';
+/*
+ * A spread list sets each row on its own two columns, at every width: the
+ * term fits its words up to half the row at the start, and the detail
+ * takes the rest, its lines end-aligned at the row's end, a space-4 apart
+ * (the list's column gap, which a row's own grid does not inherit). The
+ * rows still share the hairlines, the padding and the top alignment.
+ */
+function spreadRules() {
+    return `.sw-description-list-spread { grid-template-columns: minmax(0, 1fr); }
+
+.sw-description-list-spread > .sw-description-item {
+  column-gap: var(--sw-space-4);
+  grid-template-columns: fit-content(50%) minmax(0, 1fr);
+}
+
+.sw-description-list-spread .sw-description-detail {
+  align-items: flex-end;
+  text-align: end;
+}`;
+}
 /**
  * The description list: a two-column grid whose items share its columns
  * (`subgrid`), so every term starts the same column and every detail the
@@ -8,6 +28,7 @@ import { breakpointQuery } from './breakpoints.js';
  * a term sits over its detail. A term and a detail are columns of lines:
  * each child is its own line with its own line height, so a caption term
  * starts level with a caption detail instead of on the list's taller line.
+ * `spread` puts each detail at its row's end, beside its term at every width.
  */
 export function cssDescriptionListClasses() {
     return `.sw-description-list {
@@ -49,6 +70,8 @@ export function cssDescriptionListClasses() {
   .sw-description-list { grid-template-columns: minmax(0, 1fr); }
 }
 
+${spreadRules()}
+
 @media (forced-colors: active) {
   .sw-description-item + .sw-description-item { border-top-color: CanvasText; }
 }`;
@@ -56,6 +79,7 @@ export function cssDescriptionListClasses() {
 export function descriptionListClassCatalog() {
     return [
         'sw-description-list',
+        'sw-description-list-spread',
         'sw-description-item',
         'sw-description-term',
         'sw-description-detail',

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

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

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

@@ -0,0 +1,194 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { disabledControlSurface } from './css-document.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+const caption = typographyVariants.caption;
+/*
+ * The frame holds the field's one file: empty, a wide zone on the subtle
+ * fill that opens the picker (the choose words in the text colour at
+ * label weight, as the accent falls under 4.5:1 on the subtle fill in
+ * some palettes, the drop words muted after them); chosen, a row on the surface
+ * with the consumer's mark, the file's name over its detail and the
+ * change button at the end. Both are a hairline frame at the medium
+ * radius. A file dragged over either draws the accent edge and tint. A
+ * chosen row too narrow for a long name and the button wraps the button
+ * under the name, at the row's end.
+ */
+function frameRules() {
+    return `.sw-file-field-frame {
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.sw-file-field-empty { background: var(--sw-color-subtle); }
+
+.sw-file-field-chosen {
+  align-items: center;
+  background: var(--sw-color-surface);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-3);
+  padding: var(--sw-space-2) var(--sw-space-2) var(--sw-space-2) var(--sw-space-4);
+}
+
+.sw-field-invalid .sw-file-field-frame { border-color: var(--sw-color-danger); }
+
+/* A drag wins over an error's edge: it says where the file goes. */
+.sw-file-field-frame.sw-file-field-dragging {
+  background: var(--sw-color-accentSubtle);
+  border-color: var(--sw-color-accent);
+  outline: 1px solid var(--sw-color-accent);
+}
+
+/* On the tint, muted words fall under 4.5:1 in light palettes: every word takes the text colour. */
+.sw-file-field-dragging :is(.sw-file-field-choose, .sw-file-field-drop, .sw-file-field-detail, .sw-file-field-icon) {
+  color: var(--sw-color-text);
+}
+
+/* Disabled, the frame's hairline is dashed, as a disabled text control's. */
+.sw-file-field-disabled { border-style: dashed; }`;
+}
+/*
+ * The empty zone is one button filling the frame, a space-6 of padding
+ * above and below its words, its focus ring inside the frame's edge. On a
+ * coarse pointer, where nothing is dragged, the drop words are left out.
+ */
+function zoneRules() {
+    return `.sw-file-field-zone {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  gap: var(--sw-space-1);
+  justify-content: center;
+  line-height: ${label.lineHeight}px;
+  margin: 0;
+  min-height: ${touchTarget};
+  padding: var(--sw-space-6) var(--sw-space-4);
+  text-align: center;
+  width: 100%;
+}
+
+.sw-file-field-zone:focus { outline: none; }
+
+.sw-file-field-zone:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-file-field-choose {
+  color: var(--sw-color-text);
+  font-weight: ${label.fontWeight};
+}
+
+.sw-file-field-drop { color: var(--sw-color-muted); }
+
+.sw-file-field-zone:disabled {
+  ${disabledControlSurface}
+  border-radius: inherit;
+}
+
+.sw-file-field-zone:disabled .sw-file-field-choose { color: var(--sw-color-muted); }
+
+@media ${coarsePointerQuery} {
+  .sw-file-field-drop { display: none; }
+}`;
+}
+/*
+ * The chosen file: the mark, then the name over its detail (at least four
+ * space-8 wide before the button wraps under it), then the button. A
+ * photo's preview takes the mark's place: a 3:2 thumbnail a space-8 wide
+ * and a space-6 tall, cropped to fill, at the small radius, on the subtle
+ * fill while it loads.
+ */
+function fileRules() {
+    return `.sw-file-field-icon {
+  align-items: center;
+  color: var(--sw-color-muted);
+  display: flex;
+  flex: none;
+}
+
+.sw-file-field-preview {
+  background: var(--sw-color-subtle);
+  border-radius: var(--sw-radius-sm);
+  display: block;
+  flex: none;
+  height: var(--sw-space-6);
+  object-fit: cover;
+  width: var(--sw-space-8);
+}
+
+.sw-file-field-file {
+  display: flex;
+  flex: 1 1 calc(4 * var(--sw-space-8));
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-file-field-name {
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  line-height: ${label.lineHeight}px;
+  overflow-wrap: anywhere;
+}
+
+.sw-file-field-detail {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-file-field-chosen > .sw-button {
+  flex: none;
+  margin-inline-start: auto;
+}`;
+}
+/* Forced colours: system edges, Highlight for a drag, the button text colour for the words. */
+function forcedColorRules() {
+    return `@media (forced-colors: active) {
+  .sw-file-field-frame { border-color: CanvasText; }
+  .sw-field-invalid .sw-file-field-frame { border-color: Mark; }
+  .sw-file-field-frame.sw-file-field-dragging { border-color: Highlight; outline-color: Highlight; }
+  .sw-file-field-choose { color: ButtonText; }
+  .sw-file-field-zone:disabled,
+  .sw-file-field-zone:disabled .sw-file-field-choose { color: GrayText; }
+}`;
+}
+export function cssFileFieldClasses() {
+    return `${frameRules()}
+
+${zoneRules()}
+
+${fileRules()}
+
+${forcedColorRules()}`;
+}
+export function fileFieldClassCatalog() {
+    return [
+        'sw-file-field',
+        'sw-file-field-frame',
+        'sw-file-field-empty',
+        'sw-file-field-chosen',
+        'sw-file-field-dragging',
+        'sw-file-field-disabled',
+        'sw-file-field-zone',
+        'sw-file-field-choose',
+        'sw-file-field-drop',
+        'sw-file-field-icon',
+        'sw-file-field-preview',
+        'sw-file-field-file',
+        'sw-file-field-name',
+        'sw-file-field-detail',
+    ];
+}

package/dist/css/css-filter-chip-tones.d.ts

@@ -0,0 +1,3 @@
+export declare const warningChipUnchosen = ".sw-filter-chip-warning:not(.sw-filter-chip-quiet) .sw-filter-chip-input:not(:checked) + .sw-filter-chip-face";
+export declare function cssFilterChipToneClasses(): string;
+export declare function filterChipToneClassCatalog(): string[];

package/dist/css/css-filter-chip-tones.js

@@ -0,0 +1,28 @@
+import { toneTintFill, toneTintInk } from './tone-tint.js';
+/*
+ * A warning chip, while it is not chosen, is the warning tint with its
+ * words and count in the warning ink, as a warning Notice's (4.5:1 on the
+ * tint in every palette). It keeps the chips' hairline, so an error's
+ * danger edge still shows on it. Chosen, it is the accent like every chip;
+ * with nothing to count it is quiet like every chip. Forced colours draw
+ * it as every chip, so its words say why it matters. The focus ring sits
+ * outside the face (the chips' ring offset), on the page, not on the tint.
+ */
+export const warningChipUnchosen = '.sw-filter-chip-warning:not(.sw-filter-chip-quiet) .sw-filter-chip-input:not(:checked) + .sw-filter-chip-face';
+export function cssFilterChipToneClasses() {
+    return `${warningChipUnchosen} {
+  background: ${toneTintFill('warning')};
+  color: ${toneTintInk('warning')};
+}
+
+${warningChipUnchosen} .sw-filter-chip-count {
+  color: inherit;
+}
+
+@media (forced-colors: active) {
+  ${warningChipUnchosen} { background: Canvas; color: CanvasText; }
+}`;
+}
+export function filterChipToneClassCatalog() {
+    return ['sw-filter-chip-warning'];
+}

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

@@ -1,2 +1,3 @@
+export declare const ringReach = "calc(var(--sw-focus-ring-width) + var(--sw-focus-ring-offset))";
 export declare function cssFilterChipsLayoutClasses(): string;
 export declare function filterChipsLayoutClassCatalog(): string[];

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

@@ -13,7 +13,7 @@
  * 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 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;

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

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

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

@@ -0,0 +1,79 @@
+import { ringReach } from './css-filter-chips-layout.js';
+/*
+ * A chips row lays several FilterChips groups on one line, a space-2 apart
+ * as chips are, their chips level along the bottom (a group may draw its
+ * label above; an error under one lifts its chips above the others'). The
+ * `end` group sits at the row's end, or at its own line's end when the row
+ * wraps.
+ *
+ * Wrapping, a group is as wide as its chips and wraps them itself when it
+ * is wider than the row. Scrolling, every group's chips stay on one line
+ * and the row is the one box that scrolls sideways (never the page),
+ * padded by the focus ring's reach and pulled back as a scrolling group
+ * is; a group's own scroll gives way, so its chips scroll with the rest.
+ * A scrolling group is as wide as its chips (min-content: the chips do not
+ * wrap), so a drawn label or an error wraps under them instead of widening
+ * the group. The scrolling row is positioned, so a group's visually hidden
+ * legend (absolutely placed where it would sit, past the edge) stays inside
+ * the box it scrolls in rather than widening the page. These rules follow
+ * the groups' own layout rules, which they override.
+ */
+export function cssFilterChipsRowClasses() {
+    const scroll = '.sw-filter-chips-row-scroll';
+    return `.sw-filter-chips-row {
+  align-items: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-filter-chips-row-end {
+  display: flex;
+  margin-inline-start: auto;
+  max-width: 100%;
+  min-width: 0;
+}
+
+${scroll} {
+  flex-wrap: nowrap;
+  margin: calc(-1 * ${ringReach});
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: ${ringReach};
+  position: relative;
+  scrollbar-width: thin;
+}
+
+${scroll} .sw-filter-chips,
+${scroll} > .sw-filter-chips-row-end {
+  flex: none;
+  max-width: none;
+}
+
+${scroll} .sw-filter-chips { width: min-content; }
+
+${scroll} .sw-filter-chips-options {
+  flex-wrap: nowrap;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+}
+
+${scroll} .sw-filter-chip {
+  flex: none;
+  max-width: none;
+}
+
+${scroll} .sw-filter-chip-face {
+  white-space: nowrap;
+}`;
+}
+export function filterChipsRowClassCatalog() {
+    return [
+        'sw-filter-chips-row',
+        'sw-filter-chips-row-end',
+        'sw-filter-chips-row-scroll',
+    ];
+}

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

@@ -1,5 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { cssFilterChipToneClasses, filterChipToneClassCatalog, } from './css-filter-chip-tones.js';
 import { cssFilterChipsLayoutClasses, filterChipsLayoutClassCatalog, } from './css-filter-chips-layout.js';
+import { cssFilterChipsRowClasses, filterChipsRowClassCatalog, } from './css-filter-chips-row.js';
 const label = typographyVariants.label;
 const data = typographyVariants.data;
 const caption = typographyVariants.caption;
@@ -126,6 +128,10 @@ export function cssFilterChipsClasses() {
 
 ${cssFilterChipsLayoutClasses()}
 
+${cssFilterChipToneClasses()}
+
+${cssFilterChipsRowClasses()}
+
 @media (forced-colors: active) {
   .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
   .sw-filter-chips-error { color: Mark; }
@@ -148,5 +154,7 @@ export function filterChipsClassCatalog() {
         'sw-filter-chip-quiet',
         'sw-filter-chips-error',
         ...filterChipsLayoutClassCatalog(),
+        ...filterChipToneClassCatalog(),
+        ...filterChipsRowClassCatalog(),
     ];
 }

package/dist/css/css-font-mono.d.ts

@@ -0,0 +1,3 @@
+export declare const monospaceFamilies = "ui-monospace, monospace";
+export declare function cssFontMonoClasses(): string;
+export declare function fontMonoClassCatalog(): string[];

package/dist/css/css-font-mono.js

@@ -0,0 +1,23 @@
+import { typedInputs } from './css-document.js';
+/*
+ * The platform's monospace face by its generic CSS names only, as the
+ * forced-colour rules name system colours: no face is chosen here, so
+ * there is no type value for the tokens to own. Each platform draws its
+ * own (SF Mono, Cascadia, Menlo …).
+ */
+export const monospaceFamilies = 'ui-monospace, monospace';
+/*
+ * Monospace text, for words read as typed code or marks (a Markdown source
+ * being written), at the size the text already has. It outranks the
+ * canvas's text controls, which take the page's family, so a `textarea` or
+ * a text input can take it too.
+ */
+export function cssFontMonoClasses() {
+    return `[data-theme] .sw-font-mono,
+[data-theme] :is(${typedInputs}).sw-font-mono {
+  font-family: ${monospaceFamilies};
+}`;
+}
+export function fontMonoClassCatalog() {
+    return ['sw-font-mono'];
+}

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

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