From df5adc99a8aebbdb32ab9cdbbb6e3c1324b0c865 Mon Sep 17 00:00:00 2001
From: Jason Morse <jasonmo@microsoft.com>
Date: Fri, 11 Sep 2026 10:26:47 -0700
Subject: [PATCH 01/11] restore system focus behavior

---
 .changeset/native-focus-visuals.md            | 10 +++
 .../references/sources/flex-x3.md             | 14 ++--
 package.json                                  |  1 +
 packages/agentic/components/package.json      |  2 +-
 .../src/common/focusVisualPolicy.test.tsx     | 82 +++++++++++++++++++
 .../src/common/focusVisualPolicy.ts           | 18 ++++
 .../components/src/components/AGENTS.md       | 42 +++++++++-
 .../src/components/accordion/SPEC.md          | 10 ++-
 .../components/accordion/accordion.test.tsx   |  7 +-
 .../accordion/spec/accessibility.md           |  2 +-
 .../components/accordion/spec/interaction.md  |  2 +
 .../src/components/accordion/spec/source.json |  8 +-
 .../src/components/accordion/useAccordion.ts  |  2 +
 .../accordion/useAccordionStyles.ts           |  4 +-
 .../components/src/components/button/SPEC.md  | 33 ++++----
 .../src/components/button/button.test.tsx     |  8 +-
 .../components/button/spec/accessibility.md   |  8 +-
 .../src/components/button/spec/interaction.md |  9 +-
 .../src/components/button/spec/source.json    |  8 +-
 .../src/components/button/useButton.ts        |  4 +-
 .../src/components/button/useButtonStyles.ts  |  4 +-
 .../components/src/components/card/SPEC.md    | 10 ++-
 .../src/components/card/card.test.tsx         |  5 +-
 .../src/components/card/spec/accessibility.md |  2 +-
 .../src/components/card/spec/interaction.md   |  2 +-
 .../src/components/card/spec/source.json      |  8 +-
 .../src/components/card/spec/tokens.yaml      |  2 +-
 .../components/src/components/card/useCard.ts |  2 +
 .../src/components/card/useCardStyles.ts      |  4 +-
 .../src/components/checkbox/SPEC.md           | 40 +++++----
 .../src/components/checkbox/checkbox.test.tsx |  8 +-
 .../components/checkbox/spec/accessibility.md | 19 +++--
 .../components/checkbox/spec/interaction.md   | 17 ++--
 .../src/components/checkbox/spec/source.json  | 10 ++-
 .../src/components/checkbox/useCheckbox.ts    |  3 +-
 .../components/checkbox/useCheckboxStyles.ts  |  4 +-
 .../src/components/list-item/SPEC.md          | 10 ++-
 .../components/list-item/list-item.test.tsx   |  7 +-
 .../list-item/spec/accessibility.md           |  6 +-
 .../components/list-item/spec/interaction.md  |  7 +-
 .../src/components/list-item/spec/source.json |  6 +-
 .../src/components/list-item/useListItem.ts   |  2 +
 .../components/list-item/useListItemStyles.ts |  4 +-
 .../src/components/listbox-item/SPEC.md       | 29 ++++---
 .../listbox-item/listbox-item.test.tsx        |  5 +-
 .../listbox-item/spec/accessibility.md        |  6 +-
 .../listbox-item/spec/interaction.md          |  6 +-
 .../components/listbox-item/spec/source.json  |  8 +-
 .../components/listbox-item/useListboxItem.ts |  2 +
 .../listbox-item/useListboxItemStyles.ts      |  4 +-
 .../src/components/menu-item/SPEC.md          | 28 ++++---
 .../components/menu-item/menu-item.test.tsx   |  7 +-
 .../menu-item/spec/accessibility.md           |  8 +-
 .../components/menu-item/spec/interaction.md  |  8 +-
 .../src/components/menu-item/spec/source.json |  8 +-
 .../src/components/menu-item/useMenuItem.ts   |  2 +
 .../components/menu-item/useMenuItemStyles.ts |  4 +-
 .../components/src/components/radio/SPEC.md   | 14 ++--
 .../src/components/radio/radio.test.tsx       |  7 +-
 .../components/radio/spec/accessibility.md    |  6 +-
 .../src/components/radio/spec/interaction.md  |  7 +-
 .../src/components/radio/spec/source.json     |  6 +-
 .../src/components/radio/useRadio.ts          |  2 +
 .../src/components/radio/useRadioStyles.ts    |  4 +-
 .../components/src/components/switch/SPEC.md  | 11 ++-
 .../components/switch/spec/accessibility.md   |  7 +-
 .../src/components/switch/spec/interaction.md | 14 ++--
 .../src/components/switch/spec/source.json    |  8 +-
 .../src/components/switch/spec/tokens.yaml    |  2 +-
 .../src/components/switch/switch.test.tsx     |  7 +-
 .../src/components/switch/useSwitch.ts        |  2 +
 .../src/components/switch/useSwitchStyles.ts  |  4 +-
 .../components/src/components/tab/SPEC.md     | 14 ++--
 .../src/components/tab/spec/accessibility.md  |  6 +-
 .../src/components/tab/spec/interaction.md    | 13 +--
 .../src/components/tab/spec/source.json       |  8 +-
 .../src/components/tab/spec/tokens.yaml       |  2 +-
 .../src/components/tab/tab.test.tsx           |  7 +-
 .../components/src/components/tab/useTab.ts   |  2 +
 .../src/components/tab/useTabStyles.ts        |  4 +-
 .../components/src/components/tag/SPEC.md     | 12 ++-
 .../src/components/tag/spec/accessibility.md  |  7 +-
 .../src/components/tag/spec/interaction.md    | 11 ++-
 .../src/components/tag/spec/source.json       |  8 +-
 .../src/components/tag/spec/tokens.yaml       |  2 +-
 .../src/components/tag/tag.test.tsx           |  7 +-
 .../components/src/components/tag/useTag.ts   |  2 +
 .../src/components/tag/useTagStyles.ts        |  4 +-
 .../windows/FRNFocusZone/packages.lock.json   | 14 ++--
 .../windows/Callout/packages.lock.json        | 14 ++--
 yarn.lock                                     | 12 +--
 91 files changed, 554 insertions(+), 277 deletions(-)
 create mode 100644 .changeset/native-focus-visuals.md
 create mode 100644 packages/agentic/components/src/common/focusVisualPolicy.test.tsx
 create mode 100644 packages/agentic/components/src/common/focusVisualPolicy.ts

diff --git a/.changeset/native-focus-visuals.md b/.changeset/native-focus-visuals.md
new file mode 100644
index 0000000000..df6aa2d86f
--- /dev/null
+++ b/.changeset/native-focus-visuals.md
@@ -0,0 +1,10 @@
+---
+"@fluentui-react-native/components": patch
+"@fluentui-react-native/callout": patch
+"@fluentui-react-native/focus-zone": patch
+---
+
+Use native focus visuals on all platforms by default while retaining the custom
+FocusVisual implementation behind a shared evaluation switch. Require React
+Native Windows 0.81.35 or newer for the native focus visual crash fix.
+Refresh the Windows Callout and FocusZone NuGet locks to the same runtime version.
diff --git a/.github/skills/agentic-component-contract-authoring/references/sources/flex-x3.md b/.github/skills/agentic-component-contract-authoring/references/sources/flex-x3.md
index 1a4180acd8..8828ff5621 100644
--- a/.github/skills/agentic-component-contract-authoring/references/sources/flex-x3.md
+++ b/.github/skills/agentic-component-contract-authoring/references/sources/flex-x3.md
@@ -33,13 +33,13 @@ cross-platform canonical reference unless the work targets iOS.
 
 Translate web concepts deliberately:
 
-| Flex evidence                        | React Native contract                                                              |
-| ------------------------------------ | ---------------------------------------------------------------------------------- |
-| ARIA attributes or native elements   | `accessibilityRole`, `accessibilityState`, labels, and UIA/AX expectations         |
-| CSS pseudo-classes                   | explicit interaction state and precedence                                          |
-| browser focus selectors and outlines | persistent `FocusVisual`; never conditional `outline*` or RNW native focus visuals |
-| CSS pixel or layout rules            | React Native units, minimum targets, and platform behavior                         |
-| unsupported browser capability       | explicit divergence, dependency, or blocker                                        |
+| Flex evidence                        | React Native contract                                                                     |
+| ------------------------------------ | ----------------------------------------------------------------------------------------- |
+| ARIA attributes or native elements   | `accessibilityRole`, `accessibilityState`, labels, and UIA/AX expectations                |
+| CSS pseudo-classes                   | explicit interaction state and precedence                                                 |
+| browser focus selectors and outlines | shared native focus policy, with persistent `FocusVisual` retained as the custom fallback |
+| CSS pixel or layout rules            | React Native units, minimum targets, and platform behavior                                |
+| unsupported browser capability       | explicit divergence, dependency, or blocker                                               |
 
 Do not copy Flex prose or token tables into the public package. A mutable
 Marketplace or X3 HEAD change is candidate drift and does not invalidate a
diff --git a/package.json b/package.json
index 260f993a45..bcfc5da3c8 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "launch-editor@npm:^2.9.1": "2.14.1",
     "lodash": "^4.18.1",
     "path-to-regexp@npm:8.3.0": "^8.4.2",
+    "react-native-windows": "0.81.35",
     "shell-quote": "^1.9.0",
     "socks@npm:^2.8.3": "2.8.9",
     "unicorn-magic@npm:^0.3.0": "^0.4.0",
diff --git a/packages/agentic/components/package.json b/packages/agentic/components/package.json
index 089a38cac4..1b113a0a8f 100644
--- a/packages/agentic/components/package.json
+++ b/packages/agentic/components/package.json
@@ -70,7 +70,7 @@
     "react-native": "^0.81.6",
     "react-native-macos": "^0.81.0",
     "react-native-svg": "^15.12.1",
-    "react-native-windows": "^0.81.0"
+    "react-native-windows": "^0.81.35"
   },
   "peerDependenciesMeta": {
     "@office-iss/react-native-win32": {
diff --git a/packages/agentic/components/src/common/focusVisualPolicy.test.tsx b/packages/agentic/components/src/common/focusVisualPolicy.test.tsx
new file mode 100644
index 0000000000..71d521f41a
--- /dev/null
+++ b/packages/agentic/components/src/common/focusVisualPolicy.test.tsx
@@ -0,0 +1,82 @@
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import type { ReactElement } from 'react';
+import { StyleSheet } from 'react-native';
+import type { AccessibilityRole } from 'react-native';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { Accordion } from '../components/accordion/accordion';
+import { Button } from '../components/button/button';
+import { Card } from '../components/card/card';
+import { Checkbox } from '../components/checkbox/checkbox';
+import { ListItem } from '../components/list-item/list-item';
+import { ListboxItem } from '../components/listbox-item/listbox-item';
+import { MenuItem } from '../components/menu-item/menu-item';
+import { Radio } from '../components/radio/radio';
+import { Switch } from '../components/switch/switch';
+import { Tab } from '../components/tab/tab';
+import { Tag } from '../components/tag/tag';
+import { createFocusVisualProps, focusVisualPolicy, getNativeFocusVisualProps } from './focusVisualPolicy';
+
+const cases: { name: string; element: ReactElement; role: AccessibilityRole }[] = [
+  { name: 'Accordion', element: <Accordion />, role: 'button' },
+  { name: 'Button', element: <Button content="Action" />, role: 'button' },
+  { name: 'Card', element: <Card accessibilityLabel="Card" selected={false} />, role: 'button' },
+  { name: 'Checkbox', element: <Checkbox label="Choice" />, role: 'checkbox' },
+  { name: 'ListItem', element: <ListItem content="Item" />, role: 'button' },
+  { name: 'ListboxItem', element: <ListboxItem content="Option" />, role: 'button' },
+  { name: 'MenuItem', element: <MenuItem content="Command" />, role: 'menuitem' },
+  { name: 'Radio', element: <Radio label="Choice" />, role: 'radio' },
+  { name: 'Switch', element: <Switch label="Setting" />, role: 'switch' },
+  { name: 'Tab', element: <Tab content="Page" controls="page-panel" />, role: 'tab' },
+  { name: 'Tag', element: <Tag content="Tag" />, role: 'button' },
+];
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+it('defaults to native focus visuals without changing custom ring geometry', () => {
+  expect(getNativeFocusVisualProps()).toEqual({ enableFocusRing: true });
+  expect(
+    createFocusVisualProps({
+      borderRadius: 4,
+      innerColor: 'white',
+      innerWidth: 1,
+      outerColor: 'black',
+      outerWidth: 2,
+      visible: true,
+    }),
+  ).toEqual({
+    inner: { style: { borderColor: 'white', borderRadius: 4, borderStyle: 'solid', borderWidth: 1 } },
+    style: { borderColor: 'black', borderRadius: 4, borderStyle: 'solid', borderWidth: 2 },
+    visible: false,
+  });
+});
+
+describe.each([true, false])('useSystemFocusVisuals=%s', (useSystemFocusVisuals) => {
+  beforeEach(() => {
+    jest.replaceProperty(focusVisualPolicy, 'useSystemFocusVisuals', useSystemFocusVisuals);
+  });
+
+  it.each(cases)('keeps exactly one focus visual owner for $name', async ({ element, role }) => {
+    const component = await render(element);
+    const target = component.getByRole(role);
+    const outerRing = component.getByTestId('focus-visual', { includeHiddenElements: true });
+    const innerRing = component.getByTestId('focus-visual-inner', { includeHiddenElements: true });
+
+    expect(target.props.enableFocusRing).toBe(useSystemFocusVisuals);
+    expect(StyleSheet.flatten(outerRing.props.style).opacity).toBe(0);
+
+    await fireEvent(target, 'focus', {});
+
+    expect(component.getByTestId('focus-visual', { includeHiddenElements: true })).toBe(outerRing);
+    expect(component.getByTestId('focus-visual-inner', { includeHiddenElements: true })).toBe(innerRing);
+    expect(StyleSheet.flatten(outerRing.props.style).opacity).toBe(useSystemFocusVisuals ? 0 : undefined);
+    expect(outerRing.props).toMatchObject({ accessible: false, focusable: false, pointerEvents: 'none' });
+
+    await fireEvent(target, 'blur', {});
+
+    expect(StyleSheet.flatten(outerRing.props.style).opacity).toBe(0);
+  });
+});
diff --git a/packages/agentic/components/src/common/focusVisualPolicy.ts b/packages/agentic/components/src/common/focusVisualPolicy.ts
new file mode 100644
index 0000000000..c754acfabe
--- /dev/null
+++ b/packages/agentic/components/src/common/focusVisualPolicy.ts
@@ -0,0 +1,18 @@
+import { createFocusVisualProps_unstable } from '../primitives/focus-visual/focus-visual';
+import type { FocusVisualOptions, FocusVisualProps } from '../primitives/focus-visual/focus-visual.types';
+
+// Set to false and reload the app to compare the retained custom rings.
+export const focusVisualPolicy = {
+  useSystemFocusVisuals: true,
+};
+
+export function getNativeFocusVisualProps(): { enableFocusRing: boolean } {
+  return { enableFocusRing: focusVisualPolicy.useSystemFocusVisuals };
+}
+
+export function createFocusVisualProps(options: FocusVisualOptions): FocusVisualProps {
+  return createFocusVisualProps_unstable({
+    ...options,
+    visible: options.visible && !focusVisualPolicy.useSystemFocusVisuals,
+  });
+}
diff --git a/packages/agentic/components/src/components/AGENTS.md b/packages/agentic/components/src/components/AGENTS.md
index 104b6aa11d..31aef77f90 100644
--- a/packages/agentic/components/src/components/AGENTS.md
+++ b/packages/agentic/components/src/components/AGENTS.md
@@ -46,8 +46,9 @@ audit.
 - Include the declared native root's `ref` in public props with `PropsWithRefOf<typeof Root>`. React 19.1.4 supplies
   `ref` as a prop, so pass it through the state hook to the root slot without `forwardRef`. If the component also needs
   an internal root ref, compose the refs through the slot render path rather than replacing the consumer ref.
-- Render focus feedback through `FocusVisual`; do not add `outline*` props or enable RNW native
-  focus visuals because RNW 0.81 can fail-fast when either path creates border visuals after mount.
+- Follow the [focus visual policy](#focus-visual-policy): request native focus visuals on all platforms
+  through the package-private policy, on the actual focus target only. Retain the mounted `FocusVisual`
+  fallback and its public exports. Do not introduce component-specific switches or `outline*` focus styling.
 - Keep render functions free of hooks, token reads, style creation, and slot mutation.
 - Export the resolved state type and the state, style-application, and render stages from the package root under
   component-qualified unstable names so another component can reuse the pipeline.
@@ -60,6 +61,43 @@ audit.
   element, declare capabilities, and assert public native semantics rather than
   implementation structure.
 
+## Focus visual policy
+
+This is the shared native adaptation for Accordion, Button, Card, Checkbox, ListItem, ListboxItem, MenuItem,
+Radio, Switch, Tab, and Tag. It changes focus rendering, not public props, activation, selection, navigation,
+or accessibility semantics.
+
+- `common/focusVisualPolicy.ts` owns the single evaluation switch
+  `focusVisualPolicy.useSystemFocusVisuals`, defaulting to `true` on every platform. There is no platform
+  gate. Set the switch to `false` and reload to compare the retained custom rings; this is not a public API
+  or a per-instance option.
+- `getNativeFocusVisualProps` returns `{ enableFocusRing: focusVisualPolicy.useSystemFocusVisuals }`
+  on every platform. Apply it to the actual focus target: Accordion's header, Card's
+  interactive overlay, and the other components' pressable roots. Switch's outer label container and track
+  are not focus targets. Static cards, noninteractive section headers, and decorative children gain no
+  focus stop or focus feedback.
+- A shared wrapper around `createFocusVisualProps_unstable` suppresses custom-ring visibility while the
+  system path is selected, on every platform. The custom `FocusVisual` and its border-bearing children remain
+  eagerly mounted wherever they already render. Its tokens, geometry, style calculation, and public primitive
+  exports are retained without a visual redesign.
+- With the switch off, every platform receives `enableFocusRing={false}` and uses the existing custom
+  visibility calculation. The default replaces previous component-specific suppression of native rings,
+  including Button and Checkbox on non-Windows platforms.
+- Native focus rendering and appearance, including keyboard versus pointer behavior, are delegated to the
+  platform renderer. Enabling the prop does not guarantee a ring on a renderer that lacks support; the
+  custom path is not automatically re-enabled on such platforms. Existing custom-ring token bindings,
+  radii, and modality statements describe the retained path, not the system
+  ring. A synthetic `focused` override, such as Accordion's preview prop, does not force native focus or
+  force the OS to draw a ring. This adaptation makes no new modality or pixel-parity guarantees.
+- Input's focus underlines and borders, and other state styling unrelated to `FocusVisual`, are unchanged.
+
+The Windows native path requires React Native Windows 0.81.35 or newer. The accepted
+`native-system-focus-visuals` divergence changes the local platform adaptation, not the pinned Flex sources.
+The shared `common/focusVisualPolicy.test.tsx` matrix covers native props, retained ring mounts, focus/blur,
+and fallback behavior for all eleven consumers. Colocated tests retain geometry, accessibility, and
+disabled/noninteractive coverage. Native appearance and modality must still be evaluated in each renderer;
+the policy does not assert pixel parity or fix unrelated input behavior.
+
 ## Focused references
 
 - [Contract and source adaptation](../../../../../.github/skills/agentic-component-contract-authoring/SKILL.md)
diff --git a/packages/agentic/components/src/components/accordion/SPEC.md b/packages/agentic/components/src/components/accordion/SPEC.md
index 550f63ce63..1eae3734d9 100644
--- a/packages/agentic/components/src/components/accordion/SPEC.md
+++ b/packages/agentic/components/src/components/accordion/SPEC.md
@@ -17,7 +17,7 @@ Accordion is a disclosure component with one pressable header and one body regio
 
 ## Public contract
 
-`layout` defaults to `chevronStart`; `size` is currently always `small`. Expansion is self-driving: `defaultExpanded` initializes uncontrolled state, `expanded` makes the value controlled, and `onExpandedChange` receives the requested next value in either mode. `focused` can force the focus visual for an instance. The root accepts the owned `ViewProps` surface, including `style`, while the component owns its accessibility and focus behavior.
+`layout` defaults to `chevronStart`; `size` is currently always `small`. Expansion is self-driving: `defaultExpanded` initializes uncontrolled state, `expanded` makes the value controlled, and `onExpandedChange` receives the requested next value in either mode. `focused` can force the retained custom focus visual for an instance; it does not force native focus or its system ring. The root accepts the owned `ViewProps` surface, including `style`, while the component owns its accessibility and focus behavior.
 
 `root` is required. `title` and `leadingIcon` are optional public slots but render by default as “Section title” and a selected-circle icon; pass `null` to omit either. `bodyContent` is optional. The rendered root contains the header, then the body. Header children are always `FocusVisual`, followed by chevron, leading icon, and title for `chevronStart`; `chevronEnd` orders leading icon, title, then chevron. The body always exists and renders `bodyContent` or a text placeholder.
 
@@ -27,7 +27,7 @@ The resolved state retains the controlled/uncontrolled expansion result, pressab
 
 - **ACC-001:** Resolve the documented defaults and implement controlled and uncontrolled expansion without mutating a controlled value.
 - **ACC-002:** Render the public slots, default slot content, body fallback, and layout-specific header order.
-- **ACC-003:** Apply theme-token header, title, body, chevron, visibility, and persistent focus-visual styling.
+- **ACC-003:** Apply theme-token header, title, body, chevron, and visibility styling, and follow the [shared focus visual policy](../AGENTS.md#focus-visual-policy) on the header.
 - **ACC-004:** Expose a labeled button header with expanded state and an accessibility relationship to the body; hide collapsed body descendants.
 - **ACC-005:** Keep grouping policy, body contents, and motion outside the component contract.
 
@@ -35,10 +35,12 @@ The resolved state retains the controlled/uncontrolled expansion result, pressab
 
 On Windows and macOS, the header is a React Native `Pressable` with button role. Its native keyboard and pointer activation request expansion; `Enter` and `Space` are handled by the platform pressable behavior. The header exposes `accessibilityState.expanded`, its `accessibilityControls` target is the generated body identifier, and caller-provided accessibility state is retained.
 
-The body remains mounted. Collapsing it sets height to zero, hides overflow, removes padding, and hides descendants from assistive technology; expanding restores visibility. `FocusVisual` remains mounted inside the header and is shown for resolved focus. There is no group-level arrow navigation, focus transfer, native Windows focus ring, or timed rotation/height animation.
+The body remains mounted. Collapsing it sets height to zero, hides overflow, removes padding, and hides descendants from assistive technology; expanding restores visibility. The header requests native focus visuals on every platform under the shared policy; rendering depends on platform support. `FocusVisual` remains mounted inside it, hidden for that path and using resolved focus on the retained custom path. There is no group-level arrow navigation, focus transfer, or timed rotation/height animation.
 
 ## Divergences from Flex
 
+- `native-system-focus-visuals` — **accepted.** Apply the [shared native adaptation](../AGENTS.md#focus-visual-policy).
+
 - `accordion-chevron-end-rotation` — **accepted.** Flex design evidence gives the trailing chevron a down-to-up caret sequence. FURN uses the same chevron source in both layouts and rotates it right-to-down as expansion changes. Changing that sequence requires an implementation and visual-contract review.
 
 ## Conformance
@@ -47,6 +49,6 @@ The body remains mounted. Collapsing it sets height to zero, hides overflow, rem
 | ----------- | ------------------------------------------------------------------------------------------ |
 | ACC-001     | `accordion.types.ts`, `useAccordion.ts`, `accordion.test.tsx`, `accordion.stories.tsx`     |
 | ACC-002     | `useAccordion.ts`, `renderAccordion.tsx`, `accordion.test.tsx`, `accordion.types.test.tsx` |
-| ACC-003     | `accordion.styles.ts`, `useAccordionStyles.ts`, `accordion.test.tsx`                       |
+| ACC-003     | `useAccordion.ts`, `accordion.styles.ts`, `useAccordionStyles.ts`, `accordion.test.tsx`    |
 | ACC-004     | `useAccordion.ts`, `useAccordionStyles.ts`, `accordion.test.tsx`                           |
 | ACC-005     | `accordion.types.ts`, `useAccordion.ts`, `accordion.stories.tsx`                           |
diff --git a/packages/agentic/components/src/components/accordion/accordion.test.tsx b/packages/agentic/components/src/components/accordion/accordion.test.tsx
index 9a1bda6483..b1654f1973 100644
--- a/packages/agentic/components/src/components/accordion/accordion.test.tsx
+++ b/packages/agentic/components/src/components/accordion/accordion.test.tsx
@@ -93,16 +93,15 @@ describe('Accordion', () => {
     expect(getHeader(component).props.accessibilityState).toEqual({ busy: true, expanded: false });
   });
 
-  it('uses the focused prop to render the universal dual-ring focus visual', async () => {
+  it('leaves focus visuals to the native header even when focused is supplied', async () => {
     const component = await renderAccordion({ focused: true });
 
+    expect(getHeader(component).props.enableFocusRing).toBe(true);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: '#000000',
       borderWidth: 2,
     });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
-      'opacity',
-    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: '#ffffff',
       borderWidth: 1,
diff --git a/packages/agentic/components/src/components/accordion/spec/accessibility.md b/packages/agentic/components/src/components/accordion/spec/accessibility.md
index eb8e1d56af..abd671726b 100644
--- a/packages/agentic/components/src/components/accordion/spec/accessibility.md
+++ b/packages/agentic/components/src/components/accordion/spec/accessibility.md
@@ -4,4 +4,4 @@ The header is the only accessible control. It uses React Native button semantics
 
 The header associates with the generated body identifier through React Native `accessibilityControls`. The body is not itself accessible and is hidden from accessibility descendants while collapsed. Its content becomes available in reading order only while expanded. Decorative leading and chevron icons are inaccessible.
 
-On Windows, the header maps to a UI Automation button and reports expanded state. On macOS, it maps to an AX button with the same state. `FocusVisual` provides the visible focus feedback; it has no accessible name and cannot intercept input.
+On Windows, the header maps to a UI Automation button and reports expanded state. On macOS, it maps to an AX button with the same state. The header's focus feedback follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy). The retained `FocusVisual` has no accessible name and cannot intercept input.
diff --git a/packages/agentic/components/src/components/accordion/spec/interaction.md b/packages/agentic/components/src/components/accordion/spec/interaction.md
index 1af0512999..8d0b13e4e2 100644
--- a/packages/agentic/components/src/components/accordion/spec/interaction.md
+++ b/packages/agentic/components/src/components/accordion/spec/interaction.md
@@ -4,4 +4,6 @@ The header uses React Native press handling. Pointer, touch, `Enter`, and `Space
 
 Hover and pressed header feedback are resolved from pressable state, with pressed taking precedence. Focus is owned by the header; the body and its children manage their own focus once visible. The component does not implement sibling navigation, roving focus, or focus transfer after expansion.
 
+The header follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy): request native focus visuals on every platform by default, with the custom visual still mounted but hidden on that path. Rendering depends on platform support. The `focused` override can preview the custom visual, but does not force native focus or its system ring.
+
 The chevron rotates immediately and the body visibility styles change immediately. There is no component-owned motion or reduced-motion branch.
diff --git a/packages/agentic/components/src/components/accordion/spec/source.json b/packages/agentic/components/src/components/accordion/spec/source.json
index 3fb3a8a6ba..d9eee5a3c1 100644
--- a/packages/agentic/components/src/components/accordion/spec/source.json
+++ b/packages/agentic/components/src/components/accordion/spec/source.json
@@ -3,7 +3,7 @@
   "component": "accordion",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-28",
+  "reviewedAt": "2026-09-11",
   "sources": [
     {
       "id": "flex-component",
@@ -70,6 +70,10 @@
     }
   ],
   "divergences": [
+    {
+      "id": "native-system-focus-visuals",
+      "status": "accepted"
+    },
     {
       "id": "accordion-chevron-end-rotation",
       "status": "accepted"
@@ -86,7 +90,7 @@
     },
     {
       "id": "ACC-003",
-      "evidence": ["accordion.styles.ts", "useAccordionStyles.ts", "accordion.test.tsx"]
+      "evidence": ["useAccordion.ts", "accordion.styles.ts", "useAccordionStyles.ts", "accordion.test.tsx"]
     },
     {
       "id": "ACC-004",
diff --git a/packages/agentic/components/src/components/accordion/useAccordion.ts b/packages/agentic/components/src/components/accordion/useAccordion.ts
index b5aec76a07..42878bca17 100644
--- a/packages/agentic/components/src/components/accordion/useAccordion.ts
+++ b/packages/agentic/components/src/components/accordion/useAccordion.ts
@@ -12,6 +12,7 @@ import {
 
 import { Icon } from '../../primitives/icon/icon';
 import { semanticIconSources } from '../../common/iconSources';
+import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
 import { Text } from '../text/text';
 import type { AccordionProps, AccordionState } from './accordion.types';
 
@@ -55,6 +56,7 @@ export function useAccordion_unstable(props: AccordionProps): AccordionState {
 
   const themeState = useThemeState();
   const [headerProps, pressableState] = usePressableState({
+    ...getNativeFocusVisualProps(),
     accessibilityControls: bodyId,
     accessibilityHint,
     accessibilityLabel,
diff --git a/packages/agentic/components/src/components/accordion/useAccordionStyles.ts b/packages/agentic/components/src/components/accordion/useAccordionStyles.ts
index 20b9dfc29a..81b4cf8157 100644
--- a/packages/agentic/components/src/components/accordion/useAccordionStyles.ts
+++ b/packages/agentic/components/src/components/accordion/useAccordionStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps_unstable } from '../../primitives/focus-visual/focus-visual';
+import { createFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import {
   accordionStyles,
@@ -51,7 +51,7 @@ export function useAccordionStyles_unstable(state: AccordionState) {
   ];
   const iconSize = getAccordionIconSize();
 
-  state.focusVisualProps = createFocusVisualProps_unstable({
+  state.focusVisualProps = createFocusVisualProps({
     borderRadius: headerLayoutStyle.borderRadius,
     innerColor: state.tokens.color.strokeFocusInner,
     innerWidth: state.tokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/button/SPEC.md b/packages/agentic/components/src/components/button/SPEC.md
index 2da9f88ae1..462c907c0a 100644
--- a/packages/agentic/components/src/components/button/SPEC.md
+++ b/packages/agentic/components/src/components/button/SPEC.md
@@ -67,8 +67,9 @@ layout and requires an action-oriented `accessibilityLabel`.
 - **BTN-005:** Treat `selected` as externally owned state, expose checked
   accessibility state when that prop is present, and reserve semibold label
   width to prevent toggle reflow.
-- **BTN-006:** Keep the dual-ring `FocusVisual` mounted and show it only for a
-  focused, enabled button while disabling the native Windows focus ring.
+- **BTN-006:** Follow the [shared focus visual policy](../AGENTS.md#focus-visual-policy)
+  on the root: request native focus visuals on every platform, with the mounted dual-ring
+  `FocusVisual` retained for the custom path.
 
 ## Platform behavior
 
@@ -76,14 +77,16 @@ Windows and macOS use React Native press, hover, and focus events. `Enter` and
 `Space` activation are supplied by the native `Pressable` button behavior.
 Disabled buttons are not focusable.
 
-React Native Windows native focus visuals are disabled because dynamically
-mounting its border visual can crash supported RNW versions. The component
-instead keeps the shared dual-ring `FocusVisual` mounted and changes only its
-visibility state. The contract does not add motion; visual state changes are
-immediate.
+The root requests native focus visuals on every platform under the shared policy.
+The dual-ring `FocusVisual` stays mounted but hidden on that path; its existing
+visibility behavior remains in the evaluation fallback on every platform.
+Native rendering depends on platform support. The contract adds no
+component-owned motion or native modality guarantee.
 
 ## Divergences from Flex
 
+`native-system-focus-visuals` is an **accepted** [shared native adaptation](../AGENTS.md#focus-visual-policy).
+
 | ID                        | Disposition              | React Native contract                                                                                                                                 | Follow-up                                                           |
 | ------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
 | `button-selection-axis`   | Deferred alignment       | FURN retains `selected` on Button and exposes checked state. Current Flex models toggle behavior as a separate ToggleButton.                          | A separate API proposal, migration, and changeset are required.     |
@@ -92,11 +95,11 @@ immediate.
 
 ## Conformance
 
-| Requirement | Evidence                                                    |
-| ----------- | ----------------------------------------------------------- |
-| BTN-001     | `button.types.ts`, `useButton.ts`, `button.test.tsx`        |
-| BTN-002     | `renderButton.tsx`, `button.test.tsx`, `button.stories.tsx` |
-| BTN-003     | `button.styles.ts`, `useButtonStyles.ts`, `button.test.tsx` |
-| BTN-004     | `useButton.ts`, `useButtonStyles.ts`, `button.test.tsx`     |
-| BTN-005     | `useButton.ts`, `renderButton.tsx`, `button.test.tsx`       |
-| BTN-006     | `useButtonStyles.ts`, `renderButton.tsx`, `button.test.tsx` |
+| Requirement | Evidence                                                                    |
+| ----------- | --------------------------------------------------------------------------- |
+| BTN-001     | `button.types.ts`, `useButton.ts`, `button.test.tsx`                        |
+| BTN-002     | `renderButton.tsx`, `button.test.tsx`, `button.stories.tsx`                 |
+| BTN-003     | `button.styles.ts`, `useButtonStyles.ts`, `button.test.tsx`                 |
+| BTN-004     | `useButton.ts`, `useButtonStyles.ts`, `button.test.tsx`                     |
+| BTN-005     | `useButton.ts`, `renderButton.tsx`, `button.test.tsx`                       |
+| BTN-006     | `useButton.ts`, `useButtonStyles.ts`, `renderButton.tsx`, `button.test.tsx` |
diff --git a/packages/agentic/components/src/components/button/button.test.tsx b/packages/agentic/components/src/components/button/button.test.tsx
index 2c3585a3cd..591846cc14 100644
--- a/packages/agentic/components/src/components/button/button.test.tsx
+++ b/packages/agentic/components/src/components/button/button.test.tsx
@@ -199,11 +199,11 @@ describe('Button', () => {
     expect(getRootStyle(component).backgroundColor).toBe('hotpink');
   });
 
-  it('renders a persistent dual-ring focus visual', async () => {
+  it('uses native focus visuals while retaining the hidden custom rings', async () => {
     const component = await renderButton({ content: 'Focused' });
     const root = getRoot(component);
 
-    expect(root.props.enableFocusRing).toBe(false);
+    expect(root.props.enableFocusRing).toBe(true);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
 
     await fireEvent(root, 'focus', {});
@@ -212,9 +212,7 @@ describe('Button', () => {
       borderColor: '#000000',
       borderWidth: 2,
     });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
-      'opacity',
-    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: '#ffffff',
       borderWidth: 1,
diff --git a/packages/agentic/components/src/components/button/spec/accessibility.md b/packages/agentic/components/src/components/button/spec/accessibility.md
index ee3da0c10a..27ec095cb7 100644
--- a/packages/agentic/components/src/components/button/spec/accessibility.md
+++ b/packages/agentic/components/src/components/button/spec/accessibility.md
@@ -29,6 +29,8 @@ Disabled buttons communicate unavailable state, do not activate, and are
 removed from keyboard focus. Toggle-style buttons remain one button and
 announce their checked state from the externally supplied `selected` value.
 
-The visible focus indicator is the persistent shared `FocusVisual`, which
-draws inner and outer rings from focus stroke tokens. The native Windows focus
-ring is disabled to prevent a competing or unstable focus border.
+The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Every platform receives the native focus-ring request; rendering depends on
+platform support. The persistent shared `FocusVisual` stays mounted but hidden
+on that path. The retained custom path draws inner and outer rings from the
+existing focus stroke tokens.
diff --git a/packages/agentic/components/src/components/button/spec/interaction.md b/packages/agentic/components/src/components/button/spec/interaction.md
index d3e0b489ab..c86c55757d 100644
--- a/packages/agentic/components/src/components/button/spec/interaction.md
+++ b/packages/agentic/components/src/components/button/spec/interaction.md
@@ -27,9 +27,12 @@ button.
 
 ## Focus and motion
 
-The focus visual stays in the tree for the lifetime of the button. Focus
-changes its visibility rather than adding or removing border-bearing native
-views. It is hidden while disabled.
+The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Every platform delegates rendering and appearance to its native renderer and
+hides the custom visual. The custom
+visual and its border-bearing children stay in the tree for the lifetime of the
+button, preserving the existing visibility calculation on the retained path.
+Disabled buttons do not display focus feedback.
 
 Button currently performs no timed state animation. Hover, press, selection,
 and focus styles update immediately, so reduced-motion handling adds no
diff --git a/packages/agentic/components/src/components/button/spec/source.json b/packages/agentic/components/src/components/button/spec/source.json
index 3b1d584296..a1e0ac3bf2 100644
--- a/packages/agentic/components/src/components/button/spec/source.json
+++ b/packages/agentic/components/src/components/button/spec/source.json
@@ -3,7 +3,7 @@
   "component": "button",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-28",
+  "reviewedAt": "2026-09-11",
   "sources": [
     {
       "id": "flex-component",
@@ -130,6 +130,10 @@
     }
   ],
   "divergences": [
+    {
+      "id": "native-system-focus-visuals",
+      "status": "accepted"
+    },
     {
       "id": "button-selection-axis",
       "status": "deferred"
@@ -166,7 +170,7 @@
     },
     {
       "id": "BTN-006",
-      "evidence": ["useButtonStyles.ts", "renderButton.tsx", "button.test.tsx"]
+      "evidence": ["useButton.ts", "useButtonStyles.ts", "renderButton.tsx", "button.test.tsx"]
     }
   ]
 }
diff --git a/packages/agentic/components/src/components/button/useButton.ts b/packages/agentic/components/src/components/button/useButton.ts
index 69b7a5de00..01026aefc7 100644
--- a/packages/agentic/components/src/components/button/useButton.ts
+++ b/packages/agentic/components/src/components/button/useButton.ts
@@ -3,6 +3,7 @@ import { useAccessibilityLabelWarning, usePressableState, useSlot, useOptionalSl
 import { useThemeState } from '@fluentui-react-native/design';
 import { Pressable } from 'react-native';
 import type { PressableProps } from 'react-native';
+import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
 import { Icon } from '../../primitives/icon/icon';
 import { Text } from '../text/text';
 
@@ -61,8 +62,7 @@ export function useButton_unstable(props: ButtonProps): ButtonState {
     },
     accessible: rest.accessible ?? true,
     disabled,
-    // RNW 0.81 crashes when either outline props or its native focus ring creates border visuals after mount.
-    enableFocusRing: false,
+    ...getNativeFocusVisualProps(),
     focusable: rest.focusable ?? !disabled,
   };
   const [pressableProps, pressableState] = usePressableState(nativeProps);
diff --git a/packages/agentic/components/src/components/button/useButtonStyles.ts b/packages/agentic/components/src/components/button/useButtonStyles.ts
index 4a8e951519..72a66ead40 100644
--- a/packages/agentic/components/src/components/button/useButtonStyles.ts
+++ b/packages/agentic/components/src/components/button/useButtonStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps_unstable } from '../../primitives/focus-visual/focus-visual';
+import { createFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import { buttonStyles, getButtonColorStyles, getButtonContentStyle, getButtonIconSize, getButtonRootStyle } from './button.styles';
 import type { ButtonState } from './button.types';
@@ -18,7 +18,7 @@ export function useButtonStyles_unstable(state: ButtonState) {
   const contentStyle: StyleProp<TextStyle> = [buttonStyles.content, getButtonContentStyle(state), colors.foreground];
   const iconSize = getButtonIconSize(size);
 
-  state.focusVisualProps = createFocusVisualProps_unstable({
+  state.focusVisualProps = createFocusVisualProps({
     borderRadius: rootLayoutStyle.borderRadius,
     innerColor: state.tokens.color.strokeFocusInner,
     innerWidth: state.tokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/card/SPEC.md b/packages/agentic/components/src/components/card/SPEC.md
index 7eeeda52a7..d98809f8e7 100644
--- a/packages/agentic/components/src/components/card/SPEC.md
+++ b/packages/agentic/components/src/components/card/SPEC.md
@@ -27,18 +27,22 @@ Providing `onPress` or `selected` enables the pressable overlay. The resolved st
 
 - **CRD-001:** Resolve the documented variants and default values, derive interactivity from `onPress` or the presence of `selected`, and collapse horizontal direction below the implementation width threshold.
 - **CRD-002:** Render the overlay and public slots in the layout-specific order without injecting a content schema.
-- **CRD-003:** Apply root, nested-content, interaction, focus, and user-style layers from the verified FURN bindings.
-- **CRD-004:** Keep static cards non-focusable by default and expose interactive cards as disabled-aware pressable buttons with persistent focus feedback.
+- **CRD-003:** Apply root, nested-content, interaction, and user-style layers from the verified FURN bindings, with focus feedback following the [shared focus visual policy](../AGENTS.md#focus-visual-policy).
+- **CRD-004:** Keep static cards non-focusable by default and expose interactive cards as disabled-aware pressable buttons; the overlay, not the structural root, owns the native focus-ring request and retained custom focus visual on every platform.
 - **CRD-005:** Preserve externally owned selection and keep nested slot controls independently usable.
 
 ## Platform behavior
 
 Static cards use a non-focusable `View`. A caller can explicitly make a static root accessible; then it uses React Native group role and preserves its label and accessibility state. Interactive cards hide the structural root from accessibility and expose an absolute-fill React Native `Pressable` overlay with button role, disabled state, optional selected state, and `FocusVisual`.
 
+The overlay requests native focus visuals on every platform under the shared policy; rendering depends on platform support. Its custom `FocusVisual` remains mounted but hidden on that path; static cards gain neither a ring nor a focus stop.
+
 On Windows and macOS, interactive overlays respond to native pointer, touch, `Enter`, and `Space` press behavior. The overlay is disabled and unfocusable when `disabled`; nested controls remain rendered as sibling content and keep their own press behavior. Windows maps the overlay to a UI Automation button; macOS maps it to an AX button. The component does not navigate, manage a card collection, or animate state changes.
 
 ## Divergences from Flex
 
+- `native-system-focus-visuals` — **accepted.** Apply the [shared native adaptation](../AGENTS.md#focus-visual-policy).
+
 - `card-button-only-activation` — **accepted.** The FURN interactive path always uses a React Native pressable button; it has no separate link or navigation-destination contract.
 - `card-static-accessibility-opt-in` — **accepted.** FURN cannot infer a title-to-region association from generic `View` slots. Static cards are hidden from accessibility by default and become a labeled group only when the caller explicitly sets `accessible`.
 
@@ -48,6 +52,6 @@ On Windows and macOS, interactive overlays respond to native pointer, touch, `En
 | ----------- | ------------------------------------------------------------------------- |
 | CRD-001     | `card.types.ts`, `useCard.ts`, `card.stories.tsx`                         |
 | CRD-002     | `useCard.ts`, `renderCard.tsx`, `card.types.test.tsx`, `card.stories.tsx` |
-| CRD-003     | `card.styles.ts`, `useCardStyles.ts`, `card.test.tsx`                     |
+| CRD-003     | `useCard.ts`, `card.styles.ts`, `useCardStyles.ts`, `card.test.tsx`       |
 | CRD-004     | `useCard.ts`, `useCardStyles.ts`, `card.test.tsx`                         |
 | CRD-005     | `useCard.ts`, `renderCard.tsx`, `card.test.tsx`, `card.stories.tsx`       |
diff --git a/packages/agentic/components/src/components/card/card.test.tsx b/packages/agentic/components/src/components/card/card.test.tsx
index 384d182851..b2378b5657 100644
--- a/packages/agentic/components/src/components/card/card.test.tsx
+++ b/packages/agentic/components/src/components/card/card.test.tsx
@@ -114,13 +114,12 @@ describe('Card', () => {
     });
 
     await fireEvent(button, 'focus', {});
+    expect(button.props.enableFocusRing).toBe(true);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: colors.strokeFocusOuter,
       borderWidth: 2,
     });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
-      'opacity',
-    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: colors.strokeFocusInner,
       borderWidth: 1,
diff --git a/packages/agentic/components/src/components/card/spec/accessibility.md b/packages/agentic/components/src/components/card/spec/accessibility.md
index 132430e2c8..afeac50ae3 100644
--- a/packages/agentic/components/src/components/card/spec/accessibility.md
+++ b/packages/agentic/components/src/components/card/spec/accessibility.md
@@ -4,4 +4,4 @@ A static Card is inaccessible by default so its slot contents remain the accessi
 
 An interactive Card exposes its overlay as a React Native button. The overlay reports `accessibilityState.disabled`; when `selected` was supplied, it also reports `accessibilityState.selected`. The structural root is hidden from accessibility in this mode. Card does not synthesize a name from header or content, so supply `accessibilityLabel` or a supported label reference for an interactive card.
 
-The persistent `FocusVisual` is decorative. On Windows, the interactive overlay maps to a UI Automation button; on macOS, it maps to an AX button. Nested controls supplied through slots are separate controls and must have their own names and semantics.
+The overlay's focus feedback follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy); the persistent `FocusVisual` remains decorative and is hidden on the system path on every platform. Native rendering depends on platform support. On Windows, the interactive overlay maps to a UI Automation button; on macOS, it maps to an AX button. Nested controls supplied through slots are separate controls and must have their own names and semantics.
diff --git a/packages/agentic/components/src/components/card/spec/interaction.md b/packages/agentic/components/src/components/card/spec/interaction.md
index 2fab1f6b25..dc17e61821 100644
--- a/packages/agentic/components/src/components/card/spec/interaction.md
+++ b/packages/agentic/components/src/components/card/spec/interaction.md
@@ -4,4 +4,4 @@ A Card becomes interactive when `onPress` is provided or when `selected` is pres
 
 Selection is externally owned. A press reports through `onPress` but never changes `selected`; the caller updates that prop if its collection behavior requires it. Selected cards use the supplied value for visual and accessibility state.
 
-The overlay owns hover, pressed, and focus feedback. It does not trap focus, move focus, or manage collection navigation. `FocusVisual` remains mounted while an overlay exists and becomes visible only for focused, enabled state. Card provides no timed animation or reduced-motion branch.
+The overlay owns hover, pressed, and focus feedback. It does not trap focus, move focus, or manage collection navigation. The overlay, not the structural root, follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy). `FocusVisual` remains mounted while an overlay exists, hidden on the system path on every platform and retaining its focused, enabled visibility calculation on the custom path. Card provides no timed animation or reduced-motion branch.
diff --git a/packages/agentic/components/src/components/card/spec/source.json b/packages/agentic/components/src/components/card/spec/source.json
index d9e48e04d6..64994af370 100644
--- a/packages/agentic/components/src/components/card/spec/source.json
+++ b/packages/agentic/components/src/components/card/spec/source.json
@@ -3,7 +3,7 @@
   "component": "card",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-28",
+  "reviewedAt": "2026-09-11",
   "sources": [
     {
       "id": "flex-component",
@@ -80,6 +80,10 @@
     }
   ],
   "divergences": [
+    {
+      "id": "native-system-focus-visuals",
+      "status": "accepted"
+    },
     {
       "id": "card-button-only-activation",
       "status": "accepted"
@@ -100,7 +104,7 @@
     },
     {
       "id": "CRD-003",
-      "evidence": ["card.styles.ts", "useCardStyles.ts", "card.test.tsx"]
+      "evidence": ["useCard.ts", "card.styles.ts", "useCardStyles.ts", "card.test.tsx"]
     },
     {
       "id": "CRD-004",
diff --git a/packages/agentic/components/src/components/card/spec/tokens.yaml b/packages/agentic/components/src/components/card/spec/tokens.yaml
index 3094780536..2f6db586ea 100644
--- a/packages/agentic/components/src/components/card/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/card/spec/tokens.yaml
@@ -54,7 +54,7 @@ bindings:
     innerWidth: strokeWidth.thin
     outerColor: color.strokeFocusOuter
     outerWidth: strokeWidth.thick
-    visibleWhen: focused and not disabled
+    visibleWhen: custom path and focused and not disabled
 
 tokenGaps:
   - property: responsive direction threshold
diff --git a/packages/agentic/components/src/components/card/useCard.ts b/packages/agentic/components/src/components/card/useCard.ts
index 171ceeadd8..ddd2a8773f 100644
--- a/packages/agentic/components/src/components/card/useCard.ts
+++ b/packages/agentic/components/src/components/card/useCard.ts
@@ -3,6 +3,7 @@ import type { PressableProps } from 'react-native';
 
 import { type PropsWithRefOf, usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
+import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import type { CardProps, CardState } from './card.types';
 
@@ -57,6 +58,7 @@ export function useCard_unstable(props: CardProps): CardState {
 
   const [overlayProps, pressableState] = usePressableState({
     ...rest,
+    ...getNativeFocusVisualProps(),
     accessibilityHint,
     accessibilityLabel,
     accessibilityLabelledBy,
diff --git a/packages/agentic/components/src/components/card/useCardStyles.ts b/packages/agentic/components/src/components/card/useCardStyles.ts
index 7a2de99e36..51c9e6eb64 100644
--- a/packages/agentic/components/src/components/card/useCardStyles.ts
+++ b/packages/agentic/components/src/components/card/useCardStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps_unstable } from '../../primitives/focus-visual/focus-visual';
+import { createFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import { cardStyles, getCardNestedBlockStyle, getCardOverlayStyle, getCardRootStyle, getCardSurfaceColors } from './card.styles';
 import type { CardState } from './card.types';
@@ -14,7 +14,7 @@ export function useCardStyles_unstable(state: CardState) {
   const rootStyle: StyleProp<ViewStyle> = [cardStyles.root, getCardRootStyle(state), colors, state.userStyle];
   const overlayStyle = getCardOverlayStyle(state);
 
-  state.focusVisualProps = createFocusVisualProps_unstable({
+  state.focusVisualProps = createFocusVisualProps({
     borderRadius: overlayStyle.borderRadius,
     innerColor: state.tokens.color.strokeFocusInner,
     innerWidth: state.tokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/checkbox/SPEC.md b/packages/agentic/components/src/components/checkbox/SPEC.md
index d77c99b01b..8ab8eeb9fb 100644
--- a/packages/agentic/components/src/components/checkbox/SPEC.md
+++ b/packages/agentic/components/src/components/checkbox/SPEC.md
@@ -57,7 +57,7 @@ renders the label first and secondary text second.
 
 | Element        | Rendered when                          | Contract                                                                                                                                             |
 | -------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Focus visual   | always mounted                         | A dual-ring overlay whose visibility, not mounting, tracks focus.                                                                                    |
+| Focus visual   | always mounted                         | A retained dual-ring overlay; hidden on the system path on every platform, otherwise its visibility, not mounting, tracks focus.                     |
 | Indicator      | always                                 | A fixed 16 by 16 box carrying fill, stroke, and radius. It draws a checkmark for `checked`, a dash for `indeterminate`, and nothing for `unchecked`. |
 | Label column   | `showLabel`, or secondary text renders | A non-accessible column that holds the visible text nodes.                                                                                           |
 | Label          | `showLabel`                            | Wraps rather than truncates when the root width is constrained.                                                                                      |
@@ -80,8 +80,9 @@ renders the label first and secondary text second.
 - **CBX-005:** Resolve indicator, label, secondary text, and indicator glyph
   colors from status first and then disabled, pressed, and hovered state, select
   the indicator radius from `variant`, and apply the caller `style` last.
-- **CBX-006:** Keep the dual-ring focus visual mounted and show it only for a
-  focused, enabled Checkbox.
+- **CBX-006:** Follow the [shared focus visual policy](../AGENTS.md#focus-visual-policy)
+  on the root, retaining the mounted dual-ring visual and its existing modality
+  behavior for the custom path.
 
 ## Platform behavior
 
@@ -91,32 +92,35 @@ platforms; Checkbox adds no key handling of its own and does not intercept Tab.
 A disabled Checkbox sets `focusable` to `false` and is skipped by keyboard
 navigation.
 
-Checkbox suppresses the react-native-windows native focus visual so the shared
-dual-ring visual is the single indicator. Pointer focus hides that visual;
-keyboard and programmatic focus show it. The shared visual stays mounted for the
-lifetime of the control and only changes visibility, which avoids creating
-border-bearing native views after mount.
+Every platform receives the native focus-ring request on the root and suppresses
+the retained custom overlay under the shared policy. Native rendering and keyboard
+versus pointer appearance depend on the platform renderer. On the custom path,
+pointer focus hides the overlay and keyboard
+or programmatic focus shows it as before. The overlay and its border-bearing
+children remain mounted for the lifetime of the control.
 
 No timed animation is present. Status, hover, press, and focus styling change on
 the next render, so reduced-motion settings need no separate branch.
 
 ## Divergences from Flex
 
+`native-system-focus-visuals` is an **accepted** [shared native adaptation](../AGENTS.md#focus-visual-policy).
+
 | ID                                       | Disposition | React Native contract                                                                                                                                                                                                            | Follow-up                                                                                         |
 | ---------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
 | `checkbox-secondary-text-description`    | Accepted    | Secondary text is appended to the root accessibility hint rather than associated as a separate described-by target. React Native exposes no equivalent description relationship, and the hint is the platform-idiomatic channel. | None. Revisit only if React Native adds a description association.                                |
 | `checkbox-secondary-text-requires-label` | Accepted    | Secondary text renders only alongside a visible label, and a development warning fires otherwise. Flex treats the two visibility toggles as independent.                                                                         | None. The pairing keeps the label column from presenting supporting text with nothing to support. |
-| `checkbox-focus-visual-modality`         | Resolved    | The shared focus-modality hook suppresses the visual for pointer focus and shows it for keyboard or programmatic focus.                                                                                                          | Implemented in `useCheckbox.ts` and covered by interaction tests.                                 |
-| `checkbox-native-focus-ring`             | Resolved    | The native Windows focus ring is disabled so it cannot compete with the shared dual-ring visual.                                                                                                                                 | Implemented in `useCheckbox.ts` and covered by root-prop tests.                                   |
+| `checkbox-focus-visual-modality`         | Resolved    | The retained custom path uses the shared focus-modality hook. Native appearance is delegated to each renderer and is not a new modality guarantee.                                                                               | Preserve existing custom-path interaction coverage.                                               |
+| `checkbox-native-focus-ring`             | Accepted    | Every platform enables the native ring prop and hides the custom overlay by default; the evaluation fallback reverses that choice. A native ring is not guaranteed on unsupported renderers.                                     | Validate root props and ring suppression under the shared focus policy.                           |
 | `checkbox-owned-props-type-surface`      | Deferred    | The root type accepts role and checked or disabled state values that the implementation always overwrites.                                                                                                                       | Omit those owned keys from the exposed native-prop type in a separately reviewed API correction.  |
 
 ## Conformance
 
-| Requirement | Evidence                                                                             |
-| ----------- | ------------------------------------------------------------------------------------ |
-| CBX-001     | `checkbox.types.ts`, `useCheckbox.ts`, `checkbox.types.test.ts`, `checkbox.test.tsx` |
-| CBX-002     | `useCheckbox.ts`, `checkbox.test.tsx`, `checkbox.stories.tsx`                        |
-| CBX-003     | `renderCheckbox.tsx`, `useCheckbox.ts`, `checkbox.test.tsx`                          |
-| CBX-004     | `useCheckbox.ts`, `checkbox.test.tsx`                                                |
-| CBX-005     | `checkbox.styles.ts`, `useCheckboxStyles.ts`, `checkbox.test.tsx`                    |
-| CBX-006     | `useCheckboxStyles.ts`, `renderCheckbox.tsx`, `checkbox.test.tsx`                    |
+| Requirement | Evidence                                                                                                  |
+| ----------- | --------------------------------------------------------------------------------------------------------- |
+| CBX-001     | `checkbox.types.ts`, `useCheckbox.ts`, `checkbox.types.test.ts`, `checkbox.test.tsx`                      |
+| CBX-002     | `useCheckbox.ts`, `checkbox.test.tsx`, `checkbox.stories.tsx`                                             |
+| CBX-003     | `renderCheckbox.tsx`, `useCheckbox.ts`, `checkbox.test.tsx`                                               |
+| CBX-004     | `useCheckbox.ts`, `checkbox.test.tsx`                                                                     |
+| CBX-005     | `checkbox.styles.ts`, `useCheckboxStyles.ts`, `checkbox.test.tsx`                                         |
+| CBX-006     | `useCheckbox.ts`, `checkbox.styles.ts`, `useCheckboxStyles.ts`, `renderCheckbox.tsx`, `checkbox.test.tsx` |
diff --git a/packages/agentic/components/src/components/checkbox/checkbox.test.tsx b/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
index 1d441895c2..5dd401ea25 100644
--- a/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
+++ b/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
@@ -169,12 +169,12 @@ describe('Checkbox', () => {
     expect(StyleSheet.flatten(component.getByTestId('checkbox-label').props.style).color).toBe(colors.pressed.foregroundNeutralSecondary);
   });
 
-  it('renders the persistent dual-ring focus visual', async () => {
+  it('uses native focus visuals while retaining the hidden custom rings', async () => {
     const colors = defaultFlexTokens.color;
     const component = await renderCheckbox({ label: 'Focused' });
     const root = getRoot(component);
 
-    expect(root.props.enableFocusRing).toBe(false);
+    expect(root.props.enableFocusRing).toBe(true);
     await fireEvent(root, 'pressIn', {});
     await fireEvent(root, 'focus', {});
     expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
@@ -188,9 +188,7 @@ describe('Checkbox', () => {
       borderColor: colors.strokeFocusOuter,
       borderWidth: 2,
     });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
-      'opacity',
-    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: colors.strokeFocusInner,
       borderWidth: 1,
diff --git a/packages/agentic/components/src/components/checkbox/spec/accessibility.md b/packages/agentic/components/src/components/checkbox/spec/accessibility.md
index c442876ba3..bfd457db15 100644
--- a/packages/agentic/components/src/components/checkbox/spec/accessibility.md
+++ b/packages/agentic/components/src/components/checkbox/spec/accessibility.md
@@ -41,12 +41,13 @@ A disabled Checkbox reports disabled state, sets `focusable={false}`, and does
 not respond to activation. It is skipped by keyboard navigation rather than
 announced as an unavailable stop.
 
-The visible focus indicator is a persistent dual-ring overlay drawn from the
-focus stroke tokens. It stays mounted and toggles visibility, and it is hidden
-while disabled or while focus came from a pointer press. Keyboard and
-programmatic focus show it. It surrounds the whole row, including the label
-column, so the indicated region matches the press target. The overlay is hidden
-from the accessibility tree and does not receive pointer events.
-
-Checkbox disables the react-native-windows platform focus visual so the shared
-dual-ring overlay is the single visible focus treatment.
+The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Every platform receives the native focus-ring request on the whole row's press
+target and leaves the custom overlay mounted but hidden. Rendering support and
+keyboard versus pointer appearance are delegated to each platform renderer.
+
+On the retained custom path, the dual-ring overlay uses the existing focus
+stroke tokens and surrounds the whole row, including the label column. It is
+hidden while disabled or while focus came from a pointer press; keyboard and
+programmatic focus show it as before. The overlay remains hidden from the
+accessibility tree and does not receive pointer events.
diff --git a/packages/agentic/components/src/components/checkbox/spec/interaction.md b/packages/agentic/components/src/components/checkbox/spec/interaction.md
index 3a28bb7c87..bb66aa5b72 100644
--- a/packages/agentic/components/src/components/checkbox/spec/interaction.md
+++ b/packages/agentic/components/src/components/checkbox/spec/interaction.md
@@ -35,13 +35,16 @@ so neither `onStatusChange` nor the caller `onPress` runs.
 
 ## Focus and motion
 
-The focus visual stays in the tree for the lifetime of the control. Focus
-changes its visibility rather than mounting or unmounting a border-bearing
-native view. It is shown only when the control is focused and enabled.
-
-Pointer press state suppresses the visual when the press moves focus. A keyboard
-event restores focus-visible state, and programmatic focus is treated as
-focus-visible because no pointer interaction preceded it.
+The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Every platform receives the native focus-ring request, with rendering support
+and appearance delegated to its renderer. The custom
+visual and its border-bearing children stay mounted but hidden on that path.
+
+The retained custom path keeps its existing focused, enabled visibility
+calculation. Pointer press state suppresses that visual when the press moves
+focus; a keyboard event restores focus-visible state, and programmatic focus is
+treated as focus-visible when no pointer interaction preceded it. These are
+custom-path semantics, not guarantees about native rings.
 
 Checkbox runs no timed animation. Status, hover, press, and focus styling
 change on the next render, so reduced-motion settings need no separate path.
diff --git a/packages/agentic/components/src/components/checkbox/spec/source.json b/packages/agentic/components/src/components/checkbox/spec/source.json
index 9ce77c81dd..cead11b0ad 100644
--- a/packages/agentic/components/src/components/checkbox/spec/source.json
+++ b/packages/agentic/components/src/components/checkbox/spec/source.json
@@ -3,7 +3,7 @@
   "component": "checkbox",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-28",
+  "reviewedAt": "2026-09-11",
   "sources": [
     {
       "id": "flex-component",
@@ -70,6 +70,10 @@
     }
   ],
   "divergences": [
+    {
+      "id": "native-system-focus-visuals",
+      "status": "accepted"
+    },
     {
       "id": "checkbox-secondary-text-description",
       "status": "accepted"
@@ -84,7 +88,7 @@
     },
     {
       "id": "checkbox-native-focus-ring",
-      "status": "resolved"
+      "status": "accepted"
     },
     {
       "id": "checkbox-owned-props-type-surface",
@@ -114,7 +118,7 @@
     },
     {
       "id": "CBX-006",
-      "evidence": ["checkbox.styles.ts", "useCheckboxStyles.ts", "checkbox.test.tsx"]
+      "evidence": ["useCheckbox.ts", "checkbox.styles.ts", "useCheckboxStyles.ts", "renderCheckbox.tsx", "checkbox.test.tsx"]
     }
   ]
 }
diff --git a/packages/agentic/components/src/components/checkbox/useCheckbox.ts b/packages/agentic/components/src/components/checkbox/useCheckbox.ts
index b43520d695..b6dd789e53 100644
--- a/packages/agentic/components/src/components/checkbox/useCheckbox.ts
+++ b/packages/agentic/components/src/components/checkbox/useCheckbox.ts
@@ -4,6 +4,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 import { useControllableValue, useFocusVisible, usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
+import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import { Text } from '../text/text';
 import type { CheckboxProps, CheckboxState, CheckboxStatus } from './checkbox.types';
@@ -77,7 +78,7 @@ export function useCheckbox_unstable(props: CheckboxProps): CheckboxState {
     },
     accessible: rest.accessible ?? true,
     disabled,
-    enableFocusRing: false,
+    ...getNativeFocusVisualProps(),
     focusable: rest.focusable ?? !disabled,
     onPress: handlePress,
   };
diff --git a/packages/agentic/components/src/components/checkbox/useCheckboxStyles.ts b/packages/agentic/components/src/components/checkbox/useCheckboxStyles.ts
index 3b0b3fd6aa..9b4e5bec56 100644
--- a/packages/agentic/components/src/components/checkbox/useCheckboxStyles.ts
+++ b/packages/agentic/components/src/components/checkbox/useCheckboxStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps_unstable } from '../../primitives/focus-visual/focus-visual';
+import { createFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import {
   checkboxStyles,
@@ -30,7 +30,7 @@ export function useCheckboxStyles_unstable(state: CheckboxState) {
   const labelStyle: StyleProp<TextStyle> = [checkboxStyles.labelText, textThemeStyles.label, labelColors];
   const secondaryTextStyle: StyleProp<TextStyle> = [checkboxStyles.secondaryText, textThemeStyles.secondaryText, secondaryTextColors];
 
-  state.focusVisualProps = createFocusVisualProps_unstable({
+  state.focusVisualProps = createFocusVisualProps({
     borderRadius: state.tokens.borderRadius.base300,
     innerColor: state.tokens.color.strokeFocusInner,
     innerWidth: state.tokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/list-item/SPEC.md b/packages/agentic/components/src/components/list-item/SPEC.md
index 90dcff7379..a9b7e22292 100644
--- a/packages/agentic/components/src/components/list-item/SPEC.md
+++ b/packages/agentic/components/src/components/list-item/SPEC.md
@@ -49,7 +49,7 @@ semibold content width and show the selected fill.
 - **LIT-003:** Selection remains caller-owned, and each selection mode renders
   its documented presentational indicator and selected visual treatment.
 - **LIT-004:** Disabled, hover, press, focus, accessibility, and user-style
-  behavior remain coherent on the root.
+  behavior remain coherent on the root, following the [shared focus visual policy](../AGENTS.md#focus-visual-policy).
 - **LIT-005:** Size and secondary-content-position mappings preserve the
   documented React Native layout behavior.
 
@@ -59,8 +59,10 @@ On Windows and macOS, the root is a React Native `Pressable`, defaulting to
 the `button` accessibility role. It merges a caller's accessibility state with
 `disabled` and `selected`, is accessible by default, and is focusable unless
 disabled. Native press, pointer hover, and focus events drive the resolved
-state. The component keeps a dual-ring FocusVisual mounted and only exposes it
-while enabled and focused.
+state. The root requests native focus visuals on every platform under the shared
+policy; rendering depends on platform support.
+The dual-ring FocusVisual remains mounted, hidden on that path and retaining
+its enabled-focus visibility behavior on the custom path.
 
 There is no internal keyboard roving, list position announcement, virtualized
 item metadata, or selection change handling. A surrounding list may provide
@@ -68,6 +70,8 @@ those behaviors through its own React Native composition.
 
 ## Divergences from Flex
 
+- `native-system-focus-visuals` (**accepted**): Apply the [shared native adaptation](../AGENTS.md#focus-visual-policy).
+
 - `list-item-native-selection-indicators` (**accepted**): FURN renders the
   single- and multi-select indicators as inaccessible text glyphs rather than
   composing Radio or Checkbox controls.
diff --git a/packages/agentic/components/src/components/list-item/list-item.test.tsx b/packages/agentic/components/src/components/list-item/list-item.test.tsx
index dccaff9c80..48c7736449 100644
--- a/packages/agentic/components/src/components/list-item/list-item.test.tsx
+++ b/packages/agentic/components/src/components/list-item/list-item.test.tsx
@@ -172,20 +172,19 @@ describe('ListItem', () => {
     },
   );
 
-  it('renders a persistent dual-ring focus visual', async () => {
+  it('uses native focus visuals while retaining the hidden custom rings', async () => {
     const colors = defaultFlexTokens.color;
     const component = await renderListItem({ content: 'Focused' });
     const root = getRoot(component);
 
     await fireEvent(root, 'focus', {});
+    expect(root.props.enableFocusRing).toBe(true);
 
     expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: colors.strokeFocusOuter,
       borderWidth: 2,
     });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
-      'opacity',
-    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: colors.strokeFocusInner,
       borderWidth: 1,
diff --git a/packages/agentic/components/src/components/list-item/spec/accessibility.md b/packages/agentic/components/src/components/list-item/spec/accessibility.md
index fee41d5864..641982915a 100644
--- a/packages/agentic/components/src/components/list-item/spec/accessibility.md
+++ b/packages/agentic/components/src/components/list-item/spec/accessibility.md
@@ -11,6 +11,8 @@ those visual affordances. On Windows this exposes the root through UIA; on
 macOS it exposes the root through AX with the resolved role, name, selected
 state, and disabled state.
 
-Focus feedback is provided by the mounted FocusVisual, not a native focus
-border. Callers that change the root role or embed the row in a collection own
+The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy),
+requesting native feedback on every platform and retaining the mounted custom
+FocusVisual. Native rendering depends on platform support.
+Callers that change the root role or embed the row in a collection own
 any additional container semantics and position information.
diff --git a/packages/agentic/components/src/components/list-item/spec/interaction.md b/packages/agentic/components/src/components/list-item/spec/interaction.md
index 11a474b21b..4caa710022 100644
--- a/packages/agentic/components/src/components/list-item/spec/interaction.md
+++ b/packages/agentic/components/src/components/list-item/spec/interaction.md
@@ -11,6 +11,7 @@ its peers. Windows and macOS native Pressable behavior supplies keyboard
 activation for a focusable root. This component does not implement arrow-key
 movement, Home/End, type-ahead, focus restoration, or timed animation.
 
-The FocusVisual stays mounted and becomes visible only while the enabled root
-is focused. Hover, press, and selection styling update without component-owned
-motion.
+The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+FocusVisual stays mounted, hidden on the system path on every platform and retaining its
+enabled-focus visibility calculation on the custom path. Hover, press, and
+selection styling update without component-owned motion.
diff --git a/packages/agentic/components/src/components/list-item/spec/source.json b/packages/agentic/components/src/components/list-item/spec/source.json
index 610a7ee9cb..d787e48710 100644
--- a/packages/agentic/components/src/components/list-item/spec/source.json
+++ b/packages/agentic/components/src/components/list-item/spec/source.json
@@ -3,7 +3,7 @@
   "component": "list-item",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-28",
+  "reviewedAt": "2026-09-11",
   "sources": [
     {
       "id": "flex-component",
@@ -70,6 +70,10 @@
     }
   ],
   "divergences": [
+    {
+      "id": "native-system-focus-visuals",
+      "status": "accepted"
+    },
     {
       "id": "list-item-native-selection-indicators",
       "status": "accepted"
diff --git a/packages/agentic/components/src/components/list-item/useListItem.ts b/packages/agentic/components/src/components/list-item/useListItem.ts
index df5942fa45..6b60519c68 100644
--- a/packages/agentic/components/src/components/list-item/useListItem.ts
+++ b/packages/agentic/components/src/components/list-item/useListItem.ts
@@ -5,6 +5,7 @@ import { useOptionalSlot, usePressableState, useSlot } from '@fluentui-react-nat
 
 import { Icon } from '../../primitives/icon/icon';
 import { hideSlotProps } from '../../common/accessibility';
+import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
 import { Text } from '../text/text';
 
 import { getListItemAvatarSize, getListItemIconSize, getListItemSelectionIndicatorGlyph } from './list-item.styles';
@@ -85,6 +86,7 @@ export function useListItem_unstable(props: ListItemProps): ListItemState {
 
   const [pressableProps, pressableState] = usePressableState({
     ...rest,
+    ...getNativeFocusVisualProps(),
     accessibilityRole: rest.accessibilityRole ?? 'button',
     accessibilityState: {
       ...accessibilityState,
diff --git a/packages/agentic/components/src/components/list-item/useListItemStyles.ts b/packages/agentic/components/src/components/list-item/useListItemStyles.ts
index 7a666bca70..7ace5489c5 100644
--- a/packages/agentic/components/src/components/list-item/useListItemStyles.ts
+++ b/packages/agentic/components/src/components/list-item/useListItemStyles.ts
@@ -3,7 +3,7 @@ import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
 
 import { hiddenFromAccessibilityProps } from '../../common/accessibility';
-import { createFocusVisualProps_unstable } from '../../primitives/focus-visual/focus-visual';
+import { createFocusVisualProps } from '../../common/focusVisualPolicy';
 import {
   getListItemBackgroundStyle,
   getListItemContentStyle,
@@ -55,7 +55,7 @@ export function useListItemStyles_unstable(state: ListItemState) {
     },
   ];
 
-  state.focusVisualProps = createFocusVisualProps_unstable({
+  state.focusVisualProps = createFocusVisualProps({
     borderRadius: rootSizeStyle.borderRadius,
     innerColor: state.tokens.color.strokeFocusInner,
     innerWidth: state.tokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/listbox-item/SPEC.md b/packages/agentic/components/src/components/listbox-item/SPEC.md
index 273aeb87cb..207474f8fe 100644
--- a/packages/agentic/components/src/components/listbox-item/SPEC.md
+++ b/packages/agentic/components/src/components/listbox-item/SPEC.md
@@ -49,7 +49,7 @@ semibold label reservation, while its internal indicator reflects `selected`.
 - **LBI-003:** Preserve externally owned selection and its separate
   checkmark and multiselect presentations.
 - **LBI-004:** Resolve disabled, hover, press, and focus presentation with
-  user root style last.
+  user root style last, following the [shared focus visual policy](../AGENTS.md#focus-visual-policy).
 - **LBI-005:** Expose the native accessibility role and state appropriate to
   the resolved variant.
 
@@ -62,12 +62,17 @@ A section header is exposed through a nonfocusable React Native `View` with
 the `header` role. The internal leading and trailing visuals are inaccessible.
 
 Pointer hover, press, and focus events flow through `usePressableState`.
-FocusVisual stays mounted in the list-item structure, appearing only for an
-enabled focused option. No code here moves between options, processes
+The list-item root requests native focus visuals on every platform under the
+shared policy; rendering depends on platform support.
+FocusVisual stays mounted in that structure, hidden on the system path and
+retaining its enabled-focus visibility behavior on the custom path. Section
+headers gain no ring or focus stop. No code here moves between options, processes
 collection keys, opens submenus, or closes an owning popup.
 
 ## Divergences from Flex
 
+- `native-system-focus-visuals` (**accepted**): Apply the [shared native adaptation](../AGENTS.md#focus-visual-policy).
+
 - `listbox-item-native-pressed-state` (**accepted**): The selected option is
   surfaced to native accessibility through `accessibilityState.pressed`
   instead of a web accessibility attribute.
@@ -75,18 +80,18 @@ collection keys, opens submenus, or closes an owning popup.
   selected icon slots by default; the pinned Flex reference requires an
   explicit icon opt-in.
 - `listbox-item-native-focus-model` (**accepted**): FURN gives each option a
-  directly focusable Pressable root and local FocusVisual instead of retaining
-  focus at a parent selection controller.
+  directly focusable Pressable root and local platform focus treatment instead
+  of retaining focus at a parent selection controller.
 - `listbox-item-native-indicators` (**accepted**): The multiselect visual is
   the internal `CheckboxIndicator`, and the checkmark and chevron are
   inaccessible Icon slots rather than browser control composition.
 
 ## Conformance
 
-| Requirement | Evidence                                                                     |
-| ----------- | ---------------------------------------------------------------------------- |
-| LBI-001     | `listbox-item.types.ts`, `useListboxItem.ts`, `listbox-item.types.test.ts`   |
-| LBI-002     | `useListboxItem.ts`, `renderListboxItem.tsx`, `listbox-item.test.tsx`        |
-| LBI-003     | `useListboxItem.ts`, `listbox-item.styles.ts`, `listbox-item.test.tsx`       |
-| LBI-004     | `listbox-item.styles.ts`, `useListboxItemStyles.ts`, `listbox-item.test.tsx` |
-| LBI-005     | `useListboxItem.ts`, `renderListboxItem.tsx`, `listbox-item.test.tsx`        |
+| Requirement | Evidence                                                                                          |
+| ----------- | ------------------------------------------------------------------------------------------------- |
+| LBI-001     | `listbox-item.types.ts`, `useListboxItem.ts`, `listbox-item.types.test.ts`                        |
+| LBI-002     | `useListboxItem.ts`, `renderListboxItem.tsx`, `listbox-item.test.tsx`                             |
+| LBI-003     | `useListboxItem.ts`, `listbox-item.styles.ts`, `listbox-item.test.tsx`                            |
+| LBI-004     | `useListboxItem.ts`, `listbox-item.styles.ts`, `useListboxItemStyles.ts`, `listbox-item.test.tsx` |
+| LBI-005     | `useListboxItem.ts`, `renderListboxItem.tsx`, `listbox-item.test.tsx`                             |
diff --git a/packages/agentic/components/src/components/listbox-item/listbox-item.test.tsx b/packages/agentic/components/src/components/listbox-item/listbox-item.test.tsx
index 7c9fbc7a7b..db03d0e7b3 100644
--- a/packages/agentic/components/src/components/listbox-item/listbox-item.test.tsx
+++ b/packages/agentic/components/src/components/listbox-item/listbox-item.test.tsx
@@ -94,13 +94,12 @@ describe('ListboxItem', () => {
     expect(StyleSheet.flatten(root.props.style).backgroundColor).toBe(defaultFlexTokens.color.pressed.backgroundNeutralTransparent);
 
     await fireEvent(root, 'focus', {});
+    expect(root.props.enableFocusRing).toBe(true);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: defaultFlexTokens.color.strokeFocusOuter,
       borderWidth: defaultFlexTokens.strokeWidth.thick,
     });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
-      'opacity',
-    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: defaultFlexTokens.color.strokeFocusInner,
       borderWidth: defaultFlexTokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/listbox-item/spec/accessibility.md b/packages/agentic/components/src/components/listbox-item/spec/accessibility.md
index 15aa9b6e33..1405d5db17 100644
--- a/packages/agentic/components/src/components/listbox-item/spec/accessibility.md
+++ b/packages/agentic/components/src/components/listbox-item/spec/accessibility.md
@@ -12,6 +12,8 @@ checkmark, and the multiselect visual are inaccessible presentation, so the
 root is announced once. Windows exposes the resolved root through UIA and
 macOS through AX.
 
-The mounted FocusVisual supplies the visible focus feedback for an enabled
-option. Consumers own the containing collection's name, position, selection
+The option root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy),
+requesting native feedback on every platform and retaining the mounted custom
+FocusVisual. Native rendering depends on platform support.
+Consumers own the containing collection's name, position, selection
 rules, and any focus restoration policy.
diff --git a/packages/agentic/components/src/components/listbox-item/spec/interaction.md b/packages/agentic/components/src/components/listbox-item/spec/interaction.md
index dd8c4a047b..c1b954c861 100644
--- a/packages/agentic/components/src/components/listbox-item/spec/interaction.md
+++ b/packages/agentic/components/src/components/listbox-item/spec/interaction.md
@@ -7,8 +7,10 @@ pressing an option does not update `selected`; an owning list or popup must
 provide a new prop value.
 
 The component renders hover and press feedback from its resolved native state.
-Its FocusVisual remains mounted and is visible only when an enabled list item
-is focused. Section headers are noninteractive even when `loading` is false.
+Its root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+FocusVisual remains mounted, hidden on the system path on every platform and retaining
+its enabled-focus visibility calculation on the custom path. Section headers
+are noninteractive and gain no ring even when `loading` is false.
 
 Windows and macOS provide platform keyboard activation for the focusable
 Pressable. Arrow navigation, Home/End, type-ahead, submenu control, dismissal,
diff --git a/packages/agentic/components/src/components/listbox-item/spec/source.json b/packages/agentic/components/src/components/listbox-item/spec/source.json
index 64f2cd05d5..34cae7de5c 100644
--- a/packages/agentic/components/src/components/listbox-item/spec/source.json
+++ b/packages/agentic/components/src/components/listbox-item/spec/source.json
@@ -3,7 +3,7 @@
   "component": "listbox-item",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-28",
+  "reviewedAt": "2026-09-11",
   "sources": [
     {
       "id": "flex-component",
@@ -70,6 +70,10 @@
     }
   ],
   "divergences": [
+    {
+      "id": "native-system-focus-visuals",
+      "status": "accepted"
+    },
     {
       "id": "listbox-item-native-pressed-state",
       "status": "accepted"
@@ -102,7 +106,7 @@
     },
     {
       "id": "LBI-004",
-      "evidence": ["listbox-item.styles.ts", "useListboxItemStyles.ts", "listbox-item.test.tsx"]
+      "evidence": ["useListboxItem.ts", "listbox-item.styles.ts", "useListboxItemStyles.ts", "listbox-item.test.tsx"]
     },
     {
       "id": "LBI-005",
diff --git a/packages/agentic/components/src/components/listbox-item/useListboxItem.ts b/packages/agentic/components/src/components/listbox-item/useListboxItem.ts
index 727e8deaeb..7012b5e2b0 100644
--- a/packages/agentic/components/src/components/listbox-item/useListboxItem.ts
+++ b/packages/agentic/components/src/components/listbox-item/useListboxItem.ts
@@ -5,6 +5,7 @@ import { usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-nat
 import { useThemeState } from '@fluentui-react-native/design';
 
 import { semanticIconSources } from '../../common/iconSources';
+import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
 import { CheckboxIndicator } from '../../primitives/checkbox-indicator/checkbox-indicator';
 import { Icon } from '../../primitives/icon/icon';
 import { Text } from '../text/text';
@@ -63,6 +64,7 @@ export function useListboxItem_unstable(props: ListboxItemProps): ListboxItemSta
 
   const [rootProps, pressableState] = usePressableState({
     ...rest,
+    ...getNativeFocusVisualProps(),
     accessibilityRole: isListItem ? 'button' : 'header',
     accessibilityState: rootAccessibilityState,
     accessible: rest.accessible ?? true,
diff --git a/packages/agentic/components/src/components/listbox-item/useListboxItemStyles.ts b/packages/agentic/components/src/components/listbox-item/useListboxItemStyles.ts
index 77a6b2ca5d..0701d6a156 100644
--- a/packages/agentic/components/src/components/listbox-item/useListboxItemStyles.ts
+++ b/packages/agentic/components/src/components/listbox-item/useListboxItemStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps_unstable } from '../../primitives/focus-visual/focus-visual';
+import { createFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import {
   getListboxItemAvatarSize,
@@ -20,7 +20,7 @@ import type { ListboxItemState } from './listbox-item.types';
 export function useListboxItemStyles_unstable(state: ListboxItemState) {
   const resolvedRootStyle = getListboxItemRootStyle(state);
   const rootStyle: StyleProp<ViewStyle> = [listboxItemStyles.root, resolvedRootStyle, state.userStyle];
-  state.focusVisualProps = createFocusVisualProps_unstable({
+  state.focusVisualProps = createFocusVisualProps({
     borderRadius: resolvedRootStyle.borderRadius,
     innerColor: state.tokens.color.strokeFocusInner,
     innerWidth: state.tokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/menu-item/SPEC.md b/packages/agentic/components/src/components/menu-item/SPEC.md
index 42e108db78..1132011885 100644
--- a/packages/agentic/components/src/components/menu-item/SPEC.md
+++ b/packages/agentic/components/src/components/menu-item/SPEC.md
@@ -53,7 +53,8 @@ Multiselect takes visual precedence over selected fill and semibold text.
 - **MNI-004:** Keep section headers noninteractive and limit skeleton loading
   to that variant.
 - **MNI-005:** Apply token-derived interaction, accessibility, and persistent
-  focus behavior without overriding caller handlers.
+  custom focus structure without overriding caller handlers; the root's focus
+  feedback follows the [shared focus visual policy](../AGENTS.md#focus-visual-policy).
 
 ## Platform behavior
 
@@ -64,12 +65,17 @@ the default hint `"Has submenu"`. Header roots expose the `none` role, are
 disabled, and cannot receive focus. Decorative visuals are inaccessible.
 
 The native Pressable drives pointer hover, press, focus, and keyboard
-activation for interactive rows. FocusVisual is mounted for each row and
-visible only on enabled list items with focus. The component does not navigate
-between menu items, open a submenu, restore focus, or dismiss a menu.
+activation for interactive rows. Interactive roots request native focus visuals
+on every platform under the shared policy; rendering depends on platform support.
+FocusVisual is mounted for each row, hidden
+on the system path and using its existing enabled-focus visibility calculation
+on the custom path. Section headers gain no focus feedback. The component does
+not navigate between menu items, open a submenu, restore focus, or dismiss a menu.
 
 ## Divergences from Flex
 
+- `native-system-focus-visuals` (**accepted**): Apply the [shared native adaptation](../AGENTS.md#focus-visual-policy).
+
 - `menu-item-native-header-root` (**accepted**): A FURN section header uses a
   disabled Pressable with the `none` role rather than a platform-specific
   menu-group primitive.
@@ -79,10 +85,10 @@ between menu items, open a submenu, restore focus, or dismiss a menu.
 
 ## Conformance
 
-| Requirement | Evidence                                                            |
-| ----------- | ------------------------------------------------------------------- |
-| MNI-001     | `menu-item.types.ts`, `useMenuItem.ts`, `menu-item.types.test.ts`   |
-| MNI-002     | `useMenuItem.ts`, `renderMenuItem.tsx`, `menu-item.test.tsx`        |
-| MNI-003     | `useMenuItem.ts`, `menu-item.styles.ts`, `menu-item.test.tsx`       |
-| MNI-004     | `useMenuItem.ts`, `renderMenuItem.tsx`, `menu-item.test.tsx`        |
-| MNI-005     | `useMenuItemStyles.ts`, `menu-item.styles.ts`, `menu-item.test.tsx` |
+| Requirement | Evidence                                                                              |
+| ----------- | ------------------------------------------------------------------------------------- |
+| MNI-001     | `menu-item.types.ts`, `useMenuItem.ts`, `menu-item.types.test.ts`                     |
+| MNI-002     | `useMenuItem.ts`, `renderMenuItem.tsx`, `menu-item.test.tsx`                          |
+| MNI-003     | `useMenuItem.ts`, `menu-item.styles.ts`, `menu-item.test.tsx`                         |
+| MNI-004     | `useMenuItem.ts`, `renderMenuItem.tsx`, `menu-item.test.tsx`                          |
+| MNI-005     | `useMenuItem.ts`, `useMenuItemStyles.ts`, `menu-item.styles.ts`, `menu-item.test.tsx` |
diff --git a/packages/agentic/components/src/components/menu-item/menu-item.test.tsx b/packages/agentic/components/src/components/menu-item/menu-item.test.tsx
index 4eb2a0d279..157fdc205b 100644
--- a/packages/agentic/components/src/components/menu-item/menu-item.test.tsx
+++ b/packages/agentic/components/src/components/menu-item/menu-item.test.tsx
@@ -109,19 +109,18 @@ describe('MenuItem', () => {
     expect(getRootStyle(component).backgroundColor).toBe('hotpink');
   });
 
-  it('renders a persistent dual-ring focus visual for list items', async () => {
+  it('uses native focus visuals for list items while retaining the hidden custom rings', async () => {
     const component = await renderMenuItem({ content: 'Focused' });
     const root = getRoot(component);
 
     await fireEvent(root, 'focus', {});
+    expect(root.props.enableFocusRing).toBe(true);
 
     expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: defaultFlexTokens.color.strokeFocusOuter,
       borderWidth: defaultFlexTokens.strokeWidth.thick,
     });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
-      'opacity',
-    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: defaultFlexTokens.color.strokeFocusInner,
       borderWidth: defaultFlexTokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/menu-item/spec/accessibility.md b/packages/agentic/components/src/components/menu-item/spec/accessibility.md
index ec0e3d99ab..c7a117cc44 100644
--- a/packages/agentic/components/src/components/menu-item/spec/accessibility.md
+++ b/packages/agentic/components/src/components/menu-item/spec/accessibility.md
@@ -11,6 +11,8 @@ focusable. Icon, avatar, chevron, checkmark, and checkbox visuals are
 inaccessible presentation. On Windows the root is represented through UIA,
 and on macOS through AX, using the resolved role, name, state, and availability.
 
-FocusVisual is the component's visible focus treatment. An owning menu remains
-responsible for a menu-level name, menu position, and relationships to any
-submenu.
+Interactive roots follow the [shared focus visual policy](../../AGENTS.md#focus-visual-policy),
+requesting native feedback on every platform and retaining the mounted custom
+FocusVisual. Native rendering depends on platform support.
+An owning menu remains responsible for a menu-level name, menu position, and
+relationships to any submenu.
diff --git a/packages/agentic/components/src/components/menu-item/spec/interaction.md b/packages/agentic/components/src/components/menu-item/spec/interaction.md
index 9673490a68..0405b3583a 100644
--- a/packages/agentic/components/src/components/menu-item/spec/interaction.md
+++ b/packages/agentic/components/src/components/menu-item/spec/interaction.md
@@ -6,9 +6,11 @@ or receive focus. Pressing never changes `selected`, so an owning menu must
 update that value and clear peers when required.
 
 Hover and press state select the root and text colors after style selection.
-The dual-ring FocusVisual remains mounted and is visible only for an enabled,
-focused list item. Section headers do not activate or focus, including when
-their skeleton is shown.
+The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+The dual-ring FocusVisual remains mounted, hidden on the system path on every platform
+and retaining its enabled-focus visibility calculation on the custom path.
+Section headers do not activate, focus, or show a ring, including when their
+skeleton is shown.
 
 This component does not implement arrow navigation, Home/End, type-ahead,
 submenu opening, focus restoration, dismissal, or timed motion. Those are
diff --git a/packages/agentic/components/src/components/menu-item/spec/source.json b/packages/agentic/components/src/components/menu-item/spec/source.json
index 6cb4192264..e2d9c7b640 100644
--- a/packages/agentic/components/src/components/menu-item/spec/source.json
+++ b/packages/agentic/components/src/components/menu-item/spec/source.json
@@ -3,7 +3,7 @@
   "component": "menu-item",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-28",
+  "reviewedAt": "2026-09-11",
   "sources": [
     {
       "id": "flex-component",
@@ -70,6 +70,10 @@
     }
   ],
   "divergences": [
+    {
+      "id": "native-system-focus-visuals",
+      "status": "accepted"
+    },
     {
       "id": "menu-item-native-header-root",
       "status": "accepted"
@@ -98,7 +102,7 @@
     },
     {
       "id": "MNI-005",
-      "evidence": ["useMenuItemStyles.ts", "menu-item.styles.ts", "menu-item.test.tsx"]
+      "evidence": ["useMenuItem.ts", "useMenuItemStyles.ts", "menu-item.styles.ts", "menu-item.test.tsx"]
     }
   ]
 }
diff --git a/packages/agentic/components/src/components/menu-item/useMenuItem.ts b/packages/agentic/components/src/components/menu-item/useMenuItem.ts
index 3a9f22f6f5..d3110a8d82 100644
--- a/packages/agentic/components/src/components/menu-item/useMenuItem.ts
+++ b/packages/agentic/components/src/components/menu-item/useMenuItem.ts
@@ -4,6 +4,7 @@ import { usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-nat
 import { useThemeState } from '@fluentui-react-native/design';
 
 import { semanticIconSources } from '../../common/iconSources';
+import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
 import { CheckboxIndicator } from '../../primitives/checkbox-indicator/checkbox-indicator';
 import { Icon } from '../../primitives/icon/icon';
 import type { MenuItemProps, MenuItemState } from './menu-item.types';
@@ -55,6 +56,7 @@ export function useMenuItem_unstable(props: MenuItemProps): MenuItemState {
 
   const [pressableProps, pressableState] = usePressableState({
     ...rest,
+    ...getNativeFocusVisualProps(),
     accessible: rest.accessible ?? true,
     accessibilityHint: accessibilityHint ?? (hasChevron ? 'Has submenu' : undefined),
     accessibilityLabel: accessibilityLabel ?? contentText,
diff --git a/packages/agentic/components/src/components/menu-item/useMenuItemStyles.ts b/packages/agentic/components/src/components/menu-item/useMenuItemStyles.ts
index 629a9eb0d3..5ad3b8de93 100644
--- a/packages/agentic/components/src/components/menu-item/useMenuItemStyles.ts
+++ b/packages/agentic/components/src/components/menu-item/useMenuItemStyles.ts
@@ -3,7 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
 
 import { hiddenFromAccessibilityProps } from '../../common/accessibility';
-import { createFocusVisualProps_unstable } from '../../primitives/focus-visual/focus-visual';
+import { createFocusVisualProps } from '../../common/focusVisualPolicy';
 import {
   getMenuItemCheckboxStyle,
   getMenuItemLeadingStyle,
@@ -21,7 +21,7 @@ export function useMenuItemStyles_unstable(state: MenuItemState) {
   const rootLayoutStyle = getMenuItemRootLayoutStyle(state);
   const rootStyle: StyleProp<ViewStyle> = [menuItemStyles.root, rootLayoutStyle, getMenuItemRootStyle(state), state.userStyle];
 
-  state.focusVisualProps = createFocusVisualProps_unstable({
+  state.focusVisualProps = createFocusVisualProps({
     borderRadius: rootLayoutStyle.borderRadius,
     innerColor: state.tokens.color.strokeFocusInner,
     innerWidth: state.tokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/radio/SPEC.md b/packages/agentic/components/src/components/radio/SPEC.md
index 975fc73c63..978a4c1678 100644
--- a/packages/agentic/components/src/components/radio/SPEC.md
+++ b/packages/agentic/components/src/components/radio/SPEC.md
@@ -50,7 +50,7 @@ rather than explicitly hiding the indicator and text children.
 - **RAD-004:** Apply selection, disabled, hovered, pressed, and user-style
   precedence to the documented token bindings.
 - **RAD-005:** Expose radio semantics, accessible naming, disabled behavior,
-  descendant grouping, and the persistent FocusVisual.
+  descendant grouping, and root focus feedback under the [shared focus visual policy](../AGENTS.md#focus-visual-policy).
 
 ## Platform behavior
 
@@ -61,13 +61,17 @@ indicator and text subtrees are explicitly hidden from assistive technology so
 the named root is the single announced element.
 
 Native Pressable events provide hover, press, focus, and keyboard activation.
-The FocusVisual remains in the tree and is visible only for an enabled focused
-radio. Group name, arrow-key navigation, single-tab-stop behavior, peer
-selection, and focus restoration must be implemented by the component that
-renders the radios.
+The root requests native focus visuals on every platform under the shared policy;
+rendering depends on platform support. FocusVisual
+remains in the tree, hidden on the system path and retaining its enabled-focus
+visibility behavior on the custom path. Group name, arrow-key navigation,
+single-tab-stop behavior, peer selection, and focus restoration must be
+implemented by the component that renders the radios.
 
 ## Divergences from Flex
 
+- `native-system-focus-visuals` (**accepted**): Apply the [shared native adaptation](../AGENTS.md#focus-visual-policy).
+
 - `radio-native-composition` (**accepted**): FURN renders the label and
   indicator directly with React Native Text and View primitives instead of
   composing a platform label control.
diff --git a/packages/agentic/components/src/components/radio/radio.test.tsx b/packages/agentic/components/src/components/radio/radio.test.tsx
index bc65aba731..8beb937a07 100644
--- a/packages/agentic/components/src/components/radio/radio.test.tsx
+++ b/packages/agentic/components/src/components/radio/radio.test.tsx
@@ -118,19 +118,18 @@ describe('Radio', () => {
     expect(StyleSheet.flatten(getText(component, 'Choice').props.style).color).toBe(tokens.pressed.foregroundNeutralSecondary);
   });
 
-  it('renders a persistent dual-ring focus visual when focused', async () => {
+  it('uses native focus visuals while retaining the hidden custom rings', async () => {
     const component = await renderRadio({ label: 'Choice' });
     const root = getRoot(component);
 
     await fireEvent(root, 'focus', {});
+    expect(root.props.enableFocusRing).toBe(true);
 
     expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: '#000000',
       borderWidth: 2,
     });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
-      'opacity',
-    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: '#ffffff',
       borderWidth: 1,
diff --git a/packages/agentic/components/src/components/radio/spec/accessibility.md b/packages/agentic/components/src/components/radio/spec/accessibility.md
index fed90131ea..f0d988eab5 100644
--- a/packages/agentic/components/src/components/radio/spec/accessibility.md
+++ b/packages/agentic/components/src/components/radio/spec/accessibility.md
@@ -12,5 +12,7 @@ macOS AX expose only the root's radio role, name, checked value, and disabled
 value and cannot announce decorative descendants separately.
 
 The owning group must provide a group name and any positional or peer
-relationship information. FocusVisual is the visible focus feedback; it stays
-mounted and does not create a competing native focus border.
+relationship information. The root follows the
+[shared focus visual policy](../../AGENTS.md#focus-visual-policy), requesting native
+feedback on every platform and retaining the mounted custom FocusVisual without
+a competing visible ring. Native rendering depends on platform support.
diff --git a/packages/agentic/components/src/components/radio/spec/interaction.md b/packages/agentic/components/src/components/radio/spec/interaction.md
index 2c5ef8883e..362b88b745 100644
--- a/packages/agentic/components/src/components/radio/spec/interaction.md
+++ b/packages/agentic/components/src/components/radio/spec/interaction.md
@@ -6,8 +6,11 @@ activation and focus. Pressing reports through `onPress`; Radio never changes
 its own selected value.
 
 On Windows and macOS, native Pressable behavior activates a focused radio.
-Hover and press states change the token-derived colors, and focus reveals the
-persistent FocusVisual. There is no component-owned timed animation.
+Hover and press states change the token-derived colors. The root follows the
+[shared focus visual policy](../../AGENTS.md#focus-visual-policy): request native
+feedback on every platform with the persistent FocusVisual hidden, or use the existing custom
+visibility calculation on the retained path. There is no component-owned timed
+animation.
 
 An owning group must move focus with directional keys, establish the group
 entry point, update selected peers, and return focus when its surrounding
diff --git a/packages/agentic/components/src/components/radio/spec/source.json b/packages/agentic/components/src/components/radio/spec/source.json
index c4958afb33..9fa1101f35 100644
--- a/packages/agentic/components/src/components/radio/spec/source.json
+++ b/packages/agentic/components/src/components/radio/spec/source.json
@@ -3,7 +3,7 @@
   "component": "radio",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-28",
+  "reviewedAt": "2026-09-11",
   "sources": [
     {
       "id": "flex-component",
@@ -70,6 +70,10 @@
     }
   ],
   "divergences": [
+    {
+      "id": "native-system-focus-visuals",
+      "status": "accepted"
+    },
     {
       "id": "radio-native-composition",
       "status": "accepted"
diff --git a/packages/agentic/components/src/components/radio/useRadio.ts b/packages/agentic/components/src/components/radio/useRadio.ts
index 916d4ca24c..f1a045c1f9 100644
--- a/packages/agentic/components/src/components/radio/useRadio.ts
+++ b/packages/agentic/components/src/components/radio/useRadio.ts
@@ -2,6 +2,7 @@ import { Pressable } from 'react-native';
 
 import { usePressableState, useSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
+import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import type { RadioProps, RadioState } from './radio.types';
 
@@ -26,6 +27,7 @@ export function useRadio_unstable(props: RadioProps): RadioState {
   const themeState = useThemeState();
   const [pressableProps, pressableState] = usePressableState({
     ...rest,
+    ...getNativeFocusVisualProps(),
     accessibilityLabel: accessibilityLabel ?? label,
     accessibilityHint: accessibilityHint ?? (showSecondaryText ? secondaryText : undefined),
     accessibilityRole: 'radio',
diff --git a/packages/agentic/components/src/components/radio/useRadioStyles.ts b/packages/agentic/components/src/components/radio/useRadioStyles.ts
index fc91099f6a..8d756397c9 100644
--- a/packages/agentic/components/src/components/radio/useRadioStyles.ts
+++ b/packages/agentic/components/src/components/radio/useRadioStyles.ts
@@ -1,6 +1,6 @@
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { createFocusVisualProps_unstable } from '../../primitives/focus-visual/focus-visual';
+import { createFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import {
   radioStyles,
@@ -38,7 +38,7 @@ export function useRadioStyles_unstable(state: RadioState) {
     getRadioSecondaryTextColorStyle(state),
   ];
 
-  state.focusVisualProps = createFocusVisualProps_unstable({
+  state.focusVisualProps = createFocusVisualProps({
     borderRadius: rootLayoutStyle.borderRadius,
     innerColor: state.tokens.color.strokeFocusInner,
     innerWidth: state.tokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/switch/SPEC.md b/packages/agentic/components/src/components/switch/SPEC.md
index bbc0337213..d39443922b 100644
--- a/packages/agentic/components/src/components/switch/SPEC.md
+++ b/packages/agentic/components/src/components/switch/SPEC.md
@@ -93,8 +93,9 @@ value never moves.
 hovered state through the shared interactive precedence, and interpolate the
 track and thumb colors together with the thumb position from one progress value.
 
-**SWCH-005:** Show the two-ring focus visual inside the hit area while the root
-is focused and not disabled, using the root corner radius.
+**SWCH-005:** Follow the [shared focus visual policy](../AGENTS.md#focus-visual-policy)
+on the hit-area root, not the label container or track. Retain the mounted
+two-ring visual and its root-radius geometry for the custom path.
 
 **SWCH-006:** Expose the root as a switch to assistive technology with the
 checked and disabled state merged over any caller-supplied state, and derive the
@@ -129,11 +130,13 @@ interpolates colors, which the native driver cannot animate.
 
 ## Divergences from Flex
 
+`native-system-focus-visuals` is an **accepted** [shared native adaptation](../AGENTS.md#focus-visual-policy).
+
 | ID                                | Disposition | React Native contract                                                                                                                                                                 | Follow-up                                                                                                    |
 | --------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
 | `switch-label-association-ids`    | Resolved    | When the caller supplies no name, the component copies visible label text to the root as the single accessible-name mechanism and emits no unresolved labelled-by references.         | Implemented in `useSwitch.ts` and covered by naming tests.                                                   |
 | `switch-label-spacing`            | Accepted    | One container gap separates the control from whichever labels render. Flex distinguishes inner and outer label spacing per side.                                                      | None. A single gap is the natural React Native flex-container expression and matches the inner spacing step. |
-| `switch-focus-modality`           | Accepted    | The focus visual appears whenever the root is focused, including after a press. Flex shows it only for keyboard-modality focus.                                                       | None. React Native exposes no focus modality on these platforms.                                             |
+| `switch-focus-modality`           | Accepted    | The retained custom visual appears whenever the root is focused, including after a press. Native focus appearance is delegated to each renderer.                                      | No new modality guarantee is made by the platform adaptation.                                                |
 | `switch-keyboard-activation-path` | Deferred    | FURN registers both `onPress` and a recognized-key `onKeyUp` toggle. If Windows or macOS `Pressable` also synthesizes `onPress` for that key, one activation can request two toggles. | Verify the native event sequence, then remove the redundant path or document the platform-specific handler.  |
 
 ## Conformance
@@ -144,7 +147,7 @@ interpolates colors, which the native driver cannot animate.
 | SWCH-002    | `useSwitch.ts`, `switch.test.tsx`                                            |
 | SWCH-003    | `renderSwitch.tsx`, `useSwitch.ts`, `switch.test.tsx`                        |
 | SWCH-004    | `switch.styles.ts`, `useSwitchStyles.ts`, `switch.test.tsx`                  |
-| SWCH-005    | `useSwitchStyles.ts`, `switch.test.tsx`                                      |
+| SWCH-005    | `useSwitch.ts`, `useSwitchStyles.ts`, `switch.test.tsx`                      |
 | SWCH-006    | `useSwitch.ts`, `switch.test.tsx`                                            |
 | SWCH-007    | `switch.styles.ts`, `switch.test.tsx`                                        |
 | SWCH-008    | `useSwitch.ts`, `useSwitchStyles.ts`, `switch.stories.tsx`                   |
diff --git a/packages/agentic/components/src/components/switch/spec/accessibility.md b/packages/agentic/components/src/components/switch/spec/accessibility.md
index 24a4081d2f..a90703b2e9 100644
--- a/packages/agentic/components/src/components/switch/spec/accessibility.md
+++ b/packages/agentic/components/src/components/switch/spec/accessibility.md
@@ -45,9 +45,10 @@ checked state, so putting it in the name makes it read twice and go stale.
 
 The hit area is focusable while enabled and leaves the tab order when disabled,
 because `focusable` defaults to the negation of `disabled`. Enter and the space
-keys toggle on key up. The two-ring focus visual is drawn inside the hit area
-whenever the root is focused and not disabled, so it stays visible against both
-the light and the dark surface.
+keys toggle on key up. The hit-area root, not the label container or track,
+follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Every platform receives the native focus-ring request; rendering depends on
+platform support. The mounted two-ring visual is retained for the custom path.
 
 Disabled switches stay in the accessibility tree and report their disabled
 state, so a screen reader user can still discover the setting and hear that it
diff --git a/packages/agentic/components/src/components/switch/spec/interaction.md b/packages/agentic/components/src/components/switch/spec/interaction.md
index b8381e094d..3f12826a51 100644
--- a/packages/agentic/components/src/components/switch/spec/interaction.md
+++ b/packages/agentic/components/src/components/switch/spec/interaction.md
@@ -30,13 +30,13 @@ arrow keys, and moving through a group of switches is plain tab order.
 
 ## Focus visual
 
-A two-ring focus visual is drawn inside the hit area, following the root corner
-radius, whenever the root is focused and is not disabled. The two rings resolve
-from the inner and outer focus stroke tokens, so the indicator remains visible
-regardless of the surface behind it.
-
-React Native does not report focus modality on these platforms, so the ring
-appears for pointer focus as well as keyboard focus.
+The hit-area root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Every platform receives the native focus-ring request, with rendering support
+and appearance delegated to its renderer, while the custom
+visual remains mounted but hidden. On the retained custom path, the two-ring
+visual uses the root radius and existing focus stroke tokens and appears while
+the root is focused and enabled, including pointer focus. This adaptation does
+not introduce a new modality guarantee.
 
 ## State transition
 
diff --git a/packages/agentic/components/src/components/switch/spec/source.json b/packages/agentic/components/src/components/switch/spec/source.json
index 2338012b2f..a2a0b68dfc 100644
--- a/packages/agentic/components/src/components/switch/spec/source.json
+++ b/packages/agentic/components/src/components/switch/spec/source.json
@@ -3,7 +3,7 @@
   "component": "switch",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-28",
+  "reviewedAt": "2026-09-11",
   "sources": [
     {
       "id": "flex-component",
@@ -70,6 +70,10 @@
     }
   ],
   "divergences": [
+    {
+      "id": "native-system-focus-visuals",
+      "status": "accepted"
+    },
     {
       "id": "switch-label-association-ids",
       "status": "resolved"
@@ -106,7 +110,7 @@
     },
     {
       "id": "SWCH-005",
-      "evidence": ["useSwitchStyles.ts", "switch.test.tsx"]
+      "evidence": ["useSwitch.ts", "useSwitchStyles.ts", "switch.test.tsx"]
     },
     {
       "id": "SWCH-006",
diff --git a/packages/agentic/components/src/components/switch/spec/tokens.yaml b/packages/agentic/components/src/components/switch/spec/tokens.yaml
index fe3a96a3f9..c312613d11 100644
--- a/packages/agentic/components/src/components/switch/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/switch/spec/tokens.yaml
@@ -53,7 +53,7 @@ bindings:
     innerWidth: strokeWidth.thin
     outerColor: color.strokeFocusOuter
     outerWidth: strokeWidth.thick
-    visible: focused and not disabled
+    visible: custom path and focused and not disabled
 
   track:
     static:
diff --git a/packages/agentic/components/src/components/switch/switch.test.tsx b/packages/agentic/components/src/components/switch/switch.test.tsx
index df821e6e4c..ab54e615e5 100644
--- a/packages/agentic/components/src/components/switch/switch.test.tsx
+++ b/packages/agentic/components/src/components/switch/switch.test.tsx
@@ -120,20 +120,19 @@ describe('Switch', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
-  it('renders the persistent dual-ring focus visual on the hit area', async () => {
+  it('uses native focus visuals on the hit area while retaining the hidden custom rings', async () => {
     const tokens = defaultFlexTokens;
     const component = await renderSwitch({ label: 'Wi-Fi', labelAfter: false });
     const root = component.getByRole('switch', { name: 'Wi-Fi' });
 
     await fireEvent(root, 'focus', {});
+    expect(root.props.enableFocusRing).toBe(true);
 
     expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: tokens.color.strokeFocusOuter,
       borderWidth: tokens.strokeWidth.thick,
     });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
-      'opacity',
-    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: tokens.color.strokeFocusInner,
       borderWidth: tokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/switch/useSwitch.ts b/packages/agentic/components/src/components/switch/useSwitch.ts
index 3901f26485..474a268c85 100644
--- a/packages/agentic/components/src/components/switch/useSwitch.ts
+++ b/packages/agentic/components/src/components/switch/useSwitch.ts
@@ -10,6 +10,7 @@ import {
   useToggleState,
 } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
+import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import { Text } from '../text/text';
 import type { SwitchProps, SwitchState } from './switch.types';
@@ -104,6 +105,7 @@ export function useSwitch_unstable(props: SwitchProps): SwitchState {
 
   const [pressableProps, pressableState] = usePressableState({
     ...rest,
+    ...getNativeFocusVisualProps(),
     ...pressableNameProps,
     accessibilityRole: 'switch',
     accessibilityState: {
diff --git a/packages/agentic/components/src/components/switch/useSwitchStyles.ts b/packages/agentic/components/src/components/switch/useSwitchStyles.ts
index 9bd5ffd864..66f03cea9a 100644
--- a/packages/agentic/components/src/components/switch/useSwitchStyles.ts
+++ b/packages/agentic/components/src/components/switch/useSwitchStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps_unstable } from '../../primitives/focus-visual/focus-visual';
+import { createFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import {
   getSwitchLabelStyle,
@@ -63,7 +63,7 @@ export function useSwitchStyles_unstable(state: SwitchState) {
   ];
   const labelStyle: StyleProp<TextStyle> = [switchStyles.label, getSwitchLabelStyle(state)];
 
-  state.focusVisualProps = createFocusVisualProps_unstable({
+  state.focusVisualProps = createFocusVisualProps({
     borderRadius: rootBaseStyle.borderRadius,
     innerColor: state.tokens.color.strokeFocusInner,
     innerWidth: state.tokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/tab/SPEC.md b/packages/agentic/components/src/components/tab/SPEC.md
index 249f569254..c2d357d619 100644
--- a/packages/agentic/components/src/components/tab/SPEC.md
+++ b/packages/agentic/components/src/components/tab/SPEC.md
@@ -92,12 +92,14 @@ icon the same fixed size in both layouts.
 the controlled-panel relationship, merging caller state underneath, and drop a
 disabled tab from the tab order.
 
-**TAB-008:** Show the two-ring focus visual while the root is focused and not
-disabled, following the corner radius of the active layout.
+**TAB-008:** Follow the [shared focus visual policy](../AGENTS.md#focus-visual-policy)
+on the root, retaining the mounted two-ring visual and active-layout radius
+for the custom path.
 
 ## Platform behavior
 
-Windows and macOS behave identically. A standalone root is focusable while
+Windows and macOS share the following navigation behavior; focus rendering follows
+the shared platform policy. A standalone root is focusable while
 enabled and non-focusable while disabled. Inside TabList, exactly one enabled
 Tab is focusable and the parent moves that roving focus with orientation-aware
 arrows, Home, and End.
@@ -113,11 +115,13 @@ precedence over hover.
 
 ## Divergences from Flex
 
+`native-system-focus-visuals` is an **accepted** [shared native adaptation](../AGENTS.md#focus-visual-policy).
+
 | ID                                | Disposition | React Native contract                                                                                                                                                                            | Follow-up                                                                                                 |
 | --------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
 | `tab-disabled-focusability`       | Accepted    | A disabled tab is removed from the tab order and cannot be focused, while still reporting its disabled state. Flex keeps a disabled tab reachable so its state can be discovered by keyboard.    | None for this component. Reachability would have to come from a list container that manages roving focus. |
 | `tab-list-navigation-not-shipped` | Resolved    | TabList now coordinates group selection, roving focus, orientation-aware arrows, Home and End, disabled-item skipping, and the selection-follows-focus policy.                                   | Implemented by the adjacent TabList contract and integration tests.                                       |
-| `tab-focus-modality`              | Accepted    | The focus visual appears whenever the root is focused, including after a press. Flex shows it only for keyboard-modality focus.                                                                  | None. React Native exposes no focus modality on these platforms.                                          |
+| `tab-focus-modality`              | Accepted    | The retained custom visual appears whenever the root is focused, including after a press. Native focus appearance is delegated to each renderer.                                                 | No new modality guarantee is made by the platform adaptation.                                             |
 | `tab-selected-weight-reservation` | Accepted    | The selected label is heavier than the resting label, and the width for that heavier text is reserved on every tab so selection does not reflow the list. Flex describes only the weight change. | None. The reservation is an implementation requirement of the shared text layout, not a visual addition.  |
 
 ## Conformance
@@ -131,4 +135,4 @@ precedence over hover.
 | TAB-005     | `tab.styles.ts`, `useTabStyles.ts`, `tab.test.tsx`               |
 | TAB-006     | `tab.styles.ts`, `useTabStyles.ts`, `tab.stories.tsx`            |
 | TAB-007     | `useTab.ts`, `tab.test.tsx`                                      |
-| TAB-008     | `useTabStyles.ts`, `tab.test.tsx`                                |
+| TAB-008     | `useTab.ts`, `useTabStyles.ts`, `tab.test.tsx`                   |
diff --git a/packages/agentic/components/src/components/tab/spec/accessibility.md b/packages/agentic/components/src/components/tab/spec/accessibility.md
index 3393829ec3..d96e8f2ecc 100644
--- a/packages/agentic/components/src/components/tab/spec/accessibility.md
+++ b/packages/agentic/components/src/components/tab/spec/accessibility.md
@@ -49,8 +49,10 @@ TabList owns arrow, Home, and End movement and the selection-follows-focus
 policy. It overrides grouped selection and focusability while preserving the
 Tab's name, controlled-panel relationship, and consumer handlers.
 
-A two-ring focus visual is drawn inside the hit area, following the corner
-radius of the active layout, whenever the root is focused and not disabled.
+The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Every platform receives the native focus-ring request; rendering depends on
+platform support. The mounted two-ring visual and its active-layout radius
+are retained for the custom path.
 
 ## Contrast and state
 
diff --git a/packages/agentic/components/src/components/tab/spec/interaction.md b/packages/agentic/components/src/components/tab/spec/interaction.md
index ce40201b89..3169ce779b 100644
--- a/packages/agentic/components/src/components/tab/spec/interaction.md
+++ b/packages/agentic/components/src/components/tab/spec/interaction.md
@@ -24,12 +24,13 @@ behavior, producing the same selection request and `onPress` as a pointer press.
 
 ## Focus visual
 
-A two-ring focus visual is drawn inside the hit area, following the corner radius
-of the active layout, so it is rounded on an icon-and-text tab and circular on an
-icon-only tab. It is shown whenever the root is focused and not disabled.
-
-React Native does not report focus modality on these platforms, so the ring
-appears for pointer focus as well as keyboard focus.
+The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Every platform receives the native focus-ring request, with rendering support
+and appearance delegated to its renderer, while the custom
+visual remains mounted but hidden. On the retained custom path, the two-ring
+visual follows the active-layout radius and appears while the root is focused
+and enabled, including pointer focus. Native feedback is not required to match
+the custom rounded or circular geometry.
 
 ## Selection appearance
 
diff --git a/packages/agentic/components/src/components/tab/spec/source.json b/packages/agentic/components/src/components/tab/spec/source.json
index bd5b6b2409..7eb02c5b0d 100644
--- a/packages/agentic/components/src/components/tab/spec/source.json
+++ b/packages/agentic/components/src/components/tab/spec/source.json
@@ -3,7 +3,7 @@
   "component": "tab",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-28",
+  "reviewedAt": "2026-09-11",
   "sources": [
     {
       "id": "flex-component",
@@ -130,6 +130,10 @@
     }
   ],
   "divergences": [
+    {
+      "id": "native-system-focus-visuals",
+      "status": "accepted"
+    },
     {
       "id": "tab-disabled-focusability",
       "status": "accepted"
@@ -178,7 +182,7 @@
     },
     {
       "id": "TAB-008",
-      "evidence": ["useTabStyles.ts", "tab.test.tsx"]
+      "evidence": ["useTab.ts", "useTabStyles.ts", "tab.test.tsx"]
     }
   ]
 }
diff --git a/packages/agentic/components/src/components/tab/spec/tokens.yaml b/packages/agentic/components/src/components/tab/spec/tokens.yaml
index a4692f3081..c81fcebf41 100644
--- a/packages/agentic/components/src/components/tab/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/tab/spec/tokens.yaml
@@ -43,7 +43,7 @@ bindings:
     innerWidth: strokeWidth.thin
     outerColor: color.strokeFocusOuter
     outerWidth: strokeWidth.thick
-    visible: focused and not disabled
+    visible: custom path and focused and not disabled
 
   icon:
     slots:
diff --git a/packages/agentic/components/src/components/tab/tab.test.tsx b/packages/agentic/components/src/components/tab/tab.test.tsx
index 51dbe19932..46c54149df 100644
--- a/packages/agentic/components/src/components/tab/tab.test.tsx
+++ b/packages/agentic/components/src/components/tab/tab.test.tsx
@@ -201,18 +201,17 @@ describe('Tab', () => {
     expect(component.getByTestId('filled-icon').props.testID).toBe('filled-icon');
   });
 
-  it('renders a persistent dual-ring focus visual', async () => {
+  it('uses native focus visuals while retaining the hidden custom rings', async () => {
     const component = await renderTab({ controls: 'files-panel', content: 'Files' });
     const root = getRoot(component);
     await fireEvent(root, 'focus', {});
+    expect(root.props.enableFocusRing).toBe(true);
 
     expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: defaultFlexTokens.color.strokeFocusOuter,
       borderWidth: defaultFlexTokens.strokeWidth.thick,
     });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
-      'opacity',
-    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: defaultFlexTokens.color.strokeFocusInner,
       borderWidth: defaultFlexTokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/tab/useTab.ts b/packages/agentic/components/src/components/tab/useTab.ts
index 2c39732fee..e7784ce4b8 100644
--- a/packages/agentic/components/src/components/tab/useTab.ts
+++ b/packages/agentic/components/src/components/tab/useTab.ts
@@ -9,6 +9,7 @@ import {
   useSlot,
 } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
+import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import type { TabProps, TabState } from './tab.types';
 import { Icon } from '../../primitives/icon/icon';
@@ -56,6 +57,7 @@ export function useTab_unstable(props: TabProps): TabState {
   const themeState = useThemeState();
   const [pressableProps, pressableState] = usePressableState({
     ...nativeRest,
+    ...getNativeFocusVisualProps(),
     accessibilityPosInSet: tabList?.getPosition(value),
     accessibilitySetSize: tabList?.setSize,
     accessibilityRole: 'tab',
diff --git a/packages/agentic/components/src/components/tab/useTabStyles.ts b/packages/agentic/components/src/components/tab/useTabStyles.ts
index 296d28131d..6fd26e8c47 100644
--- a/packages/agentic/components/src/components/tab/useTabStyles.ts
+++ b/packages/agentic/components/src/components/tab/useTabStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps_unstable } from '../../primitives/focus-visual/focus-visual';
+import { createFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import { tabStyles, getTabColorStyles, getTabContentStyle, getTabIconSize, getTabRootStyle } from './tab.styles';
 import type { TabState } from './tab.types';
@@ -17,7 +17,7 @@ export function useTabStyles_unstable(state: TabState) {
   const hiddenContentStyle: StyleProp<TextStyle> = [tabStyles.content, getTabContentStyle(state, true), colors.foreground];
   const iconSize = getTabIconSize();
 
-  state.focusVisualProps = createFocusVisualProps_unstable({
+  state.focusVisualProps = createFocusVisualProps({
     borderRadius: rootLayoutStyle.borderRadius,
     innerColor: state.tokens.color.strokeFocusInner,
     innerWidth: state.tokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/tag/SPEC.md b/packages/agentic/components/src/components/tag/SPEC.md
index 9d0f00a43e..5f22e6ffcc 100644
--- a/packages/agentic/components/src/components/tag/SPEC.md
+++ b/packages/agentic/components/src/components/tag/SPEC.md
@@ -89,12 +89,14 @@ foreground.
 caller-supplied state, keep a disabled tag out of the tab order, and require an
 accessible name for icon-only tags.
 
-**TAG-009:** Show the two-ring focus visual while the root is focused and not
-disabled, following the resolved corner radius.
+**TAG-009:** Follow the [shared focus visual policy](../AGENTS.md#focus-visual-policy)
+on the root, retaining the mounted two-ring visual and resolved corner radius
+for the custom path.
 
 ## Platform behavior
 
-Windows and macOS behave identically. The root is focusable while enabled and
+Windows and macOS share the following activation behavior; focus rendering follows
+the shared platform policy. The root is focusable while enabled and
 leaves the tab order while disabled. Enter and Space activate the focused tag
 through the shared pressable behavior and produce the same `onPress` a pointer
 press produces.
@@ -111,6 +113,8 @@ moves across a row of tags.
 
 ## Divergences from Flex
 
+`native-system-focus-visuals` is an **accepted** [shared native adaptation](../AGENTS.md#focus-visual-policy).
+
 | ID                            | Disposition | React Native contract                                                                                                                                                                                  | Follow-up                                                                             |
 | ----------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
 | `tag-small-circular-padding`  | Resolved    | Small icon-and-text tags use the same horizontal and vertical padding and icon gap for circular and rounded shapes; shape changes only the radius.                                                     | Implemented in `tag.styles.ts` and covered by shape and size tests.                   |
@@ -130,4 +134,4 @@ moves across a row of tags.
 | TAG-006     | `tag.styles.ts`, `tag.stories.tsx`                               |
 | TAG-007     | `tag.styles.ts`, `useTagStyles.ts`, `tag.test.tsx`               |
 | TAG-008     | `useTag.ts`, `tag.test.tsx`                                      |
-| TAG-009     | `useTagStyles.ts`, `tag.test.tsx`                                |
+| TAG-009     | `useTag.ts`, `useTagStyles.ts`, `tag.test.tsx`                   |
diff --git a/packages/agentic/components/src/components/tag/spec/accessibility.md b/packages/agentic/components/src/components/tag/spec/accessibility.md
index f853751306..97385ba986 100644
--- a/packages/agentic/components/src/components/tag/spec/accessibility.md
+++ b/packages/agentic/components/src/components/tag/spec/accessibility.md
@@ -48,9 +48,10 @@ a row of tags is one tab stop per enabled tag. Enter and Space activate the
 focused tag. A disabled tag stays in the accessibility tree and reports its
 disabled state, so it can still be read.
 
-A two-ring focus visual is drawn inside the tag, following the resolved corner
-radius, whenever the root is focused and not disabled, so it is rounded on a
-rounded tag and circular on a circular or icon-only tag.
+The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Every platform receives the native focus-ring request; rendering depends on
+platform support. The mounted two-ring visual and its resolved rounded or
+circular radius are retained for the custom path.
 
 ## Contrast
 
diff --git a/packages/agentic/components/src/components/tag/spec/interaction.md b/packages/agentic/components/src/components/tag/spec/interaction.md
index 81714452f1..432831ad7d 100644
--- a/packages/agentic/components/src/components/tag/spec/interaction.md
+++ b/packages/agentic/components/src/components/tag/spec/interaction.md
@@ -36,10 +36,13 @@ in this package.
 
 ## Focus visual
 
-A two-ring focus visual is drawn inside the tag, following the resolved corner
-radius, whenever the root is focused and not disabled. React Native does not
-report focus modality on these platforms, so the ring appears for pointer focus
-as well as keyboard focus.
+The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Every platform receives the native focus-ring request, with rendering support
+and appearance delegated to its renderer, while the custom
+visual remains mounted but hidden. On the retained custom path, the two-ring
+visual follows the resolved radius and appears while the root is focused and
+enabled, including pointer focus. This adaptation does not introduce a new
+modality guarantee.
 
 When the caller removes a tag on activation, the focused element is destroyed.
 Move focus deliberately in that handler, to the next tag or to the container, or
diff --git a/packages/agentic/components/src/components/tag/spec/source.json b/packages/agentic/components/src/components/tag/spec/source.json
index d737de796d..e695409d72 100644
--- a/packages/agentic/components/src/components/tag/spec/source.json
+++ b/packages/agentic/components/src/components/tag/spec/source.json
@@ -3,7 +3,7 @@
   "component": "tag",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-28",
+  "reviewedAt": "2026-09-11",
   "sources": [
     {
       "id": "flex-component",
@@ -130,6 +130,10 @@
     }
   ],
   "divergences": [
+    {
+      "id": "native-system-focus-visuals",
+      "status": "accepted"
+    },
     {
       "id": "tag-small-circular-padding",
       "status": "resolved"
@@ -182,7 +186,7 @@
     },
     {
       "id": "TAG-009",
-      "evidence": ["useTagStyles.ts", "tag.test.tsx"]
+      "evidence": ["useTag.ts", "useTagStyles.ts", "tag.test.tsx"]
     }
   ]
 }
diff --git a/packages/agentic/components/src/components/tag/spec/tokens.yaml b/packages/agentic/components/src/components/tag/spec/tokens.yaml
index a5b11dc22e..f3c2324a75 100644
--- a/packages/agentic/components/src/components/tag/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/tag/spec/tokens.yaml
@@ -44,7 +44,7 @@ bindings:
     innerWidth: strokeWidth.thin
     outerColor: color.strokeFocusOuter
     outerWidth: strokeWidth.thick
-    visible: focused and not disabled
+    visible: custom path and focused and not disabled
 
   content:
     static:
diff --git a/packages/agentic/components/src/components/tag/tag.test.tsx b/packages/agentic/components/src/components/tag/tag.test.tsx
index 9f5fe57766..9e0573eef0 100644
--- a/packages/agentic/components/src/components/tag/tag.test.tsx
+++ b/packages/agentic/components/src/components/tag/tag.test.tsx
@@ -135,19 +135,18 @@ describe('Tag', () => {
     expect(StyleSheet.flatten(text.props.style).color).toBe(tokens.color.foregroundNeutralOnloud);
   });
 
-  it('renders a persistent dual-ring focus visual', async () => {
+  it('uses native focus visuals while retaining the hidden custom rings', async () => {
     const component = await renderTag({ content: 'Focused' });
     const root = getRoot(component);
 
     await fireEvent(root, 'focus', {});
+    expect(root.props.enableFocusRing).toBe(true);
 
     expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: defaultFlexTokens.color.strokeFocusOuter,
       borderWidth: defaultFlexTokens.strokeWidth.thick,
     });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
-      'opacity',
-    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
     expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: defaultFlexTokens.color.strokeFocusInner,
       borderWidth: defaultFlexTokens.strokeWidth.thin,
diff --git a/packages/agentic/components/src/components/tag/useTag.ts b/packages/agentic/components/src/components/tag/useTag.ts
index 86822b7283..540be941dc 100644
--- a/packages/agentic/components/src/components/tag/useTag.ts
+++ b/packages/agentic/components/src/components/tag/useTag.ts
@@ -4,6 +4,7 @@ import { useThemeState } from '@fluentui-react-native/design';
 import { useAccessibilityLabelWarning, useOptionalSlot, usePressableState, useSlot } from '@fluentui-react-native/framework-base';
 
 import { semanticIconSources } from '../../common/iconSources';
+import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
 import { Icon } from '../../primitives/icon/icon';
 import { Text } from '../text/text';
 import type { TagProps, TagState } from './tag.types';
@@ -51,6 +52,7 @@ export function useTag_unstable(props: TagProps): TagState {
   const themeState = useThemeState();
   const [pressableProps, pressableState] = usePressableState({
     ...rest,
+    ...getNativeFocusVisualProps(),
     accessibilityRole: 'button',
     accessibilityState: {
       ...accessibilityState,
diff --git a/packages/agentic/components/src/components/tag/useTagStyles.ts b/packages/agentic/components/src/components/tag/useTagStyles.ts
index 7c41069129..b1130d5268 100644
--- a/packages/agentic/components/src/components/tag/useTagStyles.ts
+++ b/packages/agentic/components/src/components/tag/useTagStyles.ts
@@ -1,6 +1,6 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps_unstable } from '../../primitives/focus-visual/focus-visual';
+import { createFocusVisualProps } from '../../common/focusVisualPolicy';
 
 import { tagStyles, getTagBackgroundStyle, getTagContentStyle, getTagForegroundStyle, getTagIconSize, getTagRootStyle } from './tag.styles';
 import type { TagState } from './tag.types';
@@ -14,7 +14,7 @@ export function useTagStyles_unstable(state: TagState) {
   const contentStyle: StyleProp<TextStyle> = [tagStyles.content, getTagContentStyle(state), foreground];
   const iconSizes = getTagIconSize(size);
 
-  state.focusVisualProps = createFocusVisualProps_unstable({
+  state.focusVisualProps = createFocusVisualProps({
     borderRadius: rootLayoutStyle.borderRadius,
     innerColor: state.tokens.color.strokeFocusInner,
     innerWidth: state.tokens.strokeWidth.thin,
diff --git a/packages/components/FocusZone/windows/FRNFocusZone/packages.lock.json b/packages/components/FocusZone/windows/FRNFocusZone/packages.lock.json
index 8269746dfd..396b4e4c7a 100644
--- a/packages/components/FocusZone/windows/FRNFocusZone/packages.lock.json
+++ b/packages/components/FocusZone/windows/FRNFocusZone/packages.lock.json
@@ -10,17 +10,17 @@
       },
       "Microsoft.ReactNative": {
         "type": "Direct",
-        "requested": "[0.81.34, )",
-        "resolved": "0.81.34",
-        "contentHash": "bxQ5t0OYrEJNoED9J8RFpRIZv12E7v55mkTRZAr/q5fZGZJWgNf7wWlnO5TFllpEPoqCT7rM+ktUwDH+kdrlww=="
+        "requested": "[0.81.35, )",
+        "resolved": "0.81.35",
+        "contentHash": "WjsJFALaLLUvJHUBw8k8G8/PB3p5qvqqXG7NYJefHOgqB7MbCSOnD/bckIqKcp53J+MkPxqaeg5tnYLVTVhqwQ=="
       },
       "Microsoft.ReactNative.Cxx": {
         "type": "Direct",
-        "requested": "[0.81.34, )",
-        "resolved": "0.81.34",
-        "contentHash": "/bMO65lSG4QTmoEw1IPG6xf/8oe//A7QnlF0Ve7oMXdV/uOmwEZWaW8q6H4rohji8jGEpRG3JUCQt9E856qkBg==",
+        "requested": "[0.81.35, )",
+        "resolved": "0.81.35",
+        "contentHash": "oadpIMSLN11M9W/hyZKyiCKE2wMvjb80Bl5jInVUmqDJWNswxnu7W5Kt/NA9ciy+BN0ru62ucO0E2PJDrnP/Jg==",
         "dependencies": {
-          "Microsoft.ReactNative": "0.81.34"
+          "Microsoft.ReactNative": "0.81.35"
         }
       },
       "Microsoft.VCRTForwarders.140": {
diff --git a/packages/native/Callout/windows/Callout/packages.lock.json b/packages/native/Callout/windows/Callout/packages.lock.json
index 8269746dfd..396b4e4c7a 100644
--- a/packages/native/Callout/windows/Callout/packages.lock.json
+++ b/packages/native/Callout/windows/Callout/packages.lock.json
@@ -10,17 +10,17 @@
       },
       "Microsoft.ReactNative": {
         "type": "Direct",
-        "requested": "[0.81.34, )",
-        "resolved": "0.81.34",
-        "contentHash": "bxQ5t0OYrEJNoED9J8RFpRIZv12E7v55mkTRZAr/q5fZGZJWgNf7wWlnO5TFllpEPoqCT7rM+ktUwDH+kdrlww=="
+        "requested": "[0.81.35, )",
+        "resolved": "0.81.35",
+        "contentHash": "WjsJFALaLLUvJHUBw8k8G8/PB3p5qvqqXG7NYJefHOgqB7MbCSOnD/bckIqKcp53J+MkPxqaeg5tnYLVTVhqwQ=="
       },
       "Microsoft.ReactNative.Cxx": {
         "type": "Direct",
-        "requested": "[0.81.34, )",
-        "resolved": "0.81.34",
-        "contentHash": "/bMO65lSG4QTmoEw1IPG6xf/8oe//A7QnlF0Ve7oMXdV/uOmwEZWaW8q6H4rohji8jGEpRG3JUCQt9E856qkBg==",
+        "requested": "[0.81.35, )",
+        "resolved": "0.81.35",
+        "contentHash": "oadpIMSLN11M9W/hyZKyiCKE2wMvjb80Bl5jInVUmqDJWNswxnu7W5Kt/NA9ciy+BN0ru62ucO0E2PJDrnP/Jg==",
         "dependencies": {
-          "Microsoft.ReactNative": "0.81.34"
+          "Microsoft.ReactNative": "0.81.35"
         }
       },
       "Microsoft.VCRTForwarders.140": {
diff --git a/yarn.lock b/yarn.lock
index dc4d3b9e9b..18efa9f1db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3049,7 +3049,7 @@ __metadata:
     react-native: ^0.81.6
     react-native-macos: ^0.81.0
     react-native-svg: ^15.12.1
-    react-native-windows: ^0.81.0
+    react-native-windows: ^0.81.35
   peerDependenciesMeta:
     "@office-iss/react-native-win32":
       optional: true
@@ -21596,16 +21596,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-windows@npm:^0.81.0":
-  version: 0.81.34
-  resolution: "react-native-windows@npm:0.81.34"
+"react-native-windows@npm:0.81.35":
+  version: 0.81.35
+  resolution: "react-native-windows@npm:0.81.35"
   dependencies:
     "@babel/runtime": "npm:^7.0.0"
     "@jest/create-cache-key-function": "npm:^29.7.0"
     "@react-native-community/cli": "npm:17.0.0"
     "@react-native-community/cli-platform-android": "npm:17.0.0"
     "@react-native-community/cli-platform-ios": "npm:17.0.0"
-    "@react-native-windows/cli": "npm:0.81.8"
+    "@react-native-windows/cli": "npm:0.81.9"
     "@react-native/assets": "npm:1.0.0"
     "@react-native/assets-registry": "npm:0.81.6"
     "@react-native/codegen": "npm:0.81.6"
@@ -21649,7 +21649,7 @@ __metadata:
     "@types/react": ^19.1.4
     react: ^19.1.4
     react-native: ^0.81.0
-  checksum: 10c0/38257bbf9c767207c0779ea4ac8ccd55a58ee388892e4247d35742b29fc77498474c8533a2654e1ed20e4b88b1339aef49a8c662ee7b7b523f01516ebb4363db
+  checksum: 10c0/a9f2a165539f8f7ce6ea47237414e96c928ae2115b00973b37bb74597b179cfebeb3f22f84e8d1d859af1e815f67a431b04a525567a1660ad386c1042a7b6ead
   languageName: node
   linkType: hard
 

From 84efd42b54e7ba2bb6a8c96f6b0e4421dbe7acef Mon Sep 17 00:00:00 2001
From: Jason Morse <jasonmo@microsoft.com>
Date: Fri, 11 Sep 2026 17:24:37 -0700
Subject: [PATCH 02/11] add ThemedRoot with root level interactive mode
 tracking

---
 .changeset/layered-themed-root.md             |   5 +
 apps/bundle-size/scenarios.json               |   6 +
 docs/pages/Theming/Basics.md                  |  59 +++
 packages/agentic/design/src/index.ts          |   6 +
 .../design/src/theming/ThemeProvider.tsx      |  10 +-
 .../design/src/theming/ThemedRoot.test.tsx    | 399 ++++++++++++++++++
 .../agentic/design/src/theming/ThemedRoot.tsx |  91 ++++
 .../src/theming/ThemedRoot.types.test.ts      |  42 ++
 .../agentic/design/src/theming/context.ts     |   4 +-
 packages/agentic/design/src/theming/index.ts  |   4 +
 packages/agentic/design/src/theming/modern.ts |   4 +
 .../agentic/design/src/theming/rootContext.ts |  24 ++
 12 files changed, 647 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/layered-themed-root.md
 create mode 100644 packages/agentic/design/src/theming/ThemedRoot.test.tsx
 create mode 100644 packages/agentic/design/src/theming/ThemedRoot.tsx
 create mode 100644 packages/agentic/design/src/theming/ThemedRoot.types.test.ts
 create mode 100644 packages/agentic/design/src/theming/rootContext.ts

diff --git a/.changeset/layered-themed-root.md b/.changeset/layered-themed-root.md
new file mode 100644
index 0000000000..84c77ed47e
--- /dev/null
+++ b/.changeset/layered-themed-root.md
@@ -0,0 +1,5 @@
+---
+"@fluentui-react-native/design": minor
+---
+
+Add a View-compatible ThemedRoot with inherited theme and appearance options, default Flex tokens, and a stable scene context that tracks keyboard and pointer input without rerendering consumers.
diff --git a/apps/bundle-size/scenarios.json b/apps/bundle-size/scenarios.json
index 280a192da9..1d20e25640 100644
--- a/apps/bundle-size/scenarios.json
+++ b/apps/bundle-size/scenarios.json
@@ -20,6 +20,12 @@
       "exports": ["FlexThemeReference", "ThemeProvider", "useThemeState"],
       "forbiddenInputPatterns": ["/theming/compat/", "/tokens/legacy/", "/color-lib/"]
     },
+    {
+      "name": "design-themed-root",
+      "module": "@fluentui-react-native/design",
+      "exports": ["ThemedRoot", "useRootContext", "useThemeState"],
+      "forbiddenInputPatterns": ["/theming/compat/", "/tokens/legacy/", "/color-lib/"]
+    },
     {
       "name": "design-color-lib",
       "module": "@fluentui-react-native/design/color-lib",
diff --git a/docs/pages/Theming/Basics.md b/docs/pages/Theming/Basics.md
index 80e8d47bfc..fb90071c7b 100644
--- a/docs/pages/Theming/Basics.md
+++ b/docs/pages/Theming/Basics.md
@@ -24,6 +24,65 @@ We have default themes for each platform. See [this page](./DefaultThemes.md) fo
 
 ## Applying a FURN theme
 
+### Scene roots with Flex themes
+
+`ThemedRoot` from `@fluentui-react-native/design` (also available from
+`@fluentui-react-native/design/theming`) is a `View` with the theme and appearance
+options of `ThemeProvider`. It forwards View props, children, and the native View
+ref without adding layout or background styles.
+
+```tsx
+import { ThemedRoot } from '@fluentui-react-native/design';
+
+export const App = () => (
+  <ThemedRoot style={{ flex: 1 }}>
+    <AppContent />
+    <ThemedRoot appearance={{ colorScheme: 'dark', interfaceLevel: 'elevated' }}>
+      <OverlayContent />
+    </ThemedRoot>
+  </ThemedRoot>
+);
+```
+
+An omitted `theme` inherits the nearest theme boundary, including an existing
+`ThemeProvider`. Without a boundary it uses a default `FlexThemeReference`.
+That default supplies the existing baseline Flex tokens; use an appearance-aware
+theme recipe when colors should vary with the resolved appearance.
+Nested roots can override individual `appearance` fields, `appearanceSource`,
+or `fallbackAppearance` while retaining the inherited source and other options.
+An explicit `theme` starts a new theme/appearance configuration, using that
+source's defaults plus the root's options.
+
+The outermost `ThemedRoot` also provides `RootContext`. `useRootContext()` returns
+the same object throughout a mounted scene, including under nested roots that
+replace the theme. Its read-only `inputModality` is initially `'pointer'`, becomes
+`'keyboard'` on key-down, and returns to `'pointer'` on pointer-down or touch-start.
+Read the property in an event handler when making a focus decision:
+
+```tsx
+import { useRootContext } from '@fluentui-react-native/design';
+
+const root = useRootContext();
+const onFocus = () => {
+  const showKeyboardFocus = root.inputModality === 'keyboard';
+  // Apply the focus behavior appropriate to this component.
+};
+```
+
+Modality changes do not notify React or rerender consumers; do not destructure
+the property during render if it needs to remain current in an event handler.
+Theme and appearance changes remain reactive. The hook throws outside a
+`ThemedRoot`; independent scenes maintain independent modality state.
+
+Only the outermost root installs tracking handlers. Keyboard and pointer capture
+handlers observe descendant input before bubbling handlers, and responder
+capture provides a touch fallback without claiming the responder by default.
+Caller handlers still run after tracking, and caller responder return values are
+preserved. Keyboard tracking requires a platform that emits View key events
+(macOS, Windows, Win32, or web); this component does not add native hardware-key
+support to iOS or Android. Native windows or portals whose events do not reach
+the scene root need their own scene boundary.
+
 ### Populating the Theme
 
 The theme is made available by the `ThemeProvider`. It takes in a `ThemeReference` as a value, which is the object created by the functions referenced in the pages above.
diff --git a/packages/agentic/design/src/index.ts b/packages/agentic/design/src/index.ts
index f4af3a8730..4b30f89d43 100644
--- a/packages/agentic/design/src/index.ts
+++ b/packages/agentic/design/src/index.ts
@@ -22,17 +22,22 @@ export {
   FlexThemeReference,
   normalizeThemeAppearanceRequest,
   resolveThemeAppearance,
+  RootContext,
+  ThemedRoot,
   ThemeProvider,
+  useRootContext,
 } from './theming/modern';
 export type {
   FlexThemeInput,
   FlexThemeRecipe,
   FlexThemeReferenceOptions,
   FlexThemeSource,
+  InputModality,
   LegacyThemeFallback,
   LegacyThemeSource,
   PartialFlexTokens,
   ResolvedThemeAppearance,
+  RootContextValue,
   ThemeAppearanceOptions,
   ThemeAppearanceRequest,
   ThemeAppearanceSource,
@@ -42,6 +47,7 @@ export type {
   ThemeColorScheme,
   ThemeContrast,
   ThemeInterfaceLevel,
+  ThemedRootProps,
   ThemeProviderProps,
   ThemeSource,
   ThemeSourceBase,
diff --git a/packages/agentic/design/src/theming/ThemeProvider.tsx b/packages/agentic/design/src/theming/ThemeProvider.tsx
index b9ab2d45f5..4cb1670a95 100644
--- a/packages/agentic/design/src/theming/ThemeProvider.tsx
+++ b/packages/agentic/design/src/theming/ThemeProvider.tsx
@@ -37,14 +37,12 @@ export const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = (props
   const subscribeAppearance = React.useCallback((listener: () => void) => appearanceSource.subscribe(listener), [appearanceSource]);
   const getAppearanceSnapshot = React.useCallback(() => appearanceSource.getSnapshot(), [appearanceSource]);
   const appearanceSnapshot = React.useSyncExternalStore(subscribeAppearance, getAppearanceSnapshot, getAppearanceSnapshot);
-  const appearance = resolveThemeAppearance({ ...source.appearanceOptions, ...appearanceOverride }, appearanceSnapshot, {
-    ...source.fallbackAppearance,
-    ...fallbackOverride,
-  });
+  const fallbackAppearance = resolveThemeAppearance(undefined, {}, { ...source.fallbackAppearance, ...fallbackOverride }).resolved;
+  const appearance = resolveThemeAppearance({ ...source.appearanceOptions, ...appearanceOverride }, appearanceSnapshot, fallbackAppearance);
   const publishedLegacyTheme = source.kind === 'legacy' ? source.resolveTheme(appearance.resolved) : undefined;
   const sourceContext = React.useMemo(
-    () => ({ source, sourceRevision, appearance, publishedLegacyTheme }),
-    [appearance, publishedLegacyTheme, source, sourceRevision],
+    () => ({ source, sourceRevision, appearance, appearanceSource, fallbackAppearance, publishedLegacyTheme }),
+    [appearance, appearanceSource, fallbackAppearance, publishedLegacyTheme, source, sourceRevision],
   );
 
   return (
diff --git a/packages/agentic/design/src/theming/ThemedRoot.test.tsx b/packages/agentic/design/src/theming/ThemedRoot.test.tsx
new file mode 100644
index 0000000000..ca73b97162
--- /dev/null
+++ b/packages/agentic/design/src/theming/ThemedRoot.test.tsx
@@ -0,0 +1,399 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+
+import { act, create } from 'react-test-renderer';
+import type { ReactTestRenderer } from 'react-test-renderer';
+
+import { mockTheme } from '../testing/mockTheme';
+import { defaultFlexTokens } from '../tokens/defaultTokens';
+import { useThemeState } from '../useThemeState';
+import type { ThemeState } from '../useThemeState';
+import type { ResolvedThemeAppearance, ThemeAppearanceSource, ThemeAppearanceSourceSnapshot } from './appearance.types';
+import { ThemeContext } from './context';
+import { FlexThemeReference } from './flexThemeReference';
+import { useRootContext } from './rootContext';
+import type { RootContextValue } from './rootContext';
+import { ThemedRoot } from './ThemedRoot';
+import { ThemeProvider } from './ThemeProvider';
+
+function Probe({ roots, themes }: { roots?: RootContextValue[]; themes?: ThemeState[] }) {
+  const root = useRootContext();
+  const theme = useThemeState();
+  roots?.push(root);
+  themes?.push(theme);
+  return null;
+}
+
+function createAppearanceSource(initial: ThemeAppearanceSourceSnapshot = {}) {
+  let snapshot = initial;
+  const listeners = new Set<() => void>();
+  return {
+    source: {
+      getSnapshot: () => snapshot,
+      subscribe: (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      },
+    } satisfies ThemeAppearanceSource,
+    update(next: ThemeAppearanceSourceSnapshot) {
+      snapshot = next;
+      listeners.forEach((listener) => listener());
+    },
+    listeners,
+  };
+}
+
+const keyEvent = {
+  nativeEvent: { key: 'Tab', altKey: false, ctrlKey: false, metaKey: false, shiftKey: false },
+  preventDefault: jest.fn(),
+  stopPropagation: jest.fn(),
+};
+const pointerEvent = { nativeEvent: { pointerType: 'mouse' } };
+const touchEvent = { nativeEvent: { touches: [{}] } };
+
+describe('ThemedRoot', () => {
+  let component: ReactTestRenderer | undefined;
+
+  function render(element: React.ReactElement) {
+    act(() => {
+      component = create(element);
+    });
+  }
+
+  function view(testID = 'root') {
+    return component!.root.findAllByType(View).find((node) => node.props.testID === testID)!;
+  }
+
+  afterEach(() => {
+    act(() => component?.unmount());
+    component = undefined;
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+  });
+
+  it('provides default Flex tokens and forwards View props, children, and the ref', () => {
+    const roots: RootContextValue[] = [];
+    const themes: ThemeState[] = [];
+    const ref = React.createRef<View>();
+    const style = { flex: 1 };
+    const onLayout = jest.fn();
+    render(
+      <ThemedRoot ref={ref} testID="root" style={style} accessibilityLabel="Scene" onLayout={onLayout}>
+        <Probe roots={roots} themes={themes} />
+      </ThemedRoot>,
+    );
+
+    expect(themes[0].tokens).toEqual(defaultFlexTokens);
+    expect(roots[0].inputModality).toBe('pointer');
+    expect(view().props.style).toBe(style);
+    expect(view().props.accessibilityLabel).toBe('Scene');
+    expect(view().props.onLayout).toBe(onLayout);
+    expect(view().props.theme).toBeUndefined();
+    expect(view().props.appearance).toBeUndefined();
+    expect(ref.current).toBe(view().instance);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it('tracks keyboard, pointer, and touch input without rerendering consumers', () => {
+    const roots: RootContextValue[] = [];
+    const themes: ThemeState[] = [];
+    render(
+      <ThemedRoot testID="root">
+        <Probe roots={roots} themes={themes} />
+      </ThemedRoot>,
+    );
+    const root = roots[0];
+    act(() => view().props.onKeyDownCapture(keyEvent));
+    expect(root.inputModality).toBe('keyboard');
+    act(() => view().props.onPointerDownCapture(pointerEvent));
+    expect(root.inputModality).toBe('pointer');
+    act(() => view().props.onKeyDown(keyEvent));
+    expect(root.inputModality).toBe('keyboard');
+    act(() => expect(view().props.onStartShouldSetResponderCapture(touchEvent)).toBe(false));
+    expect(root.inputModality).toBe('pointer');
+    expect(roots).toEqual([root]);
+    expect(themes).toHaveLength(1);
+    expect(keyEvent.preventDefault).not.toHaveBeenCalled();
+    expect(keyEvent.stopPropagation).not.toHaveBeenCalled();
+  });
+
+  it('updates modality before invoking caller handlers and preserves responder ownership', () => {
+    const roots: RootContextValue[] = [];
+    const onKeyDown = jest.fn(() => expect(roots[0].inputModality).toBe('keyboard'));
+    const onKeyDownCapture = jest.fn(() => expect(roots[0].inputModality).toBe('keyboard'));
+    const onPointerDownCapture = jest.fn(() => expect(roots[0].inputModality).toBe('pointer'));
+    const onStartShouldSetResponderCapture = jest.fn(() => {
+      expect(roots[0].inputModality).toBe('pointer');
+      return true;
+    });
+    render(
+      <ThemedRoot
+        testID="root"
+        onKeyDown={onKeyDown}
+        onKeyDownCapture={onKeyDownCapture}
+        onPointerDownCapture={onPointerDownCapture}
+        onStartShouldSetResponderCapture={onStartShouldSetResponderCapture}
+      >
+        <Probe roots={roots} />
+      </ThemedRoot>,
+    );
+    act(() => {
+      view().props.onKeyDownCapture(keyEvent);
+      view().props.onKeyDown(keyEvent);
+      view().props.onPointerDownCapture(pointerEvent);
+      view().props.onKeyDownCapture(keyEvent);
+      expect(view().props.onStartShouldSetResponderCapture(touchEvent)).toBe(true);
+    });
+    expect(onKeyDown).toHaveBeenCalledTimes(1);
+    expect(onKeyDown).toHaveBeenCalledWith(keyEvent);
+    expect(onKeyDownCapture).toHaveBeenCalledTimes(2);
+    expect(onKeyDownCapture).toHaveBeenCalledWith(keyEvent);
+    expect(onPointerDownCapture).toHaveBeenCalledTimes(1);
+    expect(onPointerDownCapture).toHaveBeenCalledWith(pointerEvent);
+    expect(onStartShouldSetResponderCapture).toHaveBeenCalledTimes(1);
+    expect(onStartShouldSetResponderCapture).toHaveBeenCalledWith(touchEvent);
+  });
+
+  it('preserves the live context and handler identities across appearance changes', () => {
+    const roots: RootContextValue[] = [];
+    render(
+      <ThemedRoot testID="root">
+        <Probe roots={roots} />
+      </ThemedRoot>,
+    );
+    const handlers = view().props;
+    act(() => handlers.onKeyDownCapture(keyEvent));
+    act(() => {
+      component!.update(
+        <ThemedRoot testID="root" appearance={{ colorScheme: 'dark' }}>
+          <Probe roots={roots} />
+        </ThemedRoot>,
+      );
+    });
+    expect(roots.length).toBeGreaterThan(1);
+    expect(roots.every((root) => root === roots[0])).toBe(true);
+    expect(roots[0].inputModality).toBe('keyboard');
+    expect(view().props.onKeyDownCapture).toBe(handlers.onKeyDownCapture);
+    expect(view().props.onPointerDownCapture).toBe(handlers.onPointerDownCapture);
+  });
+
+  it('shares modality through nested roots even when a nested root replaces the theme', () => {
+    const roots: RootContextValue[] = [];
+    const nestedRoots: RootContextValue[] = [];
+    const onKeyDown = jest.fn();
+    const onKeyDownCapture = jest.fn();
+    const onPointerDownCapture = jest.fn();
+    const onStartShouldSetResponderCapture = jest.fn(() => false);
+    render(
+      <ThemedRoot testID="root">
+        <Probe roots={roots} />
+        <ThemedRoot testID="plain">
+          <ThemedRoot
+            testID="nested"
+            theme={new FlexThemeReference()}
+            onKeyDown={onKeyDown}
+            onKeyDownCapture={onKeyDownCapture}
+            onPointerDownCapture={onPointerDownCapture}
+            onStartShouldSetResponderCapture={onStartShouldSetResponderCapture}
+          >
+            <Probe roots={nestedRoots} />
+          </ThemedRoot>
+        </ThemedRoot>
+      </ThemedRoot>,
+    );
+    expect(nestedRoots[0]).toBe(roots[0]);
+    for (const event of ['onKeyDown', 'onKeyDownCapture', 'onPointerDownCapture', 'onStartShouldSetResponderCapture']) {
+      expect(view('plain').props[event]).toBeUndefined();
+    }
+    expect(view('nested').props.onKeyDown).toBe(onKeyDown);
+    expect(view('nested').props.onKeyDownCapture).toBe(onKeyDownCapture);
+    expect(view('nested').props.onPointerDownCapture).toBe(onPointerDownCapture);
+    expect(view('nested').props.onStartShouldSetResponderCapture).toBe(onStartShouldSetResponderCapture);
+    act(() => view().props.onKeyDownCapture(keyEvent));
+    expect(nestedRoots[0].inputModality).toBe('keyboard');
+    expect(nestedRoots).toHaveLength(1);
+  });
+
+  it('isolates independent scene roots', () => {
+    const first: RootContextValue[] = [];
+    const second: RootContextValue[] = [];
+    render(
+      <>
+        <ThemedRoot testID="root">
+          <Probe roots={first} />
+        </ThemedRoot>
+        <ThemedRoot testID="second">
+          <Probe roots={second} />
+        </ThemedRoot>
+      </>,
+    );
+    act(() => view().props.onKeyDownCapture(keyEvent));
+    expect(first[0]).not.toBe(second[0]);
+    expect(first[0].inputModality).toBe('keyboard');
+    expect(second[0].inputModality).toBe('pointer');
+  });
+
+  it.each(['macos', 'windows', 'win32', 'web', 'ios', 'android'])('uses supported event surfaces on %s', (platform) => {
+    // win32 is a runtime platform supported by adapters, but is absent from core RN's OS union.
+    jest.replaceProperty(Platform, 'OS', platform as typeof Platform.OS);
+    render(<ThemedRoot testID="root" />);
+    expect(view().props.onPointerDownCapture).toEqual(expect.any(Function));
+    expect(view().props.onStartShouldSetResponderCapture).toEqual(expect.any(Function));
+    if (platform === 'ios' || platform === 'android') {
+      expect(view().props.onKeyDown).toBeUndefined();
+      expect(view().props.onKeyDownCapture).toBeUndefined();
+    } else {
+      expect(view().props.onKeyDown).toEqual(expect.any(Function));
+      expect(view().props.onKeyDownCapture).toEqual(expect.any(Function));
+    }
+  });
+
+  it('inherits a ThemeProvider source and overrides only requested appearance fields', () => {
+    const parentThemes: ThemeState[] = [];
+    const nestedThemes: ThemeState[] = [];
+    const theme = new FlexThemeReference({
+      base: ({ colorScheme }) => ({ color: { backgroundBrandHeavy: colorScheme === 'dark' ? '#111111' : '#eeeeee' } }),
+    });
+    render(
+      <ThemeProvider theme={theme} appearance={{ colorScheme: 'dark', contrast: 'highContrast' }}>
+        <ThemedRoot testID="root">
+          <Probe themes={parentThemes} />
+          <ThemedRoot appearance={{ interfaceLevel: 'elevated' }}>
+            <Probe themes={nestedThemes} />
+          </ThemedRoot>
+        </ThemedRoot>
+      </ThemeProvider>,
+    );
+    expect(nestedThemes[0].tokens.color.backgroundBrandHeavy).toBe('#111111');
+    expect(nestedThemes[0].appearance).toEqual({ colorScheme: 'dark', contrast: 'highContrast', interfaceLevel: 'elevated' });
+    expect(parentThemes[0].appearance.interfaceLevel).toBe('base');
+    act(() => theme.update({ spacing: { componentBase100: 21 } }));
+    expect(nestedThemes[nestedThemes.length - 1].tokens.spacing.componentBase100).toBe(21);
+  });
+
+  it('inherits live appearance sources and merges fallback fields from provider boundaries', () => {
+    const appearance = createAppearanceSource();
+    const themes: ThemeState[] = [];
+    render(
+      <ThemeProvider
+        theme={new FlexThemeReference()}
+        appearanceSource={appearance.source}
+        fallbackAppearance={{ colorScheme: 'dark', contrast: 'highContrast' }}
+      >
+        <ThemedRoot fallbackAppearance={{ interfaceLevel: 'elevated' }}>
+          <ThemedRoot>
+            <Probe themes={themes} />
+          </ThemedRoot>
+        </ThemedRoot>
+      </ThemeProvider>,
+    );
+    expect(themes[0].appearance).toEqual({ colorScheme: 'dark', contrast: 'highContrast', interfaceLevel: 'elevated' });
+    act(() => appearance.update({ colorScheme: 'light', contrast: 'standard' }));
+    expect(themes[themes.length - 1].appearance).toEqual({ colorScheme: 'light', contrast: 'standard', interfaceLevel: 'elevated' });
+    act(() => component!.unmount());
+    expect(appearance.listeners.size).toBe(0);
+  });
+
+  it('can opt an inherited fixed appearance back into the inherited system source', () => {
+    const appearance = createAppearanceSource({ colorScheme: 'light' });
+    const themes: ThemeState[] = [];
+    render(
+      <ThemedRoot appearance={{ colorScheme: 'dark' }} appearanceSource={appearance.source}>
+        <ThemedRoot appearance={{ colorScheme: 'system' }}>
+          <Probe themes={themes} />
+        </ThemedRoot>
+      </ThemedRoot>,
+    );
+    expect(themes[0].appearance.colorScheme).toBe('light');
+    act(() => appearance.update({ colorScheme: 'dark' }));
+    expect(themes[themes.length - 1].appearance.colorScheme).toBe('dark');
+  });
+
+  it('propagates source fallback changes when the source is invalidated', () => {
+    const fallback: Partial<ResolvedThemeAppearance> = { colorScheme: 'dark' };
+    const theme = new FlexThemeReference({
+      appearanceSource: createAppearanceSource().source,
+      fallbackAppearance: fallback,
+    });
+    const themes: ThemeState[] = [];
+    render(
+      <ThemedRoot theme={theme}>
+        <ThemedRoot>
+          <Probe themes={themes} />
+        </ThemedRoot>
+      </ThemedRoot>,
+    );
+    expect(themes[0].appearance.colorScheme).toBe('dark');
+    act(() => {
+      fallback.colorScheme = 'light';
+      theme.invalidate();
+    });
+    expect(themes[themes.length - 1].appearance.colorScheme).toBe('light');
+  });
+
+  it('lets a nested root replace the appearance source without replacing the theme', () => {
+    const outer = createAppearanceSource({ colorScheme: 'dark' });
+    const inner = createAppearanceSource({ colorScheme: 'light' });
+    const themes: ThemeState[] = [];
+    render(
+      <ThemedRoot theme={new FlexThemeReference({ base: { spacing: { componentBase100: 23 } } })} appearanceSource={outer.source}>
+        <ThemedRoot appearanceSource={inner.source}>
+          <Probe themes={themes} />
+        </ThemedRoot>
+      </ThemedRoot>,
+    );
+    expect(themes[0].appearance.colorScheme).toBe('light');
+    expect(themes[0].tokens.spacing.componentBase100).toBe(23);
+    act(() => inner.update({ colorScheme: 'dark' }));
+    expect(themes[themes.length - 1].appearance.colorScheme).toBe('dark');
+  });
+
+  it('uses an explicit theme configuration rather than inheriting appearance overrides', () => {
+    const themes: ThemeState[] = [];
+    render(
+      <ThemedRoot appearance={{ colorScheme: 'dark', contrast: 'highContrast' }}>
+        <ThemedRoot
+          theme={
+            new FlexThemeReference({
+              base: { spacing: { componentBase100: 25 } },
+              appearance: { colorScheme: 'light', contrast: 'standard' },
+            })
+          }
+        >
+          <Probe themes={themes} />
+        </ThemedRoot>
+      </ThemedRoot>,
+    );
+    expect(themes[0].appearance.colorScheme).toBe('light');
+    expect(themes[0].appearance.contrast).toBe('standard');
+    expect(themes[0].tokens.spacing.componentBase100).toBe(25);
+  });
+
+  it('inherits the nearest raw legacy theme rather than a more distant source', () => {
+    const themes: ThemeState[] = [];
+    const legacyTheme = {
+      ...mockTheme,
+      colors: { ...mockTheme.colors, neutralBackground2: '#123456' },
+      host: { ...mockTheme.host, appearance: 'dark' as const },
+    };
+    render(
+      <ThemedRoot>
+        <ThemeContext.Provider value={legacyTheme}>
+          <ThemedRoot>
+            <Probe themes={themes} />
+          </ThemedRoot>
+        </ThemeContext.Provider>
+      </ThemedRoot>,
+    );
+    expect(themes[0].tokens.color.backgroundNeutralSubtle).toBe('#123456');
+    expect(themes[0].appearance.colorScheme).toBe('dark');
+  });
+
+  it('reports a missing scene root instead of returning an untracked modality', () => {
+    expect(() => {
+      act(() => {
+        create(<Probe />);
+      });
+    }).toThrow('useRootContext must be used within a ThemedRoot.');
+  });
+});
diff --git a/packages/agentic/design/src/theming/ThemedRoot.tsx b/packages/agentic/design/src/theming/ThemedRoot.tsx
new file mode 100644
index 0000000000..bd9c8e62ba
--- /dev/null
+++ b/packages/agentic/design/src/theming/ThemedRoot.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+
+import type { IViewProps } from '@fluentui-react-native/adapters';
+
+import { useThemeBoundary } from './context';
+import { FlexThemeReference } from './flexThemeReference';
+import { RootContext } from './rootContext';
+import type { InputModality } from './rootContext';
+import { ThemeProvider } from './ThemeProvider';
+import type { ThemeProviderProps } from './ThemeProvider';
+
+export interface ThemedRootProps extends IViewProps, Pick<ThemeProviderProps, 'appearance' | 'appearanceSource' | 'fallbackAppearance'> {
+  /**
+   * Inherits the nearest theme boundary when omitted, or uses the default Flex
+   * theme when there is no boundary. An explicit theme starts a new appearance
+   * configuration; input modality is still shared with the scene root.
+   */
+  theme?: ThemeProviderProps['theme'];
+}
+
+const defaultTheme = new FlexThemeReference();
+
+/**
+ * A View that provides a theme and tracks input modality once per scene.
+ */
+export const ThemedRoot = React.forwardRef<View, ThemedRootProps>((props, ref) => {
+  const { theme, appearance, appearanceSource, fallbackAppearance, children, ...viewProps } = props;
+  const parentTheme = useThemeBoundary();
+  const parentRoot = React.useContext(RootContext);
+  const localRoot = React.useRef<{ inputModality: InputModality }>({ inputModality: 'pointer' });
+  const inheritedTheme = theme === undefined ? parentTheme : undefined;
+  const resolvedFallback = React.useMemo(
+    () => ({ ...inheritedTheme?.fallbackAppearance, ...fallbackAppearance }),
+    [inheritedTheme?.fallbackAppearance, fallbackAppearance],
+  );
+  const { onKeyDown, onKeyDownCapture, onPointerDownCapture, onStartShouldSetResponderCapture } = viewProps;
+  const trackKeyDown = React.useCallback<NonNullable<IViewProps['onKeyDown']>>(
+    (event) => {
+      localRoot.current.inputModality = 'keyboard';
+      onKeyDown?.(event);
+    },
+    [onKeyDown],
+  );
+  const trackKeyDownCapture = React.useCallback<NonNullable<IViewProps['onKeyDownCapture']>>(
+    (event) => {
+      localRoot.current.inputModality = 'keyboard';
+      onKeyDownCapture?.(event);
+    },
+    [onKeyDownCapture],
+  );
+  const trackPointerDown = React.useCallback<NonNullable<IViewProps['onPointerDownCapture']>>(
+    (event) => {
+      localRoot.current.inputModality = 'pointer';
+      onPointerDownCapture?.(event);
+    },
+    [onPointerDownCapture],
+  );
+  const trackTouchStart = React.useCallback<NonNullable<IViewProps['onStartShouldSetResponderCapture']>>(
+    (event) => {
+      localRoot.current.inputModality = 'pointer';
+      return onStartShouldSetResponderCapture?.(event) ?? false;
+    },
+    [onStartShouldSetResponderCapture],
+  );
+  const trackingProps: IViewProps = parentRoot
+    ? {}
+    : {
+        // Keep the bubbling handler too: desktop native views use it to enable key events.
+        ...(Platform.OS !== 'ios' && Platform.OS !== 'android' ? { onKeyDown: trackKeyDown, onKeyDownCapture: trackKeyDownCapture } : {}),
+        onPointerDownCapture: trackPointerDown,
+        onStartShouldSetResponderCapture: trackTouchStart,
+      };
+
+  return (
+    <ThemeProvider
+      theme={theme ?? inheritedTheme?.source ?? defaultTheme}
+      appearance={{ ...inheritedTheme?.appearance.requested, ...appearance }}
+      appearanceSource={appearanceSource ?? inheritedTheme?.appearanceSource}
+      fallbackAppearance={resolvedFallback}
+    >
+      <RootContext.Provider value={parentRoot ?? localRoot.current}>
+        <View {...viewProps} {...trackingProps} ref={ref}>
+          {children}
+        </View>
+      </RootContext.Provider>
+    </ThemeProvider>
+  );
+});
+
+ThemedRoot.displayName = 'ThemedRoot';
diff --git a/packages/agentic/design/src/theming/ThemedRoot.types.test.ts b/packages/agentic/design/src/theming/ThemedRoot.types.test.ts
new file mode 100644
index 0000000000..0024372bfe
--- /dev/null
+++ b/packages/agentic/design/src/theming/ThemedRoot.types.test.ts
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { View } from 'react-native';
+
+import { ThemedRoot } from '../index';
+import type { InputModality, RootContextValue, ThemedRootProps } from '../index';
+import { ThemedRoot as ThemingRoot, useRootContext } from './index';
+
+function acceptsViewProps(props: React.ComponentPropsWithRef<typeof View>) {
+  return React.createElement(ThemedRoot, props);
+}
+
+function readOnlyRoot(root: RootContextValue) {
+  const modality: InputModality = root.inputModality;
+  // @ts-expect-error Consumers may query, but not modify, scene state.
+  root.inputModality = 'pointer';
+  return modality;
+}
+
+const props: ThemedRootProps = {
+  appearance: { colorScheme: 'system', contrast: 'highContrast' },
+  onKeyDownCapture: (event) => {
+    const key: string = event.nativeEvent.key;
+    return key;
+  },
+  onStartShouldSetResponderCapture: () => false,
+};
+// @ts-expect-error Modality is limited to keyboard and pointer.
+const invalidModality: InputModality = 'touch';
+// @ts-expect-error ThemedRoot uses the structured appearance contract.
+const invalidAppearance: ThemedRootProps = { appearance: 'dark' };
+
+describe('ThemedRoot types', () => {
+  it('exports the same component through both public entrypoints', () => {
+    expect(ThemedRoot).toBe(ThemingRoot);
+    expect(useRootContext).toEqual(expect.any(Function));
+    expect(acceptsViewProps({ testID: 'view' }).type).toBe(ThemedRoot);
+    expect(readOnlyRoot).toEqual(expect.any(Function));
+    expect(props.appearance.colorScheme).toBe('system');
+    expect(invalidModality).toBe('touch');
+    expect(invalidAppearance.appearance).toBe('dark');
+  });
+});
diff --git a/packages/agentic/design/src/theming/context.ts b/packages/agentic/design/src/theming/context.ts
index de63e7101a..1e77b68f00 100644
--- a/packages/agentic/design/src/theming/context.ts
+++ b/packages/agentic/design/src/theming/context.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { appearanceOptionsFromLegacy, resolveThemeAppearance } from './appearance';
-import type { ThemeAppearanceState } from './appearance.types';
+import type { ResolvedThemeAppearance, ThemeAppearanceSource, ThemeAppearanceState } from './appearance.types';
 import { platformAppearance } from './platformAppearance';
 import type { ThemeSource } from './themeSource';
 import { legacyThemeSourceFromTheme } from './themeSource';
@@ -13,6 +13,8 @@ export interface ThemeSourceContextValue {
   readonly source: ThemeSource;
   readonly sourceRevision: number;
   readonly appearance: Readonly<ThemeAppearanceState>;
+  readonly appearanceSource?: ThemeAppearanceSource;
+  readonly fallbackAppearance?: Partial<ResolvedThemeAppearance>;
   readonly publishedLegacyTheme: Theme | undefined;
 }
 
diff --git a/packages/agentic/design/src/theming/index.ts b/packages/agentic/design/src/theming/index.ts
index 14696a599e..8eee4a8c2a 100644
--- a/packages/agentic/design/src/theming/index.ts
+++ b/packages/agentic/design/src/theming/index.ts
@@ -53,6 +53,10 @@ export { useTheme } from './useTheme';
 export type { OfficePalette } from './types/palette.types';
 export { ThemeProvider } from './ThemeProvider';
 export type { ThemeProviderProps } from './ThemeProvider';
+export { ThemedRoot } from './ThemedRoot';
+export type { ThemedRootProps } from './ThemedRoot';
+export { RootContext, useRootContext } from './rootContext';
+export type { InputModality, RootContextValue } from './rootContext';
 export { FlexThemeReference } from './flexThemeReference';
 export type {
   FlexThemeInput,
diff --git a/packages/agentic/design/src/theming/modern.ts b/packages/agentic/design/src/theming/modern.ts
index db69868ad4..3682c7ccd8 100644
--- a/packages/agentic/design/src/theming/modern.ts
+++ b/packages/agentic/design/src/theming/modern.ts
@@ -28,4 +28,8 @@ export type {
 } from './flexThemeReference';
 export { ThemeProvider } from './ThemeProvider';
 export type { ThemeProviderProps } from './ThemeProvider';
+export { ThemedRoot } from './ThemedRoot';
+export type { ThemedRootProps } from './ThemedRoot';
+export { RootContext, useRootContext } from './rootContext';
+export type { InputModality, RootContextValue } from './rootContext';
 export type { FlexThemeSource, LegacyThemeSource, ThemeSource, ThemeSourceBase } from './themeSource';
diff --git a/packages/agentic/design/src/theming/rootContext.ts b/packages/agentic/design/src/theming/rootContext.ts
new file mode 100644
index 0000000000..afe0c39381
--- /dev/null
+++ b/packages/agentic/design/src/theming/rootContext.ts
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+export type InputModality = 'keyboard' | 'pointer';
+
+export interface RootContextValue {
+  /**
+   * Last input modality observed by the scene root. Initially `pointer`.
+   * Read this in event handlers; changes do not trigger a render.
+   */
+  readonly inputModality: InputModality;
+}
+
+export const RootContext = React.createContext<RootContextValue | undefined>(undefined);
+
+/**
+ * Returns the stable, live scene state shared by nested ThemedRoots.
+ */
+export function useRootContext(): RootContextValue {
+  const root = React.useContext(RootContext);
+  if (!root) {
+    throw new Error('useRootContext must be used within a ThemedRoot.');
+  }
+  return root;
+}

From 3439bb2fdf1a34e56050798e0682b5b4b1a7b103 Mon Sep 17 00:00:00 2001
From: Jason Morse <jasonmo@microsoft.com>
Date: Fri, 11 Sep 2026 17:39:37 -0700
Subject: [PATCH 03/11] rename RootContext to RootSettings

---
 apps/bundle-size/scenarios.json               |  2 +-
 docs/pages/Theming/Basics.md                  |  6 ++---
 packages/agentic/design/src/index.ts          |  4 +--
 .../design/src/theming/ThemedRoot.test.tsx    | 26 +++++++++----------
 .../src/theming/ThemedRoot.types.test.ts      |  8 +++---
 packages/agentic/design/src/theming/index.ts  |  4 +--
 packages/agentic/design/src/theming/modern.ts |  4 +--
 .../agentic/design/src/theming/rootContext.ts |  8 +++---
 8 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/apps/bundle-size/scenarios.json b/apps/bundle-size/scenarios.json
index 1d20e25640..d86c4dda25 100644
--- a/apps/bundle-size/scenarios.json
+++ b/apps/bundle-size/scenarios.json
@@ -23,7 +23,7 @@
     {
       "name": "design-themed-root",
       "module": "@fluentui-react-native/design",
-      "exports": ["ThemedRoot", "useRootContext", "useThemeState"],
+      "exports": ["ThemedRoot", "useRootSettings", "useThemeState"],
       "forbiddenInputPatterns": ["/theming/compat/", "/tokens/legacy/", "/color-lib/"]
     },
     {
diff --git a/docs/pages/Theming/Basics.md b/docs/pages/Theming/Basics.md
index fb90071c7b..46d4cf78d0 100644
--- a/docs/pages/Theming/Basics.md
+++ b/docs/pages/Theming/Basics.md
@@ -53,16 +53,16 @@ or `fallbackAppearance` while retaining the inherited source and other options.
 An explicit `theme` starts a new theme/appearance configuration, using that
 source's defaults plus the root's options.
 
-The outermost `ThemedRoot` also provides `RootContext`. `useRootContext()` returns
+The outermost `ThemedRoot` also provides `RootContext`. `useRootSettings()` returns
 the same object throughout a mounted scene, including under nested roots that
 replace the theme. Its read-only `inputModality` is initially `'pointer'`, becomes
 `'keyboard'` on key-down, and returns to `'pointer'` on pointer-down or touch-start.
 Read the property in an event handler when making a focus decision:
 
 ```tsx
-import { useRootContext } from '@fluentui-react-native/design';
+import { useRootSettings } from '@fluentui-react-native/design';
 
-const root = useRootContext();
+const root = useRootSettings();
 const onFocus = () => {
   const showKeyboardFocus = root.inputModality === 'keyboard';
   // Apply the focus behavior appropriate to this component.
diff --git a/packages/agentic/design/src/index.ts b/packages/agentic/design/src/index.ts
index 4b30f89d43..5658370541 100644
--- a/packages/agentic/design/src/index.ts
+++ b/packages/agentic/design/src/index.ts
@@ -25,7 +25,7 @@ export {
   RootContext,
   ThemedRoot,
   ThemeProvider,
-  useRootContext,
+  useRootSettings,
 } from './theming/modern';
 export type {
   FlexThemeInput,
@@ -37,7 +37,7 @@ export type {
   LegacyThemeSource,
   PartialFlexTokens,
   ResolvedThemeAppearance,
-  RootContextValue,
+  RootSettings,
   ThemeAppearanceOptions,
   ThemeAppearanceRequest,
   ThemeAppearanceSource,
diff --git a/packages/agentic/design/src/theming/ThemedRoot.test.tsx b/packages/agentic/design/src/theming/ThemedRoot.test.tsx
index ca73b97162..506f5312bd 100644
--- a/packages/agentic/design/src/theming/ThemedRoot.test.tsx
+++ b/packages/agentic/design/src/theming/ThemedRoot.test.tsx
@@ -11,13 +11,13 @@ import type { ThemeState } from '../useThemeState';
 import type { ResolvedThemeAppearance, ThemeAppearanceSource, ThemeAppearanceSourceSnapshot } from './appearance.types';
 import { ThemeContext } from './context';
 import { FlexThemeReference } from './flexThemeReference';
-import { useRootContext } from './rootContext';
-import type { RootContextValue } from './rootContext';
+import { useRootSettings } from './rootContext';
+import type { RootSettings } from './rootContext';
 import { ThemedRoot } from './ThemedRoot';
 import { ThemeProvider } from './ThemeProvider';
 
-function Probe({ roots, themes }: { roots?: RootContextValue[]; themes?: ThemeState[] }) {
-  const root = useRootContext();
+function Probe({ roots, themes }: { roots?: RootSettings[]; themes?: ThemeState[] }) {
+  const root = useRootSettings();
   const theme = useThemeState();
   roots?.push(root);
   themes?.push(theme);
@@ -72,7 +72,7 @@ describe('ThemedRoot', () => {
   });
 
   it('provides default Flex tokens and forwards View props, children, and the ref', () => {
-    const roots: RootContextValue[] = [];
+    const roots: RootSettings[] = [];
     const themes: ThemeState[] = [];
     const ref = React.createRef<View>();
     const style = { flex: 1 };
@@ -95,7 +95,7 @@ describe('ThemedRoot', () => {
   });
 
   it('tracks keyboard, pointer, and touch input without rerendering consumers', () => {
-    const roots: RootContextValue[] = [];
+    const roots: RootSettings[] = [];
     const themes: ThemeState[] = [];
     render(
       <ThemedRoot testID="root">
@@ -118,7 +118,7 @@ describe('ThemedRoot', () => {
   });
 
   it('updates modality before invoking caller handlers and preserves responder ownership', () => {
-    const roots: RootContextValue[] = [];
+    const roots: RootSettings[] = [];
     const onKeyDown = jest.fn(() => expect(roots[0].inputModality).toBe('keyboard'));
     const onKeyDownCapture = jest.fn(() => expect(roots[0].inputModality).toBe('keyboard'));
     const onPointerDownCapture = jest.fn(() => expect(roots[0].inputModality).toBe('pointer'));
@@ -155,7 +155,7 @@ describe('ThemedRoot', () => {
   });
 
   it('preserves the live context and handler identities across appearance changes', () => {
-    const roots: RootContextValue[] = [];
+    const roots: RootSettings[] = [];
     render(
       <ThemedRoot testID="root">
         <Probe roots={roots} />
@@ -178,8 +178,8 @@ describe('ThemedRoot', () => {
   });
 
   it('shares modality through nested roots even when a nested root replaces the theme', () => {
-    const roots: RootContextValue[] = [];
-    const nestedRoots: RootContextValue[] = [];
+    const roots: RootSettings[] = [];
+    const nestedRoots: RootSettings[] = [];
     const onKeyDown = jest.fn();
     const onKeyDownCapture = jest.fn();
     const onPointerDownCapture = jest.fn();
@@ -215,8 +215,8 @@ describe('ThemedRoot', () => {
   });
 
   it('isolates independent scene roots', () => {
-    const first: RootContextValue[] = [];
-    const second: RootContextValue[] = [];
+    const first: RootSettings[] = [];
+    const second: RootSettings[] = [];
     render(
       <>
         <ThemedRoot testID="root">
@@ -394,6 +394,6 @@ describe('ThemedRoot', () => {
       act(() => {
         create(<Probe />);
       });
-    }).toThrow('useRootContext must be used within a ThemedRoot.');
+    }).toThrow('useRootSettings must be used within a ThemedRoot.');
   });
 });
diff --git a/packages/agentic/design/src/theming/ThemedRoot.types.test.ts b/packages/agentic/design/src/theming/ThemedRoot.types.test.ts
index 0024372bfe..ecedec8cf2 100644
--- a/packages/agentic/design/src/theming/ThemedRoot.types.test.ts
+++ b/packages/agentic/design/src/theming/ThemedRoot.types.test.ts
@@ -2,14 +2,14 @@ import * as React from 'react';
 import type { View } from 'react-native';
 
 import { ThemedRoot } from '../index';
-import type { InputModality, RootContextValue, ThemedRootProps } from '../index';
-import { ThemedRoot as ThemingRoot, useRootContext } from './index';
+import type { InputModality, RootSettings, ThemedRootProps } from '../index';
+import { ThemedRoot as ThemingRoot, useRootSettings } from './index';
 
 function acceptsViewProps(props: React.ComponentPropsWithRef<typeof View>) {
   return React.createElement(ThemedRoot, props);
 }
 
-function readOnlyRoot(root: RootContextValue) {
+function readOnlyRoot(root: RootSettings) {
   const modality: InputModality = root.inputModality;
   // @ts-expect-error Consumers may query, but not modify, scene state.
   root.inputModality = 'pointer';
@@ -32,7 +32,7 @@ const invalidAppearance: ThemedRootProps = { appearance: 'dark' };
 describe('ThemedRoot types', () => {
   it('exports the same component through both public entrypoints', () => {
     expect(ThemedRoot).toBe(ThemingRoot);
-    expect(useRootContext).toEqual(expect.any(Function));
+    expect(useRootSettings).toEqual(expect.any(Function));
     expect(acceptsViewProps({ testID: 'view' }).type).toBe(ThemedRoot);
     expect(readOnlyRoot).toEqual(expect.any(Function));
     expect(props.appearance.colorScheme).toBe('system');
diff --git a/packages/agentic/design/src/theming/index.ts b/packages/agentic/design/src/theming/index.ts
index 8eee4a8c2a..53b36eb4bf 100644
--- a/packages/agentic/design/src/theming/index.ts
+++ b/packages/agentic/design/src/theming/index.ts
@@ -55,8 +55,8 @@ export { ThemeProvider } from './ThemeProvider';
 export type { ThemeProviderProps } from './ThemeProvider';
 export { ThemedRoot } from './ThemedRoot';
 export type { ThemedRootProps } from './ThemedRoot';
-export { RootContext, useRootContext } from './rootContext';
-export type { InputModality, RootContextValue } from './rootContext';
+export { RootContext, useRootSettings } from './rootContext';
+export type { InputModality, RootSettings } from './rootContext';
 export { FlexThemeReference } from './flexThemeReference';
 export type {
   FlexThemeInput,
diff --git a/packages/agentic/design/src/theming/modern.ts b/packages/agentic/design/src/theming/modern.ts
index 3682c7ccd8..3c237f5766 100644
--- a/packages/agentic/design/src/theming/modern.ts
+++ b/packages/agentic/design/src/theming/modern.ts
@@ -30,6 +30,6 @@ export { ThemeProvider } from './ThemeProvider';
 export type { ThemeProviderProps } from './ThemeProvider';
 export { ThemedRoot } from './ThemedRoot';
 export type { ThemedRootProps } from './ThemedRoot';
-export { RootContext, useRootContext } from './rootContext';
-export type { InputModality, RootContextValue } from './rootContext';
+export { RootContext, useRootSettings } from './rootContext';
+export type { InputModality, RootSettings } from './rootContext';
 export type { FlexThemeSource, LegacyThemeSource, ThemeSource, ThemeSourceBase } from './themeSource';
diff --git a/packages/agentic/design/src/theming/rootContext.ts b/packages/agentic/design/src/theming/rootContext.ts
index afe0c39381..61213249d2 100644
--- a/packages/agentic/design/src/theming/rootContext.ts
+++ b/packages/agentic/design/src/theming/rootContext.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export type InputModality = 'keyboard' | 'pointer';
 
-export interface RootContextValue {
+export interface RootSettings {
   /**
    * Last input modality observed by the scene root. Initially `pointer`.
    * Read this in event handlers; changes do not trigger a render.
@@ -10,15 +10,15 @@ export interface RootContextValue {
   readonly inputModality: InputModality;
 }
 
-export const RootContext = React.createContext<RootContextValue | undefined>(undefined);
+export const RootContext = React.createContext<RootSettings | undefined>(undefined);
 
 /**
  * Returns the stable, live scene state shared by nested ThemedRoots.
  */
-export function useRootContext(): RootContextValue {
+export function useRootSettings(): RootSettings {
   const root = React.useContext(RootContext);
   if (!root) {
-    throw new Error('useRootContext must be used within a ThemedRoot.');
+    throw new Error('useRootSettings must be used within a ThemedRoot.');
   }
   return root;
 }

From 247c32417f10bb51b281fae5ec0068c0774ac61e Mon Sep 17 00:00:00 2001
From: Jason Morse <jasonmo@microsoft.com>
Date: Fri, 11 Sep 2026 23:41:23 -0700
Subject: [PATCH 04/11] use theme roots consistently

---
 .changeset/storybook-themed-scene.md          |   6 +
 .../references/tests-and-stories.md           |   7 +-
 apps/storybook/README.md                      |  10 +-
 apps/storybook/agent-map.yaml                 |   3 +-
 .../src/common/focusVisualPolicy.test.tsx     |   3 +-
 .../src/common/renderWithTheme.test.tsx       |  78 ++++++++
 .../components/src/common/renderWithTheme.tsx |  13 ++
 .../components/accordion/accordion.test.tsx   |   3 +-
 .../src/components/avatar/avatar.test.tsx     |   2 +-
 .../src/components/badge/badge.test.tsx       |   2 +-
 .../src/components/button/button.test.tsx     |   3 +-
 .../src/components/card/card.test.tsx         |   3 +-
 .../src/components/checkbox/checkbox.test.tsx |   3 +-
 .../src/components/divider/divider.test.tsx   |   2 +-
 .../src/components/input/input.test.tsx       |   3 +-
 .../components/list-item/list-item.test.tsx   |   3 +-
 .../listbox-item/listbox-item.test.tsx        |   3 +-
 .../components/menu-item/menu-item.test.tsx   |   3 +-
 .../progress-bar/progress-bar.test.tsx        |   3 +-
 .../src/components/radio/radio.test.tsx       |   3 +-
 .../src/components/skeleton/skeleton.test.tsx |   3 +-
 .../src/components/spinner/spinner.test.tsx   |   3 +-
 .../src/components/switch/switch.test.tsx     |   3 +-
 .../src/components/tab/tab.test.tsx           |   3 +-
 .../src/components/tablist/tablist.test.tsx   |   3 +-
 .../src/components/tag/tag.test.tsx           |   3 +-
 .../src/components/text/text.test.tsx         |   3 +-
 .../checkbox-indicator.test.tsx               |   2 +-
 .../compound-item-layout.test.tsx             |   2 +-
 .../focus-visual/focus-visual.test.tsx        |   2 +-
 .../src/primitives/icon/icon.test.tsx         |   2 +-
 .../layout-stable-text.test.tsx               |   2 +-
 .../storybook-desktop-runtime/README.md       |  10 ++
 .../storybook-desktop-runtime/jest.config.cjs |   1 +
 .../storybook-desktop-runtime/package.json    |  11 +-
 .../src/StorybookTheme.test.tsx               | 133 ++++++++++++++
 .../src/StorybookTheme.tsx                    | 169 ++++++++++--------
 .../src/StorybookUI.win32.tsx                 |   6 +-
 .../src/ThemedStorybookUI.tsx                 |   9 +
 .../src/createDesktopStorybookApp.tsx         |  31 +---
 .../src/createDesktopStorybookPreview.tsx     |  13 +-
 .../src/useStorybookTheme.test.tsx            |  63 +++++++
 .../src/useStorybookTheme.ts                  | 112 ++++++++++++
 yarn.lock                                     |   5 +
 44 files changed, 602 insertions(+), 148 deletions(-)
 create mode 100644 .changeset/storybook-themed-scene.md
 create mode 100644 packages/agentic/components/src/common/renderWithTheme.test.tsx
 create mode 100644 packages/agentic/components/src/common/renderWithTheme.tsx
 create mode 100644 packages/agentic/storybook-desktop-runtime/jest.config.cjs
 create mode 100644 packages/agentic/storybook-desktop-runtime/src/StorybookTheme.test.tsx
 create mode 100644 packages/agentic/storybook-desktop-runtime/src/ThemedStorybookUI.tsx
 create mode 100644 packages/agentic/storybook-desktop-runtime/src/useStorybookTheme.test.tsx
 create mode 100644 packages/agentic/storybook-desktop-runtime/src/useStorybookTheme.ts

diff --git a/.changeset/storybook-themed-scene.md b/.changeset/storybook-themed-scene.md
new file mode 100644
index 0000000000..204a3c3b1f
--- /dev/null
+++ b/.changeset/storybook-themed-scene.md
@@ -0,0 +1,6 @@
+---
+"@fluentui-react-native/storybook-desktop-runtime": minor
+"@fluentui-react-native/components": patch
+---
+
+Place the entire desktop Storybook app in one ThemedRoot, derive chrome colors from its theme state, and render component test scenes under a shared ThemedRoot wrapper.
diff --git a/.github/skills/agentic-component-authoring/references/tests-and-stories.md b/.github/skills/agentic-component-authoring/references/tests-and-stories.md
index 3c1069e2d4..f74d5101b9 100644
--- a/.github/skills/agentic-component-authoring/references/tests-and-stories.md
+++ b/.github/skills/agentic-component-authoring/references/tests-and-stories.md
@@ -7,7 +7,12 @@ are [`button.test.tsx`](../../../../packages/agentic/components/src/components/b
 
 ## Runtime tests
 
-Use `@testing-library/react-native`. Do not import `react-test-renderer` directly.
+Use `render` from the package-private `src/common/renderWithTheme` helper for
+component scenes. It places a `ThemedRoot` outside the scene and any supplied
+wrapper, preserving the same root settings through rerenders. Import events,
+queries, and types from `@testing-library/react-native`; do not import
+`react-test-renderer` directly. Tests can dispatch root modality events through
+the helper's `test-scene-root` test ID.
 
 Prefer public semantics:
 
diff --git a/apps/storybook/README.md b/apps/storybook/README.md
index 929e5af860..b73ec08ba6 100644
--- a/apps/storybook/README.md
+++ b/apps/storybook/README.md
@@ -15,10 +15,12 @@ runs Storybook in **liteMode**, which mocks out the heavy default on-device UI
 chain, which does not bundle cleanly with this repo's Metro + Babel + pnpm-linker toolchain
 (Reanimated's Babel plugin crashes when Metro bundles Reanimated from source).
 
-The shared app shell includes a persistent theme header above the Storybook UI. It can leave stories
-unwrapped (`No theme`, the default) or apply the default light, dark, or high-contrast FURN Theme.
-The selected Theme wraps the preview decorator, so it applies to every rendered story and remains
-selected while navigating between stories.
+The shared app shell places one `ThemedRoot` above the theme header and the entire Storybook UI.
+Choose the default Flex tokens (`Default Flex`, initially selected) or the default light, dark,
+or high-contrast FURN theme. The header, sidebar, addon controls, preview, and stories all inherit
+that scene's theme and input-modality settings. Chrome colors are derived from `useThemeState`;
+switching themes preserves Storybook and the selected story rather than remounting them.
+Story decorators inherit the app root instead of creating preview-only theme boundaries.
 
 The macOS, Windows Fabric, and Win32 Paper native endpoints live in this workspace and
 share the same entry point and generated story catalog. Story discovery and native identity stay
diff --git a/apps/storybook/agent-map.yaml b/apps/storybook/agent-map.yaml
index f9c54bc42a..227680e440 100644
--- a/apps/storybook/agent-map.yaml
+++ b/apps/storybook/agent-map.yaml
@@ -6,7 +6,8 @@ sources:
   config_adapter: src/main.ts
   app_entry: index.js
   app_shell: src/StorybookApp.tsx
-  theme_host: src/StorybookTheme.tsx
+  theme_host: ../../packages/agentic/storybook-desktop-runtime/src/StorybookTheme.tsx
+  theme_palette: ../../packages/agentic/storybook-desktop-runtime/src/useStorybookTheme.ts
   shared_cli: ../../packages/agentic/storybook-desktop
   shared_runtime: ../../packages/agentic/storybook-desktop-runtime
   generated_requires:
diff --git a/packages/agentic/components/src/common/focusVisualPolicy.test.tsx b/packages/agentic/components/src/common/focusVisualPolicy.test.tsx
index 71d521f41a..c558fde543 100644
--- a/packages/agentic/components/src/common/focusVisualPolicy.test.tsx
+++ b/packages/agentic/components/src/common/focusVisualPolicy.test.tsx
@@ -3,7 +3,8 @@ import type { ReactElement } from 'react';
 import { StyleSheet } from 'react-native';
 import type { AccessibilityRole } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from './renderWithTheme';
 
 import { Accordion } from '../components/accordion/accordion';
 import { Button } from '../components/button/button';
diff --git a/packages/agentic/components/src/common/renderWithTheme.test.tsx b/packages/agentic/components/src/common/renderWithTheme.test.tsx
new file mode 100644
index 0000000000..99d26ccd1f
--- /dev/null
+++ b/packages/agentic/components/src/common/renderWithTheme.test.tsx
@@ -0,0 +1,78 @@
+import type { PropsWithChildren } from 'react';
+import { Text } from 'react-native';
+
+import { fireEvent } from '@testing-library/react-native';
+import { FlexThemeReference, ThemeProvider, useRootSettings, useThemeState } from '@fluentui-react-native/design';
+import type { RootSettings, ThemeState } from '@fluentui-react-native/design';
+import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
+
+import { render } from './renderWithTheme';
+
+function Probe({ roots, themes, label = 'Probe' }: { roots: RootSettings[]; themes?: ThemeState[]; label?: string }) {
+  roots.push(useRootSettings());
+  const theme = useThemeState();
+  themes?.push(theme);
+  return <Text>{label}</Text>;
+}
+
+describe('themed test scenes', () => {
+  it('provides the default theme and live modality without rendering again', async () => {
+    const roots: RootSettings[] = [];
+    const themes: ThemeState[] = [];
+    const scene = await render(<Probe roots={roots} themes={themes} />);
+    const root = roots[0];
+    const renderCount = roots.length;
+
+    expect(themes[0].tokens).toEqual(defaultFlexTokens);
+    expect(root.inputModality).toBe('pointer');
+    await fireEvent(scene.getByTestId('test-scene-root'), 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+    expect(root.inputModality).toBe('keyboard');
+    await fireEvent(scene.getByTestId('test-scene-root'), 'pointerDownCapture', {});
+    expect(root.inputModality).toBe('pointer');
+    expect(roots).toHaveLength(renderCount);
+  });
+
+  it('keeps the same scene root when rerendering', async () => {
+    const roots: RootSettings[] = [];
+    const scene = await render(<Probe roots={roots} />);
+    await fireEvent(scene.getByTestId('test-scene-root'), 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+
+    await scene.rerender(<Probe roots={roots} label="Updated" />);
+
+    expect(scene.getByText('Updated')).toBeOnTheScreen();
+    expect(roots.every((root) => root === roots[0])).toBe(true);
+    expect(roots[0].inputModality).toBe('keyboard');
+  });
+
+  it('places supplied wrappers inside the scene while preserving their theme', async () => {
+    const roots: RootSettings[] = [];
+    const wrapperRoots: RootSettings[] = [];
+    const themes: ThemeState[] = [];
+    const theme = new FlexThemeReference({ base: { color: { foregroundNeutralPrimary: '#123456' } } });
+    function Wrapper({ children }: PropsWithChildren) {
+      wrapperRoots.push(useRootSettings());
+      return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+    }
+
+    const scene = await render(<Probe roots={roots} themes={themes} />, { wrapper: Wrapper });
+    await scene.rerender(<Probe roots={roots} themes={themes} label="Updated" />);
+
+    expect(wrapperRoots.every((root) => root === roots[0])).toBe(true);
+    expect(themes.every((state) => state.tokens.color.foregroundNeutralPrimary === '#123456')).toBe(true);
+    expect(roots.every((root) => root === roots[0])).toBe(true);
+  });
+
+  it('isolates separate rendered scenes', async () => {
+    const first: RootSettings[] = [];
+    const second: RootSettings[] = [];
+    const scene = await render(<Probe roots={first} />);
+    await fireEvent(scene.getByTestId('test-scene-root'), 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+    const secondScene = await render(<Probe roots={second} />);
+
+    expect(first[0]).not.toBe(second[0]);
+    expect(first[0].inputModality).toBe('keyboard');
+    expect(second[0].inputModality).toBe('pointer');
+    await fireEvent(secondScene.getByTestId('test-scene-root'), 'pointerDownCapture', {});
+    expect(first[0].inputModality).toBe('keyboard');
+  });
+});
diff --git a/packages/agentic/components/src/common/renderWithTheme.tsx b/packages/agentic/components/src/common/renderWithTheme.tsx
new file mode 100644
index 0000000000..dd91ad206b
--- /dev/null
+++ b/packages/agentic/components/src/common/renderWithTheme.tsx
@@ -0,0 +1,13 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+
+import { render as renderNative } from '@testing-library/react-native';
+import type { RenderOptions, RenderResult } from '@testing-library/react-native';
+import { ThemedRoot } from '@fluentui-react-native/design';
+
+export function render(element: ReactElement, options: RenderOptions = {}): Promise<RenderResult> {
+  const { wrapper: Wrapper, ...rest } = options;
+  function Scene({ children }: PropsWithChildren) {
+    return <ThemedRoot testID="test-scene-root">{Wrapper ? <Wrapper>{children}</Wrapper> : children}</ThemedRoot>;
+  }
+  return renderNative(element, { ...rest, wrapper: Scene });
+}
diff --git a/packages/agentic/components/src/components/accordion/accordion.test.tsx b/packages/agentic/components/src/components/accordion/accordion.test.tsx
index b1654f1973..74d8f256b9 100644
--- a/packages/agentic/components/src/components/accordion/accordion.test.tsx
+++ b/packages/agentic/components/src/components/accordion/accordion.test.tsx
@@ -3,7 +3,8 @@ import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import type { TextProps, TextStyle, ViewProps, ViewStyle } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
diff --git a/packages/agentic/components/src/components/avatar/avatar.test.tsx b/packages/agentic/components/src/components/avatar/avatar.test.tsx
index 04a88a2eb5..1159b6f7dd 100644
--- a/packages/agentic/components/src/components/avatar/avatar.test.tsx
+++ b/packages/agentic/components/src/components/avatar/avatar.test.tsx
@@ -2,7 +2,7 @@
 import { StyleSheet } from 'react-native';
 import type { ViewStyle } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
diff --git a/packages/agentic/components/src/components/badge/badge.test.tsx b/packages/agentic/components/src/components/badge/badge.test.tsx
index f6bd68f36c..f59ce6d0d6 100644
--- a/packages/agentic/components/src/components/badge/badge.test.tsx
+++ b/packages/agentic/components/src/components/badge/badge.test.tsx
@@ -2,7 +2,7 @@
 import { StyleSheet } from 'react-native';
 import type { ViewStyle } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
 
diff --git a/packages/agentic/components/src/components/button/button.test.tsx b/packages/agentic/components/src/components/button/button.test.tsx
index 591846cc14..77bb83db0d 100644
--- a/packages/agentic/components/src/components/button/button.test.tsx
+++ b/packages/agentic/components/src/components/button/button.test.tsx
@@ -3,7 +3,8 @@ import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import type { Pressable, PressableProps, ViewStyle } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
diff --git a/packages/agentic/components/src/components/card/card.test.tsx b/packages/agentic/components/src/components/card/card.test.tsx
index b2378b5657..a0d8498655 100644
--- a/packages/agentic/components/src/components/card/card.test.tsx
+++ b/packages/agentic/components/src/components/card/card.test.tsx
@@ -3,7 +3,8 @@ import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import type { ViewStyle } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
diff --git a/packages/agentic/components/src/components/checkbox/checkbox.test.tsx b/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
index 5dd401ea25..294d15c296 100644
--- a/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
+++ b/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
@@ -2,7 +2,8 @@
 import { StyleSheet } from 'react-native';
 import type { ViewStyle } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
diff --git a/packages/agentic/components/src/components/divider/divider.test.tsx b/packages/agentic/components/src/components/divider/divider.test.tsx
index f2e384f4f9..ca02fb89f5 100644
--- a/packages/agentic/components/src/components/divider/divider.test.tsx
+++ b/packages/agentic/components/src/components/divider/divider.test.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import { StyleSheet, View } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 
 import { directComponent } from '@fluentui-react-native/framework-base';
 
diff --git a/packages/agentic/components/src/components/input/input.test.tsx b/packages/agentic/components/src/components/input/input.test.tsx
index ead8c393af..a69b4834b6 100644
--- a/packages/agentic/components/src/components/input/input.test.tsx
+++ b/packages/agentic/components/src/components/input/input.test.tsx
@@ -3,7 +3,8 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import type { View, ViewStyle } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
 
 import { Input } from './input';
diff --git a/packages/agentic/components/src/components/list-item/list-item.test.tsx b/packages/agentic/components/src/components/list-item/list-item.test.tsx
index 48c7736449..0c317f7acb 100644
--- a/packages/agentic/components/src/components/list-item/list-item.test.tsx
+++ b/packages/agentic/components/src/components/list-item/list-item.test.tsx
@@ -2,7 +2,8 @@
 import { StyleSheet } from 'react-native';
 import type { PressableProps, ViewStyle } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
diff --git a/packages/agentic/components/src/components/listbox-item/listbox-item.test.tsx b/packages/agentic/components/src/components/listbox-item/listbox-item.test.tsx
index db03d0e7b3..bd5afae5ad 100644
--- a/packages/agentic/components/src/components/listbox-item/listbox-item.test.tsx
+++ b/packages/agentic/components/src/components/listbox-item/listbox-item.test.tsx
@@ -2,7 +2,8 @@
 import { StyleSheet, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { directComponent, isDirectComponent } from '@fluentui-react-native/framework-base';
diff --git a/packages/agentic/components/src/components/menu-item/menu-item.test.tsx b/packages/agentic/components/src/components/menu-item/menu-item.test.tsx
index 157fdc205b..2f8ec6d892 100644
--- a/packages/agentic/components/src/components/menu-item/menu-item.test.tsx
+++ b/packages/agentic/components/src/components/menu-item/menu-item.test.tsx
@@ -1,7 +1,8 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import { StyleSheet, View } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
diff --git a/packages/agentic/components/src/components/progress-bar/progress-bar.test.tsx b/packages/agentic/components/src/components/progress-bar/progress-bar.test.tsx
index 61e62ca2e5..10ec02b91f 100644
--- a/packages/agentic/components/src/components/progress-bar/progress-bar.test.tsx
+++ b/packages/agentic/components/src/components/progress-bar/progress-bar.test.tsx
@@ -1,7 +1,8 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import { StyleSheet } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 
 import { ProgressBar } from './progress-bar';
 
diff --git a/packages/agentic/components/src/components/radio/radio.test.tsx b/packages/agentic/components/src/components/radio/radio.test.tsx
index 8beb937a07..d734767dc8 100644
--- a/packages/agentic/components/src/components/radio/radio.test.tsx
+++ b/packages/agentic/components/src/components/radio/radio.test.tsx
@@ -2,7 +2,8 @@
 import { StyleSheet } from 'react-native';
 import type { ComponentProps } from 'react';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
diff --git a/packages/agentic/components/src/components/skeleton/skeleton.test.tsx b/packages/agentic/components/src/components/skeleton/skeleton.test.tsx
index a94077fba8..371f0bff24 100644
--- a/packages/agentic/components/src/components/skeleton/skeleton.test.tsx
+++ b/packages/agentic/components/src/components/skeleton/skeleton.test.tsx
@@ -3,7 +3,8 @@ import { act } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import type { ViewStyle } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 
 import { useReducedMotion } from '@fluentui-react-native/framework-base';
 
diff --git a/packages/agentic/components/src/components/spinner/spinner.test.tsx b/packages/agentic/components/src/components/spinner/spinner.test.tsx
index fee92c9fbf..15577daaad 100644
--- a/packages/agentic/components/src/components/spinner/spinner.test.tsx
+++ b/packages/agentic/components/src/components/spinner/spinner.test.tsx
@@ -2,7 +2,8 @@
 import { AccessibilityInfo, Animated, Easing, StyleSheet, processColor } from 'react-native';
 import type { ColorValue, ViewStyle } from 'react-native';
 
-import { render, waitFor } from '@testing-library/react-native';
+import { waitFor } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
 
diff --git a/packages/agentic/components/src/components/switch/switch.test.tsx b/packages/agentic/components/src/components/switch/switch.test.tsx
index ab54e615e5..f77e710aa3 100644
--- a/packages/agentic/components/src/components/switch/switch.test.tsx
+++ b/packages/agentic/components/src/components/switch/switch.test.tsx
@@ -3,7 +3,8 @@ import { StyleSheet, Text, View } from 'react-native';
 import type { TextProps, ViewProps } from 'react-native';
 import type { ComponentProps } from 'react';
 
-import { act, fireEvent, render } from '@testing-library/react-native';
+import { act, fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 
 import { defaultFlexTokens, defaultResolvedThemeAppearance } from '@fluentui-react-native/design/testing';
 import { directComponent } from '@fluentui-react-native/framework-base';
diff --git a/packages/agentic/components/src/components/tab/tab.test.tsx b/packages/agentic/components/src/components/tab/tab.test.tsx
index 46c54149df..b7a7246c98 100644
--- a/packages/agentic/components/src/components/tab/tab.test.tsx
+++ b/packages/agentic/components/src/components/tab/tab.test.tsx
@@ -3,7 +3,8 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import type { Pressable, ViewStyle } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
diff --git a/packages/agentic/components/src/components/tablist/tablist.test.tsx b/packages/agentic/components/src/components/tablist/tablist.test.tsx
index 2125c8bb78..45ba5e481a 100644
--- a/packages/agentic/components/src/components/tablist/tablist.test.tsx
+++ b/packages/agentic/components/src/components/tablist/tablist.test.tsx
@@ -2,7 +2,8 @@
 import { StyleSheet } from 'react-native';
 import type { ViewStyle } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
diff --git a/packages/agentic/components/src/components/tag/tag.test.tsx b/packages/agentic/components/src/components/tag/tag.test.tsx
index 9e0573eef0..16162d06bc 100644
--- a/packages/agentic/components/src/components/tag/tag.test.tsx
+++ b/packages/agentic/components/src/components/tag/tag.test.tsx
@@ -2,7 +2,8 @@
 import { StyleSheet } from 'react-native';
 import type { ViewStyle } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
diff --git a/packages/agentic/components/src/components/text/text.test.tsx b/packages/agentic/components/src/components/text/text.test.tsx
index e6d49e8c33..d5599cc97e 100644
--- a/packages/agentic/components/src/components/text/text.test.tsx
+++ b/packages/agentic/components/src/components/text/text.test.tsx
@@ -2,7 +2,8 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 import { FlexThemeReference, ThemeProvider } from '@fluentui-react-native/design';
 import { useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
 import type { SlotProp } from '@fluentui-react-native/framework-base';
diff --git a/packages/agentic/components/src/primitives/checkbox-indicator/checkbox-indicator.test.tsx b/packages/agentic/components/src/primitives/checkbox-indicator/checkbox-indicator.test.tsx
index 5822dfc812..c39065f081 100644
--- a/packages/agentic/components/src/primitives/checkbox-indicator/checkbox-indicator.test.tsx
+++ b/packages/agentic/components/src/primitives/checkbox-indicator/checkbox-indicator.test.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import * as React from 'react';
 import type { View } from 'react-native';
-import { render } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 
 import { CheckboxIndicator } from './checkbox-indicator';
 
diff --git a/packages/agentic/components/src/primitives/compound-item-layout/compound-item-layout.test.tsx b/packages/agentic/components/src/primitives/compound-item-layout/compound-item-layout.test.tsx
index 3fe75fe97b..83c5cec844 100644
--- a/packages/agentic/components/src/primitives/compound-item-layout/compound-item-layout.test.tsx
+++ b/packages/agentic/components/src/primitives/compound-item-layout/compound-item-layout.test.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import { Text } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 
 import { CompoundItemLayout } from './compound-item-layout';
 
diff --git a/packages/agentic/components/src/primitives/focus-visual/focus-visual.test.tsx b/packages/agentic/components/src/primitives/focus-visual/focus-visual.test.tsx
index 37508b339b..e4b2f03057 100644
--- a/packages/agentic/components/src/primitives/focus-visual/focus-visual.test.tsx
+++ b/packages/agentic/components/src/primitives/focus-visual/focus-visual.test.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import { StyleSheet } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 
 import { FocusVisual, createFocusVisualProps_unstable } from './focus-visual';
 
diff --git a/packages/agentic/components/src/primitives/icon/icon.test.tsx b/packages/agentic/components/src/primitives/icon/icon.test.tsx
index 88ce17795f..b122b6e0cb 100644
--- a/packages/agentic/components/src/primitives/icon/icon.test.tsx
+++ b/packages/agentic/components/src/primitives/icon/icon.test.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import { View } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 
 import { directComponent, isDirectComponent, useOptionalSlot } from '@fluentui-react-native/framework-base';
 import type { SlotProp } from '@fluentui-react-native/framework-base';
diff --git a/packages/agentic/components/src/primitives/layout-stable-text/layout-stable-text.test.tsx b/packages/agentic/components/src/primitives/layout-stable-text/layout-stable-text.test.tsx
index 9fb2297442..750edc0da1 100644
--- a/packages/agentic/components/src/primitives/layout-stable-text/layout-stable-text.test.tsx
+++ b/packages/agentic/components/src/primitives/layout-stable-text/layout-stable-text.test.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import { StyleSheet, Text } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { render } from '../../common/renderWithTheme';
 
 import { LayoutStableText } from './layout-stable-text';
 
diff --git a/packages/agentic/storybook-desktop-runtime/README.md b/packages/agentic/storybook-desktop-runtime/README.md
index 7535037855..d97fadd6ed 100644
--- a/packages/agentic/storybook-desktop-runtime/README.md
+++ b/packages/agentic/storybook-desktop-runtime/README.md
@@ -16,6 +16,16 @@ The runtime owns the device side of the Desktop Driver Storybook contract:
 - request/run IDs and preview generations;
 - keyed per-test remount and render-error isolation.
 
+One `ThemedRoot` wraps the entire app, including the theme toolbar and Storybook
+chrome. The default Flex, light, dark, and high-contrast choices update both the
+story and chrome without replacing the Storybook instance. The chrome adapter
+reads `useThemeState` and maps its color tokens to the upstream Storybook theme,
+while retaining upstream LiteUI on macOS/Windows and the desktop Win32 layout.
+Native styles retain their original tokens. Storybook's JavaScript color
+utilities cannot consume opaque colors such as high-contrast `PlatformColor`
+values, so the chrome adapter warns and substitutes contrasting fixed colors
+from the selected theme for those values.
+
 It does not own W3C routing, WebdriverIO, test execution, evidence persistence,
 or native accessibility/input/screenshot providers. Those responsibilities
 belong to `@fluentui-react-native/desktop-driver`.
diff --git a/packages/agentic/storybook-desktop-runtime/jest.config.cjs b/packages/agentic/storybook-desktop-runtime/jest.config.cjs
new file mode 100644
index 0000000000..b391f5b662
--- /dev/null
+++ b/packages/agentic/storybook-desktop-runtime/jest.config.cjs
@@ -0,0 +1 @@
+module.exports = require('@fluentui-react-native/scripts/jest-config');
diff --git a/packages/agentic/storybook-desktop-runtime/package.json b/packages/agentic/storybook-desktop-runtime/package.json
index dc9e3e8b74..85ea367b57 100644
--- a/packages/agentic/storybook-desktop-runtime/package.json
+++ b/packages/agentic/storybook-desktop-runtime/package.json
@@ -27,7 +27,8 @@
     "build": "tsc -b",
     "clean": "fluentui-scripts clean",
     "format": "fluentui-scripts format",
-    "lint": "fluentui-scripts lint"
+    "lint": "fluentui-scripts lint",
+    "test": "fluentui-scripts jest"
   },
   "dependencies": {
     "@fluentui-react-native/callout": "workspace:*",
@@ -46,12 +47,17 @@
     "@babel/core": "catalog:",
     "@fluentui-react-native/scripts": "workspace:*",
     "@office-iss/react-native-win32": "^0.81.0",
+    "@react-native-community/cli": "^20.0.0",
+    "@react-native-community/cli-platform-android": "^20.0.0",
+    "@react-native-community/cli-platform-ios": "^20.0.0",
     "@react-native/babel-preset": "^0.81.0",
+    "@testing-library/react-native": "catalog:",
     "@types/react": "~19.1.4",
     "react": "19.1.4",
     "react-native": "^0.81.6",
     "react-native-macos": "^0.81.0",
-    "react-native-windows": "^0.81.0"
+    "react-native-windows": "^0.81.0",
+    "test-renderer": "catalog:"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.81.0",
@@ -76,6 +82,7 @@
     }
   },
   "furn": {
+    "jestPlatform": "macos",
     "knip": {
       "ignoreDependencies": [
         "@fluentui-react-native/callout"
diff --git a/packages/agentic/storybook-desktop-runtime/src/StorybookTheme.test.tsx b/packages/agentic/storybook-desktop-runtime/src/StorybookTheme.test.tsx
new file mode 100644
index 0000000000..b88a5f766b
--- /dev/null
+++ b/packages/agentic/storybook-desktop-runtime/src/StorybookTheme.test.tsx
@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import { fireEvent, render } from '@testing-library/react-native';
+import { useRootSettings, useThemeState } from '@fluentui-react-native/design';
+import type { RootSettings, ThemeState } from '@fluentui-react-native/design';
+import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
+import type { View as StorybookView } from '@storybook/react-native';
+import { theme as lightTheme } from '@storybook/react-native-theming';
+
+import { createDesktopStorybookApp } from './createDesktopStorybookApp';
+import { DesktopDriverBridge } from './DesktopDriverBridge';
+import { StorybookUIComponent } from './StorybookUI';
+
+jest.mock('./DesktopDriverBridge', () => ({ DesktopDriverBridge: jest.fn(() => null) }));
+jest.mock('./StorybookUI', () => ({ StorybookUIComponent: jest.fn(() => null) }));
+
+function createTestApp() {
+  const roots: RootSettings[] = [];
+  const bridgeRoots: RootSettings[] = [];
+  const themes: ThemeState[] = [];
+  const mounted = jest.fn();
+  const unmounted = jest.fn();
+
+  function Story() {
+    roots.push(useRootSettings());
+    themes.push(useThemeState());
+    React.useEffect(() => {
+      mounted();
+      return unmounted;
+    }, []);
+    return <Text testID="selected-story">Selected story</Text>;
+  }
+
+  jest.mocked(DesktopDriverBridge).mockImplementation(() => {
+    bridgeRoots.push(useRootSettings());
+    return null;
+  });
+  jest.mocked(StorybookUIComponent).mockImplementation(({ children }) => <>{children}</>);
+
+  const getStorybookUI = jest.fn<ReturnType<StorybookView['getStorybookUI']>, Parameters<StorybookView['getStorybookUI']>>((params) => {
+    const UI = params?.CustomUIComponent;
+    if (!UI) {
+      throw new Error('Expected the app factory to configure the themed UI.');
+    }
+    return () => (
+      <UI storyHash={{}} setStory={jest.fn()} storage={{ getItem: () => null, setItem: () => undefined }} theme={lightTheme}>
+        <Story />
+      </UI>
+    );
+  });
+  const App = createDesktopStorybookApp({ getStorybookUI }, { enableWebsockets: false, testIDPrefix: 'test' });
+  return { App, roots, bridgeRoots, themes, mounted, unmounted, getStorybookUI };
+}
+
+afterEach(() => {
+  jest.clearAllMocks();
+  jest.restoreAllMocks();
+});
+
+describe('Storybook app theme root', () => {
+  it('places the toolbar, UI, story, and runtime bridge in the same default Flex scene', async () => {
+    const { App, roots, bridgeRoots, themes } = createTestApp();
+    const scene = await render(<App />);
+
+    expect(scene.getByTestId('test-app-root')).toBeOnTheScreen();
+    expect(scene.getByTestId('test-theme-toolbar')).toBeOnTheScreen();
+    expect(scene.getByTestId('selected-story')).toBeOnTheScreen();
+    expect(scene.getByRole('button', { name: 'Default Flex' })).toBeOnTheScreen();
+    expect(themes[0].tokens).toEqual(defaultFlexTokens);
+    expect(bridgeRoots.every((root) => root === roots[0])).toBe(true);
+    expect(roots[0].inputModality).toBe('pointer');
+  });
+
+  it('observes app-root input without rerendering the story', async () => {
+    const { App, roots, bridgeRoots } = createTestApp();
+    const scene = await render(<App />);
+    const renderCount = roots.length;
+    const root = scene.getByTestId('test-app-root');
+
+    await fireEvent(root, 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+    expect(roots[0].inputModality).toBe('keyboard');
+    expect(bridgeRoots[0].inputModality).toBe('keyboard');
+    await fireEvent(root, 'pointerDownCapture', {});
+    expect(roots[0].inputModality).toBe('pointer');
+    await fireEvent(root, 'keyDownCapture', { nativeEvent: { key: 'ArrowRight' } });
+    await fireEvent(root, 'startShouldSetResponderCapture', {});
+    expect(roots[0].inputModality).toBe('pointer');
+    expect(roots).toHaveLength(renderCount);
+  });
+
+  it('switches chrome and story colors together without recreating Storybook or resetting the scene', async () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation();
+    const { App, roots, themes, mounted, unmounted, getStorybookUI } = createTestApp();
+    const scene = await render(<App />);
+    const root = roots[0];
+    const defaultBackground = themes[0].tokens.color.surfaceNeutralFar;
+    const backgrounds: Record<string, unknown> = {};
+    await fireEvent(scene.getByTestId('test-app-root'), 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+
+    for (const choice of ['dark', 'highContrast', 'light', 'none']) {
+      await fireEvent.press(scene.getByTestId(`test-theme-${choice}`));
+      const state = themes[themes.length - 1];
+      const calls = jest.mocked(StorybookUIComponent).mock.calls;
+      const theme = calls[calls.length - 1][0].theme;
+      backgrounds[choice] = theme.background.app;
+
+      expect(scene.getByTestId(`test-theme-${choice}`).props.accessibilityState.selected).toBe(true);
+      expect(StyleSheet.flatten(scene.getByTestId('test-theme-toolbar').props.style).backgroundColor).toBe(
+        state.tokens.color.backgroundNeutralSubtle,
+      );
+      expect(StyleSheet.flatten(scene.getByText('Theme').props.style).color).toBe(state.tokens.color.foregroundNeutralPrimary);
+      const foreground = theme.base === 'dark' ? state.tokens.color.fixedWhite : state.tokens.color.fixedBlack;
+      const background = theme.base === 'dark' ? state.tokens.color.fixedBlack : state.tokens.color.fixedWhite;
+      const literal = (value: unknown, fallback: unknown) => (typeof value === 'string' ? value : fallback);
+      expect(theme.background.app).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
+      expect(theme.background.content).toBe(literal(state.tokens.color.surfaceNeutralNear, background));
+      expect(theme.background.preview).toBe(literal(state.tokens.color.surfaceNeutralFar, background));
+      expect(theme.color.defaultText).toBe(literal(state.tokens.color.foregroundNeutralPrimary, foreground));
+      expect(theme.input.color).toBe(literal(state.tokens.color.foregroundNeutralPrimary, foreground));
+      expect(theme.button.background).toBe(literal(state.tokens.color.backgroundNeutralLoud, background));
+      expect(root.inputModality).toBe('keyboard');
+      expect(roots.every((settings) => settings === root)).toBe(true);
+    }
+
+    expect(backgrounds.dark).not.toBe(backgrounds.light);
+    expect(backgrounds.none).toBe(defaultBackground);
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('Storybook chrome cannot resolve native system colors'));
+    expect(getStorybookUI).toHaveBeenCalledTimes(1);
+    expect(mounted).toHaveBeenCalledTimes(1);
+    expect(unmounted).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/agentic/storybook-desktop-runtime/src/StorybookTheme.tsx b/packages/agentic/storybook-desktop-runtime/src/StorybookTheme.tsx
index 26e1c037ca..5904b7f039 100644
--- a/packages/agentic/storybook-desktop-runtime/src/StorybookTheme.tsx
+++ b/packages/agentic/storybook-desktop-runtime/src/StorybookTheme.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { createDefaultTheme } from '@fluentui-react-native/default-theme';
-import { ThemeProvider } from '@fluentui-react-native/design/theming';
+import { ThemedRoot, themedStyleSheetFactory, useThemeState } from '@fluentui-react-native/design';
 import type { ThemeReference } from '@fluentui-react-native/design/theming';
 
 import { useDesktopStorybookTestID } from './DesktopStorybookConfig';
@@ -16,99 +16,112 @@ const themeChoiceNames = ['none', 'light', 'dark', 'highContrast'] as const;
 type ThemeChoiceName = (typeof themeChoiceNames)[number];
 
 const themeChoices: Record<ThemeChoiceName, ThemeChoice> = {
-  none: { label: 'No theme' },
+  none: { label: 'Default Flex' },
   light: { label: 'Light', theme: createDefaultTheme({ appearance: 'light' }) },
   dark: { label: 'Dark', theme: createDefaultTheme({ appearance: 'dark' }) },
   highContrast: { label: 'High contrast', theme: createDefaultTheme({ appearance: 'highContrast' }) },
 };
 
-const StorybookThemeContext = React.createContext<ThemeReference | undefined>(undefined);
-
 export function StorybookThemeHost({ children }: React.PropsWithChildren) {
   const [selectedName, setSelectedName] = React.useState<ThemeChoiceName>('none');
-  const selectedTheme = themeChoices[selectedName].theme;
+  const testID = useDesktopStorybookTestID('app-root');
+
+  return (
+    <ThemedRoot style={layoutStyles.root} testID={testID} theme={themeChoices[selectedName].theme}>
+      <StorybookThemeContent selectedName={selectedName} onSelect={setSelectedName}>
+        {children}
+      </StorybookThemeContent>
+    </ThemedRoot>
+  );
+}
+
+function StorybookThemeContent({
+  children,
+  selectedName,
+  onSelect,
+}: React.PropsWithChildren<{ selectedName: ThemeChoiceName; onSelect: (name: ThemeChoiceName) => void }>) {
+  const styles = getStyles(useThemeState());
   const toolbarTestID = useDesktopStorybookTestID('theme-toolbar');
   const optionTestID = useDesktopStorybookTestID('theme');
 
   return (
-    <StorybookThemeContext.Provider value={selectedTheme}>
-      <View style={styles.root}>
-        <View accessibilityRole="toolbar" style={styles.header} testID={toolbarTestID}>
-          <Text style={styles.label}>Theme</Text>
-          {themeChoiceNames.map((name) => {
-            const choice = themeChoices[name];
-            const selected = name === selectedName;
-            return (
-              <Pressable
-                accessibilityRole="button"
-                accessibilityState={{ selected }}
-                key={name}
-                onPress={() => setSelectedName(name)}
-                style={({ pressed }) => [styles.option, selected && styles.selectedOption, pressed && styles.pressedOption]}
-                testID={`${optionTestID}-${name}`}
-              >
-                <Text style={[styles.optionText, selected && styles.selectedOptionText]}>{choice.label}</Text>
-              </Pressable>
-            );
-          })}
-        </View>
-        <View style={styles.storybook}>{children}</View>
+    <View style={styles.root}>
+      <View accessibilityRole="toolbar" style={styles.header} testID={toolbarTestID}>
+        <Text style={styles.label}>Theme</Text>
+        {themeChoiceNames.map((name) => {
+          const choice = themeChoices[name];
+          const selected = name === selectedName;
+          return (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityState={{ selected }}
+              key={name}
+              onPress={() => onSelect(name)}
+              style={({ pressed }) => [styles.option, selected && styles.selectedOption, pressed && styles.pressedOption]}
+              testID={`${optionTestID}-${name}`}
+            >
+              <Text style={[styles.optionText, selected && styles.selectedOptionText]}>{choice.label}</Text>
+            </Pressable>
+          );
+        })}
       </View>
-    </StorybookThemeContext.Provider>
+      <View style={layoutStyles.root}>{children}</View>
+    </View>
   );
 }
 
-export function StorybookThemeProvider({ children }: React.PropsWithChildren) {
-  const theme = React.useContext(StorybookThemeContext);
-  return theme ? <ThemeProvider theme={theme}>{children}</ThemeProvider> : children;
-}
-
-const styles = StyleSheet.create({
+const layoutStyles = StyleSheet.create({
   root: {
     flex: 1,
   },
-  header: {
-    alignItems: 'center',
-    backgroundColor: '#f5f5f5',
-    borderBottomColor: '#d1d1d1',
-    borderBottomWidth: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 8,
-    minHeight: 44,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-  },
-  label: {
-    color: '#242424',
-    fontSize: 14,
-    fontWeight: '600',
-    marginEnd: 4,
-  },
-  option: {
-    backgroundColor: '#ffffff',
-    borderColor: '#b3b3b3',
-    borderRadius: 4,
-    borderWidth: 1,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-  },
-  selectedOption: {
-    backgroundColor: '#0f6cbd',
-    borderColor: '#0f6cbd',
-  },
-  pressedOption: {
-    opacity: 0.75,
-  },
-  optionText: {
-    color: '#242424',
-    fontSize: 12,
-  },
-  selectedOptionText: {
-    color: '#ffffff',
-    fontWeight: '600',
-  },
-  storybook: {
-    flex: 1,
-  },
 });
+
+const getStyles = themedStyleSheetFactory('StorybookTheme', ({ tokens }) =>
+  StyleSheet.create({
+    root: {
+      flex: 1,
+      backgroundColor: tokens.color.surfaceNeutralFar,
+    },
+    header: {
+      alignItems: 'center',
+      backgroundColor: tokens.color.backgroundNeutralSubtle,
+      borderBottomColor: tokens.color.strokeNeutralSubtle,
+      borderBottomWidth: 1,
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 8,
+      minHeight: 44,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+    },
+    label: {
+      color: tokens.color.foregroundNeutralPrimary,
+      fontSize: 14,
+      fontWeight: '600',
+      marginEnd: 4,
+    },
+    option: {
+      backgroundColor: tokens.color.backgroundNeutralLoud,
+      borderColor: tokens.color.strokeNeutralSoft,
+      borderRadius: 4,
+      borderWidth: 1,
+      paddingHorizontal: 10,
+      paddingVertical: 5,
+    },
+    selectedOption: {
+      backgroundColor: tokens.color.backgroundBrandHeavy,
+      borderColor: tokens.color.strokeBrandLoud,
+    },
+    pressedOption: {
+      opacity: 0.75,
+    },
+    optionText: {
+      color: tokens.color.foregroundNeutralPrimary,
+      fontSize: 12,
+    },
+    selectedOptionText: {
+      color: tokens.color.foregroundBrandOnloud,
+      fontWeight: '600',
+    },
+  }),
+);
diff --git a/packages/agentic/storybook-desktop-runtime/src/StorybookUI.win32.tsx b/packages/agentic/storybook-desktop-runtime/src/StorybookUI.win32.tsx
index e6cd22e00f..072c72495e 100644
--- a/packages/agentic/storybook-desktop-runtime/src/StorybookUI.win32.tsx
+++ b/packages/agentic/storybook-desktop-runtime/src/StorybookUI.win32.tsx
@@ -14,7 +14,7 @@ import { Win32ResizeHandle } from './Win32ResizeHandle';
 const emptyRefs = {};
 const emptyStatus = {};
 
-export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story, storyHash, theme }) => {
+export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story, storyHash, storyBackgroundColor, theme }) => {
   const storiesAnchorRef = React.useRef<View>(null);
   const addonsAnchorRef = React.useRef<View>(null);
   const [sidebarVisible, setSidebarVisible] = React.useState(true);
@@ -67,7 +67,7 @@ export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story,
   return (
     <ThemeProvider theme={theme}>
       <StorageProvider storage={storage}>
-        <View style={styles.root} testID={chromeTestID}>
+        <View style={[styles.root, { backgroundColor: theme.background.app }]} testID={chromeTestID}>
           {sidebarVisible ? (
             <>
               <View
@@ -174,7 +174,7 @@ export const StorybookUIComponent: SBUI = ({ children, setStory, storage, story,
                 </Text>
               </View>
             ) : null}
-            <View style={styles.preview} testID={previewTestID}>
+            <View style={[styles.preview, { backgroundColor: storyBackgroundColor ?? theme.background.preview }]} testID={previewTestID}>
               {children}
             </View>
             {addonsVisible ? (
diff --git a/packages/agentic/storybook-desktop-runtime/src/ThemedStorybookUI.tsx b/packages/agentic/storybook-desktop-runtime/src/ThemedStorybookUI.tsx
new file mode 100644
index 0000000000..629a7283bb
--- /dev/null
+++ b/packages/agentic/storybook-desktop-runtime/src/ThemedStorybookUI.tsx
@@ -0,0 +1,9 @@
+import type { SBUI } from '@storybook/react-native-ui-common';
+
+import { StorybookUIComponent } from './StorybookUI';
+import { useStorybookTheme } from './useStorybookTheme';
+
+export const ThemedStorybookUI: SBUI = (props) => {
+  const theme = useStorybookTheme();
+  return <StorybookUIComponent {...props} theme={theme} />;
+};
diff --git a/packages/agentic/storybook-desktop-runtime/src/createDesktopStorybookApp.tsx b/packages/agentic/storybook-desktop-runtime/src/createDesktopStorybookApp.tsx
index 35ef0546c5..fa376208c9 100644
--- a/packages/agentic/storybook-desktop-runtime/src/createDesktopStorybookApp.tsx
+++ b/packages/agentic/storybook-desktop-runtime/src/createDesktopStorybookApp.tsx
@@ -1,12 +1,10 @@
-import type * as React from 'react';
-import { StyleSheet, View as NativeView } from 'react-native';
 import type { View } from '@storybook/react-native';
 
 import { DesktopDriverBridge } from './DesktopDriverBridge';
-import { DesktopStorybookConfigProvider, useDesktopStorybookTestID } from './DesktopStorybookConfig';
+import { DesktopStorybookConfigProvider } from './DesktopStorybookConfig';
 import type { DesktopStorybookRuntimeInstance } from './DesktopStorybookConfig';
 import { StorybookThemeHost } from './StorybookTheme';
-import { StorybookUIComponent } from './StorybookUI';
+import { ThemedStorybookUI } from './ThemedStorybookUI';
 
 export type DesktopStorybookOptions = {
   enableWebsockets?: boolean;
@@ -35,7 +33,7 @@ export function createDesktopStorybookApp(
     enableWebsockets,
     host,
     port: port ?? runtimeInstance?.storybookPort ?? 7007,
-    CustomUIComponent: StorybookUIComponent,
+    CustomUIComponent: ThemedStorybookUI,
     storage,
   });
 
@@ -43,30 +41,13 @@ export function createDesktopStorybookApp(
     const resolvedTestIDPrefix = runtimeInstance?.testIDPrefix ?? testIDPrefix;
     return (
       <DesktopStorybookConfigProvider runtimeInstance={runtimeInstance} testIDPrefix={resolvedTestIDPrefix}>
-        <DesktopStorybookAppRoot>
+        <StorybookThemeHost>
           <DesktopDriverBridge />
-          <StorybookThemeHost>
-            <StorybookUI />
-          </StorybookThemeHost>
-        </DesktopStorybookAppRoot>
+          <StorybookUI />
+        </StorybookThemeHost>
       </DesktopStorybookConfigProvider>
     );
   }
 
   return DesktopStorybookApp;
 }
-
-function DesktopStorybookAppRoot({ children }: React.PropsWithChildren) {
-  const testID = useDesktopStorybookTestID('app-root');
-  return (
-    <NativeView style={styles.root} testID={testID}>
-      {children}
-    </NativeView>
-  );
-}
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-});
diff --git a/packages/agentic/storybook-desktop-runtime/src/createDesktopStorybookPreview.tsx b/packages/agentic/storybook-desktop-runtime/src/createDesktopStorybookPreview.tsx
index 78824c3677..e411e128b7 100644
--- a/packages/agentic/storybook-desktop-runtime/src/createDesktopStorybookPreview.tsx
+++ b/packages/agentic/storybook-desktop-runtime/src/createDesktopStorybookPreview.tsx
@@ -2,19 +2,16 @@ import { StyleSheet, View } from 'react-native';
 import type { Preview } from '@storybook/react-native';
 
 import { DesktopStoryRoot } from './DesktopStoryRoot';
-import { StorybookThemeProvider } from './StorybookTheme';
 
 export function createDesktopStorybookPreview(): Preview {
   return {
     decorators: [
       (Story, context) => (
-        <StorybookThemeProvider>
-          <DesktopStoryRoot storyId={context.id}>
-            <View style={styles.story}>
-              <Story />
-            </View>
-          </DesktopStoryRoot>
-        </StorybookThemeProvider>
+        <DesktopStoryRoot storyId={context.id}>
+          <View style={styles.story}>
+            <Story />
+          </View>
+        </DesktopStoryRoot>
       ),
     ],
     parameters: {},
diff --git a/packages/agentic/storybook-desktop-runtime/src/useStorybookTheme.test.tsx b/packages/agentic/storybook-desktop-runtime/src/useStorybookTheme.test.tsx
new file mode 100644
index 0000000000..cb1579328f
--- /dev/null
+++ b/packages/agentic/storybook-desktop-runtime/src/useStorybookTheme.test.tsx
@@ -0,0 +1,63 @@
+import { PlatformColor } from 'react-native';
+
+import { act, render } from '@testing-library/react-native';
+import { FlexThemeReference, ThemedRoot, useThemeState } from '@fluentui-react-native/design';
+import type { ThemeState } from '@fluentui-react-native/design';
+import type { Theme } from '@storybook/react-native-theming';
+
+import { useStorybookTheme } from './useStorybookTheme';
+
+function Probe({ themes, states }: { themes: Theme[]; states?: ThemeState[] }) {
+  themes.push(useStorybookTheme());
+  const state = useThemeState();
+  states?.push(state);
+  return null;
+}
+
+describe('Storybook theme palette', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('derives colors from the current tokens and updates after source invalidation', async () => {
+    const themes: Theme[] = [];
+    const states: ThemeState[] = [];
+    const source = new FlexThemeReference({
+      base: { color: { surfaceNeutralFar: '#123456', foregroundNeutralPrimary: '#abcdef' } },
+    });
+    const scene = await render(
+      <ThemedRoot theme={source}>
+        <Probe themes={themes} states={states} />
+      </ThemedRoot>,
+    );
+
+    expect(themes[0].background.app).toBe('#123456');
+    expect(themes[0].color.defaultText).toBe('#abcdef');
+    await scene.rerender(
+      <ThemedRoot theme={source}>
+        <Probe themes={themes} states={states} />
+      </ThemedRoot>,
+    );
+    expect(themes[themes.length - 1]).toBe(themes[0]);
+
+    await act(() => source.update({ color: { surfaceNeutralFar: '#654321' } }));
+    expect(themes[themes.length - 1].background.app).toBe('#654321');
+    expect(themes[themes.length - 1]).not.toBe(themes[0]);
+    expect(themes[themes.length - 1].appBorderColor).toBe(states[states.length - 1].tokens.color.strokeNeutralSubtle);
+  });
+
+  it('warns and substitutes a contrasting theme color for native opaque colors', async () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation();
+    const themes: Theme[] = [];
+    const states: ThemeState[] = [];
+    const source = new FlexThemeReference({ base: { color: { foregroundBrandPrimary: PlatformColor('labelColor') } } });
+    await render(
+      <ThemedRoot theme={source}>
+        <Probe themes={themes} states={states} />
+      </ThemedRoot>,
+    );
+    expect(themes[0].color.primary).toBe(states[0].tokens.color.fixedBlack);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('foregroundBrandPrimary'));
+  });
+});
diff --git a/packages/agentic/storybook-desktop-runtime/src/useStorybookTheme.ts b/packages/agentic/storybook-desktop-runtime/src/useStorybookTheme.ts
new file mode 100644
index 0000000000..06819d0bdb
--- /dev/null
+++ b/packages/agentic/storybook-desktop-runtime/src/useStorybookTheme.ts
@@ -0,0 +1,112 @@
+import * as React from 'react';
+
+import { useThemeState } from '@fluentui-react-native/design';
+import type { SemanticColorTokenValues, ThemeState } from '@fluentui-react-native/design';
+import { darkTheme, theme as lightTheme } from '@storybook/react-native-theming';
+import type { Theme } from '@storybook/react-native-theming';
+
+export function useStorybookTheme(): Theme {
+  const state = useThemeState();
+  const { theme, nativeColors } = React.useMemo(() => storybookThemeFromThemeState(state), [state]);
+  React.useEffect(() => {
+    if (nativeColors.length > 0) {
+      console.warn(
+        `Storybook chrome cannot resolve native system colors; using fixed contrasting theme colors for: ${nativeColors.join(', ')}.`,
+      );
+    }
+  }, [nativeColors]);
+  return theme;
+}
+
+function storybookThemeFromThemeState({ appearance, highContrast, tokens }: ThemeState) {
+  const base = highContrast || appearance.colorScheme === 'dark' ? darkTheme : lightTheme;
+  const foreground = base.base === 'dark' ? 'fixedWhite' : 'fixedBlack';
+  const background = base.base === 'dark' ? 'fixedBlack' : 'fixedWhite';
+  const nativeColors = new Set<keyof SemanticColorTokenValues>();
+  const color = (name: keyof SemanticColorTokenValues, role: 'foreground' | 'background' = 'foreground'): string => {
+    const value = tokens.color[name];
+    // Storybook also passes these colors to JS color utilities, not just native styles.
+    if (typeof value === 'string') {
+      return value;
+    }
+    nativeColors.add(name);
+    const fallbackName = role === 'foreground' ? foreground : background;
+    const fallback = tokens.color[fallbackName];
+    if (typeof fallback !== 'string') {
+      throw new Error(`Storybook chrome requires a literal "${fallbackName}" fallback for the "${name}" theme token.`);
+    }
+    return fallback;
+  };
+
+  const theme: Theme = {
+    ...base,
+    color: {
+      ...base.color,
+      primary: color('foregroundBrandPrimary'),
+      secondary: color('backgroundBrandHeavy'),
+      secondaryLighter: color('backgroundBrandSoft', 'background'),
+      tertiary: color('foregroundSuccessPrimary'),
+      ancillary: color('foregroundBrandPrimary'),
+      orange: color('foregroundWarningPrimary'),
+      gold: color('foregroundWarningPrimary'),
+      green: color('foregroundSuccessPrimary'),
+      seafoam: color('foregroundSuccessPrimary'),
+      purple: color('foregroundBrandPrimary'),
+      ultraviolet: color('foregroundBrandPrimary'),
+      lightest: color('foregroundBrandOnloud', 'background'),
+      lighter: color('surfaceNeutralNear', 'background'),
+      light: color('backgroundNeutralSubtle', 'background'),
+      mediumlight: color('strokeNeutralSubtle'),
+      medium: color('strokeNeutralSoft'),
+      mediumdark: color('foregroundNeutralSecondary'),
+      dark: color('foregroundNeutralPrimary'),
+      darker: color('foregroundNeutralPrimary'),
+      darkest: color('foregroundNeutralPrimary'),
+      border: color('strokeNeutralSoft'),
+      positive: color('foregroundSuccessPrimary'),
+      negative: color('foregroundDangerPrimary'),
+      warning: color('foregroundWarningPrimary'),
+      critical: color('foregroundDangerPrimary'),
+      defaultText: color('foregroundNeutralPrimary'),
+      inverseText: color('foregroundNeutralOnloud', 'background'),
+      positiveText: color('foregroundSuccessPrimary'),
+      negativeText: color('foregroundDangerPrimary'),
+      warningText: color('foregroundWarningPrimary'),
+    },
+    background: {
+      ...base.background,
+      app: color('surfaceNeutralFar', 'background'),
+      bar: color('backgroundNeutralSubtle', 'background'),
+      content: color('surfaceNeutralNear', 'background'),
+      preview: color('surfaceNeutralFar', 'background'),
+      hoverable: color('backgroundNeutralSoft', 'background'),
+      positive: color('backgroundSuccessSubtle', 'background'),
+      negative: color('backgroundDangerSubtle', 'background'),
+      warning: color('backgroundWarningSubtle', 'background'),
+      critical: color('backgroundDangerSubtle', 'background'),
+    },
+    textMutedColor: color('foregroundNeutralTertiary'),
+    input: {
+      ...base.input,
+      border: color('strokeNeutralSoft'),
+      background: color('backgroundNeutralLoud', 'background'),
+      color: color('foregroundNeutralPrimary'),
+    },
+    button: {
+      ...base.button,
+      background: color('backgroundNeutralLoud', 'background'),
+      border: color('strokeNeutralSoft'),
+    },
+    boolean: {
+      ...base.boolean,
+      background: color('backgroundNeutralSoft', 'background'),
+      selectedBackground: color('backgroundBrandHeavy'),
+    },
+    appBorderColor: color('strokeNeutralSubtle'),
+    barTextColor: color('foregroundNeutralPrimary'),
+    barHoverColor: color('foregroundBrandPrimary'),
+    barSelectedColor: color('foregroundBrandPrimary'),
+    barBg: color('backgroundNeutralSubtle', 'background'),
+  };
+  return { theme, nativeColors: [...nativeColors] };
+}
diff --git a/yarn.lock b/yarn.lock
index 18efa9f1db..556fad20eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5043,6 +5043,9 @@ __metadata:
     "@fluentui-react-native/design": "workspace:*"
     "@fluentui-react-native/scripts": "workspace:*"
     "@office-iss/react-native-win32": "npm:^0.81.0"
+    "@react-native-community/cli": "npm:^20.0.0"
+    "@react-native-community/cli-platform-android": "npm:^20.0.0"
+    "@react-native-community/cli-platform-ios": "npm:^20.0.0"
     "@react-native/babel-preset": "npm:^0.81.0"
     "@rnx-kit/metro-config": "catalog:"
     "@rnx-kit/metro-resolver-symlinks": "catalog:"
@@ -5050,6 +5053,7 @@ __metadata:
     "@storybook/react-native-theming": "npm:^10.4.7"
     "@storybook/react-native-ui-common": "npm:^10.4.7"
     "@storybook/react-native-ui-lite": "npm:^10.4.7"
+    "@testing-library/react-native": "catalog:"
     "@types/react": "npm:~19.1.4"
     oxc-resolver: "catalog:"
     react: "npm:19.1.4"
@@ -5057,6 +5061,7 @@ __metadata:
     react-native-macos: "npm:^0.81.0"
     react-native-windows: "npm:^0.81.0"
     storybook: "npm:^10.4.0"
+    test-renderer: "catalog:"
   peerDependencies:
     "@office-iss/react-native-win32": ^0.81.0
     "@types/react": ~19.1.4

From 69ce270dde98588f8386e60fa4c720cad3af0142 Mon Sep 17 00:00:00 2001
From: Jason Morse <jasonmo@microsoft.com>
Date: Sun, 13 Sep 2026 21:22:11 -0700
Subject: [PATCH 05/11] more focus updates

---
 .changeset/root-modality-focus-visuals.md     |   5 +
 .../references/styles-and-tokens.md           |  25 ++--
 .../references/sources/flex-x3.md             |  14 +-
 .../src/common/applyFocusRingStyles.ts        |  41 ++++++
 .../src/common/focusVisualPolicy.test.tsx     |  91 ++++++++----
 .../src/common/focusVisualPolicy.ts           |  18 ---
 .../src/common/useFocusVisuals.test.tsx       | 138 ++++++++++++++++++
 .../components/src/common/useFocusVisuals.ts  |  43 ++++++
 .../src/common/useFocusVisuals.types.test.ts  |  25 ++++
 .../components/src/components/AGENTS.md       |  63 ++++----
 .../src/components/accordion/SPEC.md          |  21 ++-
 .../components/accordion/accordion.test.tsx   |  24 +--
 .../components/accordion/accordion.types.ts   |   5 +-
 .../components/accordion/renderAccordion.tsx  |   3 +-
 .../accordion/spec/accessibility.md           |  14 +-
 .../components/accordion/spec/interaction.md  |  10 +-
 .../src/components/accordion/spec/source.json |   2 +-
 .../src/components/accordion/spec/tokens.yaml |   2 +-
 .../src/components/accordion/spec/usage.md    |   6 +
 .../src/components/accordion/useAccordion.ts  |   7 +-
 .../accordion/useAccordionStyles.ts           |  11 +-
 .../components/src/components/button/SPEC.md  |  27 +++-
 .../src/components/button/button.test.tsx     |  16 +-
 .../src/components/button/button.types.ts     |   5 +-
 .../src/components/button/renderButton.tsx    |   3 +-
 .../components/button/spec/accessibility.md   |  14 +-
 .../src/components/button/spec/interaction.md |  15 +-
 .../src/components/button/spec/source.json    |   2 +-
 .../src/components/button/spec/tokens.yaml    |   2 +-
 .../src/components/button/spec/usage.md       |   6 +
 .../src/components/button/useButton.ts        |  14 +-
 .../src/components/button/useButtonStyles.ts  |  11 +-
 .../components/src/components/card/SPEC.md    |  19 ++-
 .../src/components/card/card.test.tsx         |  10 +-
 .../src/components/card/card.types.ts         |   5 +-
 .../src/components/card/renderCard.tsx        |   7 +-
 .../src/components/card/spec/accessibility.md |  14 +-
 .../src/components/card/spec/interaction.md   |  16 +-
 .../src/components/card/spec/source.json      |   2 +-
 .../src/components/card/spec/tokens.yaml      |   2 +-
 .../src/components/card/spec/usage.md         |   6 +
 .../components/src/components/card/useCard.ts |   8 +-
 .../src/components/card/useCardStyles.ts      |  11 +-
 .../src/components/checkbox/SPEC.md           |  34 +++--
 .../src/components/checkbox/checkbox.test.tsx |  17 +--
 .../src/components/checkbox/checkbox.types.ts |   6 +-
 .../components/checkbox/renderCheckbox.tsx    |   3 +-
 .../components/checkbox/spec/accessibility.md |  21 +--
 .../components/checkbox/spec/interaction.md   |  19 ++-
 .../src/components/checkbox/spec/source.json  |   2 +-
 .../src/components/checkbox/spec/tokens.yaml  |   2 +-
 .../src/components/checkbox/spec/usage.md     |   6 +
 .../src/components/checkbox/useCheckbox.ts    |  20 +--
 .../components/checkbox/useCheckboxStyles.ts  |  11 +-
 .../src/components/list-item/SPEC.md          |  22 ++-
 .../components/list-item/list-item.test.tsx   |  13 +-
 .../components/list-item/list-item.types.ts   |   5 +-
 .../components/list-item/renderListItem.tsx   |   3 +-
 .../list-item/spec/accessibility.md           |  13 +-
 .../components/list-item/spec/interaction.md  |  14 +-
 .../src/components/list-item/spec/source.json |   2 +-
 .../src/components/list-item/spec/tokens.yaml |   2 +-
 .../src/components/list-item/spec/usage.md    |   6 +
 .../src/components/list-item/useListItem.ts   |   8 +-
 .../components/list-item/useListItemStyles.ts |  11 +-
 .../src/components/listbox-item/SPEC.md       |  22 ++-
 .../listbox-item/listbox-item.test.tsx        |  10 +-
 .../listbox-item/listbox-item.types.ts        |   5 +-
 .../listbox-item/renderListboxItem.tsx        |   3 +-
 .../listbox-item/spec/accessibility.md        |  13 +-
 .../listbox-item/spec/interaction.md          |  15 +-
 .../components/listbox-item/spec/source.json  |   2 +-
 .../components/listbox-item/spec/tokens.yaml  |   2 +-
 .../src/components/listbox-item/spec/usage.md |   6 +
 .../components/listbox-item/useListboxItem.ts |   8 +-
 .../listbox-item/useListboxItemStyles.ts      |  11 +-
 .../src/components/menu-item/SPEC.md          |  25 +++-
 .../components/menu-item/menu-item.test.tsx   |  14 +-
 .../components/menu-item/menu-item.types.ts   |   5 +-
 .../components/menu-item/renderMenuItem.tsx   |   3 +-
 .../menu-item/spec/accessibility.md           |  13 +-
 .../components/menu-item/spec/interaction.md  |  14 +-
 .../src/components/menu-item/spec/source.json |   2 +-
 .../src/components/menu-item/spec/tokens.yaml |   2 +-
 .../src/components/menu-item/spec/usage.md    |   6 +
 .../src/components/menu-item/useMenuItem.ts   |  11 +-
 .../components/menu-item/useMenuItemStyles.ts |  11 +-
 .../components/src/components/radio/SPEC.md   |  22 ++-
 .../src/components/radio/radio.test.tsx       |  12 +-
 .../src/components/radio/radio.types.ts       |   5 +-
 .../src/components/radio/renderRadio.tsx      |   3 +-
 .../components/radio/spec/accessibility.md    |  15 +-
 .../src/components/radio/spec/interaction.md  |  18 ++-
 .../src/components/radio/spec/source.json     |   2 +-
 .../src/components/radio/spec/tokens.yaml     |   2 +-
 .../src/components/radio/spec/usage.md        |   6 +
 .../src/components/radio/useRadio.ts          |   8 +-
 .../src/components/radio/useRadioStyles.ts    |  11 +-
 .../components/src/components/switch/SPEC.md  |  19 ++-
 .../src/components/switch/renderSwitch.tsx    |   3 +-
 .../components/switch/spec/accessibility.md   |  19 ++-
 .../src/components/switch/spec/interaction.md |  16 +-
 .../src/components/switch/spec/source.json    |   2 +-
 .../src/components/switch/spec/tokens.yaml    |   2 +-
 .../src/components/switch/spec/usage.md       |   6 +
 .../src/components/switch/switch.test.tsx     |  15 +-
 .../src/components/switch/switch.types.ts     |   5 +-
 .../src/components/switch/useSwitch.ts        |   7 +-
 .../src/components/switch/useSwitchStyles.ts  |  11 +-
 .../components/src/components/tab/SPEC.md     |  19 ++-
 .../src/components/tab/renderTab.tsx          |   3 +-
 .../src/components/tab/spec/accessibility.md  |  13 +-
 .../src/components/tab/spec/interaction.md    |  16 +-
 .../src/components/tab/spec/source.json       |   2 +-
 .../src/components/tab/spec/tokens.yaml       |   2 +-
 .../src/components/tab/spec/usage.md          |   6 +
 .../src/components/tab/tab.test.tsx           |  12 +-
 .../src/components/tab/tab.types.ts           |   5 +-
 .../components/src/components/tab/useTab.ts   |   7 +-
 .../src/components/tab/useTabStyles.ts        |  11 +-
 .../components/src/components/tag/SPEC.md     |  19 ++-
 .../src/components/tag/renderTag.tsx          |   3 +-
 .../src/components/tag/spec/accessibility.md  |  13 +-
 .../src/components/tag/spec/interaction.md    |  16 +-
 .../src/components/tag/spec/source.json       |   2 +-
 .../src/components/tag/spec/tokens.yaml       |   2 +-
 .../src/components/tag/spec/usage.md          |   6 +
 .../src/components/tag/tag.test.tsx           |  18 +--
 .../src/components/tag/tag.types.ts           |   5 +-
 .../components/src/components/tag/useTag.ts   |   8 +-
 .../src/components/tag/useTagStyles.ts        |  11 +-
 packages/agentic/components/src/index.test.ts |   2 +
 packages/agentic/components/src/index.ts      |   4 +
 133 files changed, 1034 insertions(+), 606 deletions(-)
 create mode 100644 .changeset/root-modality-focus-visuals.md
 create mode 100644 packages/agentic/components/src/common/applyFocusRingStyles.ts
 delete mode 100644 packages/agentic/components/src/common/focusVisualPolicy.ts
 create mode 100644 packages/agentic/components/src/common/useFocusVisuals.test.tsx
 create mode 100644 packages/agentic/components/src/common/useFocusVisuals.ts
 create mode 100644 packages/agentic/components/src/common/useFocusVisuals.types.test.ts

diff --git a/.changeset/root-modality-focus-visuals.md b/.changeset/root-modality-focus-visuals.md
new file mode 100644
index 0000000000..270f65d8e7
--- /dev/null
+++ b/.changeset/root-modality-focus-visuals.md
@@ -0,0 +1,5 @@
+---
+"@fluentui-react-native/components": minor
+---
+
+Add useFocusVisuals and shared focus-ring styling, and migrate focusable components to optional FocusRing state slots. Windows and macOS default to native rings; Win32 defaults to keyboard-modality-aware custom rings. The hook supports native-ring overrides and always-visible focused custom rings. Component scenes now require ThemedRoot, and unstable state no longer carries focusVisualProps or Checkbox's local focusVisible flag.
diff --git a/.github/skills/agentic-component-authoring/references/styles-and-tokens.md b/.github/skills/agentic-component-authoring/references/styles-and-tokens.md
index 8198cf5807..9344c4cfec 100644
--- a/.github/skills/agentic-component-authoring/references/styles-and-tokens.md
+++ b/.github/skills/agentic-component-authoring/references/styles-and-tokens.md
@@ -119,23 +119,20 @@ Preserve consumer slot behavior unless the component owns it. Button no longer f
 toggle container use `flexShrink` so constrained labels can wrap. A consumer can still request truncation through the
 content slot.
 
-## Keep focus visuals mounted
+## Share focus behavior and styling
 
-Agentic focusable components render `FocusVisual` inside the interactive slot. Configure its outer
-ring and optional inner ring from the component's semantic focus tokens and resolved radius, but keep both configured
-Views mounted at rest. `FocusVisual` changes only opacity when focus changes and owns accessibility and hit testing.
+Follow the [shared focus visual policy](../../../../packages/agentic/components/src/components/AGENTS.md#focus-visual-policy).
+State hooks use `useFocusVisuals` to create a private optional `FocusRing` and determine the native
+`enableFocusRing` setting. The custom slot is absent on the native path; when present, its configured Views
+remain mounted across visibility changes.
 
-Do not apply React Native `outline*` props conditionally and do not enable the RNW native focus ring. RNW 0.81 Fabric
-creates both through a late `BorderPrimitive`; on a background-filled target its owning-root bookkeeping can insert at
-index 1 in an empty visual and fail-fast. A style helper alone is insufficient because the invariant is native View
-lifetime.
+Keep `ThemeState` in the styling phase. Call `applyFocusRingStyles(state.FocusRing, state, resolvedRadius)`
+to bind shared focus colors and widths while retaining component-specific geometry. The helper uses an
+immutable theme stylesheet; props, focus state, and radius remain outside that cache.
 
-Keep the ring policy local to the higher-order component:
-
-- choose single versus dual rings from the component specification
-- resolve colors, widths, radius, and positioning from its tokens and variants
-- place the visual inside the actual focus target
-- keep functional component borders separate from focus feedback
+Native rings default to Windows/macOS; Win32 uses the root-modality-aware custom ring. The Windows native
+path requires RNW 0.81.35 or newer. Do not introduce `outline*` focus styles, local modality trackers, or
+functional border changes to implement a focus ring.
 
 ## Selected text without layout shift
 
diff --git a/.github/skills/agentic-component-contract-authoring/references/sources/flex-x3.md b/.github/skills/agentic-component-contract-authoring/references/sources/flex-x3.md
index 8828ff5621..5d44e024b8 100644
--- a/.github/skills/agentic-component-contract-authoring/references/sources/flex-x3.md
+++ b/.github/skills/agentic-component-contract-authoring/references/sources/flex-x3.md
@@ -33,13 +33,13 @@ cross-platform canonical reference unless the work targets iOS.
 
 Translate web concepts deliberately:
 
-| Flex evidence                        | React Native contract                                                                     |
-| ------------------------------------ | ----------------------------------------------------------------------------------------- |
-| ARIA attributes or native elements   | `accessibilityRole`, `accessibilityState`, labels, and UIA/AX expectations                |
-| CSS pseudo-classes                   | explicit interaction state and precedence                                                 |
-| browser focus selectors and outlines | shared native focus policy, with persistent `FocusVisual` retained as the custom fallback |
-| CSS pixel or layout rules            | React Native units, minimum targets, and platform behavior                                |
-| unsupported browser capability       | explicit divergence, dependency, or blocker                                               |
+| Flex evidence                        | React Native contract                                                                    |
+| ------------------------------------ | ---------------------------------------------------------------------------------------- |
+| ARIA attributes or native elements   | `accessibilityRole`, `accessibilityState`, labels, and UIA/AX expectations               |
+| CSS pseudo-classes                   | explicit interaction state and precedence                                                |
+| browser focus selectors and outlines | shared root-modality policy and optional `FocusRing`, persistent only on the custom path |
+| CSS pixel or layout rules            | React Native units, minimum targets, and platform behavior                               |
+| unsupported browser capability       | explicit divergence, dependency, or blocker                                              |
 
 Do not copy Flex prose or token tables into the public package. A mutable
 Marketplace or X3 HEAD change is candidate drift and does not invalidate a
diff --git a/packages/agentic/components/src/common/applyFocusRingStyles.ts b/packages/agentic/components/src/common/applyFocusRingStyles.ts
new file mode 100644
index 0000000000..c35b474375
--- /dev/null
+++ b/packages/agentic/components/src/common/applyFocusRingStyles.ts
@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+
+import { themedStyleSheetFactory } from '@fluentui-react-native/design';
+import type { ThemeState } from '@fluentui-react-native/design';
+import { attachSlotProps } from '@fluentui-react-native/framework-base';
+
+import type { FocusVisualsState } from './useFocusVisuals';
+
+const getStyles = themedStyleSheetFactory('FocusRing', ({ tokens }) =>
+  StyleSheet.create({
+    outer: {
+      borderColor: tokens.color.strokeFocusOuter,
+      borderStyle: 'solid',
+      borderWidth: tokens.strokeWidth.thick,
+    },
+    inner: {
+      borderColor: tokens.color.strokeFocusInner,
+      borderStyle: 'solid',
+      borderWidth: tokens.strokeWidth.thin,
+    },
+  }),
+);
+
+/**
+ * Applies shared theme defaults without replacing the hook's visibility decision.
+ */
+export function applyFocusRingStyles(
+  FocusRing: FocusVisualsState['FocusRing'],
+  theme: ThemeState,
+  borderRadius?: ViewStyle['borderRadius'],
+): void {
+  if (FocusRing) {
+    const styles = getStyles(theme);
+    const radius = { borderRadius };
+    attachSlotProps(FocusRing, {
+      style: [styles.outer, radius],
+      inner: { style: [styles.inner, radius] },
+    });
+  }
+}
diff --git a/packages/agentic/components/src/common/focusVisualPolicy.test.tsx b/packages/agentic/components/src/common/focusVisualPolicy.test.tsx
index c558fde543..51b9761abc 100644
--- a/packages/agentic/components/src/common/focusVisualPolicy.test.tsx
+++ b/packages/agentic/components/src/common/focusVisualPolicy.test.tsx
@@ -1,9 +1,11 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
+import { cloneElement } from 'react';
 import type { ReactElement } from 'react';
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import type { AccessibilityRole } from 'react-native';
 
 import { fireEvent } from '@testing-library/react-native';
+import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
 import { render } from './renderWithTheme';
 
 import { Accordion } from '../components/accordion/accordion';
@@ -17,9 +19,8 @@ import { Radio } from '../components/radio/radio';
 import { Switch } from '../components/switch/switch';
 import { Tab } from '../components/tab/tab';
 import { Tag } from '../components/tag/tag';
-import { createFocusVisualProps, focusVisualPolicy, getNativeFocusVisualProps } from './focusVisualPolicy';
 
-const cases: { name: string; element: ReactElement; role: AccessibilityRole }[] = [
+const cases: { name: string; element: ReactElement<{ disabled?: boolean }>; role: AccessibilityRole }[] = [
   { name: 'Accordion', element: <Accordion />, role: 'button' },
   { name: 'Button', element: <Button content="Action" />, role: 'button' },
   { name: 'Card', element: <Card accessibilityLabel="Card" selected={false} />, role: 'button' },
@@ -37,47 +38,83 @@ afterEach(() => {
   jest.restoreAllMocks();
 });
 
-it('defaults to native focus visuals without changing custom ring geometry', () => {
-  expect(getNativeFocusVisualProps()).toEqual({ enableFocusRing: true });
-  expect(
-    createFocusVisualProps({
-      borderRadius: 4,
-      innerColor: 'white',
-      innerWidth: 1,
-      outerColor: 'black',
-      outerWidth: 2,
-      visible: true,
-    }),
-  ).toEqual({
-    inner: { style: { borderColor: 'white', borderRadius: 4, borderStyle: 'solid', borderWidth: 1 } },
-    style: { borderColor: 'black', borderRadius: 4, borderStyle: 'solid', borderWidth: 2 },
-    visible: false,
-  });
-});
-
-describe.each([true, false])('useSystemFocusVisuals=%s', (useSystemFocusVisuals) => {
+describe.each(['windows', 'macos', 'win32'])('component focus visuals on %s', (platform) => {
   beforeEach(() => {
-    jest.replaceProperty(focusVisualPolicy, 'useSystemFocusVisuals', useSystemFocusVisuals);
+    jest.replaceProperty(Platform, 'OS', platform as typeof Platform.OS);
   });
 
   it.each(cases)('keeps exactly one focus visual owner for $name', async ({ element, role }) => {
     const component = await render(element);
     const target = component.getByRole(role);
+    const native = platform !== 'win32';
+
+    expect(target.props.enableFocusRing).toBe(native);
+    if (native) {
+      expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
+      await fireEvent(component.getByTestId('test-scene-root'), 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+      await fireEvent(target, 'focus', {});
+      expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
+      return;
+    }
+
     const outerRing = component.getByTestId('focus-visual', { includeHiddenElements: true });
     const innerRing = component.getByTestId('focus-visual-inner', { includeHiddenElements: true });
-
-    expect(target.props.enableFocusRing).toBe(useSystemFocusVisuals);
     expect(StyleSheet.flatten(outerRing.props.style).opacity).toBe(0);
 
+    await fireEvent(component.getByTestId('test-scene-root'), 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
     await fireEvent(target, 'focus', {});
 
     expect(component.getByTestId('focus-visual', { includeHiddenElements: true })).toBe(outerRing);
     expect(component.getByTestId('focus-visual-inner', { includeHiddenElements: true })).toBe(innerRing);
-    expect(StyleSheet.flatten(outerRing.props.style).opacity).toBe(useSystemFocusVisuals ? 0 : undefined);
+    expect(StyleSheet.flatten(outerRing.props.style)).toMatchObject({
+      borderColor: defaultFlexTokens.color.strokeFocusOuter,
+      borderWidth: defaultFlexTokens.strokeWidth.thick,
+    });
+    expect(StyleSheet.flatten(outerRing.props.style).opacity).toBeUndefined();
+    expect(StyleSheet.flatten(innerRing.props.style)).toMatchObject({
+      borderColor: defaultFlexTokens.color.strokeFocusInner,
+      borderWidth: defaultFlexTokens.strokeWidth.thin,
+    });
     expect(outerRing.props).toMatchObject({ accessible: false, focusable: false, pointerEvents: 'none' });
 
     await fireEvent(target, 'blur', {});
-
     expect(StyleSheet.flatten(outerRing.props.style).opacity).toBe(0);
+    await fireEvent(component.getByTestId('test-scene-root'), 'pointerDownCapture', {});
+    await fireEvent(target, 'focus', {});
+    expect(StyleSheet.flatten(outerRing.props.style).opacity).toBe(0);
+  });
+});
+
+it.each(cases)('preserves custom ring geometry for $name', async ({ element, role, name }) => {
+  jest.replaceProperty(Platform, 'OS', 'win32' as typeof Platform.OS);
+  const component = await render(element);
+  const target = component.getByRole(role);
+  const radius = name === 'Checkbox' ? defaultFlexTokens.borderRadius.base300 : StyleSheet.flatten(target.props.style).borderRadius;
+  const outer = component.getByTestId('focus-visual', { includeHiddenElements: true });
+  const inner = component.getByTestId('focus-visual-inner', { includeHiddenElements: true });
+  expect(StyleSheet.flatten(outer.props.style).borderRadius).toBe(radius);
+  expect(StyleSheet.flatten(inner.props.style).borderRadius).toBe(radius);
+});
+
+it.each(cases.filter(({ name }) => name !== 'Accordion'))('keeps disabled $name rings hidden', async ({ element, role }) => {
+  jest.replaceProperty(Platform, 'OS', 'win32' as typeof Platform.OS);
+  const component = await render(cloneElement(element, { disabled: true }));
+  const target = component.getByRole(role);
+  await fireEvent(component.getByTestId('test-scene-root'), 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+  await fireEvent(target, 'focus', {});
+  expect(target.props.focusable).toBe(false);
+  expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
+});
+
+describe.each(['windows', 'macos', 'win32'])('noninteractive focus targets on %s', (platform) => {
+  it.each([
+    { name: 'Card', element: <Card testID="noninteractive" /> },
+    { name: 'MenuItem', element: <MenuItem testID="noninteractive" menuStyle="section-header" /> },
+    { name: 'ListboxItem', element: <ListboxItem testID="noninteractive" variant="sectionHeader" /> },
+  ])('does not request a ring for $name', async ({ element }) => {
+    jest.replaceProperty(Platform, 'OS', platform as typeof Platform.OS);
+    const component = await render(element);
+    expect(component.getByTestId('noninteractive').props.enableFocusRing ?? false).toBe(false);
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
   });
 });
diff --git a/packages/agentic/components/src/common/focusVisualPolicy.ts b/packages/agentic/components/src/common/focusVisualPolicy.ts
deleted file mode 100644
index c754acfabe..0000000000
--- a/packages/agentic/components/src/common/focusVisualPolicy.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createFocusVisualProps_unstable } from '../primitives/focus-visual/focus-visual';
-import type { FocusVisualOptions, FocusVisualProps } from '../primitives/focus-visual/focus-visual.types';
-
-// Set to false and reload the app to compare the retained custom rings.
-export const focusVisualPolicy = {
-  useSystemFocusVisuals: true,
-};
-
-export function getNativeFocusVisualProps(): { enableFocusRing: boolean } {
-  return { enableFocusRing: focusVisualPolicy.useSystemFocusVisuals };
-}
-
-export function createFocusVisualProps(options: FocusVisualOptions): FocusVisualProps {
-  return createFocusVisualProps_unstable({
-    ...options,
-    visible: options.visible && !focusVisualPolicy.useSystemFocusVisuals,
-  });
-}
diff --git a/packages/agentic/components/src/common/useFocusVisuals.test.tsx b/packages/agentic/components/src/common/useFocusVisuals.test.tsx
new file mode 100644
index 0000000000..0363e2ec1a
--- /dev/null
+++ b/packages/agentic/components/src/common/useFocusVisuals.test.tsx
@@ -0,0 +1,138 @@
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import { Platform, StyleSheet, View } from 'react-native';
+
+import { fireEvent } from '@testing-library/react-native';
+import { FlexThemeReference, ThemedRoot, useThemeState } from '@fluentui-react-native/design';
+import type { ThemeState } from '@fluentui-react-native/design';
+
+import { applyFocusRingStyles } from './applyFocusRingStyles';
+import { render } from './renderWithTheme';
+import { useFocusVisuals } from './useFocusVisuals';
+import type { FocusVisualsOptions, FocusVisualsState } from './useFocusVisuals';
+
+function Probe({ seen, radius = 4, ...options }: FocusVisualsOptions & { seen: FocusVisualsState[]; radius?: number }) {
+  const theme = useThemeState();
+  const result = useFocusVisuals(options);
+  applyFocusRingStyles(result.FocusRing, theme, radius);
+  seen.push(result);
+  const { FocusRing, ...nativeProps } = result;
+  return (
+    <View {...nativeProps} testID="focus-target">
+      {FocusRing && <FocusRing />}
+    </View>
+  );
+}
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('useFocusVisuals', () => {
+  it.each([
+    ['windows', true],
+    ['macos', true],
+    ['win32', false],
+    ['ios', false],
+    ['android', false],
+    ['web', false],
+  ] as const)('defaults on %s to native=%s', async (platform, native) => {
+    jest.replaceProperty(Platform, 'OS', platform as typeof Platform.OS);
+    const seen: FocusVisualsState[] = [];
+    const component = await render(<Probe focused seen={seen} />);
+    expect(seen[0].enableFocusRing).toBe(native);
+    expect(Boolean(seen[0].FocusRing)).toBe(!native);
+    expect(Boolean(component.queryByTestId('focus-visual', { includeHiddenElements: true }))).toBe(!native);
+  });
+
+  it.each([true, false])('honors the explicit native-ring preference %s', async (useSystemFocusRing) => {
+    const seen: FocusVisualsState[] = [];
+    await render(<Probe focused seen={seen} useSystemFocusRing={useSystemFocusRing} />);
+    expect(seen[0].enableFocusRing).toBe(useSystemFocusRing);
+    expect(Boolean(seen[0].FocusRing)).toBe(!useSystemFocusRing);
+  });
+
+  it('queries the current root modality on renders without a local modality tracker', async () => {
+    const seen: FocusVisualsState[] = [];
+    const component = await render(<Probe focused={false} seen={seen} useSystemFocusRing={false} />);
+    const ring = component.getByTestId('focus-visual', { includeHiddenElements: true });
+    const slot = seen[0].FocusRing;
+    const count = seen.length;
+
+    await fireEvent(component.getByTestId('test-scene-root'), 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+    expect(seen).toHaveLength(count);
+    await component.rerender(<Probe focused seen={seen} useSystemFocusRing={false} />);
+    expect(StyleSheet.flatten(ring.props.style).opacity).toBeUndefined();
+
+    await fireEvent(component.getByTestId('test-scene-root'), 'pointerDownCapture', {});
+    await component.rerender(<Probe focused seen={seen} useSystemFocusRing={false} />);
+    expect(StyleSheet.flatten(ring.props.style).opacity).toBe(0);
+    expect(seen.every(({ FocusRing }) => FocusRing === slot)).toBe(true);
+    expect(component.getByTestId('focus-visual', { includeHiddenElements: true })).toBe(ring);
+  });
+
+  it('alwaysVisible uses a custom ring for pointer focus, but never forces unfocused visibility', async () => {
+    const seen: FocusVisualsState[] = [];
+    const component = await render(<Probe focused seen={seen} useSystemFocusRing alwaysVisible />);
+    const ring = component.getByTestId('focus-visual', { includeHiddenElements: true });
+    expect(seen[0].enableFocusRing).toBe(false);
+    expect(StyleSheet.flatten(ring.props.style).opacity).toBeUndefined();
+
+    await component.rerender(<Probe focused={false} seen={seen} useSystemFocusRing alwaysVisible />);
+    expect(seen[seen.length - 1].enableFocusRing).toBe(false);
+    expect(StyleSheet.flatten(ring.props.style).opacity).toBe(0);
+    expect(seen[seen.length - 1].FocusRing).toBe(seen[0].FocusRing);
+  });
+
+  it('switches optional-slot presence without violating hook order', async () => {
+    const seen: FocusVisualsState[] = [];
+    const component = await render(<Probe focused seen={seen} useSystemFocusRing />);
+    expect(seen[0].FocusRing).toBeUndefined();
+    await component.rerender(<Probe focused seen={seen} useSystemFocusRing={false} />);
+    expect(seen[seen.length - 1].FocusRing).toBeDefined();
+    await component.rerender(<Probe focused seen={seen} useSystemFocusRing />);
+    expect(seen[seen.length - 1].FocusRing).toBeUndefined();
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
+  });
+
+  it('applies theme colors and widths centrally, without caching instance radii or visibility', async () => {
+    const theme = new FlexThemeReference({
+      base: {
+        color: { strokeFocusInner: '#123456', strokeFocusOuter: '#abcdef' },
+        strokeWidth: { thin: 3, thick: 5 },
+      },
+    });
+    const seen: FocusVisualsState[] = [];
+    const element = (radius: number, focused: boolean) => (
+      <ThemedRoot theme={theme}>
+        <Probe focused={focused} seen={seen} radius={radius} useSystemFocusRing={false} alwaysVisible />
+      </ThemedRoot>
+    );
+    const component = await render(element(6, true));
+    const outer = component.getByTestId('focus-visual', { includeHiddenElements: true });
+    const inner = component.getByTestId('focus-visual-inner', { includeHiddenElements: true });
+    expect(StyleSheet.flatten(outer.props.style)).toMatchObject({ borderColor: '#abcdef', borderWidth: 5, borderRadius: 6 });
+    expect(StyleSheet.flatten(inner.props.style)).toMatchObject({ borderColor: '#123456', borderWidth: 3, borderRadius: 6 });
+
+    const createSheet = jest.spyOn(StyleSheet, 'create');
+    await component.rerender(element(12, false));
+    expect(createSheet).not.toHaveBeenCalled();
+    expect(StyleSheet.flatten(outer.props.style)).toMatchObject({ borderRadius: 12, opacity: 0 });
+    expect(StyleSheet.flatten(inner.props.style).borderRadius).toBe(12);
+  });
+
+  it('does not resolve custom styles when the optional slot is absent', () => {
+    const getTokens = jest.fn(() => {
+      throw new Error('Unexpected token access');
+    });
+    const theme: ThemeState = {
+      get tokens() {
+        return getTokens();
+      },
+      appearance: { colorScheme: 'light', contrast: 'standard', interfaceLevel: 'base' },
+      highContrast: false,
+      themeStyles: {},
+    };
+    applyFocusRingStyles(undefined, theme, 4);
+    expect(getTokens).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/agentic/components/src/common/useFocusVisuals.ts b/packages/agentic/components/src/common/useFocusVisuals.ts
new file mode 100644
index 0000000000..201aa322d4
--- /dev/null
+++ b/packages/agentic/components/src/common/useFocusVisuals.ts
@@ -0,0 +1,43 @@
+import { Platform } from 'react-native';
+
+import { useRootSettings } from '@fluentui-react-native/design';
+import { useOptionalSlot } from '@fluentui-react-native/framework-base';
+import type { ComponentState, OptionalSlot } from '@fluentui-react-native/framework-base';
+
+import { FocusVisual } from '../primitives/focus-visual/focus-visual';
+
+export interface FocusVisualsOptions {
+  focused: boolean;
+  /**
+   * Defaults to true on Windows/macOS and false on other platforms, including Win32.
+   */
+  useSystemFocusRing?: boolean;
+  /**
+   * Show the custom ring whenever focused, even for pointer focus. This takes
+   * precedence over the system-ring preference, but does not force focus.
+   */
+  alwaysVisible?: boolean;
+}
+
+export type FocusVisualsSlots = {
+  FocusRing: OptionalSlot<typeof FocusVisual>;
+};
+
+export type FocusVisualsState = ComponentState<FocusVisualsSlots> & {
+  enableFocusRing: boolean;
+};
+
+/**
+ * Chooses the native or custom focus visual. Apply custom ring geometry and
+ * theme colors in the styling phase with applyFocusRingStyles.
+ */
+export function useFocusVisuals({ focused, useSystemFocusRing, alwaysVisible = false }: FocusVisualsOptions): FocusVisualsState {
+  const settings = useRootSettings();
+  const enableFocusRing = !alwaysVisible && (useSystemFocusRing ?? (Platform.OS === 'windows' || Platform.OS === 'macos'));
+  const FocusRing = useOptionalSlot(
+    FocusVisual,
+    enableFocusRing ? null : { visible: focused && (alwaysVisible || settings.inputModality === 'keyboard') },
+  );
+
+  return { FocusRing, enableFocusRing };
+}
diff --git a/packages/agentic/components/src/common/useFocusVisuals.types.test.ts b/packages/agentic/components/src/common/useFocusVisuals.types.test.ts
new file mode 100644
index 0000000000..3fc9d072e0
--- /dev/null
+++ b/packages/agentic/components/src/common/useFocusVisuals.types.test.ts
@@ -0,0 +1,25 @@
+import { applyFocusRingStyles, useFocusVisuals } from '../index';
+import type { ButtonSlots, ButtonState, FocusVisualsOptions, FocusVisualsState } from '../index';
+
+const options: FocusVisualsOptions = { focused: true, useSystemFocusRing: false, alwaysVisible: true };
+
+function acceptsResolvedSlot(state: ButtonState, visuals: FocusVisualsState) {
+  state.FocusRing = visuals.FocusRing;
+  applyFocusRingStyles(state.FocusRing, state, 4);
+}
+
+// @ts-expect-error Focused state must be a boolean.
+const invalidOptions: FocusVisualsOptions = { focused: 'true' };
+// @ts-expect-error FocusRing is private state, not a public component slot.
+const invalidSlot: keyof ButtonSlots = 'FocusRing';
+
+describe('focus visual types', () => {
+  it('exports the hook and styling companion with private resolved slots', () => {
+    expect(useFocusVisuals).toEqual(expect.any(Function));
+    expect(applyFocusRingStyles).toEqual(expect.any(Function));
+    expect(acceptsResolvedSlot).toEqual(expect.any(Function));
+    expect(options.focused).toBe(true);
+    expect(invalidOptions.focused).toBe('true');
+    expect(invalidSlot).toBe('FocusRing');
+  });
+});
diff --git a/packages/agentic/components/src/components/AGENTS.md b/packages/agentic/components/src/components/AGENTS.md
index 31aef77f90..cd64321c72 100644
--- a/packages/agentic/components/src/components/AGENTS.md
+++ b/packages/agentic/components/src/components/AGENTS.md
@@ -46,9 +46,9 @@ audit.
 - Include the declared native root's `ref` in public props with `PropsWithRefOf<typeof Root>`. React 19.1.4 supplies
   `ref` as a prop, so pass it through the state hook to the root slot without `forwardRef`. If the component also needs
   an internal root ref, compose the refs through the slot render path rather than replacing the consumer ref.
-- Follow the [focus visual policy](#focus-visual-policy): request native focus visuals on all platforms
-  through the package-private policy, on the actual focus target only. Retain the mounted `FocusVisual`
-  fallback and its public exports. Do not introduce component-specific switches or `outline*` focus styling.
+- Follow the [focus visual policy](#focus-visual-policy): create the optional `FocusRing` in the state hook,
+  apply native settings only to the actual focus target, and style the custom ring in the styling phase.
+  Do not introduce component-specific modality trackers or `outline*` focus styling.
 - Keep render functions free of hooks, token reads, style creation, and slot mutation.
 - Export the resolved state type and the state, style-application, and render stages from the package root under
   component-qualified unstable names so another component can reuse the pipeline.
@@ -64,39 +64,34 @@ audit.
 ## Focus visual policy
 
 This is the shared native adaptation for Accordion, Button, Card, Checkbox, ListItem, ListboxItem, MenuItem,
-Radio, Switch, Tab, and Tag. It changes focus rendering, not public props, activation, selection, navigation,
-or accessibility semantics.
+Radio, Switch, Tab, and Tag. Activation, selection, navigation, and accessibility semantics are unchanged.
 
-- `common/focusVisualPolicy.ts` owns the single evaluation switch
-  `focusVisualPolicy.useSystemFocusVisuals`, defaulting to `true` on every platform. There is no platform
-  gate. Set the switch to `false` and reload to compare the retained custom rings; this is not a public API
-  or a per-instance option.
-- `getNativeFocusVisualProps` returns `{ enableFocusRing: focusVisualPolicy.useSystemFocusVisuals }`
-  on every platform. Apply it to the actual focus target: Accordion's header, Card's
-  interactive overlay, and the other components' pressable roots. Switch's outer label container and track
-  are not focus targets. Static cards, noninteractive section headers, and decorative children gain no
-  focus stop or focus feedback.
-- A shared wrapper around `createFocusVisualProps_unstable` suppresses custom-ring visibility while the
-  system path is selected, on every platform. The custom `FocusVisual` and its border-bearing children remain
-  eagerly mounted wherever they already render. Its tokens, geometry, style calculation, and public primitive
-  exports are retained without a visual redesign.
-- With the switch off, every platform receives `enableFocusRing={false}` and uses the existing custom
-  visibility calculation. The default replaces previous component-specific suppression of native rings,
-  including Button and Checkbox on non-Windows platforms.
-- Native focus rendering and appearance, including keyboard versus pointer behavior, are delegated to the
-  platform renderer. Enabling the prop does not guarantee a ring on a renderer that lacks support; the
-  custom path is not automatically re-enabled on such platforms. Existing custom-ring token bindings,
-  radii, and modality statements describe the retained path, not the system
-  ring. A synthetic `focused` override, such as Accordion's preview prop, does not force native focus or
-  force the OS to draw a ring. This adaptation makes no new modality or pixel-parity guarantees.
-- Input's focus underlines and borders, and other state styling unrelated to `FocusVisual`, are unchanged.
+- Call `useFocusVisuals` in `use<Component>_unstable` after resolving pressable focus. Pass `focused: false`
+  for disabled or noninteractive targets. Store its `FocusRing` as a private optional slot in component state.
+- The hook returns `{ FocusRing, enableFocusRing }`. Native rings default to enabled on Windows and macOS,
+  and disabled on Win32 and other platforms. `useSystemFocusRing` explicitly overrides that default.
+- `alwaysVisible` means visible whenever focused, including pointer focus, not visible while unfocused.
+  It takes precedence over the system-ring preference and uses the custom ring with `enableFocusRing: false`;
+  native focus-visibility heuristics cannot guarantee this override.
+- The custom slot reads the current modality through `useRootSettings` on each render. It shows only when
+  focused and the modality is keyboard, unless `alwaysVisible` is set. Programmatic focus follows the last
+  root modality. There is no local pointer tracker, subscription, or rerender caused solely by root settings.
+- The optional slot is absent on the native path. On the custom path, configured ring Views remain mounted
+  across focus/blur and visibility changes only opacity. Static cards and section headers render no ring.
+- Apply `enableFocusRing` only to Accordion's header, Card's interactive overlay, or the other components'
+  pressable roots. Switch's label container and track are not focus targets.
+- Keep `ThemeState` out of the behavioral hook. `applyFocusRingStyles` centrally binds the dual-ring
+  colors (`strokeFocusInner`/`strokeFocusOuter`) and widths (`thin`/`thick`) in a cached theme stylesheet.
+  Component style hooks supply the resolved radius. Functional component borders are separate.
+- Render `{state.FocusRing && <state.FocusRing />}` inside the actual focus target. Do not add public
+  component slots for this render-only structure. The standalone `FocusVisual` primitive and its exports remain.
+- Synthetic `focused` overrides do not move native focus. Input's focus underlines and other non-ring styles
+  are unchanged. Native ring appearance still depends on the renderer; no pixel-parity guarantee is made.
 
-The Windows native path requires React Native Windows 0.81.35 or newer. The accepted
-`native-system-focus-visuals` divergence changes the local platform adaptation, not the pinned Flex sources.
-The shared `common/focusVisualPolicy.test.tsx` matrix covers native props, retained ring mounts, focus/blur,
-and fallback behavior for all eleven consumers. Colocated tests retain geometry, accessibility, and
-disabled/noninteractive coverage. Native appearance and modality must still be evaluated in each renderer;
-the policy does not assert pixel parity or fix unrelated input behavior.
+The Windows native path requires React Native Windows 0.81.35 or newer. This re-review of the accepted
+`native-system-focus-visuals` adaptation follows the requested root-modality contract without changing pinned
+Flex source identities. The shared hook and component matrix cover platform defaults, overrides, modality,
+focus/blur, ring geometry, and disabled/noninteractive targets. Scenes require a `ThemedRoot`.
 
 ## Focused references
 
diff --git a/packages/agentic/components/src/components/accordion/SPEC.md b/packages/agentic/components/src/components/accordion/SPEC.md
index 1eae3734d9..003f2f8433 100644
--- a/packages/agentic/components/src/components/accordion/SPEC.md
+++ b/packages/agentic/components/src/components/accordion/SPEC.md
@@ -17,9 +17,9 @@ Accordion is a disclosure component with one pressable header and one body regio
 
 ## Public contract
 
-`layout` defaults to `chevronStart`; `size` is currently always `small`. Expansion is self-driving: `defaultExpanded` initializes uncontrolled state, `expanded` makes the value controlled, and `onExpandedChange` receives the requested next value in either mode. `focused` can force the retained custom focus visual for an instance; it does not force native focus or its system ring. The root accepts the owned `ViewProps` surface, including `style`, while the component owns its accessibility and focus behavior.
+`layout` defaults to `chevronStart`; `size` is currently always `small`. Expansion is self-driving: `defaultExpanded` initializes uncontrolled state, `expanded` makes the value controlled, and `onExpandedChange` receives the requested next value in either mode. `focused` overrides resolved focus for an instance, but does not bypass root modality or force native focus or its system ring. The root accepts the owned `ViewProps` surface, including `style`, while the component owns its accessibility and focus behavior.
 
-`root` is required. `title` and `leadingIcon` are optional public slots but render by default as “Section title” and a selected-circle icon; pass `null` to omit either. `bodyContent` is optional. The rendered root contains the header, then the body. Header children are always `FocusVisual`, followed by chevron, leading icon, and title for `chevronStart`; `chevronEnd` orders leading icon, title, then chevron. The body always exists and renders `bodyContent` or a text placeholder.
+`root` is required. `title` and `leadingIcon` are optional public slots but render by default as “Section title” and a selected-circle icon; pass `null` to omit either. `bodyContent` is optional. The rendered root contains the header, then the body. Header children begin with optional `FocusRing`, followed by chevron, leading icon, and title for `chevronStart`; `chevronEnd` orders leading icon, title, then chevron. The body always exists and renders `bodyContent` or a text placeholder.
 
 The resolved state retains the controlled/uncontrolled expansion result, pressable hover/press/focus state, layout, size, theme state, and user root style. User root style follows the structural root style. Header colors give pressed state priority over hovered state.
 
@@ -31,11 +31,26 @@ The resolved state retains the controlled/uncontrolled expansion result, pressab
 - **ACC-004:** Expose a labeled button header with expanded state and an accessibility relationship to the body; hide collapsed body descendants.
 - **ACC-005:** Keep grouping policy, body contents, and motion outside the component contract.
 
+## Focus visuals
+
+The state hook uses `useFocusVisuals` to create a private optional `FocusRing`.
+Windows and macOS request the system ring by default, without a custom subtree.
+Win32 and other platforms use the custom ring, visible only while focused and
+the scene's current input modality is keyboard. Programmatic focus follows the
+last root modality. Disabled and noninteractive targets never show custom feedback.
+
+The composition hook supports an explicit `useSystemFocusRing` override.
+`alwaysVisible` selects the custom path and bypasses modality while focused;
+it does not make an unfocused target visible or move native focus. Custom rings
+stay mounted across focus/blur. `applyFocusRingStyles` supplies shared theme
+colors and widths; component style hooks preserve their resolved radius.
+These hook options do not add new component props. Scenes require `ThemedRoot`.
+
 ## Platform behavior
 
 On Windows and macOS, the header is a React Native `Pressable` with button role. Its native keyboard and pointer activation request expansion; `Enter` and `Space` are handled by the platform pressable behavior. The header exposes `accessibilityState.expanded`, its `accessibilityControls` target is the generated body identifier, and caller-provided accessibility state is retained.
 
-The body remains mounted. Collapsing it sets height to zero, hides overflow, removes padding, and hides descendants from assistive technology; expanding restores visibility. The header requests native focus visuals on every platform under the shared policy; rendering depends on platform support. `FocusVisual` remains mounted inside it, hidden for that path and using resolved focus on the retained custom path. There is no group-level arrow navigation, focus transfer, or timed rotation/height animation.
+The body remains mounted. Collapsing it sets height to zero, hides overflow, removes padding, and hides descendants from assistive technology; expanding restores visibility. There is no group-level arrow navigation, focus transfer, or timed rotation/height animation.
 
 ## Divergences from Flex
 
diff --git a/packages/agentic/components/src/components/accordion/accordion.test.tsx b/packages/agentic/components/src/components/accordion/accordion.test.tsx
index 74d8f256b9..52496a9d45 100644
--- a/packages/agentic/components/src/components/accordion/accordion.test.tsx
+++ b/packages/agentic/components/src/components/accordion/accordion.test.tsx
@@ -98,15 +98,7 @@ describe('Accordion', () => {
     const component = await renderAccordion({ focused: true });
 
     expect(getHeader(component).props.enableFocusRing).toBe(true);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: '#000000',
-      borderWidth: 2,
-    });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: '#ffffff',
-      borderWidth: 1,
-    });
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
   });
 
   it('renders hover and pressed header feedback with the resolved foreground color', async () => {
@@ -138,18 +130,8 @@ describe('Accordion', () => {
     const startChildren = getHeader(start).children as { props: { testID?: string } }[];
     const endChildren = getHeader(end).children as { props: { testID?: string } }[];
 
-    expect(startChildren.map((child) => child.props.testID)).toEqual([
-      'focus-visual',
-      'accordion-chevron',
-      'accordion-leading-icon',
-      'accordion-title',
-    ]);
-    expect(endChildren.map((child) => child.props.testID)).toEqual([
-      'focus-visual',
-      'accordion-leading-icon',
-      'accordion-title',
-      'accordion-chevron',
-    ]);
+    expect(startChildren.map((child) => child.props.testID)).toEqual(['accordion-chevron', 'accordion-leading-icon', 'accordion-title']);
+    expect(endChildren.map((child) => child.props.testID)).toEqual(['accordion-leading-icon', 'accordion-title', 'accordion-chevron']);
   });
 
   it('renders custom title and body slots', async () => {
diff --git a/packages/agentic/components/src/components/accordion/accordion.types.ts b/packages/agentic/components/src/components/accordion/accordion.types.ts
index 839b45a290..fd1ba5be3b 100644
--- a/packages/agentic/components/src/components/accordion/accordion.types.ts
+++ b/packages/agentic/components/src/components/accordion/accordion.types.ts
@@ -10,7 +10,7 @@ import type {
 } from '@fluentui-react-native/framework-base';
 import type { ThemeState } from '@fluentui-react-native/design';
 import type { Icon } from '../../primitives/icon/icon';
-import type { FocusVisualProps } from '../../primitives/focus-visual/focus-visual.types';
+import type { FocusVisualsSlots } from '../../common/useFocusVisuals';
 import type { Text } from '../text/text';
 
 export type AccordionLayout = 'chevronStart' | 'chevronEnd';
@@ -93,12 +93,11 @@ export type AccordionRootProps = OwnedRootProps<
 
 export type AccordionProps = AccordionStateProps & ComponentProps<AccordionSlots, AccordionRootProps>;
 
-export type AccordionState = ComponentState<AccordionStateSlots> &
+export type AccordionState = ComponentState<AccordionStateSlots & FocusVisualsSlots> &
   Required<Pick<AccordionStateProps, 'layout' | 'size'>> &
   ThemeState &
   PressableState & {
     expanded: boolean;
-    focusVisualProps?: FocusVisualProps;
     focused: boolean;
     userStyle?: StyleProp<ViewStyle>;
   };
diff --git a/packages/agentic/components/src/components/accordion/renderAccordion.tsx b/packages/agentic/components/src/components/accordion/renderAccordion.tsx
index 4cefdbc556..8c49b777c3 100644
--- a/packages/agentic/components/src/components/accordion/renderAccordion.tsx
+++ b/packages/agentic/components/src/components/accordion/renderAccordion.tsx
@@ -2,7 +2,6 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, TextStyle } from 'react-native';
 
-import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import { Text } from '../text/text';
 import type { AccordionState } from './accordion.types';
 
@@ -29,7 +28,7 @@ export function renderAccordion_unstable(state: AccordionState, styles: Accordio
   return (
     <state.root>
       <Header>
-        <FocusVisual {...state.focusVisualProps} />
+        {state.FocusRing && <state.FocusRing />}
         {layout === 'chevronStart' ? (
           <>
             <ChevronContainer>
diff --git a/packages/agentic/components/src/components/accordion/spec/accessibility.md b/packages/agentic/components/src/components/accordion/spec/accessibility.md
index abd671726b..b299bd639c 100644
--- a/packages/agentic/components/src/components/accordion/spec/accessibility.md
+++ b/packages/agentic/components/src/components/accordion/spec/accessibility.md
@@ -4,4 +4,16 @@ The header is the only accessible control. It uses React Native button semantics
 
 The header associates with the generated body identifier through React Native `accessibilityControls`. The body is not itself accessible and is hidden from accessibility descendants while collapsed. Its content becomes available in reading order only while expanded. Decorative leading and chevron icons are inaccessible.
 
-On Windows, the header maps to a UI Automation button and reports expanded state. On macOS, it maps to an AX button with the same state. The header's focus feedback follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy). The retained `FocusVisual` has no accessible name and cannot intercept input.
+On Windows, the header maps to a UI Automation button and reports expanded state.
+
+On macOS, it maps to an AX button with the same state.
+
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
diff --git a/packages/agentic/components/src/components/accordion/spec/interaction.md b/packages/agentic/components/src/components/accordion/spec/interaction.md
index 8d0b13e4e2..c406e3c6ac 100644
--- a/packages/agentic/components/src/components/accordion/spec/interaction.md
+++ b/packages/agentic/components/src/components/accordion/spec/interaction.md
@@ -4,6 +4,14 @@ The header uses React Native press handling. Pointer, touch, `Enter`, and `Space
 
 Hover and pressed header feedback are resolved from pressable state, with pressed taking precedence. Focus is owned by the header; the body and its children manage their own focus once visible. The component does not implement sibling navigation, roving focus, or focus transfer after expansion.
 
-The header follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy): request native focus visuals on every platform by default, with the custom visual still mounted but hidden on that path. Rendering depends on platform support. The `focused` override can preview the custom visual, but does not force native focus or its system ring.
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
 
 The chevron rotates immediately and the body visibility styles change immediately. There is no component-owned motion or reduced-motion branch.
diff --git a/packages/agentic/components/src/components/accordion/spec/source.json b/packages/agentic/components/src/components/accordion/spec/source.json
index d9eee5a3c1..c2f08b8528 100644
--- a/packages/agentic/components/src/components/accordion/spec/source.json
+++ b/packages/agentic/components/src/components/accordion/spec/source.json
@@ -3,7 +3,7 @@
   "component": "accordion",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-11",
+  "reviewedAt": "2026-09-12",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/accordion/spec/tokens.yaml b/packages/agentic/components/src/components/accordion/spec/tokens.yaml
index e434cf2684..f5309e90e4 100644
--- a/packages/agentic/components/src/components/accordion/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/accordion/spec/tokens.yaml
@@ -53,7 +53,7 @@ bindings:
     leadingIcon: size160
     chevron: size160
     color: resolved header foreground
-  focusVisual:
+  FocusRing:
     innerColor: color.strokeFocusInner
     innerWidth: strokeWidth.thin
     outerColor: color.strokeFocusOuter
diff --git a/packages/agentic/components/src/components/accordion/spec/usage.md b/packages/agentic/components/src/components/accordion/spec/usage.md
index b6219f25ae..03d1c61599 100644
--- a/packages/agentic/components/src/components/accordion/spec/usage.md
+++ b/packages/agentic/components/src/components/accordion/spec/usage.md
@@ -5,3 +5,9 @@ Use Accordion for optional supporting details that a person can reveal on demand
 Use `defaultExpanded` for an independent section. Use `expanded` and `onExpandedChange` when a parent controls one-or-many-open behavior across several sections. Put arbitrary React Native content in `bodyContent`; Accordion does not constrain its layout or navigation.
 
 Choose one chevron layout within a related set for predictable scanning. Do not use Accordion as a navigation control, selected-state indicator, or a substitute for a static section that must always be read.
+
+## Scene root
+
+Render the scene inside `ThemedRoot` so focus policy can query `useRootSettings`.
+A nested theme boundary may override appearance without creating a separate
+input-modality tracker. Component test scenes use the shared themed renderer.
diff --git a/packages/agentic/components/src/components/accordion/useAccordion.ts b/packages/agentic/components/src/components/accordion/useAccordion.ts
index 42878bca17..deeec41e81 100644
--- a/packages/agentic/components/src/components/accordion/useAccordion.ts
+++ b/packages/agentic/components/src/components/accordion/useAccordion.ts
@@ -12,7 +12,7 @@ import {
 
 import { Icon } from '../../primitives/icon/icon';
 import { semanticIconSources } from '../../common/iconSources';
-import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
+import { useFocusVisuals } from '../../common/useFocusVisuals';
 import { Text } from '../text/text';
 import type { AccordionProps, AccordionState } from './accordion.types';
 
@@ -56,7 +56,6 @@ export function useAccordion_unstable(props: AccordionProps): AccordionState {
 
   const themeState = useThemeState();
   const [headerProps, pressableState] = usePressableState({
-    ...getNativeFocusVisualProps(),
     accessibilityControls: bodyId,
     accessibilityHint,
     accessibilityLabel,
@@ -72,6 +71,8 @@ export function useAccordion_unstable(props: AccordionProps): AccordionState {
     onPress: toggleExpanded,
   });
 
+  const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: focusedProp ?? pressableState.focused });
+
   const root = useSlot(View, {
     ...rootProps,
     accessible: false,
@@ -79,6 +80,7 @@ export function useAccordion_unstable(props: AccordionProps): AccordionState {
   });
   const header = useSlot(Pressable, {
     ...headerProps,
+    ...nativeFocusProps,
     testID: 'accordion-header',
   });
   const title = useOptionalSlot(Text, titleProp, {
@@ -119,6 +121,7 @@ export function useAccordion_unstable(props: AccordionProps): AccordionState {
   });
 
   return {
+    FocusRing,
     root,
     header,
     title,
diff --git a/packages/agentic/components/src/components/accordion/useAccordionStyles.ts b/packages/agentic/components/src/components/accordion/useAccordionStyles.ts
index 81b4cf8157..6d2e617c91 100644
--- a/packages/agentic/components/src/components/accordion/useAccordionStyles.ts
+++ b/packages/agentic/components/src/components/accordion/useAccordionStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps } from '../../common/focusVisualPolicy';
+import { applyFocusRingStyles } from '../../common/applyFocusRingStyles';
 
 import {
   accordionStyles,
@@ -51,14 +51,7 @@ export function useAccordionStyles_unstable(state: AccordionState) {
   ];
   const iconSize = getAccordionIconSize();
 
-  state.focusVisualProps = createFocusVisualProps({
-    borderRadius: headerLayoutStyle.borderRadius,
-    innerColor: state.tokens.color.strokeFocusInner,
-    innerWidth: state.tokens.strokeWidth.thin,
-    outerColor: state.tokens.color.strokeFocusOuter,
-    outerWidth: state.tokens.strokeWidth.thick,
-    visible: state.focused,
-  });
+  applyFocusRingStyles(state.FocusRing, state, headerLayoutStyle.borderRadius);
   attachSlotProps(state.root, { style: rootStyle });
   attachSlotProps(state.header, { style: headerStyle });
   if (state.title) {
diff --git a/packages/agentic/components/src/components/button/SPEC.md b/packages/agentic/components/src/components/button/SPEC.md
index 462c907c0a..9f31e1b52c 100644
--- a/packages/agentic/components/src/components/button/SPEC.md
+++ b/packages/agentic/components/src/components/button/SPEC.md
@@ -41,7 +41,7 @@ root styles.
 
 ### Slots and anatomy
 
-The render order is the persistent focus visual, the icon when positioned
+The render order is the optional `FocusRing`, the icon when positioned
 before, content, and the icon when positioned after.
 
 | Slot           | Required | Contract                                                          |
@@ -68,8 +68,23 @@ layout and requires an action-oriented `accessibilityLabel`.
   accessibility state when that prop is present, and reserve semibold label
   width to prevent toggle reflow.
 - **BTN-006:** Follow the [shared focus visual policy](../AGENTS.md#focus-visual-policy)
-  on the root: request native focus visuals on every platform, with the mounted dual-ring
-  `FocusVisual` retained for the custom path.
+  on the root: default to native rings on Windows/macOS and root-modality-aware
+  custom rings on Win32, retaining the same dual-ring geometry.
+
+## Focus visuals
+
+The state hook uses `useFocusVisuals` to create a private optional `FocusRing`.
+Windows and macOS request the system ring by default, without a custom subtree.
+Win32 and other platforms use the custom ring, visible only while focused and
+the scene's current input modality is keyboard. Programmatic focus follows the
+last root modality. Disabled and noninteractive targets never show custom feedback.
+
+The composition hook supports an explicit `useSystemFocusRing` override.
+`alwaysVisible` selects the custom path and bypasses modality while focused;
+it does not make an unfocused target visible or move native focus. Custom rings
+stay mounted across focus/blur. `applyFocusRingStyles` supplies shared theme
+colors and widths; component style hooks preserve their resolved radius.
+These hook options do not add new component props. Scenes require `ThemedRoot`.
 
 ## Platform behavior
 
@@ -77,11 +92,7 @@ Windows and macOS use React Native press, hover, and focus events. `Enter` and
 `Space` activation are supplied by the native `Pressable` button behavior.
 Disabled buttons are not focusable.
 
-The root requests native focus visuals on every platform under the shared policy.
-The dual-ring `FocusVisual` stays mounted but hidden on that path; its existing
-visibility behavior remains in the evaluation fallback on every platform.
-Native rendering depends on platform support. The contract adds no
-component-owned motion or native modality guarantee.
+Button adds no component-owned motion.
 
 ## Divergences from Flex
 
diff --git a/packages/agentic/components/src/components/button/button.test.tsx b/packages/agentic/components/src/components/button/button.test.tsx
index 77bb83db0d..936d73ce50 100644
--- a/packages/agentic/components/src/components/button/button.test.tsx
+++ b/packages/agentic/components/src/components/button/button.test.tsx
@@ -196,28 +196,20 @@ describe('Button', () => {
     const content = component.getByTestId('content');
     const icon = component.getByTestId('icon');
 
-    expect(root.children.slice(1)).toEqual([content, icon]);
+    expect(root.children).toEqual([content, icon]);
     expect(getRootStyle(component).backgroundColor).toBe('hotpink');
   });
 
-  it('uses native focus visuals while retaining the hidden custom rings', async () => {
+  it('uses native focus visuals without mounting custom rings', async () => {
     const component = await renderButton({ content: 'Focused' });
     const root = getRoot(component);
 
     expect(root.props.enableFocusRing).toBe(true);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
 
     await fireEvent(root, 'focus', {});
 
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: '#000000',
-      borderWidth: 2,
-    });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: '#ffffff',
-      borderWidth: 1,
-    });
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
   });
 
   it.each([
diff --git a/packages/agentic/components/src/components/button/button.types.ts b/packages/agentic/components/src/components/button/button.types.ts
index ebb1dc6cc2..e62777f0ed 100644
--- a/packages/agentic/components/src/components/button/button.types.ts
+++ b/packages/agentic/components/src/components/button/button.types.ts
@@ -10,7 +10,7 @@ import type {
 } from '@fluentui-react-native/framework-base';
 import type { ThemeState } from '@fluentui-react-native/design';
 import type { Icon } from '../../primitives/icon/icon';
-import type { FocusVisualProps } from '../../primitives/focus-visual/focus-visual.types';
+import type { FocusVisualsSlots } from '../../common/useFocusVisuals';
 import type { Text } from '../text/text';
 
 export type ButtonSlots = {
@@ -90,11 +90,10 @@ export type ButtonProps = ButtonStateProps & ComponentProps<ButtonSlots, ButtonE
 /**
  * The button state, returned from the useButton hook
  */
-export type ButtonState = ComponentState<ButtonStateSlots> &
+export type ButtonState = ComponentState<ButtonStateSlots & FocusVisualsSlots> &
   Required<ButtonStateProps> &
   Omit<ThemeState, 'appearance'> &
   PressableState & {
-    focusVisualProps?: FocusVisualProps;
     /**
      * Whether the button is displaying only an icon without text. This is set automatically when the button
      * has an icon and no content.
diff --git a/packages/agentic/components/src/components/button/renderButton.tsx b/packages/agentic/components/src/components/button/renderButton.tsx
index e964b652b9..b3f810a41e 100644
--- a/packages/agentic/components/src/components/button/renderButton.tsx
+++ b/packages/agentic/components/src/components/button/renderButton.tsx
@@ -1,6 +1,5 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import type { ButtonState } from './button.types';
-import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import { LayoutStableText } from '../../primitives/layout-stable-text/layout-stable-text';
 
 /**
@@ -21,7 +20,7 @@ export function renderButton_unstable(state: ButtonState) {
 
   return (
     <state.root>
-      <FocusVisual {...state.focusVisualProps} />
+      {state.FocusRing && <state.FocusRing />}
       {iconPosition === 'before' && ActiveIcon && <ActiveIcon />}
       {contentElement}
       {iconPosition === 'after' && ActiveIcon && <ActiveIcon />}
diff --git a/packages/agentic/components/src/components/button/spec/accessibility.md b/packages/agentic/components/src/components/button/spec/accessibility.md
index 27ec095cb7..fb16fed20b 100644
--- a/packages/agentic/components/src/components/button/spec/accessibility.md
+++ b/packages/agentic/components/src/components/button/spec/accessibility.md
@@ -29,8 +29,12 @@ Disabled buttons communicate unavailable state, do not activate, and are
 removed from keyboard focus. Toggle-style buttons remain one button and
 announce their checked state from the externally supplied `selected` value.
 
-The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-Every platform receives the native focus-ring request; rendering depends on
-platform support. The persistent shared `FocusVisual` stays mounted but hidden
-on that path. The retained custom path draws inner and outer rings from the
-existing focus stroke tokens.
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
diff --git a/packages/agentic/components/src/components/button/spec/interaction.md b/packages/agentic/components/src/components/button/spec/interaction.md
index c86c55757d..032a20f566 100644
--- a/packages/agentic/components/src/components/button/spec/interaction.md
+++ b/packages/agentic/components/src/components/button/spec/interaction.md
@@ -27,13 +27,18 @@ button.
 
 ## Focus and motion
 
-The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-Every platform delegates rendering and appearance to its native renderer and
-hides the custom visual. The custom
-visual and its border-bearing children stay in the tree for the lifetime of the
-button, preserving the existing visibility calculation on the retained path.
 Disabled buttons do not display focus feedback.
 
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
+
 Button currently performs no timed state animation. Hover, press, selection,
 and focus styles update immediately, so reduced-motion handling adds no
 separate branch.
diff --git a/packages/agentic/components/src/components/button/spec/source.json b/packages/agentic/components/src/components/button/spec/source.json
index a1e0ac3bf2..347a194c83 100644
--- a/packages/agentic/components/src/components/button/spec/source.json
+++ b/packages/agentic/components/src/components/button/spec/source.json
@@ -3,7 +3,7 @@
   "component": "button",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-11",
+  "reviewedAt": "2026-09-12",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/button/spec/tokens.yaml b/packages/agentic/components/src/components/button/spec/tokens.yaml
index b6f77bcf88..d9e8def76f 100644
--- a/packages/agentic/components/src/components/button/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/button/spec/tokens.yaml
@@ -125,7 +125,7 @@ bindings:
       width: size200
     color: resolved root foreground
 
-  focusVisual:
+  FocusRing:
     innerColor: color.strokeFocusInner
     innerWidth: strokeWidth.thin
     outerColor: color.strokeFocusOuter
diff --git a/packages/agentic/components/src/components/button/spec/usage.md b/packages/agentic/components/src/components/button/spec/usage.md
index 5b76cf37f3..183d554eac 100644
--- a/packages/agentic/components/src/components/button/spec/usage.md
+++ b/packages/agentic/components/src/components/button/spec/usage.md
@@ -43,3 +43,9 @@ contract is required for alignment with current Flex guidance.
 Content wraps when a consumer constrains the root. Supply a content-slot
 override only when a product deliberately needs a different truncation or
 text presentation policy.
+
+## Scene root
+
+Render the scene inside `ThemedRoot` so focus policy can query `useRootSettings`.
+A nested theme boundary may override appearance without creating a separate
+input-modality tracker. Component test scenes use the shared themed renderer.
diff --git a/packages/agentic/components/src/components/button/useButton.ts b/packages/agentic/components/src/components/button/useButton.ts
index 01026aefc7..fb0d787719 100644
--- a/packages/agentic/components/src/components/button/useButton.ts
+++ b/packages/agentic/components/src/components/button/useButton.ts
@@ -3,14 +3,10 @@ import { useAccessibilityLabelWarning, usePressableState, useSlot, useOptionalSl
 import { useThemeState } from '@fluentui-react-native/design';
 import { Pressable } from 'react-native';
 import type { PressableProps } from 'react-native';
-import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
+import { useFocusVisuals } from '../../common/useFocusVisuals';
 import { Icon } from '../../primitives/icon/icon';
 import { Text } from '../text/text';
 
-type NativeFocusPressableProps = PressableProps & {
-  enableFocusRing: boolean;
-};
-
 /**
  * Hook to create the state for a Button component. This is responsible for:
  * - resolving the prop states to their default values if unset
@@ -52,7 +48,7 @@ export function useButton_unstable(props: ButtonProps): ButtonState {
   });
 
   const themeState = useThemeState();
-  const nativeProps: NativeFocusPressableProps = {
+  const nativeProps: PressableProps = {
     ...rest,
     role: 'button',
     accessibilityState: {
@@ -62,17 +58,19 @@ export function useButton_unstable(props: ButtonProps): ButtonState {
     },
     accessible: rest.accessible ?? true,
     disabled,
-    ...getNativeFocusVisualProps(),
     focusable: rest.focusable ?? !disabled,
   };
   const [pressableProps, pressableState] = usePressableState(nativeProps);
-  const root = useSlot(Pressable, { ...pressableProps, ref: rootRef });
+  const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled });
+
+  const root = useSlot(Pressable, { ...pressableProps, ...nativeFocusProps, ref: rootRef });
   const icon = useOptionalSlot(Icon, iconProp);
   const selectedIcon = useOptionalSlot(Icon, selectedIconProp);
   const content = useOptionalSlot(Text, contentProp);
   const contentHidden = useOptionalSlot(Text, isToggleButton ? contentProp : null);
 
   return {
+    FocusRing,
     root,
     icon,
     selectedIcon,
diff --git a/packages/agentic/components/src/components/button/useButtonStyles.ts b/packages/agentic/components/src/components/button/useButtonStyles.ts
index 72a66ead40..3647d66056 100644
--- a/packages/agentic/components/src/components/button/useButtonStyles.ts
+++ b/packages/agentic/components/src/components/button/useButtonStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps } from '../../common/focusVisualPolicy';
+import { applyFocusRingStyles } from '../../common/applyFocusRingStyles';
 
 import { buttonStyles, getButtonColorStyles, getButtonContentStyle, getButtonIconSize, getButtonRootStyle } from './button.styles';
 import type { ButtonState } from './button.types';
@@ -18,14 +18,7 @@ export function useButtonStyles_unstable(state: ButtonState) {
   const contentStyle: StyleProp<TextStyle> = [buttonStyles.content, getButtonContentStyle(state), colors.foreground];
   const iconSize = getButtonIconSize(size);
 
-  state.focusVisualProps = createFocusVisualProps({
-    borderRadius: rootLayoutStyle.borderRadius,
-    innerColor: state.tokens.color.strokeFocusInner,
-    innerWidth: state.tokens.strokeWidth.thin,
-    outerColor: state.tokens.color.strokeFocusOuter,
-    outerWidth: state.tokens.strokeWidth.thick,
-    visible: state.focused && !state.disabled,
-  });
+  applyFocusRingStyles(state.FocusRing, state, rootLayoutStyle.borderRadius);
   attachSlotProps(state.root, { style: rootStyle });
   if (state.icon) {
     attachSlotProps(state.icon, {
diff --git a/packages/agentic/components/src/components/card/SPEC.md b/packages/agentic/components/src/components/card/SPEC.md
index d98809f8e7..d7357b1589 100644
--- a/packages/agentic/components/src/components/card/SPEC.md
+++ b/packages/agentic/components/src/components/card/SPEC.md
@@ -28,14 +28,29 @@ Providing `onPress` or `selected` enables the pressable overlay. The resolved st
 - **CRD-001:** Resolve the documented variants and default values, derive interactivity from `onPress` or the presence of `selected`, and collapse horizontal direction below the implementation width threshold.
 - **CRD-002:** Render the overlay and public slots in the layout-specific order without injecting a content schema.
 - **CRD-003:** Apply root, nested-content, interaction, and user-style layers from the verified FURN bindings, with focus feedback following the [shared focus visual policy](../AGENTS.md#focus-visual-policy).
-- **CRD-004:** Keep static cards non-focusable by default and expose interactive cards as disabled-aware pressable buttons; the overlay, not the structural root, owns the native focus-ring request and retained custom focus visual on every platform.
+- **CRD-004:** Keep static cards non-focusable by default and expose interactive cards as disabled-aware pressable buttons; the overlay, not the structural root, owns the native focus-ring request and optional custom focus slot.
 - **CRD-005:** Preserve externally owned selection and keep nested slot controls independently usable.
 
+## Focus visuals
+
+The state hook uses `useFocusVisuals` to create a private optional `FocusRing`.
+Windows and macOS request the system ring by default, without a custom subtree.
+Win32 and other platforms use the custom ring, visible only while focused and
+the scene's current input modality is keyboard. Programmatic focus follows the
+last root modality. Disabled and noninteractive targets never show custom feedback.
+
+The composition hook supports an explicit `useSystemFocusRing` override.
+`alwaysVisible` selects the custom path and bypasses modality while focused;
+it does not make an unfocused target visible or move native focus. Custom rings
+stay mounted across focus/blur. `applyFocusRingStyles` supplies shared theme
+colors and widths; component style hooks preserve their resolved radius.
+These hook options do not add new component props. Scenes require `ThemedRoot`.
+
 ## Platform behavior
 
 Static cards use a non-focusable `View`. A caller can explicitly make a static root accessible; then it uses React Native group role and preserves its label and accessibility state. Interactive cards hide the structural root from accessibility and expose an absolute-fill React Native `Pressable` overlay with button role, disabled state, optional selected state, and `FocusVisual`.
 
-The overlay requests native focus visuals on every platform under the shared policy; rendering depends on platform support. Its custom `FocusVisual` remains mounted but hidden on that path; static cards gain neither a ring nor a focus stop.
+Static cards gain neither a ring nor a focus stop.
 
 On Windows and macOS, interactive overlays respond to native pointer, touch, `Enter`, and `Space` press behavior. The overlay is disabled and unfocusable when `disabled`; nested controls remain rendered as sibling content and keep their own press behavior. Windows maps the overlay to a UI Automation button; macOS maps it to an AX button. The component does not navigate, manage a card collection, or animate state changes.
 
diff --git a/packages/agentic/components/src/components/card/card.test.tsx b/packages/agentic/components/src/components/card/card.test.tsx
index a0d8498655..6e55fc37ca 100644
--- a/packages/agentic/components/src/components/card/card.test.tsx
+++ b/packages/agentic/components/src/components/card/card.test.tsx
@@ -116,15 +116,7 @@ describe('Card', () => {
 
     await fireEvent(button, 'focus', {});
     expect(button.props.enableFocusRing).toBe(true);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: colors.strokeFocusOuter,
-      borderWidth: 2,
-    });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: colors.strokeFocusInner,
-      borderWidth: 1,
-    });
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
   });
 
   it('keeps nested footer buttons independent from the card surface', async () => {
diff --git a/packages/agentic/components/src/components/card/card.types.ts b/packages/agentic/components/src/components/card/card.types.ts
index 01d44494d9..a21f6c038c 100644
--- a/packages/agentic/components/src/components/card/card.types.ts
+++ b/packages/agentic/components/src/components/card/card.types.ts
@@ -9,7 +9,7 @@ import type {
   Slot,
 } from '@fluentui-react-native/framework-base';
 import type { ThemeState } from '@fluentui-react-native/design';
-import type { FocusVisualProps } from '../../primitives/focus-visual/focus-visual.types';
+import type { FocusVisualsSlots } from '../../common/useFocusVisuals';
 
 export type CardSize = 'small' | 'large';
 export type CardPadding = 'default' | 'none';
@@ -47,10 +47,9 @@ export type CardExposedPressableProps = OwnedRootProps<PressableProps, 'accessib
 
 export type CardProps = CardStateProps & ComponentProps<CardSlots, CardExposedPressableProps>;
 
-export type CardState = ComponentState<CardStateSlots> &
+export type CardState = ComponentState<CardStateSlots & FocusVisualsSlots> &
   Required<CardStateProps> &
   ThemeState & {
-    focusVisualProps?: FocusVisualProps;
     hovered: boolean;
     pressed: boolean;
     focused: boolean;
diff --git a/packages/agentic/components/src/components/card/renderCard.tsx b/packages/agentic/components/src/components/card/renderCard.tsx
index 1c5cef3391..b0f54648ce 100644
--- a/packages/agentic/components/src/components/card/renderCard.tsx
+++ b/packages/agentic/components/src/components/card/renderCard.tsx
@@ -1,5 +1,4 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
-import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import type { CardState } from './card.types';
 
 /**
@@ -11,11 +10,7 @@ export function renderCard_unstable(state: CardState) {
 
   return (
     <state.root>
-      {state.overlay && (
-        <state.overlay>
-          <FocusVisual {...state.focusVisualProps} />
-        </state.overlay>
-      )}
+      {state.overlay && <state.overlay>{state.FocusRing && <state.FocusRing />}</state.overlay>}
       {shouldRenderSlots && state.header && <state.header />}
       <state.content />
       {shouldRenderNestedContent && state.content02 && <state.content02 />}
diff --git a/packages/agentic/components/src/components/card/spec/accessibility.md b/packages/agentic/components/src/components/card/spec/accessibility.md
index afeac50ae3..7a65750fec 100644
--- a/packages/agentic/components/src/components/card/spec/accessibility.md
+++ b/packages/agentic/components/src/components/card/spec/accessibility.md
@@ -4,4 +4,16 @@ A static Card is inaccessible by default so its slot contents remain the accessi
 
 An interactive Card exposes its overlay as a React Native button. The overlay reports `accessibilityState.disabled`; when `selected` was supplied, it also reports `accessibilityState.selected`. The structural root is hidden from accessibility in this mode. Card does not synthesize a name from header or content, so supply `accessibilityLabel` or a supported label reference for an interactive card.
 
-The overlay's focus feedback follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy); the persistent `FocusVisual` remains decorative and is hidden on the system path on every platform. Native rendering depends on platform support. On Windows, the interactive overlay maps to a UI Automation button; on macOS, it maps to an AX button. Nested controls supplied through slots are separate controls and must have their own names and semantics.
+On Windows, the interactive overlay maps to a UI Automation button; on macOS, it maps to an AX button.
+
+Nested controls supplied through slots are separate controls and must have their own names and semantics.
+
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
diff --git a/packages/agentic/components/src/components/card/spec/interaction.md b/packages/agentic/components/src/components/card/spec/interaction.md
index dc17e61821..16fe9d5f84 100644
--- a/packages/agentic/components/src/components/card/spec/interaction.md
+++ b/packages/agentic/components/src/components/card/spec/interaction.md
@@ -4,4 +4,18 @@ A Card becomes interactive when `onPress` is provided or when `selected` is pres
 
 Selection is externally owned. A press reports through `onPress` but never changes `selected`; the caller updates that prop if its collection behavior requires it. Selected cards use the supplied value for visual and accessibility state.
 
-The overlay owns hover, pressed, and focus feedback. It does not trap focus, move focus, or manage collection navigation. The overlay, not the structural root, follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy). `FocusVisual` remains mounted while an overlay exists, hidden on the system path on every platform and retaining its focused, enabled visibility calculation on the custom path. Card provides no timed animation or reduced-motion branch.
+The overlay owns hover, pressed, and focus feedback.
+
+It does not trap focus, move focus, or manage collection navigation.
+
+Card provides no timed animation or reduced-motion branch.
+
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
diff --git a/packages/agentic/components/src/components/card/spec/source.json b/packages/agentic/components/src/components/card/spec/source.json
index 64994af370..d50678cfca 100644
--- a/packages/agentic/components/src/components/card/spec/source.json
+++ b/packages/agentic/components/src/components/card/spec/source.json
@@ -3,7 +3,7 @@
   "component": "card",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-11",
+  "reviewedAt": "2026-09-12",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/card/spec/tokens.yaml b/packages/agentic/components/src/components/card/spec/tokens.yaml
index 2f6db586ea..2ddeb7d69b 100644
--- a/packages/agentic/components/src/components/card/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/card/spec/tokens.yaml
@@ -49,7 +49,7 @@ bindings:
     radius:
       small: borderRadius.base600
       large: borderRadius.base700
-  focusVisual:
+  FocusRing:
     innerColor: color.strokeFocusInner
     innerWidth: strokeWidth.thin
     outerColor: color.strokeFocusOuter
diff --git a/packages/agentic/components/src/components/card/spec/usage.md b/packages/agentic/components/src/components/card/spec/usage.md
index 109646dd06..2a57773533 100644
--- a/packages/agentic/components/src/components/card/spec/usage.md
+++ b/packages/agentic/components/src/components/card/spec/usage.md
@@ -5,3 +5,9 @@ Use Card for a repeatable unit of related React Native content, such as a report
 Add `onPress` only when the complete card has one clear button-like action. Label that interactive action. A card with several independent actions should remain static and expose those actions from its slots. If a selectable collection owns its selection, pass each card its `selected` value and update it from `onPress`.
 
 Use horizontal direction only where the parent can accommodate its responsive stack below 480 layout units. Card neither supplies navigation behavior nor turns a press into a destination.
+
+## Scene root
+
+Render the scene inside `ThemedRoot` so focus policy can query `useRootSettings`.
+A nested theme boundary may override appearance without creating a separate
+input-modality tracker. Component test scenes use the shared themed renderer.
diff --git a/packages/agentic/components/src/components/card/useCard.ts b/packages/agentic/components/src/components/card/useCard.ts
index ddd2a8773f..0217489e67 100644
--- a/packages/agentic/components/src/components/card/useCard.ts
+++ b/packages/agentic/components/src/components/card/useCard.ts
@@ -3,7 +3,7 @@ import type { PressableProps } from 'react-native';
 
 import { type PropsWithRefOf, usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
-import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
+import { useFocusVisuals } from '../../common/useFocusVisuals';
 
 import type { CardProps, CardState } from './card.types';
 
@@ -58,7 +58,6 @@ export function useCard_unstable(props: CardProps): CardState {
 
   const [overlayProps, pressableState] = usePressableState({
     ...rest,
-    ...getNativeFocusVisualProps(),
     accessibilityHint,
     accessibilityLabel,
     accessibilityLabelledBy,
@@ -86,6 +85,8 @@ export function useCard_unstable(props: CardProps): CardState {
     unstable_pressDelay,
   } as PressableProps);
 
+  const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled && isInteractive });
+
   const rootProps: PropsWithRefOf<typeof View> = isInteractive
     ? ({ ...rest, accessible: false, accessibilityState: { ...accessibilityState, disabled }, ref: rootRef, testID } as PropsWithRefOf<
         typeof View
@@ -106,13 +107,14 @@ export function useCard_unstable(props: CardProps): CardState {
       } as PropsWithRefOf<typeof View>);
 
   const root = useSlot(View, rootProps);
-  const overlay = useOptionalSlot(Pressable, isInteractive ? overlayProps : null);
+  const overlay = useOptionalSlot(Pressable, isInteractive ? { ...overlayProps, ...nativeFocusProps } : null);
   const header = useOptionalSlot(View, headerProp);
   const content = useSlot(View, contentProp);
   const content02 = useOptionalSlot(View, content02Prop);
   const footer = useOptionalSlot(View, footerProp);
 
   return {
+    FocusRing: isInteractive ? FocusRing : undefined,
     root,
     overlay,
     header,
diff --git a/packages/agentic/components/src/components/card/useCardStyles.ts b/packages/agentic/components/src/components/card/useCardStyles.ts
index 51c9e6eb64..e49091d247 100644
--- a/packages/agentic/components/src/components/card/useCardStyles.ts
+++ b/packages/agentic/components/src/components/card/useCardStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps } from '../../common/focusVisualPolicy';
+import { applyFocusRingStyles } from '../../common/applyFocusRingStyles';
 
 import { cardStyles, getCardNestedBlockStyle, getCardOverlayStyle, getCardRootStyle, getCardSurfaceColors } from './card.styles';
 import type { CardState } from './card.types';
@@ -14,14 +14,7 @@ export function useCardStyles_unstable(state: CardState) {
   const rootStyle: StyleProp<ViewStyle> = [cardStyles.root, getCardRootStyle(state), colors, state.userStyle];
   const overlayStyle = getCardOverlayStyle(state);
 
-  state.focusVisualProps = createFocusVisualProps({
-    borderRadius: overlayStyle.borderRadius,
-    innerColor: state.tokens.color.strokeFocusInner,
-    innerWidth: state.tokens.strokeWidth.thin,
-    outerColor: state.tokens.color.strokeFocusOuter,
-    outerWidth: state.tokens.strokeWidth.thick,
-    visible: state.focused && !state.disabled,
-  });
+  applyFocusRingStyles(state.FocusRing, state, overlayStyle.borderRadius);
   attachSlotProps(state.root, { style: rootStyle });
 
   if (state.overlay) {
diff --git a/packages/agentic/components/src/components/checkbox/SPEC.md b/packages/agentic/components/src/components/checkbox/SPEC.md
index 8ab8eeb9fb..027aab8435 100644
--- a/packages/agentic/components/src/components/checkbox/SPEC.md
+++ b/packages/agentic/components/src/components/checkbox/SPEC.md
@@ -51,13 +51,13 @@ its resolved role and state afterward, so those caller values are ignored.
 `root` is the only public slot surface. The label, secondary text, indicator,
 and focus visual are internal and are configured through the props above.
 
-The render order inside the root is the persistent focus visual, the indicator,
+The render order inside the root is the optional `FocusRing`, the indicator,
 and then the label column when either text node is present. The label column
 renders the label first and secondary text second.
 
 | Element        | Rendered when                          | Contract                                                                                                                                             |
 | -------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Focus visual   | always mounted                         | A retained dual-ring overlay; hidden on the system path on every platform, otherwise its visibility, not mounting, tracks focus.                     |
+| Focus visual   | custom path only                       | A private optional `FocusRing`; mounted while the custom path is selected and visible only for focused keyboard input.                               |
 | Indicator      | always                                 | A fixed 16 by 16 box carrying fill, stroke, and radius. It draws a checkmark for `checked`, a dash for `indeterminate`, and nothing for `unchecked`. |
 | Label column   | `showLabel`, or secondary text renders | A non-accessible column that holds the visible text nodes.                                                                                           |
 | Label          | `showLabel`                            | Wraps rather than truncates when the root width is constrained.                                                                                      |
@@ -81,8 +81,23 @@ renders the label first and secondary text second.
   colors from status first and then disabled, pressed, and hovered state, select
   the indicator radius from `variant`, and apply the caller `style` last.
 - **CBX-006:** Follow the [shared focus visual policy](../AGENTS.md#focus-visual-policy)
-  on the root, retaining the mounted dual-ring visual and its existing modality
-  behavior for the custom path.
+  on the root, using root modality for the custom path while retaining the
+  same dual-ring geometry.
+
+## Focus visuals
+
+The state hook uses `useFocusVisuals` to create a private optional `FocusRing`.
+Windows and macOS request the system ring by default, without a custom subtree.
+Win32 and other platforms use the custom ring, visible only while focused and
+the scene's current input modality is keyboard. Programmatic focus follows the
+last root modality. Disabled and noninteractive targets never show custom feedback.
+
+The composition hook supports an explicit `useSystemFocusRing` override.
+`alwaysVisible` selects the custom path and bypasses modality while focused;
+it does not make an unfocused target visible or move native focus. Custom rings
+stay mounted across focus/blur. `applyFocusRingStyles` supplies shared theme
+colors and widths; component style hooks preserve their resolved radius.
+These hook options do not add new component props. Scenes require `ThemedRoot`.
 
 ## Platform behavior
 
@@ -92,13 +107,6 @@ platforms; Checkbox adds no key handling of its own and does not intercept Tab.
 A disabled Checkbox sets `focusable` to `false` and is skipped by keyboard
 navigation.
 
-Every platform receives the native focus-ring request on the root and suppresses
-the retained custom overlay under the shared policy. Native rendering and keyboard
-versus pointer appearance depend on the platform renderer. On the custom path,
-pointer focus hides the overlay and keyboard
-or programmatic focus shows it as before. The overlay and its border-bearing
-children remain mounted for the lifetime of the control.
-
 No timed animation is present. Status, hover, press, and focus styling change on
 the next render, so reduced-motion settings need no separate branch.
 
@@ -110,8 +118,8 @@ the next render, so reduced-motion settings need no separate branch.
 | ---------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
 | `checkbox-secondary-text-description`    | Accepted    | Secondary text is appended to the root accessibility hint rather than associated as a separate described-by target. React Native exposes no equivalent description relationship, and the hint is the platform-idiomatic channel. | None. Revisit only if React Native adds a description association.                                |
 | `checkbox-secondary-text-requires-label` | Accepted    | Secondary text renders only alongside a visible label, and a development warning fires otherwise. Flex treats the two visibility toggles as independent.                                                                         | None. The pairing keeps the label column from presenting supporting text with nothing to support. |
-| `checkbox-focus-visual-modality`         | Resolved    | The retained custom path uses the shared focus-modality hook. Native appearance is delegated to each renderer and is not a new modality guarantee.                                                                               | Preserve existing custom-path interaction coverage.                                               |
-| `checkbox-native-focus-ring`             | Accepted    | Every platform enables the native ring prop and hides the custom overlay by default; the evaluation fallback reverses that choice. A native ring is not guaranteed on unsupported renderers.                                     | Validate root props and ring suppression under the shared focus policy.                           |
+| `checkbox-focus-visual-modality`         | Resolved    | Custom visibility follows keyboard modality from the scene root rather than a component-local pointer tracker. Native appearance remains renderer-owned.                                                                         | Preserve the shared hook and component modality matrix.                                           |
+| `checkbox-native-focus-ring`             | Accepted    | Native rings default to Windows/macOS; Win32 uses the root-modality-aware custom slot.                                                                                                                                           | Validate platform defaults and custom slot behavior under the shared focus policy.                |
 | `checkbox-owned-props-type-surface`      | Deferred    | The root type accepts role and checked or disabled state values that the implementation always overwrites.                                                                                                                       | Omit those owned keys from the exposed native-prop type in a separately reviewed API correction.  |
 
 ## Conformance
diff --git a/packages/agentic/components/src/components/checkbox/checkbox.test.tsx b/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
index 294d15c296..046c971ab1 100644
--- a/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
+++ b/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
@@ -170,30 +170,19 @@ describe('Checkbox', () => {
     expect(StyleSheet.flatten(component.getByTestId('checkbox-label').props.style).color).toBe(colors.pressed.foregroundNeutralSecondary);
   });
 
-  it('uses native focus visuals while retaining the hidden custom rings', async () => {
-    const colors = defaultFlexTokens.color;
+  it('uses native focus visuals without mounting custom rings', async () => {
     const component = await renderCheckbox({ label: 'Focused' });
     const root = getRoot(component);
 
     expect(root.props.enableFocusRing).toBe(true);
     await fireEvent(root, 'pressIn', {});
     await fireEvent(root, 'focus', {});
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
-      opacity: 0,
-    });
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
 
     await fireEvent(root, 'blur', {});
     await fireEvent(root, 'focus', {});
 
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: colors.strokeFocusOuter,
-      borderWidth: 2,
-    });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: colors.strokeFocusInner,
-      borderWidth: 1,
-    });
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
   });
 
   it.each([
diff --git a/packages/agentic/components/src/components/checkbox/checkbox.types.ts b/packages/agentic/components/src/components/checkbox/checkbox.types.ts
index 89f474bb0d..a75420958c 100644
--- a/packages/agentic/components/src/components/checkbox/checkbox.types.ts
+++ b/packages/agentic/components/src/components/checkbox/checkbox.types.ts
@@ -9,7 +9,7 @@ import type {
   PressableState,
 } from '@fluentui-react-native/framework-base';
 import type { ThemeState } from '@fluentui-react-native/design';
-import type { FocusVisualProps } from '../../primitives/focus-visual/focus-visual.types';
+import type { FocusVisualsSlots } from '../../common/useFocusVisuals';
 import type { Text } from '../text/text';
 
 export type CheckboxVariant = 'standard' | 'circular';
@@ -58,12 +58,10 @@ export type CheckboxRootProps = OwnedRootProps<PropsWithRefOf<typeof Pressable>>
 
 export type CheckboxProps = CheckboxStateProps & ComponentProps<CheckboxSlots, CheckboxRootProps>;
 
-export type CheckboxState = ComponentState<CheckboxStateSlots> &
+export type CheckboxState = ComponentState<CheckboxStateSlots & FocusVisualsSlots> &
   Required<Omit<CheckboxStateProps, CheckboxStatusDriverKeys>> &
   ThemeState &
   PressableState & {
-    focusVisualProps?: FocusVisualProps;
-    focusVisible: boolean;
     indicatorIconColor?: ColorValue;
     indicatorIconSize: number;
     indicatorStyle: StyleProp<ViewStyle>;
diff --git a/packages/agentic/components/src/components/checkbox/renderCheckbox.tsx b/packages/agentic/components/src/components/checkbox/renderCheckbox.tsx
index dfb147ed75..b30d7cc415 100644
--- a/packages/agentic/components/src/components/checkbox/renderCheckbox.tsx
+++ b/packages/agentic/components/src/components/checkbox/renderCheckbox.tsx
@@ -2,7 +2,6 @@
 import { View } from 'react-native';
 
 import { CheckboxIndicator } from '../../primitives/checkbox-indicator/checkbox-indicator';
-import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import type { CheckboxState } from './checkbox.types';
 
 export function renderCheckbox_unstable(state: CheckboxState) {
@@ -10,7 +9,7 @@ export function renderCheckbox_unstable(state: CheckboxState) {
 
   return (
     <state.root>
-      <FocusVisual {...state.focusVisualProps} />
+      {state.FocusRing && <state.FocusRing />}
       <CheckboxIndicator
         iconColor={state.indicatorIconColor}
         iconSize={state.indicatorIconSize}
diff --git a/packages/agentic/components/src/components/checkbox/spec/accessibility.md b/packages/agentic/components/src/components/checkbox/spec/accessibility.md
index bfd457db15..b2a6c08e26 100644
--- a/packages/agentic/components/src/components/checkbox/spec/accessibility.md
+++ b/packages/agentic/components/src/components/checkbox/spec/accessibility.md
@@ -41,13 +41,14 @@ A disabled Checkbox reports disabled state, sets `focusable={false}`, and does
 not respond to activation. It is skipped by keyboard navigation rather than
 announced as an unavailable stop.
 
-The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-Every platform receives the native focus-ring request on the whole row's press
-target and leaves the custom overlay mounted but hidden. Rendering support and
-keyboard versus pointer appearance are delegated to each platform renderer.
-
-On the retained custom path, the dual-ring overlay uses the existing focus
-stroke tokens and surrounds the whole row, including the label column. It is
-hidden while disabled or while focus came from a pointer press; keyboard and
-programmatic focus show it as before. The overlay remains hidden from the
-accessibility tree and does not receive pointer events.
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
+
+The custom dual-ring visual surrounds the whole row, including the label column.
diff --git a/packages/agentic/components/src/components/checkbox/spec/interaction.md b/packages/agentic/components/src/components/checkbox/spec/interaction.md
index bb66aa5b72..ef44108112 100644
--- a/packages/agentic/components/src/components/checkbox/spec/interaction.md
+++ b/packages/agentic/components/src/components/checkbox/spec/interaction.md
@@ -35,16 +35,15 @@ so neither `onStatusChange` nor the caller `onPress` runs.
 
 ## Focus and motion
 
-The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-Every platform receives the native focus-ring request, with rendering support
-and appearance delegated to its renderer. The custom
-visual and its border-bearing children stay mounted but hidden on that path.
-
-The retained custom path keeps its existing focused, enabled visibility
-calculation. Pointer press state suppresses that visual when the press moves
-focus; a keyboard event restores focus-visible state, and programmatic focus is
-treated as focus-visible when no pointer interaction preceded it. These are
-custom-path semantics, not guarantees about native rings.
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
 
 Checkbox runs no timed animation. Status, hover, press, and focus styling
 change on the next render, so reduced-motion settings need no separate path.
diff --git a/packages/agentic/components/src/components/checkbox/spec/source.json b/packages/agentic/components/src/components/checkbox/spec/source.json
index cead11b0ad..6303d13f6b 100644
--- a/packages/agentic/components/src/components/checkbox/spec/source.json
+++ b/packages/agentic/components/src/components/checkbox/spec/source.json
@@ -3,7 +3,7 @@
   "component": "checkbox",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-11",
+  "reviewedAt": "2026-09-12",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/checkbox/spec/tokens.yaml b/packages/agentic/components/src/components/checkbox/spec/tokens.yaml
index 033ace0a60..92401fb009 100644
--- a/packages/agentic/components/src/components/checkbox/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/checkbox/spec/tokens.yaml
@@ -107,7 +107,7 @@ bindings:
       indeterminate: color.foregroundNeutralSecondary
       disabled: color.foregroundNeutralDisabled
 
-  focusVisual:
+  FocusRing:
     implementation: useCheckboxStyles.ts
     borderRadius: borderRadius.base300
     innerColor: color.strokeFocusInner
diff --git a/packages/agentic/components/src/components/checkbox/spec/usage.md b/packages/agentic/components/src/components/checkbox/spec/usage.md
index 62745bccf0..61d6c9bb22 100644
--- a/packages/agentic/components/src/components/checkbox/spec/usage.md
+++ b/packages/agentic/components/src/components/checkbox/spec/usage.md
@@ -49,3 +49,9 @@ than in this text.
 
 Both text nodes wrap when a consumer constrains the root width. Constrain the
 root through `style` rather than truncating the text.
+
+## Scene root
+
+Render the scene inside `ThemedRoot` so focus policy can query `useRootSettings`.
+A nested theme boundary may override appearance without creating a separate
+input-modality tracker. Component test scenes use the shared themed renderer.
diff --git a/packages/agentic/components/src/components/checkbox/useCheckbox.ts b/packages/agentic/components/src/components/checkbox/useCheckbox.ts
index b6dd789e53..8295993005 100644
--- a/packages/agentic/components/src/components/checkbox/useCheckbox.ts
+++ b/packages/agentic/components/src/components/checkbox/useCheckbox.ts
@@ -2,17 +2,13 @@ import * as React from 'react';
 import { Pressable } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-import { useControllableValue, useFocusVisible, usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
+import { useControllableValue, usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
-import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
+import { useFocusVisuals } from '../../common/useFocusVisuals';
 
 import { Text } from '../text/text';
 import type { CheckboxProps, CheckboxState, CheckboxStatus } from './checkbox.types';
 
-type NativeFocusPressableProps = React.ComponentProps<typeof Pressable> & {
-  enableFocusRing: boolean;
-};
-
 function getNextStatus(status: CheckboxStatus): CheckboxStatus {
   return status === 'checked' ? 'unchecked' : 'checked';
 }
@@ -66,7 +62,7 @@ export function useCheckbox_unstable(props: CheckboxProps): CheckboxState {
   const rootAccessibilityLabel = accessibilityLabel ?? label;
   const rootAccessibilityHint = renderSecondaryText ? [accessibilityHint, secondaryText].filter(Boolean).join('. ') : accessibilityHint;
 
-  const nativeProps: NativeFocusPressableProps = {
+  const nativeProps: React.ComponentProps<typeof Pressable> = {
     ...rest,
     accessibilityHint: rootAccessibilityHint,
     accessibilityLabel: rootAccessibilityLabel,
@@ -78,14 +74,14 @@ export function useCheckbox_unstable(props: CheckboxProps): CheckboxState {
     },
     accessible: rest.accessible ?? true,
     disabled,
-    ...getNativeFocusVisualProps(),
     focusable: rest.focusable ?? !disabled,
     onPress: handlePress,
   };
-  const [focusVisibleProps, focusVisible] = useFocusVisible(nativeProps);
-  const [pressableProps, pressableState] = usePressableState(focusVisibleProps);
+  const [pressableProps, pressableState] = usePressableState(nativeProps);
+
+  const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled });
 
-  const root = useSlot(Pressable, { ...pressableProps, ref: rootRef });
+  const root = useSlot(Pressable, { ...pressableProps, ...nativeFocusProps, ref: rootRef });
   const labelText = useOptionalSlot(Text, showLabel ? { accessible: false, children: label, testID: 'checkbox-label' } : null);
   const secondaryTextSlot = useOptionalSlot(
     Text,
@@ -95,10 +91,10 @@ export function useCheckbox_unstable(props: CheckboxProps): CheckboxState {
   );
 
   return {
+    FocusRing,
     ...themeState,
     ...pressableState,
     disabled,
-    focusVisible,
     label,
     labelText,
     renderSecondaryText,
diff --git a/packages/agentic/components/src/components/checkbox/useCheckboxStyles.ts b/packages/agentic/components/src/components/checkbox/useCheckboxStyles.ts
index 9b4e5bec56..9305dcaea6 100644
--- a/packages/agentic/components/src/components/checkbox/useCheckboxStyles.ts
+++ b/packages/agentic/components/src/components/checkbox/useCheckboxStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps } from '../../common/focusVisualPolicy';
+import { applyFocusRingStyles } from '../../common/applyFocusRingStyles';
 
 import {
   checkboxStyles,
@@ -30,14 +30,7 @@ export function useCheckboxStyles_unstable(state: CheckboxState) {
   const labelStyle: StyleProp<TextStyle> = [checkboxStyles.labelText, textThemeStyles.label, labelColors];
   const secondaryTextStyle: StyleProp<TextStyle> = [checkboxStyles.secondaryText, textThemeStyles.secondaryText, secondaryTextColors];
 
-  state.focusVisualProps = createFocusVisualProps({
-    borderRadius: state.tokens.borderRadius.base300,
-    innerColor: state.tokens.color.strokeFocusInner,
-    innerWidth: state.tokens.strokeWidth.thin,
-    outerColor: state.tokens.color.strokeFocusOuter,
-    outerWidth: state.tokens.strokeWidth.thick,
-    visible: state.focusVisible && !state.disabled,
-  });
+  applyFocusRingStyles(state.FocusRing, state, state.tokens.borderRadius.base300);
   attachSlotProps(state.root, { style: rootStyle });
   state.indicatorStyle = indicatorStyle;
   state.labelContainerStyle = labelContainerStyle;
diff --git a/packages/agentic/components/src/components/list-item/SPEC.md b/packages/agentic/components/src/components/list-item/SPEC.md
index a9b7e22292..50a3014ab0 100644
--- a/packages/agentic/components/src/components/list-item/SPEC.md
+++ b/packages/agentic/components/src/components/list-item/SPEC.md
@@ -28,7 +28,7 @@ props; its caller style is applied last.
 The public slots are `root`, required `content`, and optional
 `secondaryContent`, `icon`, `selectedIcon`, `avatar`, and `trailing`.
 `selectionIndicator` and the hidden content reservation are state-only slots.
-The rendered root contains the persistent FocusVisual, the selection glyph,
+The rendered root contains the optional `FocusRing`, the selection glyph,
 then CompoundItemLayout. The layout renders avatar before the active icon,
 the layout-stable content, optional secondary content, and optional trailing
 content. A selected `selectedIcon` replaces `icon`; avatar takes precedence
@@ -53,16 +53,28 @@ semibold content width and show the selected fill.
 - **LIT-005:** Size and secondary-content-position mappings preserve the
   documented React Native layout behavior.
 
+## Focus visuals
+
+The state hook uses `useFocusVisuals` to create a private optional `FocusRing`.
+Windows and macOS request the system ring by default, without a custom subtree.
+Win32 and other platforms use the custom ring, visible only while focused and
+the scene's current input modality is keyboard. Programmatic focus follows the
+last root modality. Disabled and noninteractive targets never show custom feedback.
+
+The composition hook supports an explicit `useSystemFocusRing` override.
+`alwaysVisible` selects the custom path and bypasses modality while focused;
+it does not make an unfocused target visible or move native focus. Custom rings
+stay mounted across focus/blur. `applyFocusRingStyles` supplies shared theme
+colors and widths; component style hooks preserve their resolved radius.
+These hook options do not add new component props. Scenes require `ThemedRoot`.
+
 ## Platform behavior
 
 On Windows and macOS, the root is a React Native `Pressable`, defaulting to
 the `button` accessibility role. It merges a caller's accessibility state with
 `disabled` and `selected`, is accessible by default, and is focusable unless
 disabled. Native press, pointer hover, and focus events drive the resolved
-state. The root requests native focus visuals on every platform under the shared
-policy; rendering depends on platform support.
-The dual-ring FocusVisual remains mounted, hidden on that path and retaining
-its enabled-focus visibility behavior on the custom path.
+state.
 
 There is no internal keyboard roving, list position announcement, virtualized
 item metadata, or selection change handling. A surrounding list may provide
diff --git a/packages/agentic/components/src/components/list-item/list-item.test.tsx b/packages/agentic/components/src/components/list-item/list-item.test.tsx
index 0c317f7acb..acf2d9199b 100644
--- a/packages/agentic/components/src/components/list-item/list-item.test.tsx
+++ b/packages/agentic/components/src/components/list-item/list-item.test.tsx
@@ -173,23 +173,14 @@ describe('ListItem', () => {
     },
   );
 
-  it('uses native focus visuals while retaining the hidden custom rings', async () => {
-    const colors = defaultFlexTokens.color;
+  it('uses native focus visuals without mounting custom rings', async () => {
     const component = await renderListItem({ content: 'Focused' });
     const root = getRoot(component);
 
     await fireEvent(root, 'focus', {});
     expect(root.props.enableFocusRing).toBe(true);
 
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: colors.strokeFocusOuter,
-      borderWidth: 2,
-    });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: colors.strokeFocusInner,
-      borderWidth: 1,
-    });
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
   });
 
   it('preserves user accessibility state values', async () => {
diff --git a/packages/agentic/components/src/components/list-item/list-item.types.ts b/packages/agentic/components/src/components/list-item/list-item.types.ts
index 32ef006b5b..e97576eb0f 100644
--- a/packages/agentic/components/src/components/list-item/list-item.types.ts
+++ b/packages/agentic/components/src/components/list-item/list-item.types.ts
@@ -12,7 +12,7 @@ import type {
 } from '@fluentui-react-native/framework-base';
 
 import type { Icon } from '../../primitives/icon/icon';
-import type { FocusVisualProps } from '../../primitives/focus-visual/focus-visual.types';
+import type { FocusVisualsSlots } from '../../common/useFocusVisuals';
 import type { ItemSecondaryContentPosition } from '../../common/item.types';
 import type { Text } from '../text/text';
 
@@ -64,11 +64,10 @@ export type ListItemMetrics = {
   iconSize: number;
 };
 
-export type ListItemState = ComponentState<ListItemStateSlots> &
+export type ListItemState = ComponentState<ListItemStateSlots & FocusVisualsSlots> &
   Required<ListItemStateProps> &
   ThemeState &
   PressableState & {
-    focusVisualProps?: FocusVisualProps;
     metrics: ListItemMetrics;
     selectedFill: boolean;
     selectionGlyph?: string;
diff --git a/packages/agentic/components/src/components/list-item/renderListItem.tsx b/packages/agentic/components/src/components/list-item/renderListItem.tsx
index 983340ffc8..7024bc2589 100644
--- a/packages/agentic/components/src/components/list-item/renderListItem.tsx
+++ b/packages/agentic/components/src/components/list-item/renderListItem.tsx
@@ -2,7 +2,6 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import { CompoundItemLayout } from '../../primitives/compound-item-layout/compound-item-layout';
-import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import { LayoutStableText } from '../../primitives/layout-stable-text/layout-stable-text';
 import { listItemStyles } from './list-item.styles';
 import type { ListItemState } from './list-item.types';
@@ -21,7 +20,7 @@ export function renderListItem_unstable(state: ListItemState) {
 
   return (
     <state.root>
-      <FocusVisual {...state.focusVisualProps} />
+      {state.FocusRing && <state.FocusRing />}
       {state.selectionIndicator && <state.selectionIndicator />}
       <CompoundItemLayout
         contentStyle={state.secondaryContentPosition === 'under' ? { gap: state.metrics.contentGap } : undefined}
diff --git a/packages/agentic/components/src/components/list-item/spec/accessibility.md b/packages/agentic/components/src/components/list-item/spec/accessibility.md
index 641982915a..94f237fc32 100644
--- a/packages/agentic/components/src/components/list-item/spec/accessibility.md
+++ b/packages/agentic/components/src/components/list-item/spec/accessibility.md
@@ -11,8 +11,15 @@ those visual affordances. On Windows this exposes the root through UIA; on
 macOS it exposes the root through AX with the resolved role, name, selected
 state, and disabled state.
 
-The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy),
-requesting native feedback on every platform and retaining the mounted custom
-FocusVisual. Native rendering depends on platform support.
 Callers that change the root role or embed the row in a collection own
 any additional container semantics and position information.
+
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
diff --git a/packages/agentic/components/src/components/list-item/spec/interaction.md b/packages/agentic/components/src/components/list-item/spec/interaction.md
index 4caa710022..3d1a4ce6df 100644
--- a/packages/agentic/components/src/components/list-item/spec/interaction.md
+++ b/packages/agentic/components/src/components/list-item/spec/interaction.md
@@ -11,7 +11,15 @@ its peers. Windows and macOS native Pressable behavior supplies keyboard
 activation for a focusable root. This component does not implement arrow-key
 movement, Home/End, type-ahead, focus restoration, or timed animation.
 
-The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-FocusVisual stays mounted, hidden on the system path on every platform and retaining its
-enabled-focus visibility calculation on the custom path. Hover, press, and
+Hover, press, and
 selection styling update without component-owned motion.
+
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
diff --git a/packages/agentic/components/src/components/list-item/spec/source.json b/packages/agentic/components/src/components/list-item/spec/source.json
index d787e48710..e1ac2f6174 100644
--- a/packages/agentic/components/src/components/list-item/spec/source.json
+++ b/packages/agentic/components/src/components/list-item/spec/source.json
@@ -3,7 +3,7 @@
   "component": "list-item",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-11",
+  "reviewedAt": "2026-09-12",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/list-item/spec/tokens.yaml b/packages/agentic/components/src/components/list-item/spec/tokens.yaml
index ae2613c150..85dbb28eef 100644
--- a/packages/agentic/components/src/components/list-item/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/list-item/spec/tokens.yaml
@@ -51,7 +51,7 @@ bindings:
       small: global.size200
       medium: global.size320
       large: global.size400
-  focusVisual:
+  FocusRing:
     outer: [color.strokeFocusOuter, strokeWidth.thick]
     inner: [color.strokeFocusInner, strokeWidth.thin]
 
diff --git a/packages/agentic/components/src/components/list-item/spec/usage.md b/packages/agentic/components/src/components/list-item/spec/usage.md
index 80098d0dfc..a97a2b6746 100644
--- a/packages/agentic/components/src/components/list-item/spec/usage.md
+++ b/packages/agentic/components/src/components/list-item/spec/usage.md
@@ -19,3 +19,9 @@ Use `secondaryContentPosition="under"` when supporting text needs its own
 line. Supply `selectedIcon` only when the selected presentation needs a
 replacement icon. Use `trailing` for noninteractive display content; this
 component does not isolate nested actions from the root press.
+
+## Scene root
+
+Render the scene inside `ThemedRoot` so focus policy can query `useRootSettings`.
+A nested theme boundary may override appearance without creating a separate
+input-modality tracker. Component test scenes use the shared themed renderer.
diff --git a/packages/agentic/components/src/components/list-item/useListItem.ts b/packages/agentic/components/src/components/list-item/useListItem.ts
index 6b60519c68..43471e790e 100644
--- a/packages/agentic/components/src/components/list-item/useListItem.ts
+++ b/packages/agentic/components/src/components/list-item/useListItem.ts
@@ -5,7 +5,7 @@ import { useOptionalSlot, usePressableState, useSlot } from '@fluentui-react-nat
 
 import { Icon } from '../../primitives/icon/icon';
 import { hideSlotProps } from '../../common/accessibility';
-import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
+import { useFocusVisuals } from '../../common/useFocusVisuals';
 import { Text } from '../text/text';
 
 import { getListItemAvatarSize, getListItemIconSize, getListItemSelectionIndicatorGlyph } from './list-item.styles';
@@ -86,7 +86,6 @@ export function useListItem_unstable(props: ListItemProps): ListItemState {
 
   const [pressableProps, pressableState] = usePressableState({
     ...rest,
-    ...getNativeFocusVisualProps(),
     accessibilityRole: rest.accessibilityRole ?? 'button',
     accessibilityState: {
       ...accessibilityState,
@@ -98,7 +97,9 @@ export function useListItem_unstable(props: ListItemProps): ListItemState {
     focusable: rest.focusable ?? !disabled,
   });
 
-  const root = useSlot(Pressable, { ...pressableProps, ref: rootRef });
+  const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled });
+
+  const root = useSlot(Pressable, { ...pressableProps, ...nativeFocusProps, ref: rootRef });
   const content = useSlot(NativeText, contentProp);
   const contentHidden = useSlot(NativeText, contentProp);
   const secondaryContent = useOptionalSlot(Text, secondaryContentProp);
@@ -109,6 +110,7 @@ export function useListItem_unstable(props: ListItemProps): ListItemState {
   const selectionIndicator = useOptionalSlot(NativeText, selectionGlyph, { transform: hideSlotProps });
 
   return {
+    FocusRing,
     root,
     content,
     contentHidden,
diff --git a/packages/agentic/components/src/components/list-item/useListItemStyles.ts b/packages/agentic/components/src/components/list-item/useListItemStyles.ts
index 7ace5489c5..0ac8489090 100644
--- a/packages/agentic/components/src/components/list-item/useListItemStyles.ts
+++ b/packages/agentic/components/src/components/list-item/useListItemStyles.ts
@@ -3,7 +3,7 @@ import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
 
 import { hiddenFromAccessibilityProps } from '../../common/accessibility';
-import { createFocusVisualProps } from '../../common/focusVisualPolicy';
+import { applyFocusRingStyles } from '../../common/applyFocusRingStyles';
 import {
   getListItemBackgroundStyle,
   getListItemContentStyle,
@@ -55,14 +55,7 @@ export function useListItemStyles_unstable(state: ListItemState) {
     },
   ];
 
-  state.focusVisualProps = createFocusVisualProps({
-    borderRadius: rootSizeStyle.borderRadius,
-    innerColor: state.tokens.color.strokeFocusInner,
-    innerWidth: state.tokens.strokeWidth.thin,
-    outerColor: state.tokens.color.strokeFocusOuter,
-    outerWidth: state.tokens.strokeWidth.thick,
-    visible: state.focused && !state.disabled,
-  });
+  applyFocusRingStyles(state.FocusRing, state, rootSizeStyle.borderRadius);
   attachSlotProps(state.root, { style: rootStyle });
   attachSlotProps(state.content, { style: contentStyle });
   attachSlotProps(state.contentHidden, {
diff --git a/packages/agentic/components/src/components/listbox-item/SPEC.md b/packages/agentic/components/src/components/listbox-item/SPEC.md
index 207474f8fe..7f79cdbf2f 100644
--- a/packages/agentic/components/src/components/listbox-item/SPEC.md
+++ b/packages/agentic/components/src/components/listbox-item/SPEC.md
@@ -29,7 +29,7 @@ styles.
 
 `root`, `content`, `secondaryContent`, `icon`, `selectedIcon`, and `avatar`
 are public slots. The header root, selection indicators, and hidden label are
-private state slots. A list item renders FocusVisual then CompoundItemLayout:
+private state slots. A list item renders optional `FocusRing` then CompoundItemLayout:
 avatar or the active icon, layout-stable primary content, secondary content,
 and trailing chevron, checkmark, then checkbox indicator. A selected icon
 replaces the normal icon. The header instead renders its content or, when
@@ -53,6 +53,21 @@ semibold label reservation, while its internal indicator reflects `selected`.
 - **LBI-005:** Expose the native accessibility role and state appropriate to
   the resolved variant.
 
+## Focus visuals
+
+The state hook uses `useFocusVisuals` to create a private optional `FocusRing`.
+Windows and macOS request the system ring by default, without a custom subtree.
+Win32 and other platforms use the custom ring, visible only while focused and
+the scene's current input modality is keyboard. Programmatic focus follows the
+last root modality. Disabled and noninteractive targets never show custom feedback.
+
+The composition hook supports an explicit `useSystemFocusRing` override.
+`alwaysVisible` selects the custom path and bypasses modality while focused;
+it does not make an unfocused target visible or move native focus. Custom rings
+stay mounted across focus/blur. `applyFocusRingStyles` supplies shared theme
+colors and widths; component style hooks preserve their resolved radius.
+These hook options do not add new component props. Scenes require `ThemedRoot`.
+
 ## Platform behavior
 
 On Windows and macOS, a list item is an accessible React Native `Pressable`
@@ -62,10 +77,7 @@ A section header is exposed through a nonfocusable React Native `View` with
 the `header` role. The internal leading and trailing visuals are inaccessible.
 
 Pointer hover, press, and focus events flow through `usePressableState`.
-The list-item root requests native focus visuals on every platform under the
-shared policy; rendering depends on platform support.
-FocusVisual stays mounted in that structure, hidden on the system path and
-retaining its enabled-focus visibility behavior on the custom path. Section
+Section
 headers gain no ring or focus stop. No code here moves between options, processes
 collection keys, opens submenus, or closes an owning popup.
 
diff --git a/packages/agentic/components/src/components/listbox-item/listbox-item.test.tsx b/packages/agentic/components/src/components/listbox-item/listbox-item.test.tsx
index bd5afae5ad..fb48fe9d6c 100644
--- a/packages/agentic/components/src/components/listbox-item/listbox-item.test.tsx
+++ b/packages/agentic/components/src/components/listbox-item/listbox-item.test.tsx
@@ -96,15 +96,7 @@ describe('ListboxItem', () => {
 
     await fireEvent(root, 'focus', {});
     expect(root.props.enableFocusRing).toBe(true);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: defaultFlexTokens.color.strokeFocusOuter,
-      borderWidth: defaultFlexTokens.strokeWidth.thick,
-    });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: defaultFlexTokens.color.strokeFocusInner,
-      borderWidth: defaultFlexTokens.strokeWidth.thin,
-    });
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
     expect(StyleSheet.flatten(root.props.style)).not.toMatchObject({
       outlineColor: defaultFlexTokens.color.strokeFocusOuter,
       outlineStyle: 'solid',
diff --git a/packages/agentic/components/src/components/listbox-item/listbox-item.types.ts b/packages/agentic/components/src/components/listbox-item/listbox-item.types.ts
index 9d90e1043d..0838034c99 100644
--- a/packages/agentic/components/src/components/listbox-item/listbox-item.types.ts
+++ b/packages/agentic/components/src/components/listbox-item/listbox-item.types.ts
@@ -14,7 +14,7 @@ import type { ThemeState } from '@fluentui-react-native/design';
 
 import type { Icon } from '../../primitives/icon/icon';
 import type { CheckboxIndicator } from '../../primitives/checkbox-indicator/checkbox-indicator';
-import type { FocusVisualProps } from '../../primitives/focus-visual/focus-visual.types';
+import type { FocusVisualsSlots } from '../../common/useFocusVisuals';
 import type { ItemSecondaryContentPosition } from '../../common/item.types';
 import type { Text } from '../text/text';
 
@@ -57,10 +57,9 @@ export type ListboxItemRootProps = OwnedRootProps<PropsWithRefOf<typeof Pressabl
 
 export type ListboxItemProps = ListboxItemStateProps & ComponentProps<ListboxItemSlots, ListboxItemRootProps>;
 
-export type ListboxItemState = ComponentState<ListboxItemStateSlots> &
+export type ListboxItemState = ComponentState<ListboxItemStateSlots & FocusVisualsSlots> &
   Required<ListboxItemStateProps> &
   ThemeState &
   PressableState & {
-    focusVisualProps?: FocusVisualProps;
     userStyle?: StyleProp<ViewStyle>;
   };
diff --git a/packages/agentic/components/src/components/listbox-item/renderListboxItem.tsx b/packages/agentic/components/src/components/listbox-item/renderListboxItem.tsx
index 05bf721e0d..1ea68f3cd7 100644
--- a/packages/agentic/components/src/components/listbox-item/renderListboxItem.tsx
+++ b/packages/agentic/components/src/components/listbox-item/renderListboxItem.tsx
@@ -2,7 +2,6 @@
 import { View } from 'react-native';
 
 import { CompoundItemLayout } from '../../primitives/compound-item-layout/compound-item-layout';
-import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import { LayoutStableText } from '../../primitives/layout-stable-text/layout-stable-text';
 import { Skeleton } from '../skeleton/skeleton';
 import { getListboxItemIconSize, listboxItemStyles } from './listbox-item.styles';
@@ -49,7 +48,7 @@ export function renderListboxItem_unstable(state: ListboxItemState) {
 
   return (
     <state.root>
-      <FocusVisual {...state.focusVisualProps} />
+      {state.FocusRing && <state.FocusRing />}
       <CompoundItemLayout
         contentStyle={state.secondaryContentPosition === 'under' ? listboxItemStyles.contentColumn : listboxItemStyles.contentRow}
         leading={state.avatar ? <state.avatar /> : ActiveIcon ? <ActiveIcon /> : undefined}
diff --git a/packages/agentic/components/src/components/listbox-item/spec/accessibility.md b/packages/agentic/components/src/components/listbox-item/spec/accessibility.md
index 1405d5db17..f17ed8eab8 100644
--- a/packages/agentic/components/src/components/listbox-item/spec/accessibility.md
+++ b/packages/agentic/components/src/components/listbox-item/spec/accessibility.md
@@ -12,8 +12,15 @@ checkmark, and the multiselect visual are inaccessible presentation, so the
 root is announced once. Windows exposes the resolved root through UIA and
 macOS through AX.
 
-The option root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy),
-requesting native feedback on every platform and retaining the mounted custom
-FocusVisual. Native rendering depends on platform support.
 Consumers own the containing collection's name, position, selection
 rules, and any focus restoration policy.
+
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
diff --git a/packages/agentic/components/src/components/listbox-item/spec/interaction.md b/packages/agentic/components/src/components/listbox-item/spec/interaction.md
index c1b954c861..116360f596 100644
--- a/packages/agentic/components/src/components/listbox-item/spec/interaction.md
+++ b/packages/agentic/components/src/components/listbox-item/spec/interaction.md
@@ -7,11 +7,20 @@ pressing an option does not update `selected`; an owning list or popup must
 provide a new prop value.
 
 The component renders hover and press feedback from its resolved native state.
-Its root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-FocusVisual remains mounted, hidden on the system path on every platform and retaining
-its enabled-focus visibility calculation on the custom path. Section headers
+
+Section headers
 are noninteractive and gain no ring even when `loading` is false.
 
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
+
 Windows and macOS provide platform keyboard activation for the focusable
 Pressable. Arrow navigation, Home/End, type-ahead, submenu control, dismissal,
 and focus return are outside this component. No timed animation is implemented.
diff --git a/packages/agentic/components/src/components/listbox-item/spec/source.json b/packages/agentic/components/src/components/listbox-item/spec/source.json
index 34cae7de5c..253561eed6 100644
--- a/packages/agentic/components/src/components/listbox-item/spec/source.json
+++ b/packages/agentic/components/src/components/listbox-item/spec/source.json
@@ -3,7 +3,7 @@
   "component": "listbox-item",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-11",
+  "reviewedAt": "2026-09-12",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/listbox-item/spec/tokens.yaml b/packages/agentic/components/src/components/listbox-item/spec/tokens.yaml
index 99b36b98f1..a7e286f917 100644
--- a/packages/agentic/components/src/components/listbox-item/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/listbox-item/spec/tokens.yaml
@@ -42,7 +42,7 @@ bindings:
       selectedBackground: color.backgroundBrandHeavy
       selectedForeground: color.foregroundNeutralOnloud
       unselectedBorder: color.foregroundNeutralSecondary
-  focusVisual:
+  FocusRing:
     outer: [color.strokeFocusOuter, strokeWidth.thick]
     inner: [color.strokeFocusInner, strokeWidth.thin]
 
diff --git a/packages/agentic/components/src/components/listbox-item/spec/usage.md b/packages/agentic/components/src/components/listbox-item/spec/usage.md
index ef901823b6..9a6b81fe75 100644
--- a/packages/agentic/components/src/components/listbox-item/spec/usage.md
+++ b/packages/agentic/components/src/components/listbox-item/spec/usage.md
@@ -12,3 +12,9 @@ single-choice visual or `multiselect` for its checkbox-like visual, but do not
 use both. Select `under` secondary content when the description needs a second
 line; use `right` for compact metadata. A chevron is visual only—the owner
 must perform any nested-navigation action.
+
+## Scene root
+
+Render the scene inside `ThemedRoot` so focus policy can query `useRootSettings`.
+A nested theme boundary may override appearance without creating a separate
+input-modality tracker. Component test scenes use the shared themed renderer.
diff --git a/packages/agentic/components/src/components/listbox-item/useListboxItem.ts b/packages/agentic/components/src/components/listbox-item/useListboxItem.ts
index 7012b5e2b0..9c60cd9ffa 100644
--- a/packages/agentic/components/src/components/listbox-item/useListboxItem.ts
+++ b/packages/agentic/components/src/components/listbox-item/useListboxItem.ts
@@ -5,7 +5,7 @@ import { usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-nat
 import { useThemeState } from '@fluentui-react-native/design';
 
 import { semanticIconSources } from '../../common/iconSources';
-import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
+import { useFocusVisuals } from '../../common/useFocusVisuals';
 import { CheckboxIndicator } from '../../primitives/checkbox-indicator/checkbox-indicator';
 import { Icon } from '../../primitives/icon/icon';
 import { Text } from '../text/text';
@@ -64,7 +64,6 @@ export function useListboxItem_unstable(props: ListboxItemProps): ListboxItemSta
 
   const [rootProps, pressableState] = usePressableState({
     ...rest,
-    ...getNativeFocusVisualProps(),
     accessibilityRole: isListItem ? 'button' : 'header',
     accessibilityState: rootAccessibilityState,
     accessible: rest.accessible ?? true,
@@ -74,13 +73,16 @@ export function useListboxItem_unstable(props: ListboxItemProps): ListboxItemSta
 
   const { onBlur, onFocus, onHoverIn, onHoverOut, onLongPress, onPress, onPressIn, onPressOut, ...headerRest } = rootProps;
   const headerProps: ViewProps = headerRest as unknown as ViewProps;
-  const root = useSlot(Pressable, { ...rootProps, ref: rootRef });
+  const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled && isListItem });
+
+  const root = useSlot(Pressable, { ...rootProps, ...nativeFocusProps, ref: rootRef });
   const header = useSlot(View, headerProps);
   const chevronIndicator = useOptionalSlot(Icon, chevron ? { fontSource: semanticIconSources.chevron } : null);
   const checkmarkIndicator = useOptionalSlot(Icon, checkmark && selected ? { fontSource: semanticIconSources.checkmark } : null);
   const checkboxIndicator = useOptionalSlot(CheckboxIndicator, multiselect ? {} : null);
 
   return {
+    FocusRing: isListItem ? FocusRing : undefined,
     ...themeState,
     ...pressableState,
     avatar,
diff --git a/packages/agentic/components/src/components/listbox-item/useListboxItemStyles.ts b/packages/agentic/components/src/components/listbox-item/useListboxItemStyles.ts
index 0701d6a156..906dfbe2e3 100644
--- a/packages/agentic/components/src/components/listbox-item/useListboxItemStyles.ts
+++ b/packages/agentic/components/src/components/listbox-item/useListboxItemStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps } from '../../common/focusVisualPolicy';
+import { applyFocusRingStyles } from '../../common/applyFocusRingStyles';
 
 import {
   getListboxItemAvatarSize,
@@ -20,14 +20,7 @@ import type { ListboxItemState } from './listbox-item.types';
 export function useListboxItemStyles_unstable(state: ListboxItemState) {
   const resolvedRootStyle = getListboxItemRootStyle(state);
   const rootStyle: StyleProp<ViewStyle> = [listboxItemStyles.root, resolvedRootStyle, state.userStyle];
-  state.focusVisualProps = createFocusVisualProps({
-    borderRadius: resolvedRootStyle.borderRadius,
-    innerColor: state.tokens.color.strokeFocusInner,
-    innerWidth: state.tokens.strokeWidth.thin,
-    outerColor: state.tokens.color.strokeFocusOuter,
-    outerWidth: state.tokens.strokeWidth.thick,
-    visible: state.variant === 'listItem' && state.focused && !state.disabled,
-  });
+  applyFocusRingStyles(state.FocusRing, state, resolvedRootStyle.borderRadius);
   attachSlotProps(state.root, { style: rootStyle });
 
   const headerStyle: StyleProp<ViewStyle> = [listboxItemStyles.root, getListboxItemHeaderStyle(state), state.userStyle];
diff --git a/packages/agentic/components/src/components/menu-item/SPEC.md b/packages/agentic/components/src/components/menu-item/SPEC.md
index 1132011885..0d22e9d75e 100644
--- a/packages/agentic/components/src/components/menu-item/SPEC.md
+++ b/packages/agentic/components/src/components/menu-item/SPEC.md
@@ -30,7 +30,7 @@ section header. Caller style wins after the component's root styles.
 The public slots are `root`, `icon`, `selectedIcon`, `avatar`, `chevron`,
 `checkmark`, and `multiselectCheckbox`. Text is deliberately supplied through
 the `content` and `secondaryContent` properties. A list-item root renders
-FocusVisual and CompoundItemLayout. Its leading visual is avatar or the
+optional `FocusRing` and CompoundItemLayout. Its leading visual is avatar or the
 selected replacement icon or icon. Its trailing order is chevron, checkmark,
 then the multiselect checkbox. List item labels and secondary text use
 state-only reservations to avoid a size change when selected. A section header
@@ -52,10 +52,25 @@ Multiselect takes visual precedence over selected fill and semibold text.
   default, checkmark, and multiselect rows.
 - **MNI-004:** Keep section headers noninteractive and limit skeleton loading
   to that variant.
-- **MNI-005:** Apply token-derived interaction, accessibility, and persistent
+- **MNI-005:** Apply token-derived interaction, accessibility, and optional
   custom focus structure without overriding caller handlers; the root's focus
   feedback follows the [shared focus visual policy](../AGENTS.md#focus-visual-policy).
 
+## Focus visuals
+
+The state hook uses `useFocusVisuals` to create a private optional `FocusRing`.
+Windows and macOS request the system ring by default, without a custom subtree.
+Win32 and other platforms use the custom ring, visible only while focused and
+the scene's current input modality is keyboard. Programmatic focus follows the
+last root modality. Disabled and noninteractive targets never show custom feedback.
+
+The composition hook supports an explicit `useSystemFocusRing` override.
+`alwaysVisible` selects the custom path and bypasses modality while focused;
+it does not make an unfocused target visible or move native focus. Custom rings
+stay mounted across focus/blur. `applyFocusRingStyles` supplies shared theme
+colors and widths; component style hooks preserve their resolved radius.
+These hook options do not add new component props. Scenes require `ThemedRoot`.
+
 ## Platform behavior
 
 Windows and macOS expose list items through React Native as `menuitem`,
@@ -65,11 +80,7 @@ the default hint `"Has submenu"`. Header roots expose the `none` role, are
 disabled, and cannot receive focus. Decorative visuals are inaccessible.
 
 The native Pressable drives pointer hover, press, focus, and keyboard
-activation for interactive rows. Interactive roots request native focus visuals
-on every platform under the shared policy; rendering depends on platform support.
-FocusVisual is mounted for each row, hidden
-on the system path and using its existing enabled-focus visibility calculation
-on the custom path. Section headers gain no focus feedback. The component does
+activation for interactive rows. Section headers gain no focus feedback. The component does
 not navigate between menu items, open a submenu, restore focus, or dismiss a menu.
 
 ## Divergences from Flex
diff --git a/packages/agentic/components/src/components/menu-item/menu-item.test.tsx b/packages/agentic/components/src/components/menu-item/menu-item.test.tsx
index 2f8ec6d892..5c0abd6c2d 100644
--- a/packages/agentic/components/src/components/menu-item/menu-item.test.tsx
+++ b/packages/agentic/components/src/components/menu-item/menu-item.test.tsx
@@ -5,8 +5,6 @@ import { fireEvent } from '@testing-library/react-native';
 import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
-import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
-
 import { MenuItem } from './menu-item';
 import type { MenuItemProps } from './menu-item.types';
 
@@ -110,22 +108,14 @@ describe('MenuItem', () => {
     expect(getRootStyle(component).backgroundColor).toBe('hotpink');
   });
 
-  it('uses native focus visuals for list items while retaining the hidden custom rings', async () => {
+  it('uses native focus visuals for list items without mounting custom rings', async () => {
     const component = await renderMenuItem({ content: 'Focused' });
     const root = getRoot(component);
 
     await fireEvent(root, 'focus', {});
     expect(root.props.enableFocusRing).toBe(true);
 
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: defaultFlexTokens.color.strokeFocusOuter,
-      borderWidth: defaultFlexTokens.strokeWidth.thick,
-    });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: defaultFlexTokens.color.strokeFocusInner,
-      borderWidth: defaultFlexTokens.strokeWidth.thin,
-    });
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
   });
 
   it('hides secondary content when null and keeps the default when omitted', async () => {
diff --git a/packages/agentic/components/src/components/menu-item/menu-item.types.ts b/packages/agentic/components/src/components/menu-item/menu-item.types.ts
index 6646fdaa8c..e160d9224a 100644
--- a/packages/agentic/components/src/components/menu-item/menu-item.types.ts
+++ b/packages/agentic/components/src/components/menu-item/menu-item.types.ts
@@ -9,7 +9,7 @@ import type {
 } from '@fluentui-react-native/framework-base';
 import type { ThemeState } from '@fluentui-react-native/design';
 
-import type { FocusVisualProps } from '../../primitives/focus-visual/focus-visual.types';
+import type { FocusVisualsSlots } from '../../common/useFocusVisuals';
 import type { Icon } from '../../primitives/icon/icon';
 import type { CheckboxIndicator } from '../../primitives/checkbox-indicator/checkbox-indicator';
 import type { ItemSecondaryContentPosition } from '../../common/item.types';
@@ -49,11 +49,10 @@ export type MenuItemProps = MenuItemStateProps & {
   secondaryContent?: string | null;
 } & ComponentProps<MenuItemSlots, MenuItemExposedPressableProps>;
 
-export type MenuItemState = ComponentState<MenuItemSlots> &
+export type MenuItemState = ComponentState<MenuItemSlots & FocusVisualsSlots> &
   Required<MenuItemStateProps> &
   ThemeState & {
     contentText: string;
-    focusVisualProps?: FocusVisualProps;
     secondaryContentText?: string | null;
     hasSecondaryContent: boolean;
     isListItem: boolean;
diff --git a/packages/agentic/components/src/components/menu-item/renderMenuItem.tsx b/packages/agentic/components/src/components/menu-item/renderMenuItem.tsx
index 6c5b697c5e..e77e7f7df3 100644
--- a/packages/agentic/components/src/components/menu-item/renderMenuItem.tsx
+++ b/packages/agentic/components/src/components/menu-item/renderMenuItem.tsx
@@ -1,7 +1,6 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 
 import { CompoundItemLayout } from '../../primitives/compound-item-layout/compound-item-layout';
-import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import { LayoutStableText } from '../../primitives/layout-stable-text/layout-stable-text';
 import { Skeleton } from '../skeleton/skeleton';
 import { Text } from '../text/text';
@@ -35,7 +34,7 @@ export function renderMenuItem_unstable(state: MenuItemState) {
 
   return (
     <state.root>
-      <FocusVisual {...state.focusVisualProps} />
+      {state.FocusRing && <state.FocusRing />}
       {state.loading ? (
         <CompoundItemLayout
           contentStyle={getMenuItemContentLayoutStyle(state)}
diff --git a/packages/agentic/components/src/components/menu-item/spec/accessibility.md b/packages/agentic/components/src/components/menu-item/spec/accessibility.md
index c7a117cc44..43667d2348 100644
--- a/packages/agentic/components/src/components/menu-item/spec/accessibility.md
+++ b/packages/agentic/components/src/components/menu-item/spec/accessibility.md
@@ -11,8 +11,15 @@ focusable. Icon, avatar, chevron, checkmark, and checkbox visuals are
 inaccessible presentation. On Windows the root is represented through UIA,
 and on macOS through AX, using the resolved role, name, state, and availability.
 
-Interactive roots follow the [shared focus visual policy](../../AGENTS.md#focus-visual-policy),
-requesting native feedback on every platform and retaining the mounted custom
-FocusVisual. Native rendering depends on platform support.
 An owning menu remains responsible for a menu-level name, menu position, and
 relationships to any submenu.
+
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
diff --git a/packages/agentic/components/src/components/menu-item/spec/interaction.md b/packages/agentic/components/src/components/menu-item/spec/interaction.md
index 0405b3583a..1f280c0b54 100644
--- a/packages/agentic/components/src/components/menu-item/spec/interaction.md
+++ b/packages/agentic/components/src/components/menu-item/spec/interaction.md
@@ -6,12 +6,20 @@ or receive focus. Pressing never changes `selected`, so an owning menu must
 update that value and clear peers when required.
 
 Hover and press state select the root and text colors after style selection.
-The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-The dual-ring FocusVisual remains mounted, hidden on the system path on every platform
-and retaining its enabled-focus visibility calculation on the custom path.
+
 Section headers do not activate, focus, or show a ring, including when their
 skeleton is shown.
 
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
+
 This component does not implement arrow navigation, Home/End, type-ahead,
 submenu opening, focus restoration, dismissal, or timed motion. Those are
 menu-container responsibilities on Windows and macOS.
diff --git a/packages/agentic/components/src/components/menu-item/spec/source.json b/packages/agentic/components/src/components/menu-item/spec/source.json
index e2d9c7b640..d733b4e2b4 100644
--- a/packages/agentic/components/src/components/menu-item/spec/source.json
+++ b/packages/agentic/components/src/components/menu-item/spec/source.json
@@ -3,7 +3,7 @@
   "component": "menu-item",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-11",
+  "reviewedAt": "2026-09-12",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/menu-item/spec/tokens.yaml b/packages/agentic/components/src/components/menu-item/spec/tokens.yaml
index a92657d5ea..d75cdb5292 100644
--- a/packages/agentic/components/src/components/menu-item/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/menu-item/spec/tokens.yaml
@@ -45,7 +45,7 @@ bindings:
       selectedBackground: color.backgroundBrandHeavy
       selectedForeground: color.foregroundBrandOnloud
       unselectedBorder: color.strokeNeutralLoud
-  focusVisual:
+  FocusRing:
     outer: [color.strokeFocusOuter, strokeWidth.thick]
     inner: [color.strokeFocusInner, strokeWidth.thin]
 
diff --git a/packages/agentic/components/src/components/menu-item/spec/usage.md b/packages/agentic/components/src/components/menu-item/spec/usage.md
index 222c15a45b..747915be07 100644
--- a/packages/agentic/components/src/components/menu-item/spec/usage.md
+++ b/packages/agentic/components/src/components/menu-item/spec/usage.md
@@ -12,3 +12,9 @@ radio-style choice. Do not supply both—the current implementation gives
 multiselect precedence and only warns in development. `hasChevron` supplies an
 indicator and hint; the surrounding menu must open the submenu. Use `under`
 secondary content for a description and `right` for compact metadata.
+
+## Scene root
+
+Render the scene inside `ThemedRoot` so focus policy can query `useRootSettings`.
+A nested theme boundary may override appearance without creating a separate
+input-modality tracker. Component test scenes use the shared themed renderer.
diff --git a/packages/agentic/components/src/components/menu-item/useMenuItem.ts b/packages/agentic/components/src/components/menu-item/useMenuItem.ts
index d3110a8d82..d10efcb15a 100644
--- a/packages/agentic/components/src/components/menu-item/useMenuItem.ts
+++ b/packages/agentic/components/src/components/menu-item/useMenuItem.ts
@@ -4,7 +4,7 @@ import { usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-nat
 import { useThemeState } from '@fluentui-react-native/design';
 
 import { semanticIconSources } from '../../common/iconSources';
-import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
+import { useFocusVisuals } from '../../common/useFocusVisuals';
 import { CheckboxIndicator } from '../../primitives/checkbox-indicator/checkbox-indicator';
 import { Icon } from '../../primitives/icon/icon';
 import type { MenuItemProps, MenuItemState } from './menu-item.types';
@@ -56,7 +56,6 @@ export function useMenuItem_unstable(props: MenuItemProps): MenuItemState {
 
   const [pressableProps, pressableState] = usePressableState({
     ...rest,
-    ...getNativeFocusVisualProps(),
     accessible: rest.accessible ?? true,
     accessibilityHint: accessibilityHint ?? (hasChevron ? 'Has submenu' : undefined),
     accessibilityLabel: accessibilityLabel ?? contentText,
@@ -71,7 +70,12 @@ export function useMenuItem_unstable(props: MenuItemProps): MenuItemState {
     onPress: isInteractive ? rest.onPress : undefined,
   });
 
-  const root = useSlot(Pressable, { ...pressableProps, ref: rootRef });
+  const { FocusRing, ...nativeFocusProps } = useFocusVisuals({
+    focused: pressableState.focused && !disabled && isInteractive,
+    useSystemFocusRing: isInteractive ? undefined : false,
+  });
+
+  const root = useSlot(Pressable, { ...pressableProps, ...nativeFocusProps, ref: rootRef });
   const icon = useOptionalSlot(Icon, iconProp, { defaultProps: defaultRegularIcon, renderByDefault: true });
   const selectedIcon = useOptionalSlot(Icon, selectedIconProp, { defaultProps: defaultSelectedIcon, renderByDefault: selected });
   const avatar = useOptionalSlot(View, avatarProp);
@@ -80,6 +84,7 @@ export function useMenuItem_unstable(props: MenuItemProps): MenuItemState {
   const multiselectCheckbox = useOptionalSlot(CheckboxIndicator, multiselectCheckboxProp, { renderByDefault: hasMultiselect });
 
   const styleState: MenuItemState = {
+    FocusRing: isInteractive ? FocusRing : undefined,
     ...themeState,
     ...pressableState,
     contentText,
diff --git a/packages/agentic/components/src/components/menu-item/useMenuItemStyles.ts b/packages/agentic/components/src/components/menu-item/useMenuItemStyles.ts
index 5ad3b8de93..7b06dbd23f 100644
--- a/packages/agentic/components/src/components/menu-item/useMenuItemStyles.ts
+++ b/packages/agentic/components/src/components/menu-item/useMenuItemStyles.ts
@@ -3,7 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
 
 import { hiddenFromAccessibilityProps } from '../../common/accessibility';
-import { createFocusVisualProps } from '../../common/focusVisualPolicy';
+import { applyFocusRingStyles } from '../../common/applyFocusRingStyles';
 import {
   getMenuItemCheckboxStyle,
   getMenuItemLeadingStyle,
@@ -21,14 +21,7 @@ export function useMenuItemStyles_unstable(state: MenuItemState) {
   const rootLayoutStyle = getMenuItemRootLayoutStyle(state);
   const rootStyle: StyleProp<ViewStyle> = [menuItemStyles.root, rootLayoutStyle, getMenuItemRootStyle(state), state.userStyle];
 
-  state.focusVisualProps = createFocusVisualProps({
-    borderRadius: rootLayoutStyle.borderRadius,
-    innerColor: state.tokens.color.strokeFocusInner,
-    innerWidth: state.tokens.strokeWidth.thin,
-    outerColor: state.tokens.color.strokeFocusOuter,
-    outerWidth: state.tokens.strokeWidth.thick,
-    visible: state.focused && !state.disabled && state.isListItem,
-  });
+  applyFocusRingStyles(state.FocusRing, state, rootLayoutStyle.borderRadius);
   attachSlotProps(state.root, { style: rootStyle });
   state.contentReserveStyle = getMenuItemLabelStyle(state, true);
   state.contentStyle = getMenuItemLabelStyle(state);
diff --git a/packages/agentic/components/src/components/radio/SPEC.md b/packages/agentic/components/src/components/radio/SPEC.md
index 978a4c1678..1b746d5db2 100644
--- a/packages/agentic/components/src/components/radio/SPEC.md
+++ b/packages/agentic/components/src/components/radio/SPEC.md
@@ -26,7 +26,7 @@ slot is `root`; children are not accepted. The caller can provide owned React
 Native Pressable props and a `style`, which is applied after component root
 styles.
 
-The root renders its persistent FocusVisual, the 16-unit indicator, its
+The root renders its optional `FocusRing`, the 16-unit indicator, its
 10-unit dot, and a label container. The label container contains the label and
 the secondary text only when `showSecondaryText` is true. A selected dot is
 opaque and uses the brand foreground. An unselected dot remains in the tree
@@ -52,6 +52,21 @@ rather than explicitly hiding the indicator and text children.
 - **RAD-005:** Expose radio semantics, accessible naming, disabled behavior,
   descendant grouping, and root focus feedback under the [shared focus visual policy](../AGENTS.md#focus-visual-policy).
 
+## Focus visuals
+
+The state hook uses `useFocusVisuals` to create a private optional `FocusRing`.
+Windows and macOS request the system ring by default, without a custom subtree.
+Win32 and other platforms use the custom ring, visible only while focused and
+the scene's current input modality is keyboard. Programmatic focus follows the
+last root modality. Disabled and noninteractive targets never show custom feedback.
+
+The composition hook supports an explicit `useSystemFocusRing` override.
+`alwaysVisible` selects the custom path and bypasses modality while focused;
+it does not make an unfocused target visible or move native focus. Custom rings
+stay mounted across focus/blur. `applyFocusRingStyles` supplies shared theme
+colors and widths; component style hooks preserve their resolved radius.
+These hook options do not add new component props. Scenes require `ThemedRoot`.
+
 ## Platform behavior
 
 On Windows and macOS the root is an accessible React Native `Pressable` with
@@ -61,10 +76,7 @@ indicator and text subtrees are explicitly hidden from assistive technology so
 the named root is the single announced element.
 
 Native Pressable events provide hover, press, focus, and keyboard activation.
-The root requests native focus visuals on every platform under the shared policy;
-rendering depends on platform support. FocusVisual
-remains in the tree, hidden on the system path and retaining its enabled-focus
-visibility behavior on the custom path. Group name, arrow-key navigation,
+Group name, arrow-key navigation,
 single-tab-stop behavior, peer selection, and focus restoration must be
 implemented by the component that renders the radios.
 
diff --git a/packages/agentic/components/src/components/radio/radio.test.tsx b/packages/agentic/components/src/components/radio/radio.test.tsx
index d734767dc8..ce62aca4ac 100644
--- a/packages/agentic/components/src/components/radio/radio.test.tsx
+++ b/packages/agentic/components/src/components/radio/radio.test.tsx
@@ -119,22 +119,14 @@ describe('Radio', () => {
     expect(StyleSheet.flatten(getText(component, 'Choice').props.style).color).toBe(tokens.pressed.foregroundNeutralSecondary);
   });
 
-  it('uses native focus visuals while retaining the hidden custom rings', async () => {
+  it('uses native focus visuals without mounting custom rings', async () => {
     const component = await renderRadio({ label: 'Choice' });
     const root = getRoot(component);
 
     await fireEvent(root, 'focus', {});
     expect(root.props.enableFocusRing).toBe(true);
 
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: '#000000',
-      borderWidth: 2,
-    });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: '#ffffff',
-      borderWidth: 1,
-    });
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
   });
 
   it('disables interaction and preserves unrelated accessibility state', async () => {
diff --git a/packages/agentic/components/src/components/radio/radio.types.ts b/packages/agentic/components/src/components/radio/radio.types.ts
index 1fe8cd7578..cbe97024c3 100644
--- a/packages/agentic/components/src/components/radio/radio.types.ts
+++ b/packages/agentic/components/src/components/radio/radio.types.ts
@@ -9,7 +9,7 @@ import type {
   PropsWithRefOf,
   Slot,
 } from '@fluentui-react-native/framework-base';
-import type { FocusVisualProps } from '../../primitives/focus-visual/focus-visual.types';
+import type { FocusVisualsSlots } from '../../common/useFocusVisuals';
 
 export type RadioSlots = {
   /**
@@ -48,11 +48,10 @@ export type RadioExposedPressableProps = OwnedRootProps<PropsWithRefOf<typeof Pr
 
 export type RadioProps = RadioStateProps & ComponentProps<RadioSlots, RadioExposedPressableProps>;
 
-export type RadioState = ComponentState<RadioSlots> &
+export type RadioState = ComponentState<RadioSlots & FocusVisualsSlots> &
   Required<RadioStateProps> &
   ThemeState &
   PressableState & {
-    focusVisualProps?: FocusVisualProps;
     /**
      * User styling applied after the component styles.
      */
diff --git a/packages/agentic/components/src/components/radio/renderRadio.tsx b/packages/agentic/components/src/components/radio/renderRadio.tsx
index 0262b06a9a..705210bf10 100644
--- a/packages/agentic/components/src/components/radio/renderRadio.tsx
+++ b/packages/agentic/components/src/components/radio/renderRadio.tsx
@@ -1,7 +1,6 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import { View } from 'react-native';
 
-import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import { hiddenFromAccessibilityProps } from '../../common/accessibility';
 import { Text } from '../text/text';
 import type { RadioState } from './radio.types';
@@ -12,7 +11,7 @@ import type { RadioState } from './radio.types';
 export function renderRadio_unstable(state: RadioState) {
   return (
     <state.root>
-      <FocusVisual {...state.focusVisualProps} />
+      {state.FocusRing && <state.FocusRing />}
       <View {...hiddenFromAccessibilityProps} testID="radio-indicator" style={state.indicatorStyle}>
         <View testID="radio-dot" style={state.indicatorDotStyle} />
       </View>
diff --git a/packages/agentic/components/src/components/radio/spec/accessibility.md b/packages/agentic/components/src/components/radio/spec/accessibility.md
index f0d988eab5..fa26df05a1 100644
--- a/packages/agentic/components/src/components/radio/spec/accessibility.md
+++ b/packages/agentic/components/src/components/radio/spec/accessibility.md
@@ -12,7 +12,14 @@ macOS AX expose only the root's radio role, name, checked value, and disabled
 value and cannot announce decorative descendants separately.
 
 The owning group must provide a group name and any positional or peer
-relationship information. The root follows the
-[shared focus visual policy](../../AGENTS.md#focus-visual-policy), requesting native
-feedback on every platform and retaining the mounted custom FocusVisual without
-a competing visible ring. Native rendering depends on platform support.
+relationship information.
+
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
diff --git a/packages/agentic/components/src/components/radio/spec/interaction.md b/packages/agentic/components/src/components/radio/spec/interaction.md
index 362b88b745..da47e4634e 100644
--- a/packages/agentic/components/src/components/radio/spec/interaction.md
+++ b/packages/agentic/components/src/components/radio/spec/interaction.md
@@ -6,12 +6,22 @@ activation and focus. Pressing reports through `onPress`; Radio never changes
 its own selected value.
 
 On Windows and macOS, native Pressable behavior activates a focused radio.
-Hover and press states change the token-derived colors. The root follows the
-[shared focus visual policy](../../AGENTS.md#focus-visual-policy): request native
-feedback on every platform with the persistent FocusVisual hidden, or use the existing custom
-visibility calculation on the retained path. There is no component-owned timed
+
+Hover and press states change the token-derived colors.
+
+There is no component-owned timed
 animation.
 
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
+
 An owning group must move focus with directional keys, establish the group
 entry point, update selected peers, and return focus when its surrounding
 surface closes.
diff --git a/packages/agentic/components/src/components/radio/spec/source.json b/packages/agentic/components/src/components/radio/spec/source.json
index 9fa1101f35..401ff9e181 100644
--- a/packages/agentic/components/src/components/radio/spec/source.json
+++ b/packages/agentic/components/src/components/radio/spec/source.json
@@ -3,7 +3,7 @@
   "component": "radio",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-11",
+  "reviewedAt": "2026-09-12",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/radio/spec/tokens.yaml b/packages/agentic/components/src/components/radio/spec/tokens.yaml
index 3c281860f2..0784686adc 100644
--- a/packages/agentic/components/src/components/radio/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/radio/spec/tokens.yaml
@@ -44,7 +44,7 @@ bindings:
     gap: spacing.componentBase50
     paddingEnd: spacing.componentBase200
     paddingVertical: spacing.componentBase150
-  focusVisual:
+  FocusRing:
     outer: [color.strokeFocusOuter, strokeWidth.thick]
     inner: [color.strokeFocusInner, strokeWidth.thin]
 
diff --git a/packages/agentic/components/src/components/radio/spec/usage.md b/packages/agentic/components/src/components/radio/spec/usage.md
index 6644722e9d..bfb5429c91 100644
--- a/packages/agentic/components/src/components/radio/spec/usage.md
+++ b/packages/agentic/components/src/components/radio/spec/usage.md
@@ -17,3 +17,9 @@ Do not use one standalone Radio as an independent toggle. The current
 component does not clear a selected peer or manage directional navigation, so
 the surrounding group must perform those duties. Use `disabled` only for an
 unavailable option, not to represent an unselected one.
+
+## Scene root
+
+Render the scene inside `ThemedRoot` so focus policy can query `useRootSettings`.
+A nested theme boundary may override appearance without creating a separate
+input-modality tracker. Component test scenes use the shared themed renderer.
diff --git a/packages/agentic/components/src/components/radio/useRadio.ts b/packages/agentic/components/src/components/radio/useRadio.ts
index f1a045c1f9..5233b2be36 100644
--- a/packages/agentic/components/src/components/radio/useRadio.ts
+++ b/packages/agentic/components/src/components/radio/useRadio.ts
@@ -2,7 +2,7 @@ import { Pressable } from 'react-native';
 
 import { usePressableState, useSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
-import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
+import { useFocusVisuals } from '../../common/useFocusVisuals';
 
 import type { RadioProps, RadioState } from './radio.types';
 
@@ -27,7 +27,6 @@ export function useRadio_unstable(props: RadioProps): RadioState {
   const themeState = useThemeState();
   const [pressableProps, pressableState] = usePressableState({
     ...rest,
-    ...getNativeFocusVisualProps(),
     accessibilityLabel: accessibilityLabel ?? label,
     accessibilityHint: accessibilityHint ?? (showSecondaryText ? secondaryText : undefined),
     accessibilityRole: 'radio',
@@ -40,9 +39,12 @@ export function useRadio_unstable(props: RadioProps): RadioState {
     disabled,
     focusable: rest.focusable ?? !disabled,
   });
-  const root = useSlot(Pressable, { ...pressableProps, ref: rootRef });
+  const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled });
+
+  const root = useSlot(Pressable, { ...pressableProps, ...nativeFocusProps, ref: rootRef });
 
   return {
+    FocusRing,
     indicatorDotStyle: [],
     indicatorStyle: [],
     labelContainerStyle: [],
diff --git a/packages/agentic/components/src/components/radio/useRadioStyles.ts b/packages/agentic/components/src/components/radio/useRadioStyles.ts
index 8d756397c9..fd6a9bb874 100644
--- a/packages/agentic/components/src/components/radio/useRadioStyles.ts
+++ b/packages/agentic/components/src/components/radio/useRadioStyles.ts
@@ -1,6 +1,6 @@
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { createFocusVisualProps } from '../../common/focusVisualPolicy';
+import { applyFocusRingStyles } from '../../common/applyFocusRingStyles';
 
 import {
   radioStyles,
@@ -38,14 +38,7 @@ export function useRadioStyles_unstable(state: RadioState) {
     getRadioSecondaryTextColorStyle(state),
   ];
 
-  state.focusVisualProps = createFocusVisualProps({
-    borderRadius: rootLayoutStyle.borderRadius,
-    innerColor: state.tokens.color.strokeFocusInner,
-    innerWidth: state.tokens.strokeWidth.thin,
-    outerColor: state.tokens.color.strokeFocusOuter,
-    outerWidth: state.tokens.strokeWidth.thick,
-    visible: state.focused && !state.disabled,
-  });
+  applyFocusRingStyles(state.FocusRing, state, rootLayoutStyle.borderRadius);
   state.rootStyle = rootStyle;
   state.indicatorStyle = indicatorStyle;
   state.indicatorDotStyle = indicatorDotStyle;
diff --git a/packages/agentic/components/src/components/switch/SPEC.md b/packages/agentic/components/src/components/switch/SPEC.md
index d39443922b..df8e6c35f1 100644
--- a/packages/agentic/components/src/components/switch/SPEC.md
+++ b/packages/agentic/components/src/components/switch/SPEC.md
@@ -68,7 +68,7 @@ An internal container `View` wraps the whole component and owns the layout
 direction, gap, and padding; it is not replaceable. Render order is: container,
 then per layout — `switch` renders the hit area alone, `horizontal` renders
 before label, hit area, after label, and `vertical` renders the above label then
-the hit area. Inside the hit area the focus visual renders first, then the
+the hit area. Inside the hit area the optional `FocusRing` renders first, then the
 track, and the thumb renders inside the track.
 
 Because both label flags default to `true`, the default `horizontal` layout
@@ -108,6 +108,21 @@ border widths, the two inset offsets, and the thumb width.
 the animation on first mount, and snap to the end value while the platform
 reduced-motion setting is on.
 
+## Focus visuals
+
+The state hook uses `useFocusVisuals` to create a private optional `FocusRing`.
+Windows and macOS request the system ring by default, without a custom subtree.
+Win32 and other platforms use the custom ring, visible only while focused and
+the scene's current input modality is keyboard. Programmatic focus follows the
+last root modality. Disabled and noninteractive targets never show custom feedback.
+
+The composition hook supports an explicit `useSystemFocusRing` override.
+`alwaysVisible` selects the custom path and bypasses modality while focused;
+it does not make an unfocused target visible or move native focus. Custom rings
+stay mounted across focus/blur. `applyFocusRingStyles` supplies shared theme
+colors and widths; component style hooks preserve their resolved radius.
+These hook options do not add new component props. Scenes require `ThemedRoot`.
+
 ## Platform behavior
 
 The root is focusable while enabled and drops out of the tab order when
@@ -136,7 +151,7 @@ interpolates colors, which the native driver cannot animate.
 | --------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
 | `switch-label-association-ids`    | Resolved    | When the caller supplies no name, the component copies visible label text to the root as the single accessible-name mechanism and emits no unresolved labelled-by references.         | Implemented in `useSwitch.ts` and covered by naming tests.                                                   |
 | `switch-label-spacing`            | Accepted    | One container gap separates the control from whichever labels render. Flex distinguishes inner and outer label spacing per side.                                                      | None. A single gap is the natural React Native flex-container expression and matches the inner spacing step. |
-| `switch-focus-modality`           | Accepted    | The retained custom visual appears whenever the root is focused, including after a press. Native focus appearance is delegated to each renderer.                                      | No new modality guarantee is made by the platform adaptation.                                                |
+| `switch-focus-modality`           | Accepted    | Custom visibility follows keyboard modality from the scene root rather than a component-local pointer tracker. Native appearance remains renderer-owned.                              | Preserve the shared hook and component modality matrix.                                                      |
 | `switch-keyboard-activation-path` | Deferred    | FURN registers both `onPress` and a recognized-key `onKeyUp` toggle. If Windows or macOS `Pressable` also synthesizes `onPress` for that key, one activation can request two toggles. | Verify the native event sequence, then remove the redundant path or document the platform-specific handler.  |
 
 ## Conformance
diff --git a/packages/agentic/components/src/components/switch/renderSwitch.tsx b/packages/agentic/components/src/components/switch/renderSwitch.tsx
index e798c70a93..58404c2f54 100644
--- a/packages/agentic/components/src/components/switch/renderSwitch.tsx
+++ b/packages/agentic/components/src/components/switch/renderSwitch.tsx
@@ -1,5 +1,4 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
-import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import type { SwitchState } from './switch.types';
 
 /**
@@ -8,7 +7,7 @@ import type { SwitchState } from './switch.types';
 export function renderSwitch_unstable(state: SwitchState) {
   const root = (
     <state.root>
-      <FocusVisual {...state.focusVisualProps} />
+      {state.FocusRing && <state.FocusRing />}
       <state.track>
         <state.thumb />
       </state.track>
diff --git a/packages/agentic/components/src/components/switch/spec/accessibility.md b/packages/agentic/components/src/components/switch/spec/accessibility.md
index a90703b2e9..6bb024d3d5 100644
--- a/packages/agentic/components/src/components/switch/spec/accessibility.md
+++ b/packages/agentic/components/src/components/switch/spec/accessibility.md
@@ -44,11 +44,20 @@ checked state, so putting it in the name makes it read twice and go stale.
 ## Focus and keyboard
 
 The hit area is focusable while enabled and leaves the tab order when disabled,
-because `focusable` defaults to the negation of `disabled`. Enter and the space
-keys toggle on key up. The hit-area root, not the label container or track,
-follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-Every platform receives the native focus-ring request; rendering depends on
-platform support. The mounted two-ring visual is retained for the custom path.
+because `focusable` defaults to the negation of `disabled`.
+
+Enter and the space
+keys toggle on key up.
+
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
 
 Disabled switches stay in the accessibility tree and report their disabled
 state, so a screen reader user can still discover the setting and hear that it
diff --git a/packages/agentic/components/src/components/switch/spec/interaction.md b/packages/agentic/components/src/components/switch/spec/interaction.md
index 3f12826a51..8989c61e0f 100644
--- a/packages/agentic/components/src/components/switch/spec/interaction.md
+++ b/packages/agentic/components/src/components/switch/spec/interaction.md
@@ -30,13 +30,15 @@ arrow keys, and moving through a group of switches is plain tab order.
 
 ## Focus visual
 
-The hit-area root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-Every platform receives the native focus-ring request, with rendering support
-and appearance delegated to its renderer, while the custom
-visual remains mounted but hidden. On the retained custom path, the two-ring
-visual uses the root radius and existing focus stroke tokens and appears while
-the root is focused and enabled, including pointer focus. This adaptation does
-not introduce a new modality guarantee.
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
 
 ## State transition
 
diff --git a/packages/agentic/components/src/components/switch/spec/source.json b/packages/agentic/components/src/components/switch/spec/source.json
index a2a0b68dfc..00f53bc72c 100644
--- a/packages/agentic/components/src/components/switch/spec/source.json
+++ b/packages/agentic/components/src/components/switch/spec/source.json
@@ -3,7 +3,7 @@
   "component": "switch",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-11",
+  "reviewedAt": "2026-09-12",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/switch/spec/tokens.yaml b/packages/agentic/components/src/components/switch/spec/tokens.yaml
index c312613d11..2306bcd2b9 100644
--- a/packages/agentic/components/src/components/switch/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/switch/spec/tokens.yaml
@@ -47,7 +47,7 @@ bindings:
       borderRadius: borderRadius.circular
     userStyle: applied last by useSwitchStyles_unstable
 
-  focusVisual:
+  FocusRing:
     borderRadius: resolved root borderRadius
     innerColor: color.strokeFocusInner
     innerWidth: strokeWidth.thin
diff --git a/packages/agentic/components/src/components/switch/spec/usage.md b/packages/agentic/components/src/components/switch/spec/usage.md
index 5e83273e63..30cf72372e 100644
--- a/packages/agentic/components/src/components/switch/spec/usage.md
+++ b/packages/agentic/components/src/components/switch/spec/usage.md
@@ -97,3 +97,9 @@ the text.
 
 Expecting a press on the label text to toggle the control. Only the hit area is
 pressable.
+
+## Scene root
+
+Render the scene inside `ThemedRoot` so focus policy can query `useRootSettings`.
+A nested theme boundary may override appearance without creating a separate
+input-modality tracker. Component test scenes use the shared themed renderer.
diff --git a/packages/agentic/components/src/components/switch/switch.test.tsx b/packages/agentic/components/src/components/switch/switch.test.tsx
index f77e710aa3..4c5d72d303 100644
--- a/packages/agentic/components/src/components/switch/switch.test.tsx
+++ b/packages/agentic/components/src/components/switch/switch.test.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
-import { StyleSheet, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 import type { TextProps, ViewProps } from 'react-native';
 import type { ComponentProps } from 'react';
 
@@ -121,23 +121,14 @@ describe('Switch', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
-  it('uses native focus visuals on the hit area while retaining the hidden custom rings', async () => {
-    const tokens = defaultFlexTokens;
+  it('uses native focus visuals on the hit area without mounting custom rings', async () => {
     const component = await renderSwitch({ label: 'Wi-Fi', labelAfter: false });
     const root = component.getByRole('switch', { name: 'Wi-Fi' });
 
     await fireEvent(root, 'focus', {});
     expect(root.props.enableFocusRing).toBe(true);
 
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: tokens.color.strokeFocusOuter,
-      borderWidth: tokens.strokeWidth.thick,
-    });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: tokens.color.strokeFocusInner,
-      borderWidth: tokens.strokeWidth.thin,
-    });
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
   });
 
   it('positions labels according to layout', async () => {
diff --git a/packages/agentic/components/src/components/switch/switch.types.ts b/packages/agentic/components/src/components/switch/switch.types.ts
index ce3d724efc..872d53c83f 100644
--- a/packages/agentic/components/src/components/switch/switch.types.ts
+++ b/packages/agentic/components/src/components/switch/switch.types.ts
@@ -10,7 +10,7 @@ import type {
   Slot,
 } from '@fluentui-react-native/framework-base';
 import type { ThemeState } from '@fluentui-react-native/design';
-import type { FocusVisualProps } from '../../primitives/focus-visual/focus-visual.types';
+import type { FocusVisualsSlots } from '../../common/useFocusVisuals';
 import type { Text } from '../text/text';
 
 type AnimatedViewComponent = typeof import('react-native').Animated.View;
@@ -45,13 +45,12 @@ export type SwitchExposedPressableProps = OwnedRootProps<PropsWithRefOf<typeof P
 
 export type SwitchProps = SwitchStateProps & ComponentProps<SwitchSlots, SwitchExposedPressableProps>;
 
-export type SwitchState = ComponentState<SwitchStateSlots> &
+export type SwitchState = ComponentState<SwitchStateSlots & FocusVisualsSlots> &
   Required<Pick<SwitchStateProps, 'disabled' | 'label' | 'labelAfter' | 'labelBefore' | 'layout'>> &
   ThemeState &
   PressableState & {
     checked: boolean;
     checkedProgress: import('react-native').Animated.Value;
-    focusVisualProps?: FocusVisualProps;
     hasVisibleLabel: boolean;
     userStyle?: StyleProp<ViewStyle>;
   };
diff --git a/packages/agentic/components/src/components/switch/useSwitch.ts b/packages/agentic/components/src/components/switch/useSwitch.ts
index 474a268c85..e302e3da17 100644
--- a/packages/agentic/components/src/components/switch/useSwitch.ts
+++ b/packages/agentic/components/src/components/switch/useSwitch.ts
@@ -10,7 +10,7 @@ import {
   useToggleState,
 } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
-import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
+import { useFocusVisuals } from '../../common/useFocusVisuals';
 
 import { Text } from '../text/text';
 import type { SwitchProps, SwitchState } from './switch.types';
@@ -105,7 +105,6 @@ export function useSwitch_unstable(props: SwitchProps): SwitchState {
 
   const [pressableProps, pressableState] = usePressableState({
     ...rest,
-    ...getNativeFocusVisualProps(),
     ...pressableNameProps,
     accessibilityRole: 'switch',
     accessibilityState: {
@@ -119,6 +118,8 @@ export function useSwitch_unstable(props: SwitchProps): SwitchState {
     'aria-checked': checked,
   });
 
+  const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled });
+
   const { toggle: toggleChecked } = toggle;
   const handlePress = React.useCallback(
     (event: Parameters<NonNullable<typeof pressableProps.onPress>>[0]) => {
@@ -141,6 +142,7 @@ export function useSwitch_unstable(props: SwitchProps): SwitchState {
   const layoutContainer = useSlot(View, { testID: 'switch-layout-container' });
   const root = useSlot(Pressable, {
     ...pressableProps,
+    ...nativeFocusProps,
     ref: rootRef,
     onPress: handlePress,
     onKeyUp: handleKeyUp,
@@ -156,6 +158,7 @@ export function useSwitch_unstable(props: SwitchProps): SwitchState {
   const aboveLabel = useOptionalSlot(Text, hasAboveLabel ? (aboveLabelProp === undefined ? { children: label } : aboveLabelProp) : null);
 
   return {
+    FocusRing,
     ...themeState,
     ...pressableState,
     aboveLabel,
diff --git a/packages/agentic/components/src/components/switch/useSwitchStyles.ts b/packages/agentic/components/src/components/switch/useSwitchStyles.ts
index 66f03cea9a..d9a20e8689 100644
--- a/packages/agentic/components/src/components/switch/useSwitchStyles.ts
+++ b/packages/agentic/components/src/components/switch/useSwitchStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps } from '../../common/focusVisualPolicy';
+import { applyFocusRingStyles } from '../../common/applyFocusRingStyles';
 
 import {
   getSwitchLabelStyle,
@@ -63,14 +63,7 @@ export function useSwitchStyles_unstable(state: SwitchState) {
   ];
   const labelStyle: StyleProp<TextStyle> = [switchStyles.label, getSwitchLabelStyle(state)];
 
-  state.focusVisualProps = createFocusVisualProps({
-    borderRadius: rootBaseStyle.borderRadius,
-    innerColor: state.tokens.color.strokeFocusInner,
-    innerWidth: state.tokens.strokeWidth.thin,
-    outerColor: state.tokens.color.strokeFocusOuter,
-    outerWidth: state.tokens.strokeWidth.thick,
-    visible: state.focused && !state.disabled,
-  });
+  applyFocusRingStyles(state.FocusRing, state, rootBaseStyle.borderRadius);
   attachSlotProps(state.layoutContainer, { style: layoutStyle });
   attachSlotProps(state.root, { style: rootStyle });
   attachSlotProps(state.track, { accessible: false, style: trackStyle });
diff --git a/packages/agentic/components/src/components/tab/SPEC.md b/packages/agentic/components/src/components/tab/SPEC.md
index c2d357d619..8680e36afc 100644
--- a/packages/agentic/components/src/components/tab/SPEC.md
+++ b/packages/agentic/components/src/components/tab/SPEC.md
@@ -58,7 +58,7 @@ interaction to the parent.
 | `selectedIcon` | `Icon`      | when supplied and selected | Replaces `icon` while selected, typically the filled variant.   |
 | `content`      | `Text`      | `iconAndText` layout       | Defaults to the text `Tab`; forced off in the icon-only layout. |
 
-Render order inside the root is: focus visual, active icon, then content. The
+Render order inside the root is: optional `FocusRing`, active icon, then content. The
 active icon is `selectedIcon` when selected and a selected icon was supplied,
 and `icon` otherwise.
 
@@ -96,6 +96,21 @@ disabled tab from the tab order.
 on the root, retaining the mounted two-ring visual and active-layout radius
 for the custom path.
 
+## Focus visuals
+
+The state hook uses `useFocusVisuals` to create a private optional `FocusRing`.
+Windows and macOS request the system ring by default, without a custom subtree.
+Win32 and other platforms use the custom ring, visible only while focused and
+the scene's current input modality is keyboard. Programmatic focus follows the
+last root modality. Disabled and noninteractive targets never show custom feedback.
+
+The composition hook supports an explicit `useSystemFocusRing` override.
+`alwaysVisible` selects the custom path and bypasses modality while focused;
+it does not make an unfocused target visible or move native focus. Custom rings
+stay mounted across focus/blur. `applyFocusRingStyles` supplies shared theme
+colors and widths; component style hooks preserve their resolved radius.
+These hook options do not add new component props. Scenes require `ThemedRoot`.
+
 ## Platform behavior
 
 Windows and macOS share the following navigation behavior; focus rendering follows
@@ -121,7 +136,7 @@ precedence over hover.
 | --------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
 | `tab-disabled-focusability`       | Accepted    | A disabled tab is removed from the tab order and cannot be focused, while still reporting its disabled state. Flex keeps a disabled tab reachable so its state can be discovered by keyboard.    | None for this component. Reachability would have to come from a list container that manages roving focus. |
 | `tab-list-navigation-not-shipped` | Resolved    | TabList now coordinates group selection, roving focus, orientation-aware arrows, Home and End, disabled-item skipping, and the selection-follows-focus policy.                                   | Implemented by the adjacent TabList contract and integration tests.                                       |
-| `tab-focus-modality`              | Accepted    | The retained custom visual appears whenever the root is focused, including after a press. Native focus appearance is delegated to each renderer.                                                 | No new modality guarantee is made by the platform adaptation.                                             |
+| `tab-focus-modality`              | Accepted    | Custom visibility follows keyboard modality from the scene root rather than a component-local pointer tracker. Native appearance remains renderer-owned.                                         | Preserve the shared hook and component modality matrix.                                                   |
 | `tab-selected-weight-reservation` | Accepted    | The selected label is heavier than the resting label, and the width for that heavier text is reserved on every tab so selection does not reflow the list. Flex describes only the weight change. | None. The reservation is an implementation requirement of the shared text layout, not a visual addition.  |
 
 ## Conformance
diff --git a/packages/agentic/components/src/components/tab/renderTab.tsx b/packages/agentic/components/src/components/tab/renderTab.tsx
index 383eef1224..8b18096bc9 100644
--- a/packages/agentic/components/src/components/tab/renderTab.tsx
+++ b/packages/agentic/components/src/components/tab/renderTab.tsx
@@ -1,6 +1,5 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import type { TabState } from './tab.types';
-import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import { LayoutStableText } from '../../primitives/layout-stable-text/layout-stable-text';
 
 /**
@@ -14,7 +13,7 @@ export function renderTab_unstable(state: TabState) {
 
   return (
     <state.root ref={state.tabRef}>
-      <FocusVisual {...state.focusVisualProps} />
+      {state.FocusRing && <state.FocusRing />}
       {ActiveIcon && <ActiveIcon />}
       {contentElement}
     </state.root>
diff --git a/packages/agentic/components/src/components/tab/spec/accessibility.md b/packages/agentic/components/src/components/tab/spec/accessibility.md
index d96e8f2ecc..0bdab03ad1 100644
--- a/packages/agentic/components/src/components/tab/spec/accessibility.md
+++ b/packages/agentic/components/src/components/tab/spec/accessibility.md
@@ -49,10 +49,15 @@ TabList owns arrow, Home, and End movement and the selection-follows-focus
 policy. It overrides grouped selection and focusability while preserving the
 Tab's name, controlled-panel relationship, and consumer handlers.
 
-The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-Every platform receives the native focus-ring request; rendering depends on
-platform support. The mounted two-ring visual and its active-layout radius
-are retained for the custom path.
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
 
 ## Contrast and state
 
diff --git a/packages/agentic/components/src/components/tab/spec/interaction.md b/packages/agentic/components/src/components/tab/spec/interaction.md
index 3169ce779b..bb18311ba8 100644
--- a/packages/agentic/components/src/components/tab/spec/interaction.md
+++ b/packages/agentic/components/src/components/tab/spec/interaction.md
@@ -24,13 +24,15 @@ behavior, producing the same selection request and `onPress` as a pointer press.
 
 ## Focus visual
 
-The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-Every platform receives the native focus-ring request, with rendering support
-and appearance delegated to its renderer, while the custom
-visual remains mounted but hidden. On the retained custom path, the two-ring
-visual follows the active-layout radius and appears while the root is focused
-and enabled, including pointer focus. Native feedback is not required to match
-the custom rounded or circular geometry.
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
 
 ## Selection appearance
 
diff --git a/packages/agentic/components/src/components/tab/spec/source.json b/packages/agentic/components/src/components/tab/spec/source.json
index 7eb02c5b0d..6636945e47 100644
--- a/packages/agentic/components/src/components/tab/spec/source.json
+++ b/packages/agentic/components/src/components/tab/spec/source.json
@@ -3,7 +3,7 @@
   "component": "tab",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-11",
+  "reviewedAt": "2026-09-12",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/tab/spec/tokens.yaml b/packages/agentic/components/src/components/tab/spec/tokens.yaml
index c81fcebf41..38b56ee4a2 100644
--- a/packages/agentic/components/src/components/tab/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/tab/spec/tokens.yaml
@@ -37,7 +37,7 @@ bindings:
       selectedDisabled: color.backgroundNeutralHeavyDisabled
     userStyle: applied last by useTabStyles_unstable
 
-  focusVisual:
+  FocusRing:
     borderRadius: resolved layout borderRadius
     innerColor: color.strokeFocusInner
     innerWidth: strokeWidth.thin
diff --git a/packages/agentic/components/src/components/tab/spec/usage.md b/packages/agentic/components/src/components/tab/spec/usage.md
index ac2c940af2..3fba9a25d3 100644
--- a/packages/agentic/components/src/components/tab/spec/usage.md
+++ b/packages/agentic/components/src/components/tab/spec/usage.md
@@ -92,3 +92,9 @@ Pointing several tabs at the same `controls` identifier, which breaks the
 relationship between each tab and its panel.
 
 Labeling an icon-only tab after its glyph instead of after the panel it shows.
+
+## Scene root
+
+Render the scene inside `ThemedRoot` so focus policy can query `useRootSettings`.
+A nested theme boundary may override appearance without creating a separate
+input-modality tracker. Component test scenes use the shared themed renderer.
diff --git a/packages/agentic/components/src/components/tab/tab.test.tsx b/packages/agentic/components/src/components/tab/tab.test.tsx
index b7a7246c98..3769277a59 100644
--- a/packages/agentic/components/src/components/tab/tab.test.tsx
+++ b/packages/agentic/components/src/components/tab/tab.test.tsx
@@ -202,21 +202,13 @@ describe('Tab', () => {
     expect(component.getByTestId('filled-icon').props.testID).toBe('filled-icon');
   });
 
-  it('uses native focus visuals while retaining the hidden custom rings', async () => {
+  it('uses native focus visuals without mounting custom rings', async () => {
     const component = await renderTab({ controls: 'files-panel', content: 'Files' });
     const root = getRoot(component);
     await fireEvent(root, 'focus', {});
     expect(root.props.enableFocusRing).toBe(true);
 
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: defaultFlexTokens.color.strokeFocusOuter,
-      borderWidth: defaultFlexTokens.strokeWidth.thick,
-    });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: defaultFlexTokens.color.strokeFocusInner,
-      borderWidth: defaultFlexTokens.strokeWidth.thin,
-    });
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
   });
 
   it('applies user styles last', async () => {
diff --git a/packages/agentic/components/src/components/tab/tab.types.ts b/packages/agentic/components/src/components/tab/tab.types.ts
index 8d2377a77d..ecdc59fae3 100644
--- a/packages/agentic/components/src/components/tab/tab.types.ts
+++ b/packages/agentic/components/src/components/tab/tab.types.ts
@@ -13,7 +13,7 @@ import type {
 } from '@fluentui-react-native/framework-base';
 import type { ThemeState } from '@fluentui-react-native/design';
 
-import type { FocusVisualProps } from '../../primitives/focus-visual/focus-visual.types';
+import type { FocusVisualsSlots } from '../../common/useFocusVisuals';
 import type { Icon } from '../../primitives/icon/icon';
 import type { Text } from '../text/text';
 import type { TabKeyEvent } from '../tablist/tablist.types';
@@ -77,11 +77,10 @@ type TabIconAndTextProps = {
 
 export type TabProps = TabStateProps & ComponentProps<TabSlots, TabExposedPressableProps> & (TabIconAndTextProps | TabIconOnlyProps);
 
-export type TabState = ComponentState<TabStateSlots> &
+export type TabState = ComponentState<TabStateSlots & FocusVisualsSlots> &
   Required<TabStateProps> &
   ThemeState &
   PressableState & {
-    focusVisualProps?: FocusVisualProps;
     iconOnly: boolean;
     tabRef: React.RefObject<React.ElementRef<typeof Pressable> | null>;
     userStyle?: StyleProp<ViewStyle>;
diff --git a/packages/agentic/components/src/components/tab/useTab.ts b/packages/agentic/components/src/components/tab/useTab.ts
index e7784ce4b8..092c37a8df 100644
--- a/packages/agentic/components/src/components/tab/useTab.ts
+++ b/packages/agentic/components/src/components/tab/useTab.ts
@@ -9,7 +9,7 @@ import {
   useSlot,
 } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
-import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
+import { useFocusVisuals } from '../../common/useFocusVisuals';
 
 import type { TabProps, TabState } from './tab.types';
 import { Icon } from '../../primitives/icon/icon';
@@ -57,7 +57,6 @@ export function useTab_unstable(props: TabProps): TabState {
   const themeState = useThemeState();
   const [pressableProps, pressableState] = usePressableState({
     ...nativeRest,
-    ...getNativeFocusVisualProps(),
     accessibilityPosInSet: tabList?.getPosition(value),
     accessibilitySetSize: tabList?.setSize,
     accessibilityRole: 'tab',
@@ -83,8 +82,11 @@ export function useTab_unstable(props: TabProps): TabState {
     },
   });
 
+  const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !listDisabled });
+
   const root = useSlot(Pressable, {
     ...pressableProps,
+    ...nativeFocusProps,
     accessibilityControls: controls,
     ref: rootRef,
   } as PropsWithRefOf<typeof Pressable> & { accessibilityControls: string });
@@ -95,6 +97,7 @@ export function useTab_unstable(props: TabProps): TabState {
   const contentHidden = useOptionalSlot(Text, contentSlotProp);
 
   return {
+    FocusRing,
     root,
     icon,
     selectedIcon,
diff --git a/packages/agentic/components/src/components/tab/useTabStyles.ts b/packages/agentic/components/src/components/tab/useTabStyles.ts
index 6fd26e8c47..6c3377aa33 100644
--- a/packages/agentic/components/src/components/tab/useTabStyles.ts
+++ b/packages/agentic/components/src/components/tab/useTabStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps } from '../../common/focusVisualPolicy';
+import { applyFocusRingStyles } from '../../common/applyFocusRingStyles';
 
 import { tabStyles, getTabColorStyles, getTabContentStyle, getTabIconSize, getTabRootStyle } from './tab.styles';
 import type { TabState } from './tab.types';
@@ -17,14 +17,7 @@ export function useTabStyles_unstable(state: TabState) {
   const hiddenContentStyle: StyleProp<TextStyle> = [tabStyles.content, getTabContentStyle(state, true), colors.foreground];
   const iconSize = getTabIconSize();
 
-  state.focusVisualProps = createFocusVisualProps({
-    borderRadius: rootLayoutStyle.borderRadius,
-    innerColor: state.tokens.color.strokeFocusInner,
-    innerWidth: state.tokens.strokeWidth.thin,
-    outerColor: state.tokens.color.strokeFocusOuter,
-    outerWidth: state.tokens.strokeWidth.thick,
-    visible: state.focused && !state.disabled,
-  });
+  applyFocusRingStyles(state.FocusRing, state, rootLayoutStyle.borderRadius);
   attachSlotProps(state.root, { style: rootStyle });
   if (state.icon) {
     attachSlotProps(state.icon, {
diff --git a/packages/agentic/components/src/components/tag/SPEC.md b/packages/agentic/components/src/components/tag/SPEC.md
index 5f22e6ffcc..be69422049 100644
--- a/packages/agentic/components/src/components/tag/SPEC.md
+++ b/packages/agentic/components/src/components/tag/SPEC.md
@@ -51,7 +51,7 @@ props on the root.
 | `content`     | `Text`      | by default in `iconAndText` | Defaults to the text `Tag text`; pass `null` to suppress it; never rendered in the icon-only layout. |
 | `dismissIcon` | `Icon`      | by default                  | Defaults to the shared dismiss glyph; suppressed when `dismiss` is `false` or the slot is `null`.    |
 
-Render order inside the root is: focus visual, leading icon, content, dismiss
+Render order inside the root is: optional `FocusRing`, leading icon, content, dismiss
 icon.
 
 **TAG-002:** Render the label by default with the placeholder text, drop it in
@@ -59,7 +59,7 @@ the icon-only layout, render the leading icon only when one is supplied, and
 render the default dismiss glyph unless `dismiss` is `false` or the slot is
 suppressed.
 
-**TAG-003:** Render the focus visual, the leading icon, the content, and the
+**TAG-003:** Render the optional `FocusRing`, the leading icon, the content, and the
 dismiss icon in that order.
 
 ### State ownership
@@ -93,6 +93,21 @@ accessible name for icon-only tags.
 on the root, retaining the mounted two-ring visual and resolved corner radius
 for the custom path.
 
+## Focus visuals
+
+The state hook uses `useFocusVisuals` to create a private optional `FocusRing`.
+Windows and macOS request the system ring by default, without a custom subtree.
+Win32 and other platforms use the custom ring, visible only while focused and
+the scene's current input modality is keyboard. Programmatic focus follows the
+last root modality. Disabled and noninteractive targets never show custom feedback.
+
+The composition hook supports an explicit `useSystemFocusRing` override.
+`alwaysVisible` selects the custom path and bypasses modality while focused;
+it does not make an unfocused target visible or move native focus. Custom rings
+stay mounted across focus/blur. `applyFocusRingStyles` supplies shared theme
+colors and widths; component style hooks preserve their resolved radius.
+These hook options do not add new component props. Scenes require `ThemedRoot`.
+
 ## Platform behavior
 
 Windows and macOS share the following activation behavior; focus rendering follows
diff --git a/packages/agentic/components/src/components/tag/renderTag.tsx b/packages/agentic/components/src/components/tag/renderTag.tsx
index 7b80c860dc..ea587bc0a3 100644
--- a/packages/agentic/components/src/components/tag/renderTag.tsx
+++ b/packages/agentic/components/src/components/tag/renderTag.tsx
@@ -1,11 +1,10 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
-import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import type { TagState } from './tag.types';
 
 export function renderTag_unstable(state: TagState) {
   return (
     <state.root>
-      <FocusVisual {...state.focusVisualProps} />
+      {state.FocusRing && <state.FocusRing />}
       {state.leadingIcon && <state.leadingIcon />}
       {state.content && <state.content />}
       {state.dismissIcon && state.dismiss && <state.dismissIcon />}
diff --git a/packages/agentic/components/src/components/tag/spec/accessibility.md b/packages/agentic/components/src/components/tag/spec/accessibility.md
index 97385ba986..f0cd645d15 100644
--- a/packages/agentic/components/src/components/tag/spec/accessibility.md
+++ b/packages/agentic/components/src/components/tag/spec/accessibility.md
@@ -48,10 +48,15 @@ a row of tags is one tab stop per enabled tag. Enter and Space activate the
 focused tag. A disabled tag stays in the accessibility tree and reports its
 disabled state, so it can still be read.
 
-The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-Every platform receives the native focus-ring request; rendering depends on
-platform support. The mounted two-ring visual and its resolved rounded or
-circular radius are retained for the custom path.
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
 
 ## Contrast
 
diff --git a/packages/agentic/components/src/components/tag/spec/interaction.md b/packages/agentic/components/src/components/tag/spec/interaction.md
index 432831ad7d..e82cf316ff 100644
--- a/packages/agentic/components/src/components/tag/spec/interaction.md
+++ b/packages/agentic/components/src/components/tag/spec/interaction.md
@@ -36,13 +36,15 @@ in this package.
 
 ## Focus visual
 
-The root follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
-Every platform receives the native focus-ring request, with rendering support
-and appearance delegated to its renderer, while the custom
-visual remains mounted but hidden. On the retained custom path, the two-ring
-visual follows the resolved radius and appears while the root is focused and
-enabled, including pointer focus. This adaptation does not introduce a new
-modality guarantee.
+The focus target follows the [shared focus visual policy](../../AGENTS.md#focus-visual-policy).
+Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
+to a private `FocusRing` slot. Its configured ring Views remain mounted on the
+custom path, but are visible only while focused with keyboard modality from
+`useRootSettings`. Programmatic focus follows the last root modality; pointer
+focus stays hidden unless the composition hook uses `alwaysVisible`. That
+override selects the custom path and still requires focus. Disabled or
+noninteractive targets show no custom ring. The visual is decorative and cannot
+intercept input; native ring appearance remains renderer-owned.
 
 When the caller removes a tag on activation, the focused element is destroyed.
 Move focus deliberately in that handler, to the next tag or to the container, or
diff --git a/packages/agentic/components/src/components/tag/spec/source.json b/packages/agentic/components/src/components/tag/spec/source.json
index e695409d72..e0fab02cf1 100644
--- a/packages/agentic/components/src/components/tag/spec/source.json
+++ b/packages/agentic/components/src/components/tag/spec/source.json
@@ -3,7 +3,7 @@
   "component": "tag",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-11",
+  "reviewedAt": "2026-09-12",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/tag/spec/tokens.yaml b/packages/agentic/components/src/components/tag/spec/tokens.yaml
index f3c2324a75..6b6e480dec 100644
--- a/packages/agentic/components/src/components/tag/spec/tokens.yaml
+++ b/packages/agentic/components/src/components/tag/spec/tokens.yaml
@@ -38,7 +38,7 @@ bindings:
       secondaryDisabled: color.backgroundNeutralSubtleDisabled
     userStyle: applied last by useTagStyles_unstable
 
-  focusVisual:
+  FocusRing:
     borderRadius: resolved root borderRadius
     innerColor: color.strokeFocusInner
     innerWidth: strokeWidth.thin
diff --git a/packages/agentic/components/src/components/tag/spec/usage.md b/packages/agentic/components/src/components/tag/spec/usage.md
index c81a2c4e48..1140d88372 100644
--- a/packages/agentic/components/src/components/tag/spec/usage.md
+++ b/packages/agentic/components/src/components/tag/spec/usage.md
@@ -104,3 +104,9 @@ cannot be removed.
 
 Trying to give the dismiss glyph its own handler or its own focus. There is one
 target, and it is the whole tag.
+
+## Scene root
+
+Render the scene inside `ThemedRoot` so focus policy can query `useRootSettings`.
+A nested theme boundary may override appearance without creating a separate
+input-modality tracker. Component test scenes use the shared themed renderer.
diff --git a/packages/agentic/components/src/components/tag/tag.test.tsx b/packages/agentic/components/src/components/tag/tag.test.tsx
index 16162d06bc..44639c211b 100644
--- a/packages/agentic/components/src/components/tag/tag.test.tsx
+++ b/packages/agentic/components/src/components/tag/tag.test.tsx
@@ -35,7 +35,7 @@ describe('Tag', () => {
       minHeight: 24,
       minWidth: 24,
     });
-    expect(getRoot(component).children).toHaveLength(3);
+    expect(getRoot(component).children).toHaveLength(2);
   });
 
   it('forwards press and interaction handlers while updating background state', async () => {
@@ -77,7 +77,7 @@ describe('Tag', () => {
 
     expect(StyleSheet.flatten(component.getByTestId('leading').props.style)).toMatchObject({ height: 20, width: 20 });
     expect(StyleSheet.flatten(component.getByTestId('dismiss').props.style)).toMatchObject({ height: 16, width: 16 });
-    expect(getRoot(component).children).toHaveLength(4);
+    expect(getRoot(component).children).toHaveLength(3);
   });
 
   it('renders icon-only layout with a required accessible label', async () => {
@@ -136,22 +136,14 @@ describe('Tag', () => {
     expect(StyleSheet.flatten(text.props.style).color).toBe(tokens.color.foregroundNeutralOnloud);
   });
 
-  it('uses native focus visuals while retaining the hidden custom rings', async () => {
+  it('uses native focus visuals without mounting custom rings', async () => {
     const component = await renderTag({ content: 'Focused' });
     const root = getRoot(component);
 
     await fireEvent(root, 'focus', {});
     expect(root.props.enableFocusRing).toBe(true);
 
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: defaultFlexTokens.color.strokeFocusOuter,
-      borderWidth: defaultFlexTokens.strokeWidth.thick,
-    });
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
-    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
-      borderColor: defaultFlexTokens.color.strokeFocusInner,
-      borderWidth: defaultFlexTokens.strokeWidth.thin,
-    });
+    expect(component.queryByTestId('focus-visual', { includeHiddenElements: true })).toBeNull();
   });
 
   it.each([
@@ -216,6 +208,6 @@ describe('Tag', () => {
 
     expect(component.queryByTestId('dismiss')).toBeNull();
     expect(getRootStyle(component).backgroundColor).toBe('hotpink');
-    expect(getRoot(component).children).toHaveLength(3);
+    expect(getRoot(component).children).toHaveLength(2);
   });
 });
diff --git a/packages/agentic/components/src/components/tag/tag.types.ts b/packages/agentic/components/src/components/tag/tag.types.ts
index b5e119ec1c..a45d193fd2 100644
--- a/packages/agentic/components/src/components/tag/tag.types.ts
+++ b/packages/agentic/components/src/components/tag/tag.types.ts
@@ -10,7 +10,7 @@ import type {
 } from '@fluentui-react-native/framework-base';
 import type { ThemeState } from '@fluentui-react-native/design';
 
-import type { FocusVisualProps } from '../../primitives/focus-visual/focus-visual.types';
+import type { FocusVisualsSlots } from '../../common/useFocusVisuals';
 import type { Icon } from '../../primitives/icon/icon';
 import type { Text } from '../text/text';
 
@@ -39,11 +39,10 @@ export type TagRootProps = OwnedRootProps<PropsWithRefOf<typeof Pressable>>;
 
 export type TagProps = TagStateProps & ComponentProps<TagSlots, TagRootProps>;
 
-export type TagState = ComponentState<TagSlots> &
+export type TagState = ComponentState<TagSlots & FocusVisualsSlots> &
   Required<TagStateProps> &
   Omit<ThemeState, 'appearance'> &
   PressableState & {
-    focusVisualProps?: FocusVisualProps;
     hasContent: boolean;
     hasLeadingIcon: boolean;
     iconOnly: boolean;
diff --git a/packages/agentic/components/src/components/tag/useTag.ts b/packages/agentic/components/src/components/tag/useTag.ts
index 540be941dc..a73cc5c394 100644
--- a/packages/agentic/components/src/components/tag/useTag.ts
+++ b/packages/agentic/components/src/components/tag/useTag.ts
@@ -4,7 +4,7 @@ import { useThemeState } from '@fluentui-react-native/design';
 import { useAccessibilityLabelWarning, useOptionalSlot, usePressableState, useSlot } from '@fluentui-react-native/framework-base';
 
 import { semanticIconSources } from '../../common/iconSources';
-import { getNativeFocusVisualProps } from '../../common/focusVisualPolicy';
+import { useFocusVisuals } from '../../common/useFocusVisuals';
 import { Icon } from '../../primitives/icon/icon';
 import { Text } from '../text/text';
 import type { TagProps, TagState } from './tag.types';
@@ -52,7 +52,6 @@ export function useTag_unstable(props: TagProps): TagState {
   const themeState = useThemeState();
   const [pressableProps, pressableState] = usePressableState({
     ...rest,
-    ...getNativeFocusVisualProps(),
     accessibilityRole: 'button',
     accessibilityState: {
       ...accessibilityState,
@@ -63,7 +62,9 @@ export function useTag_unstable(props: TagProps): TagState {
     focusable: rest.focusable ?? !disabled,
   });
 
-  const root = useSlot(Pressable, { ...pressableProps, ref: rootRef });
+  const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled });
+
+  const root = useSlot(Pressable, { ...pressableProps, ...nativeFocusProps, ref: rootRef });
   const content = useOptionalSlot(Text, iconOnly ? null : contentProp, {
     defaultProps: { children: 'Tag text' },
     renderByDefault: true,
@@ -77,6 +78,7 @@ export function useTag_unstable(props: TagProps): TagState {
   });
 
   return {
+    FocusRing,
     root,
     content,
     leadingIcon,
diff --git a/packages/agentic/components/src/components/tag/useTagStyles.ts b/packages/agentic/components/src/components/tag/useTagStyles.ts
index b1130d5268..83005e149a 100644
--- a/packages/agentic/components/src/components/tag/useTagStyles.ts
+++ b/packages/agentic/components/src/components/tag/useTagStyles.ts
@@ -1,6 +1,6 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
-import { createFocusVisualProps } from '../../common/focusVisualPolicy';
+import { applyFocusRingStyles } from '../../common/applyFocusRingStyles';
 
 import { tagStyles, getTagBackgroundStyle, getTagContentStyle, getTagForegroundStyle, getTagIconSize, getTagRootStyle } from './tag.styles';
 import type { TagState } from './tag.types';
@@ -14,14 +14,7 @@ export function useTagStyles_unstable(state: TagState) {
   const contentStyle: StyleProp<TextStyle> = [tagStyles.content, getTagContentStyle(state), foreground];
   const iconSizes = getTagIconSize(size);
 
-  state.focusVisualProps = createFocusVisualProps({
-    borderRadius: rootLayoutStyle.borderRadius,
-    innerColor: state.tokens.color.strokeFocusInner,
-    innerWidth: state.tokens.strokeWidth.thin,
-    outerColor: state.tokens.color.strokeFocusOuter,
-    outerWidth: state.tokens.strokeWidth.thick,
-    visible: state.focused && !state.disabled,
-  });
+  applyFocusRingStyles(state.FocusRing, state, rootLayoutStyle.borderRadius);
   attachSlotProps(state.root, { style: rootStyle });
   if (state.content) {
     attachSlotProps(state.content, { style: contentStyle });
diff --git a/packages/agentic/components/src/index.test.ts b/packages/agentic/components/src/index.test.ts
index 0776fe567d..80beba8477 100644
--- a/packages/agentic/components/src/index.test.ts
+++ b/packages/agentic/components/src/index.test.ts
@@ -24,6 +24,7 @@ describe('component exports', () => {
         'TabList',
         'Tag',
         'Text',
+        'applyFocusRingStyles',
         'renderAccordion_unstable',
         'renderAvatar_unstable',
         'renderBadge_unstable',
@@ -60,6 +61,7 @@ describe('component exports', () => {
         'useDivider_unstable',
         'useInputStyles_unstable',
         'useInput_unstable',
+        'useFocusVisuals',
         'useListItemStyles_unstable',
         'useListItem_unstable',
         'useListboxItemStyles_unstable',
diff --git a/packages/agentic/components/src/index.ts b/packages/agentic/components/src/index.ts
index c142a2d1f5..271b5f6d49 100644
--- a/packages/agentic/components/src/index.ts
+++ b/packages/agentic/components/src/index.ts
@@ -1,3 +1,7 @@
+export { useFocusVisuals } from './common/useFocusVisuals';
+export type { FocusVisualsOptions, FocusVisualsState } from './common/useFocusVisuals';
+export { applyFocusRingStyles } from './common/applyFocusRingStyles';
+
 export { Accordion } from './components/accordion/accordion';
 export type {
   AccordionLayout,

From aaaadb141fb40c78824724850689fcabf80fc05f Mon Sep 17 00:00:00 2001
From: Jason Morse <jasonmo@microsoft.com>
Date: Mon, 14 Sep 2026 15:33:34 -0700
Subject: [PATCH 06/11] initial focus update plan

---
 .../agentic-component-authoring/SKILL.md      |  21 +-
 .../references/focus-macos.md                 | 165 ++++++
 .../references/focus-windows.md               | 143 +++++
 .../references/focus.md                       | 164 ++++++
 .../references/state-and-accessibility.md     |   4 +
 .../references/styles-and-tokens.md           |   2 +-
 .../references/types-and-slots.md             |   5 +
 .../windows-fabric-native-components.md       |   6 +
 packages/agentic/components/AGENTS.md         |   4 +
 .../agentic/components/WIN32-FOCUS-PLAN.md    | 528 ++++++++++++++++++
 .../components/src/components/AGENTS.md       |  41 +-
 packages/framework-base/AGENTS.md             |   8 +
 12 files changed, 1053 insertions(+), 38 deletions(-)
 create mode 100644 .github/skills/agentic-component-authoring/references/focus-macos.md
 create mode 100644 .github/skills/agentic-component-authoring/references/focus-windows.md
 create mode 100644 .github/skills/agentic-component-authoring/references/focus.md
 create mode 100644 packages/agentic/components/WIN32-FOCUS-PLAN.md

diff --git a/.github/skills/agentic-component-authoring/SKILL.md b/.github/skills/agentic-component-authoring/SKILL.md
index df27ed89b8..d83ef87e6c 100644
--- a/.github/skills/agentic-component-authoring/SKILL.md
+++ b/.github/skills/agentic-component-authoring/SKILL.md
@@ -25,16 +25,17 @@ authoring rule in one always-loaded instruction file.
 
 ## Load focused references
 
-| Work                                                                         | Reference                                                                          |
-| ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| Source interpretation, provenance, contract drafting, review, or divergences | [Contract authoring](../agentic-component-contract-authoring/SKILL.md)             |
-| Public props, slots, state types, native prop exposure, or exports           | [Types and slots](references/types-and-slots.md)                                   |
-| Defaults, derived state, interaction hooks, accessibility, or slots          | [State and accessibility](references/state-and-accessibility.md)                   |
-| Tokens, theme caching, state precedence, or slot style application           | [Styles and tokens](references/styles-and-tokens.md)                               |
-| Pure slot rendering, component assembly, or display names                    | [Rendering and assembly](references/rendering.md)                                  |
-| Runtime tests, type tests, snapshots, Storybook stories, or validation       | [Tests and stories](references/tests-and-stories.md)                               |
-| Native React Native Windows Fabric components, codegen, registration, or UIA | [Windows Fabric native components](references/windows-fabric-native-components.md) |
-| Cross-component duplication, shared extraction, or dependency hygiene        | [Package optimization](../agentic-component-optimization/SKILL.md)                 |
+| Work                                                                         | Reference                                                                                                                              |
+| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| Source interpretation, provenance, contract drafting, review, or divergences | [Contract authoring](../agentic-component-contract-authoring/SKILL.md)                                                                 |
+| Public props, slots, state types, native prop exposure, or exports           | [Types and slots](references/types-and-slots.md)                                                                                       |
+| Defaults, derived state, interaction hooks, accessibility, or slots          | [State and accessibility](references/state-and-accessibility.md)                                                                       |
+| Focus, focus visuals, keyboard activation, or native focus refs              | [Common focus authoring](references/focus.md), then [Windows/Win32](references/focus-windows.md) or [macOS](references/focus-macos.md) |
+| Tokens, theme caching, state precedence, or slot style application           | [Styles and tokens](references/styles-and-tokens.md)                                                                                   |
+| Pure slot rendering, component assembly, or display names                    | [Rendering and assembly](references/rendering.md)                                                                                      |
+| Runtime tests, type tests, snapshots, Storybook stories, or validation       | [Tests and stories](references/tests-and-stories.md)                                                                                   |
+| Native React Native Windows Fabric components, codegen, registration, or UIA | [Windows Fabric native components](references/windows-fabric-native-components.md)                                                     |
+| Cross-component duplication, shared extraction, or dependency hygiene        | [Package optimization](../agentic-component-optimization/SKILL.md)                                                                     |
 
 A new higher-order component normally needs every reference. A focused fix should load only the affected reference and
 its immediate neighbors. Keep the component's colocated `SPEC.md` and companion files authoritative for its contract.
diff --git a/.github/skills/agentic-component-authoring/references/focus-macos.md b/.github/skills/agentic-component-authoring/references/focus-macos.md
new file mode 100644
index 0000000000..f27ae558a2
--- /dev/null
+++ b/.github/skills/agentic-component-authoring/references/focus-macos.md
@@ -0,0 +1,165 @@
+# macOS focus authoring
+
+Read [common focus authoring](focus.md) first. Match shared accessibility goals,
+but do not transplant Windows click-focus, modifier, or key-up policies into
+AppKit.
+
+**Reviewed implementation:** local `react-native-macos` 0.81.9, including Fabric
+View, repository FocusZone, and Callout implementations, September 14, 2026.
+Verify the renderer branch and resolved component before use. A `.macos.tsx`
+file can be a stub: V1 Checkbox's macOS entrypoint warns and renders null, so it
+is not a valid macOS focus reference.
+
+## First responder, key window, and actual target
+
+AppKit routes keyboard input through the key window and its first responder.
+Keep window activation separate from control focus. A window can retain a first
+responder while inactive; React `focused` alone does not describe whether its
+focus visual should be presented as active.
+
+- Prefer a supported native host ref/command. In native adapters request focus
+  with the owning window's first-responder mechanism on the main thread.
+- Do not treat `makeFirstResponder` returning true as conclusive proof that the
+  requested view owns focus. The current responder can refuse to resign, and
+  AppKit documents a case where the window becomes responder when the requested
+  object refuses. Confirm the actual target through focus events/observation.
+- Resolve the actual editable control. An NSTextField may use the window's
+  shared field editor; the first responder can therefore differ from the visible
+  control/ref. Native focus-within mapping must recognize this relationship.
+- Keep native view identity scoped to the mounted window/surface. Clear it on
+  detach/recycle and use common React 19 ref composition, not legacy componentRef
+  exposure or global numeric-tag lookup.
+
+Local references:
+`packages\components\FocusZone\macos\RCTFocusZone.m:24-35,122-129`;
+`packages\components\FocusZone\macos\RCTFocusZoneComponentView.mm:118-179`.
+Installed RNmacOS `React\Fabric\Mounting\ComponentViews\View\RCTViewComponentView.mm:1719-1804`
+implements focus/blur commands and responder event emission.
+
+## Pointer focus and click-through
+
+Do not force Windows-style focus-before-press on ordinary macOS controls.
+V1 `useOnPressWithFocus` recognizes macOS as focus-capable but only requests
+click focus on Windows/Win32. The installed Fabric View also overrides
+`needsPanelToBecomeKey` with a comment preserving mouse-versus-keyboard focus.
+
+`acceptsFirstMouse` controls click-through in an inactive window; it is not an
+alias for `focusable`, first-responder acceptance, or keyboard ring visibility.
+Test first click to activate a window separately from an actual control action.
+Menus can intentionally focus on hover, so document that owner-specific
+exception rather than forcing all click/hover paths into one rule.
+
+Evidence: `packages\utils\interactive-hooks\src\useOnPressWithFocus.ts:14-29`;
+installed RNmacOS `RCTViewComponentView.mm:1769-1779`;
+`packages\components\Menu\src\MenuItem\useMenuItem.ts:68-120`.
+
+## Keyboard navigation, shortcuts, and editing
+
+- V1 key helpers prefer key-down on macOS, versus key-up on Windows/Win32.
+  The macOS branches use `validKeysDown`/`validKeysUp`; current RNmacOS native
+  handling also has `keyDownEvents`/`keyUpEvents`. Resolve and validate the
+  compatibility path instead of configuring both indiscriminately.
+- Matching native handled-key entries suppress AppKit's `super` handling.
+  Register only keys owned by the control/scope so key equivalents, native
+  navigation, and text editing are not swallowed.
+- Preserve Command shortcuts, Option text movement, Control/VoiceOver chords,
+  IME composition, and the distinction between Return and Space/default-button
+  activation. Do not copy Win32's modifier allowance or TabList Ctrl+Tab behavior.
+- Confirm exactly-once keyboard/accessibility activation; an AX action is not
+  equivalent evidence to a physical key sequence.
+- Use AppKit's key-view loop where applicable. Respect keyboard-navigation/Full
+  Keyboard Access settings and test enabled/disabled settings explicitly.
+  `NSApplication.isFullKeyboardAccessEnabled` is not KVO-observable according to
+  Apple; do not invent a KVO subscription or assume one cached startup value
+  remains current.
+- Do not equate VoiceOver navigation focus with the application's keyboard first
+  responder. Validate role/name/value and native action behavior in both modes.
+
+Evidence: `packages\utils\interactive-hooks\src\useKeyProps.ts:8-95,114-126`;
+installed RNmacOS `RCTViewComponentView.mm:1807-1861`.
+
+## FocusZone and Fabric wrapper lifetime
+
+The local macOS FocusZone translates key events, recalculates the key-view loop,
+and falls back to mounted descendant order when AppKit collapses a Fabric-backed
+zone to one key-loop entry. The Fabric wrapper deliberately does not participate
+as another first-responder stop; it forwards focus to its content view.
+
+Preserve that single-owner behavior. Do not add a second JS roving loop to the
+same keys. Recompute eligibility when children mount/unmount and when props
+change, and clear the default responder on recycle. Retain direction, wrap/stop,
+RTL, nested zones, scrolling, and editable-child semantics.
+
+Evidence: `packages\components\FocusZone\macos\RCTFocusZone.m:584-675`;
+`packages\components\FocusZone\macos\RCTFocusZoneComponentView.mm:118-195`.
+
+## Popup windows and lifecycle
+
+Callout's AppKit window can become key but not main. Its `setInitialFocus` and
+`focusWindow` make the popup window key; that alone does not establish a particular
+child as first responder. Its separate Fabric touch attachment also demonstrates
+why React ancestry is not sufficient evidence for popup input capture.
+
+Define and test initial child focus after content attachment, Escape, nested
+popup dismissal, outside click, window/application deactivation, and guarded
+return to the parent control. Do not reactivate the application or steal the
+outside-click target's focus as an unconditional cleanup action.
+
+The legacy ContextualMenu uses a macOS timer after a layout effect. Treat it as
+evidence of a native readiness problem, not a reusable delay constant. Prefer a
+mount/window-ready handshake with cancellation and focus confirmation. Keep a
+bounded, documented workaround only if the supported renderer has no such path.
+
+Reuse lifecycle-safe local event-monitor/observer ownership: install once for
+the owning popup/window, remove exactly once, and capture weak native owners.
+Do not install OS-global keyboard hooks or require desktop-driver permissions
+for ordinary production focus behavior.
+
+Evidence:
+`packages\native\Callout\macos\CalloutWindow.swift:9-38`;
+`packages\native\Callout\macos\CalloutView.swift:33-45,142-216`;
+`packages\native\Callout\macos\RCTCalloutComponentView.mm:96-132`;
+`packages\native\Callout\macos\GuardedEventMonitor.swift:1-29`;
+`packages\components\ContextualMenu\src\ContextualMenu.tsx:39-55`.
+
+## Native versus custom ring drawing
+
+Keep native macOS rings enabled by default unless the reviewed control requires
+a custom path. The installed Fabric View draws a rounded AppKit focus mask only
+when `enableFocusRing` is true. A focusable view or an enum property by itself is
+not proof that the ring mask/drawing is implemented correctly.
+
+When drawing a custom ring, disable the competing native path and preserve the
+decorative/hit-testing contract. Revalidate mask bounds after layout/radius
+changes, key-window transitions, clipping, appearance, Increase Contrast, and
+backing-scale changes. Use AppKit points and conversions; do not copy Windows
+Composition physical-pixel calculations into NSView layout.
+
+Evidence: installed RNmacOS `RCTViewComponentView.mm:1729-1753` and Apple's
+focus-mask documentation below. Ring colors remain a native/theme concern;
+do not resolve opaque system colors through a guessed web-color fallback.
+
+## Native service candidates and qualification
+
+An opt-in native projection can help with window activity, keyboard-navigation
+preferences, renderer-scoped target observation, or popup readiness if public
+React Native APIs do not supply them. A TurboModule is suitable for a non-view
+capability/snapshot service; view focus belongs to refs or typed native commands.
+Keep generated Apple glue in Objective-C++ as required by the pinned codegen;
+use AppKit/Swift/C++ behind that boundary without introducing UIKit assumptions.
+
+Run physical keyboard/pointer scenarios, VoiceOver, active/inactive windows,
+first-click behavior, keyboard-navigation settings, editable field editors, and
+native/custom rings. Include Paper only where it remains supported and Fabric
+as an independently qualified endpoint. This Windows-based documentation
+investigation did not execute a macOS native run.
+
+## Public references
+
+- [AppKit makeFirstResponder](<https://developer.apple.com/documentation/appkit/nswindow/makefirstresponder(_:)>)
+- [AppKit first responder and key-view loop](https://developer.apple.com/documentation/appkit/nswindow)
+- [Click-through and acceptsFirstMouse](<https://developer.apple.com/documentation/appkit/nsview/acceptsfirstmouse(for:)>)
+- [Full Keyboard Access query](https://developer.apple.com/documentation/appkit/nsapplication/isfullkeyboardaccessenabled)
+- [AppKit field editor](https://developer.apple.com/library/archive/documentation/TextFonts/Conceptual/CocoaTextArchitecture/TextEditing/TextEditing.html)
+- [Focus ring mask bounds](https://developer.apple.com/documentation/appkit/nsview/focusringmaskbounds)
+- [Focus ring mask drawing](<https://developer.apple.com/documentation/appkit/nsview/drawfocusringmask()>)
diff --git a/.github/skills/agentic-component-authoring/references/focus-windows.md b/.github/skills/agentic-component-authoring/references/focus-windows.md
new file mode 100644
index 0000000000..6e9d7dd276
--- /dev/null
+++ b/.github/skills/agentic-component-authoring/references/focus-windows.md
@@ -0,0 +1,143 @@
+# Windows and Win32 focus authoring
+
+Read [common focus authoring](focus.md) first. This file applies the shipped V1
+Win32 behavioral model to both Windows endpoints, while keeping their native
+implementations separate.
+
+## Identify the endpoint
+
+| Endpoint  | Reviewed local implementation                                                  | Native owner                                                        |
+| --------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------- |
+| `win32`   | `@office-iss/react-native-win32` 0.81.8, Paper; prebuilt REX host in Storybook | Office Win32 host/view implementation                               |
+| `windows` | `react-native-windows` 0.81.35, Fabric                                         | Windows App SDK Composition component views and React Native island |
+
+These are observed dependency versions on September 14, 2026, not minimum-version
+guarantees for every feature. Recheck the lockfile, platform resolution, and host
+before implementation. Office Win32 Paper is **not** RNW's old UWP XAML renderer,
+even though both are described as old-architecture/Paper in some contexts.
+
+## Carry V1 behavior across, not its plumbing
+
+For both endpoints preserve, unless the component's reviewed contract differs:
+
+- focus-before-activation for Windows pointer interaction where the V1 control
+  requests it;
+- one action per Enter/Space/accessibility invocation, including menu-close and
+  keydown/blur/keyup sequences;
+- selection/focusability commit before imperative focus and Narrator announcement;
+- explicit per-control disabled discoverability;
+- menu hover-focus suppression, navigation ownership, and guarded focus return.
+
+Use existing V1 Button/Checkbox/RadioGroup/Switch E2E sequences as scenarios for
+both Windows test lanes. The V1 implementation need not run inside Fabric: map
+its observed behavior to a shared scenario contract, run V1 on Win32 as the
+reference, then verify the new implementation independently on both renderers.
+Do not require matching native element classes or identical ring pixels.
+
+Sources:
+`packages\utils\interactive-hooks\src\useOnPressWithFocus.ts:14-29`;
+`packages\components\Button\src\useButton.ts:15-17,40-66,99-113`;
+`packages\components\TabList\src\Tab\useTab.win32.ts:64-110`;
+`packages\components\Menu\src\MenuItem\useMenuItem.ts:68-120`.
+
+## Focus requests and native identity
+
+On Win32 use the host-supported ref/command path. V1 `componentRef` and
+`useViewCommandFocus` are compatibility evidence, not the desired new public API.
+Apply the common React 19 ref rules and resolve the actual mounted target.
+
+On Fabric prefer the supported host focus method or a generated native command.
+Native adapters operate on the correct mounted `ComponentView` in its owning
+surface/island. They must not reuse Paper UIManager/view-manager identifiers or
+assume a React ref can be serialized into a TurboModule argument.
+
+The existing Fabric FocusZone uses `TryFocus(FocusState::Keyboard)` and checks
+the root's focused component after the request
+(`packages\components\FocusZone\windows\FRNFocusZone\FocusZoneComponentView.cpp:175-224`).
+Reuse this request-versus-observation pattern. Do not report success merely
+because JavaScript called an optional `.focus()` method.
+
+RNW's reviewed root stores a native focus state and resolves programmatic focus
+using its own policy. A request for the already-focused component returns early.
+This matters for modality-only changes: native focus reasons and the design
+root's modality are related, but are not automatically the same source.
+Do not synthesize a blur/refocus cycle simply to redraw a ring.
+
+Installed evidence:
+`Microsoft.ReactNative\Fabric\Composition\RootComponentView.cpp:79-118`.
+This native implementation detail is not a promised public JavaScript API.
+
+## Keyboard delivery and exactly-once activation
+
+- Inspect the actual installed Pressable and native view handlers. Do not add
+  key-up activation on top of an existing native press action.
+- V1 `useKeyProps` prefers key-up on Windows/Win32. It supplies Win32
+  handled-key descriptors, but its Windows branch deliberately omits descriptors
+  because of the historical `key` versus `code` mismatch. Translate and test the
+  pinned Fabric representation instead of copying either branch blindly.
+- Treat native `Handled`/capture registration and JavaScript
+  `preventDefault`/`stopPropagation` as separate mechanisms. Establish which
+  cancellation reaches native navigation at each phase.
+- Pair keyboard invocation within the appropriate scene/gesture lifetime.
+  Do not reproduce Button's module-global arming flag as a process-global
+  cross-scene dependency.
+- Forward caller handlers and preserve text editing, IME, modifiers, key repeat,
+  and accessibility actions. Global root capture observes input; it must not
+  consume every key.
+
+Sources: `packages\utils\interactive-hooks\src\useKeyProps.ts:8-95,114-126`;
+`packages\components\FocusZone\windows\FRNFocusZone\FocusZoneComponentView.cpp:71-133`.
+
+## Native and custom focus visuals
+
+Current new-component defaults remain native on Fabric and custom on Win32.
+V1 uses native Win32 rings and appearance-specific focused borders, so this is
+a choice to qualify, not evidence that Win32 native rings are unavailable.
+
+- Request native rings only on the actual focus owner. Menu hover focus and
+  disabled-focusable cases may require a different visibility policy from a
+  generic keyboard-focus rule.
+- On the custom path retain the optional slot and mounted configured ring Views.
+  Keep the root/slot ref stable through focus and theme changes.
+- Qualify Button primary versus high contrast separately; do not apply its
+  two-tone Win32 inner-border recipe universally.
+- Use platform/Fluent colors for native drawing. Preserve opaque system-color
+  values; do not turn them into guessed CSS literals.
+- For Fabric native visuals, use the renderer's focus/border hosting and
+  lifecycle. React layout units and Composition physical pixels differ; apply
+  the validated point-scale conversion. Test clipping/hosting and recycling.
+
+RNW 0.81.35 has explicit focus hosting and native theme handling in installed
+`Microsoft.ReactNative\Fabric\Composition\CompositionViewComponentView.cpp`
+and `Theme.cpp`. See [Windows Fabric native components](windows-fabric-native-components.md)
+for codegen, UI-thread, registration, native visual, and UIA requirements.
+
+## Collections, popups, and platform services
+
+Use one native/JS navigation owner. Wait for committed target eligibility and
+then confirm the resulting native focus; handle disabled/removed destinations.
+Preserve Narrator's selection-before-focus order and test rapid navigation.
+
+Distinguish a Fabric island/popup and an Office Win32 popup. Returning to a
+window is not the same as restoring its intended control. Carry a live target
+and dismissal reason, and never steal focus after an outside click or host
+deactivation.
+
+Consider `native-lib` only for a demonstrated missing capability such as
+surface-scoped native focus observation, window activation, or safely shared
+native target resolution. Keep view commands in their owning native components.
+Fabric TurboModule support does not establish registration support in a
+prebuilt Office Win32 host; that endpoint needs its own host integration or an
+explicit capability-unavailable result.
+
+## Qualification
+
+Run separate Win32 and Fabric native lanes for the same behavior scenarios:
+pointer focus, Enter/Space, stale key-up, repeat/modifiers, accessibility invoke,
+selection-before-focus, disabled/removed targets, menu hover, popup return, and
+same-target modality changes. Include Narrator, high contrast, display scaling,
+active/inactive windows, and nested surfaces.
+
+Gate on actual focused element and action/announcement count, not just selected
+React state or a mocked ref call. A skipped input test is not qualification.
+Use owned app/Metro lifecycle commands and preserve unrelated sessions.
diff --git a/.github/skills/agentic-component-authoring/references/focus.md b/.github/skills/agentic-component-authoring/references/focus.md
new file mode 100644
index 0000000000..3aafc59bf2
--- /dev/null
+++ b/.github/skills/agentic-component-authoring/references/focus.md
@@ -0,0 +1,164 @@
+# Common desktop focus authoring
+
+Read this file for every focusable component, collection, popup, focus hook, or
+native focus adapter. Then load only the applicable platform detail:
+
+- [Windows and Win32](focus-windows.md)
+- [macOS](focus-macos.md)
+
+These files define authoring and review obligations. Proposed abstractions in
+the [desktop focus plan](../../../../packages/agentic/components/WIN32-FOCUS-PLAN.md)
+are not APIs that already exist. Keep each component's reviewed contract and
+source-specific divergences authoritative.
+
+## Behavioral authority and platform evidence
+
+Use shipped V1 Win32 behavior as the compatibility model for **both** Office
+Win32 Paper and React Native Windows Fabric. Preserve user-observable outcomes:
+which element focuses, action count/timing, selection and announcement order,
+disabled discoverability, key ownership, and dismissal return. Implement those
+outcomes through each renderer's supported APIs, not copied Paper internals.
+
+On macOS preserve the same accessibility goals but follow AppKit's first
+responder, key-window, keyboard-navigation, click, and shortcut conventions.
+Document intentional differences rather than imposing Windows input behavior.
+
+Before changing behavior, record the public export, platform-resolved file,
+renderer/version, host, and relevant V1 sequence. Distinguish declarations,
+implementation, authored tests, and native results actually executed. A passing
+snapshot or `Platform.OS` mock does not prove native focus delivery.
+
+## Keep these concepts separate
+
+| Concept                | Owner and invariant                                                                   |
+| ---------------------- | ------------------------------------------------------------------------------------- |
+| Input modality         | Scene controller; stable `RootSettings`, shared by nested theme boundaries.           |
+| Native self-focus      | Actual mounted focus target, not an ancestor receiving a bubbled event.               |
+| Focus within           | Explicit scope/ancestor state, never substituted for self-focus.                      |
+| Focus request          | Cancellable intent to move focus; not confirmation that it moved.                     |
+| Focus-visible policy   | Component/scope policy using modality and explicit focus intent.                      |
+| Native window activity | Endpoint adapter; a retained focused object need not belong to the active/key window. |
+| Selection              | Component or collection state according to its controlled/uncontrolled contract.      |
+| Ring geometry/colors   | Styling phase and renderer, not navigation or activation logic.                       |
+
+Programmatic focus must not rewrite physical modality to keyboard. A keyboard
+menu invocation, hover focus, accessibility action, and dismissal restoration
+may need different visual intent. Keep that intent scoped to the request/owner.
+
+## Modern refs and slot composition
+
+- Agentic components target React 19.1.4+: receive `ref` as a prop and preserve the
+  declared native root using `PropsWithRefOf<typeof Root>`. Do not add legacy
+  `componentRef` props or `forwardRef` wrappers to new components.
+- Use `React.ComponentRef<typeof Host>` for ordinary host-instance typing when
+  supported. Codegen schemas are a separate grammar: preserve their validated
+  ref spelling, including existing `React.ElementRef`, until the pinned
+  generator accepts a change. A newer TypeScript alias does not establish
+  codegen compatibility.
+- The public root ref, internal focus-target ref, popup-anchor ref, and scope ref
+  can refer to different native objects. Card's structural root must not silently
+  become its overlay; Input's public View must not silently become its TextInput.
+  Use the inner slot's ref or a deliberately reviewed imperative API.
+- Reuse Framework Base's slot ref composition. It merges base-slot/render refs
+  and preserves refs returned by slot transforms; do not create another
+  component-local merge-ref helper or write into the consumer's ref yourself.
+- Forward refs through the custom JSX runtime and compatible `as` overrides.
+  Do not assume the callable slot function is a mounted native target.
+- Support object refs, callback refs, React 19 callback cleanup, null detach,
+  replacement, and development setup/cleanup cycles. Registration cleanup must
+  be idempotent and cannot remove a newer target registered under the same key.
+- Resolve targets at commit/attachment time, not while rendering. A registration
+  should identify the current host, owning surface/window, and mount generation.
+  Never keep a naked renderer tag as a permanent target identity.
+- A ref becoming non-null is not proof that native focusability/layout has been
+  committed. Schedule focus from the owning effect/lifecycle after the needed
+  state is applied, then confirm through the native focus event or an explicit
+  native result. Cancel on detach, disable, superseding request, or scope close.
+- Do not call `focus()` during render or expose a success-shaped fallback for
+  unsupported targets. Distinguish requested, confirmed, cancelled, not-mounted,
+  not-focusable, and unsupported outcomes in the proposed adapter contract.
+
+Existing mechanisms: `packages\framework-base\src\component-patterns\slot.ts:14-76,118-142`,
+`render.ts:38-75`, and `useSlot.test.tsx:453-490`. The framework still supports
+older React consumers; do not remove its compatibility behavior merely because
+agentic components use React 19.
+
+## State, activation, and rendering
+
+1. Resolve disabled/interactive state and the actual focus target in
+   `use<Component>_unstable`.
+2. Compose interaction handlers with exactly one activation owner. Native
+   Pressable activation, key handlers, and accessibility actions must not each
+   invoke the same action independently.
+3. Call `useFocusVisuals` after resolving focus. Store its private optional
+   `FocusRing` in state and apply `enableFocusRing` only to the focus target.
+4. In the styling phase call `applyFocusRingStyles` with theme state and resolved
+   radius. Its shared defaults are `strokeFocusInner`/`strokeFocusOuter` and
+   `strokeWidth.thin`/`strokeWidth.thick`. Keep native colors opaque and theme
+   caches immutable; pass disabled/noninteractive targets as unfocused.
+5. Render the optional slot inside the target. Native/custom rings must not
+   compete; mounted custom ring geometry must not change merely on focus/blur.
+
+Current `alwaysVisible` means visible **while focused** for any modality and
+selects the custom path. It does not focus the control or make an unfocused
+control visible. Native window activity remains a separate renderer obligation.
+Do not add this option to every public component prop surface without a contract.
+
+The current root settings are nonreactive. The plan adds opt-in refresh only for
+focused custom-ring owners; do not implement scene-wide React updates or a
+second pointer tracker in each control. Test same-target keyboard/pointer
+changes without a manual rerender.
+
+For nested controls, preserve `target`/`currentTarget` or equivalent native
+identity and separate self-focus from focus-within. Functional Input borders,
+selection visuals, and hover styling are not generic focus rings.
+
+## Collections and popup scopes
+
+- Use one owner for arrows/Home/End/Tab within a scope. Do not run a JS roving
+  algorithm and a native FocusZone over the same keys.
+- Apply selection/focusability changes before requesting a target. Confirm
+  focus before treating it as the active native element; retain controlled
+  selection semantics.
+- Define initial focus and dismissal behavior for keyboard, pointer,
+  accessibility, Escape, outside click, and application deactivation.
+- Restore only to a live eligible target in the intended active window. Do not
+  steal focus back from an outside-click destination.
+- React ancestry is not native-window ancestry. A popup can inherit themes and
+  settings while requiring a separate event attachment to the same controller.
+- Keep navigation and restoration in the owner; leaf MenuItem/Tab components
+  must not invent a global focus manager.
+
+## Abstraction and native boundaries
+
+Extend existing helpers before adding layers. General interaction/target
+contracts belong in Framework Base; modality and appearance remain in design;
+component-specific eligibility, layout, and selection remain in components.
+
+A future `native-lib` may provide opt-in native capabilities and shared native
+projections. It must depend downward on React Native/platform APIs, never on
+design or components. Keep view-bound operations on native refs/generated
+commands. Use TurboModules for non-view services that actually need them.
+Do not add a process-global `focus(tag)` registry, arbitrary OS handle access,
+or production dependencies on the desktop automation driver.
+
+## Required evidence before shipping
+
+- Object/callback refs, cleanup, `as` replacements, ref replacement, and
+  unmount/remount retain exactly one live focus target.
+- Native focus, active/selected state, event order, and action counts agree.
+- Disabled and disabled-focusable policies are intentional per control.
+- Same-target modality changes update only the relevant visual consumer.
+- Nested owners, popup boundaries, and independent scenes do not leak state.
+- Native keyboard/pointer and accessibility runs are non-skipped on each
+  supported endpoint; include Narrator/VoiceOver and active/inactive windows.
+- Theme/high contrast, scaling, clipping, rounded targets, and native/custom
+  ring exclusivity have renderer-specific evidence.
+
+## Public references
+
+- [React 19 refs and cleanup](https://react.dev/blog/2024/12/05/react-19)
+- [React imperative handles](https://react.dev/reference/react/useImperativeHandle)
+- [React Native 0.81 native commands](https://reactnative.dev/docs/0.81/the-new-architecture/fabric-component-native-commands)
+- [Types and slots](types-and-slots.md)
+- [State and accessibility](state-and-accessibility.md)
diff --git a/.github/skills/agentic-component-authoring/references/state-and-accessibility.md b/.github/skills/agentic-component-authoring/references/state-and-accessibility.md
index 2587845514..d667eb4f84 100644
--- a/.github/skills/agentic-component-authoring/references/state-and-accessibility.md
+++ b/.github/skills/agentic-component-authoring/references/state-and-accessibility.md
@@ -145,6 +145,10 @@ so another component can extend the state stage without importing package intern
 
 ## Platform behavior
 
+For focus ownership, activation, and native target lifetime, read
+[common focus authoring](focus.md), followed by the
+[Windows/Win32](focus-windows.md) or [macOS](focus-macos.md) detail.
+
 Keep platform-specific native imports out of shared files when React Native forks expose incompatible types. Put fork
 imports in platform files or redeclare a small platform-neutral contract. Surface unsupported platform behavior rather
 than silently pretending it succeeded.
diff --git a/.github/skills/agentic-component-authoring/references/styles-and-tokens.md b/.github/skills/agentic-component-authoring/references/styles-and-tokens.md
index 9344c4cfec..26c3882f6e 100644
--- a/.github/skills/agentic-component-authoring/references/styles-and-tokens.md
+++ b/.github/skills/agentic-component-authoring/references/styles-and-tokens.md
@@ -121,7 +121,7 @@ content slot.
 
 ## Share focus behavior and styling
 
-Follow the [shared focus visual policy](../../../../packages/agentic/components/src/components/AGENTS.md#focus-visual-policy).
+Follow [common focus authoring](focus.md) and its Windows/Win32 or macOS detail.
 State hooks use `useFocusVisuals` to create a private optional `FocusRing` and determine the native
 `enableFocusRing` setting. The custom slot is absent on the native path; when present, its configured Views
 remain mounted across visibility changes.
diff --git a/.github/skills/agentic-component-authoring/references/types-and-slots.md b/.github/skills/agentic-component-authoring/references/types-and-slots.md
index 5d4f9aaa7b..9b80c2b30b 100644
--- a/.github/skills/agentic-component-authoring/references/types-and-slots.md
+++ b/.github/skills/agentic-component-authoring/references/types-and-slots.md
@@ -55,6 +55,11 @@ When a component needs an internal root ref as well, keep both refs and pass one
 when rendering the slot so Framework Base composes them. Never overwrite the consumer ref. If a primitive can render
 unrelated native instance types, omit a top-level ref unless it can define one sound, stable imperative contract.
 
+For focus targets, attachment generations, callback cleanup, and view-command
+boundaries, follow [common focus authoring](focus.md#modern-refs-and-slot-composition).
+Modern ref props do not imply that a structural root is the keyboard focus target
+or that a native focus command has completed.
+
 ## Make resolved state complete
 
 Build state from:
diff --git a/.github/skills/agentic-component-authoring/references/windows-fabric-native-components.md b/.github/skills/agentic-component-authoring/references/windows-fabric-native-components.md
index bc676e88ee..7e9ae6f4be 100644
--- a/.github/skills/agentic-component-authoring/references/windows-fabric-native-components.md
+++ b/.github/skills/agentic-component-authoring/references/windows-fabric-native-components.md
@@ -5,6 +5,12 @@ view. It targets the repository's React Native Windows 0.81 line. Verify APIs
 against the installed `react-native-windows` package before adopting guidance
 from a newer RNW branch.
 
+For behavior, native target lifetime, and modern React refs, read
+[common focus authoring](focus.md) and [Windows/Win32 focus authoring](focus-windows.md).
+Shipped V1 Win32 behavior is also the model for Fabric, but Office Win32 Paper
+is not the UWP XAML Paper implementation described in the compatibility table
+below. Do not transfer its native registration or view-manager assumptions.
+
 ## Decide whether native code is required
 
 Prefer a JavaScript component, slots, and React Native primitives when they can
diff --git a/packages/agentic/components/AGENTS.md b/packages/agentic/components/AGENTS.md
index ec8dde4746..00a6af6b9c 100644
--- a/packages/agentic/components/AGENTS.md
+++ b/packages/agentic/components/AGENTS.md
@@ -12,6 +12,10 @@ invariants; detailed authoring recipes live in the
 - Portable desktop story tests are static `parameters.desktopDriver` plans.
   Use the public authoring types, stable `testID` selectors, declarative
   capability requirements, and no platform branches or executable callbacks.
+- Focus work starts with the [common focus instructions](../../../.github/skills/agentic-component-authoring/references/focus.md),
+  then the [Windows/Win32](../../../.github/skills/agentic-component-authoring/references/focus-windows.md) or
+  [macOS](../../../.github/skills/agentic-component-authoring/references/focus-macos.md) detail. V1 Win32 is the
+  behavioral baseline for both Windows endpoints; renderer-specific plumbing remains separate.
 - Storybook application, native project, Metro, bundle, or CocoaPods work follows the
   [Storybook instructions](../../../apps/storybook/AGENTS.md) and the `agentic-storybook-development` skill.
 - Native React Native Windows Fabric component work follows the
diff --git a/packages/agentic/components/WIN32-FOCUS-PLAN.md b/packages/agentic/components/WIN32-FOCUS-PLAN.md
new file mode 100644
index 0000000000..1fe43312ad
--- /dev/null
+++ b/packages/agentic/components/WIN32-FOCUS-PLAN.md
@@ -0,0 +1,528 @@
+# Desktop focus and focus-visual improvement plan
+
+**Status:** Proposed; investigation only, no runtime changes.
+**Reviewed baseline:** `69ce270dde98588f8386e60fa4c720cad3af0142`, September 14, 2026.
+**Scope:** New agentic components on Office Win32 Paper, React Native Windows
+Fabric, and React Native macOS. **V1 Win32 is the behavioral reference for both
+Windows endpoints**, not only a compatibility check for Win32. macOS shares the
+focus/accessibility goals but has explicit AppKit-specific adaptation.
+
+The historical filename is retained so existing plan references remain valid.
+This refinement adds common/platform authoring instructions, modern-ref
+requirements, macOS source research, and a gated `native-lib` assessment.
+
+The investigation used three independent read-only passes over V1 leaf controls,
+navigation/popups, and shared interaction/native-JavaScript adapters, followed by
+a comparison with the new components. Repository paths and line ranges below
+refer to the reviewed baseline. **Observed** describes source behavior, not a
+claim that native interaction was executed. **Inferred** identifies a likely gap
+that still needs a native reproduction.
+
+## Platform contract and authoring deliverables
+
+| Target             | Behavioral authority                                                                 | Implementation evidence                                                                              |
+| ------------------ | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
+| Office Win32 Paper | Shipped V1 Win32 behavior and E2E sequences                                          | Installed `@office-iss/react-native-win32` 0.81.8 and the supported Office/REX host                  |
+| Windows Fabric     | The same V1 Win32 focus, activation, navigation, and announcement outcomes           | Installed `react-native-windows` 0.81.35, Composition component views, native focus state, and UIA   |
+| macOS              | Common accessibility goals adapted to AppKit click, keyboard, and window conventions | Installed `react-native-macos` 0.81.9, local FocusZone/Callout implementations, and AppKit/VoiceOver |
+
+Versions are observations of this checkout, not claims about the latest release.
+Preserve outcomes across Windows implementations without copying Paper view
+managers, key descriptors, ref bridges, native classes, or pixels into Fabric.
+
+The initial detailed instruction structure is now authored:
+
+| File                                                                     | Responsibility                                                                                                            |
+| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
+| `.github\skills\agentic-component-authoring\references\focus.md`         | Shared vocabulary, ownership, React 19 refs/cleanup, slot integration, abstractions, and qualification                    |
+| `.github\skills\agentic-component-authoring\references\focus-windows.md` | V1-backed behavior, separate Win32/Fabric transports, keyboard handling, native focus reasons, Narrator, and visuals      |
+| `.github\skills\agentic-component-authoring\references\focus-macos.md`   | First responder/key window, click-through, keyboard settings, field editors, popup readiness, AppKit rings, and VoiceOver |
+
+Skill/package/ref guidance routes to these files. The common file owns shared
+rules and breakouts own platform detail; the existing
+`AGENTS.md#focus-visual-policy` anchor remains a router for component specs.
+Each implementation stage must refine these instructions from verified evidence.
+Proposed abstractions are not APIs that already exist.
+
+## Recommendation
+
+Fix focus ownership, native focus requests, and keyboard activation before
+changing ring appearance. Keep the current separation:
+
+- The scene root owns input modality.
+- Interaction helpers own the actual focus target and event delivery.
+- Collection/popup owners coordinate navigation, selection, and focus return.
+- `useFocusVisuals` chooses visual policy.
+- `applyFocusRingStyles` supplies shared theme defaults; component styles supply
+  geometry and preserve semantic differences.
+
+Use V1 Win32's observable focus/activation sequences as the starting contract
+for Fabric too. Reuse current slot/ref composition and native FocusZone/Callout
+ownership instead of building a parallel universal focus manager.
+
+V1 does **not** support the assumption that Win32 native focus rings are generally
+unavailable. It exposes and uses `enableFocusRing`, including per-item suppression
+for menu hover. Preserve the new hook's current Win32 custom-ring default until
+an explicit native/custom comparison supports a reviewed policy change.
+
+## Evidence and differences
+
+The V1 comparison drives both Windows implementation lanes. macOS differences
+and renderer-specific evidence are detailed after this index.
+
+| Area                                  | Observed V1 behavior                                                                                                                                                                                                                                                                  | New-component comparison and consequence                                                                                                                                                                                                                             |
+| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Public compatibility baseline         | `ButtonV1` and `CheckboxV1` are explicit public aliases; Win32 Tab has its own implementation. [V1, V2, V6]                                                                                                                                                                           | Follow public exports and platform resolution, not similarly named legacy or mobile implementations. Input's generic V1 file is a stub, so it is not a Win32 behavior reference. [V9]                                                                                |
+| Pointer focus                         | Checkbox/Switch use `useOnPressWithFocus`; that helper requests imperative focus on Windows/Win32 before forwarding the press. [V2, V3, H1]                                                                                                                                           | New controls wrap React Native `Pressable` and forward `onPress`, without this explicit focus-request layer. This is a delivery/parity question, not proof that native Pressable never focuses. [N1]                                                                 |
+| Activation timing                     | Shared key helpers use Win32 key-up activation, handled-key descriptors, and propagation control. Button also pairs keyboard invocation with earlier keydown and resets on blur to prevent a menu-close/reopen sequence. [V1, H2]                                                     | New Button relies on native Pressable; Switch additionally toggles in `onKeyUp`. Qualify exactly-once activation before either adding or removing handlers. [N1, N2]                                                                                                 |
+| Focus after selection                 | Win32 V1 Tab changes selection/invocation state, then focuses through an effect; its comment explains the Narrator ordering requirement. [V6]                                                                                                                                         | New TabList changes active/selected values and immediately calls optional `.focus()`. The destination may still have old native focusability, and state can advance without confirmed focus. These are inferred races, not reproduced failures. [N3]                 |
+| Menu pointer versus keyboard feedback | V1 MenuItem focuses/blurs on hover and changes `enableFocusRing` according to hover/focus origin. Disabled Win32 menu items can remain focusable; tabs use a different disabled policy. [V4, V6]                                                                                      | A universal `focused && keyboard` rule is not a complete menu policy. New MenuItem is a leaf, not a replacement for the V1 menu owner. Do not copy disabled-focusable behavior into every component. [N4]                                                            |
+| Programmatic visibility               | The inspected Button two-tone branch tests focused state, and Radio/Switch use focused token states; these callsites do not consult a scene-root modality value. Menu separately suppresses hover-origin native rings. [V1, V4, V10]                                                  | The new default follows the last root modality even for programmatic focus. Treat this as an explicit new policy to qualify, not proven V1 parity; owner intent may need to override it. [N5]                                                                        |
+| Scope ownership                       | MenuList explicitly refocuses a submenu trigger on close. MenuPopover owns initial focus and contains navigation keys. FocusZone exposes native navigation/default-tabbable configuration. [V5, V7]                                                                                   | Root modality is not a focus manager. Keep navigation and dismissal return at the owning scope; a popup's `target` prop alone does not prove all native restore paths.                                                                                               |
+| Same-target modality changes          | V1 control helpers update local interaction state and menus explicitly manage pointer-origin feedback. [H3, V4]                                                                                                                                                                       | `ThemedRoot` mutates a stable object; `useFocusVisuals` samples it only during render. A modality-only change can leave the already-focused custom ring stale until another render. Its test currently supplies that render manually. [N5, N6]                       |
+| Imperative target identity            | V1 controls carry component refs through the shared focus adapter; a native Win32 focus surface exists, but wrapper/ref compatibility must be checked per entrypoint. [H1, H4]                                                                                                        | Card's ref targets its structural View while its Pressable overlay owns focus. Input similarly separates structural root and TextInput. Preserve public ref contracts while providing an explicit internal focus target. [N7]                                        |
+| Ring geometry and contrast            | V1 Button chooses a Win32 primary/non-high-contrast two-tone path and defaults the native ring off for that path. Checkbox defaults to the native ring; Radio and Switch also have focused token-driven borders. There is no single V1 ring recipe to copy everywhere. [V1, V2, V10]  | The new helper applies the same inner/outer token widths to all custom rings, and `FocusVisual` places both rings through absolute-fill Views. Retain this structure initially, then measure insets, clipping, contrast, and actual Win32 rendering against V1. [N8] |
+| Validation                            | V1 has behavioral E2E specifications for Button Enter/Space, Checkbox click/Space, RadioGroup arrows/disabled skipping/Tab, and Switch click/Enter/Space, as well as snapshots and tester scenes. These are defined coverage, not tests executed during this investigation. [V8, V11] | The September 12 Win32 run's three authored input plans all skipped unsupported physical-click/keyboard capabilities. Rendering 143 stories was not focus qualification. New tests replace `Platform.OS` and dispatch synthetic events. [N6, N9]                     |
+
+### Evidence index
+
+Paths are repository-relative except the explicitly identified installed-package
+paths. The installed Win32 JavaScript inspected was
+`@office-iss/react-native-win32@0.81.8`; re-resolve it before implementation.
+
+- **V1:** `packages\components\Button\src\index.ts:27-28`;
+  `packages\components\Button\src\useButton.ts:15-17,37-74,99-113`;
+  `packages\components\Button\src\Button.tsx:113-140`;
+  `packages\components\Button\src\ButtonTokens.win32.ts:27-40,56-66,103-111,148-158`.
+- **V2:** `packages\components\Checkbox\src\index.ts:22-23`;
+  `packages\components\Checkbox\src\useCheckbox.ts:54-62,95-98`.
+- **V3:** `packages\components\Switch\src\useSwitch.ts:100-104,124-137`.
+- **V4:** `packages\components\Menu\src\MenuItem\useMenuItem.ts:29-45,68-89,113-120,142-149`.
+- **V5:** `packages\components\Menu\src\MenuList\useMenuList.ts:94-121`;
+  `packages\components\Menu\src\MenuPopover\useMenuPopover.ts:42-84,100-118`.
+- **V6:** `packages\components\TabList\src\Tab\useTab.win32.ts:64-110,142-152`;
+  `packages\components\TabList\src\TabList\useTabList.ts:142-176,183-200`.
+- **V7:** `packages\components\FocusZone\src\FocusZone.tsx:15-45`;
+  `packages\components\FocusTrapZone\src\FocusTrapZone.ts:15-31`.
+  These wrappers do not by themselves prove native trap/restoration semantics.
+- **V8:** `apps\tester-core\src\TestComponents\FocusZone\FocusZoneE2ETest.tsx:1-120`;
+  `apps\tester-core\src\TestComponents\TabList\TabListE2ETest.tsx:1-60`;
+  `apps\tester-core\src\TestComponents\Menu\E2EMenuTest.tsx:1-110`.
+- **V9:** `packages\components\Input\src\Input.tsx:22-39`.
+- **V10:** `packages\components\RadioGroup\src\Radio\RadioTokens.win32.ts:80,97-102`;
+  `packages\components\Switch\src\Switch.styling.ts:14-21,32-50`;
+  `packages\components\Switch\src\SwitchTokens.win32.ts:16-17,50-95`.
+- **V11:** `apps\E2E\src\ButtonV1\specs\ButtonV1.spec.win.ts:77-94`;
+  `apps\E2E\src\CheckboxV1\specs\CheckboxV1.spec.win.ts:81-120`;
+  `apps\E2E\src\RadioGroupV1\specs\RadioGroupV1.spec.win.ts:123-198`;
+  `apps\E2E\src\Switch\specs\Switch.spec.win.ts:60-148`.
+- **H1:** `packages\utils\interactive-hooks\src\useOnPressWithFocus.ts:14-29`;
+  `packages\utils\interactive-hooks\src\useViewCommandFocus.ts:8-29`.
+  Reuse the focus-adapter contract, not an assumed equivalence between every ref
+  and a focusable native view.
+- **H2:** `packages\utils\interactive-hooks\src\useKeyProps.ts:16-39,44-95,114-126`.
+- **H3:** `packages\utils\interactive-hooks\src\useAsPressable.ts:47-73,139-149`;
+  `packages\utils\interactive-hooks\src\usePressableState.ts:44-106`.
+- **H4:** Installed Win32 package:
+  `Libraries\Components\View\View.win32.js:114-188,240-243`;
+  `Libraries\Components\Pressable\Pressable.win32.js:220-390`;
+  `src-win\Libraries\Components\Touchable\TouchableWin32.tsx:250-272,583-626`.
+  JS exposes capture/handled-key processing, focusability, and imperative focus
+  surfaces. The audited JS/types do not establish a native focus-visible callback
+  or the C++ ring's rendering/event-order guarantees.
+- **N1:** `packages\agentic\components\src\components\button\useButton.ts:48-66`;
+  `packages\framework-base\src\hooks\usePressableState.ts:37-78`.
+- **N2:** `packages\agentic\components\src\components\switch\useSwitch.ts:123-148`.
+- **N3:** `packages\agentic\components\src\components\tablist\useTabList.ts:124-164`;
+  `packages\agentic\components\src\components\tab\useTab.ts:38-46,58-92`.
+- **N4:** `packages\agentic\components\src\components\menu-item\useMenuItem.ts:38-81`.
+- **N5:** `packages\agentic\design\src\theming\ThemedRoot.tsx:28-83`;
+  `packages\agentic\design\src\theming\rootContext.ts:3-24`;
+  `packages\agentic\components\src\common\useFocusVisuals.ts:34-42`.
+- **N6:** `packages\agentic\components\src\common\useFocusVisuals.test.tsx:53-72`;
+  `packages\agentic\components\src\common\focusVisualPolicy.test.tsx:41-84`.
+- **N7:** `packages\agentic\components\src\components\card\useCard.ts:59-110`;
+  `packages\agentic\components\src\components\card\useCardStyles.ts:17-24`;
+  `packages\agentic\components\src\components\input\useInput.ts:142-179`.
+- **N8:** `packages\agentic\components\src\common\applyFocusRingStyles.ts:10-45`;
+  `packages\agentic\components\src\primitives\focus-visual\focus-visual.tsx:44-84`.
+- **N9:** Local, ignored historical evidence:
+  `apps\storybook\artifacts\win32\desktop-driver\run.json:3-43`,
+  finished September 12, 2026 at 07:31:17 UTC. Recreate equivalent evidence on an
+  input-capable host; do not treat this artifact as a portable test dependency.
+
+### Added Fabric, macOS, and modern-ref evidence
+
+- **W1:** `packages\components\FocusZone\windows\FRNFocusZone\FocusZoneComponentView.cpp:33-65,71-133,175-224`
+  subscribes to native focus/key events, requests `TryFocus(FocusState::Keyboard)`,
+  and checks actual focused identity. This is a Fabric implementation model for
+  V1 outcomes, not a reason to copy its transport to Win32.
+- **W2:** Installed RNW 0.81.35
+  `Microsoft.ReactNative\Fabric\Composition\RootComponentView.cpp:79-118`
+  stores native focus state, resolves programmatic focus through native policy,
+  and returns early for an already-focused target.
+  `CompositionViewComponentView.cpp:189-201,419-426,728-791` owns focus visual
+  hosting. These are projection candidates, not established public JS APIs.
+- **M1:** `packages\utils\interactive-hooks\src\useOnPressWithFocus.ts:14-29`
+  forces click focus only on Windows/Win32.
+  `packages\utils\interactive-hooks\src\useKeyProps.ts:44-95,114-126` prefers
+  key-down on macOS and key-up on Windows/Win32, with different key descriptors.
+- **M2:** Installed RNmacOS 0.81.9
+  `React\Fabric\Mounting\ComponentViews\View\RCTViewComponentView.mm:1719-1804`
+  implements AppKit focus/blur, ring-mask drawing, responder events, and pointer
+  focus behavior. Lines 1807-1861 emit key events and use native handled-key
+  entries to decide whether AppKit receives `super` handling.
+- **M3:** `packages\components\FocusZone\macos\RCTFocusZone.m:24-35,122-129,584-675`
+  resolves editable focus targets and key-view navigation, including a hierarchy
+  fallback for Fabric-backed zones.
+  `packages\components\FocusZone\macos\RCTFocusZoneComponentView.mm:118-195`
+  forwards focus to its content rather than becoming a duplicate tab stop and
+  clears default-responder state on recycle.
+- **M4:** `packages\native\Callout\macos\CalloutWindow.swift:9-38`;
+  `packages\native\Callout\macos\CalloutView.swift:33-45,142-216`;
+  `packages\native\Callout\macos\RCTCalloutComponentView.mm:96-132`.
+  Popup key-window activation, initial child focus, and a separate Fabric touch
+  attachment are distinct concerns.
+  `packages\native\Callout\macos\GuardedEventMonitor.swift:1-29` owns monitor cleanup.
+- **M5:** `packages\components\ContextualMenu\src\ContextualMenu.tsx:39-55`
+  contains a macOS layout-effect/timer workaround: a readiness problem to solve,
+  not a general timer recipe.
+  `packages\components\Checkbox\src\Checkbox.macos.tsx:22-30` is a stub, not a
+  working V1 macOS focus reference.
+- **R1:** `packages\framework-base\src\component-patterns\slot.ts:14-76,118-142`
+  already composes refs, callback cleanup, and transform refs;
+  `packages\framework-base\src\component-patterns\render.ts:38-75` preserves the
+  custom runtime path.
+  `packages\framework-base\src\component-patterns\useSlot.test.tsx:453-490`
+  covers stable native refs and compatible replacements.
+- **R2:** `packages\agentic\components\src\refs.types.test.tsx:30-84` distinguishes
+  structural and pressable root refs.
+  `packages\native\Callout\src\CalloutNativeComponent.ts:63-70` demonstrates
+  typed native commands with host refs rather than global tag arguments.
+
+### macOS adaptation decisions
+
+| Concern                      | Required distinction                                                                                                                                       |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Pointer activation           | Do not impose Windows focus-before-press on ordinary AppKit controls; test inactive-window first click and `acceptsFirstMouse` separately.                 |
+| Keyboard phase and shortcuts | Qualify key-down activation, key equivalents, Command/Option/Control chords, IME, and Return/Space; do not transplant Win32 modifier rules.                |
+| Focus identity               | Track key window and actual first responder, including field-editor ownership; distinguish VoiceOver navigation focus.                                     |
+| Keyboard settings            | Respect key-view-loop and keyboard-navigation/Full Keyboard Access settings; do not assume a static startup snapshot or unsupported KVO subscription.      |
+| Popup lifetime               | Window activation does not prove child focus. Wait for content/window readiness, cancel stale requests, and avoid unconditional reactivation on dismissal. |
+| Ring drawing                 | Preserve AppKit mask/bounds, window activity, points/backing scale, and Increase Contrast; Composition geometry is not interchangeable.                    |
+
+Apple documents that `makeFirstResponder` can fail, and that a true result can
+mean the window became responder when the requested object refused. Confirm
+the actual responder, not just the boolean. The macOS authoring breakout links
+the official AppKit sources and the local implementation evidence.
+
+## Abstractions to build or extend
+
+Names in this table other than existing helpers are **proposed contracts**.
+Final public names require review and compile-time coverage.
+
+| Abstraction                                           | Placement and payoff                                                                                     | Constraints                                                                                                                  |
+| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| Ref-backed focus target/registration                  | Framework Base; one mounted-target contract for TabList, Card overlays, editable slots, and popup return | Reuse slot ref composition; track attachment generation/scope and cleanup without redirecting public refs.                   |
+| Cancellable focus request/observation                 | Framework Base contract with injectable platform adapters                                                | Distinguish request/confirmation/cancellation/unavailability; apply eligibility first. No success-shaped optional-ref no-op. |
+| Root input controller with focused-owner subscription | Design; stable settings and targeted refresh with multiple native event attachments per scene            | No context-value churn, process-global gesture flag, or duplicate per-control modality tracker.                              |
+| Focus scope and return intent                         | Component-private coordination, reusing native FocusZone/Callout                                         | One navigation owner; request intent does not rewrite global physical modality.                                              |
+| Existing focus visual policy and styling              | Extend `useFocusVisuals` and `applyFocusRingStyles`                                                      | Keep behavior and ThemeState separate; preserve component geometry and native renderer choices.                              |
+| Native capability/environment projection              | Optional `native-lib` service if N0 proves a gap                                                         | Narrow capabilities, snapshots, and events for app-owned windows/surfaces; no React refs across module arguments.            |
+| Shared native target/window lifecycle helpers         | Optional projection layer reused by FocusZone/Callout                                                    | Extract demonstrated duplication; preserve generated registration, UI-thread ownership, and recycle cleanup.                 |
+
+### Modern-ref acceptance contract
+
+Agentic code uses React 19 `ref` props and `PropsWithRefOf`, not new V1
+`componentRef` APIs or `forwardRef` wrappers. Preserve object refs, callback
+cleanup, slot `as` replacements, transform refs, development setup/cleanup
+cycles, and replacement/unmount cancellation. Ordinary TypeScript may use
+`React.ComponentRef`; codegen-specific syntax must match the pinned generator.
+
+Use existing `prepareSlotProps` ref composition rather than a new merge-ref
+utility. Public root, actual focus target, scope, and anchor refs remain distinct.
+Never keep a numeric tag as durable identity or submit focus before native
+attachment/eligibility is ready. Native confirmation must identify the intended
+target, not just a queued command or activated window. Preserve Framework Base's
+older-React compatibility while applying the React 19 agentic contract.
+
+## Is a native-lib package useful?
+
+**Recommendation: yes as an opt-in, capability-driven foundation; not as an
+up-front rewrite or prerequisite for JavaScript-only fixes.** Native focus/window
+observation and cross-window readiness are plausible gaps. Local macOS
+FocusZone/Callout already duplicate native target lookup and lifecycle work.
+Prove the first shared consumer pair before creating the package.
+
+Proposed location/name: `packages/native/native-lib`,
+`@fluentui-react-native/native-lib`, subject to boundary review.
+
+### Separate three native API responsibilities
+
+| Kind                                                                           | Appropriate surface                                                                       | Avoid                                                                                                               |
+| ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| Non-view capability, window activity, keyboard-navigation snapshot/observation | Codegen TurboModule and platform-neutral facade where existing RN APIs are insufficient   | Global keyboard hooks, production AX/UIA automation, guessed defaults, synchronous cross-thread waits               |
+| Operation on a mounted control                                                 | Existing host `.focus()` or typed native command in the owning renderer/component adapter | TurboModule `focus(reactRef)` or arbitrary process-global `focus(tag)`                                              |
+| Shared native implementation                                                   | C++/WinRT on Windows; AppKit with Objective-C++ codegen glue/native helpers on macOS      | Leaking native types into shared TS, editing generated headers, or mixing UIKit/UWP assumptions with desktop Fabric |
+
+TurboModules and Fabric views may share a package, but module registration does
+not create a view command or its lifetime. If a native service must identify a
+target, use a scoped registration token with a mount generation acquired through
+owned renderer attachment; reject stale or cross-runtime tokens.
+
+### Dependency and support contract
+
+Preserve `components -> framework-base/design`. Introduce native-lib through
+optional platform adapters or injected capabilities only after review. Do not
+make every Framework Base import eagerly load native code. Native-lib must not
+import Framework Base, design, components, or desktop-driver. Existing source
+boundary rules, manifests, and project references need an explicit amendment if
+the new dependency is approved.
+
+Keep FocusZone/Callout schemas and visual ownership in their packages. They may
+reuse a projection library; do not duplicate their registrations in a monolithic
+native-lib view manager.
+
+Windows Fabric/macOS module support does not establish registration in the
+prebuilt Office Win32 host. Win32 needs a supported host extension/projection,
+or explicit capability unavailability while existing ref paths keep working.
+Do not use top-level `getEnforcing` in an optional facade.
+
+### N0. Bounded native feasibility spike
+
+Start only after P0 identifies a concrete missing signal. JS-only P1/P2 work can
+proceed independently.
+
+1. Select one service gap and two real consumers, such as FocusZone and Callout.
+   Check existing renderer/public APIs before adding a bridge.
+2. Define the minimal schema, capabilities, freshness/event ordering, explicit
+   errors, cleanup, target lifetime, and UI/main-thread scheduling.
+3. Build one Windows Fabric and one AppKit projection. Add a module only for the
+   non-view service; mounted-view commands remain ref-based.
+4. Prove attach/recycle/unmount, runtime reload, inactive windows, multiple
+   surfaces/popups, and module absence in native runs.
+5. Measure import/startup/bundle cost. Verify package/autolinking, C++/WinRT
+   registration, Apple pod/Objective-C++ codegen, and Release packaging. Do not
+   set `includesGeneratedCode` on a cross-platform package unless generated code
+   is actually shipped for every supported platform.
+6. Establish Office Win32 host integration separately. Promote the package only
+   if it removes duplication or closes the observed gap; otherwise keep the
+   adapter local and record why.
+
+Deliver an ADR before public exports or manifests change. A native package
+cannot replace correct selection sequencing, React ref cleanup, or visual policy.
+
+## Implementation sequence
+
+### P0. Establish three native desktop qualification lanes
+
+**Owner:** Storybook/desktop-driver test infrastructure and component stories.
+**Prerequisite for behavioral rollout:** real physical-click and keyboard support.
+
+1. Use paired V1/new Win32 scenes to establish behavior for Button, Checkbox,
+   Switch, Radio/Tab navigation, and popup opening/dismissal. Run the same
+   behavioral scenarios against new Windows Fabric components in a separate
+   host; do not require loading V1 Paper components into Fabric. Add macOS
+   variants for AppKit-specific click, key phase, keyboard settings, field
+   editor, first-responder, and key-window behavior. Use stable test IDs,
+   recorded theme/scale, and existing V1 E2E sequences [V11]. Exclude mobile/stub
+   entrypoints from reference claims.
+2. Record native focused element, event target/currentTarget, event phase,
+   keydown/up, press-in/out/press, focus/blur, modality, and activation count.
+   Capture focus state before and after native property updates.
+3. Include focus arriving from outside the scene, imperative `.focus()`, popup
+   creation, click on the already-focused target, and keyboard use after that
+   click without a focus transfer.
+4. Compare native/custom rings independently on all three endpoints, retaining
+   current defaults during investigation. Record Fabric native focus reasons
+   and macOS key-window/first-responder state where exposed. Establish whether
+   support is sufficient, not just whether a prop survives JavaScript.
+5. Turn selected traces into deterministic regressions. Keep diagnostic logging
+   test-only and remove it from normal runtime paths.
+
+**Exit:** recorded, non-skipped native results for focus delivery and exactly-once
+activation. If the host lacks input capability, report the lane as blocked, not
+passed. Confirm popup restoration in native tests rather than inferring it from
+`target`, FocusTrapZone names, or snapshot output.
+
+### P1. Repair the focus-target and activation contract
+
+**Owner:** `framework-base` interaction/focus adapters; component state hooks.
+**Depends on:** P0 event/ref findings.
+
+- Provide one platform-aware focus-request path for real native targets, preserving
+  caller refs and the V1 focus-before-press behavior where the new host needs it.
+  Implement V1 observable outcomes on Fabric too, with explicit AppKit differences
+  on macOS. Keep fork imports in `.win32.ts`, `.windows.ts`, and `.macos.ts`
+  adapters. Do not import all legacy interaction hooks into the new package.
+- Track actual self-focus separately from descendant focus. Qualify bubbling
+  focus/blur on nested pressables; do not mark every ancestor as the focused
+  control. Disabled, removed, and re-enabled controls must not retain phantom
+  focus.
+- Centralize keyboard phase, handled-key descriptors, propagation rules, repeat,
+  modifier, and accessibility-activation behavior where shared. Do not install a
+  second activation path on top of native Pressable without proving it is needed.
+- Use Button's keydown/keyup pairing as evidence for the menu-close/reopen case,
+  but do not copy its module-global guard blindly. Prefer a scoped gesture token
+  that can survive the relevant popup lifetime without coupling unrelated scenes.
+- Resolve Switch's `onPress` plus `onKeyUp` path from native traces. Required result:
+  one toggle and one caller notification per intentional activation.
+- Keep disabled and disabled-focusable policy explicit per control. V1 menu items
+  and tabs differ intentionally; any public `disabledFocusable` addition needs
+  its own reviewed accessibility/API contract.
+- Preserve Card's structural ref and Input's TextInput slot ref contracts; add
+  internal focus-target plumbing rather than silently redirecting public refs.
+- Reuse Framework Base's ref composition and cleanup and meet the modern-ref
+  acceptance contract above. Do not recreate V1 componentRef or freeze tags at
+  render time. Native-lib use is gated by N0, not assumed.
+
+**Exit:** Button/Checkbox/Switch canaries pass pointer, Enter, Space, repeat,
+modified-key, accessibility activation, blur-between-keydown/up, and unmount cases.
+No duplicated action, lost caller event, or parent/child double focus.
+
+### P2. Make focus-visible state current without rerendering the scene
+
+**Owner:** design root controller plus component `useFocusVisuals`.
+**Depends on:** P0 event ordering and P1 reliable self-focus.
+
+- Preserve stable `RootSettings` identity and the single root tracker. Add an
+  opt-in modality-change notification path for the active custom-ring owner.
+  Subscribe only while it is focused; do not change the context value or broadcast
+  React state updates throughout the scene.
+- Reconcile the current snapshot on focus/subscription so a focus-before-key
+  delivery sequence cannot permanently miss the initiating keyboard modality.
+  Remove the manual `rerender` requirement from the same-target regression test.
+- Verify which pointer/responder events actually arrive on each endpoint. Retain only the
+  necessary root capture surfaces and compose user handlers without swallowing
+  navigation or claiming the responder.
+- Separate current physical modality from explicit programmatic focus intent.
+  A menu opened by pointer may need different feedback from a keyboard-invoked
+  popup or restored keyboard focus; do not globally change modality to keyboard
+  merely because `.focus()` was called.
+- Model native-window/event boundaries separately from React theme boundaries.
+  A popup can inherit theme/settings yet require its own event-registration
+  boundary if events do not reach the outer root. Register it against the owning
+  scene controller; do not create an unrelated theme root just to repair capture.
+- Retain `alwaysVisible` as a focused-only custom-path override. Expose owner-level
+  intent through internal composition first; do not add it to every component's
+  public props by default.
+- Reconcile renderer focus state and window activity separately from physical
+  modality. Use AppKit readiness and scoped Fabric signals; add native projections
+  only if existing supported APIs cannot meet the contract.
+
+**Exit:** an already-focused ring updates on keyboard/pointer changes without
+manual rerender, refocus, or unrelated state changes. Theme switches preserve the
+controller. Nested themes share it; independent scenes remain isolated; popup
+subscriptions clean up. Unfocused components do not rerender for modality changes.
+
+### P3. Correct composite navigation and focus-return ownership
+
+**Owner:** TabList/Tab and existing popup owners; native focus adapters.
+**Depends on:** P1; P2 for correct visual feedback.
+
+- Separate a requested destination from confirmed native focus. For TabList, apply
+  the target's focusability/selection state before requesting focus, cancel stale
+  requests, and reconcile through the resulting focus event. Avoid optional-chain
+  no-ops that leave active state pretending focus moved.
+- Evaluate reusing the existing FocusZone navigation contract versus retaining a
+  JS roving implementation. Pick one owner per scope; do not let both consume the
+  same arrows. Preserve automatic/manual selection modes.
+- Port V1's selection-before-focus accessibility ordering, but do not add its
+  Ctrl+Tab behavior to the new public TabList contract without review.
+- Recover when the active item is removed/disabled and when all items are disabled.
+  Preserve unrelated caller handlers and reserve text-editing keys for Input.
+- Define initial focus, submenu-close return, Escape/Tab handling, hover focus,
+  pointer capture, and return-to-trigger by dismissal reason. Outside-click
+  dismissal must not steal focus back from the control the user just clicked.
+- If a trigger is removed or becomes unfocusable, use an explicitly owned fallback
+  or leave focus at the user's destination; never issue a stale ref request.
+
+**Boundary:** the current new MenuItem is only a leaf. Implement its reliable
+focus/activation now; a complete new menu owner, FocusTrapZone redesign, or new
+RadioGroup is not implied by this plan. Apply popup cases to existing owners and
+carry their requirements into future container contracts.
+
+**Exit:** native focus, active item, selected item, and visible ring agree after
+arrow/Home/End movement, rapid changes, removal, popup opening, and dismissal.
+Verify Narrator ordering on both Windows endpoints and VoiceOver behavior on
+macOS, not only React state values.
+
+### P4. Qualify visual parity and roll out deliberately
+
+**Owner:** component styles, shared focus styles, and conformance stories.
+**Depends on:** P1-P3 as relevant to each component.
+
+- Keep `ThemeState` separate from `useFocusVisuals`. Cache theme-only values in
+  `applyFocusRingStyles`; keep resolved radius, target bounds, inset/outset, and
+  interaction state outside shared theme caches.
+- Compare V1 and new rings on filled/transparent backgrounds, rounded/square/
+  circular targets, high contrast, scaling, clipped ancestors, nested controls,
+  and selected/disabled states. Test opaque native system colors in the native
+  renderer rather than converting them into guessed literal colors.
+- Only add shared geometry options when measured cases require them. Do not copy
+  Button's special inner-border treatment to every control or equate native
+  Windows Fabric/AppKit geometry with Win32 rendering.
+- Revisit the Win32 native-ring default only with the P0/P4 evidence and an explicit
+  contract decision. Native and custom visible rings must never compete.
+  Include Button primary versus high-contrast behavior and menu hover suppression
+  in this decision; renderer choice and requested ring visibility are separate.
+- Roll out from canaries to all eleven focus-visual consumers, update specifications,
+  preserve the standalone decorative FocusVisual contract, and record changesets
+  for intentional public behavior/type changes.
+
+**Exit:** reviewed behavior and visual evidence on Win32, Windows Fabric, and
+macOS. Fabric is a first-class V1-backed target, not only a regression lane.
+A successful story traversal is an additional smoke
+check, not a substitute for native input and accessibility qualification.
+
+## Required acceptance matrix
+
+| Scenario                                                  | Required result                                                                                                         |
+| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| Tab/Shift+Tab enters/leaves scene                         | Real focus target is correct; keyboard ring is visible; one tab stop per declared owner.                                |
+| Pointer activation, including already-focused target      | Correct native focus and exactly one action; ring follows the control's pointer policy immediately.                     |
+| Keyboard after pointer without focus transfer             | Active custom ring updates without explicit rerender; modifier-only/IME input follows the reviewed classification.      |
+| Enter/Space, repeat, modifiers, keydown then blur/unmount | No duplicate toggle, stale key-up activation, or menu reopening.                                                        |
+| Disabled/re-enabled/removed target                        | Correct per-control discoverability; no activation or phantom self-focus.                                               |
+| Nested controls                                           | Only the actual owner displays focus; child activation does not invoke ancestors unintentionally.                       |
+| TabList movement/removal                                  | Actual native focus tracks committed focusability; automatic/manual selection and Narrator order remain correct.        |
+| Popup keyboard/pointer open and each dismissal reason     | Correct initial focus, key containment, visual intent, and guarded focus return.                                        |
+| Theme/high-contrast changes while focused                 | Stable scene/slot identity and current colors; geometry does not clip or duplicate native visuals.                      |
+| Independent scenes and native popup boundaries            | No shared invocation guard leakage, stale controller listener, or missed popup modality event.                          |
+| Object/callback refs, cleanup, replacements, remounts     | One live target per attachment generation; public root, inner target, and anchor contracts remain intact.               |
+| macOS inactive-window first click and keyboard settings   | AppKit-appropriate focus/activation and key-view navigation, without forced Windows click-focus behavior.               |
+| macOS field editors and VoiceOver                         | Editable native targets and accessibility focus/actions are not confused with wrapper self-focus.                       |
+| Fabric native focus reasons and island transitions        | V1 observable behavior with correct native ownership, intent, and confirmed target acquisition.                         |
+| Optional native service absent or target stale            | Existing supported paths work; unavailable/stale outcomes are explicit and JS import does not require an absent module. |
+
+## Validation and limits
+
+Use owning workspace scripts for unit/type checks and relevant component stories
+for native plans. Keep tests under `ThemedRoot`; include real focus event payloads
+and ref behavior in integration coverage. Assert handler forwarding and exact
+action counts, not only mocked `.focus()` calls.
+
+The final qualification lane must advertise physical-click and keyboard
+capabilities and produce non-skipped results. Use separate app-owned Win32,
+Windows Fabric, and macOS lifecycles
+and stop owned Metro/app processes between runs. Protect unrelated sessions and
+do not alter disabled-input policy to make a report appear green.
+
+No native tests were run during this investigation/refinement; macOS native
+code was researched from this Windows checkout. Native event ordering, complete
+Callout/FocusTrapZone restoration, renderer ring behavior, and the native-lib
+spike remain explicit evidence gates. Do not port mobile stubs, macOS timing
+workarounds, legacy global state, or all V1 APIs wholesale.
+
+Public architecture references:
+
+- [React 19 ref props and callback cleanup](https://react.dev/blog/2024/12/05/react-19)
+- [React Native 0.81 Fabric native commands](https://reactnative.dev/docs/0.81/the-new-architecture/fabric-component-native-commands)
+- [React Native 0.81 TurboModules](https://reactnative.dev/docs/0.81/turbo-native-modules-introduction)
+- [RNW New Architecture](https://microsoft.github.io/react-native-windows/docs/new-architecture)
+- [RNW native components](https://microsoft.github.io/react-native-windows/docs/native-platform-components)
+- [AppKit first responder and key window](https://developer.apple.com/documentation/appkit/nswindow)
+- [AppKit makeFirstResponder result semantics](<https://developer.apple.com/documentation/appkit/nswindow/makefirstresponder(_:)>)
+
+Web documentation supplies architectural guidance; the pinned installed sources
+remain authoritative for this checkout's detailed APIs.
diff --git a/packages/agentic/components/src/components/AGENTS.md b/packages/agentic/components/src/components/AGENTS.md
index cd64321c72..6b458dff0e 100644
--- a/packages/agentic/components/src/components/AGENTS.md
+++ b/packages/agentic/components/src/components/AGENTS.md
@@ -63,35 +63,22 @@ audit.
 
 ## Focus visual policy
 
-This is the shared native adaptation for Accordion, Button, Card, Checkbox, ListItem, ListboxItem, MenuItem,
-Radio, Switch, Tab, and Tag. Activation, selection, navigation, and accessibility semantics are unchanged.
+Read [common focus authoring](../../../../../.github/skills/agentic-component-authoring/references/focus.md),
+then [Windows/Win32](../../../../../.github/skills/agentic-component-authoring/references/focus-windows.md) or
+[macOS](../../../../../.github/skills/agentic-component-authoring/references/focus-macos.md).
+The common file owns ref, state, activation, scope, and styling invariants; platform files own detailed
+native adaptation. V1 Win32 models observable behavior for both Office Win32 and Windows Fabric.
 
-- Call `useFocusVisuals` in `use<Component>_unstable` after resolving pressable focus. Pass `focused: false`
-  for disabled or noninteractive targets. Store its `FocusRing` as a private optional slot in component state.
-- The hook returns `{ FocusRing, enableFocusRing }`. Native rings default to enabled on Windows and macOS,
-  and disabled on Win32 and other platforms. `useSystemFocusRing` explicitly overrides that default.
-- `alwaysVisible` means visible whenever focused, including pointer focus, not visible while unfocused.
-  It takes precedence over the system-ring preference and uses the custom ring with `enableFocusRing: false`;
-  native focus-visibility heuristics cannot guarantee this override.
-- The custom slot reads the current modality through `useRootSettings` on each render. It shows only when
-  focused and the modality is keyboard, unless `alwaysVisible` is set. Programmatic focus follows the last
-  root modality. There is no local pointer tracker, subscription, or rerender caused solely by root settings.
-- The optional slot is absent on the native path. On the custom path, configured ring Views remain mounted
-  across focus/blur and visibility changes only opacity. Static cards and section headers render no ring.
-- Apply `enableFocusRing` only to Accordion's header, Card's interactive overlay, or the other components'
-  pressable roots. Switch's label container and track are not focus targets.
-- Keep `ThemeState` out of the behavioral hook. `applyFocusRingStyles` centrally binds the dual-ring
-  colors (`strokeFocusInner`/`strokeFocusOuter`) and widths (`thin`/`thick`) in a cached theme stylesheet.
-  Component style hooks supply the resolved radius. Functional component borders are separate.
-- Render `{state.FocusRing && <state.FocusRing />}` inside the actual focus target. Do not add public
-  component slots for this render-only structure. The standalone `FocusVisual` primitive and its exports remain.
-- Synthetic `focused` overrides do not move native focus. Input's focus underlines and other non-ring styles
-  are unchanged. Native ring appearance still depends on the renderer; no pixel-parity guarantee is made.
+Current implementation: `useFocusVisuals` returns a private optional `FocusRing` and `enableFocusRing`;
+Windows/macOS default to native and Win32 defaults to custom. `alwaysVisible` selects a custom ring only
+while focused. `applyFocusRingStyles` owns cached colors/widths; component styles supply radius. Put the ring
+and native setting only on the actual focus target. Scenes require `ThemedRoot`; modality is currently
+sampled on render, without a root subscription. The native Windows path requires RNW 0.81.35 or newer.
 
-The Windows native path requires React Native Windows 0.81.35 or newer. This re-review of the accepted
-`native-system-focus-visuals` adaptation follows the requested root-modality contract without changing pinned
-Flex source identities. The shared hook and component matrix cover platform defaults, overrides, modality,
-focus/blur, ring geometry, and disabled/noninteractive targets. Scenes require a `ThemedRoot`.
+The [desktop improvement plan](../../WIN32-FOCUS-PLAN.md) describes future target/intent/notification
+abstractions and native-service gates; they are not shipped APIs. Do not change behavior or pinned source
+identities by following a proposal before its component contract is reviewed. The accepted
+`native-system-focus-visuals` divergence continues to refer through this stable anchor.
 
 ## Focused references
 
diff --git a/packages/framework-base/AGENTS.md b/packages/framework-base/AGENTS.md
index 910522f194..c38cd8fdf1 100644
--- a/packages/framework-base/AGENTS.md
+++ b/packages/framework-base/AGENTS.md
@@ -38,3 +38,11 @@ adding or changing a component pattern.
 
 Add compile-time type assertions for public type behavior and runtime tests for
 rendering, prop merging, children, keys, and refs affected by a change.
+
+## Focus and native refs
+
+Use the [common focus instructions](../../.github/skills/agentic-component-authoring/references/focus.md)
+and their platform breakouts when adding focus-target or interaction abstractions.
+Reuse slot ref composition and cleanup; preserve this package's older React
+compatibility while agentic components use React 19 ref props. Keep proposed
+native services opt-in and do not add a design/components dependency here.

From d9afcd1cbe008b578b3d86b3b57133615b41c432 Mon Sep 17 00:00:00 2001
From: Jason Morse <jasonmo@microsoft.com>
Date: Mon, 14 Sep 2026 17:33:50 -0700
Subject: [PATCH 07/11] add focus rework for windows and win32

---
 .changeset/focus-management-foundation.md     |   9 +
 .../references/focus-windows.md               |   8 +
 .../references/focus.md                       |  25 ++-
 docs/pages/Theming/Basics.md                  |  14 +-
 .../agentic/components/WIN32-FOCUS-PLAN.md    |  47 ++++-
 .../src/common/useFocusVisuals.test.tsx       |   9 +-
 .../components/src/common/useFocusVisuals.ts  |   6 +-
 .../components/src/components/AGENTS.md       |  11 +-
 .../components/accordion/accordion.types.ts   |   2 +
 .../components/accordion/renderAccordion.tsx  |   2 +-
 .../components/accordion/spec/interaction.md  |   8 +
 .../src/components/accordion/spec/source.json |   2 +-
 .../src/components/accordion/useAccordion.ts  |   5 +-
 .../src/components/button/button.stories.tsx  |  66 +++++++
 .../src/components/button/button.types.ts     |   2 +
 .../src/components/button/renderButton.tsx    |   2 +-
 .../src/components/button/spec/interaction.md |   8 +
 .../src/components/button/spec/source.json    |   2 +-
 .../src/components/button/useButton.ts        |   7 +-
 .../src/components/card/card.test.tsx         |  10 ++
 .../src/components/card/card.types.ts         |   2 +
 .../src/components/card/renderCard.tsx        |   2 +-
 .../src/components/card/spec/interaction.md   |   8 +
 .../src/components/card/spec/source.json      |   2 +-
 .../components/src/components/card/useCard.ts |   5 +-
 .../src/components/card/useCardStyles.ts      |   1 -
 .../src/components/checkbox/SPEC.md           |  28 +--
 .../src/components/checkbox/checkbox.test.tsx |  60 +++++++
 .../src/components/checkbox/checkbox.types.ts |   2 +
 .../components/checkbox/renderCheckbox.tsx    |   2 +-
 .../components/checkbox/spec/accessibility.md |   6 +
 .../components/checkbox/spec/interaction.md   |  13 ++
 .../src/components/checkbox/spec/source.json  |   4 +-
 .../src/components/checkbox/useCheckbox.ts    |  28 ++-
 .../src/components/input/input.test.tsx       |  58 ++++++-
 .../src/components/input/input.types.ts       |   2 +
 .../src/components/input/spec/interaction.md  |  13 +-
 .../src/components/input/spec/source.json     |   2 +-
 .../src/components/input/useInput.ts          |  33 ++--
 .../components/list-item/list-item.types.ts   |   2 +
 .../components/list-item/renderListItem.tsx   |   2 +-
 .../components/list-item/spec/interaction.md  |   8 +
 .../src/components/list-item/spec/source.json |   2 +-
 .../src/components/list-item/useListItem.ts   |   7 +-
 .../listbox-item/listbox-item.types.ts        |   2 +
 .../listbox-item/renderListboxItem.tsx        |   2 +-
 .../listbox-item/spec/interaction.md          |   8 +
 .../components/listbox-item/spec/source.json  |   2 +-
 .../components/listbox-item/useListboxItem.ts |   7 +-
 .../components/menu-item/menu-item.types.ts   |   2 +
 .../components/menu-item/renderMenuItem.tsx   |   2 +-
 .../components/menu-item/spec/interaction.md  |   8 +
 .../src/components/menu-item/spec/source.json |   2 +-
 .../src/components/menu-item/useMenuItem.ts   |   5 +-
 .../src/components/radio/radio.types.ts       |   2 +
 .../src/components/radio/renderRadio.tsx      |   2 +-
 .../src/components/radio/spec/interaction.md  |   8 +
 .../src/components/radio/spec/source.json     |   2 +-
 .../src/components/radio/useRadio.ts          |   7 +-
 .../components/src/components/switch/SPEC.md  |  20 +--
 .../src/components/switch/renderSwitch.tsx    |   2 +-
 .../src/components/switch/spec/interaction.md |  23 ++-
 .../src/components/switch/spec/source.json    |   4 +-
 .../src/components/switch/switch.stories.tsx  |  45 +++++
 .../src/components/switch/switch.test.tsx     |  25 ++-
 .../src/components/switch/switch.types.ts     |   2 +
 .../src/components/switch/useSwitch.ts        |  64 +++----
 .../src/components/tab/renderTab.tsx          |   2 +-
 .../src/components/tab/spec/interaction.md    |   8 +
 .../src/components/tab/spec/source.json       |   2 +-
 .../src/components/tab/tab.test.tsx           |   5 +-
 .../src/components/tab/tab.types.ts           |   4 +-
 .../components/src/components/tab/useTab.ts   |  87 ++++++----
 .../components/src/components/tablist/SPEC.md |   6 +
 .../src/components/tablist/TabListContext.ts  |   6 +-
 .../components/tablist/spec/interaction.md    |  15 ++
 .../src/components/tablist/spec/source.json   |   2 +-
 .../components/tablist/tablist.stories.tsx    |  45 +++++
 .../src/components/tablist/tablist.test.tsx   |  51 +++++-
 .../src/components/tablist/tablist.types.ts   |   6 +
 .../src/components/tablist/useTabList.ts      |  87 ++++++++--
 .../src/components/tag/renderTag.tsx          |   2 +-
 .../src/components/tag/spec/interaction.md    |   8 +
 .../src/components/tag/spec/source.json       |   2 +-
 .../src/components/tag/tag.types.ts           |   2 +
 .../components/src/components/tag/useTag.ts   |   7 +-
 packages/agentic/design/src/index.ts          |   2 +
 .../design/src/theming/RootInputBoundary.tsx  |  19 ++
 .../agentic/design/src/theming/ThemedRoot.tsx |  60 ++-----
 packages/agentic/design/src/theming/index.ts  |   2 +
 packages/agentic/design/src/theming/modern.ts |   2 +
 .../agentic/design/src/theming/rootContext.ts |   3 +-
 .../src/theming/rootInputController.test.tsx  |  70 ++++++++
 .../design/src/theming/rootInputController.ts |  47 +++++
 .../src/theming/useRootInputModality.ts       |  18 ++
 .../design/src/theming/useRootInputProps.ts   |  69 ++++++++
 .../src/Win32CalloutPortal.tsx                |   7 +-
 packages/agentic/storybook-desktop/README.md  |   7 +
 .../src/cli/smokeTests.test.ts                |  44 +++++
 .../storybook-desktop/src/cli/smokeTests.ts   |  17 +-
 .../src/component-patterns/README.md          |   8 +
 .../src/hooks/focusTarget.test.ts             | 123 +++++++++++++
 .../framework-base/src/hooks/focusTarget.ts   | 163 ++++++++++++++++++
 .../src/hooks/useFocusTarget.ts               |  59 +++++++
 .../src/hooks/useFocusablePressable.test.tsx  | 159 +++++++++++++++++
 .../src/hooks/useFocusablePressable.ts        | 153 ++++++++++++++++
 packages/framework-base/src/index.ts          |   6 +
 107 files changed, 1916 insertions(+), 252 deletions(-)
 create mode 100644 .changeset/focus-management-foundation.md
 create mode 100644 packages/agentic/design/src/theming/RootInputBoundary.tsx
 create mode 100644 packages/agentic/design/src/theming/rootInputController.test.tsx
 create mode 100644 packages/agentic/design/src/theming/rootInputController.ts
 create mode 100644 packages/agentic/design/src/theming/useRootInputModality.ts
 create mode 100644 packages/agentic/design/src/theming/useRootInputProps.ts
 create mode 100644 packages/framework-base/src/hooks/focusTarget.test.ts
 create mode 100644 packages/framework-base/src/hooks/focusTarget.ts
 create mode 100644 packages/framework-base/src/hooks/useFocusTarget.ts
 create mode 100644 packages/framework-base/src/hooks/useFocusablePressable.test.tsx
 create mode 100644 packages/framework-base/src/hooks/useFocusablePressable.ts

diff --git a/.changeset/focus-management-foundation.md b/.changeset/focus-management-foundation.md
new file mode 100644
index 0000000000..7988582d05
--- /dev/null
+++ b/.changeset/focus-management-foundation.md
@@ -0,0 +1,9 @@
+---
+"@fluentui-react-native/framework-base": minor
+"@fluentui-react-native/design": minor
+"@fluentui-react-native/components": minor
+"@fluentui-react-native/storybook-desktop-runtime": patch
+"@fluentui-react-native/storybook-desktop": minor
+---
+
+Add ref-backed focus targets and cancellable focus requests, shared focusable pressable behavior, live focused-owner modality subscriptions, and shared-controller popup input boundaries. Migrate agentic components and commit TabList eligibility before requesting native focus. Preserve native activation, adapt unidentified Win32 key codes without duplicate presses, and expose Toggle/Select accessibility actions. Add owned targeted native focus qualification through smoke story/tag selectors.
diff --git a/.github/skills/agentic-component-authoring/references/focus-windows.md b/.github/skills/agentic-component-authoring/references/focus-windows.md
index 6e9d7dd276..3f5dadb910 100644
--- a/.github/skills/agentic-component-authoring/references/focus-windows.md
+++ b/.github/skills/agentic-component-authoring/references/focus-windows.md
@@ -71,6 +71,14 @@ This native implementation detail is not a promised public JavaScript API.
 
 - Inspect the actual installed Pressable and native view handlers. Do not add
   key-up activation on top of an existing native press action.
+- Use `useFocusablePressable` rather than per-control key activation. Native
+  qualification found Office Win32 events with `code="Unidentified"` and a
+  valid `key`. The helper supplies one paired key-up fallback only when Win32's
+  code-based Pressability cannot activate that key; recognized codes stay native.
+  Pairing is cancelled on blur, disable, and target-generation changes.
+- Preserve required native accessibility actions. Checkbox and Switch supply `Toggle`;
+  Tab supplies `Select`. The Win32 UIA toggle/selection patterns were unavailable
+  without those action declarations even though JavaScript state was correct.
 - V1 `useKeyProps` prefers key-up on Windows/Win32. It supplies Win32
   handled-key descriptors, but its Windows branch deliberately omits descriptors
   because of the historical `key` versus `code` mismatch. Translate and test the
diff --git a/.github/skills/agentic-component-authoring/references/focus.md b/.github/skills/agentic-component-authoring/references/focus.md
index 3aafc59bf2..f65ab773d2 100644
--- a/.github/skills/agentic-component-authoring/references/focus.md
+++ b/.github/skills/agentic-component-authoring/references/focus.md
@@ -6,9 +6,9 @@ native focus adapter. Then load only the applicable platform detail:
 - [Windows and Win32](focus-windows.md)
 - [macOS](focus-macos.md)
 
-These files define authoring and review obligations. Proposed abstractions in
+These files define authoring and review obligations. Execution status in
 the [desktop focus plan](../../../../packages/agentic/components/WIN32-FOCUS-PLAN.md)
-are not APIs that already exist. Keep each component's reviewed contract and
+distinguishes implemented APIs from native-only follow-ups. Keep each reviewed contract and
 source-specific divergences authoritative.
 
 ## Behavioral authority and platform evidence
@@ -87,6 +87,9 @@ agentic components use React 19.
 
 1. Resolve disabled/interactive state and the actual focus target in
    `use<Component>_unstable`.
+   Use `useFocusablePressable` for pressable targets and `useFocusTarget` for
+   editable or other native targets. Carry `focusTarget`/`focusTargetRef` in
+   private state; compose the internal ref on the actual focus slot.
 2. Compose interaction handlers with exactly one activation owner. Native
    Pressable activation, key handlers, and accessibility actions must not each
    invoke the same action independently.
@@ -104,14 +107,24 @@ selects the custom path. It does not focus the control or make an unfocused
 control visible. Native window activity remains a separate renderer obligation.
 Do not add this option to every public component prop surface without a contract.
 
-The current root settings are nonreactive. The plan adds opt-in refresh only for
-focused custom-ring owners; do not implement scene-wide React updates or a
-second pointer tracker in each control. Test same-target keyboard/pointer
-changes without a manual rerender.
+`useRootSettings` remains a stable non-subscribing query. `useRootInputModality`
+provides opt-in notifications; `useFocusVisuals` subscribes only while focused
+on the custom path. `RootInputBoundary` attaches additional native popup content
+to the same controller without changing themes. Do not add scene-wide React
+updates or per-control pointer trackers.
+
+Focus targets expose `requestFocus(intent)`, an observable snapshot, and a
+mount generation. A request reports `requested` until a focus event confirms it;
+detach, disable, replacement, or explicit cancellation invalidate pending work.
+The controller preserves focus for a same-commit ref handoff to the identical
+native instance, not a later remount. Higher-level native window activity and
+cross-window restore remain separately qualified.
 
 For nested controls, preserve `target`/`currentTarget` or equivalent native
 identity and separate self-focus from focus-within. Functional Input borders,
 selection visuals, and hover styling are not generic focus rings.
+Do not apply this self-focus filter to Pressability's responder press: a valid
+pointer press can originate on a noninteractive label/icon descendant.
 
 ## Collections and popup scopes
 
diff --git a/docs/pages/Theming/Basics.md b/docs/pages/Theming/Basics.md
index 46d4cf78d0..00bd645f28 100644
--- a/docs/pages/Theming/Basics.md
+++ b/docs/pages/Theming/Basics.md
@@ -56,7 +56,7 @@ source's defaults plus the root's options.
 The outermost `ThemedRoot` also provides `RootContext`. `useRootSettings()` returns
 the same object throughout a mounted scene, including under nested roots that
 replace the theme. Its read-only `inputModality` is initially `'pointer'`, becomes
-`'keyboard'` on key-down, and returns to `'pointer'` on pointer-down or touch-start.
+`'keyboard'` on non-modifier key-down/up, and returns to `'pointer'` on pointer-down or touch-start.
 Read the property in an event handler when making a focus decision:
 
 ```tsx
@@ -69,9 +69,12 @@ const onFocus = () => {
 };
 ```
 
-Modality changes do not notify React or rerender consumers; do not destructure
+Reading `useRootSettings()` does not subscribe to changes; do not destructure
 the property during render if it needs to remain current in an event handler.
-Theme and appearance changes remain reactive. The hook throws outside a
+Use `useRootInputModality(subscribe)` for an opt-in reactive read. Focus visuals
+subscribe only while focused on the custom-ring path, so input changes do not
+rerender the scene or every component. Theme and appearance remain reactive.
+The hooks throw outside a
 `ThemedRoot`; independent scenes maintain independent modality state.
 
 Only the outermost root installs tracking handlers. Keyboard and pointer capture
@@ -80,8 +83,9 @@ capture provides a touch fallback without claiming the responder by default.
 Caller handlers still run after tracking, and caller responder return values are
 preserved. Keyboard tracking requires a platform that emits View key events
 (macOS, Windows, Win32, or web); this component does not add native hardware-key
-support to iOS or Android. Native windows or portals whose events do not reach
-the scene root need their own scene boundary.
+support to iOS or Android. Wrap native popup/window content in `RootInputBoundary`
+when its events need another attachment. This shares the existing scene
+controller and theme rather than creating an independent root.
 
 ### Populating the Theme
 
diff --git a/packages/agentic/components/WIN32-FOCUS-PLAN.md b/packages/agentic/components/WIN32-FOCUS-PLAN.md
index 1fe43312ad..fbc5229155 100644
--- a/packages/agentic/components/WIN32-FOCUS-PLAN.md
+++ b/packages/agentic/components/WIN32-FOCUS-PLAN.md
@@ -1,6 +1,6 @@
 # Desktop focus and focus-visual improvement plan
 
-**Status:** Proposed; investigation only, no runtime changes.
+**Status:** Shared component rework implemented; full native qualification remains incomplete.
 **Reviewed baseline:** `69ce270dde98588f8386e60fa4c720cad3af0142`, September 14, 2026.
 **Scope:** New agentic components on Office Win32 Paper, React Native Windows
 Fabric, and React Native macOS. **V1 Win32 is the behavioral reference for both
@@ -11,6 +11,51 @@ The historical filename is retained so existing plan references remain valid.
 This refinement adds common/platform authoring instructions, modern-ref
 requirements, macOS source research, and a gated `native-lib` assessment.
 
+## Execution status (September 14, 2026)
+
+Implemented:
+
+- Framework Base `useFocusTarget` and `useFocusablePressable`: stable ref-backed
+  targets, attachment generations, cancellable request status, native focus
+  confirmation, self-focus filtering, callback-ref handoffs, and Windows pointer
+  focus before activation.
+- Design `useRootInputModality` and `RootInputBoundary`: stable root settings,
+  deduplicated focused-owner subscriptions, modifier-only filtering, and popup
+  event attachments sharing the scene controller.
+- All eleven focus-ring consumers plus Input use the target foundation.
+  TabList commits eligibility/selection before requesting focus and distinguishes
+  its tab stop from confirmed native focus. Card keeps its structural ref and
+  respects a caller's nonfocusable overlay setting.
+- Switch no longer toggles independently on key-up. Native Win32 qualification
+  exposed `code="Unidentified"`; the shared helper now uses one generation/blur-
+  guarded, key-based fallback only where native code-based activation cannot run.
+  Checkbox/Switch `Toggle` and Tab `Select` accessibility actions expose the expected
+  native toggle/selection patterns.
+- Dedicated `desktop-focus` Button/Switch/TabList stories and owned smoke
+  selectors (`STORYBOOK_SMOKE_STORY`, `STORYBOOK_SMOKE_TAG`) make native
+  qualification reproducible without bypassing leases or changing default smoke
+  contracts.
+
+Native evidence so far: all three dedicated Win32 cases passed with real input
+and no skips. The default Win32 Button/Checkbox/Input lane also passed all three
+cases after declaring Checkbox's native Toggle action; the previous failure
+showed a checked glyph but false UIA checked state. Windows Fabric Switch and
+TabList cases passed; the first Button
+case repeatedly timed out during story selection before executing input steps.
+The full Windows story traversal rendered successfully. The unsuccessful
+orchestrator experiments were removed rather than weakening readiness checks.
+
+Affected workspace suites pass, as do the root build and package lint/format.
+The required uncached repository test graph stops in two unchanged codemod
+fixture comparisons; these unrelated baseline failures were not modified.
+
+Still gated: complete three-lane P0/V1 parity, the Windows first-story readiness
+failure, macOS native input/VoiceOver, full popup/window restoration and activity
+policy, and P4 visual/high-contrast/scale qualification. A complete new menu owner
+or RadioGroup is not introduced. N0/native-lib remains deferred: observed
+component activation/ref gaps were resolved without a new native module; native
+window observation still needs its own scoped proof and host integration.
+
 The investigation used three independent read-only passes over V1 leaf controls,
 navigation/popups, and shared interaction/native-JavaScript adapters, followed by
 a comparison with the new components. Repository paths and line ranges below
diff --git a/packages/agentic/components/src/common/useFocusVisuals.test.tsx b/packages/agentic/components/src/common/useFocusVisuals.test.tsx
index 0363e2ec1a..1fda2c47f3 100644
--- a/packages/agentic/components/src/common/useFocusVisuals.test.tsx
+++ b/packages/agentic/components/src/common/useFocusVisuals.test.tsx
@@ -51,7 +51,7 @@ describe('useFocusVisuals', () => {
     expect(Boolean(seen[0].FocusRing)).toBe(!useSystemFocusRing);
   });
 
-  it('queries the current root modality on renders without a local modality tracker', async () => {
+  it('updates the focused ring on modality changes without manually rerendering', async () => {
     const seen: FocusVisualsState[] = [];
     const component = await render(<Probe focused={false} seen={seen} useSystemFocusRing={false} />);
     const ring = component.getByTestId('focus-visual', { includeHiddenElements: true });
@@ -64,8 +64,13 @@ describe('useFocusVisuals', () => {
     expect(StyleSheet.flatten(ring.props.style).opacity).toBeUndefined();
 
     await fireEvent(component.getByTestId('test-scene-root'), 'pointerDownCapture', {});
-    await component.rerender(<Probe focused seen={seen} useSystemFocusRing={false} />);
     expect(StyleSheet.flatten(ring.props.style).opacity).toBe(0);
+    await fireEvent(component.getByTestId('test-scene-root'), 'keyDownCapture', { nativeEvent: { key: 'Tab' } });
+    expect(StyleSheet.flatten(ring.props.style).opacity).toBeUndefined();
+    await component.rerender(<Probe focused={false} seen={seen} useSystemFocusRing={false} />);
+    const unfocusedCount = seen.length;
+    await fireEvent(component.getByTestId('test-scene-root'), 'pointerDownCapture', {});
+    expect(seen).toHaveLength(unfocusedCount);
     expect(seen.every(({ FocusRing }) => FocusRing === slot)).toBe(true);
     expect(component.getByTestId('focus-visual', { includeHiddenElements: true })).toBe(ring);
   });
diff --git a/packages/agentic/components/src/common/useFocusVisuals.ts b/packages/agentic/components/src/common/useFocusVisuals.ts
index 201aa322d4..523246e186 100644
--- a/packages/agentic/components/src/common/useFocusVisuals.ts
+++ b/packages/agentic/components/src/common/useFocusVisuals.ts
@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
 
-import { useRootSettings } from '@fluentui-react-native/design';
+import { useRootInputModality } from '@fluentui-react-native/design';
 import { useOptionalSlot } from '@fluentui-react-native/framework-base';
 import type { ComponentState, OptionalSlot } from '@fluentui-react-native/framework-base';
 
@@ -32,11 +32,11 @@ export type FocusVisualsState = ComponentState<FocusVisualsSlots> & {
  * theme colors in the styling phase with applyFocusRingStyles.
  */
 export function useFocusVisuals({ focused, useSystemFocusRing, alwaysVisible = false }: FocusVisualsOptions): FocusVisualsState {
-  const settings = useRootSettings();
   const enableFocusRing = !alwaysVisible && (useSystemFocusRing ?? (Platform.OS === 'windows' || Platform.OS === 'macos'));
+  const inputModality = useRootInputModality(focused && !enableFocusRing && !alwaysVisible);
   const FocusRing = useOptionalSlot(
     FocusVisual,
-    enableFocusRing ? null : { visible: focused && (alwaysVisible || settings.inputModality === 'keyboard') },
+    enableFocusRing ? null : { visible: focused && (alwaysVisible || inputModality === 'keyboard') },
   );
 
   return { FocusRing, enableFocusRing };
diff --git a/packages/agentic/components/src/components/AGENTS.md b/packages/agentic/components/src/components/AGENTS.md
index 6b458dff0e..028a6f76dc 100644
--- a/packages/agentic/components/src/components/AGENTS.md
+++ b/packages/agentic/components/src/components/AGENTS.md
@@ -69,14 +69,17 @@ then [Windows/Win32](../../../../../.github/skills/agentic-component-authoring/r
 The common file owns ref, state, activation, scope, and styling invariants; platform files own detailed
 native adaptation. V1 Win32 models observable behavior for both Office Win32 and Windows Fabric.
 
-Current implementation: `useFocusVisuals` returns a private optional `FocusRing` and `enableFocusRing`;
+Current implementation: `useFocusablePressable`/`useFocusTarget` own ref-backed native targets;
+compose `focusTargetRef` on the actual target and retain the public native root ref. `useFocusVisuals`
+returns a private optional `FocusRing` and `enableFocusRing`;
 Windows/macOS default to native and Win32 defaults to custom. `alwaysVisible` selects a custom ring only
 while focused. `applyFocusRingStyles` owns cached colors/widths; component styles supply radius. Put the ring
-and native setting only on the actual focus target. Scenes require `ThemedRoot`; modality is currently
-sampled on render, without a root subscription. The native Windows path requires RNW 0.81.35 or newer.
+and native setting only on the actual focus target. Scenes require `ThemedRoot`; custom focused rings
+subscribe through `useRootInputModality`, while `useRootSettings` remains stable and non-subscribing.
+The native Windows path requires RNW 0.81.35 or newer.
 
 The [desktop improvement plan](../../WIN32-FOCUS-PLAN.md) describes future target/intent/notification
-abstractions and native-service gates; they are not shipped APIs. Do not change behavior or pinned source
+abstractions and native-service gates and records which are implemented. Do not change behavior or pinned source
 identities by following a proposal before its component contract is reviewed. The accepted
 `native-system-focus-visuals` divergence continues to refer through this stable anchor.
 
diff --git a/packages/agentic/components/src/components/accordion/accordion.types.ts b/packages/agentic/components/src/components/accordion/accordion.types.ts
index fd1ba5be3b..45ea3986cc 100644
--- a/packages/agentic/components/src/components/accordion/accordion.types.ts
+++ b/packages/agentic/components/src/components/accordion/accordion.types.ts
@@ -1,3 +1,4 @@
+import type { FocusTargetBinding } from '@fluentui-react-native/framework-base';
 import type { AccessibilityState, Pressable, StyleProp, View, ViewStyle } from 'react-native';
 import type {
   ComponentProps,
@@ -94,6 +95,7 @@ export type AccordionRootProps = OwnedRootProps<
 export type AccordionProps = AccordionStateProps & ComponentProps<AccordionSlots, AccordionRootProps>;
 
 export type AccordionState = ComponentState<AccordionStateSlots & FocusVisualsSlots> &
+  FocusTargetBinding &
   Required<Pick<AccordionStateProps, 'layout' | 'size'>> &
   ThemeState &
   PressableState & {
diff --git a/packages/agentic/components/src/components/accordion/renderAccordion.tsx b/packages/agentic/components/src/components/accordion/renderAccordion.tsx
index 8c49b777c3..f8bafd492a 100644
--- a/packages/agentic/components/src/components/accordion/renderAccordion.tsx
+++ b/packages/agentic/components/src/components/accordion/renderAccordion.tsx
@@ -27,7 +27,7 @@ export function renderAccordion_unstable(state: AccordionState, styles: Accordio
 
   return (
     <state.root>
-      <Header>
+      <Header ref={state.focusTargetRef}>
         {state.FocusRing && <state.FocusRing />}
         {layout === 'chevronStart' ? (
           <>
diff --git a/packages/agentic/components/src/components/accordion/spec/interaction.md b/packages/agentic/components/src/components/accordion/spec/interaction.md
index c406e3c6ac..3a418b8020 100644
--- a/packages/agentic/components/src/components/accordion/spec/interaction.md
+++ b/packages/agentic/components/src/components/accordion/spec/interaction.md
@@ -15,3 +15,11 @@ noninteractive targets show no custom ring. The visual is decorative and cannot
 intercept input; native ring appearance remains renderer-owned.
 
 The chevron rotates immediately and the body visibility styles change immediately. There is no component-owned motion or reduced-motion branch.
+
+## Focus target lifetime
+
+The state hook uses the shared ref-backed focus foundation. Internal focus-target
+refs compose with caller refs on the actual interactive slot, without redirecting
+structural root refs. Native self-focus is distinct from descendant events, and
+detach/disable invalidates pending focus requests. Focus visuals observe root
+modality only while focused on the custom path; there is no scene-wide rerender.
diff --git a/packages/agentic/components/src/components/accordion/spec/source.json b/packages/agentic/components/src/components/accordion/spec/source.json
index c2f08b8528..363d01b1d5 100644
--- a/packages/agentic/components/src/components/accordion/spec/source.json
+++ b/packages/agentic/components/src/components/accordion/spec/source.json
@@ -3,7 +3,7 @@
   "component": "accordion",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-12",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/accordion/useAccordion.ts b/packages/agentic/components/src/components/accordion/useAccordion.ts
index deeec41e81..e5c08f264c 100644
--- a/packages/agentic/components/src/components/accordion/useAccordion.ts
+++ b/packages/agentic/components/src/components/accordion/useAccordion.ts
@@ -5,7 +5,7 @@ import { useThemeState } from '@fluentui-react-native/design';
 import {
   useAccessibilityLabelWarning,
   useOptionalSlot,
-  usePressableState,
+  useFocusablePressable,
   useSlot,
   useToggleState,
 } from '@fluentui-react-native/framework-base';
@@ -55,7 +55,7 @@ export function useAccordion_unstable(props: AccordionProps): AccordionState {
   const toggleExpanded = expansion.toggle;
 
   const themeState = useThemeState();
-  const [headerProps, pressableState] = usePressableState({
+  const [headerProps, pressableState, focusBinding] = useFocusablePressable({
     accessibilityControls: bodyId,
     accessibilityHint,
     accessibilityLabel,
@@ -136,6 +136,7 @@ export function useAccordion_unstable(props: AccordionProps): AccordionState {
     userStyle,
     ...themeState,
     ...pressableState,
+    ...focusBinding,
     focused: focusedProp ?? pressableState.focused,
   };
 }
diff --git a/packages/agentic/components/src/components/button/button.stories.tsx b/packages/agentic/components/src/components/button/button.stories.tsx
index ea49a1937d..e3beb3460f 100644
--- a/packages/agentic/components/src/components/button/button.stories.tsx
+++ b/packages/agentic/components/src/components/button/button.stories.tsx
@@ -5,8 +5,13 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import type { Meta, StoryObj } from '@storybook/react-native';
 import type { DesktopStoryTests } from '@fluentui-react-native/desktop-driver/authoring';
+import { useRootInputModality } from '@fluentui-react-native/design';
+import type { FocusKeyboardEvent } from '@fluentui-react-native/framework-base';
 
 import { Button } from './button';
+import { useButton_unstable } from './useButton';
+import { useButtonStyles_unstable } from './useButtonStyles';
+import { renderButton_unstable } from './renderButton';
 import type { ButtonAppearance, ButtonShape, ButtonSize } from './button.types';
 
 type StoryGroupProps = {
@@ -114,6 +119,67 @@ export const Default: Story = {
   },
 };
 
+function ModalityProbe() {
+  return <Text testID="focus-input-modality">{useRootInputModality()}</Text>;
+}
+
+function FocusManagementScene() {
+  const [count, setCount] = useState(0);
+  const [keyTrace, setKeyTrace] = useState('none');
+  const recordKey = (event: FocusKeyboardEvent) => {
+    setKeyTrace(`${event.nativeEvent.key}/${event.nativeEvent.code ?? 'no-code'}/self:${event.target === event.currentTarget}`);
+  };
+  const state = useButton_unstable({
+    content: 'Focus and activate',
+    testID: 'focus-probe-button',
+    onPress: () => setCount((value) => value + 1),
+    onKeyDown: recordKey,
+    onKeyUp: recordKey,
+  });
+  useButtonStyles_unstable(state);
+  return (
+    <View>
+      {renderButton_unstable(state)}
+      <Text testID="focus-probe-state">{state.focused ? 'focused' : 'blurred'}</Text>
+      <Text testID="focus-probe-count">{String(count)}</Text>
+      <Text testID="focus-probe-key">{keyTrace}</Text>
+      <ModalityProbe />
+    </View>
+  );
+}
+
+export const FocusManagement: Story = {
+  render: () => <FocusManagementScene />,
+  tags: ['desktop-focus'],
+  parameters: {
+    desktopDriver: {
+      version: 1,
+      tests: [
+        {
+          id: 'focus-and-exactly-once-activation',
+          platforms: ['windows', 'win32'],
+          requires: ['physical-click', 'keyboard', 'focus'],
+          steps: [
+            { action: 'wait', target: { testId: 'focus-probe-button' } },
+            { action: 'click', target: { testId: 'focus-probe-button' } },
+            { expect: { state: 'focused', target: { testId: 'focus-probe-button' }, value: true } },
+            { action: 'wait', until: { state: 'text', target: { testId: 'focus-probe-state' }, value: 'focused' } },
+            { expect: { state: 'text', target: { testId: 'focus-probe-count' }, value: '1' } },
+            { action: 'keys', value: ['\uE007'] },
+            { action: 'wait', until: { state: 'text', target: { testId: 'focus-probe-count' }, value: '2' } },
+            { expect: { state: 'text', target: { testId: 'focus-input-modality' }, value: 'keyboard' } },
+            { action: 'keys', value: ['\uE00D'] },
+            { action: 'wait', until: { state: 'text', target: { testId: 'focus-probe-count' }, value: '3' } },
+            { action: 'click', target: { testId: 'focus-probe-button' } },
+            { action: 'wait', until: { state: 'text', target: { testId: 'focus-probe-count' }, value: '4' } },
+            { expect: { state: 'text', target: { testId: 'focus-input-modality' }, value: 'pointer' } },
+          ],
+        },
+      ],
+    } satisfies DesktopStoryTests,
+  },
+};
+
 export const Overview: Story = {
   render: () => (
     <View style={styles.story}>
diff --git a/packages/agentic/components/src/components/button/button.types.ts b/packages/agentic/components/src/components/button/button.types.ts
index e62777f0ed..63f9babb16 100644
--- a/packages/agentic/components/src/components/button/button.types.ts
+++ b/packages/agentic/components/src/components/button/button.types.ts
@@ -1,3 +1,4 @@
+import type { FocusTargetBinding } from '@fluentui-react-native/framework-base';
 import type { Pressable, StyleProp, ViewStyle } from 'react-native';
 import type {
   Slot,
@@ -91,6 +92,7 @@ export type ButtonProps = ButtonStateProps & ComponentProps<ButtonSlots, ButtonE
  * The button state, returned from the useButton hook
  */
 export type ButtonState = ComponentState<ButtonStateSlots & FocusVisualsSlots> &
+  FocusTargetBinding &
   Required<ButtonStateProps> &
   Omit<ThemeState, 'appearance'> &
   PressableState & {
diff --git a/packages/agentic/components/src/components/button/renderButton.tsx b/packages/agentic/components/src/components/button/renderButton.tsx
index b3f810a41e..4ebf9ae523 100644
--- a/packages/agentic/components/src/components/button/renderButton.tsx
+++ b/packages/agentic/components/src/components/button/renderButton.tsx
@@ -19,7 +19,7 @@ export function renderButton_unstable(state: ButtonState) {
     );
 
   return (
-    <state.root>
+    <state.root ref={state.focusTargetRef}>
       {state.FocusRing && <state.FocusRing />}
       {iconPosition === 'before' && ActiveIcon && <ActiveIcon />}
       {contentElement}
diff --git a/packages/agentic/components/src/components/button/spec/interaction.md b/packages/agentic/components/src/components/button/spec/interaction.md
index 032a20f566..8567b21685 100644
--- a/packages/agentic/components/src/components/button/spec/interaction.md
+++ b/packages/agentic/components/src/components/button/spec/interaction.md
@@ -42,3 +42,11 @@ intercept input; native ring appearance remains renderer-owned.
 Button currently performs no timed state animation. Hover, press, selection,
 and focus styles update immediately, so reduced-motion handling adds no
 separate branch.
+
+## Focus target lifetime
+
+The state hook uses the shared ref-backed focus foundation. Internal focus-target
+refs compose with caller refs on the actual interactive slot, without redirecting
+structural root refs. Native self-focus is distinct from descendant events, and
+detach/disable invalidates pending focus requests. Focus visuals observe root
+modality only while focused on the custom path; there is no scene-wide rerender.
diff --git a/packages/agentic/components/src/components/button/spec/source.json b/packages/agentic/components/src/components/button/spec/source.json
index 347a194c83..8912cd0710 100644
--- a/packages/agentic/components/src/components/button/spec/source.json
+++ b/packages/agentic/components/src/components/button/spec/source.json
@@ -3,7 +3,7 @@
   "component": "button",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-12",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/button/useButton.ts b/packages/agentic/components/src/components/button/useButton.ts
index fb0d787719..f67b845db4 100644
--- a/packages/agentic/components/src/components/button/useButton.ts
+++ b/packages/agentic/components/src/components/button/useButton.ts
@@ -1,5 +1,5 @@
 import type { ButtonProps, ButtonState } from './button.types';
-import { useAccessibilityLabelWarning, usePressableState, useSlot, useOptionalSlot } from '@fluentui-react-native/framework-base';
+import { useAccessibilityLabelWarning, useFocusablePressable, useSlot, useOptionalSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
 import { Pressable } from 'react-native';
 import type { PressableProps } from 'react-native';
@@ -58,9 +58,9 @@ export function useButton_unstable(props: ButtonProps): ButtonState {
     },
     accessible: rest.accessible ?? true,
     disabled,
-    focusable: rest.focusable ?? !disabled,
+    focusable: !disabled && (rest.focusable ?? true),
   };
-  const [pressableProps, pressableState] = usePressableState(nativeProps);
+  const [pressableProps, pressableState, focusBinding] = useFocusablePressable(nativeProps);
   const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled });
 
   const root = useSlot(Pressable, { ...pressableProps, ...nativeFocusProps, ref: rootRef });
@@ -86,6 +86,7 @@ export function useButton_unstable(props: ButtonProps): ButtonState {
     userStyle,
     ...themeState,
     ...pressableState,
+    ...focusBinding,
     appearance: appearance ?? 'secondary',
   };
 }
diff --git a/packages/agentic/components/src/components/card/card.test.tsx b/packages/agentic/components/src/components/card/card.test.tsx
index 6e55fc37ca..5aede28ae6 100644
--- a/packages/agentic/components/src/components/card/card.test.tsx
+++ b/packages/agentic/components/src/components/card/card.test.tsx
@@ -54,6 +54,16 @@ describe('Card', () => {
     expect(component.getByRole('button').props.accessibilityState.selected).toBe(false);
   });
 
+  it('preserves an explicitly nonfocusable overlay without disabling pointer activation', async () => {
+    const onPress = jest.fn();
+    const component = await renderCard({ accessibilityLabel: 'Report', focusable: false, onPress });
+    const overlay = component.getByRole('button');
+
+    expect(overlay.props.focusable).toBe(false);
+    await fireEvent.press(overlay);
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
   it('renders the default surface and content', async () => {
     const component = await renderCard({
       content: {
diff --git a/packages/agentic/components/src/components/card/card.types.ts b/packages/agentic/components/src/components/card/card.types.ts
index a21f6c038c..05f339d468 100644
--- a/packages/agentic/components/src/components/card/card.types.ts
+++ b/packages/agentic/components/src/components/card/card.types.ts
@@ -1,3 +1,4 @@
+import type { FocusTargetBinding } from '@fluentui-react-native/framework-base';
 import type { Pressable, PressableProps, StyleProp, View, ViewStyle } from 'react-native';
 
 import type {
@@ -48,6 +49,7 @@ export type CardExposedPressableProps = OwnedRootProps<PressableProps, 'accessib
 export type CardProps = CardStateProps & ComponentProps<CardSlots, CardExposedPressableProps>;
 
 export type CardState = ComponentState<CardStateSlots & FocusVisualsSlots> &
+  FocusTargetBinding &
   Required<CardStateProps> &
   ThemeState & {
     hovered: boolean;
diff --git a/packages/agentic/components/src/components/card/renderCard.tsx b/packages/agentic/components/src/components/card/renderCard.tsx
index b0f54648ce..38f84e67cc 100644
--- a/packages/agentic/components/src/components/card/renderCard.tsx
+++ b/packages/agentic/components/src/components/card/renderCard.tsx
@@ -10,7 +10,7 @@ export function renderCard_unstable(state: CardState) {
 
   return (
     <state.root>
-      {state.overlay && <state.overlay>{state.FocusRing && <state.FocusRing />}</state.overlay>}
+      {state.overlay && <state.overlay ref={state.focusTargetRef}>{state.FocusRing && <state.FocusRing />}</state.overlay>}
       {shouldRenderSlots && state.header && <state.header />}
       <state.content />
       {shouldRenderNestedContent && state.content02 && <state.content02 />}
diff --git a/packages/agentic/components/src/components/card/spec/interaction.md b/packages/agentic/components/src/components/card/spec/interaction.md
index 16fe9d5f84..da292a8996 100644
--- a/packages/agentic/components/src/components/card/spec/interaction.md
+++ b/packages/agentic/components/src/components/card/spec/interaction.md
@@ -19,3 +19,11 @@ focus stays hidden unless the composition hook uses `alwaysVisible`. That
 override selects the custom path and still requires focus. Disabled or
 noninteractive targets show no custom ring. The visual is decorative and cannot
 intercept input; native ring appearance remains renderer-owned.
+
+## Focus target lifetime
+
+The state hook uses the shared ref-backed focus foundation. Internal focus-target
+refs compose with caller refs on the actual interactive slot, without redirecting
+structural root refs. Native self-focus is distinct from descendant events, and
+detach/disable invalidates pending focus requests. Focus visuals observe root
+modality only while focused on the custom path; there is no scene-wide rerender.
diff --git a/packages/agentic/components/src/components/card/spec/source.json b/packages/agentic/components/src/components/card/spec/source.json
index d50678cfca..3474c9f0c3 100644
--- a/packages/agentic/components/src/components/card/spec/source.json
+++ b/packages/agentic/components/src/components/card/spec/source.json
@@ -3,7 +3,7 @@
   "component": "card",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-12",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/card/useCard.ts b/packages/agentic/components/src/components/card/useCard.ts
index 0217489e67..75c905e914 100644
--- a/packages/agentic/components/src/components/card/useCard.ts
+++ b/packages/agentic/components/src/components/card/useCard.ts
@@ -1,7 +1,7 @@
 import { Pressable, View, useWindowDimensions } from 'react-native';
 import type { PressableProps } from 'react-native';
 
-import { type PropsWithRefOf, usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
+import { type PropsWithRefOf, useFocusablePressable, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
 import { useFocusVisuals } from '../../common/useFocusVisuals';
 
@@ -56,7 +56,7 @@ export function useCard_unstable(props: CardProps): CardState {
   const resolvedDirection = direction === 'horizontal' && width < horizontalCollapseWidth ? 'vertical' : direction;
   const themeState = useThemeState();
 
-  const [overlayProps, pressableState] = usePressableState({
+  const [overlayProps, pressableState, focusBinding] = useFocusablePressable({
     ...rest,
     accessibilityHint,
     accessibilityLabel,
@@ -135,5 +135,6 @@ export function useCard_unstable(props: CardProps): CardState {
     isSelectable,
     userStyle,
     ...themeState,
+    ...focusBinding,
   };
 }
diff --git a/packages/agentic/components/src/components/card/useCardStyles.ts b/packages/agentic/components/src/components/card/useCardStyles.ts
index e49091d247..8e1153e8a6 100644
--- a/packages/agentic/components/src/components/card/useCardStyles.ts
+++ b/packages/agentic/components/src/components/card/useCardStyles.ts
@@ -20,7 +20,6 @@ export function useCardStyles_unstable(state: CardState) {
   if (state.overlay) {
     attachSlotProps(state.overlay, {
       accessible: true,
-      focusable: state.isInteractive && !state.disabled,
       style: [cardStyles.overlay, overlayStyle],
     });
   }
diff --git a/packages/agentic/components/src/components/checkbox/SPEC.md b/packages/agentic/components/src/components/checkbox/SPEC.md
index 027aab8435..9da68bed14 100644
--- a/packages/agentic/components/src/components/checkbox/SPEC.md
+++ b/packages/agentic/components/src/components/checkbox/SPEC.md
@@ -28,17 +28,17 @@ each Checkbox itself.
 
 ### Props and defaults
 
-| Prop                | Type                                    | Default         | Contract                                                                                                       |
-| ------------------- | --------------------------------------- | --------------- | -------------------------------------------------------------------------------------------------------------- |
-| `status`            | `unchecked \| checked \| indeterminate` | absent          | When supplied, the status is externally driven and Checkbox renders the supplied value without changing it.    |
-| `defaultStatus`     | `unchecked \| checked \| indeterminate` | `unchecked`     | The starting status while the status is internally driven. Ignored while `status` is supplied.                 |
-| `onStatusChange`    | `(nextStatus) => void`                  | absent          | Called with the next status whenever a press resolves one, in both the externally and internally driven cases. |
-| `variant`           | `standard \| circular`                  | `standard`      | Selects the indicator corner radius. All other indicator values are shared.                                    |
-| `disabled`          | `boolean`                               | `false`         | Blocks activation, removes the root from focus, and selects disabled colors.                                   |
-| `label`             | `string`                                | `'Label'`       | The label text and the accessible-name fallback.                                                               |
-| `showLabel`         | `boolean`                               | `true`          | Controls whether the label column renders. The name fallback survives hiding it.                               |
-| `secondaryText`     | `string`                                | `'Description'` | Supporting text rendered beneath the label.                                                                    |
-| `showSecondaryText` | `boolean`                               | `false`         | Renders secondary text; effective only while `showLabel` is `true`.                                            |
+| Prop                | Type                                    | Default         | Contract                                                                                                                  |
+| ------------------- | --------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `status`            | `unchecked \| checked \| indeterminate` | absent          | When supplied, the status is externally driven and Checkbox renders the supplied value without changing it.               |
+| `defaultStatus`     | `unchecked \| checked \| indeterminate` | `unchecked`     | The starting status while the status is internally driven. Ignored while `status` is supplied.                            |
+| `onStatusChange`    | `(nextStatus) => void`                  | absent          | Called with the next status for press or accessibility Toggle activation, in both externally and internally driven cases. |
+| `variant`           | `standard \| circular`                  | `standard`      | Selects the indicator corner radius. All other indicator values are shared.                                               |
+| `disabled`          | `boolean`                               | `false`         | Blocks activation, removes the root from focus, and selects disabled colors.                                              |
+| `label`             | `string`                                | `'Label'`       | The label text and the accessible-name fallback.                                                                          |
+| `showLabel`         | `boolean`                               | `true`          | Controls whether the label column renders. The name fallback survives hiding it.                                          |
+| `secondaryText`     | `string`                                | `'Description'` | Supporting text rendered beneath the label.                                                                               |
+| `showSecondaryText` | `boolean`                               | `false`         | Renders secondary text; effective only while `showLabel` is `true`.                                                       |
 
 The root also accepts the owned `PressableProps` surface. `children` is typed
 `never`; Checkbox owns its subtree. A caller `style` is applied after the
@@ -107,6 +107,12 @@ platforms; Checkbox adds no key handling of its own and does not intercept Tab.
 A disabled Checkbox sets `focusable` to `false` and is skipped by keyboard
 navigation.
 
+Checkbox declares the native `Toggle` accessibility action, preserving caller
+actions without duplicating it. This is required for the Win32 UIA toggle
+pattern even when a pointer press has already updated the rendered checkmark.
+An accessibility Toggle uses the same status transition without synthesizing
+`onPress`; caller accessibility handlers still run, including while disabled.
+
 No timed animation is present. Status, hover, press, and focus styling change on
 the next render, so reduced-motion settings need no separate branch.
 
diff --git a/packages/agentic/components/src/components/checkbox/checkbox.test.tsx b/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
index 046c971ab1..45d8d30221 100644
--- a/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
+++ b/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
@@ -71,6 +71,66 @@ describe('Checkbox', () => {
     expect(component.getByRole('checkbox').props.accessibilityState.checked).toBe(false);
   });
 
+  it.each(['unchecked', 'checked', 'indeterminate'] as const)('toggles %s status once through native accessibility', async (status) => {
+    const onStatusChange = jest.fn();
+    const onPress = jest.fn();
+    const onAccessibilityAction = jest.fn();
+    const component = await renderCheckbox({ defaultStatus: status, onStatusChange, onPress, onAccessibilityAction });
+    const event = { nativeEvent: { actionName: 'Toggle' } };
+
+    expect(getRoot(component).props.accessibilityActions).toEqual([{ name: 'Toggle' }]);
+    await fireEvent(getRoot(component), 'accessibilityAction', event);
+
+    expect(onStatusChange).toHaveBeenCalledTimes(1);
+    expect(onStatusChange).toHaveBeenCalledWith(status === 'checked' ? 'unchecked' : 'checked');
+    expect(getRoot(component).props.accessibilityState.checked).toBe(status !== 'checked');
+    expect(onAccessibilityAction).toHaveBeenCalledWith(event);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('preserves caller accessibility actions without duplicating Toggle', async () => {
+    const accessibilityActions = [{ name: 'Toggle', label: 'Change selection' }, { name: 'custom' }];
+    const component = await renderCheckbox({ accessibilityActions });
+
+    expect(getRoot(component).props.accessibilityActions).toBe(accessibilityActions);
+  });
+
+  it('reports accessibility toggles without changing externally driven status', async () => {
+    const onStatusChange = jest.fn();
+    const component = await renderCheckbox({ status: 'indeterminate', onStatusChange });
+
+    await fireEvent(getRoot(component), 'accessibilityAction', { nativeEvent: { actionName: 'Toggle' } });
+
+    expect(onStatusChange).toHaveBeenCalledWith('checked');
+    expect(getRoot(component).props.accessibilityState.checked).toBe('mixed');
+  });
+
+  it('blocks disabled accessibility toggles while forwarding the caller handler', async () => {
+    const onStatusChange = jest.fn();
+    const onAccessibilityAction = jest.fn();
+    const component = await renderCheckbox({ disabled: true, onStatusChange, onAccessibilityAction });
+    const event = { nativeEvent: { actionName: 'Toggle' } };
+
+    getRoot(component).props.onAccessibilityAction(event);
+
+    expect(onStatusChange).not.toHaveBeenCalled();
+    expect(onAccessibilityAction).toHaveBeenCalledWith(event);
+    expect(getRoot(component).props.accessibilityState.checked).toBe(false);
+  });
+
+  it('forwards custom accessibility actions without changing status', async () => {
+    const onStatusChange = jest.fn();
+    const onAccessibilityAction = jest.fn();
+    const component = await renderCheckbox({ accessibilityActions: [{ name: 'custom' }], onStatusChange, onAccessibilityAction });
+    const event = { nativeEvent: { actionName: 'custom' } };
+
+    expect(getRoot(component).props.accessibilityActions).toEqual([{ name: 'Toggle' }, { name: 'custom' }]);
+    await fireEvent(getRoot(component), 'accessibilityAction', event);
+
+    expect(onStatusChange).not.toHaveBeenCalled();
+    expect(onAccessibilityAction).toHaveBeenCalledWith(event);
+  });
+
   it('advances indeterminate status to checked on press', async () => {
     const onStatusChange = jest.fn();
     const component = await renderCheckbox({
diff --git a/packages/agentic/components/src/components/checkbox/checkbox.types.ts b/packages/agentic/components/src/components/checkbox/checkbox.types.ts
index a75420958c..ea5185f05d 100644
--- a/packages/agentic/components/src/components/checkbox/checkbox.types.ts
+++ b/packages/agentic/components/src/components/checkbox/checkbox.types.ts
@@ -1,3 +1,4 @@
+import type { FocusTargetBinding } from '@fluentui-react-native/framework-base';
 import type { ColorValue, Pressable, StyleProp, ViewStyle } from 'react-native';
 import type {
   ComponentProps,
@@ -59,6 +60,7 @@ export type CheckboxRootProps = OwnedRootProps<PropsWithRefOf<typeof Pressable>>
 export type CheckboxProps = CheckboxStateProps & ComponentProps<CheckboxSlots, CheckboxRootProps>;
 
 export type CheckboxState = ComponentState<CheckboxStateSlots & FocusVisualsSlots> &
+  FocusTargetBinding &
   Required<Omit<CheckboxStateProps, CheckboxStatusDriverKeys>> &
   ThemeState &
   PressableState & {
diff --git a/packages/agentic/components/src/components/checkbox/renderCheckbox.tsx b/packages/agentic/components/src/components/checkbox/renderCheckbox.tsx
index b30d7cc415..46bf5639d7 100644
--- a/packages/agentic/components/src/components/checkbox/renderCheckbox.tsx
+++ b/packages/agentic/components/src/components/checkbox/renderCheckbox.tsx
@@ -8,7 +8,7 @@ export function renderCheckbox_unstable(state: CheckboxState) {
   const shouldRenderLabel = Boolean(state.labelText || state.secondaryTextSlot);
 
   return (
-    <state.root>
+    <state.root ref={state.focusTargetRef}>
       {state.FocusRing && <state.FocusRing />}
       <CheckboxIndicator
         iconColor={state.indicatorIconColor}
diff --git a/packages/agentic/components/src/components/checkbox/spec/accessibility.md b/packages/agentic/components/src/components/checkbox/spec/accessibility.md
index b2a6c08e26..83f3ce0ab8 100644
--- a/packages/agentic/components/src/components/checkbox/spec/accessibility.md
+++ b/packages/agentic/components/src/components/checkbox/spec/accessibility.md
@@ -12,6 +12,12 @@ focusable unless disabled.
 accessibility state, such as `busy`, is merged and preserved; the checked and
 disabled entries are owned by the component.
 
+The root declares the native `Toggle` action and preserves caller actions without
+duplicating that declaration. Win32 needs this action to expose its UIA toggle
+pattern; a rendered checkmark alone is not evidence of native checked state.
+Toggle activation respects disabled and controlled status and forwards the caller
+`onAccessibilityAction` without synthesizing a press.
+
 On Windows, UI Automation reports the control as a check box and maps the
 three-valued checked state to its toggle state, so an indeterminate parent
 announces as mixed rather than as a third unnamed value. On macOS, VoiceOver
diff --git a/packages/agentic/components/src/components/checkbox/spec/interaction.md b/packages/agentic/components/src/components/checkbox/spec/interaction.md
index ef44108112..a20d295d0d 100644
--- a/packages/agentic/components/src/components/checkbox/spec/interaction.md
+++ b/packages/agentic/components/src/components/checkbox/spec/interaction.md
@@ -25,6 +25,11 @@ mixed parent moves forward to fully selected rather than cycling back through
 mixed. `onStatusChange` receives the resolved value and any caller `onPress`
 handler runs afterward.
 
+The native accessibility `Toggle` action resolves the same next status without
+calling `onPress`. It preserves the caller's accessibility actions and forwards
+`onAccessibilityAction`. While disabled, the action cannot change status, but
+the caller accessibility handler still receives the event.
+
 Status ownership follows the supplied props. While `status` is supplied the
 control is externally driven: it renders exactly what it is given, reports the
 resolved value, and does not move on its own. Without `status` it starts from
@@ -47,3 +52,11 @@ intercept input; native ring appearance remains renderer-owned.
 
 Checkbox runs no timed animation. Status, hover, press, and focus styling
 change on the next render, so reduced-motion settings need no separate path.
+
+## Focus target lifetime
+
+The state hook uses the shared ref-backed focus foundation. Internal focus-target
+refs compose with caller refs on the actual interactive slot, without redirecting
+structural root refs. Native self-focus is distinct from descendant events, and
+detach/disable invalidates pending focus requests. Focus visuals observe root
+modality only while focused on the custom path; there is no scene-wide rerender.
diff --git a/packages/agentic/components/src/components/checkbox/spec/source.json b/packages/agentic/components/src/components/checkbox/spec/source.json
index 6303d13f6b..d4aa0b6784 100644
--- a/packages/agentic/components/src/components/checkbox/spec/source.json
+++ b/packages/agentic/components/src/components/checkbox/spec/source.json
@@ -3,7 +3,7 @@
   "component": "checkbox",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-12",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
@@ -110,7 +110,7 @@
     },
     {
       "id": "CBX-004",
-      "evidence": ["useCheckbox.ts", "checkbox.test.tsx"]
+      "evidence": ["useCheckbox.ts", "checkbox.test.tsx", "checkbox.stories.tsx"]
     },
     {
       "id": "CBX-005",
diff --git a/packages/agentic/components/src/components/checkbox/useCheckbox.ts b/packages/agentic/components/src/components/checkbox/useCheckbox.ts
index 8295993005..95731cf4b1 100644
--- a/packages/agentic/components/src/components/checkbox/useCheckbox.ts
+++ b/packages/agentic/components/src/components/checkbox/useCheckbox.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Pressable } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-import { useControllableValue, usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
+import { useControllableValue, useFocusablePressable, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
 import { useFocusVisuals } from '../../common/useFocusVisuals';
 
@@ -15,12 +15,14 @@ function getNextStatus(status: CheckboxStatus): CheckboxStatus {
 
 export function useCheckbox_unstable(props: CheckboxProps): CheckboxState {
   const {
+    accessibilityActions,
     accessibilityHint,
     accessibilityLabel,
     accessibilityState,
     defaultStatus = 'unchecked',
     disabled = false,
     label = 'Label',
+    onAccessibilityAction,
     onPress,
     onStatusChange,
     ref: rootRef,
@@ -59,11 +61,29 @@ export function useCheckbox_unstable(props: CheckboxProps): CheckboxState {
     [disabled, onPress, setStatus, status],
   );
 
+  const checkboxActions = React.useMemo(
+    () =>
+      accessibilityActions?.some((action) => action.name === 'Toggle')
+        ? accessibilityActions
+        : [{ name: 'Toggle' }, ...(accessibilityActions ?? [])],
+    [accessibilityActions],
+  );
+  const handleAccessibilityAction = React.useCallback<NonNullable<CheckboxProps['onAccessibilityAction']>>(
+    (event) => {
+      if (event.nativeEvent.actionName === 'Toggle' && !disabled) {
+        setStatus(getNextStatus(status));
+      }
+      onAccessibilityAction?.(event);
+    },
+    [disabled, onAccessibilityAction, setStatus, status],
+  );
+
   const rootAccessibilityLabel = accessibilityLabel ?? label;
   const rootAccessibilityHint = renderSecondaryText ? [accessibilityHint, secondaryText].filter(Boolean).join('. ') : accessibilityHint;
 
   const nativeProps: React.ComponentProps<typeof Pressable> = {
     ...rest,
+    accessibilityActions: checkboxActions,
     accessibilityHint: rootAccessibilityHint,
     accessibilityLabel: rootAccessibilityLabel,
     accessibilityRole: 'checkbox',
@@ -74,10 +94,11 @@ export function useCheckbox_unstable(props: CheckboxProps): CheckboxState {
     },
     accessible: rest.accessible ?? true,
     disabled,
-    focusable: rest.focusable ?? !disabled,
+    focusable: !disabled && (rest.focusable ?? true),
+    onAccessibilityAction: handleAccessibilityAction,
     onPress: handlePress,
   };
-  const [pressableProps, pressableState] = usePressableState(nativeProps);
+  const [pressableProps, pressableState, focusBinding] = useFocusablePressable(nativeProps);
 
   const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled });
 
@@ -94,6 +115,7 @@ export function useCheckbox_unstable(props: CheckboxProps): CheckboxState {
     FocusRing,
     ...themeState,
     ...pressableState,
+    ...focusBinding,
     disabled,
     label,
     labelText,
diff --git a/packages/agentic/components/src/components/input/input.test.tsx b/packages/agentic/components/src/components/input/input.test.tsx
index a69b4834b6..051a7830d5 100644
--- a/packages/agentic/components/src/components/input/input.test.tsx
+++ b/packages/agentic/components/src/components/input/input.test.tsx
@@ -1,13 +1,17 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import type { View, ViewStyle } from 'react-native';
+import type { TextInput, View, ViewStyle } from 'react-native';
 
-import { fireEvent } from '@testing-library/react-native';
+import { act, fireEvent } from '@testing-library/react-native';
 import { render } from '../../common/renderWithTheme';
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
 
 import { Input } from './input';
+import type { InputProps, InputState } from './input.types';
+import { renderInput_unstable } from './renderInput';
+import { useInput_unstable } from './useInput';
+import { useInputStyles_unstable } from './useInputStyles';
 
 function getTextbox(component: Awaited<ReturnType<typeof render>>) {
   return component.getByRole('textbox');
@@ -30,6 +34,56 @@ describe('Input', () => {
     expect(ref.current).not.toBeNull();
   });
 
+  it('composes the focus target with the inner text ref without redirecting the structural ref', async () => {
+    const rootRef = React.createRef<React.ComponentRef<typeof View>>();
+    const textRef = React.createRef<React.ComponentRef<typeof TextInput>>();
+    const observed: { state?: InputState } = {};
+    function Harness() {
+      const state = useInput_unstable({ ref: rootRef, textInput: { ref: textRef } });
+      observed.state = state;
+      useInputStyles_unstable(state);
+      return renderInput_unstable(state);
+    }
+    const component = await render(<Harness />);
+    const target = observed.state?.focusTarget;
+
+    expect(textRef.current).not.toBeNull();
+    expect(rootRef.current).not.toBeNull();
+    expect(target?.current).toBe(textRef.current);
+    expect(target?.current).not.toBe(rootRef.current);
+
+    await component.unmount();
+
+    expect(textRef.current).toBeNull();
+    expect(rootRef.current).toBeNull();
+    expect(target?.current).toBeNull();
+  });
+
+  it.each([
+    { props: {}, expected: true },
+    { props: { focusable: false }, expected: false },
+    { props: { textInput: { focusable: false } }, expected: false },
+    { props: { focusable: false, textInput: { focusable: true } }, expected: true },
+    { props: { disabled: true, textInput: { focusable: true } }, expected: false },
+  ])('matches the focus target to resolved textInput eligibility: $props', async ({ props, expected }) => {
+    const observed: { state?: InputState } = {};
+    function Harness(inputProps: InputProps) {
+      const state = useInput_unstable(inputProps);
+      observed.state = state;
+      useInputStyles_unstable(state);
+      return renderInput_unstable(state);
+    }
+    const component = await render(<Harness {...props} />);
+
+    expect(getTextbox(component).props.focusable).toBe(expected);
+    await act(() => {
+      const request = observed.state?.focusTarget.requestFocus();
+      expect(request?.status).toBe(expected ? 'requested' : 'not-focusable');
+    });
+    await fireEvent(getTextbox(component), 'focus', {});
+    expect(observed.state?.focused).toBe(expected);
+  });
+
   it('renders a textbox with outline styling by default', async () => {
     const component = await render(<Input placeholder="Enter text" />);
     const textbox = getTextbox(component);
diff --git a/packages/agentic/components/src/components/input/input.types.ts b/packages/agentic/components/src/components/input/input.types.ts
index ec3ccade48..e518f51edd 100644
--- a/packages/agentic/components/src/components/input/input.types.ts
+++ b/packages/agentic/components/src/components/input/input.types.ts
@@ -2,6 +2,7 @@ import type { AccessibilityState, ColorValue, StyleProp, TextInput, TextStyle, V
 
 import type { ThemeState } from '@fluentui-react-native/design';
 import type {
+  FocusTargetBinding,
   ComponentProps,
   ComponentState,
   OptionalSlot,
@@ -54,6 +55,7 @@ export type InputExposedRootProps = OwnedRootProps<PropsWithRefOf<typeof View>>;
 export type InputProps = InputStateProps & ComponentProps<InputSlots, InputExposedRootProps>;
 
 export type InputState = ComponentState<InputStateSlots> &
+  FocusTargetBinding &
   Required<Pick<InputStateProps, 'variant' | 'size' | 'disabled' | 'readOnly' | 'error'>> &
   ThemeState & {
     value: string;
diff --git a/packages/agentic/components/src/components/input/spec/interaction.md b/packages/agentic/components/src/components/input/spec/interaction.md
index d4e85a5c6a..d210ea690a 100644
--- a/packages/agentic/components/src/components/input/spec/interaction.md
+++ b/packages/agentic/components/src/components/input/spec/interaction.md
@@ -2,7 +2,8 @@
 
 ## State model
 
-Input tracks focus, hover, and press in local state and reduces them, together
+Input observes native self-focus through `useFocusTarget`, tracks hover and press
+locally, and reduces them, together
 with `disabled`, `error`, and `readOnly`, to exactly one visual state per
 render. The precedence is disabled, error, read only, focused, pressed,
 hovered, rest. Only that one state contributes styling, so an errored field
@@ -65,3 +66,13 @@ needs to be actionable must be a separate control rendered next to the field.
 
 Input runs no animation and holds no timers, so state changes are immediate and
 reduced-motion settings need no separate path.
+
+## Focus target lifetime
+
+The state hook uses the shared ref-backed focus foundation. Its internal ref
+composes with the caller's `textInput.ref`; the public root ref remains on the
+structural View. Native self-focus is distinct from descendant events, and
+detach/disable invalidates pending focus requests. The target and native slot
+share the resolved `focusable` value: direct textInput props override the root
+setting, but disabled always wins. Input retains its border-only focus styling;
+it does not subscribe to root modality or mount a custom focus ring.
diff --git a/packages/agentic/components/src/components/input/spec/source.json b/packages/agentic/components/src/components/input/spec/source.json
index 12c36eb4fe..3e2ee53aa2 100644
--- a/packages/agentic/components/src/components/input/spec/source.json
+++ b/packages/agentic/components/src/components/input/spec/source.json
@@ -3,7 +3,7 @@
   "component": "input",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-28",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/input/useInput.ts b/packages/agentic/components/src/components/input/useInput.ts
index 4bf3b5345c..da8b1fdb9f 100644
--- a/packages/agentic/components/src/components/input/useInput.ts
+++ b/packages/agentic/components/src/components/input/useInput.ts
@@ -3,7 +3,7 @@ import { TextInput, View } from 'react-native';
 import type { TextInputProps } from 'react-native';
 
 import { useThemeState } from '@fluentui-react-native/design';
-import { useControllableValue, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
+import { useControllableValue, useFocusTarget, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
 
 import { Icon } from '../../primitives/icon/icon';
 
@@ -81,13 +81,17 @@ export function useInput_unstable(props: InputProps): InputState {
   } = props;
   const themeState = useThemeState();
   const [currentValue = '', setCurrentValue] = useControllableValue(controlledValue, defaultValue ?? '');
-  const [focused, setFocused] = React.useState(false);
+  const slotFocusable =
+    textInputProp !== null && typeof textInputProp === 'object' && 'focusable' in textInputProp ? textInputProp.focusable : undefined;
+  const resolvedFocusable = !disabled && (slotFocusable ?? focusable ?? true);
+  const focus = useFocusTarget(resolvedFocusable);
+  const { focused } = focus;
+  const blurFocusTarget = focus.onBlur;
   const [hovered, setHovered] = React.useState(false);
   const [pressed, setPressed] = React.useState(false);
 
   React.useEffect(() => {
     if (disabled) {
-      setFocused(false);
       setHovered(false);
       setPressed(false);
     }
@@ -112,15 +116,13 @@ export function useInput_unstable(props: InputProps): InputState {
     [disabled, readOnly, setCurrentValue],
   );
 
-  const handleFocus = React.useCallback(() => {
-    if (!disabled) {
-      setFocused(true);
-    }
-  }, [disabled]);
-  const handleBlur = React.useCallback(() => {
-    setFocused(false);
-    setPressed(false);
-  }, []);
+  const handleBlur = React.useCallback(
+    (event: Parameters<typeof focus.onBlur>[0]) => {
+      blurFocusTarget(event);
+      setPressed(false);
+    },
+    [blurFocusTarget],
+  );
   const handleHoverIn = React.useCallback(() => {
     if (!disabled) {
       setHovered(true);
@@ -161,10 +163,11 @@ export function useInput_unstable(props: InputProps): InputState {
       } as InputAccessibilityState,
       accessible: slotProps.accessible ?? accessible ?? true,
       editable: disabled || readOnly ? false : (slotProps.editable ?? true),
-      focusable: slotProps.focusable ?? focusable ?? !disabled,
+      focusable: resolvedFocusable,
+      ref: focus.focusTargetRef,
       onBlur: mergeHandlers(slotProps.onBlur, onBlur, handleBlur),
       onChangeText: mergeHandlers(slotProps.onChangeText, onChangeText, handleChangeText),
-      onFocus: mergeHandlers(slotProps.onFocus, onFocus, handleFocus),
+      onFocus: mergeHandlers(slotProps.onFocus, onFocus, focus.onFocus),
       onHoverIn: mergeHandlers(slotProps.onHoverIn, onHoverIn, handleHoverIn),
       onHoverOut: mergeHandlers(slotProps.onHoverOut, onHoverOut, handleHoverOut),
       onPressIn: mergeHandlers(slotProps.onPressIn, onPressIn, handlePressIn),
@@ -179,6 +182,8 @@ export function useInput_unstable(props: InputProps): InputState {
 
   return {
     ...themeState,
+    focusTarget: focus.focusTarget,
+    focusTargetRef: focus.focusTargetRef,
     contents,
     contentsStyle: resolvedStyles.contents,
     disabled,
diff --git a/packages/agentic/components/src/components/list-item/list-item.types.ts b/packages/agentic/components/src/components/list-item/list-item.types.ts
index e97576eb0f..d4a6bede53 100644
--- a/packages/agentic/components/src/components/list-item/list-item.types.ts
+++ b/packages/agentic/components/src/components/list-item/list-item.types.ts
@@ -1,3 +1,4 @@
+import type { FocusTargetBinding } from '@fluentui-react-native/framework-base';
 import type { Pressable, StyleProp, Text as NativeText, View, ViewStyle } from 'react-native';
 
 import type { ThemeState } from '@fluentui-react-native/design';
@@ -65,6 +66,7 @@ export type ListItemMetrics = {
 };
 
 export type ListItemState = ComponentState<ListItemStateSlots & FocusVisualsSlots> &
+  FocusTargetBinding &
   Required<ListItemStateProps> &
   ThemeState &
   PressableState & {
diff --git a/packages/agentic/components/src/components/list-item/renderListItem.tsx b/packages/agentic/components/src/components/list-item/renderListItem.tsx
index 7024bc2589..15408c5de5 100644
--- a/packages/agentic/components/src/components/list-item/renderListItem.tsx
+++ b/packages/agentic/components/src/components/list-item/renderListItem.tsx
@@ -19,7 +19,7 @@ export function renderListItem_unstable(state: ListItemState) {
   ];
 
   return (
-    <state.root>
+    <state.root ref={state.focusTargetRef}>
       {state.FocusRing && <state.FocusRing />}
       {state.selectionIndicator && <state.selectionIndicator />}
       <CompoundItemLayout
diff --git a/packages/agentic/components/src/components/list-item/spec/interaction.md b/packages/agentic/components/src/components/list-item/spec/interaction.md
index 3d1a4ce6df..807e583a76 100644
--- a/packages/agentic/components/src/components/list-item/spec/interaction.md
+++ b/packages/agentic/components/src/components/list-item/spec/interaction.md
@@ -23,3 +23,11 @@ focus stays hidden unless the composition hook uses `alwaysVisible`. That
 override selects the custom path and still requires focus. Disabled or
 noninteractive targets show no custom ring. The visual is decorative and cannot
 intercept input; native ring appearance remains renderer-owned.
+
+## Focus target lifetime
+
+The state hook uses the shared ref-backed focus foundation. Internal focus-target
+refs compose with caller refs on the actual interactive slot, without redirecting
+structural root refs. Native self-focus is distinct from descendant events, and
+detach/disable invalidates pending focus requests. Focus visuals observe root
+modality only while focused on the custom path; there is no scene-wide rerender.
diff --git a/packages/agentic/components/src/components/list-item/spec/source.json b/packages/agentic/components/src/components/list-item/spec/source.json
index e1ac2f6174..571e41870b 100644
--- a/packages/agentic/components/src/components/list-item/spec/source.json
+++ b/packages/agentic/components/src/components/list-item/spec/source.json
@@ -3,7 +3,7 @@
   "component": "list-item",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-12",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/list-item/useListItem.ts b/packages/agentic/components/src/components/list-item/useListItem.ts
index 43471e790e..d5f496487f 100644
--- a/packages/agentic/components/src/components/list-item/useListItem.ts
+++ b/packages/agentic/components/src/components/list-item/useListItem.ts
@@ -1,7 +1,7 @@
 import { Pressable, Text as NativeText, View } from 'react-native';
 
 import { useThemeState } from '@fluentui-react-native/design';
-import { useOptionalSlot, usePressableState, useSlot } from '@fluentui-react-native/framework-base';
+import { useOptionalSlot, useFocusablePressable, useSlot } from '@fluentui-react-native/framework-base';
 
 import { Icon } from '../../primitives/icon/icon';
 import { hideSlotProps } from '../../common/accessibility';
@@ -84,7 +84,7 @@ export function useListItem_unstable(props: ListItemProps): ListItemState {
   const selectedFill = selected && selectionMode !== 'multiple' && !disabled;
   const selectionGlyph = selectionMode === 'none' ? undefined : getListItemSelectionIndicatorGlyph(selected, selectionMode);
 
-  const [pressableProps, pressableState] = usePressableState({
+  const [pressableProps, pressableState, focusBinding] = useFocusablePressable({
     ...rest,
     accessibilityRole: rest.accessibilityRole ?? 'button',
     accessibilityState: {
@@ -94,7 +94,7 @@ export function useListItem_unstable(props: ListItemProps): ListItemState {
     },
     accessible: rest.accessible ?? true,
     disabled,
-    focusable: rest.focusable ?? !disabled,
+    focusable: !disabled && (rest.focusable ?? true),
   });
 
   const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled });
@@ -131,5 +131,6 @@ export function useListItem_unstable(props: ListItemProps): ListItemState {
     userStyle,
     ...themeState,
     ...pressableState,
+    ...focusBinding,
   };
 }
diff --git a/packages/agentic/components/src/components/listbox-item/listbox-item.types.ts b/packages/agentic/components/src/components/listbox-item/listbox-item.types.ts
index 0838034c99..82441f83da 100644
--- a/packages/agentic/components/src/components/listbox-item/listbox-item.types.ts
+++ b/packages/agentic/components/src/components/listbox-item/listbox-item.types.ts
@@ -1,3 +1,4 @@
+import type { FocusTargetBinding } from '@fluentui-react-native/framework-base';
 import type { Pressable, Text as NativeText, View, ViewStyle } from 'react-native';
 import type { StyleProp } from 'react-native';
 
@@ -58,6 +59,7 @@ export type ListboxItemRootProps = OwnedRootProps<PropsWithRefOf<typeof Pressabl
 export type ListboxItemProps = ListboxItemStateProps & ComponentProps<ListboxItemSlots, ListboxItemRootProps>;
 
 export type ListboxItemState = ComponentState<ListboxItemStateSlots & FocusVisualsSlots> &
+  FocusTargetBinding &
   Required<ListboxItemStateProps> &
   ThemeState &
   PressableState & {
diff --git a/packages/agentic/components/src/components/listbox-item/renderListboxItem.tsx b/packages/agentic/components/src/components/listbox-item/renderListboxItem.tsx
index 1ea68f3cd7..3b2237103b 100644
--- a/packages/agentic/components/src/components/listbox-item/renderListboxItem.tsx
+++ b/packages/agentic/components/src/components/listbox-item/renderListboxItem.tsx
@@ -47,7 +47,7 @@ export function renderListboxItem_unstable(state: ListboxItemState) {
   const ActiveIcon = state.selected ? (state.selectedIcon ?? state.icon) : state.icon;
 
   return (
-    <state.root>
+    <state.root ref={state.focusTargetRef}>
       {state.FocusRing && <state.FocusRing />}
       <CompoundItemLayout
         contentStyle={state.secondaryContentPosition === 'under' ? listboxItemStyles.contentColumn : listboxItemStyles.contentRow}
diff --git a/packages/agentic/components/src/components/listbox-item/spec/interaction.md b/packages/agentic/components/src/components/listbox-item/spec/interaction.md
index 116360f596..32e917252c 100644
--- a/packages/agentic/components/src/components/listbox-item/spec/interaction.md
+++ b/packages/agentic/components/src/components/listbox-item/spec/interaction.md
@@ -24,3 +24,11 @@ intercept input; native ring appearance remains renderer-owned.
 Windows and macOS provide platform keyboard activation for the focusable
 Pressable. Arrow navigation, Home/End, type-ahead, submenu control, dismissal,
 and focus return are outside this component. No timed animation is implemented.
+
+## Focus target lifetime
+
+The state hook uses the shared ref-backed focus foundation. Internal focus-target
+refs compose with caller refs on the actual interactive slot, without redirecting
+structural root refs. Native self-focus is distinct from descendant events, and
+detach/disable invalidates pending focus requests. Focus visuals observe root
+modality only while focused on the custom path; there is no scene-wide rerender.
diff --git a/packages/agentic/components/src/components/listbox-item/spec/source.json b/packages/agentic/components/src/components/listbox-item/spec/source.json
index 253561eed6..a168728c78 100644
--- a/packages/agentic/components/src/components/listbox-item/spec/source.json
+++ b/packages/agentic/components/src/components/listbox-item/spec/source.json
@@ -3,7 +3,7 @@
   "component": "listbox-item",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-12",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/listbox-item/useListboxItem.ts b/packages/agentic/components/src/components/listbox-item/useListboxItem.ts
index 9c60cd9ffa..a0099dce6e 100644
--- a/packages/agentic/components/src/components/listbox-item/useListboxItem.ts
+++ b/packages/agentic/components/src/components/listbox-item/useListboxItem.ts
@@ -1,7 +1,7 @@
 import { Pressable, Text as NativeText, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 
-import { usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
+import { useFocusablePressable, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
 
 import { semanticIconSources } from '../../common/iconSources';
@@ -62,13 +62,13 @@ export function useListboxItem_unstable(props: ListboxItemProps): ListboxItemSta
       }
     : accessibilityState;
 
-  const [rootProps, pressableState] = usePressableState({
+  const [rootProps, pressableState, focusBinding] = useFocusablePressable({
     ...rest,
     accessibilityRole: isListItem ? 'button' : 'header',
     accessibilityState: rootAccessibilityState,
     accessible: rest.accessible ?? true,
     disabled: isListItem ? disabled : false,
-    focusable: rest.focusable ?? (isListItem && !disabled),
+    focusable: isListItem && !disabled && (rest.focusable ?? true),
   });
 
   const { onBlur, onFocus, onHoverIn, onHoverOut, onLongPress, onPress, onPressIn, onPressOut, ...headerRest } = rootProps;
@@ -85,6 +85,7 @@ export function useListboxItem_unstable(props: ListboxItemProps): ListboxItemSta
     FocusRing: isListItem ? FocusRing : undefined,
     ...themeState,
     ...pressableState,
+    ...focusBinding,
     avatar,
     checkboxIndicator,
     checkmark,
diff --git a/packages/agentic/components/src/components/menu-item/menu-item.types.ts b/packages/agentic/components/src/components/menu-item/menu-item.types.ts
index e160d9224a..6301730b2c 100644
--- a/packages/agentic/components/src/components/menu-item/menu-item.types.ts
+++ b/packages/agentic/components/src/components/menu-item/menu-item.types.ts
@@ -1,3 +1,4 @@
+import type { FocusTargetBinding } from '@fluentui-react-native/framework-base';
 import type { Pressable, StyleProp, TextStyle, View, ViewStyle } from 'react-native';
 import type {
   ComponentProps,
@@ -50,6 +51,7 @@ export type MenuItemProps = MenuItemStateProps & {
 } & ComponentProps<MenuItemSlots, MenuItemExposedPressableProps>;
 
 export type MenuItemState = ComponentState<MenuItemSlots & FocusVisualsSlots> &
+  FocusTargetBinding &
   Required<MenuItemStateProps> &
   ThemeState & {
     contentText: string;
diff --git a/packages/agentic/components/src/components/menu-item/renderMenuItem.tsx b/packages/agentic/components/src/components/menu-item/renderMenuItem.tsx
index e77e7f7df3..c764cb9846 100644
--- a/packages/agentic/components/src/components/menu-item/renderMenuItem.tsx
+++ b/packages/agentic/components/src/components/menu-item/renderMenuItem.tsx
@@ -33,7 +33,7 @@ export function renderMenuItem_unstable(state: MenuItemState) {
   ) : undefined;
 
   return (
-    <state.root>
+    <state.root ref={state.focusTargetRef}>
       {state.FocusRing && <state.FocusRing />}
       {state.loading ? (
         <CompoundItemLayout
diff --git a/packages/agentic/components/src/components/menu-item/spec/interaction.md b/packages/agentic/components/src/components/menu-item/spec/interaction.md
index 1f280c0b54..69873e10c9 100644
--- a/packages/agentic/components/src/components/menu-item/spec/interaction.md
+++ b/packages/agentic/components/src/components/menu-item/spec/interaction.md
@@ -23,3 +23,11 @@ intercept input; native ring appearance remains renderer-owned.
 This component does not implement arrow navigation, Home/End, type-ahead,
 submenu opening, focus restoration, dismissal, or timed motion. Those are
 menu-container responsibilities on Windows and macOS.
+
+## Focus target lifetime
+
+The state hook uses the shared ref-backed focus foundation. Internal focus-target
+refs compose with caller refs on the actual interactive slot, without redirecting
+structural root refs. Native self-focus is distinct from descendant events, and
+detach/disable invalidates pending focus requests. Focus visuals observe root
+modality only while focused on the custom path; there is no scene-wide rerender.
diff --git a/packages/agentic/components/src/components/menu-item/spec/source.json b/packages/agentic/components/src/components/menu-item/spec/source.json
index d733b4e2b4..766e31a7cb 100644
--- a/packages/agentic/components/src/components/menu-item/spec/source.json
+++ b/packages/agentic/components/src/components/menu-item/spec/source.json
@@ -3,7 +3,7 @@
   "component": "menu-item",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-12",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/menu-item/useMenuItem.ts b/packages/agentic/components/src/components/menu-item/useMenuItem.ts
index d10efcb15a..187f8e3b86 100644
--- a/packages/agentic/components/src/components/menu-item/useMenuItem.ts
+++ b/packages/agentic/components/src/components/menu-item/useMenuItem.ts
@@ -1,6 +1,6 @@
 import { Pressable, View } from 'react-native';
 
-import { usePressableState, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
+import { useFocusablePressable, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
 
 import { semanticIconSources } from '../../common/iconSources';
@@ -54,7 +54,7 @@ export function useMenuItem_unstable(props: MenuItemProps): MenuItemState {
     console.warn('MenuItem: checkmark and multiselect are mutually exclusive.');
   }
 
-  const [pressableProps, pressableState] = usePressableState({
+  const [pressableProps, pressableState, focusBinding] = useFocusablePressable({
     ...rest,
     accessible: rest.accessible ?? true,
     accessibilityHint: accessibilityHint ?? (hasChevron ? 'Has submenu' : undefined),
@@ -87,6 +87,7 @@ export function useMenuItem_unstable(props: MenuItemProps): MenuItemState {
     FocusRing: isInteractive ? FocusRing : undefined,
     ...themeState,
     ...pressableState,
+    ...focusBinding,
     contentText,
     disabled,
     hasCheckmark,
diff --git a/packages/agentic/components/src/components/radio/radio.types.ts b/packages/agentic/components/src/components/radio/radio.types.ts
index cbe97024c3..0bd517d485 100644
--- a/packages/agentic/components/src/components/radio/radio.types.ts
+++ b/packages/agentic/components/src/components/radio/radio.types.ts
@@ -1,3 +1,4 @@
+import type { FocusTargetBinding } from '@fluentui-react-native/framework-base';
 import type { Pressable, StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import type { ThemeState } from '@fluentui-react-native/design';
@@ -49,6 +50,7 @@ export type RadioExposedPressableProps = OwnedRootProps<PropsWithRefOf<typeof Pr
 export type RadioProps = RadioStateProps & ComponentProps<RadioSlots, RadioExposedPressableProps>;
 
 export type RadioState = ComponentState<RadioSlots & FocusVisualsSlots> &
+  FocusTargetBinding &
   Required<RadioStateProps> &
   ThemeState &
   PressableState & {
diff --git a/packages/agentic/components/src/components/radio/renderRadio.tsx b/packages/agentic/components/src/components/radio/renderRadio.tsx
index 705210bf10..2d1fd1ba7c 100644
--- a/packages/agentic/components/src/components/radio/renderRadio.tsx
+++ b/packages/agentic/components/src/components/radio/renderRadio.tsx
@@ -10,7 +10,7 @@ import type { RadioState } from './radio.types';
  */
 export function renderRadio_unstable(state: RadioState) {
   return (
-    <state.root>
+    <state.root ref={state.focusTargetRef}>
       {state.FocusRing && <state.FocusRing />}
       <View {...hiddenFromAccessibilityProps} testID="radio-indicator" style={state.indicatorStyle}>
         <View testID="radio-dot" style={state.indicatorDotStyle} />
diff --git a/packages/agentic/components/src/components/radio/spec/interaction.md b/packages/agentic/components/src/components/radio/spec/interaction.md
index da47e4634e..2c419dcb00 100644
--- a/packages/agentic/components/src/components/radio/spec/interaction.md
+++ b/packages/agentic/components/src/components/radio/spec/interaction.md
@@ -25,3 +25,11 @@ intercept input; native ring appearance remains renderer-owned.
 An owning group must move focus with directional keys, establish the group
 entry point, update selected peers, and return focus when its surrounding
 surface closes.
+
+## Focus target lifetime
+
+The state hook uses the shared ref-backed focus foundation. Internal focus-target
+refs compose with caller refs on the actual interactive slot, without redirecting
+structural root refs. Native self-focus is distinct from descendant events, and
+detach/disable invalidates pending focus requests. Focus visuals observe root
+modality only while focused on the custom path; there is no scene-wide rerender.
diff --git a/packages/agentic/components/src/components/radio/spec/source.json b/packages/agentic/components/src/components/radio/spec/source.json
index 401ff9e181..70ee7c04a2 100644
--- a/packages/agentic/components/src/components/radio/spec/source.json
+++ b/packages/agentic/components/src/components/radio/spec/source.json
@@ -3,7 +3,7 @@
   "component": "radio",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-12",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/radio/useRadio.ts b/packages/agentic/components/src/components/radio/useRadio.ts
index 5233b2be36..e1ded38796 100644
--- a/packages/agentic/components/src/components/radio/useRadio.ts
+++ b/packages/agentic/components/src/components/radio/useRadio.ts
@@ -1,6 +1,6 @@
 import { Pressable } from 'react-native';
 
-import { usePressableState, useSlot } from '@fluentui-react-native/framework-base';
+import { useFocusablePressable, useSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
 import { useFocusVisuals } from '../../common/useFocusVisuals';
 
@@ -25,7 +25,7 @@ export function useRadio_unstable(props: RadioProps): RadioState {
   } = props;
 
   const themeState = useThemeState();
-  const [pressableProps, pressableState] = usePressableState({
+  const [pressableProps, pressableState, focusBinding] = useFocusablePressable({
     ...rest,
     accessibilityLabel: accessibilityLabel ?? label,
     accessibilityHint: accessibilityHint ?? (showSecondaryText ? secondaryText : undefined),
@@ -37,7 +37,7 @@ export function useRadio_unstable(props: RadioProps): RadioState {
     },
     accessible: rest.accessible ?? true,
     disabled,
-    focusable: rest.focusable ?? !disabled,
+    focusable: !disabled && (rest.focusable ?? true),
   });
   const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled });
 
@@ -60,5 +60,6 @@ export function useRadio_unstable(props: RadioProps): RadioState {
     userStyle,
     ...themeState,
     ...pressableState,
+    ...focusBinding,
   };
 }
diff --git a/packages/agentic/components/src/components/switch/SPEC.md b/packages/agentic/components/src/components/switch/SPEC.md
index df8e6c35f1..7ae04ec36c 100644
--- a/packages/agentic/components/src/components/switch/SPEC.md
+++ b/packages/agentic/components/src/components/switch/SPEC.md
@@ -126,11 +126,9 @@ These hook options do not add new component props. Scenes require `ThemedRoot`.
 ## Platform behavior
 
 The root is focusable while enabled and drops out of the tab order when
-disabled. It has both a normal `Pressable` action handler and an explicit
-key-up handler for Enter, Space, and platform spellings of the space key. The
-caller key handler runs first. Whether a platform also synthesizes the normal
-press for one of those keys requires native verification because both paths
-currently request a toggle.
+disabled. Shared `useFocusablePressable` owns keyboard/press coordination.
+Switch does not add a second key-up toggle, and declares the native `Toggle`
+accessibility action while preserving caller actions and handlers.
 
 On Windows the root maps to a UI Automation toggle element and the on and off
 state is exposed both through the native accessibility state and through the
@@ -147,12 +145,12 @@ interpolates colors, which the native driver cannot animate.
 
 `native-system-focus-visuals` is an **accepted** [shared native adaptation](../AGENTS.md#focus-visual-policy).
 
-| ID                                | Disposition | React Native contract                                                                                                                                                                 | Follow-up                                                                                                    |
-| --------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `switch-label-association-ids`    | Resolved    | When the caller supplies no name, the component copies visible label text to the root as the single accessible-name mechanism and emits no unresolved labelled-by references.         | Implemented in `useSwitch.ts` and covered by naming tests.                                                   |
-| `switch-label-spacing`            | Accepted    | One container gap separates the control from whichever labels render. Flex distinguishes inner and outer label spacing per side.                                                      | None. A single gap is the natural React Native flex-container expression and matches the inner spacing step. |
-| `switch-focus-modality`           | Accepted    | Custom visibility follows keyboard modality from the scene root rather than a component-local pointer tracker. Native appearance remains renderer-owned.                              | Preserve the shared hook and component modality matrix.                                                      |
-| `switch-keyboard-activation-path` | Deferred    | FURN registers both `onPress` and a recognized-key `onKeyUp` toggle. If Windows or macOS `Pressable` also synthesizes `onPress` for that key, one activation can request two toggles. | Verify the native event sequence, then remove the redundant path or document the platform-specific handler.  |
+| ID                                | Disposition | React Native contract                                                                                                                                                         | Follow-up                                                                                                    |
+| --------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `switch-label-association-ids`    | Resolved    | When the caller supplies no name, the component copies visible label text to the root as the single accessible-name mechanism and emits no unresolved labelled-by references. | Implemented in `useSwitch.ts` and covered by naming tests.                                                   |
+| `switch-label-spacing`            | Accepted    | One container gap separates the control from whichever labels render. Flex distinguishes inner and outer label spacing per side.                                              | None. A single gap is the natural React Native flex-container expression and matches the inner spacing step. |
+| `switch-focus-modality`           | Accepted    | Custom visibility follows keyboard modality from the scene root rather than a component-local pointer tracker. Native appearance remains renderer-owned.                      | Preserve the shared hook and component modality matrix.                                                      |
+| `switch-keyboard-activation-path` | Resolved    | One shared activation path owns each key gesture; the component no longer toggles separately on key-up.                                                                       | Retain exact-count native keyboard and accessibility-action coverage.                                        |
 
 ## Conformance
 
diff --git a/packages/agentic/components/src/components/switch/renderSwitch.tsx b/packages/agentic/components/src/components/switch/renderSwitch.tsx
index 58404c2f54..1218eab26a 100644
--- a/packages/agentic/components/src/components/switch/renderSwitch.tsx
+++ b/packages/agentic/components/src/components/switch/renderSwitch.tsx
@@ -6,7 +6,7 @@ import type { SwitchState } from './switch.types';
  */
 export function renderSwitch_unstable(state: SwitchState) {
   const root = (
-    <state.root>
+    <state.root ref={state.focusTargetRef}>
       {state.FocusRing && <state.FocusRing />}
       <state.track>
         <state.thumb />
diff --git a/packages/agentic/components/src/components/switch/spec/interaction.md b/packages/agentic/components/src/components/switch/spec/interaction.md
index 8989c61e0f..3c805b6033 100644
--- a/packages/agentic/components/src/components/switch/spec/interaction.md
+++ b/packages/agentic/components/src/components/switch/spec/interaction.md
@@ -18,15 +18,14 @@ track, the thumb, and any rendered label.
 
 ## Keyboard
 
-Tab moves focus to the hit area while it is enabled. The component recognizes
-Enter, Space, and the platform spellings of the space key on key up. It also
-registers the normal `Pressable` action handler. If a native platform
-synthesizes that action for the same key, both paths request a toggle; this
-event sequence remains a documented verification gap.
+Tab moves focus to the hit area while enabled. Switch changes value only through
+its press action or the native `Toggle` accessibility action. It does not add a
+second key-up toggle. The shared focusable-pressable helper preserves native
+activation and adds a paired Win32 fallback only for otherwise-unrecognized
+native key codes. Caller key/accessibility handlers remain forwarded.
 
-The caller's key handler runs before the explicit key-up toggle, so a caller can
-observe the key first. Nothing else is bound; the switch does not respond to
-arrow keys, and moving through a group of switches is plain tab order.
+Enter/Space activate on the renderer's phase: key-up on Windows/Win32 and
+key-down on macOS. The switch does not claim arrow navigation.
 
 ## Focus visual
 
@@ -66,3 +65,11 @@ When the caller supplies `checked`, the interaction still reports through
 passes a new `checked`. A caller that ignores `onChange` therefore gets a switch
 that visibly refuses to change, which is a bug in the caller rather than in the
 component. Only omit `checked` when the switch is free to own its own value.
+
+## Focus target lifetime
+
+The state hook uses the shared ref-backed focus foundation. Internal focus-target
+refs compose with caller refs on the actual interactive slot, without redirecting
+structural root refs. Native self-focus is distinct from descendant events, and
+detach/disable invalidates pending focus requests. Focus visuals observe root
+modality only while focused on the custom path; there is no scene-wide rerender.
diff --git a/packages/agentic/components/src/components/switch/spec/source.json b/packages/agentic/components/src/components/switch/spec/source.json
index 00f53bc72c..49f4277114 100644
--- a/packages/agentic/components/src/components/switch/spec/source.json
+++ b/packages/agentic/components/src/components/switch/spec/source.json
@@ -3,7 +3,7 @@
   "component": "switch",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-12",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
@@ -88,7 +88,7 @@
     },
     {
       "id": "switch-keyboard-activation-path",
-      "status": "deferred"
+      "status": "resolved"
     }
   ],
   "requirements": [
diff --git a/packages/agentic/components/src/components/switch/switch.stories.tsx b/packages/agentic/components/src/components/switch/switch.stories.tsx
index 7cb1ead12c..f198187d37 100644
--- a/packages/agentic/components/src/components/switch/switch.stories.tsx
+++ b/packages/agentic/components/src/components/switch/switch.stories.tsx
@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import type { Meta, StoryObj } from '@storybook/react-native';
+import type { DesktopStoryTests } from '@fluentui-react-native/desktop-driver/authoring';
 
 import { Switch } from './switch';
 import type { SwitchLayout } from './switch.types';
@@ -72,6 +73,50 @@ type Story = StoryObj<typeof Switch>;
 
 export const Default: Story = {};
 
+function FocusManagementScene() {
+  const [changes, setChanges] = useState(0);
+  return (
+    <View>
+      <Switch
+        layout="switch"
+        accessibilityLabel="Activation probe"
+        testID="focus-switch"
+        onChange={() => setChanges((count) => count + 1)}
+      />
+      <Text testID="focus-switch-count">{String(changes)}</Text>
+    </View>
+  );
+}
+
+export const FocusManagement: Story = {
+  render: () => <FocusManagementScene />,
+  tags: ['desktop-focus'],
+  parameters: {
+    desktopDriver: {
+      version: 1,
+      tests: [
+        {
+          id: 'single-toggle-per-key',
+          platforms: ['windows', 'win32'],
+          requires: ['physical-click', 'keyboard', 'focus'],
+          steps: [
+            { action: 'wait', target: { testId: 'focus-switch' } },
+            { action: 'click', target: { testId: 'focus-switch' } },
+            { expect: { state: 'focused', target: { testId: 'focus-switch' }, value: true } },
+            { action: 'wait', until: { state: 'text', target: { testId: 'focus-switch-count' }, value: '1' } },
+            { action: 'keys', value: ['\uE007'] },
+            { action: 'wait', until: { state: 'text', target: { testId: 'focus-switch-count' }, value: '2' } },
+            { expect: { state: 'checked', target: { testId: 'focus-switch' }, value: false } },
+            { action: 'keys', value: ['\uE00D'] },
+            { action: 'wait', until: { state: 'text', target: { testId: 'focus-switch-count' }, value: '3' } },
+            { expect: { state: 'checked', target: { testId: 'focus-switch' }, value: true } },
+          ],
+        },
+      ],
+    } satisfies DesktopStoryTests,
+  },
+};
+
 export const Overview: Story = {
   render: () => (
     <View style={styles.story}>
diff --git a/packages/agentic/components/src/components/switch/switch.test.tsx b/packages/agentic/components/src/components/switch/switch.test.tsx
index 4c5d72d303..2375520db7 100644
--- a/packages/agentic/components/src/components/switch/switch.test.tsx
+++ b/packages/agentic/components/src/components/switch/switch.test.tsx
@@ -81,15 +81,36 @@ describe('Switch', () => {
     const component = await renderSwitch({ accessibilityLabel: 'Wi-Fi', layout: 'switch', onChange });
     const root = component.getByRole('switch', { name: 'Wi-Fi' });
 
-    await fireEvent(root, 'keyUp', { nativeEvent: { key: 'Enter' } });
+    await fireEvent(root, 'keyDown', { nativeEvent: { key: 'Enter', code: 'Enter' } });
+    await fireEvent(root, 'keyUp', { nativeEvent: { key: 'Enter', code: 'Enter' } });
     await flushAnimationFrame();
-    await fireEvent(root, 'keyUp', { nativeEvent: { key: ' ' } });
+    await fireEvent(root, 'keyDown', { nativeEvent: { key: ' ', code: 'Space' } });
+    await fireEvent(root, 'keyUp', { nativeEvent: { key: ' ', code: 'Space' } });
     await flushAnimationFrame();
 
     expect(onChange).toHaveBeenNthCalledWith(1, true);
     expect(onChange).toHaveBeenNthCalledWith(2, false);
   });
 
+  it('supports the native Toggle accessibility action without duplicating caller actions', async () => {
+    const onChange = jest.fn();
+    const onAccessibilityAction = jest.fn();
+    const component = await renderSwitch({
+      accessibilityLabel: 'Toggle probe',
+      layout: 'switch',
+      accessibilityActions: [{ name: 'Toggle' }],
+      onChange,
+      onAccessibilityAction,
+    });
+    const root = component.getByRole('switch');
+    expect(root.props.accessibilityActions).toEqual([{ name: 'Toggle' }]);
+    await fireEvent(root, 'accessibilityAction', { nativeEvent: { actionName: 'Toggle' } });
+    await flushAnimationFrame();
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(true);
+    expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+  });
+
   it('forwards hover and press handlers while preserving consumer accessibility state', async () => {
     const onHoverIn = jest.fn();
     const onPressIn = jest.fn();
diff --git a/packages/agentic/components/src/components/switch/switch.types.ts b/packages/agentic/components/src/components/switch/switch.types.ts
index 872d53c83f..ad186057a5 100644
--- a/packages/agentic/components/src/components/switch/switch.types.ts
+++ b/packages/agentic/components/src/components/switch/switch.types.ts
@@ -1,3 +1,4 @@
+import type { FocusTargetBinding } from '@fluentui-react-native/framework-base';
 import type { Pressable, StyleProp, View, ViewStyle } from 'react-native';
 
 import type {
@@ -46,6 +47,7 @@ export type SwitchExposedPressableProps = OwnedRootProps<PropsWithRefOf<typeof P
 export type SwitchProps = SwitchStateProps & ComponentProps<SwitchSlots, SwitchExposedPressableProps>;
 
 export type SwitchState = ComponentState<SwitchStateSlots & FocusVisualsSlots> &
+  FocusTargetBinding &
   Required<Pick<SwitchStateProps, 'disabled' | 'label' | 'labelAfter' | 'labelBefore' | 'layout'>> &
   ThemeState &
   PressableState & {
diff --git a/packages/agentic/components/src/components/switch/useSwitch.ts b/packages/agentic/components/src/components/switch/useSwitch.ts
index e302e3da17..98b9ccebde 100644
--- a/packages/agentic/components/src/components/switch/useSwitch.ts
+++ b/packages/agentic/components/src/components/switch/useSwitch.ts
@@ -3,7 +3,7 @@ import { Animated, Easing, Pressable, View } from 'react-native';
 
 import {
   useAccessibilityLabelWarning,
-  usePressableState,
+  useFocusablePressable,
   useOptionalSlot,
   useReducedMotion,
   useSlot,
@@ -15,18 +15,13 @@ import { useFocusVisuals } from '../../common/useFocusVisuals';
 import { Text } from '../text/text';
 import type { SwitchProps, SwitchState } from './switch.types';
 
-const TOGGLE_KEYS = new Set(['Enter', ' ', 'Spacebar', 'Space']);
-
-function isToggleKey(key: string | undefined): boolean {
-  return key !== undefined && TOGGLE_KEYS.has(key);
-}
-
 /**
  * Resolve the Switch component state, slots, accessibility, and interactive behavior.
  */
 export function useSwitch_unstable(props: SwitchProps): SwitchState {
   const {
     aboveLabel: aboveLabelProp,
+    accessibilityActions,
     accessibilityLabel,
     accessibilityLabelledBy,
     afterLabel: afterLabelProp,
@@ -39,6 +34,7 @@ export function useSwitch_unstable(props: SwitchProps): SwitchState {
     labelBefore = true,
     layout = 'horizontal',
     onChange,
+    onAccessibilityAction,
     onPress,
     ref: rootRef,
     thumb: thumbProp,
@@ -103,10 +99,37 @@ export function useSwitch_unstable(props: SwitchProps): SwitchState {
           accessibilityLabel: label,
         };
 
-  const [pressableProps, pressableState] = usePressableState({
+  const { toggle: toggleChecked } = toggle;
+  const switchActions = React.useMemo(
+    () =>
+      accessibilityActions?.some((action) => action.name === 'Toggle')
+        ? accessibilityActions
+        : [{ name: 'Toggle' }, ...(accessibilityActions ?? [])],
+    [accessibilityActions],
+  );
+  const handleAccessibilityAction = React.useCallback<NonNullable<SwitchProps['onAccessibilityAction']>>(
+    (event) => {
+      if (event.nativeEvent.actionName === 'Toggle') {
+        toggleChecked();
+      }
+      onAccessibilityAction?.(event);
+    },
+    [onAccessibilityAction, toggleChecked],
+  );
+  const handlePress = React.useCallback(
+    (event: Parameters<NonNullable<SwitchProps['onPress']>>[0]) => {
+      toggleChecked();
+      onPress?.(event);
+    },
+    [onPress, toggleChecked],
+  );
+
+  const [pressableProps, pressableState, focusBinding] = useFocusablePressable({
     ...rest,
     ...pressableNameProps,
     accessibilityRole: 'switch',
+    accessibilityActions: switchActions,
+    onAccessibilityAction: handleAccessibilityAction,
     accessibilityState: {
       ...rest.accessibilityState,
       checked,
@@ -114,38 +137,18 @@ export function useSwitch_unstable(props: SwitchProps): SwitchState {
     },
     accessible: rest.accessible ?? true,
     disabled,
-    focusable: rest.focusable ?? !disabled,
+    focusable: !disabled && (rest.focusable ?? true),
     'aria-checked': checked,
+    onPress: handlePress,
   });
 
   const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled });
 
-  const { toggle: toggleChecked } = toggle;
-  const handlePress = React.useCallback(
-    (event: Parameters<NonNullable<typeof pressableProps.onPress>>[0]) => {
-      toggleChecked();
-      onPress?.(event);
-    },
-    [onPress, toggleChecked],
-  );
-
-  const handleKeyUp = React.useCallback(
-    (event: Parameters<NonNullable<typeof pressableProps.onKeyUp>>[0]) => {
-      pressableProps.onKeyUp?.(event);
-      if (isToggleKey((event as { nativeEvent?: { key?: string } }).nativeEvent?.key)) {
-        toggleChecked();
-      }
-    },
-    [pressableProps, toggleChecked],
-  );
-
   const layoutContainer = useSlot(View, { testID: 'switch-layout-container' });
   const root = useSlot(Pressable, {
     ...pressableProps,
     ...nativeFocusProps,
     ref: rootRef,
-    onPress: handlePress,
-    onKeyUp: handleKeyUp,
   });
   const track = useSlot(Animated.View, trackProp);
   const thumb = useSlot(Animated.View, thumbProp);
@@ -161,6 +164,7 @@ export function useSwitch_unstable(props: SwitchProps): SwitchState {
     FocusRing,
     ...themeState,
     ...pressableState,
+    ...focusBinding,
     aboveLabel,
     afterLabel,
     beforeLabel,
diff --git a/packages/agentic/components/src/components/tab/renderTab.tsx b/packages/agentic/components/src/components/tab/renderTab.tsx
index 8b18096bc9..1801f45bb7 100644
--- a/packages/agentic/components/src/components/tab/renderTab.tsx
+++ b/packages/agentic/components/src/components/tab/renderTab.tsx
@@ -12,7 +12,7 @@ export function renderTab_unstable(state: TabState) {
   const contentElement = Content && ContentHidden ? <LayoutStableText reserve={<ContentHidden />} visible={<Content />} /> : null;
 
   return (
-    <state.root ref={state.tabRef}>
+    <state.root ref={state.focusTargetRef}>
       {state.FocusRing && <state.FocusRing />}
       {ActiveIcon && <ActiveIcon />}
       {contentElement}
diff --git a/packages/agentic/components/src/components/tab/spec/interaction.md b/packages/agentic/components/src/components/tab/spec/interaction.md
index bb18311ba8..7db6ee19a4 100644
--- a/packages/agentic/components/src/components/tab/spec/interaction.md
+++ b/packages/agentic/components/src/components/tab/spec/interaction.md
@@ -57,3 +57,11 @@ wider horizontal padding with a rounded corner radius. The icon-only layout uses
 equal padding on both axes and a fully circular radius, and never renders text,
 so it is a square target regardless of what the label would have been. The icon
 is the same size in both layouts.
+
+## Focus target lifetime
+
+The state hook uses the shared ref-backed focus foundation. Internal focus-target
+refs compose with caller refs on the actual interactive slot, without redirecting
+structural root refs. Native self-focus is distinct from descendant events, and
+detach/disable invalidates pending focus requests. Focus visuals observe root
+modality only while focused on the custom path; there is no scene-wide rerender.
diff --git a/packages/agentic/components/src/components/tab/spec/source.json b/packages/agentic/components/src/components/tab/spec/source.json
index 6636945e47..899f911b88 100644
--- a/packages/agentic/components/src/components/tab/spec/source.json
+++ b/packages/agentic/components/src/components/tab/spec/source.json
@@ -3,7 +3,7 @@
   "component": "tab",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-12",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/tab/tab.test.tsx b/packages/agentic/components/src/components/tab/tab.test.tsx
index 3769277a59..afa9677028 100644
--- a/packages/agentic/components/src/components/tab/tab.test.tsx
+++ b/packages/agentic/components/src/components/tab/tab.test.tsx
@@ -8,6 +8,7 @@ import { render } from '../../common/renderWithTheme';
 import type { RenderResult } from '@testing-library/react-native';
 
 import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
+import type { FocusTarget } from '@fluentui-react-native/framework-base';
 
 import { Tab } from './tab';
 import { TabList } from '../tablist/tablist';
@@ -28,13 +29,15 @@ function getRootStyle(component: RenderResult): ViewStyle {
 
 describe('Tab', () => {
   it('keeps its internal focus ref when the consumer omits ref', async () => {
-    let registeredRef: React.RefObject<React.ElementRef<typeof Pressable> | null> | undefined;
+    let registeredRef: FocusTarget | undefined;
     const contextValue: TabListContextValue = {
       activeValue: 'files',
+      focusedValue: undefined,
       disabled: false,
       getPosition: () => 1,
       isTabDisabled: () => false,
       onTabFocus: jest.fn(),
+      onTabBlur: jest.fn(),
       onTabKeyDown: jest.fn(),
       onTabPress: jest.fn(),
       orientation: 'horizontal',
diff --git a/packages/agentic/components/src/components/tab/tab.types.ts b/packages/agentic/components/src/components/tab/tab.types.ts
index ecdc59fae3..8b930c885c 100644
--- a/packages/agentic/components/src/components/tab/tab.types.ts
+++ b/packages/agentic/components/src/components/tab/tab.types.ts
@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import type { FocusTargetBinding } from '@fluentui-react-native/framework-base';
 import type { Pressable, StyleProp, ViewStyle } from 'react-native';
 
 import type {
@@ -78,10 +78,10 @@ type TabIconAndTextProps = {
 export type TabProps = TabStateProps & ComponentProps<TabSlots, TabExposedPressableProps> & (TabIconAndTextProps | TabIconOnlyProps);
 
 export type TabState = ComponentState<TabStateSlots & FocusVisualsSlots> &
+  FocusTargetBinding &
   Required<TabStateProps> &
   ThemeState &
   PressableState & {
     iconOnly: boolean;
-    tabRef: React.RefObject<React.ElementRef<typeof Pressable> | null>;
     userStyle?: StyleProp<ViewStyle>;
   };
diff --git a/packages/agentic/components/src/components/tab/useTab.ts b/packages/agentic/components/src/components/tab/useTab.ts
index 092c37a8df..47d1abedd9 100644
--- a/packages/agentic/components/src/components/tab/useTab.ts
+++ b/packages/agentic/components/src/components/tab/useTab.ts
@@ -4,7 +4,8 @@ import { Pressable } from 'react-native';
 import {
   type PropsWithRefOf,
   useAccessibilityLabelWarning,
-  usePressableState,
+  useFocusablePressable,
+  isSelfTargetEvent,
   useOptionalSlot,
   useSlot,
 } from '@fluentui-react-native/framework-base';
@@ -22,6 +23,7 @@ import { Text } from '../text/text';
 export function useTab_unstable(props: TabProps): TabState {
   const tabList = React.useContext(TabListContext);
   const {
+    accessibilityActions,
     accessibilityState,
     controls,
     content: contentProp,
@@ -37,15 +39,12 @@ export function useTab_unstable(props: TabProps): TabState {
   } = props;
   const value = valueProp ?? controls;
   const iconOnly = layout === 'iconOnly';
-  const tabRef = React.useRef<React.ElementRef<typeof Pressable>>(null);
   const listDisabled = tabList?.isTabDisabled(value, disabled) ?? disabled;
   const listSelected = tabList ? tabList.selectedValue === value : selected;
   const listFocusable = tabList ? tabList.activeValue === value && !listDisabled : (rest.focusable ?? !disabled);
-  const { onFocus, onKeyDown, onPress, ...nativeRest } = rest;
+  const { onFocus, onBlur, onKeyDown, onPress, onAccessibilityAction, ...nativeRest } = rest;
   const registerTab = tabList?.registerTab;
 
-  React.useEffect(() => registerTab?.(value, tabRef), [registerTab, value]);
-
   useAccessibilityLabelWarning({
     accessibilityLabel: rest.accessibilityLabel ?? rest['aria-label'],
     accessibilityLabelledBy: rest.accessibilityLabelledBy ?? rest['aria-labelledby'],
@@ -55,32 +54,60 @@ export function useTab_unstable(props: TabProps): TabState {
   });
 
   const themeState = useThemeState();
-  const [pressableProps, pressableState] = usePressableState({
-    ...nativeRest,
-    accessibilityPosInSet: tabList?.getPosition(value),
-    accessibilitySetSize: tabList?.setSize,
-    accessibilityRole: 'tab',
-    accessibilityState: {
-      ...accessibilityState,
+  const selectActions = React.useMemo(
+    () =>
+      accessibilityActions?.some((action) => action.name === 'Select')
+        ? accessibilityActions
+        : [{ name: 'Select' }, ...(accessibilityActions ?? [])],
+    [accessibilityActions],
+  );
+  const [pressableProps, pressableState, focusBinding] = useFocusablePressable(
+    {
+      ...nativeRest,
+      accessibilityPosInSet: tabList?.getPosition(value),
+      accessibilitySetSize: tabList?.setSize,
+      accessibilityRole: 'tab',
+      accessibilityActions: selectActions,
+      onAccessibilityAction: (event) => {
+        if (!listDisabled && event.nativeEvent.actionName === 'Select') {
+          tabList?.onTabPress(value);
+        }
+        onAccessibilityAction?.(event);
+      },
+      accessibilityState: {
+        ...accessibilityState,
+        disabled: listDisabled,
+        selected: listSelected,
+      },
+      accessible: nativeRest.accessible ?? true,
       disabled: listDisabled,
-      selected: listSelected,
-    },
-    accessible: nativeRest.accessible ?? true,
-    disabled: listDisabled,
-    focusable: listFocusable,
-    onFocus: (event) => {
-      tabList?.onTabFocus(value);
-      onFocus?.(event);
-    },
-    onKeyDown: (event) => {
-      tabList?.onTabKeyDown(value, event);
-      onKeyDown?.(event);
+      focusable: listFocusable,
+      onFocus: (event) => {
+        if (isSelfTargetEvent(event)) {
+          tabList?.onTabFocus(value);
+        }
+        onFocus?.(event);
+      },
+      onBlur: (event) => {
+        if (isSelfTargetEvent(event)) {
+          tabList?.onTabBlur(value);
+        }
+        onBlur?.(event);
+      },
+      onKeyDown: (event) => {
+        tabList?.onTabKeyDown(value, event);
+        onKeyDown?.(event);
+      },
+      onPress: (event) => {
+        tabList?.onTabPress(value);
+        onPress?.(event);
+      },
     },
-    onPress: (event) => {
-      tabList?.onTabPress(value);
-      onPress?.(event);
-    },
-  });
+    { focusOnPress: !tabList },
+  );
+
+  const { focusTarget } = focusBinding;
+  React.useLayoutEffect(() => registerTab?.(value, focusTarget), [registerTab, value, focusTarget]);
 
   const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !listDisabled });
 
@@ -107,11 +134,11 @@ export function useTab_unstable(props: TabProps): TabState {
     layout,
     controls,
     selected: listSelected,
-    tabRef,
     value,
     iconOnly,
     userStyle,
     ...themeState,
     ...pressableState,
+    ...focusBinding,
   };
 }
diff --git a/packages/agentic/components/src/components/tablist/SPEC.md b/packages/agentic/components/src/components/tablist/SPEC.md
index 9050d05e5b..9cc6ea77d7 100644
--- a/packages/agentic/components/src/components/tablist/SPEC.md
+++ b/packages/agentic/components/src/components/tablist/SPEC.md
@@ -72,6 +72,12 @@ to the first enabled Tab and End to the last. Arrow movement wraps only when
 `circularNavigation` is true. Handled keys prevent the native event's default
 behavior.
 
+Focusability and selection commit before imperative focus. Ref-backed target
+registrations replace raw optional `.focus()` calls. Native focus events confirm
+the focused value; a request or active tab stop does not itself prove focus moved.
+Pending requests cancel on replacement/removal. Modified shortcuts are forwarded,
+and `Select` accessibility actions use the collection's selection owner.
+
 When `selectionFollowsFocus` is true, movement requests the focused value.
 Otherwise focus moves independently and Enter, Space, or pointer activation
 requests selection through the Tab press path.
diff --git a/packages/agentic/components/src/components/tablist/TabListContext.ts b/packages/agentic/components/src/components/tablist/TabListContext.ts
index 7b346f4bf9..d17a717c96 100644
--- a/packages/agentic/components/src/components/tablist/TabListContext.ts
+++ b/packages/agentic/components/src/components/tablist/TabListContext.ts
@@ -1,18 +1,20 @@
 import * as React from 'react';
-import type { Pressable } from 'react-native';
+import type { FocusTarget } from '@fluentui-react-native/framework-base';
 
 import type { TabKeyEvent, TabListOrientation } from './tablist.types';
 
 export type TabListContextValue = {
   activeValue: string | undefined;
+  focusedValue: string | undefined;
   disabled: boolean;
   getPosition: (value: string) => number | undefined;
   isTabDisabled: (value: string, disabled: boolean) => boolean;
   onTabFocus: (value: string) => void;
+  onTabBlur: (value: string) => void;
   onTabKeyDown: (value: string, event: TabKeyEvent) => void;
   onTabPress: (value: string) => void;
   orientation: TabListOrientation;
-  registerTab: (value: string, ref: React.RefObject<React.ElementRef<typeof Pressable> | null>) => () => void;
+  registerTab: (value: string, target: FocusTarget) => () => void;
   selectedValue: string | undefined;
   setSize: number;
 };
diff --git a/packages/agentic/components/src/components/tablist/spec/interaction.md b/packages/agentic/components/src/components/tablist/spec/interaction.md
index dce0ca82c3..6beac7f226 100644
--- a/packages/agentic/components/src/components/tablist/spec/interaction.md
+++ b/packages/agentic/components/src/components/tablist/spec/interaction.md
@@ -20,13 +20,28 @@ orientation axis are forwarded unchanged.
 Enter and Space continue through the native Tab press behavior. TabList adds no
 second activation handler, preventing duplicate selection requests.
 
+Target eligibility/selection are committed before the layout-effect focus
+request. The active tab stop is distinct from the last confirmed native focus
+value. Targets register ref-backed controllers; native focus events confirm
+requests, and removal/replacement cancels stale requests. Modified shortcuts
+are not consumed. The native `Select` accessibility action uses the same
+collection selection owner.
+
 ## Pointer
 
 Pointer activation uses the existing Tab hit area and hover and pressed states.
 The list does not add an overlay. A pointer press moves the active entry and
 requests selection while preserving the Tab's own `onPress`.
+Windows/Win32 then request focus through the committed target. Pointer selection
+does not impose that Windows click-focus policy on macOS.
 
 ## Motion
 
 TabList adds no animation. Tab selection presentation changes through the
 existing Tab render, so reduced-motion settings require no group branch.
+
+## Focus target lifetime
+
+Tabs register stable, ref-backed targets. The collection requests focus after
+eligibility commits and confirms it from native focus events. Superseded or
+removed targets cancel pending work; the public structural root ref is unchanged.
diff --git a/packages/agentic/components/src/components/tablist/spec/source.json b/packages/agentic/components/src/components/tablist/spec/source.json
index 541e275ad4..971cf28895 100644
--- a/packages/agentic/components/src/components/tablist/spec/source.json
+++ b/packages/agentic/components/src/components/tablist/spec/source.json
@@ -3,7 +3,7 @@
   "component": "tablist",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-08-30",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/tablist/tablist.stories.tsx b/packages/agentic/components/src/components/tablist/tablist.stories.tsx
index 4f1e390f25..7d42feda37 100644
--- a/packages/agentic/components/src/components/tablist/tablist.stories.tsx
+++ b/packages/agentic/components/src/components/tablist/tablist.stories.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import type { Meta, StoryObj } from '@storybook/react-native';
+import type { DesktopStoryTests } from '@fluentui-react-native/desktop-driver/authoring';
 
 import { Tab } from '../tab/tab';
 import { TabList } from './tablist';
@@ -47,6 +48,50 @@ export const Default: Story = {
   },
 };
 
+function FocusManagementScene() {
+  const [selectedValue, setSelectedValue] = useState('focus-panel-one');
+  return (
+    <View>
+      <TabList accessibilityLabel="Focus navigation" selectedValue={selectedValue} onSelectionChange={setSelectedValue}>
+        <Tab controls="focus-panel-one" content="One" testID="focus-tab-one" />
+        <Tab controls="focus-panel-disabled" content="Disabled" disabled testID="focus-tab-disabled" />
+        <Tab controls="focus-panel-two" content="Two" testID="focus-tab-two" />
+      </TabList>
+      <Text testID="focus-tab-selection">{selectedValue}</Text>
+    </View>
+  );
+}
+
+export const FocusManagement: Story = {
+  render: () => <FocusManagementScene />,
+  tags: ['desktop-focus'],
+  parameters: {
+    desktopDriver: {
+      version: 1,
+      tests: [
+        {
+          id: 'committed-roving-focus',
+          platforms: ['windows', 'win32'],
+          requires: ['physical-click', 'keyboard', 'focus'],
+          steps: [
+            { action: 'wait', target: { testId: 'focus-tab-one' } },
+            { action: 'click', target: { testId: 'focus-tab-one' } },
+            { expect: { state: 'focused', target: { testId: 'focus-tab-one' }, value: true } },
+            { action: 'keys', value: ['\uE014'] },
+            { action: 'wait', until: { state: 'focused', target: { testId: 'focus-tab-two' }, value: true } },
+            { expect: { state: 'text', target: { testId: 'focus-tab-selection' }, value: 'focus-panel-two' } },
+            { expect: { state: 'selected', target: { testId: 'focus-tab-two' }, value: true } },
+            { action: 'keys', value: ['\uE011'] },
+            { action: 'wait', until: { state: 'focused', target: { testId: 'focus-tab-one' }, value: true } },
+            { expect: { state: 'text', target: { testId: 'focus-tab-selection' }, value: 'focus-panel-one' } },
+            { expect: { state: 'selected', target: { testId: 'focus-tab-one' }, value: true } },
+          ],
+        },
+      ],
+    } satisfies DesktopStoryTests,
+  },
+};
+
 export const Controlled: Story = {
   render: (args) => {
     const ControlledExample = () => {
diff --git a/packages/agentic/components/src/components/tablist/tablist.test.tsx b/packages/agentic/components/src/components/tablist/tablist.test.tsx
index 45ba5e481a..8b4f9d3ded 100644
--- a/packages/agentic/components/src/components/tablist/tablist.test.tsx
+++ b/packages/agentic/components/src/components/tablist/tablist.test.tsx
@@ -1,6 +1,7 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import { StyleSheet } from 'react-native';
-import type { ViewStyle } from 'react-native';
+import * as React from 'react';
+import type { Pressable, ViewStyle } from 'react-native';
 
 import { fireEvent } from '@testing-library/react-native';
 import { render } from '../../common/renderWithTheme';
@@ -10,6 +11,8 @@ import { defaultFlexTokens } from '@fluentui-react-native/design/testing';
 
 import { Tab } from '../tab/tab';
 import { TabList } from './tablist';
+import { TabListContext } from './TabListContext';
+import type { TabListContextValue } from './TabListContext';
 
 function renderTabList(props: Partial<React.ComponentProps<typeof TabList>> = {}): Promise<RenderResult> {
   return render(
@@ -221,4 +224,50 @@ describe('TabList', () => {
       gap: defaultFlexTokens.spacing.componentBase100,
     });
   });
+
+  it('requests focus after native eligibility and selection commit, then waits for confirmation', async () => {
+    const ref = React.createRef<React.ComponentRef<typeof Pressable>>();
+    const contexts: TabListContextValue[] = [];
+    function Probe() {
+      const value = React.useContext(TabListContext);
+      if (value) {
+        contexts.push(value);
+      }
+      return null;
+    }
+    const component = await render(
+      <TabList>
+        <Tab controls="one" content="One" />
+        <Tab controls="two" content="Two" ref={ref} />
+        <Probe />
+      </TabList>,
+    );
+    const focus = jest.spyOn(ref.current!, 'focus').mockImplementation(() => {
+      expect(getTabs(component)[1].props.focusable).toBe(true);
+      expect(getTabs(component)[1].props.accessibilityState.selected).toBe(true);
+    });
+    focus.mockClear();
+    await fireEvent(getTabs(component)[0], 'focus', {});
+    await fireEvent(getTabs(component)[0], 'keyDown', { nativeEvent: { key: 'ArrowRight' }, preventDefault: jest.fn() });
+    expect(focus).toHaveBeenCalledTimes(1);
+    expect(contexts[contexts.length - 1].focusedValue).not.toBe('two');
+    await fireEvent(getTabs(component)[1], 'focus', {});
+    expect(contexts[contexts.length - 1].focusedValue).toBe('two');
+    focus.mockRestore();
+  });
+
+  it('handles the native Select accessibility action and ignores modified navigation keys', async () => {
+    const onAccessibilityAction = jest.fn();
+    const component = await render(
+      <TabList>
+        <Tab controls="one" content="One" />
+        <Tab controls="two" content="Two" onAccessibilityAction={onAccessibilityAction} />
+      </TabList>,
+    );
+    await fireEvent(getTabs(component)[0], 'keyDown', { nativeEvent: { key: 'ArrowRight', ctrlKey: true } });
+    expect(getTabs(component).map(selected)).toEqual([true, false]);
+    await fireEvent(getTabs(component)[1], 'accessibilityAction', { nativeEvent: { actionName: 'Select' } });
+    expect(getTabs(component).map(selected)).toEqual([false, true]);
+    expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/packages/agentic/components/src/components/tablist/tablist.types.ts b/packages/agentic/components/src/components/tablist/tablist.types.ts
index ec9a26d6c0..37790392a8 100644
--- a/packages/agentic/components/src/components/tablist/tablist.types.ts
+++ b/packages/agentic/components/src/components/tablist/tablist.types.ts
@@ -9,8 +9,14 @@ export type TabListOrientation = 'horizontal' | 'vertical';
 export type TabKeyEvent = {
   nativeEvent?: {
     key?: string;
+    code?: string;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    shiftKey?: boolean;
   };
   preventDefault?: () => void;
+  stopPropagation?: () => void;
 };
 
 export type TabListStateProps = {
diff --git a/packages/agentic/components/src/components/tablist/useTabList.ts b/packages/agentic/components/src/components/tablist/useTabList.ts
index 87056b6f2e..daf49f562e 100644
--- a/packages/agentic/components/src/components/tablist/useTabList.ts
+++ b/packages/agentic/components/src/components/tablist/useTabList.ts
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { View } from 'react-native';
-import type { Pressable } from 'react-native';
+import { Platform, View } from 'react-native';
 
-import { useThemeState } from '@fluentui-react-native/design';
+import { useRootSettings, useThemeState } from '@fluentui-react-native/design';
 import { useControllableValue, useSlot } from '@fluentui-react-native/framework-base';
+import type { FocusIntent, FocusTarget } from '@fluentui-react-native/framework-base';
 
 import { Tab } from '../tab/tab';
 import type { TabProps } from '../tab/tab.types';
@@ -56,6 +56,7 @@ export function useTabList_unstable(props: TabListProps): TabListState {
     ...rest
   } = props;
   const themeState = useThemeState();
+  const rootSettings = useRootSettings();
   const items = React.useMemo(() => getTabItems(children, disabled), [children, disabled]);
   const firstEnabledValue = items.find((item) => !item.disabled)?.value;
   const initialSelection = findEnabledValue(items, defaultSelectedValue) ?? firstEnabledValue;
@@ -67,7 +68,9 @@ export function useTabList_unstable(props: TabListProps): TabListState {
   const [activeValue, setActiveValue] = React.useState<string | undefined>(
     () => findEnabledValue(items, selectedValueProp ?? initialSelection) ?? firstEnabledValue,
   );
-  const tabRefs = React.useRef(new Map<string, React.RefObject<React.ElementRef<typeof Pressable> | null>>());
+  const tabTargets = React.useRef(new Map<string, FocusTarget>());
+  const [focusedValue, setFocusedValue] = React.useState<string | undefined>(undefined);
+  const [pendingFocus, setPendingFocus] = React.useState<{ value: string; intent: FocusIntent } | undefined>(undefined);
   const previousSelectedValue = React.useRef(selectedValue);
 
   React.useEffect(() => {
@@ -98,7 +101,37 @@ export function useTabList_unstable(props: TabListProps): TabListState {
       }
       return findEnabledValue(items, currentValue) ?? selectedEnabledValue ?? firstEnabledValue;
     });
-  }, [firstEnabledValue, items, selectedValue, selectedValueProp, setSelectedValue]);
+    if (focusedValue !== undefined && findEnabledValue(items, focusedValue) === undefined) {
+      const nextValue = selectedEnabledValue ?? firstEnabledValue;
+      setFocusedValue(undefined);
+      setPendingFocus(nextValue ? { value: nextValue, intent: 'restore' } : undefined);
+    }
+  }, [firstEnabledValue, focusedValue, items, selectedValue, selectedValueProp, setSelectedValue]);
+
+  React.useLayoutEffect(() => {
+    if (!pendingFocus) {
+      return undefined;
+    }
+    if (findEnabledValue(items, pendingFocus.value) === undefined) {
+      setPendingFocus(undefined);
+      return undefined;
+    }
+    const target = tabTargets.current.get(pendingFocus.value);
+    if (!target) {
+      console.warn(`TabList cannot focus "${pendingFocus.value}": no mounted target is registered.`);
+      setPendingFocus(undefined);
+      return undefined;
+    }
+    const request = target.requestFocus(pendingFocus.intent);
+    if (request.status === 'confirmed') {
+      setFocusedValue(pendingFocus.value);
+      setPendingFocus(undefined);
+    } else if (request.status !== 'requested') {
+      console.warn(`TabList cannot focus "${pendingFocus.value}": ${request.status}.`);
+      setPendingFocus(undefined);
+    }
+    return () => request.cancel();
+  }, [items, pendingFocus]);
 
   const requestSelection = React.useCallback(
     (value: string) => {
@@ -108,22 +141,34 @@ export function useTabList_unstable(props: TabListProps): TabListState {
       }
       setActiveValue(value);
       setSelectedValue(value);
+      if (Platform.OS === 'windows' || String(Platform.OS) === 'win32' || rootSettings.inputModality === 'keyboard') {
+        setPendingFocus({ value, intent: rootSettings.inputModality });
+      }
     },
-    [items, setSelectedValue],
+    [items, rootSettings, setSelectedValue],
   );
 
   const onTabFocus = React.useCallback(
     (value: string) => {
       if (findEnabledValue(items, value)) {
         setActiveValue(value);
+        setFocusedValue(value);
+        setPendingFocus(undefined);
       }
     },
     [items],
   );
+  const onTabBlur = React.useCallback((value: string) => {
+    setFocusedValue((current) => (current === value ? undefined : current));
+  }, []);
 
   const onTabKeyDown = React.useCallback(
     (value: string, event: TabKeyEvent) => {
-      const key = event.nativeEvent?.key;
+      const native = event.nativeEvent;
+      if (native?.altKey || native?.ctrlKey || native?.metaKey || native?.shiftKey) {
+        return;
+      }
+      const key = native?.key ?? native?.code;
       const enabledItems = items.filter((item) => !item.disabled);
       const currentIndex = enabledItems.findIndex((item) => item.value === value);
       if (currentIndex < 0 || enabledItems.length === 0) {
@@ -153,6 +198,7 @@ export function useTabList_unstable(props: TabListProps): TabListState {
       }
 
       event.preventDefault?.();
+      event.stopPropagation?.();
       const nextValue = enabledItems[nextIndex].value;
       if (nextValue === value) {
         return;
@@ -161,7 +207,7 @@ export function useTabList_unstable(props: TabListProps): TabListState {
       if (selectionFollowsFocus) {
         setSelectedValue(nextValue);
       }
-      tabRefs.current.get(nextValue)?.current?.focus?.();
+      setPendingFocus({ value: nextValue, intent: 'keyboard' });
     },
     [circularNavigation, items, orientation, selectionFollowsFocus, setSelectedValue],
   );
@@ -174,11 +220,11 @@ export function useTabList_unstable(props: TabListProps): TabListState {
     [items],
   );
 
-  const registerTab = React.useCallback((value: string, ref: React.RefObject<React.ElementRef<typeof Pressable> | null>) => {
-    tabRefs.current.set(value, ref);
+  const registerTab = React.useCallback((value: string, target: FocusTarget) => {
+    tabTargets.current.set(value, target);
     return () => {
-      if (tabRefs.current.get(value) === ref) {
-        tabRefs.current.delete(value);
+      if (tabTargets.current.get(value) === target) {
+        tabTargets.current.delete(value);
       }
     };
   }, []);
@@ -186,10 +232,12 @@ export function useTabList_unstable(props: TabListProps): TabListState {
   const contextValue = React.useMemo<TabListContextValue>(
     () => ({
       activeValue,
+      focusedValue,
       disabled,
       getPosition,
       isTabDisabled: (value, tabDisabled) => tabDisabled || disabled || !items.some((item) => item.value === value),
       onTabFocus,
+      onTabBlur,
       onTabKeyDown,
       onTabPress: requestSelection,
       orientation,
@@ -197,7 +245,20 @@ export function useTabList_unstable(props: TabListProps): TabListState {
       selectedValue,
       setSize: items.length,
     }),
-    [activeValue, disabled, getPosition, items, onTabFocus, onTabKeyDown, orientation, registerTab, requestSelection, selectedValue],
+    [
+      activeValue,
+      focusedValue,
+      disabled,
+      getPosition,
+      items,
+      onTabFocus,
+      onTabBlur,
+      onTabKeyDown,
+      orientation,
+      registerTab,
+      requestSelection,
+      selectedValue,
+    ],
   );
 
   const root = useSlot(View, {
diff --git a/packages/agentic/components/src/components/tag/renderTag.tsx b/packages/agentic/components/src/components/tag/renderTag.tsx
index ea587bc0a3..9b8483e266 100644
--- a/packages/agentic/components/src/components/tag/renderTag.tsx
+++ b/packages/agentic/components/src/components/tag/renderTag.tsx
@@ -3,7 +3,7 @@ import type { TagState } from './tag.types';
 
 export function renderTag_unstable(state: TagState) {
   return (
-    <state.root>
+    <state.root ref={state.focusTargetRef}>
       {state.FocusRing && <state.FocusRing />}
       {state.leadingIcon && <state.leadingIcon />}
       {state.content && <state.content />}
diff --git a/packages/agentic/components/src/components/tag/spec/interaction.md b/packages/agentic/components/src/components/tag/spec/interaction.md
index e82cf316ff..8d81b6ef8b 100644
--- a/packages/agentic/components/src/components/tag/spec/interaction.md
+++ b/packages/agentic/components/src/components/tag/spec/interaction.md
@@ -72,3 +72,11 @@ from the start of the line rather than stretching. A tag in a constrained row
 therefore compresses its text while keeping both glyphs at full size. Truncation
 behavior beyond that belongs to the caller, which can pass text props through
 the content slot.
+
+## Focus target lifetime
+
+The state hook uses the shared ref-backed focus foundation. Internal focus-target
+refs compose with caller refs on the actual interactive slot, without redirecting
+structural root refs. Native self-focus is distinct from descendant events, and
+detach/disable invalidates pending focus requests. Focus visuals observe root
+modality only while focused on the custom path; there is no scene-wide rerender.
diff --git a/packages/agentic/components/src/components/tag/spec/source.json b/packages/agentic/components/src/components/tag/spec/source.json
index e0fab02cf1..7b116330dd 100644
--- a/packages/agentic/components/src/components/tag/spec/source.json
+++ b/packages/agentic/components/src/components/tag/spec/source.json
@@ -3,7 +3,7 @@
   "component": "tag",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-12",
+  "reviewedAt": "2026-09-14",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/tag/tag.types.ts b/packages/agentic/components/src/components/tag/tag.types.ts
index a45d193fd2..dee2b476ee 100644
--- a/packages/agentic/components/src/components/tag/tag.types.ts
+++ b/packages/agentic/components/src/components/tag/tag.types.ts
@@ -1,3 +1,4 @@
+import type { FocusTargetBinding } from '@fluentui-react-native/framework-base';
 import type { Pressable, StyleProp, ViewStyle } from 'react-native';
 import type {
   ComponentProps,
@@ -40,6 +41,7 @@ export type TagRootProps = OwnedRootProps<PropsWithRefOf<typeof Pressable>>;
 export type TagProps = TagStateProps & ComponentProps<TagSlots, TagRootProps>;
 
 export type TagState = ComponentState<TagSlots & FocusVisualsSlots> &
+  FocusTargetBinding &
   Required<TagStateProps> &
   Omit<ThemeState, 'appearance'> &
   PressableState & {
diff --git a/packages/agentic/components/src/components/tag/useTag.ts b/packages/agentic/components/src/components/tag/useTag.ts
index a73cc5c394..c0c711ea1d 100644
--- a/packages/agentic/components/src/components/tag/useTag.ts
+++ b/packages/agentic/components/src/components/tag/useTag.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Pressable } from 'react-native';
 import { useThemeState } from '@fluentui-react-native/design';
-import { useAccessibilityLabelWarning, useOptionalSlot, usePressableState, useSlot } from '@fluentui-react-native/framework-base';
+import { useAccessibilityLabelWarning, useOptionalSlot, useFocusablePressable, useSlot } from '@fluentui-react-native/framework-base';
 
 import { semanticIconSources } from '../../common/iconSources';
 import { useFocusVisuals } from '../../common/useFocusVisuals';
@@ -50,7 +50,7 @@ export function useTag_unstable(props: TagProps): TagState {
   }, [hasLeadingIcon, iconOnly]);
 
   const themeState = useThemeState();
-  const [pressableProps, pressableState] = usePressableState({
+  const [pressableProps, pressableState, focusBinding] = useFocusablePressable({
     ...rest,
     accessibilityRole: 'button',
     accessibilityState: {
@@ -59,7 +59,7 @@ export function useTag_unstable(props: TagProps): TagState {
     },
     accessible: rest.accessible ?? true,
     disabled,
-    focusable: rest.focusable ?? !disabled,
+    focusable: !disabled && (rest.focusable ?? true),
   });
 
   const { FocusRing, ...nativeFocusProps } = useFocusVisuals({ focused: pressableState.focused && !disabled });
@@ -95,6 +95,7 @@ export function useTag_unstable(props: TagProps): TagState {
     userStyle,
     ...themeState,
     ...pressableState,
+    ...focusBinding,
     appearance,
   };
 }
diff --git a/packages/agentic/design/src/index.ts b/packages/agentic/design/src/index.ts
index 5658370541..a3fa3c501c 100644
--- a/packages/agentic/design/src/index.ts
+++ b/packages/agentic/design/src/index.ts
@@ -23,9 +23,11 @@ export {
   normalizeThemeAppearanceRequest,
   resolveThemeAppearance,
   RootContext,
+  RootInputBoundary,
   ThemedRoot,
   ThemeProvider,
   useRootSettings,
+  useRootInputModality,
 } from './theming/modern';
 export type {
   FlexThemeInput,
diff --git a/packages/agentic/design/src/theming/RootInputBoundary.tsx b/packages/agentic/design/src/theming/RootInputBoundary.tsx
new file mode 100644
index 0000000000..0be0cd2dcc
--- /dev/null
+++ b/packages/agentic/design/src/theming/RootInputBoundary.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import type { IViewProps } from '@fluentui-react-native/adapters';
+
+import { useRootInputController } from './rootInputController';
+import { useRootInputProps } from './useRootInputProps';
+
+/**
+ * Attaches a native popup/window to the existing scene's input controller,
+ * without introducing another theme or modality context.
+ */
+export const RootInputBoundary = React.forwardRef<View, IViewProps>((props, ref) => {
+  const controller = useRootInputController();
+  const inputProps = useRootInputProps(props, controller, true);
+  return <View collapsable={false} {...props} {...inputProps} ref={ref} />;
+});
+
+RootInputBoundary.displayName = 'RootInputBoundary';
diff --git a/packages/agentic/design/src/theming/ThemedRoot.tsx b/packages/agentic/design/src/theming/ThemedRoot.tsx
index bd9c8e62ba..a5c8dee453 100644
--- a/packages/agentic/design/src/theming/ThemedRoot.tsx
+++ b/packages/agentic/design/src/theming/ThemedRoot.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { Platform, View } from 'react-native';
+import { View } from 'react-native';
 
 import type { IViewProps } from '@fluentui-react-native/adapters';
 
 import { useThemeBoundary } from './context';
 import { FlexThemeReference } from './flexThemeReference';
 import { RootContext } from './rootContext';
-import type { InputModality } from './rootContext';
+import { createRootInputController, RootInputContext } from './rootInputController';
+import { useRootInputProps } from './useRootInputProps';
 import { ThemeProvider } from './ThemeProvider';
 import type { ThemeProviderProps } from './ThemeProvider';
 
@@ -27,50 +28,15 @@ const defaultTheme = new FlexThemeReference();
 export const ThemedRoot = React.forwardRef<View, ThemedRootProps>((props, ref) => {
   const { theme, appearance, appearanceSource, fallbackAppearance, children, ...viewProps } = props;
   const parentTheme = useThemeBoundary();
-  const parentRoot = React.useContext(RootContext);
-  const localRoot = React.useRef<{ inputModality: InputModality }>({ inputModality: 'pointer' });
+  const parentController = React.useContext(RootInputContext);
+  const [localController] = React.useState(createRootInputController);
+  const controller = parentController ?? localController;
   const inheritedTheme = theme === undefined ? parentTheme : undefined;
   const resolvedFallback = React.useMemo(
     () => ({ ...inheritedTheme?.fallbackAppearance, ...fallbackAppearance }),
     [inheritedTheme?.fallbackAppearance, fallbackAppearance],
   );
-  const { onKeyDown, onKeyDownCapture, onPointerDownCapture, onStartShouldSetResponderCapture } = viewProps;
-  const trackKeyDown = React.useCallback<NonNullable<IViewProps['onKeyDown']>>(
-    (event) => {
-      localRoot.current.inputModality = 'keyboard';
-      onKeyDown?.(event);
-    },
-    [onKeyDown],
-  );
-  const trackKeyDownCapture = React.useCallback<NonNullable<IViewProps['onKeyDownCapture']>>(
-    (event) => {
-      localRoot.current.inputModality = 'keyboard';
-      onKeyDownCapture?.(event);
-    },
-    [onKeyDownCapture],
-  );
-  const trackPointerDown = React.useCallback<NonNullable<IViewProps['onPointerDownCapture']>>(
-    (event) => {
-      localRoot.current.inputModality = 'pointer';
-      onPointerDownCapture?.(event);
-    },
-    [onPointerDownCapture],
-  );
-  const trackTouchStart = React.useCallback<NonNullable<IViewProps['onStartShouldSetResponderCapture']>>(
-    (event) => {
-      localRoot.current.inputModality = 'pointer';
-      return onStartShouldSetResponderCapture?.(event) ?? false;
-    },
-    [onStartShouldSetResponderCapture],
-  );
-  const trackingProps: IViewProps = parentRoot
-    ? {}
-    : {
-        // Keep the bubbling handler too: desktop native views use it to enable key events.
-        ...(Platform.OS !== 'ios' && Platform.OS !== 'android' ? { onKeyDown: trackKeyDown, onKeyDownCapture: trackKeyDownCapture } : {}),
-        onPointerDownCapture: trackPointerDown,
-        onStartShouldSetResponderCapture: trackTouchStart,
-      };
+  const trackingProps = useRootInputProps(viewProps, controller, !parentController);
 
   return (
     <ThemeProvider
@@ -79,11 +45,13 @@ export const ThemedRoot = React.forwardRef<View, ThemedRootProps>((props, ref) =
       appearanceSource={appearanceSource ?? inheritedTheme?.appearanceSource}
       fallbackAppearance={resolvedFallback}
     >
-      <RootContext.Provider value={parentRoot ?? localRoot.current}>
-        <View {...viewProps} {...trackingProps} ref={ref}>
-          {children}
-        </View>
-      </RootContext.Provider>
+      <RootInputContext.Provider value={controller}>
+        <RootContext.Provider value={controller.settings}>
+          <View {...viewProps} {...trackingProps} ref={ref}>
+            {children}
+          </View>
+        </RootContext.Provider>
+      </RootInputContext.Provider>
     </ThemeProvider>
   );
 });
diff --git a/packages/agentic/design/src/theming/index.ts b/packages/agentic/design/src/theming/index.ts
index 53b36eb4bf..5ac164bac4 100644
--- a/packages/agentic/design/src/theming/index.ts
+++ b/packages/agentic/design/src/theming/index.ts
@@ -56,6 +56,8 @@ export type { ThemeProviderProps } from './ThemeProvider';
 export { ThemedRoot } from './ThemedRoot';
 export type { ThemedRootProps } from './ThemedRoot';
 export { RootContext, useRootSettings } from './rootContext';
+export { RootInputBoundary } from './RootInputBoundary';
+export { useRootInputModality } from './useRootInputModality';
 export type { InputModality, RootSettings } from './rootContext';
 export { FlexThemeReference } from './flexThemeReference';
 export type {
diff --git a/packages/agentic/design/src/theming/modern.ts b/packages/agentic/design/src/theming/modern.ts
index 3c237f5766..1e83197417 100644
--- a/packages/agentic/design/src/theming/modern.ts
+++ b/packages/agentic/design/src/theming/modern.ts
@@ -31,5 +31,7 @@ export type { ThemeProviderProps } from './ThemeProvider';
 export { ThemedRoot } from './ThemedRoot';
 export type { ThemedRootProps } from './ThemedRoot';
 export { RootContext, useRootSettings } from './rootContext';
+export { RootInputBoundary } from './RootInputBoundary';
+export { useRootInputModality } from './useRootInputModality';
 export type { InputModality, RootSettings } from './rootContext';
 export type { FlexThemeSource, LegacyThemeSource, ThemeSource, ThemeSourceBase } from './themeSource';
diff --git a/packages/agentic/design/src/theming/rootContext.ts b/packages/agentic/design/src/theming/rootContext.ts
index 61213249d2..bafe5a6519 100644
--- a/packages/agentic/design/src/theming/rootContext.ts
+++ b/packages/agentic/design/src/theming/rootContext.ts
@@ -5,7 +5,8 @@ export type InputModality = 'keyboard' | 'pointer';
 export interface RootSettings {
   /**
    * Last input modality observed by the scene root. Initially `pointer`.
-   * Read this in event handlers; changes do not trigger a render.
+   * Read this in event handlers; this object does not subscribe to changes.
+   * useRootInputModality provides an opt-in reactive read.
    */
   readonly inputModality: InputModality;
 }
diff --git a/packages/agentic/design/src/theming/rootInputController.test.tsx b/packages/agentic/design/src/theming/rootInputController.test.tsx
new file mode 100644
index 0000000000..0d0fad1b88
--- /dev/null
+++ b/packages/agentic/design/src/theming/rootInputController.test.tsx
@@ -0,0 +1,70 @@
+import { Text, View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import type { ReactTestRenderer } from 'react-test-renderer';
+
+import { RootInputBoundary } from './RootInputBoundary';
+import { createRootInputController } from './rootInputController';
+import { ThemedRoot } from './ThemedRoot';
+import { useRootSettings } from './rootContext';
+import { useRootInputModality } from './useRootInputModality';
+import type { RootSettings } from './rootContext';
+
+describe('root input controller', () => {
+  it('deduplicates modality changes, preserves the settings object, and cleans up', () => {
+    const controller = createRootInputController();
+    const settings = controller.settings;
+    const notify = jest.fn();
+    const unsubscribe = controller.subscribe(notify);
+    controller.setInputModality('pointer');
+    expect(notify).not.toHaveBeenCalled();
+    controller.setInputModality('keyboard');
+    controller.setInputModality('keyboard');
+    expect(notify).toHaveBeenCalledTimes(1);
+    expect(controller.settings).toBe(settings);
+    expect(settings.inputModality).toBe('keyboard');
+    unsubscribe();
+    unsubscribe();
+    controller.setInputModality('pointer');
+    expect(notify).toHaveBeenCalledTimes(1);
+  });
+
+  it('shares popup input without rerendering unsubscribed consumers or the root', () => {
+    const settings: RootSettings[] = [];
+    const active: string[] = [];
+    const inactive: string[] = [];
+    const rootRenders = jest.fn();
+    function Probe({ subscribed }: { subscribed: boolean }) {
+      settings.push(useRootSettings());
+      const value = useRootInputModality(subscribed);
+      (subscribed ? active : inactive).push(value);
+      return <Text>{value}</Text>;
+    }
+    function Scene() {
+      rootRenders();
+      return (
+        <ThemedRoot>
+          <Probe subscribed={false} />
+          <RootInputBoundary testID="popup">
+            <Probe subscribed />
+          </RootInputBoundary>
+        </ThemedRoot>
+      );
+    }
+    let tree: ReactTestRenderer;
+    act(() => {
+      tree = create(<Scene />);
+    });
+    const popup = () => tree!.root.findAllByType(View).find((node) => node.props.testID === 'popup')!;
+    const inactiveCount = inactive.length;
+    act(() => popup().props.onKeyDownCapture({ nativeEvent: { key: 'Tab' } }));
+    expect(active[active.length - 1]).toBe('keyboard');
+    expect(inactive).toHaveLength(inactiveCount);
+    expect(rootRenders).toHaveBeenCalledTimes(1);
+    expect(settings.every((value) => value === settings[0])).toBe(true);
+    act(() => popup().props.onPointerDownCapture({}));
+    expect(active[active.length - 1]).toBe('pointer');
+    act(() => popup().props.onKeyDownCapture({ nativeEvent: { key: 'Shift' } }));
+    expect(settings[0].inputModality).toBe('pointer');
+    act(() => tree!.unmount());
+  });
+});
diff --git a/packages/agentic/design/src/theming/rootInputController.ts b/packages/agentic/design/src/theming/rootInputController.ts
new file mode 100644
index 0000000000..98202c89e4
--- /dev/null
+++ b/packages/agentic/design/src/theming/rootInputController.ts
@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import type { InputModality, RootSettings } from './rootContext';
+
+export interface RootInputController {
+  readonly settings: RootSettings;
+  getSnapshot(): InputModality;
+  subscribe(listener: () => void): () => void;
+  setInputModality(modality: InputModality): void;
+}
+
+export function createRootInputController(): RootInputController {
+  let inputModality: InputModality = 'pointer';
+  const listeners = new Set<() => void>();
+  return {
+    settings: Object.freeze({
+      get inputModality() {
+        return inputModality;
+      },
+    }),
+    getSnapshot: () => inputModality,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    setInputModality: (next) => {
+      if (next !== inputModality) {
+        inputModality = next;
+        for (const listener of Array.from(listeners)) {
+          listener();
+        }
+      }
+    },
+  };
+}
+
+export const RootInputContext = React.createContext<RootInputController | undefined>(undefined);
+
+export function useRootInputController(): RootInputController {
+  const controller = React.useContext(RootInputContext);
+  if (!controller) {
+    throw new Error('Root input tracking must be used within a ThemedRoot.');
+  }
+  return controller;
+}
diff --git a/packages/agentic/design/src/theming/useRootInputModality.ts b/packages/agentic/design/src/theming/useRootInputModality.ts
new file mode 100644
index 0000000000..7eda2b591a
--- /dev/null
+++ b/packages/agentic/design/src/theming/useRootInputModality.ts
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { useRootSettings } from './rootContext';
+import type { InputModality } from './rootContext';
+import { useRootInputController } from './rootInputController';
+
+const noSubscription = () => () => undefined;
+
+/**
+ * Observes modality without replacing RootSettings or rerendering the scene.
+ * Unfocused consumers can opt out of notifications while still reading the snapshot.
+ */
+export function useRootInputModality(subscribe = true): InputModality {
+  const controller = useRootInputController();
+  const settings = useRootSettings();
+  const getSnapshot = React.useCallback(() => settings.inputModality, [settings]);
+  return React.useSyncExternalStore(subscribe ? controller.subscribe : noSubscription, getSnapshot, getSnapshot);
+}
diff --git a/packages/agentic/design/src/theming/useRootInputProps.ts b/packages/agentic/design/src/theming/useRootInputProps.ts
new file mode 100644
index 0000000000..b82a834c53
--- /dev/null
+++ b/packages/agentic/design/src/theming/useRootInputProps.ts
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+import type { IViewProps } from '@fluentui-react-native/adapters';
+
+import type { RootInputController } from './rootInputController';
+
+const modifierKeys = new Set(['Alt', 'Control', 'Meta', 'Shift', 'CapsLock', 'NumLock', 'ScrollLock', 'Fn']);
+
+export function useRootInputProps(props: IViewProps, controller: RootInputController, enabled: boolean): IViewProps {
+  const { onKeyDown, onKeyDownCapture, onKeyUpCapture, onPointerDownCapture, onStartShouldSetResponderCapture } = props;
+  const trackKeyboard = React.useCallback(
+    (key: string | undefined) => {
+      if (!modifierKeys.has(key ?? '')) {
+        controller.setInputModality('keyboard');
+      }
+    },
+    [controller],
+  );
+  const keyDown = React.useCallback<NonNullable<IViewProps['onKeyDown']>>(
+    (event) => {
+      trackKeyboard(event.nativeEvent.key);
+      onKeyDown?.(event);
+    },
+    [onKeyDown, trackKeyboard],
+  );
+  const keyDownCapture = React.useCallback<NonNullable<IViewProps['onKeyDownCapture']>>(
+    (event) => {
+      trackKeyboard(event.nativeEvent.key);
+      onKeyDownCapture?.(event);
+    },
+    [onKeyDownCapture, trackKeyboard],
+  );
+  const keyUpCapture = React.useCallback<NonNullable<IViewProps['onKeyUpCapture']>>(
+    (event) => {
+      trackKeyboard(event.nativeEvent.key);
+      onKeyUpCapture?.(event);
+    },
+    [onKeyUpCapture, trackKeyboard],
+  );
+  const pointerDownCapture = React.useCallback<NonNullable<IViewProps['onPointerDownCapture']>>(
+    (event) => {
+      controller.setInputModality('pointer');
+      onPointerDownCapture?.(event);
+    },
+    [controller, onPointerDownCapture],
+  );
+  const startShouldSetResponderCapture = React.useCallback<NonNullable<IViewProps['onStartShouldSetResponderCapture']>>(
+    (event) => {
+      controller.setInputModality('pointer');
+      return onStartShouldSetResponderCapture?.(event) ?? false;
+    },
+    [controller, onStartShouldSetResponderCapture],
+  );
+
+  return enabled
+    ? {
+        ...(Platform.OS !== 'ios' && Platform.OS !== 'android'
+          ? {
+              onKeyDown: keyDown,
+              onKeyDownCapture: keyDownCapture,
+              onKeyUpCapture: keyUpCapture,
+            }
+          : {}),
+        onPointerDownCapture: pointerDownCapture,
+        onStartShouldSetResponderCapture: startShouldSetResponderCapture,
+      }
+    : {};
+}
diff --git a/packages/agentic/storybook-desktop-runtime/src/Win32CalloutPortal.tsx b/packages/agentic/storybook-desktop-runtime/src/Win32CalloutPortal.tsx
index 75c007477f..1d1e36b211 100644
--- a/packages/agentic/storybook-desktop-runtime/src/Win32CalloutPortal.tsx
+++ b/packages/agentic/storybook-desktop-runtime/src/Win32CalloutPortal.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { Callout } from '@fluentui-react-native/callout';
 import type { CalloutProps, DirectionalHint } from '@fluentui-react-native/callout';
+import { RootInputBoundary } from '@fluentui-react-native/design';
 import { useTheme } from '@storybook/react-native-theming';
 
 type Win32CalloutPortalProps = React.PropsWithChildren<{
@@ -55,13 +56,13 @@ export function Win32CalloutPortal({
       target={target}
       testID={testID}
     >
-      <View
+      <RootInputBoundary
         collapsable={false}
         style={[styles.content, { backgroundColor: theme.background.content, height, width }]}
         testID={`${testID}-content`}
       >
         {children}
-      </View>
+      </RootInputBoundary>
     </Callout>
   );
 }
diff --git a/packages/agentic/storybook-desktop/README.md b/packages/agentic/storybook-desktop/README.md
index 7442d85b3f..3f44922264 100644
--- a/packages/agentic/storybook-desktop/README.md
+++ b/packages/agentic/storybook-desktop/README.md
@@ -95,6 +95,13 @@ Storybook identity in `app.json`.
 
 ## CLI and API
 
+For a focused authored-test lane within the owned smoke lifecycle, set
+`STORYBOOK_SMOKE_STORY` and `STORYBOOK_SMOKE_TAG` before running
+`storybook smoke --<platform> --mode stories-and-tests`. Defaults remain
+`components-*--default` and `desktop-e2e`. An explicit selector that matches no
+tests fails instead of reporting a false pass. This retains normal native
+lease/readiness and process cleanup; it does not change input capability policy.
+
 The `storybook-desktop` binary loads `storybook.config.ts`, `.mts`, `.js`, `.mjs`, or `.cjs` from the current package.
 Use `.mts` when the consuming package otherwise defaults JavaScript files to CommonJS. Select a target with a short
 platform option, or omit it to use `FURN_STORYBOOK_PLATFORM` and then the host default:
diff --git a/packages/agentic/storybook-desktop/src/cli/smokeTests.test.ts b/packages/agentic/storybook-desktop/src/cli/smokeTests.test.ts
index b6ac58f0fc..9d42085c05 100644
--- a/packages/agentic/storybook-desktop/src/cli/smokeTests.test.ts
+++ b/packages/agentic/storybook-desktop/src/cli/smokeTests.test.ts
@@ -41,6 +41,50 @@ const passedResult: DesktopStoryRunResult = {
 };
 
 describe('runDesktopStorybookSmokeTests', () => {
+  test('selects focused authored tests without bypassing the owned attach lifecycle', async () => {
+    const runStoryTests = jest.fn(async () => passedResult);
+    const deleteSession = jest.fn(async () => undefined);
+    await runDesktopStorybookSmokeTests(
+      {
+        // eslint-disable-next-line @microsoft/sdl/no-insecure-url -- test-only loopback service
+        driverUrl: 'http://127.0.0.1:4444',
+        platform: 'win32',
+        projectRoot: 'C:\\repo\\storybook',
+        targetId: 'storybook-win32',
+        storyPattern: 'components-*--focus-management',
+        testTag: 'desktop-focus',
+      },
+      async () => ({ delete: deleteSession, runStoryTests }),
+    );
+    expect(runStoryTests).toHaveBeenCalledWith(
+      expect.objectContaining({
+        selection: { story: 'components-*--focus-management', tag: 'desktop-focus' },
+      }),
+    );
+    expect(deleteSession).toHaveBeenCalledTimes(1);
+  });
+
+  test('fails empty focused selections after closing the session', async () => {
+    const deleteSession = jest.fn(async () => undefined);
+    await expect(
+      runDesktopStorybookSmokeTests(
+        {
+          // eslint-disable-next-line @microsoft/sdl/no-insecure-url -- test-only loopback service
+          driverUrl: 'http://127.0.0.1:4444',
+          platform: 'windows',
+          projectRoot: 'C:\\repo\\storybook',
+          targetId: 'storybook-windows',
+          testTag: 'desktop-focus',
+        },
+        async () => ({
+          delete: deleteSession,
+          runStoryTests: async () => ({ ...passedResult, tests: [] }),
+        }),
+      ),
+    ).rejects.toThrow('No desktop story tests matched');
+    expect(deleteSession).toHaveBeenCalledTimes(1);
+  });
+
   test('runs desktop-e2e plans under the platform artifact root and closes the session', async () => {
     const runStoryTests = jest.fn(async () => passedResult);
     const deleteSession = jest.fn(async () => undefined);
diff --git a/packages/agentic/storybook-desktop/src/cli/smokeTests.ts b/packages/agentic/storybook-desktop/src/cli/smokeTests.ts
index 34fb63ad5a..8a2a9721f8 100644
--- a/packages/agentic/storybook-desktop/src/cli/smokeTests.ts
+++ b/packages/agentic/storybook-desktop/src/cli/smokeTests.ts
@@ -16,12 +16,19 @@ export type DesktopStorybookSmokeTestOptions = {
   platform: Platforms;
   projectRoot: string;
   targetId: string;
+  storyPattern?: string;
+  testTag?: string;
 };
 
 export async function runDesktopStorybookSmokeTests(
   options: DesktopStorybookSmokeTestOptions,
   connect: DesktopStorybookSmokeConnector = connectDesktopWebdriver,
 ): Promise<DesktopStoryRunResult> {
+  const storyPattern = options.storyPattern ?? process.env.STORYBOOK_SMOKE_STORY ?? 'components-*--default';
+  const testTag = options.testTag ?? process.env.STORYBOOK_SMOKE_TAG ?? 'desktop-e2e';
+  if (!storyPattern.trim() || !testTag.trim()) {
+    throw new Error('Storybook smoke story and tag selectors must not be empty.');
+  }
   const desktop = await connect({
     launchMode: 'attach',
     platformName: options.platform === 'macos' ? 'macos' : 'windows',
@@ -35,8 +42,8 @@ export async function runDesktopStorybookSmokeTests(
     result = await desktop.runStoryTests({
       artifactsRoot: options.artifactsRoot ?? path.join(options.projectRoot, 'artifacts', options.platform, 'desktop-driver'),
       selection: {
-        story: 'components-*--default',
-        tag: 'desktop-e2e',
+        story: storyPattern,
+        tag: testTag,
       },
     });
   } catch (error) {
@@ -58,6 +65,12 @@ export async function runDesktopStorybookSmokeTests(
   if (!result) {
     throw new Error('Desktop story tests completed without a result.');
   }
+  if (
+    result.tests.length === 0 &&
+    (options.storyPattern || options.testTag || process.env.STORYBOOK_SMOKE_STORY || process.env.STORYBOOK_SMOKE_TAG)
+  ) {
+    throw new Error(`No desktop story tests matched "${storyPattern}" with tag "${testTag}".`);
+  }
   if (result.status !== 'passed') {
     const failedTests = result.tests.filter(({ status }) => status !== 'passed' && status !== 'skipped');
     throw new Error(
diff --git a/packages/framework-base/src/component-patterns/README.md b/packages/framework-base/src/component-patterns/README.md
index 0460422d48..127db2d0a0 100644
--- a/packages/framework-base/src/component-patterns/README.md
+++ b/packages/framework-base/src/component-patterns/README.md
@@ -25,6 +25,14 @@ JSX rather than the classic runtime when a slot needs a ref.
 
 ## Choosing a pattern
 
+Focus-aware components can use `useFocusTarget` or `useFocusablePressable`
+from the first phase. Preserve their `focusTargetRef` separately from the
+consumer ref, then compose it through the native slot in the render phase.
+The public `FocusTarget` reports requested versus confirmed focus and cancels
+requests on detach/disable; do not infer focus from calling a native method.
+See the [desktop focus authoring guide](../../../../.github/skills/agentic-component-authoring/references/focus.md)
+for target lifetime, platform activation, and renderer boundaries.
+
 | Need                                              | Pattern                                        |
 | ------------------------------------------------- | ---------------------------------------------- |
 | Pure prop or element transformation with no hooks | `directComponent`                              |
diff --git a/packages/framework-base/src/hooks/focusTarget.test.ts b/packages/framework-base/src/hooks/focusTarget.test.ts
new file mode 100644
index 0000000000..9927cbad85
--- /dev/null
+++ b/packages/framework-base/src/hooks/focusTarget.test.ts
@@ -0,0 +1,123 @@
+import { createFocusTarget, isSelfTargetEvent } from './focusTarget';
+
+describe('focus target controller', () => {
+  it('distinguishes requests from observed native focus', () => {
+    const target = createFocusTarget();
+    const focus = jest.fn();
+    target.attach({ focus });
+    const request = target.requestFocus('keyboard');
+    expect(focus).toHaveBeenCalledTimes(1);
+    expect(request.status).toBe('requested');
+    expect(target.getSnapshot().focused).toBe(false);
+
+    target.onFocus();
+    expect(request.status).toBe('confirmed');
+    expect(target.getSnapshot()).toEqual({ focused: true, intent: 'keyboard' });
+    expect(target.requestFocus().status).toBe('confirmed');
+    expect(focus).toHaveBeenCalledTimes(1);
+    target.onBlur();
+    expect(target.getSnapshot().focused).toBe(false);
+  });
+
+  it('reports unavailable targets explicitly', () => {
+    const target = createFocusTarget();
+    expect(target.requestFocus().status).toBe('not-mounted');
+    target.attach({});
+    expect(target.requestFocus().status).toBe('unsupported');
+    target.setFocusable(false);
+    expect(target.requestFocus().status).toBe('not-focusable');
+  });
+
+  it('cancels superseded, detached, disabled, and explicitly cancelled requests', () => {
+    const target = createFocusTarget();
+    const detach = target.attach({ focus: jest.fn() });
+    const first = target.requestFocus('keyboard');
+    const second = target.requestFocus('pointer');
+    expect(first.status).toBe('cancelled');
+    second.cancel();
+    expect(second.status).toBe('cancelled');
+    const third = target.requestFocus();
+    target.setFocusable(false);
+    expect(third.status).toBe('cancelled');
+    target.setFocusable(true);
+    const fourth = target.requestFocus();
+    detach();
+    expect(fourth.status).toBe('cancelled');
+    target.onFocus();
+    expect(target.getSnapshot().focused).toBe(false);
+  });
+
+  it('ignores stale cleanup and preserves the newer registration', () => {
+    const target = createFocusTarget();
+    const oldDetach = target.attach({ focus: jest.fn() });
+    const newer = { focus: jest.fn() };
+    const detach = target.attach(newer);
+    const generation = target.generation;
+    oldDetach();
+    expect(target.current).toBe(newer);
+    expect(target.generation).toBe(generation);
+    target.requestFocus();
+    expect(newer.focus).toHaveBeenCalledTimes(1);
+    detach();
+    detach();
+    expect(target.current).toBeNull();
+  });
+
+  it('clears observed focus on disable and does not resurrect it on enable', () => {
+    const target = createFocusTarget();
+    target.attach({ focus: jest.fn() });
+    target.onFocus();
+    target.setFocusable(false);
+    target.setFocusable(true);
+    expect(target.getSnapshot().focused).toBe(false);
+  });
+
+  it('preserves native focus during a same-commit callback-ref handoff', async () => {
+    const target = createFocusTarget();
+    const instance = { focus: jest.fn() };
+    const detach = target.attach(instance);
+    target.onFocus();
+    detach();
+    const finalDetach = target.attach(instance);
+    expect(target.getSnapshot().focused).toBe(true);
+    finalDetach();
+    await Promise.resolve();
+    target.attach(instance);
+    expect(target.getSnapshot().focused).toBe(false);
+  });
+
+  it('keeps snapshots stable and cleans subscriptions', () => {
+    const target = createFocusTarget();
+    target.attach({ focus: jest.fn() });
+    const notify = jest.fn();
+    const unsubscribe = target.subscribe(notify);
+    const before = target.getSnapshot();
+    target.onBlur();
+    expect(target.getSnapshot()).toBe(before);
+    target.onFocus();
+    expect(notify).toHaveBeenCalledTimes(1);
+    unsubscribe();
+    unsubscribe();
+    target.onBlur();
+    expect(notify).toHaveBeenCalledTimes(1);
+  });
+
+  it('surfaces a native focus error without leaving a live request', () => {
+    const target = createFocusTarget();
+    target.attach({
+      focus: () => {
+        throw new Error('native failure');
+      },
+    });
+    expect(() => target.requestFocus()).toThrow('native failure');
+    target.onFocus();
+    expect(target.getSnapshot().intent).toBeUndefined();
+  });
+
+  it('distinguishes self-focus from a bubbled descendant event', () => {
+    expect(isSelfTargetEvent({ target: 1, currentTarget: 1 })).toBe(true);
+    expect(isSelfTargetEvent({ target: 2, currentTarget: 1 })).toBe(false);
+    expect(isSelfTargetEvent({ nativeEvent: { target: 2 }, currentTarget: 1 })).toBe(false);
+    expect(isSelfTargetEvent({})).toBe(true);
+  });
+});
diff --git a/packages/framework-base/src/hooks/focusTarget.ts b/packages/framework-base/src/hooks/focusTarget.ts
new file mode 100644
index 0000000000..ad84af2916
--- /dev/null
+++ b/packages/framework-base/src/hooks/focusTarget.ts
@@ -0,0 +1,163 @@
+export type FocusIntent = 'keyboard' | 'pointer' | 'programmatic' | 'restore' | 'accessibility';
+export type FocusRequestStatus = 'requested' | 'confirmed' | 'cancelled' | 'not-mounted' | 'not-focusable' | 'unsupported';
+
+export interface FocusRequest {
+  readonly status: FocusRequestStatus;
+  cancel(): void;
+}
+
+export interface FocusTargetSnapshot {
+  readonly focused: boolean;
+  readonly intent?: FocusIntent;
+}
+
+export interface FocusTarget {
+  readonly current: object | null;
+  readonly generation: number;
+  getSnapshot(): FocusTargetSnapshot;
+  subscribe(listener: () => void): () => void;
+  requestFocus(intent?: FocusIntent): FocusRequest;
+}
+
+export interface FocusTargetController extends FocusTarget {
+  attach(instance: object): () => void;
+  setFocusable(focusable: boolean): void;
+  onFocus(): void;
+  onBlur(): void;
+}
+
+/**
+ * A focus request is only confirmed by an observed focus event, not by a void
+ * native focus() return. Attachment generations invalidate stale cleanup.
+ */
+export function createFocusTarget(): FocusTargetController {
+  let current: object | null = null;
+  let generation = 0;
+  let focusable = true;
+  let snapshot: FocusTargetSnapshot = Object.freeze({ focused: false });
+  let detached: { instance: object; snapshot: FocusTargetSnapshot } | undefined;
+  let pending: { status: FocusRequestStatus; intent: FocusIntent } | undefined;
+  const listeners = new Set<() => void>();
+  const publish = (focused: boolean, intent?: FocusIntent) => {
+    if (snapshot.focused !== focused || snapshot.intent !== intent) {
+      snapshot = Object.freeze({ focused, intent });
+      Array.from(listeners).forEach((listener) => listener());
+    }
+  };
+  const cancelPending = () => {
+    if (pending) {
+      pending.status = 'cancelled';
+      pending = undefined;
+    }
+  };
+
+  return {
+    get current() {
+      return current;
+    },
+    get generation() {
+      return generation;
+    },
+    getSnapshot: () => snapshot,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    attach: (instance) => {
+      cancelPending();
+      const previous = detached?.instance === instance ? detached.snapshot : undefined;
+      detached = undefined;
+      current = instance;
+      const attachment = ++generation;
+      publish(focusable && (previous?.focused ?? false), previous?.intent);
+      return () => {
+        if (generation === attachment) {
+          const handoff = { instance, snapshot };
+          detached = handoff;
+          // A callback-ref replacement reattaches the same native instance in
+          // this commit. Preserve its observed focus, but not a later remount.
+          queueMicrotask(() => {
+            if (detached === handoff) {
+              detached = undefined;
+            }
+          });
+          ++generation;
+          current = null;
+          cancelPending();
+          publish(false);
+        }
+      };
+    },
+    setFocusable: (next) => {
+      focusable = next;
+      if (!next) {
+        detached = undefined;
+        cancelPending();
+        publish(false);
+      }
+    },
+    onFocus: () => {
+      if (current && focusable) {
+        const intent = pending?.intent;
+        if (pending) {
+          pending.status = 'confirmed';
+          pending = undefined;
+        }
+        publish(true, intent);
+      }
+    },
+    onBlur: () => {
+      detached = undefined;
+      cancelPending();
+      publish(false);
+    },
+    requestFocus: (intent = 'programmatic') => {
+      cancelPending();
+      const request: { status: FocusRequestStatus; intent: FocusIntent } = {
+        status: !current
+          ? 'not-mounted'
+          : !focusable
+            ? 'not-focusable'
+            : !('focus' in current) || typeof current.focus !== 'function'
+              ? 'unsupported'
+              : snapshot.focused
+                ? 'confirmed'
+                : 'requested',
+        intent,
+      };
+      const result: FocusRequest = {
+        get status() {
+          return request.status;
+        },
+        cancel: () => {
+          if (pending === request) {
+            cancelPending();
+          }
+        },
+      };
+      if (request.status === 'requested' && current && 'focus' in current && typeof current.focus === 'function') {
+        pending = request;
+        try {
+          current.focus();
+        } catch (error) {
+          cancelPending();
+          throw error;
+        }
+      }
+      return result;
+    },
+  };
+}
+
+export interface FocusTargetEvent {
+  readonly target?: unknown;
+  readonly currentTarget?: unknown;
+  readonly nativeEvent?: { readonly target?: unknown };
+}
+
+export function isSelfTargetEvent(event: FocusTargetEvent): boolean {
+  const target = event.target ?? event.nativeEvent?.target;
+  return event.currentTarget == null || target == null || target === event.currentTarget;
+}
diff --git a/packages/framework-base/src/hooks/useFocusTarget.ts b/packages/framework-base/src/hooks/useFocusTarget.ts
new file mode 100644
index 0000000000..42c7d5e995
--- /dev/null
+++ b/packages/framework-base/src/hooks/useFocusTarget.ts
@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+import { createFocusTarget, isSelfTargetEvent } from './focusTarget';
+import type { FocusTarget, FocusTargetEvent } from './focusTarget';
+
+export interface FocusTargetBinding {
+  focusTarget: FocusTarget;
+  focusTargetRef: React.RefCallback<object>;
+}
+
+export interface UseFocusTargetResult extends FocusTargetBinding {
+  focused: boolean;
+  onFocus(event: FocusTargetEvent): void;
+  onBlur(event: FocusTargetEvent): void;
+}
+
+export function useFocusTarget(focusable = true): UseFocusTargetResult {
+  const [controller] = React.useState(createFocusTarget);
+  const detach = React.useRef<(() => void) | undefined>(undefined);
+  const snapshot = React.useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+  const focusTargetRef = React.useCallback<React.RefCallback<object>>(
+    (instance) => {
+      detach.current?.();
+      detach.current = undefined;
+      if (instance) {
+        const cleanup = controller.attach(instance);
+        detach.current = cleanup;
+        if (Number.parseInt(React.version, 10) >= 19) {
+          return cleanup;
+        }
+      }
+      return undefined;
+    },
+    [controller],
+  );
+
+  React.useLayoutEffect(() => {
+    controller.setFocusable(focusable);
+  }, [controller, focusable]);
+
+  const onFocus = React.useCallback(
+    (event: FocusTargetEvent) => {
+      if (isSelfTargetEvent(event)) {
+        controller.onFocus();
+      }
+    },
+    [controller],
+  );
+  const onBlur = React.useCallback(
+    (event: FocusTargetEvent) => {
+      if (isSelfTargetEvent(event)) {
+        controller.onBlur();
+      }
+    },
+    [controller],
+  );
+
+  return { focusTarget: controller, focusTargetRef, focused: focusable && snapshot.focused, onFocus, onBlur };
+}
diff --git a/packages/framework-base/src/hooks/useFocusablePressable.test.tsx b/packages/framework-base/src/hooks/useFocusablePressable.test.tsx
new file mode 100644
index 0000000000..913a379633
--- /dev/null
+++ b/packages/framework-base/src/hooks/useFocusablePressable.test.tsx
@@ -0,0 +1,159 @@
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import type { ReactTestRenderer } from 'react-test-renderer';
+
+import { useSlot } from '../component-patterns/useSlot';
+import type { PropsWithRefOf } from '../types/props.types';
+import { useFocusablePressable } from './useFocusablePressable';
+import type { FocusablePressableProps, FocusKeyboardEvent } from './useFocusablePressable';
+import type { FocusTargetBinding } from './useFocusTarget';
+
+function keyboardEvent(key: string, extras: Partial<FocusKeyboardEvent['nativeEvent']> = {}) {
+  return {
+    nativeEvent: { key, code: key === ' ' ? 'Space' : key, ...extras },
+    target: 1,
+    currentTarget: 1,
+    defaultPrevented: false,
+    preventDefault() {
+      this.defaultPrevented = true;
+    },
+    stopPropagation: jest.fn(),
+  };
+}
+
+function hasFocus(instance: object | null): instance is { focus(): void } {
+  return instance !== null && 'focus' in instance && typeof instance.focus === 'function';
+}
+
+describe('focusable pressable', () => {
+  let tree: ReactTestRenderer | undefined;
+  afterEach(() => {
+    act(() => tree?.unmount());
+    jest.restoreAllMocks();
+  });
+
+  function render(props: FocusablePressableProps = {}, userRef?: React.Ref<React.ComponentRef<typeof View>>) {
+    const instance = { focus: jest.fn() };
+    const bindings: FocusTargetBinding[] = [];
+    function Probe({ input }: { input: FocusablePressableProps }) {
+      const [native, state, binding] = useFocusablePressable(input);
+      bindings.push(binding);
+      const rootProps: PropsWithRefOf<typeof View> = { ...native, children: null, style: undefined, ref: userRef };
+      const Root = useSlot(View, rootProps);
+      return <Root ref={binding.focusTargetRef} testID={state.focused ? 'focused' : 'blurred'} />;
+    }
+    act(() => {
+      tree = create(<Probe input={props} />, { createNodeMock: () => instance });
+    });
+    return {
+      instance,
+      bindings,
+      props: () => tree!.root.findByType(View).props,
+      update: (next: FocusablePressableProps) => act(() => tree!.update(<Probe input={next} />)),
+    };
+  }
+
+  it.each(['windows', 'win32', 'macos'])('uses the %s pointer-focus policy and accepts responder children', (platform) => {
+    jest.replaceProperty(Platform, 'OS', platform as typeof Platform.OS);
+    const calls: string[] = [];
+    const subject = render({ onPress: () => calls.push('press') });
+    const instance = subject.bindings[0].focusTarget.current;
+    if (!hasFocus(instance)) {
+      throw new Error('Expected a mounted focusable native mock.');
+    }
+    jest.spyOn(instance, 'focus').mockImplementation(() => {
+      calls.push('focus');
+    });
+    act(() => subject.props().onPress({ target: 2, currentTarget: 1, nativeEvent: { target: 2 } }));
+    expect(calls).toEqual(platform === 'macos' ? ['press'] : ['focus', 'press']);
+  });
+
+  it('preserves callback refs and ignores descendant focus while forwarding handlers', () => {
+    const cleanup = jest.fn();
+    const ref = jest.fn(() => cleanup);
+    const onFocus = jest.fn();
+    const subject = render({ onFocus }, ref);
+    act(() => subject.props().onFocus({ target: 2, currentTarget: 1 }));
+    expect(subject.props().testID).toBe('blurred');
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    act(() => subject.props().onFocus({ target: 1, currentTarget: 1 }));
+    expect(subject.props().testID).toBe('focused');
+    subject.update({ onFocus });
+    expect(ref).toHaveBeenCalledTimes(1);
+    act(() => tree!.unmount());
+    expect(cleanup).toHaveBeenCalledTimes(1);
+    expect(subject.bindings[0].focusTarget.current).toBeNull();
+  });
+
+  it('clears focus on disable and honors nonfocusable targets without activating disabled controls', () => {
+    const press = jest.fn();
+    const subject = render({ onPress: press });
+    act(() => subject.props().onFocus({ target: 1, currentTarget: 1 }));
+    subject.update({ disabled: true, focusable: true, onPress: press });
+    expect(subject.props().testID).toBe('blurred');
+    expect(subject.props().focusable).toBe(false);
+    act(() => subject.props().onPress({ nativeEvent: {} }));
+    expect(press).not.toHaveBeenCalled();
+    subject.update({ onPress: press });
+    expect(subject.props().testID).toBe('blurred');
+  });
+
+  it('guards repeats, chords, descendant activation, and unmatched key-up without synthesizing presses', () => {
+    jest.replaceProperty(Platform, 'OS', 'windows');
+    const onPress = jest.fn();
+    const subject = render({ onPress });
+    const first = keyboardEvent('Enter');
+    act(() => subject.props().onKeyDown(first));
+    expect(first.defaultPrevented).toBe(false);
+    const repeat = keyboardEvent('Enter');
+    act(() => subject.props().onKeyDown(repeat));
+    expect(repeat.defaultPrevented).toBe(true);
+    const up = keyboardEvent('Enter');
+    act(() => subject.props().onKeyUp(up));
+    expect(up.defaultPrevented).toBe(false);
+    const unmatched = keyboardEvent('Enter');
+    act(() => subject.props().onKeyUp(unmatched));
+    expect(unmatched.defaultPrevented).toBe(true);
+    const chord = keyboardEvent('Enter', { ctrlKey: true });
+    act(() => subject.props().onKeyDown(chord));
+    expect(chord.defaultPrevented).toBe(true);
+    const child = { ...keyboardEvent('Enter'), target: 2 };
+    act(() => subject.props().onKeyDown(child));
+    expect(child.defaultPrevented).toBe(true);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('cancels keyboard pairing on blur and preserves original callbacks', () => {
+    const down = jest.fn();
+    const up = jest.fn();
+    const blur = jest.fn();
+    const subject = render({ onKeyDown: down, onKeyUp: up, onBlur: blur });
+    act(() => subject.props().onKeyDown(keyboardEvent(' ')));
+    act(() => subject.props().onBlur({ target: 1, currentTarget: 1 }));
+    const event = keyboardEvent(' ');
+    act(() => subject.props().onKeyUp(event));
+    expect(event.defaultPrevented).toBe(true);
+    expect(down).toHaveBeenCalledTimes(1);
+    expect(up).toHaveBeenCalledTimes(1);
+    expect(blur).toHaveBeenCalledTimes(1);
+  });
+
+  it('activates paired Win32 keys with an unidentified code, but leaves recognized codes to native', () => {
+    jest.replaceProperty(Platform, 'OS', 'win32' as typeof Platform.OS);
+    const onPress = jest.fn();
+    const subject = render({ onPress });
+    act(() => subject.props().onKeyDown(keyboardEvent('Enter', { code: 'Unidentified' })));
+    const keyUp = keyboardEvent('Enter', { code: 'Unidentified' });
+    act(() => subject.props().onKeyUp(keyUp));
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onPress).toHaveBeenCalledWith(keyUp);
+    expect(keyUp.defaultPrevented).toBe(true);
+    act(() => subject.props().onKeyUp(keyboardEvent('Enter', { code: 'Unidentified' })));
+    expect(onPress).toHaveBeenCalledTimes(1);
+    act(() => subject.props().onKeyDown(keyboardEvent('Enter')));
+    act(() => subject.props().onKeyUp(keyboardEvent('Enter')));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/framework-base/src/hooks/useFocusablePressable.ts b/packages/framework-base/src/hooks/useFocusablePressable.ts
new file mode 100644
index 0000000000..f236d653fb
--- /dev/null
+++ b/packages/framework-base/src/hooks/useFocusablePressable.ts
@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { Platform } from 'react-native';
+import type { PressableProps } from 'react-native';
+
+import { isSelfTargetEvent } from './focusTarget';
+import type { FocusTargetEvent } from './focusTarget';
+import { useFocusTarget } from './useFocusTarget';
+import type { FocusTargetBinding } from './useFocusTarget';
+import { usePressableState } from './usePressableState';
+import type { PressableState } from '../types/interactive.types';
+
+export interface FocusKeyboardEvent extends FocusTargetEvent {
+  readonly nativeEvent: {
+    readonly target?: unknown;
+    readonly key?: string;
+    readonly code?: string;
+    readonly altKey?: boolean;
+    readonly ctrlKey?: boolean;
+    readonly metaKey?: boolean;
+    readonly shiftKey?: boolean;
+  };
+  readonly defaultPrevented?: boolean;
+  preventDefault?(): void;
+  stopPropagation?(): void;
+}
+
+export type FocusablePressableProps = Omit<PressableProps, 'onKeyDown' | 'onKeyUp'> & {
+  onKeyDown?: (event: FocusKeyboardEvent) => void;
+  onKeyUp?: (event: FocusKeyboardEvent) => void;
+};
+
+const interactionKeys = ['pressed', 'hovered'] as const;
+
+function activationKey(event: FocusKeyboardEvent): string | undefined {
+  const { key, code } = event.nativeEvent;
+  if (code === 'Enter' || key === 'Enter') {
+    return 'Enter';
+  }
+  if (code === 'Space' || key === ' ' || key === 'Space' || key === 'Spacebar') {
+    return 'Space';
+  }
+  if (code === 'GamepadA') {
+    return 'GamepadA';
+  }
+  return undefined;
+}
+
+/**
+ * Shares native Pressability's activation path rather than synthesizing presses.
+ * The returned internal ref must be composed onto the actual pressable slot.
+ */
+export function useFocusablePressable(
+  props: FocusablePressableProps,
+  { focusOnPress = true }: { focusOnPress?: boolean } = {},
+): [FocusablePressableProps, PressableState, FocusTargetBinding] {
+  const platform: string = Platform.OS;
+  const { disabled = false, focusable = true, onFocus, onBlur, onPress, onKeyDown, onKeyUp } = props;
+  const target = useFocusTarget(!disabled && focusable);
+  const { focusTarget, focusTargetRef } = target;
+  const keyDown = React.useRef<string | undefined>(undefined);
+  const keyGeneration = React.useRef<number | undefined>(undefined);
+  const [interactionProps, interactionState] = usePressableState(props, interactionKeys);
+
+  React.useLayoutEffect(() => {
+    if (disabled || !focusable) {
+      keyDown.current = undefined;
+      keyGeneration.current = undefined;
+    }
+  }, [disabled, focusable]);
+
+  const handlePress = (event: Parameters<NonNullable<PressableProps['onPress']>>[0]) => {
+    // Pressability has already chosen the responder. Pointer targets may be
+    // noninteractive text/icon descendants of this pressable.
+    if (disabled) {
+      return;
+    }
+    const native = event.nativeEvent;
+    const keyboard = native != null && ('key' in native || 'code' in native);
+    if (focusOnPress && focusable && !keyboard && (platform === 'windows' || platform === 'win32')) {
+      const request = focusTarget.requestFocus('pointer');
+      if (request.status !== 'requested' && request.status !== 'confirmed') {
+        console.warn(`Cannot focus the pressable target: ${request.status}.`);
+      }
+    }
+    onPress?.(event);
+  };
+  const focusProps = {
+    onFocus: (event: Parameters<NonNullable<PressableProps['onFocus']>>[0]) => {
+      target.onFocus(event);
+      onFocus?.(event);
+    },
+    onBlur: (event: Parameters<NonNullable<PressableProps['onBlur']>>[0]) => {
+      if (isSelfTargetEvent(event)) {
+        keyDown.current = undefined;
+        keyGeneration.current = undefined;
+      }
+      target.onBlur(event);
+      onBlur?.(event);
+    },
+    onKeyDown: (event: FocusKeyboardEvent) => {
+      onKeyDown?.(event);
+      const key = activationKey(event);
+      const native = event.nativeEvent;
+      const modifiers = native.altKey || native.metaKey || (platform !== 'win32' && (native.ctrlKey || native.shiftKey));
+      if (key) {
+        if (
+          disabled ||
+          !focusable ||
+          modifiers ||
+          !isSelfTargetEvent(event) ||
+          (keyDown.current === key && keyGeneration.current === focusTarget.generation)
+        ) {
+          event.preventDefault?.();
+          return;
+        }
+        keyDown.current = event.defaultPrevented ? undefined : key;
+        keyGeneration.current = focusTarget.generation;
+        event.stopPropagation?.();
+      } else {
+        keyDown.current = undefined;
+        keyGeneration.current = undefined;
+      }
+    },
+    onKeyUp: (event: FocusKeyboardEvent) => {
+      onKeyUp?.(event);
+      const key = activationKey(event);
+      const paired = keyDown.current === key && keyGeneration.current === focusTarget.generation;
+      keyDown.current = undefined;
+      keyGeneration.current = undefined;
+      if (key) {
+        if (disabled || !focusable || !isSelfTargetEvent(event) || !paired) {
+          event.preventDefault?.();
+          return;
+        }
+        event.stopPropagation?.();
+        if (platform === 'win32' && !event.defaultPrevented && !['Enter', 'Space', 'GamepadA'].includes(event.nativeEvent.code ?? '')) {
+          // Office Win32 can report code="Unidentified". Its Pressability only
+          // recognizes code, unlike V1's key-based activation. Keep one paired
+          // fallback, passing the native key event just as Pressability does.
+          event.preventDefault?.();
+          handlePress(event as Parameters<NonNullable<PressableProps['onPress']>>[0]);
+        }
+      }
+    },
+    onPress: handlePress,
+  };
+
+  return [
+    { ...interactionProps, ...focusProps, focusable: !disabled && focusable },
+    { ...interactionState, focused: target.focused },
+    { focusTarget, focusTargetRef },
+  ];
+}
diff --git a/packages/framework-base/src/index.ts b/packages/framework-base/src/index.ts
index 30eba2cb79..7b1aa03246 100644
--- a/packages/framework-base/src/index.ts
+++ b/packages/framework-base/src/index.ts
@@ -51,6 +51,12 @@ export { withSlots } from './component-patterns/withSlots';
  */
 export { usePressableState } from './hooks/usePressableState';
 export type { UsePressableResult } from './hooks/usePressableState';
+export { useFocusTarget } from './hooks/useFocusTarget';
+export type { FocusTargetBinding, UseFocusTargetResult } from './hooks/useFocusTarget';
+export type { FocusTarget, FocusTargetSnapshot, FocusRequest, FocusRequestStatus, FocusIntent } from './hooks/focusTarget';
+export { isSelfTargetEvent } from './hooks/focusTarget';
+export { useFocusablePressable } from './hooks/useFocusablePressable';
+export type { FocusablePressableProps, FocusKeyboardEvent } from './hooks/useFocusablePressable';
 export { useFocusVisible } from './hooks/useFocusVisible';
 export type { FocusVisibleKeyEvent, FocusVisiblePressableProps, UseFocusVisibleResult } from './hooks/useFocusVisible';
 export { useReducedMotion } from './hooks/useReducedMotion';

From cdce92c39e48030cbd7366ef167d2e44d9b538e4 Mon Sep 17 00:00:00 2001
From: Jason Morse <jasonmo@microsoft.com>
Date: Tue, 15 Sep 2026 08:36:56 -0700
Subject: [PATCH 08/11] switch tests to wdio pattern

---
 .changeset/wdio-focus-contracts.md            |   6 +
 .../references/focus-windows.md               |  12 ++
 .../references/tests-and-stories.md           |  26 ++-
 apps/storybook/AGENTS.md                      |   4 +-
 apps/storybook/README.md                      |  12 +-
 packages/agentic/components/AGENTS.md         |  12 +-
 .../agentic/components/WIN32-FOCUS-PLAN.md    |  43 ++--
 .../src/common/desktopFocus.wdio.ts           |  30 +++
 .../components/src/components/AGENTS.md       |   6 +-
 .../src/components/button/button.stories.tsx  | 191 +++++++++++++++---
 .../src/components/button/spec/interaction.md |  12 +-
 .../components/checkbox/checkbox.stories.tsx  |  44 ++--
 .../src/components/input/input.stories.tsx    |  69 +++++--
 .../src/components/input/spec/interaction.md  |  10 +
 .../src/components/switch/spec/interaction.md |   6 +
 .../src/components/switch/switch.stories.tsx  |  46 ++---
 .../components/tablist/spec/interaction.md    |   9 +
 .../components/tablist/tablist.stories.tsx    | 115 ++++++++---
 .../focus-zone/focus-zone.stories.tsx         |  68 +++----
 packages/agentic/components/tsconfig.json     |   2 +-
 .../agentic/components/tsconfig.stories.json  |  11 +-
 packages/agentic/storybook-desktop/README.md  |  15 +-
 .../storybook-desktop/config/smoke-win32.ps1  |   2 +-
 .../driver/representativePlans.contract.cjs   |  49 +++--
 .../src/driver/representativePlans.test.ts    |  35 ++--
 .../src/testing/runWdioTests.ts               |   3 +-
 26 files changed, 581 insertions(+), 257 deletions(-)
 create mode 100644 .changeset/wdio-focus-contracts.md
 create mode 100644 packages/agentic/components/src/common/desktopFocus.wdio.ts

diff --git a/.changeset/wdio-focus-contracts.md b/.changeset/wdio-focus-contracts.md
new file mode 100644
index 0000000000..3f6684d491
--- /dev/null
+++ b/.changeset/wdio-focus-contracts.md
@@ -0,0 +1,6 @@
+---
+"@fluentui-react-native/components": patch
+"@fluentui-react-native/storybook-desktop": patch
+---
+
+Migrate all component catalog story tests to named WDIO callbacks and add Windows/Win32 focus contract coverage, including activation pairing, native target lifetime, nested modality, editable fields, TabList sequencing, and FocusZone navigation. Keep Node-only test helpers out of production emit, require story type coverage, preserve focused smoke filters, and allow worker HTTP handles to close naturally while retaining bounded cleanup.
diff --git a/.github/skills/agentic-component-authoring/references/focus-windows.md b/.github/skills/agentic-component-authoring/references/focus-windows.md
index 3f5dadb910..bcf96e3311 100644
--- a/.github/skills/agentic-component-authoring/references/focus-windows.md
+++ b/.github/skills/agentic-component-authoring/references/focus-windows.md
@@ -149,3 +149,15 @@ active/inactive windows, and nested surfaces.
 Gate on actual focused element and action/announcement count, not just selected
 React state or a mocked ref call. A skipped input test is not qualification.
 Use owned app/Metro lifecycle commands and preserve unrelated sessions.
+
+The catalog now uses named WDIO callbacks. The complete Windows and Win32 smoke
+lanes each cover 18 cases with native assertions; component-focused cases use
+the `desktop-focus` tag. Check aggregate result counts for zero skips before
+claiming qualification. A disconnected input desktop can leave semantic cases
+passing while all physical-input cases skip.
+
+For delegated modifier chords, assert parent delivery and unchanged collection
+selection, not immovable native focus: the host is allowed to handle the chord.
+For native editors, distinguish noneditable/nonfocusable from UIA `IsEnabled`;
+Win32's observed enabled-state announcement gap is documented in Input's
+interaction companion and does not replace native focus assertions.
diff --git a/.github/skills/agentic-component-authoring/references/tests-and-stories.md b/.github/skills/agentic-component-authoring/references/tests-and-stories.md
index c939ce4f89..de0aae916c 100644
--- a/.github/skills/agentic-component-authoring/references/tests-and-stories.md
+++ b/.github/skills/agentic-component-authoring/references/tests-and-stories.md
@@ -139,8 +139,8 @@ Win32 is distinct from its WebDriver `platformName` of `windows`. Branch
 inside callbacks for genuine platform differences and use explicit skip
 reasons for unsupported `browser.capabilities['furn:features']`.
 
-Button is the proof of concept and no longer uses custom `desktopDriver`
-plans. Keep names static and callbacks self-contained. Node helpers may be
+All catalog tests use WDIO; custom `desktopDriver` plans remain only in runner
+compatibility fixtures. Keep names static and callbacks self-contained. Node helpers may be
 dynamically imported inside each callback, but callbacks cannot capture
 story-module bindings. The shared Babel config strips all test functions
 before native dependency collection. Named cases get independent previews,
@@ -152,14 +152,20 @@ The single-function `wdio` form remains supported. Run with
 smoke mode runs these functions alongside remaining legacy plans, grouped by
 story. See the [executable test contract](../../../../packages/agentic/storybook-desktop/README.md#executable-tests-inside-stories).
 
-Legacy Checkbox and Input tests still use static JSON
-`parameters.desktopDriver` plans typed with `DesktopStoryTests` from
-`@fluentui-react-native/desktop-driver/authoring`. Keep those plans static and
-use declarative `platforms` and `requires` until they are migrated; do not add
-functions or dynamic values to the old format.
-
-The components package's `test:stories` project checks the experimental
-Button stories without emitting them into the component library.
+The components package's `test:stories` project checks every test-bearing story
+without emitting it into the component library. Add new test-bearing files to
+`tsconfig.stories.json`; the representative runner contract checks this coverage.
+Shared Node-only helpers use `*.wdio.ts` and are dynamically imported by source
+extension inside callbacks. They are checked by the story project and excluded
+from production emit.
+
+Focus cases use native `focused`, `checked`, and `selected` properties together
+with activation and event-order probes. Cover stale key-up, repeats, disabled
+stops, same-target modality, nested themes, focus requests, and selection-before-
+focus. Use `try/finally` to release held WebDriver actions. Never replace native
+state checks with rendered text alone or a default value for an unsupported
+property. Windows and Win32 run the same contract; macOS requires its explicit
+AppKit adaptation.
 
 Button uses focused appearance, size, shape, icon, selection, disabled, and constrained-content stories. Icon uses a
 source and size overview plus focused font, image, SVG, size, color, and accessibility stories.
diff --git a/apps/storybook/AGENTS.md b/apps/storybook/AGENTS.md
index 5fcb1dd14e..278e70f281 100644
--- a/apps/storybook/AGENTS.md
+++ b/apps/storybook/AGENTS.md
@@ -46,8 +46,8 @@ Read [`agent-map.yaml`](agent-map.yaml) first for the compact architecture, look
 - macOS, Windows, and Win32 use their source-built native helpers. Keep the
   deterministic fake provider limited to package contract tests.
 - Author new tests as component story `wdio` functions or named function
-  collections, not app-local test scripts. Button demonstrates migration from
-  the legacy `parameters.desktopDriver` plans, which remain supported.
+  collections, not app-local test scripts. All catalog tests use WDIO; legacy
+  `parameters.desktopDriver` support is retained for runner compatibility.
   The app owns identity, package discovery, platform exclusions, and manifests.
 - Run executable tests with `yarn storybook test --<platform>` and optionally
   `--test <name-glob>`. Callbacks receive the target endpoint as `platform`;
diff --git a/apps/storybook/README.md b/apps/storybook/README.md
index 3e2305e14c..b24ae09060 100644
--- a/apps/storybook/README.md
+++ b/apps/storybook/README.md
@@ -330,5 +330,13 @@ Follow the package-level story authoring instructions in `../../packages/agentic
 `*.stories.tsx` file next to its component; package discovery belongs in `storybook.config.mts`, adapted by `src/main.ts`.
 See `../../packages/agentic/components/src/components/button/button.stories.tsx` for the canonical higher-order component example.
 Prefer named `wdio` functions with stable `testID` selectors and injected
-`platform` context, as demonstrated by Button. Checkbox and Input retain the
-legacy static `parameters.desktopDriver` format during migration.
+`platform` context, as demonstrated by Button. All catalog tests, including
+Checkbox, Input, Switch, TabList, and native FocusZone, use this pattern.
+Focus-specific cases are tagged `desktop-focus`; the complete native
+`stories-and-tests` smoke lane also runs FocusZone and the default control cases.
+
+To run just the focused component cases through the owned Windows/Win32
+lifecycle, set `STORYBOOK_SMOKE_TAG=desktop-focus` before invoking
+`storybook smoke --windows --mode stories-and-tests` or the corresponding
+`--win32` command. The callback runner still requires authenticated native
+readiness and never substitutes JavaScript state for native focus.
diff --git a/packages/agentic/components/AGENTS.md b/packages/agentic/components/AGENTS.md
index 7b1f3e691e..033ffc1696 100644
--- a/packages/agentic/components/AGENTS.md
+++ b/packages/agentic/components/AGENTS.md
@@ -13,9 +13,9 @@ invariants; detailed authoring recipes live in the
   then the [Windows/Win32](../../../.github/skills/agentic-component-authoring/references/focus-windows.md) or
   [macOS](../../../.github/skills/agentic-component-authoring/references/focus-macos.md) detail. V1 Win32 is the
   behavioral baseline for both Windows endpoints; renderer-specific plumbing remains separate.
-- Prefer executable tests under top-level `wdio`, as one callback or a map
-  of named callbacks. Button is the migration proof of concept; legacy
-  `parameters.desktopDriver` plans remain supported for other components.
+- Author executable tests under top-level `wdio`, as one callback or a map
+  of named callbacks. All catalog tests use this pattern; legacy
+  `parameters.desktopDriver` plans remain only in runner compatibility fixtures.
   Use stable `testID` selectors and the injected target `platform` for real
   platform differences, with explicit skips for unsupported capabilities.
 - Executable tests are typed
@@ -54,8 +54,10 @@ invariants; detailed authoring recipes live in the
 - Export higher-order components and public types explicitly from `src/index.ts`; export primitives and their public types
   explicitly from `src/primitives/index.ts`. Never use wildcard exports.
 - Colocate runtime tests, type tests, and Storybook stories with the implementation.
-- Keep legacy desktop story plans inline and statically extractable; do not hide them
-  behind variables, spreads, functions, or computed values.
+- Include every test-bearing story in `tsconfig.stories.json`. The representative
+  runner contract rejects legacy catalog plans and missing story type coverage.
+- Node-only shared test helpers use `*.wdio.ts`, are excluded from production
+  emit, and are imported dynamically inside the stripped callbacks.
 - Use package scripts for format, lint, build, tests, and snapshots.
 - Do not copy web-only APIs, CSS behavior, or DOM assumptions into React Native.
 - Do not copy or mechanically transform private source bodies into this public
diff --git a/packages/agentic/components/WIN32-FOCUS-PLAN.md b/packages/agentic/components/WIN32-FOCUS-PLAN.md
index fbc5229155..d79809548b 100644
--- a/packages/agentic/components/WIN32-FOCUS-PLAN.md
+++ b/packages/agentic/components/WIN32-FOCUS-PLAN.md
@@ -11,7 +11,7 @@ The historical filename is retained so existing plan references remain valid.
 This refinement adds common/platform authoring instructions, modern-ref
 requirements, macOS source research, and a gated `native-lib` assessment.
 
-## Execution status (September 14, 2026)
+## Execution status (September 15, 2026 UTC)
 
 Implemented:
 
@@ -31,26 +31,37 @@ Implemented:
   guarded, key-based fallback only where native code-based activation cannot run.
   Checkbox/Switch `Toggle` and Tab `Select` accessibility actions expose the expected
   native toggle/selection patterns.
-- Dedicated `desktop-focus` Button/Switch/TabList stories and owned smoke
-  selectors (`STORYBOOK_SMOKE_STORY`, `STORYBOOK_SMOKE_TAG`) make native
-  qualification reproducible without bypassing leases or changing default smoke
-  contracts.
-
-Native evidence so far: all three dedicated Win32 cases passed with real input
-and no skips. The default Win32 Button/Checkbox/Input lane also passed all three
-cases after declaring Checkbox's native Toggle action; the previous failure
-showed a checked glyph but false UIA checked state. Windows Fabric Switch and
-TabList cases passed; the first Button
-case repeatedly timed out during story selection before executing input steps.
-The full Windows story traversal rendered successfully. The unsuccessful
-orchestrator experiments were removed rather than weakening readiness checks.
+- The WDIO support from origin/main `8d31a6b27` is integrated in merge
+  `64c4328ac`. All catalog tests now use named WDIO callbacks: 18 cases across
+  12 stories. Shared Node-only helpers and every test-bearing story are checked
+  without production emit. Compatibility fixtures retain the legacy parser.
+  Owned smoke selectors apply to WDIO without bypassing leases or readiness.
+
+Native qualification: all 18 WDIO cases pass with real input and zero skips on
+both Windows Fabric and Win32. The full traversals render 155 and 149 stories,
+respectively. The upstream authenticated-initial-render readiness fix replaces
+the earlier unsuccessful local experiments; the previous Button selection gate
+is no longer blocking this suite.
+
+The cases cover pointer focus, exactly-once Enter/Space activation, repeated
+keydown, stale key-up after Tab/blur, disabled tab stops, same-target modality
+without refocus, nested roots, programmatic request confirmation and disabled/
+detached targets, native toggle state, caret editing, selection-before-focus,
+Home/End/wrap, manual selection, modifier propagation, and linear/geometric
+FocusZone navigation. Modifier chords reach the parent without changing
+TabList selection; a native host may legitimately move focus in response.
+
+Win32 TextInput still reports UIA `IsEnabled=true` when configured noneditable,
+nonfocusable, and accessibility-disabled. The focus case verifies native Tab
+exclusion rather than treating that enabled-state announcement gap as proof of
+focusability. It remains separate from the verified focus contract.
 
 Affected workspace suites pass, as do the root build and package lint/format.
 The required uncached repository test graph stops in two unchanged codemod
 fixture comparisons; these unrelated baseline failures were not modified.
 
-Still gated: complete three-lane P0/V1 parity, the Windows first-story readiness
-failure, macOS native input/VoiceOver, full popup/window restoration and activity
+Still gated: complete three-lane P0/V1 parity, macOS native input/VoiceOver,
+the Win32 editor enabled-state announcement, full popup/window restoration and activity
 policy, and P4 visual/high-contrast/scale qualification. A complete new menu owner
 or RadioGroup is not introduced. N0/native-lib remains deferred: observed
 component activation/ref gaps were resolved without a new native module; native
diff --git a/packages/agentic/components/src/common/desktopFocus.wdio.ts b/packages/agentic/components/src/common/desktopFocus.wdio.ts
new file mode 100644
index 0000000000..955d6d0e8a
--- /dev/null
+++ b/packages/agentic/components/src/common/desktopFocus.wdio.ts
@@ -0,0 +1,30 @@
+import type { WdioStoryContext } from '@fluentui-react-native/storybook-desktop/testing';
+
+export function requireDesktopFocus({ browser, platform, skip }: Pick<WdioStoryContext, 'browser' | 'platform' | 'skip'>): boolean {
+  if (platform !== 'windows' && platform !== 'win32') {
+    skip('This case qualifies the Windows/Win32 focus contract; macOS has a separate native contract.');
+    return false;
+  }
+  const features = browser.capabilities['furn:features'];
+  if (!features) {
+    throw new Error('Desktop Driver did not provide feature capabilities.');
+  }
+  if (!features.physicalClick || !features.keyboard || !features.focus) {
+    skip('Native focus qualification requires physical pointer input, keyboard input, and focus observation.');
+    return false;
+  }
+  return true;
+}
+
+export async function expectNativeState(
+  browser: WdioStoryContext['browser'],
+  testId: string,
+  property: 'focused' | 'selected' | 'checked',
+  value: boolean,
+): Promise<void> {
+  await browser.waitUntil(async () => (await (await browser.$(`~${testId}`)).getProperty(property)) === value, {
+    timeout: 5000,
+    interval: 50,
+    timeoutMsg: `Expected native ${property}=${value} on "${testId}".`,
+  });
+}
diff --git a/packages/agentic/components/src/components/AGENTS.md b/packages/agentic/components/src/components/AGENTS.md
index e2c03531e1..9ab2ccda9d 100644
--- a/packages/agentic/components/src/components/AGENTS.md
+++ b/packages/agentic/components/src/components/AGENTS.md
@@ -56,12 +56,12 @@ audit.
   layout.
 - Test both paths of a self-driving axis, and test that an externally driven `selected` does not change on press.
 - Keep a self-driving controlled prop out of story `args`, and keep an identity-changing axis out of story controls.
-- Prefer top-level `wdio` functions or named function collections demonstrated
+- Use top-level `wdio` functions or named function collections demonstrated
   by Button. Use the injected `platform`, explicit capability skips, stable
   `testID` selectors, and public native semantics. The story supplies the suite
   scope and each named case is isolated. Run with `storybook test`.
-- Legacy `parameters.desktopDriver` plans remain supported. Do not put
-  functions in static plans or import Node helpers at story-module scope.
+- Do not add legacy `parameters.desktopDriver` plans to the component catalog
+  or import Node helpers at story-module scope.
 
 ## Focus visual policy
 
diff --git a/packages/agentic/components/src/components/button/button.stories.tsx b/packages/agentic/components/src/components/button/button.stories.tsx
index d50b5de1c4..ebe8415caf 100644
--- a/packages/agentic/components/src/components/button/button.stories.tsx
+++ b/packages/agentic/components/src/components/button/button.stories.tsx
@@ -4,9 +4,8 @@ import type { ReactNode } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import type { Meta, StoryObj } from '@storybook/react-native';
-import type { DesktopStoryTests } from '@fluentui-react-native/desktop-driver/authoring';
-import { useRootInputModality } from '@fluentui-react-native/design';
-import type { FocusKeyboardEvent } from '@fluentui-react-native/framework-base';
+import { ThemedRoot, useRootInputModality } from '@fluentui-react-native/design';
+import type { FocusKeyboardEvent, FocusRequest } from '@fluentui-react-native/framework-base';
 import type { WdioStory } from '@fluentui-react-native/storybook-desktop/testing';
 
 import { Button } from './button';
@@ -120,12 +119,14 @@ export const Default: Story = {
   },
 };
 
-function ModalityProbe() {
-  return <Text testID="focus-input-modality">{useRootInputModality()}</Text>;
+function ModalityProbe({ testID = 'focus-input-modality' }: { testID?: string }) {
+  return <Text testID={testID}>{useRootInputModality()}</Text>;
 }
 
 function FocusManagementScene() {
   const [count, setCount] = useState(0);
+  const [otherCount, setOtherCount] = useState(0);
+  const [focusCount, setFocusCount] = useState(0);
   const [keyTrace, setKeyTrace] = useState('none');
   const recordKey = (event: FocusKeyboardEvent) => {
     setKeyTrace(`${event.nativeEvent.key}/${event.nativeEvent.code ?? 'no-code'}/self:${event.target === event.currentTarget}`);
@@ -134,6 +135,7 @@ function FocusManagementScene() {
     content: 'Focus and activate',
     testID: 'focus-probe-button',
     onPress: () => setCount((value) => value + 1),
+    onFocus: () => setFocusCount((value) => value + 1),
     onKeyDown: recordKey,
     onKeyUp: recordKey,
   });
@@ -141,8 +143,16 @@ function FocusManagementScene() {
   return (
     <View>
       {renderButton_unstable(state)}
+      <Button content="Disabled stop" disabled testID="focus-probe-disabled" />
+      <Button content="Next focus target" testID="focus-probe-next" onPress={() => setOtherCount((value) => value + 1)} />
+      <ThemedRoot appearance={{ colorScheme: 'dark' }}>
+        <Button content="Nested theme target" testID="focus-probe-nested" />
+        <ModalityProbe testID="focus-nested-modality" />
+      </ThemedRoot>
       <Text testID="focus-probe-state">{state.focused ? 'focused' : 'blurred'}</Text>
       <Text testID="focus-probe-count">{String(count)}</Text>
+      <Text testID="focus-probe-next-count">{String(otherCount)}</Text>
+      <Text testID="focus-probe-focus-count">{String(focusCount)}</Text>
       <Text testID="focus-probe-key">{keyTrace}</Text>
       <ModalityProbe />
     </View>
@@ -152,32 +162,151 @@ function FocusManagementScene() {
 export const FocusManagement: Story = {
   render: () => <FocusManagementScene />,
   tags: ['desktop-focus'],
-  parameters: {
-    desktopDriver: {
-      version: 1,
-      tests: [
-        {
-          id: 'focus-and-exactly-once-activation',
-          platforms: ['windows', 'win32'],
-          requires: ['physical-click', 'keyboard', 'focus'],
-          steps: [
-            { action: 'wait', target: { testId: 'focus-probe-button' } },
-            { action: 'click', target: { testId: 'focus-probe-button' } },
-            { expect: { state: 'focused', target: { testId: 'focus-probe-button' }, value: true } },
-            { action: 'wait', until: { state: 'text', target: { testId: 'focus-probe-state' }, value: 'focused' } },
-            { expect: { state: 'text', target: { testId: 'focus-probe-count' }, value: '1' } },
-            { action: 'keys', value: ['\uE007'] },
-            { action: 'wait', until: { state: 'text', target: { testId: 'focus-probe-count' }, value: '2' } },
-            { expect: { state: 'text', target: { testId: 'focus-input-modality' }, value: 'keyboard' } },
-            { action: 'keys', value: ['\uE00D'] },
-            { action: 'wait', until: { state: 'text', target: { testId: 'focus-probe-count' }, value: '3' } },
-            { action: 'click', target: { testId: 'focus-probe-button' } },
-            { action: 'wait', until: { state: 'text', target: { testId: 'focus-probe-count' }, value: '4' } },
-            { expect: { state: 'text', target: { testId: 'focus-input-modality' }, value: 'pointer' } },
-          ],
-        },
-      ],
-    } satisfies DesktopStoryTests,
+  wdio: {
+    'focuses on pointer activation and invokes exactly once per Enter and Space': async (context) => {
+      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser, expect } = context;
+      const button = await browser.$('~focus-probe-button');
+      const count = await browser.$('~focus-probe-count');
+      await button.click();
+      await expectNativeState(browser, 'focus-probe-button', 'focused', true);
+      await expect(await browser.$('~focus-probe-state')).toHaveText('focused');
+      await expect(count).toHaveText('1');
+      await browser.keys('\uE007');
+      await expect(count).toHaveText('2');
+      await expect(await browser.$('~focus-input-modality')).toHaveText('keyboard');
+      await browser.keys('\uE00D');
+      await expect(count).toHaveText('3');
+      await button.click();
+      await expect(count).toHaveText('4');
+      await expect(await browser.$('~focus-input-modality')).toHaveText('pointer');
+    },
+    'updates same-target modality without refocusing and shares it with nested themes': async (context) => {
+      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser, expect } = context;
+      const button = await browser.$('~focus-probe-button');
+      await button.click();
+      await expectNativeState(browser, 'focus-probe-button', 'focused', true);
+      await expect(await browser.$('~focus-probe-focus-count')).toHaveText('1');
+      await browser.keys('x');
+      await expect(await browser.$('~focus-input-modality')).toHaveText('keyboard');
+      await expect(await browser.$('~focus-nested-modality')).toHaveText('keyboard');
+      await expect(await browser.$('~focus-probe-count')).toHaveText('1');
+      await button.click();
+      await expect(await browser.$('~focus-input-modality')).toHaveText('pointer');
+      await expect(await browser.$('~focus-probe-focus-count')).toHaveText('1');
+      await (await browser.$('~focus-probe-nested')).click();
+      await expectNativeState(browser, 'focus-probe-nested', 'focused', true);
+      await browser.keys('x');
+      await expect(await browser.$('~focus-input-modality')).toHaveText('keyboard');
+      await expect(await browser.$('~focus-nested-modality')).toHaveText('keyboard');
+      await expect(await browser.$('~focus-probe-state')).toHaveText('blurred');
+    },
+    'skips disabled stops and does not activate the new owner on a stale key-up': async (context) => {
+      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser, expect } = context;
+      await (await browser.$('~focus-probe-button')).click();
+      await expect(await browser.$('~focus-probe-disabled')).not.toBeEnabled();
+      try {
+        await browser.performActions([
+          {
+            type: 'key',
+            id: 'focus-keyboard',
+            actions: [
+              { type: 'keyDown', value: '\uE007' },
+              { type: 'keyDown', value: '\uE004' },
+              { type: 'keyUp', value: '\uE004' },
+              { type: 'keyUp', value: '\uE007' },
+            ],
+          },
+        ]);
+      } finally {
+        await browser.releaseActions();
+      }
+      await expectNativeState(browser, 'focus-probe-next', 'focused', true);
+      await expectNativeState(browser, 'focus-probe-disabled', 'focused', false);
+      await expect(await browser.$('~focus-probe-state')).toHaveText('blurred');
+      await expect(await browser.$('~focus-probe-count')).toHaveText('1');
+      await expect(await browser.$('~focus-probe-next-count')).toHaveText('0');
+      await browser.keys(['\uE008', '\uE004']);
+      await expectNativeState(browser, 'focus-probe-button', 'focused', true);
+    },
+    'suppresses repeated key-down activation until the paired key-up': async (context) => {
+      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser, expect } = context;
+      await (await browser.$('~focus-probe-button')).click();
+      await expectNativeState(browser, 'focus-probe-button', 'focused', true);
+      try {
+        await browser.performActions([
+          {
+            type: 'key',
+            id: 'focus-keyboard',
+            actions: [
+              { type: 'keyDown', value: '\uE00D' },
+              { type: 'keyDown', value: '\uE00D' },
+              { type: 'keyDown', value: '\uE00D' },
+            ],
+          },
+        ]);
+        await expect(await browser.$('~focus-probe-count')).toHaveText('1');
+        await browser.performActions([{ type: 'key', id: 'focus-keyboard', actions: [{ type: 'keyUp', value: '\uE00D' }] }]);
+        await expect(await browser.$('~focus-probe-count')).toHaveText('2');
+      } finally {
+        await browser.releaseActions();
+      }
+    },
+  },
+};
+
+function FocusRequestsScene() {
+  const [disabled, setDisabled] = useState(false);
+  const [mounted, setMounted] = useState(true);
+  const [request, setRequest] = useState<FocusRequest>();
+  const state = useButton_unstable({ content: 'Requested focus target', disabled, testID: 'focus-request-target' });
+  useButtonStyles_unstable(state);
+  return (
+    <View>
+      {mounted && renderButton_unstable(state)}
+      <Button
+        content="Request focus"
+        testID="focus-request-command"
+        onPress={() => setRequest(state.focusTarget.requestFocus('programmatic'))}
+      />
+      <Button content="Toggle disabled" testID="focus-request-disable" onPress={() => setDisabled((value) => !value)} />
+      <Button content="Toggle mounted" testID="focus-request-mount" onPress={() => setMounted((value) => !value)} />
+      <Text testID="focus-request-status">{request?.status ?? 'none'}</Text>
+      <ModalityProbe />
+    </View>
+  );
+}
+
+export const FocusRequests: Story = {
+  render: () => <FocusRequestsScene />,
+  tags: ['desktop-focus'],
+  wdio: {
+    'confirms native requests without changing modality and rejects disabled or detached targets': async (context) => {
+      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser, expect } = context;
+      const command = await browser.$('~focus-request-command');
+      const status = await browser.$('~focus-request-status');
+      await command.click();
+      await expectNativeState(browser, 'focus-request-target', 'focused', true);
+      await expect(status).toHaveText('confirmed');
+      await expect(await browser.$('~focus-input-modality')).toHaveText('pointer');
+      await (await browser.$('~focus-request-disable')).click();
+      await expect(await browser.$('~focus-request-target')).not.toBeEnabled();
+      await command.click();
+      await expect(status).toHaveText('not-focusable');
+      await (await browser.$('~focus-request-mount')).click();
+      await expect(await browser.$('~focus-request-target')).not.toExist();
+      await command.click();
+      await expect(status).toHaveText('not-mounted');
+    },
   },
 };
 
diff --git a/packages/agentic/components/src/components/button/spec/interaction.md b/packages/agentic/components/src/components/button/spec/interaction.md
index 8567b21685..2413a66b1f 100644
--- a/packages/agentic/components/src/components/button/spec/interaction.md
+++ b/packages/agentic/components/src/components/button/spec/interaction.md
@@ -2,8 +2,8 @@
 
 ## State model
 
-`usePressableState` derives hover, press, and focus from the root
-`Pressable`. Token resolution uses appearance first, then selected and
+`useFocusablePressable` derives hover and press and observes native self-focus
+on the root `Pressable`. Token resolution uses appearance first, then selected and
 interaction state. Disabled values override interactive presentation. User
 root style is the final style layer.
 
@@ -50,3 +50,11 @@ refs compose with caller refs on the actual interactive slot, without redirectin
 structural root refs. Native self-focus is distinct from descendant events, and
 detach/disable invalidates pending focus requests. Focus visuals observe root
 modality only while focused on the custom path; there is no scene-wide rerender.
+
+## Executable focus coverage
+
+Named WDIO cases in `FocusManagement` verify native pointer focus, exactly-once
+activation, key pairing across blur, repeated key-down, disabled Tab stops, and
+shared nested-root modality without refocusing the same target. `FocusRequests`
+verifies native confirmation and rejects disabled/detached targets without
+rewriting physical modality. Each case starts with a fresh story and session.
diff --git a/packages/agentic/components/src/components/checkbox/checkbox.stories.tsx b/packages/agentic/components/src/components/checkbox/checkbox.stories.tsx
index d05f1bcaf8..d6194f4ec1 100644
--- a/packages/agentic/components/src/components/checkbox/checkbox.stories.tsx
+++ b/packages/agentic/components/src/components/checkbox/checkbox.stories.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import type { Meta, StoryObj } from '@storybook/react-native';
-import type { DesktopStoryTests } from '@fluentui-react-native/desktop-driver/authoring';
+import type { WdioStory } from '@fluentui-react-native/storybook-desktop/testing';
 
 import { Checkbox } from './checkbox';
 import type { CheckboxStatus, CheckboxVariant } from './checkbox.types';
@@ -62,31 +62,27 @@ const meta: Meta<typeof Checkbox> = {
 
 export default meta;
 
-type Story = StoryObj<typeof Checkbox>;
+type Story = WdioStory<StoryObj<typeof Checkbox>>;
 
 export const Default: Story = {
   tags: ['desktop-e2e'],
-  parameters: {
-    desktopDriver: {
-      version: 1,
-      tests: [
-        {
-          id: 'toggles-checked-state',
-          title: 'Toggles through native activation',
-          requires: ['physical-click'],
-          steps: [
-            { action: 'wait', target: { testId: 'agentic-storybook-checkbox' } },
-            { expect: { state: 'role', target: { testId: 'agentic-storybook-checkbox' }, value: 'checkbox' } },
-            { expect: { state: 'checked', target: { testId: 'agentic-storybook-checkbox' }, value: false } },
-            { action: 'click', target: { testId: 'agentic-storybook-checkbox' } },
-            {
-              action: 'wait',
-              until: { state: 'checked', target: { testId: 'agentic-storybook-checkbox' }, value: true },
-            },
-          ],
-        },
-      ],
-    } satisfies DesktopStoryTests,
+  wdio: {
+    'toggles native checked state in both directions': async ({ browser, expect, skip }) => {
+      const features = browser.capabilities['furn:features'];
+      if (!features) throw new Error('Desktop Driver did not provide feature capabilities.');
+      if (!features.physicalClick) {
+        skip('This test requires physical pointer input.');
+        return;
+      }
+      const { expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      const checkbox = await browser.$('~agentic-storybook-checkbox');
+      expect(await checkbox.getTagName()).toBe('checkbox');
+      await expectNativeState(browser, 'agentic-storybook-checkbox', 'checked', false);
+      await checkbox.click();
+      await expectNativeState(browser, 'agentic-storybook-checkbox', 'checked', true);
+      await checkbox.click();
+      await expectNativeState(browser, 'agentic-storybook-checkbox', 'checked', false);
+    },
   },
 };
 
@@ -148,7 +144,7 @@ export const ExternallyDrivenStatus: Story = {
             <Checkbox
               key={index}
               label={`Option ${index + 1}`}
-              onStatusChange={(next) => setStatuses(statuses.map((current, i) => (i === index ? next : current)))}
+              onStatusChange={(next: CheckboxStatus) => setStatuses(statuses.map((current, i) => (i === index ? next : current)))}
               status={status}
             />
           ))}
diff --git a/packages/agentic/components/src/components/input/input.stories.tsx b/packages/agentic/components/src/components/input/input.stories.tsx
index 8d21bd740a..ba09dca8d3 100644
--- a/packages/agentic/components/src/components/input/input.stories.tsx
+++ b/packages/agentic/components/src/components/input/input.stories.tsx
@@ -3,12 +3,13 @@ import type { ReactNode } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import type { Meta, StoryObj } from '@storybook/react-native';
-import type { DesktopStoryTests } from '@fluentui-react-native/desktop-driver/authoring';
+import type { WdioStory } from '@fluentui-react-native/storybook-desktop/testing';
 import { directComponent } from '@fluentui-react-native/framework-base';
 
 import type { IconElementProps } from '../../primitives/icon/icon.types';
 
 import { Input } from './input';
+import { Button } from '../button/button';
 import type { InputSize, InputVariant } from './input.types';
 
 type StoryGroupProps = {
@@ -25,7 +26,7 @@ const StoryGroup = ({ children, label }: StoryGroupProps) => (
 
 const sampleIcon = { fontSource: { codepoint: 0x2605, fontFamily: 'Arial' } } as const;
 
-const SampleSvgIcon = directComponent<IconElementProps>(({ color, height, width, ...props }) => (
+const SampleSvgIcon = directComponent<IconElementProps>(({ color, height, width, ...props }: IconElementProps) => (
   <View {...props} style={{ alignItems: 'center', height, justifyContent: 'center', width }}>
     <View style={{ backgroundColor: color, borderRadius: 9999, height: (height ?? 20) / 2, width: (width ?? 20) / 2 }} />
   </View>
@@ -67,29 +68,53 @@ const meta: Meta<typeof Input> = {
 
 export default meta;
 
-type Story = StoryObj<typeof Input>;
+type Story = WdioStory<StoryObj<typeof Input>>;
 
 export const Default: Story = {
   tags: ['desktop-e2e'],
-  parameters: {
-    desktopDriver: {
-      version: 1,
-      tests: [
-        {
-          id: 'types-and-clears',
-          title: 'Accepts keyboard input and clears it',
-          requires: ['keyboard'],
-          steps: [
-            { action: 'wait', target: { testId: 'agentic-storybook-input' } },
-            { expect: { state: 'role', target: { testId: 'agentic-storybook-input' }, value: 'textbox' } },
-            { action: 'type', target: { testId: 'agentic-storybook-input' }, text: 'Ada' },
-            { expect: { state: 'value', target: { testId: 'agentic-storybook-input' }, value: 'Ada' } },
-            { action: 'clear', target: { testId: 'agentic-storybook-input' } },
-            { expect: { state: 'value', target: { testId: 'agentic-storybook-input' }, value: '' } },
-          ],
-        },
-      ],
-    } satisfies DesktopStoryTests,
+  wdio: {
+    'accepts keyboard input and clears it': async ({ browser, expect, skip }) => {
+      const features = browser.capabilities['furn:features'];
+      if (!features) throw new Error('Desktop Driver did not provide feature capabilities.');
+      if (!features.keyboard) {
+        skip('This test requires keyboard input.');
+        return;
+      }
+      const input = await browser.$('~agentic-storybook-input');
+      expect(await input.getTagName()).toBe('textbox');
+      await input.addValue('Ada');
+      await expect(input).toHaveValue('Ada');
+      await input.clearValue();
+      await expect(input).toHaveValue('');
+    },
+  },
+};
+
+export const FocusManagement: Story = {
+  tags: ['desktop-focus'],
+  render: () => (
+    <View style={styles.story}>
+      <Input accessibilityLabel="Editable focus target" testID="focus-input" />
+      <Input accessibilityLabel="Disabled focus target" disabled testID="focus-input-disabled" />
+      <Button content="After the input" testID="focus-input-after" />
+    </View>
+  ),
+  wdio: {
+    'keeps editing keys in the TextInput and skips disabled fields on Tab': async (context) => {
+      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser, expect } = context;
+      const input = await browser.$('~focus-input');
+      await input.setValue('Ada');
+      await expectNativeState(browser, 'focus-input', 'focused', true);
+      await browser.keys('\uE012');
+      await browser.keys('x');
+      await expect(input).toHaveValue('Adxa');
+      await expectNativeState(browser, 'focus-input', 'focused', true);
+      await browser.keys('\uE004');
+      await expectNativeState(browser, 'focus-input-after', 'focused', true);
+      await expectNativeState(browser, 'focus-input-disabled', 'focused', false);
+    },
   },
 };
 
diff --git a/packages/agentic/components/src/components/input/spec/interaction.md b/packages/agentic/components/src/components/input/spec/interaction.md
index d210ea690a..5b0f705d6b 100644
--- a/packages/agentic/components/src/components/input/spec/interaction.md
+++ b/packages/agentic/components/src/components/input/spec/interaction.md
@@ -76,3 +76,13 @@ detach/disable invalidates pending focus requests. The target and native slot
 share the resolved `focusable` value: direct textInput props override the root
 setting, but disabled always wins. Input retains its border-only focus styling;
 it does not subscribe to root modality or mount a custom focus ring.
+
+## Native focus qualification
+
+The `FocusManagement` WDIO case verifies native text editing and caret movement,
+then checks that Tab skips the disabled field and focuses the following button.
+The disabled field must remain natively unfocused. Win32's native editor was
+observed reporting UIA `IsEnabled=true` despite `editable=false`,
+`focusable=false`, and disabled accessibility state. That enabled-state
+announcement gap is not treated as evidence of focusability or hidden by an
+assumed native disabled value.
diff --git a/packages/agentic/components/src/components/switch/spec/interaction.md b/packages/agentic/components/src/components/switch/spec/interaction.md
index 3c805b6033..351bf8e371 100644
--- a/packages/agentic/components/src/components/switch/spec/interaction.md
+++ b/packages/agentic/components/src/components/switch/spec/interaction.md
@@ -73,3 +73,9 @@ refs compose with caller refs on the actual interactive slot, without redirectin
 structural root refs. Native self-focus is distinct from descendant events, and
 detach/disable invalidates pending focus requests. Focus visuals observe root
 modality only while focused on the custom path; there is no scene-wide rerender.
+
+## Executable focus coverage
+
+The `FocusManagement` WDIO case requires native focus and checks both change
+counts and UIA checked state after pointer, Enter, and Space activation. A
+rendered thumb or JavaScript count alone does not establish native toggle state.
diff --git a/packages/agentic/components/src/components/switch/switch.stories.tsx b/packages/agentic/components/src/components/switch/switch.stories.tsx
index f198187d37..b6ae1f5e55 100644
--- a/packages/agentic/components/src/components/switch/switch.stories.tsx
+++ b/packages/agentic/components/src/components/switch/switch.stories.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import type { Meta, StoryObj } from '@storybook/react-native';
-import type { DesktopStoryTests } from '@fluentui-react-native/desktop-driver/authoring';
+import type { WdioStory } from '@fluentui-react-native/storybook-desktop/testing';
 
 import { Switch } from './switch';
 import type { SwitchLayout } from './switch.types';
@@ -69,7 +69,7 @@ const meta: Meta<typeof Switch> = {
 
 export default meta;
 
-type Story = StoryObj<typeof Switch>;
+type Story = WdioStory<StoryObj<typeof Switch>>;
 
 export const Default: Story = {};
 
@@ -91,29 +91,25 @@ function FocusManagementScene() {
 export const FocusManagement: Story = {
   render: () => <FocusManagementScene />,
   tags: ['desktop-focus'],
-  parameters: {
-    desktopDriver: {
-      version: 1,
-      tests: [
-        {
-          id: 'single-toggle-per-key',
-          platforms: ['windows', 'win32'],
-          requires: ['physical-click', 'keyboard', 'focus'],
-          steps: [
-            { action: 'wait', target: { testId: 'focus-switch' } },
-            { action: 'click', target: { testId: 'focus-switch' } },
-            { expect: { state: 'focused', target: { testId: 'focus-switch' }, value: true } },
-            { action: 'wait', until: { state: 'text', target: { testId: 'focus-switch-count' }, value: '1' } },
-            { action: 'keys', value: ['\uE007'] },
-            { action: 'wait', until: { state: 'text', target: { testId: 'focus-switch-count' }, value: '2' } },
-            { expect: { state: 'checked', target: { testId: 'focus-switch' }, value: false } },
-            { action: 'keys', value: ['\uE00D'] },
-            { action: 'wait', until: { state: 'text', target: { testId: 'focus-switch-count' }, value: '3' } },
-            { expect: { state: 'checked', target: { testId: 'focus-switch' }, value: true } },
-          ],
-        },
-      ],
-    } satisfies DesktopStoryTests,
+  wdio: {
+    'toggles exactly once per pointer, Enter, and Space activation': async (context) => {
+      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser, expect } = context;
+      const control = await browser.$('~focus-switch');
+      const count = await browser.$('~focus-switch-count');
+      await expectNativeState(browser, 'focus-switch', 'checked', false);
+      await control.click();
+      await expectNativeState(browser, 'focus-switch', 'focused', true);
+      await expect(count).toHaveText('1');
+      await expectNativeState(browser, 'focus-switch', 'checked', true);
+      await browser.keys('\uE007');
+      await expect(count).toHaveText('2');
+      await expectNativeState(browser, 'focus-switch', 'checked', false);
+      await browser.keys('\uE00D');
+      await expect(count).toHaveText('3');
+      await expectNativeState(browser, 'focus-switch', 'checked', true);
+    },
   },
 };
 
diff --git a/packages/agentic/components/src/components/tablist/spec/interaction.md b/packages/agentic/components/src/components/tablist/spec/interaction.md
index 6beac7f226..ca7fd6ed89 100644
--- a/packages/agentic/components/src/components/tablist/spec/interaction.md
+++ b/packages/agentic/components/src/components/tablist/spec/interaction.md
@@ -45,3 +45,12 @@ existing Tab render, so reduced-motion settings require no group branch.
 Tabs register stable, ref-backed targets. The collection requests focus after
 eligibility commits and confirms it from native focus events. Superseded or
 removed targets cancel pending work; the public structural root ref is unchanged.
+
+## Executable focus coverage
+
+The WDIO `FocusManagement` cases verify native selected/focused states,
+selection observed at the focus event, disabled skipping, wrap, Home/End,
+and unconsumed modifier delivery to the parent. The native host may move focus
+for those modifier chords; TabList must not consume them or change selection.
+`ManualFocusManagement` proves focus can move independently until Enter selects
+the focused Tab.
diff --git a/packages/agentic/components/src/components/tablist/tablist.stories.tsx b/packages/agentic/components/src/components/tablist/tablist.stories.tsx
index 7d42feda37..05afc4e3be 100644
--- a/packages/agentic/components/src/components/tablist/tablist.stories.tsx
+++ b/packages/agentic/components/src/components/tablist/tablist.stories.tsx
@@ -3,10 +3,11 @@ import { useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import type { Meta, StoryObj } from '@storybook/react-native';
-import type { DesktopStoryTests } from '@fluentui-react-native/desktop-driver/authoring';
+import type { WdioStory } from '@fluentui-react-native/storybook-desktop/testing';
 
 import { Tab } from '../tab/tab';
 import { TabList } from './tablist';
+import type { TabKeyEvent, TabListProps } from './tablist.types';
 
 const meta: Meta<typeof TabList> = {
   title: 'Components/TabList',
@@ -35,7 +36,7 @@ const meta: Meta<typeof TabList> = {
 
 export default meta;
 
-type Story = StoryObj<typeof TabList>;
+type Story = WdioStory<StoryObj<typeof TabList>>;
 
 export const Default: Story = {
   args: {
@@ -48,16 +49,33 @@ export const Default: Story = {
   },
 };
 
-function FocusManagementScene() {
+function FocusManagementScene({ selectionFollowsFocus = true }: { selectionFollowsFocus?: boolean }) {
   const [selectedValue, setSelectedValue] = useState('focus-panel-one');
+  const [selectionAtFocus, setSelectionAtFocus] = useState('none');
+  const [ownerKey, setOwnerKey] = useState('none');
+  const recordFocus = () => setSelectionAtFocus(selectedValue);
+  const recordOwnerKey = (event: TabKeyEvent) => {
+    const { key, ctrlKey, shiftKey } = event.nativeEvent ?? {};
+    if (key === 'ArrowRight' && (ctrlKey || shiftKey)) {
+      setOwnerKey(`${ctrlKey ? 'Control' : 'Shift'}+ArrowRight`);
+    }
+  };
   return (
     <View>
-      <TabList accessibilityLabel="Focus navigation" selectedValue={selectedValue} onSelectionChange={setSelectedValue}>
-        <Tab controls="focus-panel-one" content="One" testID="focus-tab-one" />
+      <TabList
+        accessibilityLabel="Focus navigation"
+        selectedValue={selectedValue}
+        onSelectionChange={setSelectedValue}
+        onKeyDown={recordOwnerKey}
+        selectionFollowsFocus={selectionFollowsFocus}
+      >
+        <Tab controls="focus-panel-one" content="One" onFocus={recordFocus} testID="focus-tab-one" />
         <Tab controls="focus-panel-disabled" content="Disabled" disabled testID="focus-tab-disabled" />
-        <Tab controls="focus-panel-two" content="Two" testID="focus-tab-two" />
+        <Tab controls="focus-panel-two" content="Two" onFocus={recordFocus} testID="focus-tab-two" />
       </TabList>
       <Text testID="focus-tab-selection">{selectedValue}</Text>
+      <Text testID="focus-tab-selection-at-focus">{selectionAtFocus}</Text>
+      <Text testID="focus-tab-owner-key">{ownerKey}</Text>
     </View>
   );
 }
@@ -65,35 +83,70 @@ function FocusManagementScene() {
 export const FocusManagement: Story = {
   render: () => <FocusManagementScene />,
   tags: ['desktop-focus'],
-  parameters: {
-    desktopDriver: {
-      version: 1,
-      tests: [
-        {
-          id: 'committed-roving-focus',
-          platforms: ['windows', 'win32'],
-          requires: ['physical-click', 'keyboard', 'focus'],
-          steps: [
-            { action: 'wait', target: { testId: 'focus-tab-one' } },
-            { action: 'click', target: { testId: 'focus-tab-one' } },
-            { expect: { state: 'focused', target: { testId: 'focus-tab-one' }, value: true } },
-            { action: 'keys', value: ['\uE014'] },
-            { action: 'wait', until: { state: 'focused', target: { testId: 'focus-tab-two' }, value: true } },
-            { expect: { state: 'text', target: { testId: 'focus-tab-selection' }, value: 'focus-panel-two' } },
-            { expect: { state: 'selected', target: { testId: 'focus-tab-two' }, value: true } },
-            { action: 'keys', value: ['\uE011'] },
-            { action: 'wait', until: { state: 'focused', target: { testId: 'focus-tab-one' }, value: true } },
-            { expect: { state: 'text', target: { testId: 'focus-tab-selection' }, value: 'focus-panel-one' } },
-            { expect: { state: 'selected', target: { testId: 'focus-tab-one' }, value: true } },
-          ],
-        },
-      ],
-    } satisfies DesktopStoryTests,
+  wdio: {
+    'commits selection before focus, skips disabled tabs, and supports wrap, Home, and End': async (context) => {
+      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser, expect } = context;
+      await (await browser.$('~focus-tab-one')).click();
+      await expectNativeState(browser, 'focus-tab-one', 'focused', true);
+      await expect(await browser.$('~focus-tab-disabled')).not.toBeEnabled();
+      for (const [key, id, value] of [
+        ['\uE014', 'focus-tab-two', 'focus-panel-two'],
+        ['\uE014', 'focus-tab-one', 'focus-panel-one'],
+        ['\uE010', 'focus-tab-two', 'focus-panel-two'],
+        ['\uE011', 'focus-tab-one', 'focus-panel-one'],
+      ]) {
+        await browser.keys(key);
+        await expectNativeState(browser, id, 'focused', true);
+        await expectNativeState(browser, id, 'selected', true);
+        await expect(await browser.$('~focus-tab-selection')).toHaveText(value);
+        await expect(await browser.$('~focus-tab-selection-at-focus')).toHaveText(value);
+        await expectNativeState(browser, 'focus-tab-disabled', 'focused', false);
+      }
+    },
+    'leaves modified navigation chords to their owner': async (context) => {
+      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser, expect } = context;
+      for (const [modifier, name] of [
+        ['\uE009', 'Control'],
+        ['\uE008', 'Shift'],
+      ]) {
+        await (await browser.$('~focus-tab-one')).click();
+        await expectNativeState(browser, 'focus-tab-one', 'focused', true);
+        await browser.keys([modifier, '\uE014']);
+        await expect(await browser.$('~focus-tab-owner-key')).toHaveText(`${name}+ArrowRight`);
+        await expectNativeState(browser, 'focus-tab-one', 'selected', true);
+        await expect(await browser.$('~focus-tab-selection')).toHaveText('focus-panel-one');
+      }
+    },
+  },
+};
+
+export const ManualFocusManagement: Story = {
+  render: () => <FocusManagementScene selectionFollowsFocus={false} />,
+  tags: ['desktop-focus'],
+  wdio: {
+    'keeps manual selection independent until Enter activates the focused tab': async (context) => {
+      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser, expect } = context;
+      await (await browser.$('~focus-tab-one')).click();
+      await browser.keys('\uE014');
+      await expectNativeState(browser, 'focus-tab-two', 'focused', true);
+      await expectNativeState(browser, 'focus-tab-one', 'selected', true);
+      await expectNativeState(browser, 'focus-tab-two', 'selected', false);
+      await expect(await browser.$('~focus-tab-selection')).toHaveText('focus-panel-one');
+      await browser.keys('\uE007');
+      await expectNativeState(browser, 'focus-tab-two', 'selected', true);
+      await expect(await browser.$('~focus-tab-selection')).toHaveText('focus-panel-two');
+    },
   },
 };
 
 export const Controlled: Story = {
-  render: (args) => {
+  render: (args: TabListProps) => {
     const ControlledExample = () => {
       const [selectedValue, setSelectedValue] = useState('overview');
       return (
diff --git a/packages/agentic/components/src/primitives/focus-zone/focus-zone.stories.tsx b/packages/agentic/components/src/primitives/focus-zone/focus-zone.stories.tsx
index 295f2d1340..e9c8f7f640 100644
--- a/packages/agentic/components/src/primitives/focus-zone/focus-zone.stories.tsx
+++ b/packages/agentic/components/src/primitives/focus-zone/focus-zone.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-import type { DesktopStoryTests } from '@fluentui-react-native/desktop-driver/authoring';
+import type { WdioStory } from '@fluentui-react-native/storybook-desktop/testing';
 import { FocusZone } from '@fluentui-react-native/focus-zone';
 import type { FocusZoneDirection, FocusZoneProps, FocusZoneTabNavigation } from '@fluentui-react-native/focus-zone';
 import type { Meta, StoryObj } from '@storybook/react-native';
@@ -191,33 +191,27 @@ const meta: Meta<typeof FocusZone> = {
 
 export default meta;
 
-type Story = StoryObj<typeof FocusZone>;
+type Story = WdioStory<StoryObj<typeof FocusZone>>;
 
 export const Default: Story = {
   tags: ['desktop-e2e'],
   render: (args) => <FocusZoneExample {...args} />,
+  wdio: {
+    'navigates linearly and exits the zone on Tab': async (context) => {
+      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser } = context;
+      await (await browser.$('~focus-zone-item-1')).click();
+      await expectNativeState(browser, 'focus-zone-item-1', 'focused', true);
+      await browser.keys('\uE014');
+      await expectNativeState(browser, 'focus-zone-item-2', 'focused', true);
+      await browser.keys('\uE015');
+      await expectNativeState(browser, 'focus-zone-item-3', 'focused', true);
+      await browser.keys('\uE004');
+      await expectNativeState(browser, 'focus-zone-after', 'focused', true);
+    },
+  },
   parameters: {
-    desktopDriver: {
-      version: 1,
-      tests: [
-        {
-          id: 'linear-navigation-and-tab-exit',
-          title: 'Performs linear navigation and exits on Tab',
-          platforms: ['windows'],
-          requires: ['focus', 'keyboard'],
-          steps: [
-            { action: 'click', target: { testId: 'focus-zone-item-1' } },
-            { expect: { state: 'focused', target: { testId: 'focus-zone-item-1' }, value: true } },
-            { action: 'keys', value: ['\uE014'] },
-            { expect: { state: 'focused', target: { testId: 'focus-zone-item-2' }, value: true } },
-            { action: 'keys', value: ['\uE015'] },
-            { expect: { state: 'focused', target: { testId: 'focus-zone-item-3' }, value: true } },
-            { action: 'keys', value: ['\uE004'] },
-            { expect: { state: 'focused', target: { testId: 'focus-zone-after' }, value: true } },
-          ],
-        },
-      ],
-    } satisfies DesktopStoryTests,
     docs: {
       description: {
         story: 'Focus an item, then use the arrow keys to move through the grid and Tab to leave the zone.',
@@ -247,24 +241,18 @@ export const TwoDimensionalNavigation: Story = {
     use2DNavigation: true,
   },
   render: (args) => <FocusZoneExample {...args} />,
+  wdio: {
+    'moves geometrically between rows': async (context) => {
+      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser } = context;
+      await (await browser.$('~focus-zone-item-1')).click();
+      await expectNativeState(browser, 'focus-zone-item-1', 'focused', true);
+      await browser.keys('\uE015');
+      await expectNativeState(browser, 'focus-zone-item-4', 'focused', true);
+    },
+  },
   parameters: {
-    desktopDriver: {
-      version: 1,
-      tests: [
-        {
-          id: 'geometric-navigation',
-          title: 'Performs geometric two-dimensional navigation',
-          platforms: ['windows'],
-          requires: ['focus', 'keyboard'],
-          steps: [
-            { action: 'click', target: { testId: 'focus-zone-item-1' } },
-            { expect: { state: 'focused', target: { testId: 'focus-zone-item-1' }, value: true } },
-            { action: 'keys', value: ['\uE015'] },
-            { expect: { state: 'focused', target: { testId: 'focus-zone-item-4' }, value: true } },
-          ],
-        },
-      ],
-    } satisfies DesktopStoryTests,
     docs: {
       description: {
         story: 'Geometric navigation moves vertically between rows and horizontally within each row.',
diff --git a/packages/agentic/components/tsconfig.json b/packages/agentic/components/tsconfig.json
index 2f0d8779c3..cfd0f9ef03 100644
--- a/packages/agentic/components/tsconfig.json
+++ b/packages/agentic/components/tsconfig.json
@@ -7,7 +7,7 @@
     "tsBuildInfoFile": ".cache/tsconfig.tsbuildinfo"
   },
   "include": ["src"],
-  "exclude": ["**/*.stories.ts", "**/*.stories.tsx"],
+  "exclude": ["**/*.stories.ts", "**/*.stories.tsx", "**/*.wdio.ts"],
   "references": [
     {
       "path": "../../native/Callout/tsconfig.json"
diff --git a/packages/agentic/components/tsconfig.stories.json b/packages/agentic/components/tsconfig.stories.json
index c47daa43d5..a90e3e4cc9 100644
--- a/packages/agentic/components/tsconfig.stories.json
+++ b/packages/agentic/components/tsconfig.stories.json
@@ -2,11 +2,20 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "composite": false,
+    "allowImportingTsExtensions": true,
     "noImplicitAny": true,
     "noEmit": true,
     "tsBuildInfoFile": ".cache/tsconfig.stories.tsbuildinfo"
   },
-  "include": ["src/components/button/button.stories.tsx"],
+  "include": [
+    "src/components/button/button.stories.tsx",
+    "src/components/checkbox/checkbox.stories.tsx",
+    "src/components/input/input.stories.tsx",
+    "src/components/switch/switch.stories.tsx",
+    "src/components/tablist/tablist.stories.tsx",
+    "src/primitives/focus-zone/focus-zone.stories.tsx",
+    "src/**/*.wdio.ts"
+  ],
   "exclude": [],
   "references": [
     {
diff --git a/packages/agentic/storybook-desktop/README.md b/packages/agentic/storybook-desktop/README.md
index d0b3295bc6..57ce034bb3 100644
--- a/packages/agentic/storybook-desktop/README.md
+++ b/packages/agentic/storybook-desktop/README.md
@@ -102,8 +102,10 @@ graph; `rewriteRelativeImportExtensions` converts them to `.js` in build output.
 
 For a focused authored-test lane within the owned smoke lifecycle, set
 `STORYBOOK_SMOKE_STORY` and `STORYBOOK_SMOKE_TAG` before running
-`storybook smoke --<platform> --mode stories-and-tests`. Defaults remain
-`components-*--default` and `desktop-e2e`. An explicit selector that matches no
+`storybook smoke --<platform> --mode stories-and-tests`. These override WDIO
+story/tag settings and filter any legacy plans as well. Without overrides,
+smoke runs configured WDIO cases across all matching stories and legacy
+`desktop-e2e` plans. An explicit selector that matches no
 tests fails instead of reporting a false pass. This retains normal native
 lease/readiness and process cleanup; it does not change input capability policy.
 
@@ -163,8 +165,8 @@ app restart. This initial render only gates startup: each requested story must
 still acknowledge the matching request/run and pass native story-root
 verification before its tests execute.
 
-New component tests should use executable WDIO functions. Legacy Checkbox and
-Input plans remain supported during migration and use the `desktop-e2e` tag.
+All component catalog tests use executable WDIO functions. The legacy plan
+runner remains supported for compatibility and is covered by dedicated fixtures.
 Plan extraction evaluates only the inline
 static `desktopDriver` literal and supports TypeScript `satisfies`; dynamic
 values fail with source context instead of being omitted.
@@ -276,7 +278,10 @@ nonce-bound lease for the isolated app identity. Windows and Win32 require
 the trusted lifecycle owner to provide the existing application lease;
 the test runner does not attach by an ambiguous process name or title.
 
-Node's built-in test runner executes **each test** in a separate process. The
+Node's built-in test runner executes **each test** in a separate process. Workers
+exit naturally so HTTP handles can close; forced test exit can race Windows
+libuv teardown. The supervisor still bounds and terminates hanging workers and
+rejects nonzero exits, including exits after a callback reports success. The
 supervisor owns one attached WebDriver session at a time, authenticates the
 live manifest, navigates to and remounts the correct story before each callback, and deletes the
 session after success, failure, timeout, or worker exit. The app and driver
diff --git a/packages/agentic/storybook-desktop/config/smoke-win32.ps1 b/packages/agentic/storybook-desktop/config/smoke-win32.ps1
index 9097934822..1d680380fd 100644
--- a/packages/agentic/storybook-desktop/config/smoke-win32.ps1
+++ b/packages/agentic/storybook-desktop/config/smoke-win32.ps1
@@ -241,7 +241,7 @@ try {
   $env:STORYBOOK_SMOKE_SETTLE_MS = '250'
   & node $controlPath
   if ($LASTEXITCODE -ne 0) {
-    throw 'Win32 Storybook smoke validation failed.'
+    throw "Win32 Storybook smoke validation failed: control process exited with code $LASTEXITCODE."
   }
 
   if (-not (Get-Process -Id $appProcess.Id -ErrorAction SilentlyContinue)) {
diff --git a/packages/agentic/storybook-desktop/src/driver/representativePlans.contract.cjs b/packages/agentic/storybook-desktop/src/driver/representativePlans.contract.cjs
index 921d8980b3..233c61c9d9 100644
--- a/packages/agentic/storybook-desktop/src/driver/representativePlans.contract.cjs
+++ b/packages/agentic/storybook-desktop/src/driver/representativePlans.contract.cjs
@@ -9,18 +9,32 @@ async function main() {
   const packageRoot = path.resolve(__dirname, '..', '..');
   const projectRoot = path.resolve(packageRoot, '..', '..', '..', 'apps', 'storybook');
   const desktopDriverRoot = path.dirname(require.resolve('@fluentui-react-native/desktop-driver/package.json'));
-  const [{ makeDesktopStorybookConfig }, { createDesktopStoryManifest }, testing, wdio] = await Promise.all([
-    importFile(path.join(packageRoot, 'lib', 'config', 'index.js')),
-    importFile(path.join(packageRoot, 'lib', 'driver', 'index.js')),
-    importFile(path.join(desktopDriverRoot, 'lib', 'testing', 'index.js')),
-    importFile(path.join(desktopDriverRoot, 'lib', 'wdio', 'index.js')),
-  ]);
+  const [{ makeDesktopStorybookConfig }, { createDesktopStoryManifest }, testing, { runWdioStoryTests }, { NodeDesktopCommandRunner }] =
+    await Promise.all([
+      importFile(path.join(packageRoot, 'lib', 'config', 'index.js')),
+      importFile(path.join(packageRoot, 'lib', 'driver', 'index.js')),
+      importFile(path.join(desktopDriverRoot, 'lib', 'testing', 'index.js')),
+      importFile(path.join(packageRoot, 'lib', 'testing', 'runWdioTests.js')),
+      importFile(path.join(packageRoot, 'lib', 'cli', 'commandRunner.js')),
+    ]);
   const config = makeDesktopStorybookConfig({
     projectRoot,
     storyPackages: ['@fluentui-react-native/components'],
   });
   const manifest = await createDesktopStoryManifest(config, 'windows');
-  const planned = manifest.entries.filter(({ id, tests }) => id.startsWith('components-') && id.endsWith('--default') && tests);
+  if (manifest.entries.some(({ tests }) => tests)) {
+    throw new Error('The component catalog must not contain legacy desktopDriver story plans.');
+  }
+  const fs = require('node:fs');
+  const componentsRoot = config.resolvePackage('@fluentui-react-native/components').root;
+  const typedStories = JSON.parse(fs.readFileSync(path.join(componentsRoot, 'tsconfig.stories.json'), 'utf8')).include;
+  for (const entry of manifest.entries.filter(({ wdio }) => wdio)) {
+    if (!typedStories.includes(entry.sourcePath)) {
+      throw new Error(`WDIO story is not included in test:stories: ${entry.sourcePath}`);
+    }
+  }
+  const selectedIds = new Set(['components-button--default', 'components-checkbox--default', 'components-input--default']);
+  const planned = manifest.entries.filter(({ id }) => selectedIds.has(id));
   const windowRect = { x: 0, y: 0, width: 800, height: 600 };
   const harness = await testing.createDesktopDriverStoryHarness(manifest, {
     windows: [
@@ -82,27 +96,28 @@ async function main() {
       },
     ],
   });
-  const desktop = await wdio.connectDesktopWebdriver({
-    platformName: 'windows',
-    targetId: harness.target.id,
-    url: harness.server.url,
-  });
   try {
     const runOptions = {
       artifactsRoot: process.argv[2],
-      selection: { story: 'components-*--default', tag: 'desktop-e2e' },
+      config,
+      manifest,
+      platform: 'windows',
+      targetId: harness.target.id,
+      url: harness.server.url,
+      story: 'components-{button,checkbox,input}--default',
+      timeoutMs: 5000,
     };
-    const result = await desktop.runStoryTests(runOptions);
-    const repeated = await desktop.runStoryTests(runOptions);
+    const runner = new NodeDesktopCommandRunner({ output: { write: () => true } });
+    const result = await runWdioStoryTests(runOptions, runner);
+    const repeated = await runWdioStoryTests(runOptions, runner);
     process.stdout.write(
       JSON.stringify({
-        planned: planned.map(({ id, tests }) => ({ id, tests: tests.tests.map(({ id: testId }) => testId) })),
+        planned: planned.map(({ id, wdio }) => ({ id, tests: wdio.testNames })),
         repeated,
         result,
       }),
     );
   } finally {
-    await desktop.delete();
     await harness.close();
   }
 }
diff --git a/packages/agentic/storybook-desktop/src/driver/representativePlans.test.ts b/packages/agentic/storybook-desktop/src/driver/representativePlans.test.ts
index d0bf0b233c..5cf6ceb803 100644
--- a/packages/agentic/storybook-desktop/src/driver/representativePlans.test.ts
+++ b/packages/agentic/storybook-desktop/src/driver/representativePlans.test.ts
@@ -5,30 +5,29 @@ import path from 'node:path';
 
 jest.setTimeout(30_000);
 
-describe('representative desktop story plans', () => {
-  test('keeps the legacy Checkbox and Input plans running through WebdriverIO during migration', async () => {
+describe('representative desktop story tests', () => {
+  test('runs actual WDIO stories and guards complete catalog migration and type coverage', async () => {
     const artifactsRoot = fs.mkdtempSync(path.join(os.tmpdir(), 'representative-story-plans-'));
     try {
       const response = await runContract(artifactsRoot);
       expect(response).toMatchObject({
         planned: [
-          { id: 'components-checkbox--default', tests: ['toggles-checked-state'] },
-          { id: 'components-input--default', tests: ['types-and-clears'] },
+          { id: 'components-button--default', tests: ['exposes enabled button semantics', 'supports native pointer activation'] },
+          { id: 'components-checkbox--default', tests: ['toggles native checked state in both directions'] },
+          { id: 'components-input--default', tests: ['accepts keyboard input and clears it'] },
+        ],
+        result: [
+          { status: 'passed', testName: 'exposes enabled button semantics' },
+          { status: 'passed', testName: 'supports native pointer activation' },
+          { status: 'passed', testName: 'toggles native checked state in both directions' },
+          { status: 'passed', testName: 'accepts keyboard input and clears it' },
+        ],
+        repeated: [
+          { status: 'passed', testName: 'exposes enabled button semantics' },
+          { status: 'passed', testName: 'supports native pointer activation' },
+          { status: 'passed', testName: 'toggles native checked state in both directions' },
+          { status: 'passed', testName: 'accepts keyboard input and clears it' },
         ],
-        result: {
-          status: 'passed',
-          tests: [
-            { status: 'passed', testId: 'toggles-checked-state' },
-            { status: 'passed', testId: 'types-and-clears' },
-          ],
-        },
-        repeated: {
-          status: 'passed',
-          tests: [
-            { status: 'passed', testId: 'toggles-checked-state' },
-            { status: 'passed', testId: 'types-and-clears' },
-          ],
-        },
       });
       expect(fs.existsSync(path.join(artifactsRoot, 'run.json'))).toBe(true);
     } finally {
diff --git a/packages/agentic/storybook-desktop/src/testing/runWdioTests.ts b/packages/agentic/storybook-desktop/src/testing/runWdioTests.ts
index 35fbbc90c4..27b7ef5c00 100644
--- a/packages/agentic/storybook-desktop/src/testing/runWdioTests.ts
+++ b/packages/agentic/storybook-desktop/src/testing/runWdioTests.ts
@@ -154,10 +154,11 @@ export async function runWdioStoryTests(
           {
             command: process.execPath,
             label: `wdio "${displayName}"`,
+            // Forced exit races HTTP handle teardown on Windows. The supervisor
+            // still bounds and terminates workers that do not exit naturally.
             args: [
               '--test',
               '--test-concurrency=1',
-              '--test-force-exit',
               `--test-timeout=${Math.min(settings.timeoutMs + 5000, 2_147_483_647)}`,
               `--test-reporter=${settings.reporter}`,
               specPath,

From f1b08c606b570eff4a0175fe34f684bf5de5d386 Mon Sep 17 00:00:00 2001
From: Jason Morse <jasonmo360@gmail.com>
Date: Tue, 15 Sep 2026 08:46:47 -0700
Subject: [PATCH 09/11] fix align-deps bug with rnw update

---
 packages/agentic/components/package.json |  2 +-
 yarn.lock                                | 15 ++-------------
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/packages/agentic/components/package.json b/packages/agentic/components/package.json
index e7ddd629b1..f8ef186834 100644
--- a/packages/agentic/components/package.json
+++ b/packages/agentic/components/package.json
@@ -74,7 +74,7 @@
     "react-native": "^0.81.6",
     "react-native-macos": "^0.81.0",
     "react-native-svg": "^15.12.1",
-    "react-native-windows": "^0.81.35"
+    "react-native-windows": "^0.81.0"
   },
   "peerDependenciesMeta": {
     "@office-iss/react-native-win32": {
diff --git a/yarn.lock b/yarn.lock
index db436bdfa3..d43cfa6e96 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3052,7 +3052,7 @@ __metadata:
     react-native: ^0.81.6
     react-native-macos: ^0.81.0
     react-native-svg: ^15.12.1
-    react-native-windows: ^0.81.35
+    react-native-windows: ^0.81.0
   peerDependenciesMeta:
     "@office-iss/react-native-win32":
       optional: true
@@ -9465,18 +9465,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rnx-kit/tools-react-native@npm:^2.1.0, @rnx-kit/tools-react-native@npm:^2.3.0, @rnx-kit/tools-react-native@npm:^2.3.1, @rnx-kit/tools-react-native@npm:^2.3.2, @rnx-kit/tools-react-native@npm:^2.3.3, @rnx-kit/tools-react-native@npm:^2.3.5, @rnx-kit/tools-react-native@npm:^2.3.7":
-  version: 2.3.7
-  resolution: "@rnx-kit/tools-react-native@npm:2.3.7"
-  dependencies:
-    "@rnx-kit/tools-filesystem": "npm:^0.2.0"
-    "@rnx-kit/tools-node": "npm:^3.0.4"
-    "@rnx-kit/types-bundle-config": "npm:^1.0.0"
-  checksum: 10c0/4ae1830efabcb10fd24a7970e4200d5fabb52a517f53e76e6c0e9657a1a2fcf90b986c0a4cdb7b39861db615298812c05c6207b62b02901bfaf6682198f1720f
-  languageName: node
-  linkType: hard
-
-"@rnx-kit/tools-react-native@npm:^2.3.8":
+"@rnx-kit/tools-react-native@npm:^2.1.0, @rnx-kit/tools-react-native@npm:^2.3.0, @rnx-kit/tools-react-native@npm:^2.3.1, @rnx-kit/tools-react-native@npm:^2.3.2, @rnx-kit/tools-react-native@npm:^2.3.3, @rnx-kit/tools-react-native@npm:^2.3.5, @rnx-kit/tools-react-native@npm:^2.3.7, @rnx-kit/tools-react-native@npm:^2.3.8":
   version: 2.3.8
   resolution: "@rnx-kit/tools-react-native@npm:2.3.8"
   dependencies:

From dd77a564d76971e3c7f31c99cfd2977568452db0 Mon Sep 17 00:00:00 2001
From: Jason Morse <jasonmo360@gmail.com>
Date: Tue, 15 Sep 2026 09:09:45 -0700
Subject: [PATCH 10/11] basic fixes on merge

---
 .changeset/focus-management-foundation.md     |   2 +
 .../agentic/components/WIN32-FOCUS-PLAN.md    |  74 ++++++++-
 .../src/hooks/useFocusablePressable.native.ts | 135 ++++++++++++++++
 .../src/hooks/useFocusablePressable.ts        | 152 +-----------------
 .../src/hooks/useFocusablePressable.types.ts  |  23 +++
 5 files changed, 237 insertions(+), 149 deletions(-)
 create mode 100644 packages/framework-base/src/hooks/useFocusablePressable.native.ts
 create mode 100644 packages/framework-base/src/hooks/useFocusablePressable.types.ts

diff --git a/.changeset/focus-management-foundation.md b/.changeset/focus-management-foundation.md
index 7988582d05..3864d15c47 100644
--- a/.changeset/focus-management-foundation.md
+++ b/.changeset/focus-management-foundation.md
@@ -7,3 +7,5 @@
 ---
 
 Add ref-backed focus targets and cancellable focus requests, shared focusable pressable behavior, live focused-owner modality subscriptions, and shared-controller popup input boundaries. Migrate agentic components and commit TabList eligibility before requesting native focus. Preserve native activation, adapt unidentified Win32 key codes without duplicate presses, and expose Toggle/Select accessibility actions. Add owned targeted native focus qualification through smoke story/tag selectors.
+
+Keep the focusable pressable implementation native-only so React-only Framework Base consumers can load the generic entrypoint without importing the React Native runtime.
diff --git a/packages/agentic/components/WIN32-FOCUS-PLAN.md b/packages/agentic/components/WIN32-FOCUS-PLAN.md
index d79809548b..e788f9771c 100644
--- a/packages/agentic/components/WIN32-FOCUS-PLAN.md
+++ b/packages/agentic/components/WIN32-FOCUS-PLAN.md
@@ -57,8 +57,10 @@ exclusion rather than treating that enabled-state announcement gap as proof of
 focusability. It remains separate from the verified focus contract.
 
 Affected workspace suites pass, as do the root build and package lint/format.
-The required uncached repository test graph stops in two unchanged codemod
-fixture comparisons; these unrelated baseline failures were not modified.
+The earlier Windows uncached repository test graph stopped in two unchanged
+codemod fixture comparisons. The September 15 macOS rerun passes all 80 tasks
+after the Framework Base import-boundary repair below; those fixture failures
+were not reproduced or modified on macOS.
 
 Still gated: complete three-lane P0/V1 parity, macOS native input/VoiceOver,
 the Win32 editor enabled-state announcement, full popup/window restoration and activity
@@ -67,6 +69,69 @@ or RadioGroup is not introduced. N0/native-lib remains deferred: observed
 component activation/ref gaps were resolved without a new native module; native
 window observation still needs its own scoped proof and host integration.
 
+### macOS pre-PR validation (September 15, 2026)
+
+**Observed:** `foundation-settings` failed before running either suite because
+Framework Base's generic entrypoint eagerly imported `react-native` through
+`useFocusablePressable`. The implementation now uses the established
+`.native.ts` split, with shared public types and an explicit unsupported-runtime
+error in the generic facade. The native implementation's behavior is unchanged.
+Both React-only suites pass (15 tests), Framework Base passes 19 suites (147
+tests), the root TypeScript build passes, affected workspace lint passes, and
+`yarn lage test --no-cache` passes all 80 tasks.
+
+**Observed:** From `apps/storybook`, `yarn storybook bundle --macos` and
+`yarn storybook smoke --macos --mode stories-and-tests` complete successfully.
+The owned native lifecycle builds and launches the macOS app, renders all 165
+stories, and shuts down its app and services. The WDIO result is **6 passed,
+12 skipped**, not 18 focus tests passed. The six executed cases cover Button
+semantics/pointer activation/caller-owned selection, Checkbox toggling, and
+Input typing/clearing.
+
+All twelve focus-specific cases explicitly skip macOS with the Windows/Win32
+contract guard in `src/common/desktopFocus.wdio.ts`, including both FocusZone
+cases. The helper advertises keyboard and pointer capabilities; this is an
+authored platform-coverage gap, not an unavailable native driver. A successful
+smoke exit therefore does not close the macOS focus gate.
+
+The committed-branch review also found two implementation issues that the
+import-boundary repair does not change:
+
+- **macOS keyboard release:** `useFocusablePressable.native.ts` cancels its
+  activation pairing when another key arrives, then prevents the unmatched
+  Space/Return release. RNmacOS Pressability activates on keydown and uses keyup
+  for `onPressOut`, so this also suppresses pressed-state cleanup. A JavaScript
+  integration comparison using installed RNmacOS 0.81.9 Pressability reproduces
+  Space down, `x` down/up, Space up leaving the branch pressed with no
+  `onPressOut`; `origin/main` clears the press. This is not yet a native-app
+  reproduction. Preserve macOS release cleanup independently of Windows
+  activation-pairing cancellation.
+- **Windows Fabric accessibility actions:** Checkbox/Switch declare and handle
+  `Toggle`, and Tab declares and handles `Select`, on every endpoint. Installed
+  RNW 0.81.35 Fabric dispatches lowercase `toggle`/`select` and matches declared
+  actions case-sensitively. Resolve declarations and handlers per endpoint,
+  preserving Win32 spelling, and validate actual UIA action invocation.
+  Physical input plus native state assertions did not exercise this path;
+  this finding is source-established, not an executed UIA reproduction.
+
+**Pre-PR recommendation:** resolve those implementation issues and obtain
+non-skipped AppKit-specific evidence for the shared behavior changed by this
+branch before marking it ready to merge. Focused manual checks can supply
+evidence; porting all twelve Windows-only cases is not itself a prerequisite:
+
+| Area                       | Minimum remaining macOS evidence                                                                                                                                                                                                     |
+| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Button, Checkbox, Switch   | Tab/Shift+Tab entry and disabled skipping; native Return/Space phase and exactly-once action counts; repeats, overlapping keys, modifiers, blur/detach; pointer activation without imposing Windows click-focus.                     |
+| Focus targets and modality | Confirm imperative focus without rewriting modality; disabled/detached requests; self-focus versus nested descendants; same-target keyboard/pointer changes and nested theme sharing.                                                |
+| TabList and FocusZone      | Actual first responder after committed eligibility/selection; automatic/manual selection; arrows, Home/End, wrap, disabled/removal recovery, Tab exit, and modified-key propagation.                                                 |
+| Input and accessibility    | Field-editor focus, caret/editing shortcuts and disabled Tab exclusion; VoiceOver role/name/value, selected/checked announcements, and native actions on representative controls.                                                    |
+| AppKit visuals and windows | Native/custom ring exclusivity and same-target updates across light/dark/high contrast; keyboard-navigation settings; inactive-window first click, key-window transitions, and a representative existing Callout open/dismiss smoke. |
+
+Keep the wider three-lane V1 parity, exhaustive popup restoration, P4
+scale/clipping/contrast matrix, and N0/native-lib work explicitly deferred.
+Those follow-ups are not a reason to add a new menu owner, RadioGroup, or native
+module to this PR, but they must not be described as completed qualification.
+
 The investigation used three independent read-only passes over V1 leaf controls,
 navigation/popups, and shared interaction/native-JavaScript adapters, followed by
 a comparison with the new components. Repository paths and line ranges below
@@ -564,8 +629,9 @@ Windows Fabric, and macOS lifecycles
 and stop owned Metro/app processes between runs. Protect unrelated sessions and
 do not alter disabled-input policy to make a report appear green.
 
-No native tests were run during this investigation/refinement; macOS native
-code was researched from this Windows checkout. Native event ordering, complete
+The original investigation/refinement researched macOS native code from a
+Windows checkout without running native tests. Subsequent executed results are
+recorded in the execution status above. Native event ordering, complete
 Callout/FocusTrapZone restoration, renderer ring behavior, and the native-lib
 spike remain explicit evidence gates. Do not port mobile stubs, macOS timing
 workarounds, legacy global state, or all V1 APIs wholesale.
diff --git a/packages/framework-base/src/hooks/useFocusablePressable.native.ts b/packages/framework-base/src/hooks/useFocusablePressable.native.ts
new file mode 100644
index 0000000000..bf20c1a742
--- /dev/null
+++ b/packages/framework-base/src/hooks/useFocusablePressable.native.ts
@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { Platform } from 'react-native';
+import type { PressableProps } from 'react-native';
+
+import { isSelfTargetEvent } from './focusTarget';
+import { useFocusTarget } from './useFocusTarget';
+import type { FocusTargetBinding } from './useFocusTarget';
+import { usePressableState } from './usePressableState';
+import type { PressableState } from '../types/interactive.types';
+import type { FocusablePressableProps, FocusKeyboardEvent } from './useFocusablePressable.types';
+
+export type { FocusablePressableProps, FocusKeyboardEvent } from './useFocusablePressable.types';
+
+const interactionKeys = ['pressed', 'hovered'] as const;
+
+function activationKey(event: FocusKeyboardEvent): string | undefined {
+  const { key, code } = event.nativeEvent;
+  if (code === 'Enter' || key === 'Enter') {
+    return 'Enter';
+  }
+  if (code === 'Space' || key === ' ' || key === 'Space' || key === 'Spacebar') {
+    return 'Space';
+  }
+  if (code === 'GamepadA') {
+    return 'GamepadA';
+  }
+  return undefined;
+}
+
+/**
+ * Shares native Pressability's activation path rather than synthesizing presses.
+ * The returned internal ref must be composed onto the actual pressable slot.
+ */
+export function useFocusablePressable(
+  props: FocusablePressableProps,
+  { focusOnPress = true }: { focusOnPress?: boolean } = {},
+): [FocusablePressableProps, PressableState, FocusTargetBinding] {
+  const platform: string = Platform.OS;
+  const { disabled = false, focusable = true, onFocus, onBlur, onPress, onKeyDown, onKeyUp } = props;
+  const target = useFocusTarget(!disabled && focusable);
+  const { focusTarget, focusTargetRef } = target;
+  const keyDown = React.useRef<string | undefined>(undefined);
+  const keyGeneration = React.useRef<number | undefined>(undefined);
+  const [interactionProps, interactionState] = usePressableState(props, interactionKeys);
+
+  React.useLayoutEffect(() => {
+    if (disabled || !focusable) {
+      keyDown.current = undefined;
+      keyGeneration.current = undefined;
+    }
+  }, [disabled, focusable]);
+
+  const handlePress = (event: Parameters<NonNullable<PressableProps['onPress']>>[0]) => {
+    // Pressability has already chosen the responder. Pointer targets may be
+    // noninteractive text/icon descendants of this pressable.
+    if (disabled) {
+      return;
+    }
+    const native = event.nativeEvent;
+    const keyboard = native != null && ('key' in native || 'code' in native);
+    if (focusOnPress && focusable && !keyboard && (platform === 'windows' || platform === 'win32')) {
+      const request = focusTarget.requestFocus('pointer');
+      if (request.status !== 'requested' && request.status !== 'confirmed') {
+        console.warn(`Cannot focus the pressable target: ${request.status}.`);
+      }
+    }
+    onPress?.(event);
+  };
+  const focusProps = {
+    onFocus: (event: Parameters<NonNullable<PressableProps['onFocus']>>[0]) => {
+      target.onFocus(event);
+      onFocus?.(event);
+    },
+    onBlur: (event: Parameters<NonNullable<PressableProps['onBlur']>>[0]) => {
+      if (isSelfTargetEvent(event)) {
+        keyDown.current = undefined;
+        keyGeneration.current = undefined;
+      }
+      target.onBlur(event);
+      onBlur?.(event);
+    },
+    onKeyDown: (event: FocusKeyboardEvent) => {
+      onKeyDown?.(event);
+      const key = activationKey(event);
+      const native = event.nativeEvent;
+      const modifiers = native.altKey || native.metaKey || (platform !== 'win32' && (native.ctrlKey || native.shiftKey));
+      if (key) {
+        if (
+          disabled ||
+          !focusable ||
+          modifiers ||
+          !isSelfTargetEvent(event) ||
+          (keyDown.current === key && keyGeneration.current === focusTarget.generation)
+        ) {
+          event.preventDefault?.();
+          return;
+        }
+        keyDown.current = event.defaultPrevented ? undefined : key;
+        keyGeneration.current = focusTarget.generation;
+        event.stopPropagation?.();
+      } else {
+        keyDown.current = undefined;
+        keyGeneration.current = undefined;
+      }
+    },
+    onKeyUp: (event: FocusKeyboardEvent) => {
+      onKeyUp?.(event);
+      const key = activationKey(event);
+      const paired = keyDown.current === key && keyGeneration.current === focusTarget.generation;
+      keyDown.current = undefined;
+      keyGeneration.current = undefined;
+      if (key) {
+        if (disabled || !focusable || !isSelfTargetEvent(event) || !paired) {
+          event.preventDefault?.();
+          return;
+        }
+        event.stopPropagation?.();
+        if (platform === 'win32' && !event.defaultPrevented && !['Enter', 'Space', 'GamepadA'].includes(event.nativeEvent.code ?? '')) {
+          // Office Win32 can report code="Unidentified". Its Pressability only
+          // recognizes code, unlike V1's key-based activation. Keep one paired
+          // fallback, passing the native key event just as Pressability does.
+          event.preventDefault?.();
+          handlePress(event as Parameters<NonNullable<PressableProps['onPress']>>[0]);
+        }
+      }
+    },
+    onPress: handlePress,
+  };
+
+  return [
+    { ...interactionProps, ...focusProps, focusable: !disabled && focusable },
+    { ...interactionState, focused: target.focused },
+    { focusTarget, focusTargetRef },
+  ];
+}
diff --git a/packages/framework-base/src/hooks/useFocusablePressable.ts b/packages/framework-base/src/hooks/useFocusablePressable.ts
index f236d653fb..debbdda826 100644
--- a/packages/framework-base/src/hooks/useFocusablePressable.ts
+++ b/packages/framework-base/src/hooks/useFocusablePressable.ts
@@ -1,153 +1,15 @@
-import * as React from 'react';
-import { Platform } from 'react-native';
-import type { PressableProps } from 'react-native';
-
-import { isSelfTargetEvent } from './focusTarget';
-import type { FocusTargetEvent } from './focusTarget';
-import { useFocusTarget } from './useFocusTarget';
-import type { FocusTargetBinding } from './useFocusTarget';
-import { usePressableState } from './usePressableState';
 import type { PressableState } from '../types/interactive.types';
+import type { FocusablePressableProps } from './useFocusablePressable.types';
+import type { FocusTargetBinding } from './useFocusTarget';
 
-export interface FocusKeyboardEvent extends FocusTargetEvent {
-  readonly nativeEvent: {
-    readonly target?: unknown;
-    readonly key?: string;
-    readonly code?: string;
-    readonly altKey?: boolean;
-    readonly ctrlKey?: boolean;
-    readonly metaKey?: boolean;
-    readonly shiftKey?: boolean;
-  };
-  readonly defaultPrevented?: boolean;
-  preventDefault?(): void;
-  stopPropagation?(): void;
-}
-
-export type FocusablePressableProps = Omit<PressableProps, 'onKeyDown' | 'onKeyUp'> & {
-  onKeyDown?: (event: FocusKeyboardEvent) => void;
-  onKeyUp?: (event: FocusKeyboardEvent) => void;
-};
-
-const interactionKeys = ['pressed', 'hovered'] as const;
-
-function activationKey(event: FocusKeyboardEvent): string | undefined {
-  const { key, code } = event.nativeEvent;
-  if (code === 'Enter' || key === 'Enter') {
-    return 'Enter';
-  }
-  if (code === 'Space' || key === ' ' || key === 'Space' || key === 'Spacebar') {
-    return 'Space';
-  }
-  if (code === 'GamepadA') {
-    return 'GamepadA';
-  }
-  return undefined;
-}
+export type { FocusablePressableProps, FocusKeyboardEvent } from './useFocusablePressable.types';
 
 /**
- * Shares native Pressability's activation path rather than synthesizing presses.
- * The returned internal ref must be composed onto the actual pressable slot.
+ * Native focus and Pressability require a React Native runtime.
  */
 export function useFocusablePressable(
-  props: FocusablePressableProps,
-  { focusOnPress = true }: { focusOnPress?: boolean } = {},
+  _props: FocusablePressableProps,
+  _options: { focusOnPress?: boolean } = {},
 ): [FocusablePressableProps, PressableState, FocusTargetBinding] {
-  const platform: string = Platform.OS;
-  const { disabled = false, focusable = true, onFocus, onBlur, onPress, onKeyDown, onKeyUp } = props;
-  const target = useFocusTarget(!disabled && focusable);
-  const { focusTarget, focusTargetRef } = target;
-  const keyDown = React.useRef<string | undefined>(undefined);
-  const keyGeneration = React.useRef<number | undefined>(undefined);
-  const [interactionProps, interactionState] = usePressableState(props, interactionKeys);
-
-  React.useLayoutEffect(() => {
-    if (disabled || !focusable) {
-      keyDown.current = undefined;
-      keyGeneration.current = undefined;
-    }
-  }, [disabled, focusable]);
-
-  const handlePress = (event: Parameters<NonNullable<PressableProps['onPress']>>[0]) => {
-    // Pressability has already chosen the responder. Pointer targets may be
-    // noninteractive text/icon descendants of this pressable.
-    if (disabled) {
-      return;
-    }
-    const native = event.nativeEvent;
-    const keyboard = native != null && ('key' in native || 'code' in native);
-    if (focusOnPress && focusable && !keyboard && (platform === 'windows' || platform === 'win32')) {
-      const request = focusTarget.requestFocus('pointer');
-      if (request.status !== 'requested' && request.status !== 'confirmed') {
-        console.warn(`Cannot focus the pressable target: ${request.status}.`);
-      }
-    }
-    onPress?.(event);
-  };
-  const focusProps = {
-    onFocus: (event: Parameters<NonNullable<PressableProps['onFocus']>>[0]) => {
-      target.onFocus(event);
-      onFocus?.(event);
-    },
-    onBlur: (event: Parameters<NonNullable<PressableProps['onBlur']>>[0]) => {
-      if (isSelfTargetEvent(event)) {
-        keyDown.current = undefined;
-        keyGeneration.current = undefined;
-      }
-      target.onBlur(event);
-      onBlur?.(event);
-    },
-    onKeyDown: (event: FocusKeyboardEvent) => {
-      onKeyDown?.(event);
-      const key = activationKey(event);
-      const native = event.nativeEvent;
-      const modifiers = native.altKey || native.metaKey || (platform !== 'win32' && (native.ctrlKey || native.shiftKey));
-      if (key) {
-        if (
-          disabled ||
-          !focusable ||
-          modifiers ||
-          !isSelfTargetEvent(event) ||
-          (keyDown.current === key && keyGeneration.current === focusTarget.generation)
-        ) {
-          event.preventDefault?.();
-          return;
-        }
-        keyDown.current = event.defaultPrevented ? undefined : key;
-        keyGeneration.current = focusTarget.generation;
-        event.stopPropagation?.();
-      } else {
-        keyDown.current = undefined;
-        keyGeneration.current = undefined;
-      }
-    },
-    onKeyUp: (event: FocusKeyboardEvent) => {
-      onKeyUp?.(event);
-      const key = activationKey(event);
-      const paired = keyDown.current === key && keyGeneration.current === focusTarget.generation;
-      keyDown.current = undefined;
-      keyGeneration.current = undefined;
-      if (key) {
-        if (disabled || !focusable || !isSelfTargetEvent(event) || !paired) {
-          event.preventDefault?.();
-          return;
-        }
-        event.stopPropagation?.();
-        if (platform === 'win32' && !event.defaultPrevented && !['Enter', 'Space', 'GamepadA'].includes(event.nativeEvent.code ?? '')) {
-          // Office Win32 can report code="Unidentified". Its Pressability only
-          // recognizes code, unlike V1's key-based activation. Keep one paired
-          // fallback, passing the native key event just as Pressability does.
-          event.preventDefault?.();
-          handlePress(event as Parameters<NonNullable<PressableProps['onPress']>>[0]);
-        }
-      }
-    },
-    onPress: handlePress,
-  };
-
-  return [
-    { ...interactionProps, ...focusProps, focusable: !disabled && focusable },
-    { ...interactionState, focused: target.focused },
-    { focusTarget, focusTargetRef },
-  ];
+  throw new Error('useFocusablePressable is only available in React Native environments.');
 }
diff --git a/packages/framework-base/src/hooks/useFocusablePressable.types.ts b/packages/framework-base/src/hooks/useFocusablePressable.types.ts
new file mode 100644
index 0000000000..f504d82413
--- /dev/null
+++ b/packages/framework-base/src/hooks/useFocusablePressable.types.ts
@@ -0,0 +1,23 @@
+import type { PressableProps } from 'react-native';
+
+import type { FocusTargetEvent } from './focusTarget';
+
+export interface FocusKeyboardEvent extends FocusTargetEvent {
+  readonly nativeEvent: {
+    readonly target?: unknown;
+    readonly key?: string;
+    readonly code?: string;
+    readonly altKey?: boolean;
+    readonly ctrlKey?: boolean;
+    readonly metaKey?: boolean;
+    readonly shiftKey?: boolean;
+  };
+  readonly defaultPrevented?: boolean;
+  preventDefault?(): void;
+  stopPropagation?(): void;
+}
+
+export type FocusablePressableProps = Omit<PressableProps, 'onKeyDown' | 'onKeyUp'> & {
+  onKeyDown?: (event: FocusKeyboardEvent) => void;
+  onKeyUp?: (event: FocusKeyboardEvent) => void;
+};

From a7cc9e244411f20b92710a843384664ebc6d075e Mon Sep 17 00:00:00 2001
From: Jason Morse <jasonmo360@gmail.com>
Date: Tue, 15 Sep 2026 22:33:57 -0700
Subject: [PATCH 11/11] macos test finalizatino

---
 .changeset/focus-management-foundation.md     |  10 ++
 .../actions/setup-desktop-driver/action.yml   |   4 +
 .../references/focus-macos.md                 |  15 ++
 .../references/focus.md                       |  15 +-
 .../references/state-and-accessibility.md     |  21 +++
 .../references/tests-and-stories.md           |  64 +++++++-
 packages/agentic/components/AGENTS.md         |   4 +
 .../agentic/components/WIN32-FOCUS-PLAN.md    | 149 ++++++++++--------
 .../src/common/StoryStatus.story-helpers.tsx  |  11 ++
 .../src/common/desktopFocus.wdio.ts           |  23 ++-
 .../button/button.keyboard.test.tsx           | 126 +++++++++++++++
 .../src/components/button/button.stories.tsx  | 141 +++++++++++++----
 .../src/components/button/spec/interaction.md |   7 +
 .../src/components/checkbox/SPEC.md           |  13 +-
 .../src/components/checkbox/checkbox.test.tsx | 139 ++++++++++------
 .../components/checkbox/spec/accessibility.md |  22 ++-
 .../components/checkbox/spec/interaction.md   |  10 +-
 .../src/components/checkbox/spec/source.json  |   2 +-
 .../src/components/checkbox/useCheckbox.ts    |  24 +--
 .../components/src/components/switch/SPEC.md  |   9 +-
 .../components/switch/spec/accessibility.md   |  21 +++
 .../src/components/switch/spec/interaction.md |   3 +-
 .../src/components/switch/spec/source.json    |   2 +-
 .../src/components/switch/switch.stories.tsx  |  13 +-
 .../src/components/switch/switch.test.tsx     | 101 ++++++++++--
 .../src/components/switch/useSwitch.ts        |  17 +-
 .../components/src/components/tab/SPEC.md     |  12 +-
 .../src/components/tab/spec/accessibility.md  |  23 +++
 .../src/components/tab/spec/interaction.md    |  10 ++
 .../src/components/tab/spec/source.json       |   2 +-
 .../src/components/tab/tab.test.tsx           | 120 +++++++++++++-
 .../components/src/components/tab/useTab.ts   |  15 +-
 .../components/src/components/tablist/SPEC.md |   5 +-
 .../components/tablist/spec/interaction.md    |   8 +-
 .../components/tablist/tablist.stories.tsx    |  81 +++++++---
 .../focus-zone/focus-zone.stories.tsx         |   9 +-
 packages/agentic/components/tsconfig.json     |   2 +-
 .../agentic/components/tsconfig.stories.json  |   1 +
 .../desktop-driver/native/macos/README.md     |  10 ++
 .../Sources/DesktopDriverHost/Input.swift     |  71 +++++++--
 .../Sources/DesktopDriverHost/SelfTest.swift  |  49 ++++++
 .../references/ci-integration.md              |   9 ++
 packages/components/FocusZone/SPEC.md         |   5 +
 .../FocusZone/src/FocusZone.types.ts          |   5 +-
 packages/framework-base/AGENTS.md             |  10 ++
 .../src/accessibility/AGENTS.md               |  80 ++++++++++
 .../resolveAccessibilityAction.test.ts        |  80 ++++++++++
 .../resolveAccessibilityAction.ts             |  49 ++++++
 .../resolveAccessibilityAction.types.test.ts  |  19 +++
 .../src/hooks/focusTarget.test.ts             |  61 +++++++
 .../framework-base/src/hooks/focusTarget.ts   |  35 ++--
 .../src/hooks/useFocusTarget.test.tsx         |  55 +++++++
 .../src/hooks/useFocusablePressable.native.ts |  65 +++++++-
 .../src/hooks/useFocusablePressable.test.tsx  |  87 +++++++++-
 packages/framework-base/src/index.ts          |   6 +
 55 files changed, 1651 insertions(+), 299 deletions(-)
 create mode 100644 packages/agentic/components/src/common/StoryStatus.story-helpers.tsx
 create mode 100644 packages/agentic/components/src/components/button/button.keyboard.test.tsx
 create mode 100644 packages/framework-base/src/accessibility/AGENTS.md
 create mode 100644 packages/framework-base/src/accessibility/resolveAccessibilityAction.test.ts
 create mode 100644 packages/framework-base/src/accessibility/resolveAccessibilityAction.ts
 create mode 100644 packages/framework-base/src/accessibility/resolveAccessibilityAction.types.test.ts
 create mode 100644 packages/framework-base/src/hooks/useFocusTarget.test.tsx

diff --git a/.changeset/focus-management-foundation.md b/.changeset/focus-management-foundation.md
index 3864d15c47..e9e9542c62 100644
--- a/.changeset/focus-management-foundation.md
+++ b/.changeset/focus-management-foundation.md
@@ -4,8 +4,18 @@
 "@fluentui-react-native/components": minor
 "@fluentui-react-native/storybook-desktop-runtime": patch
 "@fluentui-react-native/storybook-desktop": minor
+"@fluentui-react-native/desktop-driver": patch
+"@fluentui-react-native/focus-zone": patch
 ---
 
 Add ref-backed focus targets and cancellable focus requests, shared focusable pressable behavior, live focused-owner modality subscriptions, and shared-controller popup input boundaries. Migrate agentic components and commit TabList eligibility before requesting native focus. Preserve native activation, adapt unidentified Win32 key codes without duplicate presses, and expose Toggle/Select accessibility actions. Add owned targeted native focus qualification through smoke story/tag selectors.
 
 Keep the focusable pressable implementation native-only so React-only Framework Base consumers can load the generic entrypoint without importing the React Native runtime.
+
+Separate native keyboard press cleanup from activation pairing, preserving macOS keydown activation and clearing pressed feedback after interruption, blur, disable, or target replacement. Centralize endpoint-specific accessibility action contracts in Framework Base, and execute shared focus stories on macOS with narrowly scoped Windows-only pointer assertions.
+
+Carry owned modifier state on macOS native input events so rapid WebDriver chords such as Shift+Tab are delivered correctly.
+
+Clarify that FocusZone uses geometric directional navigation on macOS, while Windows and Win32 opt into geometry with use2DNavigation.
+
+Coalesce same-instance callback-ref handoffs without changing snapshots or mount generations, while rejecting detached-target activation immediately. Track repeated native key events separately from held physical keys so a single modifier release cannot leave later input modified.
diff --git a/.github/actions/setup-desktop-driver/action.yml b/.github/actions/setup-desktop-driver/action.yml
index 3ef48b768b..bc15c0648a 100644
--- a/.github/actions/setup-desktop-driver/action.yml
+++ b/.github/actions/setup-desktop-driver/action.yml
@@ -62,6 +62,10 @@ runs:
       run: |
         set -euo pipefail
 
+        # AppKit's all-controls Tab order is independent of input permissions or screen lock.
+        defaults write -g AppleKeyboardUIMode -int 3
+        swift -e 'import AppKit; guard NSApplication.shared.isFullKeyboardAccessEnabled else { fputs("macOS Keyboard navigation is not enabled.\n", stderr); exit(1) }; print("macOS Keyboard navigation enabled.")'
+
         cache_root="$RUNNER_TEMP/furn-desktop-driver-native"
         mkdir -p "$cache_root"
         echo "FURN_DESKTOP_DRIVER_CACHE_ROOT=$cache_root" >> "$GITHUB_ENV"
diff --git a/.github/skills/agentic-component-authoring/references/focus-macos.md b/.github/skills/agentic-component-authoring/references/focus-macos.md
index f27ae558a2..1e9cf6184c 100644
--- a/.github/skills/agentic-component-authoring/references/focus-macos.md
+++ b/.github/skills/agentic-component-authoring/references/focus-macos.md
@@ -67,11 +67,26 @@ installed RNmacOS `RCTViewComponentView.mm:1769-1779`;
   activation. Do not copy Win32's modifier allowance or TabList Ctrl+Tab behavior.
 - Confirm exactly-once keyboard/accessibility activation; an AX action is not
   equivalent evidence to a physical key sequence.
+- RNmacOS Pressability activates Return/Space on keydown; keyup supplies
+  `onPressOut`. Keep native press cleanup separate from Windows keyup-activation
+  pairing. Intervening keys, caller cancellation, blur, disable, and target
+  replacement must not strand pressed feedback or duplicate release callbacks.
+  Retain a pooled event only with `persist()` and release that reference when
+  the keyboard press ends.
 - Use AppKit's key-view loop where applicable. Respect keyboard-navigation/Full
   Keyboard Access settings and test enabled/disabled settings explicitly.
   `NSApplication.isFullKeyboardAccessEnabled` is not KVO-observable according to
   Apple; do not invent a KVO subscription or assume one cached startup value
   remains current.
+- The shared native focus stories enter through an editable control and Tab,
+  rather than forcing ordinary pointer clicks to focus. The all-controls lane
+  requires Keyboard navigation enabled; record that setting, obtain permission
+  before changing a developer's setting, and restore changes authorized as
+  temporary. Keep it enabled on development/CI Macs unless the owner chooses
+  otherwise; locking the desktop gates physical input, not this preference.
+  A Windows-only pointer
+  assertion may be a no-op on macOS, but the shared focus/activation assertions
+  must still execute.
 - Do not equate VoiceOver navigation focus with the application's keyboard first
   responder. Validate role/name/value and native action behavior in both modes.
 
diff --git a/.github/skills/agentic-component-authoring/references/focus.md b/.github/skills/agentic-component-authoring/references/focus.md
index f65ab773d2..da21bd550d 100644
--- a/.github/skills/agentic-component-authoring/references/focus.md
+++ b/.github/skills/agentic-component-authoring/references/focus.md
@@ -93,6 +93,10 @@ agentic components use React 19.
 2. Compose interaction handlers with exactly one activation owner. Native
    Pressable activation, key handlers, and accessibility actions must not each
    invoke the same action independently.
+   Separate activation cancellation from cleanup of an already-started native
+   press. macOS activates on keydown; Windows/Win32 activate on keyup. Always
+   finish pressed feedback on release, self-blur, disable, or target replacement
+   without generating a new action or forwarding `onPressOut` twice.
 3. Call `useFocusVisuals` after resolving focus. Store its private optional
    `FocusRing` in state and apply `enableFocusRing` only to the focus target.
 4. In the styling phase call `applyFocusRingStyles` with theme state and resolved
@@ -116,9 +120,14 @@ updates or per-control pointer trackers.
 Focus targets expose `requestFocus(intent)`, an observable snapshot, and a
 mount generation. A request reports `requested` until a focus event confirms it;
 detach, disable, replacement, or explicit cancellation invalidate pending work.
-The controller preserves focus for a same-commit ref handoff to the identical
-native instance, not a later remount. Higher-level native window activity and
-cross-window restore remain separately qualified.
+Same-commit ref handoffs to the identical native instance preserve focus,
+snapshot identity, and mount generation; inline forwarding callbacks must not
+create a subscription/render loop or cancel a valid keyboard press. Registration
+epochs reject stale cleanup independently. Genuine detach notifications are
+coalesced to the end of the commit, but `current` clears and pending requests
+cancel immediately. Never treat the last observed focus snapshot as proof that
+a target is still mounted. Higher-level native window activity and cross-window
+restore remain separately qualified.
 
 For nested controls, preserve `target`/`currentTarget` or equivalent native
 identity and separate self-focus from focus-within. Functional Input borders,
diff --git a/.github/skills/agentic-component-authoring/references/state-and-accessibility.md b/.github/skills/agentic-component-authoring/references/state-and-accessibility.md
index d667eb4f84..69b977c37a 100644
--- a/.github/skills/agentic-component-authoring/references/state-and-accessibility.md
+++ b/.github/skills/agentic-component-authoring/references/state-and-accessibility.md
@@ -110,6 +110,27 @@ The component must own its role and state semantics while preserving unrelated c
 Button warns in development when an icon-only instance lacks an `accessibilityLabel`. Put warnings in an effect so
 render remains free of observable side effects, and make the dependency list match every value used by the warning.
 
+For a component-owned toggle or select action, use `resolveAccessibilityAction`
+from Framework Base with the semantic action, `Platform.OS`, and the caller's
+action list. Assign its `accessibilityActions` and compare incoming
+`event.nativeEvent.actionName` with its `name`; do not duplicate platform strings.
+Windows Fabric uses lowercase names, while Win32 uses `Toggle`/`Select`.
+macOS retains those title-case names as custom actions, not an invented
+`activate`/AXPress fallback.
+
+Keep state ownership and disabled guards in the component. Run accepted
+component behavior first, then forward the original caller accessibility event
+exactly once, including custom and disabled events. Do not synthesize `onPress`
+or create a second activation path. The resolver preserves caller labels and
+custom names while deduplicating declarations.
+
+Future universal non-styling accessibility helpers belong in
+[`framework-base/src/accessibility`](../../../../packages/framework-base/src/accessibility/AGENTS.md).
+Read its source-evidence, native/generic boundary, handler-composition, and
+validation requirements before extending it. Verify actual UIA/AX action
+invocation and callback counts; a state read after a physical click does not
+prove accessibility action dispatch.
+
 ## Use framework interaction and slot hooks
 
 Interactive roots should use the framework state hook, such as `usePressableState`, so hovered, pressed, and focused
diff --git a/.github/skills/agentic-component-authoring/references/tests-and-stories.md b/.github/skills/agentic-component-authoring/references/tests-and-stories.md
index de0aae916c..006f26b8c7 100644
--- a/.github/skills/agentic-component-authoring/references/tests-and-stories.md
+++ b/.github/skills/agentic-component-authoring/references/tests-and-stories.md
@@ -159,13 +159,68 @@ Shared Node-only helpers use `*.wdio.ts` and are dynamically imported by source
 extension inside callbacks. They are checked by the story project and excluded
 from production emit.
 
+Native-rendered story helpers use `*.story-helpers.tsx` and are also excluded
+from library emit while checked by the story project. Use `StoryStatus` for
+counter/modality probes: its named accessible View is observable on macOS
+Fabric, where a plain paragraph's `testID` is not exposed as an AX element.
+
 Focus cases use native `focused`, `checked`, and `selected` properties together
 with activation and event-order probes. Cover stale key-up, repeats, disabled
 stops, same-target modality, nested themes, focus requests, and selection-before-
 focus. Use `try/finally` to release held WebDriver actions. Never replace native
 state checks with rendered text alone or a default value for an unsupported
-property. Windows and Win32 run the same contract; macOS requires its explicit
-AppKit adaptation.
+property. Desktop support does not imply identical pointer focus or activation
+timing.
+
+### Desktop focus test scope
+
+Keep shared requirements executable on Windows Fabric, Office Win32, and macOS.
+`requireDesktopFocus` checks native capabilities, not an operating-system
+allowlist. A missing capability skips the case with a reason; a platform
+difference usually changes one assertion rather than skipping the entire case.
+
+| Behavior                                                                                                       | Scope and expected result                                                                                                                                                                                                                    |
+| -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Exactly-once activation, release cleanup, disabled eligibility, focus requests, self-focus, and scene modality | All three desktop endpoints. Assert native focus/state and action counts; include overlapping keys and blur/disable during a press.                                                                                                          |
+| Focus automatically follows an ordinary pointer press                                                          | Windows/Win32 only. Use `expectWindowsPointerFocus`; it deliberately does nothing on macOS, without skipping the case's other assertions. Do not use it for a shared keyboard/programmatic focus requirement.                                |
+| Return/Space activation phase                                                                                  | macOS activates on keydown; Windows/Win32 activate on the paired keyup. Assert the held-key count per platform, then the shared final count. A later blur cannot undo a macOS action that already occurred.                                  |
+| Native Tab/Shift+Tab entry, disabled skipping, and TabList navigation                                          | Shared, with macOS Keyboard navigation enabled for the all-controls Tab lane. Use `focusByTab` from the story's editable entry; do not simulate click-focus on the control under test.                                                       |
+| Modified navigation                                                                                            | Shared for chords delivered to the app. Shift+Arrow is portable; macOS Control+Arrow can be a system shortcut and must not be required to reach a TabList handler. Preserve Command/Option text editing separately.                          |
+| FocusZone navigation                                                                                           | Shared native ownership, platform-specific destinations: Windows/Win32 default to linear traversal unless `use2DNavigation` is enabled; AppKit is geometric. Its macOS scene explicitly requests focus on click, unlike ordinary Pressables. |
+
+Prefer a narrowly named platform assertion helper when several stories need the
+same exception. Do not introduce a generic conditional-expectation layer merely
+to hide branching, or make an entire test pass without executing any assertion.
+Keep injected `platform` checks inside the extracted callback or its dynamically
+imported `*.wdio.ts` helpers; never infer the target from the Node host OS.
+
+On macOS, record the Keyboard navigation setting as part of the run. With that
+setting off, AppKit can legitimately skip buttons and return to an editable
+field. Interactive development and CI Macs should have this preference enabled;
+the shared CI setup enables and verifies it before app startup. Keep input
+authority and locked/noninteractive desktop handling separate from this
+preference. Do not silently change machine preferences inside a test or
+reinterpret the setting as a missing driver feature. Follow the machine owner's
+preference, restore changes authorized as temporary, and test the disabled-
+setting policy separately when claiming coverage of both modes.
+
+Modality text and focus counters do not establish ring visibility. Use separate
+resolved-style coverage without incidental scene rerenders, plus native visual
+evidence for renderer appearance. Likewise, a checked/selected state read after
+a physical click does not exercise UIA/AX action dispatch.
+
+Report passed, failed, and skipped counts together. A zero-exit smoke traversal
+with platform-skipped focus cases is not cross-platform focus qualification.
+
+The pinned RNmacOS 0.81.9 Fabric View does not project
+`accessibilityState.disabled`/`selected` to AXEnabled/AXSelected. Those native
+announcement assertions are isolated in explicitly skipped cases; shared
+focus, activation, and selection-callback cases still run. Do not substitute
+rendered state for an AX result or describe these skips as intended macOS
+semantics. Track the native projection gap and revisit the cases when the
+renderer is upgraded. An already-disabled AppKit responder may also remain
+first responder until focus is moved; rejected-request tests start from a
+separate native focus owner rather than assuming disabling itself moved focus.
 
 Button uses focused appearance, size, shape, icon, selection, disabled, and constrained-content stories. Icon uses a
 source and size overview plus focused font, image, SVG, size, color, and accessibility stories.
@@ -193,6 +248,11 @@ yarn workspace @fluentui-react-native/agentic-components-storybook storybook bun
 Run the smallest affected package test while iterating. Run the full package sequence before completion. Run the root
 `yarn build` when public types, manifests, or project references change.
 
+Run repository/package tests before the owned native Storybook lifecycle, not
+concurrently with it: some CLI fixtures still write into the app's generated
+state directory. A lease/nonce mismatch is an infrastructure failure, not a
+focus-test result; never bypass ownership or authenticated readiness to proceed.
+
 A successful bundle proves story discovery and compilation only. For visual changes, inspect the running target-platform
 story across hover, pressed, disabled, optional-slot, and constrained-content scenarios.
 
diff --git a/packages/agentic/components/AGENTS.md b/packages/agentic/components/AGENTS.md
index 033ffc1696..ff96a662f3 100644
--- a/packages/agentic/components/AGENTS.md
+++ b/packages/agentic/components/AGENTS.md
@@ -18,6 +18,10 @@ invariants; detailed authoring recipes live in the
   `parameters.desktopDriver` plans remain only in runner compatibility fixtures.
   Use stable `testID` selectors and the injected target `platform` for real
   platform differences, with explicit skips for unsupported capabilities.
+- Shared focus tests run on macOS, Windows, and Win32. Gate only genuine
+  platform-specific assertions, such as Windows pointer-focus, rather than the
+  entire case. Follow the tests-and-stories reference for native activation
+  timing, macOS Keyboard navigation prerequisites, and pass/skip evidence.
 - Executable tests are typed
   with `WdioStory` from `storybook-desktop/testing` using `import type`.
   Keep callbacks self-contained; dynamically import Node helpers inside
diff --git a/packages/agentic/components/WIN32-FOCUS-PLAN.md b/packages/agentic/components/WIN32-FOCUS-PLAN.md
index e788f9771c..ce765d75f6 100644
--- a/packages/agentic/components/WIN32-FOCUS-PLAN.md
+++ b/packages/agentic/components/WIN32-FOCUS-PLAN.md
@@ -11,7 +11,7 @@ The historical filename is retained so existing plan references remain valid.
 This refinement adds common/platform authoring instructions, modern-ref
 requirements, macOS source research, and a gated `native-lib` assessment.
 
-## Execution status (September 15, 2026 UTC)
+## Execution status (September 15-16, 2026 UTC)
 
 Implemented:
 
@@ -29,16 +29,17 @@ Implemented:
 - Switch no longer toggles independently on key-up. Native Win32 qualification
   exposed `code="Unidentified"`; the shared helper now uses one generation/blur-
   guarded, key-based fallback only where native code-based activation cannot run.
-  Checkbox/Switch `Toggle` and Tab `Select` accessibility actions expose the expected
-  native toggle/selection patterns.
+  Checkbox/Switch and Tab now use Framework Base's shared
+  `resolveAccessibilityAction` for declaration and event-name agreement.
 - The WDIO support from origin/main `8d31a6b27` is integrated in merge
-  `64c4328ac`. All catalog tests now use named WDIO callbacks: 18 cases across
+  `64c4328ac`. All catalog tests now use named WDIO callbacks: 22 cases across
   12 stories. Shared Node-only helpers and every test-bearing story are checked
   without production emit. Compatibility fixtures retain the legacy parser.
   Owned smoke selectors apply to WDIO without bypassing leases or readiness.
 
-Native qualification: all 18 WDIO cases pass with real input and zero skips on
-both Windows Fabric and Win32. The full traversals render 155 and 149 stories,
+Earlier native qualification: all 18 original WDIO cases passed with real input
+and zero skips on both Windows Fabric and Win32, before the follow-up repairs
+below. The full traversals rendered 155 and 149 stories,
 respectively. The upstream authenticated-initial-render readiness fix replaces
 the earlier unsuccessful local experiments; the previous Button selection gate
 is no longer blocking this suite.
@@ -62,8 +63,9 @@ codemod fixture comparisons. The September 15 macOS rerun passes all 80 tasks
 after the Framework Base import-boundary repair below; those fixture failures
 were not reproduced or modified on macOS.
 
-Still gated: complete three-lane P0/V1 parity, macOS native input/VoiceOver,
-the Win32 editor enabled-state announcement, full popup/window restoration and activity
+Still gated: a Windows/Win32 rerun of the repaired 22-case catalog, actual UIA/AX
+action invocation, VoiceOver, complete three-lane P0/V1 parity,
+the native enabled/selected-state announcement gaps, full popup/window restoration and activity
 policy, and P4 visual/high-contrast/scale qualification. A complete new menu owner
 or RadioGroup is not introduced. N0/native-lib remains deferred: observed
 component activation/ref gaps were resolved without a new native module; native
@@ -71,61 +73,82 @@ window observation still needs its own scoped proof and host integration.
 
 ### macOS pre-PR validation (September 15, 2026)
 
-**Observed:** `foundation-settings` failed before running either suite because
-Framework Base's generic entrypoint eagerly imported `react-native` through
-`useFocusablePressable`. The implementation now uses the established
-`.native.ts` split, with shared public types and an explicit unsupported-runtime
-error in the generic facade. The native implementation's behavior is unchanged.
-Both React-only suites pass (15 tests), Framework Base passes 19 suites (147
-tests), the root TypeScript build passes, affected workspace lint passes, and
-`yarn lage test --no-cache` passes all 80 tasks.
-
-**Observed:** From `apps/storybook`, `yarn storybook bundle --macos` and
-`yarn storybook smoke --macos --mode stories-and-tests` complete successfully.
-The owned native lifecycle builds and launches the macOS app, renders all 165
-stories, and shuts down its app and services. The WDIO result is **6 passed,
-12 skipped**, not 18 focus tests passed. The six executed cases cover Button
-semantics/pointer activation/caller-owned selection, Checkbox toggling, and
-Input typing/clearing.
-
-All twelve focus-specific cases explicitly skip macOS with the Windows/Win32
-contract guard in `src/common/desktopFocus.wdio.ts`, including both FocusZone
-cases. The helper advertises keyboard and pointer capabilities; this is an
-authored platform-coverage gap, not an unavailable native driver. A successful
-smoke exit therefore does not close the macOS focus gate.
-
-The committed-branch review also found two implementation issues that the
-import-boundary repair does not change:
-
-- **macOS keyboard release:** `useFocusablePressable.native.ts` cancels its
-  activation pairing when another key arrives, then prevents the unmatched
-  Space/Return release. RNmacOS Pressability activates on keydown and uses keyup
-  for `onPressOut`, so this also suppresses pressed-state cleanup. A JavaScript
-  integration comparison using installed RNmacOS 0.81.9 Pressability reproduces
-  Space down, `x` down/up, Space up leaving the branch pressed with no
-  `onPressOut`; `origin/main` clears the press. This is not yet a native-app
-  reproduction. Preserve macOS release cleanup independently of Windows
-  activation-pairing cancellation.
-- **Windows Fabric accessibility actions:** Checkbox/Switch declare and handle
-  `Toggle`, and Tab declares and handles `Select`, on every endpoint. Installed
-  RNW 0.81.35 Fabric dispatches lowercase `toggle`/`select` and matches declared
-  actions case-sensitively. Resolve declarations and handlers per endpoint,
-  preserving Win32 spelling, and validate actual UIA action invocation.
-  Physical input plus native state assertions did not exercise this path;
-  this finding is source-established, not an executed UIA reproduction.
-
-**Pre-PR recommendation:** resolve those implementation issues and obtain
-non-skipped AppKit-specific evidence for the shared behavior changed by this
-branch before marking it ready to merge. Focused manual checks can supply
-evidence; porting all twelve Windows-only cases is not itself a prerequisite:
-
-| Area                       | Minimum remaining macOS evidence                                                                                                                                                                                                     |
-| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Button, Checkbox, Switch   | Tab/Shift+Tab entry and disabled skipping; native Return/Space phase and exactly-once action counts; repeats, overlapping keys, modifiers, blur/detach; pointer activation without imposing Windows click-focus.                     |
-| Focus targets and modality | Confirm imperative focus without rewriting modality; disabled/detached requests; self-focus versus nested descendants; same-target keyboard/pointer changes and nested theme sharing.                                                |
-| TabList and FocusZone      | Actual first responder after committed eligibility/selection; automatic/manual selection; arrows, Home/End, wrap, disabled/removal recovery, Tab exit, and modified-key propagation.                                                 |
-| Input and accessibility    | Field-editor focus, caret/editing shortcuts and disabled Tab exclusion; VoiceOver role/name/value, selected/checked announcements, and native actions on representative controls.                                                    |
-| AppKit visuals and windows | Native/custom ring exclusivity and same-target updates across light/dark/high contrast; keyboard-navigation settings; inactive-window first click, key-window transitions, and a representative existing Callout open/dismiss smoke. |
+**Repaired:** The initial `foundation-settings` failure came from an eager
+React Native import through Framework Base's generic entrypoint. The focus hook
+now uses the established `.native.ts` split and type-only shared declarations.
+The later press-release regression is also fixed: native keyboard press
+bookkeeping is separate from activation pairing, preserving macOS keydown
+activation while finishing feedback on release, interruption, self-blur,
+disable, or target replacement. Genuine detach/replacement notifies subscribers
+even when the focus boolean is unchanged; same-instance callback-ref handoffs
+preserve snapshot identity and mount generation without rerender loops.
+Framework and actual RNmacOS Pressability integration tests cover cleanup and
+exactly-once callbacks.
+
+**Repaired:** `resolveAccessibilityAction` in
+`packages/framework-base/src/accessibility` resolves names and declarations
+together and removes duplicates while preserving caller labels and custom
+actions. Checkbox/Switch/Tab use `toggle`/`select` on Windows Fabric and retain
+`Toggle`/`Select` on Win32 and the existing macOS custom-action path. No generic
+`activate` fallback or synthetic press was added. Source-checked transport
+evidence and future helper rules live in that directory's `AGENTS.md`.
+
+**Observed:** Framework Base passes 22 suites/175 tests; Components passes
+57 suites/440 tests. Package format, lint, builds, the unified TypeScript build,
+and all 80 tasks in `yarn lage test --no-cache` pass. The native macOS driver
+build/handshake/self-test contract passes, including deterministic modifier
+flag tests.
+
+**Observed:** The final owned macOS smoke builds and launches the app, renders
+all **165 stories**, executes **22 WDIO cases: 20 passed, 2 skipped**, and stops
+its app/services. All fourteen focus behavior cases execute without a platform
+skip: the original twelve plus overlapping-key and repeated-modifier release
+regressions. Six
+baseline cases also pass. The two new, isolated native accessibility-state
+cases explicitly skip for the RNmacOS 0.81.9 Fabric gaps below.
+
+The resumed final review also reproduced and repaired two follow-up edge cases:
+unconditional snapshot publication could loop on same-instance inline ref
+callbacks, and duplicated held-key entries could retain Shift after one keyup.
+Regression coverage verifies stable handoffs while focused/pressed, immediate
+rejection of detached-target activation, genuine-detach cleanup, physical-key
+deduplication, and a native forward Tab after repeated Shift down and release.
+Run the native lifecycle after repository tests: a concurrent attempt failed
+with a lease nonce mismatch before any case ran, while the serial rerun passed.
+
+The port preserves native differences rather than simply deleting skips:
+
+| Concern                       | Implemented test policy                                                                                                                                                                                            |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Pointer focus                 | `expectWindowsPointerFocus` asserts the Windows/Win32 click-focus contract only; the rest of each case runs on macOS. Activate the app through an editable entry before counting clicks.                           |
+| Keyboard entry and activation | Real Tab from a story's editable entry establishes focus. macOS activates Return/Space on keydown; Windows/Win32 activate on paired keyup. Final counts and cleanup remain shared.                                 |
+| Modifier chords               | macOS native input now derives CGEvent flags from the owned key ledger, fixing rapid Shift+Tab and modified-arrow delivery. The app-level test does not require macOS system-owned Control+Arrow to reach TabList. |
+| Native observation            | `StoryStatus` exposes counters through named accessible Views because RNmacOS Fabric paragraphs are not standalone AX elements. Native focus and checked-state assertions remain native.                           |
+| FocusZone                     | AppKit uses geometric directional navigation even when `use2DNavigation` is false; Windows/Win32 default to linear traversal and opt into geometry. Both navigation and Tab-exit cases pass on macOS.              |
+
+Keyboard navigation was initially disabled on this development Mac; enabling it
+made the native all-controls Tab lane available. This is an AppKit preference,
+not keyboard injection authority or a screen-unlock operation. Per the owner's
+direction it is now left enabled, and shared macOS CI setup enables and verifies
+it. The hosted CI job's separate `physicalClick` mask remains in place because
+of its recorded input-interception limitation.
+
+**Remaining evidence/renderer limits:**
+
+- RNmacOS 0.81.9 Fabric excludes the `accessibilityState.disabled`/`selected`
+  native update block, so AXEnabled/AXSelected do not reflect these props.
+  The two skipped cases expose this gap; focus exclusion, state-owner
+  callbacks, and activation guards are tested separately, not presented as AX
+  state evidence.
+- An AppKit view can remain first responder after becoming nonfocusable.
+  Rejected-request tests move focus to another native owner first rather than
+  assuming that disabling itself transferred focus.
+- Actual Windows UIA Toggle/SelectionItem.Select and macOS AX custom-action
+  invocation still need native qualification; physical clicks and state reads
+  are not substitutes. VoiceOver, native/custom ring visual comparison, and
+  broader window/restore scenarios remain unexecuted.
+- Windows and Win32 need the repaired catalog rerun; their earlier 18-case
+  results do not cover these follow-up changes.
 
 Keep the wider three-lane V1 parity, exhaustive popup restoration, P4
 scale/clipping/contrast matrix, and N0/native-lib work explicitly deferred.
diff --git a/packages/agentic/components/src/common/StoryStatus.story-helpers.tsx b/packages/agentic/components/src/common/StoryStatus.story-helpers.tsx
new file mode 100644
index 0000000000..4081f9a786
--- /dev/null
+++ b/packages/agentic/components/src/common/StoryStatus.story-helpers.tsx
@@ -0,0 +1,11 @@
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import { Text, View } from 'react-native';
+
+/** Fabric paragraphs are not standalone AX elements on macOS; expose the status on a named View. */
+export function StoryStatus({ children, testID }: { children: string; testID: string }) {
+  return (
+    <View accessible accessibilityLabel={children} accessibilityRole="text" testID={testID}>
+      <Text accessible={false}>{children}</Text>
+    </View>
+  );
+}
diff --git a/packages/agentic/components/src/common/desktopFocus.wdio.ts b/packages/agentic/components/src/common/desktopFocus.wdio.ts
index 955d6d0e8a..450cab3254 100644
--- a/packages/agentic/components/src/common/desktopFocus.wdio.ts
+++ b/packages/agentic/components/src/common/desktopFocus.wdio.ts
@@ -1,10 +1,6 @@
 import type { WdioStoryContext } from '@fluentui-react-native/storybook-desktop/testing';
 
-export function requireDesktopFocus({ browser, platform, skip }: Pick<WdioStoryContext, 'browser' | 'platform' | 'skip'>): boolean {
-  if (platform !== 'windows' && platform !== 'win32') {
-    skip('This case qualifies the Windows/Win32 focus contract; macOS has a separate native contract.');
-    return false;
-  }
+export function requireDesktopFocus({ browser, skip }: Pick<WdioStoryContext, 'browser' | 'skip'>): boolean {
   const features = browser.capabilities['furn:features'];
   if (!features) {
     throw new Error('Desktop Driver did not provide feature capabilities.');
@@ -16,6 +12,23 @@ export function requireDesktopFocus({ browser, platform, skip }: Pick<WdioStoryC
   return true;
 }
 
+/** Click-to-focus is Windows-specific; ordinary AppKit controls need not take focus on click. */
+export async function expectWindowsPointerFocus(
+  { browser, platform }: Pick<WdioStoryContext, 'browser' | 'platform'>,
+  testId: string,
+): Promise<void> {
+  if (platform === 'windows' || platform === 'win32') {
+    await expectNativeState(browser, testId, 'focused', true);
+  }
+}
+
+export async function focusByTab(browser: WdioStoryContext['browser'], entryId: string, targetId: string): Promise<void> {
+  await (await browser.$(`~${entryId}`)).click();
+  await expectNativeState(browser, entryId, 'focused', true);
+  await browser.keys('\uE004');
+  await expectNativeState(browser, targetId, 'focused', true);
+}
+
 export async function expectNativeState(
   browser: WdioStoryContext['browser'],
   testId: string,
diff --git a/packages/agentic/components/src/components/button/button.keyboard.test.tsx b/packages/agentic/components/src/components/button/button.keyboard.test.tsx
new file mode 100644
index 0000000000..b91b8953f5
--- /dev/null
+++ b/packages/agentic/components/src/components/button/button.keyboard.test.tsx
@@ -0,0 +1,126 @@
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import { Platform, StyleSheet } from 'react-native';
+
+import { fireEvent } from '@testing-library/react-native';
+import type { FocusKeyboardEvent } from '@fluentui-react-native/framework-base';
+
+import { render } from '../../common/renderWithTheme';
+import { Button } from './button';
+
+function keyEvent(key: string, extras: Partial<FocusKeyboardEvent['nativeEvent']> = {}) {
+  return {
+    nativeEvent: { key, code: key === ' ' ? 'Space' : key, ...extras },
+    target: 1,
+    currentTarget: 1,
+    defaultPrevented: false,
+    preventDefault() {
+      this.defaultPrevented = true;
+    },
+    stopPropagation: jest.fn(),
+  };
+}
+
+describe('Button macOS Pressability', () => {
+  it.each([' ', 'Enter'])('releases %j after an intervening key without another activation', async (key) => {
+    expect(Platform.OS).toBe('macos');
+    const onPress = jest.fn();
+    const onPressIn = jest.fn();
+    const onPressOut = jest.fn();
+    const component = await render(<Button content="Activate" onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut} />);
+    const button = component.getByRole('button');
+    const restStyle = StyleSheet.flatten(button.props.style);
+
+    await fireEvent(button, 'keyDown', keyEvent(key));
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onPressIn).toHaveBeenCalledTimes(1);
+    expect(StyleSheet.flatten(button.props.style)).not.toEqual(restStyle);
+    await fireEvent(button, 'keyDown', keyEvent('x'));
+    await fireEvent(button, 'keyUp', keyEvent('x'));
+    await fireEvent(button, 'keyDown', keyEvent(key));
+    await fireEvent(button, 'keyUp', keyEvent(key));
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+    expect(StyleSheet.flatten(button.props.style)).toEqual(restStyle);
+  });
+
+  it('activates once on keydown, suppresses repeats, and forwards the release once', async () => {
+    const onPress = jest.fn();
+    const onPressIn = jest.fn();
+    const onPressOut = jest.fn();
+    const component = await render(<Button content="Activate" onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut} />);
+    const button = component.getByRole('button');
+    const restStyle = StyleSheet.flatten(button.props.style);
+
+    await fireEvent(button, 'keyDown', keyEvent(' '));
+    await fireEvent(button, 'keyDown', keyEvent(' '));
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onPressIn).toHaveBeenCalledTimes(1);
+    expect(onPressOut).not.toHaveBeenCalled();
+    await fireEvent(button, 'keyUp', keyEvent(' '));
+    await fireEvent(button, 'keyUp', keyEvent(' '));
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+    expect(StyleSheet.flatten(button.props.style)).toEqual(restStyle);
+  });
+
+  it('clears a keyboard press on self-blur without delivering a stale release twice', async () => {
+    const onPressOut = jest.fn();
+    const component = await render(<Button content="Activate" onPressOut={onPressOut} />);
+    const button = component.getByRole('button');
+    const restStyle = StyleSheet.flatten(button.props.style);
+
+    await fireEvent(button, 'keyDown', keyEvent(' '));
+    await fireEvent(button, 'blur', { target: 2, currentTarget: 1 });
+    expect(onPressOut).not.toHaveBeenCalled();
+    await fireEvent(button, 'blur', { target: 1, currentTarget: 1 });
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+    expect(StyleSheet.flatten(button.props.style)).toEqual(restStyle);
+    await fireEvent(button, 'keyUp', keyEvent(' '));
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([{ disabled: true }, { focusable: false }])('clears a keyboard press when eligibility becomes %j', async (ineligible) => {
+    const onPress = jest.fn();
+    const onPressOut = jest.fn();
+    const props = { content: 'Activate', onPress, onPressOut };
+    const component = await render(<Button {...props} />);
+    const button = component.getByRole('button');
+    const restStyle = StyleSheet.flatten(button.props.style);
+
+    await fireEvent(button, 'keyDown', keyEvent(' '));
+    await component.rerender(<Button {...props} {...ineligible} />);
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+    await component.rerender(<Button {...props} />);
+    await fireEvent(component.getByRole('button'), 'keyUp', keyEvent(' '));
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+    expect(StyleSheet.flatten(component.getByRole('button').props.style)).toEqual(restStyle);
+  });
+
+  it.each(['altKey', 'ctrlKey', 'metaKey', 'shiftKey'])('does not activate or start a press for a %s chord', async (modifier) => {
+    const onPress = jest.fn();
+    const onPressIn = jest.fn();
+    const onPressOut = jest.fn();
+    const component = await render(<Button content="Activate" onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut} />);
+    const button = component.getByRole('button');
+
+    await fireEvent(button, 'keyDown', keyEvent('Enter', { [modifier]: true }));
+    await fireEvent(button, 'keyUp', keyEvent('Enter'));
+    expect(onPress).not.toHaveBeenCalled();
+    expect(onPressIn).not.toHaveBeenCalled();
+    expect(onPressOut).not.toHaveBeenCalled();
+  });
+
+  it('clears pressed feedback when the caller prevents the native release', async () => {
+    const onPressOut = jest.fn();
+    const component = await render(<Button content="Activate" onPressOut={onPressOut} onKeyUp={(event) => event.preventDefault()} />);
+    const button = component.getByRole('button');
+    const restStyle = StyleSheet.flatten(button.props.style);
+
+    await fireEvent(button, 'keyDown', keyEvent(' '));
+    await fireEvent(button, 'keyUp', keyEvent(' '));
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+    expect(StyleSheet.flatten(button.props.style)).toEqual(restStyle);
+  });
+});
diff --git a/packages/agentic/components/src/components/button/button.stories.tsx b/packages/agentic/components/src/components/button/button.stories.tsx
index ebe8415caf..f8395f6088 100644
--- a/packages/agentic/components/src/components/button/button.stories.tsx
+++ b/packages/agentic/components/src/components/button/button.stories.tsx
@@ -13,6 +13,8 @@ import { useButton_unstable } from './useButton';
 import { useButtonStyles_unstable } from './useButtonStyles';
 import { renderButton_unstable } from './renderButton';
 import type { ButtonAppearance, ButtonShape, ButtonSize } from './button.types';
+import { Input } from '../input/input';
+import { StoryStatus } from '../../common/StoryStatus.story-helpers';
 
 type StoryGroupProps = {
   children: ReactNode;
@@ -101,6 +103,7 @@ export const Default: Story = {
       assert.strictEqual(await button.getTagName(), 'button');
     },
     'supports native pointer activation': async ({ browser, expect, platform, skip }) => {
+      const { expectWindowsPointerFocus } = await import('../../common/desktopFocus.wdio.ts');
       const features = browser.capabilities['furn:features'];
       if (!features) throw new Error('Desktop Driver did not provide feature capabilities.');
       if (!features.physicalClick || !features.elementScreenshot || (platform !== 'macos' && !features.focus)) {
@@ -109,24 +112,21 @@ export const Default: Story = {
       }
       const button = await browser.$('~agentic-storybook-button');
       await button.click();
-      if (platform === 'windows' || platform === 'win32') {
-        await browser.waitUntil(async () => (await button.getProperty('focused')) === true, {
-          timeoutMsg: 'The activated button did not receive keyboard focus.',
-        });
-      }
+      await expectWindowsPointerFocus({ browser, platform }, 'agentic-storybook-button');
       expect(await browser.takeElementScreenshot(await button.elementId)).toMatch(/^iVBORw0KGgo/);
     },
   },
 };
 
 function ModalityProbe({ testID = 'focus-input-modality' }: { testID?: string }) {
-  return <Text testID={testID}>{useRootInputModality()}</Text>;
+  return <StoryStatus testID={testID}>{useRootInputModality()}</StoryStatus>;
 }
 
 function FocusManagementScene() {
   const [count, setCount] = useState(0);
   const [otherCount, setOtherCount] = useState(0);
   const [focusCount, setFocusCount] = useState(0);
+  const [pressOutCount, setPressOutCount] = useState(0);
   const [keyTrace, setKeyTrace] = useState('none');
   const recordKey = (event: FocusKeyboardEvent) => {
     setKeyTrace(`${event.nativeEvent.key}/${event.nativeEvent.code ?? 'no-code'}/self:${event.target === event.currentTarget}`);
@@ -136,12 +136,14 @@ function FocusManagementScene() {
     testID: 'focus-probe-button',
     onPress: () => setCount((value) => value + 1),
     onFocus: () => setFocusCount((value) => value + 1),
+    onPressOut: () => setPressOutCount((value) => value + 1),
     onKeyDown: recordKey,
     onKeyUp: recordKey,
   });
   useButtonStyles_unstable(state);
   return (
     <View>
+      <Input accessibilityLabel="Keyboard entry" placeholder="Tab to the button" testID="focus-probe-entry" />
       {renderButton_unstable(state)}
       <Button content="Disabled stop" disabled testID="focus-probe-disabled" />
       <Button content="Next focus target" testID="focus-probe-next" onPress={() => setOtherCount((value) => value + 1)} />
@@ -149,11 +151,13 @@ function FocusManagementScene() {
         <Button content="Nested theme target" testID="focus-probe-nested" />
         <ModalityProbe testID="focus-nested-modality" />
       </ThemedRoot>
-      <Text testID="focus-probe-state">{state.focused ? 'focused' : 'blurred'}</Text>
-      <Text testID="focus-probe-count">{String(count)}</Text>
-      <Text testID="focus-probe-next-count">{String(otherCount)}</Text>
-      <Text testID="focus-probe-focus-count">{String(focusCount)}</Text>
-      <Text testID="focus-probe-key">{keyTrace}</Text>
+      <StoryStatus testID="focus-probe-state">{state.focused ? 'focused' : 'blurred'}</StoryStatus>
+      <StoryStatus testID="focus-probe-count">{String(count)}</StoryStatus>
+      <StoryStatus testID="focus-probe-next-count">{String(otherCount)}</StoryStatus>
+      <StoryStatus testID="focus-probe-focus-count">{String(focusCount)}</StoryStatus>
+      <StoryStatus testID="focus-probe-pressed">{String(state.pressed)}</StoryStatus>
+      <StoryStatus testID="focus-probe-release-count">{String(pressOutCount)}</StoryStatus>
+      <StoryStatus testID="focus-probe-key">{keyTrace}</StoryStatus>
       <ModalityProbe />
     </View>
   );
@@ -163,16 +167,20 @@ export const FocusManagement: Story = {
   render: () => <FocusManagementScene />,
   tags: ['desktop-focus'],
   wdio: {
-    'focuses on pointer activation and invokes exactly once per Enter and Space': async (context) => {
-      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+    'honors pointer focus policy and invokes exactly once per Enter and Space': async (context) => {
+      const { requireDesktopFocus, expectNativeState, expectWindowsPointerFocus, focusByTab } =
+        await import('../../common/desktopFocus.wdio.ts');
       if (!requireDesktopFocus(context)) return;
       const { browser, expect } = context;
       const button = await browser.$('~focus-probe-button');
       const count = await browser.$('~focus-probe-count');
+      await (await browser.$('~focus-probe-entry')).click();
+      await expectNativeState(browser, 'focus-probe-entry', 'focused', true);
       await button.click();
-      await expectNativeState(browser, 'focus-probe-button', 'focused', true);
-      await expect(await browser.$('~focus-probe-state')).toHaveText('focused');
+      await expectWindowsPointerFocus(context, 'focus-probe-button');
       await expect(count).toHaveText('1');
+      await focusByTab(browser, 'focus-probe-entry', 'focus-probe-button');
+      await expect(await browser.$('~focus-probe-state')).toHaveText('focused');
       await browser.keys('\uE007');
       await expect(count).toHaveText('2');
       await expect(await browser.$('~focus-input-modality')).toHaveText('keyboard');
@@ -183,12 +191,14 @@ export const FocusManagement: Story = {
       await expect(await browser.$('~focus-input-modality')).toHaveText('pointer');
     },
     'updates same-target modality without refocusing and shares it with nested themes': async (context) => {
-      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      const { requireDesktopFocus, expectNativeState, expectWindowsPointerFocus, focusByTab } =
+        await import('../../common/desktopFocus.wdio.ts');
       if (!requireDesktopFocus(context)) return;
       const { browser, expect } = context;
       const button = await browser.$('~focus-probe-button');
+      await focusByTab(browser, 'focus-probe-entry', 'focus-probe-button');
       await button.click();
-      await expectNativeState(browser, 'focus-probe-button', 'focused', true);
+      await expect(await browser.$('~focus-input-modality')).toHaveText('pointer');
       await expect(await browser.$('~focus-probe-focus-count')).toHaveText('1');
       await browser.keys('x');
       await expect(await browser.$('~focus-input-modality')).toHaveText('keyboard');
@@ -198,6 +208,11 @@ export const FocusManagement: Story = {
       await expect(await browser.$('~focus-input-modality')).toHaveText('pointer');
       await expect(await browser.$('~focus-probe-focus-count')).toHaveText('1');
       await (await browser.$('~focus-probe-nested')).click();
+      await expectWindowsPointerFocus(context, 'focus-probe-nested');
+      await focusByTab(browser, 'focus-probe-entry', 'focus-probe-button');
+      await browser.keys('\uE004');
+      await expectNativeState(browser, 'focus-probe-next', 'focused', true);
+      await browser.keys('\uE004');
       await expectNativeState(browser, 'focus-probe-nested', 'focused', true);
       await browser.keys('x');
       await expect(await browser.$('~focus-input-modality')).toHaveText('keyboard');
@@ -205,11 +220,10 @@ export const FocusManagement: Story = {
       await expect(await browser.$('~focus-probe-state')).toHaveText('blurred');
     },
     'skips disabled stops and does not activate the new owner on a stale key-up': async (context) => {
-      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      const { requireDesktopFocus, expectNativeState, focusByTab } = await import('../../common/desktopFocus.wdio.ts');
       if (!requireDesktopFocus(context)) return;
-      const { browser, expect } = context;
-      await (await browser.$('~focus-probe-button')).click();
-      await expect(await browser.$('~focus-probe-disabled')).not.toBeEnabled();
+      const { browser, expect, platform } = context;
+      await focusByTab(browser, 'focus-probe-entry', 'focus-probe-button');
       try {
         await browser.performActions([
           {
@@ -229,17 +243,17 @@ export const FocusManagement: Story = {
       await expectNativeState(browser, 'focus-probe-next', 'focused', true);
       await expectNativeState(browser, 'focus-probe-disabled', 'focused', false);
       await expect(await browser.$('~focus-probe-state')).toHaveText('blurred');
-      await expect(await browser.$('~focus-probe-count')).toHaveText('1');
+      await expect(await browser.$('~focus-probe-count')).toHaveText(platform === 'macos' ? '1' : '0');
+      await expect(await browser.$('~focus-probe-pressed')).toHaveText('false');
       await expect(await browser.$('~focus-probe-next-count')).toHaveText('0');
       await browser.keys(['\uE008', '\uE004']);
       await expectNativeState(browser, 'focus-probe-button', 'focused', true);
     },
-    'suppresses repeated key-down activation until the paired key-up': async (context) => {
-      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+    'suppresses repeats and activates at the native platform key phase': async (context) => {
+      const { requireDesktopFocus, focusByTab } = await import('../../common/desktopFocus.wdio.ts');
       if (!requireDesktopFocus(context)) return;
-      const { browser, expect } = context;
-      await (await browser.$('~focus-probe-button')).click();
-      await expectNativeState(browser, 'focus-probe-button', 'focused', true);
+      const { browser, expect, platform } = context;
+      await focusByTab(browser, 'focus-probe-entry', 'focus-probe-button');
       try {
         await browser.performActions([
           {
@@ -252,9 +266,66 @@ export const FocusManagement: Story = {
             ],
           },
         ]);
-        await expect(await browser.$('~focus-probe-count')).toHaveText('1');
+        await expect(await browser.$('~focus-probe-count')).toHaveText(platform === 'macos' ? '1' : '0');
         await browser.performActions([{ type: 'key', id: 'focus-keyboard', actions: [{ type: 'keyUp', value: '\uE00D' }] }]);
-        await expect(await browser.$('~focus-probe-count')).toHaveText('2');
+        await expect(await browser.$('~focus-probe-count')).toHaveText('1');
+        await expect(await browser.$('~focus-probe-pressed')).toHaveText('false');
+      } finally {
+        await browser.releaseActions();
+      }
+    },
+    'releases pressed feedback after an intervening key without a stale activation': async (context) => {
+      const { requireDesktopFocus, focusByTab } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser, expect, platform } = context;
+      await focusByTab(browser, 'focus-probe-entry', 'focus-probe-button');
+      try {
+        await browser.performActions([
+          {
+            type: 'key',
+            id: 'focus-keyboard',
+            actions: [
+              { type: 'keyDown', value: '\uE00D' },
+              { type: 'keyDown', value: 'x' },
+              { type: 'keyUp', value: 'x' },
+              { type: 'keyUp', value: '\uE00D' },
+            ],
+          },
+        ]);
+        await expect(await browser.$('~focus-probe-count')).toHaveText(platform === 'macos' ? '1' : '0');
+        await expect(await browser.$('~focus-probe-pressed')).toHaveText('false');
+        await expect(await browser.$('~focus-probe-release-count')).toHaveText('1');
+      } finally {
+        await browser.releaseActions();
+      }
+    },
+    'exposes the native disabled accessibility state': async ({ browser, expect, platform, skip }) => {
+      if (platform === 'macos') {
+        skip('RNmacOS 0.81.9 Fabric does not project accessibilityState.disabled to AXEnabled; native Tab exclusion is tested separately.');
+        return;
+      }
+      await expect(await browser.$('~focus-probe-disabled')).not.toBeEnabled();
+    },
+    'releases repeated modifiers before the next Tab': async (context) => {
+      const { requireDesktopFocus, expectNativeState, focusByTab } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      const { browser } = context;
+      await focusByTab(browser, 'focus-probe-entry', 'focus-probe-button');
+      try {
+        await browser.performActions([
+          {
+            type: 'key',
+            id: 'focus-keyboard',
+            actions: [
+              { type: 'keyDown', value: '\uE008' },
+              { type: 'keyDown', value: '\uE008' },
+              { type: 'keyUp', value: '\uE008' },
+              { type: 'keyDown', value: '\uE004' },
+              { type: 'keyUp', value: '\uE004' },
+            ],
+          },
+        ]);
+        await expectNativeState(browser, 'focus-probe-next', 'focused', true);
       } finally {
         await browser.releaseActions();
       }
@@ -270,6 +341,7 @@ function FocusRequestsScene() {
   useButtonStyles_unstable(state);
   return (
     <View>
+      <Input accessibilityLabel="Alternate focus target" placeholder="Focus before disabling the button" testID="focus-request-entry" />
       {mounted && renderButton_unstable(state)}
       <Button
         content="Request focus"
@@ -278,7 +350,7 @@ function FocusRequestsScene() {
       />
       <Button content="Toggle disabled" testID="focus-request-disable" onPress={() => setDisabled((value) => !value)} />
       <Button content="Toggle mounted" testID="focus-request-mount" onPress={() => setMounted((value) => !value)} />
-      <Text testID="focus-request-status">{request?.status ?? 'none'}</Text>
+      <StoryStatus testID="focus-request-status">{request?.status ?? 'none'}</StoryStatus>
       <ModalityProbe />
     </View>
   );
@@ -291,15 +363,20 @@ export const FocusRequests: Story = {
     'confirms native requests without changing modality and rejects disabled or detached targets': async (context) => {
       const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
       if (!requireDesktopFocus(context)) return;
-      const { browser, expect } = context;
+      const { browser, expect, platform } = context;
       const command = await browser.$('~focus-request-command');
       const status = await browser.$('~focus-request-status');
       await command.click();
       await expectNativeState(browser, 'focus-request-target', 'focused', true);
       await expect(status).toHaveText('confirmed');
       await expect(await browser.$('~focus-input-modality')).toHaveText('pointer');
+      await (await browser.$('~focus-request-entry')).click();
+      await expectNativeState(browser, 'focus-request-entry', 'focused', true);
       await (await browser.$('~focus-request-disable')).click();
-      await expect(await browser.$('~focus-request-target')).not.toBeEnabled();
+      await expectNativeState(browser, 'focus-request-target', 'focused', false);
+      if (platform !== 'macos') {
+        await expect(await browser.$('~focus-request-target')).not.toBeEnabled();
+      }
       await command.click();
       await expect(status).toHaveText('not-focusable');
       await (await browser.$('~focus-request-mount')).click();
diff --git a/packages/agentic/components/src/components/button/spec/interaction.md b/packages/agentic/components/src/components/button/spec/interaction.md
index 2413a66b1f..3534842309 100644
--- a/packages/agentic/components/src/components/button/spec/interaction.md
+++ b/packages/agentic/components/src/components/button/spec/interaction.md
@@ -58,3 +58,10 @@ activation, key pairing across blur, repeated key-down, disabled Tab stops, and
 shared nested-root modality without refocusing the same target. `FocusRequests`
 verifies native confirmation and rejects disabled/detached targets without
 rewriting physical modality. Each case starts with a fresh story and session.
+
+These cases run on Windows, Win32, and macOS. Only the ordinary click-focus
+assertion is Windows-specific; keyboard setup uses an editable entry followed by
+Tab. macOS activates Return/Space on keydown, while Windows/Win32 activate on
+keyup. Releasing a key or cancelling a started press clears pressed feedback
+without another activation, including after an intervening key or self-blur.
+The macOS all-controls Tab lane requires Keyboard navigation enabled.
diff --git a/packages/agentic/components/src/components/checkbox/SPEC.md b/packages/agentic/components/src/components/checkbox/SPEC.md
index 9da68bed14..393b33d5c2 100644
--- a/packages/agentic/components/src/components/checkbox/SPEC.md
+++ b/packages/agentic/components/src/components/checkbox/SPEC.md
@@ -107,11 +107,14 @@ platforms; Checkbox adds no key handling of its own and does not intercept Tab.
 A disabled Checkbox sets `focusable` to `false` and is skipped by keyboard
 navigation.
 
-Checkbox declares the native `Toggle` accessibility action, preserving caller
-actions without duplicating it. This is required for the Win32 UIA toggle
-pattern even when a pointer press has already updated the rendered checkmark.
-An accessibility Toggle uses the same status transition without synthesizing
-`onPress`; caller accessibility handlers still run, including while disabled.
+Checkbox resolves its semantic toggle through Framework Base: Windows Fabric
+declares `toggle`, Win32 declares `Toggle`, and macOS retains the `Toggle`
+custom action. The declaration and event comparison use the same resolved name.
+Caller actions and labels are preserved without duplicate names. An
+accessibility toggle uses the same status transition without synthesizing
+`onPress`; caller accessibility handlers still run exactly once, including
+while disabled. See the [accessibility companion](./spec/accessibility.md) for
+source evidence and native invocation limits.
 
 No timed animation is present. Status, hover, press, and focus styling change on
 the next render, so reduced-motion settings need no separate branch.
diff --git a/packages/agentic/components/src/components/checkbox/checkbox.test.tsx b/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
index 45d8d30221..c176b8e62a 100644
--- a/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
+++ b/packages/agentic/components/src/components/checkbox/checkbox.test.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import type { ViewStyle } from 'react-native';
 
 import { fireEvent } from '@testing-library/react-native';
@@ -71,64 +71,103 @@ describe('Checkbox', () => {
     expect(component.getByRole('checkbox').props.accessibilityState.checked).toBe(false);
   });
 
-  it.each(['unchecked', 'checked', 'indeterminate'] as const)('toggles %s status once through native accessibility', async (status) => {
-    const onStatusChange = jest.fn();
-    const onPress = jest.fn();
-    const onAccessibilityAction = jest.fn();
-    const component = await renderCheckbox({ defaultStatus: status, onStatusChange, onPress, onAccessibilityAction });
-    const event = { nativeEvent: { actionName: 'Toggle' } };
-
-    expect(getRoot(component).props.accessibilityActions).toEqual([{ name: 'Toggle' }]);
-    await fireEvent(getRoot(component), 'accessibilityAction', event);
-
-    expect(onStatusChange).toHaveBeenCalledTimes(1);
-    expect(onStatusChange).toHaveBeenCalledWith(status === 'checked' ? 'unchecked' : 'checked');
-    expect(getRoot(component).props.accessibilityState.checked).toBe(status !== 'checked');
-    expect(onAccessibilityAction).toHaveBeenCalledWith(event);
-    expect(onPress).not.toHaveBeenCalled();
-  });
-
-  it('preserves caller accessibility actions without duplicating Toggle', async () => {
-    const accessibilityActions = [{ name: 'Toggle', label: 'Change selection' }, { name: 'custom' }];
-    const component = await renderCheckbox({ accessibilityActions });
-
-    expect(getRoot(component).props.accessibilityActions).toBe(accessibilityActions);
-  });
+  describe.each([
+    ['windows', 'toggle'],
+    ['win32', 'Toggle'],
+    ['macos', 'Toggle'],
+  ] as const)('%s accessibility actions', (platform, actionName) => {
+    beforeEach(() => {
+      jest.replaceProperty(Platform, 'OS', platform as typeof Platform.OS);
+    });
+    afterEach(() => jest.restoreAllMocks());
+
+    it.each(['unchecked', 'checked', 'indeterminate'] as const)('toggles %s once without synthesizing a press', async (status) => {
+      const calls: string[] = [];
+      const onStatusChange = jest.fn(() => calls.push('status'));
+      const onPress = jest.fn();
+      const onAccessibilityAction = jest.fn(() => calls.push('action'));
+      const component = await renderCheckbox({ defaultStatus: status, onStatusChange, onPress, onAccessibilityAction });
+      const event = { nativeEvent: { actionName } };
+
+      expect(getRoot(component).props.accessibilityActions).toEqual([{ name: actionName }]);
+      await fireEvent(getRoot(component), 'accessibilityAction', event);
+
+      expect(onStatusChange).toHaveBeenCalledTimes(1);
+      expect(onStatusChange).toHaveBeenCalledWith(status === 'checked' ? 'unchecked' : 'checked');
+      expect(getRoot(component).props.accessibilityState.checked).toBe(status !== 'checked');
+      expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+      expect(onAccessibilityAction).toHaveBeenCalledWith(event);
+      expect(calls).toEqual(['status', 'action']);
+      expect(onPress).not.toHaveBeenCalled();
+    });
 
-  it('reports accessibility toggles without changing externally driven status', async () => {
-    const onStatusChange = jest.fn();
-    const component = await renderCheckbox({ status: 'indeterminate', onStatusChange });
+    it('preserves a normalized caller action list and labels', async () => {
+      const accessibilityActions = [
+        { name: actionName, label: 'Change selection' },
+        { name: 'custom', label: 'More' },
+      ];
+      const component = await renderCheckbox({ accessibilityActions });
+      expect(getRoot(component).props.accessibilityActions).toBe(accessibilityActions);
+    });
 
-    await fireEvent(getRoot(component), 'accessibilityAction', { nativeEvent: { actionName: 'Toggle' } });
+    it('deduplicates legacy and native spellings without losing the caller label or custom actions', async () => {
+      const component = await renderCheckbox({
+        accessibilityActions: [{ name: 'Toggle', label: 'Change selection' }, { name: 'toggle' }, { name: 'custom', label: 'More' }],
+      });
+      expect(getRoot(component).props.accessibilityActions).toEqual([
+        { name: actionName, label: 'Change selection' },
+        { name: 'custom', label: 'More' },
+      ]);
+    });
 
-    expect(onStatusChange).toHaveBeenCalledWith('checked');
-    expect(getRoot(component).props.accessibilityState.checked).toBe('mixed');
-  });
+    it('reports accessibility toggles without changing externally driven status', async () => {
+      const onStatusChange = jest.fn();
+      const component = await renderCheckbox({ status: 'indeterminate', onStatusChange });
 
-  it('blocks disabled accessibility toggles while forwarding the caller handler', async () => {
-    const onStatusChange = jest.fn();
-    const onAccessibilityAction = jest.fn();
-    const component = await renderCheckbox({ disabled: true, onStatusChange, onAccessibilityAction });
-    const event = { nativeEvent: { actionName: 'Toggle' } };
+      await fireEvent(getRoot(component), 'accessibilityAction', { nativeEvent: { actionName } });
 
-    getRoot(component).props.onAccessibilityAction(event);
+      expect(onStatusChange).toHaveBeenCalledTimes(1);
+      expect(onStatusChange).toHaveBeenCalledWith('checked');
+      expect(getRoot(component).props.accessibilityState.checked).toBe('mixed');
+    });
 
-    expect(onStatusChange).not.toHaveBeenCalled();
-    expect(onAccessibilityAction).toHaveBeenCalledWith(event);
-    expect(getRoot(component).props.accessibilityState.checked).toBe(false);
-  });
+    it('blocks disabled accessibility toggles while forwarding the caller handler once', async () => {
+      const onStatusChange = jest.fn();
+      const onPress = jest.fn();
+      const onAccessibilityAction = jest.fn();
+      const component = await renderCheckbox({ disabled: true, onStatusChange, onPress, onAccessibilityAction });
+      const event = { nativeEvent: { actionName } };
 
-  it('forwards custom accessibility actions without changing status', async () => {
-    const onStatusChange = jest.fn();
-    const onAccessibilityAction = jest.fn();
-    const component = await renderCheckbox({ accessibilityActions: [{ name: 'custom' }], onStatusChange, onAccessibilityAction });
-    const event = { nativeEvent: { actionName: 'custom' } };
+      getRoot(component).props.onAccessibilityAction(event);
 
-    expect(getRoot(component).props.accessibilityActions).toEqual([{ name: 'Toggle' }, { name: 'custom' }]);
-    await fireEvent(getRoot(component), 'accessibilityAction', event);
+      expect(onStatusChange).not.toHaveBeenCalled();
+      expect(onPress).not.toHaveBeenCalled();
+      expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+      expect(onAccessibilityAction).toHaveBeenCalledWith(event);
+      expect(getRoot(component).props.accessibilityState.checked).toBe(false);
+    });
 
-    expect(onStatusChange).not.toHaveBeenCalled();
-    expect(onAccessibilityAction).toHaveBeenCalledWith(event);
+    it('forwards custom, wrong-case, and activate actions without a second activation path', async () => {
+      const onStatusChange = jest.fn();
+      const onPress = jest.fn();
+      const onAccessibilityAction = jest.fn();
+      const component = await renderCheckbox({
+        accessibilityActions: [{ name: 'custom', label: 'More' }],
+        onStatusChange,
+        onPress,
+        onAccessibilityAction,
+      });
+      expect(getRoot(component).props.accessibilityActions).toEqual([{ name: actionName }, { name: 'custom', label: 'More' }]);
+      for (const name of ['custom', actionName === 'toggle' ? 'Toggle' : 'toggle', 'activate']) {
+        const event = { nativeEvent: { actionName: name } };
+        await fireEvent(getRoot(component), 'accessibilityAction', event);
+        expect(onAccessibilityAction).toHaveBeenLastCalledWith(event);
+      }
+      expect(onAccessibilityAction).toHaveBeenCalledTimes(3);
+      expect(onStatusChange).not.toHaveBeenCalled();
+      expect(onPress).not.toHaveBeenCalled();
+      expect(getRoot(component).props.accessibilityState.checked).toBe(false);
+    });
   });
 
   it('advances indeterminate status to checked on press', async () => {
diff --git a/packages/agentic/components/src/components/checkbox/spec/accessibility.md b/packages/agentic/components/src/components/checkbox/spec/accessibility.md
index 83f3ce0ab8..4612415a61 100644
--- a/packages/agentic/components/src/components/checkbox/spec/accessibility.md
+++ b/packages/agentic/components/src/components/checkbox/spec/accessibility.md
@@ -12,11 +12,23 @@ focusable unless disabled.
 accessibility state, such as `busy`, is merged and preserved; the checked and
 disabled entries are owned by the component.
 
-The root declares the native `Toggle` action and preserves caller actions without
-duplicating that declaration. Win32 needs this action to expose its UIA toggle
-pattern; a rendered checkmark alone is not evidence of native checked state.
-Toggle activation respects disabled and controlled status and forwards the caller
-`onAccessibilityAction` without synthesizing a press.
+The root resolves the semantic toggle through Framework Base:
+`toggle` on Windows Fabric, `Toggle` on Win32, and the existing `Toggle`
+custom action on macOS. Both declaration and event comparison use that resolved
+name. Caller spellings of the owned action are normalized, duplicate names are
+removed, and caller order and the first supplied label are retained.
+
+Toggle activation respects disabled and controlled status and forwards the
+original caller `onAccessibilityAction` exactly once without synthesizing a
+press. Custom and disabled actions are still forwarded. A standalone `activate`
+event is not an additional toggle path.
+
+The [shared action foundation](../../../../../../framework-base/src/accessibility/AGENTS.md)
+records RNW 0.81.35, Win32 0.81.8, and RNmacOS 0.81.9 source evidence.
+macOS Fabric custom actions emit the declared name verbatim and ignore the
+display label; this does not establish default AXPress support. Native
+qualification must invoke UIA Toggle or the AX custom action and check state
+plus callback counts, not merely read a checkmark after a physical click.
 
 On Windows, UI Automation reports the control as a check box and maps the
 three-valued checked state to its toggle state, so an indeterminate parent
diff --git a/packages/agentic/components/src/components/checkbox/spec/interaction.md b/packages/agentic/components/src/components/checkbox/spec/interaction.md
index a20d295d0d..3015b8ee9c 100644
--- a/packages/agentic/components/src/components/checkbox/spec/interaction.md
+++ b/packages/agentic/components/src/components/checkbox/spec/interaction.md
@@ -25,10 +25,12 @@ mixed parent moves forward to fully selected rather than cycling back through
 mixed. `onStatusChange` receives the resolved value and any caller `onPress`
 handler runs afterward.
 
-The native accessibility `Toggle` action resolves the same next status without
-calling `onPress`. It preserves the caller's accessibility actions and forwards
-`onAccessibilityAction`. While disabled, the action cannot change status, but
-the caller accessibility handler still receives the event.
+The accessibility toggle action (`toggle` on Windows Fabric, `Toggle` on
+Win32 and as a macOS custom action) resolves the same next status without
+calling `onPress`. It preserves caller actions and labels without duplicate
+declarations and forwards `onAccessibilityAction` exactly once. While disabled,
+the action cannot change status, but the caller accessibility handler still
+receives the original event. No `activate` fallback is added.
 
 Status ownership follows the supplied props. While `status` is supplied the
 control is externally driven: it renders exactly what it is given, reports the
diff --git a/packages/agentic/components/src/components/checkbox/spec/source.json b/packages/agentic/components/src/components/checkbox/spec/source.json
index d4aa0b6784..7699164700 100644
--- a/packages/agentic/components/src/components/checkbox/spec/source.json
+++ b/packages/agentic/components/src/components/checkbox/spec/source.json
@@ -3,7 +3,7 @@
   "component": "checkbox",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-14",
+  "reviewedAt": "2026-09-15",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/checkbox/useCheckbox.ts b/packages/agentic/components/src/components/checkbox/useCheckbox.ts
index 95731cf4b1..7a39935aa8 100644
--- a/packages/agentic/components/src/components/checkbox/useCheckbox.ts
+++ b/packages/agentic/components/src/components/checkbox/useCheckbox.ts
@@ -1,8 +1,14 @@
 import * as React from 'react';
-import { Pressable } from 'react-native';
+import { Platform, Pressable } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-import { useControllableValue, useFocusablePressable, useOptionalSlot, useSlot } from '@fluentui-react-native/framework-base';
+import {
+  resolveAccessibilityAction,
+  useControllableValue,
+  useFocusablePressable,
+  useOptionalSlot,
+  useSlot,
+} from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
 import { useFocusVisuals } from '../../common/useFocusVisuals';
 
@@ -61,21 +67,15 @@ export function useCheckbox_unstable(props: CheckboxProps): CheckboxState {
     [disabled, onPress, setStatus, status],
   );
 
-  const checkboxActions = React.useMemo(
-    () =>
-      accessibilityActions?.some((action) => action.name === 'Toggle')
-        ? accessibilityActions
-        : [{ name: 'Toggle' }, ...(accessibilityActions ?? [])],
-    [accessibilityActions],
-  );
+  const toggleAction = React.useMemo(() => resolveAccessibilityAction('toggle', Platform.OS, accessibilityActions), [accessibilityActions]);
   const handleAccessibilityAction = React.useCallback<NonNullable<CheckboxProps['onAccessibilityAction']>>(
     (event) => {
-      if (event.nativeEvent.actionName === 'Toggle' && !disabled) {
+      if (event.nativeEvent.actionName === toggleAction.name && !disabled) {
         setStatus(getNextStatus(status));
       }
       onAccessibilityAction?.(event);
     },
-    [disabled, onAccessibilityAction, setStatus, status],
+    [disabled, onAccessibilityAction, setStatus, status, toggleAction.name],
   );
 
   const rootAccessibilityLabel = accessibilityLabel ?? label;
@@ -83,7 +83,7 @@ export function useCheckbox_unstable(props: CheckboxProps): CheckboxState {
 
   const nativeProps: React.ComponentProps<typeof Pressable> = {
     ...rest,
-    accessibilityActions: checkboxActions,
+    accessibilityActions: toggleAction.accessibilityActions,
     accessibilityHint: rootAccessibilityHint,
     accessibilityLabel: rootAccessibilityLabel,
     accessibilityRole: 'checkbox',
diff --git a/packages/agentic/components/src/components/switch/SPEC.md b/packages/agentic/components/src/components/switch/SPEC.md
index 7ae04ec36c..eeb3bae43a 100644
--- a/packages/agentic/components/src/components/switch/SPEC.md
+++ b/packages/agentic/components/src/components/switch/SPEC.md
@@ -127,8 +127,13 @@ These hook options do not add new component props. Scenes require `ThemedRoot`.
 
 The root is focusable while enabled and drops out of the tab order when
 disabled. Shared `useFocusablePressable` owns keyboard/press coordination.
-Switch does not add a second key-up toggle, and declares the native `Toggle`
-accessibility action while preserving caller actions and handlers.
+Switch does not add a second key-up toggle. Its semantic accessibility toggle
+resolves through Framework Base to `toggle` on Windows Fabric, `Toggle` on
+Win32, and the existing `Toggle` custom action on macOS. Declaration and event
+comparison use the same name, preserving caller labels and custom actions
+without duplicate declarations. Accepted actions toggle before forwarding the
+original caller event once; disabled and custom events are still forwarded
+without a state change. Accessibility actions never synthesize `onPress`.
 
 On Windows the root maps to a UI Automation toggle element and the on and off
 state is exposed both through the native accessibility state and through the
diff --git a/packages/agentic/components/src/components/switch/spec/accessibility.md b/packages/agentic/components/src/components/switch/spec/accessibility.md
index 6bb024d3d5..aea120f61d 100644
--- a/packages/agentic/components/src/components/switch/spec/accessibility.md
+++ b/packages/agentic/components/src/components/switch/spec/accessibility.md
@@ -17,6 +17,27 @@ The track, the thumb, and every rendered label set `accessible={false}`, so the
 component presents as exactly one element and the label text is never read
 twice.
 
+## Accessibility actions
+
+Framework Base resolves the component-owned toggle to `toggle` on Windows
+Fabric, `Toggle` on Win32, and the existing `Toggle` custom action on macOS.
+The declaration and event comparison share that resolved name. Caller
+spellings of the owned action are normalized and duplicate names are removed,
+preserving caller order, the first supplied label, and other custom names.
+
+An accepted action requests the next checked value and then forwards the
+original `onAccessibilityAction` event exactly once. Controlled checked state
+does not change internally. Disabled actions cannot toggle, but still reach the
+caller handler, as do unrelated custom actions. No action synthesizes
+`onPress`, and `activate` is not an additional toggle path.
+
+The [shared action foundation](../../../../../../framework-base/src/accessibility/AGENTS.md)
+records RNW 0.81.35, Win32 0.81.8, and RNmacOS 0.81.9 source evidence.
+macOS Fabric invokes custom actions by their declared names and ignores
+display labels; default AXPress support cannot be inferred from that path.
+Verify UIA Toggle or actual AX custom invocation with state and callback
+counts, separately from pointer or keyboard activation.
+
 ## Naming
 
 There are three naming paths, in priority order:
diff --git a/packages/agentic/components/src/components/switch/spec/interaction.md b/packages/agentic/components/src/components/switch/spec/interaction.md
index 351bf8e371..3ca79eee90 100644
--- a/packages/agentic/components/src/components/switch/spec/interaction.md
+++ b/packages/agentic/components/src/components/switch/spec/interaction.md
@@ -19,7 +19,8 @@ track, the thumb, and any rendered label.
 ## Keyboard
 
 Tab moves focus to the hit area while enabled. Switch changes value only through
-its press action or the native `Toggle` accessibility action. It does not add a
+its press action or the semantic toggle accessibility action (`toggle` on
+Windows Fabric, `Toggle` on Win32 and as a macOS custom action). It does not add a
 second key-up toggle. The shared focusable-pressable helper preserves native
 activation and adds a paired Win32 fallback only for otherwise-unrecognized
 native key codes. Caller key/accessibility handlers remain forwarded.
diff --git a/packages/agentic/components/src/components/switch/spec/source.json b/packages/agentic/components/src/components/switch/spec/source.json
index 49f4277114..8596b6b1a0 100644
--- a/packages/agentic/components/src/components/switch/spec/source.json
+++ b/packages/agentic/components/src/components/switch/spec/source.json
@@ -3,7 +3,7 @@
   "component": "switch",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-14",
+  "reviewedAt": "2026-09-15",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/switch/switch.stories.tsx b/packages/agentic/components/src/components/switch/switch.stories.tsx
index b6ae1f5e55..10ff842a4c 100644
--- a/packages/agentic/components/src/components/switch/switch.stories.tsx
+++ b/packages/agentic/components/src/components/switch/switch.stories.tsx
@@ -8,6 +8,8 @@ import type { WdioStory } from '@fluentui-react-native/storybook-desktop/testing
 
 import { Switch } from './switch';
 import type { SwitchLayout } from './switch.types';
+import { Input } from '../input/input';
+import { StoryStatus } from '../../common/StoryStatus.story-helpers';
 
 type StoryGroupProps = {
   children: ReactNode;
@@ -77,13 +79,14 @@ function FocusManagementScene() {
   const [changes, setChanges] = useState(0);
   return (
     <View>
+      <Input accessibilityLabel="Keyboard entry" placeholder="Tab to the switch" testID="focus-switch-entry" />
       <Switch
         layout="switch"
         accessibilityLabel="Activation probe"
         testID="focus-switch"
         onChange={() => setChanges((count) => count + 1)}
       />
-      <Text testID="focus-switch-count">{String(changes)}</Text>
+      <StoryStatus testID="focus-switch-count">{String(changes)}</StoryStatus>
     </View>
   );
 }
@@ -93,16 +96,20 @@ export const FocusManagement: Story = {
   tags: ['desktop-focus'],
   wdio: {
     'toggles exactly once per pointer, Enter, and Space activation': async (context) => {
-      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      const { requireDesktopFocus, expectNativeState, expectWindowsPointerFocus, focusByTab } =
+        await import('../../common/desktopFocus.wdio.ts');
       if (!requireDesktopFocus(context)) return;
       const { browser, expect } = context;
       const control = await browser.$('~focus-switch');
       const count = await browser.$('~focus-switch-count');
+      await (await browser.$('~focus-switch-entry')).click();
+      await expectNativeState(browser, 'focus-switch-entry', 'focused', true);
       await expectNativeState(browser, 'focus-switch', 'checked', false);
       await control.click();
-      await expectNativeState(browser, 'focus-switch', 'focused', true);
+      await expectWindowsPointerFocus(context, 'focus-switch');
       await expect(count).toHaveText('1');
       await expectNativeState(browser, 'focus-switch', 'checked', true);
+      await focusByTab(browser, 'focus-switch-entry', 'focus-switch');
       await browser.keys('\uE007');
       await expect(count).toHaveText('2');
       await expectNativeState(browser, 'focus-switch', 'checked', false);
diff --git a/packages/agentic/components/src/components/switch/switch.test.tsx b/packages/agentic/components/src/components/switch/switch.test.tsx
index 2375520db7..e70044f20c 100644
--- a/packages/agentic/components/src/components/switch/switch.test.tsx
+++ b/packages/agentic/components/src/components/switch/switch.test.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
-import { Text, View } from 'react-native';
+import { Platform, Text, View } from 'react-native';
 import type { TextProps, ViewProps } from 'react-native';
 import type { ComponentProps } from 'react';
 
@@ -92,23 +92,90 @@ describe('Switch', () => {
     expect(onChange).toHaveBeenNthCalledWith(2, false);
   });
 
-  it('supports the native Toggle accessibility action without duplicating caller actions', async () => {
-    const onChange = jest.fn();
-    const onAccessibilityAction = jest.fn();
-    const component = await renderSwitch({
-      accessibilityLabel: 'Toggle probe',
-      layout: 'switch',
-      accessibilityActions: [{ name: 'Toggle' }],
-      onChange,
-      onAccessibilityAction,
+  describe.each([
+    ['windows', 'toggle'],
+    ['win32', 'Toggle'],
+    ['macos', 'Toggle'],
+  ] as const)('%s accessibility actions', (platform, actionName) => {
+    beforeEach(() => {
+      jest.replaceProperty(Platform, 'OS', platform as typeof Platform.OS);
+    });
+    afterEach(() => jest.restoreAllMocks());
+
+    it.each([false, true])('toggles defaultChecked=%s once without synthesizing a press', async (defaultChecked) => {
+      const calls: string[] = [];
+      const onChange = jest.fn(() => calls.push('change'));
+      const onAccessibilityAction = jest.fn(() => calls.push('action'));
+      const onPress = jest.fn();
+      const component = await renderSwitch({ defaultChecked, onChange, onAccessibilityAction, onPress });
+      const event = { nativeEvent: { actionName } };
+
+      expect(component.getByRole('switch').props.accessibilityActions).toEqual([{ name: actionName }]);
+      await fireEvent(component.getByRole('switch'), 'accessibilityAction', event);
+      await flushAnimationFrame();
+
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith(!defaultChecked);
+      expect(component.getByRole('switch').props.accessibilityState.checked).toBe(!defaultChecked);
+      expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+      expect(onAccessibilityAction).toHaveBeenCalledWith(event);
+      expect(calls).toEqual(['change', 'action']);
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it('deduplicates both spellings and preserves caller labels and custom actions', async () => {
+      const component = await renderSwitch({
+        accessibilityActions: [{ name: 'Toggle' }, { name: 'toggle', label: 'Change setting' }, { name: 'custom', label: 'More' }],
+      });
+      expect(component.getByRole('switch').props.accessibilityActions).toEqual([
+        { name: actionName, label: 'Change setting' },
+        { name: 'custom', label: 'More' },
+      ]);
+    });
+
+    it('reports a toggle without changing controlled checked state', async () => {
+      const onChange = jest.fn();
+      const component = await renderSwitch({ checked: false, onChange });
+      await fireEvent(component.getByRole('switch'), 'accessibilityAction', { nativeEvent: { actionName } });
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith(true);
+      expect(component.getByRole('switch').props.accessibilityState.checked).toBe(false);
+    });
+
+    it('guards disabled toggles while forwarding the caller event once', async () => {
+      const onChange = jest.fn();
+      const onPress = jest.fn();
+      const onAccessibilityAction = jest.fn();
+      const component = await renderSwitch({ disabled: true, onChange, onPress, onAccessibilityAction });
+      const event = { nativeEvent: { actionName } };
+      component.getByRole('switch').props.onAccessibilityAction(event);
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onPress).not.toHaveBeenCalled();
+      expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+      expect(onAccessibilityAction).toHaveBeenCalledWith(event);
+      expect(component.getByRole('switch').props.accessibilityState.checked).toBe(false);
+    });
+
+    it('forwards custom, wrong-case, and activate actions without toggling', async () => {
+      const onChange = jest.fn();
+      const onPress = jest.fn();
+      const onAccessibilityAction = jest.fn();
+      const component = await renderSwitch({
+        accessibilityActions: [{ name: 'custom', label: 'More' }],
+        onChange,
+        onPress,
+        onAccessibilityAction,
+      });
+      for (const name of ['custom', actionName === 'toggle' ? 'Toggle' : 'toggle', 'activate']) {
+        const event = { nativeEvent: { actionName: name } };
+        await fireEvent(component.getByRole('switch'), 'accessibilityAction', event);
+        expect(onAccessibilityAction).toHaveBeenLastCalledWith(event);
+      }
+      expect(onAccessibilityAction).toHaveBeenCalledTimes(3);
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onPress).not.toHaveBeenCalled();
+      expect(component.getByRole('switch').props.accessibilityState.checked).toBe(false);
     });
-    const root = component.getByRole('switch');
-    expect(root.props.accessibilityActions).toEqual([{ name: 'Toggle' }]);
-    await fireEvent(root, 'accessibilityAction', { nativeEvent: { actionName: 'Toggle' } });
-    await flushAnimationFrame();
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(true);
-    expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
   });
 
   it('forwards hover and press handlers while preserving consumer accessibility state', async () => {
diff --git a/packages/agentic/components/src/components/switch/useSwitch.ts b/packages/agentic/components/src/components/switch/useSwitch.ts
index 98b9ccebde..f607d39cb6 100644
--- a/packages/agentic/components/src/components/switch/useSwitch.ts
+++ b/packages/agentic/components/src/components/switch/useSwitch.ts
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { Animated, Easing, Pressable, View } from 'react-native';
+import { Animated, Easing, Platform, Pressable, View } from 'react-native';
 
 import {
+  resolveAccessibilityAction,
   useAccessibilityLabelWarning,
   useFocusablePressable,
   useOptionalSlot,
@@ -100,21 +101,15 @@ export function useSwitch_unstable(props: SwitchProps): SwitchState {
         };
 
   const { toggle: toggleChecked } = toggle;
-  const switchActions = React.useMemo(
-    () =>
-      accessibilityActions?.some((action) => action.name === 'Toggle')
-        ? accessibilityActions
-        : [{ name: 'Toggle' }, ...(accessibilityActions ?? [])],
-    [accessibilityActions],
-  );
+  const toggleAction = React.useMemo(() => resolveAccessibilityAction('toggle', Platform.OS, accessibilityActions), [accessibilityActions]);
   const handleAccessibilityAction = React.useCallback<NonNullable<SwitchProps['onAccessibilityAction']>>(
     (event) => {
-      if (event.nativeEvent.actionName === 'Toggle') {
+      if (event.nativeEvent.actionName === toggleAction.name) {
         toggleChecked();
       }
       onAccessibilityAction?.(event);
     },
-    [onAccessibilityAction, toggleChecked],
+    [onAccessibilityAction, toggleChecked, toggleAction.name],
   );
   const handlePress = React.useCallback(
     (event: Parameters<NonNullable<SwitchProps['onPress']>>[0]) => {
@@ -128,7 +123,7 @@ export function useSwitch_unstable(props: SwitchProps): SwitchState {
     ...rest,
     ...pressableNameProps,
     accessibilityRole: 'switch',
-    accessibilityActions: switchActions,
+    accessibilityActions: toggleAction.accessibilityActions,
     onAccessibilityAction: handleAccessibilityAction,
     accessibilityState: {
       ...rest.accessibilityState,
diff --git a/packages/agentic/components/src/components/tab/SPEC.md b/packages/agentic/components/src/components/tab/SPEC.md
index 8680e36afc..88f6f23a1a 100644
--- a/packages/agentic/components/src/components/tab/SPEC.md
+++ b/packages/agentic/components/src/components/tab/SPEC.md
@@ -35,7 +35,7 @@ counter affordance.
 | `value`    | `string`                    | `controls`    | Stable TabList selection value.                                                                           |
 | `disabled` | `boolean`                   | `false`       | Blocks presses, removes the tab from the tab order, and selects the disabled colors.                      |
 | `layout`   | `iconAndText \| iconOnly`   | `iconAndText` | Selects the anatomy, the corner radius, and the padding.                                                  |
-| `onPress`  | `PressableProps['onPress']` | none          | The only signal a tab emits. The caller changes `selected` in response.                                   |
+| `onPress`  | `PressableProps['onPress']` | none          | Reports pointer/keyboard activation. A standalone caller changes `selected` in response.                  |
 | `style`    | `StyleProp<ViewStyle>`      | none          | Applied after the resolved root styles.                                                                   |
 
 `layout: 'iconOnly'` is a distinct type shape: it requires `accessibilityLabel`
@@ -128,6 +128,16 @@ the accessibility tree and report the disabled state.
 Hover changes the background and foreground on both platforms; pressed takes
 precedence over hover.
 
+The semantic select action resolves through Framework Base to `select` on
+Windows Fabric, `Select` on Win32, and the existing `Select` custom action on
+macOS. It requests TabList selection while enabled, then forwards the original
+caller accessibility event exactly once without synthesizing `onPress`.
+Standalone selection stays externally driven; custom groups handle
+`onAccessibilityAction` as well as `onPress`. Disabled and custom events are
+forwarded without selecting. See the
+[accessibility companion](./spec/accessibility.md) for source evidence and
+native invocation limits.
+
 ## Divergences from Flex
 
 `native-system-focus-visuals` is an **accepted** [shared native adaptation](../AGENTS.md#focus-visual-policy).
diff --git a/packages/agentic/components/src/components/tab/spec/accessibility.md b/packages/agentic/components/src/components/tab/spec/accessibility.md
index 0bdab03ad1..73dbfc3662 100644
--- a/packages/agentic/components/src/components/tab/spec/accessibility.md
+++ b/packages/agentic/components/src/components/tab/spec/accessibility.md
@@ -16,6 +16,29 @@ reads the same parts. Icons set `accessible={false}` so they add nothing to the
 announcement, and the hidden width-reservation copy of the label is removed from
 the accessibility tree, so the label is announced exactly once.
 
+## Accessibility actions
+
+Framework Base resolves the component-owned select to `select` on Windows
+Fabric, `Select` on Win32, and the existing `Select` custom action on macOS.
+Use the same resolved name for the declaration and event comparison. Caller
+spellings of the owned action are normalized and duplicate names are removed,
+preserving order, the first supplied label, and other custom names.
+
+An enabled action requests selection from TabList and then forwards the
+original `onAccessibilityAction` event exactly once. Standalone tabs do not
+mutate selection; a custom group handles this native callback itself.
+Disabled tabs (including a disabled TabList) do not request selection, but the
+caller still receives the event. Custom actions are likewise forwarded without
+selecting. No accessibility action synthesizes `onPress`, and `activate` is
+not an additional selection path.
+
+The [shared action foundation](../../../../../../framework-base/src/accessibility/AGENTS.md)
+records RNW 0.81.35, Win32 0.81.8, and RNmacOS 0.81.9 source evidence.
+macOS Fabric custom actions emit the exact declared names and ignore display
+labels; default AXPress support is not established by that path. Native
+qualification must invoke UIA SelectionItem.Select or the AX custom action and
+assert selection plus callback counts, not just read selection after a click.
+
 ## Naming
 
 In the default layout the visible text is the accessible name. Keep it short and
diff --git a/packages/agentic/components/src/components/tab/spec/interaction.md b/packages/agentic/components/src/components/tab/spec/interaction.md
index 7db6ee19a4..6898b23b70 100644
--- a/packages/agentic/components/src/components/tab/spec/interaction.md
+++ b/packages/agentic/components/src/components/tab/spec/interaction.md
@@ -14,6 +14,16 @@ TabList, the same press requests group selection and then preserves the caller's
 While `disabled`, the underlying pressable stops reporting presses and the
 disabled colors apply to the background, the label, and the icon.
 
+## Accessibility activation
+
+The select action (`select` on Windows Fabric, `Select` on Win32 and as a
+macOS custom action) requests TabList selection while enabled. It then
+forwards the original caller `onAccessibilityAction` once without synthesizing
+`onPress`. Standalone tabs remain externally driven, so a custom group handles
+that callback directly. Disabled or unrelated actions are forwarded without
+selecting. Action declarations preserve caller labels and custom actions
+without duplicate names; no `activate` fallback is added.
+
 ## Keyboard
 
 A standalone enabled Tab is focusable and a disabled Tab is skipped. Inside
diff --git a/packages/agentic/components/src/components/tab/spec/source.json b/packages/agentic/components/src/components/tab/spec/source.json
index 899f911b88..dfdaddcc16 100644
--- a/packages/agentic/components/src/components/tab/spec/source.json
+++ b/packages/agentic/components/src/components/tab/spec/source.json
@@ -3,7 +3,7 @@
   "component": "tab",
   "lifecycle": "implemented",
   "conformance": "reviewed",
-  "reviewedAt": "2026-09-14",
+  "reviewedAt": "2026-09-15",
   "sources": [
     {
       "id": "flex-component",
diff --git a/packages/agentic/components/src/components/tab/tab.test.tsx b/packages/agentic/components/src/components/tab/tab.test.tsx
index afa9677028..bf1713387b 100644
--- a/packages/agentic/components/src/components/tab/tab.test.tsx
+++ b/packages/agentic/components/src/components/tab/tab.test.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import type { Pressable, ViewStyle } from 'react-native';
 
 import { fireEvent } from '@testing-library/react-native';
@@ -97,6 +97,124 @@ describe('Tab', () => {
     expect(tabs[1].props.accessibilitySetSize).toBe(2);
   });
 
+  describe.each([
+    ['windows', 'select'],
+    ['win32', 'Select'],
+    ['macos', 'Select'],
+  ] as const)('%s accessibility actions', (platform, actionName) => {
+    beforeEach(() => {
+      jest.replaceProperty(Platform, 'OS', platform as typeof Platform.OS);
+    });
+    afterEach(() => jest.restoreAllMocks());
+
+    it('selects through TabList once, preserves labels, and forwards the event without a press', async () => {
+      const calls: string[] = [];
+      const onSelectionChange = jest.fn(() => calls.push('selection'));
+      const onAccessibilityAction = jest.fn(() => calls.push('action'));
+      const onPress = jest.fn();
+      const component = await render(
+        <TabList defaultSelectedValue="overview" onSelectionChange={onSelectionChange}>
+          <Tab controls="overview-panel" content="Overview" value="overview" />
+          <Tab
+            controls="files-panel"
+            content="Files"
+            value="files"
+            accessibilityActions={[{ name: 'Select' }, { name: 'select', label: 'Show panel' }, { name: 'custom', label: 'More' }]}
+            onAccessibilityAction={onAccessibilityAction}
+            onPress={onPress}
+          />
+        </TabList>,
+      );
+      const root = component.getAllByRole('tab')[1];
+      const event = { nativeEvent: { actionName } };
+      expect(root.props.accessibilityActions).toEqual([
+        { name: actionName, label: 'Show panel' },
+        { name: 'custom', label: 'More' },
+      ]);
+
+      await fireEvent(root, 'accessibilityAction', event);
+
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      expect(onSelectionChange).toHaveBeenCalledWith('files');
+      expect(component.getAllByRole('tab')[1].props.accessibilityState.selected).toBe(true);
+      expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+      expect(onAccessibilityAction).toHaveBeenCalledWith(event);
+      expect(calls).toEqual(['selection', 'action']);
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it('keeps standalone selection externally driven and forwards the action once', async () => {
+      const onPress = jest.fn();
+      const onAccessibilityAction = jest.fn();
+      const component = await renderTab({ controls: 'files-panel', selected: false, onPress, onAccessibilityAction });
+      const event = { nativeEvent: { actionName } };
+      expect(getRoot(component).props.accessibilityActions).toEqual([{ name: actionName }]);
+
+      await fireEvent(getRoot(component), 'accessibilityAction', event);
+
+      expect(getRoot(component).props.accessibilityState.selected).toBe(false);
+      expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+      expect(onAccessibilityAction).toHaveBeenCalledWith(event);
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it.each(['tab', 'list'] as const)('guards a disabled %s while forwarding the action once', async (disabledOwner) => {
+      const onSelectionChange = jest.fn();
+      const onAccessibilityAction = jest.fn();
+      const onPress = jest.fn();
+      const component = await render(
+        <TabList disabled={disabledOwner === 'list'} selectedValue="overview" onSelectionChange={onSelectionChange}>
+          <Tab controls="overview-panel" content="Overview" value="overview" />
+          <Tab
+            controls="files-panel"
+            content="Files"
+            value="files"
+            disabled={disabledOwner === 'tab'}
+            onAccessibilityAction={onAccessibilityAction}
+            onPress={onPress}
+          />
+        </TabList>,
+      );
+      const root = component.getAllByRole('tab')[1];
+      const event = { nativeEvent: { actionName } };
+      root.props.onAccessibilityAction(event);
+      expect(root.props.accessibilityState).toMatchObject({ disabled: true, selected: false });
+      expect(onSelectionChange).not.toHaveBeenCalled();
+      expect(onPress).not.toHaveBeenCalled();
+      expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+      expect(onAccessibilityAction).toHaveBeenCalledWith(event);
+    });
+
+    it('forwards custom, wrong-case, and activate actions without selecting', async () => {
+      const onSelectionChange = jest.fn();
+      const onAccessibilityAction = jest.fn();
+      const onPress = jest.fn();
+      const component = await render(
+        <TabList defaultSelectedValue="overview" onSelectionChange={onSelectionChange}>
+          <Tab controls="overview-panel" content="Overview" value="overview" />
+          <Tab
+            controls="files-panel"
+            content="Files"
+            value="files"
+            onAccessibilityAction={onAccessibilityAction}
+            onPress={onPress}
+            accessibilityActions={[{ name: 'custom', label: 'More' }]}
+          />
+        </TabList>,
+      );
+      const root = component.getAllByRole('tab')[1];
+      for (const name of ['custom', actionName === 'select' ? 'Select' : 'select', 'activate']) {
+        const event = { nativeEvent: { actionName: name } };
+        await fireEvent(root, 'accessibilityAction', event);
+        expect(onAccessibilityAction).toHaveBeenLastCalledWith(event);
+      }
+      expect(onAccessibilityAction).toHaveBeenCalledTimes(3);
+      expect(onSelectionChange).not.toHaveBeenCalled();
+      expect(onPress).not.toHaveBeenCalled();
+      expect(root.props.accessibilityState.selected).toBe(false);
+    });
+  });
+
   it('renders default icon-and-text accessibility and stable label overlay', async () => {
     const component = await renderTab({ controls: 'files-panel', content: 'Files' });
     const root = getRoot(component);
diff --git a/packages/agentic/components/src/components/tab/useTab.ts b/packages/agentic/components/src/components/tab/useTab.ts
index 47d1abedd9..74bdeb87d6 100644
--- a/packages/agentic/components/src/components/tab/useTab.ts
+++ b/packages/agentic/components/src/components/tab/useTab.ts
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Pressable } from 'react-native';
+import { Platform, Pressable } from 'react-native';
 
 import {
   type PropsWithRefOf,
+  resolveAccessibilityAction,
   useAccessibilityLabelWarning,
   useFocusablePressable,
   isSelfTargetEvent,
@@ -54,22 +55,16 @@ export function useTab_unstable(props: TabProps): TabState {
   });
 
   const themeState = useThemeState();
-  const selectActions = React.useMemo(
-    () =>
-      accessibilityActions?.some((action) => action.name === 'Select')
-        ? accessibilityActions
-        : [{ name: 'Select' }, ...(accessibilityActions ?? [])],
-    [accessibilityActions],
-  );
+  const selectAction = React.useMemo(() => resolveAccessibilityAction('select', Platform.OS, accessibilityActions), [accessibilityActions]);
   const [pressableProps, pressableState, focusBinding] = useFocusablePressable(
     {
       ...nativeRest,
       accessibilityPosInSet: tabList?.getPosition(value),
       accessibilitySetSize: tabList?.setSize,
       accessibilityRole: 'tab',
-      accessibilityActions: selectActions,
+      accessibilityActions: selectAction.accessibilityActions,
       onAccessibilityAction: (event) => {
-        if (!listDisabled && event.nativeEvent.actionName === 'Select') {
+        if (!listDisabled && event.nativeEvent.actionName === selectAction.name) {
           tabList?.onTabPress(value);
         }
         onAccessibilityAction?.(event);
diff --git a/packages/agentic/components/src/components/tablist/SPEC.md b/packages/agentic/components/src/components/tablist/SPEC.md
index 9cc6ea77d7..65d76a94c6 100644
--- a/packages/agentic/components/src/components/tablist/SPEC.md
+++ b/packages/agentic/components/src/components/tablist/SPEC.md
@@ -76,7 +76,10 @@ Focusability and selection commit before imperative focus. Ref-backed target
 registrations replace raw optional `.focus()` calls. Native focus events confirm
 the focused value; a request or active tab stop does not itself prove focus moved.
 Pending requests cancel on replacement/removal. Modified shortcuts are forwarded,
-and `Select` accessibility actions use the collection's selection owner.
+and each Tab's semantic select accessibility action uses the collection's
+selection owner. Framework Base resolves its declaration and event name to
+`select` on Windows Fabric, `Select` on Win32, and the existing `Select` custom
+action on macOS; see [Tab accessibility](../tab/spec/accessibility.md).
 
 When `selectionFollowsFocus` is true, movement requests the focused value.
 Otherwise focus moves independently and Enter, Space, or pointer activation
diff --git a/packages/agentic/components/src/components/tablist/spec/interaction.md b/packages/agentic/components/src/components/tablist/spec/interaction.md
index ca7fd6ed89..dfc9fae4c2 100644
--- a/packages/agentic/components/src/components/tablist/spec/interaction.md
+++ b/packages/agentic/components/src/components/tablist/spec/interaction.md
@@ -24,8 +24,12 @@ Target eligibility/selection are committed before the layout-effect focus
 request. The active tab stop is distinct from the last confirmed native focus
 value. Targets register ref-backed controllers; native focus events confirm
 requests, and removal/replacement cancels stale requests. Modified shortcuts
-are not consumed. The native `Select` accessibility action uses the same
-collection selection owner.
+are not consumed. Each Tab's semantic select accessibility action uses the same
+collection selection owner: `select` on Windows Fabric, `Select` on Win32, and
+the existing `Select` custom action on macOS. The Tab resolves the declaration
+and event name together, guards disabled selection, and forwards the original
+caller accessibility event once without synthesizing `onPress`. This custom
+action path does not establish default macOS AXPress support.
 
 ## Pointer
 
diff --git a/packages/agentic/components/src/components/tablist/tablist.stories.tsx b/packages/agentic/components/src/components/tablist/tablist.stories.tsx
index 05afc4e3be..8f89486169 100644
--- a/packages/agentic/components/src/components/tablist/tablist.stories.tsx
+++ b/packages/agentic/components/src/components/tablist/tablist.stories.tsx
@@ -8,6 +8,8 @@ import type { WdioStory } from '@fluentui-react-native/storybook-desktop/testing
 import { Tab } from '../tab/tab';
 import { TabList } from './tablist';
 import type { TabKeyEvent, TabListProps } from './tablist.types';
+import { Input } from '../input/input';
+import { StoryStatus } from '../../common/StoryStatus.story-helpers';
 
 const meta: Meta<typeof TabList> = {
   title: 'Components/TabList',
@@ -62,6 +64,7 @@ function FocusManagementScene({ selectionFollowsFocus = true }: { selectionFollo
   };
   return (
     <View>
+      <Input accessibilityLabel="Keyboard entry" placeholder="Tab into the list" testID="focus-tab-entry" />
       <TabList
         accessibilityLabel="Focus navigation"
         selectedValue={selectedValue}
@@ -73,9 +76,9 @@ function FocusManagementScene({ selectionFollowsFocus = true }: { selectionFollo
         <Tab controls="focus-panel-disabled" content="Disabled" disabled testID="focus-tab-disabled" />
         <Tab controls="focus-panel-two" content="Two" onFocus={recordFocus} testID="focus-tab-two" />
       </TabList>
-      <Text testID="focus-tab-selection">{selectedValue}</Text>
-      <Text testID="focus-tab-selection-at-focus">{selectionAtFocus}</Text>
-      <Text testID="focus-tab-owner-key">{ownerKey}</Text>
+      <StoryStatus testID="focus-tab-selection">{selectedValue}</StoryStatus>
+      <StoryStatus testID="focus-tab-selection-at-focus">{selectionAtFocus}</StoryStatus>
+      <StoryStatus testID="focus-tab-owner-key">{ownerKey}</StoryStatus>
     </View>
   );
 }
@@ -85,12 +88,13 @@ export const FocusManagement: Story = {
   tags: ['desktop-focus'],
   wdio: {
     'commits selection before focus, skips disabled tabs, and supports wrap, Home, and End': async (context) => {
-      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      const { requireDesktopFocus, expectNativeState, focusByTab } = await import('../../common/desktopFocus.wdio.ts');
       if (!requireDesktopFocus(context)) return;
-      const { browser, expect } = context;
-      await (await browser.$('~focus-tab-one')).click();
-      await expectNativeState(browser, 'focus-tab-one', 'focused', true);
-      await expect(await browser.$('~focus-tab-disabled')).not.toBeEnabled();
+      const { browser, expect, platform } = context;
+      await focusByTab(browser, 'focus-tab-entry', 'focus-tab-one');
+      if (platform !== 'macos') {
+        await expect(await browser.$('~focus-tab-disabled')).not.toBeEnabled();
+      }
       for (const [key, id, value] of [
         ['\uE014', 'focus-tab-two', 'focus-panel-two'],
         ['\uE014', 'focus-tab-one', 'focus-panel-one'],
@@ -99,28 +103,53 @@ export const FocusManagement: Story = {
       ]) {
         await browser.keys(key);
         await expectNativeState(browser, id, 'focused', true);
-        await expectNativeState(browser, id, 'selected', true);
+        if (platform !== 'macos') {
+          await expectNativeState(browser, id, 'selected', true);
+        }
         await expect(await browser.$('~focus-tab-selection')).toHaveText(value);
         await expect(await browser.$('~focus-tab-selection-at-focus')).toHaveText(value);
         await expectNativeState(browser, 'focus-tab-disabled', 'focused', false);
       }
     },
     'leaves modified navigation chords to their owner': async (context) => {
-      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      const { requireDesktopFocus, expectNativeState, focusByTab } = await import('../../common/desktopFocus.wdio.ts');
       if (!requireDesktopFocus(context)) return;
-      const { browser, expect } = context;
-      for (const [modifier, name] of [
-        ['\uE009', 'Control'],
-        ['\uE008', 'Shift'],
-      ]) {
-        await (await browser.$('~focus-tab-one')).click();
-        await expectNativeState(browser, 'focus-tab-one', 'focused', true);
+      const { browser, expect, platform } = context;
+      // Control+Arrow is a macOS system shortcut, not a key the app can promise to receive.
+      const modifiers =
+        platform === 'macos'
+          ? [['\uE008', 'Shift']]
+          : [
+              ['\uE009', 'Control'],
+              ['\uE008', 'Shift'],
+            ];
+      for (const [modifier, name] of modifiers) {
+        await focusByTab(browser, 'focus-tab-entry', 'focus-tab-one');
         await browser.keys([modifier, '\uE014']);
         await expect(await browser.$('~focus-tab-owner-key')).toHaveText(`${name}+ArrowRight`);
-        await expectNativeState(browser, 'focus-tab-one', 'selected', true);
+        if (platform !== 'macos') {
+          await expectNativeState(browser, 'focus-tab-one', 'selected', true);
+        }
         await expect(await browser.$('~focus-tab-selection')).toHaveText('focus-panel-one');
       }
     },
+    'exposes native selected and disabled accessibility states': async (context) => {
+      const { browser, platform, skip, expect } = context;
+      if (platform === 'macos') {
+        skip(
+          'RNmacOS 0.81.9 Fabric does not project accessibilityState.selected/disabled to AX; navigation and selection callbacks run separately.',
+        );
+        return;
+      }
+      const { requireDesktopFocus, expectNativeState, focusByTab } = await import('../../common/desktopFocus.wdio.ts');
+      if (!requireDesktopFocus(context)) return;
+      await focusByTab(browser, 'focus-tab-entry', 'focus-tab-one');
+      await expect(await browser.$('~focus-tab-disabled')).not.toBeEnabled();
+      await expectNativeState(browser, 'focus-tab-one', 'selected', true);
+      await browser.keys('\uE014');
+      await expectNativeState(browser, 'focus-tab-one', 'selected', false);
+      await expectNativeState(browser, 'focus-tab-two', 'selected', true);
+    },
   },
 };
 
@@ -129,17 +158,21 @@ export const ManualFocusManagement: Story = {
   tags: ['desktop-focus'],
   wdio: {
     'keeps manual selection independent until Enter activates the focused tab': async (context) => {
-      const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      const { requireDesktopFocus, expectNativeState, focusByTab } = await import('../../common/desktopFocus.wdio.ts');
       if (!requireDesktopFocus(context)) return;
-      const { browser, expect } = context;
-      await (await browser.$('~focus-tab-one')).click();
+      const { browser, expect, platform } = context;
+      await focusByTab(browser, 'focus-tab-entry', 'focus-tab-one');
       await browser.keys('\uE014');
       await expectNativeState(browser, 'focus-tab-two', 'focused', true);
-      await expectNativeState(browser, 'focus-tab-one', 'selected', true);
-      await expectNativeState(browser, 'focus-tab-two', 'selected', false);
+      if (platform !== 'macos') {
+        await expectNativeState(browser, 'focus-tab-one', 'selected', true);
+        await expectNativeState(browser, 'focus-tab-two', 'selected', false);
+      }
       await expect(await browser.$('~focus-tab-selection')).toHaveText('focus-panel-one');
       await browser.keys('\uE007');
-      await expectNativeState(browser, 'focus-tab-two', 'selected', true);
+      if (platform !== 'macos') {
+        await expectNativeState(browser, 'focus-tab-two', 'selected', true);
+      }
       await expect(await browser.$('~focus-tab-selection')).toHaveText('focus-panel-two');
     },
   },
diff --git a/packages/agentic/components/src/primitives/focus-zone/focus-zone.stories.tsx b/packages/agentic/components/src/primitives/focus-zone/focus-zone.stories.tsx
index e9c8f7f640..8bf9505cbb 100644
--- a/packages/agentic/components/src/primitives/focus-zone/focus-zone.stories.tsx
+++ b/packages/agentic/components/src/primitives/focus-zone/focus-zone.stories.tsx
@@ -197,16 +197,16 @@ export const Default: Story = {
   tags: ['desktop-e2e'],
   render: (args) => <FocusZoneExample {...args} />,
   wdio: {
-    'navigates linearly and exits the zone on Tab': async (context) => {
+    'uses platform directional navigation and exits the zone on Tab': async (context) => {
       const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
       if (!requireDesktopFocus(context)) return;
-      const { browser } = context;
+      const { browser, platform } = context;
       await (await browser.$('~focus-zone-item-1')).click();
       await expectNativeState(browser, 'focus-zone-item-1', 'focused', true);
       await browser.keys('\uE014');
       await expectNativeState(browser, 'focus-zone-item-2', 'focused', true);
       await browser.keys('\uE015');
-      await expectNativeState(browser, 'focus-zone-item-3', 'focused', true);
+      await expectNativeState(browser, platform === 'macos' ? 'focus-zone-item-5' : 'focus-zone-item-3', 'focused', true);
       await browser.keys('\uE004');
       await expectNativeState(browser, 'focus-zone-after', 'focused', true);
     },
@@ -214,7 +214,8 @@ export const Default: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Focus an item, then use the arrow keys to move through the grid and Tab to leave the zone.',
+        story:
+          'Focus an item, then use arrows and Tab to leave the zone. Windows/Win32 default to linear navigation; AppKit uses geometric directional navigation.',
       },
     },
   },
diff --git a/packages/agentic/components/tsconfig.json b/packages/agentic/components/tsconfig.json
index cfd0f9ef03..1b9942a25a 100644
--- a/packages/agentic/components/tsconfig.json
+++ b/packages/agentic/components/tsconfig.json
@@ -7,7 +7,7 @@
     "tsBuildInfoFile": ".cache/tsconfig.tsbuildinfo"
   },
   "include": ["src"],
-  "exclude": ["**/*.stories.ts", "**/*.stories.tsx", "**/*.wdio.ts"],
+  "exclude": ["**/*.stories.ts", "**/*.stories.tsx", "**/*.story-helpers.tsx", "**/*.wdio.ts"],
   "references": [
     {
       "path": "../../native/Callout/tsconfig.json"
diff --git a/packages/agentic/components/tsconfig.stories.json b/packages/agentic/components/tsconfig.stories.json
index a90e3e4cc9..20a1975ba7 100644
--- a/packages/agentic/components/tsconfig.stories.json
+++ b/packages/agentic/components/tsconfig.stories.json
@@ -14,6 +14,7 @@
     "src/components/switch/switch.stories.tsx",
     "src/components/tablist/tablist.stories.tsx",
     "src/primitives/focus-zone/focus-zone.stories.tsx",
+    "src/**/*.story-helpers.tsx",
     "src/**/*.wdio.ts"
   ],
   "exclude": [],
diff --git a/packages/agentic/desktop-driver/native/macos/README.md b/packages/agentic/desktop-driver/native/macos/README.md
index af4d789179..ca3888e6ab 100644
--- a/packages/agentic/desktop-driver/native/macos/README.md
+++ b/packages/agentic/desktop-driver/native/macos/README.md
@@ -199,6 +199,16 @@ React Native macOS does not move keyboard focus on ordinary mouse-down. Portable
 tests should assert the platform's actual activation behavior rather than
 copying a Windows focus expectation.
 
+Keyboard and pointer events carry modifier flags derived from the helper's
+pressed-key ledger, including left/right Shift, Control, Option, and Command.
+Do not rely on the OS having processed a previously posted modifier event:
+fast W3C sequences such as Shift+Tab must retain their chord deterministically.
+Release and recovery paths update the ledger after each emitted keyup.
+Repeated keydowns are still posted but do not add another held physical key.
+Aliases for the same key share one entry; left and right modifiers remain
+independent. One release must remove that physical key from later keyboard and
+pointer flags.
+
 ## Capture
 
 ScreenCaptureKit captures a uniquely correlated application window and encodes
diff --git a/packages/agentic/desktop-driver/native/macos/Sources/DesktopDriverHost/Input.swift b/packages/agentic/desktop-driver/native/macos/Sources/DesktopDriverHost/Input.swift
index faaf87029d..ab5d4a86b1 100644
--- a/packages/agentic/desktop-driver/native/macos/Sources/DesktopDriverHost/Input.swift
+++ b/packages/agentic/desktop-driver/native/macos/Sources/DesktopDriverHost/Input.swift
@@ -1,16 +1,48 @@
 import ApplicationServices
 import Foundation
 
-enum KeyStroke {
+enum KeyStroke: Equatable {
   case keyCode(CGKeyCode)
   case unicode(String)
 }
 
+func modifierFlags(for strokes: [KeyStroke]) -> CGEventFlags {
+  strokes.reduce(into: CGEventFlags()) { flags, stroke in
+    switch stroke {
+    case .keyCode(56), .keyCode(60): flags.insert(.maskShift)
+    case .keyCode(59), .keyCode(62): flags.insert(.maskControl)
+    case .keyCode(58), .keyCode(61): flags.insert(.maskAlternate)
+    case .keyCode(55), .keyCode(54): flags.insert(.maskCommand)
+    default: break
+    }
+  }
+}
+
+func modifierFlagsAfterKey(_ stroke: KeyStroke, down: Bool, held: [KeyStroke]) -> CGEventFlags {
+  var strokes = held
+  if down {
+    strokes.append(stroke)
+  } else {
+    strokes.removeAll { $0 == stroke }
+  }
+  return modifierFlags(for: strokes)
+}
+
 struct PressedKey {
   let value: String
   let stroke: KeyStroke
 }
 
+func trackKeyDown(_ key: PressedKey, held: inout [PressedKey]) {
+  if !held.contains(where: { $0.stroke == key.stroke }) {
+    held.append(key)
+  }
+}
+
+func trackKeyUp(_ stroke: KeyStroke, held: inout [PressedKey]) {
+  held.removeAll { $0.stroke == stroke }
+}
+
 struct ReleaseLedger {
   let keys: [String]
   let buttons: [Int]
@@ -136,7 +168,7 @@ final class InputController {
     }
     let stroke = strokeForValue(value)
     try postKey(stroke, down: true)
-    pressedKeys.append(PressedKey(value: value, stroke: stroke))
+    trackKeyDown(PressedKey(value: value, stroke: stroke), held: &pressedKeys)
   }
 
   func keyUp(_ value: String, token: CancellationToken) throws {
@@ -149,13 +181,9 @@ final class InputController {
       return
     }
     try requirePhysicalInput()
-    if let index = pressedKeys.lastIndex(where: { $0.value == value }) {
-      let stroke = pressedKeys[index].stroke
-      try postKey(stroke, down: false)
-      pressedKeys.remove(at: index)
-      return
-    }
-    try postKey(strokeForValue(value), down: false)
+    let stroke = strokeForValue(value)
+    try postKey(stroke, down: false)
+    trackKeyUp(stroke, held: &pressedKeys)
   }
 
   func typeText(_ text: String, token: CancellationToken) throws {
@@ -169,9 +197,9 @@ final class InputController {
       let normalized = value == "\n" ? "\u{E006}" : value
       let stroke = strokeForValue(normalized)
       try postKey(stroke, down: true)
-      pressedKeys.append(PressedKey(value: normalized, stroke: stroke))
+      trackKeyDown(PressedKey(value: normalized, stroke: stroke), held: &pressedKeys)
       try postKey(stroke, down: false)
-      pressedKeys.removeLast()
+      trackKeyUp(stroke, held: &pressedKeys)
     }
   }
 
@@ -181,10 +209,10 @@ final class InputController {
   }
 
   func releaseAll() {
-    for key in pressedKeys.reversed() {
+    while let key = pressedKeys.last {
       try? postKey(key.stroke, down: false)
+      pressedKeys.removeLast()
     }
-    pressedKeys.removeAll()
     pointerCancel()
   }
 
@@ -195,7 +223,9 @@ final class InputController {
     try requirePhysicalInput()
     syncPointer()
     for key in ledger.keys.reversed() {
-      try postKey(strokeForValue(key), down: false)
+      let stroke = strokeForValue(key)
+      try postKey(stroke, down: false)
+      trackKeyUp(stroke, held: &pressedKeys)
     }
     for button in ledger.buttons.reversed() {
       _ = try mouseButton(button)
@@ -210,6 +240,7 @@ final class InputController {
     var keyCount = 0
     for code in modifierCodes where CGEventSource.keyState(.combinedSessionState, key: code) {
       try postKey(.keyCode(code), down: false)
+      trackKeyUp(.keyCode(code), held: &pressedKeys)
       keyCount += 1
     }
     syncPointer()
@@ -227,7 +258,7 @@ final class InputController {
     for (index, stroke) in strokes.enumerated() {
       try token.throwIfCancelled()
       try postKey(stroke, down: true)
-      pressedKeys.append(PressedKey(value: "chord:\(index)", stroke: stroke))
+      trackKeyDown(PressedKey(value: "chord:\(index)", stroke: stroke), held: &pressedKeys)
     }
     while pressedKeys.count > base {
       let stroke = pressedKeys.last!.stroke
@@ -262,6 +293,12 @@ final class InputController {
     guard let event else {
       try fail(ErrorCode.inputFailed, "Creating a macOS keyboard event failed.")
     }
+    // Posted events are asynchronous: the OS may not have observed the preceding
+    // modifier event when the next event is constructed. Use our owned ledger.
+    var flags = event.flags
+    flags.subtract([.maskShift, .maskControl, .maskAlternate, .maskCommand])
+    flags.formUnion(modifierFlagsAfterKey(stroke, down: down, held: pressedKeys.map(\.stroke)))
+    event.flags = flags
     event.post(tap: .cghidEventTap)
   }
 
@@ -276,6 +313,10 @@ final class InputController {
       try fail(ErrorCode.inputFailed, "Creating a macOS pointer event failed.")
     }
     event.setIntegerValueField(.mouseEventButtonNumber, value: Int64(nativeButton.rawValue))
+    var flags = event.flags
+    flags.subtract([.maskShift, .maskControl, .maskAlternate, .maskCommand])
+    flags.formUnion(modifierFlags(for: pressedKeys.map(\.stroke)))
+    event.flags = flags
     event.post(tap: .cghidEventTap)
   }
 
diff --git a/packages/agentic/desktop-driver/native/macos/Sources/DesktopDriverHost/SelfTest.swift b/packages/agentic/desktop-driver/native/macos/Sources/DesktopDriverHost/SelfTest.swift
index d2377d1c5c..7e3005f7b3 100644
--- a/packages/agentic/desktop-driver/native/macos/Sources/DesktopDriverHost/SelfTest.swift
+++ b/packages/agentic/desktop-driver/native/macos/Sources/DesktopDriverHost/SelfTest.swift
@@ -19,6 +19,7 @@ private final class SelfTestRunner {
     testFraming()
     testJSON()
     testInputLedger()
+    testInputModifiers()
     testInputLock()
     testCaptureScale()
     testSnapshotShape()
@@ -97,6 +98,53 @@ private final class SelfTestRunner {
     }
   }
 
+  private func testInputModifiers() {
+    check(modifierFlagsAfterKey(.keyCode(56), down: true, held: []) == .maskShift, "Shift down carries its modifier flag")
+    check(
+      modifierFlagsAfterKey(.keyCode(48), down: true, held: [.keyCode(56)]) == .maskShift,
+      "Tab carries the already-posted Shift flag without relying on OS dispatch"
+    )
+    check(
+      modifierFlagsAfterKey(.keyCode(48), down: false, held: [.keyCode(56), .keyCode(48)]) == .maskShift,
+      "Tab release preserves held Shift"
+    )
+    check(
+      modifierFlagsAfterKey(.keyCode(56), down: false, held: [.keyCode(56)]).isEmpty,
+      "Shift release clears its flag"
+    )
+    check(
+      modifierFlagsAfterKey(.keyCode(56), down: false, held: [.keyCode(56), .keyCode(60)]) == .maskShift,
+      "releasing left Shift preserves held right Shift"
+    )
+    check(
+      modifierFlags(for: [.keyCode(62), .keyCode(61), .keyCode(54)]) == [.maskControl, .maskAlternate, .maskCommand],
+      "right-hand modifier keys combine their flags"
+    )
+    check(
+      modifierFlags(for: [.unicode("x"), .keyCode(48)]).isEmpty,
+      "ordinary keys do not add modifier flags"
+    )
+    var held: [PressedKey] = []
+    let shift = PressedKey(value: "\u{E008}", stroke: .keyCode(56))
+    trackKeyDown(shift, held: &held)
+    trackKeyDown(shift, held: &held)
+    check(held.count == 1, "repeated Shift keydown does not duplicate a held physical key")
+    trackKeyUp(shift.stroke, held: &held)
+    check(
+      modifierFlagsAfterKey(.keyCode(48), down: true, held: held.map(\.stroke)).isEmpty,
+      "Tab is unmodified after repeated Shift down and one release"
+    )
+    check(modifierFlags(for: held.map(\.stroke)).isEmpty, "pointer events do not retain a released repeated modifier")
+    trackKeyDown(shift, held: &held)
+    trackKeyDown(PressedKey(value: "left-shift-alias", stroke: .keyCode(56)), held: &held)
+    trackKeyDown(PressedKey(value: "right-shift", stroke: .keyCode(60)), held: &held)
+    check(held.count == 2, "aliases share a physical key while left and right Shift remain independent")
+    trackKeyUp(.keyCode(56), held: &held)
+    check(modifierFlags(for: held.map(\.stroke)) == .maskShift, "releasing an aliased left Shift preserves right Shift")
+    trackKeyUp(.keyCode(60), held: &held)
+    check(held.isEmpty, "both physical Shift keys can be released independently")
+  }
+
   private func testInputLock() {
     let name = "furn-desktop-driver-self-test-\(getpid())-\(UUID().uuidString)"
     let lock = PhysicalInputLock(baseName: name)
@@ -108,6 +156,7 @@ private final class SelfTestRunner {
     } catch {
       check(false, "idle physical input lock is available")
     }
+
     do {
       try lock.installDeadOwnerForSelfTest()
       _ = try lock.withLock(token: token, timeoutMilliseconds: 200, policy: .fail) { 0 }
diff --git a/packages/agentic/desktop-driver/references/ci-integration.md b/packages/agentic/desktop-driver/references/ci-integration.md
index 0a2e0000c8..9b54b17379 100644
--- a/packages/agentic/desktop-driver/references/ci-integration.md
+++ b/packages/agentic/desktop-driver/references/ci-integration.md
@@ -115,6 +115,15 @@ Those jobs are consumer examples, not generic package requirements. The native
 helper itself does not require CocoaPods, the Windows App Runtime, or a
 Storybook process.
 
+The shared macOS setup enables Keyboard navigation (`AppleKeyboardUIMode=3`)
+and verifies AppKit's all-controls Tab preference before launching the app.
+Keep this enabled on interactive development and CI Macs. It is not an input
+permission, a screen-unlock operation, or the similarly named Accessibility
+Full Keyboard Access feature. A locked/noninteractive session or missing TCC
+authority still prevents physical input, and the hosted `physicalClick` policy
+still causes tests requiring physical clicks to skip explicitly. Keyboard-only
+CI coverage does not establish physical-click or complete focus qualification.
+
 ## macOS runners and signing
 
 Authoritative AX and input qualification needs:
diff --git a/packages/components/FocusZone/SPEC.md b/packages/components/FocusZone/SPEC.md
index 1b2fee2466..e6be5902b6 100644
--- a/packages/components/FocusZone/SPEC.md
+++ b/packages/components/FocusZone/SPEC.md
@@ -22,10 +22,15 @@ because it owns native macOS code and CocoaPods integration.
 
 - macOS includes both the existing Paper view manager and a package-owned Fabric
   component view. Both reuse the same `RCTFocusZone` navigation implementation.
+  Directional movement is geometric; `use2DNavigation` does not switch AppKit to
+  the Windows linear mode. For example, Down from item 2 in a three-column grid
+  moves to item 5.
 - Windows includes a package-owned Fabric component view that coordinates
   directional, Home/End, Tab, and focus-restoration behavior through RNW
   `ComponentView` focus APIs.
 - Win32 continues to use its platform-provided native FocusZone implementation.
+  Windows/Win32 use linear movement by default and opt into geometric movement
+  with `use2DNavigation`.
 - Unsupported behavior remains platform-defined rather than being simulated in
   JavaScript.
 
diff --git a/packages/components/FocusZone/src/FocusZone.types.ts b/packages/components/FocusZone/src/FocusZone.types.ts
index db914b92d0..b9dfaf363a 100644
--- a/packages/components/FocusZone/src/FocusZone.types.ts
+++ b/packages/components/FocusZone/src/FocusZone.types.ts
@@ -32,8 +32,9 @@ export interface FocusZoneProps extends ViewProps {
   isCircularNavigation?: boolean;
 
   /**
-   *Allows for 2D navigation. This navigation strategy takes into account the position of elements
-   on screen, and navigates in the direction the user selects to the nearest element.
+   * Enables geometric rather than linear navigation on Windows/Win32.
+   * macOS always uses geometric directional navigation.
+   * @platform windows, win32
    */
   use2DNavigation?: boolean;
 
diff --git a/packages/framework-base/AGENTS.md b/packages/framework-base/AGENTS.md
index c38cd8fdf1..d565058a9b 100644
--- a/packages/framework-base/AGENTS.md
+++ b/packages/framework-base/AGENTS.md
@@ -39,6 +39,16 @@ adding or changing a component pattern.
 Add compile-time type assertions for public type behavior and runtime tests for
 rendering, prop merging, children, keys, and refs affected by a change.
 
+## Accessibility
+
+Universal non-styling accessibility helpers belong in `src/accessibility`.
+Read its [authoring instructions](./src/accessibility/AGENTS.md) before adding
+an abstraction. Use `resolveAccessibilityAction` for the demonstrated
+toggle/select transport contract rather than duplicating platform constants,
+action-list merging, and event-name decisions in consumers. Keep component
+state transitions and handler composition local, and preserve the generic
+entrypoint's React-only import safety.
+
 ## Focus and native refs
 
 Use the [common focus instructions](../../.github/skills/agentic-component-authoring/references/focus.md)
diff --git a/packages/framework-base/src/accessibility/AGENTS.md b/packages/framework-base/src/accessibility/AGENTS.md
new file mode 100644
index 0000000000..914553ef9c
--- /dev/null
+++ b/packages/framework-base/src/accessibility/AGENTS.md
@@ -0,0 +1,80 @@
+# Shared accessibility foundation
+
+Put universal, non-styling accessibility helpers in this directory. Keep
+component roles, state ownership, accessible-name policy, and activation
+callbacks in the owning component. Styling belongs in Design; native focus
+targets and keyboard coordination remain in the existing focus hooks.
+
+Extract only demonstrated shared behavior. Do not build a generic action
+registry, role framework, or speculative list of platform constants.
+
+## Semantic actions
+
+Use `resolveAccessibilityAction('toggle' | 'select', Platform.OS, callerActions)`
+and use both results from the same resolution:
+
+```ts
+const action = resolveAccessibilityAction('toggle', Platform.OS, accessibilityActions);
+// Assign action.accessibilityActions to the native root.
+// Compare event.nativeEvent.actionName === action.name in its handler.
+```
+
+The resolver is pure and declares actions; it does not invoke a native service
+or guarantee that a platform's default assistive gesture invokes that action.
+Components may memoize the resolution against their caller action array.
+Constants alone are insufficient: declarations and event comparisons must
+agree, and duplicate declarations can produce duplicate native callbacks.
+
+The current transport contract is:
+
+| Platform        | Toggle   | Select   | Evidence and limits                                                                                                                                                                                                                         |
+| --------------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Windows Fabric  | `toggle` | `select` | RNW 0.81.35 `CompositionDynamicAutomationProvider.cpp` dispatches lowercase names. `UiaHelpers.cpp::DispatchAccessibilityAction` compares case-sensitively and emits once for every matching declaration.                                   |
+| Office Win32    | `Toggle` | `Select` | `@office-iss/react-native-win32` 0.81.8 `ViewAccessibility.d.ts` declares these UIA action names; existing FURN V1 Checkbox and Switch use `Toggle`. Native UIA invocation still needs target-platform verification.                        |
+| macOS           | `Toggle` | `Select` | RNmacOS 0.81.9 Fabric `RCTViewComponentView.mm::accessibilityCustomActions` exposes the declared names verbatim; `didActivateAccessibilityCustomAction` emits that exact name. These are custom actions, not an inferred `AXPress` mapping. |
+| Other platforms | `Toggle` | `Select` | Retains existing custom declarations; this is not native pattern or gesture qualification. Verify a renderer before claiming support.                                                                                                       |
+
+These source paths are relative to the installed platform package:
+
+- RNW: `Microsoft.ReactNative/Fabric/Composition/`.
+- Win32: `Libraries/Components/View/ViewAccessibility.d.ts`.
+- RNmacOS Fabric: `React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm`.
+- RNmacOS Paper: `React/Views/RCTView.m`.
+
+RNmacOS Fabric constructs custom actions from `name`, ignoring `label`; keep
+caller labels in JS rather than replacing them with guessed localized text.
+Paper instead maps a custom action's label back to its declared name and
+implements `accessibilityPerformPress` using `activate` or `onAccessibilityTap`.
+Fabric's `accessibilityActivate` only forwards `onAccessibilityTap`, and is not
+that AppKit press implementation. Do not map toggle/select to `activate`,
+synthesize `onPress`, or add an AXPress fallback based on Paper evidence.
+
+The resolver normalizes only the owned semantic action's two known spellings.
+It deduplicates exact resulting names, preserves caller order and the first
+defined label (including an empty label), and prepends a missing owned action.
+Other custom names retain their case and identity; inputs are not mutated.
+An already normalized, duplicate-free array is returned unchanged. Incoming
+events are not rewritten or matched case-insensitively.
+
+## Future authoring requirements
+
+- Read the component contract and source-check the installed renderer's action
+  declaration, event name, invocation, and default activation paths. Record
+  versions and separate observed behavior from inference.
+- Keep the generic package entrypoint React-only import-safe. Use type-only
+  native imports and explicit platform inputs for pure utilities, or an
+  opt-in native implementation with an explicit unsupported generic facade.
+  Never eagerly import `Platform` or a native module through the generic index.
+  Preserve Framework Base's React 18 compatibility.
+- Keep disabled guards and controlled/uncontrolled or group state ownership in
+  components. Compose the component behavior first, then forward the original
+  caller event exactly once, including custom and disabled actions. Do not
+  synthesize a pointer/keyboard event from an accessibility event.
+- Cover declaration casing, duplicate names, caller labels/actions, exact event
+  matching, callback counts/order, and disabled state in unit tests. Add type
+  coverage for public helpers and run the React-only import path.
+- Native qualification must invoke UIA `TogglePattern.Toggle` or
+  `SelectionItemPattern.Select`, or the actual AX custom action, and assert
+  native state plus callback counts. State read after a physical click, a Jest
+  `fireEvent`, or a successful bundle is not native action-dispatch evidence.
+  Report unsupported native actions and unrun platforms explicitly.
diff --git a/packages/framework-base/src/accessibility/resolveAccessibilityAction.test.ts b/packages/framework-base/src/accessibility/resolveAccessibilityAction.test.ts
new file mode 100644
index 0000000000..d0dc39b00f
--- /dev/null
+++ b/packages/framework-base/src/accessibility/resolveAccessibilityAction.test.ts
@@ -0,0 +1,80 @@
+import { resolveAccessibilityAction } from './resolveAccessibilityAction';
+
+jest.mock('react-native', () => {
+  throw new Error('The accessibility resolver must not load React Native at runtime.');
+});
+
+describe('resolveAccessibilityAction', () => {
+  it.each([
+    ['windows', 'toggle', 'toggle'],
+    ['windows', 'select', 'select'],
+    ['win32', 'toggle', 'Toggle'],
+    ['win32', 'select', 'Select'],
+    ['macos', 'toggle', 'Toggle'],
+    ['macos', 'select', 'Select'],
+  ] as const)('resolves %s %s to the declared native name %s', (platform, action, name) => {
+    expect(resolveAccessibilityAction(action, platform)).toEqual({ name, accessibilityActions: [{ name }] });
+  });
+
+  it.each(['ios', 'android', 'web'])('preserves existing custom names on %s without claiming native patterns', (platform) => {
+    expect(resolveAccessibilityAction('toggle', platform).name).toBe('Toggle');
+    expect(resolveAccessibilityAction('select', platform).name).toBe('Select');
+  });
+
+  it.each([
+    ['toggle', 'Toggle', 'toggle'],
+    ['select', 'Select', 'select'],
+  ] as const)('merges %s spellings while retaining caller order and labels', (action, titleCase, lowerCase) => {
+    const custom = Object.freeze({ name: 'custom', label: 'More options' });
+    const supplied = Object.freeze([
+      custom,
+      Object.freeze({ name: titleCase }),
+      Object.freeze({ name: lowerCase, label: 'Change value' }),
+      Object.freeze({ name: titleCase, label: 'Later label' }),
+    ]);
+
+    for (const platform of ['windows', 'win32', 'macos']) {
+      const expectedName = platform === 'windows' ? lowerCase : titleCase;
+      const resolved = resolveAccessibilityAction(action, platform, supplied);
+      expect(resolved.name).toBe(expectedName);
+      expect(resolved.accessibilityActions).toEqual([custom, { name: expectedName, label: 'Change value' }]);
+      expect(resolved.accessibilityActions[0]).toBe(custom);
+    }
+    expect(supplied[1]).toEqual({ name: titleCase });
+  });
+
+  it('preserves an already normalized caller array', () => {
+    const actions = Object.freeze([
+      { name: 'custom', label: 'More' },
+      { name: 'toggle', label: 'Change' },
+    ]);
+    expect(resolveAccessibilityAction('toggle', 'windows', actions).accessibilityActions).toBe(actions);
+  });
+
+  it('prepends a missing action and deduplicates exact custom names without changing their case', () => {
+    const actions = Object.freeze([
+      { name: 'custom' },
+      { name: 'custom', label: 'More' },
+      { name: 'custom', label: 'Later' },
+      { name: 'Custom', label: 'Distinct action' },
+      { name: 'TOGGLE', label: 'Not an alias' },
+      { name: 'Select', label: 'Not owned by this toggle' },
+    ]);
+    expect(resolveAccessibilityAction('toggle', 'windows', actions).accessibilityActions).toEqual([
+      { name: 'toggle' },
+      { name: 'custom', label: 'More' },
+      { name: 'Custom', label: 'Distinct action' },
+      { name: 'TOGGLE', label: 'Not an alias' },
+      { name: 'Select', label: 'Not owned by this toggle' },
+    ]);
+  });
+
+  it('preserves an explicitly empty label rather than replacing it', () => {
+    expect(
+      resolveAccessibilityAction('toggle', 'windows', [
+        { name: 'Toggle', label: '' },
+        { name: 'toggle', label: 'Later' },
+      ]).accessibilityActions,
+    ).toEqual([{ name: 'toggle', label: '' }]);
+  });
+});
diff --git a/packages/framework-base/src/accessibility/resolveAccessibilityAction.ts b/packages/framework-base/src/accessibility/resolveAccessibilityAction.ts
new file mode 100644
index 0000000000..42e396a5ab
--- /dev/null
+++ b/packages/framework-base/src/accessibility/resolveAccessibilityAction.ts
@@ -0,0 +1,49 @@
+import type { AccessibilityActionInfo } from 'react-native';
+
+const actionNames = {
+  toggle: { windows: 'toggle', custom: 'Toggle' },
+  select: { windows: 'select', custom: 'Select' },
+} as const;
+
+export type SemanticAccessibilityAction = keyof typeof actionNames;
+
+/**
+ * Resolves a component-owned action and its declarations together. Windows UIA
+ * uses lowercase names; Win32 and existing custom-action transports use title case.
+ * This declares an action, not support for a platform's default activation gesture.
+ */
+export function resolveAccessibilityAction(
+  action: SemanticAccessibilityAction,
+  platform: string,
+  actions?: readonly AccessibilityActionInfo[],
+): { name: string; accessibilityActions: readonly AccessibilityActionInfo[] } {
+  const names = actionNames[action];
+  const name = platform === 'windows' ? names.windows : names.custom;
+  const merged: AccessibilityActionInfo[] = [];
+  const positions = new Map<string, number>();
+  let changed = false;
+
+  for (const supplied of actions ?? []) {
+    const resolvedName = supplied.name === names.windows || supplied.name === names.custom ? name : supplied.name;
+    const position = positions.get(resolvedName);
+    if (position !== undefined) {
+      // Keep the first declaration and first supplied label for each exact name.
+      const previous = merged[position];
+      if (previous.label === undefined && supplied.label !== undefined) {
+        merged[position] = { ...previous, label: supplied.label };
+      }
+      changed = true;
+    } else {
+      positions.set(resolvedName, merged.length);
+      merged.push(resolvedName === supplied.name ? supplied : { ...supplied, name: resolvedName });
+      changed ||= resolvedName !== supplied.name;
+    }
+  }
+
+  if (!positions.has(name)) {
+    merged.unshift({ name });
+    changed = true;
+  }
+
+  return { name, accessibilityActions: !changed && actions ? actions : merged };
+}
diff --git a/packages/framework-base/src/accessibility/resolveAccessibilityAction.types.test.ts b/packages/framework-base/src/accessibility/resolveAccessibilityAction.types.test.ts
new file mode 100644
index 0000000000..fd8881ea9e
--- /dev/null
+++ b/packages/framework-base/src/accessibility/resolveAccessibilityAction.types.test.ts
@@ -0,0 +1,19 @@
+import type { AccessibilityActionInfo, PressableProps } from 'react-native';
+import { resolveAccessibilityAction } from '../index';
+import type { SemanticAccessibilityAction } from '../index';
+
+it('accepts readonly native declarations and produces native-compatible props', () => {
+  const action: SemanticAccessibilityAction = 'toggle';
+  const declarations: readonly AccessibilityActionInfo[] = [{ name: 'Toggle', label: 'Change' }, { name: 'custom' }];
+  const result = resolveAccessibilityAction(action, 'windows', declarations);
+  const props: Pick<PressableProps, 'accessibilityActions'> = { accessibilityActions: result.accessibilityActions };
+  const eventName: string = result.name;
+  expect(props.accessibilityActions).toEqual([{ name: eventName, label: 'Change' }, { name: 'custom' }]);
+});
+
+function unsupportedSemanticAction() {
+  // @ts-expect-error Only demonstrated component-owned semantic actions belong in the resolver.
+  resolveAccessibilityAction('activate', 'macos');
+}
+
+void unsupportedSemanticAction;
diff --git a/packages/framework-base/src/hooks/focusTarget.test.ts b/packages/framework-base/src/hooks/focusTarget.test.ts
index 9927cbad85..edec8e20c0 100644
--- a/packages/framework-base/src/hooks/focusTarget.test.ts
+++ b/packages/framework-base/src/hooks/focusTarget.test.ts
@@ -86,6 +86,67 @@ describe('focus target controller', () => {
     expect(target.getSnapshot().focused).toBe(false);
   });
 
+  it.each([false, true])('coalesces same-instance handoffs with focused=%s', async (focused) => {
+    const target = createFocusTarget();
+    const instance = { focus: jest.fn() };
+    const detach = target.attach(instance);
+    if (focused) {
+      target.onFocus();
+    }
+    const before = target.getSnapshot();
+    const generation = target.generation;
+    const notify = jest.fn();
+    target.subscribe(notify);
+
+    detach();
+    expect(target.current).toBeNull();
+    expect(target.requestFocus().status).toBe('not-mounted');
+    const finalDetach = target.attach(instance);
+    await Promise.resolve();
+    expect(target.getSnapshot()).toBe(before);
+    expect(target.generation).toBe(generation);
+    expect(notify).not.toHaveBeenCalled();
+
+    finalDetach();
+    await Promise.resolve();
+    expect(target.generation).toBeGreaterThan(generation);
+    expect(target.getSnapshot().focused).toBe(false);
+    expect(notify).toHaveBeenCalledTimes(1);
+  });
+
+  it('notifies genuine replacement even when neither target was focused', () => {
+    const target = createFocusTarget();
+    const oldDetach = target.attach({ focus: jest.fn() });
+    const generation = target.generation;
+    const notify = jest.fn();
+    target.subscribe(notify);
+    const newer = { focus: jest.fn() };
+    target.attach(newer);
+    oldDetach();
+    expect(target.current).toBe(newer);
+    expect(target.generation).toBeGreaterThan(generation);
+    expect(notify).toHaveBeenCalledTimes(1);
+  });
+
+  it.each(['blur', 'disable'])('does not resurrect focus after %s during a ref handoff', async (reason) => {
+    const target = createFocusTarget();
+    const instance = { focus: jest.fn() };
+    const detach = target.attach(instance);
+    target.onFocus();
+    const generation = target.generation;
+    detach();
+    if (reason === 'blur') {
+      target.onBlur();
+    } else {
+      target.setFocusable(false);
+      target.setFocusable(true);
+    }
+    target.attach(instance);
+    await Promise.resolve();
+    expect(target.getSnapshot().focused).toBe(false);
+    expect(target.generation).toBe(generation);
+  });
+
   it('keeps snapshots stable and cleans subscriptions', () => {
     const target = createFocusTarget();
     target.attach({ focus: jest.fn() });
diff --git a/packages/framework-base/src/hooks/focusTarget.ts b/packages/framework-base/src/hooks/focusTarget.ts
index ad84af2916..a0edf3dbf3 100644
--- a/packages/framework-base/src/hooks/focusTarget.ts
+++ b/packages/framework-base/src/hooks/focusTarget.ts
@@ -28,18 +28,19 @@ export interface FocusTargetController extends FocusTarget {
 
 /**
  * A focus request is only confirmed by an observed focus event, not by a void
- * native focus() return. Attachment generations invalidate stale cleanup.
+ * native focus() return. Registration epochs reject stale ref cleanup.
  */
 export function createFocusTarget(): FocusTargetController {
   let current: object | null = null;
   let generation = 0;
+  let registration = 0;
   let focusable = true;
   let snapshot: FocusTargetSnapshot = Object.freeze({ focused: false });
-  let detached: { instance: object; snapshot: FocusTargetSnapshot } | undefined;
+  let detached: { instance: object } | undefined;
   let pending: { status: FocusRequestStatus; intent: FocusIntent } | undefined;
   const listeners = new Set<() => void>();
-  const publish = (focused: boolean, intent?: FocusIntent) => {
-    if (snapshot.focused !== focused || snapshot.intent !== intent) {
+  const publish = (focused: boolean, intent?: FocusIntent, attachmentChanged = false) => {
+    if (attachmentChanged || snapshot.focused !== focused || snapshot.intent !== intent) {
       snapshot = Object.freeze({ focused, intent });
       Array.from(listeners).forEach((listener) => listener());
     }
@@ -67,33 +68,40 @@ export function createFocusTarget(): FocusTargetController {
     },
     attach: (instance) => {
       cancelPending();
-      const previous = detached?.instance === instance ? detached.snapshot : undefined;
+      const sameTarget = current === instance || detached?.instance === instance;
+      const attachmentChanged = !sameTarget && generation !== 0;
+      const focused = sameTarget && snapshot.focused;
+      const intent = sameTarget ? snapshot.intent : undefined;
       detached = undefined;
       current = instance;
-      const attachment = ++generation;
-      publish(focusable && (previous?.focused ?? false), previous?.intent);
+      const attachment = ++registration;
+      if (!sameTarget) {
+        ++generation;
+      }
+      publish(focusable && focused, intent, attachmentChanged);
       return () => {
-        if (generation === attachment) {
-          const handoff = { instance, snapshot };
+        if (registration === attachment) {
+          ++registration;
+          const handoff = { instance };
           detached = handoff;
           // A callback-ref replacement reattaches the same native instance in
-          // this commit. Preserve its observed focus, but not a later remount.
+          // this commit. Coalesce that handoff without invalidating subscribers
+          // or its mount generation, but notify genuine detach/replacement.
           queueMicrotask(() => {
             if (detached === handoff) {
               detached = undefined;
+              ++generation;
+              publish(false, undefined, true);
             }
           });
-          ++generation;
           current = null;
           cancelPending();
-          publish(false);
         }
       };
     },
     setFocusable: (next) => {
       focusable = next;
       if (!next) {
-        detached = undefined;
         cancelPending();
         publish(false);
       }
@@ -109,7 +117,6 @@ export function createFocusTarget(): FocusTargetController {
       }
     },
     onBlur: () => {
-      detached = undefined;
       cancelPending();
       publish(false);
     },
diff --git a/packages/framework-base/src/hooks/useFocusTarget.test.tsx b/packages/framework-base/src/hooks/useFocusTarget.test.tsx
new file mode 100644
index 0000000000..a618e62ce0
--- /dev/null
+++ b/packages/framework-base/src/hooks/useFocusTarget.test.tsx
@@ -0,0 +1,55 @@
+import { View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import type { ReactTestRenderer } from 'react-test-renderer';
+
+import { useFocusTarget } from './useFocusTarget';
+import type { UseFocusTargetResult } from './useFocusTarget';
+
+describe('useFocusTarget ref handoffs', () => {
+  let tree: ReactTestRenderer | undefined;
+
+  afterEach(async () => {
+    await act(async () => tree?.unmount());
+  });
+
+  it('keeps same-instance inline callback refs stable while mounted and focused', () => {
+    const instance = { focus: jest.fn() };
+    const seen: UseFocusTargetResult[] = [];
+    function Probe({ label }: { label: string }) {
+      const target = useFocusTarget();
+      seen.push(target);
+      return (
+        <View
+          accessibilityLabel={label}
+          ref={(node) => target.focusTargetRef(node)}
+          onFocus={target.onFocus}
+          onBlur={target.onBlur}
+          testID={target.focused ? 'focused' : 'blurred'}
+        />
+      );
+    }
+
+    act(() => {
+      tree = create(<Probe label="First" />, { createNodeMock: () => instance });
+    });
+    expect(seen).toHaveLength(1);
+    const target = seen[0].focusTarget;
+    const mountedInstance = target.current;
+    expect(mountedInstance).not.toBeNull();
+    const generation = target.generation;
+
+    act(() => tree!.root.findByType(View).props.onFocus({ target: 1, currentTarget: 1 }));
+    expect(seen).toHaveLength(2);
+    expect(target.getSnapshot().focused).toBe(true);
+
+    act(() => tree!.update(<Probe label="Second" />));
+    expect(seen).toHaveLength(3);
+    expect(target.current).toBe(mountedInstance);
+    expect(target.generation).toBe(generation);
+    expect(tree!.root.findByType(View).props.testID).toBe('focused');
+
+    act(() => tree!.root.findByType(View).props.onBlur({ target: 1, currentTarget: 1 }));
+    expect(seen).toHaveLength(4);
+    expect(tree!.root.findByType(View).props.testID).toBe('blurred');
+  });
+});
diff --git a/packages/framework-base/src/hooks/useFocusablePressable.native.ts b/packages/framework-base/src/hooks/useFocusablePressable.native.ts
index bf20c1a742..c483a8c32a 100644
--- a/packages/framework-base/src/hooks/useFocusablePressable.native.ts
+++ b/packages/framework-base/src/hooks/useFocusablePressable.native.ts
@@ -12,6 +12,7 @@ import type { FocusablePressableProps, FocusKeyboardEvent } from './useFocusable
 export type { FocusablePressableProps, FocusKeyboardEvent } from './useFocusablePressable.types';
 
 const interactionKeys = ['pressed', 'hovered'] as const;
+type PressEvent = Parameters<NonNullable<PressableProps['onPressIn']>>[0];
 
 function activationKey(event: FocusKeyboardEvent): string | undefined {
   const { key, code } = event.nativeEvent;
@@ -41,14 +42,25 @@ export function useFocusablePressable(
   const { focusTarget, focusTargetRef } = target;
   const keyDown = React.useRef<string | undefined>(undefined);
   const keyGeneration = React.useRef<number | undefined>(undefined);
+  const keyboardPress = React.useRef<{ event: PressEvent; key: string; generation: number } | undefined>(undefined);
   const [interactionProps, interactionState] = usePressableState(props, interactionKeys);
+  const { onPressOut: releasePress } = interactionProps;
+  const finishKeyboardPress = React.useCallback(() => {
+    const press = keyboardPress.current;
+    if (press) {
+      keyboardPress.current = undefined;
+      releasePress?.(press.event);
+    }
+  }, [releasePress]);
+  const generation = focusTarget.generation;
 
   React.useLayoutEffect(() => {
-    if (disabled || !focusable) {
+    if (disabled || !focusable || (keyboardPress.current && keyboardPress.current.generation !== generation)) {
       keyDown.current = undefined;
       keyGeneration.current = undefined;
+      finishKeyboardPress();
     }
-  }, [disabled, focusable]);
+  }, [disabled, focusable, generation, finishKeyboardPress]);
 
   const handlePress = (event: Parameters<NonNullable<PressableProps['onPress']>>[0]) => {
     // Pressability has already chosen the responder. Pointer targets may be
@@ -67,6 +79,18 @@ export function useFocusablePressable(
     onPress?.(event);
   };
   const focusProps = {
+    onPressIn: (event: PressEvent) => {
+      const key = event?.nativeEvent ? activationKey(event) : undefined;
+      if (key) {
+        event.persist?.();
+        keyboardPress.current = { event, key, generation: focusTarget.generation };
+      }
+      interactionProps.onPressIn?.(event);
+    },
+    onPressOut: (event: PressEvent) => {
+      keyboardPress.current = undefined;
+      interactionProps.onPressOut?.(event);
+    },
     onFocus: (event: Parameters<NonNullable<PressableProps['onFocus']>>[0]) => {
       target.onFocus(event);
       onFocus?.(event);
@@ -75,6 +99,7 @@ export function useFocusablePressable(
       if (isSelfTargetEvent(event)) {
         keyDown.current = undefined;
         keyGeneration.current = undefined;
+        finishKeyboardPress();
       }
       target.onBlur(event);
       onBlur?.(event);
@@ -88,19 +113,27 @@ export function useFocusablePressable(
         if (
           disabled ||
           !focusable ||
+          !focusTarget.current ||
           modifiers ||
           !isSelfTargetEvent(event) ||
-          (keyDown.current === key && keyGeneration.current === focusTarget.generation)
+          (keyDown.current === key && keyGeneration.current === focusTarget.generation) ||
+          (keyboardPress.current?.key === key && keyboardPress.current.generation === focusTarget.generation)
         ) {
           event.preventDefault?.();
           return;
         }
+        if (!event.defaultPrevented && keyboardPress.current) {
+          finishKeyboardPress();
+        }
         keyDown.current = event.defaultPrevented ? undefined : key;
         keyGeneration.current = focusTarget.generation;
         event.stopPropagation?.();
       } else {
         keyDown.current = undefined;
         keyGeneration.current = undefined;
+        if (platform !== 'macos') {
+          finishKeyboardPress();
+        }
       }
     },
     onKeyUp: (event: FocusKeyboardEvent) => {
@@ -110,11 +143,35 @@ export function useFocusablePressable(
       keyDown.current = undefined;
       keyGeneration.current = undefined;
       if (key) {
-        if (disabled || !focusable || !isSelfTargetEvent(event) || !paired) {
+        if (platform === 'macos') {
+          // macOS already activated on keydown; its release only ends pressed
+          // feedback, even when another key cancelled the activation pairing.
+          if (
+            isSelfTargetEvent(event) &&
+            focusTarget.current &&
+            keyboardPress.current?.key === key &&
+            keyboardPress.current.generation === focusTarget.generation
+          ) {
+            event.stopPropagation?.();
+            if (event.defaultPrevented) {
+              finishKeyboardPress();
+            }
+          } else {
+            event.preventDefault?.();
+          }
+          return;
+        }
+        if (disabled || !focusable || !focusTarget.current || !isSelfTargetEvent(event) || !paired) {
           event.preventDefault?.();
+          if (keyboardPress.current?.key === key) {
+            finishKeyboardPress();
+          }
           return;
         }
         event.stopPropagation?.();
+        if (event.defaultPrevented) {
+          finishKeyboardPress();
+        }
         if (platform === 'win32' && !event.defaultPrevented && !['Enter', 'Space', 'GamepadA'].includes(event.nativeEvent.code ?? '')) {
           // Office Win32 can report code="Unidentified". Its Pressability only
           // recognizes code, unlike V1's key-based activation. Keep one paired
diff --git a/packages/framework-base/src/hooks/useFocusablePressable.test.tsx b/packages/framework-base/src/hooks/useFocusablePressable.test.tsx
index 913a379633..4da385f658 100644
--- a/packages/framework-base/src/hooks/useFocusablePressable.test.tsx
+++ b/packages/framework-base/src/hooks/useFocusablePressable.test.tsx
@@ -34,15 +34,22 @@ describe('focusable pressable', () => {
     jest.restoreAllMocks();
   });
 
-  function render(props: FocusablePressableProps = {}, userRef?: React.Ref<React.ComponentRef<typeof View>>) {
+  function render(props: FocusablePressableProps = {}, userRef?: React.Ref<React.ComponentRef<typeof View>>, inlineFocusRef = false) {
     const instance = { focus: jest.fn() };
     const bindings: FocusTargetBinding[] = [];
+    let pressed = false;
     function Probe({ input }: { input: FocusablePressableProps }) {
       const [native, state, binding] = useFocusablePressable(input);
+      pressed = state.pressed;
       bindings.push(binding);
       const rootProps: PropsWithRefOf<typeof View> = { ...native, children: null, style: undefined, ref: userRef };
       const Root = useSlot(View, rootProps);
-      return <Root ref={binding.focusTargetRef} testID={state.focused ? 'focused' : 'blurred'} />;
+      return (
+        <Root
+          ref={inlineFocusRef ? (node) => binding.focusTargetRef(node) : binding.focusTargetRef}
+          testID={state.focused ? 'focused' : 'blurred'}
+        />
+      );
     }
     act(() => {
       tree = create(<Probe input={props} />, { createNodeMock: () => instance });
@@ -50,6 +57,7 @@ describe('focusable pressable', () => {
     return {
       instance,
       bindings,
+      isPressed: () => pressed,
       props: () => tree!.root.findByType(View).props,
       update: (next: FocusablePressableProps) => act(() => tree!.update(<Probe input={next} />)),
     };
@@ -156,4 +164,79 @@ describe('focusable pressable', () => {
     act(() => subject.props().onKeyUp(keyboardEvent('Enter')));
     expect(onPress).toHaveBeenCalledTimes(1);
   });
+
+  it.each(['windows', 'win32'])('ends a cancelled %s native keyboard press without activating it', (platform) => {
+    jest.replaceProperty(Platform, 'OS', platform as typeof Platform.OS);
+    const onPress = jest.fn();
+    const onPressOut = jest.fn();
+    const subject = render({ onPress, onPressOut });
+    const down = keyboardEvent(' ');
+    act(() => subject.props().onKeyDown(down));
+    act(() => subject.props().onPressIn(down));
+    expect(subject.isPressed()).toBe(true);
+    act(() => subject.props().onKeyDown(keyboardEvent('x')));
+    expect(subject.isPressed()).toBe(false);
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+    const up = keyboardEvent(' ');
+    act(() => subject.props().onKeyUp(up));
+    expect(up.defaultPrevented).toBe(true);
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('ends pressed feedback when the native target detaches without a blur event', async () => {
+    jest.replaceProperty(Platform, 'OS', 'macos');
+    const onPressOut = jest.fn();
+    const subject = render({ onPressOut });
+    const down = keyboardEvent(' ');
+    act(() => subject.props().onKeyDown(down));
+    act(() => subject.props().onPressIn(down));
+    expect(subject.isPressed()).toBe(true);
+    await act(async () => {
+      subject.bindings[0].focusTargetRef(null);
+    });
+    expect(subject.isPressed()).toBe(false);
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+    const up = keyboardEvent(' ');
+    act(() => subject.props().onKeyUp(up));
+    expect(up.defaultPrevented).toBe(true);
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+  });
+
+  it('rejects a stale Win32 activation before deferred detach notification', async () => {
+    jest.replaceProperty(Platform, 'OS', 'win32' as typeof Platform.OS);
+    const onPress = jest.fn();
+    const subject = render({ onPress });
+    act(() => subject.props().onKeyDown(keyboardEvent('Enter', { code: 'Unidentified' })));
+    await act(async () => {
+      subject.bindings[0].focusTargetRef(null);
+      const up = keyboardEvent('Enter', { code: 'Unidentified' });
+      subject.props().onKeyUp(up);
+      expect(up.defaultPrevented).toBe(true);
+      expect(onPress).not.toHaveBeenCalled();
+    });
+  });
+
+  it.each(['windows', 'win32', 'macos'])('preserves a %s keyboard press through same-instance inline-ref handoffs', (platform) => {
+    jest.replaceProperty(Platform, 'OS', platform as typeof Platform.OS);
+    const onPressOut = jest.fn();
+    const subject = render({ onPressOut }, undefined, true);
+    const target = subject.bindings[0].focusTarget;
+    const generation = target.generation;
+    act(() => subject.props().onFocus({ target: 1, currentTarget: 1 }));
+    const down = keyboardEvent(' ');
+    act(() => subject.props().onKeyDown(down));
+    act(() => subject.props().onPressIn(down));
+    subject.update({ onPressOut });
+    expect(target.generation).toBe(generation);
+    expect(target.getSnapshot().focused).toBe(true);
+    expect(subject.isPressed()).toBe(true);
+    expect(onPressOut).not.toHaveBeenCalled();
+    const up = keyboardEvent(' ');
+    act(() => subject.props().onKeyUp(up));
+    expect(up.defaultPrevented).toBe(false);
+    act(() => subject.props().onPressOut(up));
+    expect(subject.isPressed()).toBe(false);
+    expect(onPressOut).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/packages/framework-base/src/index.ts b/packages/framework-base/src/index.ts
index 7b1aa03246..2f677a3ddc 100644
--- a/packages/framework-base/src/index.ts
+++ b/packages/framework-base/src/index.ts
@@ -70,6 +70,12 @@ export { useAccessibilityLabelWarning } from './hooks/useAccessibilityLabelWarni
 export type { AccessibilityLabelWarningOptions } from './hooks/useAccessibilityLabelWarning';
 export type { PressableState, PressableStateKeys } from './types/interactive.types';
 
+/**
+ * ----- ACCESSIBILITY -----
+ */
+export { resolveAccessibilityAction } from './accessibility/resolveAccessibilityAction';
+export type { SemanticAccessibilityAction } from './accessibility/resolveAccessibilityAction';
+
 /**
  * ----- JSX RUNTIME -----
  */