@boostdev/design-system-components 2.1.0 → 2.2.1

package/src/web-components/layout/BdsGrid.stories.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { GridVariant } from './bds-grid';
+import type { GridItemSpanValue } from './bds-grid-item';
+import '../index'; // auto-registers all custom elements
+
+function BdsGrid({
+  variant = 'main',
+  columns,
+  isCentered,
+  isMasonry,
+  children,
+}: {
+  variant?: GridVariant;
+  columns?: number;
+  isCentered?: boolean;
+  isMasonry?: boolean;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    'bds-grid',
+    {
+      variant,
+      columns,
+      'is-centered': isCentered || undefined,
+      'is-masonry': isMasonry || undefined,
+    },
+    children,
+  );
+}
+
+function Item({
+  columnSpan,
+  startColumn,
+  endColumn,
+  rowSpan,
+  children,
+}: {
+  columnSpan?: GridItemSpanValue;
+  startColumn?: number;
+  endColumn?: number;
+  rowSpan?: number;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    'bds-grid-item',
+    {
+      'column-span': columnSpan ?? 'full',
+      'start-column': startColumn,
+      'end-column': endColumn,
+      'row-span': rowSpan,
+    },
+    children,
+  );
+}
+
+const cellStyle = {
+  background: 'var(--bds-color_bg-subtle, #eef)',
+  padding: 'var(--bds-space_m, 16px)',
+  borderRadius: 'var(--bds-border_radius--s, 8px)',
+  textAlign: 'center' as const,
+};
+
+const meta = {
+  title: 'Web Components/Layout/Grid',
+  component: BdsGrid,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    variant: { control: 'select', options: ['main', 'page', 'funnel', 'custom'] },
+    columns: { control: 'number' },
+    isCentered: { control: 'boolean' },
+    isMasonry: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsGrid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Main: Story = {
+  args: { variant: 'main' },
+  render: (args) => (
+    <BdsGrid {...args}>
+      <Item columnSpan="half"><div style={cellStyle}>half</div></Item>
+      <Item columnSpan="one-quarter"><div style={cellStyle}>¼</div></Item>
+      <Item columnSpan="one-quarter"><div style={cellStyle}>¼</div></Item>
+    </BdsGrid>
+  ),
+};
+
+export const Page: Story = {
+  args: { variant: 'page' },
+  render: (args) => (
+    <BdsGrid {...args}>
+      <Item><div style={cellStyle}>First</div></Item>
+      <Item><div style={cellStyle}>Second</div></Item>
+    </BdsGrid>
+  ),
+};
+
+export const Spans: Story = {
+  args: {},
+  render: () => (
+    <BdsGrid>
+      <Item columnSpan="one-quarter"><div style={cellStyle}>one-quarter</div></Item>
+      <Item columnSpan="three-quarters"><div style={cellStyle}>three-quarters</div></Item>
+      <Item columnSpan="one-third"><div style={cellStyle}>one-third</div></Item>
+      <Item columnSpan="two-thirds"><div style={cellStyle}>two-thirds</div></Item>
+      <Item columnSpan="half"><div style={cellStyle}>half</div></Item>
+      <Item columnSpan="half"><div style={cellStyle}>half</div></Item>
+      <Item columnSpan="full"><div style={cellStyle}>full</div></Item>
+    </BdsGrid>
+  ),
+};
+
+export const Funnel: Story = {
+  args: { variant: 'funnel' },
+  render: (args) => (
+    <BdsGrid {...args}>
+      <Item><div style={cellStyle}>Funnel content</div></Item>
+      <Item columnSpan="half"><div style={cellStyle}>Half</div></Item>
+      <Item columnSpan="half"><div style={cellStyle}>Half</div></Item>
+    </BdsGrid>
+  ),
+};
+
+export const Custom: Story = {
+  args: { variant: 'custom', columns: 5 },
+  render: (args) => (
+    <BdsGrid {...args}>
+      {Array.from({ length: 5 }).map((_, i) => (
+        <Item key={i} columnSpan={1}><div style={cellStyle}>Col {i + 1}</div></Item>
+      ))}
+    </BdsGrid>
+  ),
+};
+
+export const Centered: Story = {
+  args: { isCentered: true },
+  render: (args) => (
+    <BdsGrid {...args}>
+      <Item><div style={cellStyle}>Centered</div></Item>
+      <Item columnSpan="half"><div style={cellStyle}>Half</div></Item>
+      <Item columnSpan="half"><div style={cellStyle}>Half</div></Item>
+    </BdsGrid>
+  ),
+};
+
+export const StartEnd: Story = {
+  args: { variant: 'custom', columns: 6 },
+  render: (args) => (
+    <BdsGrid {...args}>
+      <Item startColumn={2} endColumn={6}>
+        <div style={cellStyle}>startColumn=2, endColumn=6 (escape hatch — use with care)</div>
+      </Item>
+    </BdsGrid>
+  ),
+};
+
+const masonryHeights = [120, 180, 90, 220, 150, 200, 110, 170, 240, 130, 160, 190];
+const masonryCellStyle = (i: number) => ({
+  ...cellStyle,
+  blockSize: `${masonryHeights[i % masonryHeights.length]}px`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const Masonry: Story = {
+  args: { isMasonry: true },
+  render: (args) => (
+    <BdsGrid {...args}>
+      {Array.from({ length: 12 }).map((_, i) => (
+        <Item key={i} columnSpan="one-quarter"><div style={masonryCellStyle(i)}>Item {i + 1}</div></Item>
+      ))}
+    </BdsGrid>
+  ),
+};
+
+export const MasonryWithSpans: Story = {
+  args: { isMasonry: true },
+  render: (args) => (
+    <BdsGrid {...args}>
+      <Item columnSpan="half"><div style={masonryCellStyle(0)}>Spans half</div></Item>
+      {Array.from({ length: 10 }).map((_, i) => (
+        <Item key={i} columnSpan="one-quarter"><div style={masonryCellStyle(i + 1)}>Item {i + 1}</div></Item>
+      ))}
+    </BdsGrid>
+  ),
+};
+
+export const ComplexLayout: Story = {
+  args: {},
+  render: () => (
+    <BdsGrid>
+      <Item columnSpan="one-quarter"><div style={cellStyle}>¼</div></Item>
+      <Item columnSpan="three-quarters"><div style={cellStyle}>¾</div></Item>
+      <Item columnSpan="one-third"><div style={cellStyle}>⅓</div></Item>
+      <Item columnSpan="two-thirds"><div style={cellStyle}>⅔</div></Item>
+      <Item columnSpan="half"><div style={cellStyle}>½</div></Item>
+      <Item columnSpan="half"><div style={cellStyle}>½</div></Item>
+      <Item columnSpan="full"><div style={cellStyle}>full row</div></Item>
+      <Item columnSpan="one-quarter"><div style={cellStyle}>¼</div></Item>
+      <Item columnSpan="one-quarter"><div style={cellStyle}>¼</div></Item>
+      <Item columnSpan="one-quarter"><div style={cellStyle}>¼</div></Item>
+      <Item columnSpan="one-quarter"><div style={cellStyle}>¼</div></Item>
+    </BdsGrid>
+  ),
+};

package/src/web-components/layout/BdsGridItem.mdx

@@ -0,0 +1,52 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsGridItem.stories';
+
+<Meta of={Stories} />
+
+# &lt;bds-grid-item&gt;
+
+Grid cell for `<bds-grid>`. Sets `grid-column` / `grid-row` on its host element using the foundation span tokens.
+
+> **Status: experimental** — API may change before stable release.
+
+## Examples
+
+### Inside a grid
+<Canvas of={Stories.InsideGrid} />
+
+### Start / end (escape hatch)
+<Canvas of={Stories.StartEnd} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Attributes
+
+| Attribute       | Type                                                                                             | Default  | Description                                                                                                                  |
+| --------------- | ------------------------------------------------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `column-span`   | `"full"` <br /> \| `"three-quarters"` <br /> \| `"two-thirds"` <br /> \| `"half"` <br /> \| `"one-third"` <br /> \| `"one-quarter"` <br /> \| `"auto"` <br /> \| `number` | `"full"` | How many grid columns to span. `"auto"` derives the span from the intrinsic aspect ratio of the first `<img>`/`<video>` descendant — see [Aspect-ratio auto-span](?path=/docs/web-components-layout-grid--docs#aspect-ratio-auto-span). |
+| `row-span`      | number                                                                                           | —        | How many rows to span. Ignored in masonry layouts.                                                                           |
+| `start-column`  | number                                                                                           | —        | **Escape hatch** — explicit start column (overrides `column-span`)                                                           |
+| `end-column`    | number                                                                                           | —        | **Escape hatch** — explicit end column (overrides `column-span`)                                                             |
+
+When the parent `<bds-grid>` sets `auto-span-media`, items without an explicit `column-span` behave as if `column-span="auto"`.
+
+### Warning: start-column / end-column
+
+These override the responsive span tokens and force fixed positioning. Only reach for them when you fully understand the layout implications. Prefer named `column-span` values.
+
+## Slots
+
+| Slot        | Description |
+| ----------- | ----------- |
+| `(default)` | Cell content |
+
+## Usage in plain HTML
+
+```html
+<bds-grid variant="main">
+  <bds-grid-item column-span="three-quarters">Wide</bds-grid-item>
+  <bds-grid-item column-span="one-quarter">Narrow</bds-grid-item>
+</bds-grid>
+```

package/src/web-components/layout/BdsGridItem.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { GridItemSpanValue } from './bds-grid-item';
+import '../index';
+
+function BdsGridItem({
+  columnSpan = 'full',
+  rowSpan,
+  startColumn,
+  endColumn,
+  children,
+}: {
+  columnSpan?: GridItemSpanValue;
+  rowSpan?: number;
+  startColumn?: number;
+  endColumn?: number;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    'bds-grid-item',
+    {
+      'column-span': columnSpan,
+      'row-span': rowSpan,
+      'start-column': startColumn,
+      'end-column': endColumn,
+    },
+    children,
+  );
+}
+
+const cellStyle = {
+  background: 'var(--bds-color_bg-subtle, #eef)',
+  padding: 'var(--bds-space_m, 16px)',
+  borderRadius: 'var(--bds-border_radius--s, 8px)',
+  textAlign: 'center' as const,
+};
+
+const meta = {
+  title: 'Web Components/Layout/GridItem',
+  component: BdsGridItem,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    columnSpan: {
+      control: 'select',
+      options: ['full', 'three-quarters', 'two-thirds', 'half', 'one-third', 'one-quarter'],
+    },
+    rowSpan: { control: 'number' },
+    startColumn: { control: 'number' },
+    endColumn: { control: 'number' },
+  },
+} satisfies Meta<typeof BdsGridItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const InsideGrid: Story = {
+  args: { columnSpan: 'half' },
+  render: (args) =>
+    React.createElement('bds-grid', { variant: 'main' },
+      React.createElement(BdsGridItem, args, <div style={cellStyle}>half</div>),
+      React.createElement(BdsGridItem, { columnSpan: 'half' }, <div style={cellStyle}>half</div>),
+    ),
+};
+
+export const StartEnd: Story = {
+  args: { startColumn: 2, endColumn: 6 },
+  render: (args) =>
+    React.createElement('bds-grid', { variant: 'custom', columns: 6 },
+      React.createElement(BdsGridItem, args, <div style={cellStyle}>escape hatch</div>),
+    ),
+};

package/src/web-components/layout/bds-grid-item.spec.ts

@@ -0,0 +1,102 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsGridItem } from './bds-grid-item';
+import './bds-grid';
+
+describe('bds-grid-item', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-grid-item')).toBe(BdsGridItem);
+  });
+
+  it('defaults to full span', async () => {
+    const el = await fixture('<bds-grid-item></bds-grid-item>') as BdsGridItem;
+    expect(el.style.gridColumn).toBe('var(--bds-grid_span-100)');
+    cleanup(el);
+  });
+
+  it('maps named spans to span tokens', async () => {
+    const cases: Array<[string, string]> = [
+      ['three-quarters', 'span var(--bds-grid_columns-75)'],
+      ['two-thirds', 'span var(--bds-grid_columns-66)'],
+      ['half', 'span var(--bds-grid_columns-50)'],
+      ['one-third', 'span var(--bds-grid_columns-33)'],
+      ['one-quarter', 'span var(--bds-grid_columns-25)'],
+    ];
+    for (const [input, expected] of cases) {
+      const el = await fixture(`<bds-grid-item column-span="${input}"></bds-grid-item>`);
+      expect((el as HTMLElement).style.gridColumn).toBe(expected);
+      cleanup(el);
+    }
+  });
+
+  it('accepts numeric column-span attribute', async () => {
+    const el = await fixture('<bds-grid-item column-span="3"></bds-grid-item>');
+    expect((el as HTMLElement).style.gridColumn).toBe('span 3');
+    cleanup(el);
+  });
+
+  it('applies row-span', async () => {
+    const el = await fixture('<bds-grid-item row-span="2"></bds-grid-item>');
+    expect((el as HTMLElement).style.gridRow).toBe('span 2');
+    cleanup(el);
+  });
+
+  it('start-column and end-column override column-span', async () => {
+    const el = await fixture(
+      '<bds-grid-item column-span="half" start-column="2" end-column="5"></bds-grid-item>',
+    );
+    expect((el as HTMLElement).style.gridColumn).toBe('2 / 5');
+    cleanup(el);
+  });
+
+  it('renders slotted children', async () => {
+    const el = await fixture('<bds-grid-item>cell</bds-grid-item>');
+    expect(el.textContent?.trim()).toBe('cell');
+    cleanup(el);
+  });
+
+  it('resolves column-span="auto" from a 16:9 image', async () => {
+    const el = (await fixture(
+      '<bds-grid-item column-span="auto"><img alt=""></bds-grid-item>',
+    )) as BdsGridItem;
+    const img = el.querySelector('img') as HTMLImageElement;
+    Object.defineProperty(img, 'naturalWidth', { value: 1600, configurable: true });
+    Object.defineProperty(img, 'naturalHeight', { value: 900, configurable: true });
+    Object.defineProperty(img, 'complete', { value: true, configurable: true });
+    el.requestUpdate();
+    await el.updateComplete;
+    expect((el as HTMLElement).style.gridColumn).toBe('span var(--bds-grid_columns-50)');
+    cleanup(el);
+  });
+
+  it('falls back to one-quarter for column-span="auto" without media', async () => {
+    const el = (await fixture(
+      '<bds-grid-item column-span="auto"><p>text</p></bds-grid-item>',
+    )) as BdsGridItem;
+    expect((el as HTMLElement).style.gridColumn).toBe('span var(--bds-grid_columns-25)');
+    cleanup(el);
+  });
+
+  it('inherits auto-span from parent bds-grid[auto-span-media]', async () => {
+    const grid = (await fixture(
+      '<bds-grid auto-span-media><bds-grid-item><img alt=""></bds-grid-item></bds-grid>',
+    )) as HTMLElement;
+    const item = grid.querySelector('bds-grid-item') as BdsGridItem;
+    const img = item.querySelector('img') as HTMLImageElement;
+    Object.defineProperty(img, 'naturalWidth', { value: 3200, configurable: true });
+    Object.defineProperty(img, 'naturalHeight', { value: 900, configurable: true });
+    Object.defineProperty(img, 'complete', { value: true, configurable: true });
+    item.requestUpdate();
+    await item.updateComplete;
+    expect(item.style.gridColumn).toBe('var(--bds-grid_span-100)');
+    cleanup(grid);
+  });
+
+  it('an explicit column-span wins over parent auto-span-media', async () => {
+    const grid = (await fixture(
+      '<bds-grid auto-span-media><bds-grid-item column-span="one-third"><img alt=""></bds-grid-item></bds-grid>',
+    )) as HTMLElement;
+    const item = grid.querySelector('bds-grid-item') as BdsGridItem;
+    expect(item.style.gridColumn).toBe('span var(--bds-grid_columns-33)');
+    cleanup(grid);
+  });
+});

package/src/web-components/layout/bds-grid-item.ts

@@ -0,0 +1,177 @@
+import { LitElement, css, html } from 'lit';
+import {
+  aspectToColumnSpan,
+  findMediaChild,
+  mediaReadyEvent,
+  readMediaAspect,
+  type AutoSpanResult,
+} from '../../components/layout/Grid/autoSpan';
+
+export type GridItemSpanValue =
+  | 'full'
+  | 'three-quarters'
+  | 'two-thirds'
+  | 'half'
+  | 'one-third'
+  | 'one-quarter'
+  | 'auto'
+  | number;
+
+const SPAN_VAR: Record<Exclude<GridItemSpanValue, number | 'auto'>, string> = {
+  full: 'var(--bds-grid_span-100)',
+  'three-quarters': 'span var(--bds-grid_columns-75)',
+  'two-thirds': 'span var(--bds-grid_columns-66)',
+  half: 'span var(--bds-grid_columns-50)',
+  'one-third': 'span var(--bds-grid_columns-33)',
+  'one-quarter': 'span var(--bds-grid_columns-25)',
+};
+
+function resolveSpan(value: Exclude<GridItemSpanValue, 'auto'> | undefined): string {
+  if (value === undefined || value === null) return SPAN_VAR.full;
+  if (typeof value === 'number') return `span ${value}`;
+  if (!(value in SPAN_VAR)) {
+    const n = Number(value);
+    if (Number.isFinite(n)) return `span ${n}`;
+    return SPAN_VAR.full;
+  }
+  return SPAN_VAR[value];
+}
+
+/**
+ * `<bds-grid-item>` — grid cell for `<bds-grid>`.
+ *
+ * Attributes:
+ *   column-span   — 'full' | 'three-quarters' | 'two-thirds' | 'half' | 'one-third' | 'one-quarter' | 'auto' | number
+ *                   `'auto'` derives the span from the intrinsic aspect ratio of the first
+ *                   `<img>` or `<video>` child (see Grid.mdx for thresholds).
+ *                   If the parent `<bds-grid>` sets `auto-span-media` and this element has
+ *                   no `column-span`, the item behaves as if `column-span="auto"`.
+ *   row-span      — number
+ *   start-column  — number (escape hatch; overrides column-span)
+ *   end-column    — number (escape hatch; overrides column-span)
+ *
+ * @example
+ * <bds-grid-item column-span="three-quarters">Content</bds-grid-item>
+ */
+export class BdsGridItem extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      min-inline-size: 0;
+    }
+  `;
+
+  static properties = {
+    columnSpan: { attribute: 'column-span' },
+    rowSpan: { attribute: 'row-span', type: Number },
+    startColumn: { attribute: 'start-column', type: Number },
+    endColumn: { attribute: 'end-column', type: Number },
+  };
+
+  declare columnSpan: GridItemSpanValue | undefined;
+  declare rowSpan: number | undefined;
+  declare startColumn: number | undefined;
+  declare endColumn: number | undefined;
+
+  private _autoSpan: AutoSpanResult = 'one-quarter';
+  private _mediaCleanup?: () => void;
+  private _slotObserver?: MutationObserver;
+
+  constructor() {
+    super();
+    this.columnSpan = undefined;
+    this.rowSpan = undefined;
+    this.startColumn = undefined;
+    this.endColumn = undefined;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    if (typeof MutationObserver !== 'undefined') {
+      this._slotObserver = new MutationObserver(() => this._resolveAutoSpan());
+      this._slotObserver.observe(this, { childList: true, subtree: true });
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._teardownMedia();
+    this._slotObserver?.disconnect();
+    this._slotObserver = undefined;
+  }
+
+  private _effectiveColumnSpan(): GridItemSpanValue {
+    if (this.columnSpan !== undefined && this.columnSpan !== null) return this.columnSpan;
+    const parent = this.closest('bds-grid') as
+      | (HTMLElement & { autoSpanMedia?: boolean })
+      | null;
+    if (parent?.autoSpanMedia) return 'auto';
+    return 'full';
+  }
+
+  private _teardownMedia() {
+    this._mediaCleanup?.();
+    this._mediaCleanup = undefined;
+  }
+
+  private _resolveAutoSpan() {
+    this._teardownMedia();
+    if (this._effectiveColumnSpan() !== 'auto') return;
+
+    const media = findMediaChild(this);
+    if (!media) {
+      this._setAutoSpan('one-quarter');
+      return;
+    }
+    const aspect = readMediaAspect(media);
+    if (aspect !== null) {
+      this._setAutoSpan(aspectToColumnSpan(aspect));
+      return;
+    }
+    const event = mediaReadyEvent(media);
+    if (!event) {
+      this._setAutoSpan('one-quarter');
+      return;
+    }
+    const handler = () => {
+      const a = readMediaAspect(media);
+      if (a !== null) this._setAutoSpan(aspectToColumnSpan(a));
+    };
+    media.addEventListener(event, handler, { once: true });
+    this._mediaCleanup = () => media.removeEventListener(event, handler);
+  }
+
+  private _setAutoSpan(next: AutoSpanResult) {
+    if (this._autoSpan === next) return;
+    this._autoSpan = next;
+    this.requestUpdate();
+  }
+
+  updated() {
+    const effective = this._effectiveColumnSpan();
+    if (effective === 'auto') this._resolveAutoSpan();
+
+    const hasExplicitRange =
+      this.startColumn !== undefined || this.endColumn !== undefined;
+
+    const resolved = effective === 'auto' ? this._autoSpan : effective;
+    const gridColumn = hasExplicitRange
+      ? `${this.startColumn ?? 'auto'} / ${this.endColumn ?? 'auto'}`
+      : resolveSpan(resolved);
+
+    this.style.gridColumn = gridColumn;
+    this.style.gridRow = this.rowSpan !== undefined ? `span ${this.rowSpan}` : '';
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('bds-grid-item', BdsGridItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-grid-item': BdsGridItem;
+  }
+}

package/src/web-components/layout/bds-grid.spec.ts

@@ -0,0 +1,62 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsGrid } from './bds-grid';
+import './bds-grid-item';
+
+describe('bds-grid', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-grid')).toBe(BdsGrid);
+  });
+
+  it('defaults to variant="main" and is-centered=false', async () => {
+    const el = await fixture('<bds-grid></bds-grid>') as BdsGrid;
+    expect(el.variant).toBe('main');
+    expect(el.isCentered).toBe(false);
+    cleanup(el);
+  });
+
+  it('applies the main variant class by default', async () => {
+    const el = await fixture('<bds-grid></bds-grid>');
+    const grid = el.shadowRoot!.querySelector('.grid')!;
+    expect(grid.classList.contains('--main')).toBe(true);
+    cleanup(el);
+  });
+
+  it('applies the page variant class', async () => {
+    const el = await fixture('<bds-grid variant="page"></bds-grid>');
+    expect(el.shadowRoot!.querySelector('.grid')!.classList.contains('--page')).toBe(true);
+    cleanup(el);
+  });
+
+  it('applies the funnel variant class', async () => {
+    const el = await fixture('<bds-grid variant="funnel"></bds-grid>');
+    expect(el.shadowRoot!.querySelector('.grid')!.classList.contains('--funnel')).toBe(true);
+    cleanup(el);
+  });
+
+  it('applies custom variant with --grid_columns style', async () => {
+    const el = await fixture('<bds-grid variant="custom" columns="5"></bds-grid>');
+    const grid = el.shadowRoot!.querySelector('.grid') as HTMLElement;
+    expect(grid.classList.contains('--custom')).toBe(true);
+    expect(grid.getAttribute('style')).toContain('--grid_columns: 5');
+    cleanup(el);
+  });
+
+  it('applies centered class via is-centered', async () => {
+    const el = await fixture('<bds-grid is-centered></bds-grid>');
+    expect(el.shadowRoot!.querySelector('.grid')!.classList.contains('--centered')).toBe(true);
+    cleanup(el);
+  });
+
+  it('renders slotted children', async () => {
+    const el = await fixture('<bds-grid><bds-grid-item>Hello</bds-grid-item></bds-grid>');
+    expect(el.textContent?.trim()).toBe('Hello');
+    cleanup(el);
+  });
+
+  it('applies masonry class when is-masonry is set', async () => {
+    const el = await fixture('<bds-grid is-masonry></bds-grid>') as BdsGrid;
+    expect(el.isMasonry).toBe(true);
+    expect(el.shadowRoot!.querySelector('.grid')!.classList.contains('--masonry')).toBe(true);
+    cleanup(el);
+  });
+});