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
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';insrc/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 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 ·
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.