@astryxdesign/core 0.6.2 → 0.6.3-canary.01fa439

package/src/Chat/ChatDictationButton.test.tsx

@@ -1,43 +1,108 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it, expect} from 'vitest';
-import {render, screen} from '@testing-library/react';
+import {createRef} from 'react';
+import {describe, it, expect, vi} from 'vitest';
+import {fireEvent, render, screen} from '@testing-library/react';
+import {colorVars} from '../theme/tokens.stylex';
 import {ChatDictationButton} from './ChatDictationButton';
+import type {ChatDictationButtonProps} from './ChatDictationButton';
 import type {UseSpeechRecognitionReturn} from './useSpeechRecognition';
 
-const dictation: UseSpeechRecognitionReturn = {
-  isSupported: true,
-  isListening: false,
-  isSpeaking: false,
-  volume: 0,
-  bands: [0, 0, 0, 0, 0],
-  rawBands: [0, 0, 0, 0, 0],
-  interimTranscript: '',
-  start: () => {},
-  stop: () => {},
-  abort: () => {},
-  toggle: () => {},
-};
+function makeDictation(
+  overrides: Partial<UseSpeechRecognitionReturn> = {},
+): UseSpeechRecognitionReturn {
+  return {
+    isSupported: true,
+    isListening: false,
+    isSpeaking: false,
+    volume: 0,
+    bands: [0, 0, 0, 0, 0],
+    rawBands: [0, 0, 0, 0, 0],
+    interimTranscript: '',
+    start: vi.fn(),
+    stop: vi.fn(),
+    abort: vi.fn(),
+    toggle: vi.fn(),
+    ...overrides,
+  };
+}
 
 describe('ChatDictationButton', () => {
-  it('renders a dictation button', () => {
-    render(
-      <ChatDictationButton dictation={dictation} data-testid="dictation" />,
+  it('labels and toggles the idle button', () => {
+    const dictation = makeDictation();
+    render(<ChatDictationButton dictation={dictation} />);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Start dictation'}));
+    expect(dictation.toggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows five hidden visualizer bars and the stop label while listening', () => {
+    const dictation = makeDictation({
+      isListening: true,
+      bands: [0.02, 0.04, 0.08, 0.12, 0.18],
+    });
+    const {container} = render(<ChatDictationButton dictation={dictation} />);
+
+    expect(screen.getByRole('button', {name: 'Stop dictation'})).toBeEnabled();
+    const visualizer = container.querySelector('[aria-hidden="true"]');
+    expect(visualizer).not.toBeNull();
+    expect(visualizer?.children).toHaveLength(5);
+  });
+
+  it('uses theme-owned colors for clipping feedback', () => {
+    const dictation = makeDictation({
+      isListening: true,
+      volume: 0.3,
+      bands: [0.2, 0.2, 0.2, 0.2, 0.2],
+    });
+    const {container} = render(<ChatDictationButton dictation={dictation} />);
+
+    const barStyle = container
+      .querySelector('[aria-hidden="true"] > span')
+      ?.getAttribute('style');
+    expect(barStyle).toContain('color-mix(in srgb');
+    expect(barStyle).toContain(colorVars['--color-accent']);
+    expect(barStyle).toContain(colorVars['--color-error']);
+    expect(barStyle).not.toContain('hsl(');
+  });
+
+  it('hides unsupported dictation by default', () => {
+    const {container} = render(
+      <ChatDictationButton dictation={makeDictation({isSupported: false})} />,
     );
-    expect(screen.getByTestId('dictation')).toBeTruthy();
+
+    expect(container).toBeEmptyDOMElement();
   });
 
-  it('forwards rest props (data-*, aria-*, id) to the root element', () => {
+  it('disables an unsupported button when explicitly kept visible', () => {
     render(
       <ChatDictationButton
-        dictation={dictation}
-        data-testid="dictation"
-        data-custom="x"
-        id="dictate-1"
+        dictation={makeDictation({isSupported: false})}
+        isHiddenWhenUnsupported={false}
       />,
     );
-    const root = screen.getByTestId('dictation');
-    expect(root).toHaveAttribute('data-custom', 'x');
-    expect(root).toHaveAttribute('id', 'dictate-1');
+
+    expect(
+      screen.getByRole('button', {name: 'Start dictation'}),
+    ).toBeDisabled();
+  });
+
+  it('forwards the root ref and accepted span props', () => {
+    const ref = createRef<HTMLSpanElement>();
+    const props = {
+      dictation: makeDictation(),
+      'data-testid': 'dictation',
+      'data-custom': 'x',
+      id: 'dictate-1',
+      label: 'Use voice input',
+      ref,
+    } satisfies ChatDictationButtonProps;
+
+    render(<ChatDictationButton {...props} />);
+
+    expect(ref.current).toBe(screen.getByTestId('dictation'));
+    expect(ref.current).toHaveAttribute('data-custom', 'x');
+    expect(ref.current).toHaveAttribute('id', 'dictate-1');
+    expect(screen.getByRole('button', {name: 'Use voice input'})).toBeEnabled();
   });
 });

package/src/Chat/ChatDictationButton.tsx

@@ -11,7 +11,8 @@
  * A toggle button that connects to useChatDictation. Shows a microphone
  * icon when idle. When listening, replaces the icon with volume-reactive
  * frequency bars (equalizer style) that respond to real mic input.
- * Bars use the accent color and hue-shift when volume clips past 10%.
+ * Bars use the accent color and blend toward the semantic error color when
+ * volume clips past 20%.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts (exports)
@@ -39,7 +40,7 @@ export interface ChatDictationButtonProps extends BaseProps<HTMLSpanElement> {
   dictation: UseSpeechRecognitionReturn;
   /** Button size. @default "md" */
   size?: 'sm' | 'md';
-  /** Hide the button when SpeechRecognition is not supported. @default true */
+  /** Hide the button when SpeechRecognition is unsupported. When false, the unsupported button remains visible but disabled. @default true */
   isHiddenWhenUnsupported?: boolean;
   /** Accessible label override. */
   label?: string;
@@ -128,13 +129,13 @@ export function ChatDictationButton({
   // Boost each band for visibility — quiet speech (0-10%) maps to full visual range
   const boostedBands = bands.map(b => Math.min(Math.pow(b / 0.2, 0.5), 1));
 
-  // Hue shift from accent color when volume clips past 10%
+  // Blend toward the theme's semantic error color as clipping increases.
   const isClipping = rawVolume >= 0.2;
-  const hueShift = isClipping ? Math.min((rawVolume - 0.2) / 0.1, 1) * 60 : 0;
+  const clippingStrength = Math.min((rawVolume - 0.2) / 0.1, 1) * 100;
 
   const barColor = isClipping
-    ? `hsl(calc(var(--accent-hue, 210) + ${hueShift}), 80%, 50%)`
-    : `var(--color-accent, ${colorVars['--color-accent']})`;
+    ? `color-mix(in srgb, ${colorVars['--color-accent']}, ${colorVars['--color-error']} ${clippingStrength}%)`
+    : colorVars['--color-accent'];
 
   const {barWidth, barGap, barMaxHeight} = SIZE_CONFIG[size];
 
@@ -180,6 +181,7 @@ export function ChatDictationButton({
         size={size}
         icon={isListening ? undefined : <Icon icon="microphone" size={size} />}
         isIconOnly
+        isDisabled={!dictation.isSupported}
         onClick={dictation.toggle}
       />
     </span>

package/src/Chat/ChatSendButton.test.tsx

@@ -180,10 +180,7 @@ describe('ChatSendButton', () => {
       expect(send).toBeEnabled();
 
       fireEvent.click(send);
-      // Only that the click reaches the composer's submit path is this
-      // button's behavior. The submitted value comes from the composer's own
-      // state, not from here, so asserting it would pin ChatComposer instead.
-      expect(onSubmit).toHaveBeenCalledTimes(1);
+      expect(onSubmit).toHaveBeenCalledWith('hello');
     });
   });
 });

package/src/Chat/ChatSendButton.tsx

@@ -95,7 +95,7 @@ export function ChatSendButton(props: ChatSendButtonProps): ReactNode {
     ...rest
   } = props;
 
-  const handleSend = onSend ?? (() => context?.onSubmit(''));
+  const handleSend = onSend ?? (() => context?.onSubmit(context.value));
   const defaultStopIcon = useIcon('stop');
   const defaultSendIcon = useIcon('arrowUp');
 

package/src/Chat/index.ts

@@ -25,6 +25,7 @@ export {ChatComposerInput, ChatComposerTokenElement} from './ChatComposerInput';
 export type {
   ChatComposerInputProps,
   ChatComposerInputHandle,
+  ChatComposerTokenElementProps,
   ChatComposerToken,
   ChatComposerTrigger,
   ChatComposerTriggerItem,

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -137,6 +137,17 @@ export const docs = {
     ],
   },
   usage: {
+    accessibility: [
+      {
+        name: 'Checkbox box',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1',
+        states: ['Rest', 'Hover', 'Pointer down', 'Checked'],
+        description:
+          'The box edge (unchecked) and fill (checked) must have at least 3:1 contrast with the surface behind them. For Hover and Pointer down, measure the final colors after the tint and the pressed overlay are applied.',
+      },
+    ],
     description: 'CheckboxInput toggles a single on/off value. Use it for settings like "Enable notifications", terms acceptance, or opt-in choices. For multiple checkboxes in a group, use CheckboxList instead.',
     bestPractices: [
       { guidance: true, description: 'Always provide a visible label so the user knows what they are toggling. Use isLabelHidden only when surrounding context makes it obvious.' },

package/src/CheckboxInput/CheckboxInput.test.tsx

@@ -15,6 +15,7 @@
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {hasPressedArm} from '../__tests__/pressState';
 import {CheckboxInput} from './CheckboxInput';
 import {Theme} from '../theme/Theme';
 import {defineTheme} from '../theme/defineTheme';
@@ -763,3 +764,36 @@ describe('label theme target', () => {
     expect(label).toHaveClass('astryx-checkbox-label');
   });
 });
+
+describe('pressed state', () => {
+  it('paints the pressed overlay over the indicator while the row is pressed', () => {
+    const {container} = render(
+      <CheckboxInput label="Accept terms" value={false} onChange={() => {}} />,
+    );
+    const box = container.querySelector('.astryx-checkbox-indicator');
+    const wrapper = box?.parentElement?.parentElement;
+    if (wrapper == null) {
+      throw new Error('the checkbox has no indicator wrapper to press');
+    }
+    // The owner paints over the resolved indicator, so the treatment survives a
+    // theme replacement that does not forward style props.
+    expect(hasPressedArm(wrapper)).toBe(true);
+  });
+
+  it('does not expose a pressed arm on a disabled checkbox', () => {
+    const {container} = render(
+      <CheckboxInput
+        label="Unavailable"
+        value={false}
+        onChange={() => {}}
+        isDisabled
+      />,
+    );
+    const box = container.querySelector('.astryx-checkbox-indicator');
+    const wrapper = box?.parentElement?.parentElement;
+    if (wrapper == null) {
+      throw new Error('the checkbox has no indicator wrapper');
+    }
+    expect(hasPressedArm(wrapper)).toBe(false);
+  });
+});

package/src/CheckboxInput/CheckboxInput.tsx

@@ -70,6 +70,22 @@ const styles = stylex.create({
     flexShrink: 0,
     isolation: 'isolate',
   },
+  // The owner paints this layer over the resolved indicator, so a theme
+  // replacement cannot accidentally drop the component's pressed contract.
+  indicatorPressOverlay: {
+    '::after': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+      borderRadius: radiusVars['--radius-inner'],
+      pointerEvents: 'none',
+      backgroundColor: {
+        default: 'transparent',
+        [stylex.when.ancestor(':active', indicatorScope)]:
+          colorVars['--color-overlay-pressed'],
+      },
+    },
+  },
   // Holds only the indicator, so the focus ring has one unambiguous target.
   // `display: contents` adds no box of its own — the indicator keeps whatever
   // layout relationship it already had with the wrapper.
@@ -399,7 +415,11 @@ export function CheckboxInput({
           !isDisabled && indicatorScope,
         )}>
         <div
-          {...stylex.props(styles.checkboxWrapper, wrapperSizeStyles[size])}
+          {...stylex.props(
+            styles.checkboxWrapper,
+            wrapperSizeStyles[size],
+            !isDisabled && styles.indicatorPressOverlay,
+          )}
           {...focusProps}>
           <input
             {...rest}

package/src/ClickableCard/ClickableCard.test.tsx

@@ -2,6 +2,7 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import {ClickableCard} from './ClickableCard';
 
 describe('ClickableCard', () => {
@@ -47,6 +48,47 @@ describe('ClickableCard', () => {
     expect(handleClick).toHaveBeenCalledTimes(1);
   });
 
+  it('calls onClick once when the accessible control itself is clicked', () => {
+    const handleClick = vi.fn();
+    render(
+      <ClickableCard label="Test card" onClick={handleClick}>
+        <span>Content</span>
+      </ClickableCard>,
+    );
+    // Pointer activation aimed at the element carrying the role — what
+    // speech input, assistive technology, and automation dispatch.
+    fireEvent.click(screen.getByRole('button', {name: 'Test card'}));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('passes the card surface as currentTarget for surface clicks', () => {
+    const seen: EventTarget[] = [];
+    render(
+      <ClickableCard
+        label="Test card"
+        onClick={e => seen.push(e.currentTarget)}>
+        <span>Content</span>
+      </ClickableCard>,
+    );
+    fireEvent.click(screen.getByText('Content'));
+    expect(seen).toHaveLength(1);
+    expect(seen[0]).toBe(screen.getByText('Content').parentElement);
+  });
+
+  it('calls onClick exactly once when the surface of an href card is clicked without preventDefault', () => {
+    const handleClick = vi.fn();
+    render(
+      <ClickableCard label="Nav card" href="/settings" onClick={handleClick}>
+        <span>Content</span>
+      </ClickableCard>,
+    );
+    // The container hook proxies the surface click to the link with
+    // `link.click()`; that synthetic click bubbles back through the card and
+    // must not run the consumer callback a second time.
+    fireEvent.click(screen.getByText('Content'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
   it('does NOT call onClick when a nested button is clicked', () => {
     const handleCardClick = vi.fn();
     const handleButtonClick = vi.fn();
@@ -86,25 +128,80 @@ describe('ClickableCard', () => {
     expect(link).toHaveAttribute('target', '_blank');
   });
 
-  it('disabled button is disabled', () => {
+  it('disabled button is disabled and the surface runs nothing', () => {
     const handleClick = vi.fn();
     render(
       <ClickableCard label="Disabled" onClick={handleClick} isDisabled>
-        Content
+        <span>Content</span>
       </ClickableCard>,
     );
     const button = screen.getByRole('button', {name: 'Disabled'});
     expect(button).toBeDisabled();
+    fireEvent.click(screen.getByText('Content'));
+    fireEvent.click(button);
+    expect(handleClick).not.toHaveBeenCalled();
   });
 
-  it('disabled link has aria-disabled', () => {
+  it('disabled link has aria-disabled, leaves the tab order, and the surface runs nothing', () => {
+    const handleClick = vi.fn();
     render(
-      <ClickableCard label="Disabled link" href="/settings" isDisabled>
-        Content
+      <ClickableCard
+        label="Disabled link"
+        href="/settings"
+        onClick={handleClick}
+        isDisabled>
+        <span>Content</span>
       </ClickableCard>,
     );
     const link = screen.getByRole('link', {name: 'Disabled link'});
     expect(link).toHaveAttribute('aria-disabled', 'true');
+    expect(link).toHaveAttribute('tabindex', '-1');
+    fireEvent.click(screen.getByText('Content'));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('runs onClick once from the keyboard via the hidden button', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(
+      <ClickableCard label="Test card" onClick={handleClick}>
+        <span>Content</span>
+      </ClickableCard>,
+    );
+    await user.tab();
+    expect(screen.getByRole('button', {name: 'Test card'})).toHaveFocus();
+    await user.keyboard('{Enter}');
+    await user.keyboard(' ');
+    expect(handleClick).toHaveBeenCalledTimes(2);
+  });
+
+  it('does NOT call onClick when a nested input is clicked', () => {
+    const handleCardClick = vi.fn();
+    render(
+      <ClickableCard label="Test card" onClick={handleCardClick}>
+        <input aria-label="Quantity" readOnly value="1" />
+      </ClickableCard>,
+    );
+    fireEvent.click(screen.getByRole('textbox', {name: 'Quantity'}));
+    expect(handleCardClick).not.toHaveBeenCalled();
+  });
+
+  it('does NOT call onClick when text inside the card is selected', () => {
+    const handleClick = vi.fn();
+    render(
+      <ClickableCard label="Test card" onClick={handleClick}>
+        <span>Selectable body text</span>
+      </ClickableCard>,
+    );
+    const text = screen.getByText('Selectable body text');
+    const range = document.createRange();
+    range.selectNodeContents(text);
+    const selection = document.getSelection()!;
+    selection.removeAllRanges();
+    selection.addRange(range);
+    fireEvent.click(text);
+    expect(handleClick).not.toHaveBeenCalled();
+    selection.removeAllRanges();
   });
 
   describe('elevation', () => {

package/src/Collapsible/Collapsible.doc.mjs

@@ -82,6 +82,17 @@ export const docs = {
     {name: 'CollapsibleGroup'},
   ],
   usage: {
+    accessibility: [
+      {
+        name: 'Trigger label',
+        category: 'Color contrast',
+        criterion: '1.4.3 Contrast (Minimum)',
+        requirement: '4.5:1',
+        states: ['Rest', 'Pointer down'],
+        description:
+          'The trigger text must have at least 4.5:1 contrast with the surface behind it. For Pointer down, measure against the pressed overlay the trigger row paints while it is pressed.',
+      },
+    ],
     description: 'Collapsible hides and reveals content behind a trigger button. Use it in settings panels, FAQ pages, or detail views to keep the page scannable while letting users drill into sections they care about. Wrap multiple collapsibles in CollapsibleGroup for accordion behavior. For custom collapsible components, use the `useCollapsible` hook directly (`astryx hook useCollapsible`).',
     bestPractices: [
       { guidance: true, description: 'Use hasDividers on CollapsibleGroup for FAQ-style lists: built-in row hairlines with themed border tokens, no hand-rolled borders.' },

package/src/Collapsible/Collapsible.test.tsx

@@ -12,6 +12,7 @@
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {hasPressedArm} from '../__tests__/pressState';
 import {Collapsible} from './Collapsible';
 import {CollapsibleGroup} from './CollapsibleGroup';
 
@@ -615,3 +616,23 @@ describe('Collapsible', () => {
     });
   });
 });
+
+describe('pressed state', () => {
+  it('paints the pressed overlay on the trigger row while it is pressed', () => {
+    render(
+      <Collapsible trigger="Details">
+        <p>Body</p>
+      </Collapsible>,
+    );
+    expect(hasPressedArm(screen.getByRole('button'))).toBe(true);
+  });
+
+  it('does not press a disabled trigger', () => {
+    render(
+      <Collapsible trigger="Details" isDisabled>
+        <p>Body</p>
+      </Collapsible>,
+    );
+    expect(hasPressedArm(screen.getByRole('button'))).toBe(false);
+  });
+});

package/src/Collapsible/Collapsible.tsx

@@ -48,6 +48,7 @@ import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 
 const styles = stylex.create({
   root: {
@@ -411,6 +412,10 @@ export function Collapsible({
           focusOutlineProps.focusVisible(
             styles.trigger,
             density != null && triggerDensity[density],
+            // The system's pressed overlay on the disclosure row. The trigger
+            // has no hover surface of its own, so this is the one background
+            // it paints, and only while it is pressed.
+            !isDisabled && interactionOverlayStyles.pressedBackgroundColor,
             isDisabled && styles.triggerDisabled,
           ),
         )}>

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -73,9 +73,14 @@ const styles = stylex.create({
     backgroundColor: 'transparent',
     color: colorVars['--color-text-primary'],
     fontFamily: typographyVars['--font-family-body'],
+    // The 16px floor is iOS-only: iOS Safari zooms the page when a focused
+    // control sits under 16px, and only iOS WebKit implements
+    // -webkit-touch-callout to key the coarse-pointer floor to it.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     padding: 0,

package/src/ComplexSelector/ComplexSelector.tsx

@@ -65,9 +65,14 @@ const styles = stylex.create({
     paddingBlock: spacingVars['--spacing-2'],
     paddingInline: spacingVars['--spacing-3'],
     fontFamily: typographyVars['--font-family-body'],
+    // The 16px floor is iOS-only: iOS Safari zooms the page when a focused
+    // control sits under 16px, and only iOS WebKit implements
+    // -webkit-touch-callout to key the coarse-pointer floor to it.
     fontSize: {
       default: typeScaleVars['--text-label-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-label-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-label-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-label-leading'],
     color: colorVars['--color-text-primary'],

package/src/DateInput/DateInput.tsx

@@ -99,9 +99,14 @@ const styles = stylex.create({
     borderStyle: 'none',
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
+    // The 16px floor is iOS-only: iOS Safari zooms the page when a focused
+    // control sits under 16px, and only iOS WebKit implements
+    // -webkit-touch-callout to key the coarse-pointer floor to it.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],

package/src/DateInput/NativeDateField.tsx

@@ -100,10 +100,14 @@ const styles = stylex.create({
     borderStyle: 'none',
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
-    // Below 16px iOS zooms the page when the field takes focus.
+    // Below 16px iOS zooms the page when the field takes focus. Only iOS
+    // WebKit implements -webkit-touch-callout, so the coarse-pointer floor is
+    // keyed to iOS alone.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],
@@ -112,11 +116,20 @@ const styles = stylex.create({
     // A date control's intrinsic height comes from its inner edit fields, not
     // from `line-height`, so it renders ~2px taller than a text input and its
     // value sits off the shared baseline inside the same flex row. One line
-    // box is exactly what the text field occupies.
-    height: stylex.firstThatWorks(
-      '1lh',
-      `calc(max(1rem, ${typeScaleVars['--text-body-size']}) * ${typeScaleVars['--text-body-leading']})`,
-    ),
+    // box is exactly what the text field occupies. The calc fallback mirrors
+    // the iOS-only floor above; browsers with `1lh` track it for free.
+    height: {
+      default: stylex.firstThatWorks(
+        '1lh',
+        `calc(${typeScaleVars['--text-body-size']} * ${typeScaleVars['--text-body-leading']})`,
+      ),
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': stylex.firstThatWorks(
+          '1lh',
+          `calc(max(1rem, ${typeScaleVars['--text-body-size']}) * ${typeScaleVars['--text-body-leading']})`,
+        ),
+      },
+    },
     // iOS gives date controls their own button-like chrome, with inner
     // spacing and a centred value that no reset of ours can reach.
     WebkitAppearance: 'none',
@@ -187,9 +200,12 @@ const styles = stylex.create({
     // covers — one line of that leading fills its height exactly, which puts
     // the glyphs on the input's own baseline.
     display: 'block',
+    // ...with the input's own iOS floor, so the two baselines stay shared.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     // A tap has to reach the control underneath — that is what raises the

package/src/DateInput/TouchDateField.tsx

@@ -194,10 +194,14 @@ const styles = stylex.create({
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
     // Below 16px iOS zooms the page on focus. The field is focusable even
-    // though it is not typable, so it needs the same floor DateInput has.
+    // though it is not typable, so it needs the same floor DateInput has —
+    // keyed to iOS alone, since only iOS WebKit implements
+    // -webkit-touch-callout.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],