@ahrowe/ui 0.44.0 → 0.45.0

package/dist/types/common/button/button.types.d.ts

@@ -14,8 +14,8 @@ export declare enum ButtonStyleType {
     Plain = "plain"
 }
 export declare enum ButtonSize {
-    Default = "default",
     Small = "small",
+    /** The default. */
     Medium = "medium",
     Large = "large",
     /** Square, padding-free button for a lone icon. Give it its own width/height. */

package/dist/types/common/configProvider/configProvider.types.d.ts

@@ -48,6 +48,7 @@ import { RoomDrawerProps } from '../roomDrawer/roomDrawer.types.js';
 import { RoomViewerProps } from '../roomViewer/roomViewer.types.js';
 import { PopoverProps } from '../popover/popover.types.js';
 import { ModalProps } from '../modal/modal.types.js';
+import { StepperProps } from '../stepper/stepper.types.js';
 import { Presentation } from '../configProvider/presentation.types.js';
 /**
  * Global default props keyed by component name.
@@ -131,6 +132,7 @@ export interface ComponentDefaults {
     Modal?: Partial<ModalProps>;
     CommandPalette?: Partial<CommandPaletteProps>;
     WeatherIcon?: Partial<WeatherIconProps>;
+    Stepper?: Partial<StepperProps>;
 }
 export interface ConfigProviderProps {
     children: React.ReactNode;

package/dist/types/common/stepper/stepper.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { StepperProps } from './stepper.types.js';
-export default function Stepper({ steps, currentStep, alignment, onStepClicked, nonLinear, hideLabels, styleType, collapse, labelPlacement, className, style, classNames, styles: slotStyles, ...rest }: StepperProps): React.JSX.Element;
+export default function Stepper(props: StepperProps): React.JSX.Element;

package/dist/types/common/stepper/stepper.types.d.ts

@@ -1,16 +1,17 @@
 import { default as React } from 'react';
 import { IconContent } from '../types/icon.types.js';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
-/** Layout direction of the stepper. */
-export declare enum StepperAlignment {
+import { ColorValue } from '../themeProvider/color.types.js';
+/** Direction the steps run in. */
+export declare enum StepperOrientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
-/** Visual preset for the step markers and connectors. */
+/** How the step markers are drawn. */
 export declare enum StepperStyleType {
-    /** Numbered markers, filled solid on completion (the default look). */
-    Default = "default",
-    /** Numbered markers that stay ringed when completed (a coloured check, no solid fill). */
+    /** Numbered markers, filled solid on completion. The default. */
+    Filled = "filled",
+    /** Numbered markers that stay ringed when completed, with a check in the colour. */
     Outlined = "outlined",
     /** Minimal dots without numbers, for a compact onboarding or carousel style. */
     Dots = "dots"
@@ -39,6 +40,16 @@ export declare enum StepperLabelPlacement {
     Right = "right"
 }
 export type StepperSlots = 'root' | 'entry' | 'entryNumber' | 'entryLabel' | 'connector' | 'description' | 'content' | 'optional' | 'icon';
+export interface StepperLabels {
+    /** Hint under the label of a step with `optional: true`. */
+    optional?: string;
+    /** Status of a completed step, read out by screen readers. */
+    completed?: string;
+    /** Status of a step not reached yet, read out by screen readers. */
+    notCompleted?: string;
+    /** Status of a step with `error`, read out by screen readers. */
+    error?: string;
+}
 export interface StepperStep {
     /** Primary label for the step. */
     label: React.ReactNode;
@@ -48,28 +59,33 @@ export interface StepperStep {
     content?: React.ReactNode;
     /** Icon shown in the marker instead of the step number — a FontAwesome icon or any node. */
     icon?: IconContent;
-    /** Marks the step as errored, recolouring the marker with `--stepper-error-color`. */
+    /** Marks the step as errored, drawing its marker in the theme's `--error-color`. */
     error?: boolean;
-    /** `true` renders an "Optional" hint; a node renders custom hint text. */
+    /** `true` renders the `optional` label as a hint; a node renders custom hint text. */
     optional?: boolean | React.ReactNode;
     /** Disables this step: never clickable, dimmed. */
     disabled?: boolean;
 }
-export interface StepperProps extends HtmlProps {
+export interface StepperProps extends HtmlProps<HTMLOListElement> {
     steps?: StepperStep[];
+    /** Zero-based index of the current step. `steps.length` marks every step completed. */
     currentStep?: number;
-    alignment?: StepperAlignment | 'horizontal' | 'vertical';
+    /** Direction the steps run in (default `Horizontal`). */
+    orientation?: StepperOrientation;
     onStepClicked?: ((index: number) => void) | null;
     /** Allow clicking any step, not just completed ones. */
     nonLinear?: boolean;
-    /** Hide the label text (and description) beneath each step entry. */
+    /** Hide each step's label, description and hint visually. Screen readers still read them. */
     hideLabels?: boolean;
-    /** Visual preset for markers and connectors (default `Default`). */
+    /** How the markers are drawn (default `Filled`). */
     styleType?: StepperStyleType;
+    /** A `ThemeColor` (default `Primary`) or any CSS colour, such as `'var(--brand)'`. */
+    color?: ColorValue;
     /** Which step bodies are expanded. Vertical `content` only (default `None`). */
     collapse?: StepperCollapse;
     /** Label position relative to the marker (default: horizontal `Bottom`, vertical `Right`). */
     labelPlacement?: StepperLabelPlacement;
+    labels?: StepperLabels;
     className?: string;
     style?: React.CSSProperties;
     classNames?: SlotClassNames<StepperSlots>;

package/dist/types/common/themeProvider/theme.types.d.ts

@@ -125,24 +125,12 @@ export interface ThemeVariables {
     '--stepper-marker-size'?: string;
     /** Step marker corner radius. Falls back to --default-border-radius. */
     '--stepper-marker-radius'?: string;
-    /** Idle (upcoming) marker/connector colour. Falls back to --primary-lighter. */
-    '--stepper-idle-color'?: string;
-    /** Current-step marker colour. Falls back to --primary-color. */
-    '--stepper-active-color'?: string;
-    /** Completed-step marker fill/colour. Falls back to --primary-color. */
-    '--stepper-done-color'?: string;
-    /** Errored-step marker colour. Falls back to --error-color. */
-    '--stepper-error-color'?: string;
-    /** Completed connector colour. Falls back to --primary-color. */
-    '--stepper-connector-color'?: string;
     /** Completed connector thickness. Falls back to 3px. */
     '--stepper-connector-thickness'?: string;
     /** Not-yet-reached connector thickness. Falls back to 1px. */
     '--stepper-connector-idle-thickness'?: string;
     /** Gap between marker and label, and grid column gap. Falls back to 12px. */
     '--stepper-gap'?: string;
-    /** Text/check colour on a filled marker. Falls back to --text-on-primary. */
-    '--stepper-text-on-marker'?: string;
     /** Timer ring track (unfilled) colour. Falls back to --background-accent-light. */
     '--timer-track-color'?: string;
     /** Timer ring progress (remaining time) colour. Falls back to --primary-color. */

package/docs/Button.md

@@ -69,7 +69,7 @@ import { faPlus, faSave, faTrash, faXmark } from '@fortawesome/free-solid-svg-ic
 
 - `ButtonStyleType`: `Filled` | `Light` | `Outlined` (default) | `Plain`
 - `ThemeColor`: `Primary` (default) | `Neutral` | `Success` | `Info` | `Warn` | `Error`
-- `ButtonSize`: `Default` | `Small` | `Medium` | `Large` | `Icon`
+- `ButtonSize`: `Small` | `Medium` (default) | `Large` | `Icon`
 - `ButtonType`: `Button` | `Reset` | `Submit`
 
 **Key props:**
@@ -119,10 +119,16 @@ so an icon is never cut off by a flexible sibling. A multi-word label still wrap
 
 ## Sizing
 
-A Button is sized by its font. `--default-font-size` is the base, and `Small` and `Large` are multiples of it (0.75x and 1.25x), so a theme with a smaller base font gets proportionally smaller controls everywhere. Padding and the icon gap are in `em`, so the whole box grows with the label rather than a large button wearing a default button's padding.
+A Button is sized by its font. `--default-font-size` is the base, `Medium` is that size, and `Small` and `Large` are multiples of it (0.75x and 1.25x), so a theme with a smaller base font gets proportionally smaller controls everywhere. Padding and the icon gap are in `em`, so the whole box grows with the label rather than a large button wearing a medium button's padding.
 
 `ButtonSize.Icon` is the exception: it inherits the surrounding text size and has no padding at all, because the caller sets the box.
 
+## Migration from `ButtonSize.Default`
+
+Before 0.45, `ButtonSize.Default` was a second name for `Medium`, which is now the default. Replace
+`size={ButtonSize.Default}` with `size={ButtonSize.Medium}`, or leave the prop out. The look does
+not change.
+
 ## Migration from `Primary`, `Default` and `Delete`
 
 Before 0.43, `styleType` set emphasis and colour in one value. `Primary`, `Default` and `Delete` no

package/docs/CLAUDE.md

@@ -128,7 +128,7 @@ enums and slot names. Do not infer props from a component's name.
 | Skeleton.md | Skeleton, SkeletonVariant, SkeletonAnimation | Content-shaped loading placeholder, shown while real content is being fetched — more polished than a Loader for content-heavy pages (lists, cards, profile headers) |
 | Slider.md | Slider | Let the user pick a number from a continuous or stepped range by dragging a thumb: volume, brightness, price ranges, zoom, quality presets |
 | SplitButton.md | SplitButton | A primary action button with a small attached dropdown for closely related secondary actions, e.g. "Save ▾" opening "Save as draft" / "Save and close" |
-| Stepper.md | Stepper | Step progress indicator for multi-step forms, onboarding flows, and checkout wizards |
+| Stepper.md | Stepper, StepperOrientation, StepperStyleType, StepperCollapse, StepperLabelPlacement, ThemeColor | Step progress indicator for multi-step forms, onboarding flows, and checkout wizards |
 | Sticky.md | Sticky | Pin a piece of content to the top of the viewport once the page scrolls past it — section headers, toolbars, filter bars, table headers |
 | Switch.md | Switch | Sliding boolean toggle — settings panels, feature flags, preference lists |
 | TabHeader.md | TabHeader | A horizontal row of tabs to switch between sibling views or sections — settings panels, dashboards, detail pages |

package/docs/ConfigProvider.md

@@ -95,7 +95,7 @@ A nested provider inherits it unless it sets its own, the same way `defaultProps
 Each entry is a `Partial<...Props>`, so any of that component's props can be defaulted:
 
 - **Form inputs:** `Input` · `Textarea` · `NumberInput` · `Dropdown` · `InputDropdown` · `Checkbox` · `Switch` · `RadioGroup` · `DatePicker` · `OptionPicker` · `OtpInput`
-- **Display:** `Button` · `CopyButton` · `ActionButtons` · `Badge` · `Chip` · `Card` · `SectionHeader` · `Skeleton` · `Loader` · `LoadingOverlay` · `Accordion` · `Divider` · `Timer` · `WeatherIcon`
+- **Display:** `Button` · `CopyButton` · `ActionButtons` · `Badge` · `Chip` · `Card` · `SectionHeader` · `Skeleton` · `Loader` · `LoadingOverlay` · `Accordion` · `Divider` · `Timer` · `WeatherIcon` · `Stepper`
 - **Overlays:** `ConfirmModal` · `Modal` · `CommandPalette` · `Popover`
 - **Editors:** `RoomDrawer`, `RoomViewer`
 - **Scheduling:** `Calendar`, for `labels`, `locale`, `weekStartsOn`, `slotMinutes`, `views`, `hiddenDays`, `scrollToHour`, `workingHours` and `showWeekNumbers` only (see below)

package/docs/SplitButton.md

@@ -70,7 +70,7 @@ import { ButtonStyleType } from '@ahrowe/ui';
 | `actions` | `SplitButtonAction[]` | Secondary actions shown in the dropdown |
 | `styleType` | `ButtonStyleType` | Shared by both the primary and trigger button (default `Filled`) |
 | `color` | `ColorValue` | Shared by both buttons (default `Primary`); or any CSS colour, as on Button |
-| `size` | `ButtonSize` | Size variant, shared by both buttons |
+| `size` | `ButtonSize` | Size variant, shared by both buttons (default `Medium`) |
 | `disabled` | `boolean` | Disables both the primary and trigger button |
 | `isLoading` | `boolean` | Shows a spinner on the primary button (same as `Button`'s own `isLoading`) |
 | `align` | `PopoverAlign` | Which edge of the group the menu lines up with (default `End`, the chevron's side). The menu is a [Menu](Menu.md), hence `Popover`'s enum |

package/docs/Stepper.md

@@ -4,17 +4,19 @@
 
 **Keywords:** wizard steps, progress steps
 
-**Import:** `import { Stepper } from '@ahrowe/ui'`
-**Types:** `import type { StepperStep, StepperProps } from '@ahrowe/ui'`
+**Import:** `import { Stepper, StepperOrientation, StepperStyleType, StepperCollapse, StepperLabelPlacement, ThemeColor } from '@ahrowe/ui'`
+**Types:** `import type { StepperStep, StepperProps, StepperLabels } from '@ahrowe/ui'`
 
 **Enums:**
-- `StepperAlignment`: `Horizontal` (default) | `Vertical`
-- `StepperStyleType`: `Default` (filled numbered markers) | `Outlined` (numbered markers that stay ringed when completed) | `Dots` (minimal dots, no numbers)
+- `StepperOrientation`: `Horizontal` (default) | `Vertical`
+- `StepperStyleType`: `Filled` (default: completed markers filled solid) | `Outlined` (completed markers stay ringed, with a check in the colour) | `Dots` (minimal dots, no numbers)
 - `StepperCollapse`: `None` (default) | `ActiveOnly` | `Completed`
 - `StepperLabelPlacement`: `Top` | `Bottom` | `Left` | `Right`
 
+**Colours:** any `color`: a `ThemeColor` (default `Primary`) or any CSS colour, see [ThemeColor.md](ThemeColor.md). It paints the current and completed markers and the connectors between them. Upcoming steps are drawn in the theme's `--border-color` and `--text-dark`, and a step with `error` in its `--error-color`.
+
 ```tsx
-import { Stepper, StepperAlignment, StepperStyleType, StepperCollapse } from '@ahrowe/ui';
+import { Stepper, StepperOrientation, StepperStyleType, StepperCollapse, ThemeColor } from '@ahrowe/ui';
 import { faUser, faCreditCard } from '@fortawesome/free-solid-svg-icons';
 
 const steps = [
@@ -26,15 +28,16 @@ const steps = [
 // Horizontal (default)
 <Stepper steps={steps} currentStep={1} />
 
-// Style presets
+// Style presets and colour
 <Stepper steps={steps} currentStep={1} styleType={StepperStyleType.Outlined} />
 <Stepper steps={steps} currentStep={1} styleType={StepperStyleType.Dots} hideLabels />
+<Stepper steps={steps} currentStep={1} color={ThemeColor.Success} />
 
 // Vertical, clickable
 <Stepper
   steps={steps}
   currentStep={currentStep}
-  alignment={StepperAlignment.Vertical}
+  orientation={StepperOrientation.Vertical}
   onStepClicked={(stepIndex) => setCurrentStep(stepIndex)}
 />
 
@@ -50,7 +53,7 @@ const steps = [
 
 // Vertical wizard with collapsible bodies (only the active step's body is open)
 <Stepper
-  alignment={StepperAlignment.Vertical}
+  orientation={StepperOrientation.Vertical}
   collapse={StepperCollapse.ActiveOnly}
   currentStep={step}
   onStepClicked={setStep}
@@ -70,8 +73,8 @@ const steps = [
 | `description` | `ReactNode` | Secondary line under the label |
 | `content` | `ReactNode` | Collapsible body under the label (vertical only) |
 | `icon` | `IconDefinition \| ReactElement` | Icon in the marker, replacing the number — FontAwesome icon or any React element |
-| `error` | `boolean` | Recolours the marker with `--stepper-error-color`; suppresses the checkmark |
-| `optional` | `boolean \| ReactNode` | `true` → an "Optional" hint; a node → custom hint text |
+| `error` | `boolean` | Draws the marker in `--error-color`, suppresses the checkmark, and tells screen readers |
+| `optional` | `boolean \| ReactNode` | `true` → the `optional` label as a hint; a node → custom hint text |
 | `disabled` | `boolean` | Never clickable, dimmed |
 
 **Key props:**
@@ -79,16 +82,23 @@ const steps = [
 | Prop | Type | Description |
 |------|------|-------------|
 | `steps` | `StepperStep[]` | The steps to render |
-| `currentStep` | `number` | Zero-based active step index |
-| `alignment` | `StepperAlignment \| 'horizontal' \| 'vertical'` | Layout direction (default `Horizontal`) |
-| `styleType` | `StepperStyleType` | Marker/connector preset (default `Default`) |
+| `currentStep` | `number` | Zero-based index of the current step. `steps.length` marks every step completed |
+| `orientation` | `StepperOrientation` | Direction the steps run in (default `Horizontal`) |
+| `styleType` | `StepperStyleType` | How the markers are drawn (default `Filled`) |
+| `color` | `ColorValue` | A `ThemeColor` (default `Primary`) or any CSS colour |
 | `collapse` | `StepperCollapse` | Which `content` bodies are expanded. Vertical only (default `None`) |
 | `labelPlacement` | `StepperLabelPlacement` | Label position; default `Bottom` (horizontal) / `Right` (vertical). An out-of-orientation value falls back to that default |
-| `onStepClicked` | `(stepIndex: number) => void` | Navigate on step click. Linear: only completed steps are clickable; with `nonLinear`, any enabled step except the current one |
+| `onStepClicked` | `(stepIndex: number) => void` | Navigate on step click. Linear: only completed steps are clickable; with `nonLinear`, any enabled step except the current one. A clickable step is a `<button>`, and so is the current one, `aria-disabled`, so focus stays on a step after activating it |
 | `nonLinear` | `boolean` | Allow clicking any step, not just completed ones |
-| `hideLabels` | `boolean` | Hide labels, descriptions, and (vertical) content |
+| `hideLabels` | `boolean` | Hide each step's label, description and hint visually. Screen readers still read them, and vertical `content` still shows |
+
+**Layout:** a horizontal stepper gives every step an equal share of its width, with the marker centred in it and the label wrapping within it, so a long label never reaches past the stepper or into its neighbour. The connectors run from marker to marker.
+
+**Collapse (vertical `content`):** `None` keeps every body open; `ActiveOnly` opens just the current step's body (classic vertical wizard); `Completed` collapses completed bodies while keeping the current and upcoming ones open. A collapsed body is `inert`, so nothing in it can be focused. Bodies animate their height and respect `prefers-reduced-motion`. Horizontal steppers don't render inline `content` and ignore `collapse`.
+
+**Accessibility:** the stepper is an ordered list, the current step carries `aria-current="step"`, and every other step's status is read out from the `completed`, `notCompleted` and `error` labels. The marker is hidden from screen readers: the list gives the position.
 
-**Collapse (vertical `content`):** `None` keeps every body open; `ActiveOnly` opens just the current step's body (classic vertical wizard); `Completed` collapses completed bodies while keeping the current and upcoming ones open. Bodies animate their height and respect `prefers-reduced-motion`. Horizontal steppers don't render inline `content` and ignore `collapse`.
+**Labels:** `optional` `completed` `notCompleted` `error` — the text this component renders of its own; the last three are for screen readers only. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; they merge per key. Type: `StepperLabels`.
 
 **Theming:** these are theme variables (typed on `ThemeVariables`). Set them theme-wide via `ThemeProvider`'s `variables`, or per instance via `style`, without fighting specificity. Each falls back to a built-in default when unset:
 
@@ -96,23 +106,16 @@ const steps = [
 |----------|---------------|
 | `--stepper-marker-size` | `40px` |
 | `--stepper-marker-radius` | `var(--default-border-radius)` |
-| `--stepper-idle-color` | `var(--primary-lighter)` |
-| `--stepper-active-color` | `var(--primary-color)` |
-| `--stepper-done-color` | `var(--primary-color)` |
-| `--stepper-error-color` | `var(--error-color)` |
-| `--stepper-connector-color` | `var(--primary-color)` |
 | `--stepper-connector-thickness` (completed connectors) | `3px` |
 | `--stepper-connector-idle-thickness` (not-yet-reached connectors) | `1px` |
 | `--stepper-gap` | `12px` |
-| `--stepper-text-on-marker` | `var(--text-on-primary)` |
 
 ```tsx
-// Theme-wide, via ThemeProvider: circular pink markers, thicker connectors
+// Theme-wide, via ThemeProvider: circular markers, thicker connectors
 const theme: Theme = {
   id: 'brand',
   variables: {
     '--stepper-marker-radius': '50%',
-    '--stepper-active-color': '#e91e63',
     '--stepper-connector-thickness': '4px',
   },
 };
@@ -121,12 +124,37 @@ const theme: Theme = {
 <Stepper
   steps={steps}
   currentStep={1}
-  style={{
-    '--stepper-marker-radius': '50%',
-    '--stepper-active-color': '#e91e63',
-    '--stepper-connector-thickness': '4px',
-  } as React.CSSProperties}
+  style={{ '--stepper-marker-radius': '50%' } as React.CSSProperties}
 />
 ```
 
 **Slots:** `root` `entry` `entryNumber` `entryLabel` `connector` `description` `content` `optional` `icon`
+
+## Migration from `alignment`, `StepperStyleType.Default` and the colour variables
+
+Before 0.45, a Stepper's direction was `alignment`, its default look `StepperStyleType.Default`, and
+its colours six theme variables. TypeScript points at the first two:
+
+| Before | After |
+|--------|-------|
+| `alignment={StepperAlignment.Vertical}` or `alignment='vertical'` | `orientation={StepperOrientation.Vertical}` |
+| `alignment={StepperAlignment.Horizontal}` | nothing: `Horizontal` is the default |
+| `styleType={StepperStyleType.Default}` | nothing: `Filled` is the default |
+
+**The colour variables compile unchanged and do nothing**, since a theme accepts any variable:
+
+| Theme set | Instead |
+|-----------|---------|
+| `--stepper-active-color`, `--stepper-done-color`, `--stepper-connector-color` | `color`, on the instance or app-wide with `defaultProps={{ Stepper: { color: 'var(--your-colour)' } }}` |
+| `--stepper-text-on-marker` | nothing: it is picked for contrast with `color` (`--text-on-primary` for `Primary`) |
+| `--stepper-error-color` | `--error-color` |
+| `--stepper-idle-color` | `--border-color` and `--text-dark` theme-wide, or `classNames.entryNumber` for the Stepper alone |
+
+Three more changes compile unchanged and need a look of their own:
+
+- **Horizontal steps take equal columns**, so the first and last markers no longer sit at the
+  stepper's edges. A `styles.connector` or `classNames.connector` that sized the connector (such as
+  `{ flex: 1, width: 'auto' }`) is no longer needed: the connector is positioned between the markers.
+- **`hideLabels` no longer hides vertical `content`**, and keeps the labels for screen readers.
+- **A clickable step is a `<button>`**, not a `div` with `role="button"`. CSS that selected
+  `[role="button"]` inside a Stepper should select `button`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "agent",