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

package/dist/utils/interactionModality.js

@@ -0,0 +1,70 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file interactionModality.ts
+ * @input Global pointerdown/keydown events
+ * @output `getInteractionModality()` — how the user last interacted
+ * @position Internal utility; used where `:focus-visible` alone is too broad
+ *
+ * `:focus-visible` is the right selector for a focus ring and should stay the
+ * condition that draws one. It is not, on its own, "focused by keyboard":
+ * per CSS Selectors 4 a pointer-focused element that supports text entry
+ * matches it too, deliberately, so that a clicked text field still shows where
+ * typing will go. Measured in Chromium — a bare `<input>` clicked with a mouse
+ * matches `:focus-visible`.
+ *
+ * A component that wants a ring for keyboard focus ONLY therefore needs one bit
+ * `:focus-visible` cannot give it: which device moved focus. This records that,
+ * to be used as a gate ALONGSIDE `:focus-visible`, never as a replacement for
+ * it — the browser's heuristic still decides everything else, including
+ * `focus({focusVisible: true})`.
+ *
+ * Listeners are registered once for the document, in the capture phase so they
+ * run before the focus they explain, and are never removed: two passive
+ * listeners for the whole app, versus a pair per mounted input.
+ */
+
+// Default to keyboard: with no interaction yet, focus arrived programmatically
+// or from the browser restoring it, and showing a ring is the safe error.
+let modality = 'keyboard';
+let isListening = false;
+function onPointerDown() {
+  modality = 'pointer';
+}
+function onKeyDown(event) {
+  // Modifier-only presses are not navigation — holding Shift before a click
+  // must not turn that click into "keyboard".
+  if (event.metaKey || event.altKey || event.ctrlKey) {
+    return;
+  }
+  modality = 'keyboard';
+}
+
+/**
+ * Start tracking, once per document. Safe to call repeatedly and on the server
+ * (where it does nothing).
+ */
+export function trackInteractionModality() {
+  if (isListening || typeof document === 'undefined') {
+    return;
+  }
+  isListening = true;
+  document.addEventListener('pointerdown', onPointerDown, {
+    capture: true,
+    passive: true
+  });
+  document.addEventListener('keydown', onKeyDown, {
+    capture: true,
+    passive: true
+  });
+}
+
+/** How the user last interacted with the page. */
+export function getInteractionModality() {
+  return modality;
+}
+
+/** Test-only: restore the initial state between cases. */
+export function __resetInteractionModalityForTest() {
+  modality = 'keyboard';
+}

package/locales/en.json

@@ -639,6 +639,10 @@
     "defaultMessage": "Clear {label}",
     "description": "Aria label for the clear-value button in DateInput / DateRangeInput / DateTimeInput. `{label}` is the field's own label so screen readers announce e.g. 'Clear Start date'."
   },
+  "@astryx.dateInput.invalidDate": {
+    "defaultMessage": "Invalid date",
+    "description": "Screen-reader-only live-region alert in DateInput / DateTimeInput when the typed date cannot be parsed. The field silently reverts on blur, so this is the only rejection feedback a screen-reader user gets."
+  },
   "@astryx.dateTimeInput.timeSuffix": {
     "defaultMessage": "{label} time",
     "description": "Screen-reader-only accessible name for the time-of-day slot in a DateTimeInput. Example: `Start date time`; reorder freely (e.g. \"time of {label}\")."
@@ -711,6 +715,10 @@
     "defaultMessage": "Select a time",
     "description": "\"Time\" = clock time (HH:MM), not duration or era. Grey placeholder inside an empty TimeInput field; imperative verb."
   },
+  "@astryx.timeInput.invalidTime": {
+    "defaultMessage": "Invalid time",
+    "description": "Screen-reader-only live-region alert in TimeInput / DateTimeInput when the typed time cannot be parsed. \"Time\" = clock time (HH:MM). The field silently reverts on blur, so this is the only rejection feedback a screen-reader user gets."
+  },
   "@astryx.topNav.heading.dialogLabel": {
     "defaultMessage": "Navigation menu",
     "description": "Screen-reader-only accessible name for the dropdown dialog opened from a TopNavHeading's overflow menu. Kept separate from the SideNav sibling."
@@ -807,6 +815,38 @@
     "defaultMessage": "Clear {label}",
     "description": "Screen-reader-only label on the X that removes the selected file from a FileInput. Example: `Clear Attachment`, `Clear Résumé`."
   },
+  "@astryx.fileInput.dropHint": {
+    "defaultMessage": "Drop files here",
+    "description": "Text shown in the dropzone area when a user is dragging files over the FileInput."
+  },
+  "@astryx.fileInput.errorInvalidType": {
+    "defaultMessage": "\"{fileName}\" is not an accepted file type",
+    "description": "Validation error shown when a selected file does not match the accepted types."
+  },
+  "@astryx.fileInput.errorMaxFiles": {
+    "defaultMessage": "Maximum {maxFiles} files allowed",
+    "description": "Validation error shown when the number of selected files exceeds the maximum."
+  },
+  "@astryx.fileInput.errorMaxSize": {
+    "defaultMessage": "\"{fileName}\" exceeds {maxSize} limit",
+    "description": "Validation error shown when a selected file exceeds the maximum size. {maxSize} is a formatted size string like \"2.0 MB\"."
+  },
+  "@astryx.fileInput.fileSelected": {
+    "defaultMessage": "1 file selected: {fileName}",
+    "description": "Live-region announcement when a single file is successfully selected."
+  },
+  "@astryx.fileInput.filesSelected": {
+    "defaultMessage": "{count} files selected",
+    "description": "Live-region announcement when multiple files are successfully selected."
+  },
+  "@astryx.fileInput.placeholder": {
+    "defaultMessage": "Choose file",
+    "description": "Default placeholder text shown when no file is selected in a single-file FileInput."
+  },
+  "@astryx.fileInput.placeholderMultiple": {
+    "defaultMessage": "Choose files",
+    "description": "Default placeholder text shown when no files are selected in a multi-file FileInput."
+  },
   "@astryx.fileInput.required": {
     "defaultMessage": "Required",
     "description": "Screen-reader-only description on the FileInput trigger indicating the field must be filled in. Mirrors the visible `Required` indicator next to the field label; conveyed via description because aria-required is not supported on role=\"button\"."
@@ -895,6 +935,10 @@
     "defaultMessage": "Collapse {label}",
     "description": "Screen-reader-only label on the same chevron when the group is expanded. Example: `Collapse Settings`. Pairs with `sideNavItem.expand`."
   },
+  "@astryx.sideNavItem.submenuLabel": {
+    "defaultMessage": "{label} submenu",
+    "description": "Accessible name for the flyout dialog that opens from a collapsed (icon-only) SideNav item to show its sub-items. {label} is the parent item's label. Example: `Settings submenu`."
+  },
   "@astryx.tableFiltering.filterByColumn": {
     "defaultMessage": "Filter {header}",
     "description": "Triple-use string on per-column filter controls: visible label, placeholder, AND aria label. `{header}` is the column header — example: `Filter Name`. Keep short."

package/locales/pseudo.json

@@ -479,6 +479,9 @@
   "@astryx.dateInput.clear": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },
+  "@astryx.dateInput.invalidDate": {
+    "defaultMessage": "⟦Íñṽàłíð ðàţé⟧"
+  },
   "@astryx.dateTimeInput.timeSuffix": {
     "defaultMessage": "⟦{label} ţíɱé⟧"
   },
@@ -533,6 +536,9 @@
   "@astryx.timeInput.placeholder": {
     "defaultMessage": "⟦Šéłéçţ à ţíɱé⟧"
   },
+  "@astryx.timeInput.invalidTime": {
+    "defaultMessage": "⟦Íñṽàłíð ţíɱé⟧"
+  },
   "@astryx.topNav.heading.dialogLabel": {
     "defaultMessage": "⟦Ñàṽíĝàţíóñ ɱéñú⟧"
   },
@@ -605,6 +611,30 @@
   "@astryx.fileInput.clearLabel": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },
+  "@astryx.fileInput.dropHint": {
+    "defaultMessage": "⟦Ðřóþ ƒíłéš ĥéřé⟧"
+  },
+  "@astryx.fileInput.errorInvalidType": {
+    "defaultMessage": "⟦\"{fileName}\" íš ñóţ àñ àççéþţéð ƒíłé ţýþé⟧"
+  },
+  "@astryx.fileInput.errorMaxFiles": {
+    "defaultMessage": "⟦Ṁàẋíɱúɱ {maxFiles} ƒíłéš àłłóŵéð⟧"
+  },
+  "@astryx.fileInput.errorMaxSize": {
+    "defaultMessage": "⟦\"{fileName}\" éẋçééðš {maxSize} łíɱíţ⟧"
+  },
+  "@astryx.fileInput.fileSelected": {
+    "defaultMessage": "⟦1 ƒíłé šéłéçţéð: {fileName}⟧"
+  },
+  "@astryx.fileInput.filesSelected": {
+    "defaultMessage": "⟦{count} ƒíłéš šéłéçţéð⟧"
+  },
+  "@astryx.fileInput.placeholder": {
+    "defaultMessage": "⟦Çĥóóšé ƒíłé⟧"
+  },
+  "@astryx.fileInput.placeholderMultiple": {
+    "defaultMessage": "⟦Çĥóóšé ƒíłéš⟧"
+  },
   "@astryx.fileInput.required": {
     "defaultMessage": "⟦Řéɋúířéð⟧"
   },
@@ -671,6 +701,9 @@
   "@astryx.sideNavItem.collapse": {
     "defaultMessage": "⟦Çółłàþšé {label}⟧"
   },
+  "@astryx.sideNavItem.submenuLabel": {
+    "defaultMessage": "⟦{label} šúƀɱéñú⟧"
+  },
   "@astryx.tableFiltering.filterByColumn": {
     "defaultMessage": "⟦Ƒíłţéř {header}⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.4.0",
+  "version": "0.4.1-canary.1ce0b4c",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -654,6 +654,7 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
+    "@astryxdesign/cli": "0.4.1-canary.1ce0b4c",
     "@babel/cli": "^8.0.4",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^8.0.1",
@@ -662,8 +663,7 @@
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
-    "rimraf": "^6.0.1",
-    "@astryxdesign/cli": "0.4.0"
+    "rimraf": "^6.0.1"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/AppShell/AppShell.doc.mjs

@@ -203,8 +203,11 @@ export const docsDense = {
     bestPractices: [
       {guidance: true, description: 'Choose the right height: use "fill" for dashboards with internal scrolling and "auto" for pages that grow with content.'},
       {guidance: true, description: 'Set `contentPadding` based on content type: 4 for forms and settings, 0 for tables and dashboards.'},
+      {guidance: true, description: 'Give every nav slot an accessible name: TopNav and SideNav are separate navigation landmarks, so pass `label` to each.'},
+      {guidance: true, description: 'Start the page heading inside `children`: AppShell owns the skip link, banner, and main landmarks but renders no heading, so the first content heading is the page h1.'},
       {guidance: false, description: "Nest one AppShell inside another; it's the outermost layout frame."},
       {guidance: false, description: 'Use for sub-page layouts; use Layout for content areas within AppShell.'},
+      {guidance: false, description: 'Add your own skip link or <main>; AppShell renders both, and a second main landmark makes the first ambiguous.'},
     ],
   },
   propDescriptions: {

package/src/AspectRatio/AspectRatio.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file AspectRatio.tsx
  * @input Uses React, stylex

package/src/AspectRatio/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports from AspectRatio.tsx

package/src/Badge/Badge.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Badge.tsx
  * @input Uses React, HTMLAttributes

package/src/Badge/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports Badge component and types from Badge.tsx

package/src/Banner/Banner.test.tsx

@@ -3,7 +3,8 @@
 /**
  * @file Banner.test.tsx
  * @input Uses vitest, @testing-library/react, Banner component
- * @output Unit tests for Banner component behavior
+ * @output Unit tests for Banner component behavior, including the
+ *   'banner-icon' theme target riding on the status icon glyph (#4166)
  * @position Testing; validates Banner.tsx implementation
  *
  * SYNC: When modified, update this header
@@ -337,6 +338,62 @@ describe('Banner', () => {
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
   });
 
+  // =========================================================================
+  // Status icon color theming (#4166)
+  // =========================================================================
+
+  it("carries the 'banner-icon' theme target on the default status icon glyph", () => {
+    // Theme overrides for 'banner-icon' + 'status:X' compile to
+    // '.astryx-banner-icon.<status>' (parseStyleKey). The target must sit on
+    // the <Icon> span itself so those same-element rules in
+    // @layer astryx-theme beat the Icon's own color variant.
+    const statuses = ['info', 'warning', 'error', 'success'] as const;
+    for (const status of statuses) {
+      const {container, unmount} = render(
+        <Banner status={status} title={`${status} banner`} />,
+      );
+      const glyph = container.querySelector(
+        `.astryx-icon.astryx-banner-icon.${status}`,
+      );
+      expect(glyph).not.toBeNull();
+      expect(glyph).toHaveAttribute('data-status', status);
+      // Exactly one element carries the target — the layout wrapper no
+      // longer does.
+      expect(container.querySelectorAll('.astryx-banner-icon')).toHaveLength(1);
+      unmount();
+    }
+  });
+
+  it('keeps the color variant on the theme-target element (regression pin for #4166)', () => {
+    // Pre-fix, '.astryx-banner-icon.info' matched the layout wrapper while
+    // the color variant (data-color="accent") sat on an inner span that a
+    // theme override could never reach. Target and paint now share one
+    // element.
+    const {container} = render(<Banner status="info" title="Info" />);
+    const target = container.querySelector('.astryx-banner-icon.info');
+    expect(target).toHaveAttribute('data-color', 'accent');
+  });
+
+  it("keeps the 'banner-icon' target on the wrapper for a custom icon node", () => {
+    // Core never injects props into consumer elements, so with a custom
+    // `icon` the target stays on the (layout-only) wrapper and overrides
+    // reach the node via inheritance. The node itself is untouched.
+    const {container} = render(
+      <Banner
+        status="info"
+        title="Custom icon"
+        icon={<span data-testid="custom-glyph">i</span>}
+      />,
+    );
+    const targets = container.querySelectorAll('.astryx-banner-icon');
+    expect(targets).toHaveLength(1);
+    expect(targets[0]?.tagName).toBe('DIV');
+    expect(targets[0]).toHaveAttribute('aria-hidden', 'true');
+    const custom = container.querySelector('[data-testid="custom-glyph"]');
+    expect(custom).not.toBeNull();
+    expect(custom?.className).toBe('');
+  });
+
   // =========================================================================
   // Icon registry integration
   // =========================================================================

package/src/Banner/Banner.tsx

@@ -12,6 +12,9 @@
  * - Root container: layout-only wrapper (flex column), no visual styling, no theme target
  * - Header area (themeProps 'banner'): colored status background with icon, title, description, actions, dismiss
  * - Content area (themeProps 'banner-content'): collapsible card background for additional content (children)
+ * - Status icon (themeProps 'banner-icon'): the target rides on the default
+ *   <Icon> itself — the element that paints — so 'status:X' overrides reach
+ *   the glyph (#4166); for a custom `icon` node it stays on the layout wrapper
  * - No left border accent — color is expressed through the full header background
  * - Each visual area owns its own border-radius (no overflow:clip on the container)
  * - When children are provided, a collapse/expand toggle button appears in the end area
@@ -445,16 +448,32 @@ export function Banner({
                 : styles.headerCardStandalone),
           ),
         )}>
+        {/* The 'banner-icon' target rides on the element that paints: the
+            default <Icon> below, or this wrapper when a custom `icon` node
+            is passed (core never injects props into consumer elements, so
+            overrides reach it via inheritance). The wrapper itself stays
+            layout-only. */}
         <div
-          {...mergeProps(
-            themeProps('banner-icon', {status}),
-            stylex.props(styles.iconWrapper),
-          )}
+          {...(icon != null
+            ? mergeProps(
+                themeProps('banner-icon', {status}),
+                stylex.props(styles.iconWrapper),
+              )
+            : stylex.props(styles.iconWrapper))}
           aria-hidden="true">
           {icon != null ? (
             icon
           ) : (
-            <Icon icon={defaultIconName} size="md" color={iconColor} />
+            // Applied to the status <Icon> itself rather than the wrapper, so
+            // the element that paints the glyph is the element a theme
+            // targets — a 'banner-icon' 'status:X' color override beats the
+            // Icon's own variant from @layer astryx-theme (#4166).
+            <Icon
+              icon={defaultIconName}
+              size="md"
+              color={iconColor}
+              {...themeProps('banner-icon', {status})}
+            />
           )}
         </div>
         <div {...stylex.props(styles.headerContent)}>

package/src/Blockquote/Blockquote.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Blockquote.tsx
  * @input Uses React, stylex, spacing and color tokens

package/src/Blockquote/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports from Blockquote.tsx

package/src/Button/Button.doc.mjs

@@ -163,7 +163,7 @@ export const docs = {
     ],
     vars: [
       {name: '--_button-radius', description: 'Border radius', default: 'var(--radius-element)', private: true},
-      {name: '--button-focus-offset', description: 'Focus ring outline offset', default: '3px'},
+      {name: '--button-focus-offset', description: 'Focus ring outline offset', default: 'var(--focus-outline-offset)'},
       {name: '--button-icon-only-aspect', description: 'Aspect ratio for icon-only buttons', default: '1 / 1'},
     ],
     derived: [
@@ -245,7 +245,7 @@ export const docsZh = {
     ],
     vars: [
       {name: '--_button-radius', description: '圆角半径', default: 'var(--radius-element)', private: true},
-      {name: '--button-focus-offset', description: '焦点环轮廓偏移', default: '3px'},
+      {name: '--button-focus-offset', description: '焦点环轮廓偏移', default: 'var(--focus-outline-offset)'},
       {name: '--button-icon-only-aspect', description: '纯图标按钮的宽高比', default: '1 / 1'},
     ],
     derived: [

package/src/Button/Button.tsx

@@ -34,6 +34,7 @@ import {
   fontWeightVars,
   typeScaleVars,
   shadowVars,
+  focusVars,
 } from '../theme/tokens.stylex';
 import {Spinner} from '../Spinner';
 import {VisuallyHidden} from '../VisuallyHidden';
@@ -57,10 +58,10 @@ import type {ButtonVariantMap} from './index';
 const styles = stylex.create({
   base: {
     // Kept as a public themeable var (documented in Button.doc.mjs) even though
-    // its default now matches the shared outline: removing it would break any
-    // theme setting it, for no gain. It overrides the shared offset, so a theme
-    // can still tune the ring distance on buttons specifically.
-    '--button-focus-offset': '3px',
+    // it now defaults to the shared token: removing it would break any theme
+    // setting it, for no gain. It overrides the shared offset, so a theme can
+    // still tune the ring distance on buttons specifically.
+    '--button-focus-offset': focusVars['--focus-outline-offset'],
     outlineOffset: {
       default: '0',
       ':focus-visible': 'var(--button-focus-offset)',
@@ -437,8 +438,10 @@ const loadingStyles = stylex.create({
  *
  * Layers always carry the native `popover` attribute (useLayer.tsx), and a
  * popover is never an in-flow member — it is `display: none` until shown, then
- * promoted to the top layer. So "last member" is: no following element sibling
- * that isn't a popover.
+ * promoted to the top layer. Context layers also retain an inert `<template>`
+ * marker so they can re-resolve their JSX position. Neither element is a group
+ * member, so "last member" is: no following element sibling besides those two
+ * pieces of layer infrastructure.
  *
  * Reading it the other way round — marking the *buttons* and testing for a
  * marked sibling — is the trap: it silently reclassifies anything it doesn't
@@ -454,7 +457,7 @@ const loadingStyles = stylex.create({
  * The leading edge still uses `:first-child` — a member's button always precedes
  * its own layer, so the first button is genuinely `:first-child`.
  */
-const IS_LAST_ITEM = ':not(:has(~ *:not([popover])))';
+const IS_LAST_ITEM = ':not(:has(~ *:not([popover]):not(template)))';
 
 const groupStyles = stylex.create({
   horizontal: {

package/src/ButtonGroup/ButtonGroup.test.tsx

@@ -202,9 +202,9 @@ describe('ButtonGroup', () => {
   // Trailing radius (issue #2508)
   //
   // The trailing end cap cannot be keyed off `:last-child`: members render an
-  // invisible layer AFTER their button (tooltip'd Button, DropdownMenu), and
-  // useLayer renders it inline rather than portaling it, so the layer steals the
-  // slot. See IS_LAST_ITEM in Button.tsx.
+  // invisible layer infrastructure AFTER their button (tooltip'd Button,
+  // DropdownMenu), and useLayer renders a marker plus the layer inline when the
+  // host is safe, so they steal the slot. See IS_LAST_ITEM in Button.tsx.
   //
   // HOW THESE TESTS CATCH THE BUG
   // jsdom applies no StyleX CSS, so a DOM-only test cannot prove which rule
@@ -219,7 +219,9 @@ describe('ButtonGroup', () => {
   describe('trailing radius (#2508)', () => {
     /** The group members, in DOM order (excludes invisible layer siblings). */
     const items = (group: HTMLElement): Element[] =>
-      Array.from(group.querySelectorAll(':scope > *:not([popover])'));
+      Array.from(
+        group.querySelectorAll(':scope > *:not([popover]):not(template)'),
+      );
 
     // -- Compiled CSS, read from the source -----------------------------------
 
@@ -375,6 +377,7 @@ describe('ButtonGroup', () => {
           // .stylex.ts file it compiles to a mangled selector like `[x13pbwiz]`
           // that matches nothing in the DOM.
           expect(selector).toContain('[popover]');
+          expect(selector).toContain('template');
         }
       },
     );

package/src/Card/Card.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Card.tsx
  * @input Uses container utility, StyleX

package/src/Card/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports Card component

package/src/Center/Center.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Center.tsx
  * @input Uses React, StyleX for centering styles, Layout padding.stylex for spacing-scale padding

package/src/Center/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports Center component

package/src/CheckboxInput/CheckboxInput.test.tsx

@@ -17,6 +17,7 @@ import {Theme} from '../theme/Theme';
 import {defineTheme} from '../theme/defineTheme';
 import {getForcedColorsRules} from '../__tests__/forcedColors';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {FOCUS_OUTLINE_PARTS} from '../utils/focusOutline.stylex';
 
 afterEach(() => {
   __resetLiveRegionsForTest();
@@ -686,7 +687,9 @@ describe('focus ring ownership (WCAG 2.4.7)', () => {
       <CheckboxInput label="Accept" value={false} onChange={() => {}} />,
     );
     focusInput(container);
-    expect(indicatorOf(container).style.outlineStyle).toBe('solid');
+    expect(indicatorOf(container).style.outlineStyle).toBe(
+      FOCUS_OUTLINE_PARTS.outlineStyle,
+    );
   });
 
   it('paints it on a replacement that forwards nothing', () => {
@@ -701,7 +704,7 @@ describe('focus ring ownership (WCAG 2.4.7)', () => {
     expect(replaced.className).toBe('');
     // ...and it still gets a ring, because the owner drew it.
     focusInput(container);
-    expect(replaced.style.outlineStyle).toBe('solid');
+    expect(replaced.style.outlineStyle).toBe(FOCUS_OUTLINE_PARTS.outlineStyle);
   });
 
   it('clears the ring on blur', () => {
@@ -709,7 +712,9 @@ describe('focus ring ownership (WCAG 2.4.7)', () => {
       <CheckboxInput label="Accept" value={false} onChange={() => {}} />,
     );
     const input = focusInput(container);
-    expect(indicatorOf(container).style.outlineStyle).toBe('solid');
+    expect(indicatorOf(container).style.outlineStyle).toBe(
+      FOCUS_OUTLINE_PARTS.outlineStyle,
+    );
     fireEvent.blur(input);
     expect(indicatorOf(container).style.outlineStyle).toBe('');
   });

package/src/Code/Code.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Code.tsx
  * @input Uses React, StyleX, theme tokens