@kushagradhawan/kookie-ui 0.1.49 → 0.1.51

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

@@ -10,14 +10,13 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding-bottom: var(--base-menu-content-padding);
   box-sizing: border-box;
   list-style: none;
   margin: 0;
   min-height: 0;
 
   :where(.rt-SidebarContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) & {
-    padding-right: var(--space-3);
+    padding-inline-end: var(--space-3);
   }
 }
 
@@ -34,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;
@@ -43,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;
@@ -147,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 */
@@ -162,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);
 }
 
@@ -176,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;
@@ -193,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,17 @@
   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 {
+    /* gap: var(--base-menu-content-padding); */
+    gap: var(--space-5);
+  }
+
   /* Ensure ScrollArea takes full height within SidebarContent */
   & :where(.rt-ScrollAreaRoot) {
     flex: 1;
@@ -92,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`,

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

@@ -84,8 +84,16 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
             handleEl.releasePointerCapture(pointerId);
           } catch {}
           window.removeEventListener('pointermove', handleMove as any);
+          document.removeEventListener('pointermove', handleMove as any);
+          window.removeEventListener('mousemove', handleMove as any);
+          document.removeEventListener('mousemove', handleMove as any);
+          handleEl.removeEventListener('pointermove', handleMove as any);
           window.removeEventListener('pointerup', handleUp as any);
+          document.removeEventListener('pointerup', handleUp as any);
+          window.removeEventListener('mouseup', handleUp as any);
+          document.removeEventListener('mouseup', handleUp as any);
           window.removeEventListener('pointercancel', handleUp as any);
+          document.removeEventListener('pointercancel', handleUp as any);
           window.removeEventListener('keydown', handleKey as any);
           handleEl.removeEventListener('lostpointercapture', handleUp as any);
           container.removeAttribute('data-resizing');
@@ -120,8 +128,17 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
           }
         };
         window.addEventListener('pointermove', handleMove as any);
+        document.addEventListener('pointermove', handleMove as any);
+        // Fallbacks for environments that don't fully support PointerEvent on window
+        window.addEventListener('mousemove', handleMove as any);
+        document.addEventListener('mousemove', handleMove as any);
+        handleEl.addEventListener('pointermove', handleMove as any);
         window.addEventListener('pointerup', handleUp as any);
+        document.addEventListener('pointerup', handleUp as any);
+        window.addEventListener('mouseup', handleUp as any);
+        document.addEventListener('mouseup', handleUp as any);
         window.addEventListener('pointercancel', handleUp as any);
+        document.addEventListener('pointercancel', handleUp as any);
         window.addEventListener('keydown', handleKey as any);
         handleEl.addEventListener('lostpointercapture', handleUp as any);
         activeCleanupRef.current = cleanup;
@@ -132,13 +149,20 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
       onKeyDown={(e) => {
         if (!containerRef.current) return;
         const container = containerRef.current;
-        const current = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);
+        const rawCurrent = getComputedStyle(container).getPropertyValue(cssVarName);
+        const parsedCurrent = Number.parseFloat(rawCurrent.trim());
+        const current = Number.isFinite(parsedCurrent) ? parsedCurrent : defaultSize;
         const clamp = (v: number) => Math.min(Math.max(v, minSize), maxSize);
         const step = e.shiftKey ? 32 : 8;
         let delta = 0;
         if (orientation === 'vertical') {
-          if (e.key === 'ArrowRight') delta = step;
-          else if (e.key === 'ArrowLeft') delta = -step;
+          const docDir = typeof document !== 'undefined' ? document.dir : undefined;
+          const cssDir = getComputedStyle(container).direction;
+          const hasRtlAncestor = !!(container.closest && container.closest('[dir="rtl"]'));
+          const isRtl = docDir === 'rtl' || cssDir === 'rtl' || hasRtlAncestor;
+          if (e.key === 'ArrowRight')
+            delta = isRtl ? -step : step; // inline-end
+          else if (e.key === 'ArrowLeft') delta = isRtl ? step : -step; // inline-start
         } else {
           if (e.key === 'ArrowDown') delta = step;
           else if (e.key === 'ArrowUp') delta = -step;
@@ -166,7 +190,8 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
         if (delta !== 0) {
           e.preventDefault();
           onResizeStart?.(current);
-          const next = clamp(current + (edge === 'start' && orientation === 'vertical' ? -delta : delta));
+          const signedDelta = orientation === 'vertical' ? (edge === 'start' ? -delta : delta) : delta;
+          const next = clamp(current + signedDelta);
           container.style.setProperty(cssVarName, `${next}px`);
           (e.currentTarget as HTMLElement).setAttribute('aria-valuenow', String(next));
           onResize?.(next);