@kushagradhawan/kookie-ui 0.1.50 → 0.1.52

package/schemas/index.json

@@ -3,7 +3,7 @@
   "title": "Kookie UI Button Components",
   "description": "Complete JSON Schema collection for all button components in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-12T18:14:42.772Z",
+  "generatedAt": "2025-09-18T07:33:50.471Z",
   "source": "Zod schemas",
   "components": {
     "base-button": {
@@ -287,7 +287,7 @@
       "title": "Base-button Component Props",
       "description": "Props schema for the base-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-12T18:14:42.763Z",
+      "generatedAt": "2025-09-18T07:33:50.462Z",
       "source": "Zod schema"
     },
     "button": {
@@ -822,7 +822,7 @@
       "title": "Button Component Props",
       "description": "Props schema for the button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-12T18:14:42.768Z",
+      "generatedAt": "2025-09-18T07:33:50.467Z",
       "source": "Zod schema"
     },
     "icon-button": {
@@ -1140,7 +1140,7 @@
       "title": "Icon-button Component Props",
       "description": "Props schema for the icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-12T18:14:42.770Z",
+      "generatedAt": "2025-09-18T07:33:50.468Z",
       "source": "Zod schema"
     },
     "toggle-button": {
@@ -1683,7 +1683,7 @@
       "title": "Toggle-button Component Props",
       "description": "Props schema for the toggle-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-12T18:14:42.771Z",
+      "generatedAt": "2025-09-18T07:33:50.469Z",
       "source": "Zod schema"
     },
     "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
       "title": "Toggle-icon-button Component Props",
       "description": "Props schema for the toggle-icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-12T18:14:42.772Z",
+      "generatedAt": "2025-09-18T07:33:50.470Z",
       "source": "Zod schema"
     }
   }

package/schemas/toggle-button.json

@@ -538,6 +538,6 @@
   "title": "Toggle-button Component Props",
   "description": "Props schema for the toggle-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-12T18:14:42.771Z",
+  "generatedAt": "2025-09-18T07:33:50.469Z",
   "source": "Zod schema"
 }

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-09-12T18:14:42.772Z",
+  "generatedAt": "2025-09-18T07:33:50.470Z",
   "source": "Zod schema"
 }

package/src/components/_internal/base-menu.css

@@ -51,7 +51,7 @@
   box-sizing: border-box;
 
   :where(.rt-BaseMenuContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) & {
-    padding-right: var(--space-3);
+    padding-inline-end: var(--space-3);
   }
 }
 
@@ -62,8 +62,8 @@
   min-height: var(--base-menu-item-height);
   padding-top: var(--base-menu-item-padding-y);
   padding-bottom: var(--base-menu-item-padding-y);
-  padding-left: var(--base-menu-item-padding-left);
-  padding-right: var(--base-menu-item-padding-right);
+  padding-inline-start: var(--base-menu-item-padding-left);
+  padding-inline-end: var(--base-menu-item-padding-right);
   box-sizing: border-box;
   position: relative;
   outline: none;
@@ -95,19 +95,19 @@
 .rt-BaseMenuShortcut {
   display: flex;
   align-items: center;
-  margin-left: auto;
-  padding-left: var(--space-4);
-  margin-right: calc(-2px * var(--scaling)); /* Pulls closer to edge */
+  margin-inline-start: auto;
+  padding-inline-start: var(--space-4);
+  margin-inline-end: calc(-2px * var(--scaling)); /* Pulls closer to edge */
 }
 
 .rt-BaseMenuSubTriggerIcon {
   color: var(--gray-12);
-  margin-right: calc(-2px * var(--scaling));
+  margin-inline-end: calc(-2px * var(--scaling));
 }
 
 .rt-BaseMenuItemIndicator {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   width: var(--base-menu-item-padding-left);
   display: inline-flex;
   align-items: center;
@@ -118,8 +118,8 @@
   height: 1px;
   margin-top: var(--space-2);
   margin-bottom: var(--space-2);
-  margin-left: var(--base-menu-item-padding-left);
-  margin-right: var(--base-menu-item-padding-right);
+  margin-inline-start: var(--base-menu-item-padding-left);
+  margin-inline-end: var(--base-menu-item-padding-right);
 }
 
 .rt-BaseMenuLabel {
@@ -128,8 +128,8 @@
   min-height: var(--base-menu-item-height);
   padding-top: var(--base-menu-item-padding-y);
   padding-bottom: var(--base-menu-item-padding-y);
-  padding-left: var(--base-menu-item-padding-left);
-  padding-right: var(--base-menu-item-padding-right);
+  padding-inline-start: var(--base-menu-item-padding-left);
+  padding-inline-end: var(--base-menu-item-padding-right);
   box-sizing: border-box;
   color: var(--gray-a10);
   user-select: none;
@@ -165,7 +165,7 @@
       --base-menu-content-padding: var(--space-2);
       --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
       --base-menu-item-padding-right: var(--space-2);
-      --base-menu-item-padding-y: var(--space-2);
+      --base-menu-item-padding-y: var(--space-1);
       --base-menu-item-height: var(--space-5);
       border-radius: var(--radius-3);
 
@@ -188,7 +188,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
-        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
+        padding-inline-start: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
       }
 
       & :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
@@ -209,7 +209,7 @@
       --base-menu-content-padding: var(--space-3);
       --base-menu-item-padding-left: var(--space-3);
       --base-menu-item-padding-right: var(--space-3);
-      --base-menu-item-padding-y: var(--space-2);
+      --base-menu-item-padding-y: var(--space-1);
       --base-menu-item-height: var(--space-6);
       border-radius: var(--radius-5);
 
@@ -254,7 +254,7 @@
       --base-menu-item-padding-left: var(--space-3);
       --base-menu-item-padding-right: var(--space-3);
       --base-menu-item-padding-y: var(--space-2);
-      --base-menu-item-height: var(--space-6);
+      --base-menu-item-height: var(--space-7);
       border-radius: var(--radius-6);
 
       & :where(.rt-BaseMenuItem) {

package/src/components/_internal/base-sidebar-menu.css

@@ -16,7 +16,7 @@
   min-height: 0;
 
   :where(.rt-SidebarContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) & {
-    padding-right: var(--space-3);
+    padding-inline-end: var(--space-3);
   }
 }
 
@@ -33,8 +33,8 @@
   min-height: var(--base-menu-item-height);
   padding-top: var(--base-menu-item-padding-y);
   padding-bottom: var(--base-menu-item-padding-y);
-  padding-left: var(--base-menu-item-padding-left);
-  padding-right: var(--base-menu-item-padding-right);
+  padding-inline-start: var(--base-menu-item-padding-left);
+  padding-inline-end: var(--base-menu-item-padding-right);
   box-sizing: border-box;
   position: relative;
   outline: none;
@@ -42,11 +42,14 @@
   background: none;
   border: none;
   width: 100%;
-  text-align: left;
+  text-align: start;
   /* No default border radius - inherited from size-specific rules */
 
-  /* Transitions - inherit from base menu */
-  transition: var(--transition-menu);
+  /* Step 3: restrict to paint-only transitions to avoid Chrome compositing nudge */
+  transition:
+    background-color var(--motion-duration-micro) var(--motion-ease-standard),
+    color var(--motion-duration-small) var(--motion-ease-standard),
+    font-weight var(--motion-duration-small) var(--motion-ease-standard);
 
   /* Fix sticky text highlighting after selection in Firefox */
   user-select: none;
@@ -146,14 +149,14 @@
 }
 
 .rt-SidebarMenuSubList {
-  padding-left: var(--space-4);
-  border-left: 1px solid var(--gray-a5);
-  margin-left: var(--space-3);
+  padding-inline-start: var(--space-4);
+  border-inline-start: 1px solid var(--gray-a5);
+  margin-inline-start: var(--space-3);
 }
 
 /* Sub-menu items have consistent heights based on size - match dropdown menu exactly */
 :where(.rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
-  padding-left: var(--space-3);
+  padding-inline-start: var(--space-3);
   padding-top: calc(var(--space-1) * 0.75);
   padding-bottom: calc(var(--space-1) * 0.75);
   min-height: var(--space-5); /* 20px */
@@ -161,10 +164,10 @@
 }
 
 :where(.rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
-  padding-left: var(--space-3);
+  padding-inline-start: var(--space-3);
   padding-top: var(--space-1);
   padding-bottom: var(--space-1);
-  min-height: var(--space-6); /* 24px */
+  min-height: var(--space-6); /* 32px */
   font-size: var(--font-size-2);
 }
 
@@ -175,8 +178,8 @@
   min-height: var(--base-menu-item-height);
   padding-top: var(--base-menu-item-padding-y);
   padding-bottom: var(--base-menu-item-padding-y);
-  padding-left: var(--base-menu-item-padding-left);
-  padding-right: var(--base-menu-item-padding-right);
+  padding-inline-start: var(--base-menu-item-padding-left);
+  padding-inline-end: var(--base-menu-item-padding-right);
   box-sizing: border-box;
   color: var(--gray-a10);
   user-select: none;
@@ -192,27 +195,27 @@
 .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
   /* Use base menu padding tokens */
   :where(.rt-SidebarContent.rt-r-size-1) & {
-    padding-right: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
+    padding-inline-end: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
   }
 
   :where(.rt-SidebarContent.rt-r-size-2) & {
-    padding-right: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
+    padding-inline-end: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
   }
 }
 
 .rt-SidebarMenuShortcut {
   display: flex;
   align-items: center;
-  margin-left: auto;
-  padding-left: var(--space-4);
+  margin-inline-start: auto;
+  padding-inline-start: var(--space-4);
   color: var(--gray-a11);
 }
 
 .rt-SidebarMenuBadge {
   display: flex;
   align-items: center;
-  margin-left: auto;
-  padding-left: var(--space-2);
+  margin-inline-start: auto;
+  padding-inline-start: var(--space-2);
 }
 
 /* Add balanced spacing for sidebar menu items while preserving base menu border radius */

package/src/components/_internal/base-sidebar.css

@@ -78,6 +78,10 @@
   box-shadow: none !important;
   border-radius: 0 !important;
 
+  /* Step 2: stabilize text rasterization to avoid Chrome AA flicker */
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+
   /* Add gap between groups using flex */
   /* stylelint-disable-next-line selector-max-specificity */
   & .rt-BaseMenuViewport {
@@ -99,6 +103,15 @@
     flex-direction: column;
     min-height: 0;
   }
+
+  /* Step 1: promote menu viewport to its own layer (Chrome jitter test) */
+  & :where(.rt-BaseMenuViewport) {
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    will-change: transform;
+    /* Step 4: isolate painting to prevent cross-layer nudges */
+    contain: paint;
+  }
 }
 
 /* Sidebar Footer */

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

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import * as Sheet from '../sheet.js';
 import { VisuallyHidden } from '../visually-hidden.js';
 import { useShell } from '../shell.context.js';
-import { useResponsivePresentation } from '../shell.hooks.js';
+import { useResponsivePresentation, useResponsiveValue } from '../shell.hooks.js';
 import { PaneResizeContext } from './shell-resize.js';
 import { BottomHandle, PaneHandle } from './shell-handles.js';
 import { BREAKPOINTS } from '../shell.types.js';
@@ -11,9 +11,7 @@ import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation
 
 interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
   presentation?: ResponsivePresentation;
-  mode?: PaneMode;
-  defaultMode?: any;
-  onModeChange?: (mode: PaneMode) => void;
+  // legacy mode removed
   expandedSize?: number;
   minSize?: number;
   maxSize?: number;
@@ -32,16 +30,32 @@ interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
   persistence?: PaneSizePersistence;
 }
 
-type BottomComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof BottomHandle };
+type BottomOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };
+type BottomControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; defaultOpen?: never };
+type BottomUncontrolledProps = { defaultOpen?: boolean; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; open?: never };
+type BottomSizeControlledProps = { size: number | string; defaultSize?: never };
+type BottomSizeUncontrolledProps = { defaultSize?: number | string; size?: never };
+type BottomSizeChangeMeta = { reason: 'init' | 'resize' | 'controlled' };
+type BottomPublicProps = PaneProps &
+  (BottomControlledProps | BottomUncontrolledProps) &
+  (BottomSizeControlledProps | BottomSizeUncontrolledProps) & {
+    onSizeChange?: (size: number, meta: BottomSizeChangeMeta) => void;
+    sizeUpdate?: 'throttle' | 'debounce';
+    sizeUpdateMs?: number;
+  };
 
-export const Bottom = React.forwardRef<HTMLDivElement, PaneProps>(
+type BottomComponent = React.ForwardRefExoticComponent<BottomPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof BottomHandle };
+
+export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>(
   (
     {
       className,
       presentation = 'fixed',
-      mode,
-      defaultMode = 'collapsed',
-      onModeChange,
+      // removed legacy props
+      // new API
+      defaultOpen,
+      open,
+      onOpenChange,
       expandedSize = 200,
       minSize = 100,
       maxSize = 400,
@@ -80,58 +94,107 @@ export const Bottom = React.forwardRef<HTMLDivElement, PaneProps>(
     const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === BottomHandle);
     const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === BottomHandle));
 
-    const resolveResponsiveMode = React.useCallback((): PaneMode => {
-      if (typeof defaultMode === 'string') return defaultMode as PaneMode;
-      const dm = defaultMode as Partial<Record<Breakpoint, PaneMode>> | undefined;
-      if (dm && dm[shell.currentBreakpoint as Breakpoint]) {
-        return dm[shell.currentBreakpoint as Breakpoint] as PaneMode;
+    // Throttled/debounced emitter for onSizeChange
+    const emitSizeChange = React.useMemo(() => {
+      const cb = (props as any).onSizeChange as undefined | ((s: number, meta: BottomSizeChangeMeta) => void);
+      const strategy = (props as any).sizeUpdate as undefined | 'throttle' | 'debounce';
+      const ms = (props as any).sizeUpdateMs ?? 50;
+      if (!cb) return () => {};
+      if (strategy === 'debounce') {
+        let t: any = null;
+        return (s: number, meta: BottomSizeChangeMeta) => {
+          if (t) clearTimeout(t);
+          t = setTimeout(() => {
+            cb(s, meta);
+          }, ms);
+        };
       }
-      const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;
-      const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);
-      const startIdx = order.indexOf(shell.currentBreakpoint as Breakpoint);
-      for (let i = startIdx + 1; i < order.length; i++) {
-        const bp = order[i];
-        if (dm && dm[bp]) {
-          return dm[bp] as PaneMode;
-        }
+      if (strategy === 'throttle') {
+        let last = 0;
+        return (s: number, meta: BottomSizeChangeMeta) => {
+          const now = Date.now();
+          if (now - last >= ms) {
+            last = now;
+            cb(s, meta);
+          }
+        };
       }
-      return 'collapsed';
-    }, [defaultMode, shell.currentBreakpoint]);
+      return (s: number, meta: BottomSizeChangeMeta) => cb(s, meta);
+    }, [(props as any).onSizeChange, (props as any).sizeUpdate, (props as any).sizeUpdateMs]);
 
     const didInitRef = React.useRef(false);
+    const didInitFromDefaultOpenRef = React.useRef(false);
+    const resolvedDefaultOpen = useResponsiveValue(defaultOpen as any);
     React.useEffect(() => {
       if (didInitRef.current) return;
+      if (!shell.currentBreakpointReady) return;
       didInitRef.current = true;
-      if (mode === undefined) {
-        const initial = resolveResponsiveMode();
-        if (shell.bottomMode !== initial) shell.setBottomMode(initial);
+      if (typeof open === 'undefined' && typeof defaultOpen !== 'undefined') {
+        const initial = Boolean(resolvedDefaultOpen);
+        shell.setBottomMode(initial ? 'expanded' : 'collapsed');
+        didInitFromDefaultOpenRef.current = true;
       }
-    }, []);
+    }, [shell.currentBreakpointReady, open, defaultOpen, resolvedDefaultOpen]);
 
-    const lastBottomBpRef = React.useRef<Breakpoint | null>(null);
-    const lastResolvedBottomRef = React.useRef<PaneMode | null>(null);
-    React.useEffect(() => {
-      if (mode !== undefined) return;
-      if (!shell.currentBreakpointReady) return;
-      if (lastBottomBpRef.current === shell.currentBreakpoint) return;
-      lastBottomBpRef.current = shell.currentBreakpoint as Breakpoint;
-      const next = resolveResponsiveMode();
-      if (lastResolvedBottomRef.current === next) return;
-      lastResolvedBottomRef.current = next;
-      if (next !== shell.bottomMode) shell.setBottomMode(next);
-    }, [mode, shell.currentBreakpoint, shell.currentBreakpointReady, resolveResponsiveMode, shell.bottomMode, shell.setBottomMode]);
+    // Dev guards
+    const wasControlledRef = React.useRef<boolean | null>(null);
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof open !== 'undefined' && typeof defaultOpen !== 'undefined') {
+        // eslint-disable-next-line no-console
+        console.error('Shell.Bottom: Do not pass both `open` and `defaultOpen`. Choose one.');
+      }
+      if (typeof (props as any).size !== 'undefined' && typeof (props as any).defaultSize !== 'undefined') {
+        // eslint-disable-next-line no-console
+        console.error('Shell.Bottom: Do not pass both `size` and `defaultSize`. Choose one.');
+      }
+    }
 
     React.useEffect(() => {
-      if (mode !== undefined && shell.bottomMode !== mode) {
-        shell.setBottomMode(mode);
+      const isControlled = typeof open !== 'undefined';
+      if (wasControlledRef.current === null) {
+        wasControlledRef.current = isControlled;
+        return;
+      }
+      if (wasControlledRef.current !== isControlled) {
+        // eslint-disable-next-line no-console
+        console.warn('Shell.Bottom: Switching between controlled and uncontrolled `open` is not supported.');
+        wasControlledRef.current = isControlled;
       }
-    }, [mode, shell]);
+    }, [open]);
+
+    // Controlled sync (responsive handled below)
+    React.useEffect(() => {
+      if (typeof open === 'undefined') return;
+      shell.setBottomMode(open ? 'expanded' : 'collapsed');
+    }, [open]);
+
+    const responsiveNotifiedRef = React.useRef(false);
+
+    // Controlled responsive open
+    const resolvedOpen = useResponsiveValue(open);
+    React.useEffect(() => {
+      if (typeof resolvedOpen === 'undefined') return;
+      const shouldExpand = Boolean(resolvedOpen);
+      shell.setBottomMode(shouldExpand ? 'expanded' : 'collapsed');
+    }, [resolvedOpen]);
 
+    const initNotifiedRef = React.useRef(false);
+    const lastBottomModeRef = React.useRef<PaneMode | null>(null);
     React.useEffect(() => {
-      if (mode === undefined) {
-        onModeChange?.(shell.bottomMode);
+      if (!initNotifiedRef.current && typeof open === 'undefined' && defaultOpen && shell.bottomMode === 'expanded') {
+        onOpenChange?.(true, { reason: 'init' });
+        initNotifiedRef.current = true;
       }
-    }, [shell.bottomMode, mode, onModeChange]);
+      if (typeof open === 'undefined') {
+        if (lastBottomModeRef.current !== null && lastBottomModeRef.current !== shell.bottomMode) {
+          if (!responsiveNotifiedRef.current) {
+            onOpenChange?.(shell.bottomMode === 'expanded', { reason: 'toggle' });
+          }
+          responsiveNotifiedRef.current = false;
+        }
+        lastBottomModeRef.current = shell.bottomMode;
+      }
+    }, [shell.bottomMode, open, defaultOpen, onOpenChange]);
 
     React.useEffect(() => {
       if (shell.bottomMode === 'expanded') {
@@ -194,6 +257,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, PaneProps>(
             onResizeStart,
             onResizeEnd: (size) => {
               onResizeEnd?.(size);
+              emitSizeChange(size, { reason: 'resize' });
               persistenceAdapter?.save?.(size);
             },
             target: 'bottom',
@@ -209,6 +273,69 @@ export const Bottom = React.forwardRef<HTMLDivElement, PaneProps>(
         </PaneResizeContext.Provider>
       ) : null;
 
+    // Strip control/size props from DOM spread (moved above overlay return to keep hook order consistent)
+    const {
+      defaultOpen: _bottomDefaultOpenIgnored,
+      open: _bottomOpenIgnored,
+      onOpenChange: _bottomOnOpenChangeIgnored,
+      size: _bottomSizeIgnored,
+      defaultSize: _bottomDefaultSizeIgnored,
+      onSizeChange: _bottomOnSizeChangeIgnored,
+      sizeUpdate: _szu,
+      sizeUpdateMs: _szums,
+      ...bottomDomProps
+    } = props as any;
+
+    // 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;
+    }, []);
+
+    // Apply defaultSize on mount when uncontrolled (moved above overlay return)
+    React.useEffect(() => {
+      if (!localRef.current) return;
+      if (typeof (props as any).size === 'undefined' && typeof (props as any).defaultSize !== 'undefined') {
+        const px = normalizeToPx((props as any).defaultSize);
+        if (typeof px === 'number' && Number.isFinite(px)) {
+          const minPx = typeof minSize === 'number' ? minSize : undefined;
+          const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
+          const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));
+          localRef.current.style.setProperty('--bottom-size', `${clamped}px`);
+          emitSizeChange(clamped, { reason: 'init' });
+        }
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Controlled size sync (moved above overlay return)
+    React.useEffect(() => {
+      if (!localRef.current) return;
+      if (typeof (props as any).size === 'undefined') return;
+      const px = normalizeToPx((props as any).size);
+      if (typeof px === 'number' && Number.isFinite(px)) {
+        const minPx = typeof minSize === 'number' ? minSize : undefined;
+        const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
+        const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));
+        localRef.current.style.setProperty('--bottom-size', `${clamped}px`);
+        emitSizeChange(clamped, { reason: 'controlled' });
+      }
+    }, [(props as any).size, minSize, maxSize, normalizeToPx, emitSizeChange]);
+
     if (isOverlay) {
       const open = shell.bottomMode === 'expanded';
       return (
@@ -225,13 +352,13 @@ export const Bottom = React.forwardRef<HTMLDivElement, PaneProps>(
 
     return (
       <div
-        {...props}
+        {...bottomDomProps}
         ref={setRef}
         className={classNames('rt-ShellBottom', className)}
         data-mode={shell.bottomMode}
         data-peek={shell.peekTarget === 'bottom' || undefined}
-        data-presentation={resolvedPresentation}
-        data-open={(isStacked && isExpanded) || undefined}
+        data-presentation={shell.currentBreakpointReady ? resolvedPresentation : undefined}
+        data-open={(shell.currentBreakpointReady && isStacked && isExpanded) || undefined}
         style={{
           ...style,
           ['--bottom-size' as any]: `${expandedSize}px`,