ngwr 9.0.1 → 10.0.0

package/llms-full.txt

@@ -113,7 +113,7 @@
 - import: `import { WrCascader } from 'ngwr/cascader'`
 - selector: `wr-cascader`
 - exports: WrCascader, type WrCascaderOption, type WrCascaderSize
-- Multi-level select. Drills through hierarchical categories one column at a time; picking a leaf commits the full path. Implements `ControlValueAccessor` — model is `readonly T[]`.
+- Multi-level select. Drills through hierarchical categories one column at a time; picking a leaf commits the full path. A signal-forms native control — it implements `FormValueControl`, so `[formField]` binds straight to its `value` model (`readonly T[]`). `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through Angular's bridge.
 
 ## ngwr/checkbox
 - import: `import { WrCheckbox } from 'ngwr/checkbox'`
@@ -195,8 +195,8 @@
 
 ## ngwr/date-picker
 - import: `import { WrDatePicker } from 'ngwr/date-picker'`
-- selector: `wr-date-picker`
-- exports: WrDatePicker
+- selector: `wr-date-picker`, `wr-date-range-picker`
+- exports: WrDatePicker, WrDateRangePicker, WrDateRange
 - Unified date / time / date-time picker. `<input>` + popover for every mode — overlay content swaps based on `[mode]`. Parses on every keystroke (silently — only emits when valid), reformats canonical on blur. Format driven by `WrDateAdapter`.
 
 ## ngwr/decrypt-text
@@ -218,7 +218,7 @@
 
 ## ngwr/dialog
 - import: `import { WrDialog } from 'ngwr/dialog'`
-- exports: WrDialog, WrDialogRef, WR_DIALOG_DATA, WrDialogOptions, WrDialogTitle, WrDialogContent, WrDialogFooter, WrDialogClose
+- exports: WrDialog, WrDialogRef, WR_DIALOG_DATA, WR_DIALOG_REF, WrDialogOptions, WrDialogTitle, WrDialogContent, WrDialogFooter, WrDialogClose
 - Modal dialogs via a service that wraps @angular/cdk/dialog. Open any component as a dialog and read its close result as a Promise.
 
 ## ngwr/directives
@@ -247,8 +247,8 @@
 ## ngwr/drawer
 - import: `import { WrDrawer } from 'ngwr/drawer'`
 - selector: `wr-drawer`
-- exports: WrDrawer, WrDrawerTitle, WrDrawerContent, WrDrawerFooter, WrDrawerClose, WrDrawerPosition
-- Side panel that slides in from any edge. Two-way binds `open`; renders into a CDK overlay so it sits above page content.
+- exports: WrDrawer, WrDrawerManager, WrDrawerRef, WR_DRAWER_DATA, WR_DRAWER_REF, WrDrawerTitle, WrDrawerContent, WrDrawerFooter, WrDrawerClose, WrDrawerOptions, WrDrawerPosition
+- Side panel that slides in from any edge. Use the component when the markup lives in your template, or `WrDrawerManager` to open any component as a drawer and read its close result.
 
 ## ngwr/dropdown
 - import: `import { WrDropdown } from 'ngwr/dropdown'`
@@ -309,7 +309,7 @@
 ## ngwr/i18n
 - import: `import { WrI18n } from 'ngwr/i18n'`
 - selector: `[wrT]`
-- exports: WrI18n, WrTPipe, WrTDirective, WR_I18N_CONFIG, DEFAULT_WR_I18N_CONFIG, type WrI18nCatalog, type WrI18nConfig, type WrI18nConfigResolved, type WrI18nParams, type WrI18nMissingHandler, WR_I18N_LOADER, type WrI18nLoader, WrI18nStaticLoader, type WrI18nStaticCatalogs, type WrI18nStaticScopedCatalogs, WrI18nHttpLoader, type WrI18nHttpLoaderConfig, provideWrI18n, provideWrI18nStaticLoader, provideWrI18nHttpLoader, type ProvideWrI18nOptions, useI18nText, readI18nText, useI18nFormatter
+- exports: WrI18n, WrTPipe, WrTDirective, WR_I18N_CONFIG, DEFAULT_WR_I18N_CONFIG, type WrI18nCatalog, type WrI18nConfig, type WrI18nConfigResolved, type WrI18nParams, type WrI18nMissingHandler, WR_I18N_LOADER, type WrI18nLoader, WR_I18N_BASE_CATALOGS, type WrI18nBaseCatalogs, WrI18nStaticLoader, type WrI18nStaticCatalogs, type WrI18nStaticScopedCatalogs, WrI18nHttpLoader, type WrI18nHttpLoaderConfig, provideWrI18n, provideWrI18nBaseCatalogs, provideWrI18nStaticLoader, provideWrI18nHttpLoader, type ProvideWrI18nOptions, useI18nText, readI18nText, useI18nFormatter
 - Reactive i18n service. Active locale lives on a signal, catalogs load lazily through a swappable loader (HTTP or static), and double-brace placeholders interpolate at render time. Scopes let feature modules ship and load their own catalogs.
 
 ## ngwr/icon
@@ -413,8 +413,8 @@
 - Stacked-segment progress bar. Each segment is sized proportionally to its `value` relative to the sum (or the explicit `max`); legend listed underneath.
 
 ## ngwr/overlay
-- import: `import { WrOverlayContainer } from 'ngwr/overlay'`
-- exports: WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet
+- import: `import { wrAppendOverlayClose } from 'ngwr/overlay'`
+- exports: wrAppendOverlayClose, WrOutsideClick, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet
 
 ## ngwr/page-header
 - import: `import { WrPageHeader } from 'ngwr/page-header'`
@@ -470,7 +470,7 @@
 - import: `import { WrRadio } from 'ngwr/radio'`
 - selector: `wr-radio-group`, `wr-radio`
 - exports: WrRadio, WrRadioSize, WrRadioGroup, WR_RADIO_GROUP, type WrRadioGroupContext
-- Single-choice option. Always used inside <wr-radio-group>, which implements ControlValueAccessor.
+- Single-choice option. Always used inside <wr-radio-group>, which is the form control: it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through Angular's bridge.
 
 ## ngwr/rating
 - import: `import { WrRating } from 'ngwr/rating'`
@@ -504,7 +504,7 @@
 - import: `import { WrSelect } from 'ngwr/select'`
 - selector: `wr-option-group`, `wr-option`, `wr-select`
 - exports: WrSelect, WrOption, WrOptionGroup, WR_SELECT, type WrSelectContext, WrSelectMode, WrSelectSearchLoader, WrSelectTagValidator, WrSelectSize
-- Native-like select built on CDK Overlay. Implements ControlValueAccessor.
+- Native-like select built on CDK Overlay. A signal-forms native control — it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through Angular's bridge.
 
 ## ngwr/shiny-text
 - import: `import { WrShinyText } from 'ngwr/shiny-text'`
@@ -527,7 +527,7 @@
 - import: `import { WrSlider } from 'ngwr/slider'`
 - selector: `wr-slider`
 - exports: WrSlider, WrSliderValue
-- Drag-to-pick numeric input. Single-thumb by default, optional dual-thumb range mode. Implements `ControlValueAccessor` so it plays nicely with template-driven and reactive forms.
+- Drag-to-pick numeric input. Single-thumb by default, optional dual-thumb range mode. A signal-forms native control — it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and template-driven `[(ngModel)]` / reactive forms keep working through Angular's bridge.
 
 ## ngwr/sparkline
 - import: `import { WrSparkline } from 'ngwr/sparkline'`
@@ -600,7 +600,7 @@
 - import: `import { WrSwitch } from 'ngwr/switch'`
 - selector: `wr-switch`
 - exports: WrSwitch, WrSwitchSize
-- Boolean toggle with an iOS-style slider. Implements ControlValueAccessor.
+- Boolean toggle with an iOS-style slider. A signal-forms native control — it implements `FormCheckboxControl`, so `[formField]` binds straight to its `checked` model. `[(checked)]` works standalone, and `[(ngModel)]` / reactive forms keep working through Angular's bridge.
 
 ## ngwr/table
 - import: `import { WrTable } from 'ngwr/table'`
@@ -618,7 +618,7 @@
 - import: `import { WrTextarea } from 'ngwr/textarea'`
 - selector: `wr-textarea`
 - exports: WrTextarea, WrTextareaSize, WrTextareaResize
-- Multi-line text input. Implements ControlValueAccessor. Optional autosize.
+- Multi-line text input with optional autosize. A signal-forms native control — it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through Angular's bridge.
 
 ## ngwr/theme
 - import: `import { WR_COLORS } from 'ngwr/theme'`

package/llms.txt

@@ -74,10 +74,13 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
 ## Common components (selector — import)
 
 - **Form** — `wr-btn` (ngwr/button), `wrInput` (ngwr/input), `wr-select`
-  (ngwr/select; modes single/multi/search/tag), `wr-checkbox` (form state is
-  `[(checked)]`; inside `<wr-checkbox-group>` the identity input is
-  `checkboxValue`, NOT `value`), `wr-switch`, `wr-slider`, `wr-input-number`,
-  `wr-input-otp`, `wr-date-picker` (date/time/datetime), `wr-file-upload`,
+  (ngwr/select; modes single/multi/search/tag, plus `searchable` for a
+  multi-with-typeahead and `(searchChange)` for server-side search),
+  `wr-checkbox` (form state is `[(checked)]`; inside `<wr-checkbox-group>` the
+  identity input is `checkboxValue`, NOT `value`), `wr-switch`, `wr-slider`,
+  `wr-input-number`, `wr-input-otp`, `wr-date-picker` (date/time/datetime) and
+  `wr-date-range-picker` (both in ngwr/date-picker; the range value is
+  `[start, end]`, hence a separate component), `wr-file-upload`,
   `wr-form-field`, `wr-color-picker`.
 - **Data** — `wr-table` (column pin/resize/drag-reorder, row selection,
   expandable rows, grouping, summary rows, CSV export, virtualized body),
@@ -89,9 +92,12 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
   `wr-toolbar`, `wr-descriptions`, `wr-statistic`, `wr-lightbox`,
   `wr-pull-to-refresh`.
 - **Navigation** — `wr-tabs`, `wr-stepper`, `wr-breadcrumbs`, `wr-dropdown-menu`.
-- **Overlays** — `wr-drawer`, `wr-action-sheet`, `[wrPopover]` (directive; has a
+- **Overlays** — `wr-drawer` (or `WrDrawerManager.open()` to open a component as
+  a drawer from code), `wr-action-sheet`, `[wrPopover]` (directive; has a
   `tooltip` mode), `wr-command-palette`, `wr-context-menu`, `wr-popconfirm`.
-  (Dialog and toast are service-opened — inject `WrDialog` / `WrToast`.)
+  (Dialog and toast are service-opened — inject `WrDialog` / `WrToast`.
+  Content inside a service-opened dialog or drawer can `inject(WrDialogRef)` /
+  `inject(WrDrawerRef)` to close itself.)
 
 ## Patterns
 

package/mention/styles/_index.scss

@@ -4,6 +4,25 @@
   pointer-events: auto;
 }
 
+// Polite live region the directive appends to `<body>`. It carries the two
+// things `role="textbox"` cannot express as ARIA state — how many suggestions
+// appeared, and what was inserted on commit — because `aria-expanded` is not a
+// supported state of textbox.
+//
+// Visually hidden rather than `display: none` / `visibility: hidden`, both of
+// which take the element out of the accessibility tree and silence it entirely.
+.wr-mention__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .wr-mention-panel {
   display: block;
   min-width: 12rem;
@@ -38,6 +57,10 @@
     }
   }
 
+  // Nothing renders this any more — the panel's empty branch was unreachable
+  // (`activate()` closes before opening when nothing matches) and has been
+  // removed. Kept because `.wr-*` classes are public API and deleting one is a
+  // breaking change for no gain; a consumer styling it simply sees no element.
   &__empty {
     padding: 0.5rem 0.75rem;
     color: var(--wr-color-on-surface-muted);

package/package.json

@@ -1,15 +1,31 @@
 {
   "name": "ngwr",
-  "version": "9.0.1",
+  "version": "10.0.0",
   "license": "MIT",
-  "description": "NGWR – Angular UI components library",
+  "description": "Signals-first Angular UI library: 100+ standalone, zoneless-ready components with native Signal Forms, SSR-safe rendering and CSS-variable theming.",
   "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev)",
   "keywords": [
     "ngwr",
     "angular",
-    "ui",
-    "ux",
-    "framework",
+    "angular-components",
+    "angular-ui",
+    "angular-library",
+    "component-library",
+    "ui-components",
+    "design-system",
+    "signals",
+    "signal-forms",
+    "zoneless",
+    "standalone",
+    "ssr",
+    "accessibility",
+    "a11y",
+    "scss",
+    "theming",
+    "dark-mode",
+    "tree-shakable",
+    "data-table",
+    "typescript",
     "frontend"
   ],
   "homepage": "https://ngwr.dev",
@@ -52,6 +68,8 @@
     "migrations": "./schematics/migrations.json"
   },
   "exports": {
+    "./schematics/*": "./schematics/*",
+    "./i18n/*.json": "./i18n/*.json",
     ".": {
       "sass": "./styles.scss",
       "types": "./types/ngwr.d.ts",

package/pagination/styles/_index.scss

@@ -2,6 +2,11 @@
 
 .wr-pagination {
   display: block;
+  // Breathing room of its own. A pager almost always sits right under a table or
+  // list, and with a bare `display: block` and no padding its cells touched the
+  // content above and below. Padding rather than margin so it stays inside the
+  // component's own box and can't collapse into the consumer's spacing.
+  padding-block: 0.5rem;
 
   &--disabled {
     opacity: 0.6;
@@ -80,6 +85,13 @@
 
   &__size {
     min-width: 0;
+
+    // The 10rem floor on `.wr-select__trigger` is sized for a standalone field.
+    // Here the select only ever holds "20 / page", so the pager was reserving
+    // 160px for a ~75px label — the single widest thing in the control.
+    .wr-select__trigger {
+      min-width: 0;
+    }
   }
 
   // Size variants — set the cell size; each button gets the matching [size].

package/popover/styles/_index.scss

@@ -1,8 +1,85 @@
+@use 'sass:list';
+
 @use '../../theme/styles' as theme;
 @use '../../overlay/styles'; // shared .wr-overlay-sheet / .wr-overlay-backdrop for responsive mode
 
+// --- Arrow -----------------------------------------------------------------
+//
+// A small square rotated 45°, half tucked under the panel so only the tip shows.
+// Tooltip and popover share the geometry; the popover additionally carries the
+// panel's border on the two outward faces so the outline reads as continuous.
+//
+// Placement is driven by the resolved position modifier the directive puts on the
+// overlay host (`--top` means the panel sits ABOVE the trigger, so the arrow hangs
+// off the panel's BOTTOM edge). All 12 positions are covered — the hand-written
+// tooltip rules this replaces only handled 8, so `top-start` / `top-end` /
+// `bottom-start` / `bottom-end` tooltips have been shipping with no arrow at all.
+$_arrow: 6px;
+$_arrow-half: 3px;
+$_arrow-inset: 0.625rem; // distance from the panel corner for the -start / -end variants
+
+// edge = which side of the panel the arrow hangs off; align = where along that side.
+$_arrow-placement: (
+  top: (bottom, center),
+  top-start: (bottom, start),
+  top-end: (bottom, end),
+  bottom: (top, center),
+  bottom-start: (top, start),
+  bottom-end: (top, end),
+  left: (right, center),
+  left-start: (right, start),
+  left-end: (right, end),
+  right: (left, center),
+  right-start: (left, start),
+  right-end: (left, end),
+);
+
+/// Positions the arrow against `$edge`, offset outwards by `$pull`.
+@mixin _arrow-at($edge, $align, $pull) {
+  #{$edge}: -$pull;
+
+  @if $edge == bottom or $edge == top {
+    @if $align == center {
+      left: 50%;
+      margin-left: -$_arrow-half;
+    } @else if $align == start {
+      left: $_arrow-inset;
+    } @else {
+      right: $_arrow-inset;
+    }
+  } @else {
+    @if $align == center {
+      top: 50%;
+      margin-top: -$_arrow-half;
+    } @else if $align == start {
+      top: $_arrow-inset;
+    } @else {
+      bottom: $_arrow-inset;
+    }
+  }
+}
+
+/// The two faces of the rotated square that stay visible outside the panel.
+@mixin _arrow-border($edge) {
+  @if $edge == bottom {
+    border-right: 1px solid var(--wr-color-outline);
+    border-bottom: 1px solid var(--wr-color-outline);
+  } @else if $edge == top {
+    border-left: 1px solid var(--wr-color-outline);
+    border-top: 1px solid var(--wr-color-outline);
+  } @else if $edge == right {
+    border-top: 1px solid var(--wr-color-outline);
+    border-right: 1px solid var(--wr-color-outline);
+  } @else {
+    border-bottom: 1px solid var(--wr-color-outline);
+    border-left: 1px solid var(--wr-color-outline);
+  }
+}
+
 .wr-popover-overlay {
   > * {
+    // Containing block for the arrow below.
+    position: relative;
     display: block;
     min-width: 8rem;
     max-width: 22rem;
@@ -14,6 +91,36 @@
     color: var(--wr-color-on-surface);
     animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
     transform-origin: top left;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: $_arrow;
+      height: $_arrow;
+      background: var(--wr-color-surface);
+      transform: rotate(45deg);
+    }
+  }
+
+  // Responsive bottom-sheet mode has no anchor to point at, so no arrow.
+  &.wr-overlay-sheet > *::after {
+    content: none;
+  }
+}
+
+@each $position, $spec in $_arrow-placement {
+  $edge: list.nth($spec, 1);
+  $align: list.nth($spec, 2);
+
+  // Pulled one extra pixel so the square's own border lines up flush with the
+  // panel's, instead of leaving the panel border showing across the arrow's base.
+  .wr-popover-overlay--#{$position} > *::after {
+    @include _arrow-at($edge, $align, $_arrow-half + 1px);
+    @include _arrow-border($edge);
+  }
+
+  .wr-tooltip-overlay--#{$position} .wr-tooltip::after {
+    @include _arrow-at($edge, $align, $_arrow-half);
   }
 }
 
@@ -28,12 +135,25 @@
 }
 
 .wr-tooltip {
+  // Follows the theme instead of inverting against it: on a dark canvas the
+  // tooltip is dark, on a light canvas light. It used to invert (a light chip on
+  // dark), which is a common convention but reads as a foreign element here.
+  //
+  // Both halves are tokens, so an app that wants the inverted look back needs one
+  // rule, not an override of every tooltip rule:
+  //   .wr-tooltip { --wr-tooltip-bg: var(--wr-color-on-surface);
+  //                 --wr-tooltip-color: var(--wr-color-dark-contrast); }
+  --wr-tooltip-bg: var(--wr-color-surface);
+  --wr-tooltip-color: var(--wr-color-on-surface);
+  --wr-tooltip-border: var(--wr-color-outline);
+
   position: relative;
   display: inline-block;
   max-width: 18rem;
   padding: 0.3125rem 0.5rem;
-  background: var(--wr-color-on-surface);
-  color: var(--wr-color-dark-contrast);
+  background: var(--wr-tooltip-bg);
+  color: var(--wr-tooltip-color);
+  border: 1px solid var(--wr-tooltip-border);
   border-radius: var(--wr-border-radius-sm);
   font-family: var(--wr-font-family-base);
   font-size: var(--wr-text-xs);
@@ -42,56 +162,20 @@
   animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
   transform-origin: top left;
 
-  // Arrow
+  // Arrow — geometry from the shared placement loop at the top of this file.
   &::after {
     content: '';
     position: absolute;
-    width: 6px;
-    height: 6px;
-    background: var(--wr-color-on-surface);
+    width: $_arrow;
+    height: $_arrow;
+    background: var(--wr-tooltip-bg);
     transform: rotate(45deg);
   }
 }
 
-// Arrow placement is dictated by the overlay panel's position modifier
-// (the wr-tooltip-overlay--top|bottom|left|right class lives on the
-// portal host wrapping the tooltip).
-.wr-tooltip-overlay--top .wr-tooltip::after {
-  left: 50%;
-  bottom: -3px;
-  margin-left: -3px;
-}
-.wr-tooltip-overlay--bottom .wr-tooltip::after {
-  left: 50%;
-  top: -3px;
-  margin-left: -3px;
-}
-.wr-tooltip-overlay--left .wr-tooltip::after {
-  top: 50%;
-  right: -3px;
-  margin-top: -3px;
-}
-.wr-tooltip-overlay--left-start .wr-tooltip::after {
-  top: 0.625rem;
-  right: -3px;
-}
-.wr-tooltip-overlay--left-end .wr-tooltip::after {
-  bottom: 0.625rem;
-  right: -3px;
-}
-.wr-tooltip-overlay--right .wr-tooltip::after {
-  top: 50%;
-  left: -3px;
-  margin-top: -3px;
-}
-.wr-tooltip-overlay--right-start .wr-tooltip::after {
-  top: 0.625rem;
-  left: -3px;
-}
-.wr-tooltip-overlay--right-end .wr-tooltip::after {
-  bottom: 0.625rem;
-  left: -3px;
-}
+// Arrow placement for both modes is generated from `$_arrow-placement` at the top
+// of this file — the per-position rules that used to live here are emitted there,
+// byte-identical for the 8 positions they covered plus the 4 they missed.
 
 @media (prefers-reduced-motion: reduce) {
   .wr-tooltip {

package/schematics/ng-add/index.js

@@ -10,8 +10,17 @@ const schematics_1 = require("@angular-devkit/schematics");
 const tasks_1 = require("@angular-devkit/schematics/tasks");
 const dependencies_1 = require("@schematics/angular/utility/dependencies");
 const workspace_1 = require("@schematics/angular/utility/workspace");
-/** Base peers, regardless of prompt answers. */
-const BASE_PEERS = [['@angular/cdk', '>=22.0.0']];
+/**
+ * Base peers, regardless of prompt answers.
+ *
+ * `lucide` is here because the bootstrap snippet this schematic prints registers
+ * icons through the lucide adapter — leaving it out made the very first snippet
+ * a consumer pastes fail to resolve.
+ */
+const BASE_PEERS = [
+    ['@angular/cdk', '>=22.0.0'],
+    ['lucide', '>=1.0.0'],
+];
 /** Extra peers contributed by the `dateAdapter` choice. */
 const DATE_ADAPTER_PEERS = {
     none: [],
@@ -121,11 +130,16 @@ function printNextSteps(options, context) {
         const adapter = options.dateAdapter ?? 'none';
         const density = options.density ?? 'none';
         const theme = options.theme ?? 'none';
+        // `ngwr/icon` exports only WrIcon / provideWrIcons / svgIcon — there are no
+        // bare icon exports, so the old `{ plus, trash }` import did not compile.
+        // Icons come from an adapter (lucide / feather) or from svgIcon().
         const imports = [
             "import { provideWrOverlay } from 'ngwr/overlay';",
-            "import { provideWrIcons, plus, trash } from 'ngwr/icon';",
+            "import { provideWrIcons } from 'ngwr/icon';",
+            "import { lucideIcons } from 'ngwr/icon/adapters/lucide';",
+            "import { Plus, Trash2 } from 'lucide';",
         ];
-        const providers = ['provideWrOverlay()', 'provideWrIcons([plus, trash])'];
+        const providers = ['provideWrOverlay()', 'provideWrIcons(lucideIcons({ plus: Plus, trash: Trash2 }))'];
         const adapterCall = DATE_ADAPTER_PROVIDER[adapter];
         if (adapterCall) {
             imports.push("import { provideWrDateAdapter } from 'ngwr/date-adapter';");

package/schematics/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/schematics/use/symbol-map.json

@@ -84,6 +84,8 @@
   "WrDateFnsAdapter": "ngwr/date-adapter-fns",
   "WrLuxonAdapter": "ngwr/date-adapter-luxon",
   "WrDatePicker": "ngwr/date-picker",
+  "WrDateRangePicker": "ngwr/date-picker",
+  "WrDateRange": "ngwr/date-picker",
   "WrDecryptText": "ngwr/decrypt-text",
   "WrDecryptTextAnimateOn": "ngwr/decrypt-text",
   "WrDecryptTextClickMode": "ngwr/decrypt-text",
@@ -113,10 +115,13 @@
   "WrSortableReorderEvent": "ngwr/drag-drop",
   "WrDragHandle": "ngwr/drag-drop",
   "WrDrawer": "ngwr/drawer",
+  "WrDrawerManager": "ngwr/drawer",
+  "WrDrawerRef": "ngwr/drawer",
   "WrDrawerTitle": "ngwr/drawer",
   "WrDrawerContent": "ngwr/drawer",
   "WrDrawerFooter": "ngwr/drawer",
   "WrDrawerClose": "ngwr/drawer",
+  "WrDrawerOptions": "ngwr/drawer",
   "WrDrawerPosition": "ngwr/drawer",
   "WrDropdown": "ngwr/dropdown",
   "WrDropdownMenu": "ngwr/dropdown",
@@ -153,6 +158,7 @@
   "WrI18nParams": "ngwr/i18n",
   "WrI18nMissingHandler": "ngwr/i18n",
   "WrI18nLoader": "ngwr/i18n",
+  "WrI18nBaseCatalogs": "ngwr/i18n",
   "WrI18nStaticLoader": "ngwr/i18n",
   "WrI18nStaticCatalogs": "ngwr/i18n",
   "WrI18nStaticScopedCatalogs": "ngwr/i18n",
@@ -211,6 +217,7 @@
   "WrMetaTwitter": "ngwr/meta",
   "WrMeterGroup": "ngwr/meter-group",
   "WrMeterSegment": "ngwr/meter-group",
+  "WrOutsideClick": "ngwr/overlay",
   "WrOverlayContainer": "ngwr/overlay",
   "WrPageHeader": "ngwr/page-header",
   "WrPagination": "ngwr/pagination",

package/select/styles/_index.scss

@@ -270,6 +270,10 @@
   --wr-option-padding-y: 0.4375rem;
   --wr-option-padding-x: 0.625rem;
   --wr-option-gap: 0.1875rem;
+  // Space between an option's own bits — an icon or checkbox and its label.
+  // `--wr-option-gap` above is the panel's row rhythm, a different axis; without
+  // this one, a projected `<wr-icon>` sat flush against the text.
+  --wr-option-inline-gap: 0.5rem;
 
   display: flex;
   flex-direction: column;
@@ -292,6 +296,7 @@
     --wr-option-padding-y: 0.3125rem;
     --wr-option-padding-x: 0.5rem;
     --wr-option-gap: 0.125rem;
+    --wr-option-inline-gap: 0.375rem;
   }
 
   &--lg {
@@ -300,6 +305,7 @@
     --wr-option-padding-y: 0.5rem;
     --wr-option-padding-x: 0.75rem;
     --wr-option-gap: 0.25rem;
+    --wr-option-inline-gap: 0.625rem;
   }
 
   &__loading,
@@ -314,6 +320,7 @@
 .wr-option {
   display: flex;
   align-items: center;
+  gap: var(--wr-option-inline-gap, 0.5rem);
   padding: var(--wr-option-padding-y) var(--wr-option-padding-x);
   border-radius: var(--wr-border-radius-sm);
   color: var(--wr-color-on-surface);
@@ -399,6 +406,12 @@
     text-transform: uppercase;
   }
 
+  // A group needs a visible seam above it, or its label reads as one more dim
+  // option in the list. This only fired between two groups, so the common shape
+  // — loose options and then a group — got no divider at all. Match a preceding
+  // option too; deliberately not `* + &`, which would also draw a line under the
+  // search field, where the field's own border already does the job.
+  .wr-option + &,
   + .wr-option-group {
     border-top: 1px solid var(--wr-color-outline);
     margin-top: 0.25rem;

package/splitter/styles/_index.scss

@@ -19,7 +19,13 @@
 
   &__pane {
     flex-grow: 0;
-    flex-shrink: 0;
+    // Shrinkable on purpose. The two panes are sized in percentages that add up
+    // to 100, and the 4px divider sits between them — with `flex-shrink: 0` the
+    // row came to 100% + 4px and both panes hung over the container's edge.
+    // Shrinking splits that 4px between them and keeps the ratio the drag set.
+    // Safe to shrink: `min-width: 0` plus `overflow: auto` means content never
+    // props a pane open.
+    flex-shrink: 1;
     min-width: 0;
     min-height: 0;
     overflow: auto;