# Segment Control

Level: molecule.

## Purpose and use

Select one option from a compact set of peers. Use tabs for switching documented
panels and checkboxes when multiple independent selections are allowed.

## Anatomy, behavior, and accessibility

- Required items render native radio buttons in a radiogroup, with optional icons,
  descriptions and badges. S suppresses descriptions; hug/fixed sets width treatment.
- Selection resolves from value, then internal selection, then the first enabled
  item. A changed enabled choice emits valueChange and segmentSelected; selecting
  the current item does nothing. A supplied value remains parent-controlled.
- Arrow keys move and select cyclically among enabled options; Home/End choose
  first/last. Only the selected option is in the normal Tab order. Disabled items
  cannot be selected. focusedValue is a visual helper, not a DOM focus command.
- Use stable unique string/number values and clear option labels. Do not place
  required explanatory text only in descriptions when S is used.

## Open Questions

The radiogroup has no accessible-name input or linked label. A controlled value
that is missing or disabled can leave no selected tabbable option; the parent
should provide an enabled value until that behavior is changed.

## Local component contract

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

- `WblSegmentControlComponent` — `wbl-segment-control` (src/app/design-system/patterns/segment-control/segment-control.component.ts).

### Inputs

- `WblSegmentControlComponent.size = input<WblSegmentControlSize>('L')`
- `WblSegmentControlComponent.width = input<WblSegmentControlWidth>('hug')`
- `WblSegmentControlComponent.items = input.required<WblSegmentControlItem[]>()`
- `WblSegmentControlComponent.value = input<WblSegmentControlValue | null>(null)`
- `WblSegmentControlComponent.focusedValue = input<WblSegmentControlValue | null>(null)`

### Public types and allowed values

```ts
type WblSegmentControlSize = 'L' | 'M' | 'S';
type WblSegmentControlWidth = 'hug' | 'fixed';
interface WblSegmentControlItem {
  value: WblSegmentControlValue;
  label: string;
  description?: string;
  iconName?: WblIconName;
  badgeLabel?: string | number;
  disabled?: boolean;
}
type WblSegmentControlValue = string | number;
```

Icon-name inputs use `WblIconName` from the [shared icon contract](../atoms/icon.md);
choose a key present in the owned icon pack, not an arbitrary external icon name.

### Models

- None.

### Outputs

- `WblSegmentControlComponent.valueChange = output<WblSegmentControlValue>()`
- `WblSegmentControlComponent.segmentSelected = output<WblSegmentControlItem>()`

### Slots and projection markers

- The exact template has no Angular content-projection slot.

### Local evidence

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

## Figma status

This runtime contract does not infer a Figma owner. Assembly evidence, when
verified, is maintained separately through the inventory-linked sidecar.

## Provenance

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