# Record

Level: molecule.

## Purpose and use

Present one label/value pair in a detail view, vertically or horizontally. Use an
editable field for user input and Table for repeated column-based records.

## Anatomy, behavior, and accessibility

- Label and value regions can be shown independently; each has an optional named
  info button. Value renders as Text, Badge, Link, Tag or projected Swap content.
- The Swap marker is `[wblRecordSwap]`. Other variants render valueText through
  their local primitives. Flow changes layout, not reading order or data behavior.
- Name the attribute precisely and include units in its value where relevant.
  The container has no definition-list semantics; visible text carries the relation.

## Open Questions

The built-in info buttons have accessible labels but no handlers or tooltip
content. The Link variant uses fixed href="#" and exposes no href input. These
are visual stubs; use Swap with a real named link/action when behavior is needed.

## Local component contract

This is the active owned contract for `component.record`. 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

- `WblRecordComponent` — `wbl-record` (src/app/design-system/patterns/record/record.component.ts).

### Inputs

- `WblRecordComponent.type = input<WblRecordType>('Text')`
- `WblRecordComponent.flow = input<WblRecordFlow>('Vertical')`
- `WblRecordComponent.label = input(true)`
- `WblRecordComponent.labelText = input('Label')`
- `WblRecordComponent.labelInfo = input(true)`
- `WblRecordComponent.value = input(true)`
- `WblRecordComponent.valueText = input('Value')`
- `WblRecordComponent.valueInfo = input(true)`

### Public types and allowed values

```ts
type WblRecordType = 'Text' | 'Badge' | 'Link' | 'Tag' | 'Swap';
type WblRecordFlow = 'Vertical' | 'Horizontal';
```

### Models

- None.

### Outputs

- None.

### Slots and projection markers

- `WblRecordComponent: <ng-content select="[wblRecordSwap]">`

### Local evidence

- Code: `src/app/design-system/patterns/record/record.component.ts`.
- Focused test: `src/app/design-system/patterns/record/record.component.spec.ts`.
- Public export: `export * from './patterns/record/record.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/record.stories.ts` (`Design System/Patterns/wbl-record`).

## Figma status

Fresh read-only Figma inspection and screenshot on 2026-09-22 verified
Record set `8047:25999` in `EO9tuCsqwuHL8cZ4Eb2psR`, key
`eef1940127a436548906af70552e516d0eea41d6`, for Text/Link Vertical.
The sibling [assembly sidecar](wbl-record.figma.md) governs that scoped anatomy.
Type=Link contains styled value text, not a nested standalone Link instance.
Label and Value text are native component properties; optional info controls
can be hidden independently. This documentation does not change the Angular API.

Documentation: `LUU-427` · [GitHub Issue 10](https://github.com/logisticsdesign/logistics-2/issues/10) ·
verified member `danil-lebedev`, GitHub ID `50231562` · agent `Codex` / Specs ·
run/session `luu427-drawer-20260922`.

## Provenance

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