pixelize-design-library 2.4.2-beta.62 → 2.4.2-beta.64

package/dist/Components/UserDetails/UserDetails.js

@@ -44,6 +44,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
@@ -98,6 +99,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const [actionUserId, setActionUserId] = (0, react_1.useState)(null);
     const border = colors.boxborder[200];
     const surface = colors.background[50];
+    const detailTile = (0, planeStep_1.bandOn)(colors.primary[50], surface);
     const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(colors), [colors]);
     const muted = colors.textMuted;
     const heading = colors.text[900];
@@ -138,7 +140,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                                 const Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : lucide_react_1.UserRound;
                                                 return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: {
                                                                 bg: (0, outlineRung_1.resolveHoverTint)(colors.gray[50], surface),
-                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: colors.primary[50], borderRadius: "lg", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
+                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: detailTile, borderRadius: "lg", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, detailTile), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
                                             }) })] })] })) : ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), (0, jsx_runtime_1.jsx)(AddUserModal_1.default, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
                     await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
                     onAddUserClose();

package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -21,7 +21,11 @@ function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs =
     const [open, setOpen] = (0, react_1.useState)(false);
     const openTimer = (0, react_1.useRef)(null);
     const closeTimer = (0, react_1.useRef)(null);
+    const openRef = (0, react_1.useRef)(false);
     const setOpenState = (0, react_1.useCallback)((next) => {
+        if (openRef.current === next)
+            return;
+        openRef.current = next;
         setOpen(next);
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
     }, [onOpenChange]);

package/dist/Components/WorkspaceWindow/WorkspaceWindow.d.ts

@@ -1,3 +1,3 @@
 import type { WorkspaceTrayProps, WorkspaceWindowProps } from "./WorkspaceWindowProps";
-export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId, }: WorkspaceWindowProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function WorkspaceTray({ items, onRestore, onClose, testId, renderItem, }: WorkspaceTrayProps): import("react/jsx-runtime").JSX.Element | null;
+export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, labels, finalFocusRef, testId, }: WorkspaceWindowProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function WorkspaceTray({ items, onRestore, onClose, testId, placement, offset, closeLabel, dirtyLabel, label, renderItem, }: WorkspaceTrayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -12,7 +12,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-// NOTE: no maximize/restore toggle (removed by product decision) — onMedium/onMaximize kept optional for back-compat.
+// 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 }) => {
     const { headerId, setHeaderMounted } = (0, react_1.useModalContext)();
@@ -23,7 +23,8 @@ const WindowTitle = ({ testId, color, children }) => {
     return ((0, jsx_runtime_1.jsx)(react_1.Text, { id: headerId, fontSize: "sm", fontWeight: 600, color: color, noOfLines: 1, "data-testid": `${testId}-title`, children: children }));
 };
 // Presentational floating "workspace window" (Jira-style dialog), headless — the parent owns window state.
-function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId = "workspace-window", }) {
+function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, labels, finalFocusRef, testId = "workspace-window", }) {
+    var _a, _b, _c;
     // Must run before the early return: a minimized render would otherwise skip the hook
     // and change hook order when the window reopens.
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -33,28 +34,34 @@ function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFu
     return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: true, onClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), size: "full", isCentered: true, scrollBehavior: "inside", 
         // Don't discard unsaved work on an accidental overlay click / Esc — the
         // parent decides via the explicit Close control.
-        closeOnOverlayClick: false, closeOnEsc: false, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(3px)" }), (0, jsx_runtime_1.jsx)(react_1.ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", 
+        closeOnOverlayClick: false, closeOnEsc: false, finalFocusRef: finalFocusRef, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(3px)" }), (0, jsx_runtime_1.jsx)(react_1.ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", 
                 // NOTE: size="full" blocks Chakra's own closeOnOverlayClick — detect the outside click ourselves instead.
                 onMouseDown: (e) => {
                     if (e.target === e.currentTarget)
                         onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick();
-                }, "data-testid": `${testId}-backdrop`, children: (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
+                }, "data-testid": `${testId}-backdrop`, children: (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": (_b = labels === null || labels === void 0 ? void 0 : labels.minimize) !== null && _b !== void 0 ? _b : "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
 }
-// Bottom tray of restore pills for minimized WorkspaceWindows — presentational, parent supplies handlers.
-function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", renderItem, }) {
+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.
+function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", placement = "bottom-end", offset, closeLabel, dirtyLabel = "Unsaved changes", label = "Minimized windows", renderItem, }) {
+    var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (!items.length)
         return null;
-    return (
-    // NOTE: floating bottom-right cluster (Gmail/Jira pattern), not a docked bar — needs no reserved page gutter.
-    (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "fixed", bottom: 4, right: 4, zIndex: zIndices_1.default.modal, direction: "row-reverse", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => {
-            const api = {
-                restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),
-                close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),
-            };
-            if (renderItem) {
-                return (0, jsx_runtime_1.jsx)(react_1.Box, { children: renderItem(item, api) }, item.id);
-            }
-            return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: theme.colors.primary[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.primary[100]), boxShadow: "md", borderWidth: "1px", borderColor: theme.colors.primary[200], "data-testid": `${testId}-pill`, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.title }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
-        }) }));
+    const atEnd = placement === "bottom-end";
+    const inset = {
+        bottom: cssLength((_a = offset === null || offset === void 0 ? void 0 : offset.y) !== null && _a !== void 0 ? _a : "1rem"),
+        [atEnd ? "right" : "left"]: cssLength((_b = offset === null || offset === void 0 ? void 0 : offset.x) !== null && _b !== void 0 ? _b : "1rem"),
+    };
+    const ink = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.primary[100]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.Flex, { role: "region", "aria-label": label, "aria-live": "polite", "data-no-focus-lock": "true", position: "fixed", ...inset, zIndex: zIndices_1.default.modal + 1, direction: atEnd ? "row-reverse" : "row", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => {
+                const api = {
+                    restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),
+                    close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),
+                };
+                if (renderItem) {
+                    return (0, jsx_runtime_1.jsx)(react_1.Box, { children: renderItem(item, api) }, item.id);
+                }
+                return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: theme.colors.primary[100], color: ink, boxShadow: "md", borderWidth: "1px", borderColor: theme.colors.primary[200], "data-testid": `${testId}-pill`, children: [item.isDirty ? ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "img", "aria-label": dirtyLabel, boxSize: "0.5rem", borderRadius: "full", bg: "currentColor", flexShrink: 0, "data-testid": `${testId}-dirty` })) : null, (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [item.title, item.subtitle ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontWeight: 400, ml: 1.5, children: item.subtitle })) : null] }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": closeLabel ? closeLabel(item) : "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
+            }) }) }));
 }

package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, RefObject } from "react";
 /**
  * Window state for a WorkspaceWindow.
  * - "medium": default centered dialog (Jira-style)
@@ -6,6 +6,15 @@ import type { ReactNode } from "react";
  * - "minimized": collapsed to a tray pill (rendered by WorkspaceTray, not the window)
  */
 export type WorkspaceWindowState = "medium" | "maximized" | "minimized";
+/** Accessible names of the window's icon controls; omitted keys keep the English default. */
+export interface WorkspaceWindowLabels {
+    /** Default "Minimize". */
+    minimize?: string;
+    /** Default "Close". */
+    close?: string;
+    /** Default "Open full page". */
+    openFullPage?: string;
+}
 /** Props for one WorkspaceWindow instance; minimized windows render separately via WorkspaceTrayProps below. */
 export interface WorkspaceWindowProps {
     /** Title shown in the window's control bar. */
@@ -29,6 +38,13 @@ export interface WorkspaceWindowProps {
      * itself (e.g. minimize-on-backdrop-click) via this callback.
      */
     onOverlayClick?: () => void;
+    /** Translated names for the Minimize, Close and Open full page buttons. */
+    labels?: WorkspaceWindowLabels;
+    /**
+     * Where focus lands when the window closes or minimizes. Without it focus returns to whatever opened the
+     * window, which is gone once it was restored from the tray; point it at a stable element (e.g. the page's main region).
+     */
+    finalFocusRef?: RefObject<HTMLElement>;
     /** Extra controls rendered in the control bar, left of the window buttons. */
     headerActions?: ReactNode;
     /** data-testid for the window container. */
@@ -38,14 +54,34 @@ export interface WorkspaceWindowProps {
 export interface WorkspaceTrayItem {
     id: string;
     title: ReactNode;
+    /** Shows an unsaved-changes dot on the built-in pill; named for screen readers by the tray's `dirtyLabel`. */
+    isDirty?: boolean;
+    /** Secondary text after the title on the built-in pill, e.g. a record type or id. */
+    subtitle?: ReactNode;
 }
-/** Props for the bottom-right cluster of minimized-window pills; renders nothing when items is empty. */
+/** Props for the cluster of minimized-window pills; renders nothing when items is empty. */
 export interface WorkspaceTrayProps {
     /** Minimized items rendered as restore pills along the bottom. */
     items: WorkspaceTrayItem[];
     onRestore?: (id: string) => void;
     onClose?: (id: string) => void;
     testId?: string;
+    /**
+     * Which bottom corner the tray sits in. Default "bottom-end". The tray is portalled above modals and stays
+     * reachable while a modal is open.
+     */
+    placement?: "bottom-end" | "bottom-start";
+    /** Distance from the viewport edges, to clear a sticky bar. Numbers are px, strings any CSS length. Default 1rem each. */
+    offset?: {
+        x?: number | string;
+        y?: number | string;
+    };
+    /** Accessible name for each pill's close button. Default "Close"; pass one that names the item for non-English or per-window labels. */
+    closeLabel?: (item: WorkspaceTrayItem) => string;
+    /** Accessible name of the unsaved dot on a pill with `isDirty`. Default "Unsaved changes". */
+    dirtyLabel?: string;
+    /** Accessible name of the tray region. Default "Minimized windows". */
+    label?: string;
     /**
      * Full override for a single item's pill markup — e.g. to wrap it in an
      * app-specific hover preview, or to show extra state (a dirty dot) the

package/dist/Theme/chakra/Card.styles.d.ts

@@ -67,10 +67,16 @@ export declare const Card: {
                 [$shadow.variable]: string;
             };
         };
+        elevated: {
+            container: {
+                [$border.variable]: string;
+                [$shadow.variable]: string;
+            };
+        };
     } | undefined;
     defaultProps?: {
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "outline" | undefined;
+        variant?: "elevated" | "outline" | undefined;
         colorScheme?: string | undefined;
     } | undefined;
     parts: ("header" | "container" | "body" | "footer")[];

package/dist/Theme/chakra/Card.styles.js

@@ -39,10 +39,13 @@ const variants = {
     outline: definePartsStyle({
         container: { [$border.variable]: "1px", [$shadow.variable]: "none" },
     }),
+    elevated: definePartsStyle({
+        container: { [$border.variable]: "0", [$shadow.variable]: "shadows.card" },
+    }),
 };
 exports.Card = defineMultiStyleConfig({
     baseStyle,
     sizes,
     variants,
-    defaultProps: { variant: "outline", size: "md" },
+    defaultProps: { variant: "elevated", size: "md" },
 });

package/dist/Theme/chakra/Menu.styles.d.ts

@@ -1,8 +1,4 @@
 import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $bg: {
-    variable: string;
-    reference: string;
-};
 declare const $itemBg: {
     variable: string;
     reference: string;
@@ -10,7 +6,8 @@ declare const $itemBg: {
 export declare const Menu: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         list: {
-            [$bg.variable]: string;
+            borderRadius: "xl";
+            boxShadow: "md";
             bg: string;
             color: string;
             borderWidth: string;
@@ -18,10 +15,12 @@ export declare const Menu: {
             borderColor: string;
         };
         item: {
+            color: string;
             minH: string;
             px: string;
             py: string;
             mx: string;
+            width: string;
             fontSize: string;
             borderRadius: "md";
             bg: string;
@@ -41,6 +40,13 @@ export declare const Menu: {
                 [$itemBg.variable]: string;
                 bg: string;
             };
+            "&[aria-checked=true]": {
+                color: string;
+                fontWeight: number;
+                "& .chakra-menu__icon-wrapper": {
+                    color: string;
+                };
+            };
         };
     }) | undefined;
     sizes?: {

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

@@ -4,8 +4,10 @@ exports.Menu = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
 const rowStates_1 = require("../tokens/builders/rowStates");
+const optionRowInk_1 = require("../../Components/Select/optionRowInk");
 const optionRowSizes_1 = require("../tokens/primitives/optionRowSizes");
 const paletteFromTheme_1 = require("./paletteFromTheme");
+const overlay_styles_1 = require("./overlay.styles");
 const itemRowSpec = optionRowSizes_1.OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
 const $bg = (0, react_1.cssVar)("menu-bg");
@@ -24,12 +26,15 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
+            ...overlay_styles_1.POPUP_SURFACE,
         },
         item: {
+            color: (0, optionRowInk_1.optionRowInk)(colors, false),
             minH: itemRowSpec.minH,
             px: itemRowSpec.px,
             py: itemRowSpec.py,
             mx: itemRowSpec.mx,
+            width: `calc(100% - 2 * ${itemRowSpec.mx})`,
             fontSize: itemRowSpec.fontSize,
             borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS,
             bg: "transparent",
@@ -37,6 +42,11 @@ const baseStyle = definePartsStyle(({ theme }) => {
             _hover: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
             _active: { [$itemBg.variable]: activeBg, bg: $itemBg.reference },
             _expanded: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+            "&[aria-checked=true]": {
+                color: (0, optionRowInk_1.optionRowInk)(colors, true),
+                fontWeight: (0, optionRowInk_1.optionRowWeight)(true),
+                "& .chakra-menu__icon-wrapper": { color: colors.accentText },
+            },
         },
     };
 });

package/dist/Theme/chakra/Popover.styles.d.ts

@@ -1,17 +1,9 @@
 import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $popperBg: {
-    variable: string;
-    reference: string;
-};
-declare const $arrowShadowColor: {
-    variable: string;
-    reference: string;
-};
 export declare const Popover: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         content: {
-            [$popperBg.variable]: string;
-            [$arrowShadowColor.variable]: string;
+            borderRadius: "xl";
+            boxShadow: "md";
             bg: string;
             color: string;
             borderWidth: string;
@@ -36,4 +28,3 @@ export declare const Popover: {
     } | undefined;
     parts: ("header" | "content" | "body" | "footer" | "closeButton" | "popper" | "arrow")[];
 };
-export {};

package/dist/Theme/chakra/Popover.styles.js

@@ -4,6 +4,7 @@ exports.Popover = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
 const paletteFromTheme_1 = require("./paletteFromTheme");
+const overlay_styles_1 = require("./overlay.styles");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.popoverAnatomy.keys);
 const $popperBg = (0, react_1.cssVar)("popper-bg");
 const $arrowShadowColor = (0, react_1.cssVar)("popper-arrow-shadow-color");
@@ -19,6 +20,7 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
+            ...overlay_styles_1.POPUP_SURFACE,
         },
     };
 });

package/dist/Theme/chakra/common.web.d.ts

@@ -132,6 +132,10 @@ declare const common: {
         inner: string;
         none: string;
         darkLg: string;
+        card: string;
+        float: string;
+        dialog: string;
+        sheet: string;
     };
     radii: {
         none: string;

package/dist/Theme/chakra/componentStyles.d.ts

@@ -94,10 +94,15 @@ export declare const componentStyles: {
                     [x: string]: string;
                 };
             };
+            elevated: {
+                container: {
+                    [x: string]: string;
+                };
+            };
         } | undefined;
         defaultProps?: {
             size?: "sm" | "md" | "lg" | undefined;
-            variant?: "outline" | undefined;
+            variant?: "elevated" | "outline" | undefined;
             colorScheme?: string | undefined;
         } | undefined;
         parts: ("header" | "container" | "body" | "footer")[];
@@ -168,7 +173,8 @@ export declare const componentStyles: {
     Menu: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             list: {
-                [x: string]: string;
+                borderRadius: "xl";
+                boxShadow: "md";
                 bg: string;
                 color: string;
                 borderWidth: string;
@@ -176,10 +182,12 @@ export declare const componentStyles: {
                 borderColor: string;
             };
             item: {
+                color: string;
                 minH: string;
                 px: string;
                 py: string;
                 mx: string;
+                width: string;
                 fontSize: string;
                 borderRadius: "md";
                 bg: string;
@@ -199,6 +207,13 @@ export declare const componentStyles: {
                     [x: string]: string;
                     bg: string;
                 };
+                "&[aria-checked=true]": {
+                    color: string;
+                    fontWeight: number;
+                    "& .chakra-menu__icon-wrapper": {
+                        color: string;
+                    };
+                };
             };
         }) | undefined;
         sizes?: {
@@ -284,7 +299,8 @@ export declare const componentStyles: {
     Popover: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             content: {
-                [x: string]: string;
+                borderRadius: "xl";
+                boxShadow: "md";
                 bg: string;
                 color: string;
                 borderWidth: string;

package/dist/Theme/chakra/componentStyles.js

@@ -15,6 +15,7 @@ const accentText_1 = require("../tokens/builders/accentText");
 const filledSurface_1 = require("../tokens/builders/filledSurface");
 const outlineRung_1 = require("../tokens/builders/outlineRung");
 const tone_1 = require("../tokens/builders/tone");
+const skeletonShimmer_1 = require("../tokens/builders/skeletonShimmer");
 const tooltipSurface_1 = require("../tokens/builders/tooltipSurface");
 const Drawer_styles_1 = require("./Drawer.styles");
 const Menu_styles_1 = require("./Menu.styles");
@@ -25,7 +26,7 @@ const Card_styles_1 = require("./Card.styles");
 // NOTE: guards untethemed scales (blackAlpha/whiteAlpha) whose rgba() rungs would throw in hexToRgb.
 const isHexColor = (color) => typeof color === "string" && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color);
 const solidFillStyle = (palette, swatch) => {
-    const rung = (0, filledSurface_1.solidFillRung)(swatch, palette.white);
+    const rung = (0, filledSurface_1.solidFillRung)(swatch, palette.white, palette.backgroundColor.main);
     const bg = swatch[rung];
     return {
         bg,
@@ -145,19 +146,22 @@ const $skeletonStart = (0, react_1.cssVar)("skeleton-start-color");
 const $skeletonEnd = (0, react_1.cssVar)("skeleton-end-color");
 // NOTE: fixes Chakra's Skeleton hardcoding gray.100/.400 via `_dark` (dead here) — an explicit startColor/endColor prop still wins.
 const Skeleton = {
-    baseStyle: ({ theme }) => ({
-        [$skeletonStart.variable]: (0, paletteFromTheme_1.paletteOf)(theme).gray[100],
-        [$skeletonEnd.variable]: (0, paletteFromTheme_1.paletteOf)(theme).gray[300],
-        background: $skeletonStart.reference,
-        borderColor: $skeletonEnd.reference,
-    }),
+    baseStyle: ({ theme }) => {
+        const shimmer = (0, skeletonShimmer_1.skeletonShimmer)((0, paletteFromTheme_1.paletteOf)(theme));
+        return {
+            [$skeletonStart.variable]: shimmer.start,
+            [$skeletonEnd.variable]: shimmer.end,
+            background: $skeletonStart.reference,
+            borderColor: $skeletonEnd.reference,
+        };
+    },
 };
 // NOTE: uses Chakra's own shorthand style keys (bg/w/h/pos) + !important — extendTheme deep-merges by key, so mismatched keys let Chakra's stock value win.
 const Radio = {
     baseStyle: ({ theme, colorScheme }) => {
         const palette = (0, paletteFromTheme_1.paletteOf)(theme);
         const swatch = (0, paletteFromTheme_1.scaleFor)(palette, colorScheme);
-        const fill = swatch[(0, filledSurface_1.solidFillRung)(swatch, palette.white)];
+        const fill = swatch[(0, filledSurface_1.solidFillRung)(swatch, palette.white, palette.backgroundColor.main)];
         const dot = (0, filledSurface_1.labelOnFill)(fill, palette.white, palette.black);
         const hoverFill = (0, outlineRung_1.resolveHoverTint)(fill, fill);
         return {

package/dist/Theme/chakra/motion.d.ts

@@ -1,5 +1,6 @@
 import type { SystemStyleObject } from "@chakra-ui/react";
 export declare const REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
+export declare const MOTION_OK_QUERY = "@media (prefers-reduced-motion: no-preference)";
 export declare const usePrefersReducedMotion: () => boolean;
 /** Spread into `sx`: drops transitions and animations when the user asks for less motion. */
 export declare const reducedMotionSx: (overrides?: SystemStyleObject) => SystemStyleObject;

package/dist/Theme/chakra/motion.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducedMotionGlobalStyles = exports.REDUCED_MOTION_SELECTOR = exports.MOTION_KEEP_CLASS = exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.REDUCED_MOTION_QUERY = void 0;
+exports.reducedMotionGlobalStyles = exports.REDUCED_MOTION_SELECTOR = exports.MOTION_KEEP_CLASS = exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.MOTION_OK_QUERY = exports.REDUCED_MOTION_QUERY = void 0;
 const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 exports.REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
+exports.MOTION_OK_QUERY = "@media (prefers-reduced-motion: no-preference)";
 const MEDIA = "(prefers-reduced-motion: reduce)";
 const usePrefersReducedMotion = () => (0, useMatchMedia_1.useMatchMedia)(MEDIA, false);
 exports.usePrefersReducedMotion = usePrefersReducedMotion;

package/dist/Theme/chakra/overlay.styles.d.ts

@@ -1,5 +1,10 @@
 import type { PaletteProps } from "../tokens/types";
 export declare const OVERLAY_BLUR = "blur(4px)";
+/** Radius and elevation every anchored popup shares: menus, popovers, selects, dropdowns. */
+export declare const POPUP_SURFACE: {
+    readonly borderRadius: "xl";
+    readonly boxShadow: "md";
+};
 /** The one Modal/Drawer backdrop; reuse it for any custom full-screen scrim. */
 export declare const overlayScrimStyles: (colors: Pick<PaletteProps, "black">) => {
     bg: string;

package/dist/Theme/chakra/overlay.styles.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dialogPartStyles = exports.overlayScrimStyles = exports.OVERLAY_BLUR = void 0;
+exports.dialogPartStyles = exports.overlayScrimStyles = exports.POPUP_SURFACE = exports.OVERLAY_BLUR = void 0;
 const scrim_1 = require("../tokens/builders/scrim");
 const surfaceRaised_1 = require("../tokens/builders/surfaceRaised");
+const radii_1 = require("../tokens/primitives/radii");
 exports.OVERLAY_BLUR = "blur(4px)";
+/** Radius and elevation every anchored popup shares: menus, popovers, selects, dropdowns. */
+exports.POPUP_SURFACE = { borderRadius: radii_1.RADIUS_ROLE.float, boxShadow: "md" };
 /** The one Modal/Drawer backdrop; reuse it for any custom full-screen scrim. */
 const overlayScrimStyles = (colors) => ({
     bg: (0, scrim_1.overlayScrim)(colors),

package/dist/Theme/themeProps.d.ts

@@ -86,6 +86,10 @@ export type CustomThemeProps = {
         inner: string;
         none: string;
         darkLg: string;
+        card: string;
+        float: string;
+        dialog: string;
+        sheet: string;
     };
     radii: ChakraTheme["radii"] & {
         none: string;

package/dist/Theme/tokens/brands/index.d.ts

@@ -17,6 +17,7 @@ import rosewoodDark from "./rosewood/palette.dark";
 import storefrontDark from "./storefront/palette.dark";
 import zincDark from "./zinc/palette.dark";
 import type { BrandPaletteSource, PaletteProps, ResolvedColorMode, ThemeName } from "../types";
+export declare const LIGHT_CANVAS_STEP = 1.09;
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export declare const finalizeLightPalette: (source: BrandPaletteSource) => PaletteProps;
 export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };

package/dist/Theme/tokens/brands/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.zincDark = exports.storefrontDark = exports.rosewoodDark = exports.emeraldDark = exports.slateDark = exports.skylineDark = exports.radiantDark = exports.meadowDark = exports.lavenderDark = exports.zinc = exports.storefront = exports.rosewood = exports.emerald = exports.slate = exports.skyline = exports.radiant = exports.meadow = exports.lavender = exports.finalizeLightPalette = void 0;
+exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.zincDark = exports.storefrontDark = exports.rosewoodDark = exports.emeraldDark = exports.slateDark = exports.skylineDark = exports.radiantDark = exports.meadowDark = exports.lavenderDark = exports.zinc = exports.storefront = exports.rosewood = exports.emerald = exports.slate = exports.skyline = exports.radiant = exports.meadow = exports.lavender = exports.finalizeLightPalette = exports.LIGHT_CANVAS_STEP = void 0;
 const palette_light_1 = __importDefault(require("./lavender/palette.light"));
 exports.lavender = palette_light_1.default;
 const palette_light_2 = __importDefault(require("./meadow/palette.light"));
@@ -51,9 +51,25 @@ const surfaceRungs_1 = require("../builders/surfaceRungs");
 const surfaceRaised_1 = require("../builders/surfaceRaised");
 const star_1 = require("../builders/star");
 const lazy_1 = require("../builders/lazy");
+const color_1 = require("../builders/color");
+exports.LIGHT_CANVAS_STEP = 1.09;
+const CANVAS_MIX_STEP = 0.0025;
+const CANVAS_MIX_MAX = 0.5;
+const lightCanvas = (canvas, card, ink) => {
+    for (let weight = 0; weight < CANVAS_MIX_MAX; weight += CANVAS_MIX_STEP) {
+        const next = (0, color_1.mix)(canvas, ink, weight);
+        if ((0, color_1.contrastRatio)(next, card) >= exports.LIGHT_CANVAS_STEP)
+            return next;
+    }
+    return (0, color_1.mix)(canvas, ink, CANVAS_MIX_MAX);
+};
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 const finalizeLightPalette = (source) => ({
     ...source,
+    backgroundColor: {
+        ...source.backgroundColor,
+        base: lightCanvas(source.backgroundColor.base, source.background[50], source.text[900]),
+    },
     sidebar: (0, sidebarAccent_1.withSidebarTokens)(source),
     accentText: (0, accentText_1.pickAccentText)(source.primary, source.backgroundColor.main),
     textMuted: (0, mutedText_1.buildMutedText)(source.text, source.backgroundColor.main),

package/dist/Theme/tokens/brands/radiant/palette.light.js

@@ -17,8 +17,22 @@ const primary = {
     900: "#531a14",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
+const danger = {
+    50: "#fcedf3",
+    100: "#f5c5db",
+    200: "#f1a9ca",
+    300: "#ec82b4",
+    400: "#ea69a7",
+    500: "#e74494",
+    600: "#d23e87",
+    700: "#a43069",
+    800: "#7f2651",
+    900: "#611c3e",
+};
 const palette = {
     ...neutrals_1.neutralTokens,
+    red: danger,
+    semantic: { ...neutrals_1.neutralTokens.semantic, error: danger },
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
     // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 4.37/2.15.
     gradient: { from: "#cd4733", to: "#a36807" }, // terracotta red → amber
@@ -120,6 +134,7 @@ const palette = {
     boxShadow: {
         primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
         ...neutrals_1.sharedBoxShadow,
+        error: `${danger[500]}47`,
     },
 };
 exports.default = palette;