@reliability-design/web 1.4.6 → 1.4.8

package/CHANGELOG.md

@@ -1,49 +1,246 @@
-# 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.8 (2026-09-21)
+
+
+Consumer-ticket release. Twelve tickets from the testing and implementation team, built development-side and documented from source; the design file is being updated to follow, not the other way round. **Nothing is deprecated in this release** — every new spelling is an *alternative* that normalises, with no console notice. Four changes are visible without a rename to warn you; they are listed under [Changed](#changed-148) and on the docs site at `/docs/migration#v148-visual`.
+
+Paired releases: `@reliability-design/angular` 1.4.8, which now requires web `^1.4.8` rather than `^1.4.1`. `@reliability-design/icons` is unchanged and stays on 1.4.4.
+
+### Added
+
+- **`rel-switch` text labels and a size axis.** `label` plus a default slot for rich content, `label-placement` (`end` default | `start`), and `size` (`small | medium | large`, with `sm`/`md`/`lg` accepted). The root element is now the `<label>` that owns the input, so clicking the text toggles natively. **`line` and `pill` ramp differently on purpose** — 16/20/24 against 20/24/28 — because Line's height *is* the handle while Pill adds a 2px inset each side. `medium` is unchanged, so no existing switch moves. There is no breakpoint logic: the ramp ships, choosing a size per breakpoint is the application's job.
+- **`rel-toast` positions, sizes and stacking.** `position` takes `top-left | top-center | top-right | bottom-left | bottom-center | bottom-right`, defaulting to today's `bottom-center`; top-anchored toasts now animate downward instead of upward out of their own anchor. `size` is `small | medium | large` with `medium` unchanged. Multiple toasts at one position **stack** instead of overlapping: newest against the anchor edge, `max-visible` (default 3), and overflow **queues rather than drops** — so the `duration` countdown starts when a toast becomes *visible*, not when `show` is set. `max-visible` is read from the first toast to arrive at a position.
+- **`rel-tooltip` `tone`.** `inverse` (default, pixel-identical to 1.4.7) and `neutral`, a light-surface bubble with a 1px border — and the tail carries the border too.
+- **Second lines in suggestion rows.** A `supportingText` key on an object item renders a smaller second line under the label, on `rel-autocomplete` (new) and `rel-select` (see Changed). On **rel-autocomplete** it is **matched by the filter and highlighted**, not merely displayed, so a record can be found by its subtitle — rename the key with `supporting-field`. On **rel-select** the second line is displayed but NOT searched: the panel's search matches the label only. The two differ deliberately, because an autocomplete's second line carries identifying data a user types to find the row while a select's is descriptive. New parts `option-label` and `option-supporting-text` — **single-select rows only**; under `multiple` the row is a nested `rel-checkbox` and the second line has no part path at all.
+- **`rel-autocomplete` multi-select.** `multiple` with `selected-values`, a Select-all row and checkbox rows, mirroring `rel-select`. One deliberate difference: the committed chips sit **below** the field rather than inside it, because a select's trigger is a button that displays a value while an autocomplete's is an editable input the caret lives in.
+- **`rel-range-picker` month and year navigation.** The header month label is now a period switcher with Months and Years views and an unbounded year pager, ported from `rel-date-picker`. Reaching January 2023 is 3 clicks instead of roughly 44.
+- **Full-word size values** on `rel-avatar`, `rel-container` (`padding`), `rel-popover-content` and `rel-modal`, joining badge, chip and slider. `sm` / `md` / `lg` / `xs` / `xl` remain accepted, normalised to the full words. **Not deprecations** — no console notice.
+- **`--rel-shadow-color`** (`rgba(11,11,11,0.10)`), the shadow colour on its own. `filter: drop-shadow()` takes a bare `<color>` and cannot consume a box-shadow-shaped token, so components needing it had no semantic token to bind.
+
+### Fixed
+
+- **`rel-radio` sizes rendered identically.** `sm` / `md` / `lg` matched no rule and fell through to the base scale — which *is* medium — so three differently-spelled groups were byte-identical. They now normalise. Separately, `small` gets its own 16px control (see Changed).
+- **Fields did not line up in a form row.** `label-style="floating"` put its control 26px above a labelled sibling, because it reserved no label row. All three label styles now share one baseline. Also fixed: the floating host was consistently 4px *shorter* than the control inside it, and `label-style="none"` ran 2px tall at `small` because its reserve was hard-bound to the medium label role. Affects `rel-textfield` and `rel-select`; `rel-autocomplete` inherits through composition.
+- **`rel-otp` drew a hyphen before a lone cell.** With the default grouping of 3, a 4-character code rendered `[][][]-[]`. Separators now render only when the length divides evenly by the group size, which also fixes lengths 5, 7 and 8.
+- **The calendars' Months and Years grids could lose every tab stop.** Cells carried `tabindex="0"` only when selected, and the year pager moves the page without moving the selected year — so paging back once left all twelve cells at `-1` and the grid unreachable by keyboard. Both `rel-date-picker` and `rel-range-picker`; the day grids were already correct. Arrow, Home/End and Escape navigation added to the range picker's period grids to match the date picker's, and the tab stop now follows focus in both.
+- **`rel-slider`** documented a Medium size that the docs never showed. The component was always correct.
+
+### Changed
+
+<a id="changed-148"></a>Four changes are visible with no rename to warn you:
+
+- **`rel-radio` `small` shrinks.** Its control was 20px, identical to `medium`; it is now 16px, so the ramp reads 16/20/24. This is a deliberate divergence from the design file, which pins Small and Medium to the same control — a size axis where two of three sizes look identical is a defective API. 16px is `rel-checkbox`'s Small, its sibling selection control.
+- **`rel-select` option `supportingText` now renders in single-select rows.** It previously rendered only in multi-select rows, so a single-select built from options that already carried the key gains a second line it did not have. Rows are then two lines, which makes 32/40/48px the *one-line* height rather than the row height.
+- **Floating-label fields are taller**, because they now reserve the label row so they line up with labelled siblings. `--rel-field-label-reserve: 0` collapses it for toolbars and table cells.
+- **Toasts stack.** Five toasts at one position used to paint on top of each other; now three show and two wait. An app-level toast queue built to work around the old behaviour will still work, but the queueing it exists to provide is now built in.
+
+## 1.4.7 (2026-09-12)
+
+
+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` is unchanged in this release and stays on 1.4.4 — icons keep their own version counter.
+
+### 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.