From 3adb9212d44850752a9e6799bbfa277039a4d507 Mon Sep 17 00:00:00 2001
From: Srividya Ramaswamy <sriramas@microsoft.com>
Date: Mon, 26 Oct 2026 18:09:32 -0700
Subject: [PATCH 1/6] test(card): cover SPEC anatomy, overlay ownership and
 native structure

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4b66f3ef-85ac-4405-bd35-dcc167a077b1
---
 .changeset/ready-taxis-start.md               |  5 ++
 .../src/components/card/card.stories.tsx      | 50 +++++++++++++++--
 .../src/components/card/card.test.tsx         | 56 +++++++++++++++++++
 .../agentic/components/tsconfig.stories.json  |  1 +
 4 files changed, 107 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/ready-taxis-start.md

diff --git a/.changeset/ready-taxis-start.md b/.changeset/ready-taxis-start.md
new file mode 100644
index 0000000000..064435dc68
--- /dev/null
+++ b/.changeset/ready-taxis-start.md
@@ -0,0 +1,5 @@
+---
+
+---
+
+
diff --git a/packages/agentic/components/src/components/card/card.stories.tsx b/packages/agentic/components/src/components/card/card.stories.tsx
index b8ddb768b9..186f333672 100644
--- a/packages/agentic/components/src/components/card/card.stories.tsx
+++ b/packages/agentic/components/src/components/card/card.stories.tsx
@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import type { Meta, StoryObj } from '@storybook/react-native';
+import type { WdioStory } from '@fluentui-react-native/storybook-desktop/testing';
 
 import { Button } from '../button/button';
 import { Card } from './card';
@@ -146,10 +147,49 @@ const meta: Meta<typeof Card> = {
 
 export default meta;
 
-type Story = StoryObj<typeof Card>;
+type Story = WdioStory<StoryObj<typeof Card>>;
 
 export const Default: Story = {};
 
+export const NativeStructure: Story = {
+  render: () => (
+    <Card
+      accessibilityLabel="Unavailable report"
+      disabled
+      selected
+      layout="structured"
+      testID="card-spec-root"
+      header={{ accessible: true, accessibilityLabel: 'Report heading', testID: 'card-spec-header', children: <Text>Report</Text> }}
+      content={{ accessible: true, accessibilityLabel: 'Report summary', testID: 'card-spec-content', children: <Text>Summary</Text> }}
+      content02={{ accessible: true, accessibilityLabel: 'Report details', testID: 'card-spec-details', children: <Text>Details</Text> }}
+      footer={{ children: <Button content="Help" testID="card-spec-help" /> }}
+    />
+  ),
+  wdio: {
+    'CRD-002 renders structured sections in reading order': async ({ browser, expect }) => {
+      const header = await browser.$('~card-spec-header');
+      const content = await browser.$('~card-spec-content');
+      const details = await browser.$('~card-spec-details');
+      const help = await browser.$('~card-spec-help');
+      const headerRect = await browser.getElementRect(await header.elementId);
+      const contentRect = await browser.getElementRect(await content.elementId);
+      const detailsRect = await browser.getElementRect(await details.elementId);
+      const helpRect = await browser.getElementRect(await help.elementId);
+      expect(headerRect.height).toBeGreaterThan(0);
+      expect(contentRect.height).toBeGreaterThan(0);
+      expect(detailsRect.height).toBeGreaterThan(0);
+      expect(contentRect.y).toBeGreaterThanOrEqual(headerRect.y + headerRect.height);
+      expect(detailsRect.y).toBeGreaterThanOrEqual(contentRect.y + contentRect.height);
+      expect(helpRect.y).toBeGreaterThanOrEqual(detailsRect.y + detailsRect.height);
+    },
+    'CRD-005 keeps a nested action enabled inside a disabled selectable surface': async ({ browser, expect }) => {
+      const help = await browser.$('~card-spec-help');
+      expect(await help.getTagName()).toBe('button');
+      await expect(help).toBeEnabled();
+    },
+  },
+};
+
 export const Overview: Story = {
   render: () => (
     <View style={styles.story}>
@@ -220,7 +260,7 @@ export const Interactive: Story = {
         ),
       }}
       layout="structured"
-      onPress={() => undefined}
+      onPress={(): void => undefined}
       selected={false}
     />
   ),
@@ -234,7 +274,7 @@ export const Selected: Story = {
         children: <Text style={styles.body}>Quarterly summary with selected state.</Text>,
       }}
       layout="structured"
-      onPress={() => undefined}
+      onPress={(): void => undefined}
       selected
       header={{
         children: (
@@ -292,7 +332,7 @@ export const Disabled: Story = {
         children: <Text style={styles.body}>This card is unavailable.</Text>,
       }}
       layout="structured"
-      onPress={() => undefined}
+      onPress={(): void => undefined}
       disabled
       header={{
         children: (
@@ -331,7 +371,7 @@ export const Horizontal: Story = {
       footer={{ children: <Button content="Open" /> }}
       header={{ children: <Text style={styles.title}>Q3 report</Text> }}
       layout="structured"
-      onPress={() => undefined}
+      onPress={(): void => undefined}
       size="large"
     />
   ),
diff --git a/packages/agentic/components/src/components/card/card.test.tsx b/packages/agentic/components/src/components/card/card.test.tsx
index 5aede28ae6..712c661cf4 100644
--- a/packages/agentic/components/src/components/card/card.test.tsx
+++ b/packages/agentic/components/src/components/card/card.test.tsx
@@ -25,6 +25,62 @@ function getRootStyle(component: RenderResult): ViewStyle {
 }
 
 describe('Card', () => {
+  it.each([
+    [undefined, false],
+    [false, true],
+    [true, true],
+  ] as const)('CRD-001 derives overlay presence from selected=%s without requiring onPress', async (selected, interactive) => {
+    const component = await renderCard({ selected, testID: 'card-root', accessibilityLabel: 'Report' });
+    expect(getRoot(component).props.accessible).toBe(false);
+    if (interactive) {
+      expect(component.getByRole('button').props.accessibilityState).toEqual({ disabled: false, selected });
+    } else {
+      expect(component.queryByRole('button')).toBeNull();
+      expect(getRoot(component).props.focusable).toBe(false);
+    }
+  });
+
+  it.each([
+    ['default', ['content']],
+    ['nested', ['content', 'content02']],
+    ['structured', ['header', 'content', 'content02', 'footer']],
+  ] as const)('CRD-002 renders only the %s layout slots in order after the overlay', async (layout, expected) => {
+    const component = await renderCard({
+      accessibilityLabel: 'Report',
+      layout,
+      selected: false,
+      testID: 'card-root',
+      header: { testID: 'header' },
+      content: { testID: 'content' },
+      content02: { testID: 'content02' },
+      footer: { testID: 'footer' },
+    });
+    const children = getRoot(component).children as { props: { testID?: string; accessibilityRole?: string } }[];
+    expect(children[0].props.accessibilityRole).toBe('button');
+    expect(children.slice(1).map((child) => child.props.testID)).toEqual(expected);
+  });
+
+  it('CRD-004 CRD-005 disables the overlay without disabling a nested action', async () => {
+    const onPress = jest.fn();
+    const onNestedPress = jest.fn();
+    const component = await renderCard({
+      accessibilityLabel: 'Unavailable report',
+      disabled: true,
+      selected: true,
+      layout: 'structured',
+      onPress,
+      footer: { children: <Button content="Help" onPress={onNestedPress} /> },
+    });
+    const overlay = component.getByRole('button', { name: 'Unavailable report' });
+    expect(overlay).toBeDisabled();
+    expect(overlay.props.focusable).toBe(false);
+    expect(overlay.props.accessibilityState.selected).toBe(true);
+    await fireEvent.press(overlay);
+    await fireEvent.press(component.getByRole('button', { name: 'Help' }));
+    expect(onPress).not.toHaveBeenCalled();
+    expect(onNestedPress).toHaveBeenCalledTimes(1);
+  });
+
   afterEach(() => {
     jest.restoreAllMocks();
   });
diff --git a/packages/agentic/components/tsconfig.stories.json b/packages/agentic/components/tsconfig.stories.json
index 3c3f82336e..b6b9946653 100644
--- a/packages/agentic/components/tsconfig.stories.json
+++ b/packages/agentic/components/tsconfig.stories.json
@@ -10,6 +10,7 @@
   "include": [
     "src/components/avatar/avatar.stories.tsx",
     "src/components/button/button.stories.tsx",
+    "src/components/card/card.stories.tsx",
     "src/components/checkbox/checkbox.stories.tsx",
     "src/components/dropdown/dropdown.stories.tsx",
     "src/components/input/input.stories.tsx",

From 8f2635326760497744558e4c36766b6081ae58d4 Mon Sep 17 00:00:00 2001
From: Srividya Ramaswamy <sriramas@microsoft.com>
Date: Wed, 28 Oct 2026 15:10:37 -0700
Subject: [PATCH 2/6] test(card): preserve intrinsic native story layout

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4b66f3ef-85ac-4405-bd35-dcc167a077b1
---
 .../src/components/card/card.stories.tsx      | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/agentic/components/src/components/card/card.stories.tsx b/packages/agentic/components/src/components/card/card.stories.tsx
index 186f333672..bf29f79692 100644
--- a/packages/agentic/components/src/components/card/card.stories.tsx
+++ b/packages/agentic/components/src/components/card/card.stories.tsx
@@ -153,18 +153,27 @@ export const Default: Story = {};
 
 export const NativeStructure: Story = {
   render: () => (
-    <Card
-      accessibilityLabel="Unavailable report"
-      disabled
-      selected
-      layout="structured"
-      testID="card-spec-root"
-      header={{ accessible: true, accessibilityLabel: 'Report heading', testID: 'card-spec-header', children: <Text>Report</Text> }}
-      content={{ accessible: true, accessibilityLabel: 'Report summary', testID: 'card-spec-content', children: <Text>Summary</Text> }}
-      content02={{ accessible: true, accessibilityLabel: 'Report details', testID: 'card-spec-details', children: <Text>Details</Text> }}
-      footer={{ children: <Button content="Help" testID="card-spec-help" /> }}
-    />
+    <View style={styles.story}>
+      <Card
+        accessibilityLabel="Unavailable report"
+        disabled
+        selected
+        layout="structured"
+        testID="card-spec-root"
+        header={{ accessible: true, accessibilityLabel: 'Report heading', testID: 'card-spec-header', children: <Text>Report</Text> }}
+        content={{ accessible: true, accessibilityLabel: 'Report summary', testID: 'card-spec-content', children: <Text>Summary</Text> }}
+        content02={{ accessible: true, accessibilityLabel: 'Report details', testID: 'card-spec-details', children: <Text>Details</Text> }}
+        footer={{ children: <Button content="Help" testID="card-spec-help" /> }}
+      />
+    </View>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'The scene preserves intrinsic content height in compact previews so section order is measured without flex compression.',
+      },
+    },
+  },
   wdio: {
     'CRD-002 renders structured sections in reading order': async ({ browser, expect }) => {
       const header = await browser.$('~card-spec-header');

From 800561c38c782132d9aa6bed30ee439b2e0fd50f Mon Sep 17 00:00:00 2001
From: Srividya Ramaswamy <sriramas@microsoft.com>
Date: Wed, 28 Oct 2026 16:26:36 -0700
Subject: [PATCH 3/6] test(card): allocate native preview space for geometry
 checks

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4b66f3ef-85ac-4405-bd35-dcc167a077b1
---
 .../src/components/card/card.stories.tsx      | 41 ++++++++++++-------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/packages/agentic/components/src/components/card/card.stories.tsx b/packages/agentic/components/src/components/card/card.stories.tsx
index bf29f79692..f882306a34 100644
--- a/packages/agentic/components/src/components/card/card.stories.tsx
+++ b/packages/agentic/components/src/components/card/card.stories.tsx
@@ -170,26 +170,37 @@ export const NativeStructure: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'The scene preserves intrinsic content height in compact previews so section order is measured without flex compression.',
+        story:
+          'The geometry check gives the native host enough room for its preview and addons, then restores its original bounds. Card section styles and strict reading-order checks remain unchanged.',
       },
     },
   },
   wdio: {
     'CRD-002 renders structured sections in reading order': async ({ browser, expect }) => {
-      const header = await browser.$('~card-spec-header');
-      const content = await browser.$('~card-spec-content');
-      const details = await browser.$('~card-spec-details');
-      const help = await browser.$('~card-spec-help');
-      const headerRect = await browser.getElementRect(await header.elementId);
-      const contentRect = await browser.getElementRect(await content.elementId);
-      const detailsRect = await browser.getElementRect(await details.elementId);
-      const helpRect = await browser.getElementRect(await help.elementId);
-      expect(headerRect.height).toBeGreaterThan(0);
-      expect(contentRect.height).toBeGreaterThan(0);
-      expect(detailsRect.height).toBeGreaterThan(0);
-      expect(contentRect.y).toBeGreaterThanOrEqual(headerRect.y + headerRect.height);
-      expect(detailsRect.y).toBeGreaterThanOrEqual(contentRect.y + contentRect.height);
-      expect(helpRect.y).toBeGreaterThanOrEqual(detailsRect.y + detailsRect.height);
+      expect(browser.capabilities.setWindowRect).toBe(true);
+      const originalWindow = await browser.getWindowRect();
+      try {
+        // The compact macOS host can allocate zero height to the preview above its addons panel.
+        await browser.setWindowSize(Math.max(originalWindow.width, 1024), Math.max(originalWindow.height, 768));
+        const header = await browser.$('~card-spec-header');
+        const content = await browser.$('~card-spec-content');
+        const details = await browser.$('~card-spec-details');
+        const help = await browser.$('~card-spec-help');
+        await browser.waitUntil(async () => (await browser.getElementRect(await header.elementId)).height > 0);
+        const headerRect = await browser.getElementRect(await header.elementId);
+        const contentRect = await browser.getElementRect(await content.elementId);
+        const detailsRect = await browser.getElementRect(await details.elementId);
+        const helpRect = await browser.getElementRect(await help.elementId);
+        expect(headerRect.height).toBeGreaterThan(0);
+        expect(contentRect.height).toBeGreaterThan(0);
+        expect(detailsRect.height).toBeGreaterThan(0);
+        expect(helpRect.height).toBeGreaterThan(0);
+        expect(contentRect.y).toBeGreaterThanOrEqual(headerRect.y + headerRect.height);
+        expect(detailsRect.y).toBeGreaterThanOrEqual(contentRect.y + contentRect.height);
+        expect(helpRect.y).toBeGreaterThanOrEqual(detailsRect.y + detailsRect.height);
+      } finally {
+        await browser.setWindowRect(originalWindow.x, originalWindow.y, originalWindow.width, originalWindow.height);
+      }
     },
     'CRD-005 keeps a nested action enabled inside a disabled selectable surface': async ({ browser, expect }) => {
       const help = await browser.$('~card-spec-help');

From 9616c361537ed6b734a6a5e49ca71e813b35584b Mon Sep 17 00:00:00 2001
From: Srividya Ramaswamy <sriramas@microsoft.com>
Date: Wed, 28 Oct 2026 16:32:52 -0700
Subject: [PATCH 4/6] test(card): pass explicit native window rectangle
 coordinates

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4b66f3ef-85ac-4405-bd35-dcc167a077b1
---
 .../components/src/components/card/card.stories.tsx        | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/agentic/components/src/components/card/card.stories.tsx b/packages/agentic/components/src/components/card/card.stories.tsx
index f882306a34..3dc77a5136 100644
--- a/packages/agentic/components/src/components/card/card.stories.tsx
+++ b/packages/agentic/components/src/components/card/card.stories.tsx
@@ -181,7 +181,12 @@ export const NativeStructure: Story = {
       const originalWindow = await browser.getWindowRect();
       try {
         // The compact macOS host can allocate zero height to the preview above its addons panel.
-        await browser.setWindowSize(Math.max(originalWindow.width, 1024), Math.max(originalWindow.height, 768));
+        await browser.setWindowRect(
+          originalWindow.x,
+          originalWindow.y,
+          Math.max(originalWindow.width, 1024),
+          Math.max(originalWindow.height, 768),
+        );
         const header = await browser.$('~card-spec-header');
         const content = await browser.$('~card-spec-content');
         const details = await browser.$('~card-spec-details');

From 6fd046ff8f9ddc4c0dba6c0f7868538d0c6de530 Mon Sep 17 00:00:00 2001
From: Srividya Ramaswamy <sriramas@microsoft.com>
Date: Wed, 28 Oct 2026 17:32:55 -0700
Subject: [PATCH 5/6] test(Card): capture native geometry before window
 restoration

Record exact resize request, response and read-back bounds. On failure, include bounded window, preview and section measurements while retaining the original error as cause and restoring the original window in finally. This is diagnostic evidence, not a macOS geometry fix.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4b66f3ef-85ac-4405-bd35-dcc167a077b1
---
 .../src/components/card/card.stories.tsx      | 57 ++++++++++++++++---
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/packages/agentic/components/src/components/card/card.stories.tsx b/packages/agentic/components/src/components/card/card.stories.tsx
index 3dc77a5136..8872448066 100644
--- a/packages/agentic/components/src/components/card/card.stories.tsx
+++ b/packages/agentic/components/src/components/card/card.stories.tsx
@@ -171,7 +171,7 @@ export const NativeStructure: Story = {
     docs: {
       description: {
         story:
-          'The geometry check gives the native host enough room for its preview and addons, then restores its original bounds. Card section styles and strict reading-order checks remain unchanged.',
+          'The geometry check requests room for the native preview and addons, then restores the original window bounds. Failures report window, preview, and section rectangles before restoration; this diagnoses geometry without changing Card styles or strict reading-order checks.',
       },
     },
   },
@@ -179,14 +179,18 @@ export const NativeStructure: Story = {
     'CRD-002 renders structured sections in reading order': async ({ browser, expect }) => {
       expect(browser.capabilities.setWindowRect).toBe(true);
       const originalWindow = await browser.getWindowRect();
+      const requestedWindow = {
+        x: originalWindow.x,
+        y: originalWindow.y,
+        width: Math.max(originalWindow.width, 1024),
+        height: Math.max(originalWindow.height, 768),
+      };
+      let returnedWindow: typeof originalWindow | undefined;
+      let readBackWindow: typeof originalWindow | undefined;
       try {
         // The compact macOS host can allocate zero height to the preview above its addons panel.
-        await browser.setWindowRect(
-          originalWindow.x,
-          originalWindow.y,
-          Math.max(originalWindow.width, 1024),
-          Math.max(originalWindow.height, 768),
-        );
+        returnedWindow = await browser.setWindowRect(requestedWindow.x, requestedWindow.y, requestedWindow.width, requestedWindow.height);
+        readBackWindow = await browser.getWindowRect();
         const header = await browser.$('~card-spec-header');
         const content = await browser.$('~card-spec-content');
         const details = await browser.$('~card-spec-details');
@@ -203,6 +207,45 @@ export const NativeStructure: Story = {
         expect(contentRect.y).toBeGreaterThanOrEqual(headerRect.y + headerRect.height);
         expect(detailsRect.y).toBeGreaterThanOrEqual(contentRect.y + contentRect.height);
         expect(helpRect.y).toBeGreaterThanOrEqual(detailsRect.y + detailsRect.height);
+      } catch (cause) {
+        const observe = async (read: () => Promise<unknown>) => {
+          const observedAt = new Date().toISOString();
+          try {
+            return { status: 'observed', observedAt, rect: await read() };
+          } catch (error) {
+            return {
+              status: 'error',
+              observedAt,
+              message: (error instanceof Error ? error.message : String(error)).slice(0, 500),
+            };
+          }
+        };
+        const windowAtFailure = await observe(() => browser.getWindowRect());
+        const elements: Record<string, unknown> = {};
+        for (const [name, selector] of [
+          ['preview', '~agentic-storybook-story-root'],
+          ['header', '~card-spec-header'],
+          ['content', '~card-spec-content'],
+          ['details', '~card-spec-details'],
+          ['help', '~card-spec-help'],
+        ]) {
+          elements[name] = await observe(async () => {
+            const element = await browser.$(selector);
+            return browser.getElementRect(await element.elementId);
+          });
+        }
+        const diagnostics = {
+          phase: 'before-window-restoration',
+          originalWindow,
+          requestedWindow,
+          returnedWindow: returnedWindow === undefined ? { status: 'not-returned' } : returnedWindow,
+          readBackWindow: readBackWindow === undefined ? { status: 'not-read' } : readBackWindow,
+          windowAtFailure,
+          elements,
+        };
+        throw new Error(`${cause instanceof Error ? cause.message : String(cause)}\nCRD-002 geometry: ${JSON.stringify(diagnostics)}`, {
+          cause,
+        });
       } finally {
         await browser.setWindowRect(originalWindow.x, originalWindow.y, originalWindow.width, originalWindow.height);
       }

From 007b890d53b064a322ad2ca41317129fa4d71a4e Mon Sep 17 00:00:00 2001
From: Srividya Ramaswamy <sriramas@microsoft.com>
Date: Wed, 28 Oct 2026 18:20:34 -0700
Subject: [PATCH 6/6] test(Card): position the native window before enlarging
 it

Request the primary-screen top-left so the host can use its available screen height instead of retaining the old offset during native size clamping. Keep actual bounds diagnostics, positive section geometry, reading order, existing waits and exact original-window restoration unchanged.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4b66f3ef-85ac-4405-bd35-dcc167a077b1
---
 .../components/src/components/card/card.stories.tsx       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/agentic/components/src/components/card/card.stories.tsx b/packages/agentic/components/src/components/card/card.stories.tsx
index 8872448066..abb2cc2960 100644
--- a/packages/agentic/components/src/components/card/card.stories.tsx
+++ b/packages/agentic/components/src/components/card/card.stories.tsx
@@ -171,7 +171,7 @@ export const NativeStructure: Story = {
     docs: {
       description: {
         story:
-          'The geometry check requests room for the native preview and addons, then restores the original window bounds. Failures report window, preview, and section rectangles before restoration; this diagnoses geometry without changing Card styles or strict reading-order checks.',
+          'The geometry check temporarily requests the primary-screen top-left and room for the native preview and addons, allowing native screen constraints before restoring the original window bounds. Failures report window, preview, and section rectangles before restoration; Card styles and strict reading-order checks remain unchanged.',
       },
     },
   },
@@ -180,15 +180,15 @@ export const NativeStructure: Story = {
       expect(browser.capabilities.setWindowRect).toBe(true);
       const originalWindow = await browser.getWindowRect();
       const requestedWindow = {
-        x: originalWindow.x,
-        y: originalWindow.y,
+        x: 0,
+        y: 0,
         width: Math.max(originalWindow.width, 1024),
         height: Math.max(originalWindow.height, 768),
       };
       let returnedWindow: typeof originalWindow | undefined;
       let readBackWindow: typeof originalWindow | undefined;
       try {
-        // The compact macOS host can allocate zero height to the preview above its addons panel.
+        // The native setter positions before resizing; the old offset left too little room above the addons panel.
         returnedWindow = await browser.setWindowRect(requestedWindow.x, requestedWindow.y, requestedWindow.width, requestedWindow.height);
         readBackWindow = await browser.getWindowRect();
         const header = await browser.$('~card-spec-header');