Migration guide

ng update ngwr

• Never target a 7.x, 8.x or 9.x release with ng update, ng add or ng g ngwr:*. Their schematics do not load.
• pnpm: on ERR_PNPM_IGNORED_BUILDS, allow the builds and run again.
• pnpm holds a new release back for a day, so ng update may find nothing yet.

• Most of what it lists fails silently. Work through the report rather than waiting for the build.
• Each table below says what the codemod does with each row.

- provideWrDensity({ defaultDensity: 'sm' }),
- provideWrToastConfig({ duration: 6000 }),
+ provideWr(
+   withDensity({ defaultDensity: 'sm' }),
+   withToast({ duration: 6000 }),
+ ),

• Put withDensity(), withToast() and withTheme() in the app providers. A lazy route never reads them.
• provideWrIcons(), the i18n providers and provideWrLoadingBarRouter() are unchanged.
• The codemod moves a call only when it is a plain entry of a providers array. It lists one kept in a variable, a spread or a ternary, a second call of one kind in the same array, and a provideWrTheme() that passes attribute.

• The umbrella also carried the density scale. With withDensity() or [wrDensity], add @use 'ngwr/density', or the setting does nothing.
• ngwr/reset, ngwr/animations and ngwr/typography-utilities load the theme now. Write them below a configured @use 'ngwr/theme' with (…), or the build fails.

• A var() at a removed token drops its whole declaration, with no error. The codemod rewrites the reads, and lists a declaration, since which role it should set is your call. That includes a [style.--…] binding, setProperty() and a style-object key.
• Without strictTemplates, a removed color value renders neutral, with no error.
• --wr-border-strong is new, and darker than any border v14 had.

- .hero { background: #fff; }
- [data-theme='dark'] .hero { background: #0b1120; }
+ .hero { background: light-dark(#fff, #0b1120); }

- .panel {
-   color: #111;
-   @include theme.dark { color: #eee; }
- }
+ .panel { color: light-dark(#111, #eee); }

- <html data-theme="dark">
+ <html style="color-scheme: dark">

• A leftover [data-theme] selector compiles and matches nothing.
• To stay light, add :root { color-scheme: light; } after @use 'ngwr/theme'.
• Add withTheme() so a stored choice applies at boot; on a prerendered page also ship wrThemePrePaintScript().
• light-dark() takes colours only.
• In canvas code, read a token with resolveCssColor(), not getPropertyValue().
• For the old dark wr-border-glow, set --wr-border-glow-halo-blend: plus-lighter, --wr-border-glow-fill-blend: soft-light and --wr-border-glow-fill-scale: 1 on the dark section.
• [wrTilt]'s glare blends normal in both schemes, so your own --wr-tilt-glare-color paints at face value.

- import { WrSortableList } from 'ngwr/drag-drop';
+ import { WrSortableList, WrSortableItem } from 'ngwr/sortable-list';

  <wr-sortable-list [(items)]="rows">
-   <ng-template let-row let-i="index">
-     <div>{{ i + 1 }}. {{ row.label }}</div>
-   </ng-template>
+   @for (row of rows(); track row.id; let i = $index) {
+     <wr-sortable-item>{{ i + 1 }}. {{ row.label }}</wr-sortable-item>
+   }
  </wr-sortable-list>

• A <wr-sortable-list> that still holds an <ng-template> renders nothing.
• Bare wrSquircle, showHandle, responsive and format attributes compile and do nothing. So do rules on .wr-overlay-sheet, .wr-overlay-backdrop and .wr-command-palette--sheet.
• <wr-editor> refuses an HTML or markdown string, and '': convert to WrEditorJson, or null for empty.

# Breakpoints
- protected readonly isMd = inject(WrMedia).matches('md');
+ protected readonly isMd = toSignal(
+   inject(BreakpointObserver).observe('(min-width: 768px)').pipe(map(s => s.matches)),
+   { initialValue: false },
+ );

# Feather
# needs "loader": { ".svg": "text" } and declare module '*.svg?raw'
- provideWrIcons(featherIcons({ plus: featherSource.plus }));
+ import plusSvg from 'feather-icons/dist/icons/plus.svg?raw';
+ provideWrIcons([svgIcon('plus', plusSvg)]);

• Deleting provideWrConfig() resets every control it set to md and the standard radius. Bind those inputs first.
• WrMedia's md is (min-width: 768px). The other widths are $breakpoints in ngwr/breakpoints.
• A Feather glyph no longer has the wr-icon__svg class. Style .wr-icon svg.
• A var(--wr-keyboard-inset, 0px) compiles and stays 0px.

# On one rule
+ required(path.email, { message: 'Please fill this in.' });

# Or for every field, date picker included, in your own catalog
+ provideWrI18nStaticLoader({
+   en: {
+     validation: {
+       required: 'Please fill this in.',
+       minlength: 'Minimum length is {{requiredLength}}.',
+       dateFormat: 'Expected format: {{example}}',
+       minDate: 'Choose a later date.',
+       maxDate: 'Choose an earlier date.',
+       dateFilter: 'This date is not available.',
+     },
+   },
+ }),

• Without your text a field shows no message; only dev mode warns. <wr-form-error key> still works.
• The codemod lists provideWrFormErrors(). While no catalog has a validation namespace, it also lists every <wr-form-field> without a <wr-form-error>. While none has validation.dateFormat, it lists every date picker.

• Native format tokens are yyyy yy MMMM MMM MM M dd d HH H hh h mm ss a. Others, such as date-fns' EEEE or PPP, print as letters.
• Your own adapter: see Configuration.

• A test that found a table control by its old shared name, or tabbed through a cascader, needs the change.
• A drawer that has to stay modal keeps its backdrop. If the dimming was what you turned off, hide it: .wr-drawer-backdrop { background: none; backdrop-filter: none; }.

• The gray scale moved from Tailwind's slate to its gray, so neutral surfaces, text and borders are less blue: --wr-color-gray-500 from #64748b to #6b7280, --wr-color-gray-900 from #0f172a to #111827.
• Paddings, gaps and margins snapped to the --wr-space-* scale, so many components moved by a pixel or two. wr-alert's padding went from 0.625rem 0.875rem to 0.75rem 1rem.
• <wr-btn outlined> with no color is transparent with a hover tint. It used to look like a plain button.

ng update rewrites:

By hand (ng update lists the files for most):

providers: [
  provideRouter(routes),
+   provideWrLoadingBarRouter(),
]

- <wr-tabs>
+ <wr-tabs wrTabsRouting>

- pagination: { of: 'von' }
+ pagination: {
+   range: '{{from}}–{{to}} von {{total}}',
+   compact: '{{current}} / {{total}}',
+ }

• Without provideWrLoadingBarRouter() the bar stays at 0% on navigation, with no error.
• A catalog that still defines pagination.of shows that line in English.
• Date output changed too: MMMM declines beside a day, a prints the locale's marker, and the calendar is always Gregorian.

- wr-checkbox#agree { margin: 0; }
+ #agree { margin: 0; }                  /* the input */
+ wr-checkbox:has(#agree) { margin: 0; }  /* the whole row */

<wr-checkbox-group> and <wr-radio-group> keep their host id.

• A static value left on <wr-checkbox> makes the whole group toggle together.
• A camelCase Lucide key stops rendering with no error. Quote the key: 'chevron-down': ChevronDown.