@astryxdesign/core 0.7.2-canary.fbc03f7 → 0.7.2-canary.fdd384f

package/dist/TreeList/TreeListItem.js

@@ -13,13 +13,14 @@
  * - /packages/core/src/TreeList/TreeList.tsx
  * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
-import { useId, useMemo } from 'react';
+import { useId, useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { usePressFeedback } from "../hooks/usePressFeedback.js";
+import { hasInteractiveAncestor, useClickableContainer } from "../hooks/useClickableContainer.js";
 import { Icon } from "../Icon/index.js";
 import { mergeProps } from "../utils/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
@@ -38,6 +39,7 @@ const styles = {
     kmVPX3: "x1717udv",
     kVAEAm: "x1n2onr6",
     kzqmXN: "xh8yej3",
+    "--_tree-focus-z": "x70muob x1sk5w8o",
     kI3sdo: "x1a2a7pz",
     $$css: true
   },
@@ -51,7 +53,10 @@ const styles = {
     kVAEAm: "x1n2onr6",
     kB7OPa: "x9f619",
     k9WMMc: "x1yc453h",
-    keTefX: "x12vn87o",
+    $$css: true
+  },
+  focusLift: {
+    kY2c9j: "x6tapwc x3x83r7",
     $$css: true
   },
   interactive: {
@@ -177,6 +182,7 @@ export function TreeListItem({
   const labelId = useId();
   const descriptionId = useId();
   const LinkComponent = useLinkComponent();
+  const linkRef = useRef(null);
   const isInteractive = onClick != null || href != null;
   const handleToggle = useMemo(() => hasChildren && onToggle != null ? e => {
     e.stopPropagation();
@@ -188,8 +194,10 @@ export function TreeListItem({
         if (isDisabled) {
           return;
         }
-        const el = e.target;
-        if (el.closest('button, a, input, select, textarea')) {
+        // Controls inside the row, native or role-based, keep their own
+        // activation (FR7): the same rule link rows get from the shared
+        // enlarged-surface hook below.
+        if (hasInteractiveAncestor(e.target, e.currentTarget)) {
           return;
         }
         if (onClick != null) {
@@ -202,6 +210,38 @@ export function TreeListItem({
     return undefined;
   }, [onClick, hasChildren, onToggle, id, isDisabled]);
 
+  // A link row (an `href` and no other row action) is an enlarged surface for
+  // its link: the indent is part of the row, so a click anywhere in it must
+  // follow the link, as Enter already does. Built on the shared
+  // enlarged-surface hook (family:navigation-destinations), which skips
+  // clicks on nested controls, native or role-based, and text selections.
+  // - Clicks are delegated: the hook re-dispatches the click on the anchor
+  //   with its modifier keys, so the link component and the browser handle
+  //   same-tab, new-tab and new-window activation, and stops the original, so
+  //   ancestors see one click per press.
+  // - Middle-click has no synthetic equivalent, so it takes the hook's href
+  //   path, which opens the destination in a new tab after the shared
+  //   navigation rule.
+  // The container ref is attached to link rows only, so every other row stays
+  // a plain element and both hook instances stay inert on it.
+  const forwardsToLink = href != null && handleClick == null;
+  const linkRowRef = useRef(null);
+  const {
+    onClick: delegateToLink
+  } = useClickableContainer({
+    containerRef: linkRowRef,
+    interactiveRef: linkRef,
+    disabled: isDisabled || !forwardsToLink
+  });
+  const {
+    onMouseUp: openLinkOnMiddleClick
+  } = useClickableContainer({
+    containerRef: linkRowRef,
+    href,
+    target,
+    disabled: isDisabled || !forwardsToLink
+  });
+
   // Per-level indent distance. The per-level step is the public, themeable
   // `--tree-list-indent` lever (default `--spacing-4`, set on the tree-list
   // root). A leaf adds a fixed chevron-column offset (chevron width + gap) so
@@ -211,8 +251,8 @@ export function TreeListItem({
   // every row sits flush, like a parent at that level. That offset is tied to
   // the chevron's own dimensions, not the indent step, so it does not scale
   // with the lever. Published as the private `--_tree-indent` and consumed by
-  // `contentWrapper`'s stylesheet `margin-inline-start` (kept out of the inline
-  // style so the theme layer can override it — see #4308).
+  // `indentedContent`'s stylesheet `padding-inline-start`; the step stays
+  // themeable through `--tree-list-indent` (see #4308).
   const reservesChevronColumn = !hasChildren && hasExpandableItems;
   const indentDistance = reservesChevronColumn ? `calc(${nestedLevel} * var(--tree-list-indent) + ${spacingVars['--spacing-4']} + ${spacingVars['--spacing-2']})` : `calc(${nestedLevel} * var(--tree-list-indent))`;
   const indentStyle = {
@@ -308,6 +348,7 @@ export function TreeListItem({
       },
       children: startContent
     }), href != null ? /*#__PURE__*/_jsx(LinkComponent, {
+      ref: linkRef,
       href: href,
       target: target,
       "aria-disabled": isDisabled || undefined,
@@ -389,7 +430,7 @@ export function TreeListItem({
           density,
           selected: isSelected ? 'selected' : null,
           disabled: isDisabled ? 'disabled' : null
-        }), isInteractive || hasChildren && onClick == null ? focusOutlineProps.focusWithinOrPublished(styles.contentWrapper, densityStyles[density], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, isSelected && styles.selected, xstyle) : stylex.props(styles.contentWrapper, densityStyles[density], isDisabled && styles.disabled, isSelected && styles.selected, xstyle),
+        }), isInteractive || hasChildren && onClick == null ? focusOutlineProps.focusWithinOrPublished(styles.contentWrapper, styles.focusLift, densityStyles[density], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, isSelected && styles.selected, xstyle) : stylex.props(styles.contentWrapper, densityStyles[density], isDisabled && styles.disabled, isSelected && styles.selected, xstyle),
         // Consumer row props are merged last so useContainerReveal can
         // publish both its classes and inline custom properties. Seed the
         // private indent first, then preserve the standard inline-style
@@ -398,8 +439,15 @@ export function TreeListItem({
           ...indentStyle,
           ...style
         }),
-        onClick: handleClick,
-        children: innerContent
+        ref: forwardsToLink ? linkRowRef : undefined,
+        onClick: forwardsToLink ? delegateToLink : handleClick,
+        onMouseUp: forwardsToLink ? openLinkOnMiddleClick : undefined,
+        children: /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "x78zum5 x98rzlu xeuugli x1h91t0o x14kbac9 xw2xrtw"
+          },
+          children: innerContent
+        })
       })
     }), isExpanded && renderedChildren != null && /*#__PURE__*/_jsx("ul", {
       role: "group",

package/dist/astryx.css

@@ -174,6 +174,7 @@
   .x1ur4yav{--_thumbnail-hit-inset:0px}
   .x87gnkx{--_toast-slide-y:calc(-1 * var(--spacing-2))}
   .x1heqljd{--_toast-slide-y:var(--spacing-2)}
+  .x70muob{--_tree-focus-z:auto}
   .x16bblx1{--button-focus-offset:var(--focus-outline-offset)}
   .x1v15ycx{--button-icon-only-aspect:1 / 1}
   .x1mtvhk1{--color-syntax-background:transparent}
@@ -416,6 +417,7 @@
   .x1mjsb9v:focus-within{--_reveal-delay:0s,0s}
   .xi33vf3:focus-within{--_reveal-opacity:1}
   .xoa21yc:focus-within{--_reveal-position:static}
+  .x1sk5w8o:focus-visible{--_tree-focus-z:2}
   .x11woleg:focus-visible{--indicator-color:var(--color-accent)}
   .x1i79oho.x1i79oho:hover:where(:not(:disabled,[aria-disabled="true"])){--indicator-color:var(--resize-hint-gate,var(--color-accent))}
   .x1qs65gq:has(> [data-size="lg"]){--_field-status-overlap:calc(var(--size-element-lg) / 2)}
@@ -683,6 +685,7 @@
   .xpqajaz:not(#\#):not(#\#):not(#\#){align-items:end}
   .xuk3077:not(#\#):not(#\#):not(#\#){align-items:flex-end}
   .x1cy8zhl:not(#\#):not(#\#):not(#\#){align-items:flex-start}
+  .x1h91t0o:not(#\#):not(#\#):not(#\#){align-items:inherit}
   .xaz6w31:not(#\#):not(#\#):not(#\#){align-items:last baseline}
   .x7a106z:not(#\#):not(#\#):not(#\#){align-items:start}
   .x1qjc9v5:not(#\#):not(#\#):not(#\#){align-items:stretch}
@@ -1141,7 +1144,6 @@
   .xpdk1p0:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(calc(var(--spacing-4) + max(var(--astryx-layer-inset-inline-start, 0px), var(--astryx-layer-inset-inline-end, 0px))));margin-inline-start:calc(calc(max(var(--spacing-4), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) + max(var(--astryx-layer-inset-inline-start, 0px), var(--astryx-layer-inset-inline-end, 0px))))}
   .xch736x:not(#\#):not(#\#):not(#\#){margin-inline-start:max(var(--container-padding-inline-start,0px) - var(--_item-inset-inline),0px)}
   .x13hpdyo:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--_avatar-group-overlap)}
-  .x12vn87o:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--_tree-indent,0px)}
   .xladpz9:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--spacing-0-5)}
   .x17lnmll:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--spacing-1-5)}
   .x11g1kdw:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--spacing-1)}
@@ -1228,6 +1230,7 @@
   .xxjme2g:not(#\#):not(#\#):not(#\#){padding-inline-start:max(var(--container-padding-inline-start,0px),calc(100cqi - var(--layout-alignment-width) + var(--container-padding-inline-start,0px)))}
   .xua885n:not(#\#):not(#\#):not(#\#){padding-inline-start:max(var(--container-padding-inline-start,0px),var(--_item-inset-inline))}
   .xf4btlh:not(#\#):not(#\#):not(#\#){padding-inline-start:max(var(--spacing-4),env(safe-area-inset-left,0px))}
+  .xw2xrtw:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--_tree-indent,0px)}
   .xqmdmw:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--astryx-dialog-padding-inline-start,var(--astryx-dialog-padding-inline,var(--astryx-dialog-padding,max(var(--spacing-4),env(safe-area-inset-left,0px)))))}
   .x1jni19p:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--astryx-number-input-padding-inline-start,var(--astryx-number-input-padding-inline,var(--astryx-number-input-padding,var(--spacing-2))))}
   .x1c35znw:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--container-padding-inline-start)}
@@ -1355,6 +1358,8 @@
   .xsqj5wx:not(#\#):not(#\#):not(#\#){transform:var(--x-transform)}
   .xd00j3c:not(#\#):not(#\#):not(#\#){transition-behavior:allow-discrete}
   .x5h36tt:not(#\#):not(#\#):not(#\#){transition-delay:.15s}
+  .xf1rc6:not(#\#):not(#\#):not(#\#){transition-delay:0s,0s}
+  .xostmdb:not(#\#):not(#\#):not(#\#){transition-delay:0s,var(--duration-medium)}
   .x1ahifba:not(#\#):not(#\#):not(#\#){transition-delay:0s}
   .x4avkj2:not(#\#):not(#\#):not(#\#){transition-delay:var(--_fade-delay,0s)}
   .x1rq8cwj:not(#\#):not(#\#):not(#\#){transition-delay:var(--_reveal-delay,0s,0s)}
@@ -1370,6 +1375,7 @@
   .x1tw3moq:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast),0s}
   .xuedmi6:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast)}
   .xgneliz:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-medium-min)}
+  .x1eizr8u:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-medium),0s}
   .x80gvsz:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-medium)}
   .x1eaenvl:not(#\#):not(#\#):not(#\#){transition-property:background-color,border-color,color}
   .xts7igz:not(#\#):not(#\#):not(#\#){transition-property:background-color,border-color}
@@ -1392,6 +1398,7 @@
   .x1mpt4pi:not(#\#):not(#\#):not(#\#){transition-property:color,text-decoration}
   .xt3l3uh:not(#\#):not(#\#):not(#\#){transition-property:color}
   .xrgi2yo:not(#\#):not(#\#):not(#\#){transition-property:display}
+  .x6kj92:not(#\#):not(#\#):not(#\#){transition-property:grid-template-rows,overflow}
   .xjshnde:not(#\#):not(#\#):not(#\#){transition-property:grid-template-rows,padding}
   .x1qn9uv2:not(#\#):not(#\#):not(#\#){transition-property:grid-template-rows}
   .x157bb6t:not(#\#):not(#\#):not(#\#){transition-property:mask-image}
@@ -1446,6 +1453,7 @@
   .xzkaem6:not(#\#):not(#\#):not(#\#){z-index:3}
   .x6cuj84:not(#\#):not(#\#):not(#\#){z-index:500}
   .x1q2oy4v:not(#\#):not(#\#):not(#\#){z-index:9999}
+  .x6tapwc:not(#\#):not(#\#):not(#\#){z-index:var(--_tree-focus-z,auto)}
   .x1wphrdb[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#){--_press-overlay-transition:0s}
   .xbb2ue6[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#){--_press-overlay-transition:0s}
   .x11z29ks[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#){--astryx-press-alpha:1}
@@ -1541,6 +1549,7 @@
   .xxdn8bs:has(> div > .astryx-layout-content):not(#\#):not(#\#):not(#\#){padding-inline-end:max(0px,calc((100% - var(--layout-content-width)) / 2))}
   .xmnmr5y:has(.astryx-nav-icon):not(#\#):not(#\#):not(#\#){padding-inline-start:0}
   .x1vvd0s7:has(> div > .astryx-layout-content):not(#\#):not(#\#):not(#\#){padding-inline-start:max(0px,calc((100% - var(--layout-content-width)) / 2))}
+  .x3x83r7:has(:focus-visible):not(#\#):not(#\#):not(#\#){z-index:2}
   .xbw113y:dir(rtl):not(#\#):not(#\#):not(#\#){transform:translateX(-100%)}
   .x1eqdj8u:dir(rtl):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}
   .x1xrp5p4:first-child:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-element)}
@@ -1602,6 +1611,7 @@
   @media (pointer: coarse){.x1bjav06.x1bjav06:not(#\#):not(#\#):not(#\#){pointer-events:none}}
   @media (prefers-reduced-motion: reduce){.xg83hb1.xg83hb1:not(#\#):not(#\#):not(#\#){scroll-behavior:auto}}
   @media (forced-colors: active){.xrih18v.xrih18v:not(#\#):not(#\#):not(#\#){scrollbar-color:auto}}
+  @media (prefers-reduced-motion: reduce){.x1k6wr6r.x1k6wr6r:not(#\#):not(#\#):not(#\#){transition-delay:0s,0s}}
   @media (prefers-reduced-motion: reduce){.xwgk2z2.xwgk2z2:not(#\#):not(#\#):not(#\#){transition-delay:var(--_reveal-delay-reduced,0s,0s)}}
   @media (prefers-reduced-motion: reduce){.xsagj69.xsagj69:not(#\#):not(#\#):not(#\#){transition-duration:.01ms}}
   @media (prefers-reduced-motion: reduce){.xzg1mie.xzg1mie:not(#\#):not(#\#):not(#\#){transition-duration:.01s}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.2-canary.fbc03f7",
+  "version": "0.7.2-canary.fdd384f",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -792,8 +792,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.2-canary.fbc03f7",
-    "@astryxdesign/cli": "0.7.2-canary.fbc03f7",
+    "@astryxdesign/a11y-spec": "0.7.2-canary.fdd384f",
+    "@astryxdesign/cli": "0.7.2-canary.fdd384f",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/AppShell/AppShell.tsx

@@ -43,6 +43,7 @@ import {LayoutHeader} from '../Layout/LayoutHeader';
 import {LayoutPanel} from '../Layout/LayoutPanel';
 import {LayoutContent} from '../Layout/LayoutContent';
 import {MobileNavToggle} from '../MobileNav/MobileNavToggle';
+import {MAX_CLOSE_DELAY_MS as MOBILE_NAV_MAX_CLOSE_DELAY_MS} from '../MobileNav/MobileNav';
 import {SideNavRenderContext} from '../SideNav/SideNavRenderContext';
 import {TopNavRenderContext} from '../TopNav/TopNavRenderContext';
 import {TopNavMobileContentContext} from '../TopNav/TopNavMobileContentContext';
@@ -81,6 +82,20 @@ const ActivityWrapper = HasActivity
 
 const MAIN_CONTENT_ID = 'astryx-app-shell-main';
 
+/**
+ * Extra time, on top of MobileNav's own worst-case close delay, that
+ * AppShell waits before flipping its `Activity` boundary to `'hidden'`.
+ *
+ * React's `Activity` hides its subtree with `display: none !important`
+ * synchronously in the same commit as the mode flip, and re-runs the
+ * cleanup of every effect inside it — which would otherwise clear
+ * MobileNav's own scheduled `dialog.close()` before it fires, or cut off
+ * its slide-out CSS transition before it plays (#5701). Waiting strictly
+ * longer than MobileNav's own cap, rather than the same duration, means
+ * this never turns into a race decided by browser timer-firing order.
+ */
+const ACTIVITY_HIDE_BUFFER_MS = 50;
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -525,6 +540,34 @@ export function AppShell({
   const [uncontrolledMobileOpen, setUncontrolledMobileOpen] = useState(false);
   const isMobileNavOpen = mobileNavConfig?.isOpen ?? uncontrolledMobileOpen;
 
+  // Holds the mobile nav's `Activity` boundary visible for a beat after a
+  // close, so MobileNav's own close effect gets a real chance to run its
+  // slide-out transition and schedule its delayed `dialog.close()` before
+  // Activity hides the subtree (#5701). Only the CLOSE is deferred: opening
+  // reads `isMobileNavOpen` directly below, so a controlled open is visible in
+  // the commit that carries it instead of one effect later.
+  const [isMobileNavCloseHeld, setIsMobileNavCloseHeld] =
+    useState(isMobileNavOpen);
+  // Arm the hold during render, from the open state itself, so no Effect has
+  // to copy props into state; the Effect below only owns the release timer.
+  if (isMobileNavOpen && !isMobileNavCloseHeld) {
+    setIsMobileNavCloseHeld(true);
+  }
+  useEffect(() => {
+    if (!HasActivity || isMobileNavOpen) {
+      return;
+    }
+    const delayMs = window.matchMedia('(prefers-reduced-motion: reduce)')
+      .matches
+      ? 0
+      : MOBILE_NAV_MAX_CLOSE_DELAY_MS + ACTIVITY_HIDE_BUFFER_MS;
+    const timeout = setTimeout(() => {
+      setIsMobileNavCloseHeld(false);
+    }, delayMs);
+    return () => clearTimeout(timeout);
+  }, [isMobileNavOpen]);
+  const isMobileNavActivityVisible = isMobileNavOpen || isMobileNavCloseHeld;
+
   const mobileNavOnOpenChange = mobileNavConfig?.onOpenChange;
   const setMobileNavOpen = useCallback(
     (open: boolean) => {
@@ -864,7 +907,8 @@ export function AppShell({
           !mobileNavDisabled &&
           mobileNavReactNode == null &&
           !mobileNavConfigContent && (
-            <ActivityWrapper mode={isMobileNavOpen ? 'visible' : 'hidden'}>
+            <ActivityWrapper
+              mode={isMobileNavActivityVisible ? 'visible' : 'hidden'}>
               {/* SideNav drawer — always mounted so presence detection works.
                 Hidden when TopNav owns the drawer (combined mode passes
                 sideNav via TopNav's mobile content context instead). */}

package/src/Breadcrumbs/Breadcrumbs.test.tsx

@@ -7,12 +7,13 @@ import {Breadcrumbs} from './Breadcrumbs';
 import {BreadcrumbItem} from './BreadcrumbItem';
 import {
   BreadcrumbMenuItem,
+  BreadcrumbMenuDivider,
   BreadcrumbMenuGroup,
   BreadcrumbMenuCheckboxItem,
   BreadcrumbMenuRadioGroup,
   BreadcrumbMenuRadioItem,
 } from './index';
-import type {BreadcrumbMenuOption} from './index';
+import type {BreadcrumbMenuDividerProps, BreadcrumbMenuOption} from './index';
 import {LinkProvider} from '../Link/LinkProvider';
 
 function CustomLink({
@@ -771,6 +772,34 @@ describe('BreadcrumbItem menu', () => {
     expect(separators).toHaveLength(3);
   });
 
+  it('renders the separator and props types through the BreadcrumbMenuDivider aliases', async () => {
+    const user = userEvent.setup();
+    const dividerProps: BreadcrumbMenuDividerProps = {
+      'data-testid': 'breadcrumb-menu-divider',
+    };
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem
+          menu={
+            <>
+              <BreadcrumbMenuItem label="Overview" />
+              <BreadcrumbMenuDivider {...dividerProps} />
+              <BreadcrumbMenuItem label="Settings" />
+            </>
+          }>
+          Project
+        </BreadcrumbItem>
+        <BreadcrumbItem isCurrent>Current</BreadcrumbItem>
+      </Breadcrumbs>,
+    );
+    await user.click(screen.getByRole('button', {name: 'Project'}));
+
+    expect(screen.getByTestId('breadcrumb-menu-divider')).toHaveAttribute(
+      'role',
+      'separator',
+    );
+  });
+
   it('carries the group semantics through the BreadcrumbMenuGroup alias', async () => {
     // The alias must bring the semantics, not just the component: a group
     // that renders but is not named leaves a screen reader with a run of

package/src/Card/Card.doc.mjs

@@ -83,7 +83,7 @@ export const docs = {
       code: `
 import {Card} from '@astryxdesign/core/Card';
 import {Grid} from '@astryxdesign/core/Grid';
-import {VStack} from '@astryxdesign/core/Layout';
+import {VStack} from '@astryxdesign/core/VStack';
 import {Heading} from '@astryxdesign/core/Heading';
 import {Text} from '@astryxdesign/core/Text';
 

package/src/CommandPalette/CommandPaletteInput.test.tsx

@@ -8,12 +8,19 @@
  */
 
 import {createRef} from 'react';
-import {describe, it, expect, vi} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen, fireEvent, act} from '@testing-library/react';
+import * as stylex from '@stylexjs/stylex';
 import {CommandPaletteInput} from './CommandPaletteInput';
 import {CommandPaletteContext} from './CommandPaletteContext';
 import {Dialog} from '../Dialog';
 import type {CommandPaletteContextValue} from './CommandPaletteContext';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
+import {__resetInteractionModalityForTest} from '../utils/interactionModality';
+
+beforeEach(() => {
+  __resetInteractionModalityForTest();
+});
 
 function makeContext(
   overrides: Partial<CommandPaletteContextValue> = {},
@@ -279,6 +286,45 @@ describe('CommandPaletteInput', () => {
     },
   );
 
+  it('draws the shared ring only when keyboard navigation acquired focus', () => {
+    render(<CommandPaletteInput hasAutoFocus={false} />);
+    const input = screen.getByRole('searchbox');
+    const ringClasses = stylex
+      .props(focusOutlineStyles.focusVisible)
+      .className!.split(' ');
+    const isRinged = () =>
+      ringClasses.every(className => input.classList.contains(className));
+
+    fireEvent.pointerDown(input);
+    fireEvent.focus(input);
+    expect(isRinged()).toBe(false);
+
+    fireEvent.blur(input);
+    fireEvent.keyDown(input, {key: 'Tab'});
+    fireEvent.focus(input);
+    expect(isRinged()).toBe(true);
+  });
+
+  it('preserves caller focus and blur handlers while tracking modality', () => {
+    const onFocus = vi.fn();
+    const onBlur = vi.fn();
+    render(
+      <CommandPaletteInput
+        hasAutoFocus={false}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />,
+    );
+    const input = screen.getByRole('searchbox');
+
+    fireEvent.keyDown(input, {key: 'Tab'});
+    fireEvent.focus(input);
+    fireEvent.blur(input);
+
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
   it('does not schedule focus when hasAutoFocus is false', async () => {
     const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus');
     render(<CommandPaletteInput hasAutoFocus={false} />);
@@ -481,8 +527,11 @@ describe('CommandPaletteInput popup context', () => {
       </CommandPaletteContext>,
     );
 
-    await vi.waitFor(() => {
-      expect(screen.getByRole('combobox')).toHaveFocus();
+    await act(async () => {
+      await new Promise<void>(resolve =>
+        requestAnimationFrame(() => resolve()),
+      );
     });
+    expect(screen.getByRole('combobox')).toHaveFocus();
   });
 });

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -13,7 +13,7 @@
  * - /packages/cli/assets/templates/blocks/components/CommandPalette/ (showcase blocks)
  */
 
-import {useCallback, useEffect, useRef, type ReactNode} from 'react';
+import {useCallback, useEffect, useRef, useState, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
@@ -28,6 +28,11 @@ import {useCommandPaletteContext} from './CommandPaletteContext';
 import {useDialogContext} from '../Dialog/DialogContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {
+  getInteractionModality,
+  useInteractionModalityTracking,
+} from '../utils/interactionModality';
 import {useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
@@ -71,7 +76,6 @@ const styles = stylex.create({
     minWidth: 0,
     borderWidth: 0,
     borderStyle: 'none',
-    outline: 'none',
     backgroundColor: 'transparent',
     color: colorVars['--color-text-primary'],
     fontFamily: typographyVars['--font-family-body'],
@@ -169,6 +173,8 @@ export function CommandPaletteInput({
   endContent,
   onChange,
   onKeyDown,
+  onFocus,
+  onBlur,
   ref,
   xstyle,
   className,
@@ -184,6 +190,26 @@ export function CommandPaletteInput({
   const hasListbox = ctx ? ctx.selectableItems.length > 0 : true;
   const dialogContext = useDialogContext();
   const inputRef = useRef<HTMLInputElement>(null);
+  const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);
+
+  // Text-entry controls match :focus-visible after pointer focus in Chromium.
+  // Keep the shared selector, but narrow its ring to focus acquired through
+  // keyboard navigation so a click or pointer-opened palette stays unringed.
+  useInteractionModalityTracking();
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      setIsKeyboardFocus(getInteractionModality() === 'keyboard');
+      onFocus?.(event);
+    },
+    [onFocus],
+  );
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      setIsKeyboardFocus(false);
+      onBlur?.(event);
+    },
+    [onBlur],
+  );
 
   // Use context values as fallback
   const value = controlledValue ?? ctx?.search;
@@ -259,7 +285,9 @@ export function CommandPaletteInput({
       <input
         {...props}
         ref={useMergedRefs(ref, inputRef)}
-        {...stylex.props(styles.input)}
+        {...(isKeyboardFocus
+          ? focusOutlineProps.focusVisible(styles.input)
+          : focusOutlineProps.suppressed(styles.input))}
         type="text"
         role={ctx ? 'combobox' : standaloneRole}
         aria-expanded={
@@ -300,6 +328,8 @@ export function CommandPaletteInput({
           onChange?.(e);
         }}
         onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
       />
       {(ctx?.isBusy || hasEndContent) && (
         <span {...stylex.props(styles.end)}>