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

package/dist/Components/Table/variants/TableVariantContext.js

@@ -5,13 +5,13 @@ exports.useTableVariant = useTableVariant;
 const react_1 = require("react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
-const classic_1 = require("./classic");
+const studio_1 = require("./studio");
 const TableVariantContext = (0, react_1.createContext)(null);
 exports.TableVariantProvider = TableVariantContext.Provider;
-/** No provider means the table as it always was — the default is a variant, not a gap. */
+/** No provider means the default variant — studio, the same preset `Table` falls back to. */
 function useTableVariant() {
     const provided = (0, react_1.useContext)(TableVariantContext);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isDark = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main);
-    return (0, react_1.useMemo)(() => provided !== null && provided !== void 0 ? provided : (0, classic_1.classicPreset)(theme.colors, isDark), [provided, theme.colors, isDark]);
+    return (0, react_1.useMemo)(() => provided !== null && provided !== void 0 ? provided : (0, studio_1.studioPreset)(theme.colors, isDark), [provided, theme.colors, isDark]);
 }

package/dist/Components/WizardDialog/WizardDialog.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import type { WizardDialogProps, WizardProps } from "./WizardDialogProps";
 export { wizardTransition, firstInvalidStep, INITIAL_WIZARD_STATE } from "./wizardSteps";
 export type { WizardAction, WizardState, StepValidator } from "./wizardSteps";
-/** Modal wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. */
+/** Wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. A Modal by default; `chrome="inline"` draws it in place. */
 export declare const WizardDialog: React.FC<WizardDialogProps>;
 /** The same wizard inline, for a full-page flow rather than a modal. */
 export declare const Wizard: React.FC<WizardProps>;

package/dist/Components/WizardDialog/WizardDialog.js

@@ -41,6 +41,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Modal_1 = __importStar(require("../Modal/Modal"));
 const Button_1 = __importDefault(require("../Button/Button"));
 const StageProgress_1 = __importDefault(require("../StageProgress/StageProgress"));
@@ -86,15 +87,26 @@ const WizardFooter = ({ flow, labels, isFinishing, finishDisabled, finishBlocked
     const reason = finishDisabled && !isFinishing ? finishBlockedReason : undefined;
     return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : ((0, jsx_runtime_1.jsx)("span", {})), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: reason ? "center" : undefined, children: [!flow.isFirst ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast && reason ? ((0, jsx_runtime_1.jsx)(react_2.Text, { id: reasonId, fontSize: "xs", color: colors.textMuted, "data-testid": "wizard-finish-reason", children: reason })) : null, flow.isLast ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, isDisabled: finishDisabled, "aria-describedby": reason ? reasonId : undefined, loadingText: labels.finish, "data-testid": "wizard-finish" })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.next, onClick: flow.next, "data-testid": "wizard-next" }))] })] }));
 };
-/** Modal wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. */
-const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, size = "3xl", labels, "data-testid": testId, }) => {
+const WizardInlineFrame = ({ title, subtitle, testId, footer, children }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), subtitle ? ((0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })) : null] }), children, (0, jsx_runtime_1.jsx)(react_2.Box, { position: "sticky", bottom: 0, pt: 3, borderTopWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, children: footer })] }));
+};
+/** Wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. A Modal by default; `chrome="inline"` draws it in place. */
+const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, size = "3xl", chrome = "modal", labels, "data-testid": testId, }) => {
     const flow = (0, useWizardFlow_1.useWizardFlow)({ steps, stepId, onStepChange, onFinish, resetWhen: !isOpen });
     const resolved = { ...DEFAULT_LABELS, ...labels };
     const guardedClose = () => {
         if (!isFinishing)
             onClose();
     };
-    return ((0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: (0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: guardedClose }) })] }));
+    const body = ((0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }));
+    const footer = ((0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: guardedClose }));
+    if (chrome === "inline") {
+        if (!isOpen)
+            return null;
+        return ((0, jsx_runtime_1.jsx)(WizardInlineFrame, { title: title, subtitle: subtitle, testId: testId ? `${testId}-inline` : "wizard-inline", footer: footer, children: body }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: body }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: footer })] }));
 };
 exports.WizardDialog = WizardDialog;
 /** The same wizard inline, for a full-page flow rather than a modal. */

package/dist/Components/WizardDialog/WizardDialogProps.d.ts

@@ -20,7 +20,7 @@ export type WizardLabels = Partial<{
     fixErrors: string;
     review: string;
 }>;
-/** Props for the modal wizard: Modal + stepper + per-step validation + review on the last step. */
+/** Props for the wizard dialog: Modal (or inline with `chrome`) + stepper + per-step validation + review on the last step. */
 export interface WizardDialogProps {
     isOpen: boolean;
     /** Ignored while `isFinishing`. */
@@ -40,13 +40,15 @@ export interface WizardDialogProps {
     stepId?: string;
     /** Fires whenever the visible step changes, controlled or not. */
     onStepChange?: (stepId: string) => void;
-    /** Modal width; default "3xl". */
+    /** Modal width; default "3xl". Ignored when `chrome` is "inline". */
     size?: "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    /** "inline" draws the wizard in place with no Modal (no overlay, focus trap, close X, Esc or dialog role) for a host that is already the dialog, such as a WorkspaceWindow; it renders nothing while closed and Cancel still calls `onClose`. Default "modal". */
+    chrome?: "modal" | "inline";
     labels?: WizardLabels;
     "data-testid"?: string;
 }
 /** Same flow inline (a page section, not a modal) — for full-page wizards. */
-export interface WizardProps extends Omit<WizardDialogProps, "isOpen" | "onClose" | "title" | "subtitle" | "size"> {
+export interface WizardProps extends Omit<WizardDialogProps, "isOpen" | "onClose" | "title" | "subtitle" | "size" | "chrome"> {
     /** Renders a Cancel button in the footer when provided. */
     onCancel?: () => void;
 }

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,35 @@ 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),
+                };
+                const pill = ((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] }));
+                if (renderItem) {
+                    return (0, jsx_runtime_1.jsx)(react_1.Box, { children: renderItem(item, api, pill) }, item.id);
+                }
+                return (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: pill }, 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,8 +54,12 @@ 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[];
@@ -47,16 +67,26 @@ export interface WorkspaceTrayProps {
     onClose?: (id: string) => void;
     testId?: 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
-     * generic pill doesn't know about. Receives the item plus ready-bound
-     * restore/close callbacks; when provided, the built-in pill is skipped for
-     * that item and this renders in its place inside the same positioned tray.
+     * 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;
+    /** Replaces one item's pill inside the same tray; gets the item, bound restore/close and `pill`, the built-in pill (dot, subtitle, close button) to return as is or wrap, e.g. in WorkspaceTrayPreview. */
     renderItem?: (item: WorkspaceTrayItem, api: {
         restore: () => void;
         close: () => void;
-    }) => ReactNode;
+    }, pill: ReactNode) => ReactNode;
 }
 /** Props for WorkspaceTrayPreview — despite the name, works for any hover trigger, not just tray pills. */
 export interface WorkspaceTrayPreviewProps {

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

@@ -15,6 +15,7 @@ export declare const Menu: {
             borderColor: string;
         };
         item: {
+            color: string;
             minH: string;
             px: string;
             py: string;
@@ -39,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,6 +4,7 @@ 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");
@@ -28,6 +29,7 @@ const baseStyle = definePartsStyle(({ theme }) => {
             ...overlay_styles_1.POPUP_SURFACE,
         },
         item: {
+            color: (0, optionRowInk_1.optionRowInk)(colors, false),
             minH: itemRowSpec.minH,
             px: itemRowSpec.px,
             py: itemRowSpec.py,
@@ -40,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/componentStyles.d.ts

@@ -182,6 +182,7 @@ export declare const componentStyles: {
                 borderColor: string;
             };
             item: {
+                color: string;
                 minH: string;
                 px: string;
                 py: string;
@@ -206,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?: {

package/dist/Theme/chakra/componentStyles.js

@@ -26,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,
@@ -161,7 +161,7 @@ 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/ringShadow.d.ts

@@ -0,0 +1,3 @@
+import { type BorderWidthRole } from "../tokens/primitives/borderWidths";
+/** A stroke drawn inside the border box as a box-shadow, so it never costs layout. */
+export declare const insetRingShadow: (color: string, width?: BorderWidthRole) => string;

package/dist/Theme/chakra/ringShadow.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insetRingShadow = void 0;
+const borderWidths_1 = require("../tokens/primitives/borderWidths");
+/** A stroke drawn inside the border box as a box-shadow, so it never costs layout. */
+const insetRingShadow = (color, width = "hairline") => `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS[width]} ${color}`;
+exports.insetRingShadow = insetRingShadow;

package/dist/Theme/tokens/builders/accentText.d.ts

@@ -12,6 +12,8 @@ declare const DARK_CANVAS_LUMINANCE = 0.2;
 /** True when `canvas` is a dark surface. Lets style configs branch without threading color mode. */
 export declare const isDarkCanvas: (canvas: string) => boolean;
 export declare const accentTextOnCanvas: (scale: ColorScale, canvas: string) => string;
+/** Accent ink for chrome that can land on any plane (canvas, card, overlay): the first rung clearing AA on all. */
+export declare const accentTextOnPlanes: (scale: ColorScale, planes: readonly string[]) => string;
 export declare const onFilled: (fill: string, white: string, black: string) => string;
 export declare const onGradient: (from: string, to: string, white: string, black: string) => string;
 export { AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE };

package/dist/Theme/tokens/builders/accentText.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.onGradient = exports.onFilled = exports.accentTextOnCanvas = exports.isDarkCanvas = exports.DEFAULT_BLACK = exports.DEFAULT_WHITE = exports.DEFAULT_CANVAS = exports.pickAccentText = void 0;
+exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.onGradient = exports.onFilled = exports.accentTextOnPlanes = exports.accentTextOnCanvas = exports.isDarkCanvas = exports.DEFAULT_BLACK = exports.DEFAULT_WHITE = exports.DEFAULT_CANVAS = exports.pickAccentText = void 0;
 const color_1 = require("./color");
 /** WCAG AA for normal-size text. Accent-as-text must clear this against the canvas. */
 const AA_NORMAL_TEXT = 4.5;
@@ -27,6 +27,12 @@ exports.isDarkCanvas = isDarkCanvas;
 // NOTE: held to AA in both modes now — some brands' light [500] no longer passes through untouched.
 const accentTextOnCanvas = (scale, canvas) => (0, exports.pickAccentText)(scale, canvas);
 exports.accentTextOnCanvas = accentTextOnCanvas;
+/** Accent ink for chrome that can land on any plane (canvas, card, overlay): the first rung clearing AA on all. */
+const accentTextOnPlanes = (scale, planes) => {
+    const found = SEARCH_ORDER.find((rung) => planes.every((plane) => (0, color_1.contrastRatio)(scale[rung], plane) >= AA_NORMAL_TEXT));
+    return scale[found !== null && found !== void 0 ? found : SEARCH_ORDER[SEARCH_ORDER.length - 1]];
+};
+exports.accentTextOnPlanes = accentTextOnPlanes;
 // NOTE: white/black must be the mode-stable absolutes, not an adaptive token — always clears AA.
 const onFilled = (fill, white, black) => (0, color_1.contrastRatio)(white, fill) >= AA_NORMAL_TEXT ? white : black;
 exports.onFilled = onFilled;

package/dist/Theme/tokens/builders/buildDarkPalette.d.ts

@@ -6,7 +6,7 @@ export declare const shiftLighter: (scale: ColorScale) => ColorScale;
 export declare const accentLightnessDelta: (accent500: string, white: string) => number;
 /** Raises every rung by the same lightness delta, preserving the ramp's shape and hue. */
 export declare const liftScale: (scale: ColorScale, delta: number) => ColorScale;
-/** `lifted`: brand-tinted canvas, card a CARD_LIFT step above it. `flat`: the hue-neutral canvas the card shares. */
+/** `lifted`: the card sits a CARD_LIFT step above the canvas. `flat`: the card is the canvas. */
 export type DarkPlanes = "lifted" | "flat";
 export interface DarkPaletteOptions {
     planes?: DarkPlanes;

package/dist/Theme/tokens/builders/buildDarkPalette.js

@@ -151,7 +151,8 @@ const NAMED_SURFACE_L = {
     accent: 17,
     muted: 18,
 };
-const SURFACE_SAT = { lifted: 14, flat: 0 };
+// NOTE: surfaces are hue-neutral on every brand; brand hue stays on accents, ink and rules.
+const SURFACE_SAT = 0;
 const TEXT_SAT = 12;
 const PLACEHOLDER_SAT = 10;
 const BORDER_SAT = 12;
@@ -182,16 +183,15 @@ const cardPlane = (canvas, white, planes) => {
 function buildDarkPalette(light, { planes = "lifted" } = {}) {
     const hueSource = light.primary[500];
     const { h } = (0, color_1.hexToHsl)(hueSource);
-    const surfaceSat = SURFACE_SAT[planes];
     const namedSurfaces = Object.fromEntries(Object.entries(NAMED_SURFACE_L).map(([key, l]) => [
         key,
-        (0, color_1.hslToHex)({ h, s: surfaceSat, l }),
+        (0, color_1.hslToHex)({ h, s: SURFACE_SAT, l }),
     ]));
     const white = light.white;
     const { card, rise, tableHover } = cardPlane(namedSurfaces.main, white, planes);
     const primary = liftBrand(light.primary, white);
     const background = {
-        ...fromTargets(hueSource, raise(SURFACE_TARGETS, BACKGROUND_FILLS, rise), surfaceSat),
+        ...fromTargets(hueSource, raise(SURFACE_TARGETS, BACKGROUND_FILLS, rise), SURFACE_SAT),
         50: card,
     };
     const semantic = {
@@ -231,7 +231,7 @@ function buildDarkPalette(light, { planes = "lifted" } = {}) {
         border: dividerRamp,
         boxborder: dividerRamp,
         table: {
-            hover: fromTargets(hueSource, tableHover, surfaceSat),
+            hover: fromTargets(hueSource, tableHover, SURFACE_SAT),
         },
         disabled: fromTargets(hueSource, DISABLED_TARGETS, DISABLED_SAT),
         accentText: (0, accentText_1.pickAccentText)(primary, namedSurfaces.main),

package/dist/Theme/tokens/builders/filledSurface.d.ts

@@ -12,7 +12,11 @@ export type FilledSurface = {
     activeColor: string;
 };
 export declare const solidFillRung: (scale: ColorScale, white: string, canvas?: string) => keyof ColorScale;
-/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+/**
+ * Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. A step may not
+ * flip the label's side of AA (zinc dark: near-white fill, black ink) or fall below `CHROME_BORDER`
+ * against the canvas (a pressed warning solid used to reach 1.00:1 on the card).
+ */
 export declare const darkerFillRung: (scale: ColorScale, canvas: string, white: string, step: 0 | 1) => keyof ColorScale;
 /** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
 export declare const labelOnFill: (fill: string, white: string, black: string) => string;

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

@@ -44,15 +44,28 @@ const steppedRung = (base, canvas, step) => {
     const dir = (0, accentText_1.isDarkCanvas)(canvas) ? -100 : 100;
     return Math.min(900, Math.max(50, base + dir * step));
 };
-/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+const steppedTowardBase = (from, base) => RUNGS[RUNGS.indexOf(from) + (from > base ? -1 : 1)];
+/**
+ * Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. A step may not
+ * flip the label's side of AA (zinc dark: near-white fill, black ink) or fall below `CHROME_BORDER`
+ * against the canvas (a pressed warning solid used to reach 1.00:1 on the card).
+ */
 const darkerFillRung = (scale, canvas, white, step) => {
     const base = (0, exports.solidFillRung)(scale, white, canvas);
+    const wantsWhite = (0, color_1.contrastRatio)(white, scale[base]) >= accentText_1.AA_NORMAL_TEXT;
+    const holds = (rung) => (0, color_1.contrastRatio)(scale[rung], canvas) >= outlineRung_1.CHROME_BORDER &&
+        ((0, color_1.contrastRatio)(white, scale[rung]) >= accentText_1.AA_NORMAL_TEXT) === wantsWhite;
+    let rung;
     if (base === 500) {
         const mode = (0, accentText_1.isDarkCanvas)(canvas) ? "dark" : "light";
-        return FILL_STEP_RUNGS[mode][step];
+        rung = FILL_STEP_RUNGS[mode][step];
     }
-    const stepped = steppedRung(base, canvas, step === 0 ? 1 : 2);
-    return stepped;
+    else {
+        rung = steppedRung(base, canvas, step === 0 ? 1 : 2);
+    }
+    while (rung !== base && !holds(rung))
+        rung = steppedTowardBase(rung, base);
+    return rung;
 };
 exports.darkerFillRung = darkerFillRung;
 /** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */

package/dist/Theme/tokens/builders/planeStep.d.ts

@@ -1,4 +1,5 @@
 import type { PaletteProps } from "../types";
 export declare const bandOn: (fill: string, plane: string) => string;
 export declare const recessOn: (fill: string, plane: string) => string;
+export declare const ruleOn: (colors: Pick<PaletteProps, "boxborder">, plane: string) => string;
 export declare const cardRule: (colors: Pick<PaletteProps, "boxborder" | "background">) => string;

package/dist/Theme/tokens/builders/planeStep.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cardRule = exports.recessOn = exports.bandOn = void 0;
+exports.cardRule = exports.ruleOn = exports.recessOn = exports.bandOn = void 0;
 const accentText_1 = require("./accentText");
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
@@ -12,9 +12,10 @@ const recessOn = (fill, plane) => holds(fill, plane, outlineRung_1.MIN_PERCEPTIB
     ? fill
     : (0, planes_1.lift)(accentText_1.DEFAULT_BLACK, plane, outlineRung_1.MIN_PERCEPTIBLE_STEP);
 exports.recessOn = recessOn;
-const cardRule = (colors) => {
+const ruleOn = (colors, plane) => {
     const rule = colors.boxborder[200];
-    const card = colors.background[50];
-    return holds(rule, card, outlineRung_1.CHROME_RULE) ? rule : (0, outlineRung_1.liftToContrast)(rule, card, outlineRung_1.CHROME_RULE);
+    return holds(rule, plane, outlineRung_1.CHROME_RULE) ? rule : (0, outlineRung_1.liftToContrast)(rule, plane, outlineRung_1.CHROME_RULE);
 };
+exports.ruleOn = ruleOn;
+const cardRule = (colors) => (0, exports.ruleOn)(colors, colors.background[50]);
 exports.cardRule = cardRule;

package/dist/Utils/table.js

@@ -81,7 +81,7 @@ function buildSemanticStatusPalette(toneByValue, theme) {
     return Object.fromEntries(Object.entries(toneByValue).map(([value, key]) => {
         const scale = scales[key];
         const tone = (0, tone_1.resolveSoftTone)(c, scale);
-        const solidRung = (0, filledSurface_1.solidFillRung)(scale, c.white);
+        const solidRung = (0, filledSurface_1.solidFillRung)(scale, c.white, c.backgroundColor.main);
         const solid = scale[solidRung];
         return [
             value,
@@ -123,7 +123,7 @@ function buildTablePalette(theme) {
     ];
     return scales.map((scale) => {
         const tone = (0, tone_1.resolveSoftTone)(c, scale);
-        const solidRung = (0, filledSurface_1.solidFillRung)(scale, c.white);
+        const solidRung = (0, filledSurface_1.solidFillRung)(scale, c.white, c.backgroundColor.main);
         const solid = scale[solidRung];
         return {
             solid,

package/dist/esm/Components/Button/Button.styles.js

@@ -1,4 +1,4 @@
-import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnPlanes } from "../../Theme/tokens/builders/accentText.js";
 import { darkerFillRung, labelOnFill, resolveFilledSurface, solidFillRung, } from "../../Theme/tokens/builders/filledSurface.js";
 import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
@@ -21,7 +21,12 @@ const controlSize = (size) => {
     return { h: height, minW: height, fontSize, px: paddingX };
 };
 // NOTE: [500] alone measures ~4.2 on a dark canvas — resolved per-mode so outline/ghost/link text stays readable.
-const onCanvasText = (theme, colorScheme) => accentTextOnCanvas(theme.colors[colorScheme], theme.colors.backgroundColor.main);
+// NOTE: a bare button sits on the canvas, a card or an overlay; dark overlays are the hardest plane.
+const onCanvasText = (theme, colorScheme) => accentTextOnPlanes(theme.colors[colorScheme], [
+    theme.colors.backgroundColor.main,
+    theme.colors.background[50],
+    theme.colors.surfaceRaised,
+]);
 // NOTE: [50] alone measured ~1.04 (invisible) in both modes — gray borrows the row-state steps.
 const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
@@ -33,7 +38,7 @@ const onCanvasHoverBg = (theme, colorScheme, step) => {
     return step === 16 ? rows.active : rows.selectedActive;
 };
 const swatch = (theme, colorScheme) => theme.colors[colorScheme];
-const buttonSolidRung = (theme, colorScheme) => solidFillRung(swatch(theme, colorScheme), theme.colors.white);
+const buttonSolidRung = (theme, colorScheme) => solidFillRung(swatch(theme, colorScheme), theme.colors.white, theme.colors.backgroundColor.main);
 const darkerFill = (theme, colorScheme, step) => {
     const scale = swatch(theme, colorScheme);
     const rung = darkerFillRung(scale, theme.colors.backgroundColor.main, theme.colors.white, step);