# Data Display Grid

Level: molecule.

## Purpose and use

Arrange related read-only metrics as one group of Data Display items. Use Table
for aligned records with column headers, sorting or row actions.

## Anatomy, behavior, and accessibility

- A single projected-content container controls item sizing and spacing. L/M
  sets the group size treatment; the children supply labels, values and semantics.
- `fill` distributes items in one nonwrapping flex row. `fit-content` and `fixed`
  wrap; fixed items use `fixedColumnWidth`. `custom` uses CSS grid columns.
- Non-null `layout` overrides `itemSizing`; `hug` means `fit-content`. In custom
  mode `columns` takes precedence over `customColumns`.
- There are no interaction events, selection or table/grid ARIA roles. Keep DOM
  order meaningful and choose widths that preserve labels and values; CSS column
  strings and gaps are supplied by the caller.

## Figma source and verified mapping

- Figma component: [Data Display/Grid — `9981:1386`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/%F0%9F%9A%9B-WB-Logistics-UI-kit?node-id=9981-1386), key `9764bb222ebb29d110e2f9cf0162d6edf7af08b7`.
- Verified in `D-021` ([GitLab Issue](https://gitlab.com/polozovdaniel/logistics-2/-/work_items/22)).
- The Figma component composes eight `Data Display/Single` instances in the
  published `M`/`Text` state. It uses an 8px item gap and 12px vertical
  padding; the local default `gap="var(--space-200)"` preserves that gap.
- Figma's repeated Single instances map to the local projected
  `wbl-data-display` children. The grid's `size` keeps their presentation
  coherent when a consuming composition selects `M` or `L`.

### Documented differences

- Figma documents one eight-item `M`/`Text` arrangement. Angular deliberately
  accepts any number of projected Data Display children.
- Local `itemSizing`, `layout`, `fixedColumnWidth`, `columns`, and
  `customColumns` are runtime layout controls; no corresponding Figma Grid
  property is published.

## Local component contract

This is the active owned contract for `component.data-display-grid`. The API below
is verified against the current local implementation, focused test and story.
The Source commit `0112cba0779a2d2a4b6c7a17243201694344d70a` remains
migration provenance, not the runtime owner.

### Classes and selectors

- `WblDataDisplayGridComponent` — `wbl-data-display-grid` (src/app/design-system/patterns/data-display-grid/data-display-grid.component.ts).

### Inputs

- `WblDataDisplayGridComponent.size = input<WblDataDisplaySize>('L')`
- `WblDataDisplayGridComponent.itemSizing = input<WblDataDisplayGridItemSizing>('fill')`
- `WblDataDisplayGridComponent.layout = input<WblDataDisplayGridLayout | null>(null)`
- `WblDataDisplayGridComponent.fixedColumnWidth = input('10.875rem')`
- `WblDataDisplayGridComponent.columns = input<string | null>(null)`
- `WblDataDisplayGridComponent.customColumns = input<string | null>(null)`
- `WblDataDisplayGridComponent.gap = input('var(--space-200)')`

### Public types and allowed values

```ts
type WblDataDisplaySize = 'M' | 'L';
type WblDataDisplayGridItemSizing = 'fill' | 'fit-content' | 'fixed' | 'custom';
type WblDataDisplayGridLayout = WblDataDisplayGridItemSizing | 'hug';
```

### Models

- None.

### Outputs

- None.

### Slots and projection markers

- `WblDataDisplayGridComponent: <ng-content>`

### Local evidence

- Code: `src/app/design-system/patterns/data-display-grid/data-display-grid.component.ts`.
- Focused test: `src/app/design-system/patterns/data-display-grid/data-display-grid.component.spec.ts`.
- Public export: `export * from './patterns/data-display-grid/data-display-grid.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/data-display.stories.ts` (`Design System/Primitives/wbl-data-display`). This is the shared active Storybook story for this family.

## Figma status

The source above is the verified Figma Grid composition. `figmaSidecar` remains
absent: this task links status and behavior without introducing a separate
reusable Figma assembly contract.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.