@xeonr/platform-ui 1.3.1 → 1.4.0

package/dist/kit/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/kit/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0CrF,eAAO,MAAM,WAAW;;WAgBvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;aAAyB,OAAO,GAAG,SAAS;YAMnE,CAAC;AAEF,eAAO,MAAM,WAAW;;WAKvB,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,YAAY;;WAIxB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,uEAAuE;IACvE,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAW,EAAE,IAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY,+BA0C1G"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/kit/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0CrF,eAAO,MAAM,WAAW;;WAgBvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;aAAyB,OAAO,GAAG,SAAS;YAMnE,CAAC;AAEF,eAAO,MAAM,WAAW;;WAKvB,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,YAAY;;WAIxB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,uEAAuE;IACvE,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAW,EAAE,IAAW,EAAE,KAAK,EAAE,IAAe,EAAE,KAAe,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAiE5I"}

package/dist/kit/Popover.js

@@ -73,7 +73,7 @@ export const PopoverGroup = styled.div `
   border-bottom: 1px solid ${v.line};
   &:last-child { border-bottom: none; }
 `;
-export function Popover({ anchor, onClose, label, width = 268, flip = true, sheet, children }) {
+export function Popover({ anchor, onClose, label, width = 268, flip = true, sheet, side = "bottom", align = "start", children }) {
     const ref = useRef(null);
     const [pos, setPos] = useState({ top: anchor.bottom + 4, left: anchor.left });
     // Escape closes this before any drawer or modal it sits in (CON-59)
@@ -86,16 +86,38 @@ export function Popover({ anchor, onClose, label, width = 268, flip = true, shee
         const box = ref.current?.getBoundingClientRect();
         if (!box)
             return;
-        const left = Math.max(8, Math.min(anchor.left, window.innerWidth - box.width - 8));
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const E = 8;
+        const clampX = (x) => Math.max(E, Math.min(x, vw - box.width - E));
+        const clampY = (y) => Math.max(E, Math.min(y, vh - box.height - E));
+        if (side === "right" || side === "left") {
+            const right = anchor.right + 4;
+            const left = anchor.left - box.width - 4;
+            const fitsRight = right + box.width <= vw - E;
+            const fitsLeft = left >= E;
+            const x = side === "right" ? (fitsRight || !flip || !fitsLeft ? right : left) : (fitsLeft || !flip || !fitsRight ? left : right);
+            const y = align === "end" ? anchor.bottom - box.height : align === "center" ? anchor.top + anchor.height / 2 - box.height / 2 : anchor.top;
+            setPos({ top: clampY(y), left: clampX(x) });
+            return;
+        }
+        // Kept on screen: anchored near the right edge it would otherwise hang off
+        // it, and near the bottom it would be cut in half.
+        const x = align === "end" ? anchor.right - box.width : align === "center" ? anchor.left + anchor.width / 2 - box.width / 2 : anchor.left;
+        const left = clampX(x);
         const below = anchor.bottom + 4;
-        const overflows = below + box.height > window.innerHeight - 8;
-        const top = overflows
-            ? flip
-                ? Math.max(8, anchor.top - box.height - 4)
-                : Math.max(8, window.innerHeight - box.height - 8)
-            : below;
+        const above = anchor.top - box.height - 4;
+        const fitsBelow = below + box.height <= vh - E;
+        const fitsAbove = above >= E;
+        let top;
+        if (side === "top") {
+            top = fitsAbove ? above : flip && fitsBelow ? below : flip ? Math.max(E, above) : clampY(above);
+        }
+        else {
+            top = fitsBelow ? below : flip ? Math.max(E, above) : clampY(below);
+        }
         setPos({ top, left });
-    }, [anchor, flip]);
+    }, [anchor, flip, side, align]);
     useEffect(() => {
         const onDown = (e) => {
             if (!ref.current?.contains(e.target))

package/dist/kit/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/kit/Popover.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/kit/Popover.tsx"],"names":[],"mappings":"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"}

package/dist/kit/Skeleton.d.ts

@@ -1,18 +1,59 @@
+import type { CSSProperties, ReactNode } from "react";
 /** Skeleton: sits at the exact final geometry and breathes; no spinners for known shapes. */
 export declare const Skeleton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+    style?: CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
     $w?: string | undefined;
     $h?: string | undefined;
     $r?: string | undefined;
 }>> & string;
 export declare const SkeletonRow: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+    style?: CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
 /** Spinner: an indeterminate wait of unknown length. */
 export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
-    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+    style?: CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
     $size?: number | undefined;
 }>> & string;
+/** what a busy region's veil is: the scrim (content shows through, blurred), the surface (lighter), or the page canvas (opaque — a frame that is not ready to show anything) */
+export type BusyVeil = "scrim" | "surface" | "canvas";
+/**
+ * BusyOverlay: the veil alone, covering its nearest positioned ancestor —
+ * for a host that is already `position: relative` (a preview frame, a card).
+ * Otherwise wrap the region in BusyRegion.
+ */
+export declare function BusyOverlay({ label, veil, radius, inset, spinner }: {
+    /** what it is waiting for ("Waiting for authentication"); shown, and the accessible name */
+    label?: ReactNode | undefined;
+    veil?: BusyVeil | undefined;
+    /** corner radius of the veil — a CSS length, or px (default: the host's) */
+    radius?: string | number | undefined;
+    /**
+     * px between the veil and the host's edges (default 0). Negative overhangs
+     * the host — a veil that should also cover a card's padding or border.
+     */
+    inset?: number | undefined;
+    /** show the spinner (default true) */
+    spinner?: boolean | undefined;
+}): import("react").JSX.Element;
+/**
+ * BusyRegion: a region that keeps its content in place while it waits — a
+ * form waiting on a token, a list reloading under a filter — under a veil
+ * with a Spinner and a label. The content is inert while busy (no clicks, no
+ * focus) and the region says `aria-busy`. Not for a first load of known shape:
+ * that is a Skeleton.
+ */
+export declare function BusyRegion({ busy, label, veil, radius, inset, children, style, className }: {
+    busy: boolean;
+    label?: ReactNode | undefined;
+    veil?: BusyVeil | undefined;
+    /** the veil's corner radius (see BusyOverlay; default: the region's) */
+    radius?: string | number | undefined;
+    /** px between the veil and the region's edges; negative overhangs it (see BusyOverlay) */
+    inset?: number | undefined;
+    children: ReactNode;
+    style?: CSSProperties | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element;
 //# sourceMappingURL=Skeleton.d.ts.map

package/dist/kit/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/kit/Skeleton.tsx"],"names":[],"mappings":"AAKA,6FAA6F;AAC7F,eAAO,MAAM,QAAQ;;;SAAsB,MAAM,GAAG,SAAS;SAAO,MAAM,GAAG,SAAS;SAAO,MAAM,GAAG,SAAS;YAO9G,CAAC;AAEF,eAAO,MAAM,WAAW;;WAOvB,CAAC;AAOF,wDAAwD;AACxD,eAAO,MAAM,OAAO;;;YAAyB,MAAM,GAAG,SAAS;YAS9D,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/kit/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,6FAA6F;AAC7F,eAAO,MAAM,QAAQ;;;SAAsB,MAAM,GAAG,SAAS;SAAO,MAAM,GAAG,SAAS;SAAO,MAAM,GAAG,SAAS;YAO9G,CAAC;AAEF,eAAO,MAAM,WAAW;;WAOvB,CAAC;AAOF,wDAAwD;AACxD,eAAO,MAAM,OAAO;;;YAAyB,MAAM,GAAG,SAAS;YAS9D,CAAC;AAOF,gLAAgL;AAChL,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAuBtD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAc,EAAE,MAAM,EAAE,KAAS,EAAE,OAAc,EAAE,EAAE;IACxF,4FAA4F;IAC5F,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B,+BAOA;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAgB,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IACvG,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,+BAOA"}

package/dist/kit/Skeleton.js

@@ -1,4 +1,5 @@
-import styled, { keyframes } from "styled-components";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css, keyframes } from "styled-components";
 import { v } from "../theme/tokens.js";
 const shimmer = keyframes `50% { opacity: 0.45; }`;
 /** Skeleton: sits at the exact final geometry and breathes; no spinners for known shapes. */
@@ -33,4 +34,41 @@ export const Spinner = styled.span `
   border-radius: 50%;
   animation: ${spin} 0.8s linear infinite;
 `;
+const fade = keyframes `from { opacity: 0; }`;
+const Veil = styled.div `
+  position: absolute;
+  inset: ${(p) => p.$inset}px;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border-radius: ${(p) => p.$radius ?? "inherit"};
+  color: ${v.muted};
+  font-size: 12px;
+  text-align: center;
+  animation: ${fade} 0.18s ease;
+  ${(p) => p.$veil === "scrim" && css `background: ${v.scrim}; backdrop-filter: blur(2px); color: ${v.text};`}
+  ${(p) => p.$veil === "surface" && css `background: color-mix(in srgb, ${v.surface} 72%, transparent); backdrop-filter: blur(1px);`}
+  ${(p) => p.$veil === "canvas" && css `background: ${v.canvas};`}
+`;
+/**
+ * BusyOverlay: the veil alone, covering its nearest positioned ancestor —
+ * for a host that is already `position: relative` (a preview frame, a card).
+ * Otherwise wrap the region in BusyRegion.
+ */
+export function BusyOverlay({ label, veil = "scrim", radius, inset = 0, spinner = true }) {
+    return (_jsxs(Veil, { "$veil": veil, "$radius": typeof radius === "number" ? `${radius}px` : radius, "$inset": inset, role: "status", "aria-live": "polite", children: [spinner ? _jsx(Spinner, { "aria-hidden": true }) : null, label ? _jsx("span", { children: label }) : _jsx("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Loading" })] }));
+}
+/**
+ * BusyRegion: a region that keeps its content in place while it waits — a
+ * form waiting on a token, a list reloading under a filter — under a veil
+ * with a Spinner and a label. The content is inert while busy (no clicks, no
+ * focus) and the region says `aria-busy`. Not for a first load of known shape:
+ * that is a Skeleton.
+ */
+export function BusyRegion({ busy, label, veil = "surface", radius, inset, children, style, className }) {
+    return (_jsxs("div", { style: { position: "relative", minWidth: 0, ...style }, className: className, "aria-busy": busy || undefined, children: [_jsx("div", { inert: busy || undefined, style: { display: "contents" }, children: children }), busy ? _jsx(BusyOverlay, { label: label, veil: veil, radius: radius, inset: inset }) : null] }));
+}
 //# sourceMappingURL=Skeleton.js.map

package/dist/kit/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/kit/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AAEvC,MAAM,OAAO,GAAG,SAAS,CAAA,wBAAwB,CAAC;AAElD,6FAA6F;AAC7F,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAA+E;;WAEvG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,MAAM;YACpB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,MAAM;mBACd,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK;gBACvB,CAAC,CAAC,KAAK;eACR,OAAO;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;6BAKR,CAAC,CAAC,IAAI;;CAElC,CAAC;AAEF,6EAA6E;AAC7E,+EAA+E;AAC/E,iEAAiE;AACjE,MAAM,IAAI,GAAG,SAAS,CAAA,mCAAmC,CAAC;AAE1D,wDAAwD;AACxD,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAgC;;;WAGvD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;YACnB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;sBACV,CAAC,CAAC,KAAK;sBACP,CAAC,CAAC,KAAK;;eAEd,IAAI;CAClB,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/kit/Skeleton.tsx"],"names":[],"mappings":"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"}

package/dist/kit/Stepper.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+export type StepState = "done" | "current" | "pending" | "error";
+export interface StepperStep {
+    id: string;
+    title: ReactNode;
+    /** a line under the title — what the step asks for */
+    description?: ReactNode | undefined;
+    /** override the state the position implies — `error` for a step whose fields are refused */
+    state?: StepState | undefined;
+    /** cannot be clicked to, even with `onStep` */
+    disabled?: boolean | undefined;
+}
+/**
+ * Stepper: where you are in an ordered sequence of steps — done, current,
+ * still to come — with titles and an optional line each. With `onStep`, a
+ * step is a button that goes back to it (any step not `disabled`; disable the
+ * ones ahead that the current step must be completed to reach). Without it,
+ * the strip is a read-only indicator. `orientation="vertical"` for a rail
+ * beside a long form. The current step carries `aria-current="step"`.
+ */
+export declare function Stepper({ steps, current, onStep, orientation, label, numbered }: {
+    steps: StepperStep[];
+    /** the current step's id */
+    current: string;
+    /** a step was clicked; omit for a read-only strip */
+    onStep?: ((id: string) => void) | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+    /** accessible name of the list (default "Progress") */
+    label?: string | undefined;
+    /** show the step's number in its marker (default true); done steps show a tick either way */
+    numbered?: boolean | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/kit/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/kit/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjE,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACpC,4FAA4F;IAC5F,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC9B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AA+ED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,WAA0B,EAAE,KAAkB,EAAE,QAAe,EAAE,EAAE;IACnH,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC5C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC;IACpD,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,+BAiCA"}

package/dist/kit/Stepper.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { v } from "../theme/tokens.js";
+import { Icon } from "./Icon.js";
+const Strip = styled.ol `
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: ${(p) => (p.$vertical ? "column" : "row")};
+  gap: ${(p) => (p.$vertical ? "4px" : "0")};
+  min-width: 0;
+`;
+const Item = styled.li `
+  position: relative;
+  flex: ${(p) => (p.$vertical ? "none" : "1 1 0")};
+  min-width: 0;
+  display: flex;
+  align-items: flex-start;
+  /* the connector to the next step */
+  ${(p) => !p.$vertical &&
+    css `
+      &:not(:last-child)::after {
+        content: "";
+        flex: 1 1 auto;
+        height: 2px;
+        min-width: 16px;
+        margin: 13px 10px 0;
+        border-radius: 2px;
+        background: ${p.$state === "done" ? v.brand55 : v.line2};
+      }
+    `}
+`;
+const Btn = styled.button `
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+  padding: 2px 4px 2px 2px;
+  border-radius: ${v.rCtl};
+  text-align: left;
+  cursor: ${(p) => (p.$clickable ? "pointer" : "default")};
+  ${(p) => p.$clickable && css `&:hover .t { color: ${v.text}; } &:hover .n { border-color: ${v.brand55}; }`}
+
+  .n {
+    flex: none;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    font-size: 12px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    border: 1.5px solid ${v.line2};
+    color: ${v.muted};
+    background: ${v.surface};
+    transition: border-color 0.14s ease, background 0.14s ease;
+    svg { font-size: 11px; }
+  }
+  .txt { min-width: 0; padding-top: 3px; }
+  .t { display: block; font-size: 12.5px; font-weight: 600; color: ${v.muted}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .d { display: block; margin-top: 1px; font-size: 11px; color: ${v.faint}; line-height: 1.4; }
+
+  ${(p) => p.$state === "current" && css `
+    .n { border-color: transparent; background: ${v.grad}; color: ${v.onBrand}; }
+    .t { color: ${v.text}; }
+  `}
+  ${(p) => p.$state === "done" && css `
+    .n { border-color: ${v.brand55}; background: ${v.brand12}; color: ${v.brand}; }
+    .t { color: ${v.text}; }
+  `}
+  ${(p) => p.$state === "error" && css `
+    .n { border-color: ${v.danger}; background: ${v.dangerBg}; color: ${v.danger}; }
+    .t { color: ${v.danger}; }
+  `}
+`;
+/**
+ * Stepper: where you are in an ordered sequence of steps — done, current,
+ * still to come — with titles and an optional line each. With `onStep`, a
+ * step is a button that goes back to it (any step not `disabled`; disable the
+ * ones ahead that the current step must be completed to reach). Without it,
+ * the strip is a read-only indicator. `orientation="vertical"` for a rail
+ * beside a long form. The current step carries `aria-current="step"`.
+ */
+export function Stepper({ steps, current, onStep, orientation = "horizontal", label = "Progress", numbered = true }) {
+    const at = Math.max(0, steps.findIndex((s) => s.id === current));
+    const vertical = orientation === "vertical";
+    return (_jsx(Strip, { "aria-label": label, "$vertical": vertical, children: steps.map((s, i) => {
+            const state = s.state ?? (i < at ? "done" : i === at ? "current" : "pending");
+            const clickable = !!onStep && !s.disabled && i !== at;
+            return (_jsx(Item, { "$vertical": vertical, "$state": state, children: _jsxs(Btn
+                // a step that cannot be gone to is not a button at all
+                , { ...(clickable ? { type: "button", onClick: () => onStep(s.id) } : { as: "div" }), "$state": state, "$clickable": clickable, "aria-current": i === at ? "step" : undefined, children: [_jsx("span", { className: "n", "aria-hidden": true, children: state === "done" ? _jsx(Icon, { name: "check" }) : state === "error" ? _jsx(Icon, { name: "warn" }) : numbered ? i + 1 : null }), _jsxs("span", { className: "txt", children: [_jsx("span", { className: "t", children: s.title }), s.description ? _jsx("span", { className: "d", children: s.description }) : null] }), _jsx("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: state === "done" ? " (done)" : state === "error" ? " (has errors)" : "" })] }) }, s.id));
+        }) }));
+}
+//# sourceMappingURL=Stepper.js.map

package/dist/kit/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/kit/Stepper.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeonr/platform-ui",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Xeonr Platform Suite design language: the --x-* token sheet, theme provider and kit shared by every Xeonr console.",
   "license": "UNLICENSED",
   "type": "module",