ngwr 12.0.0 → 12.1.0

package/fesm2022/ngwr-window.mjs

@@ -572,10 +572,10 @@ class WrWindow {
         this.x_.set(clamp(this.x_(), MIN_ON_VIEWPORT - w, vw - MIN_ON_VIEWPORT));
         this.y_.set(clamp(this.y_(), 0, vh - MIN_ON_VIEWPORT));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrWindow, isStandalone: true, selector: "wr-window", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, initialX: { classPropertyName: "initialX", publicName: "initialX", isSignal: true, isRequired: false, transformFunction: null }, initialY: { classPropertyName: "initialY", publicName: "initialY", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialWidth: { classPropertyName: "initialWidth", publicName: "initialWidth", isSignal: true, isRequired: false, transformFunction: null }, initialHeight: { classPropertyName: "initialHeight", publicName: "initialHeight", isSignal: true, isRequired: false, transformFunction: null }, os: { classPropertyName: "os", publicName: "os", isSignal: true, isRequired: false, transformFunction: null }, chromeSize: { classPropertyName: "chromeSize", publicName: "chromeSize", isSignal: true, isRequired: false, transformFunction: null }, animations: { classPropertyName: "animations", publicName: "animations", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, keepInViewport: { classPropertyName: "keepInViewport", publicName: "keepInViewport", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, showMinimize: { classPropertyName: "showMinimize", publicName: "showMinimize", isSignal: true, isRequired: false, transformFunction: null }, showMaximize: { classPropertyName: "showMaximize", publicName: "showMaximize", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", state: "stateChange", closed: "closed", moved: "moved", resized: "resized" }, host: { attributes: { "role": "dialog" }, listeners: { "pointerdown": "focusWindow()" }, properties: { "class": "classes()", "style.left.px": "x()", "style.top.px": "y()", "style.width.px": "width()", "style.height.px": "height()", "style.z-index": "z()", "attr.aria-hidden": "!open()", "attr.aria-labelledby": "titleId" } }, ngImport: i0, template: "<!--\n  The double-click gate is `!== false`, NOT `maximizeVisible()`, and the\n  difference is a window nobody can get out of. The Linux preset hides the\n  maximize BUTTON; the gesture is how GNOME maximizes, and it worked on every\n  chrome before this input went tri-state. Gating it on button visibility would\n  have killed it there \u2014 and `maximized` is reachable on Linux with no button at\n  all (a snap to the top edge, `ref.maximize()`, a restored layout), after which\n  every exit disappears at once: no restore-down button, no minimize button,\n  `startMove` refuses while the state is not `normal`, the resize handles are not\n  rendered, and the only key the window listens for is Escape, which closes it.\n  An explicit `showMaximize: false` still turns the gesture off everywhere.\n-->\n<div class=\"wr-window__chrome\" (pointerdown)=\"startMove($event)\" (dblclick)=\"showMaximize() !== false && maximize()\">\n  <div class=\"wr-window__title\" [attr.id]=\"titleId\">{{ title() }}</div>\n  <div class=\"wr-window__title-extra\">\n    <ng-content select=\"[wrWindowTitleExtra]\" />\n  </div>\n\n  <div class=\"wr-window__chrome-actions\">\n    @if (resolvedOs() === 'macos') {\n      <!-- macOS-style traffic-light cluster: close \u2192 minimize \u2192 maximize.\n           Glyphs (\u00D7, \u2212, +) appear on cluster hover. -->\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path\n              d=\"M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      }\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"2\" y1=\"5\" x2=\"8\" y2=\"5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <path\n                d=\"M3 1 L1 1 L1 3 M7 1 L9 1 L9 3 M1 7 L1 9 L3 9 M9 7 L9 9 L7 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.4\"\n                stroke-linecap=\"round\"\n                fill=\"none\"\n              />\n            } @else {\n              <path d=\"M2 5 L8 5 M5 2 L5 8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n            }\n          </svg>\n        </button>\n      }\n    } @else {\n      <!-- Windows / Linux glyph buttons. Linux hides minimize and maximize by\n           DEFAULT, not by rule: `minimizeVisible()` resolves the input first, so\n           `[showMinimize]=\"true\"` puts the button back \u2014 which is the only way a\n           user on Linux can reach `<wr-window-taskbar>` at all. -->\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"1\" y1=\"8\" x2=\"9\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          @if (state() === 'maximized') {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1.5\" y=\"2.5\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n              <rect x=\"3\" y=\"1\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          } @else {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1\" y=\"1\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          }\n        </button>\n      }\n\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-window__body\">\n  <ng-content />\n</div>\n\n<div class=\"wr-window__status-bar\">\n  <ng-content select=\"[wrWindowStatusBar]\" />\n</div>\n\n@if (resizable() && state() === 'normal') {\n  <span class=\"wr-window__handle wr-window__handle--t\" (pointerdown)=\"resizeT($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--r\" (pointerdown)=\"resizeR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--b\" (pointerdown)=\"resizeB($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--l\" (pointerdown)=\"resizeL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tl\" (pointerdown)=\"resizeTL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tr\" (pointerdown)=\"resizeTR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--bl\" (pointerdown)=\"resizeBL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--br\" (pointerdown)=\"resizeBR($event)\"></span>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrWindow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrWindow, isStandalone: true, selector: "wr-window", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, initialX: { classPropertyName: "initialX", publicName: "initialX", isSignal: true, isRequired: false, transformFunction: null }, initialY: { classPropertyName: "initialY", publicName: "initialY", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialWidth: { classPropertyName: "initialWidth", publicName: "initialWidth", isSignal: true, isRequired: false, transformFunction: null }, initialHeight: { classPropertyName: "initialHeight", publicName: "initialHeight", isSignal: true, isRequired: false, transformFunction: null }, os: { classPropertyName: "os", publicName: "os", isSignal: true, isRequired: false, transformFunction: null }, chromeSize: { classPropertyName: "chromeSize", publicName: "chromeSize", isSignal: true, isRequired: false, transformFunction: null }, animations: { classPropertyName: "animations", publicName: "animations", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, keepInViewport: { classPropertyName: "keepInViewport", publicName: "keepInViewport", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, showMinimize: { classPropertyName: "showMinimize", publicName: "showMinimize", isSignal: true, isRequired: false, transformFunction: null }, showMaximize: { classPropertyName: "showMaximize", publicName: "showMaximize", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", state: "stateChange", closed: "closed", moved: "moved", resized: "resized" }, host: { attributes: { "role": "dialog" }, listeners: { "pointerdown": "focusWindow()" }, properties: { "class": "classes()", "style.left.px": "x()", "style.top.px": "y()", "style.width.px": "width()", "style.height.px": "height()", "style.z-index": "z()", "attr.aria-hidden": "!open()", "attr.aria-labelledby": "titleId" } }, ngImport: i0, template: "<!--\n  The double-click gate is `!== false`, NOT `maximizeVisible()`, and the\n  difference is a window nobody can get out of. The Linux preset hides the\n  maximize BUTTON; the gesture is how GNOME maximizes, and it worked on every\n  chrome before this input went tri-state. Gating it on button visibility would\n  have killed it there \u2014 and `maximized` is reachable on Linux with no button at\n  all (a snap to the top edge, `ref.maximize()`, a restored layout), after which\n  every exit disappears at once: no restore-down button, no minimize button,\n  `startMove` refuses while the state is not `normal`, the resize handles are not\n  rendered, and the only key the window listens for is Escape, which closes it.\n  An explicit `showMaximize: false` still turns the gesture off everywhere.\n-->\n<div class=\"wr-window__chrome\" (pointerdown)=\"startMove($event)\" (dblclick)=\"showMaximize() !== false && maximize()\">\n  <div class=\"wr-window__title\" [attr.id]=\"titleId\">{{ title() }}</div>\n  <div class=\"wr-window__title-extra\">\n    <ng-content select=\"[wrWindowTitleExtra]\" />\n  </div>\n\n  <div class=\"wr-window__chrome-actions\">\n    @if (resolvedOs() === 'macos') {\n      <!-- macOS-style traffic-light cluster: close \u2192 minimize \u2192 maximize.\n           Glyphs (\u00D7, \u2212, +) appear on cluster hover. -->\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path\n              d=\"M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      }\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"2\" y1=\"5\" x2=\"8\" y2=\"5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <path\n                d=\"M3 1 L1 1 L1 3 M7 1 L9 1 L9 3 M1 7 L1 9 L3 9 M9 7 L9 9 L7 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.4\"\n                stroke-linecap=\"round\"\n                fill=\"none\"\n              />\n            } @else {\n              <path d=\"M2 5 L8 5 M5 2 L5 8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n            }\n          </svg>\n        </button>\n      }\n    } @else {\n      <!-- Windows / Linux glyph buttons. Linux hides minimize and maximize by\n           DEFAULT, not by rule: `minimizeVisible()` resolves the input first, so\n           `[showMinimize]=\"true\"` puts the button back \u2014 which is the only way a\n           user on Linux can reach `<wr-window-taskbar>` at all. -->\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"1\" y1=\"8\" x2=\"9\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          @if (state() === 'maximized') {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1.5\" y=\"2.5\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n              <rect x=\"3\" y=\"1\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          } @else {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1\" y=\"1\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          }\n        </button>\n      }\n\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-window__body\">\n  <ng-content />\n</div>\n\n<div class=\"wr-window__status-bar\">\n  <ng-content select=\"[wrWindowStatusBar]\" />\n</div>\n\n@if (resizable() && state() === 'normal') {\n  <span class=\"wr-window__handle wr-window__handle--t\" (pointerdown)=\"resizeT($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--r\" (pointerdown)=\"resizeR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--b\" (pointerdown)=\"resizeB($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--l\" (pointerdown)=\"resizeL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tl\" (pointerdown)=\"resizeTL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tr\" (pointerdown)=\"resizeTR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--bl\" (pointerdown)=\"resizeBL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--br\" (pointerdown)=\"resizeBR($event)\"></span>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrWindow, decorators: [{
             type: Component,
             args: [{ selector: 'wr-window', encapsulation: ViewEncapsulation.None, host: {
                         role: 'dialog',
@@ -746,10 +746,10 @@ class WrWindowContainer {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindowContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrWindowContainer, isStandalone: true, selector: "wr-window-container", viewQueries: [{ propertyName: "contentVcr", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "wrWindow", first: true, predicate: WrWindow, descendants: true, isSignal: true }], ngImport: i0, template: "<wr-window\n  [open]=\"true\"\n  [title]=\"ref.title()\"\n  [os]=\"config.os ?? 'auto'\"\n  [size]=\"config.size ?? 'md'\"\n  [chromeSize]=\"config.chromeSize ?? 'normal'\"\n  [animations]=\"config.animations ?? true\"\n  [initialX]=\"config.x ?? null\"\n  [initialY]=\"config.y ?? null\"\n  [initialWidth]=\"config.width ?? null\"\n  [initialHeight]=\"config.height ?? null\"\n  [minWidth]=\"config.minWidth ?? 220\"\n  [minHeight]=\"config.minHeight ?? 140\"\n  [maxWidth]=\"config.maxWidth ?? 1000000\"\n  [maxHeight]=\"config.maxHeight ?? 1000000\"\n  [movable]=\"config.movable ?? true\"\n  [resizable]=\"config.resizable ?? true\"\n  [keepInViewport]=\"config.keepInViewport ?? true\"\n  [snap]=\"config.snap ?? 'none'\"\n  [dragHandle]=\"config.dragHandle ?? null\"\n  [showMinimize]=\"config.showMinimize ?? null\"\n  [showMaximize]=\"config.showMaximize ?? null\"\n  [showClose]=\"config.showClose ?? true\"\n  (closed)=\"ref.close()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n@if (window.snapTarget(); as target) {\n  <div class=\"wr-window__snap-hint\" [attr.data-target]=\"target\" aria-hidden=\"true\"></div>\n}\n", dependencies: [{ kind: "component", type: WrWindow, selector: "wr-window", inputs: ["open", "state", "title", "initialX", "initialY", "size", "initialWidth", "initialHeight", "os", "chromeSize", "animations", "minWidth", "minHeight", "maxWidth", "maxHeight", "movable", "resizable", "keepInViewport", "snap", "dragHandle", "showMinimize", "showMaximize", "showClose"], outputs: ["openChange", "stateChange", "closed", "moved", "resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrWindowContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrWindowContainer, isStandalone: true, selector: "wr-window-container", viewQueries: [{ propertyName: "contentVcr", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "wrWindow", first: true, predicate: WrWindow, descendants: true, isSignal: true }], ngImport: i0, template: "<wr-window\n  [open]=\"true\"\n  [title]=\"ref.title()\"\n  [os]=\"config.os ?? 'auto'\"\n  [size]=\"config.size ?? 'md'\"\n  [chromeSize]=\"config.chromeSize ?? 'normal'\"\n  [animations]=\"config.animations ?? true\"\n  [initialX]=\"config.x ?? null\"\n  [initialY]=\"config.y ?? null\"\n  [initialWidth]=\"config.width ?? null\"\n  [initialHeight]=\"config.height ?? null\"\n  [minWidth]=\"config.minWidth ?? 220\"\n  [minHeight]=\"config.minHeight ?? 140\"\n  [maxWidth]=\"config.maxWidth ?? 1000000\"\n  [maxHeight]=\"config.maxHeight ?? 1000000\"\n  [movable]=\"config.movable ?? true\"\n  [resizable]=\"config.resizable ?? true\"\n  [keepInViewport]=\"config.keepInViewport ?? true\"\n  [snap]=\"config.snap ?? 'none'\"\n  [dragHandle]=\"config.dragHandle ?? null\"\n  [showMinimize]=\"config.showMinimize ?? null\"\n  [showMaximize]=\"config.showMaximize ?? null\"\n  [showClose]=\"config.showClose ?? true\"\n  (closed)=\"ref.close()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n@if (window.snapTarget(); as target) {\n  <div class=\"wr-window__snap-hint\" [attr.data-target]=\"target\" aria-hidden=\"true\"></div>\n}\n", dependencies: [{ kind: "component", type: WrWindow, selector: "wr-window", inputs: ["open", "state", "title", "initialX", "initialY", "size", "initialWidth", "initialHeight", "os", "chromeSize", "animations", "minWidth", "minHeight", "maxWidth", "maxHeight", "movable", "resizable", "keepInViewport", "snap", "dragHandle", "showMinimize", "showMaximize", "showClose"], outputs: ["openChange", "stateChange", "closed", "moved", "resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindowContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrWindowContainer, decorators: [{
             type: Component,
             args: [{ selector: 'wr-window-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [WrWindow], template: "<wr-window\n  [open]=\"true\"\n  [title]=\"ref.title()\"\n  [os]=\"config.os ?? 'auto'\"\n  [size]=\"config.size ?? 'md'\"\n  [chromeSize]=\"config.chromeSize ?? 'normal'\"\n  [animations]=\"config.animations ?? true\"\n  [initialX]=\"config.x ?? null\"\n  [initialY]=\"config.y ?? null\"\n  [initialWidth]=\"config.width ?? null\"\n  [initialHeight]=\"config.height ?? null\"\n  [minWidth]=\"config.minWidth ?? 220\"\n  [minHeight]=\"config.minHeight ?? 140\"\n  [maxWidth]=\"config.maxWidth ?? 1000000\"\n  [maxHeight]=\"config.maxHeight ?? 1000000\"\n  [movable]=\"config.movable ?? true\"\n  [resizable]=\"config.resizable ?? true\"\n  [keepInViewport]=\"config.keepInViewport ?? true\"\n  [snap]=\"config.snap ?? 'none'\"\n  [dragHandle]=\"config.dragHandle ?? null\"\n  [showMinimize]=\"config.showMinimize ?? null\"\n  [showMaximize]=\"config.showMaximize ?? null\"\n  [showClose]=\"config.showClose ?? true\"\n  (closed)=\"ref.close()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n@if (window.snapTarget(); as target) {\n  <div class=\"wr-window__snap-hint\" [attr.data-target]=\"target\" aria-hidden=\"true\"></div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { contentVcr: [{ type: i0.ViewChild, args: ['content', { ...{ read: ViewContainerRef }, isSignal: true }] }], wrWindow: [{ type: i0.ViewChild, args: [i0.forwardRef(() => WrWindow), { isSignal: true }] }] } });
@@ -1270,10 +1270,10 @@ class WrWindowManager {
     clearLayout(name) {
         this.storage.remove(this.layoutKey(name));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindowManager, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.2", ngImport: i0, type: WrWindowManager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrWindowManager, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: WrWindowManager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindowManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrWindowManager, decorators: [{
             type: Service
         }] });
 
@@ -1336,10 +1336,10 @@ class WrWindowTaskbar {
         event.stopPropagation();
         void ref.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindowTaskbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrWindowTaskbar, isStandalone: true, selector: "wr-window-taskbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "class": "classes()", "attr.aria-label": "railLabel()" } }, ngImport: i0, template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      <!--\n        Two SIBLING buttons in a plain container, not a close button nested\n        inside the tab. The close used to be a `role=\"button\"` span with\n        `tabindex=\"0\"` inside the tab's own `<button>` \u2014 interactive content\n        inside interactive content, which the HTML parser and `nested-interactive`\n        both object to. Nothing caught it: a taskbar tab exists only while a\n        window is minimized, and the a11y sweep reads prerendered HTML, where the\n        rail is not rendered at all.\n      -->\n      <div class=\"wr-window-taskbar__tab\">\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-restore\"\n          [attr.aria-label]=\"restoreLabel({ title: tabTitle(ref) })\"\n          (click)=\"restore(ref)\"\n        >\n          <span class=\"wr-window-taskbar__tab-title\">{{ tabTitle(ref) }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrWindowTaskbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrWindowTaskbar, isStandalone: true, selector: "wr-window-taskbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "class": "classes()", "attr.aria-label": "railLabel()" } }, ngImport: i0, template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      <!--\n        Two SIBLING buttons in a plain container, not a close button nested\n        inside the tab. The close used to be a `role=\"button\"` span with\n        `tabindex=\"0\"` inside the tab's own `<button>` \u2014 interactive content\n        inside interactive content, which the HTML parser and `nested-interactive`\n        both object to. Nothing caught it: a taskbar tab exists only while a\n        window is minimized, and the a11y sweep reads prerendered HTML, where the\n        rail is not rendered at all.\n      -->\n      <div class=\"wr-window-taskbar__tab\">\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-restore\"\n          [attr.aria-label]=\"restoreLabel({ title: tabTitle(ref) })\"\n          (click)=\"restore(ref)\"\n        >\n          <span class=\"wr-window-taskbar__tab-title\">{{ tabTitle(ref) }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindowTaskbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrWindowTaskbar, decorators: [{
             type: Component,
             args: [{ selector: 'wr-window-taskbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()', role: 'toolbar', '[attr.aria-label]': 'railLabel()' }, template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      <!--\n        Two SIBLING buttons in a plain container, not a close button nested\n        inside the tab. The close used to be a `role=\"button\"` span with\n        `tabindex=\"0\"` inside the tab's own `<button>` \u2014 interactive content\n        inside interactive content, which the HTML parser and `nested-interactive`\n        both object to. Nothing caught it: a taskbar tab exists only while a\n        window is minimized, and the a11y sweep reads prerendered HTML, where the\n        rail is not rendered at all.\n      -->\n      <div class=\"wr-window-taskbar__tab\">\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-restore\"\n          [attr.aria-label]=\"restoreLabel({ title: tabTitle(ref) })\"\n          (click)=\"restore(ref)\"\n        >\n          <span class=\"wr-window-taskbar__tab-title\">{{ tabTitle(ref) }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n" }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });

package/llms-full.txt

@@ -732,7 +732,7 @@
 - import: `import { WrSegmented } from 'ngwr/segmented'`
 - selector: `wr-segmented`
 - exports: WrSegmented, WrSegmentedOption, WrSegmentedSize
-- Single-choice picker rendered as a segmented control. Two-way binds the selected value.
+- Single-choice picker rendered as a segmented control. 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's bridge.
 
 ## ngwr/segmented/testing
 - import: `import { WrSegmentedHarness } from 'ngwr/segmented/testing'`

package/llms.txt

@@ -132,8 +132,10 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
 
 ## Patterns
 
-- **Forms** — every value control is signal-forms native (`FormValueControl`, or
-  `FormCheckboxControl` for checkbox) — no `ControlValueAccessor` in between.
+- **Forms** — nineteen value controls are signal-forms native (`FormValueControl`,
+  or `FormCheckboxControl` for checkbox/switch) — no `ControlValueAccessor` in the
+  library. A count rather than "every": `[wrColorPickerTrigger]` is public, carries
+  its own `value` model, and implements neither.
   Bind `[formField]="form.x"`, use the two-way model standalone (`[(value)]`, or
   `[(checked)]` on checkbox/switch), or classic `[(ngModel)]` / reactive forms
   via Angular's bridge.
@@ -191,6 +193,26 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
   EXCLUSIVE. `editable` turns on drag and resize; `Alt` + arrows do the same
   from the keyboard.
 
+## Deciding whether to use it
+
+Three pages exist for the question before installation, and everything on them
+is meant to be checkable rather than taken on trust:
+
+- **Why ngwr, and when not to** — the wedge (nineteen value controls are Signal
+  Forms controls; no `ControlValueAccessor` in the library), a comparison against
+  Material / PrimeNG / NG-ZORRO / Taiga / Spartan, and a per-competitor "choose
+  something else if" section: https://ngwr.dev/start/comparison
+- **What gates a change** — eight gates on every PR, three separate
+  accessibility sweeps and what each one cannot see, the two nightly baselines
+  and what is accepted in them, plus what the test suite does NOT cover:
+  https://ngwr.dev/start/quality
+- **A live Signal Forms demo** you can read before installing anything:
+  https://ngwr.dev/start/playground
+
+The honest shape of the project, since these pages say it too: one maintainer,
+MIT, six majors shipped between 2026-06-12 and 2026-08-20, a codemod for every
+break a codemod can repair, no commercial support.
+
 ## Resources (machine-readable)
 
 - This quick-ref: https://ngwr.dev/llms.txt

package/package.json

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

package/types/ngwr-pagination.d.ts

@@ -111,6 +111,17 @@ declare class WrPagination {
     protected readonly navLabel: _angular_core.Signal<string>;
     /** Internal: total page count. */
     protected readonly totalPages: _angular_core.Signal<number>;
+    /**
+     * Internal: where the previous arrow goes. Clamped to the end of the valid
+     * range rather than being a plain `currentPage() - 1`, because the page can
+     * legitimately sit past that end while `total` is 0 (see the guard effect).
+     * From page 5 of one page, `goTo(4)` is refused as out of range, so the arrow
+     * was enabled and did nothing — and under `responsive` on a narrow box the
+     * numbered cells are hidden by a container query, which left no way back at
+     * all. `Math.min` only ever moves the target INWARD, so `goTo`'s own
+     * past-the-end refusal keeps working as the backstop it is.
+     */
+    protected readonly prevPage: _angular_core.Signal<number>;
     /** Internal: "X–Y of Z" string. */
     protected readonly rangeLabel: _angular_core.Signal<string>;
     /**

package/types/ngwr-segmented-testing.d.ts

@@ -194,6 +194,17 @@ declare class WrSegmentedOptionHarness extends ComponentHarness {
  * - Activation is the browser's own default action on a button, which jsdom does not
  *   implement, so {@link select} clicks — see {@link WrSegmentedOptionHarness.select}.
  *
+ * **It is a signal-forms control**, which adds two things to read here and one that
+ * cannot be read at all. `[formField]` binds the component's own `value` model, and a
+ * surrounding `<wr-form-field>` publishes its state onto the GROUP —
+ * {@link isInvalid} and {@link getDescriptionText} answer that, on the host rather
+ * than per segment, because the strip is one field and a description repeated on
+ * every segment would be announced once per Tab. What is NOT here is the field's
+ * `touched` flag: the component only emits `touch`, and whether anything listened is
+ * a fact about the form, not about this DOM — assert it on the field.
+ * {@link blur} is how a spec gets there, and it is the ONLY route: a click does not
+ * mark a field touched, and neither does moving from one segment to the next.
+ *
  * **There is deliberately no `getValue()` and no selection by value.** `options` is
  * a bound array of `{ value, label, … }` and the value is a generic `T` the component
  * writes nowhere — not on the host, not on a segment. The single exception is an
@@ -339,6 +350,39 @@ declare class WrSegmentedHarness extends ComponentHarness {
      * {@link getTabStopLabels} gives.
      */
     getFocusedLabel(): Promise<string | null>;
+    /**
+     * Whether the surrounding `<wr-form-field>` is reporting this control invalid, from
+     * `aria-invalid` on the host.
+     *
+     * `false` for a control with no field around it, and `false` for a field that is
+     * invalid but has not shown its copy yet: the component keys the attribute on the
+     * MESSAGE existing rather than on the error, because announcing "invalid" while
+     * pointing at nothing is worse than staying quiet. So this and
+     * {@link getDescriptionText} move together, and a `true` with no description would
+     * be the finding.
+     */
+    isInvalid(): Promise<boolean>;
+    /**
+     * The text `aria-describedby` points at — the validation copy a screen reader is
+     * given for this control — or `null` when the host describes nothing.
+     *
+     * Resolved from the document root, because the element named may sit anywhere on
+     * the page, and THROWS when the reference resolves to no element: a dangling
+     * `aria-describedby` renders exactly like a working one and is announced as
+     * nothing, so returning `null` for it would report the bug as the healthy state.
+     */
+    getDescriptionText(): Promise<string | null>;
+    /**
+     * Take focus off the strip entirely — what marks a bound field touched, and the
+     * only thing that does.
+     *
+     * The component emits `touch` from a `focusout` that leaves the host, so a click
+     * does not reach it and neither does Tab from one segment to the next: a strip a
+     * user tabbed straight past has to end up untouched, which is the case `touched`
+     * exists for. Resolves quietly when nothing inside was focused, since that is
+     * already the state this asks for.
+     */
+    blur(): Promise<void>;
     /**
      * The index the component publishes for the thumb, from the
      * `--wr-segmented-thumb-index` custom property it sets inline.

package/types/ngwr-segmented.d.ts

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
 import { WrIconName } from 'ngwr/icon';
 
 /**
@@ -31,8 +32,25 @@ interface WrSegmentedOption<T = unknown> {
  * Single-choice picker rendered as a segmented control. Two-way binds
  * the selected `value`.
  *
+ * A signal-forms native control: it implements `FormValueControl<T | null>`, so
+ * `[formField]` binds straight to its `value` model — no
+ * `ControlValueAccessor` in between. `[(value)]` works standalone, and classic
+ * `[(ngModel)]` / reactive forms keep working through Angular's bridge.
+ *
+ * It stays a `role="group"` of `aria-pressed` toggle buttons rather than
+ * becoming a `radiogroup`: being a form control changes what the value is bound
+ * to, not what the widget is, and a radiogroup would owe a roving tab stop and
+ * arrow-key selection — a different keyboard contract for every consumer who
+ * already ships this. The group is what the field describes (`aria-describedby`
+ * / `aria-invalid` land on the host), while the `<label for>` has to name a
+ * labelable element, so the id goes on the first segment.
+ *
  * @example
  * ```html
+ * <!-- signal forms -->
+ * <wr-segmented [options]="ranges" [formField]="form.range" />
+ *
+ * <!-- standalone two-way binding -->
  * <wr-segmented
  *   [options]="[
  *     { value: 'day',  label: 'Day' },
@@ -46,15 +64,68 @@ interface WrSegmentedOption<T = unknown> {
  * @see https://ngwr.dev/reference/components/segmented
  */
 type WrSegmentedSize = 'sm' | 'md' | 'lg';
-declare class WrSegmented<T = unknown> {
+declare class WrSegmented<T = unknown> implements FormValueControl<T | null> {
     /** The segments to render. */
     readonly options: _angular_core.InputSignal<readonly WrSegmentedOption<T>[]>;
-    /** Two-way bindable selected value. */
+    /**
+     * The picked segment's `value`, `null` when nothing is selected. Bound by
+     * `[formField]`, or two-way via `[(value)]`.
+     */
     readonly value: _angular_core.ModelSignal<T | null>;
-    /** Disable the whole control. @default false */
+    /** Emitted when focus leaves the strip, so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Disable the whole control. Bound automatically from the field's disabled
+     * state when used with `[formField]`.
+     *
+     * @default false
+     */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Control size — shares the `--wr-control-*` contract. @default 'md' */
     readonly size: _angular_core.InputSignal<WrSegmentedSize>;
+    private readonly host;
+    private readonly field;
+    /**
+     * Id the surrounding `<wr-form-field>`'s `<label for>` points at, stamped on the
+     * FIRST segment.
+     *
+     * 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]`,
+     * `wr-slider` and `wr-select` do. Without this the `for` named an element that was
+     * nowhere in the document: clicking the label did nothing.
+     *
+     * It cannot go on the host — only a labelable element can be a label's target, and
+     * `<wr-segmented>` is not one — and there is no single control to put it on, so it
+     * goes where clicking the label should land a user: the first segment, which is
+     * also the strip's first tab stop. The same choice `wr-slider` makes with its low
+     * thumb.
+     *
+     * What this does NOT change is that segment's NAME: it is named by its own label,
+     * and a `<label for>` cannot outrank text content in the accname order anyway.
+     *
+     * The one shape this reads wrong is a strip NESTED inside another control that is
+     * itself the field — `<wr-color-picker>`'s own format tabs are the only case in
+     * the library — where the id lands on a tab instead of on the picker. That is the
+     * same exposure `[wrInput]`, `wr-slider` and `wr-select` all carry, and the fix
+     * belongs to the outer control (shield its subtree by providing `WR_FORM_FIELD`
+     * as `null`), not to a strip that cannot tell whose field it is in.
+     */
+    protected readonly controlId: _angular_core.Signal<string | null>;
+    /**
+     * The field's error message, wired to the GROUP rather than to a segment.
+     *
+     * A segmented control is one field made of several buttons, so the description
+     * belongs to the thing the field describes — repeated on every segment it would be
+     * announced once per Tab. `role="group"` supports neither state as a role-specific
+     * attribute, but both are ARIA globals, so this is valid where an `aria-checked`
+     * would not be.
+     *
+     * `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.
+     */
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly ariaInvalid: _angular_core.Signal<"true" | null>;
     /** Index of the selected option, or `-1` when nothing is selected. */
     protected readonly selectedIndex: _angular_core.Signal<number>;
     /** Flips true after the first paint so the thumb only animates user-driven changes, not the initial snap. */
@@ -86,8 +157,19 @@ declare class WrSegmented<T = unknown> {
     protected isSelected(option: WrSegmentedOption<T>): boolean;
     protected select(option: WrSegmentedOption<T>): void;
     protected trackByValue(_: number, option: WrSegmentedOption<T>): unknown;
+    /**
+     * A bound field learns it may show its validation copy from `touch`, and a click
+     * cannot be the source: a strip tabbed into and out of without a pick left the
+     * field untouched forever — which is exactly the case `touched` exists for.
+     *
+     * `wr-knob` and `wr-rating` bind `(blur)` on the one element they own; this
+     * component owns one button per option, so it listens for the bubbling `focusout`
+     * on its host instead — and ignores the one that only moves focus from one segment
+     * to the next, the way `wr-slider` ignores the hop between its two thumbs.
+     */
+    protected onFocusOut(event: FocusEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSegmented<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSegmented<any>, "wr-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSegmented<any>, "wr-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrSegmented };

package/types/ngwr-version.d.ts

@@ -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.
  */
-declare const NGWR_VERSION = "12.0.0";
+declare const NGWR_VERSION = "12.1.0";
 
 /**
  * @license