ngwr 14.3.1 → 14.5.0

package/form/styles/_index.scss

@@ -88,6 +88,10 @@
   }
 
   // Visual states — invalid stripes the projected control too.
+  // color-ok: `danger` against the default `--wr-color-outline` separates in
+  // LIGHTNESS, not only in hue — 3.11:1 in light — so unlike two intents
+  // compared with each other this survives greyscale, and the error MESSAGE
+  // the field renders below is the channel that does the real work.
   &--invalid &__control input,
   &--invalid &__control textarea,
   &--invalid &__control select,
@@ -96,4 +100,63 @@
   &--invalid &__control .wr-select__trigger {
     border-color: var(--wr-color-danger);
   }
+
+  // The three the rule above cannot reach, each for its own reason, and each
+  // of which showed NOTHING in the error state — not a weak cue, none at all.
+  //
+  // `wr-input-group` owns the border on the WRAPPER and strips it from the
+  // inner control on purpose, so recolouring `input` repainted a border that
+  // is not there. The checkbox and the radio never had one to repaint: their
+  // box is a `<span>`, and the field could only reach a native control.
+  //
+  // Each publishes its own border hook, so this sets the hook rather than the
+  // property — the component keeps deciding where its border lives.
+  //
+  // Worth stating because the rest of this audit ran the other way: `danger`
+  // against `outline` separates in LIGHTNESS, not only in hue — 3.11:1 light,
+  // 2.90:1 dark — so unlike two intents compared with each other, this cue
+  // mostly survives a reader who cannot separate hue. Mostly: the dark figure
+  // is under the 3:1 that WCAG 1.4.11 asks of a control boundary, which is the
+  // same shortfall `--wr-color-outline` carries by decision, and it is the
+  // message underneath that does the load-bearing work either way.
+  //
+  // THE HOOK HAS TO LAND ON THE ELEMENT THAT READS IT. The checkbox declares
+  // `--wr-checkbox-border` on its host and reads it on `__box`; its own hover
+  // rule declares the same hook ON `__box`. A custom property resolves per
+  // element, so a declaration matching the element beats an inherited one from
+  // any ancestor no matter how specific that ancestor's rule is — the first
+  // version of this block set the hook on the host only, and hovering an
+  // invalid checkbox turned it back to primary. Naming the inner element takes
+  // the selector to (0,4,0), which outranks the component's (0,3,0) hover.
+  // color-ok: `danger` against the default `--wr-color-outline` separates in
+  // LIGHTNESS, not only in hue — 3.11:1 in light — so unlike two intents
+  // compared with each other this survives greyscale, and the error MESSAGE
+  // the field renders below is the channel that does the real work.
+  &--invalid &__control .wr-input-group {
+    --wr-input-group-border: var(--wr-color-danger);
+  }
+
+  // This DOES reach every box of a `<wr-checkbox-group>`, while `checkbox.ts`
+  // deliberately suppresses `aria-invalid` on the same boxes — and the two are
+  // not in conflict. A screen reader reads nine boxes SERIALLY, so nine
+  // announcements of one group error is nine times the cost; an eye takes nine
+  // red boxes in at once and reads one signal. The reason the ARIA rule exists
+  // does not transfer to the visual channel.
+  // color-ok: `danger` against the default `--wr-color-outline` separates in
+  // LIGHTNESS, not only in hue — 3.11:1 in light — so unlike two intents
+  // compared with each other this survives greyscale, and the error MESSAGE
+  // the field renders below is the channel that does the real work.
+  &--invalid &__control .wr-checkbox,
+  &--invalid &__control .wr-checkbox .wr-checkbox__box {
+    --wr-checkbox-border: var(--wr-color-danger);
+  }
+
+  // color-ok: `danger` against the default `--wr-color-outline` separates in
+  // LIGHTNESS, not only in hue — 3.11:1 in light — so unlike two intents
+  // compared with each other this survives greyscale, and the error MESSAGE
+  // the field renders below is the channel that does the real work.
+  &--invalid &__control .wr-radio,
+  &--invalid &__control .wr-radio .wr-radio__dot {
+    --wr-radio-border: var(--wr-color-danger);
+  }
 }

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

@@ -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/cs.json

@@ -85,7 +85,8 @@
     "selectAll": "Vybrat vše",
     "toTarget": "Přesunout mezi vybrané",
     "toSource": "Vrátit mezi dostupné",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "nepovinné"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Kalendářní tepelná mapa"
+    "label": "Kalendářní tepelná mapa",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Spojnicový graf",
@@ -344,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

@@ -85,7 +85,8 @@
     "selectAll": "Alle auswählen",
     "toTarget": "Zur Auswahl hinzufügen",
     "toSource": "Aus der Auswahl entfernen",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "optional"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Kalender-Heatmap"
+    "label": "Kalender-Heatmap",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Liniendiagramm",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Messanzeige"
   },
+  "graph": {
+    "label": "Graph",
+    "parents": "Übergeordnet: {{names}}.",
+    "children": "Untergeordnet: {{names}}."
+  },
   "progress": {
     "label": "Fortschritt"
   },

package/i18n/en.json

@@ -85,7 +85,8 @@
     "selectAll": "Select all",
     "toTarget": "Move to selected",
     "toSource": "Move to available",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "optional"
@@ -94,8 +95,8 @@
     "required": "This field is required.",
     "requiredTrue": "This field must be checked.",
     "email": "Enter a valid email address.",
-    "minlength": "Enter at least {{requiredLength}} characters.",
-    "maxlength": "Enter at most {{requiredLength}} characters.",
+    "minlength": "Minimum length is {{requiredLength}}.",
+    "maxlength": "Maximum length is {{requiredLength}}.",
     "min": "Enter {{min}} or more.",
     "max": "Enter {{max}} or less.",
     "pattern": "This value is not in the expected format.",
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Calendar heatmap"
+    "label": "Calendar heatmap",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Line chart",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Gauge"
   },
+  "graph": {
+    "label": "Graph",
+    "parents": "Parents: {{names}}.",
+    "children": "Children: {{names}}."
+  },
   "progress": {
     "label": "Progress"
   },

package/i18n/es.json

@@ -85,7 +85,8 @@
     "selectAll": "Seleccionar todo",
     "toTarget": "Mover a seleccionados",
     "toSource": "Mover a disponibles",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "opcional"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Mapa de calor del calendario"
+    "label": "Mapa de calor del calendario",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Gráfico de líneas",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Indicador"
   },
+  "graph": {
+    "label": "Grafo",
+    "parents": "Padres: {{names}}.",
+    "children": "Hijos: {{names}}."
+  },
   "progress": {
     "label": "Progreso"
   },

package/i18n/fr.json

@@ -85,7 +85,8 @@
     "selectAll": "Tout sélectionner",
     "toTarget": "Déplacer vers les sélectionnés",
     "toSource": "Déplacer vers les disponibles",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "facultatif"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Carte de chaleur du calendrier"
+    "label": "Carte de chaleur du calendrier",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Graphique en courbes",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Jauge"
   },
+  "graph": {
+    "label": "Graphe",
+    "parents": "Parents : {{names}}.",
+    "children": "Enfants : {{names}}."
+  },
   "progress": {
     "label": "Progression"
   },

package/i18n/he.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/hi.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/id.json

@@ -85,7 +85,8 @@
     "selectAll": "Pilih semua",
     "toTarget": "Pindahkan ke daftar terpilih",
     "toSource": "Pindahkan ke daftar tersedia",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "opsional"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Peta panas kalender"
+    "label": "Peta panas kalender",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Diagram garis",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Pengukur"
   },
+  "graph": {
+    "label": "Graf",
+    "parents": "Induk: {{names}}.",
+    "children": "Anak: {{names}}."
+  },
   "progress": {
     "label": "Kemajuan"
   },

package/i18n/it.json

@@ -85,7 +85,8 @@
     "selectAll": "Seleziona tutto",
     "toTarget": "Sposta tra i selezionati",
     "toSource": "Sposta tra i disponibili",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "facoltativo"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Mappa di calore del calendario"
+    "label": "Mappa di calore del calendario",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Grafico a linee",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Indicatore"
   },
+  "graph": {
+    "label": "Grafo",
+    "parents": "Genitori: {{names}}.",
+    "children": "Figli: {{names}}."
+  },
   "progress": {
     "label": "Avanzamento"
   },

package/i18n/ja.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/ko.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/nl.json

@@ -85,7 +85,8 @@
     "selectAll": "Alles selecteren",
     "toTarget": "Toevoegen aan selectie",
     "toSource": "Verwijderen uit selectie",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "optioneel"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Kalenderheatmap"
+    "label": "Kalenderheatmap",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Lijndiagram",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Meter"
   },
+  "graph": {
+    "label": "Graaf",
+    "parents": "Ouders: {{names}}.",
+    "children": "Kinderen: {{names}}."
+  },
   "progress": {
     "label": "Voortgang"
   },

package/i18n/pl.json

@@ -85,7 +85,8 @@
     "selectAll": "Zaznacz wszystko",
     "toTarget": "Przenieś do wybranych",
     "toSource": "Przenieś do dostępnych",
-    "count": "{{checked}} / {{total}}"
+    "count": "{{checked}} / {{total}}",
+    "selectAllAria": "{{pane}} — {{action}}"
   },
   "form": {
     "optional": "opcjonalnie"
@@ -235,7 +236,8 @@
     "channelAlpha": "A%"
   },
   "calendarHeatmap": {
-    "label": "Mapa cieplna kalendarza"
+    "label": "Mapa cieplna kalendarza",
+    "cell": "{{date}}: {{count}}"
   },
   "lineChart": {
     "label": "Wykres liniowy",
@@ -344,6 +346,11 @@
   "gauge": {
     "label": "Wskaźnik"
   },
+  "graph": {
+    "label": "Graf",
+    "parents": "Rodzice: {{names}}.",
+    "children": "Dzieci: {{names}}."
+  },
   "progress": {
     "label": "Postęp"
   },