ngwr 9.1.0 → 10.1.0

package/llms.txt

@@ -1,15 +1,15 @@
 # ngwr
 
 > Angular UI library — standalone, signals-first, zoneless, fully tree-shakable.
-> 127 entry points — 105 of them components and directives — built on
+> 130 secondary entry points, 188 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
 
 This file orients AI agents and LLMs that consume ngwr. For exact, current
 component APIs, read the bundled TypeScript types
-(`node_modules/ngwr/types/ngwr-<name>.d.ts`). Note: **ngwr.dev is a single-page
-app** — fetching its routes returns a JS shell, not text. Use the
-machine-readable resources listed at the bottom instead.
+(`node_modules/ngwr/types/ngwr-<name>.d.ts`). ngwr.dev is prerendered, so
+fetching a route returns real HTML you can read; the machine-readable resources
+listed at the bottom are still the faster path for bulk API lookups.
 
 ## Install
 
@@ -52,10 +52,14 @@ Add from their entry points as needed:
 - `provideWrDateAdapter(...)` — calendar + date-picker (`ngwr/date-adapter-fns`
   or `ngwr/date-adapter-luxon`).
 
+Injected rather than provided: `WrTour` (`ngwr/tour`) runs a guided onboarding
+tour — `tour.start([{ target: '[data-tour="save"]', content: '…' }])` spotlights
+one element at a time; a step whose target is missing is skipped, not floated.
+
 ## Schematics — let `ng` wire it
 
 - `ng add ngwr` — installs peers, adds `@use 'ngwr'` to styles, prints provider setup.
-- `ng g ngwr:use WrFoo src/app/x.ts` — adds the import + splices `WrFoo` into that
+- `ng g ngwr:use WrFoo --path src/app/x.ts` — adds the import + splices `WrFoo` into that
   component's `@Component` imports.
 - `ng g ngwr:provider <overlay|icons|toast|i18n|date-adapter|density|theme|…>` —
   adds the matching `provideWr*()` to bootstrap.
@@ -81,9 +85,11 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
   `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`.
+  `wr-form-field`, `wr-color-picker`, `wr-transfer` (dual listbox; the value
+  is the RIGHT pane).
 - **Data** — `wr-table` (column pin/resize/drag-reorder, row selection,
-  expandable rows, grouping, summary rows, CSV export, virtualized body),
+  expandable rows, grouping, tree rows (`childrenKey`), summary rows,
+  CSV export, virtualized body),
   `wr-pagination`, `wr-tree`, `wr-virtual-scroll`, `wr-sortable-list`
   (drag-to-reorder).
 - **Feedback** — `wr-alert`, `wr-result`, `wr-empty`, `wr-skeleton`,
@@ -109,19 +115,34 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
 - **Icons** — register via `provideWrIcons`, render `<wr-icon name="check" />`.
 - **i18n** — `{{ 'key' | wrT }}` (pipe from `ngwr/i18n`).
 - **Theme** — CSS custom properties `--wr-color-*`, `--wr-border-radius-*`, … set
-  by `provideWrTheme()`.
+  by `provideWrTheme()`. Two contrast tokens per intent, easy to confuse:
+  `--wr-color-<intent>-contrast` is the label ON a filled intent;
+  `--wr-color-<intent>-ink` is the intent used AS text on a surface or its own
+  `-soft` tint. A bare `--wr-color-<intent>` as text fails WCAG AA in light. For
+  muted prose use `--wr-color-on-surface-muted`, not the `medium` intent.
 - **Mobile** — overlays collapse to sheets (`provideWrResponsiveOverlays()`), a
   `responsive` input reflows layout components, a `touch` density preset enlarges
   controls, and `WrHaptics` (ngwr/platform) fires vibration feedback.
 - **Large datasets** — `virtualScroll` is an opt-in input on `wr-table`,
   `wr-tree` and `wr-select` (search mode), alongside the standalone
   `wr-virtual-scroll` wrapper.
+- **Scheduling** — `wr-event-calendar` covers month / week / day in one
+  component. `events` is an input the calendar never writes to: a drag emits
+  `eventChange` with the proposed start / end, and you apply it. Event `end` is
+  EXCLUSIVE. `editable` turns on drag and resize; `Alt` + arrows do the same
+  from the keyboard.
 
 ## Resources (machine-readable)
 
 - This quick-ref: https://ngwr.dev/llms.txt
 - Full reference (every entry point + selector + description):
   https://ngwr.dev/llms-full.txt
+- **One page as markdown — append `.md` to any docs URL.**
+  `https://ngwr.dev/reference/components/select` also serves
+  `https://ngwr.dev/reference/components/select.md`: the same page as markdown,
+  prose and code samples and API tables, without the site chrome. Prefer it over
+  `llms-full.txt` when you already know which component you need. Each HTML page
+  advertises its twin as `<link rel="alternate" type="text/markdown">`.
 - All site URLs (for crawlers): https://ngwr.dev/sitemap.xml
 - Source, README, per-component `.d.ts` types: https://github.com/thekhegay/ngwr
   (installed at `node_modules/ngwr/types/ngwr-<name>.d.ts`; the package also

package/loading-bar/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 .wr-loading-bar {
   position: fixed;
   top: 0;

package/marquee/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 // Endless marquee (reactbits LogoLoop port).
 // Vars driven from component inputs:
 //   --wr-marquee-gap         gap between items (px)
@@ -62,7 +67,7 @@
     image-rendering: -webkit-optimize-contrast;
     -webkit-user-drag: none;
     pointer-events: none;
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform var(--wr-duration-slow) var(--wr-ease-out);
   }
 
   &--scale-hover &__item {
@@ -76,7 +81,7 @@
   }
 
   &--scale-hover &__node {
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform var(--wr-duration-slow) var(--wr-ease-out);
   }
 
   &__link {

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/overlay/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 // Shared presentation styles for responsive (bottom-sheet) overlays.
 // Added to a component's overlay panel (`wr-dialog-panel`,
 // `wr-select-overlay`, …) when `provideWrResponsiveOverlays()` or a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "9.1.0",
+  "version": "10.1.0",
   "license": "MIT",
   "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)",
@@ -68,6 +68,8 @@
     "migrations": "./schematics/migrations.json"
   },
   "exports": {
+    "./schematics/*": "./schematics/*",
+    "./i18n/*.json": "./i18n/*.json",
     ".": {
       "sass": "./styles.scss",
       "types": "./types/ngwr.d.ts",
@@ -639,6 +641,10 @@
       "types": "./types/ngwr-directives.d.ts",
       "default": "./fesm2022/ngwr-directives.mjs"
     },
+    "./event-calendar": {
+      "types": "./types/ngwr-event-calendar.d.ts",
+      "default": "./fesm2022/ngwr-event-calendar.mjs"
+    },
     "./fuzzy-text": {
       "types": "./types/ngwr-fuzzy-text.d.ts",
       "default": "./fesm2022/ngwr-fuzzy-text.mjs"
@@ -691,6 +697,14 @@
       "types": "./types/ngwr-storage.d.ts",
       "default": "./fesm2022/ngwr-storage.mjs"
     },
+    "./tour": {
+      "types": "./types/ngwr-tour.d.ts",
+      "default": "./fesm2022/ngwr-tour.mjs"
+    },
+    "./transfer": {
+      "types": "./types/ngwr-transfer.d.ts",
+      "default": "./fesm2022/ngwr-transfer.mjs"
+    },
     "./utils": {
       "types": "./types/ngwr-utils.d.ts",
       "default": "./fesm2022/ngwr-utils.mjs"

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,121 @@
+@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 +127,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 +171,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 +198,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/pull-to-refresh/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 .wr-pull-to-refresh {
   display: block;
   position: relative;

package/result/styles/_index.scss

@@ -48,15 +48,15 @@
   }
 
   &--success &__icon {
-    color: var(--wr-color-success);
+    color: var(--wr-color-success-ink);
   }
 
   &--warning &__icon {
-    color: var(--wr-color-warning);
+    color: var(--wr-color-warning-ink);
   }
 
   &--error &__icon {
-    color: var(--wr-color-danger);
+    color: var(--wr-color-danger-ink);
   }
 
   &--info &__icon {

package/schematics/icon-set/index.js

@@ -9,27 +9,60 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
 const workspace_1 = require("@schematics/angular/utility/workspace");
 /**
- * Curated common icon sets. Identifiers match `ngwr/icon` exports — kept
- * short on purpose so the generated file stays readable.
+ * Curated icon sets, as `<name used in templates>` → `<lucide export>`.
+ *
+ * These used to be bare identifiers imported straight from `ngwr/icon`, which
+ * never compiled: that entry point exports only `WrIcon`, `provideWrIcons` and
+ * `svgIcon`, never the icons themselves. Icons come from an adapter, so the
+ * generated file registers them through `lucideIcons()` — the same wiring
+ * `ng add ngwr` produces.
  */
 const SETS = {
-    basic: ['checkmark', 'close', 'add', 'edit', 'trash', 'search', 'copy'],
-    navigation: [
-        'chevronDown',
-        'chevronLeft',
-        'chevronRight',
-        'chevronUp',
-        'arrowBack',
-        'arrowForward',
-        'arrowTop',
-        'arrowBottom',
-        'menu',
-        'dotsHorizontal',
-        'dotsVertical',
-    ],
-    forms: ['eye', 'eyeOff', 'lock', 'lockOpened', 'calendar', 'time', 'filter', 'checkmark', 'close'],
-    feedback: ['alert', 'alertCircle', 'infoCircleOutline', 'checkmarkCircle', 'closeCircle', 'warning', 'bell'],
+    basic: {
+        checkmark: 'Check',
+        close: 'X',
+        add: 'Plus',
+        edit: 'Pencil',
+        trash: 'Trash2',
+        search: 'Search',
+        copy: 'Copy',
+    },
+    navigation: {
+        'chevron-down': 'ChevronDown',
+        'chevron-left': 'ChevronLeft',
+        'chevron-right': 'ChevronRight',
+        'chevron-up': 'ChevronUp',
+        'arrow-back': 'ArrowLeft',
+        'arrow-forward': 'ArrowRight',
+        'arrow-top': 'ArrowUp',
+        'arrow-bottom': 'ArrowDown',
+        menu: 'Menu',
+        'dots-horizontal': 'MoreHorizontal',
+        'dots-vertical': 'MoreVertical',
+    },
+    forms: {
+        eye: 'Eye',
+        'eye-off': 'EyeOff',
+        lock: 'Lock',
+        'lock-opened': 'LockOpen',
+        calendar: 'Calendar',
+        time: 'Clock',
+        filter: 'Filter',
+        checkmark: 'Check',
+        close: 'X',
+    },
+    feedback: {
+        alert: 'TriangleAlert',
+        'alert-circle': 'CircleAlert',
+        'info-circle': 'Info',
+        'checkmark-circle': 'CircleCheck',
+        'close-circle': 'CircleX',
+        warning: 'TriangleAlert',
+        bell: 'Bell',
+    },
 };
+/** Every icon this schematic knows how to map, merged across the curated sets. */
+const KNOWN_ICONS = Object.values(SETS).reduce((acc, set) => ({ ...acc, ...set }), {});
 /** Default fallback when neither `set` nor `icons` is supplied. */
 const DEFAULT_SET = 'basic';
 function iconSet(options) {
@@ -44,38 +77,54 @@ function iconSet(options) {
         const dirPath = options.path ?? `${sourceRoot}/app`;
         const fileName = (options.name ?? 'icons').replace(/\.ts$/, '');
         const filePath = `${dirPath}/${fileName}.ts`;
-        // Build the deduped icon list — set + explicit icons, or default fallback.
-        const fromSet = options.set ? (SETS[options.set] ?? []) : [];
-        const fromList = options.icons
+        // Build the deduped icon map — set + explicit icons, or default fallback.
+        const fromSet = options.set ? (SETS[options.set] ?? {}) : {};
+        const requested = options.icons
             ? options.icons
                 .split(',')
                 .map(s => s.trim())
                 .filter(Boolean)
             : [];
-        const icons = unique([...fromSet, ...fromList]);
-        if (icons.length === 0)
-            icons.push(...SETS[DEFAULT_SET]);
+        // schema.json promises unknown names are "flagged but not blocked" — actually do it.
+        const unknown = requested.filter(name => !(name in KNOWN_ICONS));
+        if (unknown.length > 0) {
+            context.logger.warn(`ngwr:icon-set: no lucide mapping for ${unknown.join(', ')} — skipped. ` +
+                `Known names: ${Object.keys(KNOWN_ICONS).sort().join(', ')}.`);
+        }
+        const picked = { ...fromSet };
+        for (const name of requested) {
+            if (name in KNOWN_ICONS)
+                picked[name] = KNOWN_ICONS[name];
+        }
+        if (Object.keys(picked).length === 0)
+            Object.assign(picked, SETS[DEFAULT_SET]);
         if (tree.exists(filePath)) {
             context.logger.warn(`ngwr: ${filePath} already exists — skipping. Pass --name to write a different file, or delete it first.`);
             return tree;
         }
         const exportName = options.exportName ?? 'APP_ICONS';
-        const importList = icons.join(', ');
-        const arrayList = icons.join(', ');
-        tree.create(filePath, renderFile(importList, exportName, arrayList));
-        context.logger.info(`✓ Created ${filePath} with ${icons.length} icons.`);
+        tree.create(filePath, renderFile(picked, exportName));
+        context.logger.info(`✓ Created ${filePath} with ${Object.keys(picked).length} icons.`);
         context.logger.info(printWiringHint(fileName, exportName));
         return tree;
     };
 }
-function renderFile(importList, exportName, arrayList) {
+function renderFile(icons, exportName) {
+    const names = Object.keys(icons);
+    // Two icon names can share one glyph (alert / warning), so the import list is
+    // deduped while the map keeps both keys.
+    const imports = [...new Set(names.map(n => icons[n]))].sort().join(', ');
+    const entries = names.map(n => `  '${n}': ${icons[n]},`).join('\n');
     return `/**
  * Tree-shaken ngwr icon set. Generated by \`ng g ngwr:icon-set\`.
  * Edit freely — re-running with --name=<other> writes a separate file.
  */
-import { ${importList} } from 'ngwr/icon';
+import { lucideIcons } from 'ngwr/icon/adapters/lucide';
+import { ${imports} } from 'lucide';
 
-export const ${exportName} = [${arrayList}] as const;
+export const ${exportName} = lucideIcons({
+${entries}
+});
 `;
 }
 function printWiringHint(fileName, exportName) {
@@ -90,7 +139,4 @@ Next step — wire the set into bootstrap:
   });
 `;
 }
-function unique(list) {
-    return Array.from(new Set(list));
-}
 exports.default = iconSet;