@scalewing/react 1.45.0 → 1.47.0

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

@@ -1,16 +1,33 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { toneTintFill, toneTintInk } from './tone-tint.js';
 const caption = typographyVariants.caption;
-/** The counts drawn as the pill: SectionNav's and a Nav word's. */
-const pills = ['sw-section-nav-count', 'sw-nav-count'];
-/** NavCount's news tone, a modifier of its pill. */
-const accentPill = 'sw-nav-count-accent';
+/** The counts drawn as the pill: SectionNav's, a Nav word's and AppShell's. */
+const pills = [
+    'sw-section-nav-count',
+    'sw-nav-count',
+    'sw-app-shell-count',
+];
+/** The pills that take a tone modifier: NavCount's and AppShell's item count. */
+const tonedPills = ['sw-nav-count', 'sw-app-shell-count'];
+/** The tones other than the pill's own danger. */
+const pillTones = ['accent', 'warning'];
+/** A toned pill's modifier class, such as `sw-nav-count-warning`. */
+export function countToneClass(pill, tone) {
+    return `${pill}-${tone}`;
+}
+function tonedSelector(tone) {
+    return tonedPills
+        .map((pill) => `[data-theme] .${pill}.${countToneClass(pill, tone)}`)
+        .join(',\n');
+}
 /*
  * A count after a destination's words (a number waiting there, such as
  * tasks to do) is a filled pill: the danger colour with its on-colour
  * figures (4.5:1 in every palette, as a danger Button's label), caption
  * size at weight 700, a space-5 less space-1 (20) high and at least as
- * wide. Forced colours draw its edge. SectionNav's item count and Nav's
- * NavCount share it, so an area's count reads the same in both.
+ * wide. Forced colours draw its edge. SectionNav's item count, Nav's
+ * NavCount and AppShell's item count share it, so an area's count reads
+ * the same in each.
  */
 export function cssCountPillClasses() {
     const selector = pills.map((name) => `[data-theme] .${name}`).join(',\n');
@@ -33,16 +50,26 @@ export function cssCountPillClasses() {
 }
 
 /*
- * NavCount's \`tone="accent"\`: a count that is news, not work waiting (what
- * was added since the person last looked), is the accent fill with its
- * on-colour figures (4.5:1 in every palette, as a primary Button's label).
- * One class more specific than the pill, so it wins in any order.
+ * \`tone="accent"\` (NavCount, an AppShell item's \`countTone\`): a count that
+ * is news, not work waiting (what was added since the person last looked),
+ * is the accent fill with its on-colour figures (4.5:1 in every palette, as
+ * a primary Button's label). \`tone="warning"\`: work that needs the person
+ * but is not urgent is amber, the warning tint with the warning ink (a
+ * warning Notice's, 4.5:1 on the tint in every palette) inside the warning
+ * edge a warning Badge draws. One class more specific than the pill, so
+ * each wins in any order.
  */
-[data-theme] .sw-nav-count.${accentPill} {
+${tonedSelector('accent')} {
   background: var(--sw-color-accent);
   color: var(--sw-color-onAccent);
 }
 
+${tonedSelector('warning')} {
+  background: ${toneTintFill('warning')};
+  border: 1px solid var(--sw-color-warning);
+  color: ${toneTintInk('warning')};
+}
+
 /*
  * A Nav link holding a count lays out as SectionNav's link does: the words
  * and the pill centred on one line a space-2 apart (the space text node
@@ -63,5 +90,8 @@ export function cssCountPillClasses() {
 }`;
 }
 export function countPillClassCatalog() {
-    return [...pills, accentPill];
+    return [
+        ...pills,
+        ...tonedPills.flatMap((pill) => pillTones.map((tone) => countToneClass(pill, tone))),
+    ];
 }

package/dist/css/css-file-field-compact.d.ts

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

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

@@ -0,0 +1,106 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { touchTarget } from './touch-target.js';
+const body = typographyVariants.body;
+/*
+ * Remove beside a chosen file in the full field: the change button and
+ * Remove together at the row's end, a space-2 apart.
+ */
+function actionsRules() {
+    return `.sw-file-field-actions {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+}`;
+}
+/*
+ * A compact field is a text field's height (the md control, 44 px), on
+ * one line. Empty, its zone holds the choose words at its start. Chosen,
+ * the row is the change button (the thumbnail or mark a space-1 from the
+ * frame's start, then the name in the body weight cut to one line) and a
+ * quiet Remove at its end. The button's focus ring sits inside the frame.
+ */
+function compactRules() {
+    return `.sw-file-field-compact.sw-file-field-chosen {
+  flex-wrap: nowrap;
+  gap: var(--sw-space-1);
+  min-height: ${touchTarget};
+  padding-block: 0;
+  padding-inline: 0 var(--sw-space-1);
+}
+
+.sw-file-field-compact .sw-file-field-zone {
+  justify-content: flex-start;
+  padding: var(--sw-space-2) var(--sw-space-4);
+  text-align: start;
+}
+
+.sw-file-field-pick {
+  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: 1 1 auto;
+  font-family: var(--sw-font-sans);
+  gap: var(--sw-space-3);
+  margin: 0;
+  min-height: ${touchTarget};
+  min-width: 0;
+  padding-block: var(--sw-space-1);
+  padding-inline: var(--sw-space-1) var(--sw-space-2);
+  text-align: start;
+}
+
+.sw-file-field-pick:focus { outline: none; }
+
+.sw-file-field-pick: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-pick:disabled { cursor: not-allowed; }
+
+.sw-file-field-pick .sw-file-field-name {
+  font-weight: ${body.fontWeight};
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* With no thumbnail or mark, the name starts where a text field's words do. */
+.sw-file-field-pick > .sw-file-field-name:first-child { margin-inline-start: var(--sw-space-3); }
+
+.sw-file-field-compact .sw-file-field-preview,
+.sw-file-field-compact .sw-file-field-icon { margin-inline-start: var(--sw-space-1); }
+
+.sw-file-field-remove { flex: none; }
+
+@media (forced-colors: active) {
+  .sw-file-field-pick { color: ButtonText; }
+  .sw-file-field-pick:disabled { color: GrayText; }
+}
+
+/* Disabled, the row fades as its Remove does. */
+.sw-file-field-pick:disabled { opacity: var(--sw-disabled-opacity); }`;
+}
+export function cssFileFieldCompactClasses() {
+    return `${actionsRules()}
+
+${compactRules()}`;
+}
+export function fileFieldCompactClassCatalog() {
+    return [
+        'sw-file-field-actions',
+        'sw-file-field-compact',
+        'sw-file-field-pick',
+        'sw-file-field-remove',
+    ];
+}

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

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { disabledControlSurface } from './css-document.js';
+import { cssFileFieldCompactClasses, fileFieldCompactClassCatalog, } from './css-file-field-compact.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
@@ -172,6 +173,8 @@ ${zoneRules()}
 
 ${fileRules()}
 
+${cssFileFieldCompactClasses()}
+
 ${forcedColorRules()}`;
 }
 export function fileFieldClassCatalog() {
@@ -190,5 +193,6 @@ export function fileFieldClassCatalog() {
         'sw-file-field-file',
         'sw-file-field-name',
         'sw-file-field-detail',
+        ...fileFieldCompactClassCatalog(),
     ];
 }

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

@@ -0,0 +1,6 @@
+/** How many tiles share a row from `md` up; one a row below it. */
+export declare const listTileColumnCounts: readonly [2, 3, 4];
+export type ListGroupTileColumns = (typeof listTileColumnCounts)[number];
+export declare function listTileColumnsClass(columns: ListGroupTileColumns): string;
+export declare function cssListTilesClasses(): string;
+export declare function listTilesClassCatalog(): string[];

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

@@ -0,0 +1,50 @@
+import { breakpointQuery } from './breakpoints.js';
+/** How many tiles share a row from `md` up; one a row below it. */
+export const listTileColumnCounts = [2, 3, 4];
+export function listTileColumnsClass(columns) {
+    return `sw-list-group-tiles-${columns}`;
+}
+const tiles = '.sw-list-group-tiles';
+/*
+ * A tiled ListGroup is still one list (`sw-list`), its rows laid out as
+ * tiles: equal columns a space-3 apart from `md` up, one column below it,
+ * each row its own bordered panel on the surface (the panel variant's
+ * look, per row), with no hairlines between them. A row's press fill and
+ * its inset focus ring stay inside its tile.
+ *
+ * Generated after the list's hairline rules (css-list.ts), whose
+ * `.sw-list > .sw-list-item + .sw-list-item` has the same specificity as
+ * the tile rule: being later is what lets a tile's own border replace the
+ * hairline. `list-group-tiles.test.tsx` holds that order.
+ */
+export function cssListTilesClasses() {
+    const columns = listTileColumnCounts.map((count) => `.${listTileColumnsClass(count)} > .sw-list { grid-template-columns: repeat(${count}, minmax(0, 1fr)); }`);
+    return `${tiles} > .sw-list {
+  display: grid;
+  gap: var(--sw-space-3);
+}
+
+${columns.join('\n')}
+
+${tiles} > .sw-list > .sw-list-item {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  min-width: 0;
+  overflow: clip;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  ${tiles} > .sw-list { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (forced-colors: active) {
+  ${tiles} > .sw-list > .sw-list-item { border-color: CanvasText; }
+}`;
+}
+export function listTilesClassCatalog() {
+    return [
+        'sw-list-group-tiles',
+        ...listTileColumnCounts.map((count) => listTileColumnsClass(count)),
+    ];
+}

package/dist/css/css-list.js

@@ -2,6 +2,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 { cssListTilesClasses, listTilesClassCatalog, } from './css-list-tiles.js';
 import { blockEdgeShadeRules, scrollRegionRules } from './css-scroll-region.js';
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
@@ -75,7 +76,9 @@ ${cssListRowClasses()}
 
 ${cssListRowTrailingClasses()}
 
-${cssListRowTruncateClasses()}`;
+${cssListRowTruncateClasses()}
+
+${cssListTilesClasses()}`;
 }
 export function listClassCatalog() {
     return [
@@ -86,6 +89,7 @@ export function listClassCatalog() {
         'sw-list-group-plain',
         'sw-list-group-scroll',
         'sw-list-group-footer',
+        ...listTilesClassCatalog(),
         ...listRowClassCatalog(),
         ...listRowTrailingClassCatalog(),
         ...listRowTruncateClassCatalog(),

package/dist/css/stylesheet.js

@@ -50,6 +50,7 @@ import { segmentedClassCatalog } from './css-segmented.js';
 import { tableClassCatalog } from './css-table.js';
 import { chromeClassCatalog } from './css-chrome.js';
 import { sectionNavClassCatalog } from './css-section-nav.js';
+import { appShellClassCatalog } from './css-app-shell.js';
 import { dialogClassCatalog } from './css-dialog.js';
 import { dialogBandedClassCatalog } from './css-dialog-banded.js';
 import { dialogFrameClassCatalog } from './css-dialog-frame.js';
@@ -93,6 +94,7 @@ export function utilityClassCatalog() {
         ...paginationClassCatalog(),
         ...chromeClassCatalog(),
         ...sectionNavClassCatalog(),
+        ...appShellClassCatalog(),
         ...dialogClassCatalog(),
         ...dialogFrameClassCatalog(),
         ...dialogBandedClassCatalog(),

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { ListGroup, type ListGroupProps } from './components/ListGroup.js';
 export { inspectMarkdown, markdownOmissionKinds, MarkdownView, type MarkdownHeading, type MarkdownInspection, type MarkdownImage, type MarkdownImageResolver, type MarkdownOmission, type MarkdownOmissionCounts, type MarkdownOmissionKind, type MarkdownOptions, type MarkdownViewProps, } from './components/MarkdownView.js';
 export { ListRow, type ListRowProps } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, type ListGroupMaxHeight, type ListGroupVariant, type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone, } from './list-options.js';
+export { listTileColumnCounts, type ListGroupTileColumns, } from './css/css-list-tiles.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { GlyphTile, glyphTileSizes, type GlyphTileHue, type GlyphTileProps, type GlyphTileSize, } from './components/GlyphTile.js';
@@ -29,7 +30,8 @@ export { ColumnChart, type ColumnChartCallout, type ColumnChartLine, type Column
 export { LineChart, type LineChartCurve, type LineChartMarker, type LineChartPeriod, type LineChartPoint, type LineChartProps, lineChartCurves, } from './components/LineChart.js';
 export { DataBar, type DataBarProps, type DataBarTone, dataBarTones, } from './components/DataBar.js';
 export { Pagination, type PaginationLabels, type PaginationProps, } from './components/Pagination.js';
-export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
+export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonWidth, } from './components/Button.js';
+export { buttonWidths } from './css/css-button-width.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, type BoxBorder, type BoxElement, type BoxLink, type BoxProps, } from './components/Box.js';
 export { boxLinkAppearances } from './css/css-box-link.js';
@@ -50,6 +52,7 @@ export { Split } from './components/Split.js';
 export type { SplitProps } from './components/Split.js';
 export { Nav, navAppearances, type NavAppearance, type NavProps, } from './components/Nav.js';
 export { NavCount, navCountTones, type NavCountProps, type NavCountTone, } from './components/NavCount.js';
+export { AppShell, type AppShellLabels, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, } from './components/AppShell.js';
 export { SectionNav, sectionNavAppearances, type SectionNavAppearance, type SectionNavItem, type SectionNavProps, } from './components/SectionNav.js';
 export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, segmentedSizes, type SegmentedSize, type SegmentedItem, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, type ComboboxAction, type ComboboxBadge, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ComboboxSize, } from './components/Combobox.js';

package/dist/index.js

@@ -12,6 +12,7 @@ export { ListGroup } from './components/ListGroup.js';
 export { inspectMarkdown, markdownOmissionKinds, MarkdownView, } from './components/MarkdownView.js';
 export { ListRow } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, } from './list-options.js';
+export { listTileColumnCounts, } from './css/css-list-tiles.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
 export { GlyphTile, glyphTileSizes, } from './components/GlyphTile.js';
@@ -29,6 +30,7 @@ export { LineChart, lineChartCurves, } from './components/LineChart.js';
 export { DataBar, dataBarTones, } from './components/DataBar.js';
 export { Pagination, } from './components/Pagination.js';
 export { Button, } from './components/Button.js';
+export { buttonWidths } from './css/css-button-width.js';
 export { buttonDisabledAppearances, webButtonVariants, } from './css/css-button.js';
 export { Box, } from './components/Box.js';
 export { boxLinkAppearances } from './css/css-box-link.js';
@@ -47,6 +49,7 @@ export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export { Nav, navAppearances, } from './components/Nav.js';
 export { NavCount, navCountTones, } from './components/NavCount.js';
+export { AppShell, } from './components/AppShell.js';
 export { SectionNav, sectionNavAppearances, } from './components/SectionNav.js';
 export { SegmentedControl, segmentedSizes, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, } from './components/Combobox.js';

package/dist/list-options.d.ts

@@ -4,9 +4,11 @@ import { listRowValueTones, type ListRowValueTone } from './css/css-list-row.js'
 /**
  * `panel` (the default) is one bordered panel on the surface; `plain`
  * draws no panel and a hairline above the first row too, for rows inside
- * a surface that already has one, such as a Card.
+ * a surface that already has one, such as a Card; `tiles` lays the rows
+ * out as tiles, each its own panel, in equal columns (one a row below
+ * `md`).
  */
-export declare const listGroupVariants: readonly ["panel", "plain"];
+export declare const listGroupVariants: readonly ["panel", "plain", "tiles"];
 export type ListGroupVariant = (typeof listGroupVariants)[number];
 /**
  * A list's bounded height, counted in rows: as tall as `rows` rows of a
@@ -30,13 +32,18 @@ export type ListGroupInput = {
     labelledBy: string | undefined;
     variant: unknown;
     maxHeight: ListGroupMaxHeight | undefined;
+    tileColumns: unknown;
+    hasFooter: boolean;
 };
 /**
  * Fails closed on a ListGroup it cannot draw: an unknown variant, a
- * `maxHeight` that is not a whole row count from 1, or a bounded list with
- * no name (its scroll region is a keyboard stop and must say what it holds).
+ * `maxHeight` that is not a whole row count from 1, a bounded list with
+ * no name (its scroll region is a keyboard stop and must say what it
+ * holds), `tileColumns` other than 2, 3 or 4 or on a list that is not
+ * tiles, or tiles with `maxHeight` or a `footer` (tiles neither scroll as
+ * rows nor add up to a total).
  */
-export declare function assertListGroup({ label, labelledBy, variant, maxHeight, }: ListGroupInput): void;
+export declare function assertListGroup({ label, labelledBy, variant, maxHeight, tileColumns, hasFooter, }: ListGroupInput): void;
 /** The row count the generated `sw-list-group-scroll` height reads. */
 export declare function listMaxHeightStyle(maxHeight: ListGroupMaxHeight): CSSProperties;
 export type ListRowInput = {

package/dist/list-options.js

@@ -1,12 +1,15 @@
 import { badgeTones } from './css/css-data.js';
 import { listRowValueTones, } from './css/css-list-row.js';
+import { listTileColumnCounts } from './css/css-list-tiles.js';
 import { isOneOf } from './is-one-of.js';
 /**
  * `panel` (the default) is one bordered panel on the surface; `plain`
  * draws no panel and a hairline above the first row too, for rows inside
- * a surface that already has one, such as a Card.
+ * a surface that already has one, such as a Card; `tiles` lays the rows
+ * out as tiles, each its own panel, in equal columns (one a row below
+ * `md`).
  */
-export const listGroupVariants = ['panel', 'plain'];
+export const listGroupVariants = ['panel', 'plain', 'tiles'];
 /** `danger` draws the title in the danger colour, for a row that ends something. */
 export const listRowTones = ['default', 'danger'];
 /** `strong` (the default) sets the title at the label weight; `plain` at the body's. */
@@ -17,12 +20,23 @@ function isBlank(text) {
 }
 /**
  * Fails closed on a ListGroup it cannot draw: an unknown variant, a
- * `maxHeight` that is not a whole row count from 1, or a bounded list with
- * no name (its scroll region is a keyboard stop and must say what it holds).
+ * `maxHeight` that is not a whole row count from 1, a bounded list with
+ * no name (its scroll region is a keyboard stop and must say what it
+ * holds), `tileColumns` other than 2, 3 or 4 or on a list that is not
+ * tiles, or tiles with `maxHeight` or a `footer` (tiles neither scroll as
+ * rows nor add up to a total).
  */
-export function assertListGroup({ label, labelledBy, variant, maxHeight, }) {
+export function assertListGroup({ label, labelledBy, variant, maxHeight, tileColumns, hasFooter, }) {
     if (!isOneOf(listGroupVariants, variant))
         throw new RangeError(`Unknown ListGroup variant: ${String(variant)}`);
+    if (tileColumns !== undefined) {
+        if (variant !== 'tiles')
+            throw new RangeError('ListGroup tileColumns needs variant="tiles"');
+        if (!listTileColumnCounts.includes(tileColumns))
+            throw new RangeError(`ListGroup tileColumns must be 2, 3 or 4: ${String(tileColumns)}`);
+    }
+    if (variant === 'tiles' && (maxHeight !== undefined || hasFooter))
+        throw new RangeError('A ListGroup of tiles takes no maxHeight or footer');
     if (maxHeight === undefined)
         return;
     const rows = typeof maxHeight === 'object' && maxHeight !== null