ngwr 10.2.1 → 11.0.0

package/README.md

@@ -1,16 +1,17 @@
 # <img src="https://ngwr.dev/images/logo.svg" alt="ngwr logo" height="32px">
 
 [![ngwr website](https://img.shields.io/badge/ngwr.dev-3969e2)](https://ngwr.dev)
-[![ngwr version](https://img.shields.io/github/package-json/v/thekhegay/ngwr?filename=projects%2Flib%2Fpackage.json&color=%23f51c6a)](https://www.npmjs.com/package/ngwr)
+[![ngwr version](https://img.shields.io/github/package-json/v/thekhegay/ngwr?filename=projects%2Flib%2Fpackage.json&color=%23e21a62)](https://www.npmjs.com/package/ngwr)
 [![angular peer](https://img.shields.io/npm/dependency-version/ngwr/peer/@angular/core)](https://www.npmjs.com/package/ngwr)
 [![ci](https://img.shields.io/github/actions/workflow/status/thekhegay/ngwr/ci.yml?branch=main&label=ci)](https://github.com/thekhegay/ngwr/actions/workflows/ci.yml)
+[![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.
 
-> **Status:** active development. v10 is the current major line (Angular 22 peer).
+> **Status:** active development. v11 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.
@@ -28,9 +29,10 @@ zoneless-ready, responsive, modular SCSS, fully tree-shakable. Built on top of
 | `luxon` _(optional)_        | `^3.0.0`             |
 | `lucide` _(optional)_       | `>= 1.0.0`           |
 
-Node ≥ 24.16.0 (or 26+) and TypeScript `~6.0.x` (Angular 22 requires
-`typescript >=6.0 <6.1`). Contributing to this repo additionally needs
-pnpm ≥ 11.10.
+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
+to this repo needs the narrower `^24.16.0 || >=26` it pins (`.nvmrc` says 24),
+plus pnpm ≥ 11.10.
 
 ## Install
 
@@ -54,9 +56,10 @@ 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`) for the icon adapters, and
-`date-fns` or `luxon` for the calendar / date-picker adapters. The Quick start
-below registers a lucide icon, so it needs `lucide`:
+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
@@ -71,10 +74,11 @@ The fastest way — pull in everything (theme tokens + all component styles):
 @use 'ngwr';
 ```
 
-Good for a spike, but it is every entry point at once — about **247 kB** of CSS
-(~30 kB over the wire), which on its own exceeds the 500 kB initial budget a
-fresh `ng new` ships with. For anything you intend to keep, opt in per component
-below and the sheet stays proportional to what you actually render.
+Good for a spike, but it is every entry point at once — about **265 kB** of CSS
+(~40 kB over the wire), which is over half the 500 kB initial budget a fresh
+`ng new` warns at before any of your own code. For anything you intend to keep,
+opt in per component below and the sheet stays proportional to what you actually
+render.
 
 Prefer to opt in per-component? Each component has its own SCSS entry that pulls
 in the theme automatically:
@@ -183,7 +187,7 @@ export class ProfileForm {
 
 **Feedback** — [alert](https://ngwr.dev/reference/components/alert), [empty](https://ngwr.dev/reference/components/empty), [progress](https://ngwr.dev/reference/components/progress), [result](https://ngwr.dev/reference/components/result), [skeleton](https://ngwr.dev/reference/components/skeleton), [spinner](https://ngwr.dev/reference/components/spinner).
 
-**Display** — [avatar](https://ngwr.dev/reference/components/avatar), [badge](https://ngwr.dev/reference/components/badge) (incl. `wr-tag`), [compare](https://ngwr.dev/reference/components/compare), [counter](https://ngwr.dev/reference/components/counter), [descriptions](https://ngwr.dev/reference/components/descriptions), [divider](https://ngwr.dev/reference/components/divider), [image-cropper](https://ngwr.dev/reference/components/image-cropper), [keyboard](https://ngwr.dev/reference/components/keyboard), [lightbox](https://ngwr.dev/reference/components/lightbox), [qr](https://ngwr.dev/reference/components/qrcode), [statistic](https://ngwr.dev/reference/components/statistic), [timeline](https://ngwr.dev/reference/components/timeline).
+**Display** — [avatar](https://ngwr.dev/reference/components/avatar), [badge](https://ngwr.dev/reference/components/badge) (incl. `wr-tag`), [compare](https://ngwr.dev/reference/components/compare), [counter](https://ngwr.dev/reference/components/counter), [descriptions](https://ngwr.dev/reference/components/descriptions), [divider](https://ngwr.dev/reference/components/divider), [image-cropper](https://ngwr.dev/reference/components/image-cropper), [keyboard](https://ngwr.dev/reference/components/keyboard), [lightbox](https://ngwr.dev/reference/components/lightbox), [markdown](https://ngwr.dev/reference/components/markdown), [qr](https://ngwr.dev/reference/components/qrcode), [statistic](https://ngwr.dev/reference/components/statistic), [timeline](https://ngwr.dev/reference/components/timeline).
 
 **Layout** — [card](https://ngwr.dev/reference/components/card), [carousel](https://ngwr.dev/reference/components/carousel), [collapse](https://ngwr.dev/reference/components/collapse), [layout](https://ngwr.dev/reference/components/layout), [list](https://ngwr.dev/reference/components/list), [page-header](https://ngwr.dev/reference/components/page-header), [splitter](https://ngwr.dev/reference/components/splitter), [toolbar](https://ngwr.dev/reference/components/toolbar).
 
@@ -209,7 +213,7 @@ Card packages bundle their related directives: `ngwr/spotlight-card` exports `Wr
 
 ### Pipes — `ngwr/pipes`
 
-[wrBytes](https://ngwr.dev/reference/pipes/wr-bytes), [wrDate](https://ngwr.dev/reference/pipes/wr-date), [wrMark](https://ngwr.dev/reference/pipes/wr-mark), [wrNumber](https://ngwr.dev/reference/pipes/wr-number), [wrPlural](https://ngwr.dev/reference/pipes/wr-plural), [wrRange](https://ngwr.dev/reference/pipes/range), [wrTruncate](https://ngwr.dev/reference/pipes/wr-truncate).
+[wrBytes](https://ngwr.dev/reference/pipes/wr-bytes), [wrDate](https://ngwr.dev/reference/pipes/wr-date), [wrMark](https://ngwr.dev/reference/pipes/wr-mark), [wrNumber](https://ngwr.dev/reference/pipes/wr-number), [wrPlural](https://ngwr.dev/reference/pipes/wr-plural), [wrRange](https://ngwr.dev/reference/pipes/wr-range), [wrTruncate](https://ngwr.dev/reference/pipes/wr-truncate).
 
 ### Services
 
@@ -231,7 +235,8 @@ 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-fns`, `ngwr/date-adapter-luxon`. Wire one with `provideWrDateAdapter(...)` to power calendar + every mode of date-picker.
+- **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.
+- **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
 
@@ -240,13 +245,27 @@ Math (`clamp`, `round`), coercion (`numAttr`), css helpers (`resolveCssSize`, `g
 - **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).
 - **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.** 130 separate ng-packagr entry points — import only what you use. Per-component FESM bundles are small: a median of ~3 KB gzipped, the heaviest (`ngwr/select`) ~20 KB. The whole catalog gzips to ~516 KB — but real apps pull a handful of entries. The only runtime dependency is `tslib`.
+- **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`.
 - **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`.
 - **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
+
+The package ships `ngwr-mcp`, a zero-dependency MCP server that makes those files askable: `search_ngwr` (find an entry point by what you need), `get_ngwr_component`, `get_ngwr_api` (a class's inputs / models / outputs / methods, read out of the shipped `.d.ts`) and `get_ngwr_setup` (the install, `ng g ngwr:use` and provider commands — returned as text; it never runs them). It adds no second copy of the catalog: it reads only files inside its own installed package, makes no network requests, and runs no commands.
+
+```json
+{
+  "mcpServers": {
+    "ngwr": { "command": "npx", "args": ["-y", "ngwr-mcp"] }
+  }
+}
+```
+
+Works in Claude Code (`claude mcp add ngwr -- npx -y ngwr-mcp`), Claude Desktop and Cursor. To pin it to the version in your lockfile, use `"command": "node", "args": ["./node_modules/ngwr/mcp/server.js"]`. [Guide](https://ngwr.dev/guides/mcp).
+
 ## Contributing
 
 Conventional commits are enforced on PR titles. Common types: `feat`, `fix`, `perf`, `refactor`, `docs`, `style`, `test`, `build`, `ci`, `chore`, `revert`. Optional scope is the component or area (`feat(checkbox): icon mode`).
@@ -254,9 +273,10 @@ Conventional commits are enforced on PR titles. Common types: `feat`, `fix`, `pe
 ```shell
 pnpm install
 pnpm dev            # ng serve --o (showcase)
-pnpm build:lib      # ng build lib + ai assets + dist assets + schematics
-pnpm build:showcase # showcase build + sitemap
-pnpm lint           # ng lint + eslint scripts + stylelint + colour parity
+pnpm test           # ng test lib (vitest)
+pnpm build:lib      # ng build lib + ai assets + dist assets + i18n json + schematics + mcp server
+pnpm build:showcase # ai assets + showcase build + sitemap + markdown twins
+pnpm lint           # ng lint + eslint scripts + stylelint + colour parity + rtl
 ```
 
 ## Authors

package/anchor/styles/_index.scss

@@ -3,8 +3,8 @@
 .wr-anchor {
   display: block;
   font-family: var(--wr-font-family-base);
-  border-left: 1.5px solid var(--wr-color-outline);
-  padding-left: 0.875rem;
+  border-inline-start: 1.5px solid var(--wr-color-outline);
+  padding-inline-start: 0.875rem;
 
   &__list {
     list-style: none;
@@ -16,7 +16,7 @@
 
     &--nested {
       margin-top: 0.125rem;
-      padding-left: 0.875rem;
+      padding-inline-start: 0.875rem;
     }
   }
 
@@ -37,7 +37,7 @@
       position: absolute;
       top: 0.25rem;
       bottom: 0.25rem;
-      left: -1rem;
+      inset-inline-start: -1rem;
       width: 1.5px;
       background: transparent;
       transition: background var(--wr-transition-base);

package/back-top/styles/_index.scss

@@ -5,7 +5,12 @@
   // Safe-area: lift the floating button clear of the home indicator / rounded
   // corner on mobile. env() is 0 without insets, so desktop stays 1.5rem.
   bottom: calc(1.5rem + env(safe-area-inset-bottom));
-  right: calc(1.5rem + env(safe-area-inset-right));
+  // The button parks at the reader's trailing corner, so the inset is logical.
+  // Its safe-area term cannot be: `env()` names the device's physical right
+  // edge and does not flip, so under RTL it pads the corner the button no
+  // longer sits in (a landscape-only 0-vs-inset difference; the 1.5rem base
+  // still holds it off the edge).
+  inset-inline-end: calc(1.5rem + env(safe-area-inset-right));
   z-index: 50;
   opacity: 0;
   pointer-events: none;

package/blur-text/styles/_index.scss

@@ -2,6 +2,19 @@
   display: inline-flex;
   flex-wrap: wrap;
 
+  // Same shape as `wr-rotating-text`: the animated pieces are per-character
+  // spans, which a screen reader may read out one letter at a time, so the real
+  // string is carried once here and the pieces are taken out of the tree.
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
   &__piece {
     display: inline-block;
     will-change: transform, filter, opacity;

package/button/styles/_index.scss

@@ -72,6 +72,7 @@
 
   &__spin {
     position: absolute;
+    // rtl-ok: centred with a physical translate(-50%, -50%), so the pair must stay physical
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
@@ -228,17 +229,17 @@
 
   > .wr-btn {
     border-radius: 0;
-    margin-left: -1px;
+    margin-inline-start: -1px;
 
     &:first-child {
-      margin-left: 0;
-      border-top-left-radius: var(--wr-btn-radius);
-      border-bottom-left-radius: var(--wr-btn-radius);
+      margin-inline-start: 0;
+      border-start-start-radius: var(--wr-btn-radius);
+      border-end-start-radius: var(--wr-btn-radius);
     }
 
     &:last-child {
-      border-top-right-radius: var(--wr-btn-radius);
-      border-bottom-right-radius: var(--wr-btn-radius);
+      border-start-end-radius: var(--wr-btn-radius);
+      border-end-end-radius: var(--wr-btn-radius);
     }
 
     &:hover,
@@ -256,6 +257,10 @@
   // seam there and let the raised border own it cleanly.
   @each $name in theme.$colors {
     > .wr-btn--#{$name}:not(.wr-btn--outlined):not(:last-child) {
+      // `box-shadow` offsets are physical by spec — there is no logical form to
+      // convert to. The seam lands on the wrong edge under RTL; fixing it needs a
+      // `[dir]` rule or a real border, which is beyond a property-level rewrite.
+      // rtl-ok: box-shadow has no logical equivalent — see above
       box-shadow: inset -1px 0 0 rgba(var(--wr-color-black-rgb), 0.2);
 
       &:hover,

package/carousel/styles/_index.scss

@@ -64,18 +64,29 @@
       transform: translateY(-50%) scale(1.05);
     }
 
+    // The track's motion is direction-aware now — `carousel.ts` signs its
+    // `translateX` and its swipe threshold from `Directionality` — so the arrows
+    // follow the reading direction too. "Previous" is where the earlier slides
+    // are, which is the inline start in both directions.
     &--prev {
-      left: 0.75rem;
+      inset-inline-start: 0.75rem;
     }
 
     &--next {
-      right: 0.75rem;
+      inset-inline-end: 0.75rem;
+    }
+
+    // The chevrons are drawn pointing physically left and right, so they turn
+    // around with the strip: going BACK is going right for an RTL reader.
+    [dir='rtl'] & svg {
+      transform: scaleX(-1);
     }
   }
 
   &__dots {
     position: absolute;
     bottom: 0.75rem;
+    // rtl-ok: centred with a physical translateX, so the pair must stay physical.
     left: 50%;
     transform: translateX(-50%);
     display: flex;

package/cascader/styles/_index.scss

@@ -57,7 +57,7 @@
     font-size: var(--wr-cascader-font-size);
     line-height: var(--wr-cascader-line-height);
     cursor: pointer;
-    text-align: left;
+    text-align: start;
     transition:
       border-color var(--wr-transition-base),
       box-shadow var(--wr-transition-base);
@@ -163,7 +163,7 @@
     gap: 0.125rem;
 
     + .wr-cascader__col {
-      border-left: 1px solid var(--wr-color-outline);
+      border-inline-start: 1px solid var(--wr-color-outline);
     }
   }
 

package/circular-text/styles/_index.scss

@@ -33,10 +33,12 @@
   &__char {
     position: absolute;
     top: 50%;
+    // rtl-ok: centred on the spinner's midpoint by a physical margin-left/-top pair plus a per-char translateY()
     left: 50%;
     display: inline-block;
     // Pre-shift by -50% so the char's centre sits at the spinner centre
     // before the per-char `rotate translateY(-radius)` runs.
+    // rtl-ok: the negative half of the `left: 50%` centring pair, symmetric with `margin-top`
     margin-left: -0.5em;
     margin-top: -0.5em;
     line-height: 1;

package/collapse/styles/_index.scss

@@ -30,7 +30,7 @@
     font: inherit;
     font-size: var(--wr-text-base);
     font-weight: 500;
-    text-align: left;
+    text-align: start;
     cursor: pointer;
     transition: background var(--wr-transition-base);
 

package/color-picker/styles/_index.scss

@@ -94,6 +94,11 @@
     height: var(--wr-color-picker-thumb-size);
     transform: translate(-50%, -50%);
     top: 0;
+    // The template overrides this with `[style.left.%]`, computed in color-picker.ts
+    // from `(event.clientX - rect.left) / rect.width` — a physical-pixel measurement
+    // against the SV panel and the two gradient tracks, which are painted `to right`
+    // and do not flip.
+    // rtl-ok: canvas geometry in physical pixels, centred by the physical translate
     left: 0;
     border-radius: 50%;
     border: 2px solid #fff;
@@ -194,7 +199,7 @@
   }
 
   &__field--wide input {
-    text-align: left;
+    text-align: start;
     text-transform: lowercase;
     padding: 0.3125rem 0.5rem;
     font-size: var(--wr-text-sm);

package/compare/styles/_index.scss

@@ -74,8 +74,7 @@
   }
 
   &--vertical &__divider {
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     height: 2px;
     transform: translateY(-50%);
   }

package/context-menu/styles/_index.scss

@@ -19,6 +19,11 @@
   // open feel is consistent across all overlay families.
   opacity: 0;
   transform: scale(0.96);
+  // `transform-origin` has no logical keyword form, and this corner is the one
+  // the directive pins to the pointer — it writes `top` / `left` inline from
+  // `pageX`/`pageY`, physical pixels. Origin and those coordinates are one pair;
+  // mirroring the menu around the cursor is a TS change, not a rename.
+  // rtl-ok: animation origin tied to the pointer coords the directive writes
   transform-origin: top left;
   transition:
     opacity var(--wr-overlay-duration) var(--wr-overlay-ease),
@@ -94,7 +99,7 @@
     width: 0.8125rem;
     height: 0.8125rem;
     color: var(--wr-color-on-surface-muted);
-    margin-left: 0.25rem;
+    margin-inline-start: 0.25rem;
   }
 
   &--has-submenu:hover &__chevron,

package/descriptions/styles/_index.scss

@@ -109,7 +109,7 @@
 
   &--bordered#{&}--inline &__label {
     background: rgba(var(--wr-color-outline-rgb), 0.35);
-    border-right: 1px solid var(--wr-color-outline);
+    border-inline-end: 1px solid var(--wr-color-outline);
   }
 }
 
@@ -158,6 +158,6 @@
 
   .wr-descriptions--bordered.wr-descriptions--inline .wr-descriptions__label {
     background: transparent;
-    border-right: 0;
+    border-inline-end: 0;
   }
 }

package/dialog/styles/_index.scss

@@ -10,6 +10,13 @@
   z-index: 1000;
   pointer-events: none;
   top: 0;
+  // Kept verbatim from CDK's prebuilt sheet on purpose. The box is a fixed,
+  // full-viewport rect (`width`/`height: 100%`), so start/end is a no-op in both
+  // directions — and an app that also loads CDK's own prebuilt CSS would then
+  // hold `left: 0` from CDK next to `inset-inline-start: 0` from here, which in
+  // RTL over-constrains the same rect for no gain. Fidelity to the source we
+  // mirror is worth more than a rename that changes nothing.
+  // rtl-ok: re-emitted CDK rule; full-viewport box, identical under RTL
   left: 0;
   width: 100%;
   height: 100%;

package/drawer/styles/_index.scss

@@ -85,24 +85,41 @@
 
   // Rounded leading corners
   // The edge facing the viewport interior. Common bottom-sheet styling.
+  //
+  // Every radius below is keyed off `position`, a PHYSICAL input
+  // (`left | right | top | bottom`) naming a viewport edge — a `--left` drawer
+  // is on the physical left in either direction, and the CDK
+  // `GlobalPositionStrategy` that places it calls `.left()` / `.right()`. So the
+  // corners it softens are physical: made logical, a `--left` panel in RTL would
+  // round the edge against the viewport instead of the one facing the content.
   &--rounded.wr-drawer__panel--bottom {
+    // rtl-ok: symmetric pair on the block-start edge — identical under RTL
     border-top-left-radius: var(--wr-border-radius-lg);
+    // rtl-ok: symmetric pair on the block-start edge — identical under RTL
     border-top-right-radius: var(--wr-border-radius-lg);
   }
   &--rounded.wr-drawer__panel--top {
+    // rtl-ok: symmetric pair on the block-end edge — identical under RTL
     border-bottom-left-radius: var(--wr-border-radius-lg);
+    // rtl-ok: symmetric pair on the block-end edge — identical under RTL
     border-bottom-right-radius: var(--wr-border-radius-lg);
   }
   &--rounded.wr-drawer__panel--left {
+    // rtl-ok: physical `position` — inner edge of a physically left-anchored panel
     border-top-right-radius: var(--wr-border-radius-lg);
+    // rtl-ok: physical `position` — inner edge of a physically left-anchored panel
     border-bottom-right-radius: var(--wr-border-radius-lg);
   }
   &--rounded.wr-drawer__panel--right {
+    // rtl-ok: physical `position` — inner edge of a physically right-anchored panel
     border-top-left-radius: var(--wr-border-radius-lg);
+    // rtl-ok: physical `position` — inner edge of a physically right-anchored panel
     border-bottom-left-radius: var(--wr-border-radius-lg);
   }
 
-  // Safe-area padding on the trailing edge
+  // Safe-area padding on the trailing edge. `env(safe-area-inset-*)` is defined
+  // per physical screen edge — the notch does not move when the text does — so
+  // the padding that clears it stays physical as well.
   &--safe-area.wr-drawer__panel--bottom {
     padding-bottom: env(safe-area-inset-bottom);
   }
@@ -110,9 +127,11 @@
     padding-top: env(safe-area-inset-top);
   }
   &--safe-area.wr-drawer__panel--left {
+    // rtl-ok: pairs with the physical `env(safe-area-inset-left)` screen inset
     padding-left: env(safe-area-inset-left);
   }
   &--safe-area.wr-drawer__panel--right {
+    // rtl-ok: pairs with the physical `env(safe-area-inset-right)` screen inset
     padding-right: env(safe-area-inset-right);
   }
 }

package/dropdown/styles/_index.scss

@@ -1,8 +1,10 @@
 @use '../../theme/styles' as theme;
 @use '../../overlay/styles'; // shared .wr-overlay-sheet / .wr-overlay-backdrop for responsive mode
 
-// `.wr-dropdown` is the inline trigger marker; the menu and overlay live
-// in the CDK overlay portal and so are separate blocks, not elements.
+// The directive marks its host `.wr-dropdown-trigger` — `.wr-dropdown` below is
+// reachable only if a consumer applies it by hand, which is why it stays: the
+// `.wr-*` names are public API. The menu and overlay live in the CDK overlay
+// portal and so are separate blocks, not elements.
 
 .wr-dropdown {
   cursor: pointer;
@@ -31,6 +33,10 @@
   font-family: var(--wr-font-family-base);
   // Match popover / popconfirm / context-menu open feel.
   animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
+  // `transform-origin` has no logical keyword form, and the corner it names is
+  // the scale-in choreography of `wr-overlay-in`, shared with popover /
+  // popconfirm / context-menu. Mirroring it needs a direction-aware rule.
+  // rtl-ok: animation origin, no logical keyword form exists
   transform-origin: top left;
 }
 
@@ -48,12 +54,16 @@
     padding-top: 0.25rem;
   }
 
+  // The gap sits on the pane edge that faces the trigger. `left` / `right` map
+  // to CDK `originX: 'start' | 'end'` (see `WR_DROPDOWN_POSITIONS`), which
+  // `FlexibleConnectedPositionStrategy` already resolves against the ambient
+  // `Directionality` — so the padding has to follow the same axis, logically.
   &--left {
-    padding-right: 0.25rem;
+    padding-inline-end: 0.25rem;
   }
 
   &--right {
-    padding-left: 0.25rem;
+    padding-inline-start: 0.25rem;
   }
 }
 
@@ -76,7 +86,7 @@
   font: inherit;
   font-size: var(--wr-text-sm);
   line-height: 1.25rem;
-  text-align: left;
+  text-align: start;
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
@@ -104,6 +114,10 @@
     color: var(--wr-color-on-surface-muted);
     cursor: not-allowed;
     opacity: 0.6;
+    // 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.
+    pointer-events: none;
 
     &:hover {
       background: transparent;

package/empty/styles/_index.scss

@@ -19,6 +19,16 @@
     color: var(--wr-color-on-surface-muted);
     opacity: 0.6;
     margin-bottom: 0.25rem;
+    // The built-in glyph is sized by `.wr-icon__svg` at 1em; a custom
+    // `<wr-icon>` sizes through this var instead, so without it the two
+    // branches of the same slot rendered at different sizes (15px vs 18px).
+    --wr-icon-size: 1em;
+  }
+
+  // `<wr-icon>` sets `color: inherit` on its own host at equal specificity; the
+  // type selector wins it back so a custom icon stays as muted as the default.
+  wr-icon.wr-empty__icon {
+    color: var(--wr-color-on-surface-muted);
   }
 
   &__title {

package/fesm2022/ngwr-action-sheet.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, model, input, output, computed, ViewEncapsulation, Component } from '@angular/core';
 import { WrDrawer, WrDrawerTitle } from 'ngwr/drawer';
+import { useI18nText } from 'ngwr/i18n';
 import { WrIcon } from 'ngwr/icon';
 import { WrHaptics } from 'ngwr/platform';
 
@@ -49,6 +50,15 @@ class WrActionSheet {
     /** Optional bold heading above the rows. */
     title = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /**
+     * Name announced for the dialog when there is no visible `title`. Falls back to
+     * `actionSheet.label`, then `'Actions'` — it used to be that English string,
+     * written into the template of a component whose every other string comes from
+     * the caller.
+     */
+    titleFallback = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleFallback" }] : /* istanbul ignore next */ []));
+    resolvedTitleFallback = useI18nText(this.titleFallback, 'actionSheet.label', 'Actions');
     /** Optional muted sub-heading under the title. */
     message = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
@@ -66,12 +76,12 @@ class WrActionSheet {
         this.open.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrActionSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrActionSheet, isStandalone: true, selector: "wr-action-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", action: "action" }, ngImport: i0, template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>Actions</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n", dependencies: [{ kind: "component", type: WrDrawer, selector: "wr-drawer", inputs: ["open", "position", "width", "height", "maxHeight", "rounded", "showHandle", "safeArea", "hasBackdrop", "closeOnBackdropClick", "closeOnEscape", "closable", "closeLabel"], outputs: ["openChange"] }, { kind: "directive", type: WrDrawerTitle, selector: "[wrDrawerTitle]" }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrActionSheet, isStandalone: true, selector: "wr-action-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleFallback: { classPropertyName: "titleFallback", publicName: "titleFallback", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", action: "action" }, ngImport: i0, template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n", dependencies: [{ kind: "component", type: WrDrawer, selector: "wr-drawer", inputs: ["open", "position", "width", "height", "maxHeight", "rounded", "showHandle", "safeArea", "hasBackdrop", "closeOnBackdropClick", "closeOnEscape", "closable", "closeLabel"], outputs: ["openChange"] }, { kind: "directive", type: WrDrawerTitle, selector: "[wrDrawerTitle]" }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrActionSheet, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-action-sheet', encapsulation: ViewEncapsulation.None, imports: [WrDrawer, WrDrawerTitle, WrIcon], template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>Actions</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n" }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
+            args: [{ selector: 'wr-action-sheet', encapsulation: ViewEncapsulation.None, imports: [WrDrawer, WrDrawerTitle, WrIcon], template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n" }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleFallback", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
 /**
  * Generated bundle index. Do not edit.