ngwr 11.1.0 → 12.0.0

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

@@ -0,0 +1,117 @@
+---
+name: ngwr
+description: Build Angular UIs with the ngwr component library (standalone, signals-first, zoneless). Use when adding, styling or debugging ngwr components — `wr-*` selectors, `ngwr/*` imports, `provideWr*` providers, `--wr-*` CSS custom properties — or when picking a component for an Angular app that already depends on ngwr.
+---
+
+# ngwr
+
+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`).
+
+## Get the facts, do not guess
+
+Four sources ship in the package or on the docs site, in the order worth
+reaching for:
+
+1. `references/catalog.md` in this skill — every entry point, its import line
+   and its selector(s).
+2. `node_modules/ngwr/llms-full.txt` — the same catalog plus every public
+   export per entry point.
+3. Any docs page as markdown: append `.md` to the URL, e.g.
+   `https://ngwr.dev/reference/components/select.md`.
+4. `npx ngwr-mcp` — the bundled MCP server, when the agent speaks MCP:
+   `search_ngwr`, `get_ngwr_component`, `get_ngwr_api`, `get_ngwr_setup`.
+
+Exact input / output signatures are in the shipped `.d.ts` files. Do not invent
+an input name; read one.
+
+## The rules that are not guessable
+
+These are the ones that compile and then behave wrong, or that a reasonable
+guess gets backwards.
+
+- **Import from the entry point, never a barrel.**
+  `import { WrSelect } from 'ngwr/select'` — there is no `ngwr` root export for
+  components, and the subpath is what makes the library tree-shakable.
+- **The selector is not always the entry point name.** The button is
+  `wr-btn`, not `wr-button`. Check `references/catalog.md` before writing a tag.
+- **Check for a MODE before reaching for another component.** The catalog is
+  deliberately consolidated: `wr-select` covers single / multi / search / tag,
+  `wr-date-picker` covers date / time / datetime, `wr-popover` has a tooltip
+  mode, `wr-drawer` doubles as a bottom sheet, `wr-table` owns pinning,
+  resizing, grouping, tree rows, CSV export and virtual scroll.
+- **There is no `ControlValueAccessor`.** Value components implement Signal
+  Forms' `FormValueControl` / `FormCheckboxControl`. Bind
+  `[formField]="form.x"`, or use the two-way model standalone —
+  `[(value)]`, `[(checked)]`. `[(ngModel)]` and reactive forms still work:
+  Angular 22 synthesises the accessor.
+- **`<wr-checkbox>` group identity is `checkboxValue`, not `value`.**
+  `value` is reserved for the form value, so a leftover `value="x"` lands on the
+  host as a plain DOM attribute, every box in the group keeps the default
+  identity `null`, and they all toggle together. No template error.
+- **Styles are opt-in and global.** `@use 'ngwr'` for everything, or
+  `@use 'ngwr/<name>'` per component. Components are `ViewEncapsulation.None`;
+  their `.wr-*` BEM classes and `--wr-*` custom properties are PUBLIC API, so
+  style against them rather than reaching into the DOM structure.
+- **Theme through tokens, not overrides.** `--wr-color-{intent}` and its
+  `-contrast` / `-ink` / `-soft` companions. `-contrast` is the label ON a
+  filled intent; `-ink` is the intent used AS text. Using the bare intent as
+  text fails WCAG AA on the soft tint in both themes.
+- **Never hard-code user-facing text in a wrapper component.** Strings route
+  through `ngwr/i18n`; every component takes overridable `*Label` inputs.
+- **Prefer the library over hand-rolling.** `ngwr/utils` (coercion, dom,
+  keyboard, id, css-size, math), `ngwr/pipes` (`wrDate`, `wrBytes`,
+  `wrTruncate`, `wrNumber`, `wrMark`, `wrPlural`, `wrRange`) and
+  `ngwr/validators` already exist.
+
+## Setting a component up
+
+```bash
+ng add ngwr                                          # prompts, installs peers, prints bootstrap
+ng g ngwr:use WrSelect --path src/app/some.ts        # adds the import AND the @Component entry
+ng g ngwr:provider overlay                           # splices a provider into bootstrap
+```
+
+`--path` is a NAMED option on `ngwr:use`; only the symbol is positional, and
+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
+
+Each of these compiles fine and then does nothing, with no error naming the
+cause.
+
+- `provideWrOverlay() // from 'ngwr/overlay'`
+  — overlays render into an ngwr-owned container; without it they never appear
+  — needed by: `WrDialog`, `WrDrawer`, `WrToast`, `WrPopover`, `WrPopconfirm`, `WrContextMenu`, `WrSelect`, `WrDropdown`, `WrCommandPalette`, `WrCascader`, `WrMention`, `WrDatePicker`, `WrTour`, `WrLightbox`
+- `provideWrIcons(lucideIcons({ … })) // from 'ngwr/icon' + 'ngwr/icon/adapters/lucide'`
+  — icons resolve by name from a registry you populate
+  — needed by: `WrIcon`
+- `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' + 'ngwr/i18n/en'`
+  — the pipe and directive read from a catalog you provide
+  — needed by: `WrTPipe`, `WrTDirective`, `WrI18n`
+
+## Testing
+
+Every control, overlay, chart and most animations ship a CDK harness at
+`ngwr/<name>/testing`. Use it instead of querying the DOM:
+
+```ts
+const select = await loader.getHarness(WrSelectHarness);
+await select.open();
+await select.selectOption({ text: 'Angular' });
+```
+
+Overlay panels render into the overlay container, NOT the fixture — provide
+`provideWrOverlay()` in the test and load those harnesses from
+`TestbedHarnessEnvironment.documentRootLoader(fixture)`.
+
+## Reference files
+
+- `references/catalog.md` — every entry point with import line and selectors.
+- `references/setup.md` — bootstrap, styles, theme, i18n, date adapters.

package/skills/ngwr/references/catalog.md

@@ -0,0 +1,212 @@
+# ngwr entry points
+
+Generated from the library source. Import from the subpath — there is no
+root barrel for components.
+
+| Entry point | Import | Selector(s) |
+| --- | --- | --- |
+| `ngwr/action-sheet` | `import { WrActionSheet } from 'ngwr/action-sheet'` | `wr-action-sheet` |
+| `ngwr/action-sheet/testing` | `import { WrActionSheetActionHarness } from 'ngwr/action-sheet/testing'` | — |
+| `ngwr/affix` | `import { WrAffix } from 'ngwr/affix'` | `[wrAffix]` |
+| `ngwr/alert` | `import { WrAlert } from 'ngwr/alert'` | `wr-alert` |
+| `ngwr/anchor` | `import { WrAnchor } from 'ngwr/anchor'` | `wr-anchor` |
+| `ngwr/aurora` | `import { WrAurora } from 'ngwr/aurora'` | `wr-aurora` |
+| `ngwr/avatar` | `import { WrAvatar } from 'ngwr/avatar'` | `wr-avatar` |
+| `ngwr/back-top` | `import { WrBackTop } from 'ngwr/back-top'` | `wr-back-top` |
+| `ngwr/badge` | `import { WrBadge } from 'ngwr/badge'` | `wr-badge` `wr-tag` |
+| `ngwr/bar-chart` | `import { WrBarChart } from 'ngwr/bar-chart'` | `wr-bar-chart` |
+| `ngwr/bar-chart/testing` | `import { WrBarChartHarness } from 'ngwr/bar-chart/testing'` | — |
+| `ngwr/blur-text` | `import { WrBlurText } from 'ngwr/blur-text'` | `wr-blur-text` |
+| `ngwr/blur-text/testing` | `import { WrBlurTextHarness } from 'ngwr/blur-text/testing'` | — |
+| `ngwr/border-glow` | `import { WrBorderGlow } from 'ngwr/border-glow'` | `wr-border-glow` |
+| `ngwr/border-glow/testing` | `import { WrBorderGlowHarness } from 'ngwr/border-glow/testing'` | — |
+| `ngwr/breadcrumbs` | `import { WrBreadcrumbs } from 'ngwr/breadcrumbs'` | `wr-breadcrumbs-item` `wr-breadcrumbs` |
+| `ngwr/burger` | `import { WrBurger } from 'ngwr/burger'` | `wr-burger` |
+| `ngwr/button` | `import { WrButton } from 'ngwr/button'` | `wr-btn-group` `wr-btn` `button[wr-btn]` `a[wr-btn]` |
+| `ngwr/button/testing` | `import { WrButtonHarness } from 'ngwr/button/testing'` | — |
+| `ngwr/calendar` | `import { WrCalendar } from 'ngwr/calendar'` | `wr-calendar` |
+| `ngwr/calendar-heatmap` | `import { WrCalendarHeatmap } from 'ngwr/calendar-heatmap'` | `wr-calendar-heatmap` |
+| `ngwr/calendar-heatmap/testing` | `import { WrCalendarHeatmapHarness } from 'ngwr/calendar-heatmap/testing'` | — |
+| `ngwr/calendar/testing` | `import { WrCalendarDayHarness } from 'ngwr/calendar/testing'` | — |
+| `ngwr/card` | `import { WrCard } from 'ngwr/card'` | `wr-card` `wr-card-header` `wr-card-footer` |
+| `ngwr/carousel` | `import { WrCarousel } from 'ngwr/carousel'` | `wr-carousel-slide` `wr-carousel` |
+| `ngwr/carousel/testing` | `import { WrCarouselHarness } from 'ngwr/carousel/testing'` | — |
+| `ngwr/cascader` | `import { WrCascader } from 'ngwr/cascader'` | `wr-cascader` |
+| `ngwr/cascader/testing` | `import { WrCascaderColumnHarness } from 'ngwr/cascader/testing'` | — |
+| `ngwr/checkbox` | `import { WrCheckbox } from 'ngwr/checkbox'` | `wr-checkbox-group` `wr-checkbox` |
+| `ngwr/checkbox/testing` | `import { WrCheckboxHarness } from 'ngwr/checkbox/testing'` | — |
+| `ngwr/circular-text` | `import { WrCircularText } from 'ngwr/circular-text'` | `wr-circular-text` |
+| `ngwr/circular-text/testing` | `import { WrCircularTextHarness } from 'ngwr/circular-text/testing'` | — |
+| `ngwr/click-spark` | `import { WrClickSpark } from 'ngwr/click-spark'` | `wr-click-spark` |
+| `ngwr/clipboard` | `import { WrClipboard } from 'ngwr/clipboard'` | — |
+| `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'` | — |
+| `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` |
+| `ngwr/confetti` | `import { WrConfetti } from 'ngwr/confetti'` | — |
+| `ngwr/config` | `import { provideWrConfig } from 'ngwr/config'` | — |
+| `ngwr/context-menu` | `import { WrContextMenu } from 'ngwr/context-menu'` | `wr-context-menu-divider` `wr-context-menu-item` `wr-context-menu` `[wrContextMenu]` |
+| `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` | `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]` |
+| `ngwr/descriptions` | `import { WrDescriptions } from 'ngwr/descriptions'` | `wr-description-item` `wr-descriptions` |
+| `ngwr/dialog` | `import { WrDialog } from 'ngwr/dialog'` | `[wrDialogClose]` `[wrDialogContent]` `[wrDialogFooter]` `[wrDialogTitle]` |
+| `ngwr/dialog/testing` | `import { WrDialogHarness } from 'ngwr/dialog/testing'` | — |
+| `ngwr/directives` | `import { WrAutofocus } from 'ngwr/directives'` | `[wrAutofocus]` `textarea[wrAutosize]` `[wrClickOutside]` `[wrCopyToClipboard]` |
+| `ngwr/divider` | `import { WrDivider } from 'ngwr/divider'` | `wr-divider` |
+| `ngwr/donut-chart` | `import { WrDonutChart } from 'ngwr/donut-chart'` | `wr-donut-chart` |
+| `ngwr/donut-chart/testing` | `import { WrDonutChartHarness } from 'ngwr/donut-chart/testing'` | — |
+| `ngwr/drag-drop` | `import { WrSortableList } from 'ngwr/drag-drop'` | `[wrDragHandle]` `wr-sortable-list` |
+| `ngwr/drawer` | `import { WrDrawer } from 'ngwr/drawer'` | `[wrDrawerClose]` `[wrDrawerContent]` `[wrDrawerFooter]` `[wrDrawerTitle]` `wr-drawer` |
+| `ngwr/drawer/testing` | `import { WrDrawerHarness } from 'ngwr/drawer/testing'` | — |
+| `ngwr/dropdown` | `import { WrDropdown } from 'ngwr/dropdown'` | `wr-dropdown-item` `wr-dropdown-menu` `[wrDropdown]` |
+| `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'` | — |
+| `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` |
+| `ngwr/file-upload/testing` | `import { WrFileUploadHarness } from 'ngwr/file-upload/testing'` | — |
+| `ngwr/form` | `import { WrFormItem } from 'ngwr/form'` | `wr-form-error` `wr-form-field` `wr-form-item` |
+| `ngwr/form/testing` | `import { WrFormFieldHarness } from 'ngwr/form/testing'` | — |
+| `ngwr/fuzzy-text` | `import { WrFuzzyText } from 'ngwr/fuzzy-text'` | `wr-fuzzy-text` |
+| `ngwr/fuzzy-text/testing` | `import { WrFuzzyTextHarness } from 'ngwr/fuzzy-text/testing'` | — |
+| `ngwr/gauge` | `import { WrGauge } from 'ngwr/gauge'` | `wr-gauge` |
+| `ngwr/gauge/testing` | `import { WrGaugeHarness } from 'ngwr/gauge/testing'` | — |
+| `ngwr/glitch-text` | `import { WrGlitchText } from 'ngwr/glitch-text'` | `wr-glitch-text` |
+| `ngwr/glitch-text/testing` | `import { WrGlitchTextHarness } from 'ngwr/glitch-text/testing'` | — |
+| `ngwr/gradient-text` | `import { WrGradientText } from 'ngwr/gradient-text'` | `wr-gradient-text` |
+| `ngwr/gradient-text/testing` | `import { WrGradientTextHarness } from 'ngwr/gradient-text/testing'` | — |
+| `ngwr/hotkey` | `import { WrHotkey } from 'ngwr/hotkey'` | `[wrHotkey]` |
+| `ngwr/i18n` | `import { WrI18n } from 'ngwr/i18n'` | `[wrT]` |
+| `ngwr/i18n/en` | `import { wrEn } from 'ngwr/i18n/en'` | — |
+| `ngwr/i18n/ru` | `import { wrRu } from 'ngwr/i18n/ru'` | — |
+| `ngwr/icon` | `import { WrIcon } from 'ngwr/icon'` | `wr-icon` |
+| `ngwr/icon/adapters/feather` | `import { feather } from 'ngwr/icon/adapters/feather'` | — |
+| `ngwr/icon/adapters/lucide` | `import { lucide } from 'ngwr/icon/adapters/lucide'` | — |
+| `ngwr/image-cropper` | `import { WrImageCropper } from 'ngwr/image-cropper'` | `wr-image-cropper` |
+| `ngwr/image-cropper/testing` | `import { WrImageCropperHarness } from 'ngwr/image-cropper/testing'` | — |
+| `ngwr/input` | `import { WrInput } from 'ngwr/input'` | `[wrInputPrefix]` `[wrInputSuffix]` `input[wrInput]` `textarea[wrInput]` `wr-input-group` `wr-password-toggle` |
+| `ngwr/input-number` | `import { WrInputNumber } from 'ngwr/input-number'` | `wr-input-number` |
+| `ngwr/input-number/testing` | `import { WrInputNumberHarness } from 'ngwr/input-number/testing'` | — |
+| `ngwr/input-otp` | `import { WrInputOtp } from 'ngwr/input-otp'` | `wr-input-otp` |
+| `ngwr/input-otp/testing` | `import { WrInputOtpBoxHarness } from 'ngwr/input-otp/testing'` | — |
+| `ngwr/input/testing` | `import { WrInputHarness } from 'ngwr/input/testing'` | — |
+| `ngwr/keyboard` | `import { WrKbd } from 'ngwr/keyboard'` | `wr-kbd` |
+| `ngwr/knob` | `import { WrKnob } from 'ngwr/knob'` | `wr-knob` |
+| `ngwr/knob/testing` | `import { WrKnobHarness } from 'ngwr/knob/testing'` | — |
+| `ngwr/layout` | `import { WrLayout } from 'ngwr/layout'` | `wr-layout-content` `wr-layout-footer` `wr-layout-header` `wr-layout-sider` `wr-layout` |
+| `ngwr/lightbox` | `import { WrLightbox } from 'ngwr/lightbox'` | `wr-lightbox` |
+| `ngwr/lightbox/testing` | `import { WrLightboxHarness } from 'ngwr/lightbox/testing'` | — |
+| `ngwr/line-chart` | `import { WrLineChart } from 'ngwr/line-chart'` | `wr-line-chart` |
+| `ngwr/line-chart/testing` | `import { WrLineChartHarness } from 'ngwr/line-chart/testing'` | — |
+| `ngwr/list` | `import { WrList } from 'ngwr/list'` | `wr-list-item` `wr-list` |
+| `ngwr/loading-bar` | `import { WrLoadingBar } from 'ngwr/loading-bar'` | `wr-loading-bar` |
+| `ngwr/markdown` | `import { WrMarkdown } from 'ngwr/markdown'` | `wr-markdown` |
+| `ngwr/markdown/testing` | `import { WrMarkdownCodeBlockHarness } from 'ngwr/markdown/testing'` | — |
+| `ngwr/marquee` | `import { WrMarquee } from 'ngwr/marquee'` | `wr-marquee` |
+| `ngwr/marquee/testing` | `import { WrMarqueeHarness } from 'ngwr/marquee/testing'` | — |
+| `ngwr/media` | `import { WrMedia } from 'ngwr/media'` | — |
+| `ngwr/mention` | `import { WrMention } from 'ngwr/mention'` | `wr-mention-panel` `[wrMention]` |
+| `ngwr/mention/testing` | `import { WrMentionHarness } from 'ngwr/mention/testing'` | — |
+| `ngwr/meta` | `import { WrMeta } from 'ngwr/meta'` | `[wrMeta]` |
+| `ngwr/meter-group` | `import { WrMeterGroup } from 'ngwr/meter-group'` | `wr-meter-group` |
+| `ngwr/meter-group/testing` | `import { WrMeterGroupHarness } from 'ngwr/meter-group/testing'` | — |
+| `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'` | — |
+| `ngwr/pipes` | `import { WrBytes } from 'ngwr/pipes'` | — |
+| `ngwr/platform` | `import { WrPlatform } from 'ngwr/platform'` | — |
+| `ngwr/popconfirm` | `import { WrPopconfirm } from 'ngwr/popconfirm'` | `wr-popconfirm` `[wrPopconfirm]` |
+| `ngwr/popconfirm/testing` | `import { WrPopconfirmHarness } from 'ngwr/popconfirm/testing'` | — |
+| `ngwr/popover` | `import { WrPopover } from 'ngwr/popover'` | `[wrPopover]` |
+| `ngwr/popover/testing` | `import { WrPopoverHarness } from 'ngwr/popover/testing'` | — |
+| `ngwr/progress` | `import { WrProgress } from 'ngwr/progress'` | `wr-progress` |
+| `ngwr/pull-to-refresh` | `import { WrPullToRefresh } from 'ngwr/pull-to-refresh'` | `wr-pull-to-refresh` |
+| `ngwr/qr` | `import { WrQr } from 'ngwr/qr'` | `wr-qr` |
+| `ngwr/radio` | `import { WrRadio } from 'ngwr/radio'` | `wr-radio-group` `wr-radio` |
+| `ngwr/radio/testing` | `import { WrRadioGroupHarness } from 'ngwr/radio/testing'` | — |
+| `ngwr/rating` | `import { WrRating } from 'ngwr/rating'` | `wr-rating` |
+| `ngwr/rating/testing` | `import { WrRatingHarness } from 'ngwr/rating/testing'` | — |
+| `ngwr/result` | `import { WrResult } from 'ngwr/result'` | `wr-result-404` `wr-result-403` `wr-result-500` `wr-result` |
+| `ngwr/rotating-text` | `import { WrRotatingText } from 'ngwr/rotating-text'` | `wr-rotating-text` |
+| `ngwr/rotating-text/testing` | `import { WrRotatingTextHarness } from 'ngwr/rotating-text/testing'` | — |
+| `ngwr/scroll` | `import { WrScroll } from 'ngwr/scroll'` | — |
+| `ngwr/segmented` | `import { WrSegmented } from 'ngwr/segmented'` | `wr-segmented` |
+| `ngwr/segmented/testing` | `import { WrSegmentedHarness } from 'ngwr/segmented/testing'` | — |
+| `ngwr/select` | `import { WrSelect } from 'ngwr/select'` | `wr-option-group` `wr-option` `wr-select` |
+| `ngwr/select/testing` | `import { WrOptionHarness } from 'ngwr/select/testing'` | — |
+| `ngwr/shiny-text` | `import { WrShinyText } from 'ngwr/shiny-text'` | `[wrShimmer]` `wr-shiny-text` |
+| `ngwr/shiny-text/testing` | `import { WrShinyTextHarness } from 'ngwr/shiny-text/testing'` | — |
+| `ngwr/sidebar` | `import { WrSidebar } from 'ngwr/sidebar'` | `wr-sidebar` |
+| `ngwr/skeleton` | `import { WrSkeleton } from 'ngwr/skeleton'` | `wr-skeleton` |
+| `ngwr/slider` | `import { WrSlider } from 'ngwr/slider'` | `wr-slider` |
+| `ngwr/slider/testing` | `import { WrSliderHarness } from 'ngwr/slider/testing'` | — |
+| `ngwr/sparkline` | `import { WrSparkline } from 'ngwr/sparkline'` | `wr-sparkline` |
+| `ngwr/sparkline/testing` | `import { WrSparklineHarness } from 'ngwr/sparkline/testing'` | — |
+| `ngwr/speed-dial` | `import { WrSpeedDial } from 'ngwr/speed-dial'` | `wr-speed-dial` |
+| `ngwr/speed-dial/testing` | `import { WrSpeedDialActionHarness } from 'ngwr/speed-dial/testing'` | — |
+| `ngwr/spinner` | `import { WrSpinner } from 'ngwr/spinner'` | `wr-spinner` |
+| `ngwr/splash-cursor` | `import { WrSplashCursor } from 'ngwr/splash-cursor'` | `wr-splash-cursor` |
+| `ngwr/splash-cursor/testing` | `import { WrSplashCursorHarness } from 'ngwr/splash-cursor/testing'` | — |
+| `ngwr/split-text` | `import { WrSplitText } from 'ngwr/split-text'` | `wr-split-text` |
+| `ngwr/split-text/testing` | `import { WrSplitTextHarness } from 'ngwr/split-text/testing'` | — |
+| `ngwr/splitter` | `import { WrSplitter } from 'ngwr/splitter'` | `wr-splitter` |
+| `ngwr/splitter/testing` | `import { WrSplitterHarness } from 'ngwr/splitter/testing'` | — |
+| `ngwr/spotlight-card` | `import { WrSpotlightCard } from 'ngwr/spotlight-card'` | `wr-spotlight-card` `[wrSpotlight]` |
+| `ngwr/spotlight-card/testing` | `import { WrSpotlightCardHarness } from 'ngwr/spotlight-card/testing'` | — |
+| `ngwr/squircle` | `import { WrSquircle } from 'ngwr/squircle'` | `wr-squircle` `[wrSquircle]` |
+| `ngwr/star-border` | `import { WrStarBorder } from 'ngwr/star-border'` | `wr-star-border` `[wr-star-border]` |
+| `ngwr/star-border/testing` | `import { WrStarBorderHarness } from 'ngwr/star-border/testing'` | — |
+| `ngwr/statistic` | `import { WrStatistic } from 'ngwr/statistic'` | `wr-statistic-countdown` `wr-statistic-group` `wr-statistic` |
+| `ngwr/stepper` | `import { WrStepper } from 'ngwr/stepper'` | `wr-step` `wr-stepper` |
+| `ngwr/stepper/testing` | `import { WrStepHarness } from 'ngwr/stepper/testing'` | — |
+| `ngwr/storage` | `import { WrStorage } from 'ngwr/storage'` | — |
+| `ngwr/switch` | `import { WrSwitch } from 'ngwr/switch'` | `wr-switch` |
+| `ngwr/switch/testing` | `import { WrSwitchHarness } from 'ngwr/switch/testing'` | — |
+| `ngwr/table` | `import { WrTable } from 'ngwr/table'` | `[wrTableCell]` `ng-template[wrTableExpand]` `wr-table-filter` `ng-template[wrTableGroupHeader]` `wr-table-sort` `wr-table` |
+| `ngwr/table/testing` | `import { WrTableCellHarness } from 'ngwr/table/testing'` | — |
+| `ngwr/tabs` | `import { WrTabs } from 'ngwr/tabs'` | `wr-tab` `wr-tabs` |
+| `ngwr/tabs/testing` | `import { WrTabHarness } from 'ngwr/tabs/testing'` | — |
+| `ngwr/textarea` | `import { WrTextarea } from 'ngwr/textarea'` | `wr-textarea` |
+| `ngwr/textarea/testing` | `import { WrTextareaHarness } from 'ngwr/textarea/testing'` | — |
+| `ngwr/theme` | `import { WrTheme } from 'ngwr/theme'` | — |
+| `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'` | — |
+| `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'` | — |
+| `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` |
+| `ngwr/tree/testing` | `import { WrTreeHarness } from 'ngwr/tree/testing'` | — |
+| `ngwr/typewriter` | `import { WrTypewriter } from 'ngwr/typewriter'` | `wr-typewriter` |
+| `ngwr/typewriter/testing` | `import { WrTypewriterHarness } from 'ngwr/typewriter/testing'` | — |
+| `ngwr/typography` | `import { WrTypography } from 'ngwr/typography'` | `[wrTypography]` |
+| `ngwr/utils` | `import { isDefined } from 'ngwr/utils'` | — |
+| `ngwr/validators` | `import { WrValidators } from 'ngwr/validators'` | — |
+| `ngwr/version` | `import { NGWR_VERSION } from 'ngwr/version'` | — |
+| `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-taskbar` |
+| `ngwr/window/testing` | `import { WrWindowHarness } from 'ngwr/window/testing'` | — |
+
+Descriptions and every public export per entry point:
+`llms-full.txt`, shipped in the same package.

package/skills/ngwr/references/setup.md

@@ -0,0 +1,78 @@
+# Setting up ngwr
+
+## Install
+
+```bash
+ng add ngwr
+```
+
+Prompts for styles, date adapter, density and theme, installs the peers, and
+prints a bootstrap snippet tailored to the answers.
+
+## Bootstrap
+
+```ts
+import { provideWrTheme } from 'ngwr/theme';
+import { provideWrOverlay } from 'ngwr/overlay';
+import { provideWrIcons } from 'ngwr/icon';
+import { lucideIcons } from 'ngwr/icon/adapters/lucide';
+
+bootstrapApplication(App, {
+  providers: [
+    provideZonelessChangeDetection(),
+    provideWrTheme(),
+    provideWrOverlay(),
+    provideWrIcons(lucideIcons({ check, chevronDown })),
+  ],
+});
+```
+
+`provideWrOverlay()` gives ngwr its OWN CDK overlay container, which is what
+keeps it from colliding with Material or NG-ZORRO in the same app. It also
+installs `WrVisualViewport`, which publishes `--wr-keyboard-inset`.
+
+## Styles
+
+```scss
+@use 'ngwr';          // everything
+@use 'ngwr/button';   // or one entry point at a time
+```
+
+Resolved through the `sass` condition in the package's `exports` map. Entry
+points that ship no stylesheet (the `/testing` harnesses, `ngwr/utils`) have no
+`@use` target — importing one fails the build.
+
+## Providers with no default
+
+### `provideWrOverlay() // from 'ngwr/overlay'`
+
+Overlays render into an ngwr-owned container; without it they never appear. Needed by `WrDialog`, `WrDrawer`, `WrToast`, `WrPopover`, `WrPopconfirm`, `WrContextMenu`, `WrSelect`, `WrDropdown`, `WrCommandPalette`, `WrCascader`, `WrMention`, `WrDatePicker`, `WrTour`, `WrLightbox`.
+
+### `provideWrIcons(lucideIcons({ … })) // from 'ngwr/icon' + 'ngwr/icon/adapters/lucide'`
+
+Icons resolve by name from a registry you populate. Needed by `WrIcon`.
+
+### `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' + 'ngwr/i18n/en'`
+
+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({ 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>`
+  resolves a message per error key through it, then the i18n catalog, then a
+  built-in fallback.

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);
   }
 }