@flikk/ui 1.0.0-beta.22 → 1.0.0-beta.24

package/dist/components/core/ContextMenu/ContextMenuSubBody.js

@@ -19,6 +19,8 @@ const ContextMenuSubBody = React__default.forwardRef(({ children, className, ani
     // Update position when submenu opens
     useEffect(() => {
         if (isOpen && triggerRef.current) {
+            if (typeof window === "undefined")
+                return;
             const triggerRect = triggerRef.current.getBoundingClientRect();
             // Position to the right of the trigger
             let x = triggerRect.right + 4; // 4px offset
@@ -44,6 +46,8 @@ const ContextMenuSubBody = React__default.forwardRef(({ children, className, ani
     useEffect(() => {
         if (!isOpen)
             return;
+        if (typeof window === "undefined")
+            return;
         const handleScroll = () => {
             onOpenChange(false);
         };
@@ -97,9 +101,8 @@ const ContextMenuSubBody = React__default.forwardRef(({ children, className, ani
                     damping: 30,
                 }, "data-state": isOpen ? "open" : "closed", ...domProps, children: children })) }));
     // Always use portal for submenus
-    return isClient
-        ? createPortal(submenuContent, document.body)
-        : null;
+    const portalTarget = isClient ? document.body : null;
+    return portalTarget ? createPortal(submenuContent, portalTarget) : null;
 });
 ContextMenuSubBody.displayName = "ContextMenu.SubBody";
 

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

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+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 +6,48 @@ 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) => {
+    // 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 [keyboardDragId, setKeyboardDragId] = useState(null);
+    const [keyboardDragLabel, setKeyboardDragLabel] = useState('');
+    const [announcement, setAnnouncement] = useState('');
+    // 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((id, label) => {
+        setKeyboardDragId(id);
+        setKeyboardDragLabel(label);
+    }, []);
+    const endKeyboardDrag = useCallback(() => {
+        setKeyboardDragId(null);
+        setKeyboardDragLabel('');
+    }, []);
+    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 +57,24 @@ 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,
+        keyboardDragLabel,
+        startKeyboardDrag,
+        endKeyboardDrag,
+        dropZoneOrder,
+        announce,
+    }), [
+        activeDrag,
+        setPointer,
+        registerDropZone,
+        unregisterDropZone,
+        keyboardDragId,
+        keyboardDragLabel,
+        startKeyboardDrag,
+        endKeyboardDrag,
+        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 +84,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 +95,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 +123,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 +132,58 @@ 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, _b, _c;
+        if (disabled)
+            return;
+        const isGrabbed = context.keyboardDragId === dragData.id;
+        if ((e.key === ' ' || e.key === 'Enter') && !isGrabbed) {
+            // Initiate keyboard drag
+            e.preventDefault();
+            context.startKeyboardDrag(dragData.id, 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;
+                // Find the currently focused drop zone, advance to next
+                const focusedDropId = (_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.getAttribute('data-dropzone-id');
+                const currentIdx = focusedDropId ? order.indexOf(focusedDropId) : -1;
+                const nextIdx = (currentIdx + 1) % order.length;
+                const nextEl = context.dropZones.get(order[nextIdx]);
+                nextEl === null || nextEl === void 0 ? void 0 : nextEl.focus();
+                return;
+            }
+            if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+                e.preventDefault();
+                const order = context.dropZoneOrder.current;
+                if (order.length === 0)
+                    return;
+                const focusedDropId = (_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.getAttribute('data-dropzone-id');
+                const currentIdx = focusedDropId ? order.indexOf(focusedDropId) : 0;
+                const prevIdx = (currentIdx - 1 + order.length) % order.length;
+                const prevEl = context.dropZones.get(order[prevIdx]);
+                prevEl === null || prevEl === void 0 ? void 0 : prevEl.focus();
+                return;
+            }
+        }
+    }, [disabled, context, dragData.id, 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 +205,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 +230,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 +241,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 +285,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 +308,46 @@ 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);
+        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 grabbedId = context.keyboardDragId;
+        const grabbedLabel = context.keyboardDragLabel;
+        if (!grabbedId)
+            return;
+        // Check type acceptance
+        const draggedDragData = { id: grabbedId };
+        if (acceptedTypes && acceptedTypes.length > 0) ;
+        const order = context.dropZoneOrder.current;
+        const zoneIndex = order.indexOf(stableId);
+        const zoneNumber = zoneIndex === -1 ? '' : ` ${zoneIndex + 1}`;
+        // Fire the drop callback
+        onDrop === null || onDrop === void 0 ? void 0 : onDrop(draggedDragData);
+        // Also fire as a custom event so compound setups with `motion-drop`
+        // listeners on the DOM element are notified
+        if (dropRef.current) {
+            const dropEvent = new CustomEvent('motion-drop', {
+                detail: draggedDragData,
+                bubbles: true,
+            });
+            dropRef.current.dispatchEvent(dropEvent);
+        }
+        context.announce(`${grabbedLabel} dropped in position${zoneNumber}.`);
+        context.endKeyboardDrag();
+    }, [isKeyboardDragActive, context, stableId, acceptedTypes, onDrop]);
     return (jsx(motion.div, { ref: (node) => {
             dropRef.current = node;
             if (typeof ref === 'function') {
@@ -210,8 +361,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.d.ts

@@ -9,7 +9,7 @@ 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: {

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

@@ -17,6 +17,8 @@ function useCloseOnBack(isOpen, onClose, enabled) {
     useEffect(() => {
         if (!enabled || !isOpen)
             return;
+        if (typeof window === "undefined")
+            return;
         closedByPopstate.current = false;
         history.pushState({ flikDrawer: true }, "");
         const handlePopstate = () => {

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

@@ -78,6 +78,8 @@ export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement>
 export interface DrawerTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     children: React.ReactNode;
     className?: string;
+    /** Heading level to render. Defaults to 'h2'. */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 export interface DrawerSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
     children: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import { DrawerTitleProps } from "./Drawer.types";
 export declare const DrawerTitle: {
-    ({ children, className, ...props }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, as: Tag, ...props }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -2,9 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useDrawerContext } from './Drawer.js';
 
-const DrawerTitle = ({ children, className, ...props }) => {
+const DrawerTitle = ({ children, className, as: Tag = 'h2', ...props }) => {
     const { theme, titleId } = useDrawerContext();
-    return (jsx("h2", { id: titleId, className: cn(theme.title, className), ...props, children: children }));
+    return (jsx(Tag, { id: titleId, className: cn(theme.title, className), ...props, children: children }));
 };
 DrawerTitle.displayName = "Drawer.Title";
 

package/dist/components/core/Dropdown/DropdownMenu.js

@@ -7,36 +7,8 @@ import { useDropdownContext } from './DropdownContext.js';
 import { useClickOutside } from '../../../hooks/useClickOutside.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 
-/**
- * Hook to detect dark mode state from document
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        // Observe class changes on html and body
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 /**
  * DropdownMenu component - renders the menu with keyboard navigation
  */
@@ -208,7 +180,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
                 ...cssVariables,
                 top: `${position.top}px`,
                 left: `${position.left}px`,
-            }, id: menuId, role: "menu", "aria-label": ariaLabel || "Menu", "aria-orientation": horizontal ? "horizontal" : "vertical", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
+            }, id: menuId, role: "menu", "aria-label": ariaLabel || undefined, "aria-orientation": horizontal ? "horizontal" : "vertical", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
                 ? { duration: 0 }
                 : {
                     type: "spring",

package/dist/components/core/Masonry/Masonry.js

@@ -13,6 +13,7 @@ const MASONRY_ITEM_TRANSITION_BASE = {
 };
 const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, gapBreakpoints, className, style, minColumns = 1, maxColumns = 10, sequential = false, themeOverrides, loading = false, ...props }, ref) => {
     const containerRef = useRef(null);
+    const arrangeItemsRef = useRef(() => { });
     const [currentColumns, setCurrentColumns] = useState(typeof columns === 'number' ? columns : 3);
     const [currentGap, setCurrentGap] = useState(gap);
     const [containerWidth, setContainerWidth] = useState(0);
@@ -174,6 +175,10 @@ const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, ga
         }, 0);
         return () => clearTimeout(timer);
     }, [calculateLayout, arrangeItems, children, containerWidth]);
+    // Keep ref in sync so the MutationObserver always calls the latest version
+    useEffect(() => {
+        arrangeItemsRef.current = arrangeItems;
+    }, [arrangeItems]);
     // Re-arrange when children change (with debouncing)
     useEffect(() => {
         let timeoutId;
@@ -181,7 +186,7 @@ const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, ga
             // Debounce multiple rapid changes
             clearTimeout(timeoutId);
             timeoutId = setTimeout(() => {
-                arrangeItems();
+                arrangeItemsRef.current();
             }, 10);
         });
         if (containerRef.current) {
@@ -194,7 +199,7 @@ const Masonry = React__default.forwardRef(({ children, columns = 3, gap = 16, ga
             observer.disconnect();
             clearTimeout(timeoutId);
         };
-    }, [arrangeItems]);
+    }, []);
     // Generate container classes
     const containerClasses = cn(theme.container.base, loading && theme.container.loading, className);
     // Wrap each child in a positioning div with theme styles

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

@@ -11,7 +11,7 @@ export declare const Modal: {
         displayName: string;
     };
     Title: {
-        ({ children, className, ...props }: import("./Modal.types").ModalTitleProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, as: Tag, ...props }: import("./Modal.types").ModalTitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Subtitle: {

package/dist/components/core/Modal/Modal.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useId, useState, useEffect, useContext } from 'react';
+import { createContext, useId, useState, useEffect, useMemo, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
 import { modalTheme, modalSizeVariants } from './Modal.theme.js';
@@ -45,7 +45,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         },
     };
     // Context value
-    const contextValue = {
+    const contextValue = useMemo(() => ({
         isOpen,
         onClose,
         size,
@@ -58,7 +58,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         setIsBodyScrollable,
         titleId,
         subtitleId,
-    };
+    }), [isOpen, onClose, size, isSizeToken, closeOnOverlayClick, closeOnEsc, showCloseButton, theme, isBodyScrollable, setIsBodyScrollable, titleId, subtitleId]);
     return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], isSizeToken ? modalSizeVariants[size] : size, className), animations: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,

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

@@ -89,6 +89,8 @@ export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     children: React.ReactNode;
     className?: string;
+    /** Heading level to render. Defaults to 'h2'. */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 export interface ModalSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
     children: React.ReactNode;

package/dist/components/core/Modal/ModalTitle.d.ts

@@ -1,5 +1,5 @@
 import { ModalTitleProps } from "./Modal.types";
 export declare const ModalTitle: {
-    ({ children, className, ...props }: ModalTitleProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, as: Tag, ...props }: ModalTitleProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/core/Modal/ModalTitle.js

@@ -2,9 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';
 
-const ModalTitle = ({ children, className, ...props }) => {
+const ModalTitle = ({ children, className, as: Tag = 'h2', ...props }) => {
     const { theme, titleId } = useModalContext();
-    return (jsx("div", { id: titleId, className: cn(theme.title, className), ...props, children: children }));
+    return (jsx(Tag, { id: titleId, className: cn(theme.title, className), ...props, children: children }));
 };
 ModalTitle.displayName = "Modal.Title";
 

package/dist/components/core/NavItem/NavItem.js

@@ -120,7 +120,6 @@ notification, description, shortcut, href, onClick, active = false, disabled = f
     const dangerClasses = isDanger ? theme.danger : "";
     // Active indicator
     const activeIndicatorClasses = isActive && level === 0 ? theme.activeIndicator : "";
-    // Build container classes
     const containerClasses = cn(theme.baseStyle, getStateClasses(), theme.levels[level], isCollapsedView && ((_a = theme.collapsed) === null || _a === void 0 ? void 0 : _a.container), dangerClasses, activeIndicatorClasses, className);
     // Get icon state classes
     const getIconStateClasses = () => {
@@ -146,7 +145,21 @@ notification, description, shortcut, href, onClick, active = false, disabled = f
                         ? React__default.cloneElement(startContent, {
                             className: cn(iconClasses, startContent.props.className),
                         })
-                        : startContent, isCollapsedView && notificationElement && (jsx("span", { className: "absolute -top-1 -right-1", children: notificationElement }))] })), !isCollapsedView && (jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-sm text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] })), !isCollapsedView && (jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [notificationElement, endContent, chevron] })), isCollapsedView && (jsx("span", { className: "sr-only", children: children }))] }));
+                        : startContent, isCollapsedView && notificationElement && (jsx("span", { className: "absolute -top-1 -right-1", children: notificationElement }))] })), jsx("div", { "aria-hidden": isCollapsedView || undefined, style: {
+                    display: 'grid',
+                    gridTemplateColumns: isCollapsedView ? '0fr' : '1fr',
+                    overflow: 'hidden',
+                    flex: '1 1 auto',
+                    opacity: isCollapsedView ? 0 : 1,
+                    transition: 'grid-template-columns 0.18s cubic-bezier(0.4,0,0.2,1), opacity 0.12s ease-out',
+                }, children: jsxs("div", { style: { overflow: 'hidden', minWidth: 0 }, children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-sm text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] }) }), jsx("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: isCollapsedView ? '0fr' : '1fr',
+                    overflow: 'hidden',
+                    flexShrink: 0,
+                    opacity: isCollapsedView ? 0 : 1,
+                    transition: 'grid-template-columns 0.18s cubic-bezier(0.4,0,0.2,1), opacity 0.12s ease-out',
+                }, children: jsxs("div", { className: "flex items-center gap-1.5", style: { overflow: 'hidden', minWidth: 0 }, children: [notificationElement, endContent, chevron] }) }), isCollapsedView && (jsx("span", { className: "sr-only", children: children }))] }));
     // Self-contained submenu
     const submenu = hasSubmenu && items && items.length > 0 && !isCollapsedView ? (jsx(AnimatePresence, { initial: false, children: isExpanded && (jsx(motion.div, { initial: "collapsed", animate: "open", exit: "collapsed", variants: {
                 open: { opacity: 1, height: "auto" },
@@ -159,12 +172,14 @@ notification, description, shortcut, href, onClick, active = false, disabled = f
         }
         return node;
     };
-    // Show tooltip in collapsed sidebar mode
+    // Always render Tooltip when in a sidebar (keeps tree structure stable across
+    // collapse/expand so CSS transitions aren't interrupted by DOM remounts).
+    // The tooltip is disabled when not in collapsed view.
     const renderWithTooltip = (node) => {
-        if (isCollapsedView && showTooltipWhenCollapsed) {
-            return (jsx(Tooltip, { content: children, placement: "right", children: node }));
+        if (!isInSidebar || !showTooltipWhenCollapsed) {
+            return node;
         }
-        return node;
+        return (jsx(Tooltip, { content: children, placement: "right", disabled: !isCollapsedView, triggerClassName: "block w-full", children: node }));
     };
     return (jsxs(Fragment, { children: [renderWithTooltip(renderWrapped(content)), submenu] }));
 });

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

@@ -1,5 +1,5 @@
 const navItemTheme = {
-    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm font-medium cursor-pointer select-none transition-all duration-150 w-full rounded-[var(--nav-item-radius)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] group",
+    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm font-medium cursor-pointer select-none transition-colors duration-150 w-full rounded-[var(--nav-item-radius)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] group overflow-hidden",
     icon: "size-4 text-[var(--color-text-secondary)]",
     text: "flex-1 min-w-0 truncate",
     states: {
@@ -19,7 +19,7 @@ const navItemTheme = {
         2: "pl-10",
     },
     collapsed: {
-        container: "!gap-0 justify-center p-2 aspect-square",
+        container: "!gap-0 justify-center !p-2",
         icon: "size-5",
     },
     activeIndicator: "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:h-5 before:w-[3px] before:rounded-full before:bg-[var(--color-primary)]",

package/dist/components/core/Pagination/Pagination.js

@@ -79,7 +79,7 @@ const Pagination = React__default.forwardRef(({ currentPage, totalPages, onPageC
     const isLastPage = currentPage === totalPages;
     return (jsxs("nav", { ref: ref, role: "navigation", "aria-label": "Pagination Navigation", className: cn(theme.baseStyle, className), ...props, children: [showFirstLast && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(1), "aria-label": "Go to first page", children: [jsx(ChevronDoubleLeftIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "First" })] })), showPrevNext && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "aria-label": `Go to previous page (${currentPage - 1})`, children: [jsx(ChevronLeftIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Previous" })] })), paginationRange.map((pageNumber, index) => {
                 if (pageNumber === "...") {
-                    return (jsxs(PaginationItem, { size: size, variant: "ellipsis", isDisabled: true, "aria-label": "More pages", role: "separator", children: [jsx("span", { "aria-hidden": "true", children: "\u2026" }), jsx("span", { className: "sr-only", children: "More pages" })] }, `ellipsis-${index}`));
+                    return (jsx("span", { role: "separator", "aria-hidden": "true", children: "\u2026" }, `ellipsis-${index}`));
                 }
                 const page = pageNumber;
                 const isActive = page === currentPage;