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

package/dist/esm/Components/Table/settings/TableSettings.js

@@ -5,13 +5,17 @@ import { motion } from "framer-motion";
 import ManageColumns from "./ManageColumns.js";
 import Button from "../../Button/Button.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { columnLabelText } from "../columnLabel.js";
 import { Settings, Check } from "lucide-react";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
-import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { motionTransition, transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { usePrefersReducedMotion } from "../../../Theme/chakra/motion.js";
 const MotionModalContent = motion(ModalContent);
+const SHEET_ENTER = motionTransition("enter", "out");
+const SHEET_EXIT = motionTransition("exit", "in");
 const DENSITY_OPTIONS = [
     { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
     { value: "normal", label: "Normal", desc: "Balanced default spacing" },
@@ -19,6 +23,7 @@ const DENSITY_OPTIONS = [
 ];
 const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, groupBy, }) => {
     const theme = useCustomTheme();
+    const sheetOffset = usePrefersReducedMotion() ? 0 : "-100%";
     const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
     const childInputMethodsRef = useRef({});
     const [settingsOpen, setSettingsOpen] = useState(false);
@@ -52,7 +57,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
     return (_jsxs(Box, { children: [_jsx(ToolTip, { label: "Table Settings", placement: "top", children: _jsx(IconButton, { "aria-label": "Table settings", icon: _jsx(Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: transitionFor(["color", "transform"], "base"), color: theme.colors.text[500], _hover: {
                         transform: "scale(1.1)",
                         color: theme.colors.accentText
-                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: { base: "full", md: "md" }, children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", left: { base: 0, md: "auto" }, right: { base: 0, md: "auto" }, position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: { base: "auto", md: "620px" }, minH: { base: "auto", md: "520px" }, maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.surfaceRaised, overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
+                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: { base: "full", md: "md" }, children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", left: { base: 0, md: "auto" }, right: { base: 0, md: "auto" }, position: "absolute", borderTopRadius: "none", initial: { y: sheetOffset, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: sheetOffset, opacity: 0, transition: SHEET_EXIT }, transition: SHEET_ENTER, padding: "0", minW: { base: "auto", md: "620px" }, minH: { base: "auto", md: "520px" }, maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.surfaceRaised, overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: raisedRule(theme.colors), children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
                                                             const selected = density === opt.value;
                                                             return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: transitionFor(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
                                                         }) }) }), _jsx(TabPanel, { px: 0, py: 0, children: _jsx(Box, { sx: {
@@ -73,6 +78,6 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 var _a;
                                                                 const selected = selectedGroup === opt.id;
                                                                 return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: transitionFor(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
-                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
+                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: raisedRule(theme.colors), pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
 };
 export default TableSettings;

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

@@ -1,13 +1,13 @@
 import { createContext, useContext, useMemo } from "react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
-import { classicPreset } from "./classic.js";
+import { studioPreset } from "./studio.js";
 const TableVariantContext = createContext(null);
 export const 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. */
 export function useTableVariant() {
     const provided = useContext(TableVariantContext);
     const theme = useCustomTheme();
     const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
-    return useMemo(() => provided !== null && provided !== void 0 ? provided : classicPreset(theme.colors, isDark), [provided, theme.colors, isDark]);
+    return useMemo(() => provided !== null && provided !== void 0 ? provided : studioPreset(theme.colors, isDark), [provided, theme.colors, isDark]);
 }

package/dist/esm/Components/Table/variants/classic.js

@@ -1,4 +1,5 @@
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { cardRule } from "../../../Theme/tokens/builders/planeStep.js";
 import { getTableRowHoverStyle } from "../components/tableRowHoverStyle.js";
 import { stripeFill } from "./stripe.js";
 /**
@@ -16,14 +17,14 @@ export const classicPreset = (colors, isDark) => {
             textTransform: "capitalize",
             letterSpacing: "normal",
             height: "45px",
-            ruleColor: colors.boxborder[200],
+            ruleColor: cardRule(colors),
             showColumnRule: true,
             actions: "always",
         },
         row: {
             hoverBg: getTableRowHoverStyle(colors, isDark).backgroundColor,
             hoverScope: "cell",
-            ruleColor: colors.boxborder[200],
+            ruleColor: cardRule(colors),
             frozenRuleColor: colors.boxborder[300],
             selectedBg: colors.primary.opacity[16],
             selectedBarColor: colors.primary[500],

package/dist/esm/Components/Timeline/Timeline.js

@@ -4,6 +4,7 @@ import { ArrowRight, FileText, IndianRupee, Paperclip, Pencil, PencilLine, Plus,
 import React from "react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
 import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
@@ -152,12 +153,14 @@ const NoteItem = React.memo(function NoteItem({ note, event, index, colors, acti
     var _a, _b;
     const isEditing = activeEditNoteId === note.log_note_id;
     const isDeleting = deletingNoteId != null && deletingNoteId === note.log_note_id;
+    const noteChip = bandOn(colors.primary[50], colors.gray[50]);
+    const noteChipInk = accentTextOnCanvas(colors.primary, noteChip);
     if (isEditing) {
         return (_jsx(Box, { children: _jsx(NoteTextArea, { isEditable: true, value: (_a = note.note) !== null && _a !== void 0 ? _a : "", title: (_b = note.title) !== null && _b !== void 0 ? _b : "", saveButtonLoading: editNoteLoading, handleSubmit: (n, t, f) => onEditNote === null || onEditNote === void 0 ? void 0 : onEditNote(note.log_note_id, n, t, f, event, index), handleCancel: () => setActiveEditNoteId(null) }) }));
     }
     return (_jsxs(Box, { position: "relative", zIndex: 1, bg: colors.gray[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "lg", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [_jsxs(Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [_jsx(Box, { as: "span", color: accentTextOnCanvas(colors.primary, colors.gray[50]), display: "inline-flex", children: _jsx(StickyNote, { size: 12 }) }), note.title && (_jsx(Text, { fontSize: fontSizes["xs-minus"], fontWeight: 700, color: colors.text[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && (_jsx(Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: REVEAL_TRANSITION, sx: reducedMotionSx(), children: isDeleting ? (_jsx(Spinner, { size: "xs", color: colors.textMuted })) : (_jsxs(_Fragment, { children: [onEditNote && (_jsx(Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: _jsx(Box, { as: "button", type: "button", "aria-label": "Edit note", sx: focusVisibleStyles(colors), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
-                                            bg: colors.primary[50],
-                                            color: accentTextOnCanvas(colors.primary, colors.primary[50]),
+                                            bg: noteChip,
+                                            color: noteChipInk,
                                         }, onClick: (e) => {
                                             e.stopPropagation();
                                             setActiveEditNoteId(note.log_note_id);
@@ -167,7 +170,7 @@ const NoteItem = React.memo(function NoteItem({ note, event, index, colors, acti
                                         }, onClick: (e) => {
                                             e.stopPropagation();
                                             onDeleteNote === null || onDeleteNote === void 0 ? void 0 : onDeleteNote(note.log_note_id, event, index);
-                                        }, children: _jsx(Trash2, { size: 12 }) }) }))] })) }))] }), note.note && (_jsx(Text, { fontSize: fontSizes["xs-minus"], color: colors.text[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && (_jsx(Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => (_jsxs(Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: colors.primary[50], color: accentTextOnCanvas(colors.primary, colors.primary[50]), fontSize: MIN_TEXT, maxW: "100%", _hover: { bg: colors.primary[100] }, children: [_jsx(Paperclip, { size: 10 }), _jsx(Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex))) })), (note.created_by || note.created_at) && (_jsxs(Text, { fontSize: MIN_TEXT, color: colors.textMuted, mt: 1, children: [note.created_by ? formatName(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
+                                        }, children: _jsx(Trash2, { size: 12 }) }) }))] })) }))] }), note.note && (_jsx(Text, { fontSize: fontSizes["xs-minus"], color: colors.text[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && (_jsx(Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => (_jsxs(Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: noteChip, color: noteChipInk, fontSize: MIN_TEXT, maxW: "100%", _hover: { bg: colors.primary[100] }, children: [_jsx(Paperclip, { size: 10 }), _jsx(Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex))) })), (note.created_by || note.created_at) && (_jsxs(Text, { fontSize: MIN_TEXT, color: colors.textMuted, mt: 1, children: [note.created_by ? formatName(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
 });
 // The colored event card (shared by both the desktop "tree" and mobile rail).
 // `accent` decides which edge carries the colored bar (pointing toward the spine).
@@ -177,6 +180,7 @@ const EventCard = React.memo(function EventCard({ event, index, accent, colors,
     const changes = useMemo(() => parseChanges(event.changes), [event.changes]);
     const clickable = typeof onEventClick === "function";
     const actor = formatName(event.action_by);
+    const addNoteHover = bandOn(colors.primary[50], colors.background[50]);
     return (_jsxs(Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [_jsxs(Box, { position: "relative", zIndex: 1, bg: colors.background[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale[400] : undefined, borderRadius: "xl", px: 3.5, py: 2.5, ...(clickable && {
                     transition: CARD_TRANSITION,
                     _hover: {
@@ -189,7 +193,10 @@ const EventCard = React.memo(function EventCard({ event, index, accent, colors,
                                     e.stopPropagation();
                                     setActiveNoteEventIndex(isActiveNote ? null : index);
                                 }, position: "relative", zIndex: 1, opacity: isActiveNote ? 1 : 0, transition: REVEAL_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, px: 2, py: 1, borderRadius: "md", fontSize: fontSizes.xs, fontWeight: 600, color: accentTextOnCanvas(colors.primary, colors.background[50]), bg: "transparent", cursor: "pointer", _hover: {
-                                    bg: colors.primary[50],
+                                    bg: addNoteHover,
+                                    color: addNoteHover === colors.primary[50]
+                                        ? undefined
+                                        : accentTextOnCanvas(colors.primary, addNoteHover),
                                 }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && (_jsx(Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, children: event.notes.map((note, noteIndex) => {
                             var _a;
                             return (_jsx(NoteItem, { note: note, event: event, index: index, colors: colors, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEditNote: onEditNote, onDeleteNote: onDeleteNote }, (_a = note.log_note_id) !== null && _a !== void 0 ? _a : noteIndex));

package/dist/esm/Components/Toaster/Toaster.js

@@ -7,9 +7,10 @@ import { CheckCircle2, AlertTriangle, Info, XCircle, } from "lucide-react";
 import Spinner from "../Spinner/Spinner.js";
 import { toastDuration } from "./toastDuration.js";
 import { REDUCED_MOTION_QUERY, reducedMotionSx } from "../../Theme/chakra/motion.js";
-import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { motionTransition, transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { compositeOver } from "../../Theme/tokens/builders/color.js";
 const ToasterContext = createContext(undefined);
 const shrink = keyframes `
   from { transform: scaleX(1); }
@@ -17,11 +18,13 @@ const shrink = keyframes `
 `;
 // One-shot ring pulse on the status icon — a subtle "just happened" beat.
 const iconPulse = keyframes `
-  0%   { box-shadow: 0 0 0 0 var(--toast-pulse-color); }
-  70%  { box-shadow: 0 0 0 0.5rem transparent; }
-  100% { box-shadow: 0 0 0 0 transparent; }
+  0%   { transform: scale(1); opacity: 1; }
+  70%  { transform: scale(1.5); opacity: 0; }
+  100% { transform: scale(1.5); opacity: 0; }
 `;
 const MotionBox = motion(Box);
+const TOAST_ENTER = motionTransition("enter", "out");
+const TOAST_EXIT = motionTransition("exit", "in");
 // Presentational toast card — owns hover state so auto-dismiss pauses while the pointer is over it.
 function ToastCard({ onClose, title, description, actions, isClosable, duration, meta, colors: c, isUrgent, }) {
     const [paused, setPaused] = useState(false);
@@ -33,15 +36,23 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
         , { 
             // The single live-region root: an explicit aria-live here, on the card's own
             // root, keeps errors from being announced a second time by a duplicate wrapper.
-            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `0.0625rem solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
+            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24, transition: TOAST_EXIT }, transition: TOAST_ENTER, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `0.0625rem solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
                 isolation: "isolate",
                 transition: transitionFor(["box-shadow"]),
                 _hover: { boxShadow: "lg" },
                 ...reducedMotionSx(),
-            }, children: [_jsxs(Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: tone.bg, color: tone.fg, sx: {
-                                ["--toast-pulse-color"]: tone.border,
-                                animation: `${iconPulse} 900ms ease-out 1`,
-                                ...reducedMotionSx(),
+            }, children: [_jsxs(Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", position: "relative", bg: compositeOver(tone.bg, c.surfaceRaised), color: tone.fg, sx: {
+                                "&::after": {
+                                    content: '""',
+                                    position: "absolute",
+                                    inset: 0,
+                                    borderRadius: "full",
+                                    bg: tone.border,
+                                    zIndex: -1,
+                                    opacity: 0,
+                                    animation: `${iconPulse} 900ms ease-out 1`,
+                                    ...reducedMotionSx(),
+                                },
                             }, children: meta.icon }), _jsxs(VisuallyHidden, { children: [meta.label, ":"] }), _jsxs(Box, { flex: "1", minW: 0, children: [title && (_jsx(Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: c.text[800], children: title })), description && (_jsx(Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: c.textMuted, mt: title ? "0.125rem" : 0, children: description })), actions && (_jsx(Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && (_jsx(CloseButton, { onClick: onClose, size: "sm", color: c.textMuted, borderRadius: "md", alignSelf: "flex-start", _hover: {
                                 bg: c.gray[100],
                                 color: c.text[700],

package/dist/esm/Components/Toggle/TableToggle.js

@@ -8,9 +8,12 @@ import ToolTip from "../ToolTip/ToolTip.js";
 import { useSlidingPill } from "../SegmentedControl/useSlidingPill.js";
 import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 const MODES = ["grid", "list"];
 const TRACK_HEIGHT = BUTTON_SIZES.sm.height;
 const SEGMENT_HEIGHT = `calc(${TRACK_HEIGHT} - 0.25rem)`;
+const INK_TRANSITION = transitionFor(["color"], "base");
+const PILL_TRANSITION = transitionFor(["transform", "width"], "base", "out");
 /** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl (see MODULE.md). */
 const TableToggle = ({ value, onChange, variant = "default" }) => {
     const theme = useCustomTheme();
@@ -71,10 +74,10 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
                         ? colors.accentText
                         : hoverInk,
             },
-            transition: "color 0.2s ease-in-out",
+            transition: INK_TRANSITION,
         }),
     };
-    return (_jsxs(Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: SEGMENT_HEIGHT, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: `-${BORDER_WIDTHS.hairline}`, left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), _jsx(ToolTip, { label: "Grid View", placement: "top", fontSize: "xs", hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
+    return (_jsxs(Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: SEGMENT_HEIGHT, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: PILL_TRANSITION })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: `-${BORDER_WIDTHS.hairline}`, left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: PILL_TRANSITION })), _jsx(ToolTip, { label: "Grid View", placement: "top", fontSize: "xs", hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
                         refs.current[0] = node;
                     }, "aria-label": "Grid View", "aria-pressed": value === "grid", icon: _jsx(Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), _jsx(ToolTip, { label: "List View", placement: "top", fontSize: "xs", hasArrow: true, children: _jsx(IconButton, { ref: (node) => {
                         refs.current[1] = node;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, FormControl, VStack, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 import SearchSelect from "../SearchSelect/SearchSelect.js";
@@ -75,7 +76,7 @@ const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAdd
             type: "email",
         },
     ];
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: [labels.addNewUser, upgradeNotice] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => (_jsx(FormControl, { isInvalid: !!errors[field.id], children: _jsx(TextInput, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), _jsx(FormControl, { isInvalid: !!errors.role, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), children: [labels.addNewUser, upgradeNotice] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => (_jsx(FormControl, { isInvalid: !!errors[field.id], children: _jsx(TextInput, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), _jsx(FormControl, { isInvalid: !!errors.role, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
                                             id: item.id,
                                             label: item.label,
                                         })), value: (_a = values.role) !== null && _a !== void 0 ? _a : undefined, onSelect: (option) => {

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, FormControl, VStack, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 import SearchSelect from "../SearchSelect/SearchSelect.js";
@@ -31,7 +32,7 @@ const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOpti
             return;
         await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId, roleId: selectedRole.id }));
     };
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: labels.changeRoleTitle }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), _jsx(FormControl, { isInvalid: !!error, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), children: labels.changeRoleTitle }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), _jsx(FormControl, { isInvalid: !!error, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
                                             id: item.id,
                                             label: item.label,
                                         })), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: (option) => {

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

@@ -6,6 +6,7 @@ import { ChevronLeft, RefreshCw, Send, Shield, Trash2, UserPlus, Users, UserRoun
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import EmptyState from "../EmptyState/EmptyState.js";
@@ -60,6 +61,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const [actionUserId, setActionUserId] = useState(null);
     const border = colors.boxborder[200];
     const surface = colors.background[50];
+    const detailTile = bandOn(colors.primary[50], surface);
     const rowBackgrounds = useMemo(() => listRowBackgrounds(colors), [colors]);
     const muted = colors.textMuted;
     const heading = colors.text[900];
@@ -100,7 +102,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: colors.primary[50], borderRadius: "lg", color: accentTextOnCanvas(colors.primary, colors.primary[50]), 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 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));
                                             }) })] })] })) : (_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/WorkspaceWindow/WorkspaceTrayPreview.js

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

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Flex, HStack, IconButton, Modal, ModalContent, ModalOverlay, Text, useModalContext, } from "@chakra-ui/react";
+import { Box, Flex, HStack, IconButton, Modal, ModalContent, ModalOverlay, Portal, Text, useModalContext, } from "@chakra-ui/react";
 import { useEffect } from "react";
 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";
-// 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 } = useModalContext();
@@ -16,7 +16,8 @@ const WindowTitle = ({ testId, color, children }) => {
     return (_jsx(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.
-export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId = "workspace-window", }) {
+export default 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 = useCustomTheme();
@@ -26,28 +27,34 @@ export default function WorkspaceWindow({ title, state, children, onMinimize, on
     return (_jsxs(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: [_jsx(ModalOverlay, { backdropFilter: "blur(3px)" }), _jsx(ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", 
+        closeOnOverlayClick: false, closeOnEsc: false, finalFocusRef: finalFocusRef, children: [_jsx(ModalOverlay, { backdropFilter: "blur(3px)" }), _jsx(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: _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": "Open full page", size: "xs", variant: "ghost", icon: _jsx(ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? (_jsx(IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: _jsx(Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? (_jsx(IconButton, { "aria-label": "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: 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 })] }) })] }));
 }
-// Bottom tray of restore pills for minimized WorkspaceWindows — presentational, parent supplies handlers.
-export 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.
+export 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 = useCustomTheme();
     if (!items.length)
         return null;
-    return (
-    // NOTE: floating bottom-right cluster (Gmail/Jira pattern), not a docked bar — needs no reserved page gutter.
-    _jsx(Flex, { position: "fixed", bottom: 4, right: 4, zIndex: zIndices.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 _jsx(Box, { children: renderItem(item, api) }, item.id);
-            }
-            return (_jsxs(HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: theme.colors.primary[100], color: accentTextOnCanvas(theme.colors.primary, theme.colors.primary[100]), boxShadow: "md", borderWidth: "1px", borderColor: theme.colors.primary[200], "data-testid": `${testId}-pill`, children: [_jsx(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 ? (_jsx(IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: _jsx(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 = accentTextOnCanvas(theme.colors.primary, theme.colors.primary[100]);
+    return (_jsx(Portal, { children: _jsx(Flex, { role: "region", "aria-label": label, "aria-live": "polite", "data-no-focus-lock": "true", position: "fixed", ...inset, zIndex: zIndices.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 _jsx(Box, { children: renderItem(item, api) }, item.id);
+                }
+                return (_jsxs(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 ? (_jsx(Box, { role: "img", "aria-label": dirtyLabel, boxSize: "0.5rem", borderRadius: "full", bg: "currentColor", flexShrink: 0, "data-testid": `${testId}-dirty` })) : null, _jsxs(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 ? (_jsx(Box, { as: "span", fontWeight: 400, ml: 1.5, children: item.subtitle })) : null] }), onClose ? (_jsx(IconButton, { "aria-label": closeLabel ? closeLabel(item) : "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: _jsx(X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
+            }) }) }));
 }

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

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

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

@@ -1,8 +1,10 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { menuAnatomy } from "@chakra-ui/anatomy";
 import { listRowBackgrounds } from "../tokens/builders/rowStates.js";
+import { optionRowInk, optionRowWeight } from "../../Components/Select/optionRowInk.js";
 import { OPTION_ROW_SIZES, OPTION_ROW_RADIUS } from "../tokens/primitives/optionRowSizes.js";
 import { paletteOf } from "./paletteFromTheme.js";
+import { POPUP_SURFACE } from "./overlay.styles.js";
 const itemRowSpec = OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(menuAnatomy.keys);
 const $bg = cssVar("menu-bg");
@@ -21,12 +23,15 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
+            ...POPUP_SURFACE,
         },
         item: {
+            color: 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: OPTION_ROW_RADIUS,
             bg: "transparent",
@@ -34,6 +39,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: optionRowInk(colors, true),
+                fontWeight: optionRowWeight(true),
+                "& .chakra-menu__icon-wrapper": { color: colors.accentText },
+            },
         },
     };
 });

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

@@ -1,6 +1,7 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { popoverAnatomy } from "@chakra-ui/anatomy";
 import { paletteOf } from "./paletteFromTheme.js";
+import { POPUP_SURFACE } from "./overlay.styles.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(popoverAnatomy.keys);
 const $popperBg = cssVar("popper-bg");
 const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
@@ -16,6 +17,7 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
+            ...POPUP_SURFACE,
         },
     };
 });

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

@@ -12,6 +12,7 @@ import { AA_NORMAL_TEXT, accentTextOnCanvas, isDarkCanvas } from "../tokens/buil
 import { labelOnFill, solidFillRung } from "../tokens/builders/filledSurface.js";
 import { liftToContrast, resolveHoverTint } from "../tokens/builders/outlineRung.js";
 import { resolveSoftTone } from "../tokens/builders/tone.js";
+import { skeletonShimmer } from "../tokens/builders/skeletonShimmer.js";
 import { tooltipSurface } from "../tokens/builders/tooltipSurface.js";
 import { Drawer } from "./Drawer.styles.js";
 import { Menu } from "./Menu.styles.js";
@@ -22,7 +23,7 @@ import { Card } from "./Card.styles.js";
 // 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 = solidFillRung(swatch, palette.white);
+    const rung = solidFillRung(swatch, palette.white, palette.backgroundColor.main);
     const bg = swatch[rung];
     return {
         bg,
@@ -142,19 +143,22 @@ const $skeletonStart = cssVar("skeleton-start-color");
 const $skeletonEnd = 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]: paletteOf(theme).gray[100],
-        [$skeletonEnd.variable]: paletteOf(theme).gray[300],
-        background: $skeletonStart.reference,
-        borderColor: $skeletonEnd.reference,
-    }),
+    baseStyle: ({ theme }) => {
+        const shimmer = skeletonShimmer(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 = paletteOf(theme);
         const swatch = scaleFor(palette, colorScheme);
-        const fill = swatch[solidFillRung(swatch, palette.white)];
+        const fill = swatch[solidFillRung(swatch, palette.white, palette.backgroundColor.main)];
         const dot = labelOnFill(fill, palette.white, palette.black);
         const hoverFill = resolveHoverTint(fill, fill);
         return {

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

@@ -1,5 +1,6 @@
 import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 export const REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
+export const MOTION_OK_QUERY = "@media (prefers-reduced-motion: no-preference)";
 const MEDIA = "(prefers-reduced-motion: reduce)";
 export const usePrefersReducedMotion = () => useMatchMedia(MEDIA, false);
 /** Spread into `sx`: drops transitions and animations when the user asks for less motion. */

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

@@ -1,6 +1,9 @@
 import { overlayScrim } from "../tokens/builders/scrim.js";
 import { raisedRule } from "../tokens/builders/surfaceRaised.js";
+import { RADIUS_ROLE } from "../tokens/primitives/radii.js";
 export const OVERLAY_BLUR = "blur(4px)";
+/** Radius and elevation every anchored popup shares: menus, popovers, selects, dropdowns. */
+export const POPUP_SURFACE = { borderRadius: RADIUS_ROLE.float, boxShadow: "md" };
 /** The one Modal/Drawer backdrop; reuse it for any custom full-screen scrim. */
 export const overlayScrimStyles = (colors) => ({
     bg: overlayScrim(colors),

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

@@ -27,9 +27,25 @@ import { withSurfaceRungs } from "../builders/surfaceRungs.js";
 import { buildSurfaceRaised, withSurfaceRaised } from "../builders/surfaceRaised.js";
 import { buildStar } from "../builders/star.js";
 import { lazyPalette } from "../builders/lazy.js";
+import { contrastRatio, mix } from "../builders/color.js";
+export const 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 = mix(canvas, ink, weight);
+        if (contrastRatio(next, card) >= LIGHT_CANVAS_STEP)
+            return next;
+    }
+    return mix(canvas, ink, CANVAS_MIX_MAX);
+};
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export const finalizeLightPalette = (source) => ({
     ...source,
+    backgroundColor: {
+        ...source.backgroundColor,
+        base: lightCanvas(source.backgroundColor.base, source.background[50], source.text[900]),
+    },
     sidebar: withSidebarTokens(source),
     accentText: pickAccentText(source.primary, source.backgroundColor.main),
     textMuted: buildMutedText(source.text, source.backgroundColor.main),