ngwr 14.3.0 → 14.4.0

package/i18n/vi.json

@@ -85,7 +85,8 @@
     "selectAll": "Chọn tất cả",
     "toTarget": "Chuyển sang danh sách đã chọn",
     "toSource": "Chuyển về danh sách có sẵn",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "tùy chọn"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Bản đồ nhiệt theo lịch"
+    "label": "Bản đồ nhiệt theo lịch",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Biểu đồ đường",

package/i18n/zh-TW.json

@@ -85,7 +85,8 @@
     "selectAll": "全選",
     "toTarget": "移至已選項目",
     "toSource": "移回可選項目",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "選填"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "行事曆熱圖"
+    "label": "行事曆熱圖",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "折線圖",

package/i18n/zh.json

@@ -85,7 +85,8 @@
     "selectAll": "全选",
     "toTarget": "移至已选",
     "toSource": "移回待选",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "选填"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "日历热力图"
+    "label": "日历热力图",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "折线图",

package/input-otp/styles/_index.scss

@@ -41,7 +41,11 @@
       box-shadow var(--wr-transition-base);
 
     &::placeholder {
-      color: var(--wr-color-text-faint);
+      // Placeholder text is TEXT — 1.4.3 asks 4.5:1, and the faint tier gave it
+      // 2.43:1 in light. `--wr-color-text-muted` is the softest tier that still
+      // clears the bar, at 4.81:1, which is exactly what `_colors.scss` says it
+      // was calibrated for.
+      color: var(--wr-color-text-muted);
     }
 
     &:focus {

package/line-chart/styles/_index.scss

@@ -21,10 +21,12 @@
     font-size: var(--wr-text-xs);
   }
 
+  // A short line rather than a dot, because it now carries the series' dash
+  // pattern and a 10px circle cannot show one.
   &__swatch {
-    width: 0.625rem;
-    height: 0.625rem;
-    border-radius: 50%;
+    width: 1rem;
+    height: 0.125rem;
+    overflow: visible;
     flex: 0 0 auto;
   }
 

package/llms-full.txt

@@ -940,7 +940,7 @@
 - import: `import { WrSquircle } from 'ngwr/squircle'`
 - selector: `wr-squircle`, `[wrSquircle]`
 - exports: squirclePath, WrSquircleCorners, WrSquircle, WrSquircleCornerMask, WrSquircleHost
-- Figma-style smooth-corner rectangle. Standalone `<wr-squircle>` or `[wrSquircle]` directive that clips any element with a superellipse path. Re-computes on resize. The CSS-`corner-shape` route (via the `smooth-br` SCSS mixin) is also wired into most ngwr components — both paths are considered **experimental** while the underlying CSS spec stabilises.
+- Figma-style smooth-corner rectangle, clipped with a superellipse path and re-computed on resize. **Deprecated** — the native `corner-shape` route, which 31 entry points already ride through the `smooth-br` SCSS mixin, is the one to use. This entry point exists because that property was Chromium-only, and it will be removed in the major after Safari stable ships it. Until then it is still the only deterministic squircle, so it is deprecated rather than gone.
 
 ## ngwr/star-border
 - import: `import { WrStarBorder } from 'ngwr/star-border'`

package/markdown/styles/_index.scss

@@ -190,7 +190,10 @@
     border-radius: var(--wr-border-radius-sm);
     background: var(--wr-color-surface);
 
-    &--checked {
+    // color-ok: the nested `&::after` draws a tick out of two borders, and the
+  // unchecked task has no pseudo-element at all — the glyph appears, the tint
+  // only backs it.
+  &--checked {
       border-color: var(--wr-color-primary);
       background: var(--wr-color-primary);
 

package/mention/styles/_index.scss

@@ -50,11 +50,32 @@
     user-select: none;
     line-height: 1.25rem;
     transition: background var(--wr-transition-base);
+    // Positioning context for the `--active` cursor bar below. Nothing else in
+    // an option is out of flow, so this establishes one for that alone.
+    position: relative;
 
-    &--active,
     &:hover {
       background: rgba(var(--wr-color-primary-rgb), 0.08);
     }
+
+    // The keyboard cursor is NOT the hover tint — the two were one selector,
+    // so the row the arrows had reached and the row a mouse happened to rest
+    // on were the same pixel. The 8% tint alone measures 1.11:1 against the
+    // surface in light and 1.08:1 in dark, which is the same grey to a reader
+    // who cannot separate hue; the bar is what actually says "here".
+    &--active {
+      background: rgba(var(--wr-color-primary-rgb), 0.08);
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: 0;
+        width: 2px;
+        border-radius: inherit;
+        background: var(--wr-color-primary);
+      }
+    }
   }
 
   // Nothing renders this any more — the panel's empty branch was unreachable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "14.3.0",
+  "version": "14.4.0",
   "bin": {
     "ngwr-mcp": "mcp/server.js"
   },

package/radio/styles/_index.scss

@@ -94,6 +94,9 @@
     display: none;
   }
 
+  // color-ok: the cue is the glyph arriving — `.wr-radio__icon` goes from
+  // `opacity: 0` to `1` under `--checked` (line 109). This fill only backs it,
+  // since `--has-icon` turns the default dot off.
   &--has-icon.wr-radio--checked {
     --wr-radio-bg: var(--wr-color-primary);
   }

package/result/styles/_index.scss

@@ -47,18 +47,30 @@
     }
   }
 
+  // color-ok: each status draws its OWN glyph in result.html — a check, a
+  // triangle, a cross, an `i` — so these only ink a silhouette that already
+  // differs. The tint is reinforcement, not the signal.
   &--success &__icon {
     color: var(--wr-color-success-ink);
   }
 
+  // color-ok: each status draws its OWN glyph in result.html — a check, a
+  // triangle, a cross, an `i` — so these only ink a silhouette that already
+  // differs. The tint is reinforcement, not the signal.
   &--warning &__icon {
     color: var(--wr-color-warning-ink);
   }
 
+  // color-ok: each status draws its OWN glyph in result.html — a check, a
+  // triangle, a cross, an `i` — so these only ink a silhouette that already
+  // differs. The tint is reinforcement, not the signal.
   &--error &__icon {
     color: var(--wr-color-danger-ink);
   }
 
+  // color-ok: each status draws its OWN glyph in result.html — a check, a
+  // triangle, a cross, an `i` — so these only ink a silhouette that already
+  // differs. The tint is reinforcement, not the signal.
   &--info &__icon {
     // `-ink`, like the three variants above. This one alone carried the bare
     // intent, which is what made the set inconsistent rather than deliberate.

package/schematics/migrations/v14/index.js

@@ -9,11 +9,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * v13 to v14 migration. Two halves, and the split is deliberate.
  *
- * **It REWRITES the five renames**: on `<wr-alert>` from `closeable` to
+ * **It REWRITES the six renames**: on `<wr-alert>` from `closeable` to
  * `closable`, on `<wr-table>` from `[totalItems]` to `[total]`, on
  * `<wr-pagination>` from `[(currentPage)]` to `[(page)]`, from
- * `isDisabledWhenLoading` to `disabledWhenLoading`, and the window
- * `chromeSize` scale from `'compact' | 'normal'` to `'sm' | 'md'`. A rename is
+ * `isDisabledWhenLoading` to `disabledWhenLoading`, the window
+ * `chromeSize` scale from `'compact' | 'normal'` to `'sm' | 'md'`, and on
+ * `[wrInput]` from `wrSize` to `size` — the last one being the rename v13's own
+ * commit subject announced and never made, so leaving it out of the count here
+ * was the same omission running a second time. A rename is
  * exactly what a codemod does well: the new name means what the old one meant,
  * on the same element, and nothing about the app has to be understood to move it.
  *

package/schematics/migrations.json

@@ -28,7 +28,7 @@
     },
     "migration-v14": {
       "version": "14.0.0",
-      "description": "Rewrites five renames: on <wr-alert> from closeable to closable; on <wr-table> from totalItems to total; on <wr-pagination> from currentPage to page (and from currentPageChange to pageChange); from isDisabledWhenLoading to disabledWhenLoading; and the window chromeSize scale from compact/normal to sm/md, including the .wr-window--chrome-compact class. Reports what a codemod cannot decide: router integration is now opt-in (<wr-loading-bar> needs provideWrLoadingBarRouter() from ngwr/loading-bar/router, <wr-tab routerLink> needs wrTabsRouting on the strip plus WrTabsRouting in imports), the locale defaults now follow LOCALE_ID, and <wr-pagination ofLabel> is gone. Touches .ts, .html, .scss and .css files.",
+      "description": "Rewrites six renames: on <wr-alert> from closeable to closable; on <wr-table> from totalItems to total; on <wr-pagination> from currentPage to page (and from currentPageChange to pageChange); from isDisabledWhenLoading to disabledWhenLoading; the window chromeSize scale from compact/normal to sm/md, including the .wr-window--chrome-compact class; and on [wrInput] from wrSize to size. Reports what a codemod cannot decide: router integration is now opt-in (<wr-loading-bar> needs provideWrLoadingBarRouter() from ngwr/loading-bar/router, <wr-tab routerLink> needs wrTabsRouting on the strip plus WrTabsRouting in imports), the locale defaults now follow LOCALE_ID, and <wr-pagination ofLabel> is gone. Touches .ts, .html, .scss and .css files.",
       "factory": "./migrations/v14/index#default"
     }
   }

package/schematics/ng-add/index.js

@@ -57,7 +57,26 @@ const THEME_PROVIDER = {
     system: "provideWrTheme({ defaultMode: 'auto' })",
 };
 const STYLES_DIRECTIVE_SCSS = "@use 'ngwr';";
-const STYLES_DIRECTIVE_CSS = "@import 'ngwr';";
+/**
+ * What a project whose global stylesheet is plain CSS is told, instead of a
+ * line that cannot work.
+ *
+ * ngwr ships Sass SOURCES and no compiled CSS: every `exports` entry in
+ * `projects/lib/package.json` carries a `sass` condition and nothing else that
+ * a stylesheet can reach. So `@import 'ngwr'` from a `.css` file resolves
+ * through `default` to `fesm2022/ngwr.mjs` and esbuild — the bundler Angular 22
+ * uses — stops the build with `Cannot import ".../ngwr.mjs" into a CSS file`.
+ *
+ * That mattered more than it sounds: `ng new` takes CSS unless you ask for
+ * something else, so the default path was `ng add ngwr` followed by a build
+ * that failed, naming a `.mjs` nobody had typed. Writing nothing and saying why
+ * is the same choice the three branches below already make when they cannot
+ * find a stylesheet to edit.
+ */
+const CSS_PROJECT_ADVICE = 'ngwr ships Sass sources and no compiled CSS, so it cannot be reached from a plain CSS file. ' +
+    'Rename the global stylesheet to .scss (and update its path in angular.json), then add ' +
+    `\`${STYLES_DIRECTIVE_SCSS}\` to it — or keep CSS and pull in only what you use with ` +
+    '`ng g ngwr:component-style <name>`.';
 function ngAdd(options) {
     return (tree, context) => {
         return (0, schematics_1.chain)([installPeerDeps(options, context), registerStyles(options), printNextSteps(options, context)])(tree, context);
@@ -97,14 +116,19 @@ function registerStyles(options) {
     }
     return async (tree, context) => {
         const workspace = await (0, workspace_1.getWorkspace)(tree);
-        const projectName = options.project ?? workspace.extensions.defaultProject;
+        // Narrowed rather than read off the index signature directly: dotted access
+        // is what eslint asks for and what the lib's `noPropertyAccessFromIndexSignature`
+        // refuses, and this file has a spec now, so it is in that program.
+        const extensions = workspace.extensions;
+        const projectName = options.project ?? extensions.defaultProject;
         const project = (projectName && workspace.projects.get(projectName)) ?? workspace.projects.values().next().value;
         if (!project) {
             context.logger.warn('ngwr: no Angular project found — skipping styles wiring.');
             return tree;
         }
         const build = project.targets.get('build');
-        const styles = build?.options?.styles ?? [];
+        const buildOptions = (build?.options ?? {});
+        const styles = buildOptions.styles ?? [];
         const stylesPath = typeof styles[0] === 'string' ? styles[0] : styles[0]?.input;
         if (!stylesPath) {
             context.logger.warn(`ngwr: no global stylesheet found for project "${project.root || '<root>'}" — add \`${STYLES_DIRECTIVE_SCSS}\` manually.`);
@@ -114,8 +138,13 @@ function registerStyles(options) {
             context.logger.warn(`ngwr: styles file ${stylesPath} not found — add \`${STYLES_DIRECTIVE_SCSS}\` manually.`);
             return tree;
         }
-        const isCss = stylesPath.endsWith('.css') || stylesPath.endsWith('.less');
-        const directive = isCss ? STYLES_DIRECTIVE_CSS : STYLES_DIRECTIVE_SCSS;
+        // `.sass` is the indented syntax and takes `@use` like `.scss`; `.less` is
+        // the other one that cannot reach a Sass source.
+        if (stylesPath.endsWith('.css') || stylesPath.endsWith('.less')) {
+            context.logger.warn(`ngwr: ${stylesPath} is not Sass. ${CSS_PROJECT_ADVICE}`);
+            return tree;
+        }
+        const directive = STYLES_DIRECTIVE_SCSS;
         const existing = tree.readText(stylesPath);
         if (existing.includes(directive) || existing.includes("'ngwr'") || existing.includes('"ngwr"')) {
             context.logger.info(`ngwr: ${stylesPath} already imports ngwr — skipping.`);

package/segmented/styles/_index.scss

@@ -112,7 +112,10 @@
       color: var(--wr-color-primary-ink);
     }
 
-    &--selected {
+    // color-ok: the selected option is named by POSITION — the thumb pill slides
+  // under it on `--wr-segmented-thumb-index`, and is hidden outright while
+  // nothing is picked. This declaration only re-inks the label above it.
+  &--selected {
       color: var(--wr-segmented-selected-color);
     }
 

package/select/styles/_index.scss

@@ -100,6 +100,9 @@
     }
   }
 
+  // color-ok: opening attaches the panel and flips the chevron 180deg, so the
+  // state is a thing appearing and a glyph rotating; this only tints the edge
+  // underneath both.
   &--open &__trigger {
     border-color: var(--wr-color-primary);
     box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
@@ -454,12 +457,28 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    // Positioning context for the `--active` cursor bar below.
+    position: relative;
   }
 
   // Keyboard cursor highlight — the virtualized list is navigated by
-  // aria-activedescendant, so the active row needs a visible marker.
+  // aria-activedescendant, so real focus never lands on the row and the tint
+  // is all there was. `--wr-color-hover` is translucent and lands within about
+  // 1.1:1 of the panel behind it, which is the same grey to a reader who
+  // cannot separate hue — and it is the declaration `:hover` uses, so the row
+  // the arrows reached and a row under the mouse were indistinguishable. The
+  // bar is the channel; the tint stays as reinforcement.
   .wr-option--active {
     background: var(--wr-color-hover);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 0;
+      width: 2px;
+      background: var(--wr-color-primary);
+    }
   }
 }
 

package/statistic/styles/_index.scss

@@ -39,10 +39,14 @@
     font-weight: var(--wr-font-weight-semibold);
     font-variant-numeric: tabular-nums;
 
+    // color-ok: direction is DRAWN — statistic.html gives up and down two
+    // different triangle paths (apex up `M5 1 L9 8 L1 8 Z`, apex down
+    // `M5 9 L9 2 L1 2 Z`), and the value reads +12.4% against -0.4%.
     &--up {
       color: var(--wr-color-success-ink);
     }
 
+    // color-ok: see `--up` above — the two triangles point opposite ways.
     &--down {
       color: var(--wr-color-danger-ink);
     }

package/stepper/styles/_index.scss

@@ -136,12 +136,43 @@ $header-padding-block: 0.25rem;
       color var(--wr-transition-base);
   }
 
+  // The current step is the one state here with no glyph of its own: completed
+  // swaps the numeral for a tick, pending and unreachable keep the numeral, and
+  // active kept the numeral too — so it was a tinted circle beside a white one,
+  // 1.17:1, which is the same circle to a reader who cannot separate hue. The
+  // ring DOUBLES against the base rule's 1.5px, which is a weight rather than a
+  // colour and survives both greyscale and forced-colors.
   &__header--active &__indicator {
+    border-width: 3px;
     border-color: var(--wr-color-primary);
     color: var(--wr-color-primary-ink);
     background: var(--wr-color-primary-soft);
   }
 
+  // A step `linear` has not opened yet renders a DISABLED button that looked
+  // exactly like an available one. `--reachable` was bound in the template,
+  // asserted by a spec and read by the harness, and styled by nothing at all,
+  // so the only cue was `cursor: not-allowed` — which needs a pointer, and a
+  // touch device has none.
+  //
+  // The cue is the border STYLE, deliberately: `linear` refuses rather than
+  // greys, so dimming would contradict the contract, and a tint would be
+  // invisible to a reader who cannot separate hue.
+  //
+  // `--completed` is excluded because a completed circle is FILLED with
+  // `--wr-color-primary` and rings itself in the same colour, so dashes there
+  // would be dashes against their own fill — invisible, and pointless besides,
+  // since a step already carrying a tick does not need to be told it is shut.
+  // The rule does cover a step its own `disabled` input closed, in a stepper
+  // that is not `linear` at all: `isReachable` fails on `disabled` first
+  // (stepper.ts:126), and "you cannot go here" is the same news either way.
+  &__header:not(.wr-stepper__header--reachable):not(.wr-stepper__header--completed) &__indicator {
+    border-style: dashed;
+  }
+
+  // color-ok: a completed step swaps its numeral for a TICK (stepper.html:19),
+  // so the glyph already differs from every other state; this only fills the
+  // disc behind it.
   &__header--completed &__indicator {
     background: var(--wr-color-primary);
     border-color: var(--wr-color-primary);
@@ -173,6 +204,8 @@ $header-padding-block: 0.25rem;
     margin-block-start: calc((var(--wr-stepper-indicator-size) - #{$label-line-height}) / 2);
   }
 
+  // color-ok: the label follows the indicator beside it, which carries the
+  // state in its doubled ring — this is the same news, re-inked.
   &__header--active &__label {
     color: var(--wr-color-primary-ink);
   }
@@ -225,6 +258,9 @@ $header-padding-block: 0.25rem;
     flex: 0 0 auto;
   }
 
+  // color-ok: filled against unfilled is 3.29:1 in LIGHTNESS — primary #3969e2
+  // against the connector's default `--wr-color-outline` #cbd5e1 — so the trail
+  // of finished steps reads as a darker line, not merely a bluer one.
   &__header--completed + &__header &__connector,
   &__header--completed &__connector {
     background: var(--wr-color-primary);

package/switch/styles/_index.scss

@@ -84,6 +84,9 @@
     --wr-switch-line-height: var(--wr-control-line-height-lg);
   }
 
+  // color-ok: the knob TRAVELS — the nested `.wr-switch__thumb` rule moves
+  // `inset-inline-start` from one end of the track to the other. Position is
+  // the channel; the track colour follows it.
   &--checked {
     --wr-switch-bg: var(--wr-switch-bg-checked);
 

package/table/styles/_index.scss

@@ -213,6 +213,9 @@
     vertical-align: middle;
   }
 
+  // color-ok: the tick is the channel — a selected row's own `__td--select`
+  // cell holds a `<wr-checkbox>` bound to the same predicate as this class,
+  // and its mark appears. The tint is the reinforcement, not the signal.
   &__tr--selected,
   &__tr--selected:hover {
     background: var(--wr-color-primary-soft);
@@ -220,6 +223,9 @@
 
   // Pinned cells paint their own opaque background, so re-apply the selection
   // tint over it (same technique as the row-hover rule above).
+  // color-ok: the pinned cells repaint the row tint they sit in, and the row
+  // itself is marked by the selection checkbox in its `__td--select` cell —
+  // these follow that, they do not carry the state.
   &__tr--selected &__td--pin-left,
   &__tr--selected &__td--pin-right,
   &__tr--selected:hover &__td--pin-left,
@@ -758,6 +764,9 @@
   display: inline-flex;
   color: var(--wr-color-on-surface-muted);
 
+  // color-ok: the same `selectedCount() > 0` renders the `__count` numeral
+  // pill beside the funnel (table-filter.html:17) — a number appears where
+  // there was none.
   &--active {
     color: var(--wr-color-primary);
   }
@@ -850,6 +859,9 @@
     transition: var(--wr-transition-base);
   }
 
+  // color-ok: the tick APPEARS. The base `&__check` holds the same SVG at
+  // `color: transparent` (line 851), so this is a glyph arriving rather than
+  // a hue swapped.
   &__item--selected &__check {
     background: var(--wr-color-primary);
     border-color: var(--wr-color-primary);

package/tabs/styles/_index.scss

@@ -106,7 +106,10 @@
       color: var(--wr-tabs-color-hover);
     }
 
-    &--active {
+    // color-ok: the base tab already reserves `border-bottom: 2px solid
+  // transparent` (line 98), so colouring it paints an underline that no
+  // inactive tab carries — a mark appearing, not a hue swapped.
+  &--active {
       color: var(--wr-tabs-color-active);
       border-bottom-color: var(--wr-tabs-indicator);
     }

package/textarea/styles/_index.scss

@@ -103,7 +103,12 @@
     inset-inline-end: 0.25rem;
     bottom: 0.25rem;
     display: inline-flex;
-    color: var(--wr-color-text-faint);
+    // NOT `--wr-color-text-faint`, which is where this sat and measured 2.43:1
+    // in light. A resize grip is an interactive affordance, so WCAG 1.4.11 asks
+    // 3:1 of it — the faint tier is documented as "decorative by design", and
+    // this is not decorative. The full-strength role is 5.35:1 light and 7.64:1
+    // dark. No gate reports this: axe ships no non-text-contrast rule.
+    color: var(--wr-color-on-surface-muted);
     touch-action: none;
     transition: color var(--wr-transition-base);
 

package/theme/styles/_colors.scss

@@ -221,6 +221,17 @@ $contrast-light: #ffffff !default;
   // most softening that still clears it (4.81), which leaves this token barely
   // distinguishable from the flat role it wraps.
   --wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), 0.95);
+  // unused-ok: the library paints with nothing at this strength any more, and
+  // that is the finding rather than an oversight. It had exactly three
+  // consumers — the OTP placeholder, the textarea resize grip and the avatar
+  // spinner — and all three were FAILING: 2.43:1 in light, against 4.5:1 for
+  // placeholder text and 3:1 for an interactive affordance and a status
+  // indicator. "Decorative by design" was true of the token and not of any of
+  // the three, so they moved to `-text-muted` and `-on-surface-muted`. The tier
+  // stays published because a custom property is public API and a consumer may
+  // have genuinely decorative text; the library, it turns out, has none. Note
+  // that no gate reports the shortfall: axe has no non-text-contrast rule, and
+  // `check:contrast` gates on route counts.
   --wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), 0.6);
 
   // Semantic role aliases over the flipping neutrals — prefer these in new code