@scalewing/react 1.48.0 → 1.50.0

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

@@ -0,0 +1,26 @@
+/**
+ * How the themed root lays out its children: `none` (default) leaves them
+ * in the document's flow; `site` is a public site's page, a column at least
+ * the window's height whose last child (the footer) is pushed to its foot,
+ * so a short page's footer still meets the window's foot.
+ */
+export const themeFrames = ['none', 'site'];
+export function assertThemeFrame(frame) {
+    if (!themeFrames.includes(frame))
+        throw new RangeError(`Unknown ThemeProvider frame: ${String(frame)}`);
+}
+/*
+ * The themed root already keeps the window's height (the document canvas);
+ * the site frame makes it a column and gives its last child the space the
+ * content leaves above it.
+ */
+export function cssThemeFrameRules() {
+    return `[data-theme][data-frame='site'] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-theme][data-frame='site'] > :last-child {
+  margin-top: auto;
+}`;
+}

package/dist/css/stylesheet.js

@@ -19,6 +19,7 @@ import { countPillClassCatalog } from './css-count-pill.js';
 import { checkboxClassCatalog } from './css-checkbox.js';
 import { radioGroupClassCatalog } from './css-radio-group.js';
 import { skeletonClassCatalog } from './css-skeleton.js';
+import { emptyStateClassCatalog } from './css-empty-state.js';
 import { spinnerClassCatalog } from './css-spinner.js';
 import { progressClassCatalog } from './css-progress.js';
 import { noticeClassCatalog } from './css-notice.js';
@@ -27,6 +28,8 @@ import { tooltipClassCatalog } from './css-tooltip.js';
 import { infoTipClassCatalog } from './css-info-tip.js';
 import { separatorClassCatalog } from './css-separator.js';
 import { bandClassCatalog } from './css-band.js';
+import { screenPreviewClassCatalog } from './css-screen-preview.js';
+import { heroClassCatalog } from './css-hero.js';
 import { siteFooterClassCatalog } from './css-site-footer.js';
 import { siteHeaderClassCatalog } from './css-site-header.js';
 import { statTileClassCatalog } from './css-stat-tile.js';
@@ -132,6 +135,7 @@ export function utilityClassCatalog() {
         ...radioGroupClassCatalog(),
         ...spinnerClassCatalog(),
         ...skeletonClassCatalog(),
+        ...emptyStateClassCatalog(),
         ...progressClassCatalog(),
         ...noticeClassCatalog(),
         ...glyphTileClassCatalog(),
@@ -139,6 +143,8 @@ export function utilityClassCatalog() {
         ...infoTipClassCatalog(),
         ...separatorClassCatalog(),
         ...bandClassCatalog(),
+        ...screenPreviewClassCatalog(),
+        ...heroClassCatalog(),
         ...siteFooterClassCatalog(),
         ...siteHeaderClassCatalog(),
         ...statTileClassCatalog(),

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { listTileColumnCounts, type ListGroupTileColumns, } from './css/css-list
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { Skeleton, skeletonVariants, type SkeletonProps, type SkeletonVariant, } from './components/Skeleton.js';
+export { EmptyState, emptyStateTitleElements, type EmptyStateProps, type EmptyStateTitleElement, } from './components/EmptyState.js';
 export { GlyphTile, glyphTileSizes, type GlyphTileHue, type GlyphTileProps, type GlyphTileSize, } from './components/GlyphTile.js';
 export { Notice, noticeTones, noticeVariants, type NoticeProps, type NoticeRole, type NoticeTone, type NoticeVariant, } from './components/Notice.js';
 export { Progress, progressTones, type ProgressProps, type ProgressTone, } from './components/Progress.js';
@@ -71,6 +72,7 @@ export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableC
 export { Text, type TextAlign, type TextElement, type TextProps, } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
 export { themeCanvases, type ThemeCanvas } from './css/css-canvas-grouped.js';
+export { themeFrames, type ThemeFrame } from './css/css-theme-frame.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export type { VisibilityProps } from './visibility-classes.js';
 export type { Breakpoint, BreakpointDirection, VisibilityBreakpoint, } from './css/breakpoints.js';
@@ -79,14 +81,23 @@ export { Band, bandElements, bandTones, bandWidths, } from './components/Band.js
 export type { BandElement, BandProps, BandTone, BandWidth, } from './components/Band.js';
 export { SiteHeader } from './components/SiteHeader.js';
 export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, } from './components/SiteHeader.js';
+export { ScreenPreview, screenPreviewFrames, } from './components/ScreenPreview.js';
+export type { ScreenPreviewFrame, ScreenPreviewProps, } from './components/ScreenPreview.js';
+export { PreviewGroup } from './components/screen-preview/PreviewGroup.js';
+export { PreviewRow, previewRowKinds, } from './components/screen-preview/PreviewRow.js';
+export type { PreviewRowKind, PreviewRowProps, } from './components/screen-preview/PreviewRow.js';
+export { PreviewTiles } from './components/screen-preview/PreviewTiles.js';
+export type { PreviewTile, PreviewTilesProps, } from './components/screen-preview/PreviewTiles.js';
+export { Hero } from './components/Hero.js';
+export type { HeroProps } from './components/Hero.js';
 export { SiteFooter } from './components/SiteFooter.js';
 export type { SiteFooterGroup, SiteFooterLink, SiteFooterProps, } from './components/SiteFooter.js';
 export { Separator } from './components/Separator.js';
 export type { SeparatorOrientation, SeparatorProps, } from './components/Separator.js';
 export { DescriptionItem, DescriptionList, descriptionListLayouts, } from './components/DescriptionList.js';
 export type { DescriptionItemProps, DescriptionListLayout, DescriptionListProps, } from './components/DescriptionList.js';
-export { Grid } from './components/Grid.js';
-export type { GridColumns, GridProps } from './components/Grid.js';
+export { Grid, gridFits } from './components/Grid.js';
+export type { GridColumns, GridFit, GridProps } from './components/Grid.js';
 export type { GridColumnSpan } from './css/css-grid-span.js';
 export type { ColumnSpanProps } from './column-span-classes.js';
 export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';

package/dist/index.js

@@ -16,6 +16,7 @@ export { listTileColumnCounts, } from './css/css-list-tiles.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
 export { Skeleton, skeletonVariants, } from './components/Skeleton.js';
+export { EmptyState, emptyStateTitleElements, } from './components/EmptyState.js';
 export { GlyphTile, glyphTileSizes, } from './components/GlyphTile.js';
 export { Notice, noticeTones, noticeVariants, } from './components/Notice.js';
 export { Progress, progressTones, } from './components/Progress.js';
@@ -67,14 +68,20 @@ export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableC
 export { Text, } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
 export { themeCanvases } from './css/css-canvas-grouped.js';
+export { themeFrames } from './css/css-theme-frame.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export { breakpointQuery } from './css/breakpoints.js';
 export { Band, bandElements, bandTones, bandWidths, } from './components/Band.js';
 export { SiteHeader } from './components/SiteHeader.js';
+export { ScreenPreview, screenPreviewFrames, } from './components/ScreenPreview.js';
+export { PreviewGroup } from './components/screen-preview/PreviewGroup.js';
+export { PreviewRow, previewRowKinds, } from './components/screen-preview/PreviewRow.js';
+export { PreviewTiles } from './components/screen-preview/PreviewTiles.js';
+export { Hero } from './components/Hero.js';
 export { SiteFooter } from './components/SiteFooter.js';
 export { Separator } from './components/Separator.js';
 export { DescriptionItem, DescriptionList, descriptionListLayouts, } from './components/DescriptionList.js';
-export { Grid } from './components/Grid.js';
+export { Grid, gridFits } from './components/Grid.js';
 export { DenominationGrid, denominationCellToneAppearances, denominationGridFrames, denominationLabelAppearances, denominationNegativeAppearances, denominationTotalEmphases, denominationTransposeBreakpoints, } from './components/DenominationGrid.js';
 export { FilterChips, filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './components/FilterChips.js';
 export { FilterChipsRow } from './components/FilterChipsRow.js';

package/dist/stepper-count.d.ts

@@ -35,3 +35,11 @@ export declare function stepperMoves(value: number | null, bounds: StepperBounds
 export declare function readStepperEntry(text: string, allowsNegative: boolean): StepperEntry;
 /** The box's text for a count: the plain number, or empty for none. */
 export declare function stepperText(value: number | null): string;
+/** A consumer bug: a unit, when given, is a word to show after the count. */
+export declare function assertStepperUnit(unit: string | undefined): void;
+/**
+ * The count in words for assistive technology: the consumer's own words
+ * when given, otherwise the count and its unit ("90 min"), or nothing extra
+ * (the bare count is `aria-valuenow`) when there is no unit or no count.
+ */
+export declare function stepperValueText(value: number | null, unit: string | undefined, valueText: string | undefined): string | undefined;

package/dist/stepper-count.js

@@ -48,3 +48,20 @@ export function readStepperEntry(text, allowsNegative) {
 export function stepperText(value) {
     return value === null ? '' : String(value);
 }
+/** A consumer bug: a unit, when given, is a word to show after the count. */
+export function assertStepperUnit(unit) {
+    if (unit !== undefined && unit.trim() === '')
+        throw new RangeError('Stepper unit must not be blank');
+}
+/**
+ * The count in words for assistive technology: the consumer's own words
+ * when given, otherwise the count and its unit ("90 min"), or nothing extra
+ * (the bare count is `aria-valuenow`) when there is no unit or no count.
+ */
+export function stepperValueText(value, unit, valueText) {
+    if (valueText !== undefined)
+        return valueText;
+    if (unit === undefined || value === null)
+        return undefined;
+    return `${value} ${unit.trim()}`;
+}

package/dist/styles.css

@@ -632,6 +632,15 @@ body {
   background-color: var(--sw-canvas-grouped);
 }
 
+[data-theme][data-frame='site'] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-theme][data-frame='site'] > :last-child {
+  margin-top: auto;
+}
+
 [data-theme] a {
   color: var(--sw-color-accent);
   text-decoration: none;
@@ -894,19 +903,25 @@ body {
 .sw-text-align-center { text-align: center; }
 .sw-text-align-end { text-align: end; }
 
-:where(.sw-text-display, .sw-text-heading, .sw-text-title, .sw-text-body, .sw-text-label, .sw-text-caption, .sw-text-data) { margin: 0; }
+:where(.sw-text-hero, .sw-text-display, .sw-text-headline, .sw-text-heading, .sw-text-title, .sw-text-lead, .sw-text-body, .sw-text-label, .sw-text-caption, .sw-text-data) { margin: 0; }
 
+.sw-text-hero { font-family: var(--sw-font-sans); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -1.7px; }
 .sw-text-display { font-family: var(--sw-font-sans); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.8px; }
+.sw-text-headline { font-family: var(--sw-font-sans); font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.7px; }
 .sw-text-heading { font-family: var(--sw-font-sans); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.45px; }
 .sw-text-title { font-family: var(--sw-font-sans); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
+.sw-text-lead { font-family: var(--sw-font-sans); font-size: 20px; line-height: 29px; font-weight: 400; letter-spacing: -0.3px; }
 .sw-text-body { font-family: var(--sw-font-sans); font-size: 17px; line-height: 25px; font-weight: 400; letter-spacing: -0.2px; }
 .sw-text-label { font-family: var(--sw-font-sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.2px; }
 .sw-text-caption { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: -0.08px; }
 .sw-text-data { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.08px; font-variant-numeric: tabular-nums; }
 
 @media not all and (min-width: 48rem) {
+  .sw-text-hero { font-size: 36px; line-height: 40px; letter-spacing: -0.7px; }
   .sw-text-display { font-size: 32px; line-height: 38px; letter-spacing: -0.6px; }
+  .sw-text-headline { font-size: 26px; line-height: 30px; letter-spacing: -0.4px; }
   .sw-text-heading { font-size: 24px; line-height: 30px; letter-spacing: -0.4px; }
+  .sw-text-lead { font-size: 17px; line-height: 25px; letter-spacing: -0.2px; }
 }
 
 [data-theme] .sw-font-mono,
@@ -4600,6 +4615,219 @@ body {
   .sw-band-inverse { border-block: 1px solid CanvasText; }
 }
 
+.sw-screen-preview {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  margin: 0;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-screen-preview-screen {
+  background: var(--sw-color-surface);
+  border-radius: var(--sw-radius-md);
+  color: var(--sw-color-text);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-variant-numeric: tabular-nums;
+  gap: var(--sw-space-3);
+  line-height: 20px;
+  padding: var(--sw-space-4);
+}
+
+.sw-screen-preview-header {
+  display: flex;
+  flex-direction: column;
+}
+
+.sw-screen-preview-eyebrow {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sw-screen-preview-title {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.sw-screen-preview-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+}
+
+.sw-preview-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+}
+
+.sw-preview-group + .sw-preview-group {
+  border-top: 1px solid var(--sw-color-border);
+  padding-top: var(--sw-space-2);
+}
+
+.sw-screen-preview-caption {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sw-preview-row {
+  display: flex;
+  gap: var(--sw-space-3);
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.sw-preview-row-value {
+  text-align: end;
+}
+
+.sw-preview-row-total {
+  border-top: 1px solid var(--sw-color-border);
+  font-weight: 600;
+  padding-top: var(--sw-space-2);
+}
+
+.sw-preview-row-note {
+  flex-direction: column;
+  gap: 0;
+}
+
+.sw-preview-row-note .sw-preview-row-label {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sw-preview-row-note .sw-preview-row-value {
+  text-align: start;
+}
+
+.sw-preview-row-filled,
+.sw-preview-row-alert {
+  border-radius: var(--sw-radius-sm);
+  padding: var(--sw-space-2) var(--sw-space-3);
+}
+
+.sw-preview-row-filled {
+  background: var(--sw-color-subtle);
+}
+
+.sw-preview-row-alert {
+  background: color-mix(in srgb, var(--sw-color-danger) 10%, var(--sw-color-surface));
+  color: color-mix(in srgb, var(--sw-color-danger) 70%, var(--sw-color-text));
+}
+
+.sw-preview-tiles {
+  display: grid;
+  gap: var(--sw-space-2);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.sw-preview-tile {
+  align-items: center;
+  background: var(--sw-color-subtle);
+  border-radius: var(--sw-radius-sm);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: var(--sw-space-2);
+}
+
+.sw-preview-tile-label {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+@media (min-width: 48rem) {
+  .sw-screen-preview-card .sw-screen-preview-screen { padding: var(--sw-space-5); }
+  .sw-preview-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .sw-screen-preview-device { width: 20rem; }
+  .sw-screen-preview-device .sw-screen-preview-bezel {
+    background: var(--sw-color-text);
+    border-radius: calc(var(--sw-radius-lg) + var(--sw-space-3));
+    padding: var(--sw-space-3);
+  }
+  .sw-screen-preview-device .sw-screen-preview-screen {
+    background: var(--sw-color-subtle);
+    border-radius: var(--sw-radius-lg);
+    gap: 0;
+    overflow: hidden;
+    padding: 0;
+  }
+  .sw-screen-preview-device .sw-screen-preview-header {
+    background: var(--sw-color-surface);
+    border-bottom: 1px solid var(--sw-color-border);
+    padding: var(--sw-space-4);
+  }
+  .sw-screen-preview-device .sw-screen-preview-body { gap: var(--sw-space-3); padding: var(--sw-space-3); }
+  .sw-screen-preview-device .sw-preview-group {
+    background: var(--sw-color-surface);
+    border-radius: var(--sw-radius-md);
+    padding: var(--sw-space-3);
+  }
+  .sw-screen-preview-device .sw-preview-group + .sw-preview-group { border-top: 0; }
+  .sw-screen-preview-device .sw-screen-preview-caption { text-align: center; }
+}
+
+@media (forced-colors: active) {
+  .sw-screen-preview-screen { border: 1px solid CanvasText; }
+}
+
+@media (forced-colors: active) and (min-width: 48rem) {
+  .sw-screen-preview-device .sw-screen-preview-screen { border: 0; }
+  .sw-screen-preview-device .sw-screen-preview-bezel { border: 1px solid CanvasText; }
+}
+
+.sw-hero {
+  align-items: center;
+  display: grid;
+  gap: var(--sw-space-8);
+  min-width: 0;
+}
+
+.sw-hero-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-4);
+  min-width: 0;
+}
+
+.sw-hero:not(.sw-hero-with-media) .sw-hero-text {
+  max-width: var(--sw-reading-max);
+}
+
+.sw-hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+  padding-top: var(--sw-space-1);
+}
+
+.sw-hero-media {
+  justify-self: center;
+  max-width: 100%;
+  min-width: 0;
+}
+
+@media (min-width: 48rem) {
+  .sw-hero-text { gap: var(--sw-space-5); }
+  .sw-hero-with-media { grid-template-columns: minmax(0, 1fr) auto; }
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-hero { gap: var(--sw-space-6); }
+  .sw-hero-actions { align-items: stretch; flex-direction: column; }
+}
+
 .sw-site-footer-top {
   display: grid;
   gap: var(--sw-space-6) var(--sw-space-5);
@@ -7141,6 +7369,62 @@ body {
   .sw-skeleton-row + .sw-skeleton-row { border-color: GrayText; }
 }
 
+.sw-empty-state {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border: 1px dashed var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-8) var(--sw-space-4);
+  text-align: center;
+  width: 100%;
+}
+
+.sw-empty-state-icon {
+  align-items: center;
+  background: var(--sw-color-subtle);
+  border-radius: var(--sw-radius-md);
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  flex: none;
+  height: var(--sw-space-8);
+  justify-content: center;
+  width: var(--sw-space-8);
+}
+
+.sw-empty-state-icon > svg {
+  height: var(--sw-space-5);
+  width: var(--sw-space-5);
+}
+
+.sw-empty-state-title,
+.sw-empty-state-description {
+  margin: 0;
+  max-width: var(--sw-reading-max);
+}
+
+.sw-empty-state-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: center;
+  margin-top: var(--sw-space-1);
+}
+
+@media (pointer: coarse) {
+  .sw-empty-state-actions .sw-button { min-height: var(--sw-control-md-min-height); }
+}
+
+@media (forced-colors: active) {
+  .sw-empty-state { border-color: CanvasText; }
+  .sw-empty-state-icon { color: CanvasText; }
+}
+
 .sw-progress {
   display: flex;
   flex-direction: column;
@@ -7868,6 +8152,9 @@ body {
 .sw-grid-cols-below-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .sw-grid-cols-below-md-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 }
+.sw-grid-fit-narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
+.sw-grid-fit-medium { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr)); }
+.sw-grid-fit-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); }
 .sw-grid-span-1 { grid-column: span 1; }
 .sw-grid-span-2 { grid-column: span 2; }
 .sw-grid-span-3 { grid-column: span 3; }
@@ -7883,6 +8170,18 @@ body {
 :where(.sw-grid-cols-3) > .sw-grid-span-4 { grid-column: span 3; }
 :where(.sw-grid-cols-3) > .sw-grid-span-6 { grid-column: span 3; }
 :where(.sw-grid-cols-4) > .sw-grid-span-6 { grid-column: span 4; }
+:where(.sw-grid-fit-narrow) > .sw-grid-span-2 { grid-column: auto; }
+:where(.sw-grid-fit-narrow) > .sw-grid-span-3 { grid-column: auto; }
+:where(.sw-grid-fit-narrow) > .sw-grid-span-4 { grid-column: auto; }
+:where(.sw-grid-fit-narrow) > .sw-grid-span-6 { grid-column: auto; }
+:where(.sw-grid-fit-medium) > .sw-grid-span-2 { grid-column: auto; }
+:where(.sw-grid-fit-medium) > .sw-grid-span-3 { grid-column: auto; }
+:where(.sw-grid-fit-medium) > .sw-grid-span-4 { grid-column: auto; }
+:where(.sw-grid-fit-medium) > .sw-grid-span-6 { grid-column: auto; }
+:where(.sw-grid-fit-wide) > .sw-grid-span-2 { grid-column: auto; }
+:where(.sw-grid-fit-wide) > .sw-grid-span-3 { grid-column: auto; }
+:where(.sw-grid-fit-wide) > .sw-grid-span-4 { grid-column: auto; }
+:where(.sw-grid-fit-wide) > .sw-grid-span-6 { grid-column: auto; }
 @media not all and (min-width: 48rem) {
   :where(.sw-grid-cols-below-md-1) > .sw-grid-span-2 { grid-column: span 1; }
   :where(.sw-grid-cols-below-md-1) > .sw-grid-span-3 { grid-column: span 1; }
@@ -8915,6 +9214,99 @@ body {
   [data-theme] .sw-stepper-changed input.sw-stepper-input { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; background-image: none; }
 }
 
+.sw-stepper-count {
+  background-color: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  padding-inline: var(--sw-control-md-padding-inline);
+  align-items: center;
+  box-sizing: border-box;
+  cursor: text;
+  display: inline-flex;
+  gap: var(--sw-space-1);
+  justify-content: center;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-stepper-full .sw-stepper-count { display: flex; }
+
+[data-theme] .sw-stepper .sw-stepper-count > input.sw-stepper-input {
+  align-self: stretch;
+  background: transparent;
+  background-image: none;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  inline-size: 5ch;
+  min-height: 0;
+  padding-inline: 0;
+  text-align: end;
+}
+
+[data-theme] .sw-stepper .sw-stepper-count > input.sw-stepper-input:focus-visible { outline: none; }
+
+.sw-stepper-count:focus-within {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-stepper-unit {
+  color: var(--sw-color-muted);
+  flex: none;
+  font-size: 17px;
+  line-height: 25px;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.sw-stepper-invalid .sw-stepper-count { border-color: var(--sw-color-danger); }
+
+.sw-stepper-changed .sw-stepper-count {
+  border-color: var(--sw-color-accent);
+  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
+}
+
+.sw-stepper-changed .sw-stepper-count:not(:has(> input:placeholder-shown)) { background-image: linear-gradient(color-mix(in srgb, var(--sw-color-accent) 12%, transparent), color-mix(in srgb, var(--sw-color-accent) 12%, transparent)); }
+
+.sw-stepper-changed .sw-stepper-count:not(:has(> input:placeholder-shown)) > .sw-stepper-unit { color: var(--sw-color-text); }
+
+/*
+ * The frame draws the surface, so it carries the disabled look for its count,
+ * and only that look: a locked count drops the invalid and changed edges and
+ * tint, which name nothing a person can act on.
+ */
+.sw-stepper .sw-stepper-count:has(> input:disabled) {
+  background-color: var(--sw-color-subtle);
+  border-style: dashed;
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;
+  background-image: none;
+  border-color: var(--sw-color-border);
+  box-shadow: none;
+}
+
+.sw-stepper .sw-stepper-count:has(> input:disabled) > .sw-stepper-unit {
+  color: var(--sw-color-muted);
+}
+
+@media (forced-colors: active) {
+  .sw-stepper-unit { color: CanvasText; }
+  .sw-stepper-invalid .sw-stepper-count { border-color: Mark; }
+  .sw-stepper-changed .sw-stepper-count { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; background-image: none; }
+  .sw-stepper .sw-stepper-count:has(> input:disabled) {
+    border-color: GrayText;
+  color: GrayText;
+  -webkit-text-fill-color: GrayText;
+    box-shadow: none;
+  }
+}
+
 .sw-steps {
   display: flex;
   flex-direction: column;

package/dist/theme/ThemeProvider.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import { type ColorScheme, type PaletteId, type Theme, type ThemeColors } from '@scalewing/tokens';
 import { type ThemeCanvas } from '../css/css-canvas-grouped.js';
+import { type ThemeFrame } from '../css/css-theme-frame.js';
 export type ThemeProviderProps = {
     colorScheme?: ColorScheme | 'system';
     palette?: PaletteId;
@@ -14,7 +15,15 @@ export type ThemeProviderProps = {
      * colours keep it. An unknown value throws a `RangeError`.
      */
     canvas?: ThemeCanvas;
+    /**
+     * `none` (default) leaves the children in the document's flow; `site`
+     * (opt-in) makes the themed root a public site's page: a column at least
+     * the window's height whose last child (the footer) sits at its foot, so
+     * a short page's footer meets the window's foot. An unknown value throws
+     * a `RangeError`.
+     */
+    frame?: ThemeFrame;
     children: ReactNode;
 };
-export declare function ThemeProvider({ colorScheme, palette, colors, canvas, children, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function ThemeProvider({ colorScheme, palette, colors, canvas, frame, children, }: ThemeProviderProps): import("react").JSX.Element;
 export declare function useTheme(): Theme;

package/dist/theme/ThemeProvider.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
 import { createTheme, secondaryActionBorder, semanticColorKeys, } from '@scalewing/tokens';
 import { assertThemeCanvas, } from '../css/css-canvas-grouped.js';
+import { assertThemeFrame } from '../css/css-theme-frame.js';
 const ThemeContext = createContext(null);
 function schemeFromMedia() {
     if (typeof window === 'undefined' ||
@@ -25,8 +26,9 @@ function themeCssVars(theme) {
     vars['--sw-glass-specular'] = theme.glass.specular;
     return vars;
 }
-export function ThemeProvider({ colorScheme = 'system', palette, colors, canvas = 'default', children, }) {
+export function ThemeProvider({ colorScheme = 'system', palette, colors, canvas = 'default', frame = 'none', children, }) {
     assertThemeCanvas(canvas);
+    assertThemeFrame(frame);
     const [systemScheme, setSystemScheme] = useState(schemeFromMedia);
     useEffect(() => {
         if (colorScheme !== 'system' || typeof window.matchMedia !== 'function') {
@@ -42,7 +44,7 @@ export function ThemeProvider({ colorScheme = 'system', palette, colors, canvas
     }, [colorScheme]);
     const resolvedScheme = colorScheme === 'system' ? systemScheme : colorScheme;
     const theme = useMemo(() => createTheme({ colorScheme: resolvedScheme, palette, colors }), [colors, palette, resolvedScheme]);
-    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx("div", { "data-canvas": canvas === 'default' ? undefined : canvas, "data-palette": palette, "data-theme": theme.colorScheme, style: themeCssVars(theme), children: children }) }));
+    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx("div", { "data-canvas": canvas === 'default' ? undefined : canvas, "data-frame": frame === 'none' ? undefined : frame, "data-palette": palette, "data-theme": theme.colorScheme, style: themeCssVars(theme), children: children }) }));
 }
 export function useTheme() {
     const theme = useContext(ThemeContext);