pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.67

package/dist/esm/Components/UserDetails/UserDetails.js

@@ -14,6 +14,9 @@ import PersonChip from "../PersonChip/PersonChip.js";
 import AddUserModal from "./AddUserModal.js";
 import ChangeRoleModal from "./ChangeRoleModal.js";
 import DeactivateConfirmModal from "./DeactivateConfirmModal.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { onActivationKey } from "../Common/activationKey.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 const DEFAULT_LABELS = {
     teamMembers: "Team Members",
     refreshList: "Refresh list",
@@ -79,12 +82,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                         background: isSelected
                                             ? rowBackgrounds.selectedActive
                                             : rowBackgrounds.active,
-                                    }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", role: "button", tabIndex: 0, "aria-current": isSelected ? true : undefined, _focusVisible: focusVisibleRing(colors), onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), onKeyDown: (e) => {
-                                        if (e.key !== "Enter" && e.key !== " ")
-                                            return;
-                                        e.preventDefault();
-                                        onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user);
-                                    }, children: [isSelected && (_jsx(Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), _jsx(PersonChip, { size: "sm", name: `${user.firstName} ${user.lastName}`, imageUrl: user.profile, secondary: user.email }), renderStatusBadge(user.isActive)] }, user.id));
+                                    }, transition: BACKGROUND_TRANSITION, borderRadius: "lg", position: "relative", role: "button", tabIndex: 0, "aria-current": isSelected ? true : undefined, _focusVisible: focusVisibleRing(colors), onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), onKeyDown: onActivationKey(() => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user)), children: [isSelected && (_jsx(Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), _jsx(PersonChip, { size: "sm", name: `${user.firstName} ${user.lastName}`, imageUrl: user.profile, secondary: user.email }), renderStatusBadge(user.isActive)] }, user.id));
                             }) })) })] }), _jsxs(Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden", children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [_jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && (_jsx(Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: _jsx(UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), _jsx(Box, { flex: 1, overflowY: "auto", tabIndex: 0, role: "region", "aria-label": selectedUser ? labels.userDetails : labels.selectTeamMember, children: isUsersLoading ? (_jsxs(VStack, { spacing: 4, p: 4, align: "stretch", children: [_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(SkeletonCircle, { size: "16" }), _jsxs(Box, { flex: 1, children: [_jsx(Skeleton, { height: "18px", width: "50%", mb: 2 }), _jsx(Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => (_jsxs(Box, { w: "100%", children: [_jsx(Skeleton, { height: "12px", width: "30%", mb: 2 }), _jsx(Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { direction: { base: "column", md: "row" }, alignItems: { base: "flex-start", md: "center" }, justifyContent: "space-between", gap: 4, p: 4, borderBottom: "1px solid", borderColor: border, children: [_jsxs(Flex, { alignItems: "center", gap: 4, children: [_jsxs(Box, { position: "relative", children: [_jsx(Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto }), selectedUser.isCurrent && (_jsx(Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "xs", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none", children: labels.you }))] }), _jsxs(Box, { children: [_jsx(Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), _jsx(Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), _jsxs(HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && (_jsx(Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "xs", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
                                             !selectedUser.isSuperAdmin && (_jsxs(HStack, { spacing: 2, flexWrap: "wrap", children: [!selectedUser.isCurrent && !selectedUser.isActive && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: _jsx(Send, { size: 13 }), isLoading: isInviteLoading, onClick: () => selectedUser.userId != null &&
                                                         (onReinvite === null || onReinvite === void 0 ? void 0 : onReinvite(selectedUser.userId)), children: labels.resendInvitation })), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fontSize: "xs", leftIcon: _jsx(Shield, { size: 13 }), onClick: () => {
@@ -102,7 +100,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                                 const Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : UserRound;
                                                 return (_jsxs(React.Fragment, { children: [_jsxs(Flex, { gap: 3, px: 3, py: 2.5, _hover: {
                                                                 bg: resolveHoverTint(colors.gray[50], surface),
-                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "30px", bg: detailTile, borderRadius: "lg", color: accentTextOnCanvas(colors.primary, detailTile), flexShrink: 0, children: _jsx(Icon, { size: 15 }) }), _jsx(Box, { minWidth: "110px", children: _jsx(Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), _jsx(Box, { flex: 1, children: _jsx(Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && (_jsx(Divider, { borderColor: border }))] }, index));
+                                                            }, alignItems: "center", transition: BACKGROUND_TRANSITION, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "30px", bg: detailTile, borderRadius: "lg", color: accentTextOnCanvas(colors.primary, detailTile), flexShrink: 0, children: _jsx(Icon, { size: 15 }) }), _jsx(Box, { minWidth: "110px", children: _jsx(Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), _jsx(Box, { flex: 1, children: _jsx(Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && (_jsx(Divider, { borderColor: border }))] }, index));
                                             }) })] })] })) : (_jsx(EmptyState, { icon: UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), _jsx(AddUserModal, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
                     await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
                     onAddUserClose();

package/dist/esm/Components/WishlistToggle/WishlistToggle.js

@@ -10,6 +10,7 @@ import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/mot
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
 const HIT_PX = { sm: 32, md: 44, lg: 48 };
 const POP_MS = 320;
 const pop = keyframes `
@@ -46,7 +47,7 @@ const WishlistToggle = ({ selected, defaultSelected = false, onSelectedChange, s
         const ink = on ? colors.semanticText.error : variant === "soft" ? colors.header[900] : colors.textMuted;
         return {
             bg: variant === "soft" ? colors.background[100] : colors.transparent,
-            hoverBg: variant === "soft" ? colors.background[200] : colors.background[100],
+            hoverBg: variant === "soft" ? tonalHover(colors) : tonalHover(colors, colors.background[50], colors.background[100]),
             color: ink,
         };
     })();

package/dist/esm/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { Box } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import zIndices from "../../Theme/tokens/primitives/zIndices.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 const PLACEMENT_STYLE = {
     "top-end": { bottom: "100%", right: 0, marginBottom: "6px" },
     "top-start": { bottom: "100%", left: 0, marginBottom: "6px" },
@@ -12,6 +13,7 @@ const PLACEMENT_STYLE = {
 // Presentational, app-agnostic hover-preview (intent-safe: open delay, close grace, Escape dismisses).
 export default function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs = 350, closeDelayMs = 200, placement = "top-end", onOpenChange, width = "340px", testId = "workspace-tray-preview", }) {
     const theme = useCustomTheme();
+    const cardId = useId();
     const [open, setOpen] = useState(false);
     const openTimer = useRef(null);
     const closeTimer = useRef(null);
@@ -69,7 +71,15 @@ export default function WorkspaceTrayPreview({ children, preview, enabled = true
                 e.stopPropagation();
                 closeNow();
             }
-        }, children: [children, open && (_jsx(Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.surfaceRaised, borderWidth: "1px", borderColor: theme.colors.boxborder[200], borderRadius: "lg", boxShadow: "xl", zIndex: zIndices.popover, pointerEvents: "auto", p: 3, textAlign: "left", color: theme.colors.text[700], cursor: "default", onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, "data-testid": testId, children: typeof preview === "function"
+        }, children: [typeof children === "function"
+                ? children({
+                    triggerProps: {
+                        "aria-expanded": open,
+                        "aria-controls": open ? cardId : undefined,
+                        "aria-describedby": open ? cardId : undefined,
+                    },
+                })
+                : children, open && (_jsx(Box, { id: cardId, position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.surfaceRaised, borderWidth: "1px", borderColor: raisedRule(theme.colors), borderRadius: "lg", boxShadow: "xl", zIndex: zIndices.popover, pointerEvents: "auto", p: 3, textAlign: "left", color: theme.colors.text[700], cursor: "default", "data-testid": testId, children: typeof preview === "function"
                     ? preview({ close: closeNow })
                     : preview }))] }));
 }

package/dist/esm/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -5,6 +5,8 @@ import { ExternalLink, Minus, X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import zIndices from "../../Theme/tokens/primitives/zIndices.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 // NOTE: no maximize/restore toggle (removed by product decision); onMedium/onMaximize stay as deprecated no-ops.
 const WINDOW_SIZE = { maxW: "88rem", h: "92vh" };
 const WindowTitle = ({ testId, color, children }) => {
@@ -32,7 +34,7 @@ export default function WorkspaceWindow({ title, state, children, onMinimize, on
                 onMouseDown: (e) => {
                     if (e.target === e.currentTarget)
                         onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick();
-                }, "data-testid": `${testId}-backdrop`, children: _jsxs(Box, { bg: theme.colors.surfaceRaised, borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: theme.colors.boxborder[200], bg: theme.colors.background[100], flexShrink: 0, children: [_jsx(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), _jsxs(HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? (_jsx(IconButton, { "aria-label": (_a = labels === null || labels === void 0 ? void 0 : labels.openFullPage) !== null && _a !== void 0 ? _a : "Open full page", size: "xs", variant: "ghost", icon: _jsx(ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? (_jsx(IconButton, { "aria-label": (_b = labels === null || labels === void 0 ? void 0 : labels.minimize) !== null && _b !== void 0 ? _b : "Minimize", size: "xs", variant: "ghost", icon: _jsx(Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? (_jsx(IconButton, { "aria-label": (_c = labels === null || labels === void 0 ? void 0 : labels.close) !== null && _c !== void 0 ? _c : "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: _jsx(X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), _jsx(Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
+                }, "data-testid": `${testId}-backdrop`, children: _jsxs(Box, { bg: theme.colors.surfaceRaised, borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: raisedRule(theme.colors), bg: bandOn(theme.colors.background[100], theme.colors.surfaceRaised), flexShrink: 0, children: [_jsx(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), _jsxs(HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? (_jsx(IconButton, { "aria-label": (_a = labels === null || labels === void 0 ? void 0 : labels.openFullPage) !== null && _a !== void 0 ? _a : "Open full page", size: "xs", variant: "ghost", icon: _jsx(ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? (_jsx(IconButton, { "aria-label": (_b = labels === null || labels === void 0 ? void 0 : labels.minimize) !== null && _b !== void 0 ? _b : "Minimize", size: "xs", variant: "ghost", icon: _jsx(Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? (_jsx(IconButton, { "aria-label": (_c = labels === null || labels === void 0 ? void 0 : labels.close) !== null && _c !== void 0 ? _c : "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: _jsx(X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), _jsx(Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
 }
 const cssLength = (value) => (typeof value === "number" ? `${value}px` : value);
 // Portalled above modal overlays; aria-live keeps Chakra's modal aria-hidden off it, data-no-focus-lock keeps the focus trap off it.

package/dist/esm/Hooks/useOutsideMouseDown.js

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react";
+/** Calls `onOutside` for a document `mousedown` outside every ref; a null ref contains nothing. Unlike Chakra's `useOutsideClick` it never waits for `mouseup`. */
+export const useOutsideMouseDown = (refs, onOutside, { enabled = true, capture = false, includeClick = false } = {}) => {
+    const latest = useRef({ refs, onOutside });
+    useEffect(() => {
+        latest.current = { refs, onOutside };
+    });
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const handle = (event) => {
+            const target = event.target;
+            if (latest.current.refs.some((ref) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(target); }))
+                return;
+            latest.current.onOutside(event);
+        };
+        document.addEventListener("mousedown", handle, capture);
+        if (includeClick)
+            document.addEventListener("click", handle, capture);
+        return () => {
+            document.removeEventListener("mousedown", handle, capture);
+            if (includeClick)
+                document.removeEventListener("click", handle, capture);
+        };
+    }, [enabled, capture, includeClick]);
+};

package/dist/esm/Hooks/usePreferences.js

@@ -16,28 +16,45 @@ const constructUrl = ({ baseUrl, key, page, name, orgId }) => {
     const queryString = params.toString();
     return `${baseUrl}${queryString ? `?${queryString}` : ""}`;
 };
+const NO_PREFERENCES = [];
 const useGetPreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
-    const [preferences, setPreferences] = useState([]);
-    // NOTE: must start true — KanbanBoard's hydration effect reads this before this hook's mount effect runs.
-    const [loading, setLoading] = useState(() => Boolean(baseUrl));
+    const url = baseUrl ? constructUrl({ baseUrl, key, page, name, orgId }) : "";
+    const requestKey = url ? JSON.stringify([url, authToken]) : "";
+    const [settled, setSettled] = useState({
+        requestKey: "",
+        preferences: NO_PREFERENCES,
+    });
     useEffect(() => {
-        if (!baseUrl) {
+        if (!url) {
             return;
         }
-        setLoading(true);
-        const url = constructUrl({ baseUrl, key, page, name, orgId });
+        let cancelled = false;
         fetch(url, {
             headers: {
                 Authorization: authToken,
             },
         })
             .then((response) => response.json())
-            .then((data) => setPreferences(data))
-            .catch((error) => console.error(error))
-            .finally(() => setLoading(false));
-        /* eslint-disable */
-    }, [baseUrl]);
-    return { preferences, loading };
+            .then((data) => {
+            if (!cancelled)
+                setSettled({ requestKey, preferences: data });
+        })
+            .catch((error) => {
+            if (cancelled)
+                return;
+            console.error(error);
+            setSettled({ requestKey, preferences: NO_PREFERENCES });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [url, authToken, requestKey]);
+    const isSettled = settled.requestKey === requestKey;
+    return {
+        preferences: isSettled ? settled.preferences : NO_PREFERENCES,
+        // NOTE: derived so KanbanBoard never reads a stale loading=false, on mount or re-key.
+        loading: Boolean(baseUrl) && !isSettled,
+    };
 };
 const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
     const [loading, setLoading] = useState(false);
@@ -55,6 +72,7 @@ const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", auth
             body: JSON.stringify({ key, page, name, json: data }),
         })
             .then((r) => r.json())
+            .then(() => setError(null))
             .catch((e) => setError(e))
             .finally(() => setLoading(false));
     }, [baseUrl, orgId, authToken, key, page, name]);

package/dist/esm/Hooks/useScrollableRegion.js

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from "react";
+import { observeResize } from "./sharedResizeObserver.js";
+const FOCUSABLE_CONTENT = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, iframe, [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+const USER_SCROLLABLE = /auto|scroll/;
+const SLACK_PX = 1;
+const needsFocusStop = (el) => {
+    const { overflowX, overflowY } = getComputedStyle(el);
+    const scrollsX = USER_SCROLLABLE.test(overflowX) && el.scrollWidth > el.clientWidth + SLACK_PX;
+    const scrollsY = USER_SCROLLABLE.test(overflowY) && el.scrollHeight > el.clientHeight + SLACK_PX;
+    return (scrollsX || scrollsY) && !el.querySelector(FOCUSABLE_CONTENT);
+};
+export function useScrollableRegion({ label, labelledBy, keepRole = false, } = {}) {
+    const [element, setElement] = useState(null);
+    const [isStop, setIsStop] = useState(false);
+    const measure = useCallback(() => setIsStop(element !== null && needsFocusStop(element)), [element]);
+    useEffect(() => {
+        if (!element)
+            return undefined;
+        return observeResize(element, measure);
+    }, [element, measure]);
+    // NOTE: also runs after every commit; an equal state bails out, so no loop.
+    useEffect(measure);
+    const named = Boolean(label || labelledBy);
+    const props = isStop
+        ? {
+            tabIndex: 0,
+            role: named && !keepRole ? "region" : undefined,
+            "aria-label": label,
+            "aria-labelledby": labelledBy,
+        }
+        : {};
+    return { ref: setElement, props };
+}

package/dist/esm/Theme/chakra/Menu.styles.js

@@ -5,6 +5,8 @@ import { optionRowInk, optionRowWeight } from "../../Components/Select/optionRow
 import { OPTION_ROW_SIZES, OPTION_ROW_RADIUS } from "../tokens/primitives/optionRowSizes.js";
 import { paletteOf } from "./paletteFromTheme.js";
 import { POPUP_SURFACE } from "./overlay.styles.js";
+import { isDarkCanvas } from "../tokens/builders/accentText.js";
+import { raisedRule } from "../tokens/builders/surfaceRaised.js";
 const itemRowSpec = OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(menuAnatomy.keys);
 const $bg = cssVar("menu-bg");
@@ -25,6 +27,10 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderColor: colors.boxborder[200],
             ...POPUP_SURFACE,
         },
+        divider: {
+            borderColor: raisedRule(colors),
+            ...(isDarkCanvas(colors.surfaceRaised) && { opacity: 1 }),
+        },
         item: {
             color: optionRowInk(colors, false),
             minH: itemRowSpec.minH,

package/dist/esm/Theme/chakra/componentStyles.js

@@ -74,7 +74,7 @@ const Badge = {
         size: "sm",
     },
 };
-// NOTE: fixes Chakra's FormErrorMessage/Icon hardcoding red.500 — same AA gap as our ErrorComponent.
+// NOTE: fixes Chakra's FormErrorMessage/Icon hardcoding red.500, which misses AA on the canvas.
 const FormError = {
     baseStyle: ({ theme }) => {
         const palette = paletteOf(theme);

package/dist/esm/Theme/chakra/focusRing.styles.js

@@ -6,9 +6,9 @@ export const FOCUS_RING_WIDTH = 4;
 // NOTE: a box-shadow, not an outline — drawn outside the border box so it never resizes the control.
 export const focusRingShadow = (colors) => `0 0 0 ${FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
     `0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
-/** For controls whose rounded shell clips overflow: the same halo and ring, drawn inside the border box. */
-export const insetFocusRingShadow = (colors) => `inset 0 0 0 ${FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
-    `inset 0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
+/** For controls whose shell clips overflow: ring on the edge, halo inside, so an opaque child leaves the ring. */
+export const insetFocusRingShadow = (colors) => `inset 0 0 0 ${FOCUS_RING_WIDTH - FOCUS_HALO_WIDTH}px ${colors.focusRing.ring}, ` +
+    `inset 0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.halo}`;
 // NOTE: stacked pseudo-classes raise specificity above Chakra's _hover, so a hovered+focused button keeps its ring.
 export const FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
 // NOTE: transparent outline isn't decorative — forced-colors mode drops box-shadow but repaints an outline.

package/dist/esm/Theme/chakra/paletteFromTheme.js

@@ -1,6 +1,19 @@
 import { assertPixelizePalette } from "../assertPalette.js";
+import { scaleNamed } from "../tokens/builders/paletteScale.js";
 /** Chakra hands style functions an untyped theme; this is the boundary that makes it typed. */
 export const paletteOf = (theme) => assertPixelizePalette(theme);
-const asScale = (value) => typeof value === "object" && value !== null ? value : undefined;
-// NOTE: colorScheme is consumer-supplied and can name a built-in we never themed — unknowns resolve to gray.
-export const scaleFor = (palette, colorScheme) => { var _a; return (_a = asScale(palette[colorScheme])) !== null && _a !== void 0 ? _a : palette.gray; };
+const warned = new Set();
+export const warnUnknownColorScheme = (colorScheme) => {
+    if (process.env.NODE_ENV === "production" || warned.has(colorScheme))
+        return;
+    warned.add(colorScheme);
+    console.warn(`[pixelize-design-library] colorScheme "${colorScheme}" is not a themed colour scale; using the fallback scale.`);
+};
+// NOTE: colorScheme is consumer-supplied and can name a built-in we never themed — unknowns use the fallback.
+export const scaleFor = (palette, colorScheme, fallback = palette.gray) => {
+    const scale = scaleNamed(palette, colorScheme);
+    if (scale)
+        return scale;
+    warnUnknownColorScheme(colorScheme);
+    return fallback;
+};

package/dist/esm/Theme/provider/ThemeSwitcher.js

@@ -78,7 +78,7 @@ const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
                 const isSelected = mode === value;
                 return (_jsx(Button, { ref: (node) => {
                         optionRefs.current[index] = node;
-                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { outline: "2px solid transparent", outlineOffset: "2px" }, children: _jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, tabIndex: isSelected ? 0 : -1, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { outline: "2px solid transparent", outlineOffset: "2px" }, children: _jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
             }), showBrandPicker && _jsx(BrandMenu, { size: size })] }));
 };
 const MenuVariant = ({ size, label, showBrandPicker, }) => {

package/dist/esm/Theme/tokens/builders/filledSurface.js

@@ -37,8 +37,9 @@ export const solidFillRung = (scale, white, canvas) => {
     return rungAwayFromCanvas(scale, canvas);
 };
 const steppedRung = (base, canvas, step) => {
-    const dir = isDarkCanvas(canvas) ? -100 : 100;
-    return Math.min(900, Math.max(50, base + dir * step));
+    const dir = isDarkCanvas(canvas) ? -1 : 1;
+    const index = RUNGS.indexOf(base) + dir * step;
+    return RUNGS[Math.min(RUNGS.length - 1, Math.max(0, index))];
 };
 const steppedTowardBase = (from, base) => RUNGS[RUNGS.indexOf(from) + (from > base ? -1 : 1)];
 /**

package/dist/esm/Theme/tokens/builders/focusRing.js

@@ -1,5 +1,6 @@
 import { contrastRatio, hexToHsl, withLightness } from "./color.js";
 import { AA_NON_TEXT } from "./outlineRung.js";
+import { bandOn } from "./planeStep.js";
 /** Same lightness granularity `buildDarkPalette` walks its accents at. */
 const LIGHTNESS_STEP = 0.5;
 // NOTE: not settleAcross — a ring squeezed between a light canvas and a dark fill needs the closest color that clears both, not a per-surface lift.
@@ -21,10 +22,12 @@ export function settleBetween(hex, backdrops, target = AA_NON_TEXT) {
     const worst = (candidate) => Math.min(...backdrops.map((backdrop) => contrastRatio(candidate, backdrop)));
     return worst(ends[0]) >= worst(ends[1]) ? ends[0] : ends[1];
 }
-// NOTE: only canvas + card surface — including the fill or every named surface leaves no solvable hue.
+// NOTE: canvas, card and the table header band — including the fill or every named surface leaves no solvable hue.
 export const focusRingBackdrops = (source) => [
     source.backgroundColor.main,
     source.background[50],
+    source.backgroundColor.tableHeader,
+    bandOn(source.backgroundColor.tableHeader, source.background[50]),
 ];
 // NOTE: replaces Chakra's stock ring (a fixed blue that measured under 2:1 on every brand).
 export const buildFocusRing = (source) => {

package/dist/esm/Theme/tokens/builders/paletteScale.js

@@ -0,0 +1,6 @@
+const isColorScale = (value) => typeof value === "object" && value !== null && "500" in value;
+export const scaleNamed = (colors, name) => {
+    const entries = colors;
+    const value = entries[name];
+    return isColorScale(value) ? value : undefined;
+};

package/dist/esm/Utils/tabular.js

@@ -0,0 +1,56 @@
+const NEEDS_QUOTES = /[",\r\n]/;
+const FORMULA_TRIGGER = /^[=+\-@\t\r]/;
+const PLAIN_NUMBER = /^[+-]?(?:\d[\d,]*(?:\.\d*)?|\.\d+)%?$/;
+const BOM = "";
+const RESERVED_FILE_CHARS = /[\\/:*?"<>|\p{Cc}]/gu;
+const MAX_FILE_NAME = 80;
+const REVOKE_DELAY_MS = 1000;
+const quote = (text) => (NEEDS_QUOTES.test(text) ? `"${text.replace(/"/g, '""')}"` : text);
+const looksLikeFormula = (text) => FORMULA_TRIGGER.test(text) && !PLAIN_NUMBER.test(text);
+function cellText(value, escapeFormulas) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "number")
+        return Number.isFinite(value) ? String(value) : "";
+    const text = String(value);
+    if (typeof value !== "string" || !escapeFormulas)
+        return text;
+    return looksLikeFormula(text) ? `'${text}` : text;
+}
+function readCell(row, column) {
+    const field = row[column.key];
+    const format = column.format;
+    return format === undefined ? field : format(field, row);
+}
+/** RFC 4180 CSV: header line, then one CRLF-separated line per row. */
+export function toCsv(rows, columns, { bom = false } = {}) {
+    if (columns.length === 0)
+        return "";
+    const lines = [columns.map((column) => quote(column.header)).join(",")];
+    for (const row of rows) {
+        lines.push(columns.map((column) => quote(cellText(readCell(row, column), column.escapeFormulas !== false))).join(","));
+    }
+    return (bom ? BOM : "") + lines.join("\r\n");
+}
+/** Replaces path and reserved characters with `-`; caps at 80 characters, keeping the extension. */
+export function safeFileName(fileName) {
+    const cleaned = fileName.replace(RESERVED_FILE_CHARS, "-").trim().replace(/^[.\s]+/, "");
+    if (cleaned === "")
+        return "export";
+    if (cleaned.length <= MAX_FILE_NAME)
+        return cleaned;
+    const dot = cleaned.lastIndexOf(".");
+    const extension = dot > 0 && cleaned.length - dot <= 8 ? cleaned.slice(dot) : "";
+    return cleaned.slice(0, MAX_FILE_NAME - extension.length).replace(/[\uD800-\uDBFF]$/, "") + extension;
+}
+/** Saves `blob` as `safeFileName(fileName)`, then revokes its object URL. */
+export function downloadBlob(blob, fileName) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = safeFileName(fileName);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), REVOKE_DELAY_MS);
+}

package/dist/esm/index.js

@@ -111,12 +111,8 @@ debounce,
 // account handoff
 isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, };
 export default withTheme;
-// ---------------------------------------------------------------------------
-// Theme switching (added in 2.4.0) — additive only.
-//
-// Opt-in: `withTheme` is unchanged and stays light-only, so existing apps render
-// exactly as before. Wrap an app in `PixelizeThemeProvider` to get light/dark/system.
-// ---------------------------------------------------------------------------
+// Theme switching (2.4.0), opt-in: `withTheme` stays light-only.
+// Wrap an app in `PixelizeThemeProvider` to get light/dark/system.
 export { PixelizeThemeProvider, useThemeMode, ThemeSwitcher, DEFAULT_FONT_SIZE, FONT_SIZE_OPTIONS, isFontSize, resolveFontSize, useFontSizeSync, } from "./Theme/provider/index.js";
 export { AppearanceSettings } from "./Components/AppearanceSettings/AppearanceSettings.js";
 /** Light + dark Chakra theme per brand. `ThemesList` remains the light-only list. */
@@ -124,17 +120,14 @@ export { brandThemes } from "./Theme/index.js";
 // Pure, platform-agnostic tokens — also consumed by the Pixelize mobile design library.
 export { lightPalettes, darkPalettes, palettes, themeNames, } from "./Theme/tokens/brands/index.js";
 export { buildDarkPalette } from "./Theme/tokens/builders/buildDarkPalette.js";
-// Contrast-resolved recipes for the two surfaces apps kept hand-rolling (and failing AA on):
-// status chips and generated avatars. Consumers pass a scale/seed and get tokens that already
-// clear the bar, instead of pinning hexes that go stale when a palette moves.
+// Contrast-resolved recipes for status chips and generated avatars.
+// They already clear AA, unlike hexes a consumer pins by hand.
 export { AA_NON_TEXT, liftToContrast, withOutlineRung, } from "./Theme/tokens/builders/outlineRung.js";
 // The three backgrounds a selectable row rests on, for a consumer's own list. Neutral by
 // construction, so the canvas ink stays readable on every one of them.
 export { listRowBackgrounds } from "./Theme/tokens/builders/rowStates.js";
-// The two-tone `:focus-visible` indicator, derived per brand per mode. `buildFocusRing` resolves
-// the pair from a palette; `focusVisibleStyles` is the ready-made Chakra pseudo-selector block a
-// consumer's own control can spread to get the same ring Button draws. Both exist because Chakra's
-// `shadows.outline` is one hardcoded blue that fails WCAG 1.4.11 on every Pixelize palette.
+// Two-tone `:focus-visible` ring per brand and mode, matching Button's.
+// Chakra's `shadows.outline` fails WCAG 1.4.11 on every palette.
 export { buildFocusRing, settleBetween, withFocusRing } from "./Theme/tokens/builders/focusRing.js";
 export { focusRingShadow, focusVisibleRing, focusVisibleStyles, FOCUS_VISIBLE_OVER_STATE, FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH, } from "./Theme/chakra/focusRing.styles.js";
 export { AVATAR_SEEDS, avatarFillFor, meetsBodyText, resolveAvatarFill, resolveStatusTone, } from "./Theme/tokens/builders/statusTone.js";
@@ -144,10 +137,8 @@ export { toWords } from "./Utils/functions.js";
 export { useDebouncedCallback, useDebouncedValue } from "./Hooks/useDebounce.js";
 export { CATEGORICAL_SERIES, chartAxisLabelColor, chartInk, chartMode, getCategoricalSeriesColors, getDefaultSeriesColors, labelOnSeries, } from "./Theme/tokens/builders/chartColorsFromTheme.js";
 export { useChartTheme } from "./Theme/useChartTheme.js";
-// WCAG contrast + accent-picking helpers this library uses internally to keep text readable
-// against any canvas/fill a palette produces. Pure and dependency-free — consumers building
-// custom components against `ColorScale`/`PaletteProps` tokens can reuse the same logic instead
-// of re-deriving contrast math themselves.
+// WCAG contrast and accent-picking helpers, pure and dependency-free.
+// For custom components built on `ColorScale`/`PaletteProps` tokens.
 export { statusGradient, inkSafeGradient, chipFill, chipBorder, ACCENT_GRADIENT, STATUS_INK, } from "./Components/PlanPill/planPillGradient.js";
 export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, accentTextOnPlanes, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText.js";
 // Filled-surface helpers — use whenever you paint a `bg` from a ColorScale (buttons, badges,
@@ -155,16 +146,14 @@ export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, accentTextOnPla
 export { solidFillRung, darkerFillRung, labelOnFill, resolveFilledSurface, } from "./Theme/tokens/builders/filledSurface.js";
 // Ink for a custom option row (a `SearchSelect` `option.view` or `Select` `renderOption` node).
 export { optionRowInk, optionRowWeight, optionRowDescriptionInk, optionRowFill, optionRowCursorSx, } from "./Components/Select/optionRowInk.js";
-// Pure color math backing the helpers above (and `buildDarkPalette`) — no Chakra/React/DOM
-// dependency, safe for the mobile port. `relativeLuminance`/`contrastRatio` are the WCAG 2.1
-// primitives; `compositeOver` flattens a translucent color onto a backdrop first (an alpha
-// color has no defined luminance on its own, so measure the composited result, not the tint).
+// Pure color math behind the helpers above, with no Chakra, React or DOM.
+// NOTE: composite an alpha color onto its backdrop before measuring luminance.
 export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexToHsl, hslToHex, withLightness, mix, relativeLuminance, contrastRatio, } from "./Theme/tokens/builders/color.js";
-// Calendar day marking (`DatePicker` + `isRange`). Exported so a consumer can build a legend,
-// or a summary line, from the SAME keys, tokens and phrasing the calendar itself paints and
-// announces — a hand-copied legend is how a legend goes stale.
+// Calendar day marking (`DatePicker` + `isRange`): build a legend from the keys,
+// tokens and phrasing the calendar itself uses.
 export { DAY_STATE_KEYS, DAY_CLASS as CALENDAR_DAY_CLASS, isDayStateKey, resolveDayStateVisual, describeDayStates, } from "./Components/DatePicker/dayStates.js";
 export { appInitials, filterApps, matchesShortcut, formatShortcut, buildSuiteApps, } from "./Components/AppSwitcher/AppSwitcherProps.js";
+export { PIXELIZE_SUITE, resolveSuiteApps } from "./Components/AppSwitcher/pixelizeSuite.js";
 export { useAppSwitcherShortcut } from "./Components/AppSwitcher/useAppSwitcherShortcut.js";
 export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Theme/tokens/builders/scrollbar.js";
 export { placeholderInk, placeholderInkOn, fieldSurfaces } from "./Theme/tokens/builders/placeholderInk.js";
@@ -215,6 +204,7 @@ export { default as AudioRecorder } from "./Components/AudioRecorder/AudioRecord
 export { default as Accordian } from "./Components/Accordion/Accordion.js";
 export { Tabs, TabList, Tab, TabPanels, TabPanel } from "./Components/Tabs/index.js";
 export { default as ConfirmDialog } from "./Components/ConfirmDialog/ConfirmDialog.js";
+export { default as FilteredEmptyState } from "./Components/EmptyState/FilteredEmptyState.js";
 export { default as NotificationBell } from "./Components/NotificationBell/NotificationBell.js";
 export { default as NotificationPanel } from "./Components/NotificationBell/NotificationPanel.js";
 export { default as NotificationList } from "./Components/NotificationBell/NotificationList.js";
@@ -283,6 +273,8 @@ export { default as NewTabLink } from "./Components/NavLauncher/NewTabLink.js";
 export { searchLauncher, searchLauncherSections, flattenScreens, highlightSegments } from "./Components/NavLauncher/match.js";
 export { LauncherSearchEngine } from "./Components/NavLauncher/engine/index.js";
 export { default as WizardDialog, Wizard, wizardTransition, firstInvalidStep, } from "./Components/WizardDialog/WizardDialog.js";
+export { chipHtml, chipify, extractTokens, fieldToken, serializeChips, unknownTokens, } from "./Components/Editor/editorTokens.js";
+export { downloadBlob, safeFileName, toCsv } from "./Utils/tabular.js";
 export { default as Pagination } from "./Components/Pagination/Pagination.js";
 export { defaultPaginationLabels } from "./Components/Pagination/PaginationProps.js";
 export { default as ChoiceCard } from "./Components/ChoiceCard/ChoiceCard.js";