@scalewing/react 1.25.0 → 1.27.0

package/dist/css/css-denomination-entry.js

@@ -0,0 +1,78 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+/** An enabled entry count, unless its Stepper shows an error (whose danger border wins). */
+const tonedEntryInput = '[data-theme] .sw-denomination-cell-toned .sw-stepper:not(.sw-stepper-invalid) input.sw-stepper-input:not(:disabled)';
+/*
+ * Count entry and the labels around it. An entry cell holds a full-width
+ * Stepper; its count keeps spacing step 8 (room for three digits), so a narrow strip scrolls
+ * in its region instead of crushing the counts. A cell tone draws the
+ * count's border in the tone, a hairline thicker through an inset shadow so
+ * nothing moves. A caption is a muted caption-size line: under a row label,
+ * or after a column label. A quiet row sits on the subtle fill, its pinned
+ * label too. A disabled row fades its label, counts and total (its entry is
+ * disabled by its Stepper); a pinned label fades its contents, not its
+ * fill, so counts never show through it.
+ */
+export function cssDenominationEntryClasses() {
+    return `.sw-denomination-strip td.sw-denomination-entry {
+  padding: var(--sw-space-1);
+}
+
+.sw-denomination-entry .sw-stepper-full .sw-stepper-track {
+  grid-template-columns: var(--sw-space-6) minmax(var(--sw-space-8), 1fr) var(--sw-space-6);
+}
+
+/* A strip with entry rows centres its heads and read-only counts over the steppers. */
+.sw-denomination-strip-entry .sw-denomination-head:not(.sw-denomination-total-head),
+.sw-denomination-strip-entry .sw-denomination-cell {
+  text-align: center;
+}
+
+${tonedEntryInput} {
+  border-color: var(--sw-denomination-cell-tone);
+  box-shadow: inset 0 0 0 1px var(--sw-denomination-cell-tone);
+}
+
+.sw-denomination-label-words {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-denomination-label-caption,
+.sw-denomination-head-caption {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  font-weight: ${caption.fontWeight};
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-denomination-row-quiet,
+.sw-denomination-strip .sw-denomination-row-quiet .sw-denomination-label {
+  background: var(--sw-color-subtle);
+}
+
+.sw-denomination-strip .sw-denomination-row-disabled .sw-denomination-label-body,
+.sw-denomination-strip .sw-denomination-row-disabled .sw-denomination-cell,
+.sw-denomination-strip .sw-denomination-row-disabled .sw-denomination-total {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media (forced-colors: active) {
+  ${tonedEntryInput} { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
+  .sw-denomination-label-caption,
+  .sw-denomination-head-caption { color: CanvasText; }
+}`;
+}
+export function denominationEntryClassCatalog() {
+    return [
+        'sw-denomination-entry',
+        'sw-denomination-strip-entry',
+        'sw-denomination-label-words',
+        'sw-denomination-label-caption',
+        'sw-denomination-head-caption',
+        'sw-denomination-row-quiet',
+        'sw-denomination-row-disabled',
+    ];
+}

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

@@ -2,6 +2,7 @@ import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
 import { cssDenominationAlignedClasses, denominationAlignedClassCatalog, } from './css-denomination-aligned.js';
+import { cssDenominationEntryClasses, denominationEntryClassCatalog, } from './css-denomination-entry.js';
 import { cssDenominationCellToneClasses, denominationCellToneClassCatalog, } from './css-denomination-cell-tones.js';
 import { pinnedStartShadeRules, scrollRegionRules, } from './css-scroll-region.js';
 import { visuallyHiddenDeclarations } from './css-utilities.js';
@@ -249,6 +250,8 @@ ${pinnedStartShadeRules('.sw-denomination-scroll', [
 
 ${cssDenominationCellToneClasses()}
 
+${cssDenominationEntryClasses()}
+
 ${cssDenominationAlignedClasses()}
 
 @media (forced-colors: active) {
@@ -290,6 +293,7 @@ export function denominationGridClassCatalog() {
         'sw-denomination-tile',
         'sw-denomination-subtotal',
         ...denominationCellToneClassCatalog(),
+        ...denominationEntryClassCatalog(),
         ...denominationAlignedClassCatalog(),
     ];
 }

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

@@ -0,0 +1,12 @@
+/**
+ * The description list: a two-column grid whose items share its columns
+ * (`subgrid`), so every term starts the same column and every detail the
+ * next. The term column fits the widest term up to 40% of the list. A
+ * hairline divides the rows, the list sits flush with no space above the
+ * first row or below the last, and each row aligns to its top. Below `md`
+ * 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.
+ */
+export declare function cssDescriptionListClasses(): string;
+export declare function descriptionListClassCatalog(): string[];

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

@@ -0,0 +1,63 @@
+import { breakpointQuery } from './breakpoints.js';
+/**
+ * The description list: a two-column grid whose items share its columns
+ * (`subgrid`), so every term starts the same column and every detail the
+ * next. The term column fits the widest term up to 40% of the list. A
+ * hairline divides the rows, the list sits flush with no space above the
+ * first row or below the last, and each row aligns to its top. Below `md`
+ * 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.
+ */
+export function cssDescriptionListClasses() {
+    return `.sw-description-list {
+  column-gap: var(--sw-space-4);
+  display: grid;
+  grid-template-columns: fit-content(40%) minmax(0, 1fr);
+  margin: 0;
+  min-width: 0;
+}
+
+.sw-description-item {
+  align-items: start;
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  padding-block: var(--sw-space-2);
+  row-gap: var(--sw-space-1);
+}
+
+.sw-description-item:first-child { padding-top: 0; }
+
+.sw-description-item:last-child { padding-bottom: 0; }
+
+.sw-description-item + .sw-description-item {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-description-term,
+.sw-description-detail {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-description-list { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (forced-colors: active) {
+  .sw-description-item + .sw-description-item { border-top-color: CanvasText; }
+}`;
+}
+export function descriptionListClassCatalog() {
+    return [
+        'sw-description-list',
+        'sw-description-item',
+        'sw-description-term',
+        'sw-description-detail',
+    ];
+}

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

@@ -0,0 +1,10 @@
+/**
+ * The web Stepper: a label over a track of − count +. The count is a few
+ * digits wide by default, the track at its own width even under a wider label
+ * or message (`5ch` plus its padding, so its width never follows
+ * its value), or fills its container with `sw-stepper-full`. The buttons are
+ * spacing step 6 wide on the subtle fill and every part is the `md` control
+ * height.
+ */
+export declare function cssStepperClasses(): string;
+export declare function stepperClassCatalog(): string[];

package/dist/css/css-stepper.js

@@ -0,0 +1,126 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { changedTintLayer } from './css-field-changed.js';
+const body = typographyVariants.body;
+const label = typographyVariants.label;
+const title = typographyVariants.title;
+/*
+ * The count is a text input, so the canvas already draws it as a control
+ * (`[data-theme] :is(input[type='text'], …)`). `input.sw-stepper-input`
+ * matches that rule's specificity and comes later in the sheet, so the
+ * stepper's own centering and type win while the canvas keeps the surface,
+ * the focus ring and the disabled look.
+ */
+const input = '[data-theme] input.sw-stepper-input';
+function stateRules() {
+    return `[data-theme] .sw-stepper-invalid input.sw-stepper-input {
+  border-color: var(--sw-color-danger);
+}
+
+[data-theme] .sw-stepper-changed input.sw-stepper-input {
+  border-color: var(--sw-color-accent);
+  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
+}
+
+[data-theme] .sw-stepper-changed input.sw-stepper-input:not(:placeholder-shown) {
+  background-image: ${changedTintLayer};
+}
+
+/* Read-only: the buttons keep their room, so the count lines up with an editable one. */
+.sw-stepper-readonly .sw-stepper-button { visibility: hidden; }
+
+@media (forced-colors: active) {
+  .sw-stepper-button { border-color: ButtonText; }
+  .sw-stepper-button:disabled { border-color: GrayText; color: GrayText; opacity: 1; }
+  [data-theme] .sw-stepper-invalid input.sw-stepper-input { border-color: Mark; }
+  [data-theme] .sw-stepper-changed input.sw-stepper-input { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; background-image: none; }
+}`;
+}
+/**
+ * The web Stepper: a label over a track of − count +. The count is a few
+ * digits wide by default, the track at its own width even under a wider label
+ * or message (`5ch` plus its padding, so its width never follows
+ * its value), or fills its container with `sw-stepper-full`. The buttons are
+ * spacing step 6 wide on the subtle fill and every part is the `md` control
+ * height.
+ */
+export function cssStepperClasses() {
+    return `.sw-stepper {
+  align-items: flex-start;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  min-width: 0;
+  /* Holds its hidden label and empty error region, which leave the flow,
+     so inside a scroll region they never widen the page. */
+  position: relative;
+}
+
+.sw-stepper-full { align-items: stretch; display: flex; }
+
+.sw-stepper-track {
+  display: inline-grid;
+  gap: var(--sw-space-1);
+  grid-template-columns: var(--sw-space-6) auto var(--sw-space-6);
+}
+
+.sw-stepper-full .sw-stepper-track {
+  display: grid;
+  grid-template-columns: var(--sw-space-6) minmax(0, 1fr) var(--sw-space-6);
+}
+
+.sw-stepper-button {
+  align-items: center;
+  appearance: none;
+  background: var(--sw-color-subtle);
+  border: 1px solid transparent;
+  border-radius: var(--sw-radius-sm);
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${title.fontSize}px;
+  font-weight: ${title.fontWeight};
+  justify-content: center;
+  line-height: ${title.lineHeight}px;
+  margin: 0;
+  min-height: var(--sw-control-md-min-height);
+  padding: 0;
+  touch-action: manipulation;
+}
+
+.sw-stepper-button:hover:not(:disabled) {
+  background: var(--sw-color-border);
+}
+
+.sw-stepper-button:disabled {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+${input} {
+  font-size: ${body.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: ${label.fontWeight};
+  inline-size: calc(5ch + 2 * var(--sw-space-1));
+  line-height: ${body.lineHeight}px;
+  min-width: 0;
+  padding-inline: var(--sw-space-1);
+  text-align: center;
+}
+
+.sw-stepper-full input.sw-stepper-input { inline-size: 100%; }
+
+${stateRules()}`;
+}
+export function stepperClassCatalog() {
+    return [
+        'sw-stepper',
+        'sw-stepper-full',
+        'sw-stepper-track',
+        'sw-stepper-button',
+        'sw-stepper-input',
+        'sw-stepper-invalid',
+        'sw-stepper-changed',
+        'sw-stepper-readonly',
+    ];
+}

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

@@ -0,0 +1,9 @@
+/**
+ * The one-page vertical stepper: an ordered list of glass panels a small
+ * gap apart. Each has a header line (marker, title, and on a done step its
+ * summary and Edit) and, while open (current or error), a body indented to
+ * the title. An open step's title is the title variant; a folded one's is
+ * body size at label weight, muted ahead of the form or skipped.
+ */
+export declare function cssStepsClasses(): string;
+export declare function stepsClassCatalog(): string[];

package/dist/css/css-steps.js

@@ -0,0 +1,203 @@
+import { typographyVariants } from '@scalewing/tokens';
+const body = typographyVariants.body;
+const caption = typographyVariants.caption;
+const label = typographyVariants.label;
+const title = typographyVariants.title;
+/** The marker's size: the xs control height. */
+const marker = 'var(--sw-control-xs-min-height)';
+/** The marker's look per status: its fill, ring and number color. */
+function markerRules() {
+    return `.sw-steps-item-upcoming .sw-steps-marker,
+.sw-steps-item-skipped .sw-steps-marker {
+  box-shadow: inset 0 0 0 2px var(--sw-color-border);
+  color: var(--sw-color-muted);
+}
+
+.sw-steps-item-current .sw-steps-marker {
+  background: var(--sw-color-accent);
+  color: var(--sw-color-onAccent);
+}
+
+.sw-steps-item-error .sw-steps-marker {
+  background: var(--sw-color-danger);
+  color: var(--sw-color-onDanger);
+}
+
+.sw-steps-item-done .sw-steps-marker {
+  background: var(--sw-color-success);
+}
+
+/* Private chrome: a check drawn with two borders, as Checkbox's. */
+.sw-steps-item-done .sw-steps-marker::after {
+  border-bottom: 2px solid var(--sw-color-surface);
+  border-right: 2px solid var(--sw-color-surface);
+  content: '';
+  height: var(--sw-space-3);
+  margin-top: calc(-1 * var(--sw-space-1) / 2);
+  transform: rotate(45deg);
+  width: calc(var(--sw-space-3) / 2);
+}`;
+}
+/*
+ * A line from each marker down to the next step's, through the gap between
+ * the panels: the success color below a done step, the hairline otherwise.
+ */
+function connectorRules() {
+    return `.sw-steps-item:not(:last-child)::after {
+  background: var(--sw-color-border);
+  bottom: calc(-1 * var(--sw-space-2) - 1px);
+  content: '';
+  inset-inline-start: calc(var(--sw-space-4) + ${marker} / 2 - 1px);
+  position: absolute;
+  top: calc(var(--sw-steps-padding) + ${marker} + var(--sw-space-1));
+  width: 2px;
+}
+
+.sw-steps-item-done:not(:last-child)::after {
+  background: var(--sw-color-success);
+}`;
+}
+function forcedColorRules() {
+    return `@media (forced-colors: active) {
+  .sw-steps-marker { border: 2px solid CanvasText; box-shadow: none; }
+  .sw-steps-item-current .sw-steps-marker { border-color: Highlight; }
+  .sw-steps-item-done .sw-steps-marker::after { border-color: CanvasText; }
+  .sw-steps-item:not(:last-child)::after { background: CanvasText; }
+  .sw-steps-item-upcoming .sw-steps-title,
+  .sw-steps-item-skipped .sw-steps-title { color: GrayText; }
+}`;
+}
+/**
+ * The one-page vertical stepper: an ordered list of glass panels a small
+ * gap apart. Each has a header line (marker, title, and on a done step its
+ * summary and Edit) and, while open (current or error), a body indented to
+ * the title. An open step's title is the title variant; a folded one's is
+ * body size at label weight, muted ahead of the form or skipped.
+ */
+export function cssStepsClasses() {
+    return `.sw-steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-steps-item {
+  --sw-steps-padding: var(--sw-space-3);
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-md);
+  box-shadow: inset 0 1px 0 var(--sw-glass-specular);
+  color: var(--sw-color-text);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-4);
+  padding: var(--sw-steps-padding) var(--sw-space-4);
+  position: relative;
+}
+
+.sw-steps-item-current,
+.sw-steps-item-error {
+  --sw-steps-padding: var(--sw-space-4);
+}
+
+/* The marker sits at the top of the header, so the connector always starts
+   under it; each line of the header is centred on the marker's height. */
+.sw-steps-header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--sw-space-3);
+  min-height: ${marker};
+  min-width: 0;
+}
+
+.sw-steps-marker {
+  align-items: center;
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  height: ${marker};
+  justify-content: center;
+  line-height: ${caption.lineHeight}px;
+  width: ${marker};
+}
+
+.sw-steps-title {
+  font-family: var(--sw-font-sans);
+  font-size: ${body.fontSize}px;
+  font-weight: ${label.fontWeight};
+  letter-spacing: ${body.letterSpacing}px;
+  line-height: ${body.lineHeight}px;
+  margin: 0;
+  min-width: 0;
+  padding-block: calc((${marker} - ${body.lineHeight}px) / 2);
+}
+
+.sw-steps-item-current .sw-steps-title,
+.sw-steps-item-error .sw-steps-title {
+  font-size: ${title.fontSize}px;
+  letter-spacing: ${title.letterSpacing}px;
+  line-height: ${title.lineHeight}px;
+  padding-block: calc((${marker} - ${title.lineHeight}px) / 2);
+}
+
+.sw-steps-item-upcoming .sw-steps-title,
+.sw-steps-item-skipped .sw-steps-title,
+.sw-steps-reason {
+  color: var(--sw-color-muted);
+}
+
+.sw-steps-summary {
+  flex: 1 1 0;
+  font-size: ${label.fontSize}px;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-width: 25%;
+  overflow: hidden;
+  padding-block: calc((${marker} - ${label.lineHeight}px) / 2);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sw-button.sw-steps-edit {
+  flex: none;
+  margin-block: calc((${marker} - var(--sw-control-sm-min-height)) / 2);
+  margin-inline-start: auto;
+}
+
+.sw-steps-body {
+  margin-inline-start: calc(${marker} + var(--sw-space-3));
+  min-width: 0;
+}
+
+${markerRules()}
+
+${connectorRules()}
+
+${forcedColorRules()}`;
+}
+export function stepsClassCatalog() {
+    return [
+        'sw-steps',
+        'sw-steps-item',
+        'sw-steps-item-upcoming',
+        'sw-steps-item-current',
+        'sw-steps-item-done',
+        'sw-steps-item-error',
+        'sw-steps-item-skipped',
+        'sw-steps-header',
+        'sw-steps-marker',
+        'sw-steps-title',
+        'sw-steps-reason',
+        'sw-steps-summary',
+        'sw-steps-edit',
+        'sw-steps-body',
+    ];
+}

package/dist/css/stylesheet.js

@@ -13,6 +13,7 @@ import { tooltipClassCatalog } from './css-tooltip.js';
 import { infoTipClassCatalog } from './css-info-tip.js';
 import { separatorClassCatalog } from './css-separator.js';
 import { statTileClassCatalog } from './css-stat-tile.js';
+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';
@@ -21,6 +22,8 @@ import { gridSpanClassCatalog } from './css-grid-span.js';
 import { denominationGridClassCatalog } from './css-denomination-grid.js';
 import { scrollRegionClassCatalog } from './css-scroll-region.js';
 import { fieldClassCatalog } from './css-field.js';
+import { stepperClassCatalog } from './css-stepper.js';
+import { stepsClassCatalog } from './css-steps.js';
 import { boxBorderClassCatalog } from './css-box-border.js';
 import { cssComponentClasses } from './css-components.js';
 import { buttonClassCatalog } from './css-button.js';
@@ -76,12 +79,15 @@ export function utilityClassCatalog() {
         ...infoTipClassCatalog(),
         ...separatorClassCatalog(),
         ...statTileClassCatalog(),
+        ...descriptionListClassCatalog(),
         ...tabsClassCatalog(),
         ...filterChipsClassCatalog(),
         ...gridClassCatalog(),
         ...gridSpanClassCatalog(),
         ...denominationGridClassCatalog(),
         ...fieldClassCatalog(),
+        ...stepperClassCatalog(),
+        ...stepsClassCatalog(),
         ...splitClassCatalog(),
         ...toastClassCatalog(),
         ...responsiveClassCatalog(),

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { ActionMenu, type ActionMenuAlign, type ActionMenuItem, type ActionMenuProps, } from './components/ActionMenu.js';
-export { ActionBar, type ActionBarProps } from './components/ActionBar.js';
+export { ActionBar, type ActionBarProps, type ActionBarSummary, type ActionBarSummaryTone, } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
 export type { AccordionProps, AccordionSize } from './components/Accordion.js';
 export { Switch, type SwitchProps } from './components/Switch.js';
@@ -24,6 +24,8 @@ export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId
 export { Toast, toastTones } from './components/Toast.js';
 export type { ToastProps, ToastTone } from './components/Toast.js';
 export { Field, type FieldProps, type FieldSize } from './components/Field.js';
+export { Step, type StepHeadingLevel, type StepProps, Steps, type StepsLabels, type StepsProps, type StepStatus, } from './components/Steps.js';
+export { Stepper, type StepperProps, type StepperWidth, } from './components/Stepper.js';
 export { Inline, type InlineProps } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export type { SplitProps } from './components/Split.js';
@@ -42,11 +44,13 @@ export type { Breakpoint, BreakpointDirection, VisibilityBreakpoint, } from './c
 export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
 export type { SeparatorOrientation, SeparatorProps, } from './components/Separator.js';
+export { DescriptionItem, DescriptionList, } from './components/DescriptionList.js';
+export type { DescriptionItemProps, DescriptionListProps, } from './components/DescriptionList.js';
 export { Grid } from './components/Grid.js';
 export type { GridColumns, GridProps } from './components/Grid.js';
 export type { GridColumnSpan } from './css/css-grid-span.js';
 export type { ColumnSpanProps } from './column-span-classes.js';
 export { DenominationGrid } from './components/DenominationGrid.js';
-export type { DenominationGridColumn, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowRole, DenominationGridTone, DenominationLabelWidth, } from './components/DenominationGrid.js';
+export type { DenominationGridColumn, DenominationGridEntry, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowEmphasis, DenominationGridRowRole, DenominationGridTone, DenominationLabelWidth, } from './components/DenominationGrid.js';
 export { FilterChips } from './components/FilterChips.js';
 export type { FilterChipOption, FilterChipsProps, } from './components/FilterChips.js';

package/dist/index.js

@@ -1,5 +1,5 @@
 export { ActionMenu, } from './components/ActionMenu.js';
-export { ActionBar } from './components/ActionBar.js';
+export { ActionBar, } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
 export { Switch } from './components/Switch.js';
 export { DateField, } from './components/DateField.js';
@@ -22,6 +22,8 @@ export { StatTile, statTileTones, } from './components/StatTile.js';
 export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastTones } from './components/Toast.js';
 export { Field } from './components/Field.js';
+export { Step, Steps, } from './components/Steps.js';
+export { Stepper, } from './components/Stepper.js';
 export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export { Nav } from './components/Nav.js';
@@ -35,6 +37,7 @@ export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
+export { DescriptionItem, DescriptionList, } from './components/DescriptionList.js';
 export { Grid } from './components/Grid.js';
 export { DenominationGrid } from './components/DenominationGrid.js';
 export { FilterChips } from './components/FilterChips.js';

package/dist/stepper-count.d.ts

@@ -0,0 +1,37 @@
+/** A web `Stepper`'s bounds: whole numbers, `min <= max`, `step > 0`. */
+export type StepperBounds = {
+    min: number;
+    max: number;
+    step: number;
+};
+/** Where one press of − and of + lands, or null where that button is stopped. */
+export type StepperMoves = {
+    down: number | null;
+    up: number | null;
+};
+/** A typed text: no count (empty), a whole count, or text the box refuses. */
+export type StepperEntry = {
+    kind: 'empty';
+} | {
+    kind: 'count';
+    value: number;
+} | {
+    kind: 'refused';
+};
+/** A consumer bug, not a runtime state: the bounds must describe a range. */
+export declare function assertStepperBounds(bounds: StepperBounds): void;
+/**
+ * The counts − and + would move to. An empty box counts as `min`. A count
+ * outside the bounds (typed) moves back inside them; a bound stops its own
+ * direction, and a locked (disabled or read-only) stepper stops both.
+ */
+export declare function stepperMoves(value: number | null, bounds: StepperBounds, locked: boolean): StepperMoves;
+/**
+ * Reads what the person typed. Digits make a count, with a leading minus
+ * only when the range goes below zero; an empty box, or a lone minus on its
+ * way to a negative count, is no count. Anything else, or a count too large
+ * to be exact, is refused and the box keeps its last text.
+ */
+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;