diff --git a/.changeset/calm-buttons-focus.md b/.changeset/calm-buttons-focus.md
new file mode 100644
index 00000000000..1636c9ccf34
--- /dev/null
+++ b/.changeset/calm-buttons-focus.md
@@ -0,0 +1,5 @@
+---
+"@fluentui-react-native/components": patch
+---
+
+Render persistent single- and dual-ring focus visuals across agentic components to avoid React Native Windows Fabric crashes.
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 a043d86cac4..b8b8c3be385 100644
--- a/.github/skills/agentic-component-authoring/references/styles-and-tokens.md
+++ b/.github/skills/agentic-component-authoring/references/styles-and-tokens.md
@@ -119,6 +119,24 @@ 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
+
+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.
+
+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 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
+
 ## Selected text without layout shift
 
 When selected text changes weight:
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index 7994f70422a..e260c0e8ec3 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -17,7 +17,7 @@
     "macos:build": "xcodebuild -workspace macos/AgenticStorybook.xcworkspace -scheme AgenticStorybook -configuration Debug -destination 'platform=macOS' -derivedDataPath macos/DerivedData CODE_SIGNING_ALLOWED=NO build",
     "macos:build:clean": "xcodebuild -workspace macos/AgenticStorybook.xcworkspace -scheme AgenticStorybook -configuration Debug -destination 'platform=macOS' -derivedDataPath macos/DerivedData CODE_SIGNING_ALLOWED=NO clean build",
     "macos": "rnx-cli run --platform macos",
-    "windows": "pwsh -NoProfile -File scripts/start-windows-agent-session.ps1",
+    "windows": "rnx-cli run --platform windows",
     "windows:cli": "react-native run-windows --arch x64 --sln windows/AgenticStorybook.sln",
     "windows:info": "react-native run-windows --info --no-telemetry",
     "windows:build": "react-native run-windows --arch x64 --sln windows/AgenticStorybook.sln --no-packager --no-deploy --no-launch --logging --no-telemetry --buildLogDirectory artifacts/windows/build-logs",
diff --git a/apps/storybook/windows-tests/storybook-smoke.test.cjs b/apps/storybook/windows-tests/storybook-smoke.test.cjs
index fd86a3b737d..5d273074844 100644
--- a/apps/storybook/windows-tests/storybook-smoke.test.cjs
+++ b/apps/storybook/windows-tests/storybook-smoke.test.cjs
@@ -33,3 +33,49 @@ test.each(smokeStories)('renders $storyId with stable native selectors', async (
     `${JSON.stringify({ storyId, testId, displayed, statusTestId, statusText }, null, 2)}\n`,
   );
 });
+
+test('moves focus between Button Overview controls after a click', async () => {
+  await selectStory('components-button--overview');
+
+  const primary = await app.findElementByTestID('agentic-storybook-button-overview-primary');
+  const secondary = await app.findElementByTestID('agentic-storybook-button-overview-secondary');
+  await primary.waitForDisplayed({ timeout: 30000 });
+  await secondary.waitForDisplayed({ timeout: 30000 });
+
+  await primary.click();
+  await browser.keys(['\uE004']);
+
+  expect(await secondary.getAttribute('HasKeyboardFocus')).toBe('True');
+});
+
+test.each([
+  ['components-tag--default', 'agentic-storybook-tag'],
+  ['components-accordion--default', 'accordion-header'],
+  ['components-tab--selected', 'agentic-storybook-tab-selected'],
+  ['components-listboxitem--default', 'agentic-storybook-listbox-item'],
+  ['components-checkbox--default', 'agentic-storybook-checkbox'],
+  ['components-menuitem--selected', 'agentic-storybook-menu-item'],
+  ['components-listitem--selected-focus', 'agentic-storybook-list-item-selected'],
+  ['components-radio--default', 'agentic-storybook-radio'],
+  ['components-switch--default', 'agentic-storybook-switch'],
+])('focuses %s without terminating the app', async (storyId, testId) => {
+  await selectStory(storyId);
+
+  const element = await app.findElementByTestID(testId);
+  await element.waitForDisplayed({ timeout: 30000 });
+  await element.click();
+  await new Promise((resolve) => setTimeout(resolve, 3000));
+
+  expect(await element.getAttribute('HasKeyboardFocus')).toBe('True');
+});
+
+test('focuses the interactive Card without terminating the app', async () => {
+  await selectStory('components-card--interactive');
+
+  const card = await app.findElementByXPath('//Button[@Name="Open report"]');
+  await card.waitForDisplayed({ timeout: 30000 });
+  await card.click();
+  await new Promise((resolve) => setTimeout(resolve, 3000));
+
+  expect(await card.getAttribute('HasKeyboardFocus')).toBe('True');
+});
diff --git a/packages/agentic-components/src/components/AGENTS.md b/packages/agentic-components/src/components/AGENTS.md
index 47495ef9b99..ab64657e3e5 100644
--- a/packages/agentic-components/src/components/AGENTS.md
+++ b/packages/agentic-components/src/components/AGENTS.md
@@ -33,6 +33,8 @@ audit.
 - Create style factories only at module scope and cache theme-only styles.
 - Declare state precedence explicitly; disabled wins over pressed, which wins over hovered.
 - Apply user styles after component styles.
+- 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.
 - 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.
diff --git a/packages/agentic-components/src/components/accordion/accordion.styles.ts b/packages/agentic-components/src/components/accordion/accordion.styles.ts
index e349772134f..78fb2642932 100644
--- a/packages/agentic-components/src/components/accordion/accordion.styles.ts
+++ b/packages/agentic-components/src/components/accordion/accordion.styles.ts
@@ -115,20 +115,6 @@ function createBodyLayoutStyleDefinition({ spacing }: FlexTokens): StyleDefiniti
 
 const getBodyLayoutStyle = getThemedStateStyleFactory('Accordion.bodyLayout', createBodyLayoutStyleDefinition, sizeStateLevels);
 
-function createHeaderFocusStyleDefinition({ color, strokeWidth }: FlexTokens): StyleDefinition<ViewStyle, [['focused']]> {
-  return {
-    focused: {
-      borderColor: color.strokeFocusInner,
-      outlineColor: color.strokeFocusOuter,
-      outlineOffset: strokeWidth.thin,
-      outlineStyle: 'solid',
-      outlineWidth: strokeWidth.thick,
-    },
-  };
-}
-
-const getHeaderFocusStyle = getThemedStateStyleFactory('Accordion.headerFocus', createHeaderFocusStyleDefinition, [['focused']]);
-
 const headerBackgroundStateLevels = [['pressed', 'hovered']] as const;
 type HeaderBackgroundStateLevels = typeof headerBackgroundStateLevels;
 
@@ -226,10 +212,6 @@ export function getAccordionHeaderLayoutStyle(state: AccordionState): ViewStyle
   return getHeaderLayoutStyle(state, [state.size]);
 }
 
-export function getAccordionHeaderFocusStyle(state: AccordionState): ViewStyle | undefined {
-  return state.focused ? getHeaderFocusStyle(state, ['focused']) : undefined;
-}
-
 export function getAccordionHeaderColorStyles(state: AccordionState): {
   background: ViewColorStyle;
   foreground: TextColorStyle;
diff --git a/packages/agentic-components/src/components/accordion/accordion.test.tsx b/packages/agentic-components/src/components/accordion/accordion.test.tsx
index 54c8ce3feb1..657353886c5 100644
--- a/packages/agentic-components/src/components/accordion/accordion.test.tsx
+++ b/packages/agentic-components/src/components/accordion/accordion.test.tsx
@@ -93,15 +93,19 @@ describe('Accordion', () => {
     expect(getHeader(component).props.accessibilityState).toEqual({ busy: true, expanded: false });
   });
 
-  it('uses the focused prop to render the universal dual-outline focus ring', async () => {
+  it('uses the focused prop to render the universal dual-ring focus visual', async () => {
     const component = await renderAccordion({ focused: true });
 
-    expect(getHeaderStyle(component)).toMatchObject({
+    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-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: '#ffffff',
-      outlineColor: '#000000',
-      outlineOffset: 1,
-      outlineStyle: 'solid',
-      outlineWidth: 2,
+      borderWidth: 1,
     });
   });
 
@@ -134,8 +138,18 @@ 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(['accordion-chevron', 'accordion-leading-icon', 'accordion-title']);
-    expect(endChildren.map((child) => child.props.testID)).toEqual(['accordion-leading-icon', 'accordion-title', 'accordion-chevron']);
+    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',
+    ]);
   });
 
   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 ca4f26ea081..8b09ec5dea6 100644
--- a/packages/agentic-components/src/components/accordion/accordion.types.ts
+++ b/packages/agentic-components/src/components/accordion/accordion.types.ts
@@ -9,6 +9,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';
 
 export type AccordionLayout = 'chevronStart' | 'chevronEnd';
 export type AccordionSize = 'small';
@@ -95,6 +96,7 @@ export type AccordionState = ComponentState<AccordionStateSlots> &
   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 b816d8409e0..3853b48d92c 100644
--- a/packages/agentic-components/src/components/accordion/renderAccordion.tsx
+++ b/packages/agentic-components/src/components/accordion/renderAccordion.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import { Text } from 'react-native';
 import type { StyleProp, TextStyle } from 'react-native';
 
+import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import type { AccordionState } from './accordion.types';
 
 type AccordionRenderStyles = {
@@ -28,6 +29,7 @@ export function renderAccordion_unstable(state: AccordionState, styles: Accordio
   return (
     <state.root>
       <Header>
+        <FocusVisual {...state.focusVisualProps} />
         {layout === 'chevronStart' ? (
           <>
             <ChevronContainer>
diff --git a/packages/agentic-components/src/components/accordion/useAccordionStyles.ts b/packages/agentic-components/src/components/accordion/useAccordionStyles.ts
index 31f712c2651..b828af7357e 100644
--- a/packages/agentic-components/src/components/accordion/useAccordionStyles.ts
+++ b/packages/agentic-components/src/components/accordion/useAccordionStyles.ts
@@ -1,6 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
+import { createFocusVisualProps } from '../../primitives/focus-visual/focus-visual';
 
 import {
   accordionStyles,
@@ -9,7 +10,6 @@ import {
   getAccordionBodyTypographyStyle,
   getAccordionChevronLayoutStyle,
   getAccordionHeaderColorStyles,
-  getAccordionHeaderFocusStyle,
   getAccordionHeaderLayoutStyle,
   getAccordionIconSize,
   getAccordionTitleLayoutStyle,
@@ -22,13 +22,9 @@ import type { AccordionState } from './accordion.types';
  */
 export function useAccordionStyles_unstable(state: AccordionState) {
   const headerColors = getAccordionHeaderColorStyles(state);
+  const headerLayoutStyle = getAccordionHeaderLayoutStyle(state);
   const rootStyle: StyleProp<ViewStyle> = [accordionStyles.root, state.userStyle];
-  const headerStyle: StyleProp<ViewStyle> = [
-    accordionStyles.header,
-    getAccordionHeaderLayoutStyle(state),
-    headerColors.background,
-    getAccordionHeaderFocusStyle(state),
-  ];
+  const headerStyle: StyleProp<ViewStyle> = [accordionStyles.header, headerLayoutStyle, headerColors.background];
   const titleStyle: StyleProp<TextStyle> = [
     accordionStyles.title,
     getAccordionTitleLayoutStyle(state),
@@ -55,6 +51,14 @@ 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,
+  });
   attachSlotProps(state.root, { style: rootStyle });
   attachSlotProps(state.header, { style: headerStyle });
   if (state.title) {
diff --git a/packages/agentic-components/src/components/button/__snapshots__/button.test.tsx.snap b/packages/agentic-components/src/components/button/__snapshots__/button.test.tsx.snap
index 3dc8ce98422..ef7c16b7d60 100644
--- a/packages/agentic-components/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/packages/agentic-components/src/components/button/__snapshots__/button.test.tsx.snap
@@ -144,7 +144,7 @@ exports[`Button matches the focused visual state snapshot across appearances 1`]
       "alignItems": "center",
       "alignSelf": "flex-start",
       "backgroundColor": "#185abd",
-      "borderColor": "#ffffff",
+      "borderColor": "#00000000",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
@@ -153,10 +153,6 @@ exports[`Button matches the focused visual state snapshot across appearances 1`]
       "justifyContent": "center",
       "minHeight": 24,
       "minWidth": 24,
-      "outlineColor": "#000000",
-      "outlineOffset": 1,
-      "outlineStyle": "solid",
-      "outlineWidth": 2,
       "paddingHorizontal": 10,
       "paddingVertical": 6,
     },
@@ -178,7 +174,7 @@ exports[`Button matches the focused visual state snapshot across appearances 1`]
       "alignItems": "center",
       "alignSelf": "flex-start",
       "backgroundColor": "#fafafa",
-      "borderColor": "#ffffff",
+      "borderColor": "#00000000",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
@@ -187,10 +183,6 @@ exports[`Button matches the focused visual state snapshot across appearances 1`]
       "justifyContent": "center",
       "minHeight": 24,
       "minWidth": 24,
-      "outlineColor": "#000000",
-      "outlineOffset": 1,
-      "outlineStyle": "solid",
-      "outlineWidth": 2,
       "paddingHorizontal": 10,
       "paddingVertical": 6,
     },
@@ -212,7 +204,7 @@ exports[`Button matches the focused visual state snapshot across appearances 1`]
       "alignItems": "center",
       "alignSelf": "flex-start",
       "backgroundColor": "#00000000",
-      "borderColor": "#ffffff",
+      "borderColor": "#d1d1d1",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
@@ -221,10 +213,6 @@ exports[`Button matches the focused visual state snapshot across appearances 1`]
       "justifyContent": "center",
       "minHeight": 24,
       "minWidth": 24,
-      "outlineColor": "#000000",
-      "outlineOffset": 1,
-      "outlineStyle": "solid",
-      "outlineWidth": 2,
       "paddingHorizontal": 10,
       "paddingVertical": 6,
     },
@@ -246,7 +234,7 @@ exports[`Button matches the focused visual state snapshot across appearances 1`]
       "alignItems": "center",
       "alignSelf": "flex-start",
       "backgroundColor": "#00000000",
-      "borderColor": "#ffffff",
+      "borderColor": "#00000000",
       "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
@@ -255,10 +243,6 @@ exports[`Button matches the focused visual state snapshot across appearances 1`]
       "justifyContent": "center",
       "minHeight": 24,
       "minWidth": 24,
-      "outlineColor": "#000000",
-      "outlineOffset": 1,
-      "outlineStyle": "solid",
-      "outlineWidth": 2,
       "paddingHorizontal": 10,
       "paddingVertical": 6,
     },
diff --git a/packages/agentic-components/src/components/button/button.stories.tsx b/packages/agentic-components/src/components/button/button.stories.tsx
index 8abd981013e..23d37df9da6 100644
--- a/packages/agentic-components/src/components/button/button.stories.tsx
+++ b/packages/agentic-components/src/components/button/button.stories.tsx
@@ -82,7 +82,7 @@ export const Overview: Story = {
     <View style={styles.story}>
       <StoryGroup label="Appearance">
         {appearances.map(({ label, value }) => (
-          <Button key={value} appearance={value} content={label} />
+          <Button key={value} appearance={value} content={label} testID={`agentic-storybook-button-overview-${value}`} />
         ))}
       </StoryGroup>
       <StoryGroup label="Size">
diff --git a/packages/agentic-components/src/components/button/button.styles.ts b/packages/agentic-components/src/components/button/button.styles.ts
index 429f8e983e5..623640d3e9a 100644
--- a/packages/agentic-components/src/components/button/button.styles.ts
+++ b/packages/agentic-components/src/components/button/button.styles.ts
@@ -297,28 +297,6 @@ export function getButtonContentStyle(state: ButtonState, selected = state.selec
   return getThemedContentStyle(state, source);
 }
 
-const focusStyleStateLevels = [['focused']] as const;
-
-const getThemedFocusStyle = getThemedStateStyleFactory(
-  'Button.focus',
-  ({ color, strokeWidth }: FlexTokens): StyleDefinition<ViewStyle, typeof focusStyleStateLevels> => ({
-    focused: {
-      borderColor: color.strokeFocusInner,
-      outlineColor: color.strokeFocusOuter,
-      outlineOffset: strokeWidth.thin,
-      outlineStyle: 'solid',
-      outlineWidth: strokeWidth.thick,
-    },
-  }),
-  focusStyleStateLevels,
-);
-
-const focusedState = ['focused'] as const;
-
-export function getButtonFocusStyle(state: ButtonState): ViewStyle | undefined {
-  return state.focused && !state.disabled ? getThemedFocusStyle(state, focusedState) : undefined;
-}
-
 const iconSizes: Record<ButtonSize, number> = {
   small: size160,
   medium: size200,
diff --git a/packages/agentic-components/src/components/button/button.test.tsx b/packages/agentic-components/src/components/button/button.test.tsx
index 219ab51b413..62f26da9eee 100644
--- a/packages/agentic-components/src/components/button/button.test.tsx
+++ b/packages/agentic-components/src/components/button/button.test.tsx
@@ -38,7 +38,7 @@ describe('Button', () => {
     const component = await renderButton({ content: 'Save' });
     const root = getRoot(component);
 
-    expect(root.props.accessibilityRole).toBe('button');
+    expect(root.props.role).toBe('button');
     expect(root.props.accessibilityState).toEqual({ disabled: false });
     expect(root.props.focusable).toBe(true);
     expect(component.getByText('Save')).toBeOnTheScreen();
@@ -186,21 +186,29 @@ describe('Button', () => {
     const content = component.getByTestId('content');
     const icon = component.getByTestId('icon');
 
-    expect(root.children).toEqual([content, icon]);
+    expect(root.children.slice(1)).toEqual([content, icon]);
     expect(getRootStyle(component).backgroundColor).toBe('hotpink');
   });
 
-  it('renders a dual-token focus outline', async () => {
+  it('renders a persistent dual-ring focus visual', async () => {
     const component = await renderButton({ content: 'Focused' });
     const root = getRoot(component);
+
+    expect(root.props.enableFocusRing).toBe(false);
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style).opacity).toBe(0);
+
     await fireEvent(root, 'focus', {});
 
-    expect(getRootStyle(component)).toMatchObject({
+    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-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: '#ffffff',
-      outlineColor: '#000000',
-      outlineOffset: 1,
-      outlineStyle: 'solid',
-      outlineWidth: 2,
+      borderWidth: 1,
     });
   });
 
diff --git a/packages/agentic-components/src/components/button/button.types.ts b/packages/agentic-components/src/components/button/button.types.ts
index 2c9459280f3..a3078a1cb82 100644
--- a/packages/agentic-components/src/components/button/button.types.ts
+++ b/packages/agentic-components/src/components/button/button.types.ts
@@ -9,6 +9,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';
 
 export type ButtonSlots = {
   /**
@@ -91,6 +92,7 @@ export type ButtonState = ComponentState<ButtonStateSlots> &
   Required<ButtonStateProps> &
   ThemeState &
   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 e5bd20ec5a8..e964b652b90 100644
--- a/packages/agentic-components/src/components/button/renderButton.tsx
+++ b/packages/agentic-components/src/components/button/renderButton.tsx
@@ -1,5 +1,6 @@
 /** @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';
 
 /**
@@ -20,6 +21,7 @@ export function renderButton_unstable(state: ButtonState) {
 
   return (
     <state.root>
+      <FocusVisual {...state.focusVisualProps} />
       {iconPosition === 'before' && ActiveIcon && <ActiveIcon />}
       {contentElement}
       {iconPosition === 'after' && ActiveIcon && <ActiveIcon />}
diff --git a/packages/agentic-components/src/components/button/useButton.ts b/packages/agentic-components/src/components/button/useButton.ts
index 38391ff29ae..f37ff2a1e26 100644
--- a/packages/agentic-components/src/components/button/useButton.ts
+++ b/packages/agentic-components/src/components/button/useButton.ts
@@ -2,8 +2,13 @@ import type { ButtonProps, ButtonState } from './button.types';
 import { useAccessibilityLabelWarning, usePressableState, useSlot, useOptionalSlot } from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
 import { Pressable, Text } from 'react-native';
+import type { PressableProps } from 'react-native';
 import { Icon } from '../../primitives/icon/icon';
 
+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
@@ -44,9 +49,9 @@ export function useButton_unstable(props: ButtonProps): ButtonState {
   });
 
   const themeState = useThemeState();
-  const [pressableProps, pressableState] = usePressableState({
+  const nativeProps: NativeFocusPressableProps = {
     ...rest,
-    accessibilityRole: 'button',
+    role: 'button',
     accessibilityState: {
       ...accessibilityState,
       disabled,
@@ -54,8 +59,11 @@ 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,
     focusable: rest.focusable ?? !disabled,
-  });
+  };
+  const [pressableProps, pressableState] = usePressableState(nativeProps);
   const root = useSlot(Pressable, pressableProps);
   const icon = useOptionalSlot(Icon, iconProp);
   const selectedIcon = useOptionalSlot(Icon, selectedIconProp);
diff --git a/packages/agentic-components/src/components/button/useButtonStyles.ts b/packages/agentic-components/src/components/button/useButtonStyles.ts
index b7c4c902254..2ed64e2e0e2 100644
--- a/packages/agentic-components/src/components/button/useButtonStyles.ts
+++ b/packages/agentic-components/src/components/button/useButtonStyles.ts
@@ -1,15 +1,9 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
+import { createFocusVisualProps } from '../../primitives/focus-visual/focus-visual';
 
-import {
-  buttonStyles,
-  getButtonColorStyles,
-  getButtonContentStyle,
-  getButtonFocusStyle,
-  getButtonIconSize,
-  getButtonRootStyle,
-} from './button.styles';
+import { buttonStyles, getButtonColorStyles, getButtonContentStyle, getButtonIconSize, getButtonRootStyle } from './button.styles';
 import type { ButtonState } from './button.types';
 
 /**
@@ -19,16 +13,19 @@ import type { ButtonState } from './button.types';
 export function useButtonStyles_unstable(state: ButtonState) {
   const { size, userStyle } = state;
   const colors = getButtonColorStyles(state);
-  const rootStyle: StyleProp<ViewStyle> = [
-    buttonStyles.root,
-    getButtonRootStyle(state),
-    colors.background,
-    getButtonFocusStyle(state),
-    userStyle,
-  ];
+  const rootLayoutStyle = getButtonRootStyle(state);
+  const rootStyle: StyleProp<ViewStyle> = [buttonStyles.root, rootLayoutStyle, colors.background, userStyle];
   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,
+  });
   attachSlotProps(state.root, { style: rootStyle });
   if (state.icon) {
     attachSlotProps(state.icon, {
diff --git a/packages/agentic-components/src/components/card/card.styles.ts b/packages/agentic-components/src/components/card/card.styles.ts
index d474f82ea8c..6506bf79c4f 100644
--- a/packages/agentic-components/src/components/card/card.styles.ts
+++ b/packages/agentic-components/src/components/card/card.styles.ts
@@ -219,25 +219,3 @@ const getThemedOverlayStyle = getThemedStateStyleFactory('Card.overlay', createO
 export function getCardOverlayStyle(state: CardState): ViewStyle {
   return getThemedOverlayStyle(state, [state.size]);
 }
-
-const focusStyleStateLevels = [['focused']] as const;
-
-const getThemedFocusStyle = getThemedStateStyleFactory(
-  'Card.focus',
-  ({ color, strokeWidth }: FlexTokens): StyleDefinition<ViewStyle, typeof focusStyleStateLevels> => ({
-    focused: {
-      borderColor: color.strokeFocusInner,
-      outlineColor: color.strokeFocusOuter,
-      outlineOffset: strokeWidth.thin,
-      outlineStyle: 'solid',
-      outlineWidth: strokeWidth.thick,
-    },
-  }),
-  focusStyleStateLevels,
-);
-
-const focusedState = ['focused'] as const;
-
-export function getCardFocusStyle(state: CardState): ViewStyle | undefined {
-  return state.focused && !state.disabled ? getThemedFocusStyle(state, focusedState) : undefined;
-}
diff --git a/packages/agentic-components/src/components/card/card.test.tsx b/packages/agentic-components/src/components/card/card.test.tsx
index 4f7211cb01c..4634ae62f52 100644
--- a/packages/agentic-components/src/components/card/card.test.tsx
+++ b/packages/agentic-components/src/components/card/card.test.tsx
@@ -98,12 +98,16 @@ describe('Card', () => {
     });
 
     await fireEvent(button, 'focus', {});
-    expect(StyleSheet.flatten(button.props.style)).toMatchObject({
+    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-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: colors.strokeFocusInner,
-      outlineColor: colors.strokeFocusOuter,
-      outlineOffset: 1,
-      outlineStyle: 'solid',
-      outlineWidth: 2,
+      borderWidth: 1,
     });
   });
 
diff --git a/packages/agentic-components/src/components/card/card.types.ts b/packages/agentic-components/src/components/card/card.types.ts
index 3b9f9332621..488e3056c5b 100644
--- a/packages/agentic-components/src/components/card/card.types.ts
+++ b/packages/agentic-components/src/components/card/card.types.ts
@@ -2,6 +2,7 @@ import type { Pressable, PressableProps, StyleProp, View, ViewStyle } from 'reac
 
 import type { ComponentProps, ComponentState, OptionalSlot, OwnedRootProps, 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';
 
 export type CardSize = 'small' | 'large';
 export type CardPadding = 'default' | 'none';
@@ -42,6 +43,7 @@ export type CardProps = CardStateProps & ComponentProps<CardSlots, CardExposedPr
 export type CardState = ComponentState<CardStateSlots> &
   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 41a9fcfe838..1c5cef3391a 100644
--- a/packages/agentic-components/src/components/card/renderCard.tsx
+++ b/packages/agentic-components/src/components/card/renderCard.tsx
@@ -1,4 +1,5 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
+import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import type { CardState } from './card.types';
 
 /**
@@ -10,7 +11,11 @@ export function renderCard_unstable(state: CardState) {
 
   return (
     <state.root>
-      {state.overlay && <state.overlay />}
+      {state.overlay && (
+        <state.overlay>
+          <FocusVisual {...state.focusVisualProps} />
+        </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 d92b5e9399d..bc21311f412 100644
--- a/packages/agentic-components/src/components/card/spec/accessibility.md
+++ b/packages/agentic-components/src/components/card/spec/accessibility.md
@@ -40,7 +40,7 @@ Build-time requirements that must be satisfied by the component implementation.
 | 1.1.1 — Non-text Content                                 | Content media that conveys information needs `alt`; decorative media is hidden (`alt=""` / `aria-hidden`). File/avatar icons inside the Header are decorative alongside the visible title and get `aria-hidden="true"`.                           |
 | 1.4.10 — Reflow                                          | At 320 px (400% zoom) content reflows to one column with no horizontal scroll. **Direction=Horizontal must collapse to a single stacked column.**                                                                                                 |
 | 2.1.1 — Keyboard _(interactive)_                         | The card target is fully operable by keyboard (Enter for link, Space for button); no keyboard trap; nested Buttons remain independently operable.                                                                                                 |
-| 2.4.7 — Focus Visible _(interactive)_                    | The surface shows the system dual-outline focus ring (inherits the surface radius) in all non-disabled states — see `flex-system:styling`.                                                                                                        |
+| 2.4.7 — Focus Visible _(interactive)_                    | The surface shows the universal persistent dual-ring focus visual (inherits the surface radius) in all non-disabled states — see `flex-system:styling`.                                                                                           |
 | 2.5.8 — Target Size (Minimum) _(interactive)_            | The card target is ≥24×24px (trivially met by the surface). Nested action buttons must each independently meet 24×24px and must not overlap the card target or each other.                                                                        |
 | 3.3.2 — Labels or Instructions _(interactive + labeled)_ | An interactive card has a programmatically determinable name — from the visible title (`aria-labelledby`) or `aria-label` when title-less.                                                                                                        |
 | 2.5.3 — Label in Name _(labeled)_                        | When the card has a visible title, the accessible name must contain that visible text so voice-control users can speak it.                                                                                                                        |
diff --git a/packages/agentic-components/src/components/card/spec/interaction.md b/packages/agentic-components/src/components/card/spec/interaction.md
index 3e82af17d3d..ad77cfddc87 100644
--- a/packages/agentic-components/src/components/card/spec/interaction.md
+++ b/packages/agentic-components/src/components/card/spec/interaction.md
@@ -18,7 +18,7 @@ Card has two interaction profiles. **Static** cards are non-interactive grouping
 
 ## Focus management
 
-- Interactive cards take focus on the **surface** element and render the universal dual-outline focus ring, which inherits the surface border radius. See `flex-system:styling` for the focus ring.
+- Interactive cards take focus on the **surface** element and render the universal persistent dual-ring focus visual, which inherits the surface border radius. See `flex-system:styling` for the focus ring.
 - **Focus order follows visual order:** card surface → Header controls → Footer controls, matching the card's top-to-bottom (or, for Direction=Horizontal, leading-to-trailing) layout.
 - The card does **not** trap focus and is not a composite (roving-tabindex) widget — each interactive element inside it is its own tab stop. The card surface and its nested controls are siblings in tab order, not parent-managed.
 - Avoid making a card clickable when it contains multiple equally-weighted controls; overlapping a surface click target with independently focusable children is the most common source of "I can't tab to the button" and "clicking the button also opened the card" bugs.
diff --git a/packages/agentic-components/src/components/card/useCardStyles.ts b/packages/agentic-components/src/components/card/useCardStyles.ts
index f5501e93d72..5f4562d961b 100644
--- a/packages/agentic-components/src/components/card/useCardStyles.ts
+++ b/packages/agentic-components/src/components/card/useCardStyles.ts
@@ -1,15 +1,9 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
+import { createFocusVisualProps } from '../../primitives/focus-visual/focus-visual';
 
-import {
-  cardStyles,
-  getCardFocusStyle,
-  getCardNestedBlockStyle,
-  getCardOverlayStyle,
-  getCardRootStyle,
-  getCardSurfaceColors,
-} from './card.styles';
+import { cardStyles, getCardNestedBlockStyle, getCardOverlayStyle, getCardRootStyle, getCardSurfaceColors } from './card.styles';
 import type { CardState } from './card.types';
 
 /**
@@ -18,14 +12,23 @@ import type { CardState } from './card.types';
 export function useCardStyles_unstable(state: CardState) {
   const colors = getCardSurfaceColors(state);
   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,
+  });
   attachSlotProps(state.root, { style: rootStyle });
 
   if (state.overlay) {
     attachSlotProps(state.overlay, {
       accessible: true,
       focusable: state.isInteractive && !state.disabled,
-      style: [cardStyles.overlay, getCardOverlayStyle(state), getCardFocusStyle(state)],
+      style: [cardStyles.overlay, overlayStyle],
     });
   }
 
diff --git a/packages/agentic-components/src/components/checkbox/checkbox.stories.tsx b/packages/agentic-components/src/components/checkbox/checkbox.stories.tsx
index 3e5c4cd4596..0d53a006f80 100644
--- a/packages/agentic-components/src/components/checkbox/checkbox.stories.tsx
+++ b/packages/agentic-components/src/components/checkbox/checkbox.stories.tsx
@@ -40,6 +40,7 @@ const meta: Meta<typeof Checkbox> = {
     showLabel: true,
     showSecondaryText: false,
     defaultStatus: 'unchecked',
+    testID: 'agentic-storybook-checkbox',
     variant: 'standard',
   },
   argTypes: {
diff --git a/packages/agentic-components/src/components/checkbox/checkbox.styles.ts b/packages/agentic-components/src/components/checkbox/checkbox.styles.ts
index b9a32a944b1..20e3feeec53 100644
--- a/packages/agentic-components/src/components/checkbox/checkbox.styles.ts
+++ b/packages/agentic-components/src/components/checkbox/checkbox.styles.ts
@@ -45,7 +45,6 @@ const rootStateLevels = [['withLabel', 'iconOnly']] as const;
 const labelContainerStateLevels = [['withSecondaryText', 'withoutSecondaryText']] as const;
 const indicatorShapeStateLevels = [['standard', 'circular']] as const;
 const statusStateLevels = [['unchecked', 'checked', 'indeterminate'], interactiveStatePriority] as const;
-const focusStateLevels = [['focused']] as const;
 
 export const checkboxTextStyles = themedStyleSheetFactory('Checkbox.text', ({ tokens }) =>
   StyleSheet.create({
@@ -130,21 +129,6 @@ const getLabelContainerLayoutStyle = getThemedStateStyleFactory(
   labelContainerStateLevels,
 );
 
-const getFocusRingStyle = getThemedStateStyleFactory(
-  'Checkbox.focus',
-  ({ color, borderRadius, strokeWidth }: FlexTokens): StyleDefinition<ViewStyle, typeof focusStateLevels> => ({
-    focused: {
-      borderColor: color.strokeFocusInner,
-      borderRadius: borderRadius.base300,
-      outlineColor: color.strokeFocusOuter,
-      outlineOffset: strokeWidth.thin,
-      outlineStyle: 'solid',
-      outlineWidth: strokeWidth.thick,
-    },
-  }),
-  focusStateLevels,
-);
-
 const indicatorColorDefinition: ColorStyleDefinition<ViewColorStyle, typeof statusStateLevels> = {
   backgroundColor: 'backgroundNeutralTransparent',
   borderColor: 'strokeNeutralHeavy',
@@ -360,10 +344,6 @@ export function getCheckboxLabelContainerStyle(state: CheckboxState): ViewStyle
   return getLabelContainerLayoutStyle(state, [state.renderSecondaryText ? 'withSecondaryText' : 'withoutSecondaryText']);
 }
 
-export function getCheckboxFocusStyle(state: CheckboxState): ViewStyle | undefined {
-  return state.focused && !state.disabled ? getFocusRingStyle(state, ['focused']) : undefined;
-}
-
 export function getCheckboxIndicatorColors(state: CheckboxState): ViewColorStyle {
   return getIndicatorColorStyle(state, getStatusStateSource(state));
 }
diff --git a/packages/agentic-components/src/components/checkbox/checkbox.test.tsx b/packages/agentic-components/src/components/checkbox/checkbox.test.tsx
index c8ff0ff89e7..129ff42028f 100644
--- a/packages/agentic-components/src/components/checkbox/checkbox.test.tsx
+++ b/packages/agentic-components/src/components/checkbox/checkbox.test.tsx
@@ -169,18 +169,23 @@ describe('Checkbox', () => {
     expect(StyleSheet.flatten(component.getByTestId('checkbox-label').props.style).color).toBe(colors.pressed.foregroundNeutralSecondary);
   });
 
-  it('renders the dual-outline focus ring', async () => {
+  it('renders the persistent dual-ring focus visual', async () => {
     const colors = useFlexTokens().color;
     const component = await renderCheckbox({ label: 'Focused' });
     const root = getRoot(component);
 
     await fireEvent(root, 'focus', {});
 
-    expect(getRootStyle(component)).toMatchObject({
+    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-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: colors.strokeFocusInner,
-      outlineColor: colors.strokeFocusOuter,
-      outlineStyle: 'solid',
-      outlineWidth: 2,
+      borderWidth: 1,
     });
   });
 
diff --git a/packages/agentic-components/src/components/checkbox/checkbox.types.ts b/packages/agentic-components/src/components/checkbox/checkbox.types.ts
index 561d4c20097..6166f8aa923 100644
--- a/packages/agentic-components/src/components/checkbox/checkbox.types.ts
+++ b/packages/agentic-components/src/components/checkbox/checkbox.types.ts
@@ -8,6 +8,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';
 
 export type CheckboxVariant = 'standard' | 'circular';
 export type CheckboxStatus = 'unchecked' | 'checked' | 'indeterminate';
@@ -59,6 +60,7 @@ export type CheckboxState = ComponentState<CheckboxStateSlots> &
   Required<Omit<CheckboxStateProps, CheckboxStatusDriverKeys>> &
   ThemeState &
   PressableState & {
+    focusVisualProps?: FocusVisualProps;
     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 35c76d2280f..dfb147ed758 100644
--- a/packages/agentic-components/src/components/checkbox/renderCheckbox.tsx
+++ b/packages/agentic-components/src/components/checkbox/renderCheckbox.tsx
@@ -2,6 +2,7 @@
 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) {
@@ -9,6 +10,7 @@ export function renderCheckbox_unstable(state: CheckboxState) {
 
   return (
     <state.root>
+      <FocusVisual {...state.focusVisualProps} />
       <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 a066f86fd4a..bf56147c873 100644
--- a/packages/agentic-components/src/components/checkbox/spec/accessibility.md
+++ b/packages/agentic-components/src/components/checkbox/spec/accessibility.md
@@ -16,7 +16,7 @@ platform: react-native (Windows, macOS)
   - **1.4.3 — Contrast (Minimum):** Indicator stroke and fill must meet 3:1 against the surrounding background. Label text must meet 4.5:1.
   - **1.4.11 — Non-text Contrast:** The indicator (as a UI component boundary) must meet 3:1 against adjacent colors in all non-disabled states.
   - **2.1.1 — Keyboard:** Space must toggle the checkbox. Do not intercept Tab or use Enter for activation.
-  - **2.4.7 — Focus Visible:** Focus ring must be visible in all non-disabled states. Uses the universal dual-outline focus ring.
+  - **2.4.7 — Focus Visible:** Focus ring must be visible in all non-disabled states. Uses the universal persistent dual-ring focus visual.
   - **4.1.2 — Name, Role, Value:** Checkbox must expose its name, role, and current checked state to assistive technology.
 - **Screen reader:** Announces label (or `aria-label`), role ("checkbox"), and state ("checked", "not checked", or "mixed").
 
diff --git a/packages/agentic-components/src/components/checkbox/useCheckboxStyles.ts b/packages/agentic-components/src/components/checkbox/useCheckboxStyles.ts
index 7ab5db9625f..e9ea80e7280 100644
--- a/packages/agentic-components/src/components/checkbox/useCheckboxStyles.ts
+++ b/packages/agentic-components/src/components/checkbox/useCheckboxStyles.ts
@@ -1,12 +1,12 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
+import { createFocusVisualProps } from '../../primitives/focus-visual/focus-visual';
 
 import {
   checkboxStyles,
   checkboxIndicatorIconSize,
   checkboxTextStyles,
-  getCheckboxFocusStyle,
   getCheckboxIndicatorColors,
   getCheckboxIndicatorIconColors,
   getCheckboxIndicatorStyle,
@@ -24,12 +24,20 @@ export function useCheckboxStyles_unstable(state: CheckboxState) {
   const secondaryTextColors = getCheckboxSecondaryTextColors(state);
   const indicatorIconColors = getCheckboxIndicatorIconColors(state);
 
-  const rootStyle: StyleProp<ViewStyle> = [checkboxStyles.root, getCheckboxRootStyle(state), getCheckboxFocusStyle(state), state.userStyle];
+  const rootStyle: StyleProp<ViewStyle> = [checkboxStyles.root, getCheckboxRootStyle(state), state.userStyle];
   const indicatorStyle: StyleProp<ViewStyle> = [checkboxStyles.indicator, getCheckboxIndicatorStyle(state), indicatorColors];
   const labelContainerStyle: StyleProp<ViewStyle> = [checkboxStyles.labelContainer, getCheckboxLabelContainerStyle(state)];
   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.focused && !state.disabled,
+  });
   attachSlotProps(state.root, { style: rootStyle });
   state.indicatorStyle = indicatorStyle;
   state.labelContainerStyle = labelContainerStyle;
diff --git a/packages/agentic-components/src/components/input/spec/accessibility.md b/packages/agentic-components/src/components/input/spec/accessibility.md
index 9b308a81fa6..1225743472a 100644
--- a/packages/agentic-components/src/components/input/spec/accessibility.md
+++ b/packages/agentic-components/src/components/input/spec/accessibility.md
@@ -20,7 +20,7 @@ Build-time requirements that must be satisfied by the component implementation.
   - **1.4.3 — Contrast (Minimum):** Value text and placeholder text must meet 4.5:1 against the background. Placeholder text uses tertiary foreground (`--gnrc-color-foreground-neutral-tertiary`) which is intentionally lower contrast than value text but must still meet the minimum.
   - **1.4.11 — Non-text Contrast:** The stroke boundary must meet 3:1 against the adjacent background in all interactive states. Verify the disabled stroke (`--gnrc-color-stroke-neutral-disabled`) — intentionally below full contrast and must be paired with the disabled foreground so the control reads as unavailable.
   - **2.1.1 — Keyboard:** Input must be focusable and operable via keyboard. Typing accepts all printable characters when focused.
-  - **2.4.7 — Focus Visible:** Input uses a component-specific focus indicator instead of the standard dual-outline focus ring. Both styles swap their boundary stroke to `--gnrc-color-stroke-neutral-heavy` — Outline as the full border, Underline as the bottom edge.
+  - **2.4.7 — Focus Visible:** Input uses a component-specific focus indicator instead of the standard persistent dual-ring focus visual. Both styles swap their boundary stroke to `--gnrc-color-stroke-neutral-heavy` — Outline as the full border, Underline as the bottom edge.
   - **3.3.2 — Labels or Instructions:** Input alone does not provide a label. Wrap in Field or provide `aria-label` / `aria-labelledby`.
 - **Screen reader:** Announces the accessible name (from `<label for>`, `aria-label`, or `aria-labelledby`), the role ("edit text" or equivalent), and the current value. State transitions announce the active error (`aria-invalid`), readonly (`aria-readonly`), or disabled (`aria-disabled` / native `disabled`) condition when set.
 
diff --git a/packages/agentic-components/src/components/input/spec/interaction.md b/packages/agentic-components/src/components/input/spec/interaction.md
index 3b281d8f5d3..f4796ab7e91 100644
--- a/packages/agentic-components/src/components/input/spec/interaction.md
+++ b/packages/agentic-components/src/components/input/spec/interaction.md
@@ -14,7 +14,7 @@ platform: react-native (Windows, macOS)
 
 ## Focus management
 
-Focus follows standard platform behavior for `<input>` elements. Input does **not** use the standard dual-outline focus ring described in `flex-system:styling` — instead, the boundary stroke itself serves as the focus indicator. On focus, both styles swap their stroke to `--gnrc-color-stroke-neutral-heavy` — Outline as a full border, Underline as the bottom edge.
+Focus follows standard platform behavior for `<input>` elements. Input does **not** use the standard persistent dual-ring focus visual described in `flex-system:styling` — instead, the boundary stroke itself serves as the focus indicator. On focus, both styles swap their stroke to `--gnrc-color-stroke-neutral-heavy` — Outline as a full border, Underline as the bottom edge.
 
 Hover and pressed are resolved state values, not base states of their own — they ride on top of whichever base is active. When the input is focused and hovered, the inline Focus hover value from `tokens.yaml` shifts the Focus stroke, not the Rest stroke. In CSS, write `:focus-visible` before `:hover` and `:active` so the hover/pressed value wins via cascade order.
 
diff --git a/packages/agentic-components/src/components/list-item/SPEC.md b/packages/agentic-components/src/components/list-item/SPEC.md
index 16aff7cfc75..5540b37861b 100644
--- a/packages/agentic-components/src/components/list-item/SPEC.md
+++ b/packages/agentic-components/src/components/list-item/SPEC.md
@@ -103,10 +103,10 @@ Variant properties are ordered in the design tool: **Size → Selection mode →
 | **Rest**     | All rows              | Default appearance.                                                       |
 | **Hover**    | Interactive rows only | Background and foreground use the inline hover values in `tokens.yaml`.   |
 | **Pressed**  | Interactive rows only | Background and foreground use the inline pressed values in `tokens.yaml`. |
-| **Focused**  | Interactive rows only | Universal dual-outline focus ring (see `flex-system:styling`).            |
+| **Focused**  | Interactive rows only | Universal persistent dual-ring focus visual (see `flex-system:styling`).  |
 | **Disabled** | All rows              | Disabled foreground; no interaction.                                      |
 
-**Why Focused is its own State value:** The parent List moves focus to the row's interactive element. The focus ring is rendered by ListItem itself using the universal dual-outline pattern — the same ring every other focusable element in the system uses.
+**Why Focused is its own State value:** The parent List moves focus to the row's interactive element. The focus ring is rendered by ListItem itself using the universal persistent dual-ring pattern — the same ring every other focusable element in the system uses.
 
 #### Selected
 
diff --git a/packages/agentic-components/src/components/list-item/list-item.stories.tsx b/packages/agentic-components/src/components/list-item/list-item.stories.tsx
index 69e09f713d4..1708ff53120 100644
--- a/packages/agentic-components/src/components/list-item/list-item.stories.tsx
+++ b/packages/agentic-components/src/components/list-item/list-item.stories.tsx
@@ -135,6 +135,26 @@ export const Overview: Story = {
   },
 };
 
+export const SelectedFocus: Story = {
+  render: () => (
+    <ListItem
+      content="Selected"
+      icon={regularStarIcon}
+      selected
+      selectedIcon={filledStarIcon}
+      selectionMode="single"
+      testID="agentic-storybook-list-item-selected"
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A selected row with a stable native selector for keyboard-focus regression coverage.',
+      },
+    },
+  },
+};
+
 export const SecondaryPosition: Story = {
   render: () => (
     <StoryGroup label="Secondary position">
diff --git a/packages/agentic-components/src/components/list-item/list-item.styles.ts b/packages/agentic-components/src/components/list-item/list-item.styles.ts
index b9ff5657507..4da942c8550 100644
--- a/packages/agentic-components/src/components/list-item/list-item.styles.ts
+++ b/packages/agentic-components/src/components/list-item/list-item.styles.ts
@@ -276,28 +276,6 @@ export function getListItemSecondaryContentStyle(state: ListItemState): TextStyl
   return getThemedSecondaryStyle(state, [state.size]);
 }
 
-const focusStateLevels = [['focused']] as const;
-
-const getThemedFocusStyle = getThemedStateStyleFactory(
-  'ListItem.focus',
-  ({ color, strokeWidth }: FlexTokens): StyleDefinition<ViewStyle, typeof focusStateLevels> => ({
-    focused: {
-      borderColor: color.strokeFocusInner,
-      outlineColor: color.strokeFocusOuter,
-      outlineOffset: strokeWidth.thin,
-      outlineStyle: 'solid',
-      outlineWidth: strokeWidth.thick,
-    },
-  }),
-  focusStateLevels,
-);
-
-const focusedState = ['focused'] as const;
-
-export function getListItemFocusStyle(state: ListItemState): ViewStyle | undefined {
-  return state.focused && !state.disabled ? getThemedFocusStyle(state, focusedState) : undefined;
-}
-
 export function getListItemRootSizeStyle(state: ListItemState): ViewStyle {
   return {
     borderRadius: state.tokens.borderRadius.base300,
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 04fc81b416f..b48d4e4b6d2 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,19 +172,23 @@ describe('ListItem', () => {
     },
   );
 
-  it('renders a dual-token focus outline', async () => {
+  it('renders a persistent dual-ring focus visual', async () => {
     const colors = useFlexTokens().color;
     const component = await renderListItem({ content: 'Focused' });
     const root = getRoot(component);
 
     await fireEvent(root, 'focus', {});
 
-    expect(getRootStyle(component)).toMatchObject({
+    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-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: colors.strokeFocusInner,
-      outlineColor: colors.strokeFocusOuter,
-      outlineOffset: 1,
-      outlineStyle: 'solid',
-      outlineWidth: 2,
+      borderWidth: 1,
     });
   });
 
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 06474f62bec..91325d688bf 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
@@ -11,6 +11,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 { ItemSecondaryContentPosition } from '../../common/item.types';
 
 export type ListItemSize = 'small' | 'medium' | 'large';
@@ -65,6 +66,7 @@ export type ListItemState = ComponentState<ListItemStateSlots> &
   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 9bb506c7fdf..983340ffc86 100644
--- a/packages/agentic-components/src/components/list-item/renderListItem.tsx
+++ b/packages/agentic-components/src/components/list-item/renderListItem.tsx
@@ -2,6 +2,7 @@
 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';
@@ -20,6 +21,7 @@ export function renderListItem_unstable(state: ListItemState) {
 
   return (
     <state.root>
+      <FocusVisual {...state.focusVisualProps} />
       {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 4b1ba668a52..236744074d5 100644
--- a/packages/agentic-components/src/components/list-item/spec/accessibility.md
+++ b/packages/agentic-components/src/components/list-item/spec/accessibility.md
@@ -25,7 +25,7 @@ Build-time requirements that must be satisfied by the component implementation.
 - **WCAG:**
   - **1.4.3 — Contrast (Minimum):** Primary label, secondary content, leading icon, and Avatar foreground all meet 4.5:1 against their rest and selected backgrounds. Disabled foreground is intentionally below full contrast but remains legible.
   - **2.1.1 — Keyboard:** Enter (and Space in Selection modes) activate the focused row. Arrow keys, Home/End, type-ahead, and Tab are handled by the parent List — see `interaction.md` and `flex-components:list` interaction.md.
-  - **2.4.7 — Focus Visible:** The universal dual-outline focus ring (see `flex-system:styling`) must render on the row whose interactive element matches `:focus-visible`. In composite mode, inner focusables (Action items) render their own focus rings independently.
+  - **2.4.7 — Focus Visible:** The universal persistent dual-ring focus visual (see `flex-system:styling`) must render on the row whose interactive element matches `:focus-visible`. In composite mode, inner focusables (Action items) render their own focus rings independently.
   - **2.5.8 — Target Size (Minimum, AA):** Default row height at Medium meets 40px with the documented padding tokens. At Small size, verify the row remains ≥24px (the WCAG 2.5.8 minimum) — Small density rows are denser but must not fall below the floor. Trailing Action item Subtle Buttons must independently meet 24×24 px.
   - **4.1.2 — Name, Role, Value:** Every row must have a programmatically determinable name (primary label or `aria-label`), the role assigned by the parent's matrix, and (where applicable) its selection state via `aria-selected`.
 - **Screen reader:** Announces the row's label, its role per the parent's matrix (`list item` / `option` / `row`), and (when applicable) its selection state ("selected" / "not selected"). Disabled rows announce as "dimmed" or "unavailable". Inner focusables in composite mode announce their own role + name independently when focused.
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 9b3aac5c929..44a3ef3e7f4 100644
--- a/packages/agentic-components/src/components/list-item/spec/interaction.md
+++ b/packages/agentic-components/src/components/list-item/spec/interaction.md
@@ -21,7 +21,7 @@ Disabled rows are skipped by the parent's navigation cycle.
 
 ListItem rows receive **real DOM focus** from the parent List. The parent moves focus between rows (and onto the initially-focused row when the List is entered) by calling `.focus()` on the row's interactive element.
 
-- **Focus ring** — ListItem renders the universal dual-outline focus ring (see `flex-system:styling`) when its interactive element matches `:focus-visible`. The ring is absolutely positioned over the row and overlays content without affecting layout dimensions.
+- **Focus ring** — ListItem renders the universal persistent dual-ring focus visual (see `flex-system:styling`) when its interactive element matches `:focus-visible`. The ring is absolutely positioned over the row and overlays content without affecting layout dimensions.
 - **No self-managed `tabindex`.** The parent List controls roving tabindex: typically the focused row carries `tabindex="0"` while the rest carry `tabindex="-1"`. ListItem must not set its own `tabindex`.
 - **Inner focusables in composite mode.** When the parent List is in `navigationMode="composite"`, Action items and any other inner focusables receive their own DOM focus and render their own `:focus-visible` rings. Composite rows must follow the accessibility wrapper contract documented in `accessibility.md`; ListItem provides the slot but does not enforce the wrapper.
 
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 d2e0ad360e0..7e50e1a02f6 100644
--- a/packages/agentic-components/src/components/list-item/spec/usage.md
+++ b/packages/agentic-components/src/components/list-item/spec/usage.md
@@ -103,10 +103,10 @@ Variant properties are ordered in the design tool: **Size → Selection mode →
 | **Rest**     | All rows              | Default appearance.                                                       |
 | **Hover**    | Interactive rows only | Background and foreground use the inline hover values in `tokens.yaml`.   |
 | **Pressed**  | Interactive rows only | Background and foreground use the inline pressed values in `tokens.yaml`. |
-| **Focused**  | Interactive rows only | Universal dual-outline focus ring (see `flex-system:styling`).            |
+| **Focused**  | Interactive rows only | Universal persistent dual-ring focus visual (see `flex-system:styling`).  |
 | **Disabled** | All rows              | Disabled foreground; no interaction.                                      |
 
-**Why Focused is its own State value:** The parent List moves focus to the row's interactive element. The focus ring is rendered by ListItem itself using the universal dual-outline pattern — the same ring every other focusable element in the system uses.
+**Why Focused is its own State value:** The parent List moves focus to the row's interactive element. The focus ring is rendered by ListItem itself using the universal persistent dual-ring pattern — the same ring every other focusable element in the system uses.
 
 #### Selected
 
diff --git a/packages/agentic-components/src/components/list-item/useListItemStyles.ts b/packages/agentic-components/src/components/list-item/useListItemStyles.ts
index b53f15524be..cb0c5a63df5 100644
--- a/packages/agentic-components/src/components/list-item/useListItemStyles.ts
+++ b/packages/agentic-components/src/components/list-item/useListItemStyles.ts
@@ -3,10 +3,10 @@ import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
 
 import { hiddenFromAccessibilityProps } from '../../common/accessibility';
+import { createFocusVisualProps } from '../../primitives/focus-visual/focus-visual';
 import {
   getListItemBackgroundStyle,
   getListItemContentStyle,
-  getListItemFocusStyle,
   getListItemPrimaryForegroundStyle,
   getListItemRootSizeStyle,
   getListItemSecondaryContentStyle,
@@ -19,13 +19,8 @@ import type { ListItemState } from './list-item.types';
  * Applies stable theme styles and instance-specific style selections to the ListItem slots.
  */
 export function useListItemStyles_unstable(state: ListItemState) {
-  const rootStyle: StyleProp<ViewStyle> = [
-    listItemStyles.root,
-    getListItemRootSizeStyle(state),
-    getListItemBackgroundStyle(state),
-    getListItemFocusStyle(state),
-    state.userStyle,
-  ];
+  const rootSizeStyle = getListItemRootSizeStyle(state);
+  const rootStyle: StyleProp<ViewStyle> = [listItemStyles.root, rootSizeStyle, getListItemBackgroundStyle(state), state.userStyle];
   const contentStyle: StyleProp<TextStyle> = getListItemContentStyle(state);
   const hiddenContentStyle: StyleProp<TextStyle> = getListItemContentStyle(state, true);
   const secondaryContentStyle: StyleProp<TextStyle> = [
@@ -60,6 +55,14 @@ 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,
+  });
   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 6290c2be14b..f98fc7d42b6 100644
--- a/packages/agentic-components/src/components/listbox-item/SPEC.md
+++ b/packages/agentic-components/src/components/listbox-item/SPEC.md
@@ -75,18 +75,18 @@ Variant properties are ordered in the design tool: **Secondary content position
 
 #### State
 
-| Value        | Applies to                | Visual                                                                                                              |
-| ------------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| **Rest**     | List Item, Section Header | Default appearance                                                                                                  |
-| **Hover**    | List Item only            | Transparent-hover background tint; foreground shifts via interaction algorithm                                      |
-| **Pressed**  | List Item only            | Deepened background tint; foreground shifts via interaction algorithm                                               |
-| **Focused**  | List Item only            | Universal dual-outline focus ring; rendered on `:focus-visible` because the row's `<button>` carries real DOM focus |
-| **Disabled** | List Item, Section Header | Disabled foreground color; no interaction                                                                           |
-| **Loading**  | Section Header only       | Skeleton shimmer placeholders replace icon and label                                                                |
+| Value        | Applies to                | Visual                                                                                                                        |
+| ------------ | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| **Rest**     | List Item, Section Header | Default appearance                                                                                                            |
+| **Hover**    | List Item only            | Transparent-hover background tint; foreground shifts via interaction algorithm                                                |
+| **Pressed**  | List Item only            | Deepened background tint; foreground shifts via interaction algorithm                                                         |
+| **Focused**  | List Item only            | Universal persistent dual-ring focus visual; rendered on `:focus-visible` because the row's `<button>` carries real DOM focus |
+| **Disabled** | List Item, Section Header | Disabled foreground color; no interaction                                                                                     |
+| **Loading**  | Section Header only       | Skeleton shimmer placeholders replace icon and label                                                                          |
 
 **Why Loading exists only on Section Header:** Loading represents the entire option list being fetched. The Section Header skeleton signals structure while options load. Individual List Items do not have a Loading state — they are either present or absent.
 
-**Why Focused is a State on the option:** ListboxItem rows receive real DOM focus from the parent Dropdown (arrow keys move focus between row buttons). The Focused state renders the universal dual-outline focus ring (see `flex-system:styling`) whenever the row's `<button>` matches `:focus-visible` — the same pattern used by every other focusable element in the system.
+**Why Focused is a State on the option:** ListboxItem rows receive real DOM focus from the parent Dropdown (arrow keys move focus between row buttons). The Focused state renders the universal persistent dual-ring focus visual (see `flex-system:styling`) whenever the row's `<button>` matches `:focus-visible` — the same pattern used by every other focusable element in the system.
 
 #### Selected
 
diff --git a/packages/agentic-components/src/components/listbox-item/listbox-item.stories.tsx b/packages/agentic-components/src/components/listbox-item/listbox-item.stories.tsx
index fec3680685d..8bc5e9b444c 100644
--- a/packages/agentic-components/src/components/listbox-item/listbox-item.stories.tsx
+++ b/packages/agentic-components/src/components/listbox-item/listbox-item.stories.tsx
@@ -30,6 +30,7 @@ const meta: Meta<typeof ListboxItem> = {
     content: 'Listbox item',
     secondaryContent: 'Secondary',
     secondaryContentPosition: 'right',
+    testID: 'agentic-storybook-listbox-item',
     variant: 'listItem',
   },
   parameters: {
diff --git a/packages/agentic-components/src/components/listbox-item/listbox-item.styles.ts b/packages/agentic-components/src/components/listbox-item/listbox-item.styles.ts
index fd5d346b101..e33430c0b12 100644
--- a/packages/agentic-components/src/components/listbox-item/listbox-item.styles.ts
+++ b/packages/agentic-components/src/components/listbox-item/listbox-item.styles.ts
@@ -153,19 +153,6 @@ export function getListboxItemSecondaryColorStyle(state: ListboxItemState): Text
   };
 }
 
-export function getListboxItemFocusStyle(state: ListboxItemState): ViewStyle | undefined {
-  if (state.variant !== 'listItem' || state.disabled || !state.focused) {
-    return undefined;
-  }
-
-  return {
-    outlineColor: state.tokens.color.strokeFocusOuter,
-    outlineOffset: state.tokens.strokeWidth.thin,
-    outlineStyle: 'solid',
-    outlineWidth: state.tokens.strokeWidth.thick,
-  };
-}
-
 export function getListboxItemVisibleLabelStyle(state: ListboxItemState): TextStyle {
   return state.variant === 'listItem' && !state.multiselect
     ? {
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 1dd78e19918..6473eb96c2c 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,7 +94,18 @@ describe('ListboxItem', () => {
     expect(StyleSheet.flatten(root.props.style).backgroundColor).toBe(useFlexTokens().color.pressed.backgroundNeutralTransparent);
 
     await fireEvent(root, 'focus', {});
-    expect(StyleSheet.flatten(root.props.style)).toMatchObject({
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
+      borderColor: useFlexTokens().color.strokeFocusOuter,
+      borderWidth: useFlexTokens().strokeWidth.thick,
+    });
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
+      'opacity',
+    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
+      borderColor: useFlexTokens().color.strokeFocusInner,
+      borderWidth: useFlexTokens().strokeWidth.thin,
+    });
+    expect(StyleSheet.flatten(root.props.style)).not.toMatchObject({
       outlineColor: useFlexTokens().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 3a0201a445e..21efbe20566 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
@@ -13,6 +13,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 { ItemSecondaryContentPosition } from '../../common/item.types';
 
 export type ListboxItemSecondaryContentPosition = ItemSecondaryContentPosition;
@@ -58,5 +59,6 @@ export type ListboxItemState = ComponentState<ListboxItemStateSlots> &
   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 833491155f6..05bf721e0d5 100644
--- a/packages/agentic-components/src/components/listbox-item/renderListboxItem.tsx
+++ b/packages/agentic-components/src/components/listbox-item/renderListboxItem.tsx
@@ -2,6 +2,7 @@
 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';
@@ -48,6 +49,7 @@ export function renderListboxItem_unstable(state: ListboxItemState) {
 
   return (
     <state.root>
+      <FocusVisual {...state.focusVisualProps} />
       <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 17c7cd61aef..fabac111f5c 100644
--- a/packages/agentic-components/src/components/listbox-item/spec/accessibility.md
+++ b/packages/agentic-components/src/components/listbox-item/spec/accessibility.md
@@ -18,7 +18,7 @@ Build-time requirements that must be satisfied by the component implementation.
 - **WCAG:**
   - **1.4.3 — Contrast (Minimum):** All text and icon foreground must meet 4.5:1 against their background at rest. Verify disabled tokens — intentionally below full contrast but should remain legible.
   - **2.1.1 — Keyboard:** Enter / Space activates the focused row. Arrow keys, Home/End, and Escape/Tab are handled by the parent — see `interaction.md`. Every row must be reachable via the parent's keyboard model.
-  - **2.4.7 — Focus Visible:** The universal dual-outline focus ring (see `flex-system:styling`) must render on the row whose `<button>` matches `:focus-visible`.
+  - **2.4.7 — Focus Visible:** The universal persistent dual-ring focus visual (see `flex-system:styling`) must render on the row whose `<button>` matches `:focus-visible`.
   - **2.5.8 — Target Size (Minimum, AA):** Minimum interactive target height is 40px (met by the default option height with the documented padding tokens).
   - **4.1.2 — Name, Role, Value:** Every row must have a programmatically-determinable name (label or `aria-label`), the `button` role (native `<button>`), and the `aria-pressed` value.
 - **Screen reader:** Announces the row's label, "button", and pressed state ("pressed" when `aria-pressed="true"`, "not pressed" when `aria-pressed="false"`). Disabled rows announce as "dimmed" or "unavailable". Section Header announces as a heading or non-interactive group label preceding the rows it scopes.
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 88b3921fcc5..219ca42f11f 100644
--- a/packages/agentic-components/src/components/listbox-item/spec/interaction.md
+++ b/packages/agentic-components/src/components/listbox-item/spec/interaction.md
@@ -22,7 +22,7 @@ Section Header rows are skipped during keyboard navigation — they are not focu
 
 ListboxItem rows receive **real DOM focus** from the parent Dropdown. The parent moves focus between rows (and onto the initially-selected row when the Popover opens) by calling `.focus()` on the target row's `<button>`. There is no `aria-activedescendant`.
 
-ListboxItem renders the universal dual-outline focus ring (see `flex-system:styling`) when its `<button>` matches `:focus-visible` — the same mechanism used by every other focusable element in the system. The ring is absolutely positioned over the row and overlays content without affecting layout dimensions.
+ListboxItem renders the universal persistent dual-ring focus visual (see `flex-system:styling`) when its `<button>` matches `:focus-visible` — the same mechanism used by every other focusable element in the system. The ring is absolutely positioned over the row and overlays content without affecting layout dimensions.
 
 ListboxItem must not set its own `tabindex`. The parent Dropdown controls the focus model: typically the focused row carries `tabindex="0"` while the rest carry `tabindex="-1"` (a roving tabindex pattern). When the parent Dropdown closes the Popover, focus returns to the Dropdown trigger — that is the Dropdown's responsibility, not ListboxItem's.
 
diff --git a/packages/agentic-components/src/components/listbox-item/useListboxItemStyles.ts b/packages/agentic-components/src/components/listbox-item/useListboxItemStyles.ts
index 06effb4dfd4..c043b853f6d 100644
--- a/packages/agentic-components/src/components/listbox-item/useListboxItemStyles.ts
+++ b/packages/agentic-components/src/components/listbox-item/useListboxItemStyles.ts
@@ -1,11 +1,11 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
+import { createFocusVisualProps } from '../../primitives/focus-visual/focus-visual';
 
 import {
   getListboxItemAvatarSize,
   getListboxItemCheckmarkSize,
-  getListboxItemFocusStyle,
   getListboxItemHeaderStyle,
   getListboxItemIconSize,
   getListboxItemLabelColorStyle,
@@ -18,12 +18,16 @@ import {
 import type { ListboxItemState } from './listbox-item.types';
 
 export function useListboxItemStyles_unstable(state: ListboxItemState) {
-  const rootStyle: StyleProp<ViewStyle> = [
-    listboxItemStyles.root,
-    getListboxItemRootStyle(state),
-    getListboxItemFocusStyle(state),
-    state.userStyle,
-  ];
+  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,
+  });
   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/menu-item.stories.tsx b/packages/agentic-components/src/components/menu-item/menu-item.stories.tsx
index 810ac2ac4cf..6190c264c98 100644
--- a/packages/agentic-components/src/components/menu-item/menu-item.stories.tsx
+++ b/packages/agentic-components/src/components/menu-item/menu-item.stories.tsx
@@ -28,6 +28,7 @@ const meta: Meta<typeof MenuItem> = {
     secondaryContentPosition: 'right',
     selected: false,
     menuStyle: 'list-item',
+    testID: 'agentic-storybook-menu-item',
   },
   argTypes: {
     secondaryContentPosition: { control: 'select', options: ['right', 'under'] },
diff --git a/packages/agentic-components/src/components/menu-item/menu-item.styles.ts b/packages/agentic-components/src/components/menu-item/menu-item.styles.ts
index 9fd035707ba..7f84efe1bf7 100644
--- a/packages/agentic-components/src/components/menu-item/menu-item.styles.ts
+++ b/packages/agentic-components/src/components/menu-item/menu-item.styles.ts
@@ -121,26 +121,6 @@ export function getMenuItemRootStyle(state: MenuItemState): ViewStyle {
   return getThemedBackground(state, getBackgroundStateSource(state));
 }
 
-const focusStateLevels = [['focused']] as const;
-
-const getThemedFocus = getThemedStateStyleFactory(
-  'MenuItem.focus',
-  ({ color, strokeWidth }: FlexTokens): StyleDefinition<ViewStyle, typeof focusStateLevels> => ({
-    focused: {
-      borderColor: color.strokeFocusInner,
-      outlineColor: color.strokeFocusOuter,
-      outlineOffset: strokeWidth.thin,
-      outlineStyle: 'solid',
-      outlineWidth: strokeWidth.thick,
-    },
-  }),
-  focusStateLevels,
-);
-
-export function getMenuItemFocusStyle(state: MenuItemState): ViewStyle | undefined {
-  return state.focused && !state.disabled && state.isListItem ? getThemedFocus(state, ['focused']) : undefined;
-}
-
 const labelFontStateLevels = [['list-item', 'section-header'], ['selected']] as const;
 type LabelFontStateLevels = typeof labelFontStateLevels;
 
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 470aa019d75..f5a0a2221ff 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
@@ -4,6 +4,8 @@ import { StyleSheet, View } from 'react-native';
 import { fireEvent, render } from '@testing-library/react-native';
 import type { RenderResult } from '@testing-library/react-native';
 
+import { useFlexTokens } from '@fluentui-react-native/design';
+
 import { MenuItem } from './menu-item';
 import type { MenuItemProps } from './menu-item.types';
 
@@ -107,6 +109,25 @@ describe('MenuItem', () => {
     expect(getRootStyle(component).backgroundColor).toBe('hotpink');
   });
 
+  it('renders a persistent dual-ring focus visual for list items', async () => {
+    const component = await renderMenuItem({ content: 'Focused' });
+    const root = getRoot(component);
+
+    await fireEvent(root, 'focus', {});
+
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
+      borderColor: useFlexTokens().color.strokeFocusOuter,
+      borderWidth: useFlexTokens().strokeWidth.thick,
+    });
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
+      'opacity',
+    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
+      borderColor: useFlexTokens().color.strokeFocusInner,
+      borderWidth: useFlexTokens().strokeWidth.thin,
+    });
+  });
+
   it('hides secondary content when null and keeps the default when omitted', async () => {
     const omitted = await renderMenuItem({ content: 'With secondary' });
     const hidden = await renderMenuItem({ content: 'No secondary', secondaryContent: null });
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 3924bbc30ee..fa8aa5c9d95 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
@@ -2,6 +2,7 @@ import type { Pressable, PressableProps, StyleProp, TextStyle, View, ViewStyle }
 import type { ComponentProps, ComponentState, OptionalSlot, OwnedRootProps, 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 { Icon } from '../../primitives/icon/icon';
 import type { CheckboxIndicator } from '../../primitives/checkbox-indicator/checkbox-indicator';
 import type { ItemSecondaryContentPosition } from '../../common/item.types';
@@ -45,6 +46,7 @@ export type MenuItemState = ComponentState<MenuItemSlots> &
   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 94fe4c5a23f..c637b1e3735 100644
--- a/packages/agentic-components/src/components/menu-item/renderMenuItem.tsx
+++ b/packages/agentic-components/src/components/menu-item/renderMenuItem.tsx
@@ -2,6 +2,7 @@
 import { Text } 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 { getMenuItemContentLayoutStyle, getMenuItemLeadingStyle, getMenuItemTrailingStyle, menuItemStyles } from './menu-item.styles';
@@ -34,6 +35,7 @@ export function renderMenuItem_unstable(state: MenuItemState) {
 
   return (
     <state.root>
+      <FocusVisual {...state.focusVisualProps} />
       {state.loading ? (
         <CompoundItemLayout
           contentStyle={getMenuItemContentLayoutStyle(state)}
diff --git a/packages/agentic-components/src/components/menu-item/useMenuItemStyles.ts b/packages/agentic-components/src/components/menu-item/useMenuItemStyles.ts
index 1b6e7b32a26..8021bfdc126 100644
--- a/packages/agentic-components/src/components/menu-item/useMenuItemStyles.ts
+++ b/packages/agentic-components/src/components/menu-item/useMenuItemStyles.ts
@@ -3,9 +3,9 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
 
 import { hiddenFromAccessibilityProps } from '../../common/accessibility';
+import { createFocusVisualProps } from '../../primitives/focus-visual/focus-visual';
 import {
   getMenuItemCheckboxStyle,
-  getMenuItemFocusStyle,
   getMenuItemLeadingStyle,
   getMenuItemLabelStyle,
   getMenuItemRootLayoutStyle,
@@ -18,14 +18,17 @@ import type { MenuItemState } from './menu-item.types';
 
 export function useMenuItemStyles_unstable(state: MenuItemState) {
   const labelColor = getMenuItemLabelStyle(state).color;
-  const rootStyle: StyleProp<ViewStyle> = [
-    menuItemStyles.root,
-    getMenuItemRootLayoutStyle(state),
-    getMenuItemRootStyle(state),
-    getMenuItemFocusStyle(state),
-    state.userStyle,
-  ];
+  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,
+  });
   attachSlotProps(state.root, { style: rootStyle });
   state.contentReserveStyle = getMenuItemLabelStyle(state, true);
   state.contentStyle = getMenuItemLabelStyle(state);
diff --git a/packages/agentic-components/src/components/radio/radio.stories.tsx b/packages/agentic-components/src/components/radio/radio.stories.tsx
index 448f7273dad..dc2501c7fba 100644
--- a/packages/agentic-components/src/components/radio/radio.stories.tsx
+++ b/packages/agentic-components/src/components/radio/radio.stories.tsx
@@ -27,6 +27,7 @@ const meta: Meta<typeof Radio> = {
     secondaryText: 'Additional detail',
     selected: false,
     showSecondaryText: true,
+    testID: 'agentic-storybook-radio',
   },
   argTypes: {
     disabled: { control: 'boolean' },
diff --git a/packages/agentic-components/src/components/radio/radio.styles.ts b/packages/agentic-components/src/components/radio/radio.styles.ts
index 9a1e5bdf51d..f1b1ffa3350 100644
--- a/packages/agentic-components/src/components/radio/radio.styles.ts
+++ b/packages/agentic-components/src/components/radio/radio.styles.ts
@@ -43,7 +43,6 @@ export const radioStyles = StyleSheet.create({
 
 const noStateLevels = [[]] as const;
 const selectionStateLevels = [['selected'], interactiveStatePriority] as const;
-const focusStateLevels = [['focused']] as const;
 type RadioColorState = 'selected' | 'disabled' | 'pressed' | 'hovered';
 
 const toDimensionValue = (value: unknown): number => Number(getNumericStyleValue(value));
@@ -114,21 +113,6 @@ const getRadioSecondaryTypographyStyle = getThemedStateStyleFactory(
   noStateLevels,
 );
 
-const getRadioFocusStyle = getThemedStateStyleFactory(
-  'Radio.focus',
-  ({ borderRadius, color, strokeWidth }: FlexTokens): StyleDefinition<ViewStyle, typeof focusStateLevels> => ({
-    focused: {
-      borderColor: color.strokeFocusInner,
-      borderRadius: borderRadius.base300,
-      outlineColor: color.strokeFocusOuter,
-      outlineOffset: strokeWidth.thin,
-      outlineStyle: 'solid',
-      outlineWidth: strokeWidth.thick,
-    },
-  }),
-  focusStateLevels,
-);
-
 const indicatorBorderDefinition: ColorStyleDefinition<ViewColorStyle, typeof selectionStateLevels> = {
   borderColor: 'strokeNeutralHeavy',
   disabled: {
@@ -246,10 +230,6 @@ export function getRadioSecondaryTypography(state: RadioState): TextStyle {
   return getRadioSecondaryTypographyStyle(state, []);
 }
 
-export function getRadioFocus(state: RadioState): ViewStyle | undefined {
-  return state.focused && !state.disabled ? getRadioFocusStyle(state, ['focused']) : undefined;
-}
-
 export function getRadioIndicatorBorder(state: RadioState) {
   return getRadioIndicatorBorderColor(state, getColorStateSource(state));
 }
diff --git a/packages/agentic-components/src/components/radio/radio.test.tsx b/packages/agentic-components/src/components/radio/radio.test.tsx
index 72f85072824..79006d26c18 100644
--- a/packages/agentic-components/src/components/radio/radio.test.tsx
+++ b/packages/agentic-components/src/components/radio/radio.test.tsx
@@ -110,18 +110,22 @@ describe('Radio', () => {
     expect(StyleSheet.flatten(component.getByText('Choice').props.style).color).toBe(tokens.pressed.foregroundNeutralSecondary);
   });
 
-  it('renders a focus ring when focused', async () => {
+  it('renders a persistent dual-ring focus visual when focused', async () => {
     const component = await renderRadio({ label: 'Choice' });
     const root = getRoot(component);
 
     await fireEvent(root, 'focus', {});
 
-    expect(getRootStyle(component)).toMatchObject({
+    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-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: '#ffffff',
-      outlineColor: '#000000',
-      outlineOffset: 1,
-      outlineStyle: 'solid',
-      outlineWidth: 2,
+      borderWidth: 1,
     });
   });
 
diff --git a/packages/agentic-components/src/components/radio/radio.types.ts b/packages/agentic-components/src/components/radio/radio.types.ts
index 73c2cac15f1..81ba62a2e66 100644
--- a/packages/agentic-components/src/components/radio/radio.types.ts
+++ b/packages/agentic-components/src/components/radio/radio.types.ts
@@ -2,6 +2,7 @@ import type { Pressable, PressableProps, StyleProp, TextStyle, ViewStyle } from
 
 import type { ThemeState } from '@fluentui-react-native/design';
 import type { ComponentProps, ComponentState, OwnedRootProps, PressableState, Slot } from '@fluentui-react-native/framework-base';
+import type { FocusVisualProps } from '../../primitives/focus-visual/focus-visual.types';
 
 export type RadioSlots = {
   /**
@@ -44,6 +45,7 @@ export type RadioState = ComponentState<RadioSlots> &
   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 9c7f6edc350..8260ca706c2 100644
--- a/packages/agentic-components/src/components/radio/renderRadio.tsx
+++ b/packages/agentic-components/src/components/radio/renderRadio.tsx
@@ -1,6 +1,7 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import { Text, View } from 'react-native';
 
+import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import type { RadioState } from './radio.types';
 
 /**
@@ -9,6 +10,7 @@ import type { RadioState } from './radio.types';
 export function renderRadio_unstable(state: RadioState) {
   return (
     <state.root>
+      <FocusVisual {...state.focusVisualProps} />
       <View 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 fb73b612e69..94356d408b0 100644
--- a/packages/agentic-components/src/components/radio/spec/accessibility.md
+++ b/packages/agentic-components/src/components/radio/spec/accessibility.md
@@ -20,7 +20,7 @@ Build-time requirements that must be satisfied by the component implementation.
   - **1.4.3 — Contrast (Minimum):** Indicator stroke and inner dot must meet 3:1 against the surrounding background. Label text must meet 4.5:1.
   - **1.4.11 — Non-text Contrast:** The indicator (as a UI component boundary) must meet 3:1 against adjacent colors in all non-disabled states.
   - **2.1.1 — Keyboard:** Arrow keys must move focus and selection between enabled Radios in the RadioGroup; Space activates the focused Radio if it is not already selected. Tab must move focus to and from the RadioGroup as a unit. Disabled radios are skipped — native via `disabled` (platform-managed), custom via `aria-disabled` plus explicit skip logic.
-  - **2.4.7 — Focus Visible:** Focus ring must be visible in all non-disabled states. Uses the universal dual-outline focus ring.
+  - **2.4.7 — Focus Visible:** Focus ring must be visible in all non-disabled states. Uses the universal persistent dual-ring focus visual.
   - **3.3.2 — Labels or Instructions:** Each RadioGroup must have a group-level label describing the choice being made, in addition to the per-option labels.
   - **4.1.2 — Name, Role, Value:** Each radio must expose its name, role, and current checked state to assistive technology.
 - **Screen reader:** Announces the per-radio label, role ("radio button"), state ("selected" or "not selected"), and position within the group ("1 of 3"). The group label is announced when focus enters the group.
diff --git a/packages/agentic-components/src/components/radio/spec/interaction.md b/packages/agentic-components/src/components/radio/spec/interaction.md
index c27093cef3c..c100a2a3f1e 100644
--- a/packages/agentic-components/src/components/radio/spec/interaction.md
+++ b/packages/agentic-components/src/components/radio/spec/interaction.md
@@ -13,7 +13,7 @@ Radio-specific note: selecting a Radio via arrow keys simultaneously moves focus
 
 ## Focus management
 
-Radio does not manage its own focus within a group — focus management lives at the parent RadioGroup level. For native `<input type="radio">` siblings sharing a `name` attribute, the platform provides the single-tab-stop behavior; do not set `tabindex` on the inputs. For custom radios (non-native elements using `role="radio"`), RadioGroup implements roving tabindex — only the currently selected Radio (or the first one if none is selected) carries `tabindex="0"`, and others have `tabindex="-1"`. Either way, the focus ring wraps the entire interactive area (indicator + label), not just the indicator. Focus visualization uses the universal dual-outline focus ring — see `flex-system:styling`.
+Radio does not manage its own focus within a group — focus management lives at the parent RadioGroup level. For native `<input type="radio">` siblings sharing a `name` attribute, the platform provides the single-tab-stop behavior; do not set `tabindex` on the inputs. For custom radios (non-native elements using `role="radio"`), RadioGroup implements roving tabindex — only the currently selected Radio (or the first one if none is selected) carries `tabindex="0"`, and others have `tabindex="-1"`. Either way, the focus ring wraps the entire interactive area (indicator + label), not just the indicator. Focus visualization uses the universal persistent dual-ring focus visual — see `flex-system:styling`.
 
 ## Pointer interaction
 
diff --git a/packages/agentic-components/src/components/radio/useRadioStyles.ts b/packages/agentic-components/src/components/radio/useRadioStyles.ts
index 7b76a6db165..ad7071373c6 100644
--- a/packages/agentic-components/src/components/radio/useRadioStyles.ts
+++ b/packages/agentic-components/src/components/radio/useRadioStyles.ts
@@ -1,9 +1,9 @@
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { createFocusVisualProps } from '../../primitives/focus-visual/focus-visual';
 
 import {
   radioStyles,
-  getRadioFocus,
   getRadioIndicatorBorder,
   getRadioIndicatorDotColorStyle,
   getRadioIndicatorDotLayout,
@@ -21,7 +21,8 @@ import type { RadioState } from './radio.types';
  * Applies styles and slot props to the Radio component state.
  */
 export function useRadioStyles_unstable(state: RadioState) {
-  const rootStyle: StyleProp<ViewStyle> = [radioStyles.root, getRadioRootLayout(state), getRadioFocus(state), state.userStyle];
+  const rootLayoutStyle = getRadioRootLayout(state);
+  const rootStyle: StyleProp<ViewStyle> = [radioStyles.root, rootLayoutStyle, state.userStyle];
   const indicatorStyle: StyleProp<ViewStyle> = [radioStyles.indicator, getRadioIndicatorLayout(state), getRadioIndicatorBorder(state)];
   const indicatorDotStyle: StyleProp<ViewStyle> = [
     radioStyles.dot,
@@ -37,6 +38,14 @@ 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,
+  });
   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 3d57f234a7d..4ad0a8c4bc8 100644
--- a/packages/agentic-components/src/components/switch/SPEC.md
+++ b/packages/agentic-components/src/components/switch/SPEC.md
@@ -69,12 +69,12 @@ Variant properties are ordered in the design tool: **Layout → Checked → Stat
 
 #### State
 
-| Value        | Description                                             | When to Use                      |
-| ------------ | ------------------------------------------------------- | -------------------------------- |
-| **Rest**     | Default idle appearance                                 | No user interaction              |
-| **Hover**    | Background, thumb, and stroke shift via OKLCH           | Pointer is over the switch       |
-| **Pressed**  | Stronger background, thumb, and stroke shift            | Active pointer down              |
-| **Focus**    | Dual-outline focus ring on the switch (excluding label) | Keyboard focus                   |
-| **Disabled** | Reduced-contrast track and thumb; non-interactive       | Setting is unavailable or locked |
+| Value        | Description                                                       | When to Use                      |
+| ------------ | ----------------------------------------------------------------- | -------------------------------- |
+| **Rest**     | Default idle appearance                                           | No user interaction              |
+| **Hover**    | Background, thumb, and stroke shift via OKLCH                     | Pointer is over the switch       |
+| **Pressed**  | Stronger background, thumb, and stroke shift                      | Active pointer down              |
+| **Focus**    | Persistent dual-ring focus visual on the switch (excluding label) | Keyboard focus                   |
+| **Disabled** | Reduced-contrast track and thumb; non-interactive                 | Setting is unavailable or locked |
 
 **Interaction model:** All three categories (background, foreground, stroke) participate in hover/pressed. The unchecked transparent background uses alpha shift; the checked heavy background uses inverse lightness shift.
diff --git a/packages/agentic-components/src/components/switch/renderSwitch.tsx b/packages/agentic-components/src/components/switch/renderSwitch.tsx
index 85c8eb7da32..e798c70a938 100644
--- a/packages/agentic-components/src/components/switch/renderSwitch.tsx
+++ b/packages/agentic-components/src/components/switch/renderSwitch.tsx
@@ -1,4 +1,5 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
+import { FocusVisual } from '../../primitives/focus-visual/focus-visual';
 import type { SwitchState } from './switch.types';
 
 /**
@@ -7,6 +8,7 @@ import type { SwitchState } from './switch.types';
 export function renderSwitch_unstable(state: SwitchState) {
   const root = (
     <state.root>
+      <FocusVisual {...state.focusVisualProps} />
       <state.track>
         <state.thumb />
       </state.track>
diff --git a/packages/agentic-components/src/components/switch/spec/interaction.md b/packages/agentic-components/src/components/switch/spec/interaction.md
index 8c00d0010e3..c22874ff73a 100644
--- a/packages/agentic-components/src/components/switch/spec/interaction.md
+++ b/packages/agentic-components/src/components/switch/spec/interaction.md
@@ -14,7 +14,7 @@ platform: react-native (Windows, macOS)
 ## Focus management
 
 - Focus ring appears on the full interactive surface (track + tappable padding) — the 36px hit-area box, not just the 20px pill. The focus ring communicates the focusable element boundary.
-- Focus ring uses the universal dual-outline pattern (see `flex-system:styling`).
+- Focus ring uses the universal persistent dual-ring pattern (see `flex-system:styling`).
 - Focus is not trapped — Tab moves to the next focusable element.
 
 ## Animation
diff --git a/packages/agentic-components/src/components/switch/switch.stories.tsx b/packages/agentic-components/src/components/switch/switch.stories.tsx
index 3f47243a745..7cb1ead12c5 100644
--- a/packages/agentic-components/src/components/switch/switch.stories.tsx
+++ b/packages/agentic-components/src/components/switch/switch.stories.tsx
@@ -46,6 +46,7 @@ const meta: Meta<typeof Switch> = {
     labelAfter: false,
     labelBefore: true,
     layout: 'horizontal',
+    testID: 'agentic-storybook-switch',
   },
   argTypes: {
     defaultChecked: { control: 'boolean' },
diff --git a/packages/agentic-components/src/components/switch/switch.styles.ts b/packages/agentic-components/src/components/switch/switch.styles.ts
index 0b0d87b719c..fa1b979cea3 100644
--- a/packages/agentic-components/src/components/switch/switch.styles.ts
+++ b/packages/agentic-components/src/components/switch/switch.styles.ts
@@ -124,26 +124,6 @@ export function getSwitchThumbBaseStyle(state: SwitchState): ViewStyle {
   return getThumbBaseStyle(state, ['base']);
 }
 
-const focusStateLevels = [['focused']] as const;
-
-const getFocusStyle = getThemedStateStyleFactory(
-  'Switch.focus',
-  ({ color, strokeWidth }: FlexTokens): StyleDefinition<ViewStyle, typeof focusStateLevels> => ({
-    focused: {
-      borderColor: color.strokeFocusInner,
-      outlineColor: color.strokeFocusOuter,
-      outlineOffset: strokeWidth.thin,
-      outlineStyle: 'solid',
-      outlineWidth: strokeWidth.thick,
-    },
-  }),
-  focusStateLevels,
-);
-
-export function getSwitchFocusStyle(state: SwitchState): ViewStyle | undefined {
-  return state.focused && !state.disabled ? getFocusStyle(state, ['focused']) : undefined;
-}
-
 const labelStateLevels = [['disabled']] as const;
 
 const getLabelStyle = getThemedStateStyleFactory(
diff --git a/packages/agentic-components/src/components/switch/switch.test.tsx b/packages/agentic-components/src/components/switch/switch.test.tsx
index 09bb0f30987..eca3f68c00f 100644
--- a/packages/agentic-components/src/components/switch/switch.test.tsx
+++ b/packages/agentic-components/src/components/switch/switch.test.tsx
@@ -19,10 +19,6 @@ function renderSwitch(props: ComponentProps<typeof Switch> = {}) {
   return render(<Switch {...props} />);
 }
 
-function getRootStyle(root: { props: { style?: unknown } }) {
-  return StyleSheet.flatten(root.props.style);
-}
-
 async function flushAnimationFrame() {
   await act(async () => {
     await new Promise((resolve) => setTimeout(resolve, 200));
@@ -122,19 +118,23 @@ describe('Switch', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
-  it('renders the dual-outline focus ring on the hit area', async () => {
+  it('renders the persistent dual-ring focus visual on the hit area', async () => {
     const tokens = useFlexTokens();
     const component = await renderSwitch({ label: 'Wi-Fi', labelAfter: false });
     const root = component.getByRole('switch', { name: 'Wi-Fi' });
 
     await fireEvent(root, 'focus', {});
 
-    expect(getRootStyle(root)).toMatchObject({
+    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-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: tokens.color.strokeFocusInner,
-      outlineColor: tokens.color.strokeFocusOuter,
-      outlineOffset: tokens.strokeWidth.thin,
-      outlineStyle: 'solid',
-      outlineWidth: tokens.strokeWidth.thick,
+      borderWidth: tokens.strokeWidth.thin,
     });
   });
 
diff --git a/packages/agentic-components/src/components/switch/switch.types.ts b/packages/agentic-components/src/components/switch/switch.types.ts
index 4fffc08ddca..894f00396a3 100644
--- a/packages/agentic-components/src/components/switch/switch.types.ts
+++ b/packages/agentic-components/src/components/switch/switch.types.ts
@@ -9,6 +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';
 
 type AnimatedViewComponent = typeof import('react-native').Animated.View;
 
@@ -48,6 +49,7 @@ export type SwitchState = ComponentState<SwitchStateSlots> &
   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/useSwitchStyles.ts b/packages/agentic-components/src/components/switch/useSwitchStyles.ts
index cf63867258d..c1fb0c07302 100644
--- a/packages/agentic-components/src/components/switch/useSwitchStyles.ts
+++ b/packages/agentic-components/src/components/switch/useSwitchStyles.ts
@@ -1,9 +1,9 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
+import { createFocusVisualProps } from '../../primitives/focus-visual/focus-visual';
 
 import {
-  getSwitchFocusStyle,
   getSwitchLabelStyle,
   getSwitchLayoutStyle,
   getSwitchRootBaseStyle,
@@ -26,7 +26,8 @@ export function useSwitchStyles_unstable(state: SwitchState) {
   const thumbCheckedColor = getSwitchThumbColorStyle(state, true);
   const thumbTranslateDistance = getSwitchThumbTranslateDistance(state);
 
-  const rootStyle: StyleProp<ViewStyle> = [switchStyles.root, getSwitchRootBaseStyle(state), getSwitchFocusStyle(state), state.userStyle];
+  const rootBaseStyle = getSwitchRootBaseStyle(state);
+  const rootStyle: StyleProp<ViewStyle> = [switchStyles.root, rootBaseStyle, state.userStyle];
   const layoutStyle: StyleProp<ViewStyle> = [switchStyles.container, getSwitchLayoutStyle(state.layout)];
   const trackStyle: StyleProp<ViewStyle> = [
     switchStyles.track,
@@ -62,6 +63,14 @@ 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,
+  });
   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 5c9aee8de84..9596befdbbd 100644
--- a/packages/agentic-components/src/components/tab/SPEC.md
+++ b/packages/agentic-components/src/components/tab/SPEC.md
@@ -31,7 +31,7 @@ Answer design questions directly — lead with rationale, then tokens. Tab has a
 1. **Container** — auto-layout root frame; owns padding, border radius, background fill. No stroke.
 2. **Icon** — optional Fluent Iconography instance (Regular theme at rest; Filled theme when Selected=True). Hidden by default.
 3. **Label** — text node bound to the `Tab string` component property. Uses the font-weight swap pattern: a ghost Semibold node reserves layout width, a visible Regular or Semibold node renders on top.
-4. **Focus ring** — dual-outline overlay controlled by the system focus ring pattern. Absolutely positioned over the container.
+4. **Focus ring** — persistent dual-ring visual controlled by focus state. Absolutely positioned over the container.
 
 | Slot  | Required                  | Default |
 | ----- | ------------------------- | ------- |
diff --git a/packages/agentic-components/src/components/tab/renderTab.tsx b/packages/agentic-components/src/components/tab/renderTab.tsx
index fa4f0c099d6..5aebb42714f 100644
--- a/packages/agentic-components/src/components/tab/renderTab.tsx
+++ b/packages/agentic-components/src/components/tab/renderTab.tsx
@@ -1,5 +1,6 @@
 /** @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';
 
 /**
@@ -13,6 +14,7 @@ export function renderTab_unstable(state: TabState) {
 
   return (
     <state.root>
+      <FocusVisual {...state.focusVisualProps} />
       {ActiveIcon && <ActiveIcon />}
       {contentElement}
     </state.root>
diff --git a/packages/agentic-components/src/components/tab/tab.stories.tsx b/packages/agentic-components/src/components/tab/tab.stories.tsx
index c67e5d62c4f..d37614f9f5c 100644
--- a/packages/agentic-components/src/components/tab/tab.stories.tsx
+++ b/packages/agentic-components/src/components/tab/tab.stories.tsx
@@ -109,8 +109,22 @@ export const IconOnly: Story = {
 export const Selected: Story = {
   render: () => (
     <StoryGroup label="Selected">
-      <Tab controls="files-panel" content="Files" icon={regularStarIcon} selected={false} selectedIcon={filledStarIcon} />
-      <Tab controls="files-panel" content="Files" icon={regularStarIcon} selected selectedIcon={filledStarIcon} />
+      <Tab
+        controls="files-panel"
+        content="Files"
+        icon={regularStarIcon}
+        selected={false}
+        selectedIcon={filledStarIcon}
+        testID="agentic-storybook-tab-unselected"
+      />
+      <Tab
+        controls="files-panel"
+        content="Files"
+        icon={regularStarIcon}
+        selected
+        selectedIcon={filledStarIcon}
+        testID="agentic-storybook-tab-selected"
+      />
     </StoryGroup>
   ),
   parameters: {
diff --git a/packages/agentic-components/src/components/tab/tab.styles.ts b/packages/agentic-components/src/components/tab/tab.styles.ts
index af0ca853b86..52c13b1c529 100644
--- a/packages/agentic-components/src/components/tab/tab.styles.ts
+++ b/packages/agentic-components/src/components/tab/tab.styles.ts
@@ -160,28 +160,6 @@ export function getTabContentStyle(state: TabState, selected = state.selected):
   return getThemedContentStyle(state, source);
 }
 
-const focusStyleStateLevels = [['focused']] as const;
-
-const getThemedFocusStyle = getThemedStateStyleFactory(
-  'Tab.focus',
-  ({ color, strokeWidth }: FlexTokens): StyleDefinition<ViewStyle, typeof focusStyleStateLevels> => ({
-    focused: {
-      borderColor: color.strokeFocusInner,
-      outlineColor: color.strokeFocusOuter,
-      outlineOffset: strokeWidth.thin,
-      outlineStyle: 'solid',
-      outlineWidth: strokeWidth.thick,
-    },
-  }),
-  focusStyleStateLevels,
-);
-
-const focusedState = ['focused'] as const;
-
-export function getTabFocusStyle(state: TabState): ViewStyle | undefined {
-  return state.focused && !state.disabled ? getThemedFocusStyle(state, focusedState) : undefined;
-}
-
 export function getTabIconSize(): number {
   return 20;
 }
diff --git a/packages/agentic-components/src/components/tab/tab.test.tsx b/packages/agentic-components/src/components/tab/tab.test.tsx
index c76faaaaf7e..45d1dbe273a 100644
--- a/packages/agentic-components/src/components/tab/tab.test.tsx
+++ b/packages/agentic-components/src/components/tab/tab.test.tsx
@@ -140,17 +140,21 @@ describe('Tab', () => {
     expect(component.getByTestId('filled-icon').props.testID).toBe('filled-icon');
   });
 
-  it('renders a dual-token focus outline', async () => {
+  it('renders a persistent dual-ring focus visual', async () => {
     const component = await renderTab({ controls: 'files-panel', content: 'Files' });
     const root = getRoot(component);
     await fireEvent(root, 'focus', {});
 
-    expect(getRootStyle(component)).toMatchObject({
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
+      borderColor: useFlexTokens().color.strokeFocusOuter,
+      borderWidth: useFlexTokens().strokeWidth.thick,
+    });
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
+      'opacity',
+    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
       borderColor: useFlexTokens().color.strokeFocusInner,
-      outlineColor: useFlexTokens().color.strokeFocusOuter,
-      outlineOffset: useFlexTokens().strokeWidth.thin,
-      outlineStyle: 'solid',
-      outlineWidth: useFlexTokens().strokeWidth.thick,
+      borderWidth: useFlexTokens().strokeWidth.thin,
     });
   });
 
diff --git a/packages/agentic-components/src/components/tab/tab.types.ts b/packages/agentic-components/src/components/tab/tab.types.ts
index 17ec76a653c..5a5ae66eaee 100644
--- a/packages/agentic-components/src/components/tab/tab.types.ts
+++ b/packages/agentic-components/src/components/tab/tab.types.ts
@@ -11,6 +11,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 { Icon } from '../../primitives/icon/icon';
 
 export type TabLayout = 'iconAndText' | 'iconOnly';
@@ -65,6 +66,7 @@ export type TabState = ComponentState<TabStateSlots> &
   Required<TabStateProps> &
   ThemeState &
   PressableState & {
+    focusVisualProps?: FocusVisualProps;
     iconOnly: boolean;
     userStyle?: StyleProp<ViewStyle>;
   };
diff --git a/packages/agentic-components/src/components/tab/useTabStyles.ts b/packages/agentic-components/src/components/tab/useTabStyles.ts
index 3774d76d253..def9c0fe10d 100644
--- a/packages/agentic-components/src/components/tab/useTabStyles.ts
+++ b/packages/agentic-components/src/components/tab/useTabStyles.ts
@@ -1,8 +1,9 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
+import { createFocusVisualProps } from '../../primitives/focus-visual/focus-visual';
 
-import { tabStyles, getTabColorStyles, getTabContentStyle, getTabFocusStyle, getTabIconSize, getTabRootStyle } from './tab.styles';
+import { tabStyles, getTabColorStyles, getTabContentStyle, getTabIconSize, getTabRootStyle } from './tab.styles';
 import type { TabState } from './tab.types';
 
 /**
@@ -10,17 +11,20 @@ import type { TabState } from './tab.types';
  */
 export function useTabStyles_unstable(state: TabState) {
   const colors = getTabColorStyles(state);
-  const rootStyle: StyleProp<ViewStyle> = [
-    tabStyles.root,
-    getTabRootStyle(state),
-    colors.background,
-    getTabFocusStyle(state),
-    state.userStyle,
-  ];
+  const rootLayoutStyle = getTabRootStyle(state);
+  const rootStyle: StyleProp<ViewStyle> = [tabStyles.root, rootLayoutStyle, colors.background, state.userStyle];
   const contentStyle: StyleProp<TextStyle> = [tabStyles.content, getTabContentStyle(state), colors.foreground];
   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,
+  });
   attachSlotProps(state.root, { style: rootStyle });
   if (state.icon) {
     attachSlotProps(state.icon, {
diff --git a/packages/agentic-components/src/components/tag/renderTag.tsx b/packages/agentic-components/src/components/tag/renderTag.tsx
index d91571f7006..7b80c860dcc 100644
--- a/packages/agentic-components/src/components/tag/renderTag.tsx
+++ b/packages/agentic-components/src/components/tag/renderTag.tsx
@@ -1,9 +1,11 @@
 /** @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.leadingIcon && <state.leadingIcon />}
       {state.content && <state.content />}
       {state.dismissIcon && state.dismiss && <state.dismissIcon />}
diff --git a/packages/agentic-components/src/components/tag/tag.stories.tsx b/packages/agentic-components/src/components/tag/tag.stories.tsx
index 60d6d6397ca..db18865563c 100644
--- a/packages/agentic-components/src/components/tag/tag.stories.tsx
+++ b/packages/agentic-components/src/components/tag/tag.stories.tsx
@@ -52,6 +52,7 @@ const meta: Meta<typeof Tag> = {
     layout: 'iconAndText',
     shape: 'rounded',
     size: 'medium',
+    testID: 'agentic-storybook-tag',
   },
   argTypes: {
     appearance: { control: 'select', options: appearances.map(({ value }) => value) },
diff --git a/packages/agentic-components/src/components/tag/tag.styles.ts b/packages/agentic-components/src/components/tag/tag.styles.ts
index 6ab4e2667e4..173a801ddac 100644
--- a/packages/agentic-components/src/components/tag/tag.styles.ts
+++ b/packages/agentic-components/src/components/tag/tag.styles.ts
@@ -218,28 +218,6 @@ export function getTagContentStyle(state: TagState): TextStyle {
   return getThemedContentStyle(state, [state.size]);
 }
 
-const focusStateLevels = [['focused']] as const;
-
-const getThemedFocusStyle = getThemedStateStyleFactory(
-  'Tag.focus',
-  ({ color, strokeWidth }: FlexTokens): StyleDefinition<ViewStyle, typeof focusStateLevels> => ({
-    focused: {
-      borderColor: color.strokeFocusInner,
-      outlineColor: color.strokeFocusOuter,
-      outlineOffset: strokeWidth.thin,
-      outlineStyle: 'solid',
-      outlineWidth: strokeWidth.thick,
-    },
-  }),
-  focusStateLevels,
-);
-
-const focusedState = ['focused'] as const;
-
-export function getTagFocusStyle(state: TagState): ViewStyle | undefined {
-  return state.focused && !state.disabled ? getThemedFocusStyle(state, focusedState) : undefined;
-}
-
 const iconSizes: Record<TagSize, { dismiss: number; leading: number }> = {
   small: {
     dismiss: 12,
diff --git a/packages/agentic-components/src/components/tag/tag.test.tsx b/packages/agentic-components/src/components/tag/tag.test.tsx
index b103a164463..50c20119100 100644
--- a/packages/agentic-components/src/components/tag/tag.test.tsx
+++ b/packages/agentic-components/src/components/tag/tag.test.tsx
@@ -34,7 +34,7 @@ describe('Tag', () => {
       minHeight: 24,
       minWidth: 24,
     });
-    expect(getRoot(component).children).toHaveLength(2);
+    expect(getRoot(component).children).toHaveLength(3);
   });
 
   it('forwards press and interaction handlers while updating background state', async () => {
@@ -76,7 +76,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(3);
+    expect(getRoot(component).children).toHaveLength(4);
   });
 
   it('renders icon-only layout with a required accessible label', async () => {
@@ -135,6 +135,25 @@ describe('Tag', () => {
     expect(StyleSheet.flatten(text.props.style).color).toBe(tokens.color.foregroundNeutralOnloud);
   });
 
+  it('renders a persistent dual-ring focus visual', async () => {
+    const component = await renderTag({ content: 'Focused' });
+    const root = getRoot(component);
+
+    await fireEvent(root, 'focus', {});
+
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).toMatchObject({
+      borderColor: useFlexTokens().color.strokeFocusOuter,
+      borderWidth: useFlexTokens().strokeWidth.thick,
+    });
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual', { includeHiddenElements: true }).props.style)).not.toHaveProperty(
+      'opacity',
+    );
+    expect(StyleSheet.flatten(component.getByTestId('focus-visual-inner', { includeHiddenElements: true }).props.style)).toMatchObject({
+      borderColor: useFlexTokens().color.strokeFocusInner,
+      borderWidth: useFlexTokens().strokeWidth.thin,
+    });
+  });
+
   it.each([
     ['primary', '#185abd'],
     ['secondary', '#fafafa'],
@@ -181,6 +200,6 @@ describe('Tag', () => {
 
     expect(component.queryByTestId('dismiss')).toBeNull();
     expect(getRootStyle(component).backgroundColor).toBe('hotpink');
-    expect(getRoot(component).children).toHaveLength(2);
+    expect(getRoot(component).children).toHaveLength(3);
   });
 });
diff --git a/packages/agentic-components/src/components/tag/tag.types.ts b/packages/agentic-components/src/components/tag/tag.types.ts
index 22d9495d85c..a516e540a84 100644
--- a/packages/agentic-components/src/components/tag/tag.types.ts
+++ b/packages/agentic-components/src/components/tag/tag.types.ts
@@ -9,6 +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 { Icon } from '../../primitives/icon/icon';
 
 export type TagSlots = {
@@ -40,6 +41,7 @@ export type TagState = ComponentState<TagSlots> &
   Required<TagStateProps> &
   ThemeState &
   PressableState & {
+    focusVisualProps?: FocusVisualProps;
     hasContent: boolean;
     hasLeadingIcon: boolean;
     iconOnly: boolean;
diff --git a/packages/agentic-components/src/components/tag/useTagStyles.ts b/packages/agentic-components/src/components/tag/useTagStyles.ts
index 62360517706..dba20942e4e 100644
--- a/packages/agentic-components/src/components/tag/useTagStyles.ts
+++ b/packages/agentic-components/src/components/tag/useTagStyles.ts
@@ -1,25 +1,27 @@
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { attachSlotProps } from '@fluentui-react-native/framework-base';
+import { createFocusVisualProps } from '../../primitives/focus-visual/focus-visual';
 
-import {
-  tagStyles,
-  getTagBackgroundStyle,
-  getTagContentStyle,
-  getTagFocusStyle,
-  getTagForegroundStyle,
-  getTagIconSize,
-  getTagRootStyle,
-} from './tag.styles';
+import { tagStyles, getTagBackgroundStyle, getTagContentStyle, getTagForegroundStyle, getTagIconSize, getTagRootStyle } from './tag.styles';
 import type { TagState } from './tag.types';
 
 export function useTagStyles_unstable(state: TagState) {
   const { dismiss, size, userStyle } = state;
   const background = getTagBackgroundStyle(state);
   const foreground = getTagForegroundStyle(state);
-  const rootStyle: StyleProp<ViewStyle> = [tagStyles.root, getTagRootStyle(state), background, getTagFocusStyle(state), userStyle];
+  const rootLayoutStyle = getTagRootStyle(state);
+  const rootStyle: StyleProp<ViewStyle> = [tagStyles.root, rootLayoutStyle, background, userStyle];
   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,
+  });
   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 3f96bff4b2a..530065015af 100644
--- a/packages/agentic-components/src/index.test.ts
+++ b/packages/agentic-components/src/index.test.ts
@@ -68,6 +68,8 @@ describe('component composition exports', () => {
   it('exports shared primitives', () => {
     expect(components.CheckboxIndicator).toEqual(expect.any(Function));
     expect(components.CompoundItemLayout).toEqual(expect.any(Function));
+    expect(components.FocusVisual).toEqual(expect.any(Function));
+    expect(components.createFocusVisualProps).toEqual(expect.any(Function));
     expect(components.LayoutStableText).toEqual(expect.any(Function));
   });
 });
diff --git a/packages/agentic-components/src/index.ts b/packages/agentic-components/src/index.ts
index 021bd803462..b8aafdd0e48 100644
--- a/packages/agentic-components/src/index.ts
+++ b/packages/agentic-components/src/index.ts
@@ -163,5 +163,13 @@ export type { CheckboxIndicatorProps, CheckboxIndicatorStatus } from './primitiv
 export { CompoundItemLayout } from './primitives/compound-item-layout/compound-item-layout';
 export type { CompoundItemLayoutProps } from './primitives/compound-item-layout/compound-item-layout.types';
 
+export { FocusVisual, createFocusVisualProps } from './primitives/focus-visual/focus-visual';
+export type {
+  FocusVisualOptions,
+  FocusVisualProps,
+  FocusVisualRingProps,
+  FocusVisualStyles,
+} from './primitives/focus-visual/focus-visual.types';
+
 export { LayoutStableText } from './primitives/layout-stable-text/layout-stable-text';
 export type { LayoutStableTextProps } from './primitives/layout-stable-text/layout-stable-text.types';
diff --git a/packages/agentic-components/src/primitives/AGENTS.md b/packages/agentic-components/src/primitives/AGENTS.md
index e6d82944ecb..a12c67cf470 100644
--- a/packages/agentic-components/src/primitives/AGENTS.md
+++ b/packages/agentic-components/src/primitives/AGENTS.md
@@ -13,6 +13,8 @@ the canonical implementation.
 - Keep alternative source or renderer props mutually exclusive.
 - Add compile-time `SlotProp` coverage and runtime coverage for every renderer branch.
 - Demonstrate the primitive in Storybook without adding component-level styling.
+- `FocusVisual` mounts configured ring Views eagerly, owns accessibility and hit testing, and changes only opacity when
+  focus visibility changes. Keep token selection and component-specific ring geometry in the consuming component.
 
 ## Focused references
 
diff --git a/packages/agentic-components/src/primitives/focus-visual/focus-visual.stories.tsx b/packages/agentic-components/src/primitives/focus-visual/focus-visual.stories.tsx
new file mode 100644
index 00000000000..1b7548e61d0
--- /dev/null
+++ b/packages/agentic-components/src/primitives/focus-visual/focus-visual.stories.tsx
@@ -0,0 +1,88 @@
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { Meta, StoryObj } from '@storybook/react-native';
+
+import { FocusVisual, createFocusVisualProps } from './focus-visual';
+
+const meta: Meta<typeof FocusVisual> = {
+  title: 'Primitives/Focus Visual',
+  component: FocusVisual,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'FocusVisual is an unstyled structural primitive that keeps one or two decorative rings mounted and changes only opacity when visibility changes.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FocusVisual>;
+
+const FocusTarget = ({ dual, testID, visible = true }: { dual?: boolean; testID?: string; visible?: boolean }) => (
+  <View style={styles.target}>
+    <Text>Focus target</Text>
+    <FocusVisual
+      {...createFocusVisualProps({
+        borderRadius: 6,
+        innerColor: dual ? '#ffffff' : undefined,
+        innerWidth: dual ? 1 : undefined,
+        outerColor: '#000000',
+        outerWidth: 2,
+        visible,
+      })}
+      testID={testID}
+    />
+  </View>
+);
+
+export const Default: Story = {
+  render: () => <FocusTarget testID="agentic-storybook-focus-visual" />,
+};
+
+export const DualRing: Story = {
+  render: () => <FocusTarget dual />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Supplying inner ring values creates a persistent dual-ring visual.',
+      },
+    },
+  },
+};
+
+export const Visibility: Story = {
+  render: () => (
+    <View style={styles.row}>
+      <FocusTarget />
+      <FocusTarget visible={false} />
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Hidden rings stay mounted with zero opacity so focus changes never create native border visuals.',
+      },
+    },
+  },
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    gap: 16,
+  },
+  target: {
+    alignItems: 'center',
+    backgroundColor: '#fafafa',
+    borderRadius: 6,
+    justifyContent: 'center',
+    minHeight: 40,
+    minWidth: 120,
+    padding: 8,
+    position: 'relative',
+  },
+});
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
new file mode 100644
index 00000000000..e310e676cb5
--- /dev/null
+++ b/packages/agentic-components/src/primitives/focus-visual/focus-visual.test.tsx
@@ -0,0 +1,64 @@
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import { StyleSheet } from 'react-native';
+
+import { render } from '@testing-library/react-native';
+
+import { FocusVisual, createFocusVisualProps } from './focus-visual';
+
+describe('FocusVisual', () => {
+  it('keeps both rings mounted while visibility changes', async () => {
+    const props = createFocusVisualProps({
+      borderRadius: 4,
+      innerColor: 'white',
+      innerWidth: 1,
+      outerColor: 'black',
+      outerWidth: 2,
+      visible: false,
+    });
+    const component = await render(<FocusVisual {...props} inner={{ ...props.inner, testID: 'inner-ring' }} testID="outer-ring" />);
+    const outerRing = component.getByTestId('outer-ring', { includeHiddenElements: true });
+    const innerRing = component.getByTestId('inner-ring', { includeHiddenElements: true });
+
+    expect(outerRing.props).toMatchObject({
+      accessibilityElementsHidden: true,
+      accessible: false,
+      collapsable: false,
+      focusable: false,
+      importantForAccessibility: 'no-hide-descendants',
+    });
+    expect(StyleSheet.flatten(outerRing.props.style)).toMatchObject({
+      borderColor: 'black',
+      borderRadius: 4,
+      borderWidth: 2,
+      opacity: 0,
+      position: 'absolute',
+    });
+    expect(StyleSheet.flatten(innerRing.props.style)).toMatchObject({
+      borderColor: 'white',
+      borderRadius: 4,
+      borderWidth: 1,
+      position: 'absolute',
+    });
+
+    await component.rerender(<FocusVisual {...props} inner={{ ...props.inner, testID: 'inner-ring' }} testID="outer-ring" visible />);
+
+    expect(component.getByTestId('inner-ring', { includeHiddenElements: true })).toBeOnTheScreen();
+    expect(StyleSheet.flatten(component.getByTestId('outer-ring', { includeHiddenElements: true }).props.style).opacity).toBeUndefined();
+  });
+
+  it('renders a single ring when no inner ring is requested', async () => {
+    const component = await render(
+      <FocusVisual
+        {...createFocusVisualProps({
+          outerColor: 'black',
+          outerWidth: 2,
+          visible: true,
+        })}
+        testID="outer-ring"
+      />,
+    );
+
+    expect(component.getByTestId('outer-ring', { includeHiddenElements: true })).toBeOnTheScreen();
+    expect(component.queryByTestId('inner-ring')).toBeNull();
+  });
+});
diff --git a/packages/agentic-components/src/primitives/focus-visual/focus-visual.tsx b/packages/agentic-components/src/primitives/focus-visual/focus-visual.tsx
new file mode 100644
index 00000000000..81102fe069e
--- /dev/null
+++ b/packages/agentic-components/src/primitives/focus-visual/focus-visual.tsx
@@ -0,0 +1,77 @@
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import { StyleSheet, View } from 'react-native';
+import type { ViewStyle } from 'react-native';
+
+import { directComponent } from '@fluentui-react-native/framework-base';
+
+import { hiddenFromAccessibilityProps } from '../../common/accessibility';
+import type { FocusVisualOptions, FocusVisualProps } from './focus-visual.types';
+
+export function createFocusVisualProps({
+  borderRadius,
+  innerColor,
+  innerWidth,
+  outerColor,
+  outerWidth,
+  visible,
+}: FocusVisualOptions): FocusVisualProps {
+  const inner =
+    innerColor !== undefined && innerWidth !== undefined
+      ? {
+          style: {
+            borderColor: innerColor,
+            borderRadius,
+            borderStyle: 'solid',
+            borderWidth: innerWidth,
+          } satisfies ViewStyle,
+        }
+      : undefined;
+
+  return {
+    inner,
+    style: {
+      borderColor: outerColor,
+      borderRadius,
+      borderStyle: 'solid',
+      borderWidth: outerWidth,
+    },
+    visible,
+  };
+}
+
+export const FocusVisual = directComponent<FocusVisualProps>(({ inner, style, testID = 'focus-visual', visible = false, ...rest }) => {
+  return (
+    <View
+      {...rest}
+      {...hiddenFromAccessibilityProps}
+      collapsable={false}
+      focusable={false}
+      pointerEvents="none"
+      style={[styles.ring, style, !visible && styles.hidden]}
+      testID={testID}
+    >
+      {inner ? (
+        <View
+          {...inner}
+          {...hiddenFromAccessibilityProps}
+          collapsable={false}
+          focusable={false}
+          pointerEvents="none"
+          style={[styles.ring, inner.style]}
+          testID={inner.testID ?? `${testID}-inner`}
+        />
+      ) : null}
+    </View>
+  );
+});
+
+FocusVisual.displayName = 'FocusVisual';
+
+const styles = StyleSheet.create({
+  hidden: {
+    opacity: 0,
+  },
+  ring: {
+    ...StyleSheet.absoluteFillObject,
+  },
+});
diff --git a/packages/agentic-components/src/primitives/focus-visual/focus-visual.types.test.ts b/packages/agentic-components/src/primitives/focus-visual/focus-visual.types.test.ts
new file mode 100644
index 00000000000..8b2e390addc
--- /dev/null
+++ b/packages/agentic-components/src/primitives/focus-visual/focus-visual.types.test.ts
@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { SlotProp } from '@fluentui-react-native/framework-base';
+
+import type { FocusVisual } from './focus-visual';
+
+const SingleRingFocusVisual: SlotProp<typeof FocusVisual> = {
+  style: { borderColor: 'black', borderWidth: 2 },
+  visible: true,
+};
+
+const DualRingFocusVisual: SlotProp<typeof FocusVisual> = {
+  inner: { style: { borderColor: 'white', borderWidth: 1 } },
+  style: { borderColor: 'black', borderWidth: 2 },
+  visible: false,
+};
+
+// @ts-expect-error FocusVisual owns its children.
+const FocusVisualWithChildren: SlotProp<typeof FocusVisual> = { children: 'ring' };
+
+describe('FocusVisual slot types', () => {
+  it('accepts single and dual ring props', () => {
+    expect(SingleRingFocusVisual).toBeDefined();
+    expect(DualRingFocusVisual).toBeDefined();
+  });
+});
diff --git a/packages/agentic-components/src/primitives/focus-visual/focus-visual.types.ts b/packages/agentic-components/src/primitives/focus-visual/focus-visual.types.ts
new file mode 100644
index 00000000000..346d7842df6
--- /dev/null
+++ b/packages/agentic-components/src/primitives/focus-visual/focus-visual.types.ts
@@ -0,0 +1,37 @@
+import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+type FocusVisualOwnedProps =
+  | 'accessibilityElementsHidden'
+  | 'accessible'
+  | 'children'
+  | 'collapsable'
+  | 'focusable'
+  | 'importantForAccessibility'
+  | 'pointerEvents';
+
+export type FocusVisualRingProps = Omit<ViewProps, FocusVisualOwnedProps>;
+
+export type FocusVisualProps = FocusVisualRingProps & {
+  /**
+   * Optional inner ring. Supplying it creates a dual-ring focus visual.
+   */
+  inner?: FocusVisualRingProps | null;
+  /**
+   * Whether the mounted focus visual is visible.
+   */
+  visible?: boolean;
+};
+
+export type FocusVisualOptions = {
+  borderRadius?: ViewStyle['borderRadius'];
+  innerColor?: ColorValue;
+  innerWidth?: ViewStyle['borderWidth'];
+  outerColor: ColorValue;
+  outerWidth: ViewStyle['borderWidth'];
+  visible: boolean;
+};
+
+export type FocusVisualStyles = {
+  inner?: StyleProp<ViewStyle>;
+  outer: StyleProp<ViewStyle>;
+};