ngwr 14.4.0 → 14.5.0

package/graph/styles/_index.scss

@@ -0,0 +1,113 @@
+@use '../../theme/styles' as theme;
+
+.wr-graph {
+  // The scroller's ground and its breathing room around the drawing.
+  --wr-graph-background: var(--wr-color-surface);
+  --wr-graph-padding: 1rem;
+  // Lines and arrowheads are kept quiet beside the cards: 60% of the muted role
+  // over the surface, 2.44:1 on white and 3.47:1 on the dark canvas (token
+  // arithmetic — no contrast gate measures an SVG stroke). That is under the 3:1
+  // WCAG 1.4.11 asks of a meaningful graphic in the light theme, and it is a
+  // maintainer's call rather than an oversight: every relation a line draws is
+  // also written out for assistive technology, and a consumer who needs the
+  // stronger line restores it through this hook.
+  --wr-graph-edge-color: color-mix(in srgb, var(--wr-color-on-surface-muted) 60%, var(--wr-color-surface));
+  // A whole pixel: a fractional stroke is antialiased into a smear that changes
+  // with the device pixel ratio, where a lighter colour stays crisp everywhere.
+  --wr-graph-edge-width: 1px;
+  // The default card, drawn when no `ng-template[wrGraphNode]` is given.
+  --wr-graph-card-background: var(--wr-color-surface);
+  --wr-graph-card-color: var(--wr-color-on-surface);
+  --wr-graph-card-border: var(--wr-color-outline);
+  --wr-graph-card-radius: var(--wr-border-radius-base);
+  --wr-graph-card-padding: 0.5rem 0.75rem;
+  --wr-graph-card-font-size: var(--wr-text-sm);
+
+  display: block;
+  // A grid or flex item's automatic minimum width is its min-content width, and
+  // the stage below is sized inline to the whole drawing — so without this the
+  // host refuses to shrink, stretches its track and the PAGE scrolls sideways.
+  // Zero lets the track decide, and the viewport's `overflow: auto` takes over.
+  min-width: 0;
+  max-width: 100%;
+  font-family: var(--wr-font-family-base);
+
+  // The component scrolls, never the page. `height: 100%` lets a host with a
+  // height constrain it; with no height it simply grows to the drawing.
+  &__viewport {
+    box-sizing: border-box;
+    max-width: 100%;
+    height: 100%;
+    padding: var(--wr-graph-padding);
+    overflow: auto;
+    background: var(--wr-graph-background);
+    border-radius: var(--wr-border-radius-base);
+  }
+
+  // Sized inline from the layout, so the scroll extent is known without measuring.
+  &__stage {
+    position: relative;
+  }
+
+  &__edges,
+  &__node {
+    position: absolute;
+    top: 0;
+    // rtl-ok: x is mirrored in TypeScript for RTL, so the origin stays the physical left edge
+    left: 0;
+  }
+
+  &__edges {
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  &__edge {
+    fill: none;
+    stroke: var(--wr-graph-edge-color);
+    stroke-width: var(--wr-graph-edge-width);
+    stroke-linejoin: round;
+  }
+
+  // The arrowhead. Marker content inherits from the marker's own ancestors, which
+  // is why it takes the hook here rather than from the path that references it.
+  &__edges marker polygon {
+    fill: var(--wr-graph-edge-color);
+  }
+
+  &__node {
+    box-sizing: border-box;
+  }
+
+  &__card {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: var(--wr-graph-card-padding);
+    overflow: hidden;
+    color: var(--wr-graph-card-color);
+    font-size: var(--wr-graph-card-font-size);
+    line-height: 1.25;
+    text-align: center;
+    overflow-wrap: anywhere;
+    background: var(--wr-graph-card-background);
+    border: 1px solid var(--wr-graph-card-border);
+    border-radius: var(--wr-graph-card-radius);
+  }
+
+  // Each node's parents and children: read out, never drawn.
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}

package/i18n/ar.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "عداد"
   },
+  "graph": {
+    "label": "مخطط",
+    "parents": "الآباء: {{names}}.",
+    "children": "الأبناء: {{names}}."
+  },
   "progress": {
     "label": "التقدم"
   },

package/i18n/cs.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Ukazatel"
   },
+  "graph": {
+    "label": "Graf",
+    "parents": "Rodiče: {{names}}.",
+    "children": "Potomci: {{names}}."
+  },
   "progress": {
     "label": "Průběh"
   },

package/i18n/de.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Messanzeige"
   },
+  "graph": {
+    "label": "Graph",
+    "parents": "Übergeordnet: {{names}}.",
+    "children": "Untergeordnet: {{names}}."
+  },
   "progress": {
     "label": "Fortschritt"
   },

package/i18n/en.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Gauge"
   },
+  "graph": {
+    "label": "Graph",
+    "parents": "Parents: {{names}}.",
+    "children": "Children: {{names}}."
+  },
   "progress": {
     "label": "Progress"
   },

package/i18n/es.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Indicador"
   },
+  "graph": {
+    "label": "Grafo",
+    "parents": "Padres: {{names}}.",
+    "children": "Hijos: {{names}}."
+  },
   "progress": {
     "label": "Progreso"
   },

package/i18n/fr.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Jauge"
   },
+  "graph": {
+    "label": "Graphe",
+    "parents": "Parents : {{names}}.",
+    "children": "Enfants : {{names}}."
+  },
   "progress": {
     "label": "Progression"
   },

package/i18n/he.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "מחוון"
   },
+  "graph": {
+    "label": "גרף",
+    "parents": "הורים: {{names}}.",
+    "children": "ילדים: {{names}}."
+  },
   "progress": {
     "label": "התקדמות"
   },

package/i18n/hi.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "गेज"
   },
+  "graph": {
+    "label": "ग्राफ़",
+    "parents": "पैरेंट: {{names}}।",
+    "children": "चाइल्ड: {{names}}।"
+  },
   "progress": {
     "label": "प्रगति"
   },

package/i18n/id.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Pengukur"
   },
+  "graph": {
+    "label": "Graf",
+    "parents": "Induk: {{names}}.",
+    "children": "Anak: {{names}}."
+  },
   "progress": {
     "label": "Kemajuan"
   },

package/i18n/it.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Indicatore"
   },
+  "graph": {
+    "label": "Grafo",
+    "parents": "Genitori: {{names}}.",
+    "children": "Figli: {{names}}."
+  },
   "progress": {
     "label": "Avanzamento"
   },

package/i18n/ja.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "ゲージ"
   },
+  "graph": {
+    "label": "グラフ",
+    "parents": "親：{{names}}。",
+    "children": "子：{{names}}。"
+  },
   "progress": {
     "label": "進行状況"
   },

package/i18n/ko.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "게이지"
   },
+  "graph": {
+    "label": "그래프",
+    "parents": "상위 항목: {{names}}.",
+    "children": "하위 항목: {{names}}."
+  },
   "progress": {
     "label": "진행률"
   },

package/i18n/nl.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Meter"
   },
+  "graph": {
+    "label": "Graaf",
+    "parents": "Ouders: {{names}}.",
+    "children": "Kinderen: {{names}}."
+  },
   "progress": {
     "label": "Voortgang"
   },

package/i18n/pl.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Wskaźnik"
   },
+  "graph": {
+    "label": "Graf",
+    "parents": "Rodzice: {{names}}.",
+    "children": "Dzieci: {{names}}."
+  },
   "progress": {
     "label": "Postęp"
   },

package/i18n/pt.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Indicador"
   },
+  "graph": {
+    "label": "Grafo",
+    "parents": "Pais: {{names}}.",
+    "children": "Filhos: {{names}}."
+  },
   "progress": {
     "label": "Progresso"
   },

package/i18n/ru.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Индикатор"
   },
+  "graph": {
+    "label": "Граф",
+    "parents": "Родители: {{names}}.",
+    "children": "Дети: {{names}}."
+  },
   "progress": {
     "label": "Прогресс"
   },

package/i18n/sv.json

@@ -346,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

@@ -346,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

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Індикатор"
   },
+  "graph": {
+    "label": "Граф",
+    "parents": "Батьки: {{names}}.",
+    "children": "Діти: {{names}}."
+  },
   "progress": {
     "label": "Хід виконання"
   },

package/i18n/vi.json

@@ -346,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

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "儀表"
   },
+  "graph": {
+    "label": "圖",
+    "parents": "父節點：{{names}}。",
+    "children": "子節點：{{names}}。"
+  },
   "progress": {
     "label": "進度"
   },

package/i18n/zh.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "仪表盘"
   },
+  "graph": {
+    "label": "图",
+    "parents": "父节点：{{names}}。",
+    "children": "子节点：{{names}}。"
+  },
   "progress": {
     "label": "进度"
   },

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'`

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "14.4.0",
+  "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/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;
   }

package/skills/ngwr/SKILL.md

@@ -5,7 +5,7 @@ description: Build Angular UIs with the ngwr component library (standalone, sign
 
 # ngwr
 
-An Angular 22 UI library: 225 tree-shakable entry points, 112 of them shipping a selector.
+An Angular 22 UI library: 227 tree-shakable entry points, 113 of them shipping a selector.
 Standalone, signals-first, zoneless, `ViewEncapsulation.None`. One runtime
 dependency (`tslib`).
 

package/skills/ngwr/references/catalog.md

@@ -89,6 +89,8 @@ root barrel for components.
 | `ngwr/glitch-text/testing` | `import { WrGlitchTextHarness } from 'ngwr/glitch-text/testing'` | — |
 | `ngwr/gradient-text` | `import { WrGradientText } from 'ngwr/gradient-text'` | `wr-gradient-text` |
 | `ngwr/gradient-text/testing` | `import { WrGradientTextHarness } from 'ngwr/gradient-text/testing'` | — |
+| `ngwr/graph` | `import { WrGraph } from 'ngwr/graph'` | `ng-template[wrGraphNode]` `wr-graph` |
+| `ngwr/graph/testing` | `import { WrGraphHarness } from 'ngwr/graph/testing'` | — |
 | `ngwr/hotkey` | `import { WrHotkey } from 'ngwr/hotkey'` | `[wrHotkey]` |
 | `ngwr/i18n` | `import { WrI18n } from 'ngwr/i18n'` | `[wrT]` |
 | `ngwr/i18n/ar` | `import { wrAr } from 'ngwr/i18n/ar'` | — |

package/styles.scss

@@ -61,6 +61,7 @@
 @forward './gauge/styles';
 @forward './glitch-text/styles';
 @forward './gradient-text/styles';
+@forward './graph/styles';
 @forward './icon/styles';
 @forward './image-cropper/styles';
 @forward './input/styles';

package/theme/styles/_focus.scss

@@ -164,3 +164,10 @@
 .wr-alert__close:focus-visible {
   @include focus-ring;
 }
+
+// Graph viewport — the scroller is the graph's one tab stop, so a keyboard user
+// scrolling it needs to see where focus is. Safe as an OUTSET ring: the outline
+// sits outside the scroller's own box, and `.wr-graph` sets no `overflow`.
+.wr-graph__viewport:focus-visible {
+  @include focus-ring;
+}

package/types/ngwr-cascader.d.ts

@@ -133,6 +133,13 @@ declare class WrCascader<T = string> implements FormValueControl<unknown> {
     private readonly scrollStrategies;
     private readonly destroyRef;
     private readonly injector;
+    /**
+     * Ambient reading direction, for the open panel alone — nothing in this
+     * component reads it directly. Optional so a bare `TestBed` needs no
+     * provider; `Directionality` is root-provided anyway, and a missing one
+     * simply reads as `ltr`.
+     */
+    private readonly dir;
     private overlayRef;
     constructor();
     protected onTriggerClick(): void;

package/types/ngwr-color-picker.d.ts

@@ -415,6 +415,14 @@ declare class WrColorPickerTrigger {
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;
+    private readonly injector;
+    /**
+     * Ambient reading direction, for the open panel alone — nothing in this
+     * directive reads it directly. Optional so a bare `TestBed` needs no
+     * provider; `Directionality` is root-provided anyway, and a missing one
+     * simply reads as `ltr`.
+     */
+    private readonly dir;
     protected readonly isOpen: _angular_core.WritableSignal<boolean>;
     private overlayRef;
     /** @internal Public so the host binding can read it. */

package/types/ngwr-context-menu.d.ts

@@ -44,9 +44,18 @@ declare class WrContextMenu {
     readonly menu: _angular_core.InputSignal<WrContextMenuPanel>;
     private readonly host;
     private readonly overlay;
+    /**
+     * The reading direction the open menu has to keep up with.
+     *
+     * Optional inject, as on every other overlay here: `Directionality` is
+     * root-provided and so never null in an app, but a bare `TestBed` that
+     * provides nothing should still get a menu that opens.
+     */
+    private readonly dir;
     private readonly outsideClick;
     private readonly vcr;
     private readonly scrollStrategies;
+    private readonly injector;
     private readonly destroyRef;
     /**
      * Id of the menu element while this trigger's menu is open, published on the
@@ -219,6 +228,7 @@ declare class WrContextMenuItem {
     private readonly dir;
     private readonly vcr;
     private readonly scrollStrategies;
+    private readonly injector;
     private readonly destroyRef;
     private submenuRef;
     private submenuKeys;