ngwr 11.2.0 → 12.1.0

package/README.md

@@ -7,27 +7,81 @@
 [![coverage](https://codecov.io/gh/thekhegay/ngwr/branch/main/graph/badge.svg)](https://codecov.io/gh/thekhegay/ngwr)
 [![license](https://img.shields.io/npm/l/ngwr)](https://github.com/thekhegay/ngwr/blob/main/LICENSE)
 
-**NGWR** is a modern Angular UI library — standalone components, signals-first,
-zoneless-ready, responsive, modular SCSS, fully tree-shakable. Built on top of
-`@angular/cdk` for overlay, portal, and a11y primitives.
+<!-- "Nineteen" is derived, not chosen: `grep -rn "implements .*Form\(Value\|Checkbox\)Control" projects/lib`
+     returns twenty class declarations, and the twentieth — `date-picker/internal/time-panel.ts` —
+     is exported by no `public-api.ts`. Seventeen implement `FormValueControl`; `wr-checkbox` and
+     `wr-switch` implement `FormCheckboxControl`. It is a count and not the word "every" on purpose:
+     `[wrColorPickerTrigger]` is public, carries its own `value` model, and implements neither.
+     Re-derive before editing the number. -->
+
+**NGWR is an Angular UI library that binds straight to Signal Forms.** Nineteen
+value controls implement `FormValueControl` / `FormCheckboxControl` themselves,
+so `[formField]` writes the component's own `value` / `checked` model — there
+is not one `ControlValueAccessor` in the library. Zoneless by construction, not
+zoneless-compatible: signal inputs, signal state, `afterNextRender()` for DOM
+work, and no `@NgModule` or `@Input()` decorator anywhere in the source. 202
+tree-shakable entry points, on `@angular/cdk` for overlay, portal and a11y
+primitives.
+
+**[Try it in the browser](https://ngwr.dev/start/playground)** — no install.
+**[How it compares](https://ngwr.dev/start/comparison)** — what the other
+Angular UI libraries do about Signal Forms today, counted rather than asserted.
+**[Docs and live demos](https://ngwr.dev)**.
 
-> **Status:** active development. v11 is the current major line (Angular 22 peer).
+```ts
+import { Component, signal } from '@angular/core';
+import { FormField, email, form, required } from '@angular/forms/signals';
+import { WrCheckbox } from 'ngwr/checkbox';
+import { WrFormField } from 'ngwr/form';
+import { WrInput } from 'ngwr/input';
+
+@Component({
+  selector: 'signup-card',
+  imports: [FormField, WrCheckbox, WrFormField, WrInput],
+  template: `
+    <wr-form-field label="Work email" required>
+      <input wrInput type="email" [formField]="signup.email" />
+    </wr-form-field>
+
+    <wr-checkbox [formField]="signup.agree">I agree to the terms</wr-checkbox>
+  `,
+})
+export class SignupCard {
+  private readonly model = signal({ email: '', agree: false });
+
+  // `[formField]` binds to the control's own `value` / `checked` model, and
+  // `<wr-form-field>` resolves the error copy from the i18n catalog — so
+  // neither an accessor nor a `<wr-form-error>` has to be written by hand.
+  readonly signup = form(this.model, path => {
+    required(path.email);
+    email(path.email);
+  });
+}
+```
+
+Classic `[(ngModel)]` and reactive forms still work — Angular 22 synthesises the
+accessor for a signal-forms control — and every control is usable standalone
+through its two-way `[(value)]` / `[(checked)]` model.
+
+> **Status:** active development. v12 is the current major line (Angular 22 peer).
 > Public API is stable across patch releases and still evolving between majors.
 > [Open an issue](https://github.com/thekhegay/ngwr/issues/new)
 > if something breaks or feels wrong.
 
 ## Requirements
 
-| Peer                        | Range                |
-| --------------------------- | -------------------- |
-| `@angular/core`             | `>= 22.0.0`          |
-| `@angular/common`           | `>= 22.0.0`          |
-| `@angular/cdk`              | `>= 22.0.0`          |
-| `@angular/platform-browser` | `>= 22.0.0`          |
-| `rxjs`                      | `^7.0.0`             |
-| `date-fns` _(optional)_     | `^3.0.0 \|\| ^4.0.0` |
-| `luxon` _(optional)_        | `^3.0.0`             |
-| `lucide` _(optional)_       | `>= 1.0.0`           |
+| Peer                           | Range                |
+| ------------------------------ | -------------------- |
+| `@angular/core`                | `>= 22.0.0`          |
+| `@angular/common`              | `>= 22.0.0`          |
+| `@angular/forms`               | `>= 22.0.0`          |
+| `@angular/cdk`                 | `>= 22.0.0`          |
+| `@angular/platform-browser`    | `>= 22.0.0`          |
+| `@angular/router` _(optional)_ | `>= 22.0.0`          |
+| `rxjs`                         | `^7.0.0`             |
+| `date-fns` _(optional)_        | `^3.0.0 \|\| ^4.0.0` |
+| `luxon` _(optional)_           | `^3.0.0`             |
+| `lucide` _(optional)_          | `>= 1.0.0`           |
 
 TypeScript `~6.0.x` (Angular 22's compiler declares `typescript >=6.0 <6.1`) and
 a Node version Angular 22 accepts — `^22.22.3 || ^24.15.0 || >=26`. Contributing
@@ -55,11 +109,16 @@ npm install ngwr @angular/cdk
 yarn add ngwr @angular/cdk
 ```
 
-`@angular/cdk` is the only required peer. Add an icon set and a date library
-only if you use them — `lucide` (or `feather-icons`) for the icon adapters, and
-`date-fns` or `luxon` for the calendar / date-picker, which otherwise runs on a
-built-in native `Date` adapter. The Quick start below registers a lucide icon, so
-it needs `lucide`:
+Beyond Angular itself, `@angular/cdk` and `@angular/forms` are the required
+peers — forms because the value controls implement its Signal Forms interfaces.
+`@angular/router` is optional, needed only by the navigation components that
+take a `routerLink`. A stock `ng new` app already ships forms and router, so
+`@angular/cdk` is the only one you have to add — which is why it is on the
+install lines above. Add an icon set and a date library only if you use them —
+`lucide` (or `feather-icons`) for the icon adapters, and `date-fns` or `luxon`
+for the calendar / date-picker, which otherwise runs on a built-in native
+`Date` adapter. The Quick start below registers a lucide icon, so it needs
+`lucide`:
 
 ```shell
 pnpm add lucide
@@ -146,7 +205,7 @@ export class AppComponent {
 }
 ```
 
-Every value control is Signal Forms-native, so `[formField]` binds straight
+Value controls are Signal Forms-native, so `[formField]` binds straight
 through — no `ControlValueAccessor` anywhere in the chain:
 
 ```ts
@@ -201,7 +260,7 @@ Plus [icon](https://ngwr.dev/reference/components/icon), the experimental [squir
 
 ### Animations
 
-Animated UI effects. Mix of in-house components + ports of [reactbits.dev](https://www.reactbits.dev) — each port carries a credit chip on its docs page. Defaults are theme-aware (light + dark), and every component honors `prefers-reduced-motion`.
+Animated UI effects. Mix of in-house components + ports of [reactbits.dev](https://www.reactbits.dev) — each port carries a credit chip on its docs page. Defaults are theme-aware (light + dark), and every component honors `prefers-reduced-motion` — the one exception is `spotlight-card`, whose highlight only tracks the pointer.
 
 [aurora](https://ngwr.dev/animations/aurora), [blur-text](https://ngwr.dev/animations/blur-text), [border-glow](https://ngwr.dev/animations/border-glow), [circular-text](https://ngwr.dev/animations/circular-text), [click-spark](https://ngwr.dev/animations/click-spark), [confetti](https://ngwr.dev/animations/confetti), [decrypt-text](https://ngwr.dev/animations/decrypt-text), [falling-text](https://ngwr.dev/animations/falling-text), [fuzzy-text](https://ngwr.dev/animations/fuzzy-text), [glitch-text](https://ngwr.dev/animations/glitch-text), [gradient-text](https://ngwr.dev/animations/gradient-text), [marquee](https://ngwr.dev/animations/marquee), [rotating-text](https://ngwr.dev/animations/rotating-text), [shiny-text](https://ngwr.dev/animations/shiny-text), [splash-cursor](https://ngwr.dev/animations/splash-cursor), [split-text](https://ngwr.dev/animations/split-text), [spotlight-card](https://ngwr.dev/animations/spotlight-card), [star-border](https://ngwr.dev/animations/star-border), [tilt-card](https://ngwr.dev/animations/tilt-card), [typewriter](https://ngwr.dev/animations/typewriter), [waves](https://ngwr.dev/animations/waves).
 
@@ -235,21 +294,21 @@ Math (`clamp`, `round`), coercion (`numAttr`), css helpers (`resolveCssSize`, `g
 - [Mobile & responsive](https://ngwr.dev/guides/mobile) — responsive overlays, touch targets & density, swipe gestures, safe-area insets, container-query layouts.
 - [Typography](https://ngwr.dev/guides/typography) — `wrTypography` directive: headings, paragraphs, lists, links, code.
 - [Icons](https://ngwr.dev/icons) — `ngwr/icon` registry. Use `svgIcon()` for any set that ships raw SVG files (Tabler, Phosphor, Heroicons, Iconoir, Radix, Bootstrap, or your designer's own), plus thin adapters for Lucide (`ngwr/icon/adapters/lucide`) and Feather (`ngwr/icon/adapters/feather`), whose packages don't ship SVGs.
-- **Date adapters** — `ngwr/date-adapter` (native `Date`, no extra package), `ngwr/date-adapter-fns`, `ngwr/date-adapter-luxon`. Wire one with `provideWrDateAdapter()` — plus `{ adapter: WrDateFnsAdapter }` / `{ adapter: WrLuxonAdapter }` for the library-backed ones — to power calendar + every mode of date-picker.
+- **Date adapters** — `ngwr/date` (native `Date`, no extra package), `ngwr/date/adapters/fns`, `ngwr/date/adapters/luxon`. Wire one with `provideWrDateAdapter()` — plus `{ adapter: WrDateFnsAdapter }` / `{ adapter: WrLuxonAdapter }` for the library-backed ones — to power calendar + every mode of date-picker.
 - **Component defaults** — `ngwr/config`. `provideWrConfig({ button: { size: 'sm' } })` sets what a component falls back to when a template says nothing; a bound value always wins, and a bound `false` beats a configured `true`, so a config never has to be escaped. [Reference](https://ngwr.dev/start/configuration).
 
 ## Highlights
 
 - **Standalone & signals-first.** Every component is standalone and uses `input()` / `model()` / `output()` / `signal()` / `computed()`. Zoneless-ready.
-- **Signal Forms native.** Every value control implements `FormValueControl` / `FormCheckboxControl`, so `[formField]` binds straight through — there is no `ControlValueAccessor` in the library at all. `[(ngModel)]` and reactive forms keep working through Angular's bridge, and every control also works standalone via `[(value)]` / `[(checked)]`.
+- **Signal Forms native.** Nineteen value controls implement `FormValueControl` / `FormCheckboxControl`, so `[formField]` binds straight through — there is no `ControlValueAccessor` in the library at all. `[(ngModel)]` and reactive forms keep working through Angular's bridge, and every control also works standalone via `[(value)]` / `[(checked)]`.
 - **CDK-powered.** Overlays, portals, and a11y come from `@angular/cdk`. We add `provideWrOverlay()` so NGWR overlays never collide with other CDK consumers (Material, NG-ZORRO, etc.).
-- **Mobile & responsive.** Overlays collapse to bottom-sheets on small screens (`provideWrResponsiveOverlays()`), touch targets grow to ≥44px on coarse pointers, a `touch` density preset enlarges every control, and drawer / lightbox / toast / carousel respond to swipe gestures. Fixed surfaces respect `env(safe-area-inset-*)`, and layout components (`descriptions`, `stepper`, `page-header`, `toolbar`, `pagination`, `table`) reflow to their container via container queries. [Guide](https://ngwr.dev/guides/mobile).
+- **Mobile & responsive.** Overlays collapse to bottom-sheets on small screens (`provideWrResponsiveOverlays()`), touch targets grow to ≥44px on coarse pointers, a `touch` density preset enlarges the nine control families that read the multipliers, and drawer / lightbox / toast / carousel respond to swipe gestures. Fixed surfaces respect `env(safe-area-inset-*)`, and layout components (`descriptions`, `stepper`, `page-header`, `toolbar`, `pagination`, `table`) reflow to their container via container queries. [Guide](https://ngwr.dev/guides/mobile).
 - **Table, batteries included.** `wr-table` covers column pinning / resizing / drag-reorder, row selection, expandable rows, grouping, tree rows (`childrenKey` — the forest flattens into the same `<tbody>`, so pinning and cell templates keep working at every depth, and the table announces a `treegrid`), summary rows, CSV export (`exportCsv()`, dependency-free RFC 4180) and a virtualized body — all opt-in inputs on the one component. Excel (`.xlsx`) export is deliberately not shipped: it would mean a third-party dependency.
-- **Tree-shakable.** 166 separate ng-packagr entry points — import only what you use. Per-component FESM bundles are small: a median of ~4 KB gzipped, the heaviest (`ngwr/markdown`) ~23 KB. Every runtime bundle together gzips to ~690 KB — the 34 `ngwr/<name>/testing` harnesses aside, since they never reach an app bundle — but real apps pull a handful of entries. The only runtime dependency is `tslib`.
+- **Tree-shakable.** 202 separate ng-packagr entry points — import only what you use. Per-component FESM bundles are small: a median of ~4 KB gzipped, the heaviest (`ngwr/markdown`) ~23 KB. Every runtime bundle together gzips to ~690 KB — the 70 `ngwr/<name>/testing` harnesses aside, since they never reach an app bundle — but real apps pull a handful of entries. The only runtime dependency is `tslib`.
 - **Modular SCSS.** Component styles are scoped through CSS custom properties. Theme tokens live in `ngwr/theme`; utilities (`grid`, `reset`) and the breakpoints SCSS API are opt-in.
 - **Tree-shaken icons.** `provideWrIcons(lucideIcons({ plus: Plus }))` registers only the icons you actually import. Dev-mode validation warns about unregistered icons.
 - **Reactbits ports, dependency-free.** All animation ports are reimplemented with vanilla DOM + Web Animations API / `IntersectionObserver` / `requestAnimationFrame` / raw WebGL — no GSAP, no `motion/react`, no `matter-js`, no `ogl`.
-- **Motion respects the OS.** Every animation component short-circuits to its final state under `prefers-reduced-motion`.
+- **Motion respects the OS.** Every animation component short-circuits to its final state under `prefers-reduced-motion`, except `spotlight-card`, which animates nothing on its own — its highlight follows the cursor.
 - **Legible to agents.** Every docs page also serves as markdown at the same URL plus `.md` — [reference/components/select.md](https://ngwr.dev/reference/components/select.md) is that page's prose, code samples and API tables without the site chrome. The whole catalog is at [llms-full.txt](https://ngwr.dev/llms-full.txt), a quick-ref at [llms.txt](https://ngwr.dev/llms.txt).
 
 ### MCP server

package/burger/styles/_index.scss

@@ -48,7 +48,7 @@
 
     &:disabled {
       cursor: not-allowed;
-      opacity: 0.5;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 

package/button/styles/_index.scss

@@ -45,14 +45,14 @@
   }
 
   &:active {
-    --wr-btn-bg: rgba(var(--wr-color-outline-rgb), 0.6);
+    --wr-btn-bg: var(--wr-color-fill-strong);
   }
 
   &[disabled],
   &:disabled {
     cursor: default;
     pointer-events: none;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
   }
 
   &__icon {

package/calendar/styles/_index.scss

@@ -61,8 +61,8 @@
     }
 
     &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px rgba(var(--wr-calendar-accent-rgb), 0.4);
+      outline: var(--wr-focus-ring-width) solid var(--wr-calendar-accent);
+      outline-offset: 2px;
     }
 
     &:disabled {
@@ -93,13 +93,24 @@
     }
 
     &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px rgba(var(--wr-calendar-accent-rgb), 0.4);
+      outline: var(--wr-focus-ring-width) solid var(--wr-calendar-accent);
+      outline-offset: 2px;
     }
 
     &:disabled {
       cursor: not-allowed;
-      opacity: 0.5;
+      opacity: var(--wr-disabled-opacity);
+    }
+
+    // `__header` is a plain flex row, so it already mirrors: under `dir="rtl"`
+    // the prev button lays out at the right edge. Its chevron is drawn pointing
+    // physically left, though, so it ends up aiming at the month it moves AWAY
+    // from. Turn the glyphs around with the row, the same way the pagination and
+    // carousel arrows do — "previous" is the inline start in both directions.
+    // Scoped to `__nav`, the two icon-only buttons: `__label` sits between them
+    // and is text, which must not mirror.
+    [dir='rtl'] & svg {
+      transform: scaleX(-1);
     }
   }
 
@@ -163,8 +174,8 @@
     }
 
     &:focus-visible {
-      outline: none;
-      box-shadow: inset 0 0 0 2px rgba(var(--wr-calendar-accent-rgb), 0.5);
+      outline: var(--wr-focus-ring-width) solid var(--wr-calendar-accent);
+      outline-offset: -2px;
     }
 
     // States — order matters; later rules override earlier ones.
@@ -200,7 +211,16 @@
     &:disabled {
       color: var(--wr-calendar-muted);
       cursor: not-allowed;
-      opacity: 0.35;
+      // Fainter than the shared token, and a neighbour is the reason: a day from
+      // the adjacent month is still navigable and sits at 0.55 just above, so a
+      // DISABLED day has to read as less available than that one or the two swap
+      // meanings. Deliberately an absolute, calibrated against that hard-coded
+      // 0.55 rather than scaled off the shared token — floating with a consumer
+      // retune is exactly what would let the two cross. Written as an override of
+      // the token anyway, because `_variables.scss` asks that exceptions take
+      // that form so they stay greppable and argued.
+      --wr-disabled-opacity: 0.45;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
@@ -239,8 +259,8 @@
     }
 
     &:focus-visible {
-      outline: none;
-      box-shadow: inset 0 0 0 2px rgba(var(--wr-calendar-accent-rgb), 0.5);
+      outline: var(--wr-focus-ring-width) solid var(--wr-calendar-accent);
+      outline-offset: -2px;
     }
 
     &--current:not(.wr-calendar__chip--selected) {
@@ -260,12 +280,12 @@
     &:disabled {
       color: var(--wr-calendar-muted);
       cursor: not-allowed;
-      opacity: 0.35;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
   &--disabled {
     pointer-events: none;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
   }
 }

package/calendar-heatmap/styles/_index.scss

@@ -2,6 +2,21 @@
 
 .wr-calendar-heatmap {
   display: inline-block;
+  // A year is 53 columns of a FIXED cell size, so the grid has no reflow in it:
+  // its intrinsic width is ~731px whatever the container, and without a cap it
+  // escaped the card it sits in and gave the whole document a 397px horizontal
+  // scroll at 375px. Cap it and scroll the grid instead — the same answer
+  // `.wr-table__scroll` and `.wr-tabs__strip` already give. The cap also covers
+  // the plain block-parent case, where shrink-to-fit alone would still hand the
+  // element its full 731px.
+  max-width: 100%;
+  overflow-x: auto;
+  // `overflow-x: auto` alone reserves room for a vertical scrollbar in browsers
+  // without overlay bars — a stray bar down the side of a grid that is never
+  // taller than its content. Pin the y axis; the bottom row's `:hover` scale is
+  // given its room on `&__cells` below, since that is where the cell size is
+  // legible.
+  overflow-y: hidden;
   font-family: var(--wr-font-family-base);
   color: var(--wr-color-on-surface-muted);
 
@@ -54,6 +69,11 @@
   &__cells {
     grid-area: cells;
     grid-template-rows: repeat(7, var(--wr-heatmap-cell-size));
+    // The bottom row sits on the host's own edge, and the host now clips its
+    // block axis (see above) — so the 40% a hovered cell grows by, half of it
+    // below the row, had nowhere to go. Reserve that half. Scaled from the cell
+    // size rather than written as a length, because the size is an input.
+    padding-block-end: calc(var(--wr-heatmap-cell-size) * 0.2);
   }
 
   &__cell {

package/carousel/styles/_index.scss

@@ -10,7 +10,15 @@
   overflow: hidden;
   font-family: var(--wr-font-family-base);
 
+  // The host is the sized box — the documented recipe gives it a `height` or an
+  // `aspect-ratio` — but the height has to be HANDED DOWN, one definite parent
+  // at a time, or the chain collapses to the tallest slide's content and a
+  // `16 / 9` carousel paints a text-height strip over its own empty frame. The
+  // arrows and dots anchor to the host, so they kept floating in that void.
+  // Inert for an unsized carousel: a percentage against an auto-height parent
+  // resolves to auto, which is what these boxes already did.
   &__viewport {
+    height: 100%;
     overflow: hidden;
     // Capture horizontal swipe-nav; let vertical scrolling pass through.
     touch-action: pan-y;
@@ -18,6 +26,7 @@
 
   &__track {
     display: flex;
+    height: 100%;
     transition: transform var(--wr-duration-slow) var(--wr-ease-out);
     will-change: transform;
   }
@@ -27,10 +36,15 @@
   flex: 0 0 100%;
   min-width: 0;
   display: block;
+  height: 100%;
 
+  // The slide's own child is what a consumer writes `height: 100%` on (the
+  // library's demo does), and that only resolves once every box above it is
+  // definite — see the note on `__viewport`.
   > * {
     display: block;
     width: 100%;
+    height: 100%;
   }
 
   img {
@@ -99,7 +113,15 @@
     border: 0;
     border-radius: 50%;
     background: rgba(var(--wr-color-surface-rgb), 0.55);
-    box-shadow: 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.15);
+    // The dot's fill IS the surface, so this ring is the whole of its visible
+    // boundary — and WCAG 1.4.11 asks 3:1 of the thing that identifies a
+    // control and its state. Fixed black could never carry that in both
+    // themes: on the dark canvas it measured 1.02:1 (black on near-black) and
+    // even in light only 1.41:1. `on-surface` flips with the theme the way the
+    // `--wr-shadow-*` family does, and 0.55 is the alpha that clears the bar on
+    // the bare canvas in both — measured 4.00:1 light, 5.35:1 dark. Same shape
+    // as `.wr-color-picker__swatch`'s ring, which learned this first.
+    box-shadow: 0 0 0 1px rgba(var(--wr-color-on-surface-rgb), 0.55);
     cursor: pointer;
     transition:
       width var(--wr-transition-base),

package/cascader/styles/_index.scss

@@ -21,7 +21,7 @@
 
   &--disabled {
     --wr-cascader-color: var(--wr-color-on-surface-muted);
-    --wr-cascader-bg: rgba(var(--wr-color-outline-rgb), 0.35);
+    --wr-cascader-bg: var(--wr-color-fill);
   }
 
   // Sizes — trigger on the control contract (sm 22 / md 30 / lg 36).
@@ -52,7 +52,12 @@
     color: var(--wr-cascader-color);
     border: 1px solid var(--wr-cascader-border);
     border-radius: var(--wr-cascader-radius);
-    padding: var(--wr-cascader-padding-y) var(--wr-cascader-padding-x);
+    // Density-multiplied like select / input / textarea / button: the trigger
+    // sources the same `--wr-control-padding-*` contract they do, so without
+    // the multiplier it held its md height (30px) while its neighbours grew —
+    // measured at 35.59px for input / select under `touch`.
+    padding: calc(var(--wr-cascader-padding-y) * var(--wr-density-y, 1))
+      calc(var(--wr-cascader-padding-x) * var(--wr-density-x, 1));
     font-family: var(--wr-font-family-base);
     font-size: var(--wr-cascader-font-size);
     line-height: var(--wr-cascader-line-height);
@@ -193,7 +198,7 @@
     &--disabled {
       color: var(--wr-color-on-surface-muted);
       cursor: not-allowed;
-      opacity: 0.55;
+      opacity: var(--wr-disabled-opacity);
 
       &:hover {
         background: transparent;
@@ -213,6 +218,13 @@
     flex: 0 0 auto;
     color: var(--wr-color-on-surface-muted);
   }
+
+  // The panel is a flex row, so its columns cascade toward the inline end —
+  // leftward under `dir="rtl"`. The branch arrow is drawn pointing physically
+  // right, so turn it around with them, the way the carousel's arrows do.
+  [dir='rtl'] & .wr-cascader__opt-arrow {
+    transform: scaleX(-1);
+  }
 }
 
 // Touch pointers: grow the clear button and make the column option rows ~44px

package/checkbox/styles/_index.scss

@@ -37,7 +37,7 @@
     white-space: nowrap;
 
     &:focus-visible + .wr-checkbox__box {
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.2);
+      @include theme.focus-ring;
     }
   }
 
@@ -123,7 +123,7 @@
   &--disabled {
     --wr-checkbox-color: var(--wr-color-on-surface-muted);
     pointer-events: none;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
   }
 }
 

package/collapse/styles/_index.scss

@@ -35,7 +35,7 @@
     transition: background var(--wr-transition-base);
 
     &:hover:not(:disabled) {
-      background: rgba(var(--wr-color-outline-rgb), 0.25);
+      background: var(--wr-color-fill);
     }
 
     &:disabled {
@@ -83,7 +83,7 @@
 
   &--disabled {
     --wr-collapse-color: var(--wr-color-on-surface-muted);
-    opacity: 0.7;
+    opacity: var(--wr-disabled-opacity);
   }
 }
 

package/color-picker/styles/_index.scss

@@ -191,7 +191,7 @@
       }
 
       &:disabled {
-        background: rgba(var(--wr-color-outline-rgb), 0.35);
+        background: var(--wr-color-fill);
         color: var(--wr-color-on-surface-muted);
         cursor: not-allowed;
       }
@@ -247,13 +247,13 @@
 
     &:disabled {
       cursor: not-allowed;
-      opacity: 0.5;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
   &--disabled {
     pointer-events: none;
-    opacity: 0.65;
+    opacity: var(--wr-disabled-opacity);
   }
 }
 

package/compare/styles/_index.scss

@@ -12,9 +12,25 @@
     height: 100%;
     outline: 0;
 
-    &:focus-visible {
-      @include theme.focus-ring;
+    // The surface is `role="slider"` and the component's only keyboard
+    // affordance, but it is coterminous with the host — and rounding a
+    // before/after comparator means `overflow: hidden` there, which discards an
+    // outset ring whole. Insetting the offset is not enough either: the
+    // projected layers paint over the surface's own outline. So the ring is a
+    // pseudo-element stacked above `&__layers`, drawn inward from the edge.
+    &:focus-visible::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      pointer-events: none;
       border-radius: var(--wr-border-radius-sm);
+      outline: var(--wr-focus-ring-width) solid var(--wr-focus-ring-color);
+      // A negative offset equal to the width puts the stroke flush inside the
+      // edge; the halo then sits just inside it, mirroring the outset ring.
+      outline-offset: calc(-1 * var(--wr-focus-ring-width));
+      box-shadow: inset 0 0 0 calc(var(--wr-focus-ring-width) + var(--wr-focus-ring-offset))
+        var(--wr-focus-ring-halo);
     }
   }
 

package/context-menu/styles/_index.scss

@@ -72,12 +72,22 @@
     background: var(--wr-color-primary-soft);
     // The item label inherits this, so it is text on the `-soft` tint: `-ink`.
     color: var(--wr-color-primary-ink);
-    outline: none;
+  }
+
+  // Hover and focus paint the same tint, so the tint alone cannot say which row
+  // Enter fires — with the keyboard on one row and the pointer resting on
+  // another, both light up identically. And the menu focuses its first enabled
+  // row on open and roves with the arrows, so this is the ordinary keyboard
+  // state rather than an edge case. Same ring as `.wr-dropdown-item`, and it
+  // fits: the menu's 0.3125rem padding clears the 2px offset plus the 2px
+  // outline with a pixel to spare, so no negative offset is needed here.
+  &:focus-visible {
+    @include theme.focus-ring;
   }
 
   &--disabled {
     color: var(--wr-color-on-surface-muted);
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
     pointer-events: none;
   }
 
@@ -107,6 +117,15 @@
   &--has-submenu:focus-visible &__chevron {
     color: var(--wr-color-primary);
   }
+
+  // The submenu pane cascades toward the inline end, so under `dir="rtl"` it
+  // opens to the LEFT — `context-menu-item.ts` swaps the key that opens it for
+  // the same reason. The chevron is drawn pointing physically right, so turn it
+  // around with the panes, the way the cascader's branch arrow does. Scoped to
+  // the chevron: the label beside it must not mirror.
+  [dir='rtl'] &__chevron {
+    transform: scaleX(-1);
+  }
 }
 
 // Horizontal separator between groups of items.

package/date-picker/styles/_index.scss

@@ -22,7 +22,7 @@
 
     &:disabled {
       cursor: not-allowed;
-      opacity: 0.5;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 }
@@ -46,7 +46,7 @@
 
   &--disabled {
     .wr-date-range-picker__separator {
-      opacity: 0.5;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 }
@@ -127,7 +127,7 @@
 
     &:disabled {
       cursor: not-allowed;
-      opacity: 0.4;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
@@ -162,7 +162,7 @@
     }
 
     &:disabled {
-      background: rgba(var(--wr-color-outline-rgb), 0.35);
+      background: var(--wr-color-fill);
       color: var(--wr-time-picker-muted);
       cursor: not-allowed;
     }
@@ -196,7 +196,7 @@
   }
 
   &--disabled {
-    opacity: 0.7;
+    opacity: var(--wr-disabled-opacity);
   }
 }
 

package/descriptions/styles/_index.scss

@@ -108,7 +108,7 @@
   }
 
   &--bordered#{&}--inline &__label {
-    background: rgba(var(--wr-color-outline-rgb), 0.35);
+    background: var(--wr-color-fill);
     border-inline-end: 1px solid var(--wr-color-outline);
   }
 }

package/drag-drop/styles/_index.scss

@@ -39,6 +39,33 @@
     &:active {
       cursor: grabbing;
     }
+
+    // Every row is a tab stop (the keyboard reorder path), so every row needs a
+    // ring. Included here rather than added to `theme/_focus.scss`, the same
+    // choice `wr-list` made for its own rows.
+    &:focus-visible {
+      @include theme.focus-ring;
+    }
+
+    // Picked up by the keyboard — the standing counterpart of `:active`, which
+    // only lasts while a pointer is held down.
+    &--grabbed {
+      cursor: grabbing;
+      box-shadow: 0 6px 12px rgba(var(--wr-color-backdrop-rgb), 0.22);
+    }
+  }
+
+  // The key model and the position announcements: read out, never drawn.
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
   }
 }
 
@@ -96,7 +123,7 @@
 .wr-sortable-list .cdk-drag-placeholder {
   opacity: 0.35;
   // Subtle dashed outline so users see where the item came from.
-  background: rgba(var(--wr-color-outline-rgb), 0.6);
+  background: var(--wr-color-fill-strong);
   border-radius: var(--wr-border-radius-base);
   outline: 1px dashed rgba(var(--wr-color-on-surface-rgb), 0.25);
   outline-offset: -1px;