# Chip

Level: molecule.

## Purpose and use

Toggle a compact choice, such as a category or view option. Use Filter Chip for
an applied filter with a removable value, and a link for navigation.

## Anatomy, behavior, and accessibility

- A native toggle button contains a label, optional leading icon and optional
  count badge. Sizes L/M/S share the same selection behavior.
- Activation emits the inverse of the supplied `selected` value. The parent must
  write the next value back; Chip does not keep an independent selected state.
- `aria-pressed` reflects the visible selection. Disabled blocks the native button
  and output, and suppresses the selected presentation even if `selected=true`.
- The badge is decorative and hidden from assistive technology. If its count is
  essential, include that meaning in surrounding text. Keep labels short and
  specific; there is no close/removal affordance in this component.

## Local component contract

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

- `WblChipComponent` — `wbl-chip` (src/app/design-system/patterns/chip/chip.component.ts).

### Inputs

- `WblChipComponent.size = input<WblChipSize>('L')`
- `WblChipComponent.label = input('Chip')`
- `WblChipComponent.selected = input(false)`
- `WblChipComponent.disabled = input(false)`
- `WblChipComponent.icon = input(false)`
- `WblChipComponent.iconName = input<WblIconName>('spark')`
- `WblChipComponent.badge = input(false)`
- `WblChipComponent.badgeLabel = input<string | number>('1')`

### Public types and allowed values

```ts
type WblChipSize = 'L' | 'M' | 'S';
```

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

- `WblChipComponent.selectedChange = output<boolean>()`

### Slots and projection markers

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

### Local evidence

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

## 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.