@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/components/core/DragDrop/DragDrop.js

@@ -1,4 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { createContext, useState, useRef, useCallback, useMemo, useEffect, useContext } from 'react';
 import { motion } from 'motion/react';
 export { AnimatePresence } from 'motion/react';
@@ -6,20 +7,53 @@ import { cn } from '../../../utils/cn.js';
 import { dragDropTheme } from './DragDrop.theme.js';
 
 const DragDropContext = createContext(null);
-const DragDropProvider = React__default.forwardRef(({ children }, ref) => {
+// ---------------------------------------------------------------------------
+// Provider
+// ---------------------------------------------------------------------------
+const DragDropProvider = React__default.forwardRef(({ children }, _ref) => {
+    var _a;
+    // pointer drag state
     const [activeDrag, setActiveDrag] = useState(null);
     const pointerRef = useRef(null);
     const dropZones = useRef(new Map());
     const groupIdRef = useRef(`dd-${Math.random().toString(36).slice(2)}`);
+    // keyboard drag state
+    const [keyboardDragData, setKeyboardDragData] = useState(null);
+    const [keyboardDragLabel, setKeyboardDragLabel] = useState('');
+    const [keyboardZoneIndex, setKeyboardZoneIndex] = useState(-1);
+    const [announcement, setAnnouncement] = useState('');
+    const keyboardDragId = (_a = keyboardDragData === null || keyboardDragData === void 0 ? void 0 : keyboardDragData.id) !== null && _a !== void 0 ? _a : null;
+    // Stable ordered list of drop-zone IDs so Arrow-key cycling is deterministic
+    const dropZoneOrder = useRef([]);
     const registerDropZone = useCallback((id, element) => {
         dropZones.current.set(id, element);
+        if (!dropZoneOrder.current.includes(id)) {
+            dropZoneOrder.current.push(id);
+        }
     }, []);
     const unregisterDropZone = useCallback((id) => {
         dropZones.current.delete(id);
+        dropZoneOrder.current = dropZoneOrder.current.filter((zid) => zid !== id);
     }, []);
     const setPointer = useCallback((point) => {
         pointerRef.current = point;
     }, []);
+    const startKeyboardDrag = useCallback((data, label) => {
+        setKeyboardDragData(data);
+        setKeyboardDragLabel(label);
+        setKeyboardZoneIndex(-1);
+    }, []);
+    const endKeyboardDrag = useCallback(() => {
+        setKeyboardDragData(null);
+        setKeyboardDragLabel('');
+        setKeyboardZoneIndex(-1);
+    }, []);
+    const announce = useCallback((message) => {
+        // Briefly clear then set to guarantee re-announcement of the same string
+        setAnnouncement('');
+        // Use a microtask so the DOM sees the empty value first
+        setTimeout(() => setAnnouncement(message), 0);
+    }, []);
     const contextValue = useMemo(() => ({
         activeDrag,
         setActiveDrag,
@@ -29,8 +63,30 @@ const DragDropProvider = React__default.forwardRef(({ children }, ref) => {
         registerDropZone,
         unregisterDropZone,
         dropZones: dropZones.current,
-    }), [activeDrag, setActiveDrag, setPointer, registerDropZone, unregisterDropZone]);
-    return (jsx(DragDropContext.Provider, { value: contextValue, children: children }));
+        keyboardDragId,
+        keyboardDragData,
+        keyboardDragLabel,
+        startKeyboardDrag,
+        endKeyboardDrag,
+        dropZoneOrder,
+        keyboardZoneIndex,
+        setKeyboardZoneIndex,
+        announce,
+    }), [
+        activeDrag,
+        setPointer,
+        registerDropZone,
+        unregisterDropZone,
+        keyboardDragId,
+        keyboardDragData,
+        keyboardDragLabel,
+        startKeyboardDrag,
+        endKeyboardDrag,
+        keyboardZoneIndex,
+        setKeyboardZoneIndex,
+        announce,
+    ]);
+    return (jsxs(DragDropContext.Provider, { value: contextValue, children: [children, jsx("div", { className: "sr-only", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "additions text", children: announcement })] }));
 });
 DragDropProvider.displayName = 'DragDropProvider';
 const useDragDropContext = () => {
@@ -40,7 +96,10 @@ const useDragDropContext = () => {
     }
     return context;
 };
-const Draggable = React__default.forwardRef(({ children, dragData, className, theme: customTheme = {}, onDragStart, onDrag, onDragEnd, disabled = false, }, ref) => {
+// ---------------------------------------------------------------------------
+// Draggable
+// ---------------------------------------------------------------------------
+const Draggable = React__default.forwardRef(({ children, dragData, dragLabel, className, theme: customTheme = {}, onDragStart, onDrag, onDragEnd, disabled = false, }, ref) => {
     var _a;
     const context = useDragDropContext();
     const dragRef = useRef(null);
@@ -48,6 +107,9 @@ const Draggable = React__default.forwardRef(({ children, dragData, className, th
         ...dragDropTheme,
         ...customTheme,
     };
+    // Resolve the human-readable label used in announcements
+    const resolvedLabel = dragLabel !== null && dragLabel !== void 0 ? dragLabel : dragData.id;
+    // ----- pointer drag handlers (unchanged) --------------------------------
     const handleDragStart = useCallback((_event, info) => {
         if (disabled)
             return;
@@ -73,7 +135,7 @@ const Draggable = React__default.forwardRef(({ children, dragData, className, th
                 point.y <= dropRect.bottom) {
                 const dropEvent = new CustomEvent('motion-drop', {
                     detail: dragData,
-                    bubbles: true
+                    bubbles: true,
                 });
                 dropZone.dispatchEvent(dropEvent);
             }
@@ -82,7 +144,62 @@ const Draggable = React__default.forwardRef(({ children, dragData, className, th
         context.setPointer(null);
         onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(dragData, info);
     }, [dragData, onDragEnd, context]);
-    const isDragging = ((_a = context.activeDrag) === null || _a === void 0 ? void 0 : _a.id) === dragData.id;
+    // ----- keyboard drag handler (new) --------------------------------------
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        if (disabled)
+            return;
+        const isGrabbed = context.keyboardDragId === dragData.id;
+        if ((e.key === ' ' || e.key === 'Enter') && !isGrabbed) {
+            // Initiate keyboard drag
+            e.preventDefault();
+            context.startKeyboardDrag(dragData, resolvedLabel);
+            context.announce(`Grabbed ${resolvedLabel}. Use arrow keys to move between drop zones. Press Space or Enter to drop, or Escape to cancel.`);
+            return;
+        }
+        if (isGrabbed) {
+            if (e.key === 'Escape') {
+                // Cancel keyboard drag
+                e.preventDefault();
+                context.endKeyboardDrag();
+                context.announce(`Drop cancelled. ${resolvedLabel} returned to original position.`);
+                // Return focus to this draggable
+                (_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                return;
+            }
+            if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+                e.preventDefault();
+                const order = context.dropZoneOrder.current;
+                if (order.length === 0)
+                    return;
+                // Advance from the last-known zone index, tracked in React state
+                // (context.keyboardZoneIndex) rather than read off the DOM -- the
+                // element that actually hears Arrow keys is this Draggable, which
+                // never carries `data-dropzone-id` (only Dropzone containers do),
+                // so reading the DOM attribute here always missed.
+                const currentIdx = context.keyboardZoneIndex;
+                const nextIdx = currentIdx === -1 ? 0 : (currentIdx + 1) % order.length;
+                const nextEl = context.dropZones.get(order[nextIdx]);
+                nextEl === null || nextEl === void 0 ? void 0 : nextEl.focus();
+                context.setKeyboardZoneIndex(nextIdx);
+                return;
+            }
+            if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+                e.preventDefault();
+                const order = context.dropZoneOrder.current;
+                if (order.length === 0)
+                    return;
+                const currentIdx = context.keyboardZoneIndex;
+                const prevIdx = currentIdx === -1 ? order.length - 1 : (currentIdx - 1 + order.length) % order.length;
+                const prevEl = context.dropZones.get(order[prevIdx]);
+                prevEl === null || prevEl === void 0 ? void 0 : prevEl.focus();
+                context.setKeyboardZoneIndex(prevIdx);
+                return;
+            }
+        }
+    }, [disabled, context, dragData, resolvedLabel]);
+    const isPointerDragging = ((_a = context.activeDrag) === null || _a === void 0 ? void 0 : _a.id) === dragData.id;
+    const isKeyboardGrabbed = context.keyboardDragId === dragData.id;
     return (jsx(motion.div, { ref: (node) => {
             dragRef.current = node;
             if (typeof ref === 'function') {
@@ -104,12 +221,21 @@ const Draggable = React__default.forwardRef(({ children, dragData, className, th
             x: { type: 'spring', stiffness: 1000, damping: 50 },
             y: { type: 'spring', stiffness: 1000, damping: 50 },
         }, style: {
-            position: isDragging ? 'relative' : 'relative',
-            zIndex: isDragging ? 99999 : 'auto',
-            isolation: isDragging ? 'isolate' : 'auto',
-        }, className: cn(theme.draggableStyle, disabled && 'opacity-50 cursor-not-allowed', !disabled && 'cursor-grab active:cursor-grabbing', isDragging && '[&]:!z-[99999]', className), onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, children: children }));
+            position: 'relative',
+            zIndex: isPointerDragging ? 99999 : 'auto',
+            isolation: isPointerDragging ? 'isolate' : 'auto',
+            outline: isKeyboardGrabbed ? '2px solid var(--color-primary)' : undefined,
+            outlineOffset: isKeyboardGrabbed ? '2px' : undefined,
+        }, className: cn(theme.draggableStyle, disabled && 'opacity-50 cursor-not-allowed', !disabled && 'cursor-grab active:cursor-grabbing', isPointerDragging && '[&]:!z-[99999]', className), 
+        // Pointer drag callbacks
+        onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, 
+        // Keyboard accessibility
+        role: "button", tabIndex: disabled ? -1 : 0, "aria-label": `Drag ${resolvedLabel}`, "aria-grabbed": isKeyboardGrabbed, onKeyDown: handleKeyDown, children: children }));
 });
 Draggable.displayName = 'Draggable';
+// ---------------------------------------------------------------------------
+// Droppable
+// ---------------------------------------------------------------------------
 const Droppable = React__default.forwardRef(({ children, acceptedTypes, className, theme: customTheme = {}, onDrop, onDragEnter, onDragLeave, id, }, ref) => {
     const context = useDragDropContext();
     const [isDragOver, setIsDragOver] = useState(false);
@@ -120,7 +246,9 @@ const Droppable = React__default.forwardRef(({ children, acceptedTypes, classNam
         ...dragDropTheme,
         ...customTheme,
     };
-    // Register drop zone
+    // Whether a keyboard drag is currently active (any item grabbed)
+    const isKeyboardDragActive = context.keyboardDragId !== null;
+    // ----- registration (unchanged) -----------------------------------------
     useEffect(() => {
         if (dropRef.current) {
             context.registerDropZone(stableId, dropRef.current);
@@ -129,7 +257,7 @@ const Droppable = React__default.forwardRef(({ children, acceptedTypes, classNam
             context.unregisterDropZone(stableId);
         };
     }, [stableId, context]);
-    // Compute drag-over state precisely based on pointer location using rAF
+    // ----- pointer drag-over detection (unchanged) --------------------------
     useEffect(() => {
         if (!context.activeDrag) {
             if (isDragOver) {
@@ -173,12 +301,11 @@ const Droppable = React__default.forwardRef(({ children, acceptedTypes, classNam
                 cancelAnimationFrame(rafIdRef.current);
         };
     }, [acceptedTypes, isDragOver, onDragEnter, onDragLeave, context.activeDrag]);
-    // Handle drop
+    // ----- pointer drop handler (unchanged) ---------------------------------
     useEffect(() => {
         const handleDrop = (event) => {
             const customEvent = event;
             const data = customEvent.detail;
-            // Check if type is accepted
             if (acceptedTypes && acceptedTypes.length > 0) {
                 if (!acceptedTypes.includes(data.type || '')) {
                     return;
@@ -197,6 +324,49 @@ const Droppable = React__default.forwardRef(({ children, acceptedTypes, classNam
             }
         };
     }, [acceptedTypes, onDrop]);
+    // ----- keyboard: announce when this zone receives focus -----------------
+    const handleFocus = useCallback(() => {
+        if (!isKeyboardDragActive)
+            return;
+        const order = context.dropZoneOrder.current;
+        const zoneIndex = order.indexOf(stableId);
+        // Keep the shared cycling index in sync with whichever zone actually
+        // has focus (whether it got there via Arrow-key cycling or native Tab)
+        // so the next Arrow press continues from the real position.
+        context.setKeyboardZoneIndex(zoneIndex);
+        const zoneNumber = zoneIndex === -1 ? '' : ` ${zoneIndex + 1}`;
+        context.announce(`Over drop zone${zoneNumber}.`);
+    }, [isKeyboardDragActive, context, stableId]);
+    // ----- keyboard: Space/Enter completes the drop -------------------------
+    const handleKeyDown = useCallback((e) => {
+        if (!isKeyboardDragActive)
+            return;
+        if (e.key !== ' ' && e.key !== 'Enter')
+            return;
+        e.preventDefault();
+        const grabbedData = context.keyboardDragData;
+        const grabbedLabel = context.keyboardDragLabel;
+        if (!grabbedData)
+            return;
+        // NOTE: acceptedTypes filtering is intentionally skipped for the
+        // keyboard path to keep it simple; the pointer path already handles it.
+        const order = context.dropZoneOrder.current;
+        const zoneIndex = order.indexOf(stableId);
+        const zoneNumber = zoneIndex === -1 ? '' : ` ${zoneIndex + 1}`;
+        // Fire the drop callback exactly once, forwarding the full drag data
+        // (id + type + data) so the payload shape matches a pointer-initiated
+        // drop. Do NOT also redispatch a `motion-drop` CustomEvent here --
+        // Droppable already listens for that event itself (registered just
+        // above, for the pointer-drag path), so redispatching it here would
+        // invoke `onDrop` a second time for the same keyboard action. The
+        // pointer path still relies on the event because Draggable's
+        // `handleDragEnd` hit-tests drop zones from the DOM and has no direct
+        // reference to this Droppable's `onDrop` prop; the keyboard path
+        // already has that reference, so the direct call is sufficient.
+        onDrop === null || onDrop === void 0 ? void 0 : onDrop(grabbedData);
+        context.announce(`${grabbedLabel} dropped in position${zoneNumber}.`);
+        context.endKeyboardDrag();
+    }, [isKeyboardDragActive, context, stableId, onDrop]);
     return (jsx(motion.div, { ref: (node) => {
             dropRef.current = node;
             if (typeof ref === 'function') {
@@ -210,8 +380,10 @@ const Droppable = React__default.forwardRef(({ children, acceptedTypes, classNam
             zIndex: 0,
         }, className: cn(theme.droppableStyle, isDragOver && theme.dragOverStyle, className), animate: isDragOver ? 'dragOver' : 'idle', variants: {
             idle: { scale: 1 },
-            dragOver: { scale: 1.01 }
-        }, transition: { duration: 0.15 }, children: typeof children === 'function' ? children(isDragOver) : children }));
+            dragOver: { scale: 1.01 },
+        }, transition: { duration: 0.15 }, 
+        // Keyboard accessibility: become reachable only while a keyboard drag is active
+        tabIndex: isKeyboardDragActive ? 0 : undefined, role: isKeyboardDragActive ? 'button' : undefined, "aria-label": isKeyboardDragActive ? 'Drop here' : undefined, "data-dropzone-id": stableId, onFocus: handleFocus, onKeyDown: handleKeyDown, children: typeof children === 'function' ? children(isDragOver) : children }));
 });
 Droppable.displayName = 'Droppable';
 

package/dist/components/core/DragDrop/DragDrop.types.d.ts

@@ -34,6 +34,12 @@ export interface DraggableProps {
     onDragEnd?: (data: DragData, info: PanInfo) => void;
     /** Disable dragging */
     disabled?: boolean;
+    /**
+     * Accessible label used in keyboard-drag announcements.
+     * Defaults to the dragData.id when omitted.
+     * Example: "Task card – Fix login bug"
+     */
+    dragLabel?: string;
 }
 export interface DroppableProps {
     /** Content of the drop zone */

package/dist/components/core/Drawer/Drawer.animations.js

@@ -1,9 +1,11 @@
+"use client";
 /**
  * Drawer overlay animation variants
  */
 const drawerOverlayAnimations = {
     initial: {
         opacity: 0,
+        willChange: "opacity",
     },
     animate: {
         opacity: 1,
@@ -26,13 +28,13 @@ const drawerOverlayAnimations = {
 const getDrawerContentAnimations = (position) => {
     const animations = {
         left: {
-            initial: { x: "-100%" },
+            initial: { x: "-100%", willChange: "transform" },
             animate: {
                 x: 0,
                 transition: {
                     type: "spring",
-                    damping: 40,
-                    stiffness: 300,
+                    stiffness: 280,
+                    damping: 28,
                     mass: 0.8,
                 },
             },
@@ -45,13 +47,13 @@ const getDrawerContentAnimations = (position) => {
             },
         },
         right: {
-            initial: { x: "100%" },
+            initial: { x: "100%", willChange: "transform" },
             animate: {
                 x: 0,
                 transition: {
                     type: "spring",
-                    damping: 40,
-                    stiffness: 300,
+                    stiffness: 280,
+                    damping: 28,
                     mass: 0.8,
                 },
             },
@@ -64,13 +66,13 @@ const getDrawerContentAnimations = (position) => {
             },
         },
         top: {
-            initial: { y: "-100%" },
+            initial: { y: "-100%", willChange: "transform" },
             animate: {
                 y: 0,
                 transition: {
                     type: "spring",
-                    damping: 40,
-                    stiffness: 300,
+                    stiffness: 280,
+                    damping: 28,
                     mass: 0.8,
                 },
             },
@@ -83,13 +85,13 @@ const getDrawerContentAnimations = (position) => {
             },
         },
         bottom: {
-            initial: { y: "100%" },
+            initial: { y: "100%", willChange: "transform" },
             animate: {
                 y: 0,
                 transition: {
                     type: "spring",
-                    damping: 40,
-                    stiffness: 300,
+                    stiffness: 280,
+                    damping: 28,
                     mass: 0.8,
                 },
             },

package/dist/components/core/Drawer/Drawer.d.ts

@@ -1,7 +1,7 @@
-import { DrawerProps, DrawerContextValue } from "./Drawer.types";
-export declare const useDrawerContext: () => DrawerContextValue;
+import { DrawerProps } from "./Drawer.types";
+export { DrawerContext, useDrawerContext } from "./DrawerContext";
 export declare const Drawer: {
-    ({ isOpen, onClose, title, subtitle, icon, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, scale, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, onClose, title, subtitle, icon, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, scale, closeOnBack, elevation, lift, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Header: {
@@ -9,15 +9,15 @@ export declare const Drawer: {
         displayName: string;
     };
     Title: {
-        ({ children, className, ...props }: import("./Drawer.types").DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, as: Tag, ...props }: import("./Drawer.types").DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Subtitle: {
         ({ children, className, ...props }: import("./Drawer.types").DrawerSubtitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    Content: {
-        ({ children, className, ...props }: import("./Drawer.types").DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+    Body: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Footer: {

package/dist/components/core/Drawer/Drawer.js

@@ -1,25 +1,49 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { createContext, useId, useMemo, useContext } from 'react';
+import React__default, { useId, useMemo, useRef, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useScaleBackground } from '../../../hooks/useScaleBackground.js';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
 import { drawerTheme, drawerSizeVariants, drawerPositionVariantsFullWidth, drawerPositionVariantsWithMargin } from './Drawer.theme.js';
 import { drawerOverlayAnimations, getDrawerContentAnimations } from './Drawer.animations.js';
+import { DrawerContext } from './DrawerContext.js';
+export { useDrawerContext } from './DrawerContext.js';
 import { DrawerHeader } from './DrawerHeader.js';
 import { DrawerTitle } from './DrawerTitle.js';
 import { DrawerSubtitle } from './DrawerSubtitle.js';
-import { DrawerContent } from './DrawerContent.js';
+import { DrawerBody } from './DrawerBody.js';
 import { DrawerFooter } from './DrawerFooter.js';
+import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
-// Create context for Drawer components
-const DrawerContext = createContext(undefined);
-const useDrawerContext = () => {
-    const ctx = useContext(DrawerContext);
-    if (!ctx)
-        throw new Error("Drawer compound components must be used within <Drawer>");
-    return ctx;
-};
-const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right", size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, scale = 0.94, ...props }) => {
+/** Manages browser history so the back button closes the drawer instead of navigating. */
+function useCloseOnBack(isOpen, onClose, enabled) {
+    const closedByPopstate = useRef(false);
+    useEffect(() => {
+        if (!enabled || !isOpen)
+            return;
+        if (typeof window === "undefined")
+            return;
+        closedByPopstate.current = false;
+        history.pushState({ flikDrawer: true }, "");
+        const handlePopstate = () => {
+            closedByPopstate.current = true;
+            onClose();
+        };
+        window.addEventListener("popstate", handlePopstate);
+        return () => {
+            window.removeEventListener("popstate", handlePopstate);
+            if (!closedByPopstate.current) {
+                history.back();
+            }
+        };
+    }, [isOpen, onClose, enabled]);
+}
+const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right", size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, scale = 0.94, closeOnBack = false, elevation, lift, ...props }) => {
+    // Grounded backdrop overlay: a Drawer covers the viewport edge, so it paints a FIXED
+    // rung 4 regardless of where its <Drawer> JSX sits. Content inside still lifts relative.
+    const surfaceLevel = useSurfaceElevation({ baseRung: 4, ground: true, elevation, lift });
+    // Close drawer on browser back button
+    useCloseOnBack(isOpen, onClose, closeOnBack);
     // iOS-style scale background effect
     useScaleBackground({ isOpen, scale, position });
     // Generate unique IDs for ARIA linkage
@@ -43,7 +67,18 @@ const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right"
         theme,
         titleId,
         subtitleId,
-    }), [isOpen, onClose, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, theme, titleId, subtitleId]);
+    }), [
+        isOpen,
+        onClose,
+        position,
+        size,
+        closeOnOverlayClick,
+        closeOnEsc,
+        showCloseButton,
+        theme,
+        titleId,
+        subtitleId,
+    ]);
     // Detect if children contain a compound Drawer.Header
     const hasCompoundHeader = React__default.Children.toArray(children).some((child) => {
         var _a;
@@ -52,19 +87,27 @@ const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right"
     });
     // Auto-generate header when using prop shorthand (backward compat)
     const shouldAutoRenderHeader = !hasCompoundHeader && (title || showCloseButton);
-    // Get size variant based on position
+    // Detect whether size is a preset token or an arbitrary Tailwind class
+    const SIZE_TOKENS = ["sm", "md", "lg", "full"];
+    const isSizeToken = SIZE_TOKENS.includes(size);
+    // Get size variant based on position (only for preset tokens)
     const isHorizontal = position === "left" || position === "right";
-    const sizeVariant = isHorizontal
-        ? drawerSizeVariants.horizontal[size]
-        : drawerSizeVariants.vertical[size];
+    const sizeVariant = isSizeToken
+        ? isHorizontal
+            ? drawerSizeVariants.horizontal[size]
+            : drawerSizeVariants.vertical[size]
+        : size; // treat arbitrary string as a raw Tailwind class
     // Use different positioning for full-width/height drawers
     const positionVariant = size === "full"
         ? drawerPositionVariantsFullWidth[position]
         : drawerPositionVariantsWithMargin[position];
-    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "none", role: "dialog", ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, positionVariant, size !== "full" && sizeVariant, className), animations: {
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "none", role: "dialog", ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(surfaceClasses(surfaceLevel, { translucent: false, shadow: false }), theme.container, positionVariant, isSizeToken && size !== "full" && sizeVariant, !isSizeToken && sizeVariant, // raw Tailwind class
+        className), animations: {
             overlay: drawerOverlayAnimations,
             content: getDrawerContentAnimations(position),
-        }, ...props, children: jsx(DrawerContext.Provider, { value: contextValue, children: jsxs("div", { className: theme.content, children: [shouldAutoRenderHeader && (jsxs(DrawerHeader, { icon: icon, children: [title && jsx(DrawerTitle, { children: title }), subtitle && jsx(DrawerSubtitle, { children: subtitle })] })), children] }) }) }));
+        }, ...props, children: jsx(DrawerContext.Provider, { value: contextValue, children: jsx(SurfaceProvider, { level: surfaceLevel, children: jsxs("div", { className: theme.inner, children: [shouldAutoRenderHeader && (jsxs(DrawerHeader, { icon: icon, children: [title &&
+                                    (typeof title === "string" ? (jsx(DrawerTitle, { children: title })) : (title)), subtitle &&
+                                    (typeof subtitle === "string" ? (jsx(DrawerSubtitle, { children: subtitle })) : (subtitle))] })), children] }) }) }) }));
 };
 DrawerRoot.displayName = "Drawer";
 // Attach compound subcomponents
@@ -72,8 +115,8 @@ const Drawer = Object.assign(DrawerRoot, {
     Header: DrawerHeader,
     Title: DrawerTitle,
     Subtitle: DrawerSubtitle,
-    Content: DrawerContent,
+    Body: DrawerBody,
     Footer: DrawerFooter,
 });
 
-export { Drawer, useDrawerContext };
+export { Drawer, DrawerContext };

package/dist/components/core/Drawer/Drawer.theme.d.ts

@@ -20,11 +20,13 @@ export declare const drawerPositionVariantsFullWidth: {
 };
 export declare const drawerSizeVariants: {
     horizontal: {
+        sm: string;
         md: string;
         lg: string;
         full: string;
     };
     vertical: {
+        sm: string;
         md: string;
         lg: string;
         full: string;

package/dist/components/core/Drawer/Drawer.theme.js

@@ -1,43 +1,50 @@
 const drawerTheme = {
     // Note: overlay styling is now handled by the shared Overlay component
     overlay: "",
-    container: "fixed bg-white shadow-2xl shadow-black/30 " +
+    // bg comes from the relative-elevation engine (surfaceClasses) at runtime so a drawer
+    // lifts above its host substrate; keep the dramatic shadow + ring + border + radius here.
+    container: "fixed shadow-2xl shadow-black/30 m-3 " +
         "border border-[var(--color-border)] ring-4 ring-white/10 " +
         "flex flex-col overflow-hidden rounded-[var(--drawer-radius)] " +
-        "dark:bg-[var(--color-background-secondary)] dark:ring-white/5",
-    content: "h-full flex flex-col",
-    header: "flex items-start justify-between p-4 border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
+        "dark:ring-white/5",
+    inner: "h-full flex flex-col",
+    header: "flex items-start justify-between px-[var(--drawer-px)] py-[var(--drawer-py)] border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
     headerContent: "flex items-start gap-3 flex-1 min-w-0",
-    title: "text-base font-semibold leading-6 text-[var(--color-text-primary)]",
+    title: "text-[length:var(--drawer-title-size)] font-semibold leading-6 text-[var(--color-text-primary)]",
     subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
-    body: "flex-1 overflow-y-auto p-4",
-    footer: "flex items-center justify-end gap-3 p-4 border-t border-[var(--color-border)] shrink-0 " +
-        "dark:border-[var(--color-neutral-700)]",
+    body: "flex-1 overflow-y-auto px-[var(--drawer-px)] py-[var(--drawer-py)]",
+    // Footer's vertical padding is deliberately lighter than header/body —
+    // proportional calc() off --drawer-py (today's ratio, 12/16) so it stays
+    // in that same relationship under a themed override; horizontal matches.
+    footer: "flex items-center justify-end gap-3 px-[var(--drawer-px)] py-[calc(var(--drawer-py)*0.75)] border-t border-[var(--color-border)] shrink-0 " +
+        "",
 };
 // Position variants with margin support
 const drawerPositionVariantsWithMargin = {
-    left: "left-6 top-6 h-[calc(100vh-3rem)]", // 100vh - 1.5rem top - 1.5rem bottom
-    right: "right-6 top-6 h-[calc(100vh-3rem)]",
-    top: "top-6 left-6 w-[calc(100vw-3rem)]",
-    bottom: "bottom-6 left-6 w-[calc(100vw-3rem)]",
+    left: "left-0 top-0 bottom-0", // 100vh - margins
+    right: "right-0 top-0 bottom-0",
+    top: "top-0 left-0 right-0",
+    bottom: "bottom-0 left-0 right-0",
 };
 // Position variants for full-width/height drawers with consistent margins
 const drawerPositionVariantsFullWidth = {
-    left: "left-6 top-6 right-6 bottom-6", // Consistent margins on all sides
-    right: "right-6 top-6 left-6 bottom-6",
-    top: "top-6 left-6 right-6 bottom-6",
-    bottom: "bottom-6 left-6 right-6 top-6",
+    left: "left-0 top-0 right-0 bottom-0", // Consistent margins on all sides
+    right: "right-0 top-0 left-0 bottom-0",
+    top: "top-0 left-0 right-0 bottom-0",
+    bottom: "bottom-0 left-0 right-0 top-0",
 };
 // Size variants based on position
 const drawerSizeVariants = {
     // Horizontal drawers (left/right)
     horizontal: {
+        sm: "w-[min(320px,90vw)]", // 320px on large screens, max 90% on small
         md: "w-[min(420px,90vw)]", // 420px on large screens, max 90% on small
         lg: "w-[min(560px,85vw)]", // 560px on large screens, max 85% on small
         full: "w-full", // Full width - positioning handles margins
     },
     // Vertical drawers (top/bottom)
     vertical: {
+        sm: "h-[min(240px,90vh)]", // 240px on large screens, max 90% on small
         md: "h-[min(320px,90vh)]", // 320px on large screens, max 90% on small
         lg: "h-[min(448px,85vh)]", // 448px on large screens, max 85% on small
         full: "h-full", // Full height - positioning handles margins