ngwr 11.1.0 → 12.0.0

package/README.md

@@ -11,7 +11,7 @@
 zoneless-ready, responsive, modular SCSS, fully tree-shakable. Built on top of
 `@angular/cdk` for overlay, portal, and a11y primitives.
 
-> **Status:** active development. v11 is the current major line (Angular 22 peer).
+> **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.
@@ -55,7 +55,7 @@ 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
+Beyond Angular itself, `@angular/cdk` and `@angular/forms` are the required peers — forms because every value control implements a Signal Forms interface. `@angular/router` is optional, needed only by the navigation components that take a `routerLink`. A stock `ng new` app already has all three. 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
@@ -201,7 +201,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,7 +235,7 @@ 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
@@ -243,13 +243,13 @@ Math (`clamp`, `round`), coercion (`numAttr`), css helpers (`resolveCssSize`, `g
 - **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)]`.
 - **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/circular-text/styles/_index.scss

@@ -24,6 +24,17 @@
   user-select: none;
   transition: transform 0.6s var(--wr-ease-spring);
 
+  // The accessible copy of the string — the ring itself is `aria-hidden`.
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
   &__spin {
     position: absolute;
     inset: 0;

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/command-palette/styles/_index.scss

@@ -127,6 +127,18 @@
     color: var(--wr-color-primary);
   }
 
+  // The keycap is the one thing on the active row that does NOT want the tint under
+  // it. `--wr-color-hover` is translucent, so on a plain row it composites to a light
+  // grey and the muted label reads at 4.63:1 — but over `--wr-color-primary-soft` it
+  // composites to #dce4f1, where the same label measures 4.17:1 and fails AA. Neither
+  // shipped gate can see it: the palette has to be OPEN with a row active, which is a
+  // state that walks past prerendered HTML and a page at rest alike. Putting the chip
+  // back on the surface restores the pairing the muted role is calibrated for, and
+  // keeps the chip reading as a keycap rather than as part of the highlight.
+  &__option--active &__option-shortcut {
+    background: var(--wr-color-surface);
+  }
+
   &__option-body {
     flex: 1 1 auto;
     min-width: 0;

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;

package/drawer/styles/_index.scss

@@ -26,6 +26,33 @@
   height: 100vh;
   height: 100dvh;
 }
+// No title to sit beside, so the corner chrome needs its own room.
+//
+// `__close` is absolutely positioned at an offset chosen to centre it on the
+// TITLE's first line. A drawer given only content — the shape a navigation
+// panel takes, `<wr-drawer><nav /></wr-drawer>` — starts its content at the top
+// and runs it under the button: the showcase's icon-set panel had the × over
+// the first menu row by 24x16 px, with `elementFromPoint` returning the button,
+// so that corner of the row could not be clicked. Reserve the strip rather than
+// move the button, which would make titled drawers look different for no reason.
+//
+// Written out rather than nested under `.wr-drawer__panel`: the first attempt
+// put it beside `&__close`, whose parent is `.wr-drawer`, so it compiled to
+// `.wr-drawer--untitled` and matched nothing. The class the component writes is
+// on the PANEL.
+//
+// **3.25rem, and the number comes from the TOUCH TARGET rather than the button.**
+// `__close` sits at `inset-block-start: 1.75rem` with `translateY(-50%)`, so its
+// visible box is 16–40px — but it also carries `touch-target`, whose `::after`
+// grows the hit area to 44px on a coarse pointer, reaching 6–50px. Reserving the
+// visible height left `getBoundingClientRect` reporting no overlap while
+// `elementFromPoint` still answered "close button" over the first 10px of the
+// content: the boxes had stopped intersecting and the control was still covered.
+// 52px clears the target with two pixels to spare.
+.wr-drawer__panel--untitled > *:not(.wr-drawer__close) {
+  padding-block-start: 3.25rem;
+}
+
 
 // …and that same flattening puts the content component's own host element
 // between the panel and the title / content / footer slots, so the panel's
@@ -168,6 +195,16 @@
     border-bottom: 1px solid var(--wr-color-outline);
   }
 
+  // No title to sit beside, so the corner chrome needs its own room.
+  //
+  // `__close` is absolutely positioned at an offset chosen to centre it on the
+  // TITLE's first line (see below). A drawer given only content — the shape a
+  // navigation panel takes, `<wr-drawer><nav /></wr-drawer>` — starts its
+  // content at the top of the panel and runs it straight under the button: the
+  // showcase's own icon-set panel had the × covering the first menu row by
+  // 24x16 px, with `elementFromPoint` returning the button, so that corner of
+  // the row could not be clicked. Reserve the strip instead of moving the
+  // button, which would leave titled drawers looking different for no reason.
   // Built-in dismiss (×) in the panel's top-right corner — rendered by the
   // component template, appended by `WrDrawerManager` for service drawers.
   &__close {

package/dropdown/styles/_index.scss

@@ -95,7 +95,7 @@
   &:hover,
   &:focus-visible {
     background: var(--wr-dropdown-item-bg-hover);
-    outline: none;
+    outline-offset: -2px;
   }
 
   &__icon {
@@ -113,7 +113,7 @@
   &--disabled {
     color: var(--wr-color-on-surface-muted);
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
     // The item's own `disabled` guards only the KEYBOARD path; the host element is
     // where a consumer binds `(click)`, and nothing stopped a real click reaching
     // it. `wr-btn` and `wr-checkbox` disable their pointer the same way.