@astryxdesign/core 0.4.0 → 0.4.1-canary.1ce0b4c

package/dist/Selector/Selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}

package/dist/Selector/Selector.js

@@ -26,7 +26,7 @@ import { Field, InputClearButton, inputStatusBorderStyles, inputStatusHoverShado
 import { Divider } from "../Divider/index.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import { Spinner } from "../Spinner/index.js";
-import { TextInput } from "../TextInput/index.js";
+import { PanelSearchInput } from "../Field/PanelSearchInput.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, fontWeightVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
@@ -37,12 +37,13 @@ import { SelectorOption } from "./SelectorOption.js";
 import { getInputARIA, mergeProps } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { stableClassName } from "../naming.js";
 import { groupStyles } from "../InputGroup/groupStyles.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { useTranslator } from "../i18n/index.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   triggerContainer: {
     kVAEAm: "x1n2onr6",
@@ -86,8 +87,6 @@ const styles = {
     kKwaWg: "x1ilzqfv xq8i9tn",
     kGVxlE: "x1gnnqk1 x1irk71m x15ysqaf",
     k63SB2: "x1e4wzip",
-    kI3sdo: "x1a2a7pz x1irc7jg",
-    kInvED: "x1wfwxd8 xscfbxq",
     k1ekBW: "xrafxwg",
     k3aq6I: "x3oybdh xk4oym4",
     $$css: true
@@ -97,12 +96,26 @@ const styles = {
     k3aq6I: "x1c071of x1pdlv7q",
     $$css: true
   },
-  popover: {
-    k7Eaqz: "xrzjruh",
+  statusButton: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kMwMTN: "x1heor9g",
+    kkrTdU: "x1ypdohk",
+    kaIpWk: "xh6dtrn",
     $$css: true
   },
-  sectionDivider: {
-    kqGvvJ: "xsq74q5",
+  searchRowInput: {
+    kg3NbH: "x2hg6jq",
+    $$css: true
+  },
+  popover: {
+    k7Eaqz: "xrzjruh",
     $$css: true
   },
   divider: {
@@ -268,6 +281,7 @@ export function Selector(props) {
     startIcon,
     htmlName,
     renderOption,
+    indicatorPosition = 'end',
     hasSearch = false,
     searchPlaceholder: searchPlaceholderFromProps,
     placement,
@@ -301,7 +315,7 @@ export function Selector(props) {
   const searchRef = useRef(null);
   const inputGroup = useInputGroup();
   const [searchQuery, setSearchQuery] = useState('');
-  // A typed query shows TextInput's built-in clear (✕) button, which becomes
+  // A typed query shows the search row's clear (✕) button, which becomes
   // the next tab stop after the search input.
   const hasQuery = searchQuery.length > 0;
   const [, startTransition] = useTransition();
@@ -369,7 +383,10 @@ export function Selector(props) {
     hasAutoFocus: false,
     // The popup's own role="listbox" is the exposed semantics; the trigger
     // keeps DOM focus, so wrapping it in a modal dialog would misrepresent it.
-    role: 'none'
+    role: 'none',
+    // The theme target belongs on the SURFACE that paints the popup, which
+    // `usePopover` owns — not on the scrolling list inside it.
+    surfaceTarget: 'selector-popup'
   });
 
   // Open dropdown on mount when isDefaultOpen is true
@@ -541,13 +558,39 @@ export function Selector(props) {
     if (!hasSearch) {
       return null;
     }
-    return /*#__PURE__*/_jsx("div", {
-      ...{
-        className: "x78zum5 x6s0dn4 xf314gf xu0wf1k"
-      },
-      onKeyDown: e => {
-        // The clear (✕) button lives inside the TextInput, after the input in
-        // DOM order. When it is focused and the user tabs forward there is
+    return /*#__PURE__*/_jsx(PanelSearchInput, {
+      ref: searchRef,
+      id: searchId
+      // The search row is the panel's header: a magnifier, a borderless
+      // input, and the shared clear (✕) button. It deliberately does NOT
+      // render a bordered TextInput — the popup is already a bordered
+      // surface, and a field inside it drew a second box within that box.
+      ,
+      label: t('@astryx.selector.searchOptions')
+      // Same accessible name the TextInput's built-in clear produced
+      // ("Clear Search options"), so the affordance keeps its name while its
+      // chrome changes.
+      ,
+      clearLabel: t('@astryx.textInput.clearLabel', {
+        label: t('@astryx.selector.searchOptions')
+      }),
+      ...themeProps('selector-search'),
+      xstyle: variant !== 'ghost' && styles.searchRowInput
+      // When hasSearch is set, focus moves into this input on open, so it —
+      // not the trigger — must be the combobox that reports the highlighted
+      // option via aria-activedescendant (comboboxes-4). A bare searchbox
+      // left the highlight silent to screen readers.
+      ,
+      role: "combobox",
+      "aria-expanded": popover.isOpen,
+      "aria-controls": listboxId,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
+      value: searchQuery,
+      onValueChange: handleSearchChange,
+      onContainerKeyDown: e => {
+        // The clear (✕) button lives inside the row, after the input in DOM
+        // order. When it is focused and the user tabs forward there is
         // nothing else in the popup, so dismiss it (Shift+Tab returns to the
         // input natively). Key events originating on the input are handled on
         // the input below; ignore them here so we don't double-dismiss.
@@ -558,57 +601,25 @@ export function Selector(props) {
           onKeyDown(e);
         }
       },
-      children: /*#__PURE__*/_jsx(TextInput, {
-        ref: searchRef,
-        id: searchId
-        // The search field IS a TextInput: the leading magnifier is its
-        // `startIcon` and the trailing clear (✕) is its built-in `hasClear`
-        // (which resets the value and refocuses the input). We add no bespoke
-        // affordance chrome — the field just looks and behaves like every
-        // other Astryx input.
-        ,
-        label: t('@astryx.selector.searchOptions'),
-        isLabelHidden: true,
-        startIcon: "search",
-        hasClear: true,
-        size: "sm"
-        // Fill the dropdown's width (minus the wrapper's inline padding) so
-        // the field is flush end-to-end rather than sized to its content.
-        ,
-        width: "100%"
-        // When hasSearch is set, focus moves into this input on open, so it —
-        // not the trigger — must be the combobox that reports the highlighted
-        // option via aria-activedescendant (comboboxes-4). A bare searchbox
-        // left the highlight silent to screen readers. role + aria-* pass
-        // through to the underlying <input> via BaseProps.
-        ,
-        role: "combobox",
-        "aria-expanded": popover.isOpen,
-        "aria-controls": listboxId,
-        "aria-autocomplete": "list",
-        "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
-        value: searchQuery,
-        onChange: handleSearchChange,
-        onKeyDown: e => {
-          // Arrow keys navigate options; Enter selects; Escape closes.
-          // Home/End are left to the input for caret movement (APG editable
-          // combobox); PageUp/PageDown are the sanctioned substitute for
-          // jumping to the first/last option.
-          if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'PageUp' || e.key === 'PageDown' || e.key === 'Enter' || e.key === 'Escape') {
-            onKeyDown(e);
-            return;
-          }
-          // Tab: when a query is showing the clear (✕) button, forward-tab
-          // moves focus to it (keeping the popup open) so the affordance is
-          // keyboard-reachable. Every other Tab dismisses the popup as usual.
-          if (e.key === 'Tab' && (e.shiftKey || !hasQuery)) {
-            onKeyDown(e);
-          }
-        },
-        placeholder: searchPlaceholder
-      })
+      onKeyDown: e => {
+        // Arrow keys navigate options; Enter selects; Escape closes.
+        // Home/End are left to the input for caret movement (APG editable
+        // combobox); PageUp/PageDown are the sanctioned substitute for
+        // jumping to the first/last option.
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'PageUp' || e.key === 'PageDown' || e.key === 'Enter' || e.key === 'Escape') {
+          onKeyDown(e);
+          return;
+        }
+        // Tab: when a query is showing the clear (✕) button, forward-tab
+        // moves focus to it (keeping the popup open) so the affordance is
+        // keyboard-reachable. Every other Tab dismisses the popup as usual.
+        if (e.key === 'Tab' && (e.shiftKey || !hasQuery)) {
+          onKeyDown(e);
+        }
+      },
+      placeholder: searchPlaceholder
     });
-  }, [hasSearch, searchId, listboxId, searchQuery, hasQuery, searchPlaceholder, handleSearchChange, onKeyDown, popover.isOpen, highlightedIndex, getItemId, t]);
+  }, [hasSearch, searchId, listboxId, searchQuery, hasQuery, searchPlaceholder, handleSearchChange, onKeyDown, popover.isOpen, highlightedIndex, getItemId, variant, t]);
 
   // The single-selection mark, resolved from the theme once per render. A
   // theme that maps `check` to another indicator (a radio, say) changes every
@@ -619,7 +630,41 @@ export function Selector(props) {
   const renderItem = useCallback((item, flatIndex) => {
     const isHighlighted = flatIndex === highlightedIndex;
     const isSelected = item.value === normalizedValue;
-    return /*#__PURE__*/_jsxs("div", {
+
+    /*
+     * Rendered UNCONDITIONALLY, with the state passed down: the default
+     * check draws nothing when unchecked, but a theme that replaces the
+     * `check` indicator with a radio needs the unselected state to draw
+     * its empty circle. `{isSelected && …}` would make that impossible.
+     *
+     * `selector-check` stays the stable target for the mark's position
+     * in the row; the indicator owns what the mark looks like.
+     */
+    const mark = /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s xgomdpo"
+      },
+      children: /*#__PURE__*/_jsx(SelectionMark, {
+        state: isSelected ? 'checked' : 'unchecked',
+        size: "sm",
+        isDisabled: item.disabled ?? false,
+        ...themeProps('selector-check')
+      })
+    });
+    const optionContent = /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli"
+      },
+      children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
+        option: item
+      })
+    });
+    const content = indicatorPosition === 'start' ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [mark, optionContent]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [optionContent, mark]
+    });
+    return /*#__PURE__*/_jsx("div", {
       id: getItemId(flatIndex),
       role: "option",
       "aria-selected": isSelected,
@@ -627,21 +672,9 @@ export function Selector(props) {
       onClick: () => onItemSelect(item),
       onMouseEnter: () => onItemMouseEnter(item, flatIndex),
       ...stylex.props(styles.item, itemSizeStyles[size], isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, item.disabled && styles.itemDisabled),
-      children: [/*#__PURE__*/_jsx("span", {
-        ...{
-          className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli"
-        },
-        children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
-          option: item
-        })
-      }), /*#__PURE__*/_jsx(SelectionMark, {
-        state: isSelected ? 'checked' : 'unchecked',
-        size: "sm",
-        isDisabled: item.disabled ?? false,
-        ...themeProps('selector-check')
-      })]
+      children: content
     }, item.value);
-  }, [renderOption, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter, SelectionMark]);
+  }, [renderOption, indicatorPosition, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter, SelectionMark]);
 
   // Render all options (handling sections/dividers)
   const renderOptions = useCallback(() => {
@@ -689,16 +722,21 @@ export function Selector(props) {
         if (sectionItems.length === 0) {
           continue;
         }
-        if (option.title) {
-          elements.push(/*#__PURE__*/_jsx(Divider, {
-            label: option.title,
-            xstyle: styles.sectionDivider
-          }, `section-divider-${i}`));
-        }
-        elements.push(/*#__PURE__*/_jsx("div", {
+        // The heading lives INSIDE the group and is aria-hidden: the group
+        // already carries the title as its accessible name, so exposing the
+        // text again would announce it twice. This also keeps role="listbox"'s
+        // children to option/group only — the old labeled Divider sat in the
+        // listbox as a stray role="separator".
+        elements.push(/*#__PURE__*/_jsxs("div", {
           role: "group",
           "aria-label": option.title,
-          children: sectionItems
+          children: [option.title && /*#__PURE__*/_jsx("div", {
+            "aria-hidden": "true",
+            ...mergeProps(themeProps('selector-section-heading'), {
+              className: "xu0wf1k xf314gf x9ynric x141an7d x1ltkj2j xv1l7n4 x87ps6o"
+            }),
+            children: option.title
+          }), sectionItems]
         }, `section-${i}`));
       } else if (isOptionData(option)) {
         const normalized = normalizeOption(option);
@@ -733,7 +771,7 @@ export function Selector(props) {
         size,
         status: status?.type ?? null,
         disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, !selectedItem && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, xstyle), className, style),
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && focusOutlineStyles.focusWithin, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, !selectedItem && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, xstyle), className, style),
       children: [startIcon && renderIconSlot(startIcon, {
         size: 'sm',
         color: 'secondary'
@@ -798,9 +836,7 @@ export function Selector(props) {
         "aria-label": t(STATUS_BUTTON_LABEL_KEY[status.type]),
         "aria-describedby": statusTooltip.describedBy,
         onClick: e => e.stopPropagation(),
-        ...{
-          className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1heor9g x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
-        },
+        ...stylex.props(focusOutlineStyles.focusVisible, styles.statusButton),
         children: /*#__PURE__*/_jsx(Icon, {
           icon: STATUS_ICON_MAP[status.type],
           size: "sm",
@@ -832,7 +868,7 @@ export function Selector(props) {
         })
       })]
     }), popover.render(hasSearch ? /*#__PURE__*/_jsxs("div", {
-      children: [renderSearch(), /*#__PURE__*/_jsx("div", {
+      children: [renderSearch(), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx("div", {
         ref: listboxRef,
         id: listboxId,
         role: "listbox",
@@ -870,6 +906,10 @@ export function Selector(props) {
     }), {
       placement: popoverPlacement,
       alignment: 'start',
+      // The system's standard menu clearance, except in overlay mode:
+      // there the measured negative margin owns the block geometry and
+      // the menu is meant to sit on the trigger, not clear it.
+      offset: shouldOverlaySelectedItem ? undefined : spacingVars['--spacing-1'],
       xstyle: [styles.popover, layerAnimations[popoverPlacement]],
       style: popoverOffsetStyle
     }), showStatusTooltip && statusTooltip.renderTooltip(status?.message ?? ''), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]

package/dist/SideNav/SideNav.d.ts

@@ -19,7 +19,7 @@
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 import type { StyleXStyles } from '@stylexjs/stylex';
-import { type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
+import { type SideNavCollapsibleConfig, type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
 import type { ResizableConfig } from '../Resizable/useResizable';
 export interface SideNavProps extends BaseProps<HTMLElement> {
     /** Ref forwarded to the root element */
@@ -28,6 +28,9 @@ export interface SideNavProps extends BaseProps<HTMLElement> {
      * Imperative collapse handle for SideNavCollapseButton instances rendered
      * outside this SideNav. This intentionally stays separate from `ref`, which
      * continues to expose the root HTMLElement.
+     *
+     * @deprecated Hand the same controlled `collapsible` config to SideNav and
+     * to the outside button instead.
      */
     handleRef?: React.Ref<SideNavImperativeCollapseHandle>;
     /**
@@ -98,19 +101,14 @@ export interface SideNavProps extends BaseProps<HTMLElement> {
      * - `true` — enables collapse with default toggle button and uncontrolled state
      * - Object — enables collapse with advanced configuration:
      *   - `defaultIsCollapsed` — start collapsed (uncontrolled)
-     *   - `isCollapsed` + `onCollapsedChange` — controlled mode
+     *   - `isCollapsed` + `onCollapsedChange` — controlled mode. Pass the same
+     *     object to a `SideNavCollapseButton` rendered outside this SideNav
      *   - `hasButton` — render built-in collapse button (default: true)
      *   - `buttonLabel` — accessibility label for the collapse button
      *
      * @default false
      */
-    collapsible?: boolean | {
-        defaultIsCollapsed?: boolean;
-        isCollapsed?: boolean;
-        onCollapsedChange?: (isCollapsed: boolean) => void;
-        hasButton?: boolean;
-        buttonLabel?: string;
-    };
+    collapsible?: boolean | SideNavCollapsibleConfig;
 }
 /**
  * Sidebar navigation container for application pages.

package/dist/SideNav/SideNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAmJ/D,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAEtC;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;QACnD,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACP;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAmB,EACnB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BAiQd;yBAhRe,OAAO"}
+{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAGL,KAAK,wBAAwB,EAC7B,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AA2J/D,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAEtC;;;;;;;;;;;;;OAaG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,wBAAwB,CAAC;CAClD;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAmB,EACnB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BAiRd;yBAhSe,OAAO"}

package/dist/SideNav/SideNav.js

@@ -32,6 +32,7 @@ import { MobileNav } from "../MobileNav/MobileNav.js";
 import { useResizable } from "../Resizable/useResizable.js";
 import { ResizeHandle } from "../Resizable/ResizeHandle.js";
 import { themeProps } from "../utils/themeProps.js";
+import { SizeProvider } from "../SizeContext/SizeContext.js";
 import { useTranslator } from "../i18n/index.js";
 
 // =============================================================================
@@ -75,6 +76,13 @@ const styles = {
   }
 };
 
+/**
+ * Cascaded to the icon rows through `SizeContext` so the built-in collapse
+ * button and the consumer's `footerIcons` come out one height. An explicit
+ * `size` on a child still wins.
+ */
+const FOOTER_ICON_SIZE = 'sm';
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -160,6 +168,9 @@ export function SideNav({
   });
   const toggle = useCallback(() => {
     const next = !collapsed;
+
+    // Deprecated `handleRef` path only: an out-of-tree button reads this
+    // snapshot while rendering, which can happen before SideNav re-renders.
     collapseStateRef.current = {
       ...collapseStateRef.current,
       isCollapsed: next
@@ -204,7 +215,10 @@ export function SideNav({
         ...{
           className: "x78zum5 x6s0dn4 xzye2dw xvc5jky"
         },
-        children: footerIcons
+        children: /*#__PURE__*/_jsx(SizeProvider, {
+          value: FOOTER_ICON_SIZE,
+          children: footerIcons
+        })
       })]
     });
   }
@@ -217,6 +231,10 @@ export function SideNav({
     return /*#__PURE__*/_jsxs(MobileNav, {
       header: header,
       "data-testid": testId,
+      xstyle: xstyle,
+      className: className,
+      style: style,
+      ...props,
       children: [topContent, children, hasDrawerFooter && /*#__PURE__*/_jsxs("div", {
         ...{
           className: "x78zum5 xdt5ytf xr1yuqi x1txdalj x1xye8es"
@@ -225,7 +243,10 @@ export function SideNav({
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw"
           },
-          children: footerIcons
+          children: /*#__PURE__*/_jsx(SizeProvider, {
+            value: FOOTER_ICON_SIZE,
+            children: footerIcons
+          })
         })]
       })]
     });
@@ -245,7 +266,10 @@ export function SideNav({
           ...{
             className: "x78zum5 x6s0dn4 xzye2dw"
           },
-          children: footerIcons
+          children: /*#__PURE__*/_jsx(SizeProvider, {
+            value: FOOTER_ICON_SIZE,
+            children: footerIcons
+          })
         })]
       })]
     });
@@ -323,7 +347,7 @@ export function SideNav({
           className: "x78zum5 xdt5ytf x2lah0s xr1yuqi x7wzq59 x1ey2m1c xgcd1z6 x1txdalj xf314gf x1wesfrj xexx8yu x6s0dn4"
         }
       }[!!collapsed << 0],
-      children: [footer, /*#__PURE__*/_jsxs("div", {
+      children: [footer, /*#__PURE__*/_jsx("div", {
         ...{
           0: {
             className: "x78zum5 x6s0dn4 xzye2dw"
@@ -332,7 +356,10 @@ export function SideNav({
             className: "x78zum5 x6s0dn4 xzye2dw x3ieub6"
           }
         }[!!collapsed << 0],
-        children: [showCollapseButton && /*#__PURE__*/_jsx(SideNavCollapseButton, {}), footerIcons]
+        children: /*#__PURE__*/_jsxs(SizeProvider, {
+          value: FOOTER_ICON_SIZE,
+          children: [showCollapseButton && /*#__PURE__*/_jsx(SideNavCollapseButton, {}), footerIcons]
+        })
       })]
     })]
   });

package/dist/SideNav/SideNavCollapseButton.d.ts

@@ -5,7 +5,7 @@
  * @position Composable toggle button for sidenav collapse
  *
  * Place inside SideNav (reads context automatically) or outside
- * (pass handleRef to connect). Customizable via label/children.
+ * (pass the same controlled `collapsible` config both get).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
@@ -14,12 +14,20 @@
  */
 import React, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-import { type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
+import { type SideNavControlledCollapsible, type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
+import type { ElementSize } from '../SizeContext/SizeContext';
 export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement> {
     ref?: React.Ref<HTMLButtonElement>;
     /**
-     * Imperative handle from SideNav. Only needed when the button is rendered
-     * outside the sidenav, where collapse context is unavailable.
+     * The same controlled `collapsible` config given to SideNav
+     * (`{isCollapsed, onCollapsedChange}`). Needed only when the button is
+     * rendered outside the sidenav, where collapse context cannot reach it.
+     */
+    collapsible?: SideNavControlledCollapsible;
+    /**
+     * Imperative handle from SideNav.
+     *
+     * @deprecated Pass `collapsible` instead.
      */
     handleRef?: React.RefObject<SideNavImperativeCollapseHandle | null>;
     /**
@@ -27,6 +35,12 @@ export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement>
      * with the chevron icon. When omitted, renders as an icon-only button.
      */
     label?: string;
+    /**
+     * Button size. Defaults to the size its container cascades — `sm` in a
+     * SideNav footer — or `md` outside one. Set it for placements with no row
+     * to inherit from, e.g. a button placed in a `TopNav`.
+     */
+    size?: ElementSize;
     /**
      * Custom button content. Overrides the default chevron icon and label.
      */
@@ -37,7 +51,8 @@ export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement>
  *
  * Place anywhere inside SideNav (header, topContent, footer, footerIcons)
  * and it reads collapse state from context automatically. For placement
- * outside the sidenav (e.g. in TopNav or content area), pass handleRef.
+ * outside the sidenav (e.g. in TopNav or content area), hold the state and
+ * hand the same `collapsible` config to both.
  *
  * @example
  * ```
@@ -48,12 +63,13 @@ export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement>
  *
  * @example
  * ```
- * const ref = useRef(null);
- * <TopNav endContent={<SideNavCollapseButton handleRef={ref} />} />
- * <SideNav handleRef={ref} collapsible>...</SideNav>
+ * const [isCollapsed, setIsCollapsed] = useState(false);
+ * const collapsible = {isCollapsed, onCollapsedChange: setIsCollapsed};
+ * <TopNav endContent={<SideNavCollapseButton collapsible={collapsible} />} />
+ * <SideNav collapsible={{...collapsible, hasButton: false}}>...</SideNav>
  * ```
  */
-export declare function SideNavCollapseButton({ ref, handleRef, label, children, onClick: onClickProp, ...props }: SideNavCollapseButtonProps): React.JSX.Element | null;
+export declare function SideNavCollapseButton({ ref, collapsible, handleRef, label, size, children, onClick: onClickProp, ...props }: SideNavCollapseButtonProps): React.JSX.Element | null;
 export declare namespace SideNavCollapseButton {
     var displayName: string;
 }

package/dist/SideNav/SideNavCollapseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavCollapseButton.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAyBlC,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,+BAA+B,GAAG,IAAI,CAAC,CAAC;IAEpE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,0BAA0B,4BA8C5B;yBArDe,qBAAqB"}
+{"version":3,"file":"SideNavCollapseButton.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavCollapseButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAKzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAGL,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAGlC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAkC5D,MAAM,WAAW,0BAA2B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,WAAW,CAAC,EAAE,4BAA4B,CAAC;IAE3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,+BAA+B,GAAG,IAAI,CAAC,CAAC;IAEpE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,WAAW,EACX,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,EAAE,0BAA0B,4BAiD5B;yBA1De,qBAAqB"}