<!-- GENERATED by scripts/ir-extract.mjs (make ir) — do not hand-edit. -->
# whynot-design IR catalog

**designVersion** `0.3.0` · **components** 10 · **generated** 2026-06-27T17:28:08.913Z

Machine-readable companion: [`manifest.json`](./manifest.json) (per-component + token hashes).

## atoms

### Button `<wn-button>`

Button — extracted from designbook ui_kits/whynot-control/Atoms.jsx.

| prop | attribute | type | default |
| --- | --- | --- | --- |
| `variant` | `variant` | enum(secondary \| primary \| ghost) | `secondary` |
| `icon` | `icon` | boolean | — |

_Non-portable (React-only) props:_ `onClick`, `style`.

**Slots:** `default`  
**Events:** `wn-click`  
**Variants:** variant (secondary/primary/ghost)  
**Contract:** [`components/Button.json`](./components/Button.json) · **hash** `sha256:4a32713049e433dd` · **exemplar:** [`exemplars/Button.html`](./exemplars/Button.html)

### Eyebrow `<wn-eyebrow>`

Eyebrow — extracted from designbook ui_kits/whynot-control/Atoms.jsx.

_Non-portable (React-only) props:_ `style`.

**Slots:** `default`  
**Contract:** [`components/Eyebrow.json`](./components/Eyebrow.json) · **hash** `sha256:56baa59a49b5f32c` · **exemplar:** [`exemplars/Eyebrow.html`](./exemplars/Eyebrow.html)

### Icon `<wn-icon>`

Icon — extracted from designbook ui_kits/whynot-control/Atoms.jsx.

| prop | attribute | type | default |
| --- | --- | --- | --- |
| `name` | `name` | string | — |
| `size` | `size` | number | `16` |

_Non-portable (React-only) props:_ `style`.

**Contract:** [`components/Icon.json`](./components/Icon.json) · **hash** `sha256:2557fbffb3aa6ee1`

### StageDot `<wn-stage-dot>`

StageDot — extracted from designbook ui_kits/whynot-control/Atoms.jsx.

| prop | attribute | type | default |
| --- | --- | --- | --- |
| `level` | `level` | string | `S2` |
| `label` | `label` | string | — |

_Non-portable (React-only) props:_ `style`.

**Contract:** [`components/StageDot.json`](./components/StageDot.json) · **hash** `sha256:f6f7790aa886261e` · **exemplar:** [`exemplars/StageDot.html`](./exemplars/StageDot.html)

### Stamp `<wn-stamp>`

Stamp — extracted from designbook ui_kits/whynot-control/Atoms.jsx.

_Non-portable (React-only) props:_ `style`.

**Slots:** `default`  
**Contract:** [`components/Stamp.json`](./components/Stamp.json) · **hash** `sha256:0b32f43ed19ac470`

### Tag `<wn-tag>`

Tag — extracted from designbook ui_kits/whynot-control/Atoms.jsx.

| prop | attribute | type | default |
| --- | --- | --- | --- |
| `active` | `active` | boolean | — |
| `draft` | `draft` | boolean | — |

_Non-portable (React-only) props:_ `style`.

**Slots:** `default`  
**Contract:** [`components/Tag.json`](./components/Tag.json) · **hash** `sha256:91ee34eac1457016` · **exemplar:** [`exemplars/Tag.html`](./exemplars/Tag.html)

## chrome

### PageHeader `<wn-page-header>`

PageHeader — extracted from designbook ui_kits/whynot-control/Chrome.jsx.

| prop | attribute | type | default |
| --- | --- | --- | --- |
| `eyebrow` | `eyebrow` | boolean | — |
| `title` | `title` | string | — |
| `lede` | `lede` | boolean | — |
| `actions` | `actions` | boolean | — |

**Contract:** [`components/PageHeader.json`](./components/PageHeader.json) · **hash** `sha256:93e12068e2f58f10` · **exemplar:** [`exemplars/PageHeader.html`](./exemplars/PageHeader.html)

### PipelineStrip `<wn-pipeline-strip>`

PipelineStrip — extracted from designbook ui_kits/whynot-control/Chrome.jsx.

| prop | attribute | type | default |
| --- | --- | --- | --- |
| `activeIdx` | `active-idx` | number | `3` |

**Contract:** [`components/PipelineStrip.json`](./components/PipelineStrip.json) · **hash** `sha256:89c40afe4742d64e` · **exemplar:** [`exemplars/PipelineStrip.html`](./exemplars/PipelineStrip.html)

### Sidebar `<wn-sidebar>`

Sidebar — extracted from designbook ui_kits/whynot-control/Chrome.jsx.

| prop | attribute | type | default |
| --- | --- | --- | --- |
| `current` | `current` | enum(doc:) | — |

_Non-portable (React-only) props:_ `onNav`.

**Events:** `wn-nav`  
**Variants:** current (doc:)  
**Contract:** [`components/Sidebar.json`](./components/Sidebar.json) · **hash** `sha256:8340b292fff7a80d` · **exemplar:** [`exemplars/Sidebar.html`](./exemplars/Sidebar.html)

### TopNav `<wn-top-nav>`

TopNav — extracted from designbook ui_kits/whynot-control/Chrome.jsx.

_Non-portable (React-only) props:_ `onNew`.

**Events:** `wn-new`  
**Contract:** [`components/TopNav.json`](./components/TopNav.json) · **hash** `sha256:32ebc6e46db38f93` · **exemplar:** [`exemplars/TopNav.html`](./exemplars/TopNav.html)