ngwr 8.0.0 → 9.0.0

package/fesm2022/ngwr-clipboard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-clipboard.mjs","sources":["../../../projects/lib/clipboard/clipboard.ts","../../../projects/lib/clipboard/ngwr-clipboard.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 { DOCUMENT } from '@angular/common';\nimport { Service, inject } from '@angular/core';\n\nimport type { WrClipboardPermission } from './interfaces';\n\n/**\n * Programmatic clipboard read / write.\n *\n * - **Write** uses `navigator.clipboard.writeText` with a hidden\n *   `<textarea>` + `execCommand('copy')` fallback for non-secure contexts.\n * - **Read** uses `navigator.clipboard.readText` (no fallback — older\n *   browsers expose no equivalent).\n * - **Available** / **permission** check what the current browser allows\n *   so UI can disable the action when it would silently no-op.\n *\n * SSR-safe: every method short-circuits when there's no `document.defaultView`.\n *\n * @example\n * ```ts\n * const clip = inject(WrClipboard);\n *\n * await clip.write('Hello');           // resolves to true on success\n * const text = await clip.read();      // string | null\n * clip.available();                    // boolean\n * await clip.permission('write');      // 'granted' | 'denied' | 'prompt' | 'unsupported'\n * ```\n *\n * @see https://ngwr.dev/services/clipboard\n */\n@Service()\nexport class WrClipboard {\n  private readonly doc = inject(DOCUMENT);\n\n  /** Is any clipboard write path available (async API or `execCommand`)? */\n  available(): boolean {\n    const view = this.doc.defaultView;\n    if (!view) return false;\n    if (view.navigator?.clipboard) return true;\n    return typeof this.doc.execCommand === 'function';\n  }\n\n  /**\n   * Write text. Resolves to `true` on success, `false` on failure (denied\n   * permission, no clipboard, etc).\n   */\n  async write(text: string): Promise<boolean> {\n    const view = this.doc.defaultView;\n    if (!view) return false;\n\n    try {\n      if (view.navigator?.clipboard) {\n        await view.navigator.clipboard.writeText(text);\n        return true;\n      }\n      return this.legacyWrite(text);\n    } catch {\n      return this.legacyWrite(text);\n    }\n  }\n\n  /**\n   * Read text from the clipboard. Returns `null` when unsupported or\n   * when the user denied the permission prompt.\n   */\n  async read(): Promise<string | null> {\n    const view = this.doc.defaultView;\n    if (!view?.navigator?.clipboard?.readText) return null;\n    try {\n      return await view.navigator.clipboard.readText();\n    } catch {\n      return null;\n    }\n  }\n\n  /**\n   * Report whether clipboard read / write is available and, when the\n   * browser exposes it, what the user has granted.\n   *\n   * The answer is grounded in the actual Clipboard API capability\n   * (`writeText` / `readText`), then refined by the Permissions API when\n   * it can speak for the requested name. `clipboard-read` / `clipboard-write`\n   * are not recognised everywhere — Firefox and Safari throw on the query —\n   * so a missing or throwing Permissions API is treated as \"supported,\n   * will resolve at use time\" (`'prompt'`), not `'unsupported'`. We only\n   * return `'unsupported'` when the capability genuinely isn't there.\n   */\n  async permission(name: 'read' | 'write'): Promise<WrClipboardPermission> {\n    const view = this.doc.defaultView;\n    if (!view) return 'unsupported';\n\n    const clipboard = view.navigator?.clipboard;\n    const capable =\n      name === 'write'\n        ? typeof clipboard?.writeText === 'function' || typeof this.doc.execCommand === 'function'\n        : typeof clipboard?.readText === 'function';\n    if (!capable) return 'unsupported';\n\n    // Capability exists; ask the Permissions API to refine the state when it can.\n    if (typeof view.navigator?.permissions?.query !== 'function') return 'prompt';\n    try {\n      const status = await view.navigator.permissions.query({\n        name: `clipboard-${name}` as PermissionName,\n      });\n      return status.state;\n    } catch {\n      // Name not recognised by this browser — capability is still present.\n      return 'prompt';\n    }\n  }\n\n  // Internals\n\n  /** Hidden-textarea + `execCommand('copy')` write. Synchronous, no permissions. */\n  private legacyWrite(text: string): boolean {\n    const node = this.doc.createElement('textarea');\n    node.value = text;\n    node.setAttribute('readonly', '');\n    node.style.position = 'fixed';\n    node.style.top = '0';\n    node.style.left = '0';\n    node.style.opacity = '0';\n    node.style.pointerEvents = 'none';\n    this.doc.body.appendChild(node);\n    node.select();\n    try {\n      return this.doc.execCommand('copy');\n    } catch {\n      return false;\n    } finally {\n      this.doc.body.removeChild(node);\n    }\n  }\n}\n\nexport type { WrClipboardPermission } from './interfaces';\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-clipboard.mjs","sources":["../../../projects/lib/clipboard/clipboard.ts","../../../projects/lib/clipboard/ngwr-clipboard.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 { DOCUMENT } from '@angular/common';\nimport { Service, inject } from '@angular/core';\n\nimport type { WrClipboardPermission } from './interfaces';\n\n/**\n * Programmatic clipboard read / write.\n *\n * - **Write** uses `navigator.clipboard.writeText` with a hidden\n *   `<textarea>` + `execCommand('copy')` fallback for non-secure contexts.\n * - **Read** uses `navigator.clipboard.readText` (no fallback — older\n *   browsers expose no equivalent).\n * - **Available** / **permission** check what the current browser allows\n *   so UI can disable the action when it would silently no-op.\n *\n * SSR-safe: every method short-circuits when there's no `document.defaultView`.\n *\n * @example\n * ```ts\n * const clip = inject(WrClipboard);\n *\n * await clip.write('Hello');           // resolves to true on success\n * const text = await clip.read();      // string | null\n * clip.available();                    // boolean\n * await clip.permission('write');      // 'granted' | 'denied' | 'prompt' | 'unsupported'\n * ```\n *\n * @see https://ngwr.dev/reference/services/clipboard\n */\n@Service()\nexport class WrClipboard {\n  private readonly doc = inject(DOCUMENT);\n\n  /** Is any clipboard write path available (async API or `execCommand`)? */\n  available(): boolean {\n    const view = this.doc.defaultView;\n    if (!view) return false;\n    if (view.navigator?.clipboard) return true;\n    return typeof this.doc.execCommand === 'function';\n  }\n\n  /**\n   * Write text. Resolves to `true` on success, `false` on failure (denied\n   * permission, no clipboard, etc).\n   */\n  async write(text: string): Promise<boolean> {\n    const view = this.doc.defaultView;\n    if (!view) return false;\n\n    try {\n      if (view.navigator?.clipboard) {\n        await view.navigator.clipboard.writeText(text);\n        return true;\n      }\n      return this.legacyWrite(text);\n    } catch {\n      return this.legacyWrite(text);\n    }\n  }\n\n  /**\n   * Read text from the clipboard. Returns `null` when unsupported or\n   * when the user denied the permission prompt.\n   */\n  async read(): Promise<string | null> {\n    const view = this.doc.defaultView;\n    if (!view?.navigator?.clipboard?.readText) return null;\n    try {\n      return await view.navigator.clipboard.readText();\n    } catch {\n      return null;\n    }\n  }\n\n  /**\n   * Report whether clipboard read / write is available and, when the\n   * browser exposes it, what the user has granted.\n   *\n   * The answer is grounded in the actual Clipboard API capability\n   * (`writeText` / `readText`), then refined by the Permissions API when\n   * it can speak for the requested name. `clipboard-read` / `clipboard-write`\n   * are not recognised everywhere — Firefox and Safari throw on the query —\n   * so a missing or throwing Permissions API is treated as \"supported,\n   * will resolve at use time\" (`'prompt'`), not `'unsupported'`. We only\n   * return `'unsupported'` when the capability genuinely isn't there.\n   */\n  async permission(name: 'read' | 'write'): Promise<WrClipboardPermission> {\n    const view = this.doc.defaultView;\n    if (!view) return 'unsupported';\n\n    const clipboard = view.navigator?.clipboard;\n    const capable =\n      name === 'write'\n        ? typeof clipboard?.writeText === 'function' || typeof this.doc.execCommand === 'function'\n        : typeof clipboard?.readText === 'function';\n    if (!capable) return 'unsupported';\n\n    // Capability exists; ask the Permissions API to refine the state when it can.\n    if (typeof view.navigator?.permissions?.query !== 'function') return 'prompt';\n    try {\n      const status = await view.navigator.permissions.query({\n        name: `clipboard-${name}` as PermissionName,\n      });\n      return status.state;\n    } catch {\n      // Name not recognised by this browser — capability is still present.\n      return 'prompt';\n    }\n  }\n\n  // Internals\n\n  /** Hidden-textarea + `execCommand('copy')` write. Synchronous, no permissions. */\n  private legacyWrite(text: string): boolean {\n    const node = this.doc.createElement('textarea');\n    node.value = text;\n    node.setAttribute('readonly', '');\n    node.style.position = 'fixed';\n    node.style.top = '0';\n    node.style.left = '0';\n    node.style.opacity = '0';\n    node.style.pointerEvents = 'none';\n    this.doc.body.appendChild(node);\n    node.select();\n    try {\n      return this.doc.execCommand('copy');\n    } catch {\n      return false;\n    } finally {\n      this.doc.body.removeChild(node);\n    }\n  }\n}\n\nexport type { WrClipboardPermission } from './interfaces';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;;;;;;;;;;;;;;AAuBG;MAEU,WAAW,CAAA;AACL,IAAA,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC;;IAGvC,SAAS,GAAA;AACP,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;AACjC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,KAAK;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,SAAS;AAAE,YAAA,OAAO,IAAI;QAC1C,OAAO,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,KAAK,UAAU;IACnD;AAEA;;;AAGG;IACH,MAAM,KAAK,CAAC,IAAY,EAAA;AACtB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;AACjC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,KAAK;AAEvB,QAAA,IAAI;AACF,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,SAAS,EAAE;gBAC7B,MAAM,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;AAC9C,gBAAA,OAAO,IAAI;YACb;AACA,YAAA,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QAC/B;AAAE,QAAA,MAAM;AACN,YAAA,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QAC/B;IACF;AAEA;;;AAGG;AACH,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;AACjC,QAAA,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ;AAAE,YAAA,OAAO,IAAI;AACtD,QAAA,IAAI;YACF,OAAO,MAAM,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,EAAE;QAClD;AAAE,QAAA,MAAM;AACN,YAAA,OAAO,IAAI;QACb;IACF;AAEA;;;;;;;;;;;AAWG;IACH,MAAM,UAAU,CAAC,IAAsB,EAAA;AACrC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;AACjC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,aAAa;AAE/B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS;AAC3C,QAAA,MAAM,OAAO,GACX,IAAI,KAAK;AACP,cAAE,OAAO,SAAS,EAAE,SAAS,KAAK,UAAU,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,KAAK;AAChF,cAAE,OAAO,SAAS,EAAE,QAAQ,KAAK,UAAU;AAC/C,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,aAAa;;QAGlC,IAAI,OAAO,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,KAAK,UAAU;AAAE,YAAA,OAAO,QAAQ;AAC7E,QAAA,IAAI;YACF,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;gBACpD,IAAI,EAAE,CAAA,UAAA,EAAa,IAAI,CAAA,CAAoB;AAC5C,aAAA,CAAC;YACF,OAAO,MAAM,CAAC,KAAK;QACrB;AAAE,QAAA,MAAM;;AAEN,YAAA,OAAO,QAAQ;QACjB;IACF;;;AAKQ,IAAA,WAAW,CAAC,IAAY,EAAA;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC;AAC/C,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO;AAC7B,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG;AACpB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG;AACrB,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG;AACxB,QAAA,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM;QACjC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QAC/B,IAAI,CAAC,MAAM,EAAE;AACb,QAAA,IAAI;YACF,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC;QACrC;AAAE,QAAA,MAAM;AACN,YAAA,OAAO,KAAK;QACd;gBAAU;YACR,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACjC;IACF;uGArGW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,OAAA,EAAA,CAAA;wGAAX,WAAW,EAAA,CAAA;;2FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBADvB;;;ACpCD;;AAEG;;;;"}

package/fesm2022/ngwr-collapse.mjs

@@ -41,7 +41,7 @@ const WR_COLLAPSE_GROUP = new InjectionToken('WR_COLLAPSE_GROUP');
  * </wr-collapse-group>
  * ```
  *
- * @see https://ngwr.dev/components/collapse
+ * @see https://ngwr.dev/reference/components/collapse
  */
 class WrCollapse {
     /** Header text. */
@@ -94,10 +94,10 @@ class WrCollapse {
             return;
         this.open.update(v => !v);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrCollapse, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: WrCollapse, isStandalone: true, selector: "wr-collapse", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-collapse__header\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"bodyId\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wr-collapse__title\">{{ title() }}</span>\n  <svg\n    class=\"wr-icon__svg wr-collapse__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\n<div\n  class=\"wr-collapse__body\"\n  [attr.id]=\"bodyId\"\n  [class.wr-collapse__body--open]=\"open()\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.inert]=\"!open() ? '' : null\"\n>\n  <div class=\"wr-collapse__content\">\n    <div class=\"wr-collapse__inner\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCollapse, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrCollapse, isStandalone: true, selector: "wr-collapse", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-collapse__header\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"bodyId\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wr-collapse__title\">{{ title() }}</span>\n  <svg\n    class=\"wr-icon__svg wr-collapse__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\n<div\n  class=\"wr-collapse__body\"\n  [attr.id]=\"bodyId\"\n  [class.wr-collapse__body--open]=\"open()\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.inert]=\"!open() ? '' : null\"\n>\n  <div class=\"wr-collapse__content\">\n    <div class=\"wr-collapse__inner\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrCollapse, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCollapse, decorators: [{
             type: Component,
             args: [{ selector: 'wr-collapse', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<button\n  type=\"button\"\n  class=\"wr-collapse__header\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"bodyId\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wr-collapse__title\">{{ title() }}</span>\n  <svg\n    class=\"wr-icon__svg wr-collapse__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\n<div\n  class=\"wr-collapse__body\"\n  [attr.id]=\"bodyId\"\n  [class.wr-collapse__body--open]=\"open()\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.inert]=\"!open() ? '' : null\"\n>\n  <div class=\"wr-collapse__content\">\n    <div class=\"wr-collapse__inner\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
@@ -112,7 +112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  * Visual + behavioral grouping of `<wr-collapse>` children. When
  * `accordion` is true, opening one child closes the others.
  *
- * @see https://ngwr.dev/components/collapse
+ * @see https://ngwr.dev/reference/components/collapse
  */
 class WrCollapseGroup {
     /** When true, only one child may be open at a time. @default false */
@@ -132,8 +132,8 @@ class WrCollapseGroup {
                 member.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrCollapseGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: WrCollapseGroup, isStandalone: true, selector: "wr-collapse-group", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-collapse-group" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCollapseGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrCollapseGroup, isStandalone: true, selector: "wr-collapse-group", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-collapse-group" }, providers: [
             {
                 provide: WR_COLLAPSE_GROUP,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
@@ -141,7 +141,7 @@ class WrCollapseGroup {
             },
         ], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrCollapseGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCollapseGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-collapse-group',
@@ -180,7 +180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  * </wr-accordion>
  * ```
  *
- * @see https://ngwr.dev/components/collapse
+ * @see https://ngwr.dev/reference/components/collapse
  */
 class WrAccordion {
     /** Always behaves as an accordion. Provided for context-interface symmetry. */
@@ -198,8 +198,8 @@ class WrAccordion {
                 member.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: WrAccordion, isStandalone: true, selector: "wr-accordion", host: { classAttribute: "wr-collapse-group wr-collapse-group--accordion" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: WrAccordion, isStandalone: true, selector: "wr-accordion", host: { classAttribute: "wr-collapse-group wr-collapse-group--accordion" }, providers: [
             {
                 provide: WR_COLLAPSE_GROUP,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
@@ -207,7 +207,7 @@ class WrAccordion {
             },
         ], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrAccordion, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-accordion',

package/fesm2022/ngwr-collapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-collapse.mjs","sources":["../../../projects/lib/collapse/tokens/collapse-group.token.ts","../../../projects/lib/collapse/collapse.ts","../../../projects/lib/collapse/collapse.html","../../../projects/lib/collapse/collapse-group.ts","../../../projects/lib/collapse/accordion.ts","../../../projects/lib/collapse/ngwr-collapse.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 { InjectionToken, type Signal } from '@angular/core';\n\n/**\n * Contract a collapse uses to talk to its parent `<wr-collapse-group>`.\n *\n * @internal\n */\nexport interface WrCollapseGroupContext {\n  /** When true, only one child collapse may be open at a time. */\n  readonly accordion: Signal<boolean>;\n  /** Called by a child when it opens — closes siblings in accordion mode. */\n  notifyOpened(opener: object): void;\n  /** Register a child so the group can call `closeAll()` etc. */\n  register(member: { close(): void; readonly id: object }): void;\n  /** Unregister on destroy. */\n  unregister(memberId: object): void;\n}\n\n/**\n * Token a `<wr-collapse>` injects to register itself with — and notify of\n * open events — its parent `<wr-collapse-group>`. Drives the accordion\n * behaviour when the group has `accordion` enabled.\n *\n * @internal\n */\nexport const WR_COLLAPSE_GROUP = new InjectionToken<WrCollapseGroupContext>('WR_COLLAPSE_GROUP');\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, DestroyRef, ViewEncapsulation, computed, effect, inject, input, model } from '@angular/core';\n\nimport { randomId } from 'ngwr/utils';\n\nimport { WR_COLLAPSE_GROUP } from './tokens';\n\n/**\n * Expandable panel with a clickable header. Two-way binds the `open`\n * state. When wrapped in `<wr-collapse-group accordion>`, only one\n * sibling can be open at a time.\n *\n * @example\n * ```html\n * <wr-collapse title=\"Section title\">\n *   Section body…\n * </wr-collapse>\n *\n * <wr-collapse-group accordion>\n *   <wr-collapse title=\"A\">…</wr-collapse>\n *   <wr-collapse title=\"B\">…</wr-collapse>\n * </wr-collapse-group>\n * ```\n *\n * @see https://ngwr.dev/components/collapse\n */\n@Component({\n  selector: 'wr-collapse',\n  templateUrl: './collapse.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrCollapse {\n  /** Header text. */\n  readonly title = input.required<string>();\n\n  /** Two-way bindable open/closed state. @default false */\n  readonly open = model<boolean>(false);\n\n  /** Disable interaction. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Identity used by the parent group when tracking children. @internal */\n  readonly id = { name: randomId('wr-collapse') };\n\n  /** DOM id for the body element, referenced by header's `aria-controls`. */\n  protected readonly bodyId = `wr-collapse-body-${this.id.name}`;\n\n  private readonly group = inject(WR_COLLAPSE_GROUP, { optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-collapse'];\n    if (this.open()) parts.push('wr-collapse--open');\n    if (this.disabled()) parts.push('wr-collapse--disabled');\n    return parts.join(' ');\n  });\n\n  constructor() {\n    if (this.group) {\n      this.group.register({ id: this.id, close: () => this.open.set(false) });\n      this.destroyRef.onDestroy(() => this.group?.unregister(this.id));\n\n      // Tell the group whenever we open — group decides whether to close siblings.\n      effect(() => {\n        if (this.open()) this.group?.notifyOpened(this.id);\n      });\n    }\n  }\n\n  /** Open the panel. */\n  openPanel(): void {\n    if (this.disabled()) return;\n    this.open.set(true);\n  }\n\n  /** Close the panel. */\n  close(): void {\n    this.open.set(false);\n  }\n\n  /** Toggle the panel. */\n  toggle(): void {\n    if (this.disabled()) return;\n    this.open.update(v => !v);\n  }\n}\n","<button\n  type=\"button\"\n  class=\"wr-collapse__header\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"bodyId\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wr-collapse__title\">{{ title() }}</span>\n  <svg\n    class=\"wr-icon__svg wr-collapse__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\n<div\n  class=\"wr-collapse__body\"\n  [attr.id]=\"bodyId\"\n  [class.wr-collapse__body--open]=\"open()\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.inert]=\"!open() ? '' : null\"\n>\n  <div class=\"wr-collapse__content\">\n    <div class=\"wr-collapse__inner\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, forwardRef, input } from '@angular/core';\n\nimport { WR_COLLAPSE_GROUP, type WrCollapseGroupContext } from './tokens';\n\ninterface Member {\n  close(): void;\n  readonly id: object;\n}\n\n/**\n * Visual + behavioral grouping of `<wr-collapse>` children. When\n * `accordion` is true, opening one child closes the others.\n *\n * @see https://ngwr.dev/components/collapse\n */\n@Component({\n  selector: 'wr-collapse-group',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-collapse-group' },\n  providers: [\n    {\n      provide: WR_COLLAPSE_GROUP,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrCollapseGroup),\n    },\n  ],\n})\nexport class WrCollapseGroup implements WrCollapseGroupContext {\n  /** When true, only one child may be open at a time. @default false */\n  readonly accordion = input(false, { transform: coerceBooleanProperty });\n\n  private readonly members = new Map<object, Member>();\n\n  register(member: Member): void {\n    this.members.set(member.id, member);\n  }\n\n  unregister(memberId: object): void {\n    this.members.delete(memberId);\n  }\n\n  notifyOpened(opener: object): void {\n    if (!this.accordion()) return;\n    for (const [id, member] of this.members) {\n      if (id !== opener) member.close();\n    }\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, forwardRef, signal } from '@angular/core';\n\nimport { WR_COLLAPSE_GROUP, type WrCollapseGroupContext } from './tokens';\n\ninterface Member {\n  close(): void;\n  readonly id: object;\n}\n\n/**\n * Accordion — a `<wr-collapse>` container that enforces single-open\n * behavior: opening a child closes its siblings.\n *\n * Use `<wr-collapse-group>` when you only need visual grouping without\n * the mutually-exclusive open semantics.\n *\n * @example\n * ```html\n * <wr-accordion>\n *   <wr-collapse title=\"Profile\">…</wr-collapse>\n *   <wr-collapse title=\"Security\">…</wr-collapse>\n *   <wr-collapse title=\"Notifications\">…</wr-collapse>\n * </wr-accordion>\n * ```\n *\n * @see https://ngwr.dev/components/collapse\n */\n@Component({\n  selector: 'wr-accordion',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-collapse-group wr-collapse-group--accordion' },\n  providers: [\n    {\n      provide: WR_COLLAPSE_GROUP,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrAccordion),\n    },\n  ],\n})\nexport class WrAccordion implements WrCollapseGroupContext {\n  /** Always behaves as an accordion. Provided for context-interface symmetry. */\n  readonly accordion = signal(true).asReadonly();\n\n  private readonly members = new Map<object, Member>();\n\n  register(member: Member): void {\n    this.members.set(member.id, member);\n  }\n\n  unregister(memberId: object): void {\n    this.members.delete(memberId);\n  }\n\n  notifyOpened(opener: object): void {\n    for (const [id, member] of this.members) {\n      if (id !== opener) member.close();\n    }\n  }\n}\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-collapse.mjs","sources":["../../../projects/lib/collapse/tokens/collapse-group.token.ts","../../../projects/lib/collapse/collapse.ts","../../../projects/lib/collapse/collapse.html","../../../projects/lib/collapse/collapse-group.ts","../../../projects/lib/collapse/accordion.ts","../../../projects/lib/collapse/ngwr-collapse.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 { InjectionToken, type Signal } from '@angular/core';\n\n/**\n * Contract a collapse uses to talk to its parent `<wr-collapse-group>`.\n *\n * @internal\n */\nexport interface WrCollapseGroupContext {\n  /** When true, only one child collapse may be open at a time. */\n  readonly accordion: Signal<boolean>;\n  /** Called by a child when it opens — closes siblings in accordion mode. */\n  notifyOpened(opener: object): void;\n  /** Register a child so the group can call `closeAll()` etc. */\n  register(member: { close(): void; readonly id: object }): void;\n  /** Unregister on destroy. */\n  unregister(memberId: object): void;\n}\n\n/**\n * Token a `<wr-collapse>` injects to register itself with — and notify of\n * open events — its parent `<wr-collapse-group>`. Drives the accordion\n * behaviour when the group has `accordion` enabled.\n *\n * @internal\n */\nexport const WR_COLLAPSE_GROUP = new InjectionToken<WrCollapseGroupContext>('WR_COLLAPSE_GROUP');\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, DestroyRef, ViewEncapsulation, computed, effect, inject, input, model } from '@angular/core';\n\nimport { randomId } from 'ngwr/utils';\n\nimport { WR_COLLAPSE_GROUP } from './tokens';\n\n/**\n * Expandable panel with a clickable header. Two-way binds the `open`\n * state. When wrapped in `<wr-collapse-group accordion>`, only one\n * sibling can be open at a time.\n *\n * @example\n * ```html\n * <wr-collapse title=\"Section title\">\n *   Section body…\n * </wr-collapse>\n *\n * <wr-collapse-group accordion>\n *   <wr-collapse title=\"A\">…</wr-collapse>\n *   <wr-collapse title=\"B\">…</wr-collapse>\n * </wr-collapse-group>\n * ```\n *\n * @see https://ngwr.dev/reference/components/collapse\n */\n@Component({\n  selector: 'wr-collapse',\n  templateUrl: './collapse.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrCollapse {\n  /** Header text. */\n  readonly title = input.required<string>();\n\n  /** Two-way bindable open/closed state. @default false */\n  readonly open = model<boolean>(false);\n\n  /** Disable interaction. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Identity used by the parent group when tracking children. @internal */\n  readonly id = { name: randomId('wr-collapse') };\n\n  /** DOM id for the body element, referenced by header's `aria-controls`. */\n  protected readonly bodyId = `wr-collapse-body-${this.id.name}`;\n\n  private readonly group = inject(WR_COLLAPSE_GROUP, { optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-collapse'];\n    if (this.open()) parts.push('wr-collapse--open');\n    if (this.disabled()) parts.push('wr-collapse--disabled');\n    return parts.join(' ');\n  });\n\n  constructor() {\n    if (this.group) {\n      this.group.register({ id: this.id, close: () => this.open.set(false) });\n      this.destroyRef.onDestroy(() => this.group?.unregister(this.id));\n\n      // Tell the group whenever we open — group decides whether to close siblings.\n      effect(() => {\n        if (this.open()) this.group?.notifyOpened(this.id);\n      });\n    }\n  }\n\n  /** Open the panel. */\n  openPanel(): void {\n    if (this.disabled()) return;\n    this.open.set(true);\n  }\n\n  /** Close the panel. */\n  close(): void {\n    this.open.set(false);\n  }\n\n  /** Toggle the panel. */\n  toggle(): void {\n    if (this.disabled()) return;\n    this.open.update(v => !v);\n  }\n}\n","<button\n  type=\"button\"\n  class=\"wr-collapse__header\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"bodyId\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wr-collapse__title\">{{ title() }}</span>\n  <svg\n    class=\"wr-icon__svg wr-collapse__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\n<div\n  class=\"wr-collapse__body\"\n  [attr.id]=\"bodyId\"\n  [class.wr-collapse__body--open]=\"open()\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.inert]=\"!open() ? '' : null\"\n>\n  <div class=\"wr-collapse__content\">\n    <div class=\"wr-collapse__inner\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, forwardRef, input } from '@angular/core';\n\nimport { WR_COLLAPSE_GROUP, type WrCollapseGroupContext } from './tokens';\n\ninterface Member {\n  close(): void;\n  readonly id: object;\n}\n\n/**\n * Visual + behavioral grouping of `<wr-collapse>` children. When\n * `accordion` is true, opening one child closes the others.\n *\n * @see https://ngwr.dev/reference/components/collapse\n */\n@Component({\n  selector: 'wr-collapse-group',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-collapse-group' },\n  providers: [\n    {\n      provide: WR_COLLAPSE_GROUP,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrCollapseGroup),\n    },\n  ],\n})\nexport class WrCollapseGroup implements WrCollapseGroupContext {\n  /** When true, only one child may be open at a time. @default false */\n  readonly accordion = input(false, { transform: coerceBooleanProperty });\n\n  private readonly members = new Map<object, Member>();\n\n  register(member: Member): void {\n    this.members.set(member.id, member);\n  }\n\n  unregister(memberId: object): void {\n    this.members.delete(memberId);\n  }\n\n  notifyOpened(opener: object): void {\n    if (!this.accordion()) return;\n    for (const [id, member] of this.members) {\n      if (id !== opener) member.close();\n    }\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, forwardRef, signal } from '@angular/core';\n\nimport { WR_COLLAPSE_GROUP, type WrCollapseGroupContext } from './tokens';\n\ninterface Member {\n  close(): void;\n  readonly id: object;\n}\n\n/**\n * Accordion — a `<wr-collapse>` container that enforces single-open\n * behavior: opening a child closes its siblings.\n *\n * Use `<wr-collapse-group>` when you only need visual grouping without\n * the mutually-exclusive open semantics.\n *\n * @example\n * ```html\n * <wr-accordion>\n *   <wr-collapse title=\"Profile\">…</wr-collapse>\n *   <wr-collapse title=\"Security\">…</wr-collapse>\n *   <wr-collapse title=\"Notifications\">…</wr-collapse>\n * </wr-accordion>\n * ```\n *\n * @see https://ngwr.dev/reference/components/collapse\n */\n@Component({\n  selector: 'wr-accordion',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-collapse-group wr-collapse-group--accordion' },\n  providers: [\n    {\n      provide: WR_COLLAPSE_GROUP,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrAccordion),\n    },\n  ],\n})\nexport class WrAccordion implements WrCollapseGroupContext {\n  /** Always behaves as an accordion. Provided for context-interface symmetry. */\n  readonly accordion = signal(true).asReadonly();\n\n  private readonly members = new Map<object, Member>();\n\n  register(member: Member): void {\n    this.members.set(member.id, member);\n  }\n\n  unregister(memberId: object): void {\n    this.members.delete(memberId);\n  }\n\n  notifyOpened(opener: object): void {\n    for (const [id, member] of this.members) {\n      if (id !== opener) member.close();\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-color-picker.mjs

@@ -1,10 +1,9 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DecimalPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, signal, computed, forwardRef, ViewEncapsulation, Component, model, output, inject, ElementRef, ViewContainerRef, DestroyRef, Directive } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { input, model, output, signal, computed, effect, ViewEncapsulation, Component, inject, ElementRef, ViewContainerRef, DestroyRef, Directive } from '@angular/core';
 import { WrSegmented } from 'ngwr/segmented';
-import { noop, clamp } from 'ngwr/utils';
+import { clamp } from 'ngwr/utils';
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -254,29 +253,40 @@ function toHex(rgb, withAlpha = false) {
  */
 /**
  * Inline colour picker — HSV canvas, hue slider, optional alpha slider, HEX
- * input. Implements `ControlValueAccessor`, so it binds with `[(ngModel)]`,
- * `[formControl]`, or `formControlName`. Output is always a string in the
- * format chosen via `[format]`.
+ * input.
+ *
+ * A signal-forms native control: it implements `FormValueControl<string>`, so
+ * `[formField]` binds straight to its `value` model — no
+ * `ControlValueAccessor` in between. `[(value)]` works standalone. Output is
+ * always a hex string.
  *
  * @example
  * ```html
- * <wr-color-picker [(ngModel)]="brandColor" />
- * <wr-color-picker [(ngModel)]="brandColor" [alpha]="false" />
+ * <!-- signal forms -->
+ * <wr-color-picker [formField]="form.brandColor" />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-color-picker [(value)]="brandColor" [alpha]="false" />
  * ```
  *
- * @see https://ngwr.dev/components/color-picker
+ * @see https://ngwr.dev/reference/components/color-picker
  */
 class WrColorPicker {
     /** Render the alpha slider and emit 8-digit hex / `rgba()`. @default true */
     alpha = input(true, { ...(ngDevMode ? { debugName: "alpha" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /** Disable interaction. @default false */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /** Output format produced through the CVA. @default 'hex' */
+    /** Output format produced by the control. @default 'hex' */
     format = input('hex', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
     /** Preset hex colours rendered as a clickable row beneath the inputs. Empty = no row. @default [] */
     swatches = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "swatches" }] : /* istanbul ignore next */ []));
+    /** The selected colour as a string. Bound by `[formField]`, or two-way via `[(value)]`. */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emitted on blur so a bound field can mark itself touched. */
+    touch = output();
     // Source of truth: HSV + alpha
     h = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "h" }] : /* istanbul ignore next */ []));
@@ -286,10 +296,6 @@ class WrColorPicker {
     ...(ngDevMode ? [{ debugName: "v" }] : /* istanbul ignore next */ []));
     a = signal(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "a" }] : /* istanbul ignore next */ []));
-    disabledFromCva = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
-    effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
     // Derived values
     /** RGB view of the current colour, computed lazily. */
     rgb = computed(() => hsvToRgb({ h: this.h(), s: this.s(), v: this.v(), a: this.a() }), /* @ts-ignore */
@@ -336,35 +342,33 @@ class WrColorPicker {
         const parts = ['wr-color-picker'];
         if (this.alpha())
             parts.push('wr-color-picker--alpha');
-        if (this.effectiveDisabled())
+        if (this.disabled())
             parts.push('wr-color-picker--disabled');
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    // ControlValueAccessor
-    onChange = noop;
-    onTouched = noop;
-    writeValue(value) {
-        const rgb = parseHex(value ?? '') ?? { r: 0, g: 0, b: 0, a: 1 };
-        const hsv = rgbToHsv(rgb);
-        this.h.set(hsv.h);
-        this.s.set(hsv.s);
-        this.v.set(hsv.v);
-        this.a.set(hsv.a);
-        this.hexInput.set(this.hex());
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
+    /** Last hex we pushed into `value`; lets the sync effect ignore our own writes. */
+    lastEmittedHex = null;
+    constructor() {
+        // External writes (via `[formField]` / `[(value)]`) flow the incoming hex
+        // string back into the HSV source of truth. Our own emits are skipped via
+        // `lastEmittedHex` so dragging keeps its continuous (unquantised) values.
+        effect(() => {
+            const value = this.value();
+            if (value === this.lastEmittedHex)
+                return;
+            const rgb = parseHex(value) ?? { r: 0, g: 0, b: 0, a: 1 };
+            const hsv = rgbToHsv(rgb);
+            this.h.set(hsv.h);
+            this.s.set(hsv.s);
+            this.v.set(hsv.v);
+            this.a.set(hsv.a);
+            this.hexInput.set(toHex(rgb, this.alpha()));
+        });
     }
     // Drag handlers
     onPointerDown(event, surface) {
-        if (this.effectiveDisabled())
+        if (this.disabled())
             return;
         event.preventDefault();
         const target = event.currentTarget;
@@ -374,7 +378,7 @@ class WrColorPicker {
             target.releasePointerCapture(e.pointerId);
             target.removeEventListener('pointermove', update);
             target.removeEventListener('pointerup', cleanup);
-            this.onTouched();
+            this.touch.emit();
         };
         target.addEventListener('pointermove', update);
         target.addEventListener('pointerup', cleanup);
@@ -413,7 +417,7 @@ class WrColorPicker {
     onHexBlur() {
         // Re-sync the input with the canonical value (in case the user typed invalid).
         this.hexInput.set(this.hex());
-        this.onTouched();
+        this.touch.emit();
     }
     // Emission
     emit() {
@@ -421,7 +425,9 @@ class WrColorPicker {
         this.hexInput.set(this.hex());
     }
     emitWithoutHexSync() {
-        this.onChange(this.hex());
+        const hex = this.hex();
+        this.lastEmittedHex = hex;
+        this.value.set(hex);
     }
     // Tab + channel handlers
     onTabChange(tab) {
@@ -452,7 +458,7 @@ class WrColorPicker {
         this.emit();
     }
     onSwatchClick(hex) {
-        if (this.effectiveDisabled())
+        if (this.disabled())
             return;
         const rgb = parseHex(hex);
         if (!rgb)
@@ -468,31 +474,17 @@ class WrColorPicker {
         this.a.set(hsv.a);
         this.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrColorPicker, isStandalone: true, selector: "wr-color-picker", inputs: { alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--wr-color-picker-hue": "hueCss()", "style.--wr-color-picker-rgb": "rgbCss()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                // eslint-disable-next-line @angular-eslint/no-forward-ref
-                useExisting: forwardRef(() => WrColorPicker),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div class=\"wr-color-picker__sv\" (pointerdown)=\"onPointerDown($event, 'sv')\">\n  <span class=\"wr-color-picker__thumb\" [style.left.%]=\"svThumbX()\" [style.top.%]=\"svThumbY()\"></span>\n</div>\n\n<div class=\"wr-color-picker__slider wr-color-picker__slider--hue\" (pointerdown)=\"onPointerDown($event, 'hue')\">\n  <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"hueThumbX()\"></span>\n</div>\n\n@if (alpha()) {\n  <div class=\"wr-color-picker__slider wr-color-picker__slider--alpha\" (pointerdown)=\"onPointerDown($event, 'alpha')\">\n    <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"alphaThumbX()\"></span>\n  </div>\n}\n\n<div class=\"wr-color-picker__chrome\">\n  <span class=\"wr-color-picker__preview\" [style.background]=\"hex()\"></span>\n  <wr-segmented\n    class=\"wr-color-picker__tabs\"\n    [options]=\"tabOptions\"\n    [value]=\"activeTab()\"\n    (valueChange)=\"onTabChange($event)\"\n  />\n</div>\n\n@switch (activeTab()) {\n  @case ('hex') {\n    <div class=\"wr-color-picker__inputs wr-color-picker__inputs--hex\">\n      <label class=\"wr-color-picker__field wr-color-picker__field--wide\">\n        <input\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          [value]=\"hexInput()\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHexInput($event)\"\n          (blur)=\"onHexBlur()\"\n        />\n        <span class=\"wr-color-picker__field-label\">HEX</span>\n      </label>\n    </div>\n  }\n  @case ('rgb') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().r\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('r', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">R</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().g\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('g', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">G</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().b\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('b', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">B</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"effectiveDisabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n  @case ('hsl') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"360\"\n          [value]=\"hslView().h | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('h', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">H</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().s * 100 | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('s', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">S%</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().l * 100 | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('l', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">L%</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"effectiveDisabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n}\n\n@if (swatches().length > 0) {\n  <div class=\"wr-color-picker__swatches\">\n    @for (color of swatches(); track color) {\n      <button\n        type=\"button\"\n        class=\"wr-color-picker__swatch\"\n        [style.background]=\"color\"\n        [attr.aria-label]=\"color\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"onSwatchClick(color)\"\n      ></button>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrSegmented, selector: "wr-segmented", inputs: ["options", "value", "disabled", "size"], outputs: ["valueChange"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrColorPicker, isStandalone: true, selector: "wr-color-picker", inputs: { alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", 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()", "style.--wr-color-picker-hue": "hueCss()", "style.--wr-color-picker-rgb": "rgbCss()" } }, ngImport: i0, template: "<div class=\"wr-color-picker__sv\" (pointerdown)=\"onPointerDown($event, 'sv')\">\n  <span class=\"wr-color-picker__thumb\" [style.left.%]=\"svThumbX()\" [style.top.%]=\"svThumbY()\"></span>\n</div>\n\n<div class=\"wr-color-picker__slider wr-color-picker__slider--hue\" (pointerdown)=\"onPointerDown($event, 'hue')\">\n  <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"hueThumbX()\"></span>\n</div>\n\n@if (alpha()) {\n  <div class=\"wr-color-picker__slider wr-color-picker__slider--alpha\" (pointerdown)=\"onPointerDown($event, 'alpha')\">\n    <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"alphaThumbX()\"></span>\n  </div>\n}\n\n<div class=\"wr-color-picker__chrome\">\n  <span class=\"wr-color-picker__preview\" [style.background]=\"hex()\"></span>\n  <wr-segmented\n    class=\"wr-color-picker__tabs\"\n    [options]=\"tabOptions\"\n    [value]=\"activeTab()\"\n    (valueChange)=\"onTabChange($event)\"\n  />\n</div>\n\n@switch (activeTab()) {\n  @case ('hex') {\n    <div class=\"wr-color-picker__inputs wr-color-picker__inputs--hex\">\n      <label class=\"wr-color-picker__field wr-color-picker__field--wide\">\n        <input\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          [value]=\"hexInput()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onHexInput($event)\"\n          (blur)=\"onHexBlur()\"\n        />\n        <span class=\"wr-color-picker__field-label\">HEX</span>\n      </label>\n    </div>\n  }\n  @case ('rgb') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().r\"\n          [disabled]=\"disabled()\"\n          (input)=\"onRgbChannel('r', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">R</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().g\"\n          [disabled]=\"disabled()\"\n          (input)=\"onRgbChannel('g', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">G</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().b\"\n          [disabled]=\"disabled()\"\n          (input)=\"onRgbChannel('b', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">B</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"disabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n  @case ('hsl') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"360\"\n          [value]=\"hslView().h | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          (input)=\"onHslChannel('h', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">H</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().s * 100 | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          (input)=\"onHslChannel('s', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">S%</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().l * 100 | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          (input)=\"onHslChannel('l', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">L%</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"disabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n}\n\n@if (swatches().length > 0) {\n  <div class=\"wr-color-picker__swatches\">\n    @for (color of swatches(); track color) {\n      <button\n        type=\"button\"\n        class=\"wr-color-picker__swatch\"\n        [style.background]=\"color\"\n        [attr.aria-label]=\"color\"\n        [disabled]=\"disabled()\"\n        (click)=\"onSwatchClick(color)\"\n      ></button>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrSegmented, selector: "wr-segmented", inputs: ["options", "value", "disabled", "size"], outputs: ["valueChange"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrColorPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrColorPicker, decorators: [{
             type: Component,
             args: [{ selector: 'wr-color-picker', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',
                         '[style.--wr-color-picker-hue]': 'hueCss()',
                         '[style.--wr-color-picker-rgb]': 'rgbCss()',
-                    }, imports: [DecimalPipe, WrSegmented], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            // eslint-disable-next-line @angular-eslint/no-forward-ref
-                            useExisting: forwardRef(() => WrColorPicker),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"wr-color-picker__sv\" (pointerdown)=\"onPointerDown($event, 'sv')\">\n  <span class=\"wr-color-picker__thumb\" [style.left.%]=\"svThumbX()\" [style.top.%]=\"svThumbY()\"></span>\n</div>\n\n<div class=\"wr-color-picker__slider wr-color-picker__slider--hue\" (pointerdown)=\"onPointerDown($event, 'hue')\">\n  <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"hueThumbX()\"></span>\n</div>\n\n@if (alpha()) {\n  <div class=\"wr-color-picker__slider wr-color-picker__slider--alpha\" (pointerdown)=\"onPointerDown($event, 'alpha')\">\n    <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"alphaThumbX()\"></span>\n  </div>\n}\n\n<div class=\"wr-color-picker__chrome\">\n  <span class=\"wr-color-picker__preview\" [style.background]=\"hex()\"></span>\n  <wr-segmented\n    class=\"wr-color-picker__tabs\"\n    [options]=\"tabOptions\"\n    [value]=\"activeTab()\"\n    (valueChange)=\"onTabChange($event)\"\n  />\n</div>\n\n@switch (activeTab()) {\n  @case ('hex') {\n    <div class=\"wr-color-picker__inputs wr-color-picker__inputs--hex\">\n      <label class=\"wr-color-picker__field wr-color-picker__field--wide\">\n        <input\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          [value]=\"hexInput()\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHexInput($event)\"\n          (blur)=\"onHexBlur()\"\n        />\n        <span class=\"wr-color-picker__field-label\">HEX</span>\n      </label>\n    </div>\n  }\n  @case ('rgb') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().r\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('r', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">R</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().g\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('g', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">G</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().b\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('b', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">B</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"effectiveDisabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n  @case ('hsl') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"360\"\n          [value]=\"hslView().h | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('h', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">H</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().s * 100 | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('s', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">S%</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().l * 100 | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('l', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">L%</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"effectiveDisabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n}\n\n@if (swatches().length > 0) {\n  <div class=\"wr-color-picker__swatches\">\n    @for (color of swatches(); track color) {\n      <button\n        type=\"button\"\n        class=\"wr-color-picker__swatch\"\n        [style.background]=\"color\"\n        [attr.aria-label]=\"color\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"onSwatchClick(color)\"\n      ></button>\n    }\n  </div>\n}\n" }]
-        }], propDecorators: { alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], swatches: [{ type: i0.Input, args: [{ isSignal: true, alias: "swatches", required: false }] }] } });
+                    }, imports: [DecimalPipe, WrSegmented], template: "<div class=\"wr-color-picker__sv\" (pointerdown)=\"onPointerDown($event, 'sv')\">\n  <span class=\"wr-color-picker__thumb\" [style.left.%]=\"svThumbX()\" [style.top.%]=\"svThumbY()\"></span>\n</div>\n\n<div class=\"wr-color-picker__slider wr-color-picker__slider--hue\" (pointerdown)=\"onPointerDown($event, 'hue')\">\n  <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"hueThumbX()\"></span>\n</div>\n\n@if (alpha()) {\n  <div class=\"wr-color-picker__slider wr-color-picker__slider--alpha\" (pointerdown)=\"onPointerDown($event, 'alpha')\">\n    <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"alphaThumbX()\"></span>\n  </div>\n}\n\n<div class=\"wr-color-picker__chrome\">\n  <span class=\"wr-color-picker__preview\" [style.background]=\"hex()\"></span>\n  <wr-segmented\n    class=\"wr-color-picker__tabs\"\n    [options]=\"tabOptions\"\n    [value]=\"activeTab()\"\n    (valueChange)=\"onTabChange($event)\"\n  />\n</div>\n\n@switch (activeTab()) {\n  @case ('hex') {\n    <div class=\"wr-color-picker__inputs wr-color-picker__inputs--hex\">\n      <label class=\"wr-color-picker__field wr-color-picker__field--wide\">\n        <input\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          [value]=\"hexInput()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onHexInput($event)\"\n          (blur)=\"onHexBlur()\"\n        />\n        <span class=\"wr-color-picker__field-label\">HEX</span>\n      </label>\n    </div>\n  }\n  @case ('rgb') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().r\"\n          [disabled]=\"disabled()\"\n          (input)=\"onRgbChannel('r', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">R</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().g\"\n          [disabled]=\"disabled()\"\n          (input)=\"onRgbChannel('g', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">G</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().b\"\n          [disabled]=\"disabled()\"\n          (input)=\"onRgbChannel('b', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">B</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"disabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n  @case ('hsl') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"360\"\n          [value]=\"hslView().h | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          (input)=\"onHslChannel('h', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">H</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().s * 100 | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          (input)=\"onHslChannel('s', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">S%</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().l * 100 | number: '1.0-0'\"\n          [disabled]=\"disabled()\"\n          (input)=\"onHslChannel('l', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">L%</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"disabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n}\n\n@if (swatches().length > 0) {\n  <div class=\"wr-color-picker__swatches\">\n    @for (color of swatches(); track color) {\n      <button\n        type=\"button\"\n        class=\"wr-color-picker__swatch\"\n        [style.background]=\"color\"\n        [attr.aria-label]=\"color\"\n        [disabled]=\"disabled()\"\n        (click)=\"onSwatchClick(color)\"\n      ></button>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], swatches: [{ type: i0.Input, args: [{ isSignal: true, alias: "swatches", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
 
 /**
  * @license
@@ -520,7 +512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  * </button>
  * ```
  *
- * @see https://ngwr.dev/components/color-picker
+ * @see https://ngwr.dev/reference/components/color-picker
  */
 class WrColorPickerTrigger {
     /** Two-way bindable colour value (hex string). */
@@ -587,9 +579,9 @@ class WrColorPickerTrigger {
         ref.setInput('format', this.format());
         ref.setInput('swatches', this.swatches());
         ref.setInput('disabled', this.disabled());
-        ref.instance.writeValue(this.value());
-        // Bridge inner picker's CVA onChange to our two-way [(value)] model.
-        ref.instance.registerOnChange((next) => this.value.set(next));
+        ref.setInput('value', this.value());
+        // Bridge the inner picker's `value` model back to our two-way [(value)].
+        ref.instance.value.subscribe((next) => this.value.set(next));
         // Outside-click → close (CDK's outsidePointerEvents only fires for clicks
         // outside the overlay pane; we also need to ignore re-clicks on the host).
         this.overlayRef
@@ -627,10 +619,10 @@ class WrColorPickerTrigger {
             this.overlayRef = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrColorPickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: WrColorPickerTrigger, isStandalone: true, selector: "[wrColorPickerTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "toggle()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrColorPickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: WrColorPickerTrigger, isStandalone: true, selector: "[wrColorPickerTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "toggle()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrColorPickerTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrColorPickerTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrColorPickerTrigger]',