ngwr 14.7.0 → 14.8.0

package/fesm2022/ngwr-toolbar.mjs

@@ -12,6 +12,13 @@ import { input, ViewEncapsulation, Component } from '@angular/core';
  * Action bar with three named zones — `[wrToolbarStart]`,
  * `[wrToolbarCenter]`, `[wrToolbarEnd]`. Use any one or all three.
  *
+ * A bare `<div>` wrapper in a zone, one with no `class` and no `style`, is laid
+ * out as a wrapping row with the zone's own gap, so the controls inside it are
+ * spaced exactly like controls projected one by one. The gap follows
+ * `--wr-density-gap`. Give the wrapper a class or a style and its layout is
+ * yours: the toolbar sets nothing on it. Put running text in a `<span>` or a
+ * `<p>`, which stay in inline flow.
+ *
  * @example
  * ```html
  * <wr-toolbar>

package/fesm2022/ngwr-toolbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-toolbar.mjs","sources":["../../../projects/lib/toolbar/toolbar.ts","../../../projects/lib/toolbar/toolbar.html","../../../projects/lib/toolbar/ngwr-toolbar.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, input } from '@angular/core';\n\n/**\n * Action bar with three named zones — `[wrToolbarStart]`,\n * `[wrToolbarCenter]`, `[wrToolbarEnd]`. Use any one or all three.\n *\n * @example\n * ```html\n * <wr-toolbar>\n *   <div wrToolbarStart>\n *     <button wr-btn>Back</button>\n *     <strong>Items</strong>\n *   </div>\n *   <div wrToolbarCenter>\n *     <wr-segmented [(value)]=\"view\" [options]=\"['grid', 'list']\" />\n *   </div>\n *   <div wrToolbarEnd>\n *     <button wr-btn color=\"primary\">New</button>\n *   </div>\n * </wr-toolbar>\n * ```\n *\n * @see https://ngwr.dev/reference/components/toolbar\n */\n@Component({\n  selector: 'wr-toolbar',\n  templateUrl: './toolbar.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-toolbar', role: 'toolbar', '[class.wr-toolbar--responsive]': 'responsive()' },\n})\nexport class WrToolbar {\n  /**\n   * Stack the zones vertically when the toolbar's own box is too narrow to fit\n   * them in a row (a container query on its own width, not the viewport — so it\n   * adapts inside a narrow column or split pane). @default false\n   */\n  readonly responsive = input(false, { transform: coerceBooleanProperty });\n}\n","<div class=\"wr-toolbar__zone wr-toolbar__zone--start\">\n  <ng-content select=\"[wrToolbarStart]\" />\n</div>\n<div class=\"wr-toolbar__zone wr-toolbar__zone--center\">\n  <ng-content select=\"[wrToolbarCenter]\" />\n</div>\n<div class=\"wr-toolbar__zone wr-toolbar__zone--end\">\n  <ng-content select=\"[wrToolbarEnd]\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAKH;;;;;;;;;;;;;;;;;;;;;AAqBG;MAOU,SAAS,CAAA;AACpB;;;;AAIG;IACM,UAAU,GAAG,KAAK,CAAC,KAAK,kFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;uGAN7D,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,oWCtCtB,gVASA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FD6Ba,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,iBAEP,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,gCAAgC,EAAE,cAAc,EAAE,EAAA,QAAA,EAAA,gVAAA,EAAA;;;AEpClG;;AAEG;;;;"}
+{"version":3,"file":"ngwr-toolbar.mjs","sources":["../../../projects/lib/toolbar/toolbar.ts","../../../projects/lib/toolbar/toolbar.html","../../../projects/lib/toolbar/ngwr-toolbar.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, input } from '@angular/core';\n\n/**\n * Action bar with three named zones — `[wrToolbarStart]`,\n * `[wrToolbarCenter]`, `[wrToolbarEnd]`. Use any one or all three.\n *\n * A bare `<div>` wrapper in a zone, one with no `class` and no `style`, is laid\n * out as a wrapping row with the zone's own gap, so the controls inside it are\n * spaced exactly like controls projected one by one. The gap follows\n * `--wr-density-gap`. Give the wrapper a class or a style and its layout is\n * yours: the toolbar sets nothing on it. Put running text in a `<span>` or a\n * `<p>`, which stay in inline flow.\n *\n * @example\n * ```html\n * <wr-toolbar>\n *   <div wrToolbarStart>\n *     <button wr-btn>Back</button>\n *     <strong>Items</strong>\n *   </div>\n *   <div wrToolbarCenter>\n *     <wr-segmented [(value)]=\"view\" [options]=\"['grid', 'list']\" />\n *   </div>\n *   <div wrToolbarEnd>\n *     <button wr-btn color=\"primary\">New</button>\n *   </div>\n * </wr-toolbar>\n * ```\n *\n * @see https://ngwr.dev/reference/components/toolbar\n */\n@Component({\n  selector: 'wr-toolbar',\n  templateUrl: './toolbar.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-toolbar', role: 'toolbar', '[class.wr-toolbar--responsive]': 'responsive()' },\n})\nexport class WrToolbar {\n  /**\n   * Stack the zones vertically when the toolbar's own box is too narrow to fit\n   * them in a row (a container query on its own width, not the viewport — so it\n   * adapts inside a narrow column or split pane). @default false\n   */\n  readonly responsive = input(false, { transform: coerceBooleanProperty });\n}\n","<div class=\"wr-toolbar__zone wr-toolbar__zone--start\">\n  <ng-content select=\"[wrToolbarStart]\" />\n</div>\n<div class=\"wr-toolbar__zone wr-toolbar__zone--center\">\n  <ng-content select=\"[wrToolbarCenter]\" />\n</div>\n<div class=\"wr-toolbar__zone wr-toolbar__zone--end\">\n  <ng-content select=\"[wrToolbarEnd]\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAKH;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BG;MAOU,SAAS,CAAA;AACpB;;;;AAIG;IACM,UAAU,GAAG,KAAK,CAAC,KAAK,kFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;uGAN7D,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,oWC7CtB,gVASA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDoCa,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,iBAEP,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,gCAAgC,EAAE,cAAc,EAAE,EAAA,QAAA,EAAA,gVAAA,EAAA;;;AE3ClG;;AAEG;;;;"}

package/fesm2022/ngwr-version.mjs

@@ -16,7 +16,7 @@ import { InjectionToken } from '@angular/core';
  * Distinct from `Version` exported by `@angular/core`, which reports the
  * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.
  */
-const NGWR_VERSION = '14.7.0';
+const NGWR_VERSION = '14.8.0';
 
 /**
  * @license

package/fesm2022/ngwr-version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-version.mjs","sources":["../../../projects/lib/version/version.ts","../../../projects/lib/version/version.token.ts","../../../projects/lib/version/ngwr-version.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\n/**\n * The ngwr library version string, kept in sync with\n * `projects/lib/package.json` by `scripts/release-prepare.ts`.\n *\n * Prefer this over reading `package.json` at runtime — that requires a JSON\n * import or `require`, neither of which tree-shakes well in Angular builds.\n *\n * Distinct from `Version` exported by `@angular/core`, which reports the\n * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.\n */\nexport const NGWR_VERSION = '14.7.0';\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken } from '@angular/core';\n\nimport { NGWR_VERSION } from './version';\n\n/**\n * Injection token holding the ngwr library version string.\n *\n * Default factory returns {@link NGWR_VERSION}. Override it in tests or in\n * apps that want to surface a custom build identifier.\n *\n * @example\n * ```ts\n * @Component({...})\n * export class FooterComponent {\n *   readonly version = inject(NGWR_VERSION_TOKEN);\n * }\n * ```\n */\nexport const NGWR_VERSION_TOKEN = new InjectionToken<string>('NGWR_VERSION_TOKEN', {\n  providedIn: 'root',\n  factory: () => NGWR_VERSION,\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAEH;;;;;;;;;AASG;AACI,MAAM,YAAY,GAAG;;ACjB5B;;;;;AAKG;AAMH;;;;;;;;;;;;;AAaG;MACU,kBAAkB,GAAG,IAAI,cAAc,CAAS,oBAAoB,EAAE;AACjF,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,YAAY;AAC5B,CAAA;;AC5BD;;AAEG;;;;"}
+{"version":3,"file":"ngwr-version.mjs","sources":["../../../projects/lib/version/version.ts","../../../projects/lib/version/version.token.ts","../../../projects/lib/version/ngwr-version.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\n/**\n * The ngwr library version string, kept in sync with\n * `projects/lib/package.json` by `scripts/release-prepare.ts`.\n *\n * Prefer this over reading `package.json` at runtime — that requires a JSON\n * import or `require`, neither of which tree-shakes well in Angular builds.\n *\n * Distinct from `Version` exported by `@angular/core`, which reports the\n * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.\n */\nexport const NGWR_VERSION = '14.8.0';\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken } from '@angular/core';\n\nimport { NGWR_VERSION } from './version';\n\n/**\n * Injection token holding the ngwr library version string.\n *\n * Default factory returns {@link NGWR_VERSION}. Override it in tests or in\n * apps that want to surface a custom build identifier.\n *\n * @example\n * ```ts\n * @Component({...})\n * export class FooterComponent {\n *   readonly version = inject(NGWR_VERSION_TOKEN);\n * }\n * ```\n */\nexport const NGWR_VERSION_TOKEN = new InjectionToken<string>('NGWR_VERSION_TOKEN', {\n  providedIn: 'root',\n  factory: () => NGWR_VERSION,\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAEH;;;;;;;;;AASG;AACI,MAAM,YAAY,GAAG;;ACjB5B;;;;;AAKG;AAMH;;;;;;;;;;;;;AAaG;MACU,kBAAkB,GAAG,IAAI,cAAc,CAAS,oBAAoB,EAAE;AACjF,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,YAAY;AAC5B,CAAA;;AC5BD;;AAEG;;;;"}

package/form/styles/_index.scss

@@ -88,6 +88,14 @@
   }
 
   // Visual states — invalid stripes the projected control too.
+  //
+  // The three combobox triggers are named one by one because each is a
+  // `<button>`, which the native selectors never reach. Only `wr-select`'s was
+  // listed, so a `wr-cascader` or an `openOn="overlay"` `wr-tree` in an invalid
+  // field announced `aria-invalid="true"` and kept its grey border. The property
+  // is set here rather than the component's border hook, the way the select's
+  // is, so the error edge holds while the trigger is focused or open — both of
+  // those set `border-color` directly and would otherwise paint it primary.
   // 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
@@ -97,7 +105,9 @@
   &--invalid &__control select,
   &--invalid &__control .wr-input,
   &--invalid &__control .wr-textarea,
-  &--invalid &__control .wr-select__trigger {
+  &--invalid &__control .wr-select__trigger,
+  &--invalid &__control .wr-cascader__trigger,
+  &--invalid &__control .wr-tree__trigger {
     border-color: var(--wr-color-danger);
   }
 

package/gauge/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@use '../../popover/styles'; // the `.wr-tooltip` chip the hover tooltip renders into
 
 .wr-gauge {
   display: inline-block;

package/i18n/ar.json

@@ -110,7 +110,9 @@
     "matchFields": "الحقول غير متطابقة.",
     "oneOf": "اختر إحدى القيم المسموح بها.",
     "minDate": "اختر تاريخًا لاحقًا.",
-    "maxDate": "اختر تاريخًا سابقًا."
+    "maxDate": "اختر تاريخًا سابقًا.",
+    "dateFormat": "التنسيق المتوقع: {{example}}",
+    "dateFilter": "هذا التاريخ غير متاح."
   },
   "select": {
     "label": "اختيار",

package/i18n/cs.json

@@ -110,7 +110,9 @@
     "matchFields": "Tato pole se neshodují.",
     "oneOf": "Vyberte jednu z povolených hodnot.",
     "minDate": "Vyberte pozdější datum.",
-    "maxDate": "Vyberte dřívější datum."
+    "maxDate": "Vyberte dřívější datum.",
+    "dateFormat": "Očekávaný formát: {{example}}",
+    "dateFilter": "Toto datum není k dispozici."
   },
   "select": {
     "label": "Vybrat",

package/i18n/de.json

@@ -110,7 +110,9 @@
     "matchFields": "Diese Felder stimmen nicht überein.",
     "oneOf": "Wählen Sie einen der zulässigen Werte.",
     "minDate": "Wählen Sie ein späteres Datum.",
-    "maxDate": "Wählen Sie ein früheres Datum."
+    "maxDate": "Wählen Sie ein früheres Datum.",
+    "dateFormat": "Erwartetes Format: {{example}}",
+    "dateFilter": "Dieses Datum ist nicht verfügbar."
   },
   "select": {
     "label": "Auswahl",

package/i18n/en.json

@@ -110,7 +110,9 @@
     "matchFields": "These fields do not match.",
     "oneOf": "Choose one of the allowed values.",
     "minDate": "Choose a later date.",
-    "maxDate": "Choose an earlier date."
+    "maxDate": "Choose an earlier date.",
+    "dateFormat": "Expected format: {{example}}",
+    "dateFilter": "This date is not available."
   },
   "select": {
     "label": "Select",

package/i18n/es.json

@@ -110,7 +110,9 @@
     "matchFields": "Los campos no coinciden.",
     "oneOf": "Debe ser uno de los valores permitidos.",
     "minDate": "La fecha debe ser posterior.",
-    "maxDate": "La fecha debe ser anterior."
+    "maxDate": "La fecha debe ser anterior.",
+    "dateFormat": "Formato esperado: {{example}}",
+    "dateFilter": "Esta fecha no está disponible."
   },
   "select": {
     "label": "Seleccionar",

package/i18n/fr.json

@@ -110,7 +110,9 @@
     "matchFields": "Ces champs ne correspondent pas.",
     "oneOf": "Choisissez l'une des valeurs autorisées.",
     "minDate": "Choisissez une date ultérieure.",
-    "maxDate": "Choisissez une date antérieure."
+    "maxDate": "Choisissez une date antérieure.",
+    "dateFormat": "Format attendu : {{example}}",
+    "dateFilter": "Cette date n'est pas disponible."
   },
   "select": {
     "label": "Sélectionner",

package/i18n/he.json

@@ -110,7 +110,9 @@
     "matchFields": "הערכים בשדות אינם זהים.",
     "oneOf": "יש לבחור אחד מהערכים המותרים.",
     "minDate": "יש לבחור תאריך מאוחר יותר.",
-    "maxDate": "יש לבחור תאריך מוקדם יותר."
+    "maxDate": "יש לבחור תאריך מוקדם יותר.",
+    "dateFormat": "התבנית הנדרשת: {{example}}",
+    "dateFilter": "תאריך זה אינו זמין."
   },
   "select": {
     "label": "בחירה",

package/i18n/hi.json

@@ -110,7 +110,9 @@
     "matchFields": "ये फ़ील्ड मेल नहीं खाते।",
     "oneOf": "अनुमत मानों में से कोई एक चुनें।",
     "minDate": "इसके बाद की तारीख़ चुनें।",
-    "maxDate": "इससे पहले की तारीख़ चुनें।"
+    "maxDate": "इससे पहले की तारीख़ चुनें।",
+    "dateFormat": "अपेक्षित फ़ॉर्मैट: {{example}}",
+    "dateFilter": "यह तारीख़ उपलब्ध नहीं है।"
   },
   "select": {
     "label": "चुनें",

package/i18n/id.json

@@ -110,7 +110,9 @@
     "matchFields": "Kolom-kolom ini tidak cocok.",
     "oneOf": "Pilih salah satu nilai yang diizinkan.",
     "minDate": "Pilih tanggal yang lebih baru.",
-    "maxDate": "Pilih tanggal yang lebih awal."
+    "maxDate": "Pilih tanggal yang lebih awal.",
+    "dateFormat": "Format yang diharapkan: {{example}}",
+    "dateFilter": "Tanggal ini tidak tersedia."
   },
   "select": {
     "label": "Pilih",

package/i18n/it.json

@@ -110,7 +110,9 @@
     "matchFields": "I campi non coincidono.",
     "oneOf": "Scegli uno dei valori consentiti.",
     "minDate": "Scegli una data successiva.",
-    "maxDate": "Scegli una data precedente."
+    "maxDate": "Scegli una data precedente.",
+    "dateFormat": "Formato previsto: {{example}}",
+    "dateFilter": "Questa data non è disponibile."
   },
   "select": {
     "label": "Seleziona",

package/i18n/ja.json

@@ -110,7 +110,9 @@
     "matchFields": "入力内容が一致しません。",
     "oneOf": "許可された値から選択してください。",
     "minDate": "これより後の日付を選択してください。",
-    "maxDate": "これより前の日付を選択してください。"
+    "maxDate": "これより前の日付を選択してください。",
+    "dateFormat": "入力例：{{example}}",
+    "dateFilter": "この日付は選択できません。"
   },
   "select": {
     "label": "選択",

package/i18n/ko.json

@@ -110,7 +110,9 @@
     "matchFields": "입력한 항목이 서로 일치하지 않습니다.",
     "oneOf": "허용된 값 중 하나를 선택하세요.",
     "minDate": "더 늦은 날짜를 선택하세요.",
-    "maxDate": "더 빠른 날짜를 선택하세요."
+    "maxDate": "더 빠른 날짜를 선택하세요.",
+    "dateFormat": "입력 형식: {{example}}",
+    "dateFilter": "이 날짜는 선택할 수 없습니다."
   },
   "select": {
     "label": "선택",

package/i18n/nl.json

@@ -110,7 +110,9 @@
     "matchFields": "Deze velden komen niet overeen.",
     "oneOf": "Kies een van de toegestane waarden.",
     "minDate": "Kies een latere datum.",
-    "maxDate": "Kies een eerdere datum."
+    "maxDate": "Kies een eerdere datum.",
+    "dateFormat": "Verwachte notatie: {{example}}",
+    "dateFilter": "Deze datum is niet beschikbaar."
   },
   "select": {
     "label": "Selecteren",

package/i18n/pl.json

@@ -110,7 +110,9 @@
     "matchFields": "Pola nie są zgodne.",
     "oneOf": "Wybierz jedną z dozwolonych wartości.",
     "minDate": "Wybierz późniejszą datę.",
-    "maxDate": "Wybierz wcześniejszą datę."
+    "maxDate": "Wybierz wcześniejszą datę.",
+    "dateFormat": "Oczekiwany format: {{example}}",
+    "dateFilter": "Ta data jest niedostępna."
   },
   "select": {
     "label": "Wybór",

package/i18n/pt.json

@@ -110,7 +110,9 @@
     "matchFields": "Estes campos não coincidem.",
     "oneOf": "Escolha um dos valores permitidos.",
     "minDate": "Escolha uma data posterior.",
-    "maxDate": "Escolha uma data anterior."
+    "maxDate": "Escolha uma data anterior.",
+    "dateFormat": "Formato esperado: {{example}}",
+    "dateFilter": "Esta data não está disponível."
   },
   "select": {
     "label": "Selecionar",

package/i18n/ru.json

@@ -110,7 +110,9 @@
     "matchFields": "Значения полей не совпадают.",
     "oneOf": "Выберите одно из допустимых значений.",
     "minDate": "Выберите более позднюю дату.",
-    "maxDate": "Выберите более раннюю дату."
+    "maxDate": "Выберите более раннюю дату.",
+    "dateFormat": "Ожидаемый формат: {{example}}",
+    "dateFilter": "Эта дата недоступна."
   },
   "select": {
     "label": "Выбрать",

package/i18n/sv.json

@@ -110,7 +110,9 @@
     "matchFields": "Fälten stämmer inte överens.",
     "oneOf": "Välj ett av de tillåtna värdena.",
     "minDate": "Välj ett senare datum.",
-    "maxDate": "Välj ett tidigare datum."
+    "maxDate": "Välj ett tidigare datum.",
+    "dateFormat": "Förväntat format: {{example}}",
+    "dateFilter": "Det här datumet är inte tillgängligt."
   },
   "select": {
     "label": "Välj",

package/i18n/tr.json

@@ -110,7 +110,9 @@
     "matchFields": "Bu alanlar eşleşmiyor.",
     "oneOf": "İzin verilen değerlerden birini seçin.",
     "minDate": "Daha ileri bir tarih seçin.",
-    "maxDate": "Daha erken bir tarih seçin."
+    "maxDate": "Daha erken bir tarih seçin.",
+    "dateFormat": "Beklenen biçim: {{example}}",
+    "dateFilter": "Bu tarih seçilemez."
   },
   "select": {
     "label": "Seçim",

package/i18n/uk.json

@@ -110,7 +110,9 @@
     "matchFields": "Значення полів не збігаються.",
     "oneOf": "Виберіть одне з допустимих значень.",
     "minDate": "Виберіть пізнішу дату.",
-    "maxDate": "Виберіть ранішу дату."
+    "maxDate": "Виберіть ранішу дату.",
+    "dateFormat": "Очікуваний формат: {{example}}",
+    "dateFilter": "Ця дата недоступна."
   },
   "select": {
     "label": "Вибрати",

package/i18n/vi.json

@@ -110,7 +110,9 @@
     "matchFields": "Các trường này không khớp nhau.",
     "oneOf": "Chọn một trong các giá trị cho phép.",
     "minDate": "Chọn ngày muộn hơn.",
-    "maxDate": "Chọn ngày sớm hơn."
+    "maxDate": "Chọn ngày sớm hơn.",
+    "dateFormat": "Định dạng cần nhập: {{example}}",
+    "dateFilter": "Không thể chọn ngày này."
   },
   "select": {
     "label": "Chọn",

package/i18n/zh-TW.json

@@ -110,7 +110,9 @@
     "matchFields": "這些欄位不相符。",
     "oneOf": "請從允許的值中選擇。",
     "minDate": "請選擇較晚的日期。",
-    "maxDate": "請選擇較早的日期。"
+    "maxDate": "請選擇較早的日期。",
+    "dateFormat": "格式應為：{{example}}",
+    "dateFilter": "此日期無法選擇。"
   },
   "select": {
     "label": "選擇",

package/i18n/zh.json

@@ -110,7 +110,9 @@
     "matchFields": "这些字段的值不一致。",
     "oneOf": "请从允许的值中选择。",
     "minDate": "请选择更晚的日期。",
-    "maxDate": "请选择更早的日期。"
+    "maxDate": "请选择更早的日期。",
+    "dateFormat": "格式应为：{{example}}",
+    "dateFilter": "此日期不可选。"
   },
   "select": {
     "label": "选择",

package/input/styles/_index.scss

@@ -188,7 +188,26 @@
     padding-inline-end: 0.25rem;
   }
 
+  // The toggle's flex item is its HOST, not the `<button>`. The group stretches
+  // the host to the field's height, but a blockified host lays the inline-flex
+  // button on a line box, at the top. That line box is a strut of the INHERITED
+  // line-height, so how far off it was depends on the page: on the showcase
+  // (15px text, 22.5px line-height) the eye sat 5.5px above the field's centre
+  // at md, 8.5px at lg and 12px at lg under `touch`, and an `sm` field was 24.5px
+  // instead of 22px; under a 32px line-height even an md field grew to 34px. A
+  // flex host has no line box, and its button stretches.
+  //
+  // `:not([hidden])`, because this is an author rule and the UA's
+  // `[hidden] { display: none }` is not: without it, `<wr-password-toggle
+  // [hidden]="…">` would stay on screen.
+  > wr-password-toggle:not([hidden]) {
+    display: flex;
+  }
+
   &__toggle {
+    // Stretched by the host above, so `align-items: center` below centres the
+    // glyph on the whole field rather than on the glyph's own height.
+    align-self: stretch;
     display: inline-flex;
     align-items: center;
     justify-content: center;

package/input-number/styles/_index.scss

@@ -1,8 +1,23 @@
 @use '../../theme/styles' as theme;
 
 .wr-input-number {
+  // Width of the ▲ / ▼ glyph; its height is 0.6 of it, the proportion the
+  // markup's `10x6` always drew. It follows the control's size the way
+  // `--wr-btn-icon-size` does, because the column is one fixed-width strip
+  // whose height does not: at `sm` each half-button is 10px tall, and a
+  // chevron sized for `md` filled all but 2px of it.
+  --wr-input-number-step-icon-size: 0.625rem; // 10px
+
   display: inline-block;
 
+  &--sm {
+    --wr-input-number-step-icon-size: 0.5rem; // 8px
+  }
+
+  &--lg {
+    --wr-input-number-step-icon-size: 0.75rem; // 12px
+  }
+
   // Steppers live as a compact vertical column inside the suffix slot.
   // `<wr-input-group>` sets `pointer-events: none` on non-button affixes
   // (selector specificity 0,1,1 — class + `:not(element)`). We chain
@@ -79,6 +94,60 @@
       cursor: not-allowed;
       opacity: var(--wr-disabled-opacity);
     }
+
+    // CSS size, so it beats the markup's `width` / `height` attributes — which
+    // stay, as what an unstyled page draws instead of a 300x150 default.
+    svg {
+      width: var(--wr-input-number-step-icon-size);
+      height: calc(var(--wr-input-number-step-icon-size) * 0.6);
+    }
+  }
+
+  // A pill's end is a half-disc as tall as the field. The column itself fitted
+  // it — its start border sits 26px from the outer end, on the straight run
+  // before a curve 11–21.5px long, and its own end radius followed the arc — but
+  // the divider between ▲ and ▼ ran to the very tip of the curve, and the start
+  // border plus that divider cut the end cap into a separate square segment with
+  // the chevrons 7px from the end, inside the bend. Keeping the dividers and
+  // clearing the curve means insetting the column by the whole radius (18px at
+  // `lg`), which leaves an empty D-shaped cap after it. So the pill drops the
+  // dividers instead, and the pair sits inside the end the way the text sits
+  // inside the start.
+  &--rounded {
+    .wr-input-number__steppers.wr-input-group__affix {
+      border-inline-start: 0;
+      border-radius: 0;
+      overflow: visible;
+      // Half the pill's affix inset: added to the half-button's own slack around
+      // the glyph (7px at `md`), the chevrons end 14–16px from the border, where
+      // the field's text begins on the other side. It costs a pill 7px of
+      // minimum width (8px of margin, less the 1px border above). Padding the
+      // steps instead keeps the old width and leaves the chevrons 10–12px from
+      // the border.
+      margin-inline-end: calc(var(--wr-input-group-padding-x) / 2);
+    }
+
+    // With the column no longer clipping them, the hover and pressed tints need
+    // a shape of their own: a small-radius tint box reaches past the curved
+    // border at `lg` (measured with 5px corners: about 1px, 2px under `touch`).
+    // An oversized end radius is scaled down to the half-button's own height, so
+    // each tint ends in a quarter-disc that stays inside the curve and the pair
+    // reads as the pill's end cap.
+    .wr-input-number__step {
+      border-radius: 0;
+
+      &:first-child {
+        border-start-end-radius: 999px;
+      }
+
+      &:last-child {
+        border-end-end-radius: 999px;
+      }
+
+      & + .wr-input-number__step {
+        border-top: 0;
+      }
+    }
   }
 
   &--disabled {

package/line-chart/styles/_index.scss

@@ -34,15 +34,43 @@
     position: relative;
   }
 
-  svg {
+  // The plot's drawing by its class, never a bare `svg`: the legend swatch is an
+  // `<svg>` too, and `.wr-line-chart svg` (0,1,1) outranks `&__swatch` (0,1,0), so
+  // the 1rem × 0.125rem dash stretched to the legend row — measured in Chromium at
+  // 337 × 44px, a solid bar across the series names it was meant to mark.
+  &__svg {
     display: block;
     width: 100%;
     height: 100%;
   }
 
+  // What the tooltip's `cqw` resolves against: the plot's width, which the drawing
+  // stretches to. On the plot itself the containment would take the SVG out of the
+  // chart's intrinsic width — measured in Chromium, a `width: max-content` chart went
+  // from 480px to 0 — while this layer is out of flow and contributes nothing either
+  // way. Never hittable: it covers the plot, and taking the `pointermove` would close
+  // the tooltip it holds.
+  &__tooltip-layer {
+    position: absolute;
+    inset: 0;
+    container-type: inline-size;
+    pointer-events: none;
+  }
+
   &__tooltip {
     position: absolute;
-    transform: translate(-50%, 0.5rem);
+    // Centred on its point, but never past either end of the plot — the x labels' clamp:
+    // the shift is the smaller of half the box and the room actually left on that side,
+    // so a tooltip that fits sits exactly over its crosshair and only the ones near an
+    // end move inwards. Centred with nothing bounding it, the tooltip at the last point
+    // hung half its width past the chart — measured at 52px over the right edge in
+    // Chromium, cut off by any container that clips and a sideways scroll on a phone for
+    // any that does not.
+    // rtl-ok: the SVG's own x, and SVG coordinates do not flip with `direction`
+    transform: translate(
+      clamp(calc(var(--wr-line-chart-x, 50) * -1cqw), -50%, calc((100 - var(--wr-line-chart-x, 50)) * 1cqw - 100%)),
+      0.5rem
+    );
     background: var(--wr-color-surface);
     border: 1px solid var(--wr-color-outline);
     border-radius: var(--wr-border-radius-base);

package/llms-full.txt

@@ -261,8 +261,8 @@
 ## ngwr/date-picker
 - import: `import { WrDatePicker } from 'ngwr/date-picker'`
 - selector: `wr-date-picker`, `wr-date-range-picker`
-- exports: WrDatePicker, WrDateRangePicker, WrDateRange
-- Unified date / time / date-time picker. `<input>` + popover for every mode — overlay content swaps based on `[mode]`. Parses on every keystroke (silently — only emits when valid), reformats canonical on blur. Format driven by `WrDateAdapter`. A signal-forms native control — it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through [Angular 22's forms bridge](/guides/forms).
+- exports: WrDatePicker, WrDateRangePicker, WrDateInputError, WrDateRange, WrDateRangeInputError
+- Unified date / time / date-time picker. `<input>` + popover for every mode — overlay content swaps based on `[mode]`. Parses on every keystroke and emits only a date it can read and would accept; anything else is refused and shown as invalid, never guessed. Reformats canonical on blur. Format driven by `WrDateAdapter`. A signal-forms native control — it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through [Angular 22's forms bridge](/guides/forms).
 
 ## ngwr/date-picker/testing
 - import: `import { WrDatePickerDayHarness } from 'ngwr/date-picker/testing'`
@@ -756,7 +756,7 @@
 ## ngwr/popover
 - import: `import { WrPopover } from 'ngwr/popover'`
 - selector: `[wrPopover]`
-- exports: WrPopover, WrPopoverPosition
+- exports: useChartTooltip, WrPopover, WrChartTooltip, WrChartTooltipDatum, WrChartTooltipTarget, WrPopoverPosition
 - 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

package/meter-group/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@use '../../popover/styles'; // the `.wr-tooltip` chip the hover tooltip renders into
 
 .wr-meter-group {
   display: flex;

package/overlay/styles/_arrow.scss

@@ -139,8 +139,15 @@ $placements: (
 /// turns the right border into the down-right face and the bottom one into the
 /// down-left face, so `right + bottom` is what outlines a tip pointing DOWN.
 /// Swapping only the inline half would paint two faces that are tucked under
-/// the panel. A mirrored arrow needs the rotation mirrored as well — more than
-/// a property rewrite, so it is left for the RTL pass that owns the TS side.
+/// the panel.
+///
+/// That is also why a side edge needs its own RTL rule, which `anchored-arrow`
+/// emits. `at()` hangs the arrow off the panel's inline start or end, so under
+/// `dir="rtl"` a `right`-placed panel carries it on its PHYSICAL right while
+/// these faces still outline a tip pointing left — the two faces painted are
+/// the ones inside the panel, drawn over its content as a chevron, and the tip
+/// that does stick out has no outline. The top and bottom edges are symmetric
+/// about the vertical axis and need nothing.
 @mixin faces($edge, $color) {
   @if $edge == bottom {
     // rtl-ok: down-right face of a 45°-rotated square — fixed by the rotation
@@ -239,5 +246,23 @@ $placements: (
         @include faces($edge, $border);
       }
     }
+
+    // A side edge under RTL: the arrow already sits on the mirrored side (`at()`
+    // is logical), so the outline moves to the mirrored faces — see `faces()`.
+    // Keyed on the `dir` the CDK writes on the pane's own host, as a CHILD
+    // combinator, rather than on any RTL ancestor: an overlay created `ltr` inside
+    // an `rtl` page lays out `ltr`, and a descendant match would outline it wrong.
+    @if $border != null and ($edge == left or $edge == right) {
+      $mirrored: left;
+
+      @if $edge == left {
+        $mirrored: right;
+      }
+
+      [dir='rtl'] > #{$pane}--#{$placement} #{$panel}::after {
+        border: 0;
+        @include faces($mirrored, $border);
+      }
+    }
   }
 }

package/package.json

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