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

package/dist/components/core/Progress/Progress.js

@@ -35,7 +35,7 @@ const PROGRESS_SPRING_TRANSITION = {
  * // Indeterminate (loading)
  * <Progress />
  */
-const Progress = React__default.forwardRef(({ value, size = "md", showLabel = false, labelPosition = "right", formatLabel, animated = true, wrapperClassName, className, theme: customTheme, ...props }, ref) => {
+const Progress = React__default.forwardRef(({ value, size = "md", showLabel = false, labelPosition = "right", formatLabel, animated = true, wrapperClassName, className, theme: customTheme, 'aria-label': consumerAriaLabel, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     // Merge custom theme with default theme
     const theme = useMemo(() => {
@@ -98,11 +98,11 @@ const Progress = React__default.forwardRef(({ value, size = "md", showLabel = fa
     const renderTrack = () => (jsxs("div", { className: cn(theme.trackStyle, theme.sizes[size], "relative", wrapperClassName), children: [isIndeterminate ? (
             // Indeterminate animation
             jsx("div", { className: cn(theme.fillStyle, "absolute", theme.indeterminateStyle, className) })) : shouldAnimate ? (
-            // Animated determinate progress with spring animation
-            jsx(motion.div, { className: cn(theme.fillStyle, className), initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: PROGRESS_SPRING_TRANSITION })) : (
+            // Animated determinate progress with spring animation (scaleX avoids layout recalculation)
+            jsx(motion.div, { className: cn(theme.fillStyle, className), style: { width: '100%', transformOrigin: 'left' }, initial: { scaleX: 0 }, animate: { scaleX: percentage / 100 }, transition: PROGRESS_SPRING_TRANSITION })) : (
             // Static determinate progress
             jsx("div", { className: cn(theme.fillStyle, className), style: { width: `${percentage}%` } })), showLabel && labelPosition === "inside" && size === "lg" && !isIndeterminate && (jsx("span", { className: theme.insideLabelStyle, children: label }))] }));
-    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": isIndeterminate ? "Loading" : `${percentage}% complete`, ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: renderTrack() }), renderLabel()] })) : (renderTrack()), labelPosition === "bottom" && renderLabel()] }));
+    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": consumerAriaLabel !== null && consumerAriaLabel !== void 0 ? consumerAriaLabel : (isIndeterminate ? "Loading" : `${percentage}% complete`), ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: renderTrack() }), renderLabel()] })) : (renderTrack()), labelPosition === "bottom" && renderLabel()] }));
 });
 Progress.displayName = "Progress";
 

package/dist/components/core/Rating/Rating.js

@@ -160,7 +160,7 @@ const Rating = React__default.memo(React__default.forwardRef(({ value: controlle
             return (jsx("span", { className: "inline-flex items-center justify-center", children: renderStarIcon() }, starIndex));
         }
         // Interactive: render as a button
-        return (jsx("button", { type: "button", className: cn(theme.starStyle, "hover:scale-110 active:scale-95"), onClick: (e) => handleStarClick(starIndex, e), onMouseMove: (e) => handleStarMouseMove(starIndex, e), "aria-label": `Rate ${starIndex} out of ${max}`, tabIndex: -1, children: renderStarIcon() }, starIndex));
+        return (jsx("button", { type: "button", className: cn(theme.starStyle, "hover:scale-110 active:scale-95"), onClick: (e) => handleStarClick(starIndex, e), onMouseMove: (e) => handleStarMouseMove(starIndex, e), "aria-label": `Rate ${starIndex} out of ${max}`, tabIndex: -1, "aria-hidden": "true", children: renderStarIcon() }, starIndex));
     };
     // Build array of star indices (1-based)
     const stars = useMemo(() => Array.from({ length: max }, (_, i) => i + 1), [max]);

package/dist/components/core/ScrollArea/ScrollArea.js

@@ -50,8 +50,9 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', size =
     const smoothAPI = useSmoothScroll(smooth ? internalRef : null, smoothScrollConfig, smoothOrientation);
     // Expose extended API via ref
     useImperativeHandle(ref, () => {
-        if (!internalRef.current)
-            return null;
+        // internalRef.current is always set by the time the imperative handle is
+        // accessed (refs are resolved after mount). The non-null assertion avoids
+        // the unsafe `null as unknown as ScrollAreaRef` double-cast.
         const element = internalRef.current;
         // Create extended ref object
         const extendedRef = element;

package/dist/components/core/Segmented/Segmented.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useRef, useState, useEffect, useMemo } from 'react';
+import React__default, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { debounce } from '../../../utils/debounce.js';
 import { segmentedTheme } from './Segmented.theme.js';
@@ -10,11 +10,11 @@ import { SegmentedItem } from './SegmentedItem.js';
  * Segmented component for selecting one option from a set of segments
  * Uses compound component pattern with Segmented.Item
  */
-const SegmentedComponent = React__default.forwardRef(({ value, onChange, size = "md", disabled = false, block = false, children, className, slidingBackgroundClassName, theme, ...props }, ref) => {
+const SegmentedComponent = React__default.forwardRef(({ value, onChange, size = "md", disabled = false, block = false, children, className, slidingBackgroundClassName, theme, "aria-label": ariaLabel, ...props }, ref) => {
     var _a;
     const containerRef = useRef(null);
     const [activeStyle, setActiveStyle] = useState({});
-    const updateActiveStyle = () => {
+    const updateActiveStyle = useCallback(() => {
         if (!containerRef.current || !value)
             return;
         const activeButton = containerRef.current.querySelector(`[data-value="${value}"]`);
@@ -28,10 +28,10 @@ const SegmentedComponent = React__default.forwardRef(({ value, onChange, size =
                 transform: `translateX(${buttonRect.left - containerRect.left}px)`,
             });
         }
-    };
+    }, [value]);
     useEffect(() => {
         updateActiveStyle();
-    }, [value]);
+    }, [value, updateActiveStyle]);
     // Debounced resize handler for better performance
     const debouncedUpdateActiveStyle = useMemo(() => debounce(updateActiveStyle, 100), [updateActiveStyle]);
     useEffect(() => {
@@ -52,7 +52,7 @@ const SegmentedComponent = React__default.forwardRef(({ value, onChange, size =
                 else if (ref) {
                     ref.current = node;
                 }
-            }, role: "tablist", "aria-orientation": "horizontal", className: cn((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || segmentedTheme.baseStyle, ((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || segmentedTheme.sizes[size], block && ((theme === null || theme === void 0 ? void 0 : theme.blockStyle) || segmentedTheme.blockStyle), disabled && ((theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || segmentedTheme.disabledStyle), className), "data-size": size, "data-disabled": disabled, "data-block": block, ...props, children: [value && (jsx("div", { className: cn((theme === null || theme === void 0 ? void 0 : theme.slidingBackgroundStyle) ||
+            }, role: "radiogroup", "aria-label": ariaLabel, className: cn((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || segmentedTheme.baseStyle, ((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || segmentedTheme.sizes[size], block && ((theme === null || theme === void 0 ? void 0 : theme.blockStyle) || segmentedTheme.blockStyle), disabled && ((theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || segmentedTheme.disabledStyle), className), "data-size": size, "data-disabled": disabled, "data-block": block, ...props, children: [value && (jsx("div", { className: cn((theme === null || theme === void 0 ? void 0 : theme.slidingBackgroundStyle) ||
                         segmentedTheme.slidingBackgroundStyle, slidingBackgroundClassName), style: activeStyle })), children] }) }));
 });
 // Set display name for dev tools and Storybook

package/dist/components/core/Segmented/SegmentedItem.js

@@ -18,10 +18,36 @@ const SegmentedItem = React__default.forwardRef(({ value, disabled = false, chil
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
-    return (jsx("button", { ref: ref, type: "button", role: "tab", "aria-selected": isSelected, disabled: isDisabled, className: cn(segmentedItemTheme.baseStyle, segmentedItemTheme.sizes[size], isSelected
+    const handleKeyDown = (event) => {
+        if (isDisabled)
+            return;
+        const radioGroup = event.currentTarget.parentElement;
+        if (!radioGroup)
+            return;
+        const radios = Array.from(radioGroup.querySelectorAll('[role="radio"]:not([disabled])'));
+        const currentIndex = radios.indexOf(event.currentTarget);
+        let targetRadio;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            targetRadio = radios[(currentIndex + 1) % radios.length];
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            targetRadio = radios[(currentIndex - 1 + radios.length) % radios.length];
+        }
+        if (targetRadio) {
+            targetRadio.focus();
+            // Read the value from the data attribute and trigger selection
+            const targetValue = targetRadio.getAttribute('data-value');
+            if (targetValue) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(targetValue);
+            }
+        }
+    };
+    return (jsx("button", { ref: ref, type: "button", role: "radio", "aria-checked": isSelected, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, className: cn(segmentedItemTheme.baseStyle, segmentedItemTheme.sizes[size], isSelected
             ? segmentedItemTheme.selectedStyle
             : segmentedItemTheme.unselectedStyle, isDisabled && segmentedItemTheme.disabledStyle, className // User overrides take precedence
-        ), onClick: handleClick, "data-value": value, "data-selected": isSelected, "data-disabled": isDisabled, ...props, children: children }));
+        ), onClick: handleClick, onKeyDown: handleKeyDown, "data-value": value, "data-selected": isSelected, "data-disabled": isDisabled, ...props, children: children }));
 });
 // Set display name for dev tools and Storybook
 SegmentedItem.displayName = "Segmented.Item";

package/dist/components/core/Skeleton/Skeleton.js

@@ -50,11 +50,11 @@ const Skeleton = React__default.forwardRef(({ variant = 'rectangle', width, heig
                 // Make last line 75% width for more natural look
                 const isLastLine = index === lines - 1;
                 const lineWidth = isLastLine && !width ? '75%' : computedWidth;
-                return (jsx("div", { className: baseClasses, style: { ...computedStyle, width: lineWidth } }, index));
+                return (jsx("div", { className: baseClasses, style: { ...computedStyle, width: lineWidth }, "aria-hidden": "true" }, index));
             }) }));
     }
     // Single skeleton
-    return (jsx("div", { ref: ref, className: baseClasses, style: computedStyle, "aria-busy": "true", "aria-live": "polite", ...props }));
+    return (jsx("div", { ref: ref, className: baseClasses, style: computedStyle, "aria-hidden": "true", ...props }));
 });
 Skeleton.displayName = 'Skeleton';
 

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SortableProps, SortableItemProps } from './Sortable.types';
 export declare const Sortable: React.ForwardRefExoticComponent<SortableProps & React.RefAttributes<HTMLUListElement>>;
-export declare const SortableItem: React.ForwardRefExoticComponent<SortableItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SortableItem: React.ForwardRefExoticComponent<SortableItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/core/Sortable/Sortable.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { createContext, useState, useRef, useMemo, useCallback, useEffect, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { createContext, useState, useRef, useId, useMemo, useCallback, useEffect, useContext } from 'react';
 import { Reorder, useDragControls, motion } from 'motion/react';
 import { LockClosedIcon, Bars3Icon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
@@ -19,6 +19,8 @@ const Sortable = React__default.forwardRef(({ children, onReorder, className, th
     const [dropPosition, setDropPosition] = useState(null);
     const itemRefs = useRef(new Map());
     const [draggedItemContent, setDraggedItemContent] = useState(null);
+    const [liveMessage, setLiveMessage] = useState('');
+    const liveRegionId = useId();
     const theme = {
         ...sortableTheme,
         ...customTheme,
@@ -63,8 +65,19 @@ const Sortable = React__default.forwardRef(({ children, onReorder, className, th
         itemRefs,
         draggedItemContent,
         setDraggedItemContent,
+        setLiveMessage,
     }), [direction, showDragHandle, theme, onReorder, onSortDragStart, onSortDragEnd, draggedItem, dropPosition, draggedItemContent]);
-    return (jsx(SortableContext.Provider, { value: contextValue, children: jsx(Reorder.Group, { ref: ref, axis: direction === 'horizontal' ? 'x' : 'y', values: internalValues, onReorder: handleReorder, className: cn(theme.containerStyle, direction === 'horizontal' ? 'flex flex-row' : 'flex flex-col', className), as: "div", children: children }) }));
+    return (jsxs(SortableContext.Provider, { value: contextValue, children: [jsx("div", { id: liveRegionId, "aria-live": "assertive", "aria-atomic": "true", style: {
+                    position: 'absolute',
+                    width: '1px',
+                    height: '1px',
+                    padding: 0,
+                    margin: '-1px',
+                    overflow: 'hidden',
+                    clip: 'rect(0, 0, 0, 0)',
+                    whiteSpace: 'nowrap',
+                    border: 0,
+                }, children: liveMessage }), jsx(Reorder.Group, { ref: ref, axis: direction === 'horizontal' ? 'x' : 'y', values: internalValues, onReorder: handleReorder, className: cn(theme.containerStyle, direction === 'horizontal' ? 'flex flex-row' : 'flex flex-col', className), as: "ul", children: children })] }));
 });
 Sortable.displayName = 'Sortable';
 const SortableItem = React__default.forwardRef(({ id, children, className, theme: customTheme = {}, disabled = false, value, }, forwardedRef) => {
@@ -136,6 +149,9 @@ const SortableItem = React__default.forwardRef(({ id, children, className, theme
         }
         if (targetIndex !== currentIndex) {
             context.onReorder(currentIndex, targetIndex);
+            // Announce the reorder to screen readers via the live region
+            const itemLabel = typeof value === 'string' ? value : id;
+            context.setLiveMessage(`${itemLabel} moved to position ${targetIndex + 1} of ${items.length}`);
             // Focus the item at new position after reorder
             setTimeout(() => {
                 const targetItem = items[targetIndex];
@@ -185,7 +201,7 @@ const SortableItem = React__default.forwardRef(({ id, children, className, theme
         dragControls.start(event);
     }, [disabled, dragControls]);
     const isBeingDragged = context.draggedItem === id;
-    return (jsxs(Reorder.Item, { ref: (node) => {
+    return (jsxs(Reorder.Item, { as: "li", ref: (node) => {
             itemRef.current = node;
             if (typeof forwardedRef === 'function') {
                 forwardedRef(node);

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

@@ -70,4 +70,6 @@ export interface SortableContextValue {
     itemRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
     draggedItemContent: React.ReactNode | null;
     setDraggedItemContent: (content: React.ReactNode | null) => void;
+    /** Update the visually-hidden live region with a reorder announcement */
+    setLiveMessage: (message: string) => void;
 }

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useCallback, useMemo } from 'react';
+import React__default, { useState, useId, useRef, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
 import { TabsContext } from './TabsContext.js';
@@ -14,6 +14,8 @@ import { TabsBody } from './TabsBody.js';
  */
 const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, darkMode = false, ...props }, ref) => {
     const [currentValue, setCurrentValue] = useState(value || defaultValue || "");
+    // Unique instance prefix to scope all DOM IDs to this Tabs instance
+    const instanceId = useId();
     // Track trigger elements for underline positioning
     const triggerRefs = useRef(new Map());
     // Handle controlled vs uncontrolled
@@ -68,15 +70,15 @@ const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueC
         disabled,
         registerTrigger,
         unregisterTrigger,
-    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger]);
+        instanceId,
+    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger, instanceId]);
     // Memoize theme classes for performance
     const themeClasses = useMemo(() => ({
         baseStyle: tabsTheme.baseStyle,
         disabledStyle: disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "",
     }), [disabled]);
     return (jsx(TabsContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(themeClasses.baseStyle, themeClasses.disabledStyle, darkMode && "dark", className // User overrides take precedence
-            ), "data-orientation": orientation, "data-size": size, "data-disabled": disabled, role: "tablist" // Add semantic role for screen readers
-            , "aria-orientation": orientation, ...props, children: children }) }));
+            ), "data-orientation": orientation, "data-size": size, "data-disabled": disabled, ...props, children: children }) }));
 });
 // Set display name for dev tools and Storybook
 TabsComponent.displayName = "Tabs";

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

@@ -139,4 +139,6 @@ export interface TabsContextValue {
     registerTrigger: (value: string, element: HTMLButtonElement) => void;
     /** Unregister a tab trigger when it unmounts */
     unregisterTrigger: (value: string) => void;
+    /** Unique prefix scoping DOM IDs to this Tabs instance */
+    instanceId: string;
 }

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

@@ -10,7 +10,7 @@ import { getTabsBodyVariants } from './Tabs.animations.js';
  * TabsBody component displays content panels for tabs with directional fade animations
  */
 const TabsBody = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
-    const { value: selectedValue, orientation } = useTabsContext();
+    const { value: selectedValue, orientation, instanceId } = useTabsContext();
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
     const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
@@ -21,7 +21,7 @@ const TabsBody = React__default.forwardRef(({ value, forceMount = false, childre
     const contentVariants = useMemo(() => getTabsBodyVariants(shouldDisableAnimations), [shouldDisableAnimations]);
     // For forceMount, we handle visibility differently to preserve DOM
     if (forceMount) {
-        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, !isSelected && "hidden", // Hide when not selected but force mounted
+        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${instanceId}-${value}-tab`, id: `${instanceId}-${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, !isSelected && "hidden", // Hide when not selected but force mounted
             className // User overrides take precedence
             ), "data-state": isSelected ? "active" : "inactive", "data-orientation": orientation, style: {
                 // Ensure proper stacking context for animations
@@ -39,7 +39,7 @@ const TabsBody = React__default.forwardRef(({ value, forceMount = false, childre
         exit: "exit",
         variants: contentVariants,
     };
-    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, className // User overrides take precedence
+    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${instanceId}-${value}-tab`, id: `${instanceId}-${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, className // User overrides take precedence
             ), "data-state": "active", "data-orientation": orientation, style: {
                 // Ensure proper stacking context for animations
                 position: "relative",

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.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,36 +7,8 @@ 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, 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);
@@ -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: cn("relative inline-block", triggerClassName), 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