@veevarts/design-system 2.0.0-alpha.51 → 2.0.0-alpha.54

package/dist/patterns/AdminTextField/AdminTextField.d.ts

@@ -1,53 +1,13 @@
 import { default as React } from 'react';
+import { AdminFieldLabelProps, AdminTextFieldProps } from './types';
 /**
  * The uppercase field label, standalone — for a control this component does
  * not cover (a checkbox group, a read-only preview) that should still be
  * captioned like every other admin field. `suffix` is the lighter tail:
  * "· optional", "· auto-generated, immutable".
- */
-export declare const AdminFieldLabel: React.FC<{
-    children: React.ReactNode;
-    suffix?: React.ReactNode;
-    className?: string;
-    'data-testid'?: string;
-}>;
-interface AdminTextFieldBase {
-    /** Uppercase label above the control. Omit only when an adjacent element already names it. */
-    label?: React.ReactNode;
-    /** Lighter annotation after the label (e.g. `· optional`). Ignored without a label. */
-    labelSuffix?: React.ReactNode;
-    value: string;
-    placeholder?: string;
-    disabled?: boolean;
-    /** Monospace face without the read-only treatment, for codes the user types. */
-    mono?: boolean;
-    /** Claim initial focus. Only for the first field of a dialog, never on a page. */
-    autoFocus?: boolean;
-    /** Small helper or error text under the control. */
-    hint?: React.ReactNode;
-    /** Renders the hint as an error and marks the control invalid. */
-    invalid?: boolean;
-    className?: string;
-    'data-testid'?: string;
-}
-/**
- * `onChange` is REQUIRED unless the field is read-only.
- *
- * This is a controlled input: given a `value` and no handler, React pins it and
- * typing does nothing — a field that looks editable, accepts focus, and silently
- * discards every keystroke. That is indistinguishable from a bug at a glance,
- * and it is what happens by accident when someone renders one to show a value.
  *
- * Showing a value without accepting edits is a real case, so it stays possible;
- * it just has to be said, with `readOnly`, which also renders it as system-owned
- * and announces it correctly.
+ * `isRequired` adds a visible `*` and the screen-reader `requiredLabel`;
+ * `help` adds an ⓘ that opens it in a popover, kept outside the label text.
  */
-export type AdminTextFieldProps = AdminTextFieldBase & ({
-    readOnly: true;
-    onChange?: never;
-} | {
-    readOnly?: false;
-    onChange: (value: string) => void;
-});
+export declare const AdminFieldLabel: React.FC<AdminFieldLabelProps>;
 export declare const AdminTextField: React.FC<AdminTextFieldProps>;
-export {};

package/dist/patterns/AdminTextField/index.d.ts

@@ -1,3 +1,3 @@
 export { AdminFieldLabel, AdminTextField } from './AdminTextField';
-export type { AdminTextFieldProps } from './AdminTextField';
-export { adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelSuffixClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';
+export type { AdminTextFieldProps, AdminFieldLabelProps, AdminFieldRequiredProps, AdminFieldHelpProps } from './types';
+export { adminFieldErrorClass, adminFieldHelpButtonClass, adminFieldHelpContentClass, adminFieldHelpIconClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelNoAutoMarkClass, adminFieldLabelRowClass, adminFieldLabelSuffixClass, adminFieldRequiredClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';

package/dist/patterns/AdminTextField/styles.d.ts

@@ -22,6 +22,35 @@ export declare const adminFieldLabelClass = "text-[11px] font-semibold uppercase
  * aside, not as part of the field's name.
  */
 export declare const adminFieldLabelSuffixClass = "font-normal normal-case tracking-normal";
+/**
+ * The visible `*` of a required field. `after:content-none` switches off the
+ * `*` HeroUI's own `isRequired` paints into its label slot, so there is one
+ * mark, the one carrying the screen-reader word.
+ */
+export declare const adminFieldRequiredClass = "ms-0.5 text-acct-danger";
+/**
+ * The label row a field with `help` draws itself, in place of HeroUI's.
+ * HeroUI pushes its box down by `font-size-small + 10px` (24px) to make room
+ * for its outside label; this row takes the same height from the same
+ * variable, so a field with help and one without line up in a form row.
+ * `min-h` rather than `h`, so a label that wraps grows the row instead of
+ * running into the box.
+ *
+ * `text-foreground` because that is the color HeroUI's label actually renders
+ * in above the box (`group-data-[filled-within=true]:text-foreground` beats
+ * the `text-acct-muted` it is given), measured at `rgb(17, 24, 28)`.
+ */
+export declare const adminFieldLabelRowClass = "mb-0 min-h-[calc(var(--heroui-font-size-small)_+_10px)] text-foreground";
+/** Added to HeroUI's `label` slot so its `isRequired` mark does not double ours. */
+export declare const adminFieldLabelNoAutoMarkClass = "after:content-none";
+/**
+ * The ⓘ that opens a field's help: a 24px round hit target (WCAG 2.5.8) whose
+ * negative margin keeps the 11px label row from growing to fit it.
+ */
+export declare const adminFieldHelpButtonClass = "ms-0.5 -my-1.5 size-6 min-w-6 align-middle text-acct-sub data-[hover=true]:bg-acct-page data-[hover=true]:text-acct-ink";
+export declare const adminFieldHelpIconClass = "size-4";
+/** The popover the ⓘ opens. Body copy, so sentence case and ink. */
+export declare const adminFieldHelpContentClass = "max-w-xs rounded-xl px-3 py-2 text-xs leading-normal text-acct-ink2";
 /**
  * The 38px box — HeroUI's `inputWrapper` slot, which carries the border and
  * background (the `input` slot is the bare field).

package/dist/patterns/AdminTextField/types.d.ts

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+/**
+ * The required mark. Plain optional props rather than a union that forces
+ * `requiredLabel` with `isRequired`: a union collapses under
+ * `Omit<AdminTextFieldProps, …>`, so every wrapper that forwards props would
+ * stop compiling.
+ */
+export interface AdminFieldRequiredProps {
+    /** Adds a visible `*` after the label (and its suffix). */
+    isRequired?: boolean;
+    /**
+     * The word screen readers hear for the `*` ("required", "obligatoire").
+     * Pass it with `isRequired`: the `*` itself is hidden from them.
+     */
+    requiredLabel?: string;
+}
+/** Help on demand: an ⓘ button after the label that opens it in a popover. */
+export interface AdminFieldHelpProps {
+    help?: React.ReactNode;
+    /** Accessible name of the ⓘ ("About timezone"). Without it the ⓘ is named by the label text. */
+    helpLabel?: string;
+}
+export interface AdminFieldLabelProps extends AdminFieldRequiredProps, AdminFieldHelpProps {
+    children: React.ReactNode;
+    /** The lighter tail: "· optional", "· auto-generated, immutable". */
+    suffix?: React.ReactNode;
+    /**
+     * `id` of the control this captions. The text then renders as a real
+     * `<label>`, so clicking it focuses the control. The ⓘ stays outside it.
+     */
+    htmlFor?: string;
+    /** `id` of the text element, for a group to point `aria-labelledby` at. */
+    id?: string;
+    className?: string;
+    'data-testid'?: string;
+}
+export interface AdminTextFieldBase extends AdminFieldRequiredProps, AdminFieldHelpProps {
+    /** Uppercase label above the control. Omit only when an adjacent element already names it. */
+    label?: React.ReactNode;
+    /** Lighter annotation after the label (e.g. `· optional`). Ignored without a label. */
+    labelSuffix?: React.ReactNode;
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Monospace face without the read-only treatment, for codes the user types. */
+    mono?: boolean;
+    /** Claim initial focus. Only for the first field of a dialog, never on a page. */
+    autoFocus?: boolean;
+    /** Small helper or error text under the control. */
+    hint?: React.ReactNode;
+    /** Renders the hint as an error and marks the control invalid. */
+    invalid?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * `onChange` is REQUIRED unless the field is read-only.
+ *
+ * This is a controlled input: given a `value` and no handler, React pins it and
+ * typing does nothing — a field that looks editable, accepts focus, and silently
+ * discards every keystroke. That is indistinguishable from a bug at a glance,
+ * and it is what happens by accident when someone renders one to show a value.
+ *
+ * Showing a value without accepting edits is a real case, so it stays possible;
+ * it just has to be said, with `readOnly`, which also renders it as system-owned
+ * and announces it correctly.
+ *
+ * `isRequired` / `help` behave as on {@link AdminFieldLabelProps}, and are
+ * ignored without a `label`. `isRequired` also marks the input
+ * `aria-required`, without the browser's own `required` validation.
+ */
+export type AdminTextFieldProps = AdminTextFieldBase & ({
+    readOnly: true;
+    onChange?: never;
+} | {
+    readOnly?: false;
+    onChange: (value: string) => void;
+});

package/dist/patterns/EntityRow/styles.d.ts

@@ -20,6 +20,21 @@ export declare const entityRowClass: {
     readonly side: "relative z-10 flex shrink-0 items-center gap-1";
     readonly chevron: "flex shrink-0 text-default-500";
     readonly menuTrigger: "text-default-600";
+    /** The menu otherwise grows to its longest line; a description wraps instead. */
+    readonly menuWithDescriptions: "max-w-xs";
+    /**
+     * HeroUI truncates a string description; a reason cut short is no reason.
+     * default-600 like the row's subtitle, sized by the same per-size token.
+     */
+    readonly menuItemDescription: "whitespace-normal text-default-600";
+    /**
+     * A disabled item with a description. HeroUI dims the whole item, which
+     * would take the description to about 2:1, and opacity cannot be undone by
+     * a child. So the item stays opaque and the label and icon are dimmed.
+     */
+    readonly menuItemDisabledWithDescription: "opacity-100";
+    readonly menuItemDimmed: "opacity-disabled";
+    readonly menuItemDimmedIcon: "flex shrink-0 opacity-disabled";
     readonly avatar: "shrink-0 bg-default-200 text-default-700";
     readonly dangerItem: "text-danger";
 };

package/dist/patterns/EntityRow/types.d.ts

@@ -33,6 +33,13 @@ export interface EntityRowAction {
     icon?: ReactNode;
     tone?: 'default' | 'danger';
     isDisabled?: boolean;
+    /**
+     * Second line under the label, typically why a disabled action is
+     * unavailable. It stays readable on a disabled item. react-aria never
+     * focuses a disabled item, so the descriptions of disabled actions also
+     * describe the `⋯` trigger (`aria-describedby`).
+     */
+    description?: string;
     onAction: () => void;
     /** Defaults to `<row testid>-menu-<key>`. */
     'data-testid'?: string;

package/dist/patterns/TileSelect/TileSelect.d.ts

@@ -1,117 +1,4 @@
 import { default as React } from 'react';
-export interface TileSelectOption {
-    /** Stable identifier returned via `onSelect`. */
-    key: string;
-    /** Visible label rendered under the icon. */
-    label: string;
-    /**
-     * Icon: iconify name (`'lucide:credit-card'`) or a `ReactNode` for
-     * fully-custom SVGs.
-     */
-    icon: string | React.ReactNode;
-    /** Disable the tile (greyed out, no click). */
-    isDisabled?: boolean;
-    /**
-     * One line of supporting copy. Rendered only by `variant="compact"`,
-     * for an option that ended up in the "More" menu, where the label
-     * alone ("Other") rarely says enough.
-     */
-    description?: string;
-    /**
-     * `variant="compact"` only: keep this option in the "More" menu at
-     * every width, however much room the track has. For an action that is
-     * secondary by decision rather than by measurement — a payments picker
-     * that wants "Other" one click away so the methods people actually
-     * reach for own the row.
-     *
-     * The menu is rendered whenever an option asks for it, so this also
-     * overrides the rule that suppresses a menu holding a single option.
-     */
-    alwaysInMenu?: boolean;
-    /**
-     * `variant="compact"` only: what this option is worth keeping on the
-     * track. When the pill runs out of room the LOWEST priority folds into
-     * the menu first; equal priorities fold from the end of the list.
-     * Default `0`.
-     *
-     * Display order is untouched — this decides what survives a squeeze,
-     * not where anything sits. A payments picker can list "Other" before
-     * "Split payment" and still lose "Other" first, because splitting a
-     * payment is the rarer, weightier thing to reach for.
-     */
-    priority?: number;
-    /** Override per-tile test id; defaults to `${dataTestId}-${key}`. */
-    'data-testid'?: string;
-}
-/**
- * `'tiles'` — the icon-over-label grid, with a `<Select>` dropdown under
- * `md`. The picker is the subject of the step.
- *
- * `'compact'` — a segmented pill of label-only toggles at every width,
- * keeping every option the track can hold and folding the rest into a
- * "More" menu rather than scrolling. The picker is a control among others.
- */
-export type TileSelectVariant = 'tiles' | 'compact';
-/**
- * Tile size for `variant="tiles"`.
- *
- * `'md'` (default) — the 80px icon-over-label tile of the payments drop-in.
- *
- * `'sm'` — the 58px tender tile of the Quick Donation / Quick Membership
- * mockups (`.tender-tile`): 17px icon over an 11.5px label, 10px/4px padding,
- * 12px radius, 8px between tiles; the picked tile takes a brand border, a 9%
- * brand tint and brand text. DS tokens only, rem only.
- */
-export type TileSelectSize = 'md' | 'sm';
-export interface TileSelectProps {
-    /** Options to render in order. */
-    options: readonly TileSelectOption[];
-    /** Currently selected option `key`. `null` = no selection. */
-    selectedKey: string | null;
-    /** Fires when a tile is selected. */
-    onSelect: (key: string) => void;
-    /** Optional heading rendered above the grid. */
-    heading?: string;
-    /**
-     * `aria-label` for the wrapping group when `heading` is omitted.
-     * Translatable. Default `'Select an option'`. When `heading` is
-     * provided this prop is ignored — the grid is labelled by the
-     * heading element.
-     */
-    ariaLabel?: string;
-    /**
-     * How the options render. Default `'tiles'`.
-     * See {@link TileSelectVariant}.
-     */
-    variant?: TileSelectVariant;
-    /**
-     * `variant="compact"` only: a CAP on how many options stay on the pill.
-     * Unset by default, and normally best left that way — the pill already
-     * measures the track and keeps every option that fits, folding only
-     * what is left over. Set it when a surface wants a shorter row than
-     * its width allows.
-     *
-     * The cap gives way in one case: when honouring it would leave a single
-     * option in the menu that the track had room for. A "More" button is
-     * wider than most labels, so that fold costs space and buys a click.
-     */
-    maxVisible?: number;
-    /**
-     * `variant="compact"` only: label for the overflow trigger. Shown
-     * until an option inside the menu is selected, after which the
-     * trigger carries that option's label. Translatable. Default `'More'`.
-     */
-    moreLabel?: string;
-    /**
-     * Grid columns on >= sm. Default `3`. Mobile collapses to 2.
-     * `5` and `6` keep a full method set on one row on a wide surface.
-     * Ignored by `variant="compact"`, which is a single strip.
-     */
-    columnsDesktop?: 2 | 3 | 4 | 5 | 6;
-    columnsMobile?: 1 | 2;
-    /** `variant="tiles"` only. See {@link TileSelectSize}. Default `'md'`. */
-    size?: TileSelectSize;
-    className?: string;
-    'data-testid'?: string;
-}
+import { TileSelectProps } from './types';
+export type { TileSelectOption, TileSelectProps, TileSelectSize, TileSelectVariant } from './types';
 export declare const TileSelect: React.FC<TileSelectProps>;

package/dist/patterns/TileSelect/index.d.ts

@@ -1,2 +1,2 @@
 export { TileSelect } from './TileSelect';
-export type { TileSelectProps, TileSelectOption, TileSelectVariant, TileSelectSize } from './TileSelect';
+export type { TileSelectProps, TileSelectOption, TileSelectVariant, TileSelectSize } from './types';

package/dist/patterns/TileSelect/styles.d.ts

@@ -11,4 +11,46 @@ export declare const smallTileClass: {
     readonly active: "border-primary bg-primary/[.09] text-primary data-[hover=true]:bg-primary/[.09]";
     readonly icon: "flex h-[1.0625rem] w-[1.0625rem] items-center justify-center";
     readonly label: "text-[0.71875rem] font-medium leading-[0.875rem]";
+    /** `isLocked`: dashed and muted, and inert under the pointer. `pos-muted` is 4.83:1 on white. */
+    readonly locked: "cursor-not-allowed border-dashed border-pos-line-strong bg-white text-pos-muted data-[hover=true]:border-pos-line-strong data-[hover=true]:bg-white data-[pressed=true]:scale-100";
+};
+/**
+ * `size="md"` tile classes.
+ *
+ * Sized to the Figma spec for the payments-drop-in method picker (PP-1154):
+ * 48px inner content (icon 20 + gap 8 + label 20) + 32px vertical padding
+ * (`py-4`) = 80px. `h-auto` lets the tile grow past that floor when content
+ * wraps (localised long labels, a description).
+ *
+ * `bg-transparent` suppresses HeroUI's own fill so the active and hover
+ * surfaces come from these classes alone.
+ */
+export declare const mediumTileClass: {
+    readonly tile: "flex flex-col items-center justify-center gap-2 h-auto min-h-20 px-4 py-4 border bg-transparent transition-colors motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly idle: "border-default-200 text-default-800 hover:bg-default-50";
+    readonly active: "border-primary bg-primary-50 text-primary";
+    readonly label: "text-sm font-medium";
+    /**
+     * The grid holds a description or a badge: every tile left-aligns, with
+     * the icon and badge on one row, then the label, then the description.
+     */
+    readonly detailed: "items-start justify-start gap-1 whitespace-normal text-left";
+    /** Wraps the badge under the icon rather than overflowing a narrow tile. */
+    readonly header: "mb-1 flex w-full flex-wrap items-start justify-between gap-2";
+    /**
+     * `default-600`, not 500: on the picked tile's `primary-50` tint the 500
+     * measured 4.498:1, a hair under the floor.
+     */
+    readonly description: "text-xs font-normal leading-snug text-default-600";
+    /** The locked tile's description, muted with the rest of it (4.6:1 on `default-50`). */
+    readonly lockedDescription: "text-default-500";
+    /** `default-600` on `default-100`: about 7:1. */
+    readonly badge: "shrink-0 whitespace-nowrap rounded-full bg-default-100 px-2 py-0.5 text-[11px] font-medium leading-4 text-default-600";
+    /**
+     * `isLocked`: dashed, muted, inert under the pointer. Muted by color, not
+     * opacity, so the text keeps its contrast: `default-500` on `default-50`
+     * measures 4.6:1. HeroUI's hover dim and press scale are switched off.
+     */
+    readonly locked: "cursor-not-allowed border-dashed border-default-300 bg-default-50 text-default-500 hover:bg-default-50 data-[hover=true]:opacity-100 data-[pressed=true]:scale-100";
+    readonly lockedIcon: "text-default-400";
 };

package/dist/patterns/TileSelect/types.d.ts

@@ -0,0 +1,140 @@
+import { default as React } from 'react';
+export interface TileSelectOption {
+    /** Stable identifier returned via `onSelect`. */
+    key: string;
+    /** Visible label rendered under the icon. */
+    label: string;
+    /**
+     * Icon: iconify name (`'lucide:credit-card'`) or a `ReactNode` for
+     * fully-custom SVGs.
+     */
+    icon: string | React.ReactNode;
+    /**
+     * Disable the tile (greyed out, no click). The tile is `disabled`, so it
+     * also leaves the tab order. For an option that exists but cannot be
+     * picked yet, use `isLocked`.
+     */
+    isDisabled?: boolean;
+    /**
+     * One line of supporting copy. `variant="compact"` renders it for an
+     * option that ended up in the "More" menu, where the label alone
+     * ("Other") rarely says enough. `variant="tiles"` renders it only in a
+     * grid opted in to the detailed tile (some option has a `badge` or is
+     * `isLocked`): on the `size="md"` tile under the label, and as the item
+     * description in the small-viewport `<Select>`. On its own it changes
+     * nothing in the tile grid.
+     */
+    description?: string;
+    /**
+     * A short tag on the tile's top row: "Coming soon", "New".
+     * `variant="tiles"` at `size="md"`; also the end of its `<Select>` item.
+     * Opts the grid in to the detailed tile.
+     */
+    badge?: string;
+    /**
+     * Shown, not pickable: a dashed, muted tile that ignores presses. Unlike
+     * `isDisabled` it stays focusable and is `aria-disabled`, so keyboard and
+     * screen-reader users reach it and hear `lockedReason`. `variant="compact"`
+     * and the small-viewport `<Select>` treat it as disabled. Opts the grid in
+     * to the detailed tile.
+     */
+    isLocked?: boolean;
+    /** What a locked tile announces. Defaults to `badge`. */
+    lockedReason?: string;
+    /**
+     * `variant="compact"` only: keep this option in the "More" menu at
+     * every width, however much room the track has. For an action that is
+     * secondary by decision rather than by measurement — a payments picker
+     * that wants "Other" one click away so the methods people actually
+     * reach for own the row.
+     *
+     * The menu is rendered whenever an option asks for it, so this also
+     * overrides the rule that suppresses a menu holding a single option.
+     */
+    alwaysInMenu?: boolean;
+    /**
+     * `variant="compact"` only: what this option is worth keeping on the
+     * track. When the pill runs out of room the LOWEST priority folds into
+     * the menu first; equal priorities fold from the end of the list.
+     * Default `0`.
+     *
+     * Display order is untouched — this decides what survives a squeeze,
+     * not where anything sits. A payments picker can list "Other" before
+     * "Split payment" and still lose "Other" first, because splitting a
+     * payment is the rarer, weightier thing to reach for.
+     */
+    priority?: number;
+    /** Override per-tile test id; defaults to `${dataTestId}-${key}`. */
+    'data-testid'?: string;
+}
+/**
+ * `'tiles'` — the icon-over-label grid, with a `<Select>` dropdown under
+ * `md`. The picker is the subject of the step.
+ *
+ * `'compact'` — a segmented pill of label-only toggles at every width,
+ * keeping every option the track can hold and folding the rest into a
+ * "More" menu rather than scrolling. The picker is a control among others.
+ */
+export type TileSelectVariant = 'tiles' | 'compact';
+/**
+ * Tile size for `variant="tiles"`.
+ *
+ * `'md'` (default) — the 80px icon-over-label tile of the payments drop-in.
+ *
+ * `'sm'` — the 58px tender tile of the Quick Donation / Quick Membership
+ * mockups (`.tender-tile`): 17px icon over an 11.5px label, 10px/4px padding,
+ * 12px radius, 8px between tiles; the picked tile takes a brand border, a 9%
+ * brand tint and brand text. DS tokens only, rem only.
+ */
+export type TileSelectSize = 'md' | 'sm';
+export interface TileSelectProps {
+    /** Options to render in order. */
+    options: readonly TileSelectOption[];
+    /** Currently selected option `key`. `null` = no selection. */
+    selectedKey: string | null;
+    /** Fires when a tile is selected. */
+    onSelect: (key: string) => void;
+    /** Optional heading rendered above the grid. */
+    heading?: string;
+    /**
+     * `aria-label` for the wrapping group when `heading` is omitted.
+     * Translatable. Default `'Select an option'`. When `heading` is
+     * provided this prop is ignored — the grid is labelled by the
+     * heading element.
+     */
+    ariaLabel?: string;
+    /**
+     * How the options render. Default `'tiles'`.
+     * See {@link TileSelectVariant}.
+     */
+    variant?: TileSelectVariant;
+    /**
+     * `variant="compact"` only: a CAP on how many options stay on the pill.
+     * Unset by default, and normally best left that way — the pill already
+     * measures the track and keeps every option that fits, folding only
+     * what is left over. Set it when a surface wants a shorter row than
+     * its width allows.
+     *
+     * The cap gives way in one case: when honouring it would leave a single
+     * option in the menu that the track had room for. A "More" button is
+     * wider than most labels, so that fold costs space and buys a click.
+     */
+    maxVisible?: number;
+    /**
+     * `variant="compact"` only: label for the overflow trigger. Shown
+     * until an option inside the menu is selected, after which the
+     * trigger carries that option's label. Translatable. Default `'More'`.
+     */
+    moreLabel?: string;
+    /**
+     * Grid columns on >= sm. Default `3`. Mobile collapses to 2.
+     * `5` and `6` keep a full method set on one row on a wide surface.
+     * Ignored by `variant="compact"`, which is a single strip.
+     */
+    columnsDesktop?: 2 | 3 | 4 | 5 | 6;
+    columnsMobile?: 1 | 2;
+    /** `variant="tiles"` only. See {@link TileSelectSize}. Default `'md'`. */
+    size?: TileSelectSize;
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/VerticalSteps/StepPager.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { StepPagerProps } from './types';
+export declare function StepPager({ steps, currentStep, onStepChange, progressLabel, nextLabel, previousLabel, finalActionLabel, onFinalAction, isFinalActionDisabled, className, 'data-testid': dataTestId, previousTestId, nextTestId, finalActionTestId, }: StepPagerProps): JSX.Element;
+export declare namespace StepPager {
+    var displayName: string;
+}

package/dist/patterns/VerticalSteps/StepsReadiness.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+import { StepsReadinessProps } from './types';
+/**
+ * The verdict that sits in `VerticalSteps`' `header`: ready to publish,
+ * N things to fix, or already live. Copy comes in as props.
+ *
+ * `role="status"` on every variant: the count changes while the user edits,
+ * and a polite announcement is the right weight for it. `data-ready` is
+ * `"true"` for `ready` and `live`, `"false"` for `fix`, so a test can wait on
+ * it without reading copy.
+ */
+export declare function StepsReadiness({ variant, title, description, className, 'data-testid': dataTestId, }: StepsReadinessProps): JSX.Element;
+export declare namespace StepsReadiness {
+    var displayName: string;
+}

package/dist/patterns/VerticalSteps/VerticalSteps.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { VerticalStepsProps } from './types';
+export declare function VerticalSteps({ steps, currentStep: currentStepProp, defaultStep, onStepChange, isStepReachable, ariaLabel, statusLabels, header, maxHeight, className, style, 'data-testid': dataTestId, ...rest }: VerticalStepsProps): JSX.Element;
+export declare namespace VerticalSteps {
+    var displayName: string;
+}

package/dist/patterns/VerticalSteps/index.d.ts

@@ -0,0 +1,4 @@
+export { VerticalSteps } from './VerticalSteps';
+export { StepsReadiness } from './StepsReadiness';
+export { StepPager } from './StepPager';
+export type { VerticalStep, VerticalStepStatus, VerticalStepsProps, VerticalStepsStatusLabels, StepsReadinessProps, StepsReadinessVariant, StepPagerProps, } from './types';

package/dist/patterns/VerticalSteps/styles.d.ts

@@ -0,0 +1,54 @@
+import { StepsReadinessVariant, VerticalStepStatus } from './types';
+/** One glyph per status, so the state reads by shape before color. */
+export declare const STEP_STATUS_ICON: Record<VerticalStepStatus, string>;
+/**
+ * `icon` paints the glyph; `meta` the line under the label.
+ *
+ * The optional ring is `--muted` (gray-400, 2.54:1): it is decorative, the
+ * visible word "Optional" carries the state. Every text tone is `--sub`
+ * (gray-500, 4.83:1) or darker; `--warn` is warning-700, 5.02:1 on white.
+ */
+export declare const STEP_STATUS_TONE: Record<VerticalStepStatus, {
+    icon: string;
+    meta: string;
+}>;
+/** Label color for every row. */
+export declare const STEP_LABEL_COLOR: string;
+export declare const READINESS_ICON: Record<StepsReadinessVariant, string>;
+/** Fill plus the one text tone on it. Both pairs are held to 4.5:1 in `admin-surface.test.ts`. */
+export declare const READINESS_TONE: Record<StepsReadinessVariant, {
+    fill: string;
+    text: string;
+}>;
+export declare const verticalStepsClass: {
+    /** Scrolls inside once `maxHeight` (or the parent) caps it. */
+    readonly root: "flex min-h-0 flex-col gap-3 overflow-y-auto overscroll-contain";
+    readonly nav: "rounded-2xl border border-acct-border bg-acct-surface p-1.5";
+    readonly list: "m-0 flex list-none flex-col gap-0.5 p-0";
+    /**
+     * The DS Button supplies the hit target, the focus ring and press
+     * handling; its centered single-line box is undone so a row can wrap.
+     */
+    readonly row: string;
+    readonly rowCurrent: "bg-acct-hair data-[hover=true]:bg-acct-hair";
+    readonly icon: "mt-px size-5 shrink-0";
+    readonly text: "flex min-w-0 flex-1 flex-col gap-0.5";
+    readonly label: "text-sm leading-5";
+    readonly labelCurrent: "font-semibold";
+    readonly meta: "text-xs leading-4 [overflow-wrap:anywhere]";
+};
+export declare const stepsReadinessClass: {
+    readonly root: "flex items-start gap-2.5 rounded-2xl px-4 py-3";
+    readonly icon: "mt-0.5 size-5 shrink-0";
+    readonly text: "flex min-w-0 flex-col";
+    readonly title: "text-sm font-semibold leading-5";
+    readonly description: "text-xs leading-4";
+};
+export declare const stepPagerClass: {
+    readonly root: "flex flex-wrap items-center justify-between gap-3";
+    /** Keeps the progress text centered when one side has no button. */
+    readonly spacer: "min-w-0 flex-1 basis-0";
+    readonly progress: "shrink-0 text-xs text-acct-sub";
+    readonly endSlot: "flex min-w-0 flex-1 basis-0 justify-end";
+    readonly arrow: "size-4";
+};