@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/Grid/Grid.tsx

@@ -38,10 +38,9 @@ export type GridAlignment = 'start' | 'center' | 'end' | 'stretch';
  *   - `minWidth` — minimum width (px) for each column track
  *   - `repeat` — `'fill'` (default) preserves empty tracks for consistent widths;
  *     `'fit'` collapses empty tracks so items stretch to fill
- *   - `max` — caps the maximum number of columns. The grid stretches to 100%
- *     of its parent and the columns that are present always fill the row, so a
- *     layout collapsing to a single column on mobile stretches to full width
- *     (no dead space on the right).
+ *   - `max` — caps the maximum number of columns by limiting track max size.
+ *     The grid stretches to 100% of its parent; `max` only limits how many
+ *     columns appear.
  */
 export type GridColumns =
   | number
@@ -322,20 +321,9 @@ const spacingVarNames: Record<SpacingStep, string> = {
 };
 
 /**
- * Build a grid-template-columns value that caps the column *count* at `max`
- * while still letting the columns that are actually present stretch to fill
- * the row.
- *
- * The cap lives on the track's **min** size, not its max: each track is at
- * least `perColumn = (100% - (max-1) * gap) / max`, so more than `max` columns
- * can never fit. The track **max** stays `1fr`, so whenever fewer than `max`
- * columns fit (most importantly a lone column on mobile) they still grow to
- * fill the whole row — no dead space on the right.
- *
- * The track min is `max(minWidth, perColumn)` so an explicit `minWidth` is
- * still honored, wrapped in `min(100%, …)` so a single column on a viewport
- * narrower than `minWidth`/`perColumn` shrinks to the container instead of
- * overflowing it.
+ * Build a grid-template-columns value that caps columns at `max` by
+ * limiting each track's max size to `(100% - (max-1) * gap) / max`.
+ * The grid stays 100% width; the track-max prevents more than `max` columns.
  */
 function buildCappedTemplate(
   minWidth: number,
@@ -351,17 +339,12 @@ function buildCappedTemplate(
         ? spacingVarNames[gap]
         : null;
 
-  // perColumn = (100% - (maxCols - 1) * gap) / maxCols — the width a track
-  // would have if exactly `maxCols` columns were present. Used as a floor so
-  // the grid never fits more than `maxCols` columns.
-  const perColumn = gapVar
+  // trackMax = (100% - (maxCols - 1) * gap) / maxCols
+  const trackMax = gapVar
     ? `calc((100% - ${maxCols - 1} * var(${gapVar})) / ${maxCols})`
     : `calc(100% / ${maxCols})`;
 
-  // Track min caps the count; track max stays 1fr so present columns fill.
-  const trackMin = `min(100%, max(${minWidth}px, ${perColumn}))`;
-
-  return `repeat(${repeatMode}, minmax(${trackMin}, 1fr))`;
+  return `repeat(${repeatMode}, minmax(${minWidth}px, ${trackMax}))`;
 }
 
 /**

package/src/HoverCard/HoverCard.doc.mjs

@@ -46,13 +46,13 @@ export const docs = {
         {
           name: 'placement',
           type: "'above' | 'below' | 'start' | 'end'",
-          description: "Position relative to the anchor element. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).",
+          description: 'Position relative to the anchor element.',
           default: "'above'",
         },
         {
           name: 'alignment',
           type: "'start' | 'center' | 'end'",
-          description: "Alignment along the placement axis. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).",
+          description: 'Alignment along the placement axis.',
           default: "'center'",
         },
         {
@@ -155,13 +155,13 @@ export const docsZh = {
         {
           name: 'placement',
           type: "'above' | 'below' | 'start' | 'end'",
-          description: '相对于锚点元素的位置。逻辑值：start/end 根据弹出层自身继承的方向解析（RTL 镜像）。',
+          description: '相对于锚点元素的位置。',
           default: "'above'",
         },
         {
           name: 'alignment',
           type: "'start' | 'center' | 'end'",
-          description: '沿放置轴的对齐方式。逻辑值：start/end 根据弹出层自身继承的方向解析（RTL 镜像）。',
+          description: '沿放置轴的对齐方式。',
           default: "'center'",
         },
         {
@@ -246,8 +246,8 @@ export const docsDense = {
       propDescriptions: {
         children: 'Trigger element; must accept ref.',
         content: 'Hover card content.',
-        placement: 'Position relative to anchor element. Logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
-        alignment: 'Alignment along placement axis. Logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
+        placement: 'Position relative to anchor element.',
+        alignment: 'Alignment along placement axis.',
         delay: 'Show delay in ms.',
         hideDelay: 'Hide delay in ms.',
         focusTrigger: 'Controls when focus events trigger hover card.',

package/src/HoverCard/useHoverCard.doc.mjs

@@ -7,8 +7,8 @@ export const docs = {
   group: 'HoverCard',
   keywords: ['hovercard', 'hover', 'preview', 'card', 'tooltip', 'popup', 'floating', 'anchor'],
   params: [
-    {name: 'placement', type: "'above' | 'below' | 'start' | 'end'", description: "Position relative to the trigger. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).", default: "'above'"},
-    {name: 'alignment', type: "'start' | 'center' | 'end'", description: "Alignment along the placement axis. Logical: start/end resolve against the popover\'s own inherited direction (RTL mirrors in pure CSS).", default: "'center'"},
+    {name: 'placement', type: "'above' | 'below' | 'start' | 'end'", description: 'Position relative to the trigger.', default: "'above'"},
+    {name: 'alignment', type: "'start' | 'center' | 'end'", description: 'Alignment along the placement axis.', default: "'center'"},
     {name: 'delay', type: 'number', description: 'Delay before showing the hover card on hover, in milliseconds.', default: '300'},
     {name: 'hideDelay', type: 'number', description: 'Delay before hiding after mouse or focus leaves, in milliseconds.', default: '200'},
     {name: 'focusTrigger', type: "'auto' | 'always' | 'never'", description: 'When focus should open the hover card. auto only attaches focus listeners to naturally focusable elements.', default: "'auto'"},
@@ -24,7 +24,7 @@ export const docs = {
     {name: 'interactionRef', type: 'RefCallback<HTMLElement>', description: 'Ref for the hover/focus interaction element. Use with positionRef for split trigger patterns.'},
     {name: 'anchorId', type: 'string', description: 'CSS anchor name for advanced positioning cases.'},
     {name: 'describedBy', type: 'string', description: 'ID to compose into aria-describedby on the trigger.'},
-    {name: 'renderHoverCard', type: "(children: ReactNode, props?: Omit<ContextRenderProps, 'positioning'>) => ReactNode", description: 'Render function for the anchor-positioned hover card content. The positioning opt-out is excluded: the hover card always derives its position from placement/alignment.'},
+    {name: 'renderHoverCard', type: '(children: ReactNode, props?: ContextRenderProps) => ReactNode', description: 'Render function for the anchor-positioned hover card content.'},
     {name: 'show', type: '() => void', description: 'Imperatively show the hover card immediately.'},
     {name: 'hide', type: '() => void', description: 'Imperatively hide the hover card immediately.'},
   ],
@@ -46,8 +46,8 @@ export const docs = {
 export const docsDense = {
   description: 'Headless hover-triggered floating cards. Builds on useLayer w/ hover/focus intent, delays, safe hover behavior, aria-describedby. Use for rich previews when trigger/content rendering needs full control.',
   paramDescriptions: {
-    placement: 'position relative to trigger. logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
-    alignment: 'alignment along placement axis. logical: start/end follow the popover\'s inherited direction (RTL mirrors).',
+    placement: 'position relative to trigger.',
+    alignment: 'alignment along placement axis.',
     delay: 'show delay in ms.',
     hideDelay: 'hide delay after mouse/focus leave in ms.',
     focusTrigger: 'when focus opens hover card; auto = naturally focusable elements only.',

package/src/HoverCard/useHoverCard.tsx

@@ -181,14 +181,10 @@ export interface HoverCardReturn {
   /**
    * Render function for hover card content.
    * Returns anchor-positioned popover element.
-   *
-   * `positioning` is excluded: the hover card always derives its position
-   * from placement/alignment, so accepting the custom opt-out here would be
-   * a silent no-op.
    */
   renderHoverCard: (
     children: ReactNode,
-    props?: Omit<ContextRenderProps, 'positioning'>,
+    props?: ContextRenderProps,
   ) => ReactNode;
 
   /**
@@ -454,10 +450,7 @@ export function useHoverCard(options: HoverCardOptions = {}): HoverCardReturn {
 
   // Render function that wraps layer.render with hover card behavior
   const renderHoverCard = useCallback(
-    (
-      children: ReactNode,
-      props?: Omit<ContextRenderProps, 'positioning'>,
-    ): ReactNode => {
+    (children: ReactNode, props?: ContextRenderProps): ReactNode => {
       const renderPlacement = props?.placement ?? placement;
       const renderProps = {
         placement: renderPlacement,

package/src/Icon/Icon.test.tsx

@@ -11,48 +11,48 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
-import {TestIcon} from '../__tests__/TestIcon';
+import {HomeIcon} from '@heroicons/react/24/outline';
 import {Icon} from './Icon';
 
 describe('Icon', () => {
   it('renders the icon component', () => {
-    render(<Icon icon={TestIcon} data-testid="icon" />);
+    render(<Icon icon={HomeIcon} data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
 
   it('renders as an SVG element', () => {
-    render(<Icon icon={TestIcon} data-testid="icon" />);
+    render(<Icon icon={HomeIcon} data-testid="icon" />);
     const icon = screen.getByTestId('icon');
     expect(icon.tagName.toLowerCase()).toBe('svg');
   });
 
   it('applies aria-hidden by default', () => {
-    render(<Icon icon={TestIcon} data-testid="icon" />);
+    render(<Icon icon={HomeIcon} data-testid="icon" />);
     expect(screen.getByTestId('icon')).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('renders with different color variants', () => {
     const {rerender} = render(
-      <Icon icon={TestIcon} color="primary" data-testid="icon" />,
+      <Icon icon={HomeIcon} color="primary" data-testid="icon" />,
     );
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} color="secondary" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} color="secondary" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} color="accent" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} color="accent" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} color="success" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} color="success" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} color="error" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} color="error" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} color="warning" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} color="warning" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} color="inherit" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} color="inherit" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
 
@@ -70,41 +70,50 @@ describe('Icon', () => {
       'purple',
     ] as const;
     const {rerender} = render(
-      <Icon icon={TestIcon} color={nonSemanticColors[0]} data-testid="icon" />,
+      <Icon
+        icon={HomeIcon}
+        color={nonSemanticColors[0]}
+        data-testid="icon"
+      />,
     );
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
     for (const c of nonSemanticColors.slice(1)) {
-      rerender(<Icon icon={TestIcon} color={c} data-testid="icon" />);
+      rerender(<Icon icon={HomeIcon} color={c} data-testid="icon" />);
       expect(screen.getByTestId('icon')).toBeInTheDocument();
     }
   });
 
   it('renders with different size variants', () => {
     const {rerender} = render(
-      <Icon icon={TestIcon} size="xsm" data-testid="icon" />,
+      <Icon icon={HomeIcon} size="xsm" data-testid="icon" />,
     );
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} size="sm" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} size="sm" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} size="md" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} size="md" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={TestIcon} size="lg" data-testid="icon" />);
+    rerender(<Icon icon={HomeIcon} size="lg" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
 
   it('forwards ref correctly', () => {
     const ref = vi.fn();
-    render(<Icon icon={TestIcon} ref={ref} />);
+    render(<Icon icon={HomeIcon} ref={ref} />);
     expect(ref).toHaveBeenCalledWith(expect.any(SVGSVGElement));
   });
 
   it('passes additional SVG props', () => {
     render(
-      <Icon icon={TestIcon} data-testid="icon" role="img" aria-label="Home" />,
+      <Icon
+        icon={HomeIcon}
+        data-testid="icon"
+        role="img"
+        aria-label="Home"
+      />,
     );
     const icon = screen.getByTestId('icon');
     expect(icon).toHaveAttribute('role', 'img');
@@ -112,29 +121,8 @@ describe('Icon', () => {
   });
 
   it('uses default color and size when not specified', () => {
-    render(<Icon icon={TestIcon} data-testid="icon" />);
+    render(<Icon icon={HomeIcon} data-testid="icon" />);
     // The component should render without errors with defaults
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
-
-  it('applies aria-hidden by default in string (registry) mode', () => {
-    render(<Icon icon="check" data-testid="icon" />);
-    expect(screen.getByTestId('icon')).toHaveAttribute('aria-hidden', 'true');
-  });
-
-  it('lets a string-mode icon be made meaningful by overriding aria-hidden', () => {
-    render(
-      <Icon
-        icon="check"
-        data-testid="icon"
-        role="img"
-        aria-label="Done"
-        aria-hidden={false}
-      />,
-    );
-    const icon = screen.getByTestId('icon');
-    expect(icon).toHaveAttribute('role', 'img');
-    expect(icon).toHaveAttribute('aria-label', 'Done');
-    expect(icon).toHaveAttribute('aria-hidden', 'false');
-  });
 });

package/src/Icon/Icon.tsx

@@ -281,16 +281,12 @@ function IconFromRegistry({
 
   return (
     <span
-      // Decorative by default, but placed BEFORE the prop spread so consumers
-      // can override it (e.g. `aria-hidden={false}` + `role="img"` +
-      // `aria-label`) to expose a meaningful standalone icon. This matches
-      // component-mode Icon, which already sets aria-hidden before its spread.
-      aria-hidden="true"
       {...(spanProps as React.HTMLAttributes<HTMLSpanElement>)}
       {...mergeProps(
         themeProps('icon', {size, color}),
         stylex.props(styles.span, colorStyles[color], spanSizeStyles[size]),
-      )}>
+      )}
+      aria-hidden="true">
       {resolvedIcon}
     </span>
   );

package/src/InputGroup/InputGroup.doc.mjs

@@ -20,7 +20,6 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-input-group', visualProps: ['size', 'status']},
-      {className: 'astryx-input-group-text'},
     ],
   },
   description:

package/src/InputGroup/InputGroup.tsx

@@ -201,11 +201,11 @@ export function InputGroup({
           labelTooltip={labelTooltip}>
           <div
             ref={ref}
-            data-testid={testId}
-            {...rest}
             role="group"
             aria-labelledby={labelID}
             aria-describedby={describedByIDs}
+            data-testid={testId}
+            {...rest}
             {...mergeProps(
               themeProps('input-group', {
                 size,

package/src/Item/Item.tsx

@@ -470,9 +470,9 @@ export function Item({
   return (
     <Component
       ref={ref as React.Ref<never>}
-      {...restProps}
       aria-selected={isSelected || undefined}
       aria-disabled={isDisabled || undefined}
+      {...restProps}
       {...mergeProps(
         themeProps('item', {density, align}),
         stylex.props(

package/src/Layer/useLayer.doc.mjs

@@ -78,7 +78,7 @@ export const docs = {
       name: 'render',
       type: '(children: ReactNode, props: ContextRenderProps | FixedRenderProps) => ReactNode',
       description:
-        'Render function for the popover element. Pass placement/alignment in context mode or x/y in fixed mode. Placement/alignment are logical: they map to the self-* position-area keyword family, which resolves against the popover\'s own inherited direction, so RTL contexts mirror automatically in pure CSS. Pass `positioning: "custom"` in context mode to author position styles yourself via `style` (e.g. explicit anchor() insets or an anchor-size() cover): the hook keeps the popover behavior and position-anchor wiring but derives no position styles — including the automatic RTL mirroring, which becomes your responsibility. In context mode, pass `as: "span"` to render an inline-safe layer (e.g. inside a paragraph). The layer renders inline in the React tree; the Popover API promotes it to the top layer when shown, so it escapes ancestor clipping and stacking without a portal.',
+        'Render function for the popover element. Pass placement/alignment in context mode or x/y in fixed mode. In context mode, pass `as: "span"` to render an inline-safe layer (e.g. inside a paragraph). The layer renders inline in the React tree; the Popover API promotes it to the top layer when shown, so it escapes ancestor clipping and stacking without a portal.',
     },
   ],
   usage: {
@@ -130,7 +130,7 @@ export const docsDense = {
     hide: 'hide layer.',
     isOpen: 'whether layer is open.',
     id: 'unique ARIA id.',
-    render: 'renders popover element; pass placement/alignment or x/y. Placement/alignment logical: mapped to self-* position-area keywords resolved against the popover\'s inherited direction (RTL mirrors in pure CSS). `positioning: "custom"` (context mode) = author position styles yourself via `style`; keeps popover behavior + position-anchor wiring, derives nothing (incl. RTL mirroring — yours). Context mode accepts `as: "span"` for inline-safe layers. Renders inline; the Popover API top layer escapes clipping/stacking without a portal.',
+    render: 'renders popover element; pass placement/alignment or x/y. Context mode accepts `as: "span"` for inline-safe layers. Renders inline; the Popover API top layer escapes clipping/stacking without a portal.',
   },
   usage: {
     description:

package/src/Layer/useLayer.test.tsx

@@ -3,21 +3,15 @@
 /**
  * @file useLayer.test.tsx
  * @input Uses vitest, @testing-library/react, useLayer hook
- * @output Tests for useLayer show/hide feature-detection guards and context-mode positioning
+ * @output Unit tests for useLayer show/hide behavior and feature-detection guards
  * @position Testing; validates useLayer.tsx implementation
  *
- * SYNC: When useLayer.tsx changes, update tests accordingly
+ * SYNC: When useLayer.tsx changes, update tests to match new behavior
  */
 
 import {describe, it, expect, vi, afterEach} from 'vitest';
 import {render, act} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import {useLayer} from './useLayer';
-import type {
-  LayerPlacement,
-  LayerAlignment,
-  ContextRenderProps,
-} from './useLayer';
 
 /**
  * Minimal harness that exposes the imperative show/hide callbacks and renders
@@ -115,216 +109,3 @@ describe('useLayer', () => {
     });
   });
 });
-
-/**
- * Harness that owns the trigger element.
- */
-function Harness({
-  placement,
-  alignment,
-  triggerStyle,
-  triggerDir,
-}: {
-  placement: LayerPlacement;
-  alignment: LayerAlignment;
-  triggerStyle?: React.CSSProperties;
-  triggerDir?: string;
-}) {
-  const layer = useLayer({mode: 'context'});
-  return (
-    <>
-      <button
-        type="button"
-        ref={layer.ref}
-        dir={triggerDir}
-        style={triggerStyle}
-        onClick={layer.isOpen ? layer.hide : layer.show}>
-        trigger
-      </button>
-      {layer.render(<span>content</span>, {placement, alignment})}
-    </>
-  );
-}
-
-async function openAndGetStyle(ui: React.ReactElement): Promise<string> {
-  const user = userEvent.setup();
-  const {container, getByRole} = render(ui);
-  await user.click(getByRole('button', {name: 'trigger'}));
-  const popover = container.querySelector('[popover]');
-  return popover?.getAttribute('style') ?? '';
-}
-
-describe('useLayer context positioning', () => {
-  // The mapping uses the self-* logical keyword family, so the emitted
-  // string is direction-independent by construction: the browser resolves
-  // the inline axis against the popover's own inherited direction, and RTL
-  // mirrors with no JS. jsdom has no layout engine, so these tests can only
-  // assert the emitted string — the actual RTL geometry is covered by the
-  // RTL Storybook story (and was verified against the full 12-cell matrix
-  // in a real browser).
-  describe('self-* position-area mapping', () => {
-    it.each([
-      // [placement, alignment, expected position-area]
-      ['above', 'start', 'self-block-start span-self-inline-end'],
-      ['above', 'center', 'self-block-start'],
-      ['above', 'end', 'self-block-start span-self-inline-start'],
-      ['below', 'start', 'self-block-end span-self-inline-end'],
-      ['below', 'center', 'self-block-end'],
-      ['below', 'end', 'self-block-end span-self-inline-start'],
-      ['start', 'start', 'self-inline-start span-self-block-end'],
-      ['start', 'center', 'self-inline-start'],
-      ['start', 'end', 'self-inline-start span-self-block-start'],
-      ['end', 'start', 'self-inline-end span-self-block-end'],
-      ['end', 'center', 'self-inline-end'],
-      ['end', 'end', 'self-inline-end span-self-block-start'],
-    ] as const)(
-      'placement=%s alignment=%s emits position-area %s',
-      async (placement, alignment, expectedArea) => {
-        const style = await openAndGetStyle(
-          <Harness placement={placement} alignment={alignment} />,
-        );
-        expect(style).toMatch(
-          new RegExp(`position-area: ${expectedArea}(;|$)`),
-        );
-        expect(style).not.toContain('justify-self');
-      },
-    );
-
-    it('emits the same string regardless of trigger direction', async () => {
-      const user = userEvent.setup();
-      const first = render(<Harness placement="below" alignment="start" />);
-      await user.click(first.getByRole('button', {name: 'trigger'}));
-      const ltr =
-        first.container.querySelector('[popover]')?.getAttribute('style') ?? '';
-      first.unmount();
-
-      const second = render(
-        <Harness
-          placement="below"
-          alignment="start"
-          triggerDir="rtl"
-          triggerStyle={{direction: 'rtl'}}
-        />,
-      );
-      await user.click(second.getByRole('button', {name: 'trigger'}));
-      const rtl =
-        second.container.querySelector('[popover]')?.getAttribute('style') ??
-        '';
-      // The unique position-anchor id differs per render; the placement
-      // mapping must not.
-      const positionArea = (s: string) => s.match(/position-area:[^;]*/)?.[0];
-      expect(positionArea(rtl)).toBeDefined();
-      expect(positionArea(rtl)).toBe(positionArea(ltr));
-    });
-
-    it('keeps position-try fallbacks intact', async () => {
-      const style = await openAndGetStyle(
-        <Harness placement="below" alignment="start" />,
-      );
-      expect(style).toContain(
-        'position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline',
-      );
-    });
-  });
-
-  describe("positioning='custom' (consumer-authored position styles)", () => {
-    // Consumers like Carousel and Tokenizer keep useLayer's popover behavior
-    // and anchor wiring but position the layer themselves. The opt-out must
-    // suppress every placement-derived style — position-area and the try
-    // fallbacks — so those consumers never need to know which properties
-    // the hook would have emitted.
-    function CustomHarness({
-      triggerStyle,
-      renderProps,
-    }: {
-      triggerStyle?: React.CSSProperties;
-      renderProps: ContextRenderProps;
-    }) {
-      const layer = useLayer({mode: 'context'});
-      return (
-        <>
-          <button
-            type="button"
-            ref={layer.ref}
-            style={triggerStyle}
-            onClick={layer.isOpen ? layer.hide : layer.show}>
-            trigger
-          </button>
-          {layer.render(<span>content</span>, renderProps)}
-        </>
-      );
-    }
-
-    it('keeps the anchor wiring but derives no placement styles', async () => {
-      const style = await openAndGetStyle(
-        <CustomHarness
-          renderProps={{
-            positioning: 'custom',
-            style: {positionArea: 'center'},
-          }}
-        />,
-      );
-      expect(style).toContain('position-anchor');
-      // The consumer-authored area is the only one present…
-      expect(style).toContain('position-area: center');
-      // …and no placement-derived styles leak through.
-      expect(style).not.toContain('position-try-fallbacks');
-    });
-
-    it('ignores placement and alignment when positioning is custom', async () => {
-      // placement/alignment are documented as ignored under custom. Derived
-      // output would be position-area "self-block-end span-self-inline-end";
-      // none of it may appear.
-      const style = await openAndGetStyle(
-        <CustomHarness
-          renderProps={{
-            positioning: 'custom',
-            placement: 'below',
-            alignment: 'start',
-            style: {positionArea: 'center'},
-          }}
-        />,
-      );
-      expect(style).toContain('position-anchor');
-      expect(style).toContain('position-area: center');
-      expect(style).not.toContain('self-block');
-      expect(style).not.toContain('position-try-fallbacks');
-    });
-
-    it('emits only the anchor wiring when custom positioning passes no style at all', async () => {
-      // The strongest suppression probe: with no consumer style in the merge
-      // (Tokenizer's insets-only shape reduces to this in jsdom), nothing can
-      // clobber a leaked derived value — any position-area or try-fallbacks
-      // in the output is a genuine leak.
-      const style = await openAndGetStyle(
-        <CustomHarness renderProps={{positioning: 'custom'}} />,
-      );
-      expect(style).toContain('position-anchor');
-      expect(style).not.toContain('position-area');
-      expect(style).not.toContain('position-try-fallbacks');
-    });
-  });
-
-  it('fixed mode emits no anchor-positioning styles', async () => {
-    function FixedHarness() {
-      const layer = useLayer({mode: 'fixed'});
-      return (
-        <>
-          <button type="button" onClick={layer.show}>
-            opener
-          </button>
-          {layer.render(<span>content</span>, {x: 10, y: 20})}
-        </>
-      );
-    }
-
-    const user = userEvent.setup();
-    const {container, getByRole} = render(<FixedHarness />);
-    await user.click(getByRole('button', {name: 'opener'}));
-
-    const style =
-      container.querySelector('[popover]')?.getAttribute('style') ?? '';
-    expect(style).not.toContain('position-area');
-    expect(style).not.toContain('position-anchor');
-  });
-});