ngwr 11.1.0 → 12.0.0

package/fesm2022/ngwr-sidebar.mjs

@@ -93,7 +93,10 @@ class WrSidebar {
     uid = ++sidebarUid;
     router = inject(Router);
     currentUrl = toSignal(this.router.events.pipe(filter((e) => e instanceof NavigationEnd), map(e => e.urlAfterRedirects), startWith(this.router.url)), { initialValue: this.router.url });
-    /** Last URL we auto-expanded — prevents re-opening a group the user collapsed. */
+    /**
+     * Last URL we resolved to a group — prevents re-opening one the user collapsed.
+     * A URL no entry claims is deliberately NOT recorded: see the effect below.
+     */
     lastAutoUrl = null;
     constructor() {
         // Seed `defaultOpen` groups — once per group, not once per `entries` emission.
@@ -118,9 +121,19 @@ class WrSidebar {
             const url = this.currentUrl();
             if (url === this.lastAutoUrl)
                 return;
-            this.lastAutoUrl = url;
+            // Latch AFTER the lookup, never before it. `entries` often arrives from an
+            // HTTP call, so the first run matches nothing — and latching first told the
+            // re-run that landed with the real nav that this URL was already handled.
+            // A deep link into a `defaultOpen: false` group then stayed collapsed, with
+            // the active link out of the tab order, until the user navigated away and
+            // back. Only a run that found a group has actually handled the URL; the
+            // user-collapse latch is unaffected, since that run is also the one that
+            // records it.
             const match = this.findGroupForUrl(url);
-            if (!match || this.opened().has(match))
+            if (!match)
+                return;
+            this.lastAutoUrl = url;
+            if (this.opened().has(match))
                 return;
             this.opened.update(prev => {
                 const next = new Set(prev);
@@ -134,16 +147,18 @@ class WrSidebar {
     }
     /**
      * Stable id for the group body, referenced by the toggle's `aria-controls`.
-     * Scoped to this sidebar and stripped of anything that is not id-safe: a title
-     * like `Data & charts` used to produce `wr-sidebar-group-data-&-charts`, which
-     * no selector can address.
+     *
+     * Keyed by POSITION, not by the title. Slugging the title kept the id readable
+     * but was not injective: it lowercases and collapses every non-`[a-z0-9]` run,
+     * so `Data & charts` and `Data / charts` produced the same string, and a title
+     * with no ASCII alphanumerics at all — `Компоненты`, `数据` — produced the empty
+     * one. A whole Russian or Chinese sidebar therefore emitted N identical ids and
+     * every toggle's `aria-controls` resolved to the FIRST group's body. The toggle
+     * and its body read `$index` from the same `@for` iteration, so the two always
+     * name each other — reordering `entries` renumbers both together.
      */
-    groupBodyId(title) {
-        const slug = title
-            .toLowerCase()
-            .replace(/[^a-z0-9]+/g, '-')
-            .replace(/^-|-$/g, '');
-        return `wr-sidebar-${this.uid}-group-${slug}`;
+    groupBodyId(index) {
+        return `wr-sidebar-${this.uid}-group-${index}`;
     }
     toggleGroup(title) {
         this.opened.update(prev => {
@@ -171,12 +186,12 @@ class WrSidebar {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrSidebar, isStandalone: true, selector: "wr-sidebar", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupIcon: { classPropertyName: "defaultGroupIcon", publicName: "defaultGroupIcon", isSignal: true, isRequired: false, transformFunction: null }, defaultItemIcon: { classPropertyName: "defaultItemIcon", publicName: "defaultItemIcon", isSignal: true, isRequired: false, transformFunction: null }, autoExpand: { classPropertyName: "autoExpand", publicName: "autoExpand", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()" }, classAttribute: "wr-sidebar" }, ngImport: i0, template: "<!-- A div, not a <nav>: the host already IS the navigation landmark, and two\n     nested ones announce the same list twice. -->\n<div class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <a\n        class=\"wr-sidebar__entry\"\n        routerLinkActive=\"wr-sidebar__entry--active\"\n        [routerLink]=\"asItem(entry).url\"\n        [class.wr-sidebar__entry--disabled]=\"asItem(entry).disabled\"\n      >\n        @if (asItem(entry).icon || defaultItemIcon(); as name) {\n          <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n        }\n        <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n        @if (asItem(entry).badge) {\n          <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n        }\n      </a>\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId(entry.title)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron \u2014 not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId(entry.title)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrSidebar, isStandalone: true, selector: "wr-sidebar", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupIcon: { classPropertyName: "defaultGroupIcon", publicName: "defaultGroupIcon", isSignal: true, isRequired: false, transformFunction: null }, defaultItemIcon: { classPropertyName: "defaultItemIcon", publicName: "defaultItemIcon", isSignal: true, isRequired: false, transformFunction: null }, autoExpand: { classPropertyName: "autoExpand", publicName: "autoExpand", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()" }, classAttribute: "wr-sidebar" }, ngImport: i0, template: "<!-- A div, not a <nav>: the host already IS the navigation landmark, and two\n     nested ones announce the same list twice. -->\n<div class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <!--\n        A span, not a greyed anchor, exactly as the nested branch below does it.\n        `--disabled` only paints: `pointer-events: none` stops a real pointer but\n        not the keyboard, so a disabled entry stayed in the tab order and Enter\n        navigated \u2014 `disabled` on a `WrSidebarItem` is documented as \"no\n        navigation\". An empty `url` is the same case: `[routerLink]=\"[]\"` resolves\n        to the current route, which is a link that goes nowhere.\n      -->\n      @if (asItem(entry).disabled || !asItem(entry).url.length) {\n        <span class=\"wr-sidebar__entry wr-sidebar__entry--disabled\">\n          @if (asItem(entry).icon || defaultItemIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          @if (asItem(entry).badge) {\n            <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n          }\n        </span>\n      } @else {\n        <a class=\"wr-sidebar__entry\" routerLinkActive=\"wr-sidebar__entry--active\" [routerLink]=\"asItem(entry).url\">\n          @if (asItem(entry).icon || defaultItemIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          @if (asItem(entry).badge) {\n            <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n          }\n        </a>\n      }\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId($index)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron \u2014 not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId($index)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSidebar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrSidebar, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-sidebar', encapsulation: ViewEncapsulation.None, host: { class: 'wr-sidebar', role: 'navigation', '[attr.aria-label]': 'resolvedAriaLabel()' }, imports: [RouterLink, RouterLinkActive, WrIcon], template: "<!-- A div, not a <nav>: the host already IS the navigation landmark, and two\n     nested ones announce the same list twice. -->\n<div class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <a\n        class=\"wr-sidebar__entry\"\n        routerLinkActive=\"wr-sidebar__entry--active\"\n        [routerLink]=\"asItem(entry).url\"\n        [class.wr-sidebar__entry--disabled]=\"asItem(entry).disabled\"\n      >\n        @if (asItem(entry).icon || defaultItemIcon(); as name) {\n          <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n        }\n        <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n        @if (asItem(entry).badge) {\n          <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n        }\n      </a>\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId(entry.title)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron \u2014 not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId(entry.title)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'wr-sidebar', encapsulation: ViewEncapsulation.None, host: { class: 'wr-sidebar', role: 'navigation', '[attr.aria-label]': 'resolvedAriaLabel()' }, imports: [RouterLink, RouterLinkActive, WrIcon], template: "<!-- A div, not a <nav>: the host already IS the navigation landmark, and two\n     nested ones announce the same list twice. -->\n<div class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <!--\n        A span, not a greyed anchor, exactly as the nested branch below does it.\n        `--disabled` only paints: `pointer-events: none` stops a real pointer but\n        not the keyboard, so a disabled entry stayed in the tab order and Enter\n        navigated \u2014 `disabled` on a `WrSidebarItem` is documented as \"no\n        navigation\". An empty `url` is the same case: `[routerLink]=\"[]\"` resolves\n        to the current route, which is a link that goes nowhere.\n      -->\n      @if (asItem(entry).disabled || !asItem(entry).url.length) {\n        <span class=\"wr-sidebar__entry wr-sidebar__entry--disabled\">\n          @if (asItem(entry).icon || defaultItemIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          @if (asItem(entry).badge) {\n            <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n          }\n        </span>\n      } @else {\n        <a class=\"wr-sidebar__entry\" routerLinkActive=\"wr-sidebar__entry--active\" [routerLink]=\"asItem(entry).url\">\n          @if (asItem(entry).icon || defaultItemIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          @if (asItem(entry).badge) {\n            <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n          }\n        </a>\n      }\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId($index)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron \u2014 not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId($index)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], defaultGroupIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultGroupIcon", required: false }] }], defaultItemIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultItemIcon", required: false }] }], autoExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoExpand", required: false }] }] } });
 
 /**

package/fesm2022/ngwr-sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-sidebar.mjs","sources":["../../../projects/lib/sidebar/sidebar.ts","../../../projects/lib/sidebar/sidebar.html","../../../projects/lib/sidebar/ngwr-sidebar.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, effect, inject, input, signal } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\n\nimport { filter, map, startWith } from 'rxjs';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon } from 'ngwr/icon';\n\nimport type { WrSidebarEntry, WrSidebarGroup, WrSidebarItem } from './interfaces';\n\nfunction isGroup(entry: WrSidebarEntry): entry is WrSidebarGroup {\n  return 'children' in entry;\n}\n\n/**\n * Instance counter for the group-body ids. Deterministic under prerender, unlike\n * `randomId()`, and unique across sidebars — a title-only id collided between two\n * sidebars on one page, and `aria-controls` then pointed at the wrong body.\n */\nlet sidebarUid = 0;\n\n/**\n * A `routerLink` segment array as an absolute path.\n *\n * The documented form carries the leading slash on the FIRST segment\n * (`['/settings', 'profile']`), and prefixing another one produced\n * `//settings/profile` — a path no URL ever equals, which is why auto-expand\n * never fired for anyone following the example. Both forms normalise here.\n */\nfunction routePath(segments: readonly (string | number)[]): string {\n  return `/${segments.join('/')}`.replace(/\\/{2,}/g, '/');\n}\n\n/**\n * Whether `url` is `route` or something below it. A bare `startsWith` matched a\n * SIBLING whose path merely began the same way, so visiting `/table` expanded the\n * group that owns `/tabs`.\n */\nfunction matchesRoute(url: string, route: string): boolean {\n  if (!url.startsWith(route)) return false;\n  const rest = url.slice(route.length);\n  return rest === '' || rest.startsWith('/') || rest.startsWith('?') || rest.startsWith('#');\n}\n\n/**\n * Data-driven sidebar nav. Pass `[entries]` — either flat\n * `WrSidebarItem`s (direct links) or `WrSidebarGroup`s (expand to reveal\n * child items). Active route auto-expands its containing group.\n *\n * @example\n * ```html\n * <wr-sidebar [entries]=\"[\n *   { title: 'Dashboard', icon: 'home', url: ['/dashboard'] },\n *   {\n *     title: 'Settings',\n *     icon: 'cog',\n *     children: [\n *       { title: 'Profile', url: ['/settings', 'profile'] },\n *       { title: 'Billing', url: ['/settings', 'billing'] }\n *     ]\n *   }\n * ]\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/sidebar\n */\n@Component({\n  selector: 'wr-sidebar',\n  templateUrl: './sidebar.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-sidebar', role: 'navigation', '[attr.aria-label]': 'resolvedAriaLabel()' },\n  imports: [RouterLink, RouterLinkActive, WrIcon],\n})\nexport class WrSidebar {\n  readonly entries = input<readonly WrSidebarEntry[]>([]);\n\n  /**\n   * Accessible name for the navigation landmark. Falls back to `sidebar.label`,\n   * then `'Sidebar'` — a page with a sidebar AND a table of contents has two\n   * navigation landmarks, and an unnamed one is announced as just \"navigation\".\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'sidebar.label', 'Sidebar');\n\n  /** Default icon for entries without one. @default 'folder' */\n  readonly defaultGroupIcon = input<string>('folder');\n\n  /** Default icon for items without one. @default 'caret-forward' */\n  readonly defaultItemIcon = input<string>('caret-forward');\n\n  /** Auto-expand the group containing the active route. @default true */\n  readonly autoExpand = input(true, { transform: coerceBooleanProperty });\n\n  protected readonly isGroup = isGroup;\n\n  private readonly opened = signal<ReadonlySet<string>>(new Set());\n\n  /** Group titles already seeded from `defaultOpen`, so it seeds once and not again. */\n  private readonly seeded = new Set<string>();\n\n  private readonly uid = ++sidebarUid;\n\n  private readonly router = inject(Router);\n  private readonly currentUrl = toSignal(\n    this.router.events.pipe(\n      filter((e): e is NavigationEnd => e instanceof NavigationEnd),\n      map(e => e.urlAfterRedirects),\n      startWith(this.router.url)\n    ),\n    { initialValue: this.router.url }\n  );\n\n  /** Last URL we auto-expanded — prevents re-opening a group the user collapsed. */\n  private lastAutoUrl: string | null = null;\n\n  constructor() {\n    // Seed `defaultOpen` groups — once per group, not once per `entries` emission.\n    // Re-seeding meant any later change to the array (a badge count, a filtered\n    // list) re-opened a group the user had deliberately collapsed.\n    effect(() => {\n      const fresh: string[] = [];\n      for (const entry of this.entries()) {\n        if (isGroup(entry) && entry.defaultOpen && !this.seeded.has(entry.title)) {\n          this.seeded.add(entry.title);\n          fresh.push(entry.title);\n        }\n      }\n      if (fresh.length > 0) {\n        this.opened.update(prev => new Set([...prev, ...fresh]));\n      }\n    });\n\n    // Auto-expand the group containing the current URL.\n    effect(() => {\n      if (!this.autoExpand()) return;\n      const url = this.currentUrl();\n      if (url === this.lastAutoUrl) return;\n      this.lastAutoUrl = url;\n      const match = this.findGroupForUrl(url);\n      if (!match || this.opened().has(match)) return;\n      this.opened.update(prev => {\n        const next = new Set(prev);\n        next.add(match);\n        return next;\n      });\n    });\n  }\n\n  protected isOpen(title: string): boolean {\n    return this.opened().has(title);\n  }\n\n  /**\n   * Stable id for the group body, referenced by the toggle's `aria-controls`.\n   * Scoped to this sidebar and stripped of anything that is not id-safe: a title\n   * like `Data & charts` used to produce `wr-sidebar-group-data-&-charts`, which\n   * no selector can address.\n   */\n  protected groupBodyId(title: string): string {\n    const slug = title\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, '-')\n      .replace(/^-|-$/g, '');\n    return `wr-sidebar-${this.uid}-group-${slug}`;\n  }\n\n  protected toggleGroup(title: string): void {\n    this.opened.update(prev => {\n      const next = new Set(prev);\n      if (next.has(title)) next.delete(title);\n      else next.add(title);\n      return next;\n    });\n  }\n\n  protected asItem(entry: WrSidebarEntry): WrSidebarItem {\n    return entry as WrSidebarItem;\n  }\n\n  protected asGroup(entry: WrSidebarEntry): WrSidebarGroup {\n    return entry as WrSidebarGroup;\n  }\n\n  private findGroupForUrl(url: string): string | null {\n    for (const entry of this.entries()) {\n      if (!isGroup(entry)) continue;\n      const hit = entry.children.some(child => matchesRoute(url, routePath(child.url)));\n      if (hit) return entry.title;\n    }\n    return null;\n  }\n}\n","<!-- A div, not a <nav>: the host already IS the navigation landmark, and two\n     nested ones announce the same list twice. -->\n<div class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <a\n        class=\"wr-sidebar__entry\"\n        routerLinkActive=\"wr-sidebar__entry--active\"\n        [routerLink]=\"asItem(entry).url\"\n        [class.wr-sidebar__entry--disabled]=\"asItem(entry).disabled\"\n      >\n        @if (asItem(entry).icon || defaultItemIcon(); as name) {\n          <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n        }\n        <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n        @if (asItem(entry).badge) {\n          <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n        }\n      </a>\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId(entry.title)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron — not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId(entry.title)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-sidebar.mjs","sources":["../../../projects/lib/sidebar/sidebar.ts","../../../projects/lib/sidebar/sidebar.html","../../../projects/lib/sidebar/ngwr-sidebar.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, effect, inject, input, signal } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\n\nimport { filter, map, startWith } from 'rxjs';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon } from 'ngwr/icon';\n\nimport type { WrSidebarEntry, WrSidebarGroup, WrSidebarItem } from './interfaces';\n\nfunction isGroup(entry: WrSidebarEntry): entry is WrSidebarGroup {\n  return 'children' in entry;\n}\n\n/**\n * Instance counter for the group-body ids. Deterministic under prerender, unlike\n * `randomId()`, and unique across sidebars — a title-only id collided between two\n * sidebars on one page, and `aria-controls` then pointed at the wrong body.\n */\nlet sidebarUid = 0;\n\n/**\n * A `routerLink` segment array as an absolute path.\n *\n * The documented form carries the leading slash on the FIRST segment\n * (`['/settings', 'profile']`), and prefixing another one produced\n * `//settings/profile` — a path no URL ever equals, which is why auto-expand\n * never fired for anyone following the example. Both forms normalise here.\n */\nfunction routePath(segments: readonly (string | number)[]): string {\n  return `/${segments.join('/')}`.replace(/\\/{2,}/g, '/');\n}\n\n/**\n * Whether `url` is `route` or something below it. A bare `startsWith` matched a\n * SIBLING whose path merely began the same way, so visiting `/table` expanded the\n * group that owns `/tabs`.\n */\nfunction matchesRoute(url: string, route: string): boolean {\n  if (!url.startsWith(route)) return false;\n  const rest = url.slice(route.length);\n  return rest === '' || rest.startsWith('/') || rest.startsWith('?') || rest.startsWith('#');\n}\n\n/**\n * Data-driven sidebar nav. Pass `[entries]` — either flat\n * `WrSidebarItem`s (direct links) or `WrSidebarGroup`s (expand to reveal\n * child items). Active route auto-expands its containing group.\n *\n * @example\n * ```html\n * <wr-sidebar [entries]=\"[\n *   { title: 'Dashboard', icon: 'home', url: ['/dashboard'] },\n *   {\n *     title: 'Settings',\n *     icon: 'cog',\n *     children: [\n *       { title: 'Profile', url: ['/settings', 'profile'] },\n *       { title: 'Billing', url: ['/settings', 'billing'] }\n *     ]\n *   }\n * ]\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/sidebar\n */\n@Component({\n  selector: 'wr-sidebar',\n  templateUrl: './sidebar.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-sidebar', role: 'navigation', '[attr.aria-label]': 'resolvedAriaLabel()' },\n  imports: [RouterLink, RouterLinkActive, WrIcon],\n})\nexport class WrSidebar {\n  readonly entries = input<readonly WrSidebarEntry[]>([]);\n\n  /**\n   * Accessible name for the navigation landmark. Falls back to `sidebar.label`,\n   * then `'Sidebar'` — a page with a sidebar AND a table of contents has two\n   * navigation landmarks, and an unnamed one is announced as just \"navigation\".\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'sidebar.label', 'Sidebar');\n\n  /** Default icon for entries without one. @default 'folder' */\n  readonly defaultGroupIcon = input<string>('folder');\n\n  /** Default icon for items without one. @default 'caret-forward' */\n  readonly defaultItemIcon = input<string>('caret-forward');\n\n  /** Auto-expand the group containing the active route. @default true */\n  readonly autoExpand = input(true, { transform: coerceBooleanProperty });\n\n  protected readonly isGroup = isGroup;\n\n  private readonly opened = signal<ReadonlySet<string>>(new Set());\n\n  /** Group titles already seeded from `defaultOpen`, so it seeds once and not again. */\n  private readonly seeded = new Set<string>();\n\n  private readonly uid = ++sidebarUid;\n\n  private readonly router = inject(Router);\n  private readonly currentUrl = toSignal(\n    this.router.events.pipe(\n      filter((e): e is NavigationEnd => e instanceof NavigationEnd),\n      map(e => e.urlAfterRedirects),\n      startWith(this.router.url)\n    ),\n    { initialValue: this.router.url }\n  );\n\n  /**\n   * Last URL we resolved to a group — prevents re-opening one the user collapsed.\n   * A URL no entry claims is deliberately NOT recorded: see the effect below.\n   */\n  private lastAutoUrl: string | null = null;\n\n  constructor() {\n    // Seed `defaultOpen` groups — once per group, not once per `entries` emission.\n    // Re-seeding meant any later change to the array (a badge count, a filtered\n    // list) re-opened a group the user had deliberately collapsed.\n    effect(() => {\n      const fresh: string[] = [];\n      for (const entry of this.entries()) {\n        if (isGroup(entry) && entry.defaultOpen && !this.seeded.has(entry.title)) {\n          this.seeded.add(entry.title);\n          fresh.push(entry.title);\n        }\n      }\n      if (fresh.length > 0) {\n        this.opened.update(prev => new Set([...prev, ...fresh]));\n      }\n    });\n\n    // Auto-expand the group containing the current URL.\n    effect(() => {\n      if (!this.autoExpand()) return;\n      const url = this.currentUrl();\n      if (url === this.lastAutoUrl) return;\n      // Latch AFTER the lookup, never before it. `entries` often arrives from an\n      // HTTP call, so the first run matches nothing — and latching first told the\n      // re-run that landed with the real nav that this URL was already handled.\n      // A deep link into a `defaultOpen: false` group then stayed collapsed, with\n      // the active link out of the tab order, until the user navigated away and\n      // back. Only a run that found a group has actually handled the URL; the\n      // user-collapse latch is unaffected, since that run is also the one that\n      // records it.\n      const match = this.findGroupForUrl(url);\n      if (!match) return;\n      this.lastAutoUrl = url;\n      if (this.opened().has(match)) return;\n      this.opened.update(prev => {\n        const next = new Set(prev);\n        next.add(match);\n        return next;\n      });\n    });\n  }\n\n  protected isOpen(title: string): boolean {\n    return this.opened().has(title);\n  }\n\n  /**\n   * Stable id for the group body, referenced by the toggle's `aria-controls`.\n   *\n   * Keyed by POSITION, not by the title. Slugging the title kept the id readable\n   * but was not injective: it lowercases and collapses every non-`[a-z0-9]` run,\n   * so `Data & charts` and `Data / charts` produced the same string, and a title\n   * with no ASCII alphanumerics at all — `Компоненты`, `数据` — produced the empty\n   * one. A whole Russian or Chinese sidebar therefore emitted N identical ids and\n   * every toggle's `aria-controls` resolved to the FIRST group's body. The toggle\n   * and its body read `$index` from the same `@for` iteration, so the two always\n   * name each other — reordering `entries` renumbers both together.\n   */\n  protected groupBodyId(index: number): string {\n    return `wr-sidebar-${this.uid}-group-${index}`;\n  }\n\n  protected toggleGroup(title: string): void {\n    this.opened.update(prev => {\n      const next = new Set(prev);\n      if (next.has(title)) next.delete(title);\n      else next.add(title);\n      return next;\n    });\n  }\n\n  protected asItem(entry: WrSidebarEntry): WrSidebarItem {\n    return entry as WrSidebarItem;\n  }\n\n  protected asGroup(entry: WrSidebarEntry): WrSidebarGroup {\n    return entry as WrSidebarGroup;\n  }\n\n  private findGroupForUrl(url: string): string | null {\n    for (const entry of this.entries()) {\n      if (!isGroup(entry)) continue;\n      const hit = entry.children.some(child => matchesRoute(url, routePath(child.url)));\n      if (hit) return entry.title;\n    }\n    return null;\n  }\n}\n","<!-- A div, not a <nav>: the host already IS the navigation landmark, and two\n     nested ones announce the same list twice. -->\n<div class=\"wr-sidebar__inner\">\n  @for (entry of entries(); track entry.title) {\n    @if (!isGroup(entry)) {\n      <!--\n        A span, not a greyed anchor, exactly as the nested branch below does it.\n        `--disabled` only paints: `pointer-events: none` stops a real pointer but\n        not the keyboard, so a disabled entry stayed in the tab order and Enter\n        navigated — `disabled` on a `WrSidebarItem` is documented as \"no\n        navigation\". An empty `url` is the same case: `[routerLink]=\"[]\"` resolves\n        to the current route, which is a link that goes nowhere.\n      -->\n      @if (asItem(entry).disabled || !asItem(entry).url.length) {\n        <span class=\"wr-sidebar__entry wr-sidebar__entry--disabled\">\n          @if (asItem(entry).icon || defaultItemIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          @if (asItem(entry).badge) {\n            <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n          }\n        </span>\n      } @else {\n        <a class=\"wr-sidebar__entry\" routerLinkActive=\"wr-sidebar__entry--active\" [routerLink]=\"asItem(entry).url\">\n          @if (asItem(entry).icon || defaultItemIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          @if (asItem(entry).badge) {\n            <small class=\"wr-sidebar__badge\">{{ asItem(entry).badge }}</small>\n          }\n        </a>\n      }\n    } @else {\n      <section class=\"wr-sidebar__group\" [class.wr-sidebar__group--collapsed]=\"!isOpen(entry.title)\">\n        <button\n          type=\"button\"\n          class=\"wr-sidebar__group-toggle\"\n          [attr.aria-expanded]=\"isOpen(entry.title)\"\n          [attr.aria-controls]=\"groupBodyId($index)\"\n          (click)=\"toggleGroup(entry.title)\"\n        >\n          @if (asGroup(entry).icon || defaultGroupIcon(); as name) {\n            <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n          }\n          <span class=\"wr-sidebar__title\">{{ entry.title }}</span>\n          <!-- Inline chrome chevron — not user-customizable. -->\n          <svg\n            class=\"wr-icon__svg wr-sidebar__chevron\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n        <div\n          class=\"wr-sidebar__group-wrap\"\n          [attr.id]=\"groupBodyId($index)\"\n          [attr.inert]=\"!isOpen(entry.title) ? '' : null\"\n        >\n          <div class=\"wr-sidebar__group-body\">\n            <ul class=\"wr-sidebar__list\">\n              @for (child of asGroup(entry).children; track child.title) {\n                <li>\n                  @if (child.disabled || !child.url.length) {\n                    <span class=\"wr-sidebar__item wr-sidebar__item--disabled\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </span>\n                  } @else {\n                    <a class=\"wr-sidebar__item\" routerLinkActive=\"wr-sidebar__item--active\" [routerLink]=\"child.url\">\n                      @if (child.icon || defaultItemIcon(); as name) {\n                        <wr-icon class=\"wr-sidebar__icon\" [name]=\"name\" />\n                      }\n                      <span class=\"wr-sidebar__item-title\">{{ child.title }}</span>\n                      @if (child.badge) {\n                        <small class=\"wr-sidebar__badge\">{{ child.badge }}</small>\n                      }\n                    </a>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </section>\n    }\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-skeleton.mjs

@@ -49,10 +49,10 @@ class WrSkeleton {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrSkeleton, isStandalone: true, selector: "wr-skeleton", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-busy": "true", "aria-live": "polite" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: WrSkeleton, isStandalone: true, selector: "wr-skeleton", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-busy": "true", "aria-live": "polite" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSkeleton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrSkeleton, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-skeleton',

package/fesm2022/ngwr-slider.mjs

@@ -1,7 +1,9 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, computed, model, output, signal, viewChild, inject, effect, ViewEncapsulation, Component } from '@angular/core';
+import { input, computed, inject, model, output, signal, viewChild, effect, untracked, ViewEncapsulation, Component } from '@angular/core';
+import { WR_FORM_FIELD } from 'ngwr/form';
+import { useI18nText } from 'ngwr/i18n';
 import { clamp, round } from 'ngwr/utils';
 
 /**
@@ -73,6 +75,69 @@ class WrSlider {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /** Render the current value below the track. @default true */
     showLabel = input(true, { ...(ngDevMode ? { debugName: "showLabel" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Accessible name of the thumb — the single one, or the LOWER one in range
+     * mode. Falls back to `slider.label` / `slider.lower`.
+     */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the upper thumb in range mode. Falls back to `slider.upper`. */
+    upperLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "upperLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * A thumb projects no text, so these ARE the accessible names — and they were
+     * hard-coded English with no key behind them, so every slider on a page
+     * announced the same untranslated "Value" whatever it controlled.
+     *
+     * Range mode reads `ariaLabel` as the LOWER end rather than as the whole
+     * control: a name given once must land on something, and naming both thumbs
+     * the same thing would read two different values under one name.
+     */
+    singleLabel = useI18nText(this.ariaLabel, 'slider.label', 'Value');
+    lowerLabel = useI18nText(this.ariaLabel, 'slider.lower', 'Lower value');
+    resolvedUpperLabel = useI18nText(this.upperLabel, 'slider.upper', 'Upper value');
+    resolvedLowLabel = computed(() => (this.range() ? this.lowerLabel() : this.singleLabel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLowLabel" }] : /* istanbul ignore next */ []));
+    field = inject(WR_FORM_FIELD, { optional: true });
+    /**
+     * Id the surrounding `<wr-form-field>`'s `<label for>` points at, put on the
+     * single thumb — the LOWER one in range mode, the same end `ariaLabel` names.
+     *
+     * The field renders its label before it can see what was projected into it, so
+     * the id travels the other way and the control adopts it, exactly as
+     * `[wrInput]` does. Without this the `for` named an element that was nowhere
+     * in the document: clicking the label did nothing, and the field's own text
+     * reached the thumb through no path at all.
+     *
+     * It lands on the THUMB rather than on the host because only a labelable
+     * element can be a label's target, and `<wr-slider>` is not one — a `for`
+     * pointing at the host would resolve and still name nothing. The thumb is a
+     * real `<button>`, so it is.
+     *
+     * What this does NOT change is the thumb's name: an `aria-label` outranks a
+     * `<label>` in the accname order, and the thumb keeps its own because the
+     * field cannot promise it has one to give — `<wr-form-field>` renders a label
+     * only when `label` is set, and a slider that traded a generic name for no
+     * name would be the worse bug. Set `[ariaLabel]` to the field's label where
+     * the two should read alike.
+     */
+    thumbId = computed(() => this.field?.controlId() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thumbId" }] : /* istanbul ignore next */ []));
+    /**
+     * The field's error message, wired to the thumb the same way `wrInput` wires it
+     * to its native element.
+     *
+     * Without this the messages `<wr-form-field>` renders are visible and nothing
+     * else: a screen reader on the thumb never learns the field is invalid, nor
+     * what the message says. `aria-invalid` is keyed on the message EXISTING rather
+     * than on `errorKeys()`, because the field only publishes an id once it is
+     * showing something — announcing "invalid" while pointing at nothing is worse
+     * than staying quiet.
+     */
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    ariaInvalid = computed(() => (this.field?.describedBy() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
     /**
      * Current value. Bound by `[formField]`, or two-way via `[(value)]`. Shape
      * follows `range`: a plain `number`, or `[low, high]` in range mode.
@@ -83,8 +148,23 @@ class WrSlider {
     touch = output();
     low = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "low" }] : /* istanbul ignore next */ []));
+    /**
+     * The high thumb's cell. Its literal default stands in for `maxValue()`,
+     * which cannot be read at field-initialisation time — see `highSeeded` and
+     * the constructor effect.
+     */
     high = signal(100, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "high" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether `high` has ever been told a real value by the model.
+     *
+     * `<wr-slider range [min]="200" [max]="300" />` binds no value, so the model
+     * holds its own scalar default and the tuple branch below never runs: `high`
+     * kept the literal 100, which is not inside every `[min, max]`. The thumb
+     * rendered off the track and the first interaction committed `[low, 100]` —
+     * a value the slider itself calls out of range.
+     */
+    highSeeded = false;
     track = viewChild.required('track', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
     /**
@@ -121,16 +201,39 @@ class WrSlider {
     constructor() {
         // Keep the internal thumbs in sync with external writes to `value`
         // (the old `writeValue`): split the tuple / clamp into the low & high cells.
+        // The cells are clamped and the MODEL IS NOT TOUCHED, and the asymmetry is
+        // deliberate. A thumb cannot render outside its own track, so the display
+        // has no choice — but writing that clamp back into `value` would erase the
+        // error it represents: under `[formField]` the bounds reach this component
+        // only through the schema's `min()` / `max()` rules (binding `[min]` beside
+        // `[formField]` is an NG8022 compile error), so the write-back deleted the
+        // out-of-range value those rules exist to report, and marked a pristine
+        // form dirty on first paint besides. The first real interaction emits an
+        // in-range number through `emitChange` and the two agree from then on.
         effect(() => {
             const v = this.value();
             if (Array.isArray(v)) {
                 const tuple = v;
-                this.low.set(this.clampToBounds(tuple[0]));
-                this.high.set(this.clampToBounds(tuple[1]));
-            }
-            else if (typeof v === 'number') {
-                this.low.set(this.clampToBounds(v));
+                const lo = this.clampToBounds(tuple[0]);
+                const hi = this.clampToBounds(tuple[1]);
+                this.low.set(lo);
+                this.high.set(hi);
+                this.highSeeded = true;
+                return;
             }
+            if (typeof v !== 'number')
+                return;
+            const lo = this.clampToBounds(v);
+            this.low.set(lo);
+            if (!this.range())
+                return;
+            // Range mode holding a scalar: the high thumb has never been told
+            // anything, and its literal default is not inside every `[min, max]`.
+            // Seed it at the top of the range — which is what the 100 meant back when
+            // the bounds were 0–100. The MODEL is left alone here too; the shape it
+            // holds is the consumer's business until they move a thumb.
+            this.high.set(this.highSeeded ? this.clampToBounds(untracked(this.high)) : this.maxValue());
+            this.highSeeded = true;
         });
     }
     // Interaction
@@ -140,15 +243,26 @@ class WrSlider {
         event.preventDefault();
         const target = event.currentTarget;
         target.setPointerCapture(event.pointerId);
+        // `preventDefault` above also suppresses the default focus, so the arrows
+        // did nothing after a mouse drag until the thumb was found again with Tab —
+        // while a click on the bare TRACK focused it. Synchronously, not through
+        // `focusThumb`: `event.currentTarget` is already the thumb, so that
+        // helper's `queueMicrotask` would only defer a focus nothing is waiting on.
+        target.focus();
         const move = (e) => this.updateFromEvent(e, thumb);
-        const up = (e) => {
+        const cleanup = (e) => {
             target.releasePointerCapture(e.pointerId);
             target.removeEventListener('pointermove', move);
-            target.removeEventListener('pointerup', up);
+            target.removeEventListener('pointerup', cleanup);
+            target.removeEventListener('pointercancel', cleanup);
             this.touch.emit();
         };
         target.addEventListener('pointermove', move);
-        target.addEventListener('pointerup', up);
+        target.addEventListener('pointerup', cleanup);
+        // `pointercancel` is never followed by a `pointerup`, so without this the
+        // move listener outlived the drag: the thumb kept following a pointer that
+        // was merely hovering over it, with no button held.
+        target.addEventListener('pointercancel', cleanup);
         this.updateFromEvent(event, thumb);
     }
     onTrackPointerDown(event) {
@@ -199,6 +313,21 @@ class WrSlider {
         this.emitChange();
         this.touch.emit();
     }
+    /**
+     * A bound field learns it may show its validation copy from `touch`, and
+     * pointer-up plus a value-changing keypress cannot be the only sources: a
+     * slider tabbed into and out of without an arrow press left the field
+     * untouched forever — which is exactly the case `touched` exists for, and
+     * what this output has always documented itself as doing. `wr-knob` and
+     * `wr-rating` bind `(blur)` on the one element they own; this component has
+     * two thumbs, so it listens for the bubbling `focusout` on its host instead
+     * — and ignores the one that only moves focus from one thumb to the other.
+     */
+    onFocusOut(event) {
+        if (this.track().nativeElement.contains(event.relatedTarget))
+            return;
+        this.touch.emit();
+    }
     // Internals
     isRtl() {
         return this.dir?.value === 'rtl';
@@ -268,13 +397,13 @@ class WrSlider {
         const value = this.range() ? [this.low(), this.high()] : this.low();
         this.value.set(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrSlider, isStandalone: true, selector: "wr-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <!--\n    Positioned on the INLINE axis, not with `left`: `inset-inline-start` is the\n    same edge in LTR and mirrors under `dir=\"rtl\"`, so the track paints itself\n    the right way round without the component reading a direction to draw.\n  -->\n  <span class=\"wr-slider__fill\" [style.inset-inline-start.%]=\"fillStart()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.inset-inline-start.%]=\"lowPercent()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.inset-inline-start.%]=\"highPercent()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrSlider, isStandalone: true, selector: "wr-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, upperLabel: { classPropertyName: "upperLabel", publicName: "upperLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <!--\n    Positioned on the INLINE axis, not with `left`: `inset-inline-start` is the\n    same edge in LTR and mirrors under `dir=\"rtl\"`, so the track paints itself\n    the right way round without the component reading a direction to draw.\n  -->\n  <span class=\"wr-slider__fill\" [style.inset-inline-start.%]=\"fillStart()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [attr.id]=\"thumbId()\"\n    [style.inset-inline-start.%]=\"lowPercent()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"resolvedLowLabel()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"ariaInvalid()\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.inset-inline-start.%]=\"highPercent()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      [attr.aria-label]=\"resolvedUpperLabel()\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrSlider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrSlider, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-slider', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <!--\n    Positioned on the INLINE axis, not with `left`: `inset-inline-start` is the\n    same edge in LTR and mirrors under `dir=\"rtl\"`, so the track paints itself\n    the right way round without the component reading a direction to draw.\n  -->\n  <span class=\"wr-slider__fill\" [style.inset-inline-start.%]=\"fillStart()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.inset-inline-start.%]=\"lowPercent()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.inset-inline-start.%]=\"highPercent()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+            args: [{ selector: 'wr-slider', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()', '(focusout)': 'onFocusOut($event)' }, template: "<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <!--\n    Positioned on the INLINE axis, not with `left`: `inset-inline-start` is the\n    same edge in LTR and mirrors under `dir=\"rtl\"`, so the track paints itself\n    the right way round without the component reading a direction to draw.\n  -->\n  <span class=\"wr-slider__fill\" [style.inset-inline-start.%]=\"fillStart()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [attr.id]=\"thumbId()\"\n    [style.inset-inline-start.%]=\"lowPercent()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"resolvedLowLabel()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"ariaInvalid()\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.inset-inline-start.%]=\"highPercent()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      [attr.aria-label]=\"resolvedUpperLabel()\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], upperLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "upperLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.