entangle-ui 0.8.2 → 0.10.0

package/dist/esm/components/layout/Accordion/AccordionTrigger.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
-import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
+import { ChevronRightIcon } from '../../Icons/ChevronRightIcon.js';
 import { cx } from '../../../utils/cx.js';
+import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
 import { chevronExpanded, chevronCollapsed, chevronStyle, iconArea, actionsArea, triggerButton } from './Accordion.css.js';
 
 const CHEVRON_SIZE_MAP = {
@@ -10,8 +11,6 @@ const CHEVRON_SIZE_MAP = {
     md: { chevronSize: 12 },
     lg: { chevronSize: 14 },
 };
-// --- Chevron icon ---
-const ChevronRightIcon = ({ size }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M4.5 3L7.5 6L4.5 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 // --- Component ---
 const AccordionTrigger = ({ children, icon, actions, indicator, className, style, testId, ref, ...rest }) => {
     const { toggleItem, variant, size, accordionId } = useAccordionContext();
@@ -24,14 +23,19 @@ const AccordionTrigger = ({ children, icon, actions, indicator, className, style
             toggleItem(value);
         }
     }, [isDisabled, toggleItem, value]);
+    // Prevent clicks/keypresses originating from the actions area (which hosts
+    // its own interactive controls) from bubbling up and toggling the accordion.
     const handleActionsClick = useCallback((e) => {
         e.stopPropagation();
     }, []);
+    const handleActionsKeyDown = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
     const showIndicator = indicator !== null;
     return (jsxs("button", { ref: ref, type: "button", id: triggerId, "aria-expanded": isExpanded, "aria-controls": contentId, "aria-disabled": isDisabled || undefined, disabled: isDisabled, onClick: handleClick, className: cx(triggerButton({ variant, size, disabled: isDisabled }), className), style: style, "data-testid": testId, ...rest, children: [showIndicator && (jsx("span", { className: cx(chevronStyle, isExpanded ? chevronExpanded : chevronCollapsed), style: {
                     width: `${sizeConfig.chevronSize}px`,
                     height: `${sizeConfig.chevronSize}px`,
-                }, children: indicator ?? jsx(ChevronRightIcon, { size: sizeConfig.chevronSize }) })), icon && jsx("span", { className: iconArea, children: icon }), jsx("span", { children: children }), actions && (jsx("span", { className: actionsArea, onClick: handleActionsClick, children: actions }))] }));
+                }, children: indicator ?? (jsx(ChevronRightIcon, { size: sizeConfig.chevronSize, decorative: true })) })), icon && jsx("span", { className: iconArea, children: icon }), jsx("span", { children: children }), actions && (jsx("span", { className: actionsArea, role: "presentation", onClick: handleActionsClick, onKeyDown: handleActionsKeyDown, children: actions }))] }));
 };
 AccordionTrigger.displayName = 'AccordionTrigger';
 

package/dist/esm/components/layout/Accordion/AccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTrigger.js","sources":["../../../../../../src/components/layout/Accordion/AccordionTrigger.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAqBA;AACE;AACA;AACA;;AAGF;AAEA;AAkBA;AAEO;AAWL;;AAEA;AAEA;AACA;AAEA;;;;;AAMA;;;AAIA;AAEA;AAyBU;AACA;;AAeZ;AAEA;;"}
+{"version":3,"file":"AccordionTrigger.js","sources":["../../../../../../src/components/layout/Accordion/AccordionTrigger.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAyBA;AACE;AACA;AACA;;AAGF;AAEO;AAWL;;AAEA;AAEA;AACA;AAEA;;;;;;;AAQA;;;AAIA;;;AAIA;AAEA;AAyBU;AACA;;AAsBZ;AAEA;;"}

package/dist/esm/components/layout/Card/Card.css.js

@@ -0,0 +1,18 @@
+import './../../../assets/src/components/layout/Card/Card.css.ts.vanilla-Ducn1gUX.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var cardBodyStyle = 'Card_cardBodyStyle__50gmukh';
+var cardFooterStyle = createRuntimeFn({defaultClassName:'Card_cardFooterStyle__50gmuki',variantClassNames:{align:{left:'Card_cardFooterStyle_align_left__50gmukj',center:'Card_cardFooterStyle_align_center__50gmukk',right:'Card_cardFooterStyle_align_right__50gmukl','space-between':'Card_cardFooterStyle_align_space-between__50gmukm'}},defaultVariants:{align:'right'},compoundVariants:[]});
+var cardHeaderLeadingStyle = 'Card_cardHeaderLeadingStyle__50gmuka';
+var cardHeaderStyle = 'Card_cardHeaderStyle__50gmuk9';
+var cardHeaderSubtitleStyle = 'Card_cardHeaderSubtitleStyle__50gmukd';
+var cardHeaderTextStyle = 'Card_cardHeaderTextStyle__50gmukb';
+var cardHeaderTitleStyle = 'Card_cardHeaderTitleStyle__50gmukc';
+var cardHeaderTrailingStyle = 'Card_cardHeaderTrailingStyle__50gmuke';
+var cardMediaAspectVar = 'var(--cardMediaAspectVar__50gmuk0)';
+var cardMediaImageStyle = 'Card_cardMediaImageStyle__50gmukg';
+var cardMediaStyle = 'Card_cardMediaStyle__50gmukf';
+var cardRecipe = createRuntimeFn({defaultClassName:'Card_cardRecipe__50gmuk1',variantClassNames:{variant:{outlined:'Card_cardRecipe_variant_outlined__50gmuk2',filled:'Card_cardRecipe_variant_filled__50gmuk3',elevated:'Card_cardRecipe_variant_elevated__50gmuk4'},interactive:{true:'Card_cardRecipe_interactive_true__50gmuk5'},selected:{true:'Card_cardRecipe_selected_true__50gmuk6'},disabled:{true:'Card_cardRecipe_disabled_true__50gmuk7'}},defaultVariants:{variant:'outlined'},compoundVariants:[[{variant:'elevated',interactive:true},'Card_cardRecipe_compound_0__50gmuk8']]});
+
+export { cardBodyStyle, cardFooterStyle, cardHeaderLeadingStyle, cardHeaderStyle, cardHeaderSubtitleStyle, cardHeaderTextStyle, cardHeaderTitleStyle, cardHeaderTrailingStyle, cardMediaAspectVar, cardMediaImageStyle, cardMediaStyle, cardRecipe };
+//# sourceMappingURL=Card.css.js.map

package/dist/esm/components/layout/Card/Card.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/layout/Card/Card.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useCallback } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { cardRecipe, cardHeaderLeadingStyle, cardHeaderTextStyle, cardHeaderTitleStyle, cardHeaderSubtitleStyle, cardHeaderTrailingStyle, cardHeaderStyle, cardMediaImageStyle, cardMediaAspectVar, cardMediaStyle, cardBodyStyle, cardFooterStyle } from './Card.css.js';
+
+/**
+ * A bounded surface representing a single semantic unit (item, summary,
+ * preview). Distinct from `Paper` (a generic surface): a Card has a
+ * header / media / body / footer convention and can be made interactive.
+ *
+ * @example
+ * ```tsx
+ * <Card variant="elevated" onClick={open}>
+ *   <Card.Header
+ *     title="Asset"
+ *     subtitle="Updated 2h ago"
+ *     trailing={<IconButton icon={<MoreIcon />} />}
+ *   />
+ *   <Card.Media src="/preview.png" alt="Preview" />
+ *   <Card.Body>Description...</Card.Body>
+ *   <Card.Footer>
+ *     <Button>Open</Button>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ */
+const CardRoot = ({ variant = 'outlined', onClick, selected = false, disabled = false, className, style, testId, children, ref, ...rest }) => {
+    const interactive = onClick !== undefined && !disabled;
+    const handleKeyDown = useCallback((event) => {
+        if (!interactive)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onClick(event);
+        }
+    }, [interactive, onClick]);
+    return (jsx("div", { ref: ref, className: cx(cardRecipe({
+            variant,
+            interactive: interactive || undefined,
+            selected: selected || undefined,
+            disabled: disabled || undefined,
+        }), className), style: style, "data-testid": testId, onClick: interactive ? onClick : undefined, onKeyDown: interactive ? handleKeyDown : undefined, role: interactive ? 'button' : undefined, tabIndex: interactive ? 0 : undefined, "aria-disabled": disabled || undefined, "aria-pressed": interactive && selected ? true : undefined, ...rest, children: children }));
+};
+CardRoot.displayName = 'Card';
+const CardHeader = ({ title, subtitle, leading, trailing, children, className, style, testId, ref, ...rest }) => (jsxs("div", { ref: ref, className: cx(cardHeaderStyle, className), style: style, "data-testid": testId, ...rest, children: [leading && jsx("div", { className: cardHeaderLeadingStyle, children: leading }), jsx("div", { className: cardHeaderTextStyle, children: children ?? (jsxs(Fragment, { children: [title && jsx("h3", { className: cardHeaderTitleStyle, children: title }), subtitle && jsx("p", { className: cardHeaderSubtitleStyle, children: subtitle })] })) }), trailing && jsx("div", { className: cardHeaderTrailingStyle, children: trailing })] }));
+CardHeader.displayName = 'Card.Header';
+const CardMedia = ({ src, alt, aspectRatio = 16 / 9, className, style, testId, children, ref, ...rest }) => (jsx("div", { ref: ref, className: cx(cardMediaStyle, className), style: {
+        ...assignInlineVars({ [cardMediaAspectVar]: String(aspectRatio) }),
+        ...style,
+    }, "data-testid": testId, ...rest, children: src ? (jsx("img", { className: cardMediaImageStyle, src: src, alt: alt ?? '' })) : (children) }));
+CardMedia.displayName = 'Card.Media';
+const CardBody = ({ className, style, testId, children, ref, ...rest }) => (jsx("div", { ref: ref, className: cx(cardBodyStyle, className), style: style, "data-testid": testId, ...rest, children: children }));
+CardBody.displayName = 'Card.Body';
+const CardFooter = ({ align = 'right', className, style, testId, children, ref, ...rest }) => (jsx("div", { ref: ref, className: cx(cardFooterStyle({ align }), className), style: style, "data-testid": testId, ...rest, children: children }));
+CardFooter.displayName = 'Card.Footer';
+const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Media: CardMedia,
+    Body: CardBody,
+    Footer: CardFooter,
+});
+
+export { Card };
+//# sourceMappingURL=Card.js.map

package/dist/esm/components/layout/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../../../src/components/layout/Card/Card.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAqCA;;;;;;;;;;;;;;;;;;;;AAoBG;AACH;;AAcE;AAEI;;AACA;;;;AAIF;;;;;;AAaK;AAgBT;AAEA;AAEA;AAgCA;AAEA;AAeM;AACA;AACD;AAYL;AAEA;AAmBA;AAEA;AAoBA;;AAGE;AACA;AACA;AACA;AACD;;"}

package/dist/esm/components/layout/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../../../../src/components/layout/Divider/Divider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAWA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;;AAC6B;;AACM;AACjC;AACF;AAEA;;;;;;;;;;;;;AAaG;AACI;AAYH;AACA;;;AAKA;;;AAgBA;AAWF;AAGF;;"}
+{"version":3,"file":"Divider.js","sources":["../../../../../../src/components/layout/Divider/Divider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;;AAC6B;;AACM;AACjC;AACF;AAEA;;;;;;;;;;;;;AAaG;AACI;AAYH;AACA;;;AAKA;;;AAgBA;AAWF;AAGF;;"}

package/dist/esm/components/layout/Flex/Flex.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { cx } from '../../../utils/cx.js';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { basisVar, shrinkVar, growVar, gapVar, flexRecipe } from './Flex.css.js';
 
 /** Base spacing unit in px */

package/dist/esm/components/layout/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../../../../src/components/layout/Flex/Flex.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkMA;AACA;AAEA;;AAEG;AACH;AACE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACI;AA0BL;AAEA;AACE;;AAEE;AACA;;;;AAIA;AACI;AAED;;;AAGH;;AAEF;;;;AAKF;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAQ;;;;;;;;;AAcD;AAWT;AAEA;;"}
+{"version":3,"file":"Flex.js","sources":["../../../../../../src/components/layout/Flex/Flex.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAqMA;AACA;AAEA;;AAEG;AACH;AACE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACI;AA0BL;AAEA;AACE;;AAEE;AACA;;;;AAIA;AACI;AAED;;;AAGH;;AAEF;;;;AAKF;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAQ;;;;;;;;;AAcD;AAWT;AAEA;;"}

package/dist/esm/components/layout/Grid/Grid.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { cx } from '../../../utils/cx.js';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { columnsVar, gapVar, gridContainer, gridItem } from './Grid.css.js';
 
 /** Base spacing unit in px */

package/dist/esm/components/layout/ListItem/ListItem.js

@@ -28,7 +28,7 @@ const ListItem = /*#__PURE__*/ React.memo(({ onClick, leading, trailing, selecte
             return;
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
-            onClick?.(event);
+            onClick(event);
         }
     }, [clickable, onClick]);
     return (jsxs("div", { ref: ref, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, "aria-disabled": disabled || undefined, "data-disabled": disabled ? 'true' : 'false', "data-selected": selected ? 'true' : undefined, "data-active": active ? 'true' : undefined, onClick: clickable ? onClick : undefined, onKeyDown: handleKeyDown, className: cx(listItemRecipe({

package/dist/esm/components/layout/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../../../src/components/layout/ListItem/ListItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAYA;;;;;;;;;;;;;;;;AAgBG;;;AAmBC;AAEI;;AACA;;AAEE;;AAIJ;AAIF;;;;;;AAkBO;AAYT;AAGF;;"}
+{"version":3,"file":"ListItem.js","sources":["../../../../../../src/components/layout/ListItem/ListItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAeA;;;;;;;;;;;;;;;;AAgBG;;;AAmBC;AAEI;;AACA;;;;AAIF;AAIF;;;;;;AAkBO;AAYT;AAGF;;"}

package/dist/esm/components/layout/PageHeader/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sources":["../../../../../../src/components/layout/PageHeader/PageHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAeA;;;;;;;;;;;;;;;AAeG;AACI;;AAsCL;AAGF;;"}
+{"version":3,"file":"PageHeader.js","sources":["../../../../../../src/components/layout/PageHeader/PageHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkBA;;;;;;;;;;;;;;;AAeG;AACI;;AAsCL;AAGF;;"}

package/dist/esm/components/layout/PanelSurface/PanelSurface.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useMemo, createContext, useContext } from 'react';
+import { vars } from '../../../theme/contract.css.js';
 import { cx } from '../../../utils/cx.js';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { backgroundVar, rootBordered, rootNoBorder, rootStyle, footerRecipe, bodyScrollable, bodyHidden, bodyStyle, headerActions, headerRecipe } from './PanelSurface.css.js';
-import { vars } from '../../../theme/contract.css.js';
 
 const PanelSurfaceContext = 
 /*#__PURE__*/ createContext({
@@ -17,7 +17,7 @@ const PanelSurfaceHeader = ({ children, actions, className, style, testId, ref,
 };
 PanelSurfaceHeader.displayName = 'PanelSurface.Header';
 const PanelSurfaceBody = ({ children, scroll = false, padding = 0, className, style, testId, ref, ...rest }) => {
-    const resolvedPadding = typeof padding === 'number' ? `${padding}px` : String(padding);
+    const resolvedPadding = typeof padding === 'number' ? `${padding}px` : padding;
     const mergedStyle = {
         padding: resolvedPadding,
         ...style,

package/dist/esm/components/layout/PanelSurface/PanelSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSurface.js","sources":["../../../../../../src/components/layout/PanelSurface/PanelSurface.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA0BA;AACE;AACE;AACD;AAEH;AAEA;AASE;;AAcF;AAEA;AAEA;AAUE;AAGA;AACE;AACA;;AAGF;AAWF;AAEA;AAEA;AAQE;AAEA;AAWF;AAEA;AAEA;AAWE;AAEA;AACE;;;AAGA;;;AAoBJ;AAEA;AAEO;AACL;AACA;AACA;AACD;;"}
+{"version":3,"file":"PanelSurface.js","sources":["../../../../../../src/components/layout/PanelSurface/PanelSurface.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA6BA;AACE;AACE;AACD;AAEH;AAEA;AASE;;AAcF;AAEA;AAEA;AAUE;AAGA;AACE;AACA;;AAGF;AAWF;AAEA;AAEA;AAQE;AAEA;AAWF;AAEA;AAEA;AAWE;AAEA;AACE;;;AAGA;;;AAoBJ;AAEA;AAEO;AACL;AACA;AACA;AACD;;"}

package/dist/esm/components/layout/ScrollArea/ScrollArea.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useId, useRef, useState, useCallback, useEffect } from 'react';
-import { cx } from '../../../utils/cx.js';
 import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
 import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.js';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { fadeMaskSizeVar, scrollbarPaddingVar, scrollbarWidthVar, viewportRecipe, fadeMaskVisible, fadeMaskHiddenStyle, fadeMaskTop, fadeMaskBase, fadeMaskBottom, fadeMaskLeft, fadeMaskRight, thumbDragging, thumbVertical, thumbBase, scrollbarVisible, scrollbarHidden, scrollbarVertical, thumbHorizontal, scrollbarHorizontal, rootAutoFill, rootStyle } from './ScrollArea.css.js';
 
 // --- Component ---
@@ -19,11 +19,19 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
     const [hThumbOffset, setHThumbOffset] = useState(0);
     const [hasVOverflow, setHasVOverflow] = useState(false);
     const [hasHOverflow, setHasHOverflow] = useState(false);
+    // Scroll position as a 0–100 percentage, exposed via aria-valuenow. Kept in
+    // state (updated in recalculate) so it stays reactive instead of being read
+    // from the viewport ref during render.
+    const [vScrollPercent, setVScrollPercent] = useState(0);
+    const [hScrollPercent, setHScrollPercent] = useState(0);
     // Visibility state
     const [scrollbarVisibleState, setScrollbarVisibleState] = useState(scrollbarVisibility === 'always');
     const hideTimerRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
+    // Ref drives synchronous reads in the move handler; the state mirror is used
+    // for the thumb's dragging class during render.
     const dragAxisRef = useRef(null);
+    const [dragAxis, setDragAxis] = useState(null);
     const dragStartRef = useRef({ pointerPos: 0, scrollPos: 0 });
     // Fade mask state
     const [atTop, setAtTop] = useState(true);
@@ -41,12 +49,13 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             const ratio = vp.clientHeight / vp.scrollHeight;
             const overflow = ratio < 1;
             setHasVOverflow(overflow);
+            const maxScroll = vp.scrollHeight - vp.clientHeight;
+            const scrollRatio = maxScroll > 0 ? vp.scrollTop / maxScroll : 0;
+            setVScrollPercent(Math.round(scrollRatio * 100));
             if (overflow) {
                 const trackHeight = vp.clientHeight - scrollbarPadding * 2;
                 const thumbH = Math.max(minThumbLength, ratio * trackHeight);
                 setVThumbSize(thumbH);
-                const maxScroll = vp.scrollHeight - vp.clientHeight;
-                const scrollRatio = maxScroll > 0 ? vp.scrollTop / maxScroll : 0;
                 setVThumbOffset(scrollRatio * (trackHeight - thumbH));
             }
         }
@@ -54,12 +63,13 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             const ratio = vp.clientWidth / vp.scrollWidth;
             const overflow = ratio < 1;
             setHasHOverflow(overflow);
+            const maxScroll = vp.scrollWidth - vp.clientWidth;
+            const scrollRatio = maxScroll > 0 ? vp.scrollLeft / maxScroll : 0;
+            setHScrollPercent(Math.round(scrollRatio * 100));
             if (overflow) {
                 const trackWidth = vp.clientWidth - scrollbarPadding * 2;
                 const thumbW = Math.max(minThumbLength, ratio * trackWidth);
                 setHThumbSize(thumbW);
-                const maxScroll = vp.scrollWidth - vp.clientWidth;
-                const scrollRatio = maxScroll > 0 ? vp.scrollLeft / maxScroll : 0;
                 setHThumbOffset(scrollRatio * (trackWidth - thumbW));
             }
         }
@@ -131,6 +141,7 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             return;
         setIsDragging(true);
         dragAxisRef.current = axis;
+        setDragAxis(axis);
         e.target.setPointerCapture(e.pointerId);
         if (axis === 'vertical') {
             dragStartRef.current = {
@@ -170,6 +181,7 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
     const handleThumbPointerUp = useCallback(() => {
         setIsDragging(false);
         dragAxisRef.current = null;
+        setDragAxis(null);
     }, []);
     // Track click handler
     const handleTrackClick = useCallback((axis, e) => {
@@ -186,6 +198,53 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             vp.scrollLeft = clickRatio * (vp.scrollWidth - vp.clientWidth);
         }
     }, []);
+    // Keyboard scrolling for the focusable scrollbar role, mirroring the native
+    // scrollbar interaction model (arrows step, PageUp/Down page, Home/End jump).
+    const handleTrackKeyDown = useCallback((axis, e) => {
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        const step = 40;
+        const isVertical = axis === 'vertical';
+        const page = isVertical ? vp.clientHeight : vp.clientWidth;
+        const maxScroll = isVertical
+            ? vp.scrollHeight - vp.clientHeight
+            : vp.scrollWidth - vp.clientWidth;
+        const current = isVertical ? vp.scrollTop : vp.scrollLeft;
+        let next;
+        const decKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+        const incKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+        switch (e.key) {
+            case decKey:
+                next = current - step;
+                break;
+            case incKey:
+                next = current + step;
+                break;
+            case 'PageUp':
+                next = current - page;
+                break;
+            case 'PageDown':
+                next = current + page;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = maxScroll;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        const clamped = Math.max(0, Math.min(next, maxScroll));
+        if (isVertical) {
+            vp.scrollTop = clamped;
+        }
+        else {
+            vp.scrollLeft = clamped;
+        }
+    }, []);
     // Initial measurement once the viewport is mounted.
     useEffect(() => {
         if (viewportRef.current)
@@ -202,9 +261,13 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
         const child = vp.firstElementChild;
         if (!child || typeof ResizeObserver === 'undefined')
             return;
-        const ro = new ResizeObserver(() => recalculate());
+        const ro = new ResizeObserver(() => {
+            recalculate();
+        });
         ro.observe(child);
-        return () => ro.disconnect();
+        return () => {
+            ro.disconnect();
+        };
     }, [recalculate]);
     // Cleanup timer
     useEffect(() => {
@@ -234,25 +297,30 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             : undefined),
         ...style,
     };
-    return (jsxs("div", { className: cx(rootStyle, autoFill && rootAutoFill, className), style: rootInlineStyle, "data-testid": testId, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest, children: [jsx("div", { ref: setViewportRef, id: viewportId, role: "region", tabIndex: 0, className: viewportRecipe({ direction }), onScroll: handleScroll, children: children }), fadeMask && showV && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskTop, !atTop ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-top` : undefined }), jsx("div", { className: cx(fadeMaskBase, fadeMaskBottom, !atBottom ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-bottom` : undefined })] })), fadeMask && showH && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskLeft, !atLeft ? fadeMaskVisible : fadeMaskHiddenStyle) }), jsx("div", { className: cx(fadeMaskBase, fadeMaskRight, !atRight ? fadeMaskVisible : fadeMaskHiddenStyle) })] })), showV && hasVOverflow && (jsx("div", { className: cx(scrollbarVertical, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", "aria-controls": viewportId, "aria-orientation": "vertical", "aria-valuenow": Math.round(viewportRef.current
-                    ? (viewportRef.current.scrollTop /
-                        Math.max(1, viewportRef.current.scrollHeight -
-                            viewportRef.current.clientHeight)) *
-                        100
-                    : 0), "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-v` : undefined, onClick: e => handleTrackClick('vertical', e), children: jsx("div", { className: cx(thumbBase, thumbVertical, isDragging && dragAxisRef.current === 'vertical' && thumbDragging), style: {
+    return (jsxs("div", { className: cx(rootStyle, autoFill && rootAutoFill, className), style: rootInlineStyle, "data-testid": testId, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest, children: [jsx("div", { ref: setViewportRef, id: viewportId, role: "region", 
+                // The scroll viewport is intentionally focusable so keyboard users can
+                // scroll overflowing content with the arrow/page keys (native behavior
+                // of a focused scroll container).
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex: 0, className: viewportRecipe({ direction }), onScroll: handleScroll, children: children }), fadeMask && showV && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskTop, !atTop ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-top` : undefined }), jsx("div", { className: cx(fadeMaskBase, fadeMaskBottom, !atBottom ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-bottom` : undefined })] })), fadeMask && showH && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskLeft, !atLeft ? fadeMaskVisible : fadeMaskHiddenStyle) }), jsx("div", { className: cx(fadeMaskBase, fadeMaskRight, !atRight ? fadeMaskVisible : fadeMaskHiddenStyle) })] })), showV && hasVOverflow && (jsx("div", { className: cx(scrollbarVertical, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", tabIndex: 0, "aria-controls": viewportId, "aria-orientation": "vertical", "aria-valuenow": vScrollPercent, "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-v` : undefined, onClick: e => {
+                    handleTrackClick('vertical', e);
+                }, onKeyDown: e => {
+                    handleTrackKeyDown('vertical', e);
+                }, children: jsx("div", { className: cx(thumbBase, thumbVertical, isDragging && dragAxis === 'vertical' && thumbDragging), style: {
                         height: `${vThumbSize}px`,
                         transform: `translateY(${vThumbOffset}px)`,
-                    }, onPointerDown: e => handleThumbPointerDown('vertical', e), onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-v` : undefined }) })), showH && hasHOverflow && (jsx("div", { className: cx(scrollbarHorizontal, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", "aria-controls": viewportId, "aria-orientation": "horizontal", "aria-valuenow": Math.round(viewportRef.current
-                    ? (viewportRef.current.scrollLeft /
-                        Math.max(1, viewportRef.current.scrollWidth -
-                            viewportRef.current.clientWidth)) *
-                        100
-                    : 0), "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-h` : undefined, onClick: e => handleTrackClick('horizontal', e), children: jsx("div", { className: cx(thumbBase, thumbHorizontal, isDragging &&
-                        dragAxisRef.current === 'horizontal' &&
-                        thumbDragging), style: {
+                    }, onPointerDown: e => {
+                        handleThumbPointerDown('vertical', e);
+                    }, onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-v` : undefined }) })), showH && hasHOverflow && (jsx("div", { className: cx(scrollbarHorizontal, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", tabIndex: 0, "aria-controls": viewportId, "aria-orientation": "horizontal", "aria-valuenow": hScrollPercent, "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-h` : undefined, onClick: e => {
+                    handleTrackClick('horizontal', e);
+                }, onKeyDown: e => {
+                    handleTrackKeyDown('horizontal', e);
+                }, children: jsx("div", { className: cx(thumbBase, thumbHorizontal, isDragging && dragAxis === 'horizontal' && thumbDragging), style: {
                         width: `${hThumbSize}px`,
                         transform: `translateX(${hThumbOffset}px)`,
-                    }, onPointerDown: e => handleThumbPointerDown('horizontal', e), onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-h` : undefined }) }))] }));
+                    }, onPointerDown: e => {
+                        handleThumbPointerDown('horizontal', e);
+                    }, onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-h` : undefined }) }))] }));
 };
 ScrollArea.displayName = 'ScrollArea';
 

package/dist/esm/components/layout/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","sources":["../../../../../../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAgCA;AAEO;AAsBL;AACA;AACA;;;;;;;;;AAWA;AAGA;;AAEA;AACA;;;;;;;;;AAYA;AACE;AACA;;;;AAIE;;;;AAIE;;;AAGA;;;;;;AAOF;;;;AAIE;;;AAGA;;;;;;AAOF;AACA;AACA;AACA;;AAEJ;;AAGA;;;;;;AAKE;AACE;;AAGF;AACE;;;;;;;;AASJ;AAEI;AACA;AACA;AAEA;AACA;;;AAGA;;;AAGF;;AAKF;;;AAGI;AACE;AACA;;;AAGN;AAEA;AACE;;;AAEO;AACL;;;;;;;;;AAWA;AACA;;;AAGA;;AAGA;;;;;;;;;;;;;AAeJ;AAEI;;AACA;AACA;;AAEA;AAEA;;;;AAIE;;;;;;;AAMA;;;;AAON;;AAEE;;;;AAME;AACA;;;AAMA;AACE;AACA;;;AAEA;AACA;;;;;;AAQqB;AAC3B;AAEA;;;;;AAME;AACA;;AACA;AACA;;;AAGA;AACA;AACF;;;AAIE;AACE;AACE;;AAEJ;;;AAKF;AAGA;AACE;AACE;AACA;AACA;;;AAGA;AACI;AAED;;;AAGH;AACI;AACD;;AAEL;;;AA2EU;;AAIQ;;;;;AAmBT;AAqBC;;AAIQ;;AAGR;;;;;AAkBD;AAUb;AAEA;;"}
+{"version":3,"file":"ScrollArea.js","sources":["../../../../../../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAmCA;AAEO;AAsBL;AACA;AACA;;;;;;;;;;;;;;AAgBA;AAGA;;;;AAIA;;AAIA;;;;;;;;;AAYA;AACE;AACA;;;;AAIE;;;AAGA;;;;AAIE;;;;;;;AAQF;;;AAGA;;;;AAIE;;;;;;;AAQF;AACA;AACA;AACA;;AAEJ;;AAGA;;;;;;AAKE;AACE;;AAGF;AACE;;;;;;;;AASJ;AAEI;AACA;AACA;AAEA;AACA;;;AAGA;;;AAGF;;AAKF;;;AAGI;AACE;AACA;;;AAGN;AAEA;AACE;;;AAEO;AACL;;;;;;;;;AAWA;AACA;;;AAGA;;;AAIA;;;;;;;;;;;;;AAeJ;AAEI;;AACA;AACA;;AAEA;AAEA;;;;AAIE;;;;;;;AAMA;;;;AAON;;AAEE;;;;;AAOE;AACA;;;AAMA;AACE;AACA;;;AAEA;AACA;;;;;;AAUF;AACA;;;AAGA;AACA;;AAEE;;AAEF;AAEA;;;AAIA;AACE;AACE;;AAEF;AACE;;AAEF;AACE;;AAEF;AACE;;AAEF;;;AAGA;;;AAGA;;;;AAKF;;AAEE;;;AAEA;;;;;;AAQqB;AAC3B;AAEA;;;;;AAME;AACA;;AACA;AACA;;AAEA;AACE;AACF;AACA;AACA;;AAEA;AACF;;;AAIE;AACE;AACE;;AAEJ;;;AAKF;AAGA;AACE;AACE;AACA;AACA;;;AAGA;AACI;AAED;;;AAGH;AACI;AACD;;AAEL;;AAGF;;;;;;AAgFU;AACF;AAEE;;;;AAYC;AAEC;AACF;AAwBA;AACF;AAEE;;;;AAYC;AAEC;;AAUd;AAEA;;"}

package/dist/esm/components/layout/SplitPane/SplitPane.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import React, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
-import { cx } from '../../../utils/cx.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
 import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.js';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { dividerSizeVar, dividerRecipe, containerRecipe } from './SplitPane.css.js';
 
 // ---------------------------------------------------------------------------
@@ -201,24 +202,20 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
     // Which sizes array to use
     const isControlled = controlledSizes !== undefined;
     const sizes = isControlled ? controlledSizes : internalSizes;
-    // Stable reference to panelConfigs for use in effects/callbacks
+    // Stable reference to panelConfigs for use in effects/callbacks. The
+    // serialized key is the deliberate deep-equality dependency, so panelConfigs
+    // itself is intentionally absent from the array.
     const panelConfigsKey = JSON.stringify(panelConfigs);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const stablePanelConfigs = useMemo(() => panelConfigs, [panelConfigsKey]);
-    // Keep a ref so the ResizeObserver callback always reads latest values
-    const latestRef = useRef({
+    // Keep a ref so the ResizeObserver callback always reads latest values.
+    const latestRef = useLatest({
         panelCount,
         dividerSize,
         direction,
         isControlled,
         panelConfigs: stablePanelConfigs,
     });
-    latestRef.current = {
-        panelCount,
-        dividerSize,
-        direction,
-        isControlled,
-        panelConfigs: stablePanelConfigs,
-    };
     // -----------------------------------------------------------------------
     // Initial size calculation + ResizeObserver
     // -----------------------------------------------------------------------
@@ -246,7 +243,8 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
                 return reconcileSizesToAvailableSpace(computeInitialSizes(count, cfgs, availableSpace), cfgs, availableSpace, collapsed);
             });
         }
-    }, []);
+        // latestRef is a stable useLatest ref; listed to satisfy the rule.
+    }, [latestRef]);
     const getAvailableSpace = useCallback(() => {
         const container = containerRef.current;
         if (!container || panelCount < 2)
@@ -393,7 +391,7 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
     const handlePointerUp = useCallback((_dividerIndex, e) => {
         e.target.releasePointerCapture(e.pointerId);
         setDraggingIndex(null);
-        if (isControlled && controlledSizes) {
+        if (isControlled) {
             onResizeEnd?.(controlledSizes);
         }
         else {
@@ -533,12 +531,27 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
         if (i < panelCount - 1) {
             const leftSize = sizes[i] ?? 0;
             const leftCfg = panelConfigs[i];
-            elements.push(jsx("div", { role: "separator", tabIndex: 0, "aria-orientation": direction === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": Math.round(leftSize), "aria-valuemin": leftCfg?.minSize ?? 0, "aria-valuemax": leftCfg?.maxSize ?? undefined, "aria-label": "Panel divider", "data-testid": testId ? `${testId}-divider-${i}` : undefined, className: dividerRecipe({
+            elements.push(
+            // Focusable window-splitter: a separator with aria-valuenow that the
+            // user can move with the keyboard is an interactive separator per the
+            // WAI-ARIA window splitter pattern, which jsx-a11y does not model.
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+            jsx("div", { role: "separator", 
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex: 0, "aria-orientation": direction === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": Math.round(leftSize), "aria-valuemin": leftCfg?.minSize ?? 0, "aria-valuemax": leftCfg?.maxSize ?? undefined, "aria-label": "Panel divider", "data-testid": testId ? `${testId}-divider-${i}` : undefined, className: dividerRecipe({
                     direction,
                     isDragging: draggingIndex === i || undefined,
                 }), style: assignInlineVars({
                     [dividerSizeVar]: `${dividerSize}px`,
-                }), onPointerDown: e => handlePointerDown(i, e), onPointerMove: e => handlePointerMove(i, e), onPointerUp: e => handlePointerUp(i, e), onKeyDown: e => handleKeyDown(i, e) }, `divider-${i}`));
+                }), onPointerDown: e => {
+                    handlePointerDown(i, e);
+                }, onPointerMove: e => {
+                    handlePointerMove(i, e);
+                }, onPointerUp: e => {
+                    handlePointerUp(i, e);
+                }, onKeyDown: e => {
+                    handleKeyDown(i, e);
+                } }, `divider-${i}`));
         }
     });
     return (jsx("div", { ref: setContainerRef, className: cx(containerRecipe({ direction }), className), "data-testid": testId, style: style, ...htmlProps, children: elements }));

package/dist/esm/components/layout/SplitPane/SplitPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPane.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAmBA;AACA;AACA;AAEA;;;AAGG;AACH;;AAIiC;;AACM;;AAErC;AACE;AACA;AAAwB;;AAE1B;AACF;AAEA;;AAEG;AACH;AAKE;AAGI;AACA;AAAU;;AAEZ;;;AAKF;AACE;AACE;;;AAEA;;;AAIJ;AACA;AAGA;AACF;AAEA;;AAEG;AACH;;AAMI;AACA;AAAU;;AAEV;;AAEA;;AACA;AACF;AACF;AAEA;;;AAGG;AACH;AAKE;;AAEA;AACE;AACA;AACD;AACD;;AAIA;AACE;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAEG;;AAEL;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAIJ;AACF;AAEA;;;;AAIG;AACH;;;;;;;;;AAiBE;AACE;;AAEA;AACA;AACA;;AAGA;AACE;;;;AAGA;;;;AAKF;;;;AAGA;;;;AAKJ;AAEA;AACA;AAEA;AACA;AACA;AAEA;;;;;;;;;;;;;;AAcG;;AAgBD;;;;;AAMA;AACA;;;AAIA;;AAGA;;;;AAKA;;;;;;;AAQE;AACD;;;;;;AAMC;;;;;AAOF;AACE;;AAQA;;;AAGA;AAEA;;AAGE;;AAEE;;AAEE;AACA;AACE;;AAOF;AACA;;;AAUF;AAMF;;;AAIJ;AACE;AACA;AAAkC;AAElC;;AAGI;;AACmB;;;;;AAMvB;AACF;;;;;;;AAOC;AAED;;;;;;;;AAYI;AACA;AACF;;;;AAQE;AACA;AAEA;;AAEA;;;AAKA;AACA;AAEA;AACA;AACA;AACA;AAEA;;AAGA;AACA;;AAGA;AACA;;;;AAMA;;AAEE;;AAEE;AACE;;;;;AAIF;;;AAIJ;;AAEE;;AAEE;AACE;;;;;AAIF;;;;;;;;;;;;;;AAaF;AACA;;AAGA;;AAEE;;AACK;;AAEL;;;;;;AAOF;;;AAEA;;;AAGA;;;AAEA;;AAEF;AAEA;AACA;AACA;AACA;;;;;;;AAcA;AACF;;;;;;;;AASC;;;;AAQC;AACE;;;AAEA;;;;;;;AAYF;;;;AAMA;AACE;;AACK;AACL;;AACK;;AAEL;AACA;;AAEE;;AAEA;;;AAKA;;AAEE;AACA;AACA;;AAIA;;;;AAGA;AACA;AACA;;;AAGC;AACD;;;;;AAMF;AACA;;;;;;;;;AAUJ;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAIF;AACA;AACA;;;;;;;AAaA;AACF;;;;;;;;;AAUC;;;;AAOH;AAEI;AACA;;;AAEO;AACJ;;AAEL;;;;;;;;AAaA;;;AAGE;;;;AAKF;;AAWA;;AAEE;AAEA;;AAeM;AACD;AAEC;;;AASV;AAEA;AAWF;AAEA;;"}
+{"version":3,"file":"SplitPane.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPane.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAuBA;AACA;AACA;AAEA;;;AAGG;AACH;;AAIiC;;AACM;;AAErC;AACE;AACA;AAAwB;;AAE1B;AACF;AAEA;;AAEG;AACH;AAKE;AAGI;AACA;AAAU;;AAEZ;;;AAKF;AACE;AACE;;;AAEA;;;AAIJ;AACA;AAGA;AACF;AAEA;;AAEG;AACH;;AAMI;AACA;AAAU;;AAEV;;AAEA;;AACA;AACF;AACF;AAEA;;;AAGG;AACH;AAKE;;AAEA;AACE;AACA;AACD;AACD;;AAIA;AACE;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAEG;;AAEL;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAIJ;AACF;AAEA;;;;AAIG;AACH;;;;;;;;;AAiBE;AACE;;AAEA;AACA;AACA;;AAGA;AACE;;;;AAGA;;;;AAKF;;;;AAGA;;;;AAKJ;AAEA;AACA;AAEA;AACA;AACA;AAEA;;;;;;;;;;;;;;AAcG;;AAgBD;;;;;AAMA;AACA;;;AAIA;;AAGA;;;;;;;AAQA;;;;;;;AAQE;AACD;;;;AAMD;AACE;;AAQA;;;AAGA;AAEA;;AAGE;;AAEE;;AAEE;AACA;AACE;;AAOF;AACA;;;AAUF;AAMF;;;AAGJ;AAEA;AACE;AACA;AAAkC;AAElC;;AAGI;;AACmB;;;;;AAMvB;AACF;;;;;;;AAOC;AAED;;;;;;;;AAYI;AACA;AACF;;;;AAQE;AACA;AAEA;;AAEA;;;AAKA;AACA;AAEA;AACA;AACA;AACA;AAEA;;AAGA;AACA;;AAGA;AACA;;;;AAMA;;AAEE;;AAEE;AACE;;;;;AAIF;;;AAIJ;;AAEE;;AAEE;AACE;;;;;AAIF;;;;;;;;;;;;;;AAaF;AACA;;AAGA;;AAEE;;AACK;;AAEL;;;;;;AAOF;;;AAEA;;;AAGA;;;AAEA;;AAEF;AAEA;AACA;AACA;AACA;;;;;;;AAcA;AACF;;;;;;;;AASC;;;;;AASG;;;AAEA;;;;;;;AAYF;;;;AAMA;AACE;;AACK;AACL;;AACK;;AAEL;AACA;;AAEE;;AAEA;;;AAKA;;AAEE;AACA;AACA;;AAIA;;;;AAGA;AACA;AACA;;;AAGC;AACD;;;;;AAMF;AACA;;;;;;;;;AAUJ;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAIF;AACA;AACA;;;;;;;AAaA;AACF;;;;;;;;;AAUC;;;;AAOH;AAEI;AACA;;;AAEO;AACL;;AAEJ;;;;;;;;AAaA;;;AAGE;;;;AAKF;;AAWA;;AAEE;AAEA;;;;;;;;;AAoBM;AACD;AAEC;AACD;AAEC;AACF;AAEE;AACF;AAEE;AACF;AAEE;AACF;;AAIR;AAEA;AAWF;AAEA;;"}

package/dist/esm/components/layout/SplitPane/SplitPanePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPanePanel.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPanePanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;AAaG;;AASD;AAYF;AAEA;;"}
+{"version":3,"file":"SplitPanePanel.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPanePanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAUA;;;;;;;;;;;;;AAaG;;AASD;AAYF;AAEA;;"}

package/dist/esm/components/layout/Stack/Stack.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { cx } from '../../../utils/cx.js';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { gapVar, stackRecipe } from './Stack.css.js';
 
 /** Base spacing unit in px */

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbEllipsis.js

@@ -9,6 +9,7 @@ import '../../primitives/Checkbox/Checkbox.js';
 import '../../primitives/Checkbox/CheckboxGroup.js';
 import '../../primitives/Code/Code.js';
 import '../../primitives/Collapsible/Collapsible.js';
+import '../../primitives/HoverCard/HoverCard.js';
 import '../../primitives/Icon/Icon.js';
 import '../../primitives/IconButton/IconButton.js';
 import '../../primitives/Input/Input.js';
@@ -27,6 +28,10 @@ import '../../primitives/TextArea/TextArea.js';
 import { Tooltip } from '../../primitives/Tooltip/Tooltip.js';
 import '../../primitives/VisuallyHidden/VisuallyHidden.js';
 import '../../primitives/canvas/CanvasContainer.js';
+import '../../primitives/viewport/Viewport.js';
+import '../../primitives/viewport/ViewportLayer.js';
+import '../../primitives/viewport/ViewportWorld.js';
+import '../../primitives/viewport/ViewportOverlay.js';
 import { cx } from '../../../utils/cx.js';
 import { breadcrumbEllipsisButtonStyle, breadcrumbEllipsisTextStyle, breadcrumbEllipsisStyle } from './Breadcrumbs.css.js';
 

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbEllipsis.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbEllipsis.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbEllipsis.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;;;;;;;AAOG;;AAED;AAEI;;AA8BF;AAGJ;;"}
+{"version":3,"file":"BreadcrumbEllipsis.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbEllipsis.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;;;;;;AAOG;;AAED;AAEI;;AA8BF;AAGJ;;"}

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbItem.js

@@ -9,6 +9,7 @@ import '../../primitives/Checkbox/Checkbox.js';
 import '../../primitives/Checkbox/CheckboxGroup.js';
 import '../../primitives/Code/Code.js';
 import '../../primitives/Collapsible/Collapsible.js';
+import '../../primitives/HoverCard/HoverCard.js';
 import '../../primitives/Icon/Icon.js';
 import '../../primitives/IconButton/IconButton.js';
 import '../../primitives/Input/Input.js';
@@ -27,6 +28,10 @@ import '../../primitives/TextArea/TextArea.js';
 import { Tooltip } from '../../primitives/Tooltip/Tooltip.js';
 import '../../primitives/VisuallyHidden/VisuallyHidden.js';
 import '../../primitives/canvas/CanvasContainer.js';
+import '../../primitives/viewport/Viewport.js';
+import '../../primitives/viewport/ViewportLayer.js';
+import '../../primitives/viewport/ViewportWorld.js';
+import '../../primitives/viewport/ViewportOverlay.js';
 import { cx } from '../../../utils/cx.js';
 import { breadcrumbIconStyle, breadcrumbLabelStyle, breadcrumbContentRecipe, breadcrumbItemStyle } from './Breadcrumbs.css.js';
 
@@ -54,7 +59,7 @@ function getTruncatedLabel(children, maxLength) {
  * <BreadcrumbItem isCurrent>Button</BreadcrumbItem>
  * ```
  */
-const BreadcrumbItem = /*#__PURE__*/ React.memo(({ href, onClick, isCurrent = false, icon, maxLength, children, className, style, testId, ref, ...rest }) => {
+const BreadcrumbItem = /*#__PURE__*/ React.memo(({ href, onClick, isCurrent = false, icon, maxLength, endContent, children, className, style, testId, ref, ...rest }) => {
     const { label, fullLabel } = getTruncatedLabel(children, maxLength);
     const isInteractive = (href !== undefined || onClick !== undefined) && !isCurrent;
     const state = isCurrent ? 'current' : isInteractive ? 'link' : 'disabled';
@@ -81,7 +86,7 @@ const BreadcrumbItem = /*#__PURE__*/ React.memo(({ href, onClick, isCurrent = fa
     else {
         inner = (jsx("span", { className: breadcrumbContentRecipe({ state }), children: content }));
     }
-    return (jsx("li", { ref: ref, className: cx(breadcrumbItemStyle, className), style: style, "data-testid": testId, ...rest, children: fullLabel ? (jsx(Tooltip, { title: fullLabel, delay: 300, children: inner })) : (inner) }));
+    return (jsxs("li", { ref: ref, className: cx(breadcrumbItemStyle, className), style: style, "data-testid": testId, ...rest, children: [fullLabel ? (jsx(Tooltip, { title: fullLabel, delay: 300, children: inner })) : (inner), endContent] }));
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';