@scalewing/react 1.48.0 → 1.50.0

package/dist/css/css-components.js

@@ -43,6 +43,7 @@ import { cssSwitchClasses } from './css-switch.js';
 import { cssTextClasses } from './css-text.js';
 import { cssFontMonoClasses } from './css-font-mono.js';
 import { cssSkeletonClasses } from './css-skeleton.js';
+import { cssEmptyStateClasses } from './css-empty-state.js';
 import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
 import { cssNoticeClasses } from './css-notice.js';
@@ -51,6 +52,8 @@ import { cssTooltipClasses } from './css-tooltip.js';
 import { cssInfoTipClasses } from './css-info-tip.js';
 import { cssSeparatorClasses } from './css-separator.js';
 import { cssBandClasses } from './css-band.js';
+import { cssScreenPreviewClasses } from './css-screen-preview.js';
+import { cssHeroClasses } from './css-hero.js';
 import { cssSiteFooterClasses } from './css-site-footer.js';
 import { cssSiteHeaderClasses } from './css-site-header.js';
 import { cssStatTileClasses } from './css-stat-tile.js';
@@ -200,6 +203,10 @@ ${cssSectionNavClasses()}
 
 ${cssBandClasses()}
 
+${cssScreenPreviewClasses()}
+
+${cssHeroClasses()}
+
 ${cssSiteFooterClasses()}
 
 ${cssSiteHeaderClasses()}
@@ -237,6 +244,8 @@ ${cssSpinnerClasses()}
 
 ${cssSkeletonClasses()}
 
+${cssEmptyStateClasses()}
+
 ${cssProgressClasses()}
 
 ${cssNoticeClasses()}

package/dist/css/css-document.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { cssBoxLinkClasses } from './css-box-link.js';
 import { cssCanvasGroupedRules } from './css-canvas-grouped.js';
+import { cssThemeFrameRules } from './css-theme-frame.js';
 const body = typographyVariants.body;
 /** The native controls that take typed text: the canvas's text controls. */
 export const typedInputs = [
@@ -87,6 +88,8 @@ body {
 
 ${cssCanvasGroupedRules()}
 
+${cssThemeFrameRules()}
+
 [data-theme] a {
   color: var(--sw-color-accent);
   text-decoration: none;

package/dist/css/css-empty-state.d.ts

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

package/dist/css/css-empty-state.js

@@ -0,0 +1,77 @@
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+/*
+ * EmptyState: a centred column on the surface inside a dashed hairline
+ * (the md radius), spacing step 8 above and below and step 4 at the sides,
+ * its parts a step 3 apart. The glyph sits in a decorative step-8 square of
+ * the subtle fill in the muted colour, a direct-child SVG drawn at step 5.
+ * The title and line keep a readable measure and wrap; a long word breaks.
+ * The actions are a centred row that wraps, a step 2 apart, each Button a
+ * 44 px target on a coarse pointer. Forced colours keep the dashed edge in
+ * the system's border colour and draw the glyph in CanvasText.
+ */
+export function cssEmptyStateClasses() {
+    return `.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 ${coarsePointerQuery} {
+  .sw-empty-state-actions .sw-button { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  .sw-empty-state { border-color: CanvasText; }
+  .sw-empty-state-icon { color: CanvasText; }
+}`;
+}
+export function emptyStateClassCatalog() {
+    return [
+        'sw-empty-state',
+        'sw-empty-state-icon',
+        'sw-empty-state-title',
+        'sw-empty-state-description',
+        'sw-empty-state-actions',
+    ];
+}

package/dist/css/css-grid-span.js

@@ -1,5 +1,5 @@
 import { breakpointQuery, breakpoints } from './breakpoints.js';
-import { gridColumnCounts, gridColumnsBelowClass, gridColumnsClass, } from './css-grid.js';
+import { gridColumnCounts, gridColumnsBelowClass, gridColumnsClass, gridFitClass, gridFits, } from './css-grid.js';
 export const gridColumnSpans = gridColumnCounts;
 export function gridSpanClass(span) {
     return `sw-grid-span-${span}`;
@@ -21,6 +21,9 @@ function widerSpans(columns) {
 export function cssGridSpanClasses() {
     const spans = gridColumnSpans.map((span) => spanRule(`.${gridSpanClass(span)}`, span));
     const caps = gridColumnCounts.flatMap((columns) => widerSpans(columns).map((span) => capRule(gridColumnsClass(columns), columns, span)));
+    // A fitted grid's column count follows its width, so a span there would
+    // add implicit columns: its children each take one column.
+    const fitted = gridFits.flatMap((fit) => widerSpans(1).map((span) => `:where(.${gridFitClass(fit)}) > .${gridSpanClass(span)} { grid-column: auto; }`));
     // Below a breakpoint every span wider than one is restated for the phone
     // column count, which also undoes a desktop cap when that count is larger.
     const below = breakpoints.map((breakpoint) => `@media ${breakpointQuery('below', breakpoint)} {
@@ -28,7 +31,7 @@ ${gridColumnCounts
         .flatMap((columns) => widerSpans(1).map((span) => `  ${capRule(gridColumnsBelowClass(breakpoint, columns), columns, span)}`))
         .join('\n')}
 }`);
-    return [...spans, ...caps, ...below].join('\n');
+    return [...spans, ...caps, ...fitted, ...below].join('\n');
 }
 export function gridSpanClassCatalog() {
     return gridColumnSpans.map((span) => gridSpanClass(span));

package/dist/css/css-grid.d.ts

@@ -1,6 +1,19 @@
 import { type Breakpoint } from './breakpoints.js';
 export declare const gridColumnCounts: readonly [1, 2, 3, 4, 6];
 export type GridColumns = (typeof gridColumnCounts)[number];
+/**
+ * A fitted grid's narrowest column: as many columns as fit the grid's width
+ * at this minimum, each stretched to share the row, and one column when
+ * the grid is narrower than the minimum.
+ */
+export declare const gridFitWidths: {
+    readonly narrow: "15rem";
+    readonly medium: "16.25rem";
+    readonly wide: "18.75rem";
+};
+export type GridFit = keyof typeof gridFitWidths;
+export declare const gridFits: GridFit[];
+export declare function gridFitClass(fit: GridFit): string;
 export declare function gridColumnsClass(columns: GridColumns): string;
 export declare function gridColumnsBelowClass(breakpoint: Breakpoint, columns: GridColumns): string;
 export declare function cssGridClasses(): string;

package/dist/css/css-grid.js

@@ -1,5 +1,19 @@
 import { breakpointQuery, breakpoints, } from './breakpoints.js';
 export const gridColumnCounts = [1, 2, 3, 4, 6];
+/**
+ * A fitted grid's narrowest column: as many columns as fit the grid's width
+ * at this minimum, each stretched to share the row, and one column when
+ * the grid is narrower than the minimum.
+ */
+export const gridFitWidths = {
+    narrow: '15rem',
+    medium: '16.25rem',
+    wide: '18.75rem',
+};
+export const gridFits = Object.keys(gridFitWidths);
+export function gridFitClass(fit) {
+    return `sw-grid-fit-${fit}`;
+}
 export function gridColumnsClass(columns) {
     return `sw-grid-cols-${columns}`;
 }
@@ -20,12 +34,14 @@ ${gridColumnCounts
         .map((count) => columnsRule(gridColumnsBelowClass(breakpoint, count), count))
         .join('\n')}
 }`);
-    return [base, ...columns, ...below].join('\n');
+    const fitted = gridFits.map((fit) => `.${gridFitClass(fit)} { grid-template-columns: repeat(auto-fit, minmax(min(100%, ${gridFitWidths[fit]}), 1fr)); }`);
+    return [base, ...columns, ...below, ...fitted].join('\n');
 }
 export function gridClassCatalog() {
     return [
         'sw-grid',
         ...gridColumnCounts.map((count) => gridColumnsClass(count)),
         ...breakpoints.flatMap((breakpoint) => gridColumnCounts.map((count) => gridColumnsBelowClass(breakpoint, count))),
+        ...gridFits.map(gridFitClass),
     ];
 }

package/dist/css/css-hero.d.ts

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

package/dist/css/css-hero.js

@@ -0,0 +1,62 @@
+import { breakpointQuery } from './breakpoints.js';
+/*
+ * A public page's opening: the words in one column (an eyebrow, the hero
+ * title, the lead and the actions) and an optional picture beside them.
+ * From `md` the picture keeps its own width at the row's end and the words
+ * take the rest; below `md` the picture sits centred under the words and
+ * the actions stack to the full width, as a phone's thumb expects. With no
+ * picture the words keep the reading width, so a long title or lead does
+ * not run the page's full width. The actions sit one spacing step further
+ * from the lead than the text's gap, so the buttons read as their own row.
+ */
+export function cssHeroClasses() {
+    return `.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 ${breakpointQuery('from', 'md')} {
+  .sw-hero-text { gap: var(--sw-space-5); }
+  .sw-hero-with-media { grid-template-columns: minmax(0, 1fr) auto; }
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-hero { gap: var(--sw-space-6); }
+  .sw-hero-actions { align-items: stretch; flex-direction: column; }
+}`;
+}
+export function heroClassCatalog() {
+    return [
+        'sw-hero',
+        'sw-hero-with-media',
+        'sw-hero-text',
+        'sw-hero-actions',
+        'sw-hero-media',
+    ];
+}

package/dist/css/css-screen-preview.d.ts

@@ -0,0 +1,10 @@
+/** How a drawn screen is framed: a plain card, or a phone from `md`. */
+export declare const screenPreviewFrames: readonly ["card", "device"];
+export type ScreenPreviewFrame = (typeof screenPreviewFrames)[number];
+/** What a drawn row shows: a figure, a total, a note, a filled or an alert row. */
+export declare const previewRowKinds: readonly ["plain", "total", "note", "filled", "alert"];
+export type PreviewRowKind = (typeof previewRowKinds)[number];
+export declare function screenPreviewFrameClass(frame: ScreenPreviewFrame): string;
+export declare function previewRowKindClass(kind: PreviewRowKind): string;
+export declare function cssScreenPreviewClasses(): string;
+export declare function screenPreviewClassCatalog(): string[];

package/dist/css/css-screen-preview.js

@@ -0,0 +1,232 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { toneTintFill, toneTintInk } from './tone-tint.js';
+const { caption, label, title } = typographyVariants;
+/** How a drawn screen is framed: a plain card, or a phone from `md`. */
+export const screenPreviewFrames = ['card', 'device'];
+/** What a drawn row shows: a figure, a total, a note, a filled or an alert row. */
+export const previewRowKinds = [
+    'plain',
+    'total',
+    'note',
+    'filled',
+    'alert',
+];
+export function screenPreviewFrameClass(frame) {
+    return `sw-screen-preview-${frame}`;
+}
+export function previewRowKindClass(kind) {
+    return `sw-preview-row-${kind}`;
+}
+/*
+ * The card frame, and the device frame below `md`: one surface card whose
+ * groups are parted by hairlines. Rows set their label at the start and
+ * their figure at the end in tabular numerals.
+ */
+function cardRules() {
+    return `.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: ${label.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  gap: var(--sw-space-3);
+  line-height: ${label.lineHeight}px;
+  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: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-screen-preview-title {
+  font-size: ${title.fontSize}px;
+  font-weight: ${title.fontWeight};
+  line-height: ${title.lineHeight}px;
+}
+
+.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: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}`;
+}
+function rowRules() {
+    return `.sw-preview-row {
+  display: flex;
+  gap: var(--sw-space-3);
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.sw-preview-row-value {
+  text-align: end;
+}
+
+.${previewRowKindClass('total')} {
+  border-top: 1px solid var(--sw-color-border);
+  font-weight: ${label.fontWeight};
+  padding-top: var(--sw-space-2);
+}
+
+.${previewRowKindClass('note')} {
+  flex-direction: column;
+  gap: 0;
+}
+
+.${previewRowKindClass('note')} .sw-preview-row-label {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.${previewRowKindClass('note')} .sw-preview-row-value {
+  text-align: start;
+}
+
+.${previewRowKindClass('filled')},
+.${previewRowKindClass('alert')} {
+  border-radius: var(--sw-radius-sm);
+  padding: var(--sw-space-2) var(--sw-space-3);
+}
+
+.${previewRowKindClass('filled')} {
+  background: var(--sw-color-subtle);
+}
+
+.${previewRowKindClass('alert')} {
+  background: ${toneTintFill('danger')};
+  color: ${toneTintInk('danger')};
+}
+
+.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: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}`;
+}
+/*
+ * From `md` the device frame draws a phone: a dark bezel (the text colour)
+ * round a quiet screen whose header is a surface strip and whose groups
+ * are surface cards. Below `md` it is the card, since the page is already
+ * a phone.
+ */
+function wideRules() {
+    const device = `.${screenPreviewFrameClass('device')}`;
+    return `@media ${breakpointQuery('from', 'md')} {
+  .${screenPreviewFrameClass('card')} .sw-screen-preview-screen { padding: var(--sw-space-5); }
+  .sw-preview-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  ${device} { width: 20rem; }
+  ${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);
+  }
+  ${device} .sw-screen-preview-screen {
+    background: var(--sw-color-subtle);
+    border-radius: var(--sw-radius-lg);
+    gap: 0;
+    overflow: hidden;
+    padding: 0;
+  }
+  ${device} .sw-screen-preview-header {
+    background: var(--sw-color-surface);
+    border-bottom: 1px solid var(--sw-color-border);
+    padding: var(--sw-space-4);
+  }
+  ${device} .sw-screen-preview-body { gap: var(--sw-space-3); padding: var(--sw-space-3); }
+  ${device} .sw-preview-group {
+    background: var(--sw-color-surface);
+    border-radius: var(--sw-radius-md);
+    padding: var(--sw-space-3);
+  }
+  ${device} .sw-preview-group + .sw-preview-group { border-top: 0; }
+  ${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 ${breakpointQuery('from', 'md')} {
+  .${screenPreviewFrameClass('device')} .sw-screen-preview-screen { border: 0; }
+  .${screenPreviewFrameClass('device')} .sw-screen-preview-bezel { border: 1px solid CanvasText; }
+}`;
+}
+export function cssScreenPreviewClasses() {
+    return [cardRules(), rowRules(), wideRules()].join('\n\n');
+}
+export function screenPreviewClassCatalog() {
+    return [
+        'sw-screen-preview',
+        ...screenPreviewFrames.map(screenPreviewFrameClass),
+        'sw-screen-preview-bezel',
+        'sw-screen-preview-screen',
+        'sw-screen-preview-header',
+        'sw-screen-preview-eyebrow',
+        'sw-screen-preview-title',
+        'sw-screen-preview-body',
+        'sw-screen-preview-caption',
+        'sw-preview-group',
+        'sw-preview-row',
+        ...previewRowKinds.map(previewRowKindClass),
+        'sw-preview-row-label',
+        'sw-preview-row-value',
+        'sw-preview-tiles',
+        'sw-preview-tile',
+        'sw-preview-tile-label',
+        'sw-preview-tile-value',
+    ];
+}

package/dist/css/css-stepper-unit.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A Stepper with a `unit`: the count and its muted word ("90 min") inside
+ * one control frame, as Field's suffix. The frame draws the canvas control
+ * surface, the focus ring and the states; the input inside drops its own and
+ * keeps its few-digit width, its digits against the unit, so the frame never
+ * follows the count. The pair is centred, also in a full-width stepper.
+ */
+export declare function cssStepperUnitClasses(): string;
+export declare function stepperUnitClassCatalog(): string[];

package/dist/css/css-stepper-unit.js

@@ -0,0 +1,102 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { controlSurface, disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
+import { changedTintLayer } from './css-field-changed.js';
+const body = typographyVariants.body;
+/*
+ * Outranks the stepper's own input rules and state rules (the invalid
+ * border, the changed shadow and tint), which the frame draws instead.
+ */
+const framedInput = '[data-theme] .sw-stepper .sw-stepper-count > input.sw-stepper-input';
+const tintedFrame = '.sw-stepper-changed .sw-stepper-count:not(:has(> input:placeholder-shown))';
+/**
+ * A Stepper with a `unit`: the count and its muted word ("90 min") inside
+ * one control frame, as Field's suffix. The frame draws the canvas control
+ * surface, the focus ring and the states; the input inside drops its own and
+ * keeps its few-digit width, its digits against the unit, so the frame never
+ * follows the count. The pair is centred, also in a full-width stepper.
+ */
+export function cssStepperUnitClasses() {
+    return `.sw-stepper-count {
+  ${controlSurface}
+  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; }
+
+${framedInput} {
+  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;
+}
+
+${framedInput}: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: ${body.fontSize}px;
+  line-height: ${body.lineHeight}px;
+  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);
+}
+
+${tintedFrame} { background-image: ${changedTintLayer}; }
+
+${tintedFrame} > .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) {
+  ${disabledControlSurface}
+  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) {
+    ${disabledControlForcedColors}
+    box-shadow: none;
+  }
+}`;
+}
+export function stepperUnitClassCatalog() {
+    return ['sw-stepper-count', 'sw-stepper-unit'];
+}

package/dist/css/css-stepper.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { changedTintLayer } from './css-field-changed.js';
+import { cssStepperUnitClasses, stepperUnitClassCatalog, } from './css-stepper-unit.js';
 const body = typographyVariants.body;
 const label = typographyVariants.label;
 const title = typographyVariants.title;
@@ -116,7 +117,9 @@ ${input} {
 
 .sw-stepper-full input.sw-stepper-input { inline-size: 100%; }
 
-${stateRules()}`;
+${stateRules()}
+
+${cssStepperUnitClasses()}`;
 }
 export function stepperClassCatalog() {
     return [
@@ -129,5 +132,6 @@ export function stepperClassCatalog() {
         'sw-stepper-changed',
         'sw-stepper-readonly',
         'sw-stepper-limit-plain',
+        ...stepperUnitClassCatalog(),
     ];
 }

package/dist/css/css-theme-frame.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 declare const themeFrames: readonly ["none", "site"];
+export type ThemeFrame = (typeof themeFrames)[number];
+export declare function assertThemeFrame(frame: unknown): asserts frame is ThemeFrame;
+export declare function cssThemeFrameRules(): string;