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

package/dist/components/core/Tabs/TabsList.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useMemo, useEffect } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
@@ -18,26 +18,24 @@ const TabsList = React__default.forwardRef(({ children, className, ...props }, r
     // Ref to access the list element for calculations
     const listRef = useRef(null);
     // Calculate underline position based on active tab
-    const updateUnderlinePosition = useMemo(() => {
-        return () => {
-            if (!activeValue || !listRef.current) {
-                setShowUnderline(false);
-                return;
-            }
-            // Find the active trigger element
-            const activeTrigger = listRef.current.querySelector(`[data-value="${activeValue}"]`);
-            if (!activeTrigger) {
-                setShowUnderline(false);
-                return;
-            }
-            // Get the position relative to the list container
-            const listRect = listRef.current.getBoundingClientRect();
-            const triggerRect = activeTrigger.getBoundingClientRect();
-            const left = triggerRect.left - listRect.left;
-            const width = triggerRect.width;
-            setUnderlinePosition({ left, width });
-            setShowUnderline(true);
-        };
+    const updateUnderlinePosition = useCallback(() => {
+        if (!activeValue || !listRef.current) {
+            setShowUnderline(false);
+            return;
+        }
+        // Find the active trigger element
+        const activeTrigger = listRef.current.querySelector(`[data-value="${activeValue}"]`);
+        if (!activeTrigger) {
+            setShowUnderline(false);
+            return;
+        }
+        // Get the position relative to the list container
+        const listRect = listRef.current.getBoundingClientRect();
+        const triggerRect = activeTrigger.getBoundingClientRect();
+        const left = triggerRect.left - listRect.left;
+        const width = triggerRect.width;
+        setUnderlinePosition({ left, width });
+        setShowUnderline(true);
     }, [activeValue]);
     // Update underline position when active value changes or on mount
     useEffect(() => {

package/dist/components/core/Tabs/TabsTrigger.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useMemo, useCallback, useEffect } from 'react';
+import React__default, { useRef, useEffect, useMemo, useCallback } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
@@ -10,11 +10,14 @@ import { getTabsTriggerVariants } from './Tabs.animations.js';
  * TabsTrigger component displays individual tab headers with optional animations
  */
 const TabsTrigger = React__default.forwardRef(({ value, disabled = false, children, className, onClick, onKeyDown, ...props }, ref) => {
-    const { value: selectedValue, onValueChange, orientation, size, disabled: contextDisabled, registerTrigger, unregisterTrigger } = useTabsContext();
+    const { value: selectedValue, onValueChange, orientation, size, disabled: contextDisabled, registerTrigger, unregisterTrigger, instanceId } = useTabsContext();
     const shouldReduceMotion = useReducedMotion();
-    // Check if we're in Storybook and should disable animations
-    const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
-    const shouldDisableAnimations = !!shouldReduceMotion || !!isInStorybook;
+    // Check if we're in Storybook — evaluated after mount to avoid SSR hydration mismatch
+    const isInStorybookRef = useRef(false);
+    useEffect(() => {
+        isInStorybookRef.current = typeof window !== 'undefined' && !!window.__STORYBOOK_DISABLE_ANIMATIONS__;
+    }, []);
+    const shouldDisableAnimations = !!shouldReduceMotion || !!isInStorybookRef.current;
     // Memoize derived state flags for performance
     const derivedState = useMemo(() => ({
         isSelected: value === selectedValue,
@@ -51,7 +54,6 @@ const TabsTrigger = React__default.forwardRef(({ value, disabled = false, childr
     }, [isDisabled, onValueChange, value, onClick]);
     // Enhanced keyboard navigation handler with error handling
     const handleKeyDown = useCallback((event) => {
-        var _a, _b;
         // Handle keyboard navigation for tabs
         if (!isDisabled) {
             try {
@@ -78,20 +80,32 @@ const TabsTrigger = React__default.forwardRef(({ value, disabled = false, childr
                         break;
                     case "Home":
                         event.preventDefault();
-                        // Move to first tab
-                        const firstTrigger = (_a = event.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
-                        if (firstTrigger && firstTrigger.tagName === 'BUTTON' && !firstTrigger.disabled) {
-                            firstTrigger.focus();
-                            firstTrigger.click();
+                        // Move to first tab — use role="tab" to skip the sliding underline element
+                        {
+                            const tabList = event.currentTarget.parentElement;
+                            const allTabs = tabList
+                                ? Array.from(tabList.querySelectorAll('[role="tab"]:not([disabled])'))
+                                : [];
+                            const firstTrigger = allTabs[0];
+                            if (firstTrigger) {
+                                firstTrigger.focus();
+                                firstTrigger.click();
+                            }
                         }
                         break;
                     case "End":
                         event.preventDefault();
-                        // Move to last tab
-                        const lastTrigger = (_b = event.currentTarget.parentElement) === null || _b === void 0 ? void 0 : _b.lastElementChild;
-                        if (lastTrigger && lastTrigger.tagName === 'BUTTON' && !lastTrigger.disabled) {
-                            lastTrigger.focus();
-                            lastTrigger.click();
+                        // Move to last tab — use role="tab" to skip the sliding underline element
+                        {
+                            const tabList = event.currentTarget.parentElement;
+                            const allTabs = tabList
+                                ? Array.from(tabList.querySelectorAll('[role="tab"]:not([disabled])'))
+                                : [];
+                            const lastTrigger = allTabs[allTabs.length - 1];
+                            if (lastTrigger) {
+                                lastTrigger.focus();
+                                lastTrigger.click();
+                            }
                         }
                         break;
                 }
@@ -114,18 +128,23 @@ const TabsTrigger = React__default.forwardRef(({ value, disabled = false, childr
     }, [size]);
     // Generate default aria-label for icon-only triggers if not provided (fallback only)
     const ariaLabel = props["aria-label"] || undefined;
-    // Register/unregister this trigger for underline positioning
-    useEffect(() => {
-        // Register with a slight delay to ensure DOM is ready
-        const timeoutId = setTimeout(() => {
-            if (ref && typeof ref === 'object' && ref.current) {
-                registerTrigger(value, ref.current);
-            }
-        }, 0);
-        return () => {
-            clearTimeout(timeoutId);
+    // Callback ref that registers/unregisters the trigger for underline positioning.
+    // Using a callback ref ensures registration fires whenever the DOM node mounts,
+    // not just when the ref object identity changes.
+    const triggerRef = useCallback((node) => {
+        if (node) {
+            registerTrigger(value, node);
+        }
+        else {
             unregisterTrigger(value);
-        };
+        }
+        // Forward to the outer ref passed by the consumer, if any
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
     }, [value, registerTrigger, unregisterTrigger, ref]);
     // Determine animation props (user props will override due to spread order)
     const animationProps = shouldDisableAnimations ? {} : {
@@ -133,7 +152,7 @@ const TabsTrigger = React__default.forwardRef(({ value, disabled = false, childr
         whileTap: !isDisabled ? "tap" : undefined,
         variants: triggerVariants,
     };
-    return (jsx(motion.button, { ref: ref, type: "button", role: "tab", "aria-selected": isSelected, "aria-controls": `${value}-content`, id: `${value}-tab`, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, className: cn(themeClasses.triggerStyle, themeClasses.sizeStyle, className // User overrides take precedence
+    return (jsx(motion.button, { ref: triggerRef, type: "button", role: "tab", "aria-selected": isSelected, "aria-controls": `${instanceId}-${value}-content`, id: `${instanceId}-${value}-tab`, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, className: cn(themeClasses.triggerStyle, themeClasses.sizeStyle, className // User overrides take precedence
         ), onClick: handleClick, onKeyDown: handleKeyDown, "data-value": value, "data-state": isSelected ? "active" : "inactive", "data-disabled": isDisabled, "data-orientation": orientation, "aria-disabled": isDisabled || undefined, "aria-label": ariaLabel, ...animationProps, ...props, children: children }));
 });
 TabsTrigger.displayName = "TabsTrigger";

package/dist/components/core/Toast/Toast.js

@@ -84,7 +84,7 @@ const Toast = React__default.forwardRef(({ toast, className, onDismiss, index =
     }, [stackingStyle.zIndex, index]);
     const toastNode = (jsxs(motion.div, { ref: setRefs, layout: true, initial: shouldReduceMotion ? false : toastAnimations.initial, animate: animateValue, exit: shouldReduceMotion
             ? { ...toastAnimations.exit, transition: { duration: 0 } }
-            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && "items-center", ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", "pointer-events-auto", index > 0 && !isExpanded && "absolute top-0 left-0", className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: cn(toastTheme.iconStyle, !isTextOnly && "mt-0.5"), children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title &&
+            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && "items-center", ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", "pointer-events-auto", index > 0 && !isExpanded && "absolute top-0 left-0", className), style: styleValue, role: "status", "aria-live": "polite", children: [jsx("div", { className: cn(toastTheme.iconStyle, !isTextOnly && "mt-0.5"), children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title &&
                         (typeof title === "string" ? (jsx("div", { className: cn(toastTheme.titleStyle, !isTextOnly && "font-semibold"), children: title })) : (title)), subtitle &&
                         (typeof subtitle === "string" ? (jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })) : (subtitle)), action && (jsx("div", { className: "mt-4", children: isToastAction(action) ? (jsx(Button, { variant: "link", color: "primary", onClick: handleActionClick, children: action.label })) : (action) })), children] }), dismissible && (jsx("button", { type: "button", className: cn(toastTheme.closeButtonStyle, !isTextOnly && "mt-0.5"), onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
     if (darkMode) {

package/dist/components/core/Toast/ToastProvider.js

@@ -24,7 +24,7 @@ const ToastProvider = ({ children, position = 'top-right', maxToasts = 5, defaul
     const hoverTimeoutRef = React__default.useRef(null);
     const addToast = useCallback((toastData) => {
         var _a;
-        const id = Math.random().toString(36).substring(2, 9);
+        const id = crypto.randomUUID();
         const newToast = {
             ...toastData,
             id,
@@ -91,7 +91,8 @@ const ToastProvider = ({ children, position = 'top-right', maxToasts = 5, defaul
         removeToast,
         removeAllToasts,
     }), [toasts, addToast, removeToast, removeAllToasts]);
-    return (jsxs(ToastContext.Provider, { value: contextValue, children: [children, isClient && createPortal(jsx("div", { className: cn(toastTheme.containerStyle, positionStyles[position]), "aria-live": "polite", "aria-label": "Notifications", children: jsx("div", { className: "relative w-80", style: { paddingBottom: isHovered && toasts.length > 1 ? totalExpandedHeight : undefined }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx(AnimatePresence, { mode: "popLayout", children: toasts.map((toast, index) => (jsx(Toast, { toast: toast, onDismiss: removeToast, index: index, isExpanded: isHovered, totalToasts: toasts.length, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onHeightChange: handleToastHeight, expandedOffset: getExpandedOffset(index), darkMode: darkMode }, toast.id))) }) }) }), document.body)] }));
+    const portalTarget = isClient ? document.body : null;
+    return (jsxs(ToastContext.Provider, { value: contextValue, children: [children, portalTarget ? createPortal(jsx("div", { className: cn(toastTheme.containerStyle, positionStyles[position]), "aria-live": "polite", "aria-label": "Notifications", children: jsx("div", { className: "relative w-80", style: { paddingBottom: isHovered && toasts.length > 1 ? totalExpandedHeight : undefined }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx(AnimatePresence, { mode: "popLayout", children: toasts.map((toast, index) => (jsx(Toast, { toast: toast, onDismiss: removeToast, index: index, isExpanded: isHovered, totalToasts: toasts.length, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onHeightChange: handleToastHeight, expandedOffset: getExpandedOffset(index), darkMode: darkMode }, toast.id))) }) }) }), portalTarget) : null] }));
 };
 const useToastContext = () => {
     const context = useContext(ToastContext);

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

@@ -1,6 +1,6 @@
 import { TooltipProps } from "./Tooltip.types";
 declare const Tooltip: {
-    ({ content, children, placement, delay, disabled, className, maxWidth, minWidth, showOnFocus, wrapText, id, theme: themeOverrides, "aria-label": ariaLabel, role, offset, darkMode, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    ({ content, children, placement, delay, disabled, className, triggerClassName, maxWidth, minWidth, showOnFocus, wrapText, id, theme: themeOverrides, "aria-label": ariaLabel, role, offset, darkMode, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Tooltip };

package/dist/components/core/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
@@ -7,37 +7,9 @@ import { tooltipTheme } from './Tooltip.theme.js';
 import { getTooltipVariants } from './Tooltip.animations.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;
-};
-const Tooltip = ({ content, children, placement = "top", delay = 300, disabled = false, className, maxWidth = "360px", minWidth = "fit-content", showOnFocus = true, wrapText = false, id, theme: themeOverrides, "aria-label": ariaLabel, role = "tooltip", offset = 8, darkMode = false, }) => {
+const Tooltip = ({ content, children, placement = "top", delay = 300, disabled = false, className, triggerClassName, maxWidth = "360px", minWidth = "fit-content", showOnFocus = true, wrapText = false, id, theme: themeOverrides, "aria-label": ariaLabel, role = "tooltip", offset = 8, darkMode = false, }) => {
     const [isVisible, setIsVisible] = useState(false);
     const tooltipRef = useRef(null);
     const triggerRef = useRef(null);
@@ -91,11 +63,14 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
             handleHideTooltip();
         }
     }, [handleHideTooltip]);
-    // Event handlers for trigger element
+    // Determine whether the child can receive focus events via cloneElement.
+    // If so, focus/blur are forwarded to the child; otherwise fall back to the wrapper.
+    const childCanReceiveFocus = showOnFocus && React__default.isValidElement(children);
+    // Event handlers for the wrapper div (focus/blur only go here as fallback)
     const triggerHandlers = {
         onMouseEnter: handleShowTooltip,
         onMouseLeave: handleHideTooltip,
-        ...(showOnFocus && {
+        ...(showOnFocus && !childCanReceiveFocus && {
             onFocus: handleShowTooltip,
             onBlur: handleHideTooltip,
         }),
@@ -122,8 +97,24 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
                 ...cssVariables,
                 top: `${position.top}px`,
                 left: `${position.left}px`,
-            }, className: cn(theme.baseStyle, widthClasses, className), "aria-hidden": !isVisible, "aria-label": ariaLabel, "aria-live": role === "tooltip" ? "polite" : undefined, variants: shouldReduceMotion ? {} : getTooltipVariants(placement), initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate", exit: shouldReduceMotion ? undefined : "exit", children: content })) }));
-    return (jsxs("div", { className: "relative inline-block", ref: triggerRef, ...triggerHandlers, tabIndex: showOnFocus ? 0 : undefined, "aria-describedby": isVisible && id ? id : undefined, children: [children, isClient &&
+            }, className: cn(theme.baseStyle, widthClasses, className), "aria-hidden": !isVisible, "aria-label": ariaLabel, variants: shouldReduceMotion ? {} : getTooltipVariants(placement), initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate", exit: shouldReduceMotion ? undefined : "exit", children: content })) }));
+    // When the child is a valid element, forward focus/blur events directly onto it
+    // instead of adding tabIndex to the wrapper (which would create a double Tab stop).
+    const childWithFocusHandlers = childCanReceiveFocus
+        ? React__default.cloneElement(children, {
+            onFocus: (e) => {
+                var _a, _b;
+                handleShowTooltip();
+                (_b = (_a = children.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            },
+            onBlur: (e) => {
+                var _a, _b;
+                handleHideTooltip();
+                (_b = (_a = children.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            },
+        })
+        : children;
+    return (jsxs("div", { className: cn("relative inline-block", triggerClassName), ref: triggerRef, ...triggerHandlers, "aria-describedby": isVisible && id ? id : undefined, children: [childWithFocusHandlers, isClient &&
                 createPortal(jsx("div", { className: darkMode || isDarkMode ? "dark" : undefined, children: tooltipContent }), document.body)] }));
 };
 // Set display name for dev tools and Storybook

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

@@ -38,9 +38,13 @@ export interface TooltipProps {
      */
     disabled?: boolean;
     /**
-     * Additional classes for the tooltip container
+     * Additional classes for the tooltip container (the tooltip bubble)
      */
     className?: string;
+    /**
+     * Additional classes for the trigger wrapper element
+     */
+    triggerClassName?: string;
     /**
      * Max width for the tooltip content
      * @default "360px"

package/dist/components/core/Tree/Tree.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useCallback, useState, useMemo } from 'react';
+import React__default, { useCallback, useState, useRef, useMemo } from 'react';
 import { motion, AnimatePresence, useReducedMotion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { treeTheme } from './Tree.theme.js';
@@ -7,6 +7,32 @@ import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { ChevronRightIcon, DocumentIcon } from '@heroicons/react/24/outline';
 import { getReducedMotionVariants, treeNodeVariants, expandIconVariants, childNodeVariants, childrenStagger } from './Tree.animations.js';
 
+// Build a flat ordered list of visible (non-collapsed) node ids via depth-first traversal.
+// Disabled nodes are included in the list so that ArrowDown/Up skip over them in the
+// keyboard handler rather than here — keeping the traversal pure.
+const buildVisibleNodeList = (nodes, expandedSet) => {
+    const result = [];
+    const traverse = (currentNodes) => {
+        for (const node of currentNodes) {
+            result.push(node.id);
+            if (node.children && node.children.length > 0 && expandedSet.has(node.id)) {
+                traverse(node.children);
+            }
+        }
+    };
+    traverse(nodes);
+    return result;
+};
+// Build a map from node id → parent node id for ArrowLeft "move to parent" navigation.
+const buildParentMap = (nodes, parentId = null, acc = new Map()) => {
+    for (const node of nodes) {
+        acc.set(node.id, parentId);
+        if (node.children && node.children.length > 0) {
+            buildParentMap(node.children, node.id, acc);
+        }
+    }
+    return acc;
+};
 // Simplified selection utilities (merged from Tree.utils.ts)
 const getDescendantIds = (node) => {
     const descendants = [];
@@ -72,7 +98,7 @@ const calculateSelection = (nodeId, selectedKeys, data) => {
         indeterminateKeys
     };
 };
-const InternalTreeNode = React__default.memo(({ node, level, expanded, selected, isIndeterminate, selectable, checkable, hierarchicalSelection, expandable, expandedKeysSet, selectedKeysSet, indeterminateKeysSet, onNodeClick, onToggleExpand, theme, className, shouldReduceMotion, }) => {
+const InternalTreeNode = React__default.memo(({ node, level, expanded, selected, isIndeterminate, selectable, checkable, hierarchicalSelection, expandable, expandedKeysSet, selectedKeysSet, indeterminateKeysSet, onNodeClick, onToggleExpand, onKeyboardNavigate, nodeRefs, focusedNodeId, onFocusNode, theme, className, shouldReduceMotion, }) => {
     var _a;
     const hasChildren = node.children && node.children.length > 0;
     const isExpandable = expandable && hasChildren;
@@ -80,20 +106,40 @@ const InternalTreeNode = React__default.memo(({ node, level, expanded, selected,
     const nodeVariants = shouldReduceMotion ? getReducedMotionVariants(treeNodeVariants) : treeNodeVariants;
     const iconVariants = shouldReduceMotion ? getReducedMotionVariants(expandIconVariants) : expandIconVariants;
     const childVariants = shouldReduceMotion ? getReducedMotionVariants(childNodeVariants) : childNodeVariants;
+    // Register/unregister this node's DOM element in the shared refs map.
+    const itemRef = useCallback((el) => {
+        if (el) {
+            nodeRefs.current.set(node.id, el);
+        }
+        else {
+            nodeRefs.current.delete(node.id);
+        }
+    }, [node.id, nodeRefs]);
+    // Roving tabIndex: only the focused node is reachable via Tab.
+    // If no node is focused yet, the first root node (level 0) gets tabIndex 0 as
+    // a sensible initial entry point — this is handled at the Tree root.
+    const isFocused = focusedNodeId === node.id;
+    const tabIndexValue = node.disabled ? -1 : (isFocused ? 0 : -1);
     const handleNodeClick = useCallback((e) => {
         e.stopPropagation();
         if (node.disabled)
             return;
+        onFocusNode(node.id);
         if (selectable) {
             onNodeClick(node);
         }
-    }, [node, selectable, onNodeClick]);
+    }, [node, selectable, onNodeClick, onFocusNode]);
     const handleExpandClick = useCallback((e) => {
         e.stopPropagation();
         if (isExpandable && !node.disabled) {
             onToggleExpand(node);
         }
     }, [isExpandable, node, onToggleExpand]);
+    const handleFocus = useCallback(() => {
+        if (!node.disabled) {
+            onFocusNode(node.id);
+        }
+    }, [node.id, node.disabled, onFocusNode]);
     const handleKeyDown = (e) => {
         if (node.disabled)
             return;
@@ -106,16 +152,43 @@ const InternalTreeNode = React__default.memo(({ node, level, expanded, selected,
                 }
                 break;
             case 'ArrowRight':
+                e.preventDefault();
                 if (isExpandable && !expanded) {
-                    e.preventDefault();
+                    // Collapsed node with children: expand it
                     onToggleExpand(node);
                 }
+                else if (isExpandable && expanded) {
+                    // Expanded node with children: move focus to first child
+                    onKeyboardNavigate(node.id, 'ArrowRight');
+                }
+                // Leaf node: do nothing (APG spec)
                 break;
             case 'ArrowLeft':
+                e.preventDefault();
                 if (isExpandable && expanded) {
-                    e.preventDefault();
+                    // Expanded node: collapse it
                     onToggleExpand(node);
                 }
+                else {
+                    // Collapsed node or leaf: move to parent
+                    onKeyboardNavigate(node.id, 'ArrowLeft');
+                }
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                onKeyboardNavigate(node.id, 'ArrowDown');
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                onKeyboardNavigate(node.id, 'ArrowUp');
+                break;
+            case 'Home':
+                e.preventDefault();
+                onKeyboardNavigate(node.id, 'Home');
+                break;
+            case 'End':
+                e.preventDefault();
+                onKeyboardNavigate(node.id, 'End');
                 break;
         }
     };
@@ -126,10 +199,10 @@ const InternalTreeNode = React__default.memo(({ node, level, expanded, selected,
     const labelStyle = cn(theme.labelStyle, {
         'text-[var(--color-text-muted)]': node.disabled,
     });
-    return (jsxs("div", { children: [jsxs("div", { className: nodeStyle, style: { paddingLeft: `calc(${level} * ${theme.indentSize} + 0.25rem)` }, onClick: handleNodeClick, onKeyDown: handleKeyDown, tabIndex: node.disabled ? -1 : 0, role: "treeitem", "aria-expanded": isExpandable ? expanded : false, "aria-selected": selectable ? selected : undefined, "aria-disabled": node.disabled, children: [isExpandable ? (jsx(motion.span, { className: cn(theme.expandIconStyle), variants: iconVariants, initial: "collapsed", animate: expanded ? "expanded" : "collapsed", onClick: handleExpandClick, role: "button", "aria-label": expanded ? 'Collapse' : 'Expand', tabIndex: -1, children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })) : (jsx("span", { className: "w-4 mr-1" })), checkable && (jsx(Checkbox, { size: 'sm', id: `tree-checkbox-${node.id}`, name: `tree-checkbox-${node.id}`, value: node.id, checked: selected, indeterminate: hierarchicalSelection && isIndeterminate, onChange: () => onNodeClick(node), state: node.disabled ? "disabled" : "default", className: "flex-shrink-0", onClick: (e) => e.stopPropagation() })), (node.icon || !isExpandable) && (jsx("span", { className: cn(theme.iconStyle), children: node.icon || jsx(DocumentIcon, { className: "w-4 h-4" }) })), jsx("span", { className: labelStyle, title: node.label, children: node.label })] }), hasChildren && (jsx(AnimatePresence, { initial: false, children: expanded && (jsx(motion.div, { variants: nodeVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", style: {
+    return (jsxs("div", { children: [jsxs("div", { ref: itemRef, className: nodeStyle, style: { paddingLeft: `calc(${level} * ${theme.indentSize} + 0.25rem)` }, onClick: handleNodeClick, onKeyDown: handleKeyDown, onFocus: handleFocus, tabIndex: tabIndexValue, role: "treeitem", "aria-expanded": isExpandable ? expanded : undefined, "aria-selected": selectable ? selected : undefined, "aria-disabled": node.disabled, children: [isExpandable ? (jsx(motion.span, { className: cn(theme.expandIconStyle), variants: iconVariants, initial: "collapsed", animate: expanded ? "expanded" : "collapsed", onClick: handleExpandClick, "aria-label": expanded ? 'Collapse' : 'Expand', tabIndex: -1, children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })) : (jsx("span", { className: "w-4 mr-1" })), checkable && (jsx(Checkbox, { size: 'sm', id: `tree-checkbox-${node.id}`, name: `tree-checkbox-${node.id}`, value: node.id, checked: selected, indeterminate: hierarchicalSelection && isIndeterminate, onChange: () => onNodeClick(node), state: node.disabled ? "disabled" : "default", className: "flex-shrink-0", onClick: (e) => e.stopPropagation() })), (node.icon || !isExpandable) && (jsx("span", { className: cn(theme.iconStyle), children: node.icon || jsx(DocumentIcon, { className: "w-4 h-4" }) })), jsx("span", { className: labelStyle, title: node.label, children: node.label })] }), hasChildren && (jsx(AnimatePresence, { initial: false, children: expanded && (jsx(motion.div, { variants: nodeVariants, initial: "collapsed", animate: "expanded", exit: "collapsed", style: {
                         overflow: 'hidden',
                         transformOrigin: 'top'
-                    }, transition: shouldReduceMotion ? { duration: 0.01 } : childrenStagger, children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((childNode, index) => (jsx(motion.div, { variants: childVariants, initial: "hidden", animate: "visible", exit: "hidden", custom: index, children: jsx(InternalTreeNode, { node: childNode, level: level + 1, expanded: expandedKeysSet.has(childNode.id), selected: selectedKeysSet.has(childNode.id), isIndeterminate: indeterminateKeysSet.has(childNode.id), selectable: selectable, checkable: checkable, hierarchicalSelection: hierarchicalSelection, expandable: expandable, expandedKeysSet: expandedKeysSet, selectedKeysSet: selectedKeysSet, indeterminateKeysSet: indeterminateKeysSet, onNodeClick: onNodeClick, onToggleExpand: onToggleExpand, theme: theme, shouldReduceMotion: shouldReduceMotion }) }, childNode.id))) }, `${node.id}-children`)) }))] }));
+                    }, transition: shouldReduceMotion ? { duration: 0.01 } : childrenStagger, children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((childNode, index) => (jsx(motion.div, { variants: childVariants, initial: "hidden", animate: "visible", exit: "hidden", custom: index, children: jsx(InternalTreeNode, { node: childNode, level: level + 1, expanded: expandedKeysSet.has(childNode.id), selected: selectedKeysSet.has(childNode.id), isIndeterminate: indeterminateKeysSet.has(childNode.id), selectable: selectable, checkable: checkable, hierarchicalSelection: hierarchicalSelection, expandable: expandable, expandedKeysSet: expandedKeysSet, selectedKeysSet: selectedKeysSet, indeterminateKeysSet: indeterminateKeysSet, onNodeClick: onNodeClick, onToggleExpand: onToggleExpand, onKeyboardNavigate: onKeyboardNavigate, nodeRefs: nodeRefs, focusedNodeId: focusedNodeId, onFocusNode: onFocusNode, theme: theme, shouldReduceMotion: shouldReduceMotion }) }, childNode.id))) }, `${node.id}-children`)) }))] }));
 });
 const TreeRoot = React__default.forwardRef(({ data, selectable = false, checkable = false, hierarchicalSelection, expandable = true, defaultExpandedKeys = [], defaultSelectedKeys = [], onSelectionChange, onExpand, className, theme: customTheme = {}, ...htmlProps }, ref) => {
     var _a;
@@ -144,9 +217,106 @@ const TreeRoot = React__default.forwardRef(({ data, selectable = false, checkabl
     const [expandedKeys, setExpandedKeys] = useState(defaultExpandedKeys);
     const [selectedKeys, setSelectedKeys] = useState(defaultSelectedKeys);
     const [indeterminateKeys, setIndeterminateKeys] = useState([]);
+    // Roving tabIndex: track which node currently owns tabIndex=0.
+    // Initialise to the first root node (if any) so the tree is keyboard-enterable.
+    const [focusedNodeId, setFocusedNodeId] = useState(data.length > 0 ? data[0].id : null);
+    // Map from node id → DOM element, populated by each InternalTreeNode on mount.
+    const nodeRefs = useRef(new Map());
     const expandedKeysSet = useMemo(() => new Set(expandedKeys), [expandedKeys]);
     const selectedKeysSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
     const indeterminateKeysSet = useMemo(() => new Set(indeterminateKeys), [indeterminateKeys]);
+    // Parent map for ArrowLeft navigation (move to parent node).
+    const parentMap = useMemo(() => buildParentMap(data), [data]);
+    // Called by InternalTreeNode when it receives focus (mouse or keyboard).
+    const handleFocusNode = useCallback((nodeId) => {
+        setFocusedNodeId(nodeId);
+    }, []);
+    // Central keyboard navigation handler: moves focus within the tree.
+    const handleKeyboardNavigate = useCallback((nodeId, key) => {
+        const visibleIds = buildVisibleNodeList(data, expandedKeysSet);
+        const focusById = (targetId) => {
+            const el = nodeRefs.current.get(targetId);
+            if (el) {
+                setFocusedNodeId(targetId);
+                el.focus();
+            }
+        };
+        const currentIndex = visibleIds.indexOf(nodeId);
+        switch (key) {
+            case 'ArrowDown': {
+                // Move to next visible node, skipping disabled ones.
+                for (let i = currentIndex + 1; i < visibleIds.length; i++) {
+                    const candidateId = visibleIds[i];
+                    const candidateEl = nodeRefs.current.get(candidateId);
+                    if (candidateEl && candidateEl.getAttribute('aria-disabled') !== 'true') {
+                        focusById(candidateId);
+                        break;
+                    }
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                // Move to previous visible node, skipping disabled ones.
+                for (let i = currentIndex - 1; i >= 0; i--) {
+                    const candidateId = visibleIds[i];
+                    const candidateEl = nodeRefs.current.get(candidateId);
+                    if (candidateEl && candidateEl.getAttribute('aria-disabled') !== 'true') {
+                        focusById(candidateId);
+                        break;
+                    }
+                }
+                break;
+            }
+            case 'Home': {
+                // Move to the first non-disabled visible node.
+                for (let i = 0; i < visibleIds.length; i++) {
+                    const candidateId = visibleIds[i];
+                    const candidateEl = nodeRefs.current.get(candidateId);
+                    if (candidateEl && candidateEl.getAttribute('aria-disabled') !== 'true') {
+                        focusById(candidateId);
+                        break;
+                    }
+                }
+                break;
+            }
+            case 'End': {
+                // Move to the last non-disabled visible node.
+                for (let i = visibleIds.length - 1; i >= 0; i--) {
+                    const candidateId = visibleIds[i];
+                    const candidateEl = nodeRefs.current.get(candidateId);
+                    if (candidateEl && candidateEl.getAttribute('aria-disabled') !== 'true') {
+                        focusById(candidateId);
+                        break;
+                    }
+                }
+                break;
+            }
+            case 'ArrowRight': {
+                // Move focus to the first child of an already-expanded node.
+                // (Expand-when-collapsed is handled directly in InternalTreeNode.)
+                const firstChildIndex = currentIndex + 1;
+                if (firstChildIndex < visibleIds.length) {
+                    const firstChildId = visibleIds[firstChildIndex];
+                    const firstChildEl = nodeRefs.current.get(firstChildId);
+                    if (firstChildEl && firstChildEl.getAttribute('aria-disabled') !== 'true') {
+                        focusById(firstChildId);
+                    }
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                // Move focus to the parent node (when current node is collapsed or a leaf).
+                const parentId = parentMap.get(nodeId);
+                if (parentId) {
+                    const parentEl = nodeRefs.current.get(parentId);
+                    if (parentEl && parentEl.getAttribute('aria-disabled') !== 'true') {
+                        focusById(parentId);
+                    }
+                }
+                break;
+            }
+        }
+    }, [data, expandedKeysSet, parentMap]);
     // Handle node selection
     const handleNodeSelect = useCallback((node) => {
         if (!selectable || node.disabled)
@@ -194,7 +364,7 @@ const TreeRoot = React__default.forwardRef(({ data, selectable = false, checkabl
         setExpandedKeys(newExpandedKeys);
         onExpand === null || onExpand === void 0 ? void 0 : onExpand(newExpandedKeys, node, !isExpanded);
     }, [expandedKeys, expandable, onExpand]);
-    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, 'tree-container', className), role: "tree", "aria-multiselectable": checkable, ...htmlProps, children: data.map((node) => (jsx(InternalTreeNode, { node: node, level: 0, expanded: expandedKeysSet.has(node.id), selected: selectedKeysSet.has(node.id), isIndeterminate: indeterminateKeysSet.has(node.id), selectable: selectable, checkable: checkable, hierarchicalSelection: enableHierarchicalSelection, expandable: expandable, expandedKeysSet: expandedKeysSet, selectedKeysSet: selectedKeysSet, indeterminateKeysSet: indeterminateKeysSet, onNodeClick: handleNodeSelect, onToggleExpand: handleNodeToggleExpand, theme: theme, shouldReduceMotion: shouldReduceMotion }, node.id))) }));
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, 'tree-container', className), role: "tree", "aria-multiselectable": checkable, ...htmlProps, children: data.map((node) => (jsx(InternalTreeNode, { node: node, level: 0, expanded: expandedKeysSet.has(node.id), selected: selectedKeysSet.has(node.id), isIndeterminate: indeterminateKeysSet.has(node.id), selectable: selectable, checkable: checkable, hierarchicalSelection: enableHierarchicalSelection, expandable: expandable, expandedKeysSet: expandedKeysSet, selectedKeysSet: selectedKeysSet, indeterminateKeysSet: indeterminateKeysSet, onNodeClick: handleNodeSelect, onToggleExpand: handleNodeToggleExpand, onKeyboardNavigate: handleKeyboardNavigate, nodeRefs: nodeRefs, focusedNodeId: focusedNodeId, onFocusNode: handleFocusNode, theme: theme, shouldReduceMotion: shouldReduceMotion }, node.id))) }));
 });
 TreeRoot.displayName = 'Tree';
 // Simplified compound component

package/dist/components/core/index.js

@@ -100,6 +100,7 @@ export { SidebarSubmenu } from './Sidebar/SidebarSubmenu.js';
 export { SidebarToggle } from './Sidebar/SidebarToggle.js';
 export { SidebarMobileTrigger } from './Sidebar/SidebarMobileTrigger.js';
 export { SidebarUserProfile } from './Sidebar/SidebarUserProfile.js';
+export { SidebarLogo } from './Sidebar/SidebarLogo.js';
 export { useSidebarContext } from './Sidebar/SidebarContext.js';
 export { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
 export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';