pixelize-design-library 2.4.2 → 3.0.0

package/dist/esm/Components/SideBar/sidebarFocus.js

@@ -0,0 +1,15 @@
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+const cache = new Map();
+/** The ring is derived for the canvas; the rail is near-black in both modes, so it is re-settled against the rail. */
+export const sidebarFocusRing = (colors, surface = colors.sidebar.background[500]) => {
+    const key = `${colors.focusRing.ring}|${surface}`;
+    let tokens = cache.get(key);
+    if (!tokens) {
+        tokens = { ring: liftToContrast(colors.focusRing.ring, surface, AA_NON_TEXT), halo: surface };
+        cache.set(key, tokens);
+    }
+    return { focusRing: tokens };
+};
+/** `focusVisibleStyles` for a control sitting on the rail (or on `surface`, e.g. the flyout). */
+export const sidebarFocusStyles = (colors, surface) => focusVisibleStyles(sidebarFocusRing(colors, surface));

package/dist/esm/Components/SideBar/sidebarId.js

@@ -0,0 +1,2 @@
+/** React's `useId()` wraps its value in colons (":r0:") — strip them for a plain DOM id token. */
+export const sanitizeId = (id) => id.replace(/:/g, "");

package/dist/esm/Components/SideBar/sidebarMotion.js

@@ -0,0 +1,3 @@
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+export const SIDEBAR_BG_TRANSITION = transitionFor(["background"]);
+export const SIDEBAR_INK_TRANSITION = transitionFor(["color"]);

package/dist/esm/Components/SideBar/sidebarScale.js

@@ -0,0 +1,16 @@
+import { fontSizes } from "../../Theme/tokens/primitives/typography.js";
+/** One type and row scale for the whole sidebar — rail, submenu, flyout, secondary bar and chrome. */
+export const SIDEBAR_ROW = {
+    height: "32px",
+    /** Rail row in the mobile overlay — the WCAG 2.5.5 touch target. */
+    overlayHeight: "44px",
+    subHeight: "28px",
+    fontSize: fontSizes["xs-plus"],
+    iconSize: "1rem",
+};
+/** Header/footer text around the rows; every row itself uses SIDEBAR_ROW.fontSize. */
+export const SIDEBAR_CHROME = {
+    titleFontSize: fontSizes["xs-plus"],
+    labelFontSize: fontSizes["xs-minus"],
+    metaFontSize: "10px",
+};

package/dist/esm/Components/SignInActivityTable/SignInActivityTable.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { Box, Flex, Heading, Skeleton, Table, Tbody, Td, Text, Th, Thead, Tr, VStack, } from "@chakra-ui/react";
 import { MonitorSmartphone } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { bandOn, cardRule } from "../../Theme/tokens/builders/planeStep.js";
+import { useScrollableRegion } from "../../Hooks/useScrollableRegion.js";
 import EmptyState from "../EmptyState/EmptyState.js";
+import { scrollRegionFocusRing } from "./scrollRegionRing.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 const DEFAULT_LABELS = {
     title: "Recent Sign-in Devices",
     browser: "Browser",
@@ -11,23 +16,26 @@ const DEFAULT_LABELS = {
     recentActivity: "Recent Activity",
     noActivity: "No recent sign-in activity",
 };
+/** Card listing recent sign-in devices (browser, device, activity) with loading and empty states. */
 const SignInActivityTable = ({ devices, isLoading = false, labels: labelOverrides, }) => {
     const { colors } = useCustomTheme();
+    const titleId = useId();
+    const { ref: scrollRef, props: scrollProps } = useScrollableRegion({ labelledBy: titleId });
     const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
-    const border = colors.boxborder[200];
+    const edge = colors.boxborder[200];
     const surface = colors.background[50];
+    const rule = cardRule(colors);
     const muted = colors.textMuted;
     const heading = colors.header[500];
-    const headBg = colors.backgroundColor.tableHeader;
-    const shadow = colors.boxShadow.default;
+    const headBg = bandOn(colors.backgroundColor.tableHeader, surface);
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
         letterSpacing: "0.04em",
         color: muted,
-        borderColor: border,
+        borderColor: rule,
         py: 3,
     };
-    return (_jsxs(Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: `0 1px 2px ${shadow}`, overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : devices.length === 0 ? (_jsx(EmptyState, { icon: MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.browser }), _jsx(Th, { ...thStyle, children: labels.device }), _jsx(Th, { ...thStyle, children: labels.recentActivity })] }) }), _jsx(Tbody, { children: devices.map((device, index) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, children: device.browser || "—" }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: device.device }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: _jsx(Text, { children: device.activity }) })] }, index))) })] })) })] }));
+    return (_jsxs(Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: "sm", overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: _jsx(Heading, { id: titleId, size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { ref: scrollRef, ...scrollProps, overflowX: "auto", sx: { _focusVisible: scrollRegionFocusRing(colors, headBg) }, children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : devices.length === 0 ? (_jsx(EmptyState, { icon: MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.browser }), _jsx(Th, { ...thStyle, children: labels.device }), _jsx(Th, { ...thStyle, children: labels.recentActivity })] }) }), _jsx(Tbody, { children: devices.map((device, index) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: BACKGROUND_TRANSITION, children: [_jsx(Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, children: device.browser || "—" }), _jsx(Td, { borderColor: rule, fontSize: "sm", color: muted, children: device.device }), _jsx(Td, { borderColor: rule, fontSize: "sm", color: muted, children: _jsx(Text, { children: device.activity }) })] }, index))) })] })) })] }));
 };
 export default SignInActivityTable;

package/dist/esm/Components/SignInActivityTable/scrollRegionRing.js

@@ -0,0 +1,9 @@
+import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../Theme/chakra/focusRing.styles.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+const BAND = FOCUS_RING_WIDTH - FOCUS_HALO_WIDTH;
+export const scrollRegionRingColor = (colors, band) => liftToContrast(colors.focusRing.ring, band, AA_NON_TEXT);
+// NOTE: an outline, not a box-shadow — an inset shadow is hidden under the opaque header band.
+export const scrollRegionFocusRing = (colors, band) => ({
+    outline: `${BAND}px solid ${scrollRegionRingColor(colors, band)}`,
+    outlineOffset: `-${BAND}px`,
+});

package/dist/esm/Components/Skeletons/Skeletons.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react";
-export default function Skeletons({ startColor, endColor, height = "20px", isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }) {
-    return (_jsxs(_Fragment, { children: [type === "skeleton" && (_jsx(Skeleton, { height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width, children: children })), type === "circle" && _jsx(SkeletonCircle, { size: size, speed: speed }), type === "text" && (_jsx(SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
+/** Renders exactly one of Skeleton/SkeletonCircle/SkeletonText per `type` — not a layout wrapper combining all three. */
+export default function Skeletons({ startColor, endColor, height = "1.25rem", borderRadius, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, alignSelf, flexShrink, ...rest }) {
+    void alignSelf;
+    void flexShrink;
+    return (_jsxs(_Fragment, { children: [type === "skeleton" && (_jsx(Skeleton, { ...rest, height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width, borderRadius: borderRadius, children: children })), type === "circle" && _jsx(SkeletonCircle, { ...rest, size: size, speed: speed }), type === "text" && (_jsx(SkeletonText, { ...rest, mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
 }

package/dist/esm/Components/SkipLink/SkipLink.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { chakra } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { RADIUS_ROLE } from "../../Theme/tokens/primitives/radii.js";
+import { visuallyHiddenStyle } from "../VisuallyHidden/VisuallyHidden.js";
+const FOCUSABLE = "a[href], area[href], button, input, select, textarea, iframe, summary, [tabindex], [contenteditable='true']";
+export const missingTargetWarning = (targetId) => `[pixelize-design-library] SkipLink: no element with id "${targetId}" to skip to.`;
+const SkipLink = forwardRef(function SkipLink({ targetId = "main-content", children = "Skip to main content", onClick, ...rest }, ref) {
+    const { colors } = useCustomTheme();
+    const handleClick = (event) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (event.defaultPrevented)
+            return;
+        const target = document.getElementById(targetId);
+        if (!target) {
+            if (process.env.NODE_ENV !== "production")
+                console.warn(missingTargetWarning(targetId));
+            return;
+        }
+        event.preventDefault();
+        if (!target.matches(FOCUSABLE))
+            target.setAttribute("tabindex", "-1");
+        target.focus();
+    };
+    return (_jsx(chakra.a, { ...rest, ref: ref, href: `#${targetId}`, onClick: handleClick, sx: {
+            ...visuallyHiddenStyle,
+            _focusVisible: {
+                clip: "auto",
+                width: "auto",
+                height: "auto",
+                margin: 0,
+                overflow: "visible",
+                top: 4,
+                left: 4,
+                px: 4,
+                py: 2,
+                zIndex: "skipLink",
+                borderRadius: RADIUS_ROLE.control,
+                bg: colors.surfaceRaised,
+                color: colors.accentText,
+                fontSize: "sm",
+                fontWeight: 600,
+                textDecoration: "none",
+                ...focusVisibleRing(colors),
+            },
+        }, children: children }));
+});
+export default SkipLink;

package/dist/esm/Components/SkipLink/SkipLinkProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Slider/Slider.js

@@ -1,12 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useCallback } from "react";
 import { Box, Flex, IconButton, Image, useBreakpointValue, AspectRatio } from "@chakra-ui/react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, Pause, Play } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) => {
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { AA_NON_TEXT, liftToContrast, resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+/** Auto-advancing image/content carousel (pauses on hover/focus, never auto-advances under reduced motion) — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
+const Slider = ({ images, interval = 5000, isArrow = false, showPauseControl = false, mobileImages, }) => {
     var _a, _b;
     const { colors } = useCustomTheme();
     const [currentIndex, setCurrentIndex] = useState(0);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [userPaused, setUserPaused] = useState(false);
+    const reducedMotion = usePrefersReducedMotion();
     const timeoutRef = useRef(null);
     const isMobile = (_a = useBreakpointValue({ base: true, md: false })) !== null && _a !== void 0 ? _a : false;
     const slides = (isMobile && mobileImages && mobileImages.length > 0) ? mobileImages : images;
@@ -17,14 +26,14 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
         setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
     }, [slides.length]);
     useEffect(() => {
-        if (interval > 0) {
+        if (interval > 0 && !hovered && !focused && !userPaused && !reducedMotion) {
             timeoutRef.current = setTimeout(nextSlide, interval);
         }
         return () => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
         };
-    }, [currentIndex, interval, nextSlide]);
+    }, [currentIndex, interval, nextSlide, hovered, focused, userPaused, reducedMotion]);
     useEffect(() => {
         if (currentIndex >= slides.length) {
             setCurrentIndex(0);
@@ -32,10 +41,18 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
         // eslint-disable-next-line
     }, [slides.length]);
     const ratio = (_b = useBreakpointValue({ base: 16 / 9, md: 21 / 9, lg: 21 / 9 })) !== null && _b !== void 0 ? _b : 16 / 9;
-    return (_jsxs(Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden", children: [_jsx(Flex, { w: `${slides.length * 100}%`, transform: `translateX(-${(currentIndex * 100) / slides.length}%)`, transition: "transform 0.5s ease", children: [...slides]
+    const chipBg = colors.background[50];
+    const chipInk = onFilled(chipBg, colors.white, colors.black);
+    const chipHoverBg = resolveHoverTint(colors.gray[200], chipBg);
+    const chipHoverInk = onFilled(chipHoverBg, colors.white, colors.black);
+    const dotInactiveInk = liftToContrast(colors.gray[400], chipBg, AA_NON_TEXT);
+    return (_jsxs(Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget))
+                setFocused(false);
+        }, children: [_jsx(Flex, { w: `${slides.length * 100}%`, transform: `translateX(-${(currentIndex * 100) / slides.length}%)`, transition: reducedMotion ? "none" : "transform 0.5s ease", children: [...slides]
                     .sort((a, b) => a.order - b.order)
                     .map((image, idx) => (_jsx(Box, { w: `${100 / slides.length}%`, h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center", children: _jsx(AspectRatio, { ratio: ratio, w: "100%", children: _jsx(Image, { src: isMobile && image.mobilePreviewUrl
                                 ? image.mobilePreviewUrl
-                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { color: colors.gray[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: colors.gray[200] } }), _jsx(IconButton, { icon: _jsx(ChevronRight, { color: colors.gray[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: colors.gray[200] } })] })), slides.length > 1 && (_jsx(Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, children: slides.map((_, idx) => (_jsx(Box, { w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), transition: "all 0.3s" }, idx))) }))] }));
+                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, {}), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } }), _jsx(IconButton, { icon: _jsx(ChevronRight, {}), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } })] })), showPauseControl && interval > 0 && slides.length > 1 && !reducedMotion && (_jsx(IconButton, { icon: userPaused ? _jsx(Play, { size: 16 }) : _jsx(Pause, { size: 16 }), "aria-label": userPaused ? "Play slideshow" : "Pause slideshow", onClick: () => setUserPaused((paused) => !paused), position: "absolute", bottom: "1rem", right: "1rem", zIndex: 2, size: "sm", variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } })), slides.length > 1 && (_jsx(Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, bg: chipBg, px: "0.6rem", py: "0.4rem", borderRadius: "full", children: slides.map((_, idx) => (_jsx(Box, { as: "button", type: "button", w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, border: "none", p: 0, bg: idx === currentIndex ? chipInk : dotInactiveInk, borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), "aria-label": `Go to slide ${idx + 1}`, "aria-current": idx === currentIndex, transition: transitionFor(["background-color"], "base"), _focusVisible: { outline: `2px solid ${chipInk}`, outlineOffset: "2px" } }, idx))) }))] }));
 };
 export default Slider;

package/dist/esm/Components/SpecTable/SpecTable.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { ChevronDown } from "lucide-react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+const DEFAULT_LABELS = { showAll: "Show all", showLess: "Show less" };
+/** Definition list of specifications on striped tonal rows, with an optional "Show all" fold. */
+const SpecTable = ({ items, columns = 1, collapsedCount, expanded, defaultExpanded = false, onExpandedChange, labels, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const listId = useId();
+    const [inner, setInner] = useState(defaultExpanded);
+    const text = { ...DEFAULT_LABELS, ...labels };
+    if (items.length === 0)
+        return null;
+    const foldable = collapsedCount !== undefined && collapsedCount < items.length;
+    const isExpanded = expanded !== null && expanded !== void 0 ? expanded : inner;
+    const visible = foldable && !isExpanded ? items.slice(0, collapsedCount) : items;
+    const tint = colors.background[100];
+    const toggle = () => {
+        const next = !isExpanded;
+        if (expanded === undefined)
+            setInner(next);
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
+    };
+    return (_jsxs(Box, { "data-testid": testId, children: [_jsx(Box, { as: "dl", id: listId, m: 0, "aria-label": ariaLabel, display: "grid", gridTemplateColumns: columns === 2 ? { base: "1fr", md: "1fr 1fr" } : "1fr", borderRadius: "xl", overflow: "hidden", children: visible.map((item, i) => {
+                    const stripeNarrow = i % 2 === 0;
+                    const stripeWide = columns === 2 ? Math.floor(i / 2) % 2 === 0 : stripeNarrow;
+                    return (_jsxs(Flex, { "data-stripe": stripeNarrow, "data-stripe-wide": stripeWide, gap: 4, px: 4, py: 3, fontSize: "sm", bg: { base: stripeNarrow ? tint : "transparent", md: stripeWide ? tint : "transparent" }, children: [_jsx(Box, { as: "dt", flex: "0 0 40%", minW: 0, color: colors.textMuted, overflowWrap: "anywhere", children: item.label }), _jsx(Box, { as: "dd", m: 0, flex: "1 1 0", minW: 0, fontWeight: 500, color: colors.header[900], overflowWrap: "anywhere", sx: NUMERIC_TEXT, children: item.value })] }, `${item.label}-${i}`));
+                }) }), foldable && (_jsx(Box, { mt: 2, children: _jsx(Button, { variant: "ghost", size: "sm", "aria-expanded": isExpanded, "aria-controls": listId, onClick: toggle, rightIcon: _jsx(Box, { as: "span", display: "inline-flex", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform"]), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16, "aria-hidden": true }) }), children: isExpanded ? text.showLess : `${text.showAll} (${items.length})` }) }))] }));
+};
+export default SpecTable;

package/dist/esm/Components/SpecTable/SpecTableProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Spinner/Spinner.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spinner as ChakraSpinner } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { toneInk } from "../../Theme/tokens/builders/tone.js";
+import { REDUCED_MOTION_QUERY } from "../../Theme/chakra/motion.js";
+const SPINNER_SIZES = {
+    xs: { boxSize: "0.75rem", thickness: "0.125rem" },
+    sm: { boxSize: "1rem", thickness: "0.125rem" },
+    md: { boxSize: "1.5rem", thickness: "0.1875rem" },
+    lg: { boxSize: "2rem", thickness: "0.25rem" },
+    xl: { boxSize: "3rem", thickness: "0.25rem" },
+};
+/** Themed spinner for inline or panel loading; for a blocking overlay use Loading, for a button use Button isLoading. */
+export default function Spinner({ size = "md", tone, color, label = "Loading", thickness, speed = "0.7s", emptyColor = "transparent", sx, testId, ...rest }) {
+    const { colors } = useCustomTheme();
+    const spec = SPINNER_SIZES[size];
+    const ink = color !== null && color !== void 0 ? color : (tone ? toneInk(colors, tone) : colors.accentText);
+    return (_jsx(ChakraSpinner, { boxSize: spec.boxSize, ...rest, label: label, color: ink, emptyColor: emptyColor, thickness: thickness !== null && thickness !== void 0 ? thickness : spec.thickness, speed: speed, sx: { [REDUCED_MOTION_QUERY]: { animationDuration: "1.6s" }, ...sx }, ...(testId !== undefined ? { "data-testid": testId } : {}) }));
+}

package/dist/esm/Components/Spinner/SpinnerProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/StageProgress/StageItem.js

@@ -3,13 +3,19 @@ import { useEffect, useRef } from "react";
 import { Box, Flex } from "@chakra-ui/react";
 import { Check } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { resolveStagePalette, } from "./StageProgressProps.js";
+import { centerInStrip } from "./centerInStrip.js";
 const sizeMap = {
     sm: { arrow: 12, minW: "120px", h: "28px", px: 3, font: "0.75rem", icon: 12 },
     md: { arrow: 16, minW: "160px", h: "36px", px: 4, font: "0.875rem", icon: 14 },
     lg: { arrow: 20, minW: "200px", h: "44px", px: 5, font: "1rem", icon: 16 },
 };
+const LABEL_TRANSITION = transitionFor(["color", "filter"], "base");
+const CHEVRON_TRANSITION = transitionFor(["background", "border-color"], "base");
 const clipFor = (index, total, a) => {
     const isFirst = index === 0;
     const isLast = index === total - 1;
@@ -21,19 +27,17 @@ const clipFor = (index, total, a) => {
         return `polygon(0 0, 100% 0, 100% 100%, 0 100%, ${a}px 50%)`;
     return `polygon(0 0, calc(100% - ${a}px) 0, 100% 50%, calc(100% - ${a}px) 100%, 0 100%, ${a}px 50%)`;
 };
-const StageItem = ({ label, index, total, state, variant = "chevron", size = "md", colorScheme = "primary", onClick, isReadOnly = false, disabled = false, showCheck = false, minWidth, scrollIntoViewWhenActive = true, tooltipThreshold = 20, }) => {
+/** Renders one chevron/bar/pill stage — for variant="stepper", StageProgress renders StepperStage internally instead. */
+const StageItem = ({ label, index, total, state, variant = "chevron", size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = false, minWidth, scrollIntoViewWhenActive = true, tooltipThreshold = 20, }) => {
     var _a;
+    const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
     const theme = useCustomTheme();
     const palette = resolveStagePalette(theme, colorScheme);
     const ref = useRef(null);
     const s = sizeMap[size];
     useEffect(() => {
         if (state === "active" && scrollIntoViewWhenActive && ref.current) {
-            ref.current.scrollIntoView({
-                behavior: "smooth",
-                inline: "center",
-                block: "nearest",
-            });
+            centerInStrip(ref.current);
         }
     }, [state, scrollIntoViewWhenActive]);
     const bg = state === "active"
@@ -71,13 +75,19 @@ const StageItem = ({ label, index, total, state, variant = "chevron", size = "md
             : "none";
     // Upcoming pills read as outlined; other states stay filled.
     const isOutlinePill = variant === "pills" && state === "upcoming";
-    const hoverStyles = interactive
+    const fillHoverStyles = interactive
         ? state === "active"
             ? { bg: palette.hover }
-            : { bg: palette.strong, color: palette.onStrong, borderColor: palette.strong }
+            : { bg: palette.strong, borderColor: palette.strong }
         : undefined;
     const showTooltip = ((_a = label === null || label === void 0 ? void 0 : label.length) !== null && _a !== void 0 ? _a : 0) > tooltipThreshold;
-    const content = (_jsx(Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, onClick: interactive ? onClick : undefined, flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, pl: `${leftPad}px`, pr: `${rightPad}px`, bg: isOutlinePill ? "transparent" : bg, color: isOutlinePill ? palette.mutedText : color, border: isOutlinePill ? "1px solid" : "none", borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "background 0.18s ease, color 0.18s ease, filter 0.18s ease, border-color 0.18s ease", sx: { clipPath }, _hover: interactive ? { ...hoverStyles, filter: "brightness(0.97)" } : undefined, children: _jsxs(Flex, { align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, children: [showCheck && state === "completed" && (_jsx(Check, { size: s.icon, style: { flexShrink: 0 } })), _jsx(Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] }) }));
+    // clip-path clips box-shadow too, so the focus ring stays on this unclipped outer button.
+    const content = (_jsxs(Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, "aria-disabled": disabled ? true : undefined, onClick: interactive ? onClick : undefined, "data-group": "", position: "relative", flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, p: 0, border: "none", bg: "transparent", color: isOutlinePill ? palette.mutedText : color, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? DISABLED_OPACITY : 1, transition: LABEL_TRANSITION, sx: interactive ? focusVisibleStyles(theme.colors) : undefined, _hover: interactive
+            ? {
+                color: state === "active" ? undefined : palette.onStrong,
+                filter: "brightness(0.97)",
+            }
+            : undefined, children: [_jsx(Box, { position: "absolute", inset: 0, bg: isOutlinePill ? "transparent" : bg, border: isOutlinePill ? "1px solid" : "none", borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, transition: CHEVRON_TRANSITION, sx: { clipPath }, _groupHover: fillHoverStyles }), _jsxs(Flex, { position: "relative", align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, pl: `${leftPad}px`, pr: `${rightPad}px`, children: [showCheck && state === "completed" && (_jsx(Check, { size: s.icon, style: { flexShrink: 0 } })), _jsx(Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] })] }));
     if (showTooltip) {
         return (_jsx(ToolTip, { label: label, placement: "top", openDelay: 300, children: content }));
     }

package/dist/esm/Components/StageProgress/StageProgress.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Flex, Skeleton } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
+import { useScrollableRegion } from "../../Hooks/useScrollableRegion.js";
 import StageItem from "./StageItem.js";
 import StepperStage from "./StepperStage.js";
+import { STRIP_ATTRIBUTE } from "./centerInStrip.js";
 // Gap between items per variant (chevron interlocks via negative margin).
 const gapFor = {
     chevron: "0",
@@ -11,11 +14,16 @@ const gapFor = {
     pills: "8px",
     stepper: "0",
 };
-const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "md", colorScheme = "primary", markCompleted = true, showCheck = false, isReadOnly = false, isLoading = false, minStageWidth, scrollActiveIntoView = true, tooltipThreshold = 20, }) => {
+/** Multi-stage pipeline tracker (chevron/bar/pills/stepper) — stepper ignores tooltipThreshold and minStageWidth. */
+const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "md", colorScheme = "primary", markCompleted = true, showCheck = false, isReadOnly = false, isLoading = false, minStageWidth, scrollActiveIntoView = true, tooltipThreshold = 20, "aria-label": ariaLabel, }) => {
     const theme = useCustomTheme();
+    const { ref: stripRef, props: stripProps } = useScrollableRegion({
+        label: ariaLabel,
+        keepRole: variant === "stepper",
+    });
     if (isLoading) {
         const skeletonH = size === "sm" ? "28px" : size === "lg" ? "44px" : "36px";
-        return (_jsx(Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Skeleton, { height: skeletonH, minWidth: minStageWidth || "160px", borderRadius: "md", flexShrink: 0 }, i))) }));
+        return (_jsx(Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Skeleton, { height: skeletonH, minWidth: minStageWidth || "160px", borderRadius: "lg", flexShrink: 0 }, i))) }));
     }
     const activeIndex = stages.findIndex((st) => st.id === value);
     const stateFor = (index) => {
@@ -26,15 +34,14 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
         return "upcoming";
     };
     const total = stages.length;
-    return (_jsx(Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "hidden", p: "0.1rem", sx: {
-            "&:hover": { overflowX: "auto" },
-            ...scrollbarStyles(theme.colors, "overlay"),
-        }, children: stages.map((stage, index) => {
+    return (_jsx(Box, { as: variant === "stepper" ? "ol" : undefined, ref: stripRef, ...stripProps, m: variant === "stepper" ? 0 : undefined, listStyleType: variant === "stepper" ? "none" : undefined, display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "auto", p: "0.1rem", sx: { ...scrollbarStyles(theme.colors, "overlay"), ...focusVisibleStyles(theme.colors) }, [STRIP_ATTRIBUTE]: "", children: stages.map((stage, index) => {
+            var _a;
             const state = stateFor(index);
+            const stageDisabled = (_a = stage.isDisabled) !== null && _a !== void 0 ? _a : stage.disabled;
             if (variant === "stepper") {
-                return (_jsx(StepperStage, { label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
+                return (_jsx(StepperStage, { label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, asListItem: true, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
             }
-            return (_jsx(StageItem, { label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, minWidth: minStageWidth, scrollIntoViewWhenActive: scrollActiveIntoView, tooltipThreshold: tooltipThreshold, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
+            return (_jsx(StageItem, { label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, showCheck: showCheck, minWidth: minStageWidth, scrollIntoViewWhenActive: scrollActiveIntoView, tooltipThreshold: tooltipThreshold, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
         }) }));
 };
 export default StageProgress;

package/dist/esm/Components/StageProgress/StageProgressProps.js

@@ -1,25 +1,31 @@
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 /** Exhaustive by construction: a new scheme that maps nowhere is a compile error. */
 const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "secondary" || scheme === "tertiary"
     ? colors[scheme]
     : colors.semantic[scheme];
 /** Resolve a chevron palette for a given color scheme from the theme. */
 export const resolveStagePalette = (theme, colorScheme = "primary") => {
-    const { gray, white, black } = theme.colors;
+    const { gray } = theme.colors;
     const scale = scaleFor(theme.colors, colorScheme);
-    const strong = scale[500];
-    const onStrong = onFilled(strong, white, black);
+    const solid = resolveFilledSurface(scale, theme.colors);
+    const strong = solid.fill;
+    const onStrong = solid.color;
     const soft = scale[100];
     // A fixed [700] fails AA against [100] for some hues (orange 3.30, borderline green 3.58) —
     // walk the scale's own rungs against this specific tint instead.
     const softText = accentTextOnCanvas(scale, soft);
+    const muted = gray[100];
+    // A fixed gray[500] clears AA against the canvas but not against `muted` itself (gray[100]) on
+    // several brands — walk gray's own rungs against the actual upcoming-state fill instead.
+    const mutedText = accentTextOnCanvas(gray, muted);
     return {
         soft,
         softText,
         strong,
         onStrong,
-        hover: scale[600],
-        muted: gray[100],
-        mutedText: gray[500],
+        hover: solid.hoverFill,
+        muted,
+        mutedText,
     };
 };

package/dist/esm/Components/StageProgress/StepperStage.js

@@ -3,13 +3,19 @@ import { useEffect, useRef } from "react";
 import { Box, Flex, Text } from "@chakra-ui/react";
 import { Check } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+import { transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { resolveStagePalette, } from "./StageProgressProps.js";
+import { centerInStrip } from "./centerInStrip.js";
 const sizeMap = {
     sm: { circle: "24px", font: "0.7rem", label: "0.7rem", icon: 12, minW: "84px" },
     md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
     lg: { circle: "38px", font: "0.95rem", label: "0.9rem", icon: 16, minW: "124px" },
 };
-const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, disabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, }) => {
+/** Renders one numbered circle with connector lines and a wrapped label for variant="stepper". */
+const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, asListItem = false, }) => {
+    const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
     const theme = useCustomTheme();
     const palette = resolveStagePalette(theme, colorScheme);
     const ref = useRef(null);
@@ -17,22 +23,21 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     const interactive = !isReadOnly && !disabled;
     useEffect(() => {
         if (state === "active" && scrollIntoViewWhenActive && ref.current) {
-            ref.current.scrollIntoView({
-                behavior: "smooth",
-                inline: "center",
-                block: "nearest",
-            });
+            centerInStrip(ref.current);
         }
     }, [state, scrollIntoViewWhenActive]);
     const filled = state === "active" || state === "completed";
     const circleBg = filled ? palette.strong : theme.colors.background[50];
     const circleColor = filled ? palette.onStrong : palette.mutedText;
     const circleBorder = filled ? palette.strong : palette.muted;
-    const line = (done, hidden) => (_jsx(Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" }));
-    return (_jsxs(Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, children: [_jsxs(Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), _jsx(Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "all 0.18s ease", "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+    const line = (done, hidden) => (_jsx(Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: transitionFor(["background"], "base") }));
+    const node = (_jsxs(Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", "aria-disabled": disabled ? true : undefined, border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? DISABLED_OPACITY : 1, onClick: interactive ? onClick : undefined, borderRadius: "lg", sx: interactive ? focusVisibleStyles(theme.colors) : undefined, children: [_jsxs(Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), _jsx(Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: transitionFor(["background-color", "border-color", "color", "box-shadow"]), "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
                             ? { boxShadow: `0 0 0 4px ${palette.soft}` }
                             : undefined, _groupHover: interactive
-                            ? { borderColor: palette.strong, color: filled ? palette.onStrong : palette.strong }
-                            : undefined, children: showCheck && state === "completed" ? _jsx(Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), _jsx(Text, { mt: 2, px: 1, fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, _groupHover: interactive ? { color: palette.strong } : undefined, children: label })] }));
+                            ? { borderColor: palette.strong, bg: palette.strong, color: palette.onStrong }
+                            : undefined, children: showCheck && state === "completed" ? _jsx(Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), _jsx(Text, { mt: 2, px: 1, borderRadius: "sm", fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, transition: transitionFor(["background", "color"], "base"), _groupHover: interactive ? { bg: palette.strong, color: palette.onStrong } : undefined, children: label })] }));
+    if (!asListItem)
+        return node;
+    return (_jsx(Box, { as: "li", display: "flex", flex: "1", minWidth: s.minW, flexShrink: 0, listStyleType: "none", children: node }));
 };
 export default StepperStage;

package/dist/esm/Components/StageProgress/centerInStrip.js

@@ -0,0 +1,11 @@
+export const STRIP_ATTRIBUTE = "data-stage-strip";
+export const centerInStrip = (stage) => {
+    var _a;
+    const strip = stage.closest(`[${STRIP_ATTRIBUTE}]`);
+    if (!strip)
+        return;
+    const box = strip.getBoundingClientRect();
+    const rect = stage.getBoundingClientRect();
+    const left = strip.scrollLeft + rect.left + rect.width / 2 - (box.left + box.width / 2);
+    (_a = strip.scrollTo) === null || _a === void 0 ? void 0 : _a.call(strip, { left, behavior: "smooth" });
+};

package/dist/esm/Components/StatCard/StatCard.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { cardRule } from "../../Theme/tokens/builders/planeStep.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+const StatCardSkeleton = ({ hasIcon }) => (_jsxs(Flex, { direction: "column", gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [hasIcon && _jsx(Skeletons, { type: "skeleton", height: 8, width: 8 }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "40%" })] }), _jsx(Skeletons, { type: "skeleton", height: 7, width: "55%" }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "45%" })] }));
+/** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
+const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, sparkline, footer, icon: Icon, iconTone, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, ...rest }) => {
+    const { colors } = useCustomTheme();
+    const isInteractive = !!onClick && !isLoading;
+    const deltaColor = trend
+        ? trend === goodDirection
+            ? colors.semanticText.success
+            : colors.semanticText.error
+        : colors.textMuted;
+    const DeltaIcon = trend === "down" ? ArrowDownRight : ArrowUpRight;
+    const chip = iconTone
+        ? resolveSoftTone(colors, toneScale(colors, iconTone), colors.background[50])
+        : { bg: colors.primary.opacity[8], fg: colors.accentText };
+    const surface = {
+        display: "block",
+        w: "100%",
+        textAlign: "left",
+        bg: colors.background[50],
+        borderWidth: "1px",
+        borderColor: colors.boxborder[200],
+        borderRadius: "xl",
+        px: 5,
+        py: 4,
+    };
+    const content = isLoading ? (_jsx(StatCardSkeleton, { hasIcon: !!Icon })) : (_jsxs(Flex, { as: "span", direction: "column", gap: 3, children: [_jsxs(Flex, { as: "span", align: "center", gap: 2, children: [Icon && (_jsx(Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: _jsx(Icon, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), _jsxs(Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [_jsx(Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: NUMERIC_TEXT, children: value }), sparkline && (_jsx(Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && (_jsxs(Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && (_jsxs(Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && _jsx(DeltaIcon, { size: 14, "aria-hidden": true }), trend && _jsx(VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: NUMERIC_TEXT, children: delta })] })), hint && (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && (_jsx(Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: cardRule(colors), "data-testid": "stat-footer", children: footer }))] }));
+    if (!isInteractive) {
+        return (_jsx(Box, { ...rest, ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
+    }
+    return (_jsx(Box, { ...rest, as: "button", type: "button", onClick: onClick, "aria-label": ariaLabel, "data-testid": testId, ...surface, cursor: "pointer", transition: transitionFor(["box-shadow", "border-color"]), _hover: { boxShadow: "sm", borderColor: colors.boxborder[300] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: content }));
+};
+export default StatCard;

package/dist/esm/Components/StatCard/StatCardProps.js

@@ -0,0 +1 @@
+export {};