@kushagradhawan/kookie-ui 0.1.73 → 0.1.74

package/schemas/toggle-icon-button.json

@@ -321,6 +321,6 @@
   "title": "Toggle-icon-button Component Props",
   "description": "Props schema for the toggle-icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-12-23T11:41:03.256Z",
+  "generatedAt": "2025-12-23T12:04:32.722Z",
   "source": "Zod schema"
 }

package/src/components/_internal/shell-bottom.tsx

@@ -9,6 +9,7 @@ import { BottomHandle, PaneHandle } from './shell-handles.js';
 import { _BREAKPOINTS } from '../shell.types.js';
 import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps } from '../shell.types.js';
 import { extractPaneDomProps, mapResponsiveBooleanToPaneMode } from './shell-prop-helpers.js';
+import { normalizeToPx } from '../../helpers/normalize-to-px.js';
 
 type BottomOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };
 type BottomControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; defaultOpen?: never };
@@ -107,17 +108,29 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
     },
   });
 
+  // Ref for debounce cleanup
+  const debounceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Cleanup debounce timeout on unmount or when dependencies change
+  React.useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = null;
+      }
+    };
+  }, [onSizeChange, sizeUpdate, sizeUpdateMs]);
+  // Throttled/debounced emitter for onSizeChange
   const emitSizeChange = React.useMemo(() => {
     const cb = onSizeChange as undefined | ((s: number, meta: BottomSizeChangeMeta) => void);
     const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';
     const ms = sizeUpdateMs ?? 50;
     if (!cb) return () => {};
     if (strategy === 'debounce') {
-      let t: any = null;
       return (s: number, meta: BottomSizeChangeMeta) => {
-        if (t) clearTimeout(t);
-        t = setTimeout(() => {
+        if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = setTimeout(() => {
           cb(s, meta);
+          debounceTimeoutRef.current = null;
         }, ms);
       };
     }
@@ -175,6 +188,14 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
   // Track previous mode to only fire callbacks on actual user-initiated state transitions.
   // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState
   // is complete before enabling callbacks. This avoids spurious callbacks during initialization.
+  // Use callback refs to avoid re-running effect when inline callbacks change.
+  const onExpandRef = React.useRef(onExpand);
+  const onCollapseRef = React.useRef(onCollapse);
+  React.useLayoutEffect(() => {
+    onExpandRef.current = onExpand;
+    onCollapseRef.current = onCollapse;
+  });
+
   const prevBottomModeRef = React.useRef<PaneMode | null>(null);
   const hasInitializedRef = React.useRef(false);
   React.useEffect(() => {
@@ -198,13 +219,13 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
     // Only fire on actual state transitions
     if (prevMode !== null && prevMode !== currentMode) {
       if (currentMode === 'expanded') {
-        onExpand?.();
+        onExpandRef.current?.();
       } else if (currentMode === 'collapsed') {
-        onCollapse?.();
+        onCollapseRef.current?.();
       }
       prevBottomModeRef.current = currentMode;
     }
-  }, [shell.bottomMode, shell.currentBreakpointReady, onExpand, onCollapse]);
+  }, [shell.bottomMode, shell.currentBreakpointReady]);
 
   const isExpanded = shell.bottomMode === 'expanded';
 
@@ -297,31 +318,14 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
     ) : null;
 
   // Strip control/size props from DOM spread (moved above overlay return to keep hook order consistent)
-  // Normalize CSS lengths to px (moved above overlay return to keep hook order consistent)
-  const normalizeToPx = React.useCallback((value: number | string | undefined): number | undefined => {
-    if (value == null) return undefined;
-    if (typeof value === 'number' && Number.isFinite(value)) return value;
-    const str = String(value).trim();
-    if (!str) return undefined;
-    if (str.endsWith('px')) return Number.parseFloat(str);
-    if (str.endsWith('rem')) {
-      const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
-      return Number.parseFloat(str) * rem;
-    }
-    if (str.endsWith('%')) {
-      const pct = Number.parseFloat(str);
-      const base = document.documentElement.clientHeight || window.innerHeight || 0;
-      return (pct / 100) * base;
-    }
-    const n = Number.parseFloat(str);
-    return Number.isFinite(n) ? n : undefined;
-  }, []);
+  // Normalize CSS lengths to px helper
+  const normalizeSizeToPx = React.useCallback((value: number | string | undefined) => normalizeToPx(value, 'vertical'), []);
 
   // Apply defaultSize on mount when uncontrolled (moved above overlay return)
   React.useEffect(() => {
     if (!localRef.current) return;
     if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {
-      const px = normalizeToPx(defaultSize);
+      const px = normalizeSizeToPx(defaultSize);
       if (typeof px === 'number' && Number.isFinite(px)) {
         const minPx = typeof minSize === 'number' ? minSize : undefined;
         const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -338,7 +342,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
   React.useEffect(() => {
     if (!localRef.current) return;
     if (typeof controlledSize === 'undefined') return;
-    const px = normalizeToPx(controlledSize);
+    const px = normalizeSizeToPx(controlledSize);
     if (typeof px === 'number' && Number.isFinite(px)) {
       const minPx = typeof minSize === 'number' ? minSize : undefined;
       const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -346,7 +350,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initi
       localRef.current.style.setProperty('--bottom-size', `${clamped}px`);
       emitSizeChange(clamped, { reason: 'controlled' });
     }
-  }, [controlledSize, minSize, maxSize, normalizeToPx, emitSizeChange]);
+  }, [controlledSize, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);
 
   if (isOverlay) {
     const open = shell.bottomMode === 'expanded';

package/src/components/_internal/shell-handles.tsx

@@ -19,7 +19,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
     snapTolerance,
     collapseThreshold,
     collapsible,
-    target: _target,
+    target,
     requestCollapse,
     requestToggle,
   } = usePaneResize();
@@ -37,6 +37,10 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
 
   const ariaOrientation = orientation;
 
+  // Generate accessible label from target
+  const targetLabel = target.charAt(0).toUpperCase() + target.slice(1);
+  const ariaLabel = `Resize ${targetLabel} pane`;
+
   return (
     <div
       {...props}
@@ -45,6 +49,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
       data-orientation={orientation}
       data-edge={edge}
       role="slider"
+      aria-label={ariaLabel}
       aria-orientation={ariaOrientation}
       aria-valuemin={minSize}
       aria-valuemax={maxSize}

package/src/components/_internal/shell-inspector.tsx

@@ -9,6 +9,7 @@ import { InspectorHandle, PaneHandle } from './shell-handles.js';
 import { _BREAKPOINTS } from '../shell.types.js';
 import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps } from '../shell.types.js';
 import { extractPaneDomProps, mapResponsiveBooleanToPaneMode } from './shell-prop-helpers.js';
+import { normalizeToPx } from '../../helpers/normalize-to-px.js';
 
 type InspectorOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };
 type InspectorControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; defaultOpen?: never };
@@ -107,17 +108,29 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     },
   });
 
+  // Ref for debounce cleanup
+  const debounceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Cleanup debounce timeout on unmount or when dependencies change
+  React.useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = null;
+      }
+    };
+  }, [onSizeChange, sizeUpdate, sizeUpdateMs]);
+  // Throttled/debounced emitter for onSizeChange
   const emitSizeChange = React.useMemo(() => {
     const cb = onSizeChange as undefined | ((s: number, meta: InspectorSizeChangeMeta) => void);
     const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';
     const ms = sizeUpdateMs ?? 50;
     if (!cb) return () => {};
     if (strategy === 'debounce') {
-      let t: any = null;
       return (s: number, meta: InspectorSizeChangeMeta) => {
-        if (t) clearTimeout(t);
-        t = setTimeout(() => {
+        if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = setTimeout(() => {
           cb(s, meta);
+          debounceTimeoutRef.current = null;
         }, ms);
       };
     }
@@ -176,6 +189,14 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
   // Track previous mode to only fire callbacks on actual user-initiated state transitions.
   // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState
   // is complete before enabling callbacks. This avoids spurious callbacks during initialization.
+  // Use callback refs to avoid re-running effect when inline callbacks change.
+  const onExpandRef = React.useRef(onExpand);
+  const onCollapseRef = React.useRef(onCollapse);
+  React.useLayoutEffect(() => {
+    onExpandRef.current = onExpand;
+    onCollapseRef.current = onCollapse;
+  });
+
   const prevInspectorModeRef = React.useRef<PaneMode | null>(null);
   const hasInitializedRef = React.useRef(false);
   React.useEffect(() => {
@@ -199,13 +220,13 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     // Only fire on actual state transitions
     if (prevMode !== null && prevMode !== currentMode) {
       if (currentMode === 'expanded') {
-        onExpand?.();
+        onExpandRef.current?.();
       } else if (currentMode === 'collapsed') {
-        onCollapse?.();
+        onCollapseRef.current?.();
       }
       prevInspectorModeRef.current = currentMode;
     }
-  }, [shell.inspectorMode, shell.currentBreakpointReady, onExpand, onCollapse]);
+  }, [shell.inspectorMode, shell.currentBreakpointReady]);
 
   const isExpanded = shell.inspectorMode === 'expanded';
 
@@ -298,31 +319,14 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
       </PaneResizeContext.Provider>
     ) : null;
 
-  // Normalize CSS lengths to px
-  const normalizeToPx = React.useCallback((value: number | string | undefined): number | undefined => {
-    if (value == null) return undefined;
-    if (typeof value === 'number' && Number.isFinite(value)) return value;
-    const str = String(value).trim();
-    if (!str) return undefined;
-    if (str.endsWith('px')) return Number.parseFloat(str);
-    if (str.endsWith('rem')) {
-      const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
-      return Number.parseFloat(str) * rem;
-    }
-    if (str.endsWith('%')) {
-      const pct = Number.parseFloat(str);
-      const base = document.documentElement.clientWidth || window.innerWidth || 0;
-      return (pct / 100) * base;
-    }
-    const n = Number.parseFloat(str);
-    return Number.isFinite(n) ? n : undefined;
-  }, []);
+  // Normalize CSS lengths to px helper
+  const normalizeSizeToPx = React.useCallback((value: number | string | undefined) => normalizeToPx(value, 'horizontal'), []);
 
   // Apply defaultSize on mount when uncontrolled
   React.useEffect(() => {
     if (!localRef.current) return;
     if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {
-      const px = normalizeToPx(defaultSize);
+      const px = normalizeSizeToPx(defaultSize);
       if (typeof px === 'number' && Number.isFinite(px)) {
         const minPx = typeof minSize === 'number' ? minSize : undefined;
         const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -339,7 +343,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
   React.useEffect(() => {
     if (!localRef.current) return;
     if (typeof controlledSize === 'undefined') return;
-    const px = normalizeToPx(controlledSize);
+    const px = normalizeSizeToPx(controlledSize);
     if (typeof px === 'number' && Number.isFinite(px)) {
       const minPx = typeof minSize === 'number' ? minSize : undefined;
       const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -347,7 +351,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
       localRef.current.style.setProperty('--inspector-size', `${clamped}px`);
       emitSizeChange(clamped, { reason: 'controlled' });
     }
-  }, [controlledSize, minSize, maxSize, normalizeToPx, emitSizeChange]);
+  }, [controlledSize, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);
 
   if (isOverlay) {
     const open = shell.inspectorMode === 'expanded';

package/src/components/_internal/shell-sidebar.tsx

@@ -9,6 +9,7 @@ import { extractPaneDomProps } from './shell-prop-helpers.js';
 import { SidebarHandle, PaneHandle } from './shell-handles.js';
 import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, SidebarMode, Responsive, PaneBaseProps } from '../shell.types.js';
 import { _BREAKPOINTS } from '../shell.types.js';
+import { normalizeToPx } from '../../helpers/normalize-to-px.js';
 
 type SidebarPaneProps = PaneBaseProps & {
   mode?: PaneMode;
@@ -100,6 +101,17 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
   const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === SidebarHandle);
   const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === SidebarHandle));
 
+  // Ref for debounce cleanup
+  const debounceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Cleanup debounce timeout on unmount or when dependencies change
+  React.useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = null;
+      }
+    };
+  }, [onSizeChange, sizeUpdate, sizeUpdateMs]);
   // Throttled/debounced emitter for onSizeChange
   const emitSizeChange = React.useMemo(() => {
     const cb = onSizeChange as undefined | ((s: number, meta: { reason: 'init' | 'resize' | 'controlled' }) => void);
@@ -107,11 +119,11 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
     const ms = sizeUpdateMs ?? 50;
     if (!cb) return () => {};
     if (strategy === 'debounce') {
-      let t: any = null;
       return (s: number, meta: { reason: 'init' | 'resize' | 'controlled' }) => {
-        if (t) clearTimeout(t);
-        t = setTimeout(() => {
+        if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = setTimeout(() => {
           cb(s, meta);
+          debounceTimeoutRef.current = null;
         }, ms);
       };
     }
@@ -191,6 +203,14 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
   // Track previous mode to only fire callbacks on actual user-initiated state transitions.
   // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState
   // is complete before enabling callbacks. This avoids spurious callbacks during initialization.
+  // Use callback refs to avoid re-running effect when inline callbacks change.
+  const onExpandRef = React.useRef(onExpand);
+  const onCollapseRef = React.useRef(onCollapse);
+  React.useLayoutEffect(() => {
+    onExpandRef.current = onExpand;
+    onCollapseRef.current = onCollapse;
+  });
+
   const prevSidebarModeRef = React.useRef<SidebarMode | null>(null);
   const hasInitializedRef = React.useRef(false);
   React.useEffect(() => {
@@ -215,15 +235,15 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
     if (prevMode !== null && prevMode !== currentMode) {
       // onExpand: when becoming visible (collapsed → thin/expanded)
       if (prevMode === 'collapsed' && currentMode !== 'collapsed') {
-        onExpand?.();
+        onExpandRef.current?.();
       }
       // onCollapse: when becoming hidden (any → collapsed)
       else if (currentMode === 'collapsed') {
-        onCollapse?.();
+        onCollapseRef.current?.();
       }
       prevSidebarModeRef.current = currentMode;
     }
-  }, [shell.sidebarMode, shell.currentBreakpointReady, onExpand, onCollapse]);
+  }, [shell.sidebarMode, shell.currentBreakpointReady]);
 
   // Option A: thin is width-only; content remains visible whenever not collapsed
   const isContentVisible = shell.sidebarMode !== 'collapsed';
@@ -348,31 +368,14 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
       </PaneResizeContext.Provider>
     ) : null;
 
-  // Normalize CSS lengths to px
-  const normalizeToPx = React.useCallback((value: number | string | undefined): number | undefined => {
-    if (value == null) return undefined;
-    if (typeof value === 'number' && Number.isFinite(value)) return value;
-    const str = String(value).trim();
-    if (!str) return undefined;
-    if (str.endsWith('px')) return Number.parseFloat(str);
-    if (str.endsWith('rem')) {
-      const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
-      return Number.parseFloat(str) * rem;
-    }
-    if (str.endsWith('%')) {
-      const pct = Number.parseFloat(str);
-      const base = document.documentElement.clientWidth || window.innerWidth || 0;
-      return (pct / 100) * base;
-    }
-    const n = Number.parseFloat(str);
-    return Number.isFinite(n) ? n : undefined;
-  }, []);
+  // Normalize CSS lengths to px helper
+  const normalizeSizeToPx = React.useCallback((value: number | string | undefined) => normalizeToPx(value, 'horizontal'), []);
 
   // Apply defaultSize on mount when uncontrolled
   React.useEffect(() => {
     if (!localRef.current) return;
     if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {
-      const px = normalizeToPx(defaultSize);
+      const px = normalizeSizeToPx(defaultSize);
       if (typeof px === 'number' && Number.isFinite(px)) {
         const minPx = typeof minSize === 'number' ? minSize : undefined;
         const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -389,7 +392,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
   React.useEffect(() => {
     if (!localRef.current) return;
     if (typeof controlledSize === 'undefined') return;
-    const px = normalizeToPx(controlledSize);
+    const px = normalizeSizeToPx(controlledSize);
     if (typeof px === 'number' && Number.isFinite(px)) {
       const minPx = typeof minSize === 'number' ? minSize : undefined;
       const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -397,7 +400,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
       localRef.current.style.setProperty('--sidebar-size', `${clamped}px`);
       emitSizeChange(clamped, { reason: 'controlled' });
     }
-  }, [controlledSize, minSize, maxSize, normalizeToPx, emitSizeChange]);
+  }, [controlledSize, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);
 
   if (isOverlay) {
     const open = shell.sidebarMode !== 'collapsed';

package/src/components/shell.tsx

@@ -38,6 +38,7 @@ import { Bottom } from './_internal/shell-bottom.js';
 import { Inspector } from './_internal/shell-inspector.js';
 import type { PresentationValue, ResponsivePresentation, PaneMode, SidebarMode, PaneSizePersistence, Breakpoint, PaneTarget, Responsive, PaneBaseProps } from './shell.types.js';
 import { _BREAKPOINTS } from './shell.types.js';
+import { normalizeToPx } from '../helpers/normalize-to-px.js';
 import {
   ShellProvider,
   useShell,
@@ -911,15 +912,26 @@ const Panel = assignShellSlot(
       sizeUpdateMs = 50,
     } = initialProps;
     const panelDomProps = extractPaneDomProps(initialProps, PANEL_DOM_PROP_KEYS);
+    // Ref for debounce cleanup
+    const debounceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+    // Cleanup debounce timeout on unmount or when dependencies change
+    React.useEffect(() => {
+      return () => {
+        if (debounceTimeoutRef.current) {
+          clearTimeout(debounceTimeoutRef.current);
+          debounceTimeoutRef.current = null;
+        }
+      };
+    }, [onSizeChange, sizeUpdate, sizeUpdateMs]);
     // Throttled/debounced emitter for onSizeChange
     const emitSizeChange = React.useMemo(() => {
       if (!onSizeChange) return () => {};
       if (sizeUpdate === 'debounce') {
-        let t: any = null;
         const fn = (s: number, meta: PanelSizeChangeMeta) => {
-          if (t) clearTimeout(t);
-          t = setTimeout(() => {
+          if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+          debounceTimeoutRef.current = setTimeout(() => {
             onSizeChange?.(s, meta);
+            debounceTimeoutRef.current = null;
           }, sizeUpdateMs);
         };
         return fn;
@@ -978,12 +990,16 @@ const Panel = assignShellSlot(
     }, [shell, open]);
 
     // Dev-only warning if switching controlled/uncontrolled between renders
+    const wasControlledRef = React.useRef<boolean | null>(null);
     React.useEffect(() => {
       const isControlled = typeof open !== 'undefined';
-      (Panel as any)._wasControlled = (Panel as any)._wasControlled ?? isControlled;
-      if ((Panel as any)._wasControlled !== isControlled) {
+      if (wasControlledRef.current === null) {
+        wasControlledRef.current = isControlled;
+        return;
+      }
+      if (wasControlledRef.current !== isControlled) {
         console.warn('Shell.Panel: Switching between controlled and uncontrolled `open` is not supported.');
-        (Panel as any)._wasControlled = isControlled;
+        wasControlledRef.current = isControlled;
       }
     }, [open]);
 
@@ -1015,26 +1031,8 @@ const Panel = assignShellSlot(
 
     const isOverlay = shell.leftResolvedPresentation === 'overlay';
 
-    // Normalize CSS lengths to px
-    const normalizeToPx = React.useCallback((value: number | string | undefined): number | undefined => {
-      if (value == null) return undefined;
-      if (typeof value === 'number' && Number.isFinite(value)) return value;
-      const str = String(value).trim();
-      if (!str) return undefined;
-      if (str.endsWith('px')) return Number.parseFloat(str);
-      if (str.endsWith('rem')) {
-        const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
-        return Number.parseFloat(str) * rem;
-      }
-      if (str.endsWith('%')) {
-        const pct = Number.parseFloat(str);
-        const base = document.documentElement.clientWidth || window.innerWidth || 0;
-        return (pct / 100) * base;
-      }
-      // Bare number-like string
-      const n = Number.parseFloat(str);
-      return Number.isFinite(n) ? n : undefined;
-    }, []);
+    // Normalize CSS lengths to px helper
+    const normalizeSizeToPx = React.useCallback((value: number | string | undefined) => normalizeToPx(value, 'horizontal'), []);
 
     // Derive a default persistence adapter from paneId if none provided
     const persistenceAdapter = React.useMemo(() => {
@@ -1082,7 +1080,7 @@ const Panel = assignShellSlot(
     React.useEffect(() => {
       if (!localRef.current) return;
       if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {
-        const px = normalizeToPx(defaultSize);
+        const px = normalizeSizeToPx(defaultSize);
         if (typeof px === 'number' && Number.isFinite(px)) {
           // Clamp to min/max if provided
           const minPx = typeof minSize === 'number' ? minSize : undefined;
@@ -1099,7 +1097,7 @@ const Panel = assignShellSlot(
     React.useEffect(() => {
       if (!localRef.current) return;
       if (typeof size === 'undefined') return;
-      const px = normalizeToPx(size);
+      const px = normalizeSizeToPx(size);
       if (typeof px === 'number' && Number.isFinite(px)) {
         const minPx = typeof minSize === 'number' ? minSize : undefined;
         const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -1107,7 +1105,7 @@ const Panel = assignShellSlot(
         localRef.current.style.setProperty('--panel-size', `${clamped}px`);
         emitSizeChange(clamped, { reason: 'controlled' });
       }
-    }, [size, minSize, maxSize, normalizeToPx, emitSizeChange]);
+    }, [size, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);
 
     // Ensure Left container width is auto whenever Panel is expanded in fixed presentation
     React.useEffect(() => {
@@ -1302,7 +1300,16 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, act
   );
 
   return (
-    <button {...props} ref={ref} onClick={handleClick} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} data-shell-trigger={target} data-shell-action={action}>
+    <button
+      {...props}
+      ref={ref}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      data-shell-trigger={target}
+      data-shell-action={action}
+      aria-expanded={!isCollapsed}
+    >
       {children}
     </button>
   );

package/src/helpers/index.ts

@@ -11,4 +11,5 @@ export * from './input-attributes.js';
 export * from './is-responsive-object.js';
 export * from './map-prop-values.js';
 export * from './merge-styles.js';
+export * from './normalize-to-px.js';
 export * from './require-react-element.js';

package/src/helpers/normalize-to-px.ts

@@ -0,0 +1,42 @@
+/**
+ * Normalize CSS length values to pixels.
+ * Supports: px, rem, %, and bare numbers.
+ *
+ * @param value - The value to normalize (number, string, or undefined)
+ * @param orientation - 'horizontal' for width-based % or 'vertical' for height-based %
+ * @returns The value in pixels, or undefined if invalid
+ */
+export function normalizeToPx(
+  value: number | string | undefined,
+  orientation: 'horizontal' | 'vertical' = 'horizontal',
+): number | undefined {
+  if (value == null) return undefined;
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+
+  const str = String(value).trim();
+  if (!str) return undefined;
+
+  // px: direct parse
+  if (str.endsWith('px')) return Number.parseFloat(str);
+
+  // rem: multiply by root font size
+  if (str.endsWith('rem')) {
+    const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
+    return Number.parseFloat(str) * rem;
+  }
+
+  // %: calculate based on viewport dimension
+  if (str.endsWith('%')) {
+    const pct = Number.parseFloat(str);
+    const base =
+      orientation === 'horizontal'
+        ? document.documentElement.clientWidth || window.innerWidth || 0
+        : document.documentElement.clientHeight || window.innerHeight || 0;
+    return (pct / 100) * base;
+  }
+
+  // Bare number-like string
+  const n = Number.parseFloat(str);
+  return Number.isFinite(n) ? n : undefined;
+}
+