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

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

@@ -1,21 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.raisedRule = exports.withSurfaceRaised = exports.buildSurfaceRaised = exports.RAISED_OVERLAY = void 0;
+exports.raisedRule = exports.withSurfaceRaised = exports.buildSurfaceRaised = exports.filledMarks = exports.RAISED_OVERLAY = void 0;
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
+const planes_1 = require("./planes");
+const planeStep_1 = require("./planeStep");
+const semanticText_1 = require("./semanticText");
 exports.RAISED_OVERLAY = 0.07;
-// Never below the card, and at least one white-overlay step above the canvas.
-const buildSurfaceRaised = (source) => {
-    const overlay = (0, color_1.mix)(source.backgroundColor.main, source.white, exports.RAISED_OVERLAY);
+/** The filled fills a raised plane must keep at 3:1, or a button on a menu stops reading. */
+const filledMarks = (colors) => [
+    colors.primary[500],
+    ...semanticText_1.SEMANTIC_TONES.map((tone) => colors.semantic[tone][500]),
+];
+exports.filledMarks = filledMarks;
+// Never below the card: the lighter of one white-overlay step off the canvas and a RAISED_LIFT step off the card.
+const buildSurfaceRaised = (source, marks = []) => {
     const card = source.background[50];
-    return (0, color_1.relativeLuminance)(overlay) > (0, color_1.relativeLuminance)(card) ? overlay : card;
+    const overlay = (0, color_1.mix)(source.backgroundColor.main, source.white, exports.RAISED_OVERLAY);
+    const stepped = (0, planes_1.liftUnder)(source.white, card, planes_1.RAISED_LIFT, marks);
+    return [overlay, stepped].reduce((top, c) => ((0, color_1.relativeLuminance)(c) > (0, color_1.relativeLuminance)(top) ? c : top), card);
 };
 exports.buildSurfaceRaised = buildSurfaceRaised;
 const withSurfaceRaised = (palette) => ({
     ...palette,
-    surfaceRaised: (0, exports.buildSurfaceRaised)(palette),
+    surfaceRaised: (0, exports.buildSurfaceRaised)(palette, (0, exports.filledMarks)(palette)),
 });
 exports.withSurfaceRaised = withSurfaceRaised;
-// A divider inside an overlay, at the weight `boxborder[200]` has on a card.
-const raisedRule = (colors) => (0, outlineRung_1.liftToContrast)(colors.boxborder[200], colors.surfaceRaised, (0, color_1.contrastRatio)(colors.boxborder[200], colors.background[50]));
+// A divider inside an overlay, at the weight a rule has inside a card.
+const raisedRule = (colors) => (0, outlineRung_1.liftToContrast)(colors.boxborder[200], colors.surfaceRaised, (0, color_1.contrastRatio)((0, planeStep_1.cardRule)(colors), colors.background[50]));
 exports.raisedRule = raisedRule;

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

@@ -6,6 +6,7 @@ const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const accentText_1 = require("./accentText");
 const semanticText_1 = require("./semanticText");
+const rowStates_1 = require("./rowStates");
 // NOTE: hint held to the non-text floor, not body-text — at 4.5 an empty field reads as typed-into. See CHROME-CONSISTENCY.md.
 exports.PLACEHOLDER_TEXT = outlineRung_1.AA_NON_TEXT;
 const namedSurfaces = (palette) => [
@@ -21,6 +22,7 @@ exports.hardestSurface = hardestSurface;
 // Runs last: `table.hover` is one of the surfaces, and it settles in its own rung.
 function withSurfaceRungs(palette) {
     const surfaces = (0, exports.namedSurfaces)(palette);
+    const accentSurfaces = [...surfaces, ...Object.values((0, rowStates_1.listRowBackgrounds)(palette))];
     const lift = (ink, target) => (0, outlineRung_1.liftToContrast)(ink, (0, exports.hardestSurface)(ink, surfaces), target);
     const settle = (ink, target) => (0, outlineRung_1.settleAcross)(ink, surfaces, target);
     const rule = (ink) => (0, outlineRung_1.ruleInk)(ink, [palette.backgroundColor.main, palette.background[50]], outlineRung_1.CHROME_RULE);
@@ -31,7 +33,7 @@ function withSurfaceRungs(palette) {
     return {
         ...palette,
         textMuted: lift(palette.textMuted, accentText_1.AA_NORMAL_TEXT),
-        accentText: (0, accentText_1.pickAccentText)(palette.primary, (0, exports.hardestSurface)(palette.accentText, surfaces)),
+        accentText: (0, accentText_1.pickAccentText)(palette.primary, (0, exports.hardestSurface)(palette.accentText, accentSurfaces)),
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], accentText_1.AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], accentText_1.AA_NORMAL_TEXT) },

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

@@ -4,8 +4,8 @@ export { default as radii, RADIUS_ROLE } from "./radii";
 export type { RadiusToken, RadiusRole } from "./radii";
 export * from "./borderWidths";
 export * from "./states";
-export { default as shadows, shadowsDark, shadowsFor } from "./shadows";
-export type { ShadowRamp } from "./shadows";
+export { default as shadows, shadowsDark, shadowsFor, shadowCss, ELEVATION_LAYERS, SHADOW_INK } from "./shadows";
+export type { ShadowLayer, ElevationRole, ShadowRamp } from "./shadows";
 export { default as zIndices } from "./zIndices";
 export { default as breakpoints } from "./breakpoints";
 export { default as lineHeights } from "./lineHeights";

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

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.fontWeights = exports.fontSizes = exports.fonts = exports.typography = exports.letterSpacings = exports.lineHeights = exports.breakpoints = exports.zIndices = exports.shadowsFor = exports.shadowsDark = exports.shadows = exports.RADIUS_ROLE = exports.radii = exports.sizes = exports.space = void 0;
+exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.fontWeights = exports.fontSizes = exports.fonts = exports.typography = exports.letterSpacings = exports.lineHeights = exports.breakpoints = exports.zIndices = exports.SHADOW_INK = exports.ELEVATION_LAYERS = exports.shadowCss = exports.shadowsFor = exports.shadowsDark = exports.shadows = exports.RADIUS_ROLE = exports.radii = exports.sizes = exports.space = void 0;
 var space_1 = require("./space");
 Object.defineProperty(exports, "space", { enumerable: true, get: function () { return __importDefault(space_1).default; } });
 var sizes_1 = require("./sizes");
@@ -31,6 +31,9 @@ var shadows_1 = require("./shadows");
 Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return __importDefault(shadows_1).default; } });
 Object.defineProperty(exports, "shadowsDark", { enumerable: true, get: function () { return shadows_1.shadowsDark; } });
 Object.defineProperty(exports, "shadowsFor", { enumerable: true, get: function () { return shadows_1.shadowsFor; } });
+Object.defineProperty(exports, "shadowCss", { enumerable: true, get: function () { return shadows_1.shadowCss; } });
+Object.defineProperty(exports, "ELEVATION_LAYERS", { enumerable: true, get: function () { return shadows_1.ELEVATION_LAYERS; } });
+Object.defineProperty(exports, "SHADOW_INK", { enumerable: true, get: function () { return shadows_1.SHADOW_INK; } });
 var zIndices_1 = require("./zIndices");
 Object.defineProperty(exports, "zIndices", { enumerable: true, get: function () { return __importDefault(zIndices_1).default; } });
 var breakpoints_1 = require("./breakpoints");

package/dist/Theme/tokens/primitives/motion.d.ts

@@ -23,6 +23,7 @@ export declare const MOTION_LOOP_MS: {
     readonly spin: 800;
     readonly sweep: 1200;
 };
+export declare const MOTION_PRESS_SCALE = 0.98;
 /** A `transition` value for named properties only — `all` also animates layout and colour flips. */
 export declare const transitionFor: (properties: readonly string[], speed?: MotionSpeed, curve?: MotionCurve) => string;
 export declare const motionTransition: (speed?: MotionSpeed, curve?: MotionCurve) => {

package/dist/Theme/tokens/primitives/motion.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.motionTransition = exports.transitionFor = exports.MOTION_LOOP_MS = exports.MOTION_EASE_IN = exports.MOTION_EASE_OUT = exports.MOTION_EASE = exports.cubicBezierCss = exports.MOTION_BEZIER = exports.MOTION_MS = void 0;
+exports.motionTransition = exports.transitionFor = exports.MOTION_PRESS_SCALE = exports.MOTION_LOOP_MS = exports.MOTION_EASE_IN = exports.MOTION_EASE_OUT = exports.MOTION_EASE = exports.cubicBezierCss = exports.MOTION_BEZIER = exports.MOTION_MS = void 0;
 exports.MOTION_MS = { fast: 150, base: 200, enter: 200, exit: 200 };
 /** Pebble easing curves (mobile `pebble-spec.json` motion.easing); `in` is Pebble's `accelerate`. */
 exports.MOTION_BEZIER = {
@@ -15,6 +15,7 @@ exports.MOTION_EASE_OUT = (0, exports.cubicBezierCss)(exports.MOTION_BEZIER.out)
 exports.MOTION_EASE_IN = (0, exports.cubicBezierCss)(exports.MOTION_BEZIER.in);
 /** Periods for loops that are feedback, not transitions: skeleton pulse, spinner turn, progress sweep. */
 exports.MOTION_LOOP_MS = { pulse: 700, spin: 800, sweep: 1200 };
+exports.MOTION_PRESS_SCALE = 0.98;
 /** A `transition` value for named properties only — `all` also animates layout and colour flips. */
 const transitionFor = (properties, speed = "fast", curve = "standard") => {
     if (properties.includes("all"))

package/dist/Theme/tokens/primitives/shadows.d.ts

@@ -1,4 +1,16 @@
 import type { ResolvedColorMode } from "../types";
+export type ShadowLayer = {
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+    alphaHex: string;
+};
+export type ElevationRole = "cardPress" | "card" | "float" | "dialog" | "sheet";
+export declare const SHADOW_INK: Record<ResolvedColorMode, string>;
+/** Pebble elevation stacks (mobile `pebble/elevation.ts`), per mode and role. */
+export declare const ELEVATION_LAYERS: Record<ResolvedColorMode, Record<ElevationRole, readonly ShadowLayer[]>>;
+export declare const shadowCss: (layers: readonly ShadowLayer[], ink: string) => string;
 /** Light-mode ramp. A theme should carry `shadowsFor(mode)`, never this one in dark. */
 declare const shadows: {
     xs: string;
@@ -12,6 +24,10 @@ declare const shadows: {
     inner: string;
     none: string;
     darkLg: string;
+    card: string;
+    float: string;
+    dialog: string;
+    sheet: string;
 };
 export type ShadowRamp = typeof shadows;
 export declare const shadowsDark: ShadowRamp;

package/dist/Theme/tokens/primitives/shadows.js

@@ -1,21 +1,71 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shadowsFor = exports.shadowsDark = void 0;
+exports.shadowsFor = exports.shadowsDark = exports.shadowCss = exports.ELEVATION_LAYERS = exports.SHADOW_INK = void 0;
+const layer = (x, y, blur, spread, alphaHex) => ({
+    x,
+    y,
+    blur,
+    spread,
+    alphaHex,
+});
+exports.SHADOW_INK = { light: "#141828", dark: "#000000" };
+/** Pebble elevation stacks (mobile `pebble/elevation.ts`), per mode and role. */
+exports.ELEVATION_LAYERS = {
+    light: {
+        cardPress: [layer(0, 1, 2, 0, "0d"), layer(0, 2, 6, -2, "0d")],
+        card: [layer(0, 1, 2, 0, "0a"), layer(0, 3, 10, -2, "0d"), layer(0, 14, 32, -14, "1f")],
+        float: [layer(0, 2, 6, 0, "0f"), layer(0, 16, 40, -10, "38")],
+        dialog: [layer(0, 4, 12, 0, "0f"), layer(0, 28, 64, -16, "4d")],
+        sheet: [layer(0, -2, 8, 0, "0a"), layer(0, -18, 48, -14, "33")],
+    },
+    dark: {
+        cardPress: [layer(0, 1, 1, 0, "3d")],
+        card: [layer(0, 1, 2, 0, "47")],
+        float: [layer(0, 2, 8, 0, "52"), layer(0, 18, 44, -10, "9e")],
+        dialog: [layer(0, 4, 14, 0, "59"), layer(0, 28, 64, -16, "b3")],
+        sheet: [layer(0, -2, 10, 0, "4d"), layer(0, -18, 48, -14, "99")],
+    },
+};
+const length = (n) => (n === 0 ? "0" : `${n}px`);
+const rgbChannels = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)).join(", ");
+const alphaOf = (alphaHex) => Math.round((parseInt(alphaHex, 16) / 255) * 100) / 100;
+const shadowCss = (layers, ink) => layers
+    .map((l) => `${length(l.x)} ${length(l.y)} ${length(l.blur)} ${length(l.spread)} rgba(${rgbChannels(ink)}, ${alphaOf(l.alphaHex)})`)
+    .join(", ");
+exports.shadowCss = shadowCss;
+const elevationRamp = (mode) => {
+    const css = (role) => (0, exports.shadowCss)(exports.ELEVATION_LAYERS[mode][role], exports.SHADOW_INK[mode]);
+    return {
+        sm: css("cardPress"),
+        base: css("card"),
+        md: css("float"),
+        lg: css("dialog"),
+        card: css("card"),
+        float: css("float"),
+        dialog: css("dialog"),
+        sheet: css("sheet"),
+    };
+};
+const lightElevation = elevationRamp("light");
 /** Light-mode ramp. A theme should carry `shadowsFor(mode)`, never this one in dark. */
 const shadows = {
     xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
-    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
-    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+    sm: lightElevation.sm,
+    base: lightElevation.base,
+    md: lightElevation.md,
+    lg: lightElevation.lg,
     xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
     "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
     outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
     inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
     none: "none",
     darkLg: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5)",
+    card: lightElevation.card,
+    float: lightElevation.float,
+    dialog: lightElevation.dialog,
+    sheet: lightElevation.sheet,
 };
-exports.shadowsDark = { ...shadows };
+exports.shadowsDark = { ...shadows, ...elevationRamp("dark") };
 const shadowsFor = (mode) => mode === "dark" ? exports.shadowsDark : shadows;
 exports.shadowsFor = shadowsFor;
 exports.default = shadows;

package/dist/Theme/tokens/primitives/typography.js

@@ -5,7 +5,7 @@ exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.fontWeights = exports.fontS
 exports.fonts = {
     body: "Inter Variable, sans-serif",
     heading: "Inter Variable, sans-serif",
-    mono: "Inter Variable, sans-serif",
+    mono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
 };
 exports.fontSizes = {
     "xs-minus": "0.6875rem",

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

@@ -1,19 +1,36 @@
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { darkerFillRung, labelOnFill, solidFillRung, } from "../../Theme/tokens/builders/filledSurface.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";
-import { reducedMotionSx } from "../../Theme/chakra/motion.js";
-import { BUTTON_SIZES, DEFAULT_CONTROL_SIZE, transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { MOTION_OK_QUERY, reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { BUTTON_SIZES, DEFAULT_CONTROL_SIZE, MOTION_PRESS_SCALE, transitionFor } from "../../Theme/tokens/primitives/index.js";
+const BUTTON_TRANSITION = [
+    transitionFor(["background-color", "border-color", "color", "box-shadow", "filter"]),
+    transitionFor(["transform"], "fast", "out"),
+].join(", ");
+const PRESS = {
+    [MOTION_OK_QUERY]: {
+        "&:active:not(:disabled):not([data-loading]):not([aria-disabled=true])": {
+            transform: `scale(${MOTION_PRESS_SCALE})`,
+        },
+    },
+};
 const controlSize = (size) => {
     const { height, fontSize, paddingX } = BUTTON_SIZES[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: [50] alone measured ~1.04 (invisible) in both modes — opacity ramp fixes it where available.
+// 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];
-    return "opacity" in scale ? scale.opacity[step] : scale[50];
+    if ("opacity" in scale)
+        return scale.opacity[step];
+    if (colorScheme !== "gray")
+        return scale[50];
+    const rows = listRowBackgrounds(theme.colors);
+    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);
@@ -24,6 +41,21 @@ const darkerFill = (theme, colorScheme, step) => {
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
 const labelFor = (theme, fill) => labelOnFill(fill, theme.colors.white, theme.colors.black);
+const solidSurface = (theme, colorScheme) => {
+    if (colorScheme === "primary")
+        return resolveFilledSurface(theme.colors.primary, theme.colors);
+    const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
+    const hoverFill = darkerFill(theme, colorScheme, 0);
+    const activeFill = darkerFill(theme, colorScheme, 1);
+    return {
+        fill,
+        color: labelFor(theme, fill),
+        hoverFill,
+        hoverColor: labelFor(theme, hoverFill),
+        activeFill,
+        activeColor: labelFor(theme, activeFill),
+    };
+};
 // NOTE: replaces Chakra's stock ring, which failed WCAG 1.4.11 on every brand — gated by focusRing.test.ts.
 const focusRing = (theme) => focusVisibleStyles(theme.colors);
 export const Button = {
@@ -32,7 +64,7 @@ export const Button = {
     baseStyle: ({ theme }) => ({
         borderRadius: "lg",
         fontWeight: 500,
-        transition: transitionFor(["background-color", "border-color", "color", "box-shadow", "filter"]),
+        transition: BUTTON_TRANSITION,
         ...reducedMotionSx(),
         _disabled: {
             opacity: 0.6,
@@ -42,35 +74,32 @@ export const Button = {
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
-            const hoverFill = darkerFill(theme, colorScheme, 0);
-            const activeFill = darkerFill(theme, colorScheme, 1);
-            const hoverLabel = labelFor(theme, hoverFill);
+            const s = solidSurface(theme, colorScheme);
             return {
-                bg: fill,
-                color: labelFor(theme, fill),
+                bg: s.fill,
+                color: s.color,
                 _hover: {
-                    bg: hoverFill,
-                    color: hoverLabel,
-                    boxShadow: "sm",
+                    bg: s.hoverFill,
+                    color: s.hoverColor,
                     _disabled: {
-                        bg: hoverFill, // keep hover color on loading
-                        color: hoverLabel,
+                        bg: s.hoverFill, // keep hover color on loading
+                        color: s.hoverColor,
                     },
                 },
                 _active: {
-                    bg: activeFill,
-                    color: labelFor(theme, activeFill),
+                    bg: s.activeFill,
+                    color: s.activeColor,
                     boxShadow: "none",
                 },
                 _loading: {
-                    bg: hoverFill, // keep hover color while loading
-                    color: hoverLabel,
+                    bg: s.hoverFill, // keep hover color while loading
+                    color: s.hoverColor,
                     _hover: {
-                        bg: hoverFill,
-                        color: hoverLabel,
+                        bg: s.hoverFill,
+                        color: s.hoverColor,
                     },
                 },
+                ...PRESS,
                 ...focusRing(theme),
             };
         },
@@ -91,6 +120,7 @@ export const Button = {
                 _loading: {
                     color: ink,
                 },
+                ...PRESS,
                 ...focusRing(theme),
             };
         },
@@ -104,6 +134,7 @@ export const Button = {
             _active: {
                 bg: onCanvasHoverBg(theme, colorScheme, 24),
             },
+            ...PRESS,
             ...focusRing(theme),
         }),
         link: ({ theme, colorScheme = "primary" }) => ({
@@ -140,7 +171,6 @@ export const Button = {
                 _hover: {
                     bgImage: bg,
                     filter: "brightness(0.92)",
-                    boxShadow: "md",
                     _disabled: { bgImage: bg, filter: "none" },
                 },
                 _active: {

package/dist/esm/Components/ConfirmDialog/ConfirmDialog.js

@@ -3,6 +3,7 @@ import { useRef, useState } from "react";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, VStack, Text, } from "@chakra-ui/react";
 import { AlertTriangle } from "lucide-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";
 const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, iconBg, iconColor, tone = "destructive", cancelLabel = "Cancel", confirmLabel = "Confirm", confirmIcon, isConfirmLoading = false, disableCancelWhilePending = true, confirmationText, confirmationLabel, bodyLayout = "flush", bodySpacing = 4, actionsPt = 0, focusCancelOnOpen = true, isCentered = true, closeOnEsc, closeOnOverlayClick, }) => {
@@ -13,6 +14,6 @@ const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, icon
     const isConfirmDisabled = isConfirmLoading || (requiresTypedConfirmation && typedText !== confirmationText);
     const actions = (_jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [_jsx(Button, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && isConfirmLoading }), _jsx(Button, { label: confirmLabel, onClick: onConfirm, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
     const body = requiresTypedConfirmation ? (_jsxs(_Fragment, { children: [children, _jsx(TextInput, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : (children);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, 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], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg, color: iconColor, children: icon !== null && icon !== void 0 ? icon : _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: title })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: bodyLayout === "stack" ? (_jsxs(VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : (_jsxs(_Fragment, { children: [body, actions] })) })] })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg, color: iconColor, children: icon !== null && icon !== void 0 ? icon : _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: title })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: bodyLayout === "stack" ? (_jsxs(VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : (_jsxs(_Fragment, { children: [body, actions] })) })] })] }));
 };
 export default ConfirmDialog;

package/dist/esm/Components/CustomModulesTable/CustomModulesTable.js

@@ -3,6 +3,7 @@ import { useMemo, useState } from "react";
 import { Box, Flex, Heading, HStack, Skeleton, Table, Tbody, Td, Text, Th, Thead, Tooltip, Tr, VStack, } from "@chakra-ui/react";
 import { Boxes, Pencil, Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { bandOn, cardRule } from "../../Theme/tokens/builders/planeStep.js";
 import Button from "../Button/Button.js";
 import EmptyState from "../EmptyState/EmptyState.js";
 import EditModuleModal from "./EditModuleModal.js";
@@ -29,20 +30,21 @@ const CustomModulesTable = ({ modules, isLoading = false, isUpdating = false, is
     const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [editTarget, setEditTarget] = useState(null);
     const [deleteTarget, setDeleteTarget] = useState(null);
-    const border = colors.boxborder[200];
+    const edge = colors.boxborder[200];
     const surface = colors.background[50];
+    const rule = cardRule(colors);
     const muted = colors.textMuted;
     const heading = colors.text[800];
-    const headBg = colors.backgroundColor.tableHeader;
+    const headBg = bandOn(colors.backgroundColor.tableHeader, surface);
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
         letterSpacing: "0.04em",
         color: muted,
-        borderColor: border,
+        borderColor: rule,
         py: 3,
     };
-    return (_jsxs(Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "sm", overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? (_jsx(EmptyState, { icon: Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), _jsx(Th, { ...thStyle, children: labels.moduleOwner }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), _jsx(Tbody, { children: modules.map((item) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: _jsx(Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: _jsx(Text, { noOfLines: 1, children: item.moduleName }) }) }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), _jsx(Td, { borderColor: border, children: _jsxs(HStack, { spacing: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: _jsx(Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: _jsx(Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), _jsx(EditModuleModal, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
+    return (_jsxs(Box, { backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: "sm", overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md", startColor: colors.gray[100], endColor: colors.gray[400] }, idx))) })) : modules.length === 0 ? (_jsx(EmptyState, { icon: Boxes, title: labels.noModules, size: "sm", minH: "180px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), _jsx(Th, { ...thStyle, children: labels.moduleOwner }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.action })] }) }), _jsx(Tbody, { children: modules.map((item) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, maxW: "220px", children: _jsx(Tooltip, { label: item.moduleName, hasArrow: true, openDelay: 400, children: _jsx(Text, { noOfLines: 1, children: item.moduleName }) }) }), _jsx(Td, { borderColor: rule, fontSize: "sm", color: muted, children: item.ownerLabel || "—" }), _jsx(Td, { borderColor: rule, children: _jsxs(HStack, { spacing: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "xs", variant: "outline", colorScheme: "primary", leftIcon: _jsx(Pencil, { size: 13 }), label: labels.edit, onClick: () => setEditTarget(item) }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "red", leftIcon: _jsx(Trash2, { size: 13 }), label: labels.delete, onClick: () => setDeleteTarget(item) })] }) })] }, item.module_id))) })] })) }), _jsx(EditModuleModal, { isOpen: editTarget !== null, onClose: () => setEditTarget(null), initialName: (_a = editTarget === null || editTarget === void 0 ? void 0 : editTarget.moduleName) !== null && _a !== void 0 ? _a : "", isLoading: isUpdating, onSubmit: async (name) => {
                     if (editTarget) {
                         await (onUpdateModule === null || onUpdateModule === void 0 ? void 0 : onUpdateModule({
                             moduleId: editTarget.module_id,

package/dist/esm/Components/CustomModulesTable/EditModuleModal.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, HStack, Input, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import Button from "../Button/Button.js";
 const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, labels, }) => {
     const { colors } = useCustomTheme();
@@ -10,7 +11,7 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, "aria-label": labels.moduleNamePlaceholder, 
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, "aria-label": labels.moduleNamePlaceholder, 
                                 // NOTE: [200] is the decorative divider rung — a real control's outline needs 1.4.11's 3:1, from [800].
                                 borderColor: colors.boxborder[500], mb: 5 }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };

package/dist/esm/Components/DatePicker/RangeDatePicker.js

@@ -10,6 +10,7 @@ import { useFieldIds } from "../Common/useFieldIds.js";
 import { readOnlyTriggerSx, resolvePickerAliases } from "./pickerField.js";
 import CalendarPanel from "./CalendarPanel.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { getTextInputIconSizePx, getTextInputIconWrapperSx, } from "../Input/textInputIconSize.js";
 import TimePicker from "./TimePicker.js";
@@ -225,7 +226,7 @@ export const RangeDatePicker = forwardRef(function RangeDatePicker(props, ref) {
                                                                 return;
                                                             }
                                                             setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: raisedRule(theme.colors), children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 RangeDatePicker.displayName = "RangeDatePicker";
 export default RangeDatePicker;

package/dist/esm/Components/DatePicker/SingleDatePicker.js

@@ -5,6 +5,7 @@ import { format, parse, isValid, isSameDay, isBefore, isAfter, addDays, } from "
 import { CalendarIcon } from "lucide-react";
 import Button from "../Button/Button.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { getTextInputIconSizePx, getTextInputIconWrapperSx, } from "../Input/textInputIconSize.js";
 import { isStringValueProps, } from "./DatePickerProps.js";
@@ -987,7 +988,7 @@ function SingleDatePickerInner(props, ref) {
                                                 setTempDate(updatedDate);
                                                 setInputValue(format(updatedDate, resolvedDateFormat));
                                                 setIsTyping(false);
-                                            }, isDisabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                            }, isDisabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: raisedRule(theme.colors), children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
                                                     setTempDate(null);
                                                     requestClose(null);
                                                 }, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));

package/dist/esm/Components/DatePicker/TimeOnlyPicker.js

@@ -13,6 +13,7 @@ import { TimePickerInput } from "./TimePickerInput.js";
 import PickerPortal, { usePickerPortal } from "./PickerPortal.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
 function TimeOnlyPickerInner(props, ref) {
@@ -99,7 +100,7 @@ function TimeOnlyPickerInner(props, ref) {
                                             openPicker();
                                     }, error: error, size: sizeKey }) }) }) }), _jsx(PickerPortal, { isMounted: pickerPortal.isMounted, children: _jsx(PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, children: _jsxs(PopoverBody, { children: [_jsx(TimePicker, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
                                             handleTimePickerChange(updatedDate);
-                                        } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                        } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: raisedRule(theme.colors), children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }
 export const TimeOnlyPicker = forwardRef(TimeOnlyPickerInner);
 TimeOnlyPicker.displayName = "TimeOnlyPicker";

package/dist/esm/Components/DatePicker/dayStates.js

@@ -1,3 +1,4 @@
+import { recessOn } from "../../Theme/tokens/builders/planeStep.js";
 // Ascending precedence — when a day carries several keys, a later one's visual overrides an earlier one's.
 export const DAY_STATE_KEYS = [
     "weekly-off",
@@ -9,7 +10,7 @@ export const DAY_STATE_KEYS = [
 // NOTE: token roles per THEME-CONTRACT.md, not raw rungs — e.g. holiday uses semanticText, never semantic[500].
 const VISUALS = {
     "weekly-off": (colors) => ({
-        cellBg: colors.backgroundColor.muted,
+        cellBg: recessOn(colors.backgroundColor.muted, colors.surfaceRaised),
         color: colors.textMuted,
     }),
     holiday: (colors) => ({

package/dist/esm/Components/Drawer/Drawer.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { warnDroppedSlotChildren } from "../Modal/warnDroppedSlotChildren.js";
 import { Drawer as ChakraDrawer, DrawerBody as ChakraDrawerBody, DrawerFooter as ChakraDrawerFooter, DrawerHeader as ChakraDrawerHeader, DrawerOverlay, DrawerContent, DrawerCloseButton, } from "@chakra-ui/react";
 export const DrawerHeader = ({ children }) => {
@@ -35,5 +36,5 @@ export default function Drawer({ isOpen, onClose, placement = "right", size = "x
     const bodySlot = findSlot(children, DrawerBody);
     const footerSlot = findSlot(children, DrawerFooter);
     warnDroppedSlotChildren("Drawer", children, [DrawerHeader, DrawerBody, DrawerFooter]);
-    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { ...contentProps, children: [!hideCloseButton && _jsx(DrawerCloseButton, {}), headerSlot && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", borderColor: colors.boxborder[200], ...headerSlot.props, children: headerSlot })), _jsx(ChakraDrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraDrawerFooter, { borderTopWidth: "1px", borderColor: colors.boxborder[200], ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
+    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { ...contentProps, children: [!hideCloseButton && _jsx(DrawerCloseButton, {}), headerSlot && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", borderColor: raisedRule(colors), ...headerSlot.props, children: headerSlot })), _jsx(ChakraDrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraDrawerFooter, { borderTopWidth: "1px", borderColor: raisedRule(colors), ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
 }

package/dist/esm/Components/Dropdown/DropDown.js

@@ -3,6 +3,7 @@ import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState }
 import { Box, Flex, Button, useDisclosure, List, ListItem, Portal, } from "@chakra-ui/react";
 import { motion, useReducedMotion } from "framer-motion";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
@@ -257,7 +258,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
                     color: theme.colors.accentText,
                     boxShadow: `inset 0 0 0 2px ${theme.colors.focusRing.ring}`,
                 }, borderBottom: divider
-                    ? `${BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`
+                    ? `${BORDER_WIDTHS.hairline} solid ${raisedRule(theme.colors)}`
                     : undefined, sx: { "&:last-child": { borderBottom: "none" }, ...reducedMotionSx() }, style: ItemStyle, fontWeight: 500, children: [option.image && (_jsx(Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), _jsx(Box, { as: "span", fontSize: rowSpec.fontSize, isTruncated: true, style: LabelStyle, children: option.label })] }, option.id))) }));
     };
     return (_jsxs(Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && (_jsx(Portal, { children: _jsx(MotionBox, { ref: setMenuRef, position: "fixed", zIndex: "popover", initial: prefersReducedMotion ? false : { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: {

package/dist/esm/Components/FileUpload/FileUpload.js

@@ -12,16 +12,23 @@ import { TextLabel } from "../Common/FormLabel.js";
 import FieldMessage from "../Common/FieldMessage.js";
 import { useFieldIds } from "../Common/useFieldIds.js";
 import { FIELD_RADIUS, FIELD_TRANSITION } from "../Common/fieldStyles.js";
-import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { focusVisibleRing, focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 const FileThumbnail = ({ file, radius, onPreview, }) => {
     const url = useObjectUrl(file);
-    return (_jsxs(Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+    const { colors } = useCustomTheme();
+    const preview = () => url && onPreview(url);
+    return (_jsxs(Box, { role: "button", tabIndex: 0, "aria-label": `Preview ${file.name}`, boxSize: "2.5rem", cursor: "pointer", position: "relative", _focusVisible: focusVisibleRing(colors), _hover: {
             ".hover-icon": {
                 opacity: 1,
                 bg: "blackAlpha.500",
             },
-        }, onClick: () => url && onPreview(url), children: [_jsx("img", { src: url, alt: file.name, style: {
+        }, onClick: preview, onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ")
+                return;
+            event.preventDefault();
+            preview();
+        }, children: [_jsx("img", { src: url, alt: file.name, style: {
                     width: "100%",
                     height: "100%",
                     objectFit: "cover",