ngwr 7.3.0 → 9.0.0

package/pagination/styles/_index.scss

@@ -34,9 +34,9 @@
   }
 
   &__total {
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-family: var(--wr-font-family-base);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
   }
 
   &__nav {
@@ -61,7 +61,7 @@
     display: inline-flex;
     min-width: var(--wr-pagination-cell, 2rem);
     justify-content: center;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     user-select: none;
   }
 
@@ -71,9 +71,9 @@
     display: none;
     align-items: center;
     padding: 0 0.375rem;
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
     font-family: var(--wr-font-family-base);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
@@ -82,20 +82,7 @@
     min-width: 0;
   }
 
-  // Size variants. `xs` and `xl` extend the button scale by overriding
-  // its CSS custom properties on the strip — the button itself still
-  // gets the closest built-in size (sm or lg) via [size] so its other
-  // tokens stay consistent.
-  &--xs {
-    --wr-pagination-cell: 1.5rem;
-
-    .wr-btn {
-      --wr-btn-padding-x: 0.375rem;
-      --wr-btn-font-size: 0.6875rem;
-      --wr-btn-line-height: 0.875rem;
-      --wr-btn-icon-size: 0.75rem;
-    }
-  }
+  // Size variants — set the cell size; each button gets the matching [size].
   &--sm {
     --wr-pagination-cell: 1.75rem;
   }
@@ -105,16 +92,6 @@
   &--lg {
     --wr-pagination-cell: 2.5rem;
   }
-  &--xl {
-    --wr-pagination-cell: 3rem;
-
-    .wr-btn {
-      --wr-btn-padding-x: 1rem;
-      --wr-btn-font-size: 1.125rem;
-      --wr-btn-line-height: 1.75rem;
-      --wr-btn-icon-size: 1.25rem;
-    }
-  }
 
   // Shape variants. `rounded` is the default the buttons already render.
   // `square` flattens every cell for a tighter numeric grid — useful

package/popconfirm/styles/_index.scss

@@ -6,11 +6,11 @@
     min-width: 14rem;
     max-width: 22rem;
     padding: 0.875rem 1rem;
-    background: var(--wr-color-white);
-    border: 1px solid var(--wr-color-light);
+    background: var(--wr-color-surface);
+    border: 1px solid var(--wr-color-outline);
     border-radius: var(--wr-border-radius-base);
     box-shadow: var(--wr-shadow-overlay);
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
     font-family: var(--wr-font-family-base);
     animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
     transform-origin: top left;
@@ -20,7 +20,7 @@
 .wr-popconfirm {
   &__message {
     margin: 0 0 0.625rem;
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.25rem;
   }
 

package/popover/styles/_index.scss

@@ -6,12 +6,12 @@
     display: block;
     min-width: 8rem;
     max-width: 22rem;
-    background: var(--wr-color-white);
-    border: 1px solid var(--wr-color-light);
+    background: var(--wr-color-surface);
+    border: 1px solid var(--wr-color-outline);
     @include theme.smooth-br(var(--wr-border-radius-base));
     box-shadow: var(--wr-shadow-overlay);
     font-family: var(--wr-font-family-base);
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
     animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
     transform-origin: top left;
   }
@@ -32,13 +32,13 @@
   display: inline-block;
   max-width: 18rem;
   padding: 0.3125rem 0.5rem;
-  background: var(--wr-color-dark);
+  background: var(--wr-color-on-surface);
   color: var(--wr-color-dark-contrast);
   border-radius: var(--wr-border-radius-sm);
   font-family: var(--wr-font-family-base);
-  font-size: 0.75rem;
+  font-size: var(--wr-text-xs);
   line-height: 1rem;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--wr-shadow-overlay);
   animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
   transform-origin: top left;
 
@@ -48,7 +48,7 @@
     position: absolute;
     width: 6px;
     height: 6px;
-    background: var(--wr-color-dark);
+    background: var(--wr-color-on-surface);
     transform: rotate(45deg);
   }
 }

package/progress/styles/_index.scss

@@ -8,7 +8,7 @@
   // Defaults — color modifiers override the bar color.
   --wr-progress-height: 0.5rem;
   --wr-progress-radius: var(--wr-border-radius-pill);
-  --wr-progress-track: rgba(var(--wr-color-light-rgb), 0.35);
+  --wr-progress-track: rgba(var(--wr-color-outline-rgb), 0.35);
   --wr-progress-bar: var(--wr-color-primary);
 
   // `flex: 1 1 100%` here would claim 100% basis on the flex MAIN axis —

package/pull-to-refresh/styles/_index.scss

@@ -0,0 +1,38 @@
+.wr-pull-to-refresh {
+  display: block;
+  position: relative;
+  overflow-y: auto;
+  // Keep the browser's own pull-to-refresh / scroll-chaining out of the way.
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+  font-family: var(--wr-font-family-base);
+
+  // Revealed above the content as it is pulled down (absolute, so it never
+  // adds to the scroll height). Height tracks the live pull distance.
+  &__indicator {
+    position: absolute;
+    inset: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    pointer-events: none;
+    color: var(--wr-color-on-surface-muted);
+  }
+
+  &__content {
+    min-height: 100%;
+  }
+
+  // Only while settling (not during the drag) so the indicator follows the
+  // finger 1:1, then eases back on release / completion.
+  &--animating {
+    .wr-pull-to-refresh__content {
+      transition: transform var(--wr-duration-base) var(--wr-ease-out);
+    }
+
+    .wr-pull-to-refresh__indicator {
+      transition: height var(--wr-duration-base) var(--wr-ease-out);
+    }
+  }
+}

package/radio/styles/_index.scss

@@ -1,18 +1,20 @@
 @use '../../theme/styles' as theme;
 
 .wr-radio {
-  --wr-radio-size: 1.125rem;
-  --wr-radio-bg: var(--wr-color-white);
-  --wr-radio-border: var(--wr-color-light);
+  --wr-radio-size: 1.125rem; // md (18px)
+  --wr-radio-font-size: var(--wr-text-sm);
+  --wr-radio-line-height: var(--wr-control-line-height-md);
+  --wr-radio-bg: var(--wr-color-surface);
+  --wr-radio-border: var(--wr-color-outline);
   --wr-radio-dot: transparent;
-  --wr-radio-color: var(--wr-color-dark);
+  --wr-radio-color: var(--wr-color-on-surface);
 
   display: inline-flex;
   vertical-align: middle;
   color: var(--wr-radio-color);
   font-family: var(--wr-font-family-base);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: var(--wr-radio-font-size);
+  line-height: var(--wr-radio-line-height);
 
   &__label {
     display: inline-flex;
@@ -52,8 +54,8 @@
 
     &::after {
       content: '';
-      width: 0.5rem;
-      height: 0.5rem;
+      width: calc(var(--wr-radio-size) - 0.625rem);
+      height: calc(var(--wr-radio-size) - 0.625rem);
       border-radius: 50%;
       background: var(--wr-radio-dot);
       transform: scale(0);
@@ -75,6 +77,19 @@
       opacity var(--wr-transition-base);
   }
 
+  // Sizes — dot, label font + line-height scale together.
+  &--sm {
+    --wr-radio-size: 1rem; // 16px
+    --wr-radio-font-size: var(--wr-text-xs);
+    --wr-radio-line-height: var(--wr-control-line-height-sm);
+  }
+
+  &--lg {
+    --wr-radio-size: 1.25rem; // 20px
+    --wr-radio-font-size: var(--wr-text-base);
+    --wr-radio-line-height: var(--wr-control-line-height-lg);
+  }
+
   &--has-icon &__dot::after {
     display: none;
   }
@@ -98,7 +113,7 @@
   }
 
   &--disabled {
-    --wr-radio-color: var(--wr-color-medium);
+    --wr-radio-color: var(--wr-color-on-surface-muted);
     pointer-events: none;
     opacity: 0.6;
   }

package/rating/styles/_index.scss

@@ -3,7 +3,7 @@
 .wr-rating {
   --wr-rating-size: 1.25rem;
   --wr-rating-gap: 0.125rem;
-  --wr-rating-empty: var(--wr-color-light);
+  --wr-rating-empty: var(--wr-color-outline);
   --wr-rating-filled: var(--wr-color-warning, #ffba00);
 
   display: inline-flex;
@@ -16,7 +16,7 @@
     outline: 0;
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.2);
+      @include theme.focus-ring;
       border-radius: var(--wr-border-radius-sm);
     }
   }
@@ -49,6 +49,17 @@
     transition: clip-path var(--wr-transition-base);
   }
 
+  // Sizes — scale the icon glyph + the gap between slots.
+  &--sm {
+    --wr-rating-size: 1rem; // 16px
+    --wr-rating-gap: 0.0625rem;
+  }
+
+  &--lg {
+    --wr-rating-size: 1.5rem; // 24px
+    --wr-rating-gap: 0.1875rem;
+  }
+
   &--readonly &__slot {
     cursor: default;
   }

package/result/styles/_index.scss

@@ -13,7 +13,7 @@
   min-height: 100%;
   text-align: center;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   &__icon {
     line-height: 0;
@@ -31,7 +31,7 @@
     margin: 0;
     max-width: 32rem;
     font-size: var(--wr-text-sm);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     line-height: var(--wr-leading-relaxed);
   }
 
@@ -64,6 +64,6 @@
   }
 
   &--empty &__icon {
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
   }
 }

package/schematics/migrations/v8/index.js

@@ -0,0 +1,122 @@
+"use strict";
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+/** compact|default|comfortable → sm|md|lg. `touch` is unchanged. */
+const DENSITY_MAP = [
+    ['compact', 'sm'],
+    ['default', 'md'],
+    ['comfortable', 'lg'],
+];
+const HTML_TRANSFORMS = [
+    // density — directive attribute, string form: wrDensity="compact" → "sm"
+    ...DENSITY_MAP.map(([from, to]) => ({
+        pattern: new RegExp(`(\\bwrDensity=")${from}(")`, 'g'),
+        replacement: `$1${to}$2`,
+    })),
+    // density — directive attribute, bound literal: [wrDensity]="'compact'" → "'sm'"
+    ...DENSITY_MAP.map(([from, to]) => ({
+        pattern: new RegExp(`(\\[wrDensity\\]=")'${from}'(")`, 'g'),
+        replacement: `$1'${to}'$2`,
+    })),
+    // density — selector form in templates: [data-wr-density='compact'] → 'sm'
+    ...DENSITY_MAP.map(([from, to]) => ({
+        pattern: new RegExp(`(data-wr-density=')${from}(')`, 'g'),
+        replacement: `$1${to}$2`,
+    })),
+    // pagination size — scoped to the element so other `size="xs"` attrs are untouched
+    { pattern: /(<wr-pagination\b[^>]*?\ssize=")xs(")/g, replacement: '$1sm$2' },
+    { pattern: /(<wr-pagination\b[^>]*?\ssize=")xl(")/g, replacement: '$1lg$2' },
+];
+const TS_TRANSFORMS = [
+    // density — provideWrDensity({ defaultDensity: 'compact' }) → 'sm'
+    ...DENSITY_MAP.map(([from, to]) => ({
+        pattern: new RegExp(`(defaultDensity:\\s*['"])${from}(['"])`, 'g'),
+        replacement: `$1${to}$2`,
+    })),
+];
+const SCSS_TRANSFORMS = [
+    // density — [data-wr-density='compact'] selector in stylesheets → 'sm'
+    ...DENSITY_MAP.map(([from, to]) => ({
+        pattern: new RegExp(`(data-wr-density=')${from}(')`, 'g'),
+        replacement: `$1${to}$2`,
+    })),
+];
+/** Removed APIs to flag for manual migration (no safe automatic rewrite). */
+const REMOVED_MARKERS = [
+    {
+        probe: /\bwrReveal\b/,
+        note: 'WrReveal directive removed — drop `wrReveal` + its [threshold]/[rootMargin]/[once]/[root] inputs',
+    },
+    {
+        probe: /<wr-scramble-text\b|\bWrScrambleText\b|ngwr\/scramble-text/,
+        note: 'WrScrambleText removed — use <wr-decrypt-text> or plain text',
+    },
+];
+const IGNORE_DIRS = new Set(['node_modules', 'dist', '.git', '.cache', '.angular', 'coverage', '.next', '.nuxt']);
+function ngUpdateV8() {
+    return (tree, context) => {
+        const summary = { html: 0, ts: 0, scss: 0 };
+        const warnings = [];
+        visit(tree, '/', filePath => {
+            const lower = filePath.toLowerCase();
+            const isHtml = lower.endsWith('.html');
+            const isTs = lower.endsWith('.ts');
+            const isScss = lower.endsWith('.scss') || lower.endsWith('.sass') || lower.endsWith('.css');
+            if (!isHtml && !isTs && !isScss)
+                return;
+            const original = tree.readText(filePath);
+            let next = original;
+            if (isHtml)
+                next = apply(next, HTML_TRANSFORMS);
+            if (isTs)
+                next = apply(next, TS_TRANSFORMS);
+            if (isScss)
+                next = apply(next, SCSS_TRANSFORMS);
+            if (next !== original) {
+                tree.overwrite(filePath, next);
+                if (isHtml)
+                    summary.html += 1;
+                if (isTs)
+                    summary.ts += 1;
+                if (isScss)
+                    summary.scss += 1;
+            }
+            // Flag removed APIs (against the original — auto-fixes above don't touch them).
+            for (const { probe, note } of REMOVED_MARKERS) {
+                if (probe.test(original))
+                    warnings.push(`  ${filePath} — ${note}`);
+            }
+        });
+        context.logger.info(`ngwr v8 migration: rewrote ${summary.html} .html, ${summary.ts} .ts, ${summary.scss} stylesheet file(s) ` +
+            '(density compact/default/comfortable → sm/md/lg; pagination size xs/xl → sm/lg).');
+        if (warnings.length > 0) {
+            context.logger.warn(`\nngwr v8: ${warnings.length} usage(s) of REMOVED APIs need manual migration:\n${warnings.join('\n')}\n`);
+        }
+        context.logger.info('Verify the result with `git diff` — a few edge cases may need manual touch-up.');
+        return tree;
+    };
+}
+function apply(content, transforms) {
+    let next = content;
+    for (const { pattern, replacement } of transforms) {
+        next = next.replace(pattern, replacement);
+    }
+    return next;
+}
+function visit(tree, dir, visitor) {
+    const entry = tree.getDir(dir);
+    for (const file of entry.subfiles) {
+        visitor(`${dir === '/' ? '' : dir}/${file}`);
+    }
+    for (const sub of entry.subdirs) {
+        if (IGNORE_DIRS.has(sub))
+            continue;
+        visit(tree, `${dir === '/' ? '' : dir}/${sub}`, visitor);
+    }
+}
+exports.default = ngUpdateV8;

package/schematics/migrations/v9/index.js

@@ -0,0 +1,71 @@
+"use strict";
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Match `value` / `[value]` / `[(value)]` inside a `<wr-checkbox …>` open tag.
+ * `[^>]*?` stays inside the tag (it can't cross `>`), so the rename never
+ * escapes the element it's scoped to.
+ *
+ * The tag anchor is `(?![-\w])`, NOT `\b`: a word boundary still matches at
+ * `<wr-checkbox-group`, whose own `value` IS its form model (it is the group's
+ * `FormValueControl`) and must be left alone — renaming it would break every
+ * bound group.
+ */
+const CHECKBOX_TAG = String.raw `<wr-checkbox(?![-\w])[^>]*?\s`;
+const HTML_TRANSFORMS = [
+    // <wr-checkbox … value="x">  →  checkboxValue="x"
+    { pattern: new RegExp(`(${CHECKBOX_TAG})value=`, 'g'), replacement: '$1checkboxValue=' },
+    // <wr-checkbox … [value]="x">  →  [checkboxValue]="x"
+    { pattern: new RegExp(`(${CHECKBOX_TAG})\\[value\\]=`, 'g'), replacement: '$1[checkboxValue]=' },
+    // <wr-checkbox … [(value)]="x">  →  [(checkboxValue)]="x"
+    { pattern: new RegExp(`(${CHECKBOX_TAG})\\[\\(value\\)\\]=`, 'g'), replacement: '$1[(checkboxValue)]=' },
+];
+const IGNORE_DIRS = new Set(['node_modules', 'dist', '.git', '.cache', '.angular', 'coverage', '.next', '.nuxt']);
+function ngUpdateV9() {
+    return (tree, context) => {
+        let html = 0;
+        visit(tree, '/', filePath => {
+            const lower = filePath.toLowerCase();
+            // Inline templates live in .ts files too, so run the same element-scoped
+            // transforms there.
+            if (!lower.endsWith('.html') && !lower.endsWith('.ts'))
+                return;
+            const original = tree.readText(filePath);
+            const next = apply(original, HTML_TRANSFORMS);
+            if (next !== original) {
+                tree.overwrite(filePath, next);
+                html += 1;
+            }
+        });
+        context.logger.info(`ngwr v9 migration: rewrote ${html} file(s) (<wr-checkbox> value → checkboxValue).\n` +
+            'The standalone checkbox is now a signal-forms FormCheckboxControl: its form value is the ' +
+            'boolean `checked` model ([(checked)] / [formField] / [(ngModel)]), and the group-membership ' +
+            'identity is `checkboxValue`.');
+        context.logger.info('Verify the result with `git diff` — a few edge cases may need manual touch-up.');
+        return tree;
+    };
+}
+function apply(content, transforms) {
+    let next = content;
+    for (const { pattern, replacement } of transforms) {
+        next = next.replace(pattern, replacement);
+    }
+    return next;
+}
+function visit(tree, dir, visitor) {
+    const entry = tree.getDir(dir);
+    for (const file of entry.subfiles) {
+        visitor(`${dir === '/' ? '' : dir}/${file}`);
+    }
+    for (const sub of entry.subdirs) {
+        if (IGNORE_DIRS.has(sub))
+            continue;
+        visit(tree, `${dir === '/' ? '' : dir}/${sub}`, visitor);
+    }
+}
+exports.default = ngUpdateV9;

package/schematics/migrations.json

@@ -5,6 +5,16 @@
       "version": "7.0.0",
       "description": "Rewrite the v6 entry-points consolidated in v7: wr-autocomplete/chips-input \u2192 wr-select; wr-time-picker/date-time-picker \u2192 wr-date-picker; wr-tooltip \u2192 wr-popover; wr-tree-select \u2192 wr-tree; wr-bottom-sheet \u2192 wr-drawer; wr-count-up(-text) \u2192 wr-counter; ngwr/tag \u2192 ngwr/badge; wr-image \u2192 wr-lightbox; wr-animated-text \u2192 wr-typewriter/wr-decrypt-text/wr-split-text (per mode). Touches .html, .ts, and .scss files.",
       "factory": "./migrations/v7/index#default"
+    },
+    "migration-v8": {
+      "version": "8.0.0",
+      "description": "Rename density values compact/default/comfortable \u2192 sm/md/lg (wrDensity, provideWrDensity defaultDensity, [data-wr-density]); pagination size xs/xl \u2192 sm/lg. Warns about removed APIs (WrReveal directive, WrScrambleText / ngwr/scramble-text) that need manual migration. Touches .html, .ts, and .scss files.",
+      "factory": "./migrations/v8/index#default"
+    },
+    "migration-v9": {
+      "version": "9.0.0",
+      "description": "Rename the <wr-checkbox> group-membership input value \u2192 checkboxValue (also [value] / [(value)]). The standalone checkbox is now a signal-forms FormCheckboxControl whose contract reserves `value` for the form value \u2014 its boolean state is the `checked` model. Touches .html and .ts files.",
+      "factory": "./migrations/v9/index#default"
     }
   }
 }

package/schematics/ng-add/index.js

@@ -26,11 +26,11 @@ const DATE_ADAPTER_PROVIDER = {
     'date-fns': 'provideWrDateAdapter({ adapter: WrDateFnsAdapter })',
     luxon: 'provideWrDateAdapter({ adapter: WrLuxonAdapter })',
 };
-/** Density preset → `provideWrDensity(...)` call. */
+/** Default density → `provideWrDensity(...)` call. */
 const DENSITY_PROVIDER = {
     none: null,
-    comfortable: "provideWrDensity({ preset: 'comfortable' })",
-    compact: "provideWrDensity({ preset: 'compact' })",
+    sm: "provideWrDensity({ defaultDensity: 'sm' })",
+    lg: "provideWrDensity({ defaultDensity: 'lg' })",
 };
 /** Theme preset → `provideWrTheme(...)` call. */
 const THEME_PROVIDER = {

package/schematics/ng-add/schema.json

@@ -41,16 +41,16 @@
     },
     "density": {
       "type": "string",
-      "enum": ["none", "comfortable", "compact"],
+      "enum": ["none", "sm", "lg"],
       "default": "none",
-      "description": "Density preset wired via `provideWrDensity()`. `none` uses lib defaults.",
+      "description": "Default density wired via `provideWrDensity()`. `none` uses lib defaults (md).",
       "x-prompt": {
-        "message": "Pick a density preset",
+        "message": "Pick a default density",
         "type": "list",
         "items": [
-          { "value": "none", "label": "None — use lib defaults" },
-          { "value": "comfortable", "label": "Comfortable — relaxed spacing" },
-          { "value": "compact", "label": "Compact — tight spacing" }
+          { "value": "none", "label": "None — use lib defaults (md)" },
+          { "value": "sm", "label": "sm — tight spacing" },
+          { "value": "lg", "label": "lg — relaxed spacing" }
         ]
       }
     },
@@ -58,7 +58,7 @@
       "type": "string",
       "enum": ["none", "light", "dark", "system"],
       "default": "none",
-      "description": "Theme starter for `data-wr-theme` on `<html>`. `system` auto-switches via `prefers-color-scheme`.",
+      "description": "Theme starter for `data-theme` on `<html>`. `system` auto-switches via `prefers-color-scheme`.",
       "x-prompt": {
         "message": "Theme starter?",
         "type": "list",

package/schematics/provider/schema.json

@@ -29,7 +29,7 @@
           { "value": "toast", "label": "toast — global toast service" },
           { "value": "i18n", "label": "i18n — Transloco-class translation core" },
           { "value": "date-adapter", "label": "date-adapter — calendar / date-picker plumbing" },
-          { "value": "density", "label": "density — comfortable / compact preset" },
+          { "value": "density", "label": "density — sm / md / lg scale" },
           { "value": "loading-bar", "label": "loading-bar — router-aware progress bar" },
           { "value": "cookie", "label": "cookie — wr cookie service" },
           { "value": "storage", "label": "storage — swappable engine + TTL" },