@scalewing/react 1.42.0 → 1.44.0

package/dist/components/filter-chips/validate.js

@@ -1,5 +1,5 @@
 import { assertRequiredMark } from '../FieldLabelText.js';
-import { filterChipCountAppearances, filterChipsOverflows, } from './options.js';
+import { filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './options.js';
 function isCount(count) {
     return count === undefined || (Number.isInteger(count) && count >= 0);
 }
@@ -11,9 +11,9 @@ function chosenValues(props) {
 /**
  * Fails closed on chips it cannot draw: an empty label, no options, blank
  * or repeated values, a chosen value that is no option, a count that is
- * not a whole number from 0, an unknown count appearance or overflow, and
- * a multiple choice asked to be required or given a value that is not a
- * list.
+ * not a whole number from 0, an unknown chip tone, count appearance or
+ * overflow, and a multiple choice asked to be required or given a value
+ * that is not a list.
  */
 export function assertFilterChips(props) {
     const { label, options } = props;
@@ -39,6 +39,10 @@ export function assertFilterChips(props) {
             : 'value must match an option or be empty');
     if (options.some((option) => !isCount(option.count)))
         throw new RangeError('count must be a non-negative integer');
+    const unknownTone = options.find((option) => option.tone !== undefined &&
+        !filterChipTones.includes(option.tone));
+    if (unknownTone)
+        throw new RangeError(`Unknown FilterChips option tone: ${String(unknownTone.tone)}`);
     const countAppearance = props.countAppearance ?? 'figure';
     if (!filterChipCountAppearances.includes(countAppearance))
         throw new RangeError(`Unknown FilterChips countAppearance: ${String(countAppearance)}`);

package/dist/components/list/ListRowContent.d.ts

@@ -17,10 +17,13 @@ export type ListRowContentProps = {
     /** The unread words; the dot shows while they are given. */
     unreadLabel?: string;
     tag?: ReactNode;
+    /** One line each for the title and detail, cut with "…", the words in a tooltip. */
+    truncate: boolean;
 };
 /**
  * A list row's parts in reading order: the hidden leading mark, the title
  * (with the unread dot and its hidden words) over its detail, the value
- * over its detail, the tag, then the chevron or check.
+ * over its detail, the tag, then the chevron or check. A truncated row
+ * sets its title's words in their own box, so the "…" never hides the dot.
  */
-export declare function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, unreadLabel, tag, }: ListRowContentProps): import("react").JSX.Element;
+export declare function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, unreadLabel, tag, truncate, }: ListRowContentProps): import("react").JSX.Element;

package/dist/components/list/ListRowContent.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { cx } from '../../class-names.js';
 import { Badge } from '../Badge.js';
 import { ListRowAccessoryMark } from './ListRowAccessoryMark.js';
-import { hasSlot } from './row-slot.js';
+import { hasSlot } from '../slot.js';
 /**
  * A list row's parts in reading order: the hidden leading mark, the title
  * (with the unread dot and its hidden words) over its detail, the value
- * over its detail, the tag, then the chevron or check.
+ * over its detail, the tag, then the chevron or check. A truncated row
+ * sets its title's words in their own box, so the "…" never hides the dot.
  */
-export function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, unreadLabel, tag, }) {
-    return (_jsxs(_Fragment, { children: [!hasSlot(leading) ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-leading", children: leading })), _jsxs("span", { className: "sw-list-row-label", children: [_jsxs("span", { className: cx('sw-list-row-title', titleAppearance === 'plain' && 'sw-list-row-title-plain', tone === 'danger' && 'sw-list-row-title-danger'), id: `${id}-title`, children: [title, unreadLabel === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-unread" }))] }), unreadLabel === undefined ? null : (_jsx("span", { className: "sw-sr-only", id: `${id}-unread`, children: unreadLabel })), detail ? (_jsx("span", { className: "sw-list-row-detail", id: `${id}-detail`, children: detail })) : null] }), value === undefined ? null : (_jsxs("span", { className: "sw-list-row-end", children: [_jsx("span", { className: cx('sw-list-row-value', valueTone && `sw-list-row-value-${valueTone}`), id: `${id}-value`, children: valueBadge ? _jsx(Badge, { tone: valueBadge, children: value }) : value }), valueDetail ? (_jsx("span", { className: "sw-list-row-value-detail", id: `${id}-value-detail`, children: valueDetail })) : null] })), !hasSlot(tag) ? null : (_jsx("span", { className: "sw-list-row-tag", id: `${id}-tag`, children: tag })), _jsx(ListRowAccessoryMark, { kind: accessory })] }));
+export function ListRowContent({ id, title, detail, value, valueDetail, valueTone, valueBadge, leading, tone, titleAppearance, accessory, unreadLabel, tag, truncate, }) {
+    return (_jsxs(_Fragment, { children: [!hasSlot(leading) ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-leading", children: leading })), _jsxs("span", { className: "sw-list-row-label", children: [_jsxs("span", { className: cx('sw-list-row-title', titleAppearance === 'plain' && 'sw-list-row-title-plain', tone === 'danger' && 'sw-list-row-title-danger'), id: `${id}-title`, children: [truncate ? (_jsx("span", { className: "sw-list-row-title-text", title: title, children: title })) : (title), unreadLabel === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "sw-list-row-unread" }))] }), unreadLabel === undefined ? null : (_jsx("span", { className: "sw-sr-only", id: `${id}-unread`, children: unreadLabel })), detail ? (_jsx("span", { className: "sw-list-row-detail", id: `${id}-detail`, title: truncate ? detail : undefined, children: detail })) : null] }), value === undefined ? null : (_jsxs("span", { className: "sw-list-row-end", children: [_jsx("span", { className: cx('sw-list-row-value', valueTone && `sw-list-row-value-${valueTone}`), id: `${id}-value`, children: valueBadge ? _jsx(Badge, { tone: valueBadge, children: value }) : value }), valueDetail ? (_jsx("span", { className: "sw-list-row-value-detail", id: `${id}-value-detail`, children: valueDetail })) : null] })), !hasSlot(tag) ? null : (_jsx("span", { className: "sw-list-row-tag", id: `${id}-tag`, children: tag })), _jsx(ListRowAccessoryMark, { kind: accessory })] }));
 }

package/dist/components/list/ListRowItem.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useContext } from 'react';
 import { cx } from '../../class-names.js';
 import { ListRowContainer } from './list-row-container.js';
-import { hasSlot } from './row-slot.js';
+import { hasSlot } from '../slot.js';
 /**
  * A row's list item: an `li` in a ListGroup's list, a `div` elsewhere. A
  * row with an `action` holds that control after the row, a sibling of the

package/dist/components/list/row-naming.js

@@ -1,4 +1,4 @@
-import { hasSlot } from './row-slot.js';
+import { hasSlot } from '../slot.js';
 function ids(...parts) {
     const joined = parts.filter(Boolean).join(' ');
     return joined === '' ? undefined : joined;

package/dist/components/slot.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+/**
+ * Whether a component's slot (a row's `leading`, `tag` or `action`, a
+ * chips row's `end`) holds something to draw. React renders nothing for
+ * `undefined`, `null`, a boolean (the `false` of
+ * `canArchive && <ActionMenu …/>`) or an empty string, so those are an
+ * empty slot and add no box and no gap.
+ */
+export declare function hasSlot(node: ReactNode): boolean;

package/dist/components/slot.js

@@ -0,0 +1,13 @@
+/**
+ * Whether a component's slot (a row's `leading`, `tag` or `action`, a
+ * chips row's `end`) holds something to draw. React renders nothing for
+ * `undefined`, `null`, a boolean (the `false` of
+ * `canArchive && <ActionMenu …/>`) or an empty string, so those are an
+ * empty slot and add no box and no gap.
+ */
+export function hasSlot(node) {
+    return (node !== undefined &&
+        node !== null &&
+        node !== '' &&
+        typeof node !== 'boolean');
+}

package/dist/css/css-action-menu-trigger.d.ts

@@ -1,11 +1,15 @@
-export declare const actionMenuTriggerAppearances: readonly ["framed", "text"];
+export declare const actionMenuTriggerAppearances: readonly ["framed", "text", "icon"];
 /**
  * How an ActionMenu's trigger looks: `framed` (the default) is a small
  * outlined control; `text` is its words in the text color with a chevron
  * after them and no fill or outline until hovered or open, such as a
- * person's name that opens their account menu in a header.
+ * person's name that opens their account menu in a header; `icon` is the
+ * consumer's glyph alone in a round quiet button, no chevron and no
+ * outline until hovered or open, such as a row's ••• menu.
  */
 export type ActionMenuTriggerAppearance = (typeof actionMenuTriggerAppearances)[number];
 export declare const actionMenuTriggerTextClass = "sw-action-menu-trigger-text";
+export declare const actionMenuTriggerIconClass = "sw-action-menu-trigger-icon";
 export declare function cssActionMenuTriggerClasses(): string;
+export declare function cssActionMenuTriggerIconClasses(): string;
 export declare function actionMenuTriggerClassCatalog(): string[];

package/dist/css/css-action-menu-trigger.js

@@ -3,9 +3,11 @@ import { chevronStroke } from './chevron.js';
 import { quietFill } from './quiet-fill.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
-export const actionMenuTriggerAppearances = ['framed', 'text'];
+export const actionMenuTriggerAppearances = ['framed', 'text', 'icon'];
 export const actionMenuTriggerTextClass = 'sw-action-menu-trigger-text';
+export const actionMenuTriggerIconClass = 'sw-action-menu-trigger-icon';
 const text = `.sw-action-menu-trigger.${actionMenuTriggerTextClass}`;
+const icon = `.sw-action-menu-trigger.${actionMenuTriggerIconClass}`;
 /*
  * A text trigger: no fill and a transparent border (kept, so forced colors
  * can draw one), its words in label type at medium weight in the text
@@ -61,6 +63,52 @@ ${text}[aria-expanded='true'] {
   ${text}[aria-expanded='true'] { border-color: Highlight; }
 }`;
 }
+/*
+ * An icon trigger: the consumer's glyph alone, centred in a round button
+ * as wide as it is tall (the sm control height, the 44 px target on a
+ * coarse pointer), in the muted colour, with no fill, no chevron and a
+ * transparent border (kept for forced colors). Like the text trigger it
+ * takes the quiet fill while open and under a hovering pointer. Its name
+ * is the menu's label, so the glyph says nothing on its own.
+ */
+export function cssActionMenuTriggerIconClasses() {
+    return `${icon} {
+  align-items: center;
+  background: transparent;
+  border-color: transparent;
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  justify-content: center;
+  min-height: var(--sw-control-sm-min-height);
+  min-width: var(--sw-control-sm-min-height);
+  padding: 0;
+}
+
+${icon}[aria-expanded='true'] {
+  background: ${quietFill};
+  color: var(--sw-color-text);
+}
+
+@media (hover: hover) {
+  ${icon}:hover:not(:disabled) {
+    background: ${quietFill};
+    color: var(--sw-color-text);
+  }
+}
+
+@media ${coarsePointerQuery} {
+  ${icon} {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+}
+
+@media (forced-colors: active) {
+  ${icon} { color: ButtonText; }
+  ${icon}[aria-expanded='true'] { border-color: Highlight; }
+}`;
+}
 export function actionMenuTriggerClassCatalog() {
-    return [actionMenuTriggerTextClass];
+    return [actionMenuTriggerTextClass, actionMenuTriggerIconClass];
 }

package/dist/css/css-action-menu.js

@@ -1,6 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { chevronStroke } from './chevron.js';
-import { actionMenuTriggerClassCatalog, cssActionMenuTriggerClasses, } from './css-action-menu-trigger.js';
+import { actionMenuTriggerClassCatalog, cssActionMenuTriggerClasses, cssActionMenuTriggerIconClasses, } from './css-action-menu-trigger.js';
 import { zIndex } from './stacking.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 import { quietFill } from './quiet-fill.js';
@@ -166,7 +166,9 @@ export function cssActionMenuClasses() {
   }
 }
 
-${cssActionMenuTriggerClasses()}`;
+${cssActionMenuTriggerClasses()}
+
+${cssActionMenuTriggerIconClasses()}`;
 }
 export function actionMenuClassCatalog() {
     return [

package/dist/css/css-components.js

@@ -36,6 +36,7 @@ import { cssMultiSelectClasses } from './css-multi-select.js';
 import { cssSplitClasses } from './css-split.js';
 import { cssSwitchClasses } from './css-switch.js';
 import { cssTextClasses } from './css-text.js';
+import { cssFontMonoClasses } from './css-font-mono.js';
 import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
 import { cssNoticeClasses } from './css-notice.js';
@@ -134,6 +135,8 @@ ${cssPopupHostRules()}
 
 ${cssTextClasses()}
 
+${cssFontMonoClasses()}
+
 ${cssButtonClasses()}
 
 ${cssCheckboxClasses()}

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

@@ -7,6 +7,7 @@
  * 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 declare function cssDescriptionListClasses(): string;
 export declare function descriptionListClassCatalog(): string[];

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-file-field.js

@@ -106,7 +106,10 @@ function zoneRules() {
 }
 /*
  * 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.
+ * 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 {
@@ -116,6 +119,16 @@ function fileRules() {
   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));
@@ -173,6 +186,7 @@ export function fileFieldClassCatalog() {
         '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-truncate.d.ts

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

package/dist/css/css-list-row-truncate.js

@@ -0,0 +1,29 @@
+/*
+ * A truncated row keeps its title and its detail to one line each, cut
+ * with "…" where they do not fit. The title's words sit in their own box
+ * (`sw-list-row-title-text`) beside the unread dot, so the cut never hides
+ * the dot; the title is a one-line flex row centring them. The label
+ * column already shrinks (`min-width: 0`), so the value, the tag and the
+ * action keep their place and their words whole.
+ */
+export function cssListRowTruncateClasses() {
+    return `.sw-list-row-truncate .sw-list-row-title {
+  align-items: center;
+  display: flex;
+  min-width: 0;
+}
+
+.sw-list-row-truncate .sw-list-row-unread { flex: none; }
+
+.sw-list-row-truncate .sw-list-row-title-text,
+.sw-list-row-truncate .sw-list-row-detail {
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}`;
+}
+export function listRowTruncateClassCatalog() {
+    return ['sw-list-row-truncate', 'sw-list-row-title-text'];
+}

package/dist/css/css-list.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { cssListRowClasses, listRowClassCatalog } from './css-list-row.js';
 import { cssListRowTrailingClasses, listRowTrailingClassCatalog, } from './css-list-row-trailing.js';
+import { cssListRowTruncateClasses, listRowTruncateClassCatalog, } from './css-list-row-truncate.js';
 import { blockEdgeShadeRules, scrollRegionRules } from './css-scroll-region.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
@@ -72,7 +73,9 @@ ${boundedRules()}
 
 ${cssListRowClasses()}
 
-${cssListRowTrailingClasses()}`;
+${cssListRowTrailingClasses()}
+
+${cssListRowTruncateClasses()}`;
 }
 export function listClassCatalog() {
     return [
@@ -85,5 +88,6 @@ export function listClassCatalog() {
         'sw-list-group-footer',
         ...listRowClassCatalog(),
         ...listRowTrailingClassCatalog(),
+        ...listRowTruncateClassCatalog(),
     ];
 }

package/dist/css/css-utilities.js

@@ -41,6 +41,9 @@ const layoutRules = {
     'sw-grow': '.sw-grow { flex-grow: 1; }',
     'sw-full-width': '.sw-full-width { width: 100%; }',
     'sw-container': '.sw-container { width: 100%; max-width: var(--sw-container-max); margin-inline: auto; }',
+    // A narrower centred column at the reading width (Article's), for a
+    // form or text that reads better than it would across the container.
+    'sw-container-reading': '.sw-container-reading { width: 100%; max-width: var(--sw-reading-max); margin-inline: auto; }',
     'sw-sr-only': `.sw-sr-only { ${visuallyHiddenDeclarations} }`,
     'sw-align-start': '.sw-align-start { align-items: flex-start; }',
     'sw-align-center': '.sw-align-center { align-items: center; }',

package/dist/css/spacing-classes.d.ts

@@ -7,4 +7,4 @@ export type SpacingKind = 'padding' | 'gap';
 export declare function spacingClass(kind: SpacingKind, axis: PaddingAxis | GapAxis, step: SpacingStep): string;
 export declare function paddingClassNames(): string[];
 export declare function gapClassNames(): string[];
-export declare const layoutClassNames: readonly ["sw-stack", "sw-inline", "sw-wrap", "sw-grow", "sw-full-width", "sw-container", "sw-sr-only", "sw-align-start", "sw-align-center", "sw-align-end", "sw-align-stretch", "sw-justify-start", "sw-justify-center", "sw-justify-end", "sw-justify-between"];
+export declare const layoutClassNames: readonly ["sw-stack", "sw-inline", "sw-wrap", "sw-grow", "sw-full-width", "sw-container", "sw-container-reading", "sw-sr-only", "sw-align-start", "sw-align-center", "sw-align-end", "sw-align-stretch", "sw-justify-start", "sw-justify-center", "sw-justify-end", "sw-justify-between"];

package/dist/css/spacing-classes.js

@@ -28,6 +28,7 @@ export const layoutClassNames = [
     'sw-grow',
     'sw-full-width',
     'sw-container',
+    'sw-container-reading',
     'sw-sr-only',
     'sw-align-start',
     'sw-align-center',

package/dist/css/stylesheet.js

@@ -27,6 +27,7 @@ import { descriptionListClassCatalog } from './css-description-list.js';
 import { tabsClassCatalog } from './css-tabs.js';
 import { responsiveClassCatalog } from './css-responsive.js';
 import { filterChipsClassCatalog } from './css-filter-chips.js';
+import { fontMonoClassCatalog } from './css-font-mono.js';
 import { gridClassCatalog } from './css-grid.js';
 import { gridSpanClassCatalog } from './css-grid-span.js';
 import { denominationGridClassCatalog } from './css-denomination-grid.js';
@@ -126,6 +127,7 @@ export function utilityClassCatalog() {
         ...descriptionListClassCatalog(),
         ...tabsClassCatalog(),
         ...filterChipsClassCatalog(),
+        ...fontMonoClassCatalog(),
         ...gridClassCatalog(),
         ...gridSpanClassCatalog(),
         ...denominationGridClassCatalog(),