@astryxdesign/core 0.6.2 → 0.6.3-canary.0899f21

package/src/hooks/useClickableContainer.test.tsx

@@ -0,0 +1,236 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useClickableContainer.test.tsx
+ * @input Uses vitest, @testing-library/react, useClickableContainer
+ * @output Unit tests for the hook's navigation paths
+ * @position Testing; pins the shared navigation-destination rule on every
+ *   activation method the hook owns — plain click (location.href), new tab
+ *   (target="_blank"), Cmd/Ctrl-click, middle-click, and the delegated click
+ *   on the interactive ref. None of these pass through React DOM's own href
+ *   vetting, so each one has a positive and a blocked case here.
+ */
+
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {useRef} from 'react';
+import {fireEvent, render, screen} from '@testing-library/react';
+import {useClickableContainer} from './useClickableContainer';
+
+// The scheme the rule exists to stop (kept in consts so the JSX below stays
+// lint-clean — the tests are ABOUT these URLs never navigating).
+const scriptUrl = 'javascript:alert(1)';
+// The same scheme hidden behind a control character a browser ignores.
+const hiddenScriptUrl = 'java\nscript:alert(1)';
+
+function Card({href, target}: {href: string; target?: string}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const {onClick, onMouseUp} = useClickableContainer({
+    containerRef,
+    href,
+    target,
+  });
+  return (
+    <div
+      ref={containerRef}
+      data-testid="card"
+      onClick={onClick}
+      onMouseUp={onMouseUp}>
+      content
+    </div>
+  );
+}
+
+/**
+ * Card that delegates plain clicks to an inner link (the ClickableCard /
+ * Item shape). The inner anchor's own click is spied on so the test observes
+ * whether the hook activated it.
+ */
+function DelegatingCard({
+  href,
+  onAnchorClick,
+}: {
+  href: string;
+  onAnchorClick: () => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const interactiveRef = useRef<HTMLAnchorElement>(null);
+  const {onClick, onMouseUp} = useClickableContainer({
+    containerRef,
+    interactiveRef,
+    href,
+  });
+  return (
+    <div
+      ref={containerRef}
+      data-testid="card"
+      onClick={onClick}
+      onMouseUp={onMouseUp}>
+      content
+      <a
+        ref={interactiveRef}
+        // The anchor is the delegate, not the subject: the tests below use a
+        // fixed inert href here so that only the hook's decision is observed.
+        href="#inner"
+        data-testid="inner-link"
+        onClick={e => {
+          e.preventDefault();
+          onAnchorClick();
+        }}>
+        inner
+      </a>
+    </div>
+  );
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe('useClickableContainer navigation — new tab (target="_blank")', () => {
+  it('opens ordinary hrefs in a new tab', () => {
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null);
+    render(<Card href="https://example.com/docs" target="_blank" />);
+    fireEvent.click(screen.getByTestId('card'));
+    expect(open).toHaveBeenCalledWith(
+      'https://example.com/docs',
+      '_blank',
+      'noopener',
+    );
+  });
+
+  it('does not open a script-scheme href in a new tab', () => {
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null);
+    // eslint-disable-next-line @eslint-react/dom-no-script-url -- the test proves this URL never navigates
+    render(<Card href={scriptUrl} target="_blank" />);
+    fireEvent.click(screen.getByTestId('card'));
+    expect(open).not.toHaveBeenCalled();
+  });
+});
+
+describe('useClickableContainer navigation — Cmd/Ctrl-click', () => {
+  it('opens ordinary hrefs in a new tab on Cmd-click', () => {
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null);
+    render(<Card href="/docs" />);
+    fireEvent.click(screen.getByTestId('card'), {metaKey: true});
+    expect(open).toHaveBeenCalledWith('/docs', '_blank', 'noopener');
+  });
+
+  it('opens ordinary hrefs in a new tab on Ctrl-click', () => {
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null);
+    render(<Card href="/docs" />);
+    fireEvent.click(screen.getByTestId('card'), {ctrlKey: true});
+    expect(open).toHaveBeenCalledWith('/docs', '_blank', 'noopener');
+  });
+
+  it('does not open a script-scheme href on Cmd-click', () => {
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null);
+    // eslint-disable-next-line @eslint-react/dom-no-script-url -- the test proves this URL never navigates
+    render(<Card href={scriptUrl} />);
+    fireEvent.click(screen.getByTestId('card'), {metaKey: true});
+    expect(open).not.toHaveBeenCalled();
+  });
+
+  it('does not open a script-scheme href on Ctrl-click', () => {
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null);
+    // eslint-disable-next-line @eslint-react/dom-no-script-url -- the test proves this URL never navigates
+    render(<Card href={scriptUrl} />);
+    fireEvent.click(screen.getByTestId('card'), {ctrlKey: true});
+    expect(open).not.toHaveBeenCalled();
+  });
+});
+
+describe('useClickableContainer navigation — middle-click', () => {
+  it('opens ordinary hrefs on middle-click', () => {
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null);
+    render(<Card href="/docs" />);
+    fireEvent.mouseUp(screen.getByTestId('card'), {button: 1});
+    expect(open).toHaveBeenCalledWith('/docs', '_blank', 'noopener');
+  });
+
+  it('does not open a script-scheme href on middle-click', () => {
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null);
+    // eslint-disable-next-line @eslint-react/dom-no-script-url -- the test proves this URL never navigates
+    render(<Card href={scriptUrl} />);
+    fireEvent.mouseUp(screen.getByTestId('card'), {button: 1});
+    expect(open).not.toHaveBeenCalled();
+  });
+});
+
+describe('useClickableContainer navigation — plain click (location.href)', () => {
+  // jsdom does not navigate, so assigning `location.href` is a no-op there
+  // and would let a missing guard pass unnoticed. Stand in a plain object so
+  // the assignment is observable.
+  let location: {href: string};
+
+  beforeEach(() => {
+    location = {href: 'https://app.example/start'};
+    vi.stubGlobal('location', location);
+  });
+
+  it('assigns ordinary hrefs to location', () => {
+    render(<Card href="/docs" />);
+    fireEvent.click(screen.getByTestId('card'));
+    expect(location.href).toBe('/docs');
+  });
+
+  it('does not assign a script-scheme href to location', () => {
+    // eslint-disable-next-line @eslint-react/dom-no-script-url -- the test proves this URL never navigates
+    render(<Card href={scriptUrl} />);
+    fireEvent.click(screen.getByTestId('card'));
+    expect(location.href).toBe('https://app.example/start');
+  });
+
+  it('does not assign a control-character-hidden script scheme to location', () => {
+    // eslint-disable-next-line @eslint-react/dom-no-script-url -- the test proves this URL never navigates
+    render(<Card href={hiddenScriptUrl} />);
+    fireEvent.click(screen.getByTestId('card'));
+    expect(location.href).toBe('https://app.example/start');
+  });
+});
+
+describe('useClickableContainer navigation — delegated interactive ref', () => {
+  it('delegates ordinary hrefs to the inner link', () => {
+    const onAnchorClick = vi.fn();
+    render(<DelegatingCard href="/docs" onAnchorClick={onAnchorClick} />);
+    fireEvent.click(screen.getByTestId('card'));
+    expect(onAnchorClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not delegate a script-scheme href to the inner link', () => {
+    const onAnchorClick = vi.fn();
+    // eslint-disable-next-line @eslint-react/dom-no-script-url -- the test proves this URL never navigates
+    render(<DelegatingCard href={scriptUrl} onAnchorClick={onAnchorClick} />);
+    fireEvent.click(screen.getByTestId('card'));
+    expect(onAnchorClick).not.toHaveBeenCalled();
+  });
+
+  it('a click on the inner link itself is left to the link', () => {
+    const onAnchorClick = vi.fn();
+    render(<DelegatingCard href="/docs" onAnchorClick={onAnchorClick} />);
+    fireEvent.click(screen.getByTestId('inner-link'));
+    // The anchor's own handler ran once; the hook did not proxy a second one.
+    expect(onAnchorClick).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('useClickableContainer navigation — blocked href keeps the rest', () => {
+  it('still fires the onClick handler for a blocked href', () => {
+    const onClick = vi.fn();
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null);
+    function Surface() {
+      const containerRef = useRef<HTMLDivElement>(null);
+      const handlers = useClickableContainer({
+        containerRef,
+        href: scriptUrl,
+        target: '_blank',
+        onClick,
+      });
+      return <div ref={containerRef} data-testid="card" {...handlers} />;
+    }
+    render(<Surface />);
+    fireEvent.click(screen.getByTestId('card'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(open).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/useClickableContainer.ts

@@ -11,11 +11,17 @@
  * Solves the "nested interactive elements" problem: when a card is clickable
  * but contains buttons/links, clicking those should NOT trigger the card's action.
  *
+ * Every navigation exit here (window.open, location.href, and the delegated
+ * click on the interactive ref) runs after the shared navigation-destination
+ * rule in utils/safeUrl.ts; a blocked href does not navigate by any
+ * activation method.
+ *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts (export)
  */
 
 import {useCallback, useEffect, type RefObject, type MouseEvent} from 'react';
+import {isSafeUrl} from '../utils/safeUrl';
 
 /**
  * Canonical list of interactive element selectors — native controls plus
@@ -89,7 +95,11 @@ export interface UseClickableContainerOptions {
   interactiveRef?: RefObject<HTMLElement | null>;
   /** Click handler */
   onClick?: (event: MouseEvent<HTMLElement>) => void;
-  /** Navigation URL — when provided, clicking the container navigates */
+  /**
+   * Navigation URL — when provided, clicking the container navigates. Checked
+   * with the shared navigation rule (utils/safeUrl.ts) before any activation
+   * method (plain, new-tab, Cmd/Ctrl-click, middle-click, delegated click).
+   */
   href?: string;
   /** Link target */
   target?: string;
@@ -180,8 +190,12 @@ export function useClickableContainer({
         return;
       }
 
-      // Navigate if href is provided
-      if (href != null) {
+      // Navigate if href is provided. React DOM vets the hrefs it writes as
+      // attributes; nothing below passes through React, so the shared
+      // navigation rule decides once, before target, modifier key, or the
+      // delegated anchor can select a sink. A blocked href simply does not
+      // navigate — the click handler above still ran.
+      if (href != null && isSafeUrl(href)) {
         const shouldOpenNewTab =
           target === '_blank' || event.ctrlKey || event.metaKey;
         if (shouldOpenNewTab) {
@@ -230,11 +244,13 @@ export function useClickableContainer({
         return;
       }
 
-      // Middle-click on href opens in new tab
+      // Middle-click on href opens in new tab (same scheme rule as onClick —
+      // this navigation never passes through React either).
       const isMiddleClick = event.button === 1;
       if (
         isMiddleClick &&
         href != null &&
+        isSafeUrl(href) &&
         (eventTarget === event.currentTarget ||
           !hasInteractiveAncestor(eventTarget, containerEl))
       ) {

package/src/hooks/useScrollableArea.doc.mjs

@@ -1,5 +1,12 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+/**
+ * @file useScrollableArea.doc.mjs
+ * @input Shared scroll hook's fixed and entry-time keyboard policies
+ * @output Consumer guidance for named viewports and safe focus delegation
+ * @position Hook documentation consumed by the CLI and docsite
+ */
+
 /** @type {import('@astryxdesign/cli/authoring').HookDoc} */
 export const docs = {
   name: 'useScrollableArea',
@@ -18,7 +25,7 @@ export const docs = {
       name: 'options',
       type: 'UseScrollableAreaOptions',
       description:
-        'Logical scroll intent, keyboard owner, overscroll policy, and fitting Sticky containment.',
+        'Logical scroll intent, fixed or automatic keyboard owner, overscroll policy, and fitting Sticky containment.',
       required: true,
     },
   ],
@@ -59,7 +66,12 @@ export const docs = {
       {
         guidance: true,
         description:
-          'Use content keyboard ownership when an existing focusable descendant gives keyboard users access to all overflowed content.',
+          'Use contentOrViewport to delegate forward Tab entry to the first sequential native link or button when it preserves native scroll keys. Inputs, composite widgets, and nested scroll areas retain the named viewport stop. Shift+Tab from the delegated first child skips the viewport; pointer and programmatic focus stay on it.',
+      },
+      {
+        guidance: true,
+        description:
+          'Use content keyboard ownership when your integration already supplies keyboard access to the full scroll range. Automatic delegation checks current content at each keyboard entry without continuously tracking its focusability.',
       },
       {
         guidance: true,
@@ -85,7 +97,7 @@ export const docsDense = {
     'Composes logical-axis scrolling into caller-owned viewport/content elements with stable effective-axis and edge state.',
   paramDescriptions: {
     options:
-      'axis, keyboard owner, allow/contain overscroll policy, and fitting Sticky containment.',
+      'axis, fixed/automatic keyboard owner, allow/contain overscroll policy, and fitting Sticky containment.',
   },
   returnDescriptions: {
     getViewportProps:

package/src/hooks/useScrollableArea.test.tsx

@@ -1,8 +1,15 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+/**
+ * @file useScrollableArea.test.tsx
+ * @input Shared scroll hook, mocked geometry, and observed DOM changes
+ * @output Regression coverage for measurement, composition, and stable viewport access
+ * @position DOM-level hook contract; native traversal is verified in browser tests
+ */
+
 import {act, render, screen} from '@testing-library/react';
 import * as stylex from '@stylexjs/stylex';
-import {useRef, type Ref} from 'react';
+import {useRef, type ReactNode, type Ref} from 'react';
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import {
   useScrollableArea,
@@ -194,6 +201,57 @@ describe('useScrollableArea', () => {
     expect(viewport.getAttribute('style')).toContain('--x-overflowY: hidden');
   });
 
+  it('keeps the named viewport available while content eligibility changes', () => {
+    function AdaptiveFixture({children}: {children?: ReactNode}) {
+      const area = useScrollableArea({
+        axis: 'block',
+        keyboardAccess: {
+          owner: 'contentOrViewport',
+          label: 'Adaptive results',
+          role: 'region',
+        },
+      });
+      return (
+        <div data-testid="adaptive-viewport" {...area.getViewportProps()}>
+          <div data-testid="adaptive-content" {...area.getContentProps()}>
+            {children}
+          </div>
+        </div>
+      );
+    }
+
+    vi.spyOn(HTMLElement.prototype, 'getClientRects').mockReturnValue([
+      new DOMRect(0, 0, 20, 20),
+    ] as unknown as DOMRectList);
+    const {rerender} = render(<AdaptiveFixture>Plain text</AdaptiveFixture>);
+    const viewport = screen.getByTestId('adaptive-viewport');
+    const content = screen.getByTestId('adaptive-content');
+    makeMeasurable(viewport);
+    setGeometry(viewport, {scrollHeight: 180});
+
+    void act(() => viewport.dispatchEvent(new Event('scroll')));
+    flushFrame();
+    expect(viewport).toHaveAttribute('role', 'region');
+    expect(viewport).toHaveAccessibleName('Adaptive results');
+    expect(viewport).toHaveAttribute('tabindex', '0');
+
+    viewport.focus();
+    rerender(
+      <AdaptiveFixture>
+        <button type="button">Use existing action</button>
+      </AdaptiveFixture>,
+    );
+    void act(() => content.dispatchEvent(new Event('transitionend')));
+    flushFrame();
+    expect(viewport).toHaveAttribute('tabindex', '0');
+    expect(viewport).toHaveFocus();
+
+    rerender(<AdaptiveFixture>Plain text again</AdaptiveFixture>);
+    void act(() => content.dispatchEvent(new Event('transitionend')));
+    flushFrame();
+    expect(viewport).toHaveAttribute('tabindex', '0');
+  });
+
   it('requires scroll-capable computed overflow and more than 1px excess geometry', () => {
     render(<Fixture />);
     const viewport = screen.getByTestId('viewport');

package/src/hooks/useScrollableArea.ts

@@ -4,8 +4,8 @@
 
 /**
  * @file useScrollableArea.ts
- * @input Logical scroll intent, keyboard ownership, caller-owned viewport/content props
- * @output Safe prop getters and stable per-axis effective scroll state
+ * @input Logical scroll intent, focus-time keyboard delegation, caller-owned viewport/content props
+ * @output Safe prop getters, native keyboard entry, and stable per-axis effective scroll state
  * @position Canonical behavior core for ScrollableArea and structure-owning adopters
  *
  * SYNC: When modified, update:
@@ -26,6 +26,7 @@ import {
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
+import {attachScrollKeyboardDelegation} from './scrollKeyboardDelegation';
 import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect';
 import {mergeProps} from '../utils/mergeProps';
 import {mergeRefs} from '../utils/mergeRefs';
@@ -48,7 +49,12 @@ export type ScrollStickyContainment = 'whenScrollable' | 'always';
 
 export type ScrollKeyboardAccess =
   | {owner: 'content'}
-  | {owner: 'viewport'; label: string; role?: 'group' | 'region'};
+  | {owner: 'viewport'; label: string; role?: 'group' | 'region'}
+  | {
+      owner: 'contentOrViewport';
+      label: string;
+      role?: 'group' | 'region';
+    };
 
 export interface ScrollAxisState {
   isScrollable: boolean;
@@ -285,6 +291,8 @@ export function useScrollableArea({
     content.addEventListener('transitionend', scheduleMeasure);
     content.addEventListener('animationend', scheduleMeasure);
 
+    // Geometry invalidation is independent of keyboard eligibility. The latter
+    // is inspected only on native keyboard entry, never by these observers.
     const mutationObserver =
       typeof MutationObserver === 'undefined'
         ? null
@@ -346,6 +354,20 @@ export function useScrollableArea({
     [axis, measured],
   );
 
+  const hasEffectiveAxis =
+    state.inline.isScrollable || state.block.isScrollable;
+  useIsomorphicLayoutEffect(() => {
+    if (
+      keyboardAccess.owner !== 'contentOrViewport' ||
+      !hasEffectiveAxis ||
+      viewport == null ||
+      content == null
+    ) {
+      return;
+    }
+    return attachScrollKeyboardDelegation(viewport, content);
+  }, [content, hasEffectiveAxis, keyboardAccess.owner, viewport]);
+
   const getViewportProps = useCallback(
     <E extends HTMLElement>(
       props: ScrollableElementProps<E> = {},
@@ -385,8 +407,9 @@ export function useScrollableArea({
           ),
         ),
       ) as ScrollableElementProps<E>;
+      const viewportIsKeyboardOwner = keyboardAccess.owner !== 'content';
       const keepsProgrammaticFocus =
-        !hasEffectiveAxis &&
+        (!viewportIsKeyboardOwner || !hasEffectiveAxis) &&
         viewport != null &&
         typeof document !== 'undefined' &&
         document.activeElement === viewport;
@@ -409,15 +432,16 @@ export function useScrollableArea({
       }
 
       const keyboardProps =
-        keyboardAccess.owner === 'viewport'
+        keyboardAccess.owner !== 'content'
           ? {
               role: keyboardAccess.role ?? 'group',
               'aria-label': keyboardAccess.label,
-              tabIndex: hasEffectiveAxis
-                ? 0
-                : keepsProgrammaticFocus
-                  ? -1
-                  : undefined,
+              tabIndex:
+                viewportIsKeyboardOwner && hasEffectiveAxis
+                  ? 0
+                  : keepsProgrammaticFocus
+                    ? -1
+                    : undefined,
             }
           : {};
 

package/src/index.ts

@@ -161,6 +161,9 @@ export * from './Spinner';
 // Timestamp display
 export * from './Timestamp';
 
+// Elapsed timer display
+export * from './Timer';
+
 // Overlay
 export * from './Overlay';
 export * from './Outline';

package/src/inputFontFloor.test.ts

@@ -0,0 +1,106 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file inputFontFloor.test.ts
+ * @input Uses node:fs and node:path to read the text-control sources
+ * @output Invariants for the 16px input floor shared by every text control
+ * @position Family-wide source test, in the source-reading style of
+ *   reset.test.ts. jsdom's CSSOM drops declarations nested inside @supports,
+ *   so the iOS branch cannot be asserted against injected rules — the
+ *   runtime half (no bare coarse-pointer floor) lives in TextInput.test.tsx.
+ */
+
+import {readFileSync, readdirSync} from 'node:fs';
+import path from 'node:path';
+
+import {describe, expect, it} from 'vitest';
+
+/**
+ * Every control that floors its text to 16px. iOS Safari zooms the page when
+ * a focused control renders under 16px; no other coarse-pointer browser does.
+ * `-webkit-touch-callout` is implemented by iOS WebKit alone, so each floor
+ * nests `@supports (-webkit-touch-callout: none)` inside the coarse-pointer
+ * query: iPhones and iPads keep the zoom guard, while Android and touch
+ * laptops keep the theme's own type scale instead of an inflated 16px.
+ */
+const FLOORED_CONTROLS = [
+  'Chat/ChatComposerInput.tsx',
+  'CommandPalette/CommandPaletteInput.tsx',
+  'ComplexSelector/ComplexSelector.tsx',
+  'DateInput/DateInput.tsx',
+  'DateInput/NativeDateField.tsx',
+  'DateInput/TouchDateField.tsx',
+  'DateRangeInput/DateRangeInput.tsx',
+  'DateTimeInput/DateTimeInput.tsx',
+  'DateTimeInput/TouchDateTimeField.tsx',
+  'DateTimeInput/nativePickerSegmentStyles.ts',
+  'Field/PanelSearchInput.tsx',
+  'FileInput/FileInput.tsx',
+  'NumberInput/NumberInput.tsx',
+  'Selector/Selector.tsx',
+  'TextArea/TextArea.tsx',
+  'TextInput/TextInput.tsx',
+  'TimeInput/TimeInput.tsx',
+  'Typeahead/BaseTypeahead.tsx',
+  // The rich-text package carries the same floor; its path is relative to
+  // packages/core/src.
+  '../../richtext/src/RichTextEditor.tsx',
+];
+
+/** A font floor applied to every coarse pointer, iOS or not. */
+const BARE_COARSE_FLOOR = `'@media (pointer: coarse)': \`max(1rem`;
+
+/** The same floor, gated to iOS WebKit inside the coarse-pointer query. */
+const IOS_GATED_FLOOR =
+  /'@media \(pointer: coarse\)': \{\s*'@supports \(-webkit-touch-callout: none\)': `max\(1rem, \$\{typeScaleVars\['--text-(?:body|label)-size'\]\}\)`/;
+
+/** Collect every non-test component source under `dir`, recursively. */
+function componentSources(dir: string): string[] {
+  const SOURCE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx'];
+  const out: string[] = [];
+  for (const entry of readdirSync(dir, {withFileTypes: true})) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      out.push(...componentSources(full));
+    } else if (
+      SOURCE_EXTENSIONS.some(ext => entry.name.endsWith(ext)) &&
+      !entry.name.endsWith('.test.ts') &&
+      !entry.name.endsWith('.test.tsx') &&
+      !entry.name.endsWith('.doc.mjs')
+    ) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+describe('the 16px input floor', () => {
+  it('gates every floored text control to iOS alone', () => {
+    // Guards the loop below against the list silently emptying out.
+    expect(FLOORED_CONTROLS.length).toBeGreaterThanOrEqual(18);
+    for (const file of FLOORED_CONTROLS) {
+      const source = readFileSync(path.resolve(__dirname, file), 'utf8');
+      expect(source, file).toMatch(IOS_GATED_FLOOR);
+      expect(source, file).not.toContain(BARE_COARSE_FLOOR);
+    }
+  });
+
+  it('leaves no bare coarse-pointer font floor anywhere in core or richtext', () => {
+    // Catches a new (or renamed) control reintroducing the ungated floor,
+    // wherever it lands — the list above only knows the current family. The
+    // rich-text package carries the same floor, so it is scanned too.
+    const scanRoots = [
+      __dirname,
+      path.resolve(__dirname, '../../richtext/src'),
+    ];
+    const offenders = scanRoots
+      .flatMap(root => componentSources(root))
+      .map(file => ({
+        file,
+        source: readFileSync(file, 'utf8'),
+      }))
+      .filter(({source}) => source.includes(BARE_COARSE_FLOOR))
+      .map(({file}) => path.relative(__dirname, file));
+    expect(offenders).toEqual([]);
+  });
+});

package/src/tailwind-theme.css

@@ -182,12 +182,6 @@
   --text-4xl: var(--font-size-4xl);
   --text-5xl: var(--font-size-5xl);
 
-  /* --- Font weights --- */
-  --font-weight-normal: var(--font-weight-normal);
-  --font-weight-medium: var(--font-weight-medium);
-  --font-weight-semibold: var(--font-weight-semibold);
-  --font-weight-bold: var(--font-weight-bold);
-
   /* =========================================================================
    * Border radius
    *

package/src/theme/Theme.test.tsx

@@ -55,6 +55,38 @@ describe('Theme', () => {
     expect(getByText('hello')).toBeTruthy();
   });
 
+  it('mounts the remaining CSS when one authored declaration is dropped', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      const theme = defineTheme({
+        name: 'declaration-boundary',
+        tokens: {'--color-accent': 'red; } body { color: red'},
+        components: {button: {base: {borderRadius: '4px'}}},
+      });
+      render(
+        <Theme theme={theme}>
+          <span>child</span>
+        </Theme>,
+      );
+      const css = Array.from(document.querySelectorAll('style'))
+        .map(tag => tag.textContent ?? '')
+        .join('\n');
+      expect(css).not.toContain('body { color: red');
+      expect(css).toContain('border-radius: 4px;');
+      expect(css).toContain(':where(p)');
+      expect(
+        warn.mock.calls.filter(([message]) =>
+          String(message).startsWith('[astryx theme] dropped'),
+        ),
+      ).toHaveLength(1);
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining('dropped "--color-accent" in tokens'),
+      );
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
   it('sets data-astryx-theme on wrapper div', () => {
     const {container} = render(
       <Theme theme={testTheme}>