ngwr 11.2.0 → 12.0.0

package/llms-full.txt

@@ -72,7 +72,7 @@
 ## ngwr/blur-text
 - import: `import { WrBlurText } from 'ngwr/blur-text'`
 - selector: `wr-blur-text`
-- exports: WrBlurText
+- exports: WrBlurText, WrBlurTextDirection, WrBlurTextUnit
 - Reveals text by blurring each piece in from a coloured offset, through a half-blurred mid-step, into the steady state. Triggers on viewport entry. Dependency-free port — uses `IntersectionObserver` + Web Animations API.
 
 ## ngwr/blur-text/testing
@@ -140,7 +140,7 @@
 ## ngwr/carousel
 - import: `import { WrCarousel } from 'ngwr/carousel'`
 - selector: `wr-carousel-slide`, `wr-carousel`
-- exports: WrCarousel, WrCarouselSlide
+- exports: WrCarousel, WrCarouselSlide, WR_CAROUSEL, WrCarouselContext
 - Slide carousel with prev/next, dots, and optional autoplay. Autoplay holds while the pointer is over it, while focus is inside it, and while a drag is in flight — hovering is not a way to stop moving content for someone who never uses a mouse, which is what WCAG 2.2.2 asks for.
 
 ## ngwr/carousel/testing
@@ -206,7 +206,6 @@
 
 ## ngwr/color-picker/testing
 - import: `import { WrColorPickerHarness } from 'ngwr/color-picker/testing'`
-- selector: `.wr-color-picker__tabs`
 - exports: WrColorPickerHarness, WrColorPickerTriggerHarness, WrColorPickerHarnessFilters, WrColorPickerTab, WrColorPickerThumbs, WrColorPickerTriggerHarnessFilters
 
 ## ngwr/command-palette
@@ -255,18 +254,10 @@
 - exports: WrCounter, WrCounterMode, WrCountUp, WrCountUpDirection, WrCountUpEasing, WrCountUpTrigger
 - Animated number display. Use **odometer** mode for rolling-digit motion (mechanical counter look) or **tween** mode for an eased count-up from the previous value.
 
-## ngwr/date-adapter
-- import: `import { WrDateAdapter } from 'ngwr/date-adapter'`
+## ngwr/date
+- import: `import { WrDateAdapter } from 'ngwr/date'`
 - exports: WrDateAdapter, WrNativeDateAdapter, provideWrDateAdapter, WrDateAdapterOptions, WR_DATE_LOCALE, WrDateFormat, isNamedFormat
 
-## ngwr/date-adapter-fns
-- import: `import { WrDateFnsAdapter } from 'ngwr/date-adapter-fns'`
-- exports: WrDateFnsAdapter, provideWrDateFnsAdapter
-
-## ngwr/date-adapter-luxon
-- import: `import { WrLuxonAdapter } from 'ngwr/date-adapter-luxon'`
-- exports: WrLuxonAdapter, provideWrLuxonAdapter
-
 ## ngwr/date-picker
 - import: `import { WrDatePicker } from 'ngwr/date-picker'`
 - selector: `wr-date-picker`, `wr-date-range-picker`
@@ -277,6 +268,14 @@
 - import: `import { WrDatePickerDayHarness } from 'ngwr/date-picker/testing'`
 - exports: WrDatePickerDayHarness, WrDatePickerHarness, WrDateRangePickerHarness, WrDatePickerDayHarnessFilters, WrDatePickerHarnessFilters, WrDatePickerTimeFields, WrDateRangePickerHarnessFilters
 
+## ngwr/date/adapters/fns
+- import: `import { WrDateFnsAdapter } from 'ngwr/date/adapters/fns'`
+- exports: WrDateFnsAdapter, provideWrDateFnsAdapter
+
+## ngwr/date/adapters/luxon
+- import: `import { WrLuxonAdapter } from 'ngwr/date/adapters/luxon'`
+- exports: WrLuxonAdapter, provideWrLuxonAdapter
+
 ## ngwr/decrypt-text
 - import: `import { WrDecryptText } from 'ngwr/decrypt-text'`
 - selector: `wr-decrypt-text`
@@ -370,7 +369,6 @@
 
 ## ngwr/event-calendar/testing
 - import: `import { WrEventCalendarChipHarness } from 'ngwr/event-calendar/testing'`
-- selector: `.wr-event-calendar__view`
 - exports: WrEventCalendarChipHarness, WrEventCalendarHarness, WrEventCalendarChipHarnessFilters, WrEventCalendarHarnessFilters
 
 ## ngwr/falling-text
@@ -485,7 +483,7 @@
 
 ## ngwr/image-cropper/testing
 - import: `import { WrImageCropperHarness } from 'ngwr/image-cropper/testing'`
-- exports: WrImageCropperHarness, WrImageCropperHarnessFilters
+- exports: WrImageCropperHarness, WrCropArrow, WrCropWindowBox, WrImageCropperHarnessFilters
 
 ## ngwr/input
 - import: `import { WrInput } from 'ngwr/input'`
@@ -624,7 +622,7 @@
 
 ## ngwr/overlay
 - import: `import { WrOutsideClick } from 'ngwr/overlay'`
-- exports: wrAppendOverlayClose, wrMirrorOffsets, WrOutsideClick, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet
+- exports: wrAppendOverlayClose, wrMirrorOffsets, WrOutsideClick, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet, WrResponsiveOverlaysConfig
 
 ## ngwr/page-header
 - import: `import { WrPageHeader } from 'ngwr/page-header'`
@@ -640,7 +638,6 @@
 
 ## ngwr/pagination/testing
 - import: `import { WrPaginationHarness } from 'ngwr/pagination/testing'`
-- selector: `.wr-pagination__page`, `.wr-pagination__nav > wr-btn:not(.wr-pagination__page)`, `.wr-pagination__size`, `.wr-pagination__page[aria-current="page"]`
 - exports: WrPaginationHarness, WrPaginationHarnessFilters
 
 ## ngwr/pipes
@@ -899,7 +896,7 @@
 ## ngwr/table
 - import: `import { WrTable } from 'ngwr/table'`
 - selector: `[wrTableCell]`, `ng-template[wrTableExpand]`, `wr-table-filter`, `ng-template[wrTableGroupHeader]`, `wr-table-sort`, `wr-table`
-- exports: WrTable, WrTableCell, WrTableExpand, WrTableGroupHeader, WrTableSort, WrTableFilter, WrTableCellContext, WrTableColumn, WrTableColumns, WrTableCsvOptions, WrTableExpandContext, WrTableFilterChange, WrTableFilterItem, WrTableGroupContext, WrTableSortState, WrTableSortDirection, WrTableSummary
+- exports: WrTable, WrTableCell, WrTableExpand, WrTableGroupHeader, WrTableSort, WrTableFilter, WrTableCellContext, WrTableColumn, WrTableColumns, WrTableCsvOptions, WrTableExpandContext, WrTableFilterChange, WrTableFilterItem, WrTableGroupContext, WrTableRow, WrTableSortState, WrTableSortDirection, WrTableSummary
 - Data table with sortable / filterable headers and custom cell templates.
 
 ## ngwr/table/testing
@@ -928,7 +925,7 @@
 
 ## ngwr/theme
 - import: `import { WrTheme } from 'ngwr/theme'`
-- exports: WR_COLORS, WrColor, WrTheme, provideWrTheme, WR_THEME_CONFIG, DEFAULT_WR_THEME_CONFIG, WrResolvedTheme, WrThemeMode, WrThemeConfig
+- exports: WR_COLORS, wrContrastFor, wrIntentTokens, wrThemeTokens, WrColor, WrTheme, provideWrTheme, WR_THEME_CONFIG, DEFAULT_WR_THEME_CONFIG, WrResolvedTheme, WrThemeMode, WrThemeConfig
 - Light / dark theme manager. Writes `[data-theme]` on `<html>`, persists the chosen mode to localStorage. `auto` mode follows `WrPlatform.prefersDark`.
 
 ## ngwr/tilt-card
@@ -949,7 +946,6 @@
 
 ## ngwr/toast
 - import: `import { WrToast } from 'ngwr/toast'`
-- selector: `wr-toast-host`, `wr-toast`
 - exports: WrToast, WrToastRef, provideWrToastConfig, DEFAULT_TOAST_CONFIG, WR_TOAST_CONFIG, WrToastConfig, WrToastMode, WrToastOptions, WrToastPosition, WrToastType
 - Stack of dismissible notifications anchored to a viewport corner. Service-driven; rendered in a single shared CDK overlay.
 
@@ -971,7 +967,6 @@
 
 ## ngwr/tour/testing
 - import: `import { WrTourHarness } from 'ngwr/tour/testing'`
-- selector: `.wr-tour-popup__action--next`, `.wr-tour-popup__action--skip`, `.wr-tour-popup__action--back`
 - exports: WrTourHarness, WrTourHarnessFilters, WrTourProgress
 
 ## ngwr/transfer
@@ -1040,8 +1035,8 @@
 
 ## ngwr/window
 - import: `import { WrWindowManager } from 'ngwr/window'`
-- selector: `wr-window-container`, `wr-window-taskbar`, `wr-window`
-- exports: WR_WINDOW_DATA, WR_WINDOW_REF, WrWindowManager, WrWindowBeforeCloseHook, WrWindowRef, WrWindowTaskbar, WrWindowChromeSize, WrWindowConfig, WrWindowOs, WrWindowPersistMode, WrWindowSize, WrWindowSnap, WrWindowState, WrWindowStorageConfig
+- selector: `wr-window-taskbar`
+- exports: WR_WINDOW_DATA, WR_WINDOW_REF, WrWindowManager, WrWindowBeforeCloseHook, WrWindowRef, WrWindowTaskbar, WrWindowChromeSize, WrWindowConfig, WrWindowLayoutSnapshot, WrWindowOs, WrWindowPersistMode, WrWindowSize, WrWindowSnap, WrWindowState, WrWindowStorageConfig
 - Free-floating OS-style window opened programmatically via `WrWindowManager`. Drag the header to move, drag any edge or corner to resize, minimize to the taskbar. There is no declarative `<wr-window>` component — the manager is the only entry point so the API stays single-track. Need a backdrop + focus trap? That's `WrDialog`, not this.
 
 ## ngwr/window/testing

package/llms.txt

@@ -1,7 +1,7 @@
 # ngwr
 
 > Angular UI library — standalone, signals-first, zoneless, fully tree-shakable.
-> 202 secondary entry points, 181 component and directive classes, built on
+> 202 secondary entry points, 187 component and directive classes, built on
 > `@angular/cdk` primitives. The only runtime dependency is `tslib`. Docs and
 > live demos: https://ngwr.dev — source: https://github.com/thekhegay/ngwr
 
@@ -56,8 +56,8 @@ Add from their entry points as needed:
   `color` key — a bound `[color]="null"` means "no intent", which a default cannot
   express without inventing a sentinel.
 - `provideWrI18n(...)` + `provideWrI18nStaticLoader(...)` — localization.
-- `provideWrDateAdapter(...)` — calendar + date-picker (`ngwr/date-adapter-fns`
-  or `ngwr/date-adapter-luxon`).
+- `provideWrDateAdapter(...)` — calendar + date-picker (`ngwr/date/adapters/fns`
+  or `ngwr/date/adapters/luxon`).
 
 Injected rather than provided: `WrTour` (`ngwr/tour`) runs a guided onboarding
 tour — `tour.start([{ target: '[data-tour="save"]', content: '…' }])` spotlights
@@ -75,6 +75,21 @@ one element at a time; a step whose target is missing is skipped, not floated.
 - `ng g ngwr:page <form|table|dashboard>` — starter page wired with ngwr.
 - `ng update ngwr` — runs upgrade migrations.
 
+## Upgrading to v12
+
+Two breaking changes, and only one is codemoddable.
+
+- **Date entry points nest under `ngwr/date`.** `ngwr/date-adapter` →
+  `ngwr/date`, `ngwr/date-adapter-fns` → `ngwr/date/adapters/fns`,
+  `ngwr/date-adapter-luxon` → `ngwr/date/adapters/luxon`. Import paths only —
+  every symbol keeps its name. `ng update ngwr@12` rewrites them.
+- **`readI18nText()` returns `Signal<string>`.** Add `()` at every read. No
+  codemod: adding the call means knowing which identifiers hold the result, and
+  the type error already names every site. `useI18nText`, the `wrT` pipe and the
+  `[wrT]` directive are unchanged.
+
+Full guide, with diffs: https://ngwr.dev/start/migration
+
 ## Use ngwr — don't hand-roll
 
 The catalog is large: prefer an ngwr component, util, pipe, or validator over raw
@@ -207,9 +222,10 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
   https://ngwr.dev/guides/agent-skill
 - **Registry — an open format for shareable theme presets and blocks.** One
   installable unit per JSON file, hosted anywhere; the contract is
-  https://ngwr.dev/registry/schema.json and two worked examples sit beside it at
-  `/registry/items/`. `cssVars` keys are `--wr-*` tokens, `entryPoints` names
-  `ngwr/*` subpaths, and a `files[].target` is always relative:
+  https://ngwr.dev/registry/schema.json and four worked examples sit beside it
+  at `/registry/items/` — three theme presets and one block. `cssVars` keys are
+  `--wr-*` tokens, `entryPoints` names `ngwr/*` subpaths, and a `files[].target`
+  is always relative:
   https://ngwr.dev/guides/registry
 - All site URLs (for crawlers): https://ngwr.dev/sitemap.xml
 - Source, README, per-component `.d.ts` types: https://github.com/thekhegay/ngwr

package/markdown/styles/_index.scss

@@ -77,7 +77,7 @@
   &__code-inline {
     padding: 0.15em 0.35em;
     border-radius: var(--wr-border-radius-sm);
-    background: rgb(var(--wr-color-light-rgb) / 25%);
+    background: var(--wr-color-fill);
     // `-ink`, not the bare intent: code on a tint is text, and the bare colour
     // fails AA there. The share in `$ink-mix` is calibrated against this tint.
     color: var(--wr-color-dark-ink);
@@ -95,7 +95,7 @@
     padding: 0.75rem;
     overflow-x: auto;
     border-radius: var(--wr-border-radius-base);
-    background: rgb(var(--wr-color-light-rgb) / 25%);
+    background: var(--wr-color-fill);
     tab-size: 2;
   }
 
@@ -257,7 +257,7 @@
   }
 
   &__th {
-    background: rgb(var(--wr-color-light-rgb) / 25%);
+    background: var(--wr-color-fill);
     font-weight: var(--wr-font-weight-semibold);
   }
 

package/mcp/api.js

@@ -7,10 +7,12 @@
 /**
  * Angular's signal wrappers, behind whichever namespace alias ng-packagr used.
  *
- * BOTH aliases, which is not decoration: of the 167 shipped declaration files, 99
- * import Angular as `_angular_core` and 25 as `i0`. Matching only the first hid
- * every binding in those 25 files — including `WrIcon`, whose single required
- * input is the entire component.
+ * BOTH aliases, which is not decoration: ng-packagr writes `_angular_core` for
+ * most of the shipped declarations and `i0` for a couple of dozen of them, and
+ * which file gets which moves with every entry point added — so the rule is here
+ * and the census deliberately is not. Matching the first alias alone hid every
+ * binding in the `i0` files, `WrIcon` among them, whose single required input is
+ * the entire component.
  */
 const SIGNAL_WRAPPER = /^(?:[A-Za-z_$][\w$]*\.)?(InputSignal|InputSignalWithTransform|ModelSignal|OutputEmitterRef)</;
 /** Modifiers that may precede a member name in a `.d.ts`. */

package/mcp/catalog.js

@@ -11,7 +11,7 @@ import { fileURLToPath } from 'node:url';
  * The catalog, read from the files the package already ships.
  *
  * **No second copy of anything, and that is the design constraint this whole
- * server was built under.** `llms-full.txt` (51 KB, 166 entry points) and
+ * server was built under.** `llms-full.txt` (~57 KB, 202 entry points) and
  * `schematics/use/symbol-map.json` (215 symbols) are already in the tarball for
  * other reasons, and the `.d.ts` bundle carries every signature. A server that
  * embedded its own index would be a fourth copy to keep in step with the library,
@@ -19,7 +19,7 @@ import { fileURLToPath } from 'node:url';
  *
  * What it adds on top is the part none of those files have: a way to ASK. An
  * agent that does not already know an entry point's name cannot use a `.d.ts`,
- * and reading 51 KB of catalog to answer "what renders markdown" is the cost this
+ * and reading ~57 KB of catalog to answer "what renders markdown" is the cost this
  * exists to remove.
  */
 class Catalog {
@@ -51,10 +51,15 @@ class Catalog {
     /**
      * Does this entry point ship a stylesheet?
      *
-     * Read from the package's own `exports` map rather than assumed: 58 of the 166
+     * Read from the package's own `exports` map rather than assumed: 94 of the 202
      * entry points ship no `styles/_index.scss` — the testing harnesses, the
      * services, the adapters — and telling a consumer to `@use` one of those breaks
      * their Sass build.
+     *
+     * Count them with `hasStyles()` rather than by tallying `sass` conditions in the
+     * `exports` map: six of those keys are not catalog entry points at all (the root
+     * plus `animations`, `breakpoints`, `grid`, `reset`, `typography-utilities`), so
+     * that arithmetic comes out six short.
      */
     hasStyles(path) {
         this.exports ??= (() => {
@@ -94,6 +99,38 @@ class Catalog {
         const file = join('types', `${path.replace(/\//g, '-')}.d.ts`);
         return this.read(file);
     }
+    /**
+     * Whether `symbol` is something Angular accepts in `imports: []`.
+     *
+     * Read from the SHIPPED declaration file rather than from a table, because the
+     * compiler already wrote the answer there: a component, directive or pipe gets
+     * a `static ɵcmp` / `ɵdir` / `ɵpipe` whose first type argument is the class. A
+     * service gets `ɵprov` instead. So this needs no second copy of anything, and
+     * cannot drift — which matters, because the alternative was a hand-kept list
+     * and `ng g ngwr:use` now REFUSES a non-declarable: recommending the command
+     * for `WrDialog` would hand an agent a line that errors.
+     *
+     * `null` when the types are not there to read, so a caller can tell "not
+     * declarable" from "cannot say".
+     */
+    declarable(symbol, path) {
+        const source = this.types(path);
+        if (!source)
+            return null;
+        // Ask for the declarable markers FIRST and separately. A single alternation
+        // over all five answers with whichever appears earliest in the file, and
+        // `ɵfac` is always emitted above `ɵcmp` — so the combined form calls every
+        // component a non-declarable, while a fixture with no markers at all hides
+        // it. Two passes, no ordering assumption.
+        const declarable = new RegExp(`static ɵ(?:cmp|dir|pipe): [^;]*<${symbol}[,>]`);
+        if (declarable.test(source))
+            return true;
+        // Only claim "no" for a symbol this file actually declares; a `.d.ts` that
+        // merely mentions the name is not evidence, which is the difference between
+        // "not declarable" and "cannot say".
+        const declared = new RegExp(`static ɵ(?:prov|fac): [^;]*<${symbol}[,>]`);
+        return declared.test(source) ? false : null;
+    }
     read(relative) {
         const file = join(this.root, relative);
         return existsSync(file) ? readFileSync(file, 'utf8') : null;

package/mcp/providers.js

@@ -17,12 +17,25 @@ const REQUIRED_PROVIDERS = [
     },
     {
         test: /^WrDatePicker|^WrCalendar|^WrEventCalendar/,
-        provider: "provideWrDateAdapter(wrDateFnsAdapter) // from 'ngwr/date-adapter-fns'",
+        // The one-line wrapper, not `provideWrDateAdapter({ adapter: WrDateFnsAdapter })`:
+        // both compile, but this is one import from one entry point, and it is the form
+        // the docs recommend. It used to read `provideWrDateAdapter(wrDateFnsAdapter)`,
+        // which is wrong three ways at once — `ngwr/date/adapters/fns` exports neither
+        // identifier, and the real `provideWrDateAdapter` takes an options object.
+        provider: "provideWrDateFnsAdapter() // from 'ngwr/date/adapters/fns'",
         why: 'every date mode goes through an adapter; there is no built-in default',
     },
     {
-        test: /^WrT$|^WrI18n/,
-        provider: "provideWrI18n() + provideWrI18nStaticLoader({ en: wrEn }) // from 'ngwr/i18n'",
+        // Spelled out rather than `^WrT(Pipe|Directive)$`: `describeTest` in the
+        // skill generator only names alternatives that are bare symbols, so a group
+        // here would print "symbols matching …" instead of the two names. It used to
+        // read `^WrT$`: `WrT` is a symbol ngwr has never exported, and anchored at
+        // both ends it matched neither `WrTPipe` nor `WrTDirective` — so the one rule
+        // whose `why` names the pipe and the directive fired for neither of them.
+        test: /^WrTPipe$|^WrTDirective$|^WrI18n/,
+        // Two entry points, and the comment has to say so: the catalog `wrEn` is
+        // `ngwr/i18n/en`, not `ngwr/i18n`, which exports neither catalog.
+        provider: "provideWrI18n() + provideWrI18nStaticLoader({ en: wrEn }) // from 'ngwr/i18n' + 'ngwr/i18n/en'",
         why: 'the pipe and directive read from a catalog you provide',
     },
 ];

package/mcp/tools.js

@@ -295,6 +295,13 @@ function setup(catalog, symbols) {
     const missing = found.filter(hit => !hit.entry).map(hit => hit.symbol);
     const resolved = found.filter((hit) => hit.entry !== null);
     const providers = REQUIRED_PROVIDERS.filter(required => resolved.some(hit => required.test.test(hit.symbol)));
+    // `ng g ngwr:use` refuses anything outside `schematics/use/symbol-map.json`
+    // ("ngwr:use: unknown symbol"), and `find()` resolves far more than that — it
+    // matches any name on an entry point's `exports:` line, so every harness class
+    // and every exported type came back as a command that fails. Ask the same map
+    // the schematic asks; the rest get the import line they actually need, since a
+    // type or a harness must never go into a component's `imports: []` anyway.
+    const knows = catalog.symbolMap();
     return [
         '# Setting these up',
         '',
@@ -303,7 +310,20 @@ function setup(catalog, symbols) {
         '(prompts for styles, date adapter, density and theme, and prints a bootstrap snippet)',
         '',
         '## 2. Wire each symbol into the component that uses it',
-        ...resolved.map(hit => `ng g ngwr:use ${hit.symbol} --path src/app/some.component.ts   # ${hit.entry.path}`),
+        ...resolved.map(hit => {
+            // Two questions, and the schematic answers "no" to either one. It has to
+            // KNOW the symbol, and the symbol has to be declarable — `ng g ngwr:use`
+            // refuses a service or a token now rather than splicing it into an
+            // `imports: []` where it would not compile. `declarable()` reads the
+            // shipped `.d.ts`, so this needs no copy of that list.
+            const known = typeof knows[hit.symbol] === 'string';
+            const declarable = catalog.declarable(hit.symbol, hit.entry.path);
+            if (known && declarable !== false) {
+                return `ng g ngwr:use ${hit.symbol} --path src/app/some.component.ts   # ${hit.entry.path}`;
+            }
+            const why = known ? 'not a declarable — inject or call it' : 'ng g ngwr:use does not know this symbol';
+            return `import { ${hit.symbol} } from '${hit.entry.path}';   // by hand — ${why}`;
+        }),
         '',
         '`--path` is a NAMED option, not positional — passing it bare fails with `Unknown argument`.',
         '',

package/meter-group/styles/_index.scss

@@ -13,7 +13,7 @@
     height: 0.625rem;
     border-radius: var(--wr-border-radius-pill);
     overflow: hidden;
-    background: rgba(var(--wr-color-outline-rgb), 0.5);
+    background: var(--wr-color-fill-strong);
   }
 
   &__slice {

package/overlay/styles/_index.scss

@@ -23,11 +23,43 @@
   padding-bottom: env(safe-area-inset-bottom);
   // Lift the bottom-pinned sheet clear of the keyboard. margin (not transform)
   // so it doesn't fight the slide-up animation; transitions smoothly.
-  margin-bottom: var(--wr-keyboard-inset, 0px);
+  // `!important` here for a different reason than the rest of this block: all
+  // four sheet users (dialog, select, dropdown, popover) pin the pane with a
+  // `GlobalPositionStrategy…bottom('0')`, and `apply()` writes that offset out
+  // as an INLINE `margin-bottom: 0px` on this very element, on every
+  // `updatePosition`. Without it the lift can never compute to anything but 0.
+  margin-bottom: var(--wr-keyboard-inset, 0px) !important;
   transition: margin-bottom var(--wr-overlay-duration, 0.2s) var(--wr-overlay-ease, ease-out);
   animation: wr-overlay-sheet-up var(--wr-overlay-duration, 0.2s) var(--wr-overlay-ease, ease-out) !important;
 }
 
+// The pane above is the sheet, but only the dialog PAINTS it — there the pane
+// IS the panel. For select, dropdown and popover the pane is a transparent
+// wrapper and the visible surface is its child, so everything above lands on a
+// box nobody can see: the child keeps its own content width and its own
+// all-round radius. `.cdk-overlay-pane` is a row flexbox, so an unsized child
+// shrinks to fit its content and sits against the inline-start edge — dropdown
+// rendered a 160px card in a 375px sheet, popover a 288px one, while
+// `.wr-select-panel` filled it only because select declares `width: 100%` for
+// itself. Stretching every sheet child here is what makes that a property of
+// the sheet rather than a per-component opt-in the next one forgets.
+//
+// The two bottom corners go with it: a sheet is docked flush against the
+// bottom of the screen, so a rounded corner there is a wedge of backdrop
+// sitting on the screen edge. The pane's own `0 0` above says the same thing
+// for the dialog.
+//
+// `.wr-dialog__close` is the one direct child that is NOT a sheet surface —
+// the dialog service parks it absolutely in the panel's corner, at its own
+// 24px box and its own radius. `dialog/styles/_index.scss` excludes it from
+// its sibling rule for the same reason.
+.wr-overlay-sheet > *:not(.wr-dialog__close) {
+  width: 100% !important;
+  max-width: 100% !important;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
 // Dim + blur behind a sheet — for overlays that otherwise have no backdrop.
 .wr-overlay-backdrop {
   background: var(--wr-color-overlay);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "11.2.0",
+  "version": "12.0.0",
   "bin": {
     "ngwr-mcp": "./mcp/server.js"
   },
@@ -43,13 +43,18 @@
     "@angular/cdk": ">=22.0.0",
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
+    "@angular/forms": ">=22.0.0",
     "@angular/platform-browser": ">=22.0.0",
+    "@angular/router": ">=22.0.0",
     "rxjs": "^7.0.0",
     "date-fns": "^3.0.0 || ^4.0.0",
     "luxon": "^3.0.0",
     "lucide": ">=1.0.0"
   },
   "peerDependenciesMeta": {
+    "@angular/router": {
+      "optional": true
+    },
     "date-fns": {
       "optional": true
     },
@@ -712,22 +717,22 @@
       "types": "./types/ngwr-cookie.d.ts",
       "default": "./fesm2022/ngwr-cookie.mjs"
     },
-    "./date-adapter": {
-      "types": "./types/ngwr-date-adapter.d.ts",
-      "default": "./fesm2022/ngwr-date-adapter.mjs"
-    },
-    "./date-adapter-fns": {
-      "types": "./types/ngwr-date-adapter-fns.d.ts",
-      "default": "./fesm2022/ngwr-date-adapter-fns.mjs"
-    },
-    "./date-adapter-luxon": {
-      "types": "./types/ngwr-date-adapter-luxon.d.ts",
-      "default": "./fesm2022/ngwr-date-adapter-luxon.mjs"
+    "./date": {
+      "types": "./types/ngwr-date.d.ts",
+      "default": "./fesm2022/ngwr-date.mjs"
     },
     "./date-picker/testing": {
       "types": "./types/ngwr-date-picker-testing.d.ts",
       "default": "./fesm2022/ngwr-date-picker-testing.mjs"
     },
+    "./date/adapters/fns": {
+      "types": "./types/ngwr-date-adapters-fns.d.ts",
+      "default": "./fesm2022/ngwr-date-adapters-fns.mjs"
+    },
+    "./date/adapters/luxon": {
+      "types": "./types/ngwr-date-adapters-luxon.d.ts",
+      "default": "./fesm2022/ngwr-date-adapters-luxon.mjs"
+    },
     "./decrypt-text/testing": {
       "types": "./types/ngwr-decrypt-text-testing.d.ts",
       "default": "./fesm2022/ngwr-decrypt-text-testing.mjs"

package/pagination/styles/_index.scss

@@ -9,7 +9,7 @@
   padding-block: 0.5rem;
 
   &--disabled {
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
     pointer-events: none;
   }
 
@@ -48,6 +48,17 @@
     display: flex;
     align-items: center;
     gap: 0.25rem;
+    // `__inner` wraps, but the whole numbered strip is ONE of its children, so
+    // that wrap could never help: at `size="lg"` the strip is 9 cells of 2.5rem
+    // plus gaps = 392px, which at 375px left the last page number cut off at the
+    // screen edge and the next-page arrow off it entirely. Wrap the cells
+    // themselves. A pager scrolls badly — page 12 is the one you cannot reach —
+    // and a second row costs nothing when the first one fits.
+    flex-wrap: wrap;
+    // A wrapped row has to follow the pager's own alignment: `__inner` carries
+    // it, and a centred or end-aligned pager whose second row packed to the
+    // start would read as a different control.
+    justify-content: inherit;
 
     .wr-btn {
       min-width: var(--wr-pagination-cell, 2rem);
@@ -62,6 +73,17 @@
     }
   }
 
+  // `__nav` is a plain flex row, so it already mirrors: under `dir="rtl"` the
+  // previous button lays out at the right edge. Its chevron is drawn pointing
+  // physically left, though, so it ends up aiming at the pages it moves AWAY
+  // from. Turn the glyphs around with the strip, the same way the carousel's
+  // arrows do — "previous" is the inline start in both directions.
+  &__nav-btn {
+    [dir='rtl'] & svg {
+      transform: scaleX(-1);
+    }
+  }
+
   &__ellipsis {
     display: inline-flex;
     min-width: var(--wr-pagination-cell, 2rem);

package/popover/styles/_index.scss

@@ -77,10 +77,12 @@ $_arrow-placement: (
 /// `originX: start | end` — plain `top` / `bottom` use `center`, which mirrors
 /// to itself — and CDK resolves start / end against `Directionality`. So under
 /// `dir="rtl"` the panel lands on the mirrored side of the trigger while the
-/// modifier class keeps its requested name (it is set from the `position` input,
-/// and there are no fallback positions to change it), and the arrow has to
-/// travel with the panel. Same for the `-start` / `-end` alignment along a
-/// horizontal edge.
+/// modifier class keeps its LTR name, and the arrow has to travel with the
+/// panel. Same for the `-start` / `-end` alignment along a horizontal edge.
+///
+/// The class names the placement the panel ACTUALLY took, not the requested one:
+/// each entry in `WR_POPOVER_FALLBACKS` carries its own `panelClass`, so a flip
+/// swaps the modifier and this loop moves the arrow with it.
 @mixin _arrow-at($edge, $align, $pull) {
   @if $edge == left {
     inset-inline-start: -$pull;
@@ -197,9 +199,12 @@ $_arrow-placement: (
 // `<… [wrPopover]="'text'" mode="tooltip">` instead.)
 //
 
-.wr-tooltip-overlay {
-  pointer-events: none;
-}
+// The pane is deliberately NOT `pointer-events: none`. WCAG 1.4.13 asks that a
+// tooltip stay up while the pointer is moved onto it — someone reading a long
+// hint at 400% zoom has to be able to reach the text — and an inert pane makes
+// the `mouseenter` that keeps it open impossible to fire. It does mean the chip
+// now intercepts what is under it, which is the area it draws on and no more;
+// the one part of that worth avoiding is the arrow, opted back out below.
 
 .wr-tooltip {
   // Follows the theme instead of inverting against it: on a dark canvas the
@@ -238,6 +243,10 @@ $_arrow-placement: (
     height: $_arrow;
     background: var(--wr-tooltip-bg);
     transform: rotate(45deg);
+    // The one piece that stays inert: the arrow points AT the trigger and
+    // overlaps it, so a hittable arrow would eat clicks meant for the control
+    // the tooltip describes.
+    pointer-events: none;
   }
 }
 

package/progress/styles/_index.scss

@@ -8,7 +8,7 @@
   // Defaults — color modifiers override the bar color.
   --wr-progress-height: 0.5rem;
   --wr-progress-radius: var(--wr-border-radius-pill);
-  --wr-progress-track: rgba(var(--wr-color-outline-rgb), 0.35);
+  --wr-progress-track: var(--wr-color-fill);
   --wr-progress-bar: var(--wr-color-primary);
 
   // `flex: 1 1 100%` here would claim 100% basis on the flex MAIN axis —

package/radio/styles/_index.scss

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

package/rating/styles/_index.scss

@@ -75,7 +75,7 @@
   }
 
   &--disabled {
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
 
     .wr-rating__slot {
       cursor: not-allowed;

package/schematics/collection.json

@@ -18,7 +18,7 @@
       "schema": "./use/schema.json"
     },
     "provider": {
-      "description": "Add a `provideWr*()` call to your bootstrap providers (overlay / icons / toast / i18n / date-adapter / density / loading-bar / cookie / storage / theme).",
+      "description": "Add a `provideWr*()` call to your bootstrap providers (overlay / icons / toast / i18n / date-adapter / density / storage / theme).",
       "factory": "./provider/index#default",
       "schema": "./provider/schema.json"
     },