@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

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,wBAAwB,EAC7B,KAAK,+BAA+B,EACrC,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AA4J/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,+BAkRd;yBAjSe,OAAO"}
+{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/E,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;AA4O/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;;;;;;;;;;;;;;;;;;;OAmBG;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,+BA0Qd;yBAzRe,OAAO"}

package/dist/SideNav/SideNav.js

@@ -20,7 +20,7 @@
  * - /apps/storybook/stories/SideNav.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
-import { useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { useCallback, useImperativeHandle, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
@@ -33,6 +33,7 @@ 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 { useDevWarning } from "../hooks/useDevWarning.js";
 import { useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 // =============================================================================
@@ -43,6 +44,43 @@ import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const COLLAPSE_THRESHOLD = 160;
 
+// =============================================================================
+// Collapse config
+// =============================================================================
+
+/**
+ * `collapsible` and `resizable` can each carry collapse state, so they are
+ * normalized here into one config with one owner — two independently
+ * initialized copies of the same boolean is what rendered an expanded nav at
+ * width 0 in #4790. `resizable` is the superset, so its keys win.
+ */
+function resolveCollapseConfig(collapsible, resizable) {
+  const fromCollapsible = typeof collapsible === 'object' ? collapsible : {};
+  const fromResizable = typeof resizable === 'object' ? resizable : {};
+  const resizableCarriesCollapse = fromResizable.defaultIsCollapsed !== undefined || fromResizable.isCollapsed !== undefined || fromResizable.onCollapseChange !== undefined;
+  return {
+    isCollapsible: !!collapsible || resizableCarriesCollapse,
+    defaultIsCollapsed: (resizableCarriesCollapse ? fromResizable.defaultIsCollapsed : fromCollapsible.defaultIsCollapsed) ?? false,
+    isCollapsed: resizableCarriesCollapse ? fromResizable.isCollapsed : fromCollapsible.isCollapsed,
+    onCollapsedChange: resizableCarriesCollapse ? fromResizable.onCollapseChange : fromCollapsible.onCollapsedChange,
+    conflict: describeCollapseConflict(fromCollapsible, fromResizable)
+  };
+}
+
+/**
+ * Names the keys that address the same collapse state on both props, and
+ * which one won. Silent for the common non-overlapping combinations —
+ * `collapsible: true` alongside a resize config is not a conflict.
+ */
+function describeCollapseConflict(collapsible, resizable) {
+  const collapsibleKeys = [collapsible.defaultIsCollapsed !== undefined && 'defaultIsCollapsed', collapsible.isCollapsed !== undefined && 'isCollapsed', collapsible.onCollapsedChange !== undefined && 'onCollapsedChange'].filter(key => key !== false);
+  const resizableKeys = [resizable.defaultIsCollapsed !== undefined && 'defaultIsCollapsed', resizable.isCollapsed !== undefined && 'isCollapsed', resizable.onCollapseChange !== undefined && 'onCollapseChange'].filter(key => key !== false);
+  if (collapsibleKeys.length === 0 || resizableKeys.length === 0) {
+    return null;
+  }
+  return `${collapsibleKeys.map(key => `collapsible.${key}`).join(', ')} and ` + `${resizableKeys.map(key => `resizable.${key}`).join(', ')} address the ` + `same collapse state. resizable wins; the collapsible ` + `${collapsibleKeys.length === 1 ? 'value is' : 'values are'} ignored.`;
+}
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -128,35 +166,27 @@ export function SideNav({
   const t = useTranslator();
   // Parse collapsible prop
   const collapsibleConfig = typeof collapsible === 'object' ? collapsible : {};
-  const isCollapsible = !!collapsible;
   const hasCollapseButton = collapsibleConfig.hasButton ?? true;
-  const defaultIsCollapsed = collapsibleConfig.defaultIsCollapsed ?? false;
-  const controlledCollapsed = collapsibleConfig.isCollapsed;
-  const onCollapsedChange = collapsibleConfig.onCollapsedChange;
 
   // Resizable config
   const resizableConfig = typeof resizable === 'object' ? resizable : {};
   const isResizable = !!resizable;
-
-  // Collapse state (controlled + uncontrolled)
-  const isControlled = controlledCollapsed !== undefined;
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultIsCollapsed);
-  const collapsed = isControlled ? controlledCollapsed : uncontrolledCollapsed;
+  const collapseConfig = resolveCollapseConfig(collapsible, resizable);
+  const {
+    isCollapsible,
+    onCollapsedChange
+  } = collapseConfig;
+  useDevWarning('SideNav', collapseConfig.conflict ?? '', collapseConfig.conflict != null);
   const navRef = useRef(null);
   const mergedNavRef = useMergedRefs(ref, navRef);
   const collapseStateRef = useRef({
-    isCollapsed: collapsed,
+    isCollapsed: false,
     toggle: () => {},
     isCollapsible
   });
-  const setCollapsedState = useCallback(value => {
-    if (!isControlled) {
-      setUncontrolledCollapsed(value);
-    }
-    onCollapsedChange?.(value);
-  }, [isControlled, onCollapsedChange]);
 
-  // Resize hook — callbacks keep SideNav in sync without effects.
+  // useResizable is the sole collapse owner in every SideNav mode. Keeping that
+  // owner mounted when resize is toggled preserves the current collapse state.
   const resizableHook = useResizable({
     defaultSize: resizableConfig.defaultWidth ?? 260,
     minSizePx: resizableConfig.minWidth ?? 180,
@@ -164,9 +194,12 @@ export function SideNav({
     collapsible: isCollapsible,
     collapsedSize: COLLAPSE_THRESHOLD,
     autoSaveId: resizableConfig.autoSaveId,
+    defaultIsCollapsed: collapseConfig.defaultIsCollapsed,
+    isCollapsed: collapseConfig.isCollapsed,
     onSizeChange: resizableConfig.onWidthChange,
-    onCollapseChange: isCollapsible ? setCollapsedState : undefined
+    onCollapseChange: onCollapsedChange
   });
+  const collapsed = resizableHook.isCollapsed;
   const toggle = useCallback(() => {
     const next = !collapsed;
 
@@ -176,15 +209,12 @@ export function SideNav({
       ...collapseStateRef.current,
       isCollapsed: next
     };
-    setCollapsedState(next);
-    if (isResizable) {
-      if (next) {
-        resizableHook.collapse();
-      } else {
-        resizableHook.expand();
-      }
+    if (next) {
+      resizableHook.collapse();
+    } else {
+      resizableHook.expand();
     }
-  }, [collapsed, setCollapsedState, isResizable, resizableHook]);
+  }, [collapsed, resizableHook]);
   const showResizeHandle = isResizable && !collapsed;
   collapseStateRef.current = {
     isCollapsed: collapsed,

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

@@ -1 +1 @@
-{"version":3,"file":"SideNavHeading.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAoBtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0N5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,sCAufrB;yBAxgBe,cAAc"}
+{"version":3,"file":"SideNavHeading.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0N5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,sCAyfrB;yBA1gBe,cAAc"}

package/dist/SideNav/SideNavHeading.js

@@ -31,6 +31,7 @@ import { Icon } from "../Icon/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { navItemStyles } from "../NavItem/navItemStyles.stylex.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
+import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { useSideNavCollapse } from "./SideNavCollapseContext.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps } from "../utils/index.js";
@@ -50,7 +51,7 @@ const styles = {
     kGNEyG: "x6s0dn4",
     kOIVth: "x1txdalj",
     kAzted: "xkoleio",
-    kZCmMZ: "x12gdq22 x1betex2",
+    kZCmMZ: "x12gdq22 xmnmr5y",
     kwRFfy: "x1djylfy",
     k8WAf4: "xt970qd",
     kB7OPa: "x9f619",
@@ -137,7 +138,7 @@ const styles = {
     kMwMTN: "x1heor9g",
     k9WMMc: "x1yc453h",
     kAzted: "xkoleio",
-    kZCmMZ: "x12gdq22 x1betex2",
+    kZCmMZ: "x12gdq22 xmnmr5y",
     kwRFfy: "x1djylfy",
     k8WAf4: "xt970qd",
     keoZOQ: "xcsaf9d",
@@ -291,7 +292,7 @@ export function SideNavHeading({
         href: headingHref,
         "aria-label": heading,
         "data-testid": testId,
-        ...mergeProps(themeProps('side-nav-heading'), focusOutlineProps.focusVisible(navItemStyles.item, styles.rootCollapsed, xstyle), className, style),
+        ...mergeProps(themeProps('side-nav-heading'), focusOutlineProps.focusVisible(navItemStyles.item, interactionOverlayStyles.backgroundColor, styles.rootCollapsed, xstyle), className, style),
         children: collapsedIcon
       });
     } else if (menu) {
@@ -303,7 +304,7 @@ export function SideNavHeading({
           "data-testid": testId,
           ...popover.triggerProps,
           ...triggerProps,
-          ...mergeProps(themeProps('side-nav-heading'), focusOutlineProps.focusVisible(navItemStyles.item, styles.rootCollapsed, styles.menuTrigger, xstyle), className, style),
+          ...mergeProps(themeProps('side-nav-heading'), focusOutlineProps.focusVisible(navItemStyles.item, interactionOverlayStyles.backgroundColor, styles.rootCollapsed, styles.menuTrigger, xstyle), className, style),
           children: collapsedIcon
         }), popover.render(/*#__PURE__*/_jsxs("div", {
           ref: menuRef,

package/dist/SideNav/SideNavItem.d.ts

@@ -4,7 +4,7 @@
  * @output Exports SideNavItem component and SideNavItemProps
  * @position Core implementation; used inside SideNav children
  *
- * Navigation item with icon, selected state, and nesting.
+ * Navigation item with icon, selected state, row-level actions, and nesting.
  *
  * Collapsed items with children open their submenu flyout through
  * `useMenuHover`, the shared hover-intent hook (same one `SideNavHeading` and
@@ -63,9 +63,24 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
      */
     onClick?: (e: React.MouseEvent) => void;
     /**
-     * Right-side content (badges, counts).
+     * Passive right-side content only (badges, counts). Interactive
+     * controls (icon buttons, menus) go in `actions`. `endContent`
+     * renders inside the primary link or button.
      */
     endContent?: ReactNode;
+    /**
+     * Row-level secondary controls (icon buttons, menus) rendered as siblings
+     * of the primary element at the trailing edge of the row — after the
+     * expand/collapse toggle, and before any nested children in DOM and focus
+     * order. Content is passthrough: each control owns its accessible name,
+     * keyboard behavior, and disabled state. Hidden while the SideNav rail is
+     * collapsed.
+     *
+     * Controls inherit the row's control size through `SizeContext`, so an
+     * unsized icon button comes out the same box as the built-in
+     * expand/collapse toggle. An explicit `size` still wins.
+     */
+    actions?: ReactNode;
     /**
      * Sub-items for nesting.
      */
@@ -95,7 +110,10 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
 /**
  * Navigation item for SideNav.
  *
- * Supports icons, selected state, nesting, and end content like badges or counts.
+ * Supports icons, selected state, nesting, and end content like badges or
+ * counts. Interactive row-level controls (menus, icon buttons) go in
+ * `actions`, which renders them as siblings of the primary element — never
+ * nested inside it — before any nested children in DOM and focus order.
  *
  * @example
  * ```
@@ -110,9 +128,16 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
  *   <SideNavItem label="General" href="/settings/general" />
  *   <SideNavItem label="Security" href="/settings/security" />
  * </SideNavItem>
+ * <SideNavItem
+ *   label="Projects"
+ *   href="/projects"
+ *   collapsible
+ *   actions={<MoreMenu label="Project actions" items={items} />}>
+ *   <SideNavItem label="Alpha" href="/projects/alpha" />
+ * </SideNavItem>
  * ```
  */
-export declare function SideNavItem({ as, label, icon, selectedIcon, isSelected, isDisabled, href, onClick, endContent, children, collapsible: itemCollapsible, size, 'data-testid': testId, ref, xstyle, ...rest }: SideNavItemProps): import("react").JSX.Element | null;
+export declare function SideNavItem({ as, label, icon, selectedIcon, isSelected, isDisabled, href, onClick, endContent, actions, children, collapsible: itemCollapsible, size, 'data-testid': testId, ref, xstyle, ...rest }: SideNavItemProps): import("react").JSX.Element | null;
 export declare namespace SideNavItem {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AAqOhF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;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;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCA6UlB;yBA9Ve,WAAW"}
+{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA2PhF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;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;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCAuXlB;yBAzYe,WAAW"}

package/dist/SideNav/SideNavItem.js

@@ -8,7 +8,7 @@
  * @output Exports SideNavItem component and SideNavItemProps
  * @position Core implementation; used inside SideNav children
  *
- * Navigation item with icon, selected state, and nesting.
+ * Navigation item with icon, selected state, row-level actions, and nesting.
  *
  * Collapsed items with children open their submenu flyout through
  * `useMenuHover`, the shared hover-intent hook (same one `SideNavHeading` and
@@ -33,7 +33,9 @@ import { useMenuHover } from "../hooks/useMenuHover.js";
 import { mergeProps } from "../utils/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { navItemStyles } from "../NavItem/navItemStyles.stylex.js";
+import { SizeProvider } from "../SizeContext/SizeContext.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
+import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { useSideNavCollapse, SideNavCollapseContext } from "./SideNavCollapseContext.js";
 import { useSideNavRenderMode } from "./SideNavRenderContext.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
@@ -83,6 +85,8 @@ const styles = {
     $$css: true
   },
   expandToggle: {
+    kzqmXN: "x1fvqzum",
+    kZKoxP: "x6k0iem",
     k1xSpc: "x3nfvp2",
     kGNEyG: "x6s0dn4",
     kjj79g: "xl56j7k",
@@ -95,8 +99,6 @@ const styles = {
     kMwMTN: "x1heor9g",
     kkrTdU: "x1ypdohk x16khyan",
     kaIpWk: "xh6dtrn",
-    kRL5z6: "xoevpu5",
-    kSReZ0: "xyxi2l3",
     $$css: true
   },
   splitAction: {
@@ -128,6 +130,16 @@ const styles = {
   }
 };
 
+/**
+ * Cascaded to the `actions` slot through `SizeContext` so a consumer's row
+ * controls come out the same height as the built-in expand/collapse toggle,
+ * the way `SideNav` already cascades one size to its footer icons. An
+ * explicit `size` on a supplied control still wins.
+ *
+ * SYNC: `styles.expandToggle` carries the matching box.
+ */
+const ROW_CONTROL_SIZE = 'sm';
+
 // Non-collapsed state for popover children — ensures nested items render expanded
 const EXPANDED_COLLAPSE_STATE = {
   isCollapsed: false,
@@ -183,7 +195,10 @@ function NavItemElement({
 /**
  * Navigation item for SideNav.
  *
- * Supports icons, selected state, nesting, and end content like badges or counts.
+ * Supports icons, selected state, nesting, and end content like badges or
+ * counts. Interactive row-level controls (menus, icon buttons) go in
+ * `actions`, which renders them as siblings of the primary element — never
+ * nested inside it — before any nested children in DOM and focus order.
  *
  * @example
  * ```
@@ -198,6 +213,13 @@ function NavItemElement({
  *   <SideNavItem label="General" href="/settings/general" />
  *   <SideNavItem label="Security" href="/settings/security" />
  * </SideNavItem>
+ * <SideNavItem
+ *   label="Projects"
+ *   href="/projects"
+ *   collapsible
+ *   actions={<MoreMenu label="Project actions" items={items} />}>
+ *   <SideNavItem label="Alpha" href="/projects/alpha" />
+ * </SideNavItem>
  * ```
  */
 export function SideNavItem({
@@ -210,6 +232,7 @@ export function SideNavItem({
   href,
   onClick,
   endContent,
+  actions,
   children,
   collapsible: itemCollapsible,
   size = 'md',
@@ -263,6 +286,7 @@ export function SideNavItem({
   // clicking the chevron expands/collapses children.
   const hasPrimaryAction = !!href || !!onClick;
   const hasIndependentToggle = isItemCollapsible && hasPrimaryAction && !isCollapsed;
+  const hasActions = !!actions;
   const handleClick = e => {
     if (isDisabled) {
       e.preventDefault();
@@ -327,7 +351,7 @@ export function SideNavItem({
       size,
       selected: isSelected ? 'selected' : null,
       disabled: isDisabled ? 'disabled' : null
-    }), focusOutlineProps.focusVisible(navItemStyles.item, navItemStyles[size], styles.itemCollapsed, size === 'sm' && styles.itemCollapsedSm, size === 'lg' && styles.itemCollapsedLg, isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled));
+    }), focusOutlineProps.focusVisible(navItemStyles.item, interactionOverlayStyles.backgroundColor, navItemStyles[size], styles.itemCollapsed, size === 'sm' && styles.itemCollapsedSm, size === 'lg' && styles.itemCollapsedLg, isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled));
 
     // Items with children: popover trigger + popover
     if (hasChildren) {
@@ -422,24 +446,44 @@ export function SideNavItem({
     selected: isSelected ? 'selected' : null,
     disabled: isDisabled ? 'disabled' : null
   });
-  const itemStyleArgs = [navItemStyles.item, navItemStyles[size], isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled];
+  const itemStyleArgs = [navItemStyles.item, interactionOverlayStyles.backgroundColor, navItemStyles[size], isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled];
 
-  // Two shapes of the same row appearance:
-  // - `rowProps` for the split-action path, where the row is a plain <div>
-  //   container and its children take focus (so the ring belongs on them);
-  // - `focusableRowProps` for every other path, where the row element is
-  //   itself the focusable control.
+  // Three shapes of the same row appearance:
+  // - `rowProps` — split-action path (toggle, no actions): presentational
+  //   <div>; the ring belongs on each child tab stop.
+  // - `focusableRowProps` — ordinary row: the row element is the control.
+  // - `actionsRowProps` — same pill, but the ring is drawn for the primary
+  //   only. The wrapper is not a tab stop, so `:focus-visible` on it would
+  //   never match, and matching any descendant instead would light the whole
+  //   row around the chevron's or an action's own ring.
   const rowProps = mergeProps(itemThemeProps, stylex.props(...itemStyleArgs));
   const focusableRowProps = mergeProps(itemThemeProps, focusOutlineProps.focusVisible(...itemStyleArgs));
+  const actionsRowProps = mergeProps(itemThemeProps, focusOutlineProps.focusWithinFirstChild(...itemStyleArgs));
 
-  // Split-action path: collapsible plus a primary action renders the primary
-  // element and the chevron toggle as siblings in a <div> row, since a
-  // <button> cannot nest inside an <a>.
+  // Row-wrapper path: primary element + row controls as siblings.
+  //
+  // Used when the row carries more than one control: an independent
+  // expand/collapse toggle (collapsible + href/onClick), consumer-supplied
+  // actions, or both. A <div> is the styled flex row; the primary link or
+  // button, the chevron toggle, and the actions slot render as siblings so
+  // no interactive element nests inside another, and every row-level
+  // control precedes the nested children group in DOM and focus order.
+  const hasRowWrapper = hasIndependentToggle || hasActions;
   let itemElement;
-  if (hasIndependentToggle) {
+  if (hasRowWrapper) {
+    // aria-expanded/-controls stay on the primary element only when the
+    // whole row is the collapse toggle (no independent chevron button).
+    const rowPrimaryAriaProps = hasIndependentToggle ? {
+      'aria-current': isSelected ? 'page' : undefined
+    } : {
+      'aria-current': isSelected ? 'page' : undefined,
+      'aria-disabled': isDisabled || undefined,
+      'aria-expanded': isItemCollapsible ? !isItemCollapsed : undefined,
+      'aria-controls': isItemCollapsible ? `${id}-children` : undefined
+    };
     itemElement = /*#__PURE__*/_jsxs("div", {
       "data-testid": testId,
-      ...rowProps,
+      ...(hasActions ? actionsRowProps : rowProps),
       children: [/*#__PURE__*/_jsx(NavItemElement, {
         ref: ref,
         href: href,
@@ -447,10 +491,13 @@ export function SideNavItem({
         isDisabled: isDisabled,
         onClick: handleClick,
         ...rest,
-        "aria-current": isSelected ? 'page' : undefined,
-        ...focusOutlineProps.focusVisible(styles.splitAction),
+        ...rowPrimaryAriaProps,
+        ...(hasActions ?
+        // The wrapper rings for this element; suppressing here is what
+        // keeps the UA's own ring from painting inside that one.
+        focusOutlineProps.suppressed(styles.splitAction) : focusOutlineProps.focusVisible(styles.splitAction)),
         children: itemContent
-      }), /*#__PURE__*/_jsx("button", {
+      }), hasIndependentToggle && /*#__PURE__*/_jsx("button", {
         type: "button",
         onClick: handleToggleClick,
         "aria-label": isItemCollapsed ? t('@astryx.sideNavItem.expand', {
@@ -460,13 +507,21 @@ export function SideNavItem({
         }),
         "aria-expanded": !isItemCollapsed,
         "aria-controls": `${id}-children`,
-        ...focusOutlineProps.focusVisible(styles.expandToggle),
+        ...focusOutlineProps.focusVisible(styles.expandToggle, interactionOverlayStyles.backgroundColor),
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "chevronDown",
           size: "lg",
           color: "inherit",
           xstyle: [styles.expandChevron, !isItemCollapsed && styles.expandChevronExpanded]
         })
+      }), hasActions && /*#__PURE__*/_jsx("span", {
+        ...{
+          className: "x2lah0s x78zum5 x6s0dn4 xzye2dw x67bb7w"
+        },
+        children: /*#__PURE__*/_jsx(SizeProvider, {
+          value: ROW_CONTROL_SIZE,
+          children: actions
+        })
       })]
     });
   } else {

package/dist/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAoS/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BAmnBlD;yBAnnBe,MAAM"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAQhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAoS/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BAgqBlD;yBAhqBe,MAAM"}

package/dist/Slider/Slider.js

@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/Slider.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Slider/ (showcase blocks)
  */
-import { useId, useMemo, useRef, useState, useCallback } from 'react';
+import { useEffect, useId, useMemo, useRef, useState, useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -25,6 +25,7 @@ import { useTooltip } from "../Tooltip/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { mergeProps, rtlStyles } from "../utils/index.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { getInteractionModality, trackInteractionModality } from "../utils/interactionModality.js";
 import { isRtlElement } from "../hooks/isRtlElement.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
@@ -249,6 +250,24 @@ export function Slider({
   const draggingThumbRef = useRef(null);
   const [draggingThumb, setDraggingThumb] = useState(null);
 
+  // A thumb is a div[role="slider"], and `handlePointerDown` focuses it from
+  // script after preventDefault — which Chromium treats as focus-visible, so
+  // dragging with a mouse drew the keyboard ring (measured: `:focus-visible`
+  // true on pointerdown). Gate the ring on how the user last interacted; the
+  // CSS condition stays `:focus-visible`, this only narrows it.
+  const [keyboardFocusThumb, setKeyboardFocusThumb] = useState(null);
+  useEffect(() => {
+    trackInteractionModality();
+  }, []);
+  const handleThumbFocus = useCallback((thumbIndex, _e) => {
+    // A disabled thumb draws no ring even when it stays focusable for its
+    // reason tooltip, so there is nothing to track for one.
+    setKeyboardFocusThumb(!isDisabled && getInteractionModality() === 'keyboard' ? thumbIndex : null);
+  }, [isDisabled]);
+  const handleThumbBlur = useCallback(_e => {
+    setKeyboardFocusThumb(null);
+  }, []);
+
   // Disabled-reason tooltip. This is a *separate* useTooltip instance from the
   // per-thumb value bubble (the `<Tooltip>` component below): it anchors to the
   // track container and fires on hover/focus of the whole control. Disabled
@@ -387,6 +406,10 @@ export function Slider({
       const thumbs = track.querySelectorAll('[role="slider"]');
       thumbs[thumbIndex]?.focus();
     }
+    // Also clear it explicitly: focusing an already-focused thumb fires no
+    // focus event, so a thumb the user had tabbed to would keep its ring
+    // through the drag.
+    setKeyboardFocusThumb(null);
     if (typeof e.currentTarget.setPointerCapture === 'function') {
       e.currentTarget.setPointerCapture(e.pointerId);
     }
@@ -411,6 +434,13 @@ export function Slider({
     if (isDisabled) {
       return;
     }
+    // Unlike a text field, a thumb has no caret to show where input is
+    // going, so a keypress after a mouse drag must bring the ring back.
+    // Ask the utility rather than assuming: a modifier chord (⌘R, ⌃C) is
+    // not navigation and must not re-ring a thumb the mouse is holding.
+    if (getInteractionModality() === 'keyboard') {
+      setKeyboardFocusThumb(thumbIndex);
+    }
     const currentVal = values[thumbIndex];
     let newVal;
     switch (e.key) {
@@ -517,10 +547,12 @@ export function Slider({
       "aria-labelledby": !isRange ? labelID : undefined,
       "aria-describedby": ariaDescribedBy,
       onKeyDown: e => handleKeyDown(thumbIndex, e),
+      onFocus: e => handleThumbFocus(thumbIndex, e),
+      onBlur: handleThumbBlur,
       ...mergeProps(themeProps('slider-thumb', {
         orientation,
         disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(styles.thumb, isHorizontal ? styles.thumbHorizontal : rtlStyles.centerInline('50%'), !isDisabled && styles.thumbHover, !isDisabled && focusOutlineStyles.focusVisible, isDisabled && styles.thumbDisabled), undefined, positionStyle)
+      }), stylex.props(styles.thumb, isHorizontal ? styles.thumbHorizontal : rtlStyles.centerInline('50%'), !isDisabled && styles.thumbHover, !isDisabled && keyboardFocusThumb === thumbIndex && focusOutlineStyles.focusVisible, isDisabled && styles.thumbDisabled), undefined, positionStyle)
     }, thumbIndex);
     if (useValueTooltip) {
       return /*#__PURE__*/_jsx(Tooltip, {

package/dist/Spinner/Spinner.d.ts

@@ -37,7 +37,9 @@ export interface SpinnerProps extends BaseProps<HTMLSpanElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLSpanElement>;
     /**
-     * Spinner size.
+     * Spinner size. The diameter is the ring itself; the rendered box adds the
+     * stroke width on each side (xl draws a 28px ring in a 36px box). A theme can
+     * redefine what each named size resolves to — see `--spinner-diameter`.
      * - 'sm': 10px diameter
      * - 'md': 14px diameter
      * - 'lg': 18px diameter

package/dist/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAe5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AAmIF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAW,EACX,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,SAAS,EACb,EAAE,YAAY,+BAsFd;yBAjGe,OAAO"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyB5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AA4TF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAW,EACX,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,SAAS,EACb,EAAE,YAAY,+BAuHd;yBAlIe,OAAO"}