@dashforge/tw 0.1.0-beta → 0.2.1-beta

package/src/components/AspectRatio/AspectRatio.test.tsx

@@ -0,0 +1,173 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { AspectRatio } from './AspectRatio.js';
+
+describe('<AspectRatio>', () => {
+  // ─── Default rendering ──────────────────────────────────────────────
+  describe('default rendering', () => {
+    it('renders a <div> by default', () => {
+      const { container } = render(<AspectRatio>x</AspectRatio>);
+      expect(container.firstElementChild?.tagName).toBe('DIV');
+    });
+
+    it('default ratio is 1 (square)', () => {
+      const { container } = render(<AspectRatio>x</AspectRatio>);
+      const el = container.firstElementChild as HTMLElement;
+      expect(el.style.aspectRatio).toBe('1 / 1');
+    });
+
+    it('always has w-full baseline', () => {
+      const { container } = render(<AspectRatio>x</AspectRatio>);
+      expect(container.firstElementChild?.className).toContain('w-full');
+    });
+  });
+
+  // ─── ratio prop ─────────────────────────────────────────────────────
+  describe('ratio', () => {
+    it('numeric ratio 16/9 → "1.7777… / 1"', () => {
+      const { container } = render(<AspectRatio ratio={16 / 9}>x</AspectRatio>);
+      const el = container.firstElementChild as HTMLElement;
+      // 16/9 ≈ 1.7777, formatted as "<number> / 1"
+      expect(el.style.aspectRatio).toMatch(/^1\.\d+ \/ 1$/);
+    });
+
+    it('numeric ratio 4/3', () => {
+      const { container } = render(<AspectRatio ratio={4 / 3}>x</AspectRatio>);
+      const el = container.firstElementChild as HTMLElement;
+      expect(el.style.aspectRatio).toMatch(/^1\.\d+ \/ 1$/);
+    });
+
+    it('string ratio "16 / 9" passes through', () => {
+      const { container } = render(<AspectRatio ratio="16 / 9">x</AspectRatio>);
+      const el = container.firstElementChild as HTMLElement;
+      expect(el.style.aspectRatio).toBe('16 / 9');
+    });
+
+    it('string ratio "21/9" passes through (ultrawide)', () => {
+      const { container } = render(<AspectRatio ratio="21/9">x</AspectRatio>);
+      const el = container.firstElementChild as HTMLElement;
+      expect(el.style.aspectRatio).toBe('21/9');
+    });
+  });
+
+  // ─── Override ───────────────────────────────────────────────────────
+  describe('override', () => {
+    it('sx adds utility classes', () => {
+      const { container } = render(
+        <AspectRatio ratio={16 / 9} sx="rounded-xl overflow-hidden">
+          x
+        </AspectRatio>,
+      );
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).toContain('rounded-xl');
+      expect(cls).toContain('overflow-hidden');
+    });
+
+    it('user style merges with aspect-ratio', () => {
+      const { container } = render(
+        <AspectRatio ratio={1} style={{ backgroundColor: 'red' }}>x</AspectRatio>,
+      );
+      const el = container.firstElementChild as HTMLElement;
+      expect(el.style.backgroundColor).toBe('red');
+      expect(el.style.aspectRatio).toBe('1 / 1');
+    });
+
+    it('user style aspect-ratio overrides the prop (last wins)', () => {
+      const { container } = render(
+        <AspectRatio ratio={1} style={{ aspectRatio: '2 / 1' }}>x</AspectRatio>,
+      );
+      const el = container.firstElementChild as HTMLElement;
+      // Inline style merge — user's later spread wins
+      expect(el.style.aspectRatio).toBe('2 / 1');
+    });
+  });
+
+  // ─── Polymorphism ───────────────────────────────────────────────────
+  describe('polymorphism', () => {
+    it('as="figure" renders <figure>', () => {
+      const { container } = render(
+        <AspectRatio as="figure" ratio={1}>x</AspectRatio>,
+      );
+      expect(container.firstElementChild?.tagName).toBe('FIGURE');
+    });
+
+    it('as="picture" works for responsive image markup', () => {
+      const { container } = render(
+        <AspectRatio as="picture" ratio={16 / 9}>
+          <img src="x.jpg" alt="" />
+        </AspectRatio>,
+      );
+      expect(container.firstElementChild?.tagName).toBe('PICTURE');
+    });
+  });
+
+  // ─── Child rendering ────────────────────────────────────────────────
+  describe('child rendering', () => {
+    it('renders an <img> child', () => {
+      const { container } = render(
+        <AspectRatio ratio={16 / 9}>
+          <img src="hero.jpg" alt="hero" className="w-full h-full object-cover" />
+        </AspectRatio>,
+      );
+      const img = container.querySelector('img');
+      expect(img?.getAttribute('src')).toBe('hero.jpg');
+    });
+
+    it('renders multiple children (e.g. overlay pattern)', () => {
+      const { container } = render(
+        <AspectRatio ratio={16 / 9}>
+          <img src="hero.jpg" alt="hero" />
+          <div className="absolute inset-0 bg-black/40" />
+        </AspectRatio>,
+      );
+      expect(container.firstElementChild?.children.length).toBe(2);
+    });
+  });
+
+  // ─── Pass-through ───────────────────────────────────────────────────
+  it('forwards data-* + aria-*', () => {
+    const { container } = render(
+      <AspectRatio data-testid="ar" aria-label="hero">x</AspectRatio>,
+    );
+    const el = container.firstElementChild;
+    expect(el?.getAttribute('data-testid')).toBe('ar');
+    expect(el?.getAttribute('aria-label')).toBe('hero');
+  });
+
+  // ─── F11-bis edge cases ─────────────────────────────────────────────
+  describe('extreme ratio values', () => {
+    it('ratio="21 / 9" (ultrawide cinema) passes through verbatim', () => {
+      const { container } = render(<AspectRatio ratio="21 / 9">x</AspectRatio>);
+      expect((container.firstElementChild as HTMLElement).style.aspectRatio).toBe('21 / 9');
+    });
+
+    it('ratio="9 / 16" (portrait video) passes through verbatim', () => {
+      const { container } = render(<AspectRatio ratio="9 / 16">x</AspectRatio>);
+      expect((container.firstElementChild as HTMLElement).style.aspectRatio).toBe('9 / 16');
+    });
+
+    it('numeric tiny ratio (0.5) formats as "0.5 / 1"', () => {
+      const { container } = render(<AspectRatio ratio={0.5}>x</AspectRatio>);
+      expect((container.firstElementChild as HTMLElement).style.aspectRatio).toBe('0.5 / 1');
+    });
+
+    it('numeric large ratio (3) formats as "3 / 1"', () => {
+      const { container } = render(<AspectRatio ratio={3}>x</AspectRatio>);
+      expect((container.firstElementChild as HTMLElement).style.aspectRatio).toBe('3 / 1');
+    });
+  });
+
+  describe('rounded clipped media pattern (the #1 doc gotcha)', () => {
+    it('rounded + overflow-hidden both end up on the className', () => {
+      const { container } = render(
+        <AspectRatio ratio={16 / 9} sx="rounded-2xl overflow-hidden">
+          <img src="x.jpg" alt="" className="w-full h-full object-cover" />
+        </AspectRatio>,
+      );
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).toContain('rounded-2xl');
+      expect(cls).toContain('overflow-hidden');
+    });
+  });
+});

package/src/components/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,73 @@
+import { forwardRef, type CSSProperties, type ElementType } from 'react';
+import { cn } from '../../utils/cn.js';
+import type { AspectRatioProps } from './aspectRatio.types.js';
+
+/**
+ * `<AspectRatio>` — locks the aspect ratio of its child container,
+ * regardless of width. The classic use is responsive images and
+ * embedded media: an `<img>` that takes 100% of the available width
+ * but always renders at 16:9 (or 1:1, or whatever the source ratio is)
+ * — no jumping layouts during image load, no whitespace below the
+ * media, no JS measurement.
+ *
+ * Implementation: native CSS `aspect-ratio` property. Supported in
+ * every browser shipped from 2021 onward (Chrome 88, Firefox 89,
+ * Safari 15, Edge 88). No padding-bottom hack — that workaround
+ * predates the native property and brings ugly absolute-positioning
+ * requirements on the child.
+ *
+ * Why a component if it's "just one CSS property"?
+ *   Two reasons:
+ *     1. Discoverability — `<AspectRatio ratio={16/9}>` documents the
+ *        intent at the call site. `style={{ aspectRatio: '16/9' }}` is
+ *        the same thing functionally, but harder to spot in a 200-line
+ *        component file.
+ *     2. Composition — pairs naturally with `sx="rounded-xl overflow-hidden"`
+ *        for the canonical "rounded clipped media" pattern. Forgetting
+ *        the `overflow-hidden` is the #1 mistake we want to prevent
+ *        through documentation (it's in this component's MDX, at the
+ *        top of the Notes).
+ *
+ * Child contract:
+ *   The single child is expected to fill the container — typically
+ *   `<img>` / `<video>` with `className="w-full h-full object-cover"`.
+ *   We don't force this via CSS (the consumer might want a centered
+ *   icon instead of a filling image) — but it's the 99% case, and the
+ *   docs show it first.
+ */
+export const AspectRatio = forwardRef<HTMLElement, AspectRatioProps>(
+  function AspectRatio(props, ref) {
+    const {
+      ratio = 1,
+      as,
+      sx,
+      style,
+      children,
+      ...rest
+    } = props;
+
+    /*
+     * Normalise to a CSS `aspect-ratio` string. The CSS property
+     * accepts both `16/9` and `16 / 9` (with spaces), but for safety
+     * we convert numbers to the canonical `N / 1` form — `aspectRatio: 1.7777`
+     * works too, but produces an arbitrary-looking value in DevTools.
+     */
+    const aspectRatioValue = typeof ratio === 'number' ? `${ratio} / 1` : ratio;
+
+    const mergedStyle: CSSProperties = {
+      aspectRatio: aspectRatioValue,
+      ...style,
+    };
+
+    const classes = cn('w-full', sx);
+    const Tag = (as ?? 'div') as ElementType;
+
+    return (
+      <Tag ref={ref as never} className={classes} style={mergedStyle} {...rest}>
+        {children}
+      </Tag>
+    );
+  },
+);
+
+AspectRatio.displayName = 'AspectRatio';

package/src/components/AspectRatio/aspectRatio.types.ts

@@ -0,0 +1,54 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Props for `<AspectRatio>` — content-shape primitive that locks the
+ * aspect ratio of its child regardless of width.
+ *
+ * Implementation: uses the native CSS `aspect-ratio` property
+ * (supported in all current browsers since 2021 — Chrome 88+, Firefox 89+,
+ * Safari 15+, Edge 88+). No padding-bottom hack, no JS measurement.
+ *
+ * `ratio` accepts:
+ *   • A number — width / height. `16/9` is 1.7777…, `1` is square,
+ *     `4/3` is 1.333…, `21/9` is ultrawide cinema.
+ *   • A string with the CSS `aspect-ratio` syntax, e.g. `'16 / 9'`,
+ *     `'4 / 3'`. Useful when you want the source ratio to read clearly
+ *     in the JSX (`ratio="16 / 9"` is more legible than `ratio={16/9}`).
+ *
+ * The component renders a single element with `aspect-ratio: X` and
+ * `width: 100%`. The child is expected to fill it — typically an
+ * `<img>` or `<video>` with `className="w-full h-full object-cover"`.
+ *
+ * Why not a TV recipe?
+ *   The ratio is arbitrary (`16/9`, `1`, `2.35`, anything). Tailwind
+ *   has `aspect-square` / `aspect-video` / `aspect-[16/9]` arbitrary
+ *   values, but enumerating every conceivable ratio in TV would be
+ *   pointless. We set `style={{ aspectRatio }}` directly — pure CSS
+ *   property, no class purge concerns.
+ */
+export interface AspectRatioProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+  /**
+   * Aspect ratio as width/height. Number (`16/9`) or CSS string
+   * (`'16 / 9'`). Default `1` (square).
+   */
+  ratio?: number | string;
+
+  /**
+   * The child that fills the locked-ratio container. Typically an
+   * `<img>` or `<video>` with `className="w-full h-full object-cover"`.
+   */
+  children?: ReactNode;
+
+  /**
+   * Override the rendered HTML tag. Defaults to `'div'`.
+   */
+  as?: ElementType;
+
+  /**
+   * Utility classes appended to the base. Resolved via `tailwind-merge`.
+   * Common overrides: `sx="rounded-xl overflow-hidden"` to clip the
+   * child's overflow (image bleeds otherwise).
+   */
+  sx?: string;
+}

package/src/components/Box/Box.test.tsx

@@ -0,0 +1,349 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { Box } from './Box.js';
+
+/**
+ * Suite mirrors the Typography/Button test shape (rendering · variants ·
+ * compound × intent · override · polymorphism · pass-through). The big
+ * delta here is the compound-variant matrix: 5 surface variants × 7
+ * intents = 35 combos, of which 21 carry actual visual differences
+ * (outlined / soft / solid × 7 intents). We spot-check a representative
+ * subset rather than enumerate all 35 — if the TV compound resolution
+ * works for one of each (primary, danger, neutral), it works for all.
+ */
+describe('<Box>', () => {
+  // ─── Default rendering ──────────────────────────────────────────────
+  describe('default rendering', () => {
+    it('renders a <div> by default', () => {
+      const { container } = render(<Box>x</Box>);
+      expect(container.firstElementChild?.tagName).toBe('DIV');
+    });
+
+    it('default variant is plain — no border, no bg, no shadow', () => {
+      const { container } = render(<Box>x</Box>);
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).not.toContain('border');
+      expect(cls).not.toContain('bg-');
+      expect(cls).not.toContain('shadow-sm');
+      // baseline `block` is always present
+      expect(cls).toContain('block');
+    });
+  });
+
+  // ─── Variant — surface chrome ───────────────────────────────────────
+  describe('surface variants', () => {
+    it('variant="outlined" adds a border', () => {
+      const { container } = render(<Box variant="outlined" color="neutral">x</Box>);
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).toContain('border');
+      // neutral outlined picks the white surface + neutral-200 border
+      expect(cls).toContain('border-neutral-200');
+      expect(cls).toContain('bg-white');
+    });
+
+    it('variant="elevated" adds the neutral surface, no border, no color tint', () => {
+      const { container } = render(<Box variant="elevated" elevation={3}>x</Box>);
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).toContain('bg-white');
+      expect(cls).toContain('dark:bg-neutral-900');
+      expect(cls).toContain('shadow-md');
+      expect(cls).not.toContain('border ');
+    });
+
+    it('variant="soft" + color="warning" picks the warning soft tones', () => {
+      const { container } = render(<Box variant="soft" color="warning">x</Box>);
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).toContain('bg-warning-100');
+      expect(cls).toContain('text-warning-900');
+      expect(cls).toContain('dark:bg-warning-950/50');
+    });
+
+    it('variant="solid" + color="primary" picks the primary solid', () => {
+      const { container } = render(<Box variant="solid" color="primary">x</Box>);
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).toContain('bg-primary-600');
+      expect(cls).toContain('text-white');
+      expect(cls).toContain('dark:bg-primary-500');
+    });
+
+    it('variant="solid" + color="danger" picks the danger solid', () => {
+      const { container } = render(<Box variant="solid" color="danger">x</Box>);
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).toContain('bg-danger-600');
+      expect(cls).toContain('text-white');
+    });
+  });
+
+  // ─── Elevation scale ─────────────────────────────────────────────────
+  describe('elevation', () => {
+    it('elevation={0} emits shadow-none', () => {
+      const { container } = render(<Box variant="elevated" elevation={0}>x</Box>);
+      expect(container.firstElementChild?.className).toContain('shadow-none');
+    });
+
+    it('elevation={5} emits shadow-xl', () => {
+      const { container } = render(<Box variant="elevated" elevation={5}>x</Box>);
+      expect(container.firstElementChild?.className).toContain('shadow-xl');
+    });
+  });
+
+  // ─── Spacing ─────────────────────────────────────────────────────────
+  describe('spacing', () => {
+    it('p={4} emits p-4', () => {
+      const { container } = render(<Box p={4}>x</Box>);
+      expect(container.firstElementChild?.className).toContain('p-4');
+    });
+
+    it('px={6} + py={2} emits px-6 + py-2', () => {
+      const { container } = render(<Box px={6} py={2}>x</Box>);
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).toContain('px-6');
+      expect(cls).toContain('py-2');
+    });
+
+    it('m={"0.5"} emits m-0.5', () => {
+      const { container } = render(<Box m="0.5">x</Box>);
+      expect(container.firstElementChild?.className).toContain('m-0.5');
+    });
+  });
+
+  // ─── Rounded + sizing ────────────────────────────────────────────────
+  describe('rounded + sizing', () => {
+    it('rounded="xl" emits rounded-xl', () => {
+      const { container } = render(<Box rounded="xl">x</Box>);
+      expect(container.firstElementChild?.className).toContain('rounded-xl');
+    });
+
+    it('fullWidth emits w-full', () => {
+      const { container } = render(<Box fullWidth>x</Box>);
+      expect(container.firstElementChild?.className).toContain('w-full');
+    });
+
+    it('fullHeight emits h-full', () => {
+      const { container } = render(<Box fullHeight>x</Box>);
+      expect(container.firstElementChild?.className).toContain('h-full');
+    });
+  });
+
+  // ─── Override semantics ─────────────────────────────────────────────
+  describe('override', () => {
+    it('sx wins over variant defaults via tailwind-merge', () => {
+      const { container } = render(
+        <Box variant="solid" color="primary" sx="bg-fuchsia-600">x</Box>,
+      );
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).toContain('bg-fuchsia-600');
+      // the conflicting bg-primary-600 from the compound is collapsed
+      expect(cls).not.toContain('bg-primary-600');
+    });
+
+    it('sx can add utilities Box deliberately omits (overflow)', () => {
+      const { container } = render(<Box sx="overflow-hidden">x</Box>);
+      expect(container.firstElementChild?.className).toContain('overflow-hidden');
+    });
+  });
+
+  // ─── Polymorphism ───────────────────────────────────────────────────
+  describe('polymorphism', () => {
+    it('as="section" renders a <section>', () => {
+      const { container } = render(<Box as="section">x</Box>);
+      expect(container.firstElementChild?.tagName).toBe('SECTION');
+    });
+
+    it('asChild renders the single child element with merged className', () => {
+      const { container } = render(
+        <Box variant="elevated" elevation={2} asChild>
+          <article>x</article>
+        </Box>,
+      );
+      const el = container.firstElementChild;
+      expect(el?.tagName).toBe('ARTICLE');
+      expect(el?.className).toContain('shadow');
+      expect(el?.className).toContain('bg-white');
+    });
+
+    it('asChild wins over as when both are passed', () => {
+      const { container } = render(
+        <Box as="section" asChild>
+          <article>x</article>
+        </Box>,
+      );
+      expect(container.firstElementChild?.tagName).toBe('ARTICLE');
+    });
+  });
+
+  // ─── Pass-through ────────────────────────────────────────────────────
+  describe('pass-through', () => {
+    it('forwards data-* and aria-*', () => {
+      const { container } = render(
+        <Box data-testid="box" aria-label="surface">x</Box>,
+      );
+      const el = container.firstElementChild;
+      expect(el?.getAttribute('data-testid')).toBe('box');
+      expect(el?.getAttribute('aria-label')).toBe('surface');
+    });
+  });
+
+  // ─── F11-bis edge cases: every compound variant explicit ─────────────
+  // The original suite spot-checked 4 surface×intent combos (outlined
+  // neutral, soft warning, solid primary, solid danger). The validation
+  // pass before publishing 0.2.0-beta enumerates ALL 21 visually-distinct
+  // compound entries so a future TV recipe edit can't silently drop one.
+  describe('compound variants matrix — every surface × intent', () => {
+    const INTENTS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'] as const;
+
+    /*
+     * Outlined × 7 intents — each emits a tinted border + soft bg pair
+     * with the dark-mode counterpart pre-wired. Spot-check picks the
+     * `border-{color}-300` light token and the `dark:border-{color}-{N}` pair.
+     */
+    describe('outlined × intent', () => {
+      it.each(INTENTS)('outlined × %s emits border + bg with dark pair', (color) => {
+        const { container } = render(<Box variant="outlined" color={color}>x</Box>);
+        const cls = container.firstElementChild?.className ?? '';
+        if (color === 'neutral') {
+          // neutral uses the special border-neutral-200 + bg-white shape
+          expect(cls).toContain('border-neutral-200');
+          expect(cls).toContain('bg-white');
+          expect(cls).toContain('dark:border-neutral-700');
+          expect(cls).toContain('dark:bg-neutral-900');
+        } else {
+          // primary/secondary/success/warning/danger/info share the
+          // border-{color}-300 + bg-{color}-50/40 + dark:* pattern
+          expect(cls).toContain(`border-${color}-300`);
+          expect(cls).toContain(`bg-${color}-50/40`);
+          expect(cls).toContain(`dark:border-${color}-800`);
+          expect(cls).toContain(`dark:bg-${color}-950/30`);
+        }
+      });
+    });
+
+    /*
+     * Soft × 7 intents — semi-transparent tinted background + matching
+     * intent text colour. Dark pair uses a darker bg + lighter text so
+     * contrast holds in both modes.
+     */
+    describe('soft × intent', () => {
+      it.each(INTENTS)('soft × %s emits bg + text with dark pair', (color) => {
+        const { container } = render(<Box variant="soft" color={color}>x</Box>);
+        const cls = container.firstElementChild?.className ?? '';
+        if (color === 'neutral') {
+          expect(cls).toContain('bg-neutral-100');
+          expect(cls).toContain('text-neutral-900');
+          expect(cls).toContain('dark:bg-neutral-800');
+          expect(cls).toContain('dark:text-neutral-100');
+        } else {
+          expect(cls).toContain(`bg-${color}-100`);
+          expect(cls).toContain(`text-${color}-900`);
+          expect(cls).toContain(`dark:bg-${color}-950/50`);
+          expect(cls).toContain(`dark:text-${color}-100`);
+        }
+      });
+    });
+
+    /*
+     * Solid × 7 intents — full-bleed intent background, white text by
+     * default (neutral inverts: black bg → white text in light, white
+     * bg → black text in dark). The dark variant typically uses a
+     * lighter shade so the surface doesn't look pitch black on already-
+     * dark page backgrounds.
+     */
+    describe('solid × intent', () => {
+      it.each(INTENTS)('solid × %s emits bg + text-white (or contrast pair for neutral)', (color) => {
+        const { container } = render(<Box variant="solid" color={color}>x</Box>);
+        const cls = container.firstElementChild?.className ?? '';
+        if (color === 'neutral') {
+          expect(cls).toContain('bg-neutral-900');
+          expect(cls).toContain('text-white');
+          expect(cls).toContain('dark:bg-neutral-100');
+          expect(cls).toContain('dark:text-neutral-900');
+        } else if (color === 'warning') {
+          // warning uses 500/600 instead of 600/500 to keep contrast
+          // legible against an already-yellow surface in light mode.
+          expect(cls).toContain('bg-warning-500');
+          expect(cls).toContain('text-white');
+          expect(cls).toContain('dark:bg-warning-600');
+        } else {
+          expect(cls).toContain(`bg-${color}-600`);
+          expect(cls).toContain('text-white');
+          expect(cls).toContain(`dark:bg-${color}-500`);
+        }
+      });
+    });
+  });
+
+  // ─── F11-bis edge cases: color is ignored for plain / elevated ──────
+  // These two variants are color-agnostic by design (see box.variants.ts
+  // header) — passing `color` shouldn't accidentally inject the intent
+  // bg/border via the compound matrix.
+  describe('color-agnostic variants', () => {
+    it('plain + color="primary" does NOT add intent classes', () => {
+      const { container } = render(<Box variant="plain" color="primary">x</Box>);
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).not.toContain('bg-primary-');
+      expect(cls).not.toContain('border-primary-');
+      expect(cls).not.toContain('text-primary-');
+    });
+
+    it('elevated + color="danger" stays on the neutral surface', () => {
+      const { container } = render(<Box variant="elevated" color="danger">x</Box>);
+      const cls = container.firstElementChild?.className ?? '';
+      // elevated paints bg-white / dark:bg-neutral-900 regardless of intent
+      expect(cls).toContain('bg-white');
+      expect(cls).toContain('dark:bg-neutral-900');
+      expect(cls).not.toContain('bg-danger-');
+      expect(cls).not.toContain('border-danger-');
+    });
+  });
+
+  // ─── F11-bis edge cases: spacing axis coexistence ───────────────────
+  describe('spacing axis coexistence', () => {
+    it('p={4} + px={6}: both classes emitted (tailwind-merge resolves)', () => {
+      const { container } = render(<Box p={4} px={6}>x</Box>);
+      const cls = container.firstElementChild?.className ?? '';
+      // tailwind-merge: px-6 wins over p-4 on horizontal padding,
+      // p-4 keeps applying vertical via py
+      expect(cls).toContain('px-6');
+      // p-4 → tailwind-merge collapses with px-6 (latter wins on x-axis)
+      // The vertical (py-4 derived from p-4) is what remains.
+    });
+
+    it('m={2} + mx={4} + my={6}: all three coexist (resolves to mx-4 + my-6 effectively)', () => {
+      const { container } = render(<Box m={2} mx={4} my={6}>x</Box>);
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).toContain('mx-4');
+      expect(cls).toContain('my-6');
+    });
+  });
+
+  // ─── F11-bis edge cases: elevation × variant interaction ────────────
+  describe('elevation × variant', () => {
+    it('elevation works on non-elevated variants too (consumer choice)', () => {
+      const { container } = render(<Box variant="outlined" color="neutral" elevation={4}>x</Box>);
+      // The shadow class still gets emitted even though the design
+      // recommendation is "use elevation only with variant=elevated".
+      // We don't gate this at the TV level because compound restrictions
+      // would make the API harder to discover.
+      expect(container.firstElementChild?.className).toContain('shadow-lg');
+    });
+
+    it('elevation=0 explicitly disables shadow', () => {
+      const { container } = render(<Box variant="elevated" elevation={0}>x</Box>);
+      expect(container.firstElementChild?.className).toContain('shadow-none');
+    });
+  });
+
+  // ─── F11-bis edge cases: rounded full ───────────────────────────────
+  describe('rounded edge values', () => {
+    it('rounded="full" produces rounded-full (avatars, pills)', () => {
+      const { container } = render(<Box rounded="full">x</Box>);
+      expect(container.firstElementChild?.className).toContain('rounded-full');
+    });
+
+    it('rounded="none" explicitly removes any rounding', () => {
+      const { container } = render(<Box rounded="none">x</Box>);
+      expect(container.firstElementChild?.className).toContain('rounded-none');
+    });
+  });
+});