ngwr 8.0.0 → 9.0.1

package/mention/styles/_index.scss

@@ -8,13 +8,13 @@
   display: block;
   min-width: 12rem;
   max-width: 20rem;
-  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);
   font-size: var(--wr-text-sm);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
   overflow: hidden;
 
   &__list {
@@ -40,7 +40,7 @@
 
   &__empty {
     padding: 0.5rem 0.75rem;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-sm);
     user-select: none;
   }

package/meter-group/styles/_index.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   gap: 0.5rem;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   &__bar {
     display: flex;
@@ -13,7 +13,7 @@
     height: 0.625rem;
     border-radius: var(--wr-border-radius-pill);
     overflow: hidden;
-    background: rgba(var(--wr-color-light-rgb), 0.5);
+    background: rgba(var(--wr-color-outline-rgb), 0.5);
   }
 
   &__slice {
@@ -40,7 +40,7 @@
     align-items: center;
     gap: 0.375rem;
     font-size: var(--wr-text-xs);
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
   }
 
   &__swatch {
@@ -55,7 +55,7 @@
   }
 
   &__legend-value {
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-variant-numeric: tabular-nums;
   }
 }

package/overlay/styles/_index.scss

@@ -10,8 +10,16 @@
   min-width: 0 !important;
   max-width: 100% !important;
   max-height: 90vh !important;
+  // Dynamic viewport height, and never taller than the space left above the
+  // on-screen keyboard (--wr-keyboard-inset, set by WrVisualViewport; 0 when
+  // there is no keyboard, on the server, or in browsers without the API).
+  max-height: calc(90dvh - var(--wr-keyboard-inset, 0px)) !important;
   border-radius: var(--wr-border-radius-lg) var(--wr-border-radius-lg) 0 0 !important;
   padding-bottom: env(safe-area-inset-bottom);
+  // Lift the bottom-pinned sheet clear of the keyboard. margin (not transform)
+  // so it doesn't fight the slide-up animation; transitions smoothly.
+  margin-bottom: var(--wr-keyboard-inset, 0px);
+  transition: margin-bottom var(--wr-overlay-duration, 0.2s) var(--wr-overlay-ease, ease-out);
   animation: wr-overlay-sheet-up var(--wr-overlay-duration, 0.2s) var(--wr-overlay-ease, ease-out) !important;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "8.0.0",
+  "version": "9.0.1",
   "license": "MIT",
   "description": "NGWR – Angular UI components library",
   "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev)",
@@ -82,6 +82,11 @@
     "./typography-utilities": {
       "sass": "./styles/_typography.scss"
     },
+    "./action-sheet": {
+      "sass": "./action-sheet/styles/_index.scss",
+      "types": "./types/ngwr-action-sheet.d.ts",
+      "default": "./fesm2022/ngwr-action-sheet.mjs"
+    },
     "./affix": {
       "sass": "./affix/styles/_index.scss",
       "types": "./types/ngwr-affix.d.ts",
@@ -232,6 +237,11 @@
       "types": "./types/ngwr-density.d.ts",
       "default": "./fesm2022/ngwr-density.mjs"
     },
+    "./descriptions": {
+      "sass": "./descriptions/styles/_index.scss",
+      "types": "./types/ngwr-descriptions.d.ts",
+      "default": "./fesm2022/ngwr-descriptions.mjs"
+    },
     "./dialog": {
       "sass": "./dialog/styles/_index.scss",
       "types": "./types/ngwr-dialog.d.ts",
@@ -337,6 +347,11 @@
       "types": "./types/ngwr-layout.d.ts",
       "default": "./fesm2022/ngwr-layout.mjs"
     },
+    "./lightbox": {
+      "sass": "./lightbox/styles/_index.scss",
+      "types": "./types/ngwr-lightbox.d.ts",
+      "default": "./fesm2022/ngwr-lightbox.mjs"
+    },
     "./line-chart": {
       "sass": "./line-chart/styles/_index.scss",
       "types": "./types/ngwr-line-chart.d.ts",
@@ -397,6 +412,11 @@
       "types": "./types/ngwr-progress.d.ts",
       "default": "./fesm2022/ngwr-progress.mjs"
     },
+    "./pull-to-refresh": {
+      "sass": "./pull-to-refresh/styles/_index.scss",
+      "types": "./types/ngwr-pull-to-refresh.d.ts",
+      "default": "./fesm2022/ngwr-pull-to-refresh.mjs"
+    },
     "./qr": {
       "sass": "./qr/styles/_index.scss",
       "types": "./types/ngwr-qr.d.ts",
@@ -599,10 +619,6 @@
       "types": "./types/ngwr-date-adapter-luxon.d.ts",
       "default": "./fesm2022/ngwr-date-adapter-luxon.mjs"
     },
-    "./descriptions": {
-      "types": "./types/ngwr-descriptions.d.ts",
-      "default": "./fesm2022/ngwr-descriptions.mjs"
-    },
     "./directives": {
       "types": "./types/ngwr-directives.d.ts",
       "default": "./fesm2022/ngwr-directives.mjs"
@@ -635,10 +651,6 @@
       "types": "./types/ngwr-icon-adapters-lucide.d.ts",
       "default": "./fesm2022/ngwr-icon-adapters-lucide.mjs"
     },
-    "./lightbox": {
-      "types": "./types/ngwr-lightbox.d.ts",
-      "default": "./fesm2022/ngwr-lightbox.mjs"
-    },
     "./media": {
       "types": "./types/ngwr-media.d.ts",
       "default": "./fesm2022/ngwr-media.mjs"

package/page-header/styles/_index.scss

@@ -9,7 +9,7 @@
   width: 100%;
   min-width: 0;
   padding: 1.5rem 0 1.25rem;
-  border-bottom: 1px solid var(--wr-color-light);
+  border-bottom: 1px solid var(--wr-color-outline);
   font-family: var(--wr-font-family-base);
 
   // Opt-in (`responsive`): query the box's own width so the title + actions row
@@ -21,7 +21,7 @@
 
   &__breadcrumbs {
     font-size: var(--wr-text-sm);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
 
     &:empty {
       display: none;
@@ -49,14 +49,14 @@
     font-weight: var(--wr-font-weight-bold);
     line-height: var(--wr-leading-tight);
     letter-spacing: -0.015em;
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
   }
 
   &__subtitle {
     margin: 0;
     font-size: var(--wr-text-base);
     line-height: var(--wr-leading-normal);
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
   }
 
   &__actions {

package/pagination/styles/_index.scss

@@ -34,7 +34,7 @@
   }
 
   &__total {
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-family: var(--wr-font-family-base);
     font-size: var(--wr-text-sm);
   }
@@ -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,7 +71,7 @@
     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: var(--wr-text-sm);
     font-variant-numeric: tabular-nums;

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;

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,7 +32,7 @@
   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);
@@ -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

@@ -4,10 +4,10 @@
   --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-white);
-  --wr-radio-border: var(--wr-color-light);
+  --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;
@@ -113,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;

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/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

@@ -10,6 +10,11 @@
       "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/schema.json

@@ -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/use/symbol-map.json

@@ -1,4 +1,6 @@
 {
+  "WrActionSheet": "ngwr/action-sheet",
+  "WrActionSheetAction": "ngwr/action-sheet",
   "WrAffix": "ngwr/affix",
   "WrAlert": "ngwr/alert",
   "WrAlertType": "ngwr/alert",
@@ -224,12 +226,16 @@
   "WrRange": "ngwr/pipes",
   "WrTruncate": "ngwr/pipes",
   "WrPlatform": "ngwr/platform",
+  "WrVisualViewport": "ngwr/platform",
+  "WrHaptics": "ngwr/platform",
+  "WrHapticImpact": "ngwr/platform",
   "WrPopconfirm": "ngwr/popconfirm",
   "WrPopconfirmPanel": "ngwr/popconfirm",
   "WrPopconfirmPosition": "ngwr/popconfirm",
   "WrPopover": "ngwr/popover",
   "WrPopoverPosition": "ngwr/popover",
   "WrProgress": "ngwr/progress",
+  "WrPullToRefresh": "ngwr/pull-to-refresh",
   "WrQr": "ngwr/qr",
   "WrQrErrorLevel": "ngwr/qr",
   "WrRadio": "ngwr/radio",
@@ -292,6 +298,7 @@
   "WrStarBorderRays": "ngwr/star-border",
   "WrStatistic": "ngwr/statistic",
   "WrStatisticCountdown": "ngwr/statistic",
+  "WrStatisticGroup": "ngwr/statistic",
   "WrStepper": "ngwr/stepper",
   "WrStep": "ngwr/stepper",
   "WrStepperContext": "ngwr/stepper",
@@ -303,15 +310,21 @@
   "WrSwitchSize": "ngwr/switch",
   "WrTable": "ngwr/table",
   "WrTableCell": "ngwr/table",
+  "WrTableExpand": "ngwr/table",
+  "WrTableGroupHeader": "ngwr/table",
   "WrTableSort": "ngwr/table",
   "WrTableFilter": "ngwr/table",
   "WrTableCellContext": "ngwr/table",
   "WrTableColumn": "ngwr/table",
   "WrTableColumns": "ngwr/table",
+  "WrTableCsvOptions": "ngwr/table",
+  "WrTableExpandContext": "ngwr/table",
   "WrTableFilterChange": "ngwr/table",
   "WrTableFilterItem": "ngwr/table",
+  "WrTableGroupContext": "ngwr/table",
   "WrTableSortState": "ngwr/table",
   "WrTableSortDirection": "ngwr/table",
+  "WrTableSummary": "ngwr/table",
   "WrTabs": "ngwr/tabs",
   "WrTab": "ngwr/tabs",
   "WrTabsContext": "ngwr/tabs",

package/segmented/styles/_index.scss

@@ -1,10 +1,10 @@
 @use '../../theme/styles' as theme;
 
 .wr-segmented {
-  --wr-segmented-bg: rgba(var(--wr-color-light-rgb), 0.4);
-  --wr-segmented-color: var(--wr-color-dark);
-  --wr-segmented-selected-bg: var(--wr-color-white);
-  --wr-segmented-selected-color: var(--wr-color-dark);
+  --wr-segmented-bg: rgba(var(--wr-color-outline-rgb), 0.4);
+  --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);
   --wr-segmented-radius: 0.5rem; // 8px track
   // Concentric thumb: outer − inset, so track and thumb corners nest naturally.
   --wr-segmented-thumb-radius: calc(var(--wr-segmented-radius) - var(--wr-segmented-padding));