pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.63

package/dist/esm/Components/SideBar/components/MenuItemBox.js

@@ -8,12 +8,16 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { getSidebarActiveAccent } from "../sidebarAccentColors.js";
 import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
 import { sidebarRowPeak } from "../../../Theme/tokens/builders/sidebarAccent.js";
+import zIndices from "../../../Theme/tokens/primitives/zIndices.js";
 import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
 import TruncatedTextWithTooltip from "./TextTruncation.js";
 import { sanitizeId } from "../sidebarId.js";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { sidebarFocusStyles } from "../sidebarFocus.js";
 import { SIDEBAR_ROW } from "../sidebarScale.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { SIDEBAR_BG_TRANSITION, SIDEBAR_INK_TRANSITION } from "../sidebarMotion.js";
+const SUBMENU_REVEAL_TRANSITION = transitionFor(["opacity", "transform"], "base");
 /**
  * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
  * cmd/ctrl-click for a new tab, shift for a window, middle-click. Only a plain left click is
@@ -73,7 +77,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         h: rowHeight,
         borderRadius: "lg",
         px: "10px",
-        fontWeight: "medium",
+        fontWeight: 500,
         border: "none",
         borderLeft: "2px solid",
         borderLeftColor: isAnyActive ? theme.colors.sidebar.activeIcon : "transparent",
@@ -86,10 +90,10 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
             },
         cursor: isBlocked ? "not-allowed" : "pointer",
         opacity: isBlocked ? 0.6 : 1,
-        transition: "background 0.12s",
+        transition: SIDEBAR_BG_TRANSITION,
         sx: sidebarFocusStyles(theme.colors),
     };
-    const buttonContent = (_jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && (_jsx(TruncatedTextWithTooltip
+    const buttonContent = (_jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: SIDEBAR_INK_TRANSITION }), toggle && (badgeValue != null || hasSubmenuBadge) && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && (_jsx(TruncatedTextWithTooltip
                     // open={isOpen}
                     , { 
                         // open={isOpen}
@@ -111,7 +115,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                                 return;
                             e.preventDefault();
                             handleToggleSubMenu(e);
-                        }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title), children: buttonContent }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: isBlocked ? "not-allowed" : "pointer", zIndex: 1500, children: _jsx(PopoverBody, { p: "0.625rem", color: theme.colors.white, children: _jsx(MenuPopoverContent, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
+                        }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title), children: buttonContent }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: isBlocked ? "not-allowed" : "pointer", zIndex: zIndices.popover, children: _jsx(PopoverBody, { p: "0.625rem", color: theme.colors.white, children: _jsx(MenuPopoverContent, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
     }
     const row = (_jsx(Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-expanded": hasSubMenu ? !!isOpen : undefined, "aria-controls": hasSubMenu ? submenuPanelId : undefined, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": isBlocked ? true : undefined, onClick: (e) => {
             if (!hasSubMenu && url && isBrowserNavigationGesture(e))
@@ -120,7 +124,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
             handleToggleSubMenu(e);
         }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }));
     return (_jsxs(_Fragment, { children: [locked && lockedReason ? (_jsx(ToolTip, { label: lockedReason, placement: "top", children: row })) : (row), hasSubMenu && (_jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { id: submenuPanelId, "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
-                        transition: "opacity 0.28s ease, transform 0.28s ease",
+                        transition: SUBMENU_REVEAL_TRANSITION,
                         opacity: isOpen ? 1 : 0,
                         transform: isOpen ? "translateY(0)" : "translateY(-6px)",
                     }, children: subMenu.map((sub, sIdx) => {
@@ -140,7 +144,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                                 e.preventDefault();
                                 if (!isSubBlocked)
                                     handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
-                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", color: isSubActive ? activeAccent.label : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: SIDEBAR_INK_TRANSITION })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: SIDEBAR_BG_TRANSITION })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", color: isSubActive ? activeAccent.label : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
                                     var _a, _b, _c, _d;
                                     const subCfg = typeof sub.badge === "object" && sub.badge !== null
                                         ? sub.badge
@@ -157,4 +161,4 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                         return sub.locked && sub.lockedReason ? (_jsx(ToolTip, { label: sub.lockedReason, placement: "top", children: subRow }, subKey)) : (_jsx(React.Fragment, { children: subRow }, subKey));
                     }) }) }))] }));
 };
-export default MenuItemBox;
+export default React.memo(MenuItemBox);

package/dist/esm/Components/SideBar/components/MenuItems.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from "react";
+import React, { memo, useCallback, useEffect, useState } from "react";
 import { Box } from "@chakra-ui/react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import MenuItemBox from "./MenuItemBox.js";
@@ -16,11 +16,11 @@ const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu
             setOpenMenuId(activeMenu);
         }
     }, [activeMenu, menus]);
-    const handleToggle = (menu, clickY) => {
+    const handleToggle = useCallback((menu, clickY) => {
         setOpenMenuId((prev) => (prev === menu.id ? null : menu.id));
         if (typeof clickY === "number")
             setLastClickY(clickY);
-    };
+    }, []);
     useEffect(() => {
         if (openMenuId == null)
             return;
@@ -113,4 +113,4 @@ const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu
             return (_jsxs(React.Fragment, { children: [showGroup && !isFirstGroup && (_jsx(Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, my: overlay ? "3px" : "5px" })), showGroup && !toggle && (_jsx(Box, { "aria-hidden": "true", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "9.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), _jsx(MenuItemBox, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle, overlay: overlay })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
         }) }));
 };
-export default MenuItems;
+export default memo(MenuItems);

package/dist/esm/Components/SideBar/components/MenuPopoverContent.js

@@ -11,6 +11,7 @@ import TruncatedTextWithTooltip from "./TextTruncation.js";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { sidebarFocusStyles } from "../sidebarFocus.js";
 import { SIDEBAR_ROW } from "../sidebarScale.js";
+import { SIDEBAR_BG_TRANSITION, SIDEBAR_INK_TRANSITION } from "../sidebarMotion.js";
 const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
     var _a;
     const theme = useCustomTheme();
@@ -51,7 +52,7 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                     }, px: 2, h: SIDEBAR_ROW.subHeight, mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", bg: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
                         bg: isSubBlocked ? "transparent" : isSubActive ? "whiteAlpha.400" : "whiteAlpha.200",
                         cursor: !isSubBlocked ? "pointer" : "not-allowed",
-                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors, theme.colors.sidebar.elevated), children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (sub.lockedReason ? (_jsx(ToolTip, { label: sub.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))) : (() => {
+                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors, theme.colors.sidebar.elevated), children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: SIDEBAR_INK_TRANSITION })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: SIDEBAR_BG_TRANSITION })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (sub.lockedReason ? (_jsx(ToolTip, { label: sub.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))) : (() => {
                             var _a, _b, _c, _d;
                             const cfg = typeof sub.badge === "object" && sub.badge !== null
                                 ? sub.badge

package/dist/esm/Components/SideBar/components/OtherApps.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Flex, Text, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import zIndices from "../../../Theme/tokens/primitives/zIndices.js";
 import { sidebarFocusStyles } from "../sidebarFocus.js";
+import { SIDEBAR_BG_TRANSITION } from "../sidebarMotion.js";
 const OtherApps = ({ toggle, otherApps }) => {
     const theme = useCustomTheme();
     if (!otherApps || otherApps.length === 0)
@@ -11,11 +13,11 @@ const OtherApps = ({ toggle, otherApps }) => {
         return (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", color: theme.colors.sidebar.mutedIcon, fontSize: "15px", flexShrink: 0, children: (_a = app.icon) !== null && _a !== void 0 ? _a : (_jsx(Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })) }));
     };
     // Grid cell: icon on top, truncated label below (label hidden when collapsed).
-    const appCell = (app) => (_jsxs(Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), onClick: app.onClick, children: [appIcon(app), !toggle && (_jsx(Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
+    const appCell = (app) => (_jsxs(Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.200" }, transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), onClick: app.onClick, children: [appIcon(app), !toggle && (_jsx(Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
     const flyoutBody = (app) => {
         var _a;
         return (_jsxs(_Fragment, { children: [_jsxs(Flex, { alignItems: "center", gap: 2, mb: 1, onClick: app.onClick, children: [(_a = app.icon) !== null && _a !== void 0 ? _a : (_jsx(Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })), _jsx(Text, { fontSize: "sm", fontWeight: 700, color: theme.colors.white, children: app.name })] }), app.description && (_jsx(Text, { fontSize: "xs", color: theme.colors.sidebar.mutedLabel, children: app.description }))] }));
     };
-    return (_jsxs(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: toggle ? "6px" : 2, px: "6px", flexShrink: 0, children: [!toggle && (_jsx(Text, { fontSize: "9.5px", fontWeight: 600, color: theme.colors.sidebar.mutedLabel, letterSpacing: "0.1em", textTransform: "uppercase", px: 2, pt: "2px", pb: "5px", children: "Switch app" })), _jsx(Box, { display: "grid", gridTemplateColumns: toggle ? "1fr" : "repeat(4, 1fr)", gap: "3px", children: otherApps.map((app) => toggle ? (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { w: "100%", children: appCell(app) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: 1500, color: theme.colors.white, children: _jsx(PopoverBody, { p: 3, children: flyoutBody(app) }) }) })] }, app.name)) : (_jsx(Box, { w: "100%", children: appCell(app) }, app.name))) })] }));
+    return (_jsxs(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: toggle ? "6px" : 2, px: "6px", flexShrink: 0, children: [!toggle && (_jsx(Text, { fontSize: "9.5px", fontWeight: 600, color: theme.colors.sidebar.mutedLabel, letterSpacing: "0.1em", textTransform: "uppercase", px: 2, pt: "2px", pb: "5px", children: "Switch app" })), _jsx(Box, { display: "grid", gridTemplateColumns: toggle ? "1fr" : "repeat(4, 1fr)", gap: "3px", children: otherApps.map((app) => toggle ? (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { w: "100%", children: appCell(app) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: zIndices.popover, color: theme.colors.white, children: _jsx(PopoverBody, { p: 3, children: flyoutBody(app) }) }) })] }, app.name)) : (_jsx(Box, { w: "100%", children: appCell(app) }, app.name))) })] }));
 };
 export default OtherApps;

package/dist/esm/Components/SideBar/components/OverflowTooltipText.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useRef, useState, useEffect } from "react";
 import { Box, Text } from "@chakra-ui/react";
 import ToolTip from "../../ToolTip/ToolTip.js";
+import { observeResize } from "../../../Hooks/sharedResizeObserver.js";
 const OverflowTooltipText = ({ children, placement = "bottom", maxWidth = "100%", isTooltipDisabled = false, ...textProps }) => {
     const textRef = useRef(null);
     const shadowRef = useRef(null);
@@ -17,11 +18,9 @@ const OverflowTooltipText = ({ children, placement = "bottom", maxWidth = "100%"
             }
         };
         checkTruncation();
-        const resizeObserver = new ResizeObserver(checkTruncation);
-        if (textRef.current) {
-            resizeObserver.observe(textRef.current);
-        }
-        return () => resizeObserver.disconnect();
+        if (!textRef.current)
+            return;
+        return observeResize(textRef.current, checkTruncation);
     }, [children]);
     const shouldShowTooltip = isTruncated && !isTooltipDisabled;
     return (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: children, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true, children: _jsx(Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", 

package/dist/esm/Components/SideBar/components/PinnedSection.js

@@ -13,6 +13,8 @@ import { SIDEBAR_ROW } from "../sidebarScale.js";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import TruncatedTextWithTooltip from "./TextTruncation.js";
 import { isBrowserNavigationGesture } from "./MenuItemBox.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { SIDEBAR_BG_TRANSITION, SIDEBAR_INK_TRANSITION } from "../sidebarMotion.js";
 export const DEFAULT_PINNED_LABEL = "Pinned";
 export const DEFAULT_PINNED_LIMIT = 5;
 const DEFAULT_LABELS = {
@@ -21,6 +23,7 @@ const DEFAULT_LABELS = {
     unpin: "Unpin {title}",
 };
 const UNPIN_SIZE = "24px";
+const UNPIN_TRANSITION = transitionFor(["opacity", "background"]);
 const LADDER = { hover: "whiteAlpha.200", active: "whiteAlpha.300", activeHover: "whiteAlpha.400" };
 const VISUALLY_HIDDEN = {
     position: "absolute",
@@ -69,24 +72,24 @@ const PinnedSection = ({ items, label = DEFAULT_PINNED_LABEL, limit = DEFAULT_PI
     };
     const renderRow = (item) => {
         const isActive = activeIndex >= 0 && String(item.id) === String(activeId);
-        const anchor = (_jsx(Box, { as: "a", href: item.url, "data-group": "", "data-pinned-id": String(item.id), "aria-label": toggle ? item.title : undefined, "aria-current": isActive ? "page" : undefined, display: "flex", alignItems: "center", textAlign: "left", textDecoration: "none", w: "100%", h: rowHeight, borderRadius: "lg", pl: "10px", pr: !toggle && onUnpin ? `calc(10px + ${UNPIN_SIZE})` : "10px", fontWeight: "medium", borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isActive ? LADDER.active : "transparent", color: theme.colors.sidebar.mutedIcon, _hover: { backgroundColor: isActive ? LADDER.activeHover : LADDER.hover }, cursor: "pointer", transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), onClick: (e) => {
+        const anchor = (_jsx(Box, { as: "a", href: item.url, "data-group": "", "data-pinned-id": String(item.id), "aria-label": toggle ? item.title : undefined, "aria-current": isActive ? "page" : undefined, display: "flex", alignItems: "center", textAlign: "left", textDecoration: "none", w: "100%", h: rowHeight, borderRadius: "lg", pl: "10px", pr: !toggle && onUnpin ? `calc(10px + ${UNPIN_SIZE})` : "10px", fontWeight: 500, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isActive ? LADDER.active : "transparent", color: theme.colors.sidebar.mutedIcon, _hover: { backgroundColor: isActive ? LADDER.activeHover : LADDER.hover }, cursor: "pointer", transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), onClick: (e) => {
                 if (item.url && isBrowserNavigationGesture(e))
                     return;
                 e.preventDefault();
                 onItemClick(item);
-            }, children: _jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: toggle ? undefined : 1, minW: 0, children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: "md", color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), toggle && readBadge(item.badge).value != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && (_jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, lineHeight: "1", flex: "1", color: isActive ? activeAccent.label : theme.colors.white, fontWeight: isActive ? 600 : 500, _groupHover: isActive ? undefined : { color: theme.colors.white }, children: item.title }))] }), !toggle && renderBadge(item.badge)] }) }));
+            }, children: _jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: toggle ? undefined : 1, minW: 0, children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: "md", color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: SIDEBAR_INK_TRANSITION }), toggle && readBadge(item.badge).value != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && (_jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, lineHeight: "1", flex: "1", color: isActive ? activeAccent.label : theme.colors.white, fontWeight: isActive ? 600 : 500, _groupHover: isActive ? undefined : { color: theme.colors.white }, children: item.title }))] }), !toggle && renderBadge(item.badge)] }) }));
         return (_jsxs(Box, { as: "li", listStyleType: "none", position: "relative", "data-group": "", children: [toggle ? (_jsx(ToolTip, { label: item.title, placement: "right", children: anchor })) : (anchor), onUnpin && !toggle && (_jsx(Box, { as: "button", type: "button", "aria-label": text.unpin.replace("{title}", item.title), onClick: () => onUnpin(item), position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: UNPIN_SIZE, h: UNPIN_SIZE, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "lg", border: "none", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedIcon, opacity: overlay ? 1 : 0, _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, _hover: {
                         bg: LADDER.active,
                         color: theme.colors.white,
-                    }, transition: "opacity 0.12s, background 0.12s", sx: sidebarFocusStyles(theme.colors), children: _jsx(Icon, { as: PinOff, fontSize: "sm" }) }))] }, String(item.id)));
+                    }, transition: UNPIN_TRANSITION, sx: sidebarFocusStyles(theme.colors), children: _jsx(Icon, { as: PinOff, fontSize: "sm" }) }))] }, String(item.id)));
     };
     const disclosureLabel = showAll
         ? text.showLess
         : text.showMore.replace("{count}", String(hiddenCount));
-    const disclosureButton = (_jsxs(Box, { as: "button", type: "button", "aria-expanded": showAll, "aria-label": toggle ? disclosureLabel : undefined, onClick: () => setShowAll((v) => !v), display: "flex", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "9px", w: "100%", h: rowHeight, px: "10px", borderRadius: "lg", border: "none", borderLeft: "2px solid transparent", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedLabel, fontSize: SIDEBAR_ROW.fontSize, fontWeight: "medium", _hover: {
+    const disclosureButton = (_jsxs(Box, { as: "button", type: "button", "aria-expanded": showAll, "aria-label": toggle ? disclosureLabel : undefined, onClick: () => setShowAll((v) => !v), display: "flex", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "9px", w: "100%", h: rowHeight, px: "10px", borderRadius: "lg", border: "none", borderLeft: "2px solid transparent", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedLabel, fontSize: SIDEBAR_ROW.fontSize, fontWeight: 500, _hover: {
             backgroundColor: LADDER.hover,
             color: theme.colors.white,
-        }, transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), children: [_jsx(Icon, { as: showAll ? ChevronUp : ChevronDown, fontSize: "md", flexShrink: 0 }), !toggle && _jsx("span", { children: disclosureLabel })] }));
+        }, transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), children: [_jsx(Icon, { as: showAll ? ChevronUp : ChevronDown, fontSize: "md", flexShrink: 0 }), !toggle && _jsx("span", { children: disclosureLabel })] }));
     return (_jsxs(Box, { mb: toggle ? "5px" : "3px", "data-testid": "sidebar-pinned", children: [_jsx(Box, { id: headingId, as: "h2", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "9.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", sx: toggle ? VISUALLY_HIDDEN : undefined, children: label }), _jsxs(Box, { as: "ul", "aria-labelledby": headingId, display: "flex", flexDirection: "column", gap: "2px", m: 0, p: 0, children: [visible.map(renderRow), hiddenCount > 0 && (_jsx(Box, { as: "li", listStyleType: "none", children: toggle ? (_jsx(ToolTip, { label: disclosureLabel, placement: "right", children: disclosureButton })) : (disclosureButton) }))] }), _jsx(Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, mt: overlay ? "6px" : "8px", mb: overlay ? "3px" : "5px" })] }));
 };
 export default PinnedSection;

package/dist/esm/Components/SideBar/components/TextTruncation.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
-import { Tooltip, Text, Box } from "@chakra-ui/react";
+import { Text, Box } from "@chakra-ui/react";
+import { observeResize } from "../../../Hooks/sharedResizeObserver.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
+// NOTE: an explicit preventOverflow opts out of ToolTip's 8px edge padding, keeping Chakra's placement.
+const CHAKRA_DEFAULT_OVERFLOW = [{ name: "preventOverflow", options: {} }];
 const TruncatedTextWithTooltip = ({ children, ...props }) => {
     const textRef = useRef(null);
     const shadowRef = useRef(null);
@@ -16,13 +20,11 @@ const TruncatedTextWithTooltip = ({ children, ...props }) => {
             }
         };
         checkTruncation();
-        const resizeObserver = new ResizeObserver(checkTruncation);
-        if (textRef.current) {
-            resizeObserver.observe(textRef.current);
-        }
-        return () => resizeObserver.disconnect();
+        if (!textRef.current)
+            return;
+        return observeResize(textRef.current, checkTruncation);
     }, [children]);
-    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", children: _jsx(Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", 
+    return (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", openDelay: 0, closeOnClick: true, modifiers: CHAKRA_DEFAULT_OVERFLOW, children: _jsx(Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", 
                     // NOTE: padding lifts descenders out of the clip box; margin keeps the label's height.
                     py: "0.35em", my: "-0.35em", textOverflow: "ellipsis", maxW: "100%", ...props, children: children }) }), _jsx(Box, { ref: shadowRef, position: "fixed", top: "-9999px", left: "-9999px", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py, children: children })] }));
 };

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

@@ -1,10 +1,11 @@
+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: "13px",
+    fontSize: fontSizes["xs-plus"],
     iconSize: "1rem",
 };
 /** Header/footer text around the rows; every row itself uses SIDEBAR_ROW.fontSize. */

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

@@ -3,6 +3,7 @@ import { 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 EmptyState from "../EmptyState/EmptyState.js";
 const DEFAULT_LABELS = {
     title: "Recent Sign-in Devices",
@@ -14,20 +15,21 @@ const DEFAULT_LABELS = {
 const SignInActivityTable = ({ devices, isLoading = false, labels: labelOverrides, }) => {
     const { colors } = useCustomTheme();
     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 headBg = bandOn(colors.backgroundColor.tableHeader, surface);
     const shadow = colors.boxShadow.default;
     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: `0 1px 2px ${shadow}`, overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, 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: 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/Skeletons/Skeletons.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react";
 /** 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, }) {
-    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, borderRadius: borderRadius, children: children })), type === "circle" && _jsx(SkeletonCircle, { size: size, speed: speed }), type === "text" && (_jsx(SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
+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

@@ -6,11 +6,15 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 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";
-/** Auto-advancing image/content carousel — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
+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, mobileImages, }) => {
     var _a, _b;
     const { colors } = useCustomTheme();
     const [currentIndex, setCurrentIndex] = useState(0);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = 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;
@@ -21,14 +25,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 && !reducedMotion) {
             timeoutRef.current = setTimeout(nextSlide, interval);
         }
         return () => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
         };
-    }, [currentIndex, interval, nextSlide]);
+    }, [currentIndex, interval, nextSlide, hovered, focused, reducedMotion]);
     useEffect(() => {
         if (currentIndex >= slides.length) {
             setCurrentIndex(0);
@@ -41,7 +45,10 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
     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", children: [_jsx(Flex, { w: `${slides.length * 100}%`, transform: `translateX(-${(currentIndex * 100) / slides.length}%)`, transition: "transform 0.5s ease", children: [...slides]
+    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

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

@@ -5,6 +5,7 @@ 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. */
@@ -28,7 +29,7 @@ const SpecTable = ({ items, columns = 1, collapsedCount, expanded, defaultExpand
     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: { fontVariantNumeric: "tabular-nums" }, children: item.value })] }, `${item.label}-${i}`));
+                    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/StageProgress/StageItem.js

@@ -4,13 +4,17 @@ import { Box, Flex } from "@chakra-ui/react";
 import { Check } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.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;
@@ -32,11 +36,7 @@ const StageItem = ({ label, index, total, state, variant = "chevron", size = "md
     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"
@@ -81,12 +81,12 @@ const StageItem = ({ label, index, total, state, variant = "chevron", size = "md
         : undefined;
     const showTooltip = ((_a = label === null || label === void 0 ? void 0 : label.length) !== null && _a !== void 0 ? _a : 0) > tooltipThreshold;
     // 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 ? 0.55 : 1, transition: "color 0.18s ease, filter 0.18s ease", sx: interactive ? focusVisibleStyles(theme.colors) : undefined, _hover: interactive
+    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 ? 0.55 : 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: "background 0.18s ease, border-color 0.18s ease", 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 })] })] }));
+            : 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

@@ -4,6 +4,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.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",
@@ -27,7 +28,7 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
         return "upcoming";
     };
     const total = stages.length;
-    return (_jsx(Box, { as: variant === "stepper" ? "ol" : undefined, 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"), children: stages.map((stage, index) => {
+    return (_jsx(Box, { as: variant === "stepper" ? "ol" : undefined, 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"), [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;

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

@@ -6,6 +6,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.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" },
@@ -19,25 +20,20 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     const s = sizeMap[size];
     const interactive = !isReadOnly && !disabled;
     useEffect(() => {
-        var _a, _b;
         if (state === "active" && scrollIntoViewWhenActive && ref.current) {
-            (_b = (_a = ref.current).scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
-                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" }));
+    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 ? 0.55 : 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, 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: "background 0.18s ease, color 0.18s ease", _groupHover: interactive ? { bg: palette.strong, color: palette.onStrong } : undefined, children: label })] }));
+                            : 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 }));