@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/navigation/SidebarNav.js

@@ -0,0 +1,341 @@
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { Placement } from "../theme/enums.js";
+import Text, { TextSize, TextTransform, TextVariant, TextWeight } from "../text/Text.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import Tooltip from "../tooltip/Tooltip.js";
+import Divider from "../layout/Divider.js";
+import ScrollArea from "../layout/ScrollArea.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import Rotate from "../transform/Rotate.js";
+import Chip, { ChipSize } from "../chips/Chip.js";
+import CollapseMotion from "../transform/internal/CollapseMotion.js";
+/* empty css                     */
+import { styled } from "@linaria/react";
+import { createContext, forwardRef, useContext, useId, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { ArrowUpRightIcon, CaretRightIcon } from "@phosphor-icons/react";
+//#region src/navigation/SidebarNav.tsx
+/**
+* The app's primary navigation column: a `<nav>` of `NavItem` destinations, optionally sorted into
+* labelled `NavGroup` sections that can fold, with a `header` row above (brand mark, workspace
+* switcher) and a `footer` pinned below (account, settings, the collapse toggle). Each `NavItem`
+* is a link (`href`, rendered through a router `as`) or a button, with an icon, a label, an
+* optional count `Chip` and an active state for the current page. `isCollapsed` turns the column
+* into an icon rail whose labels move into tooltips.
+*
+* SidebarNav fills the box its parent gives it (the app's frame sizes, resizes and collapses that box)
+* and never routes: the app passes `href` and derives `isActive` from the current route. Sibling
+* views inside a page are `Tabs`; a hierarchy of records is a `Tree`.
+*
+* SSR: nothing touches `window` or `document` at module scope; ids come from `useId`.
+*/
+var SidebarNavContext = createContext({
+	isCollapsed: false,
+	isInList: false
+});
+/** The default landmark name. */
+var DEFAULT_ARIA_LABEL = "Main";
+/** Item icon size: the `MEDIUM` rung's icon, one step below III-A.4 (Mitch, 2026-10-04). */
+var ITEM_ICON_PX = 14;
+/** The external-link arrow. */
+var SMALL_ICON_PX = 12;
+/** The section caret: 10px on the 24px group heading (the collapsible Widget's caret, small rung). */
+var CARET_PX = 10;
+var Root = /*#__PURE__*/ styled("nav")({
+	name: "Root",
+	class: "gx-SidebarNav-r1igp7em",
+	propsAsIs: false
+});
+/** The 48px top row: the Topbar height, so the two bottom hairlines meet in an app frame. */
+var Header = /*#__PURE__*/ styled("div")({
+	name: "Header",
+	class: "gx-SidebarNav-Header-h7sesvp",
+	propsAsIs: false
+});
+var List = /*#__PURE__*/ styled("ul")({
+	name: "List",
+	class: "gx-SidebarNav-List-lxg8t2f",
+	propsAsIs: false
+});
+var Footer = /*#__PURE__*/ styled("div")({
+	name: "Footer",
+	class: "gx-SidebarNav-Footer-f1bmww1o",
+	propsAsIs: false
+});
+/** A list item holding one `NavItem`. */
+var ItemLi = /*#__PURE__*/ styled("li")({
+	name: "ItemLi",
+	class: "gx-SidebarNav-ItemLi-iwiy54t",
+	propsAsIs: false
+});
+/** The shared item box: a link or a button on the `MEDIUM` rung (a plain string, like the mixins). */
+var ItemLink = /*#__PURE__*/ styled("a")({
+	name: "ItemLink",
+	class: "gx-SidebarNav-ItemLink-i1otz5la",
+	propsAsIs: false
+});
+var ItemButton = /*#__PURE__*/ styled("button")({
+	name: "ItemButton",
+	class: "gx-SidebarNav-ItemButton-ijewkq1",
+	propsAsIs: false
+});
+var LetterBox = /*#__PURE__*/ styled("span")({
+	name: "LetterBox",
+	class: "gx-SidebarNav-LetterBox-l12h7i8o",
+	propsAsIs: false
+});
+var Trailing = /*#__PURE__*/ styled("span")({
+	name: "Trailing",
+	class: "gx-SidebarNav-Trailing-t156g88p",
+	propsAsIs: false
+});
+/** A section: its heading (or the rail divider) and its own list. */
+var GroupRoot = /*#__PURE__*/ styled("li")({
+	name: "GroupRoot",
+	class: "gx-SidebarNav-GroupRoot-g1ka7is",
+	propsAsIs: false
+});
+var GroupList = /*#__PURE__*/ styled("ul")({
+	name: "GroupList",
+	class: "gx-SidebarNav-GroupList-gls5awu",
+	propsAsIs: false
+});
+var GroupLabel = /*#__PURE__*/ styled("div")({
+	name: "GroupLabel",
+	class: "gx-SidebarNav-GroupLabel-g4ix9y9",
+	propsAsIs: false
+});
+var GroupToggle = /*#__PURE__*/ styled("button")({
+	name: "GroupToggle",
+	class: "gx-SidebarNav-GroupToggle-gqfe40h",
+	propsAsIs: false
+});
+/** The rail's stand-in for a section heading; the first section has none. */
+var GroupDivider = /*#__PURE__*/ styled("div")({
+	name: "GroupDivider",
+	class: "gx-SidebarNav-GroupDivider-g9ff0oz",
+	propsAsIs: false
+});
+/** Rail mode: the header content and the footer content center in the 48px column. */
+var ROOT_COLLAPSED_CSS = "gx-SidebarNav-ROOT_COLLAPSED_CSS-r6f6h0i";
+/** The scrolling list takes the height between header and footer. */
+var LIST_SCROLL_CSS = "gx-SidebarNav-LIST_SCROLL_CSS-lyqt4ix";
+var ITEM_LI_COLLAPSED_CSS = "gx-SidebarNav-ITEM_LI_COLLAPSED_CSS-iieaizt";
+/** Hover and press on an enabled item that is not the current page. */
+var ITEM_INTERACTIVE_CSS = "gx-SidebarNav-ITEM_INTERACTIVE_CSS-io6ca5i";
+/** The current page: the selection fill (`background.selected`) and primary text (hover keeps it). */
+var ITEM_ACTIVE_CSS = "gx-SidebarNav-ITEM_ACTIVE_CSS-iuopbgu";
+var ITEM_DISABLED_CSS = "gx-SidebarNav-ITEM_DISABLED_CSS-i6m4lrh";
+/** Rail mode: a 32px square (the 8px list padding makes the rail 48px). */
+var ITEM_COLLAPSED_CSS = "gx-SidebarNav-ITEM_COLLAPSED_CSS-i1qgyulv";
+var LABEL_CSS = "gx-SidebarNav-LABEL_CSS-l189383r";
+var VISUALLY_HIDDEN_CSS = "gx-SidebarNav-VISUALLY_HIDDEN_CSS-v1ietnnw";
+/** The primary navigation column: header, scrolling list of items and sections, footer. */
+var SidebarNav = forwardRef(function SidebarNav({ children, header, footer, isCollapsed = false, ariaLabel, id, className, style, ...rest }, ref) {
+	const name = ariaLabel || rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : DEFAULT_ARIA_LABEL);
+	const listContext = useMemo(() => ({
+		isCollapsed,
+		isInList: true
+	}), [isCollapsed]);
+	const footerContext = useMemo(() => ({
+		isCollapsed,
+		isInList: false
+	}), [isCollapsed]);
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		id,
+		"aria-label": name,
+		className: cx(isCollapsed && ROOT_COLLAPSED_CSS, className),
+		style,
+		children: [
+			header !== void 0 && header !== null && header !== false && /* @__PURE__ */ jsx(Header, { children: header }),
+			/* @__PURE__ */ jsx(ScrollArea, {
+				className: LIST_SCROLL_CSS,
+				children: /* @__PURE__ */ jsx(SidebarNavContext.Provider, {
+					value: listContext,
+					children: /* @__PURE__ */ jsx(List, {
+						role: "list",
+						children
+					})
+				})
+			}),
+			footer !== void 0 && footer !== null && footer !== false && /* @__PURE__ */ jsx(SidebarNavContext.Provider, {
+				value: footerContext,
+				children: /* @__PURE__ */ jsx(Footer, { children: footer })
+			})
+		]
+	});
+});
+SidebarNav.displayName = "SidebarNav";
+/** One destination: a link (`href`) or a button, with an icon, a label, a count and an active state. */
+var NavItem = forwardRef(function NavItem({ label, icon, href, as, isExternal = false, onClick, isActive = false, isDisabled = false, count, trailing, tooltip, id, className, style, ...rest }, ref) {
+	const { isCollapsed, isInList } = useContext(SidebarNavContext);
+	const isLink = href !== void 0;
+	const hasCount = count !== void 0 && count > 0;
+	const hasTooltip = tooltip !== void 0 && tooltip !== null && tooltip !== "";
+	const defaultBody = isCollapsed && !hasTooltip ? `${label}${hasCount ? ` · ${Math.floor(count)}` : ""}` : "";
+	const isDefaultBody = defaultBody !== "";
+	const tooltipBody = hasTooltip ? tooltip : defaultBody;
+	const handleClick = (event) => {
+		if (isDisabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	};
+	const computedAria = {};
+	if (isActive) computedAria["aria-current"] = "page";
+	if (isDisabled) computedAria["aria-disabled"] = true;
+	const controlled = {
+		id,
+		onClick: handleClick,
+		style,
+		className: cx(!isActive && !isDisabled && ITEM_INTERACTIVE_CSS, isActive && ITEM_ACTIVE_CSS, isDisabled && ITEM_DISABLED_CSS, isCollapsed && ITEM_COLLAPSED_CSS, className)
+	};
+	if (isLink) if (isDisabled) {
+		controlled.role = "link";
+		controlled.tabIndex = 0;
+	} else {
+		if (as !== void 0) controlled.as = as;
+		controlled.href = href;
+		if (isExternal) {
+			controlled.target = "_blank";
+			controlled.rel = "noopener noreferrer";
+		}
+	}
+	else controlled.type = "button";
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		icon !== void 0 ? /* @__PURE__ */ jsx(Icon, {
+			component: icon,
+			size: ITEM_ICON_PX,
+			variant: isActive && !isDisabled ? IconVariant.PRIMARY : IconVariant.INHERIT
+		}) : isCollapsed && /* @__PURE__ */ jsx(LetterBox, {
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: TextSize.CAPTION,
+				weight: TextWeight.MEDIUM,
+				variant: TextVariant.INHERIT,
+				children: label.charAt(0)
+			})
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: TextSize.BODY_MD,
+			weight: isActive ? TextWeight.MEDIUM : TextWeight.REGULAR,
+			variant: TextVariant.INHERIT,
+			lineClamp: 1,
+			shouldTooltipOnOverflow: !hasTooltip && !isCollapsed,
+			className: cx(LABEL_CSS, isCollapsed && VISUALLY_HIDDEN_CSS),
+			children: label
+		}),
+		hasCount && (isCollapsed ? /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Chip, {
+			count,
+			size: ChipSize.SMALL
+		}) }) : /* @__PURE__ */ jsx(Chip, {
+			count,
+			size: ChipSize.SMALL
+		})),
+		!isCollapsed && trailing !== void 0 && trailing !== null && /* @__PURE__ */ jsx(Trailing, { children: trailing }),
+		isLink && isExternal && !isCollapsed && /* @__PURE__ */ jsx(Icon, {
+			component: ArrowUpRightIcon,
+			size: SMALL_ICON_PX,
+			variant: IconVariant.TERTIARY
+		}),
+		isLink && isExternal && /* @__PURE__ */ jsx(VisuallyHidden, { children: " (opens in a new tab)" })
+	] });
+	const control = isLink ? /* @__PURE__ */ jsx(ItemLink, {
+		...computedAria,
+		...rest,
+		...controlled,
+		ref,
+		children: content
+	}) : /* @__PURE__ */ jsx(ItemButton, {
+		...computedAria,
+		...rest,
+		...controlled,
+		ref,
+		children: content
+	});
+	const item = /* @__PURE__ */ jsx(Tooltip, {
+		body: tooltipBody,
+		placement: Placement.RIGHT,
+		isDisabled: tooltipBody === "",
+		...isDefaultBody ? { "aria-hidden": true } : {},
+		children: control
+	});
+	if (!isInList) return item;
+	return /* @__PURE__ */ jsx(ItemLi, {
+		className: cx(isCollapsed && ITEM_LI_COLLAPSED_CSS),
+		children: item
+	});
+});
+NavItem.displayName = "NavItem";
+/** A labelled section of items; with `isCollapsible` its heading folds it. */
+var NavGroup = forwardRef(function NavGroup({ label, children, isCollapsible = false, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, id, className, style, ...rest }, ref) {
+	const { isCollapsed } = useContext(SidebarNavContext);
+	const baseId = useId();
+	const labelId = `${baseId}-label`;
+	const listId = `${baseId}-list`;
+	const { isOpen: openState, setOpen } = useControlledOpenState({
+		isOpen: isOpenProp,
+		defaultIsOpen,
+		onOpenChange
+	});
+	const isOpen = isCollapsed || !isCollapsible || openState;
+	const listContext = useMemo(() => ({
+		isCollapsed,
+		isInList: true
+	}), [isCollapsed]);
+	const labelText = /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		id: labelId,
+		size: TextSize.CAPTION,
+		weight: TextWeight.MEDIUM,
+		variant: TextVariant.TERTIARY,
+		transform: TextTransform.UPPERCASE,
+		lineClamp: 1,
+		className: cx(isCollapsed && VISUALLY_HIDDEN_CSS),
+		children: label
+	});
+	const heading = isCollapsed ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(GroupDivider, { children: /* @__PURE__ */ jsx(Divider, {}) }), labelText] }) : isCollapsible ? /* @__PURE__ */ jsxs(GroupToggle, {
+		type: "button",
+		"aria-expanded": isOpen,
+		"aria-controls": isOpen ? listId : void 0,
+		onClick: () => setOpen(!openState),
+		children: [labelText, /* @__PURE__ */ jsx(Rotate, {
+			isRotated: isOpen,
+			deg: 90,
+			children: /* @__PURE__ */ jsx(Icon, {
+				component: CaretRightIcon,
+				size: CARET_PX,
+				variant: IconVariant.TERTIARY
+			})
+		})]
+	}) : /* @__PURE__ */ jsx(GroupLabel, { children: labelText });
+	const list = /* @__PURE__ */ jsx(SidebarNavContext.Provider, {
+		value: listContext,
+		children: /* @__PURE__ */ jsx(GroupList, {
+			role: "list",
+			id: listId,
+			"aria-labelledby": labelId,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsxs(GroupRoot, {
+		...rest,
+		ref,
+		id,
+		className,
+		style,
+		children: [heading, isCollapsible ? /* @__PURE__ */ jsx(CollapseMotion, {
+			isOpen,
+			children: list
+		}) : list]
+	});
+});
+NavGroup.displayName = "NavGroup";
+//#endregion
+export { NavGroup, NavItem, SidebarNav as default };

package/dist/navigation/Stepper.d.ts

@@ -0,0 +1,52 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+import { Orientation } from "../theme/enums.js";
+/** Canonical rungs, subset: the step row height. */
+export declare enum StepperSize {
+    /** 24px step rows, 16px markers, body_sm labels. */
+    SMALL = "SMALL",
+    /** 32px step rows, 20px markers, body_md labels. The default. */
+    MEDIUM = "MEDIUM"
+}
+/** One step of a Stepper. */
+export interface StepperStep {
+    /** Step name, one short line ("Source", "Schema", "Schedule"). */
+    label: string;
+    /** Second line under the label: a summary of a done step or a hint for an upcoming one. */
+    description?: string;
+    /** The step failed (validation, a connection test). Shows the error marker whatever its position. */
+    isError?: boolean;
+}
+export interface StepperProps extends AriaAttributes {
+    /** The steps, in order. Two to seven is the useful range. */
+    steps: StepperStep[];
+    /** Zero-based index of the current step. Steps before it are done; `steps.length` marks every step done. */
+    value: number;
+    /** When set, done steps become buttons, and pressing one calls this with its index (to go back). Current and upcoming steps are never pressable. */
+    onChange?: (value: number) => void;
+    /**
+     * `HORIZONTAL`: one row, connectors stretch between steps. `VERTICAL`: one column, connectors run down between markers, descriptions sit under labels.
+     * @default Orientation.HORIZONTAL
+     */
+    orientation?: Orientation;
+    /**
+     * `SMALL` for dense surfaces (a modal header, a side panel); `MEDIUM` for a page.
+     * @default StepperSize.MEDIUM
+     */
+    size?: StepperSize;
+    /**
+     * Accessible name of the step list. An explicit `aria-label` or `aria-labelledby` wins over it.
+     * @default "Progress"
+     */
+    ariaLabel?: string;
+    /** DOM id on the root `<ol>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<ol>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<ol>`. */
+    className?: string;
+    /** Inline style on the root `<ol>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** An ordered list of steps with done / current / upcoming / error markers. */
+declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLOListElement>>;
+export default Stepper;

package/dist/navigation/Stepper.js

@@ -0,0 +1,207 @@
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { Orientation } from "../theme/enums.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+/* empty css                  */
+import { styled } from "@linaria/react";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { match } from "ts-pattern";
+import { CheckIcon, ExclamationMarkIcon } from "@phosphor-icons/react";
+//#region src/navigation/Stepper.tsx
+/**
+* Progress through a known, ordered sequence of steps: a setup wizard, a connector onboarding, a
+* multi-page form. Each step is a numbered marker with a label (and an optional description),
+* joined by hairline connectors, in one of four states derived from `value` and the step's
+* `isError`: done (before `value`, a check), current (a `solid.primary` marker), upcoming (a hairline
+* marker) and error (an error marker, whatever its position).
+*
+* The app owns the wizard: Stepper never advances itself. With `onChange`, done steps become
+* buttons that go back. Not `Tabs` (free movement between peer views), not `Breadcrumbs`, not a
+* `ProgressBar`.
+*/
+/** Canonical rungs, subset: the step row height. */
+var StepperSize = /* @__PURE__ */ function(StepperSize) {
+	/** 24px step rows, 16px markers, body_sm labels. */
+	StepperSize["SMALL"] = "SMALL";
+	/** 32px step rows, 20px markers, body_md labels. The default. */
+	StepperSize["MEDIUM"] = "MEDIUM";
+	return StepperSize;
+}({});
+var Root = /*#__PURE__*/ styled("ol")({
+	name: "Root",
+	class: "gx-Stepper-r12f0za8",
+	propsAsIs: false
+});
+var Item = /*#__PURE__*/ styled("li")({
+	name: "Item",
+	class: "gx-Stepper-Item-i19a96w9",
+	propsAsIs: false
+});
+var StepBody = /*#__PURE__*/ styled("div")({
+	name: "StepBody",
+	class: "gx-Stepper-StepBody-s1ykcpbe",
+	propsAsIs: false
+});
+var Marker = /*#__PURE__*/ styled("span")({
+	name: "Marker",
+	class: "gx-Stepper-Marker-m1o1000g",
+	propsAsIs: false
+});
+/** The label's first line sits on the marker's center line on whole pixels. */
+var Labels = /*#__PURE__*/ styled("span")({
+	name: "Labels",
+	class: "gx-Stepper-Labels-l1mc7icv",
+	propsAsIs: false
+});
+/** A hairline drawn as a box, not a border on the step. */
+var Connector = /*#__PURE__*/ styled("span")({
+	name: "Connector",
+	class: "gx-Stepper-Connector-c1dui4jh",
+	propsAsIs: false
+});
+/** Horizontally, the root gap spaces each connector from the next marker as the item gap does from its own body. */
+var STEPPER_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-Stepper-Orientation_HORIZONTAL-o16d5g79",
+	[Orientation.VERTICAL]: "gx-Stepper-Orientation_VERTICAL-o1049ro5"
+};
+/** Horizontal items share the row (the last hugs its label); vertical items stack 12px apart. */
+var STEPPER_ORIENTATION_TO_ITEM_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-Stepper-Orientation_HORIZONTAL-oql4yxv",
+	[Orientation.VERTICAL]: "gx-Stepper-Orientation_VERTICAL-o1w24kam"
+};
+/** On the markers' center line horizontally; from this marker to the next one vertically. */
+var STEPPER_ORIENTATION_TO_CONNECTOR_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-Stepper-Orientation_HORIZONTAL-o18ilulu",
+	[Orientation.VERTICAL]: "gx-Stepper-Orientation_VERTICAL-o10rn855"
+};
+/** Marker box, the body gap and the label inset per size. */
+var STEPPER_SIZE_TO_CSS_MAP = {
+	["SMALL"]: "gx-Stepper-SMALL-s1yz4n12",
+	["MEDIUM"]: "gx-Stepper-MEDIUM-m183g7q0"
+};
+/** Composed after the static rules, so the reset does not undo the layout. */
+var PRESSABLE_CSS = "gx-Stepper-PRESSABLE_CSS-p1efnnpp";
+var STEP_STATE_TO_MARKER_CSS_MAP = {
+	["DONE"]: "gx-Stepper-DONE-d1qppj3j",
+	["CURRENT"]: "gx-Stepper-CURRENT-c1tzddsu",
+	["UPCOMING"]: "gx-Stepper-UPCOMING-u161l825",
+	["ERROR"]: "gx-Stepper-ERROR-e12l09wj"
+};
+var STEPPER_SIZE_TO_TEXT_SIZE_MAP = {
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD
+};
+var STEPPER_SIZE_TO_DESCRIPTION_SIZE_MAP = {
+	["SMALL"]: TextSize.CAPTION,
+	["MEDIUM"]: TextSize.BODY_SM
+};
+var STEPPER_SIZE_TO_ICON_PX_MAP = {
+	["SMALL"]: 10,
+	["MEDIUM"]: 12
+};
+var STEP_STATE_TO_LABEL_VARIANT_MAP = {
+	["DONE"]: TextVariant.SECONDARY,
+	["CURRENT"]: TextVariant.PRIMARY,
+	["UPCOMING"]: TextVariant.TERTIARY
+};
+/** The state in words, so it is not conveyed by color or glyph alone (WCAG 1.4.1). */
+var STEP_STATE_TO_A11Y_TEXT_MAP = {
+	["DONE"]: "Completed",
+	["CURRENT"]: "Current step",
+	["UPCOMING"]: "Not started",
+	["ERROR"]: "Error"
+};
+/** Done, current or upcoming, from the step's index and the clamped `value`. */
+function positionOf(index, value) {
+	if (index < value) return "DONE";
+	if (index === value) return "CURRENT";
+	return "UPCOMING";
+}
+/** The marker's content: a check, an exclamation mark, or the step number. */
+function markerContent(state, index, size) {
+	return match(state).with("DONE", () => /* @__PURE__ */ jsx(Icon, {
+		component: CheckIcon,
+		size: STEPPER_SIZE_TO_ICON_PX_MAP[size],
+		variant: IconVariant.PRIMARY
+	})).with("ERROR", () => /* @__PURE__ */ jsx(Icon, {
+		component: ExclamationMarkIcon,
+		size: STEPPER_SIZE_TO_ICON_PX_MAP[size],
+		variant: IconVariant.ERROR
+	})).with("CURRENT", "UPCOMING", () => /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: TextSize.CAPTION,
+		weight: TextWeight.MEDIUM,
+		variant: TextVariant.INHERIT,
+		isTabular: true,
+		children: index + 1
+	})).exhaustive();
+}
+/** An ordered list of steps with done / current / upcoming / error markers. */
+var Stepper = forwardRef(function Stepper({ steps, value, onChange, orientation = Orientation.HORIZONTAL, size = "MEDIUM", ariaLabel = "Progress", className, ...rest }, ref) {
+	const current = Math.min(steps.length, Math.max(0, Number.isNaN(value) ? 0 : Math.floor(value)));
+	const hasExplicitName = rest["aria-label"] !== void 0 || rest["aria-labelledby"] !== void 0;
+	const baseId = useId();
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		"aria-label": hasExplicitName ? rest["aria-label"] : ariaLabel,
+		className: cx(STEPPER_ORIENTATION_TO_CSS_MAP[orientation], STEPPER_SIZE_TO_CSS_MAP[size], className),
+		children: steps.map((step, index) => {
+			const position = positionOf(index, current);
+			const state = step.isError === true ? "ERROR" : position;
+			const isPressable = onChange !== void 0 && position === "DONE";
+			const labelId = `${baseId}-${String(index)}-label`;
+			const stateId = `${baseId}-${String(index)}-state`;
+			const descriptionId = `${baseId}-${String(index)}-description`;
+			const hasDescription = step.description !== void 0 && step.description !== "";
+			return /* @__PURE__ */ jsxs(Item, {
+				"aria-current": position === "CURRENT" ? "step" : void 0,
+				className: STEPPER_ORIENTATION_TO_ITEM_CSS_MAP[orientation],
+				children: [/* @__PURE__ */ jsxs(StepBody, {
+					as: isPressable ? "button" : "div",
+					...isPressable ? {
+						type: "button",
+						onClick: () => onChange(index),
+						"aria-labelledby": `${labelId} ${stateId}`,
+						...hasDescription ? { "aria-describedby": descriptionId } : {}
+					} : {},
+					className: cx(isPressable && PRESSABLE_CSS),
+					children: [/* @__PURE__ */ jsx(Marker, {
+						className: STEP_STATE_TO_MARKER_CSS_MAP[state],
+						"aria-hidden": true,
+						children: markerContent(state, index, size)
+					}), /* @__PURE__ */ jsxs(Labels, { children: [
+						/* @__PURE__ */ jsx(Text, {
+							as: "span",
+							id: labelId,
+							size: STEPPER_SIZE_TO_TEXT_SIZE_MAP[size],
+							weight: position === "CURRENT" ? TextWeight.MEDIUM : TextWeight.REGULAR,
+							variant: isPressable ? TextVariant.INHERIT : STEP_STATE_TO_LABEL_VARIANT_MAP[position],
+							lineClamp: 1,
+							children: step.label
+						}),
+						hasDescription && /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							id: descriptionId,
+							size: STEPPER_SIZE_TO_DESCRIPTION_SIZE_MAP[size],
+							variant: TextVariant.TERTIARY,
+							children: step.description
+						}),
+						/* @__PURE__ */ jsx(VisuallyHidden, {
+							id: stateId,
+							children: STEP_STATE_TO_A11Y_TEXT_MAP[state]
+						})
+					] })]
+				}), index < steps.length - 1 && /* @__PURE__ */ jsx(Connector, {
+					"aria-hidden": true,
+					className: STEPPER_ORIENTATION_TO_CONNECTOR_CSS_MAP[orientation]
+				})]
+			}, `step-${String(index)}`);
+		})
+	});
+});
+Stepper.displayName = "Stepper";
+//#endregion
+export { StepperSize, Stepper as default };