ngwr 11.2.0 → 12.1.0

package/schematics/use/rule.js

@@ -0,0 +1,206 @@
+"use strict";
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NON_DECLARABLE = void 0;
+exports.useRule = useRule;
+const schematics_1 = require("@angular-devkit/schematics");
+/**
+ * The public symbols that are NOT an Angular declarable, and what each one is.
+ *
+ * `@Component({ imports })` takes components, directives, pipes and NgModules;
+ * anything else is rejected outright — "Component imports must be standalone
+ * components, directives, pipes, or must be NgModules." The symbol map this
+ * schematic resolves a name through carries subpaths only, because the import
+ * LINE is the same whatever the symbol is; the `imports` array it also edits is
+ * not. So `ng g ngwr:use WrDialog` used to report `✓ Added WrDialog (from
+ * ngwr/dialog)` and leave behind a component that no longer builds.
+ *
+ * Each noun is read off the declaration in the library source — `@Service` /
+ * `@Injectable` is a service, the rest are what they are written as. This table
+ * has to ship (a consumer's machine has no library source to read), and
+ * `rule.spec.ts` derives the same one from every `public-api.ts` in the lib and
+ * fails when the two disagree — which is what keeps a newly added service from
+ * quietly becoming spliceable again.
+ */
+const NON_DECLARABLE = {
+    WrClipboard: 'a service',
+    WrConfetti: 'a service',
+    WrCookie: 'a service',
+    WrDateAdapter: 'an abstract class',
+    WrDateFnsAdapter: 'a service',
+    WrDensity: 'a service',
+    WrDialog: 'a service',
+    WrDialogRef: 'a class',
+    WrDrawerManager: 'a service',
+    WrDrawerRef: 'a class',
+    WrHaptics: 'a service',
+    WrHotkey: 'a service',
+    WrI18n: 'a service',
+    WrI18nHttpLoader: 'a class',
+    WrI18nStaticLoader: 'a class',
+    WrLoadingBar: 'a service',
+    WrLuxonAdapter: 'a service',
+    WrMarkdownHighlight: 'a service',
+    WrMedia: 'a service',
+    WrMeta: 'a service',
+    WrNativeDateAdapter: 'a service',
+    WrOutsideClick: 'a service',
+    WrOverlayContainer: 'a service',
+    WrPlatform: 'a service',
+    WrScroll: 'a service',
+    WrStorage: 'a service',
+    WrTheme: 'a service',
+    WrToast: 'a service',
+    WrToastRef: 'a class',
+    WrTour: 'a service',
+    WrValidators: 'a constant',
+    WrVisualViewport: 'a service',
+    WrWindowManager: 'a service',
+    WrWindowRef: 'a class',
+};
+exports.NON_DECLARABLE = NON_DECLARABLE;
+/**
+ * Add `import { WrFoo } from 'ngwr/<subpath>';` to the given component
+ * file and splice `WrFoo` into the `@Component({ imports: [...] })`
+ * array. Saves the subpath-lookup dance for newcomers — `ng g ngwr:use
+ * WrButton --path src/app/my-page.ts`.
+ *
+ * Only `symbol` is positional (see schema.json); `path` is a named option, so
+ * the bare `ng g ngwr:use WrButton src/app/my-page.ts` form fails with
+ * `Unknown argument`.
+ *
+ * Regex-based on purpose to avoid pulling in the TS compiler as a runtime
+ * dep. Covers the common standalone-component shape; an unusual file
+ * shape gets a clear warning + a copy-pasteable snippet.
+ *
+ * `symbolMap` is an argument rather than a module-level `require` so that this
+ * file can be loaded from source — see the note in `./index`.
+ */
+function useRule(options, symbolMap) {
+    return (tree, context) => {
+        const symbol = options.symbol.trim();
+        if (!symbol)
+            throw new schematics_1.SchematicsException('ngwr:use: missing required `symbol`.');
+        const subpath = symbolMap[symbol];
+        if (!subpath) {
+            throw new schematics_1.SchematicsException(`ngwr:use: unknown symbol "${symbol}". Check the catalog at https://ngwr.dev or use the literal import: \`import { ${symbol} } from 'ngwr/<subpath>';\``);
+        }
+        const kind = NON_DECLARABLE[symbol];
+        if (kind) {
+            throw new schematics_1.SchematicsException(`ngwr:use: ${symbol} is ${kind}, not a component, directive or pipe — Angular rejects it in \`@Component({ imports })\`. Import it and use it directly: \`import { ${symbol} } from '${subpath}';\``);
+        }
+        const filePath = resolveTargetFile(tree, options.path);
+        if (!filePath) {
+            // No file passed: just print the import snippet and stop.
+            context.logger.info(printManualSnippet(symbol, subpath));
+            return tree;
+        }
+        if (!tree.exists(filePath)) {
+            throw new schematics_1.SchematicsException(`ngwr:use: file ${filePath} not found.`);
+        }
+        const original = tree.readText(filePath);
+        let next = original;
+        next = addImport(next, symbol, subpath);
+        next = addToImportsArray(next, symbol);
+        if (next === original) {
+            context.logger.info(`ngwr:use: ${filePath} already has ${symbol} — no changes.`);
+            return tree;
+        }
+        tree.overwrite(filePath, next);
+        context.logger.info(`✓ Added ${symbol} (from ${subpath}) to ${filePath}.`);
+        return tree;
+    };
+}
+function resolveTargetFile(tree, candidate) {
+    if (!candidate)
+        return null;
+    const path = candidate.startsWith('/') ? candidate : `/${candidate}`;
+    if (tree.exists(path))
+        return path;
+    if (tree.exists(candidate))
+        return candidate;
+    return null;
+}
+/**
+ * Insert `import { Symbol } from 'subpath';` near the existing imports,
+ * or merge into an existing line that already references the same path.
+ * Idempotent — returns the source untouched if the symbol is already in.
+ */
+function addImport(source, symbol, subpath) {
+    // Already imported from somewhere?
+    const importedAnywhere = new RegExp(`\\bimport\\s*\\{[^}]*\\b${symbol}\\b[^}]*\\}\\s*from`).test(source);
+    if (importedAnywhere)
+        return source;
+    // Existing import from the same subpath? — splice the symbol in.
+    const sameSubpathRe = new RegExp(`(import\\s*\\{)([^}]*)(\\}\\s*from\\s*['"]${escapeRegExp(subpath)}['"])`, 'm');
+    const sameSubpathMatch = sameSubpathRe.exec(source);
+    if (sameSubpathMatch) {
+        const head = sameSubpathMatch[1];
+        const body = sameSubpathMatch[2].trim().replace(/,\s*$/, '');
+        const tail = sameSubpathMatch[3];
+        const merged = body ? `${head} ${body}, ${symbol} ${tail}` : `${head} ${symbol} ${tail}`;
+        return source.replace(sameSubpathMatch[0], merged);
+    }
+    // No related import — prepend a new line after the last top-of-file
+    // import we can find.
+    const importBlockRe = /(^|\n)(import\s[^;]+;\s*\n)+/m;
+    const block = importBlockRe.exec(source);
+    const newLine = `import { ${symbol} } from '${subpath}';\n`;
+    if (block) {
+        // Splice in immediately after the last import in the block.
+        const end = (block.index ?? 0) + block[0].length;
+        return `${source.slice(0, end)}${newLine}${source.slice(end)}`;
+    }
+    // No existing imports — just prepend.
+    return `${newLine}${source}`;
+}
+/**
+ * Find `imports: [...]` inside a `@Component({...})` decorator (single or
+ * multi-line) and splice the symbol in. Skips if the symbol is already
+ * listed.
+ */
+function addToImportsArray(source, symbol) {
+    // Match `imports: [ ... ]` allowing multi-line + trailing commas.
+    const arrayRe = /(\bimports\s*:\s*\[)([\s\S]*?)(\])/m;
+    const match = arrayRe.exec(source);
+    if (!match) {
+        // No imports array — try to insert one after the `@Component({`
+        // opening brace. Heuristic, not foolproof.
+        const componentRe = /@Component\s*\(\s*\{/;
+        const compMatch = componentRe.exec(source);
+        if (compMatch?.index === undefined) {
+            // No @Component decorator at all — leave the file alone, the user
+            // probably wants the import only.
+            return source;
+        }
+        const insertAt = compMatch.index + compMatch[0].length;
+        return `${source.slice(0, insertAt)}\n  imports: [${symbol}],${source.slice(insertAt)}`;
+    }
+    const body = match[2];
+    if (new RegExp(`\\b${escapeRegExp(symbol)}\\b`).test(body))
+        return source;
+    const trimmed = body.replace(/\s+$/, '');
+    const sep = trimmed.length && !trimmed.endsWith(',') ? ', ' : trimmed.length ? ' ' : '';
+    const replaced = `${match[1]}${trimmed}${sep}${symbol}${match[3]}`;
+    return source.replace(match[0], replaced);
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function printManualSnippet(symbol, subpath) {
+    return `
+ngwr:use — copy this into your component:
+
+  import { ${symbol} } from '${subpath}';
+
+  @Component({
+    imports: [/* …, */ ${symbol}],
+    /* … */
+  })
+`;
+}

package/schematics/use/symbol-map.json

@@ -44,12 +44,12 @@
   "WrCookie": "ngwr/cookie",
   "WrCounter": "ngwr/counter",
   "WrCountUp": "ngwr/counter",
-  "WrDateAdapter": "ngwr/date-adapter",
-  "WrNativeDateAdapter": "ngwr/date-adapter",
-  "WrDateFnsAdapter": "ngwr/date-adapter-fns",
-  "WrLuxonAdapter": "ngwr/date-adapter-luxon",
+  "WrDateAdapter": "ngwr/date",
+  "WrNativeDateAdapter": "ngwr/date",
   "WrDatePicker": "ngwr/date-picker",
   "WrDateRangePicker": "ngwr/date-picker",
+  "WrDateFnsAdapter": "ngwr/date/adapters/fns",
+  "WrLuxonAdapter": "ngwr/date/adapters/luxon",
   "WrDecryptText": "ngwr/decrypt-text",
   "WrDensity": "ngwr/density",
   "WrDensityDirective": "ngwr/density",

package/segmented/styles/_index.scss

@@ -1,7 +1,7 @@
 @use '../../theme/styles' as theme;
 
 .wr-segmented {
-  --wr-segmented-bg: rgba(var(--wr-color-outline-rgb), 0.4);
+  --wr-segmented-bg: var(--wr-color-fill);
   --wr-segmented-color: var(--wr-color-on-surface);
   --wr-segmented-selected-bg: var(--wr-color-surface);
   --wr-segmented-selected-color: var(--wr-color-on-surface);
@@ -87,6 +87,17 @@
     border: 0;
     // Height = line-height + 2×option-py + 2×track-padding (md → 30px); all scale per size.
     padding: var(--wr-segmented-option-py) 0.75rem;
+    // The track divides into `1fr` columns, so an option's width has nothing to
+    // do with its own text: on a crowded track the label outgrows the option and
+    // paints across the inline padding — which is FINE, the padding is a gutter
+    // for a label that fits rather than a wall for one that doesn't, and giving
+    // the text that room is the only reason six labels still read at 375px. What
+    // is not fine is what happened past that: at 320px "Bottom" ran 4.2px beyond
+    // its own option and overlapped the next segment's word by 8.4px, two labels
+    // printed on top of each other. Clip at the option instead. Note the clip
+    // box is the PADDING box, so the gutter stays available; and an `outline`
+    // is not clipped by its own element, so the focus ring is untouched.
+    overflow: hidden;
     @include theme.smooth-br(var(--wr-segmented-thumb-radius));
     color: var(--wr-segmented-color);
     font: inherit;
@@ -107,7 +118,7 @@
 
     &:disabled {
       cursor: not-allowed;
-      opacity: 0.5;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
@@ -121,6 +132,6 @@
 
   &--disabled {
     pointer-events: none;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
   }
 }

package/select/styles/_index.scss

@@ -41,7 +41,7 @@
 
   &--disabled {
     --wr-select-color: var(--wr-color-on-surface-muted);
-    --wr-select-bg: rgba(var(--wr-color-outline-rgb), 0.35);
+    --wr-select-bg: var(--wr-color-fill);
   }
 
   &__trigger {
@@ -184,6 +184,18 @@
       color: var(--wr-color-text-muted);
     }
 
+    // At `maxItems` the input goes READONLY rather than disabled — it is the
+    // only tab stop in the control, and Backspace here is the way back under the
+    // cap. Nothing painted that, so the field kept the I-beam it inherits from
+    // the trigger and went on inviting text it would refuse. The cursor is the
+    // whole cue on purpose: the field still takes focus and still answers
+    // Backspace, so `not-allowed` would say something false about a control that
+    // is working. Listed before `:disabled`, which matches a readonly-OR-disabled
+    // input too and has to win the tie on source order.
+    &:read-only {
+      cursor: default;
+    }
+
     &:disabled {
       cursor: not-allowed;
     }
@@ -360,7 +372,7 @@
   &--disabled {
     color: var(--wr-color-on-surface-muted);
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
 
     &:hover {
       background: transparent;

package/sidebar/styles/_index.scss

@@ -63,7 +63,7 @@
     &--disabled {
       color: var(--wr-color-on-surface-muted);
       pointer-events: none;
-      opacity: 0.6;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
@@ -88,7 +88,7 @@
       transition: background var(--wr-transition-base);
 
       &:hover {
-        background: rgba(var(--wr-color-outline-rgb), 0.5);
+        background: var(--wr-color-fill-strong);
 
         .wr-sidebar__icon {
           color: var(--wr-color-primary);
@@ -128,15 +128,17 @@
 
   &__group--collapsed &__chevron {
     // Disclosure affordance, and it IS reading-order: the collapsed chevron
-    // should point at the trailing edge. `rotate` has no logical form, so under
-    // RTL the chevron-down still swings to point right — into the sidebar's
-    // content rather than away from it. Flipping it needs a `[dir]` rule (or a
-    // direction-aware sign from sidebar.ts), which is beyond a property-level
-    // rewrite; same call as the segmented thumb and the button seam.
-    // rtl-ok: transform rotation has no logical equivalent — see above
+    // should point at the trailing edge — physically right in LTR, physically
+    // left under RTL, where the group header's own label sits to its right.
+    // `rotate` has no logical form, so the RTL sign is set by the rule below.
+    // rtl-ok: transform rotation has no logical equivalent — the RTL sign is the rule below
     transform: rotate(-90deg);
   }
 
+  [dir='rtl'] &__group--collapsed &__chevron {
+    transform: rotate(90deg);
+  }
+
   // Child items (inside an expanded group)
   &__list {
     list-style: none;
@@ -215,7 +217,7 @@
     &--disabled {
       color: var(--wr-color-on-surface-muted);
       pointer-events: none;
-      opacity: 0.6;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
@@ -223,7 +225,7 @@
     flex: 0 0 auto;
     padding: 0.0625rem 0.375rem;
     border-radius: var(--wr-border-radius-pill);
-    background: rgba(var(--wr-color-outline-rgb), 0.6);
+    background: var(--wr-color-fill-strong);
     color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);
     font-weight: var(--wr-font-weight-semibold);

package/skills/ngwr/SKILL.md

@@ -5,7 +5,7 @@ description: Build Angular UIs with the ngwr component library (standalone, sign
 
 # ngwr
 
-An Angular 22 UI library: 202 tree-shakable entry points, 115 of them shipping a selector.
+An Angular 22 UI library: 202 tree-shakable entry points, 110 of them shipping a selector.
 Standalone, signals-first, zoneless, `ViewEncapsulation.None`. One runtime
 dependency (`tslib`).
 
@@ -74,7 +74,9 @@ ng g ngwr:provider overlay                           # splices a provider into b
 ```
 
 `--path` is a NAMED option on `ngwr:use`; only the symbol is positional, and
-passing the path bare fails with `Unknown argument`.
+passing the path bare fails with `Unknown argument`. It takes declarables only:
+a service such as `WrDialog` is refused, since the import line would compile and
+the `imports` entry would not — `inject()` it instead.
 
 ### Providers a component cannot work without
 
@@ -87,12 +89,12 @@ cause.
 - `provideWrIcons(lucideIcons({ … })) // from 'ngwr/icon' + 'ngwr/icon/adapters/lucide'`
   — icons resolve by name from a registry you populate
   — needed by: `WrIcon`
-- `provideWrDateAdapter(wrDateFnsAdapter) // from 'ngwr/date-adapter-fns'`
+- `provideWrDateFnsAdapter() // from 'ngwr/date/adapters/fns'`
   — every date mode goes through an adapter; there is no built-in default
   — needed by: `WrDatePicker`, `WrCalendar`, `WrEventCalendar`
-- `provideWrI18n() + provideWrI18nStaticLoader({ en: wrEn }) // from 'ngwr/i18n'`
+- `provideWrI18n() + provideWrI18nStaticLoader({ en: wrEn }) // from 'ngwr/i18n' + 'ngwr/i18n/en'`
   — the pipe and directive read from a catalog you provide
-  — needed by: `WrT`, `WrI18n`
+  — needed by: `WrTPipe`, `WrTDirective`, `WrI18n`
 
 ## Testing
 

package/skills/ngwr/references/catalog.md

@@ -42,7 +42,7 @@ root barrel for components.
 | `ngwr/collapse` | `import { WrCollapse } from 'ngwr/collapse'` | `wr-accordion` `wr-collapse-group` `wr-collapse` |
 | `ngwr/collapse/testing` | `import { WrCollapseGroupHarness } from 'ngwr/collapse/testing'` | — |
 | `ngwr/color-picker` | `import { WrColorPicker } from 'ngwr/color-picker'` | `[wrColorPickerTrigger]` `wr-color-picker` |
-| `ngwr/color-picker/testing` | `import { WrColorPickerHarness } from 'ngwr/color-picker/testing'` | `.wr-color-picker__tabs` |
+| `ngwr/color-picker/testing` | `import { WrColorPickerHarness } from 'ngwr/color-picker/testing'` | — |
 | `ngwr/command-palette` | `import { WrCommandPalette } from 'ngwr/command-palette'` | `wr-command-palette` |
 | `ngwr/command-palette/testing` | `import { WrCommandPaletteGroupHarness } from 'ngwr/command-palette/testing'` | — |
 | `ngwr/compare` | `import { WrCompare } from 'ngwr/compare'` | `wr-compare` |
@@ -52,11 +52,11 @@ root barrel for components.
 | `ngwr/context-menu/testing` | `import { WrContextMenuHarness } from 'ngwr/context-menu/testing'` | — |
 | `ngwr/cookie` | `import { WrCookie } from 'ngwr/cookie'` | — |
 | `ngwr/counter` | `import { WrCounter } from 'ngwr/counter'` | `wr-count-up` `wr-counter` |
-| `ngwr/date-adapter` | `import { WrDateAdapter } from 'ngwr/date-adapter'` | — |
-| `ngwr/date-adapter-fns` | `import { WrDateFnsAdapter } from 'ngwr/date-adapter-fns'` | — |
-| `ngwr/date-adapter-luxon` | `import { WrLuxonAdapter } from 'ngwr/date-adapter-luxon'` | — |
+| `ngwr/date` | `import { WrDateAdapter } from 'ngwr/date'` | — |
 | `ngwr/date-picker` | `import { WrDatePicker } from 'ngwr/date-picker'` | `wr-date-picker` `wr-date-range-picker` |
 | `ngwr/date-picker/testing` | `import { WrDatePickerDayHarness } from 'ngwr/date-picker/testing'` | — |
+| `ngwr/date/adapters/fns` | `import { WrDateFnsAdapter } from 'ngwr/date/adapters/fns'` | — |
+| `ngwr/date/adapters/luxon` | `import { WrLuxonAdapter } from 'ngwr/date/adapters/luxon'` | — |
 | `ngwr/decrypt-text` | `import { WrDecryptText } from 'ngwr/decrypt-text'` | `wr-decrypt-text` |
 | `ngwr/decrypt-text/testing` | `import { WrDecryptTextHarness } from 'ngwr/decrypt-text/testing'` | — |
 | `ngwr/density` | `import { WrDensity } from 'ngwr/density'` | `[wrDensity]` |
@@ -74,7 +74,7 @@ root barrel for components.
 | `ngwr/dropdown/testing` | `import { WrDropdownHarness } from 'ngwr/dropdown/testing'` | — |
 | `ngwr/empty` | `import { WrEmpty } from 'ngwr/empty'` | `wr-empty` |
 | `ngwr/event-calendar` | `import { WrEventCalendar } from 'ngwr/event-calendar'` | `ng-template[wrCalendarEvent]` `wr-event-calendar` |
-| `ngwr/event-calendar/testing` | `import { WrEventCalendarChipHarness } from 'ngwr/event-calendar/testing'` | `.wr-event-calendar__view` |
+| `ngwr/event-calendar/testing` | `import { WrEventCalendarChipHarness } from 'ngwr/event-calendar/testing'` | — |
 | `ngwr/falling-text` | `import { WrFallingText } from 'ngwr/falling-text'` | `wr-falling-text` |
 | `ngwr/falling-text/testing` | `import { WrFallingTextHarness } from 'ngwr/falling-text/testing'` | — |
 | `ngwr/file-upload` | `import { WrFileUpload } from 'ngwr/file-upload'` | `wr-file-upload` |
@@ -127,7 +127,7 @@ root barrel for components.
 | `ngwr/overlay` | `import { WrOutsideClick } from 'ngwr/overlay'` | — |
 | `ngwr/page-header` | `import { WrPageHeader } from 'ngwr/page-header'` | `wr-page-header` |
 | `ngwr/pagination` | `import { WrPagination } from 'ngwr/pagination'` | `wr-pagination` |
-| `ngwr/pagination/testing` | `import { WrPaginationHarness } from 'ngwr/pagination/testing'` | `.wr-pagination__page` `.wr-pagination__nav > wr-btn:not(.wr-pagination__page)` `.wr-pagination__size` `.wr-pagination__page[aria-current="page"]` |
+| `ngwr/pagination/testing` | `import { WrPaginationHarness } from 'ngwr/pagination/testing'` | — |
 | `ngwr/pipes` | `import { WrBytes } from 'ngwr/pipes'` | — |
 | `ngwr/platform` | `import { WrPlatform } from 'ngwr/platform'` | — |
 | `ngwr/popconfirm` | `import { WrPopconfirm } from 'ngwr/popconfirm'` | `wr-popconfirm` `[wrPopconfirm]` |
@@ -187,11 +187,11 @@ root barrel for components.
 | `ngwr/tilt-card` | `import { WrTiltCard } from 'ngwr/tilt-card'` | `wr-tilt-card` `[wrTilt]` |
 | `ngwr/tilt-card/testing` | `import { WrTiltHarness } from 'ngwr/tilt-card/testing'` | — |
 | `ngwr/timeline` | `import { WrTimeline } from 'ngwr/timeline'` | `wr-timeline-item` `wr-timeline` |
-| `ngwr/toast` | `import { WrToast } from 'ngwr/toast'` | `wr-toast-host` `wr-toast` |
+| `ngwr/toast` | `import { WrToast } from 'ngwr/toast'` | — |
 | `ngwr/toast/testing` | `import { WrToastHarness } from 'ngwr/toast/testing'` | — |
 | `ngwr/toolbar` | `import { WrToolbar } from 'ngwr/toolbar'` | `wr-toolbar` |
 | `ngwr/tour` | `import { WrTour } from 'ngwr/tour'` | `wr-tour-popup` |
-| `ngwr/tour/testing` | `import { WrTourHarness } from 'ngwr/tour/testing'` | `.wr-tour-popup__action--next` `.wr-tour-popup__action--skip` `.wr-tour-popup__action--back` |
+| `ngwr/tour/testing` | `import { WrTourHarness } from 'ngwr/tour/testing'` | — |
 | `ngwr/transfer` | `import { WrTransfer } from 'ngwr/transfer'` | `wr-transfer` |
 | `ngwr/transfer/testing` | `import { WrTransferHarness } from 'ngwr/transfer/testing'` | — |
 | `ngwr/tree` | `import { WrTree } from 'ngwr/tree'` | `wr-tree` |
@@ -205,7 +205,7 @@ root barrel for components.
 | `ngwr/virtual-scroll` | `import { WrVirtualScroll } from 'ngwr/virtual-scroll'` | `wr-virtual-scroll` |
 | `ngwr/waves` | `import { WrWaves } from 'ngwr/waves'` | `wr-waves` |
 | `ngwr/waves/testing` | `import { WrWavesHarness } from 'ngwr/waves/testing'` | — |
-| `ngwr/window` | `import { WrWindowManager } from 'ngwr/window'` | `wr-window-container` `wr-window-taskbar` `wr-window` |
+| `ngwr/window` | `import { WrWindowManager } from 'ngwr/window'` | `wr-window-taskbar` |
 | `ngwr/window/testing` | `import { WrWindowHarness } from 'ngwr/window/testing'` | — |
 
 Descriptions and every public export per entry point:

package/skills/ngwr/references/setup.md

@@ -52,20 +52,25 @@ Overlays render into an ngwr-owned container; without it they never appear. Need
 
 Icons resolve by name from a registry you populate. Needed by `WrIcon`.
 
-### `provideWrDateAdapter(wrDateFnsAdapter) // from 'ngwr/date-adapter-fns'`
+### `provideWrDateFnsAdapter() // from 'ngwr/date/adapters/fns'`
 
 Every date mode goes through an adapter; there is no built-in default. Needed by `WrDatePicker`, `WrCalendar`, `WrEventCalendar`.
 
-### `provideWrI18n() + provideWrI18nStaticLoader({ en: wrEn }) // from 'ngwr/i18n'`
+### `provideWrI18n() + provideWrI18nStaticLoader({ en: wrEn }) // from 'ngwr/i18n' + 'ngwr/i18n/en'`
 
-The pipe and directive read from a catalog you provide. Needed by `WrT`, `WrI18n`.
+The pipe and directive read from a catalog you provide. Needed by `WrTPipe`, `WrTDirective`, `WrI18n`.
 
 ## Optional, app-wide
 
 - `provideWrConfig({ button: { size: 'sm' } })` — component defaults. A bound
   value always wins, including a bound `false` over a configured `true`.
-- `provideWrDensity('sm' | 'md' | 'lg' | 'touch')` — one control size for the
-  whole app; `touch` enlarges every hit area at once.
+- `provideWrDensity({ defaultDensity: 'sm' })` — one control size for the whole
+  app; `'sm' | 'md' | 'lg' | 'touch'`. It scales the paddings of the nine
+  stylesheets that read the multipliers — button, input, textarea, select,
+  cascader, tree, list, table, badge/tag — so `touch` grows those together. A
+  control with fixed geometry (checkbox, switch, radio, slider, rating,
+  segmented) does not move; its ≥44px target comes from the `touch-target` mixin
+  under `@media (pointer: coarse)` instead.
 - `provideWrResponsiveOverlays()` — overlays present as bottom sheets under the
   breakpoint (640px by default). Per-component opt-out with `[responsive]="false"`.
 - `provideWrFormErrors({ … })` — one place for validation copy; `<wr-form-field>`

package/slider/styles/_index.scss

@@ -89,6 +89,6 @@
     --wr-slider-thumb-border: var(--wr-color-on-surface-muted);
     --wr-slider-fill: var(--wr-color-on-surface-muted);
     pointer-events: none;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
   }
 }

package/speed-dial/styles/_index.scss

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

package/stepper/styles/_index.scss

@@ -41,7 +41,7 @@
     min-width: 0;
 
     &--disabled {
-      opacity: 0.5;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
@@ -156,7 +156,14 @@
     min-width: 0;
     min-height: 1.25rem;
     height: auto;
-    margin: 0.25rem 0 0.25rem calc(var(--wr-stepper-indicator-size) / 2);
+    // Logical, not `margin: … 0 … calc(…)`: `width` above is definite, so the
+    // `align-self: stretch` below is inapplicable and the thread is placed at
+    // the cross START — where the INLINE-start margin alone offsets it. A
+    // physical `margin-left` is therefore the TRAILING side under `dir="rtl"`,
+    // and the line paints flush against the row's right edge, half an indicator
+    // (14px) clear of every circle it is supposed to join.
+    margin-block: 0.25rem;
+    margin-inline: calc(var(--wr-stepper-indicator-size) / 2) 0;
     align-self: stretch;
     flex: 0 0 auto;
   }
@@ -191,7 +198,9 @@
     min-width: 0;
     min-height: 1.25rem;
     height: auto;
-    margin: 0.25rem 0 0.25rem calc(var(--wr-stepper-indicator-size) / 2);
+    // Logical for the same reason as the `--vertical` rule above.
+    margin-block: 0.25rem;
+    margin-inline: calc(var(--wr-stepper-indicator-size) / 2) 0;
     align-self: stretch;
     flex: 0 0 auto;
   }

package/switch/styles/_index.scss

@@ -38,7 +38,7 @@
     white-space: nowrap;
 
     &:focus-visible + .wr-switch__track {
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.25);
+      @include theme.focus-ring;
     }
   }
 
@@ -98,6 +98,6 @@
   &--disabled {
     --wr-switch-color: var(--wr-color-on-surface-muted);
     pointer-events: none;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
   }
 }