@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -12,7 +12,6 @@
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateTimeInput} from './DateTimeInput';
 import type {ISODateTimeString} from './DateTimeInput';
 
@@ -187,14 +186,14 @@ describe('DateTimeInput', () => {
 
   it('calendar button is focusable and clickable', () => {
     render(<DateTimeInput label="Meeting" onChange={() => {}} />);
-    const button = getButton('Open calendar');
+    const button = screen.getByRole('button', {name: 'Open calendar'});
     expect(button).toBeInTheDocument();
     expect(button).not.toBeDisabled();
   });
 
   it('calendar button is disabled when isDisabled is true', () => {
     render(<DateTimeInput label="Meeting" isDisabled onChange={() => {}} />);
-    const button = getButton('Open calendar');
+    const button = screen.getByRole('button', {name: 'Open calendar'});
     expect(button).toBeDisabled();
   });
 
@@ -202,7 +201,7 @@ describe('DateTimeInput', () => {
     render(<DateTimeInput label="Meeting" isLoading onChange={() => {}} />);
     expect(screen.getByRole('combobox')).toBeDisabled();
     expect(screen.getByLabelText('Meeting time')).toBeDisabled();
-    expect(getButton('Open calendar')).toBeDisabled();
+    expect(screen.getByRole('button', {name: 'Open calendar'})).toBeDisabled();
   });
 
   it('sets aria-busy when isLoading is true', () => {
@@ -215,21 +214,6 @@ describe('DateTimeInput', () => {
     expect(screen.getByRole('combobox')).not.toHaveAttribute('aria-busy');
   });
 
-  it('sets aria-busy on the time input when isLoading is true', () => {
-    render(<DateTimeInput label="Meeting" isLoading onChange={() => {}} />);
-    expect(screen.getByLabelText('Meeting time')).toHaveAttribute(
-      'aria-busy',
-      'true',
-    );
-  });
-
-  it('does not set aria-busy on the time input when not loading', () => {
-    render(<DateTimeInput label="Meeting" onChange={() => {}} />);
-    expect(screen.getByLabelText('Meeting time')).not.toHaveAttribute(
-      'aria-busy',
-    );
-  });
-
   it('renders status icon for error status', () => {
     render(
       <DateTimeInput
@@ -286,61 +270,6 @@ describe('DateTimeInput', () => {
     expect(found).toBe(true);
   });
 
-  it('links the description to the time input via aria-describedby', () => {
-    render(
-      <DateTimeInput
-        label="Meeting"
-        description="Pick the meeting datetime"
-        onChange={() => {}}
-      />,
-    );
-    // The description covers both halves of the field, so the time input must
-    // carry it too — a screen-reader user tabbing into the time half should
-    // not lose the field's description.
-    const timeInput = screen.getByLabelText('Meeting time');
-    const describedBy = timeInput.getAttribute('aria-describedby')!;
-    const ids = describedBy.split(' ');
-    const found = ids.some(id =>
-      document
-        .getElementById(id)
-        ?.textContent?.includes('Pick the meeting datetime'),
-    );
-    expect(found).toBe(true);
-  });
-
-  it('links the status message to the time input via aria-describedby', () => {
-    render(
-      <DateTimeInput
-        label="Meeting"
-        onChange={() => {}}
-        status={{type: 'error', message: 'Invalid datetime'}}
-      />,
-    );
-    const timeInput = screen.getByLabelText('Meeting time');
-    const describedBy = timeInput.getAttribute('aria-describedby')!;
-    const ids = describedBy.split(' ');
-    const found = ids.some(id =>
-      document.getElementById(id)?.textContent?.includes('Invalid datetime'),
-    );
-    expect(found).toBe(true);
-  });
-
-  it('links the disabled reason to the time input via aria-describedby', () => {
-    HTMLElement.prototype.showPopover = vi.fn();
-    HTMLElement.prototype.hidePopover = vi.fn();
-    render(
-      <DateTimeInput
-        label="When"
-        onChange={() => {}}
-        isDisabled
-        disabledMessage="You need the Editor role"
-      />,
-    );
-    const timeInput = screen.getByLabelText('When time');
-    const tooltip = screen.getByRole('tooltip', {hidden: true});
-    expect(timeInput.getAttribute('aria-describedby')).toContain(tooltip.id);
-  });
-
   it('handles Escape keydown on date input without error', () => {
     render(<DateTimeInput label="Meeting" onChange={() => {}} />);
     const input = screen.getByRole('combobox');
@@ -434,12 +363,16 @@ describe('DateTimeInput', () => {
           hasClear
         />,
       );
-      expect(getButton('Clear Meeting')).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Clear Meeting'}),
+      ).toBeInTheDocument();
     });
 
     it('does not show clear button when value is undefined', () => {
       render(<DateTimeInput label="Meeting" onChange={() => {}} hasClear />);
-      expect(queryButton('Clear Meeting')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', {name: 'Clear Meeting'}),
+      ).not.toBeInTheDocument();
     });
 
     it('does not show clear button when hasClear is false', () => {
@@ -450,7 +383,9 @@ describe('DateTimeInput', () => {
           onChange={() => {}}
         />,
       );
-      expect(queryButton('Clear Meeting')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', {name: 'Clear Meeting'}),
+      ).not.toBeInTheDocument();
     });
 
     it('does not show clear button when disabled', () => {
@@ -463,7 +398,9 @@ describe('DateTimeInput', () => {
           isDisabled
         />,
       );
-      expect(queryButton('Clear Meeting')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', {name: 'Clear Meeting'}),
+      ).not.toBeInTheDocument();
     });
 
     it('calls onChange with undefined when clear is clicked', () => {
@@ -476,7 +413,7 @@ describe('DateTimeInput', () => {
           hasClear
         />,
       );
-      fireEvent.click(getButton('Clear Meeting'));
+      fireEvent.click(screen.getByRole('button', {name: 'Clear Meeting'}));
       expect(onChange).toHaveBeenCalledWith(undefined);
     });
   });
@@ -740,43 +677,4 @@ describe('DateTimeInput', () => {
       expect(timeInput).toHaveAttribute('placeholder', 'Select a time');
     });
   });
-
-  describe('timeIncrement', () => {
-    it('steps the time by timeIncrement minutes on ArrowUp', () => {
-      const onChange = vi.fn();
-      render(
-        <DateTimeInput
-          label="Meeting"
-          value={'2026-03-15T14:30' as ISODateTimeString}
-          timeIncrement={15}
-          onChange={onChange}
-        />,
-      );
-
-      const timeInput = screen.getByLabelText('Meeting time');
-      fireEvent.keyDown(timeInput, {key: 'ArrowUp'});
-
-      // 14:30 + 15min increment = 14:45
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange.mock.calls[0][0]).toContain('14:45');
-    });
-
-    it('defaults to a 1-minute increment', () => {
-      const onChange = vi.fn();
-      render(
-        <DateTimeInput
-          label="Meeting"
-          value={'2026-03-15T14:30' as ISODateTimeString}
-          onChange={onChange}
-        />,
-      );
-
-      const timeInput = screen.getByLabelText('Meeting time');
-      fireEvent.keyDown(timeInput, {key: 'ArrowUp'});
-
-      // 14:30 + default 1min = 14:31
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange.mock.calls[0][0]).toContain('14:31');
-    });
-  });
 });

package/src/DateTimeInput/DateTimeInput.tsx

@@ -86,9 +86,6 @@ export type DateTimeInputHourFormat = '12h' | '24h';
 
 export type DateTimeInputSize = 'sm' | 'md' | 'lg';
 
-/** Supported minute increments for arrow-key stepping of the time field. */
-export type DateTimeInputTimeIncrement = 1 | 5 | 10 | 15 | 30;
-
 export type {
   InputStatus as DateTimeInputStatus,
   InputStatusType as DateTimeInputStatusType,
@@ -290,11 +287,10 @@ export interface DateTimeInputProps extends Omit<
   hourFormat?: DateTimeInputHourFormat;
 
   /**
-   * Minutes added or subtracted when stepping the time field with the arrow
-   * keys. Constrained to a set of sensible increments.
+   * Time increment in minutes when using arrow keys in the time input.
    * @default 1
    */
-  timeIncrement?: DateTimeInputTimeIncrement;
+  timeIncrement?: number;
 
   /**
    * Whether to show a clear button when a value is set.
@@ -991,12 +987,10 @@ export function DateTimeInput({
             aria-disabled={showsDisabledMessage ? 'true' : undefined}
             readOnly={showsDisabledMessage || undefined}
             aria-label={timeLabel ?? `${label} time`}
-            aria-describedby={ariaDescribedBy}
             aria-required={isRequired === true ? 'true' : undefined}
             aria-invalid={
               status?.type === 'error' || !isTimeInputValid ? 'true' : undefined
             }
-            aria-busy={isBusy || undefined}
             {...stylex.props(
               styles.input,
               isEffectivelyDisabled && styles.inputDisabled,

package/src/DateTimeInput/index.ts

@@ -14,7 +14,6 @@ export type {
   DateTimeInputProps,
   DateTimeInputSize,
   DateTimeInputHourFormat,
-  DateTimeInputTimeIncrement,
   DateTimeInputStatus,
   DateTimeInputStatusType,
   ISODateTimeString,

package/src/Dialog/Dialog.doc.mjs

@@ -8,10 +8,6 @@ export const docs = {
   group: 'Dialog',
   category: 'Overlay',
   keywords: ["dialog","modal","popup","overlay","lightbox","alert","confirm","prompt","backdrop","focus trap","imperative"],
-  // Intentionally a contained isInline preview, not playground.overlay: the
-  // component stays visible on load and knobs stay live, whereas a real
-  // showModal() overlay makes the page inert — see PlaygroundConfig.overlay
-  // in docs-types.ts (#3657).
   playground: {
     defaults: {
       isOpen: true,

package/src/Dialog/DialogHeader.doc.mjs

@@ -65,51 +65,6 @@ export const docs = {
       default: 'true',
     },
   ],
-  playground: {
-    defaults: {
-      title: 'Delete file?',
-      subtitle: 'This action cannot be undone.',
-      hasDivider: true,
-    },
-  },
-  examples: [
-    {
-      label: 'Basic',
-      code: `
-import {DialogHeader} from '@astryxdesign/core/Dialog';
-
-<DialogHeader title="Delete file?" subtitle="This action cannot be undone." />;
-`,
-    },
-    {
-      label: 'With close button',
-      code: `
-import {useState} from 'react';
-import {DialogHeader} from '@astryxdesign/core/Dialog';
-
-function Header() {
-  const [, setIsOpen] = useState(true);
-
-  // Passing onOpenChange renders a close button that calls it with false.
-  return <DialogHeader title="Settings" onOpenChange={setIsOpen} />;
-}
-`,
-    },
-    {
-      label: 'With start and end content',
-      code: `
-import {DialogHeader} from '@astryxdesign/core/Dialog';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Badge} from '@astryxdesign/core/Badge';
-
-<DialogHeader
-  title="Notifications"
-  startContent={<Icon icon="chevronLeft" size="sm" />}
-  endContent={<Badge label="3" />}
-/>;
-`,
-    },
-  ],
 };
 
 export const docsZh = {

package/src/DropdownMenu/DropdownMenu.doc.mjs

@@ -11,7 +11,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-dropdown-menu'},
-      {className: 'astryx-dropdown-menu-item', visualProps: ['size']},
+      {className: 'astryx-dropdown-menu-item'},
     ],
     vars: [
       {name: '--_dropdown-menu-radius', description: 'Border radius of the menu popup', default: 'var(--radius-element)', private: true},

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -89,7 +89,7 @@ describe('DropdownMenu', () => {
       .getByRole('menu', {hidden: true})
       .closest('[popover]');
     expect(popover?.getAttribute('style')).toContain(
-      'position-area: self-block-end span-self-inline-end',
+      'position-area: bottom span-right',
     );
   });
 
@@ -105,27 +105,7 @@ describe('DropdownMenu', () => {
       .getByRole('menu', {hidden: true})
       .closest('[popover]');
     expect(popover?.getAttribute('style')).toContain(
-      'position-area: self-block-start span-self-inline-end',
-    );
-  });
-
-  it('emits the direction-independent logical mapping under an RTL ancestor (#3389)', async () => {
-    // The self-* position-area keywords resolve against the popover's own
-    // inherited direction in the browser, so RTL emits the same string as
-    // LTR and the mirroring is pure CSS. jsdom can't verify the geometry —
-    // the DropdownMenu RTL Storybook story is the visual proof surface.
-    const user = userEvent.setup();
-    const {container} = render(
-      <div style={{direction: 'rtl'}}>
-        <DropdownMenu button={{label: 'Actions'}} items={[{label: 'Item 1'}]} />
-      </div>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /Actions/}));
-
-    const popover = container.querySelector('[popover]');
-    expect(popover?.getAttribute('style')).toContain(
-      'position-area: self-block-end span-self-inline-end',
+      'position-area: top span-right',
     );
   });
 

package/src/DropdownMenu/DropdownMenuItem.tsx

@@ -25,6 +25,7 @@
 
 import {useCallback, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
+import type {StyleXStyles} from '@stylexjs/stylex';
 import {renderIconSlot, type IconType} from '../Icon';
 import {Item} from '../Item';
 import {
@@ -34,7 +35,6 @@ import {
   typeScaleVars,
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
-import type {BaseProps} from '../BaseProps';
 import {useDropdownMenuContext} from './DropdownMenuContext';
 import {themeProps} from '../utils/themeProps';
 
@@ -75,10 +75,7 @@ const itemSizeStyles = stylex.create({
   lg: {},
 });
 
-export interface DropdownMenuItemProps extends Pick<
-  BaseProps,
-  'xstyle' | 'className' | 'style'
-> {
+export interface DropdownMenuItemProps {
   /** Icon to display before the label. */
   icon?: ReactNode | IconType;
   /** Primary label text. */
@@ -91,6 +88,21 @@ export interface DropdownMenuItemProps extends Pick<
   isDisabled?: boolean;
   /** Additional content to render after the label/description. */
   endContent?: ReactNode;
+  /**
+   * StyleX styles for layout customization (margins, positioning, sizing).
+   * Must be a `stylex.create()` value — not an inline style object.
+   *
+   * @example
+   * ```
+   * const styles = stylex.create({ wrapper: { marginTop: 8 } });
+   * <DropdownMenuItem xstyle={styles.wrapper} />
+   * ```
+   */
+  xstyle?: StyleXStyles;
+  /** CSS class name(s) appended to the root element. */
+  className?: string;
+  /** Inline styles applied to the root element. */
+  style?: React.CSSProperties;
 }
 
 /**

package/src/EmptyState/EmptyState.doc.mjs

@@ -140,7 +140,7 @@ export const docsZh = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-empty-state', visualProps: ['variant']},
+      {className: 'astryx-empty-state'},
     ],
   },
   usage: {

package/src/Field/Field.test.tsx

@@ -137,7 +137,10 @@ describe('Field', () => {
 
   it('renders description without ID attribute when descriptionID is not provided', () => {
     render(
-      <Field label="Email" inputID="email-input" description="Description text">
+      <Field
+        label="Email"
+        inputID="email-input"
+        description="Description text">
         <input id="email-input" />
       </Field>,
     );

package/src/Field/FieldLabel.test.tsx

@@ -11,7 +11,7 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
-import {TestIcon} from '../__tests__/TestIcon';
+import {StarIcon} from '@heroicons/react/24/outline';
 import {FieldLabel} from './FieldLabel';
 
 describe('FieldLabel', () => {
@@ -49,7 +49,7 @@ describe('FieldLabel', () => {
       <FieldLabel
         label="Starred"
         inputID="starred-input"
-        labelIcon={TestIcon}
+        labelIcon={StarIcon}
       />,
     );
     const svg = document.querySelector('svg');

package/src/FormLayout/__snapshots__/FormLayout.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`FormLayout > matches snapshot for horizontal direction 1`] = `
 <div
   class="astryx-form-layout horizontal FormLayout__styles.base xdt5ytf x18g69wz FormLayout__styles.horizontal xrvj5dj x1mt1orb xu6a5m6"
   data-direction="horizontal"
+  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40; @astryxdesign/core:src/FormLayout/FormLayout.tsx:45"
   data-testid="layout"
 >
   <input
@@ -19,6 +20,7 @@ exports[`FormLayout > matches snapshot for horizontal-labels direction 1`] = `
 <div
   class="astryx-form-layout horizontal-labels FormLayout__styles.base xdt5ytf FormLayout__styles.horizontalLabels xrvj5dj x1pmbctz xlaq8a2 x7a106z xedohl4 x1rpgqan x1a1jff"
   data-direction="horizontal-labels"
+  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40; @astryxdesign/core:src/FormLayout/FormLayout.tsx:50"
   data-testid="layout"
 >
   <label>
@@ -34,6 +36,7 @@ exports[`FormLayout > matches snapshot for vertical direction 1`] = `
 <div
   class="astryx-form-layout vertical FormLayout__styles.base x78zum5 xdt5ytf x18g69wz"
   data-direction="vertical"
+  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40"
   data-testid="layout"
 >
   <input

package/src/Grid/Grid.test.tsx

@@ -65,7 +65,7 @@ describe('Grid', () => {
     expect(templateColumns(grid)).toBe('repeat(auto-fill, minmax(250px, 1fr))');
   });
 
-  it('renders with columns object max (count capped, tracks still fill)', () => {
+  it('renders with columns object max (capped via track-max)', () => {
     render(
       <Grid columns={{minWidth: 250, max: 3}} gap={4} data-testid="grid">
         <div>Item 1</div>
@@ -74,37 +74,13 @@ describe('Grid', () => {
       </Grid>,
     );
     const grid = screen.getByTestId('grid');
-    // Cap lives on the track MIN (min(100%, max(minWidth, perColumn))); the
-    // track MAX stays 1fr so present columns fill the row (a lone column on
-    // mobile stretches to 100% instead of leaving dead space).
+    // Track max caps at (100% - 2 * gap) / 3 — no maxWidth on container
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(250px, calc((100% - 2 * var(--spacing-4)) / 3))), 1fr))',
+      'repeat(auto-fill, minmax(250px, calc((100% - 2 * var(--spacing-4)) / 3)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });
 
-  it('keeps track max at 1fr with a max cap so a lone column can fill (#3391)', () => {
-    // Regression: previously the cap was applied to the track MAX
-    // (minmax(minWidth, 100%/max)), so when fewer than `max` columns fit —
-    // e.g. a single column on mobile — the lone column was pinned to ~100%/max
-    // and left dead space on the right. The cap now lives on the track MIN and
-    // the track MAX stays 1fr, so present columns always stretch to fill.
-    render(
-      <Grid columns={{minWidth: 360, max: 2}} gap={4} data-testid="grid">
-        <div>Left</div>
-        <div>Right</div>
-      </Grid>,
-    );
-    const grid = screen.getByTestId('grid');
-    const template = templateColumns(grid);
-    // Track max must be 1fr (fills), not a fraction-of-container cap.
-    expect(template).toMatch(/, 1fr\)\)$/);
-    expect(template).not.toMatch(/, calc\([^)]*\/ 2\)\)\)$/);
-    expect(template).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(360px, calc((100% - 1 * var(--spacing-4)) / 2))), 1fr))',
-    );
-  });
-
   it('renders with columns object max using columnGap', () => {
     render(
       <Grid columns={{minWidth: 200, max: 4}} columnGap={6} data-testid="grid">
@@ -113,9 +89,9 @@ describe('Grid', () => {
       </Grid>,
     );
     const grid = screen.getByTestId('grid');
-    // columnGap takes precedence in the perColumn floor calculation
+    // columnGap takes precedence for track-max calculation
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(200px, calc((100% - 3 * var(--spacing-6)) / 4))), 1fr))',
+      'repeat(auto-fill, minmax(200px, calc((100% - 3 * var(--spacing-6)) / 4)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });
@@ -189,7 +165,7 @@ describe('Grid', () => {
     expect(templateColumns(grid)).toBe('1fr');
   });
 
-  it('uses auto-fill with a plain 1fr track when no max specified', () => {
+  it('uses auto-fill without track-max cap when no max specified', () => {
     render(
       <Grid columns={{minWidth: 200}} data-testid="grid">
         <div>Item</div>
@@ -244,7 +220,7 @@ describe('Grid', () => {
 
   // --- P2: columns object + columnGap interaction (hardening #719) ---
 
-  it('uses columnGap var in the count-cap floor when both columnGap and gap are set', () => {
+  it('uses columnGap var in track-max when both columnGap and gap are set', () => {
     render(
       <Grid
         columns={{minWidth: 200, max: 3}}
@@ -255,14 +231,14 @@ describe('Grid', () => {
       </Grid>,
     );
     const grid = screen.getByTestId('grid');
-    // columnGap takes precedence over gap in the perColumn floor
+    // columnGap takes precedence over gap in track-max
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(200px, calc((100% - 2 * var(--spacing-6)) / 3))), 1fr))',
+      'repeat(auto-fill, minmax(200px, calc((100% - 2 * var(--spacing-6)) / 3)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });
 
-  it('uses gap var in the count-cap floor when columnGap is not set', () => {
+  it('uses gap var in track-max when columnGap is not set', () => {
     render(
       <Grid columns={{minWidth: 150, max: 2}} gap={3} data-testid="grid">
         <div>Item</div>
@@ -270,12 +246,12 @@ describe('Grid', () => {
     );
     const grid = screen.getByTestId('grid');
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(150px, calc((100% - 1 * var(--spacing-3)) / 2))), 1fr))',
+      'repeat(auto-fill, minmax(150px, calc((100% - 1 * var(--spacing-3)) / 2)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });
 
-  it('uses simple fraction in the count-cap floor when no gap is set', () => {
+  it('uses simple fraction in track-max when no gap is set', () => {
     render(
       <Grid columns={{minWidth: 100, max: 3}} data-testid="grid">
         <div>Item</div>
@@ -283,7 +259,7 @@ describe('Grid', () => {
     );
     const grid = screen.getByTestId('grid');
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(100px, calc(100% / 3))), 1fr))',
+      'repeat(auto-fill, minmax(100px, calc(100% / 3)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });
@@ -356,7 +332,7 @@ describe('Grid', () => {
     expect(templateColumns(grid)).toBe('repeat(auto-fill, minmax(280px, 1fr))');
   });
 
-  it('renders with columns={{minWidth, max}} capping the count while filling', () => {
+  it('renders with columns={{minWidth, max}} capping via track-max', () => {
     render(
       <Grid columns={{minWidth: 280, max: 3}} gap={4} data-testid="grid">
         <div>Item 1</div>
@@ -364,15 +340,14 @@ describe('Grid', () => {
       </Grid>,
     );
     const grid = screen.getByTestId('grid');
-    // Count is capped via the track MIN; track MAX stays 1fr so present
-    // columns fill the row (grid stays full width).
+    // Track-max limits columns — grid stays full width
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fill, minmax(min(100%, max(280px, calc((100% - 2 * var(--spacing-4)) / 3))), 1fr))',
+      'repeat(auto-fill, minmax(280px, calc((100% - 2 * var(--spacing-4)) / 3)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });
 
-  it('renders with columns={{minWidth, max, repeat: "fit"}} using auto-fit + count cap', () => {
+  it('renders with columns={{minWidth, max, repeat: "fit"}} using auto-fit + track-max', () => {
     render(
       <Grid
         columns={{minWidth: 280, max: 3, repeat: 'fit'}}
@@ -384,7 +359,7 @@ describe('Grid', () => {
     );
     const grid = screen.getByTestId('grid');
     expect(templateColumns(grid)).toBe(
-      'repeat(auto-fit, minmax(min(100%, max(280px, calc((100% - 2 * var(--spacing-4)) / 3))), 1fr))',
+      'repeat(auto-fit, minmax(280px, calc((100% - 2 * var(--spacing-4)) / 3)))',
     );
     expect(grid.style.maxWidth).toBe('');
   });