ngwr 14.3.1 → 14.5.0

package/i18n/pt.json

@@ -85,7 +85,8 @@
     "selectAll": "Selecionar tudo",
     "toTarget": "Mover para selecionados",
     "toSource": "Mover para disponíveis",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "opcional"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Mapa de calor do calendário"
+    "label": "Mapa de calor do calendário",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Gráfico de linhas",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Indicador"
   },
+  "graph": {
+    "label": "Grafo",
+    "parents": "Pais: {{names}}.",
+    "children": "Filhos: {{names}}."
+  },
   "progress": {
     "label": "Progresso"
   },

package/i18n/ru.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": "Линейный график",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Индикатор"
   },
+  "graph": {
+    "label": "Граф",
+    "parents": "Родители: {{names}}.",
+    "children": "Дети: {{names}}."
+  },
   "progress": {
     "label": "Прогресс"
   },

package/i18n/sv.json

@@ -85,7 +85,8 @@
     "selectAll": "Markera alla",
     "toTarget": "Flytta till valda",
     "toSource": "Flytta till tillgängliga",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "valfritt"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Kalendervärmekarta"
+    "label": "Kalendervärmekarta",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Linjediagram",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Mätare"
   },
+  "graph": {
+    "label": "Graf",
+    "parents": "Föräldrar: {{names}}.",
+    "children": "Barn: {{names}}."
+  },
   "progress": {
     "label": "Förlopp"
   },

package/i18n/tr.json

@@ -85,7 +85,8 @@
     "selectAll": "Tümünü seç",
     "toTarget": "Seçilenlere taşı",
     "toSource": "Kullanılabilirlere taşı",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "isteğe bağlı"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Takvim ısı haritası"
+    "label": "Takvim ısı haritası",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Çizgi grafiği",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Gösterge"
   },
+  "graph": {
+    "label": "Çizge",
+    "parents": "Üst öğeler: {{names}}.",
+    "children": "Alt öğeler: {{names}}."
+  },
   "progress": {
     "label": "İlerleme"
   },

package/i18n/uk.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": "Лінійний графік",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Індикатор"
   },
+  "graph": {
+    "label": "Граф",
+    "parents": "Батьки: {{names}}.",
+    "children": "Діти: {{names}}."
+  },
   "progress": {
     "label": "Хід виконання"
   },

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",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Đồng hồ đo"
   },
+  "graph": {
+    "label": "Đồ thị",
+    "parents": "Nút cha: {{names}}.",
+    "children": "Nút con: {{names}}."
+  },
   "progress": {
     "label": "Tiến trình"
   },

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": "折線圖",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "儀表"
   },
+  "graph": {
+    "label": "圖",
+    "parents": "父節點：{{names}}。",
+    "children": "子節點：{{names}}。"
+  },
   "progress": {
     "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": "折线图",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "仪表盘"
   },
+  "graph": {
+    "label": "图",
+    "parents": "父节点：{{names}}。",
+    "children": "子节点：{{names}}。"
+  },
   "progress": {
     "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

@@ -441,6 +441,16 @@
 - import: `import { WrGradientTextHarness } from 'ngwr/gradient-text/testing'`
 - exports: WrGradientTextHarness, WrGradientTextHarnessFilters
 
+## ngwr/graph
+- import: `import { WrGraph } from 'ngwr/graph'`
+- selector: `ng-template[wrGraphNode]`, `wr-graph`
+- exports: WrGraph, WrGraphNodeTemplate, WrGraphEdge, WrGraphNode, WrGraphNodeContext
+- Draws any graph of blocks joined parent to child — a node can have several parents as well as several children. The layout runs in layers from top to bottom without measuring anything, so a prerendered page ships the finished picture. Display only: the graph scrolls inside its own viewport, and nothing in it is selectable.
+
+## ngwr/graph/testing
+- import: `import { WrGraphHarness } from 'ngwr/graph/testing'`
+- exports: WrGraphHarness, WrGraphNodeHarness, WrGraphHarnessFilters, WrGraphNodeHarnessFilters
+
 ## ngwr/hotkey
 - import: `import { WrHotkey } from 'ngwr/hotkey'`
 - selector: `[wrHotkey]`
@@ -706,7 +716,7 @@
 
 ## ngwr/overlay
 - import: `import { WrOutsideClick } from 'ngwr/overlay'`
-- exports: wrAppendOverlayClose, wrMirrorOffsets, WrOutsideClick, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet, WrResponsiveOverlaysConfig
+- exports: wrAppendOverlayClose, wrFollowDirection, wrMirrorOffsets, WrOutsideClick, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet, WrResponsiveOverlaysConfig
 
 ## ngwr/page-header
 - import: `import { WrPageHeader } from 'ngwr/page-header'`
@@ -747,7 +757,7 @@
 - import: `import { WrPopover } from 'ngwr/popover'`
 - selector: `[wrPopover]`
 - exports: WrPopover, WrPopoverPosition
-- Anchored content panel. Project a template (popover) or pass a plain string (tooltip — use `mode="tooltip"`). Click, hover, or focus to open. Built on CDK Overlay.
+- Anchored content panel. Project a template (popover) or pass a plain string (tooltip — use `mode="tooltip"`). Click or hover to open; a tooltip also answers a keyboard focus. Built on CDK Overlay.
 
 ## ngwr/popover/testing
 - import: `import { WrPopoverHarness } from 'ngwr/popover/testing'`
@@ -940,7 +950,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/llms.txt

@@ -1,7 +1,7 @@
 # ngwr
 
 > Angular UI library — standalone, signals-first, zoneless, fully tree-shakable.
-> 225 secondary entry points, 174 component and directive classes, built on
+> 227 secondary entry points, 177 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
 
@@ -169,7 +169,9 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
 - **Data** — `wr-table` (column pin/resize/drag-reorder, row selection,
   expandable rows, grouping, tree rows (`childrenKey`), summary rows,
   CSV export, virtualized body),
-  `wr-pagination`, `wr-tree`, `wr-virtual-scroll`, `wr-sortable-list`
+  `wr-pagination`, `wr-tree`, `wr-graph` (read-only layered diagram: `nodes`
+  plus `{ from, to }` parent-to-child `edges`, each node a default card or an
+  `ng-template wrGraphNode`), `wr-virtual-scroll`, `wr-sortable-list`
   (drag-to-reorder, with `[wrDragHandle]` — both in ngwr/drag-drop).
 - **Feedback** — `wr-alert`, `wr-result`, `wr-empty`, `wr-skeleton`,
   `wr-spinner`.
@@ -238,17 +240,17 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
   `wr-tree` and `wr-select` (search mode), alongside the standalone
   `wr-virtual-scroll` wrapper.
 - **Testing** — CDK component harnesses ship beside the components they drive, at
-  `ngwr/<name>/testing`. 70 entry points so far, 104 exported harness names over
-  103 distinct classes — `WrCalendarDayHarness` ships under two, since a date
+  `ngwr/<name>/testing`. 71 entry points so far, 106 exported harness names over
+  105 distinct classes — `WrCalendarDayHarness` ships under two, since a date
   picker's popup IS a calendar — covering the
-  form controls, the overlays, both data views, the navigation / disclosure set
+  form controls, the overlays, the data views, the navigation / disclosure set
   (`tabs`, `stepper`, `carousel`, `pagination`, `segmented`, `collapse`,
   `transfer`) and `markdown`: the form controls
   (`button`, `input`, `textarea`, `checkbox`, `switch`, `radio`, `select`,
   `input-number`, `input-otp`, `slider`, `rating`, `file-upload`, `color-picker`,
   `knob`, `form` for `<wr-form-field>`), the overlays (`date-picker`, `dropdown`,
   `popover`, `dialog`, `drawer`, `action-sheet`, `toast`, `context-menu`, `popconfirm`,
-  `command-palette`, `cascader`, `mention`), the data views (`table`, `tree`),
+  `command-palette`, `cascader`, `mention`), the data views (`table`, `tree`, `graph`),
   `splitter`, `speed-dial`, `lightbox`, `tour`, `calendar`, `event-calendar`,
   `window`, `image-cropper`, every chart and eighteen of the twenty-one animations —
   every control, every overlay and every chart has one. `aurora`, `click-spark`,

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.1",
+  "version": "14.5.0",
   "bin": {
     "ngwr-mcp": "mcp/server.js"
   },
@@ -316,6 +316,11 @@
       "types": "./types/ngwr-gradient-text.d.ts",
       "default": "./fesm2022/ngwr-gradient-text.mjs"
     },
+    "./graph": {
+      "sass": "./graph/styles/_index.scss",
+      "types": "./types/ngwr-graph.d.ts",
+      "default": "./fesm2022/ngwr-graph.mjs"
+    },
     "./grid": {
       "sass": "./styles/_grid.scss"
     },
@@ -795,6 +800,10 @@
       "types": "./types/ngwr-gradient-text-testing.d.ts",
       "default": "./fesm2022/ngwr-gradient-text-testing.mjs"
     },
+    "./graph/testing": {
+      "types": "./types/ngwr-graph-testing.d.ts",
+      "default": "./fesm2022/ngwr-graph-testing.mjs"
+    },
     "./hotkey": {
       "types": "./types/ngwr-hotkey.d.ts",
       "default": "./fesm2022/ngwr-hotkey.mjs"

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

@@ -91,6 +91,8 @@
   "WrGauge": "ngwr/gauge",
   "WrGlitchText": "ngwr/glitch-text",
   "WrGradientText": "ngwr/gradient-text",
+  "WrGraph": "ngwr/graph",
+  "WrGraphNodeTemplate": "ngwr/graph",
   "WrHotkey": "ngwr/hotkey",
   "WrHotkeyBinding": "ngwr/hotkey",
   "WrI18n": "ngwr/i18n",

package/segmented/styles/_index.scss

@@ -70,6 +70,14 @@
     transition: transform 0.25s var(--wr-ease-out);
   }
 
+  // A direction flip mirrors the strip, which moves the thumb's slot by the whole
+  // width of it. Animated, that drags the pill across options it does not mark;
+  // the component sets this class for the tick the flip lands in so the pill is
+  // simply already there. Selection changes keep their slide.
+  &--flipping &__thumb {
+    transition: none;
+  }
+
   &--unselected &__thumb {
     opacity: 0;
   }
@@ -112,7 +120,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);
     }