@reliability-design/web 1.4.5 → 1.4.7

package/CHANGELOG.md

@@ -1,49 +1,211 @@
-# Changelog — @reliability-design/web
-
-## 1.4.3 (2026-07-30)
-
-### Added
-
-- **New `rel-time-picker` component.** A form-field trigger button opening an Hour / Min / AM-PM column popup. Follows the range-picker draft model: column clicks stage a draft, **Apply** commits (emitting `rel-change`), Cancel/`Escape`/outside click discards, and a **Now** button snaps the draft to the current time. Supports `format` (`12h` | `24h` — the committed `value` is always 24-hour `"HH:mm"`), `minute-step` intervals, inclusive `min-time`/`max-time` bounds, the standard field API (`label`, `placeholder`, `helper-text`, `error`/`invalid` + `error-message`, `required`, `readonly`, `disabled`, `clearable`, `size`, `fullWidth`, hidden form input via `name`), `::part` hooks (base, label, trigger, value, icon, panel, option, footer, helper), and full keyboard/ARIA support. The Angular package ships a matching ControlValueAccessor wrapper for reactive and template-driven forms.
-- **`label-style` prop (`default` | `floating` | `none`) on `rel-textfield`, `rel-select`, and `rel-autocomplete`.** `"none"` renders no visible label; supply `field-aria-label` or `field-aria-labelledby` to keep the control's accessible name. The old `floatingLabel` boolean remains as a deprecated alias for `label-style="floating"`.
-- **`orientation` prop on `rel-radio` (`vertical` | `horizontal`).** Horizontal lays options out in a wrapping row; the group now renders `role="radiogroup"` with `aria-orientation`.
-- **`size` prop on `rel-radio` (`small` | `medium`).** Small drops the circle from 20px to 16px and steps the label/supporting typography down a size for denser forms.
-
-## 1.4.2 (2026-07-29)
-
-### Added
-
-- **New `rel-autocomplete` component.** A searchable single-select type-ahead built on `rel-textfield`, so every field feature (label, sizes, variants, floating label, icons, error display) carries over. Supports local items with `contains`/`starts-with`/`none` filtering or a remote `searchFn` (debounced, latest-query-wins with stale responses discarded, automatic loading row), per-item icons, bolded match highlighting, `clearable`, a configurable no-results row, full keyboard navigation, and combobox ARIA. Ships with an Angular ControlValueAccessor wrapper.
-- Per-option leading icons in the `rel-select` menu — options accept an `icon` field (`rel-icon` name).
-- `rel-select` multi-select chips no longer wrap to a second line — the visible chip count adapts to the field width, collapsing the rest into the "+N" chip; `max-visible-chips` is now an optional extra cap (default uncapped, was 3).
-- `icon` prop on `rel-checkbox` — a leading `rel-icon` between the checkbox and label.
-- `focus()` method on `rel-textfield` that forwards to the inner input (the host itself is not focusable).
-
-### Fixed
-
-- Disabled `rel-button` styling — disabled buttons dim to 0.5 opacity, and only fill styles (primary, default, icon) flatten to the disabled fill; outline, ghost, link, and static keep their own shape.
-- `rel-popover` rendering misaligned when anchored inside a centered `rel-modal`.
-- Removed the native title-attribute tooltip on hover over a `rel-modal` title.
-- Tab-focusing a below-fold `rel-checkbox`/`rel-radio` no longer scrolls the wrong container (which shoved the page past fixed shells and broke the layout).
-- Closed `rel-drawer`/`rel-modal` panels are removed from the Tab order — keyboard focus no longer disappears into invisible close buttons or slotted content.
-
-## 1.4.1 (2026-07-27)
-
-### Fixed
-
-- **Restored all 1.3.x design-token names removed by 1.4.0.** The RelDS 2.0 token rework in 1.4.0 renamed the token taxonomy in `vars.css` and dropped 154 of the 169 custom properties that 1.3.x shipped (`--rel-color-*`, `--rel-colors-*`, `--rel-text-*`, `--rel-background-*`, `--rel-surface-*`, `--rel-spacing-space-*`, `--rel-fontSizes-*`, `--rel-borders-*`, …). Apps referencing those tokens in their own CSS got unresolved `var()`s and lost colors/spacing/type across the board. 1.4.1 appends a **V1 compat alias block** to `vars.css`: every 1.3.x token name resolves again, pointing at its RelDS 2.0 equivalent (or its literal 1.3.x value where 2.0 has no counterpart). No import changes needed — `vars.css` remains the only stylesheet.
-
-### Upgrading
-
-- Your lockfile pins the currently resolved version, so a plain `npm i` will **not** pick this up. Run `npm update @reliability-design/web` or `npm i @reliability-design/web@latest`.
-- Works from any 1.x range: `^1.3.0` and `^1.4.0` both admit 1.4.1.
-
-### Notes
-
-- The restored V1 names are **deprecated aliases** — removal is targeted for 3.0. Migrate consumer CSS to the RelDS 2.0 semantic tokens (`--rel-text-*`, `--rel-bg-*`, `--rel-border-*`, `--rel-action-*`, `--rel-spacing-*`, …).
-- Aliased tokens follow the RelDS 2.0 **dark palette** (neutral grays). Dark-mode shades therefore differ slightly from 1.3.x's blue-tinted darks; light mode matches 1.3.x closely. Typography scale, spacing, radii, and stroke widths are value-identical to 1.3.x.
-
-## 1.4.0 (2026-07-24)
-
-- RelDS 2.0 token rework: `vars.css` regenerated from Figma (`RelDS_A1`) with a new semantic token taxonomy; all components repointed to semantic tokens; structural parity with the 2.0 Figma spec.
-- **Known issue (fixed in 1.4.1):** removed the 1.3.x token names without aliases, breaking consumer apps that referenced them.
+# Changelog — @reliability-design/web
+
+## 1.4.7 (2026-09-05)
+
+
+Designer-audit release. Every rename is **additive** — the new prop or value is canonical, the old one keeps working and is mapped internally, and its first use logs **one** `console.warn` per component per page (never one per instance). Two breaking removals: `rel-topbar` and `rel-navbar` are gone. The full old → new table is under [Migrating](#migrating-to-147) below and on the docs site at `/docs/migration`.
+
+Paired releases: `@reliability-design/angular` 1.4.7; `@reliability-design/icons` 1.4.5.
+
+### Added
+
+- **`tone` on `rel-alert`, `rel-toast`, `rel-snackbar`** with a new `destructive` value — `rel-alert`: `neutral | info | success | warning | destructive`; `rel-toast`: `default | destructive`; `rel-snackbar`: `neutral | success | warning | destructive`. Replaces `type`; an explicit `tone` wins when both are set. Exported types `AlertTone`, `ToastTone`, `SnackbarTone` (+ `*ToneInput` unions that admit the deprecated spellings).
+- **`surface` on `rel-container`** (`default | elevated | transparent`, reflected). Replaces `background`; an explicit `surface` wins. Exported type `ContainerSurface`.
+- **`tone="destructive"` on `rel-button`** — canonical name for the red tone (`critical` / `danger` become deprecated aliases). **Fix:** `tone="brand"` on the `primary` and `default` styles had no CSS and rendered unstyled; it now paints the brand fill with a hover state. Existing markup is unaffected.
+- **`rel-button` ghost/text + `small` + `icon-only`** now renders 32×32 as specified (a specificity bug left it at 56×32). Medium/large icon-only (40/48) and all label buttons are unchanged.
+- **`rel-button` link style focus** — `:focus-visible` is now a 2px focus-coloured underline bar with focus-coloured text instead of the box outline (still a visible indicator, WCAG 2.4.7).
+- **`arrow` on `rel-popover`** — opt-in boolean; draws a 14×11 chevron on the panel edge facing the trigger, centred on the trigger (clamped ≥ 15px from the corners) and overlapping the panel border by 1px. Colour via `--rel-popover-arrow-bg` / `--rel-popover-arrow-border` (default: panel background / border). With the arrow on, the trigger gap is `max(side-offset, 13px)`. Default rendering (8px gap, no arrow) unchanged.
+- **`variant="text"` on `rel-modal`** — opt-in message-only body: 16 / 20 padding, body-lg text, normalised `<p>` margins; header and divider render above as usual (still shown with only the close button when there is no title). Exported type `ModalVariant`.
+- **`fullwidth` on `rel-range-picker`** (property `fullWidth`, reflected) — `display:block; width:100%`, mirroring `rel-time-picker`. Default unchanged.
+- **`input-mode` on `rel-otp`** (`numeric | alphanumeric`, property `inputMode`) — what the cells *accept*. Replaces `type`. Not to be confused with the lowercase native `inputmode` attribute (`numeric | text`), which remains the *keyboard hint* and passes through unchanged. Exported type `OtpInputMode`.
+- **`rel-otp` sizes** — full-word `small | medium | large` are canonical (`sm | md | lg` keep working); an unset size now reflects `size="medium"` on the host.
+- **`size="large"` on `rel-checkbox`** — 20px box (24 outer with the 2px border), 14px glyph, body-lg label, body-sm supporting text, 30px indent, `lg` icon. `small` / `medium` untouched.
+- **`size="small"` on `rel-accordion`** — new 44px header (heading-xs). Full-word `large` (56px, formerly `md`) and `medium` (48px, formerly `sm`) are now the canonical spellings; `md` / `sm` keep working silently. Default unchanged.
+- **Full-word sizes on `rel-tab`, `rel-kbd`, `rel-kbd-group`** — `small | medium | large` accepted alongside `sm | md | lg`; prefer the full words. `TabSize` / `KbdSize` include both.
+- **`rel-time-picker`** small trigger `min-width` scoped per size: 128px for `small`; `medium` / `large` keep 160px.
+- **`size` on `rel-menu`** (`large | medium | small`, reflected). Default `large` is the Figma default: 48px rows (12/12 padding, body-lg). `medium` = 40px rows with body-md; `small` = 32px rows with body-sm. Exported type `MenuSize`. **Heads-up:** the default row height moves from 36 to 48px — see Visual changes.
+- **`rel-menu` states aligned to Figma** — hover / pressed use the `--rel-action-overlay-hover` / `-pressed` tints (pressed now distinct from hover); the selected list row is the hover tint with a medium-weight label; selected checkbox / select-option rows carry no fill; disabled items dim to 40% opacity instead of switching to the disabled text colour.
+- **Shadow tokens applied** (cosmetic): `rel-alert` solid, `rel-snackbar`, `rel-slider` tooltip, `rel-menu` + submenu and the `rel-switch` knob on hover/pressed use `--rel-shadows-md`; `rel-accordion` `appearance="shadow"` and the `rel-switch` knob at rest use `--rel-shadows-sm`.
+- **`::part(tooltip)` on `rel-slider`** — the value bubble, now a light tooltip above the thumb (see Visual changes).
+- **Shadow tokens `--rel-shadows-sm`** (`0 2px 4px rgba(11,11,11,0.10)`) **and `--rel-shadows-md`** (`0 4px 8px rgba(11,11,11,0.10)`) in `vars.css` — generated from the Figma `shadow/sm` / `shadow/md` effect styles, which had no counterpart on the existing `--rel-shadows-shadow-100…500` scale. They are mode-agnostic in Figma, so one value serves light and dark. The full scale is now documented on the docs Tokens → Shadows page and in Storybook.
+- **Spacing scale extended to the Figma "Web" collection** — new tokens `--rel-spacing-none` (0), `4xl` 36, `5xl` 40, `6xl` 44, `7xl` 48, `8xl` 56, `9xl` 64 and `10xl` 72px. **Two existing values change** to keep the scale monotonic: `--rel-spacing-2xl` 32 → 28px and `--rel-spacing-3xl` 48 → 32px (see Visual changes). Documented on the Foundation → Spacing page and in Storybook.
+
+### Deprecated (still supported — removal targeted for 3.0)
+
+| Component | Deprecated | Use instead | Console notice |
+| --- | --- | --- | --- |
+| `rel-alert`, `rel-toast`, `rel-snackbar` | `type` | `tone` (snackbar `type="default"` → `tone="neutral"`; `type="error"` → `tone="destructive"`) | once per component |
+| `rel-alert`, `rel-toast`, `rel-snackbar` | `tone="error" \| "danger" \| "critical"` (snackbar also `"default"`) | `tone="destructive"` (snackbar `"default"` → `"neutral"`) | once per spelling |
+| `rel-button` | `tone="critical" \| "danger"` | `tone="destructive"` | once per spelling |
+| `rel-button` | `tone="default"` / `"primary"` (legacy) | `tone="neutral"` / `"brand"` | **none** (silent) |
+| `rel-button` | `variant="text"` / `"outline"` / `"default"` / `"icon"` (legacy spellings) | `ghost` / `secondary` / `default` is still the default style / `icon-only` attribute + `size` | **none** (documented only) |
+| `rel-container` | `background` (`white` / `light` / `none`) | `surface` (`default` / `elevated` / `transparent`) | once |
+| `rel-otp` | `type` | `input-mode` | once |
+| `rel-kbd` | `pill` (spec has one 4px radius; still renders the pill) | drop the attribute | once |
+| types | `ToastType`, `SnackbarType`, `ContainerBackground`, `OtpType` | `ToastToneInput`, `SnackbarToneInput`, `ContainerSurface`, `OtpInputMode` | `@deprecated` JSDoc |
+
+The notice format is `[rel-alert] "type" is deprecated and will be removed in 3.0 — use "tone" instead.` and is emitted once per (component, old name) pair via the shared `warnDeprecated` helper. Behaviour note: an unset `rel-container` `background` no longer reflects `background="white"` onto the host — CSS that selected on that attribute should target `surface` instead.
+
+Still deprecated from earlier releases, unchanged: the V1 token alias block in `vars.css`.
+
+### Removed (breaking)
+
+- **`rel-topbar` and its 8 sub-components** — `rel-topbar-brand`, `rel-topbar-item`, `rel-topbar-dropdown`, `rel-topbar-dropdown-item`, `rel-topbar-actions`, `rel-topbar-utilities`, `rel-topbar-profile`, `rel-topbar-mobile-panel` — removed from exports and source. Deprecated since 1.3.1 but still leaking into the build. Replace with the **Navbar recipe** at `/docs/recipes/navbar` (composed from `rel-popover`, `rel-drawer`, `rel-button`; no helper element needed). The Angular `RelTopbar*Component` directives are removed in lockstep.
+- **`rel-navbar`** — removed from exports and source, together with the Angular `RelNavbarComponent` directive. Deprecated since 1.3.x (it logged a console notice) and confirmed unused; the **Navbar recipe** at `/docs/recipes/navbar` replaces it. Component and README counts are now 42.
+- **`dist/` no longer contains a copy of `src/components`.** Only `index.js` / `index.mjs` / `index.d.ts` and `styles/vars.css` ship. The raw source was compiled with the *consumer's* tsconfig and is the root cause of the TypeScript errors reported against 1.4.x. The package `exports` map never exposed deep paths, so only projects reaching into `node_modules/@reliability-design/web/dist/components/…` are affected — import from the package root.
+- **`rel-chart`, `rel-nav-menu`, `rel-sidebar`, `rel-table` folders deleted.** None was exported from the package entry, so no registered element disappears.
+
+### Visual changes
+
+Layout shift **yes** = the box size or padding changed and neighbouring content can move; **no** = only colour, shadow, radius or state styling changed. Use this as the upgrade QA checklist.
+
+| Component | Change | Layout shift | Before → after |
+| --- | --- | --- | --- |
+| `rel-textfield` | Explicit border-box control height (default, underline, legend); vertical input padding zeroed; multiline untouched | yes | S 38 → 32, M 48 → 40, L 58 → 48 (legend visible box at M 58 → 40) |
+| `rel-select` | Trigger height (`height` replaces `min-height` + padding); panel untouched | yes | S 40 → 32, M 48 → 40, L 56 → 48 |
+| `rel-autocomplete` | Inherits the textfield height change | yes | S 38 → 32, M 48 → 40, L 58 → 48 |
+| `rel-date-picker` / `rel-time-picker` | Trigger button height | yes | S 38 → 32, M 48 → 40, L 58 → 48 |
+| `rel-range-picker` | Trigger height (no size prop) | yes | 48 → 40 |
+| `rel-time-picker` | Small trigger min-width (proportional, not a Figma value) | yes | 160 → 128 (small only) |
+| `rel-otp` | Square cells on the field scale; unset size reflects `size="medium"`; radius 8 and gap 4 unchanged | yes | sm 36×40 → 32×32, md 40×48 → 40×40, lg 48×56 → 48×48 |
+| `rel-button` | Ghost/text + small + icon-only width (bug fix) | yes | 56×32 → 32×32 |
+| `rel-button` (link) | Focus-visible treatment; outline/halo removed for link only | no | box outline → 2px focus-coloured underline bar + focus-coloured text |
+| `rel-calendar` | Prev/next nav buttons on ghost tokens | no | hover elevated-2 → ghost-hover; rest transparent; focus ring + halo; disabled 0.5 |
+| `rel-carousel` | Prev/next nav buttons → ghost, dark-mode overrides removed. **Biggest change:** on the light theme the arrows are near-black and can be hard to see over dark slides — tint via `::part(prev-button)` / `::part(next-button)` | no | outlined + shadow-100 elevated circle → transparent ghost circle (40/32 sizes unchanged) |
+| `rel-pagination` | Prev/next → ghost; page-number buttons untouched | no | outlined circle → transparent ghost circle; disabled opacity 0.35 → 0.5 |
+| `rel-alert` | Solid (filled) appearance gains a shadow (Figma shadow/md); subtle/outline untouched | no | none → `--rel-shadows-md` |
+| `rel-menu` | **Row height at the default size — every dropdown gets taller.** `size="medium"` (40px) is closest to the old height; `size="small"` is 32px | **yes** | 36 → 48px rows (padding 12/12, body-lg line-height 24, min-height 48) |
+| `rel-menu` | Label ↔ trailing chevron gap; submenu chevron size | yes | gap 8 → 16; chevron 16 → 20px |
+| `rel-menu` | Outer radius on menu, first/last item corners, submenu | no | 16 → 8px |
+| `rel-menu` | Hover / pressed fills; pressed now distinct from hover | no | hover elevated-1 → `--rel-action-overlay-hover`; pressed → `--rel-action-overlay-pressed` |
+| `rel-menu` | Selected rows | no | list row: overlay-hover tint + medium-weight label; checkbox / select-option rows: no fill |
+| `rel-menu` | Disabled items | no | text-disabled colour → 40% opacity |
+| `rel-menu` | Menu + submenu shadow (Figma shadow/md) | no | `--rel-shadows-shadow-300` → `--rel-shadows-md` |
+| `rel-snackbar` | Shadow (Figma shadow/md) | no | `--rel-shadows-shadow-300` → `--rel-shadows-md` |
+| `rel-modal` | Header padding (Figma Modal Sheet); content 24 and footer 16/20 unchanged | yes | 16 / 20 / 16 → 24 / 20 / 20 |
+| `rel-drawer` | Header padding per side (Figma Drawer); footer unchanged | yes | left/right 16 / 20 / 16 → 24 / 20 / 20; bottom → 16 / 20 / 20 |
+| `rel-tab` | Explicit tab-item heights, border-box, horizontal padding 16 | yes | S 44 → 32, M 46 → 40, L 48 → 48; padding 12/16 → 0/16 |
+| `rel-kbd` | Border-box (heights include the 1px border); scale, padding, type, radius to Figma | yes | S 22 → 20 (pad 2/8, label-xs → label-sm); M 26 → 24 (pad 4/12 → 4/8, label-sm → label-md); L 32 → 28 (pad 8/16 → 4/12, label-lg); radius 8 → 4 |
+| `rel-kbd` | Bespoke drop shadows removed (Figma Kbd has none) | no | hardcoded box-shadow → none |
+| `rel-chip` | Remove ✕ has no own hover; chip hover + focus ring unchanged | no | ✕ opacity 1 on hover → stays 0.7 |
+| `rel-snackbar` | Content padding, two-line spacing | yes | 12/16/12/8 → 12/8/12/16; two-line top pad 12 → 16; message → action gap 4 |
+| `rel-snackbar` | Icon and message → action spacing | yes | icon 24 → 20 with 12px gap (was 10); message → action gap 12 → 32 |
+| tokens | `--rel-spacing-2xl` / `--rel-spacing-3xl` values (Figma "Web" spacing collection) | yes — any consumer CSS using them, plus `rel-container` / `rel-snackbar` / `rel-upload` internals | 2xl 32 → 28px; 3xl 48 → 32px (new `4xl`–`10xl` cover 36–72px) |
+| `rel-snackbar` | Action button | no | bare text with opacity hover → 32px static pill (4/12 pad, r1000, static-hover bg) |
+| `rel-accordion` | Corner radius | no | shadow 8 → 4; plain 8 → 0 |
+| `rel-accordion` | `appearance="shadow"` elevation (Figma shadow/sm) | no | `--rel-shadows-shadow-100` → `--rel-shadows-sm` |
+| `rel-accordion` | Medium header left padding | yes | 12 → 16 |
+| `rel-accordion` | Header icon size | yes | L 24 → 18; M 20 → 16 |
+| `rel-accordion` | Action-type header left pad + leading-icon wrapper | yes | 16 → 8 (L/M); wrapper 40 (L) / 32 (M) |
+| `rel-accordion` | Body padding, action-type body indent | yes | 4/16/20 → 0/16/16; indent 56 (L) / 48 (M, S) |
+| `rel-accordion` | Medium body font | yes | body-sm → body-md |
+| `rel-accordion` | Hover / pressed header background | no | surface-elevated → `--rel-action-overlay-hover` / `-pressed` |
+| `rel-accordion` (action) | Leading fallback expand icon | no | chevron-right rotating 90° → chevron-down rotating 180° |
+| `rel-stepper` | Indicator | yes | 22 → 24px; stroke 2 → 1px (border-strong); dot 12 → 8px |
+| `rel-stepper` | Connectors | yes | 2 → 1px; done/in-progress colour text-label → border-strong |
+| `rel-stepper` | Labels | no | text-label → text-default (body-md-medium) |
+| `rel-stepper` | Disabled step | no | elevated bg / border-default / text-disabled → active at 40% opacity |
+| `rel-slider` | Track | no | elevated-3 → elevated-2; radius 2 → pill |
+| `rel-slider` | Thumb rest / hover / pressed | no | solid dark → neutral fill + 2px strong stroke; hover/pressed 6px overlay ring (was 7px + drop shadows) |
+| `rel-slider` | Ticks | no | dark, white when active → all neutral/white |
+| `rel-slider` | Value bubble (new `::part(tooltip)`) | no | dark SVG pin → light tooltip (bg-neutral, r8/10, `--rel-shadows-md`, chevron) 12px above thumb |
+| `rel-slider` | Disabled | no | track elevated-3 @ 0.4 + thumb elevated-3; tooltip hidden |
+| `rel-switch` | Control geometry (Figma Type=Line) | yes | 42×22 → 44×20; track 12 → 10 tall (40 wide); knob 18 → 20; travel 22 → 20 |
+| `rel-switch` | Hover / pressed / focus / disabled | no | hover: track tint + stronger knob shadow (was white track + 6px halo); pressed: 28px overlay disc + knob squash 20×16 (was scale .9 + halo); focus: 1.5px focus stroke around control (was ring on knob); disabled track elevated-1 → elevated-2, knob shadow removed |
+| `rel-switch` | Knob shadows from hardcoded values to tokens | no | rest → `--rel-shadows-sm`; hover / pressed → `--rel-shadows-md` |
+| `rel-badge` | Medium side padding — two-digit counts no longer overflow the 24px circle into a 26px pill | no | 0 6px → 0 4px ("32" 26×24 → 24×24) |
+| Navbar recipe | Nav-item gap (recipe CSS in docs + Storybook, not a component) | yes | 0 → 8px |
+
+### Package hygiene
+
+- `dist/` is bundle-only (see Removed). Verified: the packed tarball contains no raw `.ts` and no `dist/components` entries, and a strict TypeScript consumer project (`skipLibCheck` off) installing it type-checks with zero errors.
+- Storybook component-status page, `custom-elements.d.ts`, and the one docs preview that still used an unregistered `<rel-table>` (now a plain `<table>`) cleaned up with the folder removals.
+
+### Angular
+
+- Typed inputs for every new prop, set through `Renderer2` so template type-checking sees them: `tone` (alert / toast / snackbar / button), `surface`, `fullWidth`, `inputMode` + `inputmode` + `size` (otp), `size` (checkbox, tab, kbd, accordion, menu), `arrow`, `variant` (modal). Deprecated inputs still work and are mapped by the web component; the new input wins when both are set.
+- Exported unions: `RelAlertToneInput`, `RelToastToneInput`, `RelSnackbarToneInput`, `RelContainerSurface`, `RelOtpInputMode`, `RelOtpSize`, `RelCheckboxSize`, `RelButtonTone`, `RelTabSize`, `RelKbdSize`, `RelAccordionSize`, `RelMenuSize`, `RelModalVariant`.
+- Removed: the 9 `RelTopbar*Component` directives (index + `ReliabilityDesignModule`).
+- The wrapper's peer dependency on `@reliability-design/web` is now `^1.4.7`.
+
+### Migrating to 1.4.7
+
+Nothing here is required today — every old name keeps working until 3.0. Migrate at your own pace; the console notice tells you where.
+
+| Old | New |
+| --- | --- |
+| `<rel-alert type="error">` | `<rel-alert tone="destructive">` |
+| `<rel-alert type="info \| success \| warning">` | `<rel-alert tone="info \| success \| warning">` |
+| `<rel-toast type="error">` | `<rel-toast tone="destructive">` |
+| `<rel-snackbar type="default">` | `<rel-snackbar tone="neutral">` |
+| `<rel-snackbar type="error">` | `<rel-snackbar tone="destructive">` |
+| `tone="error" \| "danger" \| "critical"` (alert, toast, snackbar) | `tone="destructive"` |
+| `<rel-button tone="critical">` / `tone="danger"` | `<rel-button tone="destructive">` |
+| `<rel-button tone="default">` / `tone="primary"` | `tone="neutral"` / `tone="brand"` |
+| `<rel-button variant="text">` | `<rel-button variant="ghost">` |
+| `<rel-button variant="outline">` | `<rel-button variant="secondary">` |
+| `<rel-button variant="icon">` | `<rel-button icon-only size="…">` |
+| `<rel-container background="white">` | `<rel-container surface="default">` |
+| `<rel-container background="light">` | `<rel-container surface="elevated">` |
+| `<rel-container background="none">` | `<rel-container surface="transparent">` |
+| CSS `rel-container[background="white"]` | `rel-container[surface="default"]` (unset `background` no longer reflects) |
+| `<rel-otp type="alphanumeric">` | `<rel-otp input-mode="alphanumeric">` (`inputmode` = keyboard hint, unchanged) |
+| `<rel-otp size="sm \| md \| lg">` | `<rel-otp size="small \| medium \| large">` |
+| `<rel-kbd pill>` | `<rel-kbd>` (4px radius is the spec) |
+| `<rel-kbd size="sm \| md \| lg">`, `<rel-tab size="sm \| md \| lg">` | `size="small \| medium \| large"` |
+| `<rel-accordion size="md">` / `size="sm"` | `size="large"` / `size="medium"` |
+| `<rel-topbar>` + `rel-topbar-*` | Navbar recipe — `/docs/recipes/navbar` |
+| `<rel-navbar>` (deprecated earlier) | Navbar recipe — `/docs/recipes/navbar` |
+| `ToastType`, `SnackbarType`, `ContainerBackground`, `OtpType` | `ToastToneInput`, `SnackbarToneInput`, `ContainerSurface`, `OtpInputMode` |
+| `import … from "@reliability-design/web/dist/components/…"` | `import … from "@reliability-design/web"` |
+| Angular `RelTopbar*Component` in `imports: [...]` | remove; use the Navbar recipe |
+
+Consumer QA after upgrading: re-check forms with hand-tuned heights (the field scale is now 32 / 40 / 48), any CSS overriding `rel-switch`, `rel-kbd`, `rel-tab` or `rel-otp` dimensions, and carousels over dark imagery (ghost arrows). **Dropdown menus get taller by default** — `rel-menu` rows go from 36 to 48px; set `size="medium"` (40px) on menus that must stay close to their old height.
+
+## 1.4.3 (2026-07-30)
+
+### Added
+
+- **New `rel-time-picker` component.** A form-field trigger button opening an Hour / Min / AM-PM column popup. Follows the range-picker draft model: column clicks stage a draft, **Apply** commits (emitting `rel-change`), Cancel/`Escape`/outside click discards, and a **Now** button snaps the draft to the current time. Supports `format` (`12h` | `24h` — the committed `value` is always 24-hour `"HH:mm"`), `minute-step` intervals, inclusive `min-time`/`max-time` bounds, the standard field API (`label`, `placeholder`, `helper-text`, `error`/`invalid` + `error-message`, `required`, `readonly`, `disabled`, `clearable`, `size`, `fullWidth`, hidden form input via `name`), `::part` hooks (base, label, trigger, value, icon, panel, option, footer, helper), and full keyboard/ARIA support. The Angular package ships a matching ControlValueAccessor wrapper for reactive and template-driven forms.
+- **`label-style` prop (`default` | `floating` | `none`) on `rel-textfield`, `rel-select`, and `rel-autocomplete`.** `"none"` renders no visible label; supply `field-aria-label` or `field-aria-labelledby` to keep the control's accessible name. The old `floatingLabel` boolean remains as a deprecated alias for `label-style="floating"`.
+- **`orientation` prop on `rel-radio` (`vertical` | `horizontal`).** Horizontal lays options out in a wrapping row; the group now renders `role="radiogroup"` with `aria-orientation`.
+- **`size` prop on `rel-radio` (`small` | `medium`).** Small drops the circle from 20px to 16px and steps the label/supporting typography down a size for denser forms.
+
+## 1.4.2 (2026-07-29)
+
+### Added
+
+- **New `rel-autocomplete` component.** A searchable single-select type-ahead built on `rel-textfield`, so every field feature (label, sizes, variants, floating label, icons, error display) carries over. Supports local items with `contains`/`starts-with`/`none` filtering or a remote `searchFn` (debounced, latest-query-wins with stale responses discarded, automatic loading row), per-item icons, bolded match highlighting, `clearable`, a configurable no-results row, full keyboard navigation, and combobox ARIA. Ships with an Angular ControlValueAccessor wrapper.
+- Per-option leading icons in the `rel-select` menu — options accept an `icon` field (`rel-icon` name).
+- `rel-select` multi-select chips no longer wrap to a second line — the visible chip count adapts to the field width, collapsing the rest into the "+N" chip; `max-visible-chips` is now an optional extra cap (default uncapped, was 3).
+- `icon` prop on `rel-checkbox` — a leading `rel-icon` between the checkbox and label.
+- `focus()` method on `rel-textfield` that forwards to the inner input (the host itself is not focusable).
+
+### Fixed
+
+- Disabled `rel-button` styling — disabled buttons dim to 0.5 opacity, and only fill styles (primary, default, icon) flatten to the disabled fill; outline, ghost, link, and static keep their own shape.
+- `rel-popover` rendering misaligned when anchored inside a centered `rel-modal`.
+- Removed the native title-attribute tooltip on hover over a `rel-modal` title.
+- Tab-focusing a below-fold `rel-checkbox`/`rel-radio` no longer scrolls the wrong container (which shoved the page past fixed shells and broke the layout).
+- Closed `rel-drawer`/`rel-modal` panels are removed from the Tab order — keyboard focus no longer disappears into invisible close buttons or slotted content.
+
+## 1.4.1 (2026-07-27)
+
+### Fixed
+
+- **Restored all 1.3.x design-token names removed by 1.4.0.** The RelDS 2.0 token rework in 1.4.0 renamed the token taxonomy in `vars.css` and dropped 154 of the 169 custom properties that 1.3.x shipped (`--rel-color-*`, `--rel-colors-*`, `--rel-text-*`, `--rel-background-*`, `--rel-surface-*`, `--rel-spacing-space-*`, `--rel-fontSizes-*`, `--rel-borders-*`, …). Apps referencing those tokens in their own CSS got unresolved `var()`s and lost colors/spacing/type across the board. 1.4.1 appends a **V1 compat alias block** to `vars.css`: every 1.3.x token name resolves again, pointing at its RelDS 2.0 equivalent (or its literal 1.3.x value where 2.0 has no counterpart). No import changes needed — `vars.css` remains the only stylesheet.
+
+### Upgrading
+
+- Your lockfile pins the currently resolved version, so a plain `npm i` will **not** pick this up. Run `npm update @reliability-design/web` or `npm i @reliability-design/web@latest`.
+- Works from any 1.x range: `^1.3.0` and `^1.4.0` both admit 1.4.1.
+
+### Notes
+
+- The restored V1 names are **deprecated aliases** — removal is targeted for 3.0. Migrate consumer CSS to the RelDS 2.0 semantic tokens (`--rel-text-*`, `--rel-bg-*`, `--rel-border-*`, `--rel-action-*`, `--rel-spacing-*`, …).
+- Aliased tokens follow the RelDS 2.0 **dark palette** (neutral grays). Dark-mode shades therefore differ slightly from 1.3.x's blue-tinted darks; light mode matches 1.3.x closely. Typography scale, spacing, radii, and stroke widths are value-identical to 1.3.x.
+
+## 1.4.0 (2026-07-24)
+
+- RelDS 2.0 token rework: `vars.css` regenerated from Figma (`RelDS_A1`) with a new semantic token taxonomy; all components repointed to semantic tokens; structural parity with the 2.0 Figma spec.
+- **Known issue (fixed in 1.4.1):** removed the 1.3.x token names without aliases, breaking consumer apps that referenced them.

package/dist/components/rel-accordion/README.md

@@ -1,132 +1,132 @@
-# rel-accordion
-
-## Overview
-An animated accordion component with a collapsible body section. Features a clickable header with chevron icon rotation, smooth expand/collapse transitions, and keyboard support. Respects reduced motion preferences.
-
-## Usage
-```html
-<!-- Basic accordion -->
-<rel-accordion title="Section 1">
-  <p>This is the content of section 1.</p>
-</rel-accordion>
-
-<!-- Initially open -->
-<rel-accordion title="FAQ: How does it work?" open>
-  <p>This accordion starts in the open state.</p>
-  <ul>
-    <li>Bullet 1</li>
-    <li>Bullet 2</li>
-  </ul>
-</rel-accordion>
-
-<!-- Multiple accordions -->
-<rel-accordion title="Introduction">
-  <p>Introduction content...</p>
-</rel-accordion>
-<rel-accordion title="Features">
-  <p>Features content...</p>
-</rel-accordion>
-<rel-accordion title="Pricing">
-  <p>Pricing content...</p>
-</rel-accordion>
-
-<!-- Listen for open state changes -->
-<rel-accordion id="myAccordion" title="Details"></rel-accordion>
-<script>
-  const accordion = document.getElementById('myAccordion');
-  accordion.addEventListener('open-change', (e) => {
-    console.log('Accordion open:', e.detail); // true or false
-  });
-</script>
-```
-
-## API
-
-### Attributes/Properties
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | `"Accordion"` | Header title text |
-| `open` (reflected) | `boolean` | `false` | Whether the accordion is expanded |
-
-## Events
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `open-change` | `boolean` | Fired when the accordion is toggled (detail is the new `open` state) |
-
-## Slots
-| Slot | Description |
-|------|-------------|
-| (default) | Accordion body content |
-
-## CSS Parts
-None exposed.
-
-## Tokens / CSS Variables
-
-### Semantic Tokens
-- `--rel-fonts-font-family` - Font family
-
-### Font Tokens
-- `--rel-body-xl-regular-font-size` - Title font size (20px)
-- `--rel-body-md-regular-font-size` - Body font size (14px)
-- `--rel-fonts-weight-body-medium` - Title font weight (500)
-
-### Color Tokens
-- `--rel-bg-surface` - Background color
-- `--rel-text-label` - Title text color
-- `--rel-text-default` - Body text color, icon stroke color
-- `--rel-border-default` - Border color
-- `--rel-border-info` - Focus outline color
-
-### Shadow Tokens
-- `--rel-shadows-shadow-100` - Shadow
-
-### Border Tokens
-- `--rel-border-radius-sm` - Border radius (8px)
-
-### Spacing Tokens
-- `--rel-spacing-md` - Header horizontal padding, body horizontal padding in closed state (16px)
-- `--rel-spacing-xl` - Body top padding when open (24px)
-- `--rel-spacing-lg` - Body bottom padding when open (20px)
-
-## Accessibility
-- Header uses `role="button"` and `aria-expanded` attribute
-- Header is keyboard accessible with `tabindex="0"`
-- Supports Enter and Space key activation
-- Focus visible outline on keyboard focus
-
-### Keyboard Interactions
-| Key | Action |
-|-----|--------|
-| `Enter` | Toggle accordion open/closed |
-| `Space` | Toggle accordion open/closed |
-| `Tab` | Navigate to/from the header |
-
-### Focus Behavior
-- Header receives focus outline (`outline: 2px solid --rel-border-info`)
-- Focus offset is `-2px` inset
-
-## Notes / Edge Cases
-- **Animation details**:
-  - Chevron rotates 180° when open (`transform: rotate(180deg)`)
-  - Body expands from `max-height: 0` to `max-height: 1000px`
-  - Body padding animates from `0` to full padding when opening
-  - Transitions: `transform 0.25s ease`, `max-height 0.25s ease`, `padding 0.2s ease`
-
-- **Reduced motion**: When `prefers-reduced-motion: reduce`, icon rotation and body transitions are disabled
-
-- **Body rendering**: The slotted content is always in the DOM (not conditionally rendered), but hidden via `max-height: 0` and `overflow: hidden` when closed
-
-- The header has hover styling (`background: --rel-bg-neutral-elevated-1`)
-
-- The component is `display: block` and `width: 100%`
-
-- The accordion border is `1px solid` with rounded corners
-
-- The chevron icon is an inline SVG (9-point downward-pointing chevron)
-
-- When closed, the body has `padding: 0 var(--rel-spacing-md)` to maintain horizontal padding
-
-- The `open` attribute is reflected in HTML when set
-
-- Multiple accordions can be open simultaneously (no automatic closing of others)
+# rel-accordion
+
+`<rel-accordion>` is a single collapsible section of the Reliability Design System (Figma "Accordion", 6021:1085): a clickable header with a title and a chevron that expands or collapses the slotted body. Each element is independent — stack several to build an FAQ or a settings list, and nothing closes automatically when another opens. Use it for progressive disclosure of secondary content; do not use it to switch between peer views (use tabs) or to hide primary actions.
+
+## Usage
+
+```html
+<!-- Basic: closed by default, opens on click / Enter / Space -->
+<rel-accordion title="Shipping">
+  <p>Orders ship within two business days.</p>
+</rel-accordion>
+
+<!-- Initially open -->
+<rel-accordion title="Returns" open>
+  <p>Free returns within 30 days.</p>
+</rel-accordion>
+
+<!-- Header scale: 56 / 48 / 44 px -->
+<rel-accordion size="large" title="Large"></rel-accordion>
+<rel-accordion size="medium" title="Medium"></rel-accordion>
+<rel-accordion size="small" title="Small"></rel-accordion>
+
+<!-- Plain style: square corners and a 1px border instead of the shadow card -->
+<rel-accordion appearance="plain" title="Plain"></rel-accordion>
+
+<!-- Action type: leading rotating chevron + static trailing arrow-expansion, body indented -->
+<rel-accordion type="action" title="Filters">
+  <p>Filter options…</p>
+</rel-accordion>
+
+<!-- Action type with a custom leading icon (slotted icons never rotate) -->
+<rel-accordion type="action" title="Preferences">
+  <rel-icon slot="icon" name="settings"></rel-icon>
+  <p>Preference options…</p>
+</rel-accordion>
+
+<!-- Custom trailing icon on the default type -->
+<rel-accordion title="More">
+  <rel-icon slot="trailing-icon" name="plus"></rel-icon>
+  <p>Extra content…</p>
+</rel-accordion>
+```
+
+```js
+const accordion = document.querySelector("rel-accordion");
+
+accordion.addEventListener("open-change", (e) => {
+  e.detail; // true when the body was just expanded, false when collapsed
+});
+
+// Programmatic toggle (does not fire open-change)
+accordion.open = true;
+```
+
+### Deprecated aliases
+
+```html
+<!-- size="md" → size="large", size="sm" → size="medium". Both still work; no console notice is logged. -->
+<rel-accordion size="md" title="Legacy large"></rel-accordion>
+<rel-accordion size="sm" title="Legacy medium"></rel-accordion>
+<!-- canonical -->
+<rel-accordion size="large" title="Large"></rel-accordion>
+<rel-accordion size="medium" title="Medium"></rel-accordion>
+```
+
+<!-- readme-gen:start -->
+
+<!-- Generated from rel-accordion.ts — do not edit; run readme-generate.mjs -->
+
+## API
+
+### Attributes / Properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `title` | `title` | `string` | `"Accordion"` | Header text. Note it is also the native HTML `title` attribute, so browsers show it as a tooltip on hover. |
+| `open` | `open` | `boolean` | `false` | Whether the body is expanded; toggled by the header and reported via `open-change`. Setting it from code does not fire the event. Reflected. |
+| `size` | `size` | `"md" \| "sm" \| "large" \| "medium" \| "small"` | `"md"` | Header scale (Figma "Size"): `large` = 56px header / heading-md title, `medium` = 48px / heading-sm, `small` = 44px / heading-xs (new in 1.4.7). The historical spellings stay supported as aliases: `md` = large (the default), `sm` = medium. Reflected. |
+| `type` | `type` | `"default" \| "action"` | `"default"` | Header layout (Figma "Type"): `default` = title + trailing rotating chevron; `action` = leading icon slot (rotating chevron by default) + static trailing arrow-expansion icon, with the body indented under the title. Reflected. |
+| `appearance` | `appearance` | `"shadow" \| "plain"` | `"shadow"` | Figma "Style" axis — named appearance because `style` collides with the HTML style attribute. `shadow` = 4px-radius card with the shadow-sm effect and no border; `plain` = square corners with a 1px border-subtle stroke and no elevation. Reflected. |
+
+## Events
+
+| Event | Detail | Bubbles / composed | Description |
+| --- | --- | --- | --- |
+| `open-change` | `open` | bubbles / composed | Fired when the header toggles the accordion (click, Enter or Space). Detail: the new `open` state (boolean). Not fired when `open` is set programmatically. |
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| (default) | Body content, revealed when `open` |
+| `icon` | Leading icon in the header (`type="action"` only); replaces the default rotating chevron-down |
+| `trailing-icon` | Trailing icon in the header; replaces the default chevron-down (default type) or arrow-expansion (action type) |
+
+## CSS Parts
+
+| Part | Description |
+| --- | --- |
+| `base` | The outer card (`.accordion`) carrying the appearance border / shadow |
+| `trigger` | The `role="button"` header row |
+| `label` | The title row (leading icon + title text) |
+| `icon` | The trailing icon wrapper |
+| `content` | The `role="region"` body that holds the default slot |
+
+<!-- readme-gen:end -->
+
+## Accessibility
+
+- The header (part `trigger`) is a `role="button"` with `tabindex="0"`, `aria-expanded` mirroring `open`, and `aria-controls` pointing at the body.
+- The body (part `content`) is a `role="region"` labelled by the header (`aria-labelledby`). While closed it carries the `inert` attribute, so collapsed content is removed from the Tab order and from the accessibility tree — not merely hidden visually.
+- The slotted `icon` / `trailing-icon` content and the built-in `rel-icon` chevrons are decorative; the accessible name of the header is the `title` text.
+- Keyboard focus is shown as a 2px `--rel-border-focus` outline inset 2px inside the header (it follows the card radius so it is not clipped).
+- No live-region announcements are made; the `aria-expanded` change is what screen readers report.
+
+| Key (header focused) | Action |
+| --- | --- |
+| Enter | Toggle open / closed (fires `open-change`) |
+| Space | Toggle open / closed (fires `open-change`) |
+| Tab / Shift + Tab | Move to the next / previous focusable element; the body's content is only reachable while open |
+
+## Notes / Edge Cases
+
+- `size` defaults to the legacy spelling `"md"`, which renders the Figma Large (56px) header; `"sm"` renders Medium (48px). The full-word values are the canonical ones — see Deprecated aliases.
+- `title` is also the element's native `title` attribute, so browsers show it as a hover tooltip on the whole component.
+- `open-change` fires only from user toggles (click, Enter, Space). Setting `open` from code updates the UI silently.
+- The body stays in the DOM when closed; it is collapsed with `max-height: 0` / `overflow: hidden` and `inert`. When open the cap is `max-height: 1000px`, so content taller than 1000px is clipped.
+- Rotation on open applies only to the built-in fallback icons (`chevron-down` in the trailing slot for `type="default"`, in the leading slot for `type="action"`). Anything you slot into `icon` or `trailing-icon` stays static, and the Action type's trailing `arrow-expansion` never rotates (Figma audit 1b).
+- `type="action"` indents the open body under the title: 56px at `large`, 48px at `medium` / `small`. The leading icon wrapper is 40px / 18px icon at `large` and 32px / 16px at the other sizes; the trailing icon wrapper follows the same tiers.
+- Header hover / pressed use the `--rel-action-overlay-hover` / `--rel-action-overlay-pressed` tokens. `appearance="shadow"` uses `--rel-shadows-sm` with a transparent border; `appearance="plain"` uses `--rel-border-subtle` with no shadow and zero radius.
+- Transitions (chevron rotation, body max-height and padding) are disabled under `prefers-reduced-motion: reduce`.
+- The host is `display: block; width: 100%`; wrap it to constrain the width.