From cb289d11ea8abb3cbb152e68e0ec04dcb91ab1b7 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Thu, 22 Oct 2026 20:02:01 -0600
Subject: [PATCH 01/13] fix(mosaic): tighten phone input country selector
 spacing

---
 .changeset/tidy-phone-input-spacing.md           |  2 ++
 .../components/phone-input/phone-input.styles.ts | 10 ++++++++--
 .../components/phone-input/phone-input.test.tsx  | 16 ++++++++++++++++
 .../src/components/phone-input/phone-input.tsx   |  1 +
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tidy-phone-input-spacing.md

diff --git a/.changeset/tidy-phone-input-spacing.md b/.changeset/tidy-phone-input-spacing.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/tidy-phone-input-spacing.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/mosaic/src/components/phone-input/phone-input.styles.ts b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
index 23a6f199762..366d7735499 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.styles.ts
+++ b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
@@ -3,6 +3,12 @@ import * as stylex from '@stylexjs/stylex';
 import { colorVars, radiusVars, shadowVars, space, typeScaleVars } from '../../tokens.stylex';
 
 export const styles = stylex.create({
+  trigger: {
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    paddingInlineEnd: 0,
+    paddingInlineStart: space['1.5'],
+  },
   triggerContent: {
     gap: space['0.5'],
     alignItems: 'center',
@@ -29,14 +35,14 @@ export const styles = stylex.create({
   },
   prefix: {
     gap: space['2'],
-    color: colorVars['--cl-color-brand'],
+    color: colorVars['--cl-color-foreground'],
     fontVariantNumeric: 'tabular-nums',
     paddingInlineEnd: 0,
     paddingInlineStart: space['2'],
   },
   control: {
     fontVariantNumeric: 'tabular-nums',
-    paddingInlineStart: space['2'],
+    paddingInlineStart: space['1.5'],
   },
   popup: {
     borderRadius: radiusVars['--cl-radius-lg'],
diff --git a/packages/mosaic/src/components/phone-input/phone-input.test.tsx b/packages/mosaic/src/components/phone-input/phone-input.test.tsx
index 5643f0358a3..3e25912ae5b 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.test.tsx
+++ b/packages/mosaic/src/components/phone-input/phone-input.test.tsx
@@ -7,6 +7,22 @@ import { Field } from '../field';
 import { PhoneInput } from './phone-input';
 
 describe('Mosaic PhoneInput', () => {
+  it('opens the country picker from the keyboard and restores focus when dismissed', async () => {
+    const user = userEvent.setup();
+    render(<PhoneInput aria-label='Phone number' />);
+    const trigger = screen.getByRole('button', { name: 'Country, United States' });
+
+    await user.tab();
+    expect(trigger).toHaveFocus();
+    expect(trigger).toHaveTextContent('🇺🇸');
+    await user.keyboard('{Enter}');
+    await waitFor(() => expect(screen.getByRole('combobox', { name: 'Search countries' })).toHaveFocus());
+    await user.keyboard('{Escape}');
+
+    await waitFor(() => expect(trigger).toHaveFocus());
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
   it('focuses the country search when opened with a pointer', async () => {
     const user = userEvent.setup();
     render(<PhoneInput aria-label='Phone number' />);
diff --git a/packages/mosaic/src/components/phone-input/phone-input.tsx b/packages/mosaic/src/components/phone-input/phone-input.tsx
index 3ca0d4386cf..b5c7cf9620c 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.tsx
+++ b/packages/mosaic/src/components/phone-input/phone-input.tsx
@@ -207,6 +207,7 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
                 <Button
                   size='xs'
                   shape='default'
+                  xstyle={styles.trigger}
                   {...themeProps('phone-input-country-trigger')}
                 />
               }

From 3aeb9da070ad5328213da3d8b0e5ba5180f11a7d Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Fri, 23 Oct 2026 00:26:13 -0600
Subject: [PATCH 02/13] fix(mosaic): fit phone flag emoji inside its container

---
 .../mosaic/src/components/phone-input/phone-input.styles.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mosaic/src/components/phone-input/phone-input.styles.ts b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
index 366d7735499..8445de3eaed 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.styles.ts
+++ b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
@@ -22,7 +22,7 @@ export const styles = stylex.create({
     alignItems: 'center',
     display: 'flex',
     flexShrink: 0,
-    fontSize: space['4'],
+    fontSize: space['3'],
     justifyContent: 'center',
     height: space['4'],
     width: space['4'],

From f8af4013cbaf32aaae0319d5af5f6d51385cd6c9 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Fri, 23 Oct 2026 09:01:22 -0600
Subject: [PATCH 03/13] fix(mosaic): use secondary color for phone chevron

---
 packages/mosaic/src/components/phone-input/phone-input.styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mosaic/src/components/phone-input/phone-input.styles.ts b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
index 8445de3eaed..9eb0d06112e 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.styles.ts
+++ b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
@@ -4,6 +4,7 @@ import { colorVars, radiusVars, shadowVars, space, typeScaleVars } from '../../t
 
 export const styles = stylex.create({
   trigger: {
+    '--_cl-icon-color': colorVars['--cl-color-foreground-secondary'],
     borderWidth: 0,
     backgroundColor: 'transparent',
     paddingInlineEnd: 0,

From 356e16d56abf4df1c2e0dca24d36fd785ff05e9e Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Fri, 23 Oct 2026 09:36:22 -0600
Subject: [PATCH 04/13] refactor(mosaic): use button primitive for phone
 country trigger

---
 .../phone-input/phone-input.styles.ts         | 13 +++++++
 .../phone-input/phone-input.test.tsx          | 36 ++++++++++++-------
 .../components/phone-input/phone-input.tsx    | 20 +++++++----
 3 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/packages/mosaic/src/components/phone-input/phone-input.styles.ts b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
index 9eb0d06112e..5afab2fbd44 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.styles.ts
+++ b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
@@ -3,12 +3,25 @@ import * as stylex from '@stylexjs/stylex';
 import { colorVars, radiusVars, shadowVars, space, typeScaleVars } from '../../tokens.stylex';
 
 export const styles = stylex.create({
+  triggerStart: {
+    paddingInlineStart: 'max(0px, calc(var(--_cl-input-group-inset) - 1px))',
+  },
   trigger: {
     '--_cl-icon-color': colorVars['--cl-color-foreground-secondary'],
+    borderRadius: 'max(0px, calc(var(--_cl-input-group-radius) - var(--_cl-input-group-inset)))',
     borderWidth: 0,
+    alignItems: 'center',
+    appearance: 'none',
     backgroundColor: 'transparent',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexShrink: 0,
+    justifyContent: 'center',
+    outlineOffset: { default: null, ':focus-visible': 0 },
     paddingInlineEnd: 0,
     paddingInlineStart: space['1.5'],
+    userSelect: 'none',
+    height: 'calc(var(--_cl-input-group-height) - 2 * var(--_cl-input-group-inset))',
   },
   triggerContent: {
     gap: space['0.5'],
diff --git a/packages/mosaic/src/components/phone-input/phone-input.test.tsx b/packages/mosaic/src/components/phone-input/phone-input.test.tsx
index 3e25912ae5b..e28505e12e9 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.test.tsx
+++ b/packages/mosaic/src/components/phone-input/phone-input.test.tsx
@@ -73,16 +73,28 @@ describe('Mosaic PhoneInput', () => {
     expect(document.querySelector('.cl-phone-input-popup')).toHaveAttribute('data-size', 'anchor');
   });
 
-  it.each(['sm', 'md', 'lg'] as const)('uses an xs country trigger for a %s input', size => {
-    render(
-      <PhoneInput
-        size={size}
-        aria-label='Phone number'
-      />,
-    );
-    expect(screen.getByRole('button', { name: 'Country, United States' })).toHaveAttribute('data-size', 'xs');
-    expect(screen.getByRole('button', { name: 'Country, United States' })).toHaveAttribute('data-shape', 'default');
-  });
+  it.each(['sm', 'md', 'lg'] as const)(
+    'opens and dismisses the country picker with Space for a %s input',
+    async size => {
+      const user = userEvent.setup();
+      render(
+        <PhoneInput
+          size={size}
+          aria-label='Phone number'
+        />,
+      );
+      const trigger = screen.getByRole('button', { name: 'Country, United States' });
+
+      await user.tab();
+      expect(trigger).toHaveFocus();
+      await user.keyboard(' ');
+      await waitFor(() => expect(screen.getByRole('combobox', { name: 'Search countries' })).toHaveFocus());
+      await user.keyboard('{Escape}');
+
+      await waitFor(() => expect(trigger).toHaveFocus());
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    },
+  );
   it('renders one grouped telephone control with the default country', () => {
     render(<PhoneInput aria-label='Phone number' />);
 
@@ -92,10 +104,8 @@ describe('Mosaic PhoneInput', () => {
     expect(input).toHaveClass('cl-input', 'cl-phone-input-control');
     expect(input).toHaveAttribute('data-variant', 'ghost');
     const countryTrigger = screen.getByRole('button', { name: 'Country, United States' });
-    expect(countryTrigger).toHaveClass('cl-button', 'cl-phone-input-country-trigger');
+    expect(countryTrigger).toHaveClass('cl-phone-input-country-trigger');
     expect(countryTrigger.closest('.cl-input-group-start')).not.toBeNull();
-    expect(countryTrigger).toHaveAttribute('data-size', 'xs');
-    expect(countryTrigger).toHaveAttribute('data-variant', 'ghost');
     expect(screen.queryByText('us')).not.toBeInTheDocument();
     expect(document.querySelector('.cl-phone-input-divider')).toHaveAttribute('aria-hidden', 'true');
     expect(screen.getByText('+1')).toHaveClass('cl-phone-input-prefix');
diff --git a/packages/mosaic/src/components/phone-input/phone-input.tsx b/packages/mosaic/src/components/phone-input/phone-input.tsx
index b5c7cf9620c..94f24bf6ba9 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.tsx
+++ b/packages/mosaic/src/components/phone-input/phone-input.tsx
@@ -8,11 +8,13 @@ import React from 'react';
 
 import { ChevronDown } from '../../icons/glyphs/chevron-down';
 import { MagnifyingGlass } from '../../icons/glyphs/magnifying-glass';
+import { Button } from '../../primitives/button';
 import { useFormattedInput } from '../../primitives/hooks';
 import type { MosaicElementProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
+import { focusOutline } from '../../styles/focus-outline.styles';
 import { reset } from '../../styles/reset.styles';
-import { Button } from '../button';
+import { styles as buttonStyles } from '../button/button.styles';
 import { Combobox } from '../combobox';
 import { Field } from '../field';
 import { useOptionalFieldContext } from '../field/field.context';
@@ -201,14 +203,20 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
           placement='bottom-start'
           sideOffset={8}
         >
-          <InputGroup.Start>
+          <InputGroup.Start xstyle={styles.triggerStart}>
             <Popover.Trigger
               render={
                 <Button
-                  size='xs'
-                  shape='default'
-                  xstyle={styles.trigger}
-                  {...themeProps('phone-input-country-trigger')}
+                  {...mergeStyleProps(
+                    themeProps('phone-input-country-trigger'),
+                    stylex.props(
+                      reset.base,
+                      focusOutline.visible,
+                      buttonStyles.touchTarget,
+                      styles.trigger,
+                      disabled && buttonStyles.disabled,
+                    ),
+                  )}
                 />
               }
               type='button'

From 14e34d3e3453815981b079d5203059cc67d7bc7b Mon Sep 17 00:00:00 2001
From: Austin Calvelage <austin.calvelage@icloud.com>
Date: Fri, 23 Oct 2026 09:40:31 -0600
Subject: [PATCH 05/13] fix(mosaic): use typography token for phone flag size

---
 .../mosaic/src/components/phone-input/phone-input.styles.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mosaic/src/components/phone-input/phone-input.styles.ts b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
index 5afab2fbd44..04f481bc8de 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.styles.ts
+++ b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
@@ -36,7 +36,7 @@ export const styles = stylex.create({
     alignItems: 'center',
     display: 'flex',
     flexShrink: 0,
-    fontSize: space['3'],
+    fontSize: typeScaleVars['--cl-text-xs-size'],
     justifyContent: 'center',
     height: space['4'],
     width: space['4'],

From 1f25ba655690055d6b9362f2924902ec8419a2f6 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Fri, 23 Oct 2026 11:23:58 -0600
Subject: [PATCH 06/13] fix(mosaic): match phone country search to Figma

---
 .../phone-input/phone-input.styles.ts         | 45 ++++++++++++--
 .../phone-input/phone-input.test.tsx          | 62 ++++++++++++++++++-
 .../components/phone-input/phone-input.tsx    | 35 ++++++++---
 packages/swingset/src/stories/phone-input.mdx |  2 +-
 4 files changed, 128 insertions(+), 16 deletions(-)

diff --git a/packages/mosaic/src/components/phone-input/phone-input.styles.ts b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
index 04f481bc8de..62f3fd3c15f 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.styles.ts
+++ b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
@@ -65,11 +65,48 @@ export const styles = stylex.create({
     boxShadow: shadowVars['--cl-shadow-md'],
     color: colorVars['--cl-color-foreground'],
   },
-  countrySearchContainer: {
-    paddingInline: space['2'],
+  countrySearchRow: {
+    gap: space['1'],
+    alignItems: 'center',
+    borderBlockEndColor: colorVars['--cl-color-border'],
+    borderBlockEndStyle: 'solid',
+    borderBlockEndWidth: '1px',
+    display: 'flex',
+    flexShrink: 0,
+    paddingInlineEnd: space['2'],
+    paddingInlineStart: space['1'],
+    height: space['8'],
+  },
+  countrySearchIcon: {
+    alignItems: 'center',
+    display: 'flex',
     flexShrink: 0,
-    paddingBlockEnd: space['1'],
-    paddingBlockStart: space['2'],
+    justifyContent: 'center',
+    height: space['5'],
+    width: space['5'],
+  },
+  countrySearchInput: {
+    borderRadius: 0,
+    outline: {
+      default: 'none',
+      '@media (forced-colors: active)': {
+        default: null,
+        ':focus-visible': '2px solid CanvasText',
+      },
+    },
+    outlineOffset: {
+      default: null,
+      '@media (forced-colors: active)': {
+        default: null,
+        ':focus-visible': '2px',
+      },
+    },
+    paddingInlineEnd: space['1'],
+    paddingInlineStart: space['0.5'],
+    height: space['6'],
+    '::placeholder': {
+      color: colorVars['--cl-color-foreground-secondary'],
+    },
   },
   optionName: {
     overflow: 'hidden',
diff --git a/packages/mosaic/src/components/phone-input/phone-input.test.tsx b/packages/mosaic/src/components/phone-input/phone-input.test.tsx
index e28505e12e9..55ff44df8e6 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.test.tsx
+++ b/packages/mosaic/src/components/phone-input/phone-input.test.tsx
@@ -32,6 +32,29 @@ describe('Mosaic PhoneInput', () => {
     await waitFor(() => expect(screen.getByRole('combobox', { name: 'Search countries' })).toHaveFocus());
   });
 
+  it('shows Search as the default country search placeholder', async () => {
+    const user = userEvent.setup();
+    render(<PhoneInput aria-label='Phone number' />);
+
+    await user.click(screen.getByRole('button', { name: 'Country, United States' }));
+
+    expect(screen.getByRole('combobox', { name: 'Search countries' })).toHaveAttribute('placeholder', 'Search');
+  });
+
+  it('uses a custom country search placeholder', async () => {
+    const user = userEvent.setup();
+    render(
+      <PhoneInput
+        aria-label='Phone number'
+        countrySearchPlaceholder='Find a country'
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Country, United States' }));
+
+    expect(screen.getByRole('combobox', { name: 'Search countries' })).toHaveAttribute('placeholder', 'Find a country');
+  });
+
   it('forwards object refs and clears them on unmount', () => {
     const ref = React.createRef<HTMLInputElement>();
     const { unmount } = render(
@@ -177,7 +200,7 @@ describe('Mosaic PhoneInput', () => {
     const searchInput = screen.getByRole('combobox', { name: 'Search countries' });
     expect(searchInput).toHaveClass('cl-combobox-input', 'cl-input');
     expect(searchInput).toHaveAttribute('data-variant', 'ghost');
-    expect(searchInput.closest('.cl-input-group')).toHaveClass('cl-phone-input-country-search');
+    expect(searchInput.closest('.cl-phone-input-country-search')).toBeInTheDocument();
     await user.type(searchInput, 'Greece');
     expect(screen.getByRole('listbox')).toHaveClass('cl-combobox-list');
     expect(screen.getByRole('option', { name: /Greece/ })).toHaveClass('cl-combobox-option');
@@ -203,6 +226,43 @@ describe('Mosaic PhoneInput', () => {
     expect(screen.getByRole('combobox', { name: 'Search countries' })).toHaveValue('');
   });
 
+  it('focuses the search when clicking its row after dismissing and reopening', async () => {
+    const user = userEvent.setup();
+    render(<PhoneInput aria-label='Phone number' />);
+
+    await user.click(screen.getByRole('button', { name: 'Country, United States' }));
+    await user.keyboard('{Escape}');
+    await waitFor(() => expect(screen.queryByRole('combobox', { name: 'Search countries' })).not.toBeInTheDocument());
+    await user.click(screen.getByRole('button', { name: 'Country, United States' }));
+
+    const searchInput = screen.getByRole('combobox', { name: 'Search countries' });
+    const searchRow = searchInput.closest('.cl-phone-input-country-search');
+    if (!searchRow) {
+      throw new Error('Country search row missing');
+    }
+    searchInput.blur();
+    await user.click(searchRow);
+
+    expect(searchInput).toHaveFocus();
+  });
+
+  it('focuses the phone input when clicking its group after the search is dismissed', async () => {
+    const user = userEvent.setup();
+    render(<PhoneInput aria-label='Phone number' />);
+    const phoneInput = screen.getByRole('textbox', { name: 'Phone number' });
+    const phoneGroup = phoneInput.closest('.cl-phone-input');
+    if (!phoneGroup) {
+      throw new Error('Phone input group missing');
+    }
+
+    await user.click(screen.getByRole('button', { name: 'Country, United States' }));
+    await user.keyboard('{Escape}');
+    await waitFor(() => expect(screen.queryByRole('combobox', { name: 'Search countries' })).not.toBeInTheDocument());
+    await user.click(phoneGroup);
+
+    expect(phoneInput).toHaveFocus();
+  });
+
   it('clears the country search after a country is chosen', async () => {
     const user = userEvent.setup();
     render(<PhoneInput aria-label='Phone number' />);
diff --git a/packages/mosaic/src/components/phone-input/phone-input.tsx b/packages/mosaic/src/components/phone-input/phone-input.tsx
index 94f24bf6ba9..2f673b590f3 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.tsx
+++ b/packages/mosaic/src/components/phone-input/phone-input.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { ChevronDown } from '../../icons/glyphs/chevron-down';
 import { MagnifyingGlass } from '../../icons/glyphs/magnifying-glass';
 import { Button } from '../../primitives/button';
+import { Combobox as HeadlessCombobox } from '../../primitives/combobox';
 import { useFormattedInput } from '../../primitives/hooks';
 import type { MosaicElementProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
@@ -19,6 +20,7 @@ import { Combobox } from '../combobox';
 import { Field } from '../field';
 import { useOptionalFieldContext } from '../field/field.context';
 import { Icon } from '../icon';
+import { sizes as inputSizes, styles as inputStyles } from '../input/input.styles';
 import { InputGroup } from '../input-group';
 import { Popover } from '../popover';
 import { formatNationalNumber, getNationalNumber, toE164 } from './phone-input.format';
@@ -77,7 +79,7 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
     defaultCountry,
     onCountryChange,
     size = 'md',
-    countrySearchPlaceholder = 'Search country or code',
+    countrySearchPlaceholder = 'Search',
     noResultsMessage = 'No countries found',
     disabled: disabledProp,
     required: requiredProp,
@@ -259,23 +261,36 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
                 }
               }}
             >
-              <Field.Root xstyle={styles.countrySearchContainer}>
-                <InputGroup.Root
-                  size='md'
-                  {...themeProps('phone-input-country-search')}
+              <Field.Root>
+                <label
+                  {...mergeStyleProps(
+                    themeProps('phone-input-country-search'),
+                    stylex.props(reset.base, styles.countrySearchRow),
+                  )}
                 >
-                  <InputGroup.Start>
+                  <span {...stylex.props(reset.base, styles.countrySearchIcon)}>
                     <Icon
                       glyph={MagnifyingGlass}
-                      size='sm'
+                      size='md'
                     />
-                  </InputGroup.Start>
-                  <Combobox.Input
+                  </span>
+                  <HeadlessCombobox.Input
                     aria-label='Search countries'
                     placeholder={countrySearchPlaceholder}
                     spellCheck={false}
+                    {...mergeStyleProps(
+                      themeProps('combobox-input', { size: 'md', variant: 'ghost' }),
+                      themeProps('input', { size: 'md', variant: 'ghost', disabled: false }),
+                      stylex.props(
+                        reset.base,
+                        inputStyles.base,
+                        inputSizes.md,
+                        inputStyles.ghost,
+                        styles.countrySearchInput,
+                      ),
+                    )}
                   />
-                </InputGroup.Root>
+                </label>
               </Field.Root>
               <Combobox.List {...themeProps('phone-input-country-list')}>
                 {filteredCountries.length > 0 ? (
diff --git a/packages/swingset/src/stories/phone-input.mdx b/packages/swingset/src/stories/phone-input.mdx
index 06eac3dd7f9..17a00e6e74d 100644
--- a/packages/swingset/src/stories/phone-input.mdx
+++ b/packages/swingset/src/stories/phone-input.mdx
@@ -24,7 +24,7 @@ It composes `InputGroup` for the telephone field and the inline `Combobox` compo
     { name: 'country', type: 'CountryIso', default: '—' },
     { name: 'defaultCountry', type: 'CountryIso', default: "'us'" },
     { name: 'onCountryChange', type: '(country: CountryIso) => void', default: '—' },
-    { name: 'countrySearchPlaceholder', type: 'string', default: "'Search country or code'" },
+    { name: 'countrySearchPlaceholder', type: 'string', default: "'Search'" },
     { name: 'noResultsMessage', type: 'string', default: "'No countries found'" },
   ]}
 />

From 06cf393492b5a9cac457271eeccf2ac5fceb7793 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Fri, 23 Oct 2026 11:38:34 -0600
Subject: [PATCH 07/13] fix(mosaic): align phone country flags

---
 .../src/components/phone-input/phone-input.styles.ts      | 8 ++++----
 .../mosaic/src/components/phone-input/phone-input.tsx     | 6 ++----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/mosaic/src/components/phone-input/phone-input.styles.ts b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
index 62f3fd3c15f..03d0db51fb0 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.styles.ts
+++ b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
@@ -29,15 +29,12 @@ export const styles = stylex.create({
     display: 'flex',
   },
   flag: {
-    fontSize: typeScaleVars['--cl-text-sm-size'],
-    lineHeight: 1,
-  },
-  triggerFlag: {
     alignItems: 'center',
     display: 'flex',
     flexShrink: 0,
     fontSize: typeScaleVars['--cl-text-xs-size'],
     justifyContent: 'center',
+    lineHeight: 1,
     height: space['4'],
     width: space['4'],
   },
@@ -108,6 +105,9 @@ export const styles = stylex.create({
       color: colorVars['--cl-color-foreground-secondary'],
     },
   },
+  option: {
+    paddingInlineStart: `calc(${space['1']} + 1px)`,
+  },
   optionName: {
     overflow: 'hidden',
     flexGrow: 1,
diff --git a/packages/mosaic/src/components/phone-input/phone-input.tsx b/packages/mosaic/src/components/phone-input/phone-input.tsx
index 2f673b590f3..c704968b7c8 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.tsx
+++ b/packages/mosaic/src/components/phone-input/phone-input.tsx
@@ -228,10 +228,7 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
               <span {...stylex.props(reset.base, styles.triggerContent)}>
                 <span
                   aria-hidden='true'
-                  {...mergeStyleProps(
-                    themeProps('phone-input-flag'),
-                    stylex.props(reset.base, styles.flag, styles.triggerFlag),
-                  )}
+                  {...mergeStyleProps(themeProps('phone-input-flag'), stylex.props(reset.base, styles.flag))}
                 >
                   {getFlagEmojiFromCountryIso(country.iso)}
                 </span>
@@ -300,6 +297,7 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
                       value={option.iso}
                       label={option.name}
                       {...themeProps('phone-input-country-option')}
+                      xstyle={styles.option}
                     >
                       <span
                         aria-hidden='true'

From 676f74269b9120acac42fd93a49aa44729918f1b Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Fri, 23 Oct 2026 12:01:55 -0600
Subject: [PATCH 08/13] fix(mosaic): match phone country rows to Figma

---
 .../phone-input/phone-input.styles.ts         | 51 ++++++++++++++++---
 .../components/phone-input/phone-input.tsx    | 12 ++---
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/packages/mosaic/src/components/phone-input/phone-input.styles.ts b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
index 03d0db51fb0..9519a7f2a76 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.styles.ts
+++ b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
@@ -1,6 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, radiusVars, shadowVars, space, typeScaleVars } from '../../tokens.stylex';
+import { colorVars, fontWeightVars, radiusVars, shadowVars, space, typeScaleVars } from '../../tokens.stylex';
 
 export const styles = stylex.create({
   triggerStart: {
@@ -105,25 +105,62 @@ export const styles = stylex.create({
       color: colorVars['--cl-color-foreground-secondary'],
     },
   },
+  countryList: {
+    gap: space['0.5'],
+    paddingBlock: space['0.5'],
+    paddingInline: space['1'],
+  },
   option: {
-    paddingInlineStart: `calc(${space['1']} + 1px)`,
+    gap: space['1'],
+    paddingBlock: space['1'],
+    backgroundColor: {
+      default: null,
+      ':is([data-active])': colorVars['--cl-color-neutral-alpha-100'],
+      '@media (hover: hover)': {
+        ':hover': colorVars['--cl-color-neutral-alpha-100'],
+      },
+    },
+    color: {
+      default: colorVars['--cl-color-foreground-secondary'],
+      ':where([data-active])': colorVars['--cl-color-foreground'],
+    },
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    fontWeight: fontWeightVars['--cl-font-normal'],
+    lineHeight: typeScaleVars['--cl-text-sm-leading'],
+    paddingInlineEnd: space['1.5'],
+    paddingInlineStart: space['1'],
+    height: space['8'],
+  },
+  optionFlag: {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    justifyContent: 'center',
+    height: space['5'],
+    width: space['5'],
   },
   optionName: {
+    padding: space['0.5'],
     overflow: 'hidden',
     flexGrow: 1,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
+    height: space['6'],
     minWidth: 0,
   },
   optionCode: {
+    alignItems: 'center',
     color: colorVars['--cl-color-foreground-secondary'],
+    display: 'flex',
     flexShrink: 0,
+    fontSize: typeScaleVars['--cl-text-xs-size'],
     fontVariantNumeric: 'tabular-nums',
+    fontWeight: fontWeightVars['--cl-font-medium'],
+    justifyContent: 'flex-end',
+    lineHeight: typeScaleVars['--cl-text-xs-leading'],
     whiteSpace: 'nowrap',
-  },
-  indicatorSlot: {
-    display: 'flex',
-    flexShrink: 0,
-    width: space['3'],
+    height: space['5'],
+    minWidth: space['5'],
+    width: 'max-content',
   },
 });
diff --git a/packages/mosaic/src/components/phone-input/phone-input.tsx b/packages/mosaic/src/components/phone-input/phone-input.tsx
index c704968b7c8..52cf8668950 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.tsx
+++ b/packages/mosaic/src/components/phone-input/phone-input.tsx
@@ -289,7 +289,10 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
                   />
                 </label>
               </Field.Root>
-              <Combobox.List {...themeProps('phone-input-country-list')}>
+              <Combobox.List
+                {...themeProps('phone-input-country-list')}
+                xstyle={styles.countryList}
+              >
                 {filteredCountries.length > 0 ? (
                   filteredCountries.map(option => (
                     <Combobox.Option
@@ -301,15 +304,12 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
                     >
                       <span
                         aria-hidden='true'
-                        {...stylex.props(reset.base, styles.flag)}
+                        {...stylex.props(reset.base, styles.optionFlag)}
                       >
-                        {getFlagEmojiFromCountryIso(option.iso)}
+                        <span {...stylex.props(reset.base, styles.flag)}>{getFlagEmojiFromCountryIso(option.iso)}</span>
                       </span>
                       <span {...stylex.props(reset.base, styles.optionName)}>{option.name}</span>
                       <span {...stylex.props(reset.base, styles.optionCode)}>+{option.code}</span>
-                      <span {...stylex.props(styles.indicatorSlot)}>
-                        <Combobox.OptionIndicator />
-                      </span>
                     </Combobox.Option>
                   ))
                 ) : (

From d98644d59409fdd67f35e81da72718e85707e0ab Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Fri, 23 Oct 2026 12:12:57 -0600
Subject: [PATCH 09/13] test(mosaic): pin phone country keyboard navigation

---
 .../phone-input/phone-input.test.tsx          | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/mosaic/src/components/phone-input/phone-input.test.tsx b/packages/mosaic/src/components/phone-input/phone-input.test.tsx
index 55ff44df8e6..4522717911d 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.test.tsx
+++ b/packages/mosaic/src/components/phone-input/phone-input.test.tsx
@@ -213,6 +213,26 @@ describe('Mosaic PhoneInput', () => {
     expect(screen.getByRole('textbox', { name: 'Phone number' })).toHaveFocus();
   });
 
+  it('links the country search to its list and active option through selection', async () => {
+    const user = userEvent.setup();
+    render(<PhoneInput aria-label='Phone number' />);
+
+    await user.click(screen.getByRole('button', { name: 'Country, United States' }));
+    const searchInput = screen.getByRole('combobox', { name: 'Search countries' });
+    const list = screen.getByRole('listbox');
+    const option = screen.getByRole('option', { name: /United Kingdom/ });
+    expect(list.id).toBeTruthy();
+    expect(searchInput).toHaveAttribute('aria-controls', list.id);
+
+    await user.keyboard('{ArrowDown}');
+    expect(option.id).toBeTruthy();
+    expect(searchInput).toHaveAttribute('aria-activedescendant', option.id);
+
+    await user.keyboard('{Enter}');
+    expect(screen.getByRole('button', { name: 'Country, United Kingdom' })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: 'Phone number' })).toHaveFocus();
+  });
+
   it('clears the country search when the popup is dismissed', async () => {
     const user = userEvent.setup();
     render(<PhoneInput aria-label='Phone number' />);

From a4ce9b96cdf6ba0ddf8b2d198bf3b80b41d115fa Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Fri, 23 Oct 2026 12:17:54 -0600
Subject: [PATCH 10/13] refactor(mosaic): compose phone country picker
 primitives

---
 .../phone-input/phone-input.styles.ts         | 36 +++++++++++++++++--
 .../components/phone-input/phone-input.tsx    | 32 ++++++++++-------
 2 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/packages/mosaic/src/components/phone-input/phone-input.styles.ts b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
index 9519a7f2a76..99c2fb49186 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.styles.ts
+++ b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
@@ -1,6 +1,14 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, fontWeightVars, radiusVars, shadowVars, space, typeScaleVars } from '../../tokens.stylex';
+import {
+  colorVars,
+  fontFamilyVars,
+  fontWeightVars,
+  radiusVars,
+  shadowVars,
+  space,
+  typeScaleVars,
+} from '../../tokens.stylex';
 
 export const styles = stylex.create({
   triggerStart: {
@@ -109,12 +117,24 @@ export const styles = stylex.create({
     gap: space['0.5'],
     paddingBlock: space['0.5'],
     paddingInline: space['1'],
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: '16rem',
   },
   option: {
+    borderRadius: radiusVars['--cl-radius-md'],
     gap: space['1'],
+    outline: {
+      default: 'none',
+      '@media (forced-colors: active)': {
+        default: null,
+        ':is([data-active])': '2px solid CanvasText',
+      },
+    },
     paddingBlock: space['1'],
+    alignItems: 'center',
     backgroundColor: {
-      default: null,
+      default: 'transparent',
       ':is([data-active])': colorVars['--cl-color-neutral-alpha-100'],
       '@media (hover: hover)': {
         ':hover': colorVars['--cl-color-neutral-alpha-100'],
@@ -124,6 +144,10 @@ export const styles = stylex.create({
       default: colorVars['--cl-color-foreground-secondary'],
       ':where([data-active])': colorVars['--cl-color-foreground'],
     },
+    cursor: 'pointer',
+    display: 'flex',
+    flexShrink: 0,
+    fontFamily: fontFamilyVars['--cl-font-family-sans'],
     fontSize: typeScaleVars['--cl-text-sm-size'],
     fontWeight: fontWeightVars['--cl-font-normal'],
     lineHeight: typeScaleVars['--cl-text-sm-leading'],
@@ -131,6 +155,14 @@ export const styles = stylex.create({
     paddingInlineStart: space['1'],
     height: space['8'],
   },
+  empty: {
+    paddingBlock: space['6'],
+    paddingInline: space['3'],
+    color: colorVars['--cl-color-foreground-secondary'],
+    fontFamily: fontFamilyVars['--cl-font-family-sans'],
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    textAlign: 'center',
+  },
   optionFlag: {
     alignItems: 'center',
     display: 'flex',
diff --git a/packages/mosaic/src/components/phone-input/phone-input.tsx b/packages/mosaic/src/components/phone-input/phone-input.tsx
index 52cf8668950..a3ac6dd7001 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.tsx
+++ b/packages/mosaic/src/components/phone-input/phone-input.tsx
@@ -16,13 +16,13 @@ import { mergeStyleProps, themeProps } from '../../props';
 import { focusOutline } from '../../styles/focus-outline.styles';
 import { reset } from '../../styles/reset.styles';
 import { styles as buttonStyles } from '../button/button.styles';
-import { Combobox } from '../combobox';
 import { Field } from '../field';
 import { useOptionalFieldContext } from '../field/field.context';
 import { Icon } from '../icon';
 import { sizes as inputSizes, styles as inputStyles } from '../input/input.styles';
 import { InputGroup } from '../input-group';
 import { Popover } from '../popover';
+import { scrollAreaRoot, scrollAreaViewport } from '../scroll-area';
 import { formatNationalNumber, getNationalNumber, toE164 } from './phone-input.format';
 import { styles } from './phone-input.styles';
 
@@ -246,7 +246,7 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
             {...themeProps('phone-input-popup')}
             xstyle={[reset.base, styles.popup]}
           >
-            <Combobox.Root
+            <HeadlessCombobox.Root
               open
               inputValue={query}
               onInputValueChange={setQuery}
@@ -289,18 +289,24 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
                   />
                 </label>
               </Field.Root>
-              <Combobox.List
-                {...themeProps('phone-input-country-list')}
-                xstyle={styles.countryList}
+              <HeadlessCombobox.List
+                {...mergeStyleProps(
+                  themeProps('combobox-list'),
+                  themeProps('phone-input-country-list'),
+                  stylex.props(reset.base, scrollAreaRoot, ...scrollAreaViewport(), styles.countryList),
+                )}
               >
                 {filteredCountries.length > 0 ? (
                   filteredCountries.map(option => (
-                    <Combobox.Option
+                    <HeadlessCombobox.Option
                       key={option.iso}
                       value={option.iso}
                       label={option.name}
-                      {...themeProps('phone-input-country-option')}
-                      xstyle={styles.option}
+                      {...mergeStyleProps(
+                        themeProps('combobox-option'),
+                        themeProps('phone-input-country-option'),
+                        stylex.props(reset.base, styles.option),
+                      )}
                     >
                       <span
                         aria-hidden='true'
@@ -310,13 +316,15 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
                       </span>
                       <span {...stylex.props(reset.base, styles.optionName)}>{option.name}</span>
                       <span {...stylex.props(reset.base, styles.optionCode)}>+{option.code}</span>
-                    </Combobox.Option>
+                    </HeadlessCombobox.Option>
                   ))
                 ) : (
-                  <Combobox.Empty>{noResultsMessage}</Combobox.Empty>
+                  <p {...mergeStyleProps(themeProps('combobox-empty'), stylex.props(reset.base, styles.empty))}>
+                    {noResultsMessage}
+                  </p>
                 )}
-              </Combobox.List>
-            </Combobox.Root>
+              </HeadlessCombobox.List>
+            </HeadlessCombobox.Root>
           </Popover.Popup>
         </Popover.Root>
 

From a17c1c14c7ef0338cc473743b284577e605dc455 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Fri, 23 Oct 2026 14:11:58 -0600
Subject: [PATCH 11/13] chore(swingset): mark phone input stable

---
 packages/swingset/src/stories/phone-input.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/swingset/src/stories/phone-input.stories.tsx b/packages/swingset/src/stories/phone-input.stories.tsx
index a5b554fb9c6..5f92db47b93 100644
--- a/packages/swingset/src/stories/phone-input.stories.tsx
+++ b/packages/swingset/src/stories/phone-input.stories.tsx
@@ -13,7 +13,7 @@ export { default as __source } from './phone-input.stories?raw';
 
 export const meta: StoryMeta = {
   group: 'Components',
-  status: 'wip',
+  status: 'stable',
   title: 'PhoneInput',
   source: 'packages/mosaic/src/components/phone-input/phone-input.tsx',
   styles: {

From 1e172988e0ddd1a76414ab6c7e2b053a1fed8940 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Fri, 23 Oct 2026 15:45:20 -0600
Subject: [PATCH 12/13] fix(mosaic): align phone country search and flags

---
 .../phone-input/phone-input.feature.test.tsx  | 41 +++++++++++++++++++
 .../phone-input/phone-input.styles.ts         |  4 +-
 2 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 packages/mosaic/src/components/phone-input/phone-input.feature.test.tsx

diff --git a/packages/mosaic/src/components/phone-input/phone-input.feature.test.tsx b/packages/mosaic/src/components/phone-input/phone-input.feature.test.tsx
new file mode 100644
index 00000000000..e61bcc59bea
--- /dev/null
+++ b/packages/mosaic/src/components/phone-input/phone-input.feature.test.tsx
@@ -0,0 +1,41 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import { MosaicProvider } from '../../mosaic-provider';
+import { PhoneInput } from './phone-input';
+
+describe('PhoneInput country picker alignment', () => {
+  it.each(['sm', 'md', 'lg'] as const)('aligns search text and country flags for a %s input', async size => {
+    const user = userEvent.setup();
+    render(
+      <MosaicProvider>
+        <div style={{ width: 320, margin: 32 }}>
+          <PhoneInput
+            size={size}
+            aria-label='Phone number'
+          />
+        </div>
+      </MosaicProvider>,
+    );
+    const trigger = screen.getByRole('button', { name: 'Country, United States' });
+    await user.click(trigger);
+    const search = screen.getByRole('combobox', { name: 'Search countries' });
+    await waitFor(() => expect(search).toHaveFocus());
+    const country = screen.getByRole('option', { name: /United States/ });
+    const countryName = document.createRange();
+    countryName.selectNodeContents(within(country).getByText('United States'));
+    const triggerFlag = document.createRange();
+    triggerFlag.selectNodeContents(within(trigger).getByText('🇺🇸'));
+    const countryFlag = document.createRange();
+    countryFlag.selectNodeContents(within(country).getByText('🇺🇸'));
+
+    const searchTextLeft =
+      search.getBoundingClientRect().left + Number.parseFloat(getComputedStyle(search).paddingLeft);
+    expect(search.getBoundingClientRect().width).toBeGreaterThan(0);
+    expect.soft(Math.abs(searchTextLeft - countryName.getBoundingClientRect().left)).toBeLessThanOrEqual(0.5);
+    expect
+      .soft(Math.abs(triggerFlag.getBoundingClientRect().left - countryFlag.getBoundingClientRect().left))
+      .toBeLessThanOrEqual(0.5);
+  });
+});
diff --git a/packages/mosaic/src/components/phone-input/phone-input.styles.ts b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
index 99c2fb49186..2e8e571ca04 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.styles.ts
+++ b/packages/mosaic/src/components/phone-input/phone-input.styles.ts
@@ -12,7 +12,7 @@ import {
 
 export const styles = stylex.create({
   triggerStart: {
-    paddingInlineStart: 'max(0px, calc(var(--_cl-input-group-inset) - 1px))',
+    paddingInlineStart: 'var(--_cl-input-group-inset)',
   },
   trigger: {
     '--_cl-icon-color': colorVars['--cl-color-foreground-secondary'],
@@ -79,7 +79,7 @@ export const styles = stylex.create({
     display: 'flex',
     flexShrink: 0,
     paddingInlineEnd: space['2'],
-    paddingInlineStart: space['1'],
+    paddingInlineStart: space['2'],
     height: space['8'],
   },
   countrySearchIcon: {

From 4f5a017103cb149f346e838f5a11d366c7947865 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Fri, 23 Oct 2026 15:51:48 -0600
Subject: [PATCH 13/13] test(mosaic): remove phone input style assertions

---
 .../phone-input/phone-input.feature.test.tsx  | 41 ----------------
 .../phone-input/phone-input.test.tsx          | 49 +++----------------
 2 files changed, 6 insertions(+), 84 deletions(-)
 delete mode 100644 packages/mosaic/src/components/phone-input/phone-input.feature.test.tsx

diff --git a/packages/mosaic/src/components/phone-input/phone-input.feature.test.tsx b/packages/mosaic/src/components/phone-input/phone-input.feature.test.tsx
deleted file mode 100644
index e61bcc59bea..00000000000
--- a/packages/mosaic/src/components/phone-input/phone-input.feature.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { render, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-
-import { MosaicProvider } from '../../mosaic-provider';
-import { PhoneInput } from './phone-input';
-
-describe('PhoneInput country picker alignment', () => {
-  it.each(['sm', 'md', 'lg'] as const)('aligns search text and country flags for a %s input', async size => {
-    const user = userEvent.setup();
-    render(
-      <MosaicProvider>
-        <div style={{ width: 320, margin: 32 }}>
-          <PhoneInput
-            size={size}
-            aria-label='Phone number'
-          />
-        </div>
-      </MosaicProvider>,
-    );
-    const trigger = screen.getByRole('button', { name: 'Country, United States' });
-    await user.click(trigger);
-    const search = screen.getByRole('combobox', { name: 'Search countries' });
-    await waitFor(() => expect(search).toHaveFocus());
-    const country = screen.getByRole('option', { name: /United States/ });
-    const countryName = document.createRange();
-    countryName.selectNodeContents(within(country).getByText('United States'));
-    const triggerFlag = document.createRange();
-    triggerFlag.selectNodeContents(within(trigger).getByText('🇺🇸'));
-    const countryFlag = document.createRange();
-    countryFlag.selectNodeContents(within(country).getByText('🇺🇸'));
-
-    const searchTextLeft =
-      search.getBoundingClientRect().left + Number.parseFloat(getComputedStyle(search).paddingLeft);
-    expect(search.getBoundingClientRect().width).toBeGreaterThan(0);
-    expect.soft(Math.abs(searchTextLeft - countryName.getBoundingClientRect().left)).toBeLessThanOrEqual(0.5);
-    expect
-      .soft(Math.abs(triggerFlag.getBoundingClientRect().left - countryFlag.getBoundingClientRect().left))
-      .toBeLessThanOrEqual(0.5);
-  });
-});
diff --git a/packages/mosaic/src/components/phone-input/phone-input.test.tsx b/packages/mosaic/src/components/phone-input/phone-input.test.tsx
index 4522717911d..f07e61e4822 100644
--- a/packages/mosaic/src/components/phone-input/phone-input.test.tsx
+++ b/packages/mosaic/src/components/phone-input/phone-input.test.tsx
@@ -81,21 +81,6 @@ describe('Mosaic PhoneInput', () => {
     expect(ref).toHaveBeenLastCalledWith(null);
   });
 
-  it('positions the country popup against the full phone field', async () => {
-    const user = userEvent.setup();
-    render(<PhoneInput aria-label='Phone number' />);
-    const group = screen.getByRole('textbox', { name: 'Phone number' }).closest('.cl-phone-input');
-    if (!group) {
-      throw new Error('Phone input group missing');
-    }
-    const measureGroup = vi.spyOn(group, 'getBoundingClientRect');
-
-    await user.click(screen.getByRole('button', { name: 'Country, United States' }));
-
-    await waitFor(() => expect(measureGroup).toHaveBeenCalled());
-    expect(document.querySelector('.cl-phone-input-popup')).toHaveAttribute('data-size', 'anchor');
-  });
-
   it.each(['sm', 'md', 'lg'] as const)(
     'opens and dismisses the country picker with Space for a %s input',
     async size => {
@@ -118,22 +103,17 @@ describe('Mosaic PhoneInput', () => {
       expect(trigger).toHaveAttribute('aria-expanded', 'false');
     },
   );
-  it('renders one grouped telephone control with the default country', () => {
+  it('renders a telephone input with the default country and calling code', () => {
     render(<PhoneInput aria-label='Phone number' />);
 
     const input = screen.getByRole('textbox', { name: 'Phone number' });
     expect(input).toHaveAttribute('type', 'tel');
     expect(input).toHaveAttribute('autocomplete', 'tel-national');
-    expect(input).toHaveClass('cl-input', 'cl-phone-input-control');
-    expect(input).toHaveAttribute('data-variant', 'ghost');
     const countryTrigger = screen.getByRole('button', { name: 'Country, United States' });
-    expect(countryTrigger).toHaveClass('cl-phone-input-country-trigger');
-    expect(countryTrigger.closest('.cl-input-group-start')).not.toBeNull();
+    expect(countryTrigger).toBeInTheDocument();
     expect(screen.queryByText('us')).not.toBeInTheDocument();
     expect(document.querySelector('.cl-phone-input-divider')).toHaveAttribute('aria-hidden', 'true');
-    expect(screen.getByText('+1')).toHaveClass('cl-phone-input-prefix');
-    expect(document.querySelector('.cl-phone-input')).toHaveClass('cl-input-group');
-    expect(document.querySelector('.cl-phone-input')).toHaveAttribute('data-size', 'md');
+    expect(screen.getByText('+1')).toBeInTheDocument();
   });
 
   it('starts on the given default country and dials the number with its code', async () => {
@@ -148,7 +128,7 @@ describe('Mosaic PhoneInput', () => {
     );
 
     expect(screen.getByRole('button', { name: 'Country, Germany' })).toBeInTheDocument();
-    expect(screen.getByText('+49')).toHaveClass('cl-phone-input-prefix');
+    expect(screen.getByText('+49')).toBeInTheDocument();
 
     await user.type(screen.getByRole('textbox', { name: 'Phone number' }), '15123456789');
 
@@ -198,16 +178,12 @@ describe('Mosaic PhoneInput', () => {
 
     await user.click(screen.getByRole('button', { name: 'Country, United States' }));
     const searchInput = screen.getByRole('combobox', { name: 'Search countries' });
-    expect(searchInput).toHaveClass('cl-combobox-input', 'cl-input');
-    expect(searchInput).toHaveAttribute('data-variant', 'ghost');
-    expect(searchInput.closest('.cl-phone-input-country-search')).toBeInTheDocument();
     await user.type(searchInput, 'Greece');
-    expect(screen.getByRole('listbox')).toHaveClass('cl-combobox-list');
-    expect(screen.getByRole('option', { name: /Greece/ })).toHaveClass('cl-combobox-option');
+    expect(screen.getByRole('option', { name: /Greece/ })).toBeInTheDocument();
     await user.keyboard('{ArrowDown}{Enter}');
 
     expect(screen.getByRole('button', { name: 'Country, Greece' })).toBeInTheDocument();
-    expect(screen.getByText('+30')).toHaveClass('cl-phone-input-prefix');
+    expect(screen.getByText('+30')).toBeInTheDocument();
     expect(onCountryChange).toHaveBeenCalledWith('gr');
     expect(onValueChange).toHaveBeenLastCalledWith('+302025550123');
     expect(screen.getByRole('textbox', { name: 'Phone number' })).toHaveFocus();
@@ -528,19 +504,6 @@ describe('Mosaic PhoneInput', () => {
     expect(input).toHaveAttribute('aria-invalid', 'true');
     expect(input).toHaveAccessibleDescription('Enter a valid phone number');
     expect(screen.getByRole('button', { name: 'Country, United States' })).toBeDisabled();
-    expect(document.querySelector('.cl-phone-input')).toHaveAttribute('data-disabled', '');
-    expect(document.querySelector('.cl-phone-input')).toHaveAttribute('data-invalid', '');
-  });
-
-  it.each(['sm', 'md', 'lg'] as const)('reflects the %s size', size => {
-    render(
-      <PhoneInput
-        size={size}
-        aria-label='Phone number'
-      />,
-    );
-
-    expect(document.querySelector('.cl-phone-input')).toHaveAttribute('data-size', size);
   });
 
   it('supports controlled values', async () => {