@ng-primitives/mcp 0.124.0 → 0.126.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-primitives/mcp",
-  "version": "0.124.0",
+  "version": "0.126.0",
   "description": "MCP server for Angular Primitives - headless UI library",
   "type": "commonjs",
   "main": "./src/index.js",

package/src/generated/api-data.json

@@ -862,6 +862,16 @@
     "inputs": [],
     "outputs": []
   },
+  "NgpDatePickerCell": {
+    "name": "NgpDatePickerCell",
+    "description": "A cell in the date picker grid.",
+    "selector": "[ngpDatePickerCell]",
+    "exportAs": [
+      "ngpDatePickerCell"
+    ],
+    "inputs": [],
+    "outputs": []
+  },
   "NgpDatePickerLabel": {
     "name": "NgpDatePickerLabel",
     "description": "The label that displays the current month and year typically in the header of the date picker. This will be announced by screen readers when the date changes.",
@@ -880,16 +890,6 @@
     ],
     "outputs": []
   },
-  "NgpDatePickerCell": {
-    "name": "NgpDatePickerCell",
-    "description": "A cell in the date picker grid.",
-    "selector": "[ngpDatePickerCell]",
-    "exportAs": [
-      "ngpDatePickerCell"
-    ],
-    "inputs": [],
-    "outputs": []
-  },
   "NgpDatePickerNextMonth": {
     "name": "NgpDatePickerNextMonth",
     "description": "A button that navigates to the next month.",
@@ -1439,7 +1439,7 @@
       {
         "name": "ngpInputOtpValue",
         "type": "string",
-        "description": "The current value of the OTP.",
+        "description": "The current value of the OTP. A null/undefined value (e.g. from a form\n`writeValue(null)` or `reset()`) is coerced to an empty string.",
         "isRequired": false,
         "defaultValue": "''"
       },
@@ -2564,6 +2564,99 @@
       }
     ]
   },
+  "NgpPasswordToggle": {
+    "name": "NgpPasswordToggle",
+    "description": "Apply the `ngpPasswordToggle` directive to a `button` element to toggle the visibility of the\npassword within an `ngpPassword` container.",
+    "selector": "button[ngpPasswordToggle]",
+    "exportAs": [
+      "ngpPasswordToggle"
+    ],
+    "inputs": [
+      {
+        "name": "ngpPasswordToggleShowLabel",
+        "type": "string",
+        "description": "The accessible label shown when the password is hidden.",
+        "isRequired": false,
+        "defaultValue": "'Show password'"
+      },
+      {
+        "name": "ngpPasswordToggleHideLabel",
+        "type": "string",
+        "description": "The accessible label shown when the password is visible.",
+        "isRequired": false,
+        "defaultValue": "'Hide password'"
+      },
+      {
+        "name": "ngpPasswordToggleShownAnnouncement",
+        "type": "string",
+        "description": "The message announced when the password becomes visible.",
+        "isRequired": false,
+        "defaultValue": "'Your password is shown'"
+      },
+      {
+        "name": "ngpPasswordToggleHiddenAnnouncement",
+        "type": "string",
+        "description": "The message announced when the password becomes hidden.",
+        "isRequired": false,
+        "defaultValue": "'Your password is hidden'"
+      }
+    ],
+    "outputs": []
+  },
+  "NgpPassword": {
+    "name": "NgpPassword",
+    "description": "The `NgpPassword` directive is a container for a password field and its visibility toggle.",
+    "selector": "[ngpPassword]",
+    "exportAs": [
+      "ngpPassword"
+    ],
+    "inputs": [
+      {
+        "name": "ngpPasswordVisible",
+        "type": "boolean | undefined",
+        "description": "Whether the password is visible.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpPasswordDefaultVisible",
+        "type": "boolean",
+        "description": "The default visibility state for uncontrolled usage.\n@default false",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "ngpPasswordVisibleChange",
+        "type": "boolean",
+        "description": "Emits when the visibility state changes."
+      }
+    ]
+  },
+  "NgpPasswordInput": {
+    "name": "NgpPasswordInput",
+    "description": "Apply the `ngpPasswordInput` directive to an `input` element within an `ngpPassword` container.\nIt is a complete input (form control, interactions, autofill) with password visibility toggling\nlayered on top, so it does not need to be combined with `ngpInput`.",
+    "selector": "input[ngpPasswordInput]",
+    "exportAs": [
+      "ngpPasswordInput"
+    ],
+    "inputs": [
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "description": "Whether the input is disabled.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpPasswordInputIgnorePasswordManagers",
+        "type": "boolean",
+        "description": "Whether to opt the input out of password manager injection\n(1Password, LastPass, Bitwarden, etc.).",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": []
+  },
   "NgpPopoverArrow": {
     "name": "NgpPopoverArrow",
     "description": "",
@@ -3222,133 +3315,133 @@
       }
     ]
   },
-  "NgpSlider": {
-    "name": "NgpSlider",
-    "description": "Apply the `ngpSlider` directive to an element that represents the slider and contains the track, range, and thumb.",
-    "selector": "[ngpSlider]",
+  "NgpRangeSlider": {
+    "name": "NgpRangeSlider",
+    "description": "Apply the `ngpRangeSlider` directive to an element that represents the range slider and contains the track, range, and thumbs.",
+    "selector": "[ngpRangeSlider]",
     "exportAs": [
-      "ngpSlider"
+      "ngpRangeSlider"
     ],
     "inputs": [
       {
-        "name": "ngpSliderValue",
+        "name": "ngpRangeSliderLow",
         "type": "number",
-        "description": "The value of the slider.",
+        "description": "The low value of the range slider.",
         "isRequired": false,
         "defaultValue": "0"
       },
       {
-        "name": "ngpSliderMin",
+        "name": "ngpRangeSliderHigh",
         "type": "number",
-        "description": "The minimum value of the slider.",
+        "description": "The high value of the range slider.",
+        "isRequired": false,
+        "defaultValue": "100"
+      },
+      {
+        "name": "ngpRangeSliderMin",
+        "type": "number",
+        "description": "The minimum value of the range slider.",
         "isRequired": false,
         "defaultValue": "0"
       },
       {
-        "name": "ngpSliderMax",
+        "name": "ngpRangeSliderMax",
         "type": "number",
-        "description": "The maximum value of the slider.",
+        "description": "The maximum value of the range slider.",
         "isRequired": false,
         "defaultValue": "100"
       },
       {
-        "name": "ngpSliderStep",
+        "name": "ngpRangeSliderStep",
         "type": "number",
-        "description": "The step value of the slider.",
+        "description": "The step value of the range slider.",
         "isRequired": false,
         "defaultValue": "1"
       },
       {
-        "name": "ngpSliderOrientation",
+        "name": "ngpRangeSliderOrientation",
         "type": "'horizontal' | 'vertical'",
-        "description": "The orientation of the slider.",
+        "description": "The orientation of the range slider.",
         "isRequired": false,
         "defaultValue": "'horizontal'"
       },
       {
-        "name": "ngpSliderDisabled",
+        "name": "ngpRangeSliderDisabled",
         "type": "boolean",
-        "description": "The disabled state of the slider.",
+        "description": "The disabled state of the range slider.",
         "isRequired": false,
         "defaultValue": "false"
       }
     ],
     "outputs": [
       {
-        "name": "ngpSliderValueChange",
+        "name": "ngpRangeSliderLowChange",
         "type": "number",
-        "description": "Emits when the value changes."
+        "description": "Emits when the low value changes."
+      },
+      {
+        "name": "ngpRangeSliderHighChange",
+        "type": "number",
+        "description": "Emits when the high value changes."
       }
     ]
   },
-  "NgpRangeSlider": {
-    "name": "NgpRangeSlider",
-    "description": "Apply the `ngpRangeSlider` directive to an element that represents the range slider and contains the track, range, and thumbs.",
-    "selector": "[ngpRangeSlider]",
+  "NgpSlider": {
+    "name": "NgpSlider",
+    "description": "Apply the `ngpSlider` directive to an element that represents the slider and contains the track, range, and thumb.",
+    "selector": "[ngpSlider]",
     "exportAs": [
-      "ngpRangeSlider"
+      "ngpSlider"
     ],
     "inputs": [
       {
-        "name": "ngpRangeSliderLow",
+        "name": "ngpSliderValue",
         "type": "number",
-        "description": "The low value of the range slider.",
+        "description": "The value of the slider.",
         "isRequired": false,
         "defaultValue": "0"
       },
       {
-        "name": "ngpRangeSliderHigh",
-        "type": "number",
-        "description": "The high value of the range slider.",
-        "isRequired": false,
-        "defaultValue": "100"
-      },
-      {
-        "name": "ngpRangeSliderMin",
+        "name": "ngpSliderMin",
         "type": "number",
-        "description": "The minimum value of the range slider.",
+        "description": "The minimum value of the slider.",
         "isRequired": false,
         "defaultValue": "0"
       },
       {
-        "name": "ngpRangeSliderMax",
+        "name": "ngpSliderMax",
         "type": "number",
-        "description": "The maximum value of the range slider.",
+        "description": "The maximum value of the slider.",
         "isRequired": false,
         "defaultValue": "100"
       },
       {
-        "name": "ngpRangeSliderStep",
+        "name": "ngpSliderStep",
         "type": "number",
-        "description": "The step value of the range slider.",
+        "description": "The step value of the slider.",
         "isRequired": false,
         "defaultValue": "1"
       },
       {
-        "name": "ngpRangeSliderOrientation",
+        "name": "ngpSliderOrientation",
         "type": "'horizontal' | 'vertical'",
-        "description": "The orientation of the range slider.",
+        "description": "The orientation of the slider.",
         "isRequired": false,
         "defaultValue": "'horizontal'"
       },
       {
-        "name": "ngpRangeSliderDisabled",
+        "name": "ngpSliderDisabled",
         "type": "boolean",
-        "description": "The disabled state of the range slider.",
+        "description": "The disabled state of the slider.",
         "isRequired": false,
         "defaultValue": "false"
       }
     ],
     "outputs": [
       {
-        "name": "ngpRangeSliderLowChange",
-        "type": "number",
-        "description": "Emits when the low value changes."
-      },
-      {
-        "name": "ngpRangeSliderHighChange",
+        "name": "ngpSliderValueChange",
         "type": "number",
-        "description": "Emits when the high value changes."
+        "description": "Emits when the value changes."
       }
     ]
   },
@@ -3381,6 +3474,13 @@
         "description": "Determine if the switch is disabled.\n@default false",
         "isRequired": false,
         "defaultValue": "false"
+      },
+      {
+        "name": "ngpSwitchRequired",
+        "type": "boolean",
+        "description": "Whether the switch is required.\n@default false",
+        "isRequired": false,
+        "defaultValue": "false"
       }
     ],
     "outputs": [
@@ -3469,6 +3569,13 @@
         "description": "Whether tabs should activate on focus",
         "isRequired": false,
         "defaultValue": "true"
+      },
+      {
+        "name": "ngpTabsetWrap",
+        "type": "boolean",
+        "description": "Whether keyboard focus should wrap around the tab list.\n@default true (from the global tabs config)",
+        "isRequired": false,
+        "defaultValue": "true"
       }
     ],
     "outputs": [
@@ -3553,7 +3660,7 @@
     "inputs": [
       {
         "name": "ngpToggleGroupItemValue",
-        "type": "string | undefined",
+        "type": "T | undefined",
         "description": "The value of the item.",
         "isRequired": true
       },
@@ -3605,17 +3712,23 @@
       },
       {
         "name": "ngpToggleGroupValue",
-        "type": "string[] | undefined",
+        "type": "T[] | undefined",
         "description": "The selected value(s) of the toggle group.",
         "isRequired": false
       },
       {
         "name": "ngpToggleGroupDefaultValue",
-        "type": "string[]",
+        "type": "T[]",
         "description": "The default selected value(s) for uncontrolled usage.\n@default []",
         "isRequired": false,
         "defaultValue": "[]"
       },
+      {
+        "name": "ngpToggleGroupCompareWith",
+        "type": "(a: T, b: T) => boolean",
+        "description": "The comparator used to determine whether two values are equal.\nUseful when values are objects and equality should be checked by value rather than by reference.\n@default (a, b) => a === b",
+        "isRequired": false
+      },
       {
         "name": "ngpToggleGroupDisabled",
         "type": "boolean",
@@ -3627,7 +3740,7 @@
     "outputs": [
       {
         "name": "ngpToggleGroupValueChange",
-        "type": "string[]",
+        "type": "T[]",
         "description": "Emits when the value of the toggle group changes."
       }
     ]
@@ -4157,6 +4270,41 @@
       }
     ]
   },
+  "NgpPasswordConfig": {
+    "name": "NgpPasswordConfig",
+    "properties": [
+      {
+        "name": "showLabel",
+        "type": "string",
+        "description": "The accessible label for the toggle button when the password is hidden.",
+        "default": "'Show password'"
+      },
+      {
+        "name": "hideLabel",
+        "type": "string",
+        "description": "The accessible label for the toggle button when the password is visible.",
+        "default": "'Hide password'"
+      },
+      {
+        "name": "shownAnnouncement",
+        "type": "string",
+        "description": "The message announced to screen readers when the password becomes visible.",
+        "default": "'Your password is shown'"
+      },
+      {
+        "name": "hiddenAnnouncement",
+        "type": "string",
+        "description": "The message announced to screen readers when the password becomes hidden.",
+        "default": "'Your password is hidden'"
+      },
+      {
+        "name": "ignorePasswordManagers",
+        "type": "boolean",
+        "description": "Whether to opt the input out of password manager injection by default.",
+        "default": "false"
+      }
+    ]
+  },
   "NgpPopoverConfig": {
     "name": "NgpPopoverConfig",
     "properties": [

package/src/generated/primitives-data.json

@@ -311,7 +311,7 @@
       }
     ],
     "reusableComponent": {
-      "code": "import { Component } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroCheckMini, heroMinusMini } from '@ng-icons/heroicons/mini';\nimport { injectCheckboxState, NgpCheckbox } from 'ng-primitives/checkbox';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-checkbox',\n  hostDirectives: [\n    {\n      directive: NgpCheckbox,\n      inputs: [\n        'ngpCheckboxChecked:checked',\n        'ngpCheckboxIndeterminate:indeterminate',\n        'ngpCheckboxDisabled:disabled',\n      ],\n      outputs: [\n        'ngpCheckboxCheckedChange:checkedChange',\n        'ngpCheckboxIndeterminateChange:indeterminateChange',\n      ],\n    },\n  ],\n  providers: [provideValueAccessor(Checkbox), provideIcons({ heroCheckMini, heroMinusMini })],\n  imports: [NgIcon],\n  template: `\n    @if (state().indeterminate()) {\n      <ng-icon name=\"heroMinusMini\" />\n    } @else if (state().checked()) {\n      <ng-icon name=\"heroCheckMini\" />\n    }\n  `,\n  styles: `\n    :host {\n      display: flex;\n      width: 1.25rem;\n      height: 1.25rem;\n      cursor: pointer;\n      align-items: center;\n      justify-content: center;\n      border-radius: 0.25rem;\n      border: 1px solid var(--ngp-border);\n      background-color: transparent;\n      padding: 0;\n      outline: none;\n      flex: none;\n      color: var(--ngp-text-inverse);\n      font-size: 0.75rem;\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-checked],\n    :host[data-indeterminate] {\n      border-color: var(--ngp-background-inverse);\n      background-color: var(--ngp-background-inverse);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouchedFn?.()',\n  },\n})\nexport class Checkbox implements ControlValueAccessor {\n  /**\n   * The checked state of the checkbox.\n   */\n  protected readonly state = injectCheckboxState();\n\n  /**\n   * The onChange function for the checkbox.\n   */\n  protected onChangeFn?: ChangeFn<boolean>;\n\n  /**\n   * The onTouched function for the checkbox.\n   */\n  protected onTouchedFn?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the checkbox, call the onChange function with the new value.\n    this.state()\n      .checkedChange.pipe(takeUntilDestroyed())\n      .subscribe(checked => this.onChangeFn?.(checked));\n  }\n\n  writeValue(checked: boolean): void {\n    this.state().setChecked(checked);\n  }\n\n  registerOnChange(fn: ChangeFn<boolean>): void {\n    this.onChangeFn = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouchedFn = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
+      "code": "import { Component } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroCheckMini, heroMinusMini } from '@ng-icons/heroicons/mini';\nimport { injectCheckboxState, NgpCheckbox } from 'ng-primitives/checkbox';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-checkbox',\n  hostDirectives: [\n    {\n      directive: NgpCheckbox,\n      inputs: [\n        'ngpCheckboxChecked:checked',\n        'ngpCheckboxIndeterminate:indeterminate',\n        'ngpCheckboxDisabled:disabled',\n      ],\n      outputs: [\n        'ngpCheckboxCheckedChange:checkedChange',\n        'ngpCheckboxIndeterminateChange:indeterminateChange',\n      ],\n    },\n  ],\n  providers: [provideValueAccessor(Checkbox), provideIcons({ heroCheckMini, heroMinusMini })],\n  imports: [NgIcon],\n  template: `\n    @if (state().indeterminate()) {\n      <ng-icon name=\"heroMinusMini\" />\n    } @else if (state().checked()) {\n      <ng-icon name=\"heroCheckMini\" />\n    }\n  `,\n  styles: `\n    :host {\n      display: flex;\n      width: 1.25rem;\n      height: 1.25rem;\n      cursor: pointer;\n      align-items: center;\n      justify-content: center;\n      border-radius: 0.25rem;\n      border: 1px solid var(--ngp-border);\n      background-color: transparent;\n      padding: 0;\n      outline: none;\n      flex: none;\n      color: var(--ngp-text-inverse);\n      font-size: 0.75rem;\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-checked],\n    :host[data-indeterminate] {\n      border-color: var(--ngp-background-inverse);\n      background-color: var(--ngp-background-inverse);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouchedFn?.()',\n  },\n})\nexport class Checkbox implements ControlValueAccessor {\n  /**\n   * The checked state of the checkbox.\n   */\n  protected readonly state = injectCheckboxState();\n\n  /**\n   * The onChange function for the checkbox.\n   */\n  protected onChangeFn?: ChangeFn<boolean>;\n\n  /**\n   * The onTouched function for the checkbox.\n   */\n  protected onTouchedFn?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the checkbox, call the onChange function with the new value.\n    this.state()\n      .checkedChange.pipe(takeUntilDestroyed())\n      .subscribe(checked => this.onChangeFn?.(checked));\n  }\n\n  writeValue(checked: boolean): void {\n    // writing a value from the model must not re-emit through onChange\n    this.state().setChecked(checked, { emit: false });\n  }\n\n  registerOnChange(fn: ChangeFn<boolean>): void {\n    this.onChangeFn = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouchedFn = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
       "hasVariants": false,
       "hasSizes": true
     }
@@ -373,7 +373,7 @@
       }
     ],
     "reusableComponent": {
-      "code": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Component, computed, input, model, signal } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronDown } from '@ng-icons/heroicons/outline';\nimport {\n  NgpCombobox,\n  NgpComboboxButton,\n  NgpComboboxDropdown,\n  NgpComboboxInput,\n  NgpComboboxOption,\n  NgpComboboxPortal,\n} from 'ng-primitives/combobox';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-combobox',\n  imports: [\n    NgpCombobox,\n    NgpComboboxDropdown,\n    NgpComboboxOption,\n    NgpComboboxInput,\n    NgpComboboxPortal,\n    NgpComboboxButton,\n    NgIcon,\n  ],\n  providers: [provideIcons({ heroChevronDown }), provideValueAccessor(Combobox)],\n  template: `\n    <div\n      [(ngpComboboxValue)]=\"value\"\n      [ngpComboboxDisabled]=\"disabled() || formDisabled()\"\n      (ngpComboboxOpenChange)=\"resetOnClose($event)\"\n      (ngpComboboxValueChange)=\"onValueChange($event)\"\n      ngpCombobox\n    >\n      <input\n        [value]=\"filter()\"\n        [placeholder]=\"placeholder()\"\n        (input)=\"onFilterChange($event)\"\n        (blur)=\"onTouched?.()\"\n        ngpComboboxInput\n      />\n\n      <button ngpComboboxButton aria-label=\"Toggle dropdown\">\n        <ng-icon name=\"heroChevronDown\" />\n      </button>\n\n      <div *ngpComboboxPortal ngpComboboxDropdown>\n        @for (option of filteredOptions(); track option) {\n          <div [ngpComboboxOptionValue]=\"option\" ngpComboboxOption>\n            {{ option }}\n          </div>\n        } @empty {\n          <div class=\"empty-message\">No options found</div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    [ngpCombobox] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      height: 36px;\n      width: 300px;\n      border-radius: 8px;\n      border: none;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-input-shadow);\n      box-sizing: border-box;\n    }\n\n    [ngpCombobox][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpComboboxInput] {\n      flex: 1;\n      padding: 0 16px;\n      border: none;\n      background-color: transparent;\n      color: var(--ngp-text);\n      font-family: inherit;\n      font-size: 14px;\n      padding: 0 16px;\n      outline: none;\n      height: 100%;\n    }\n\n    [ngpComboboxButton] {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      width: 36px;\n      background-color: transparent;\n      border: none;\n      color: var(--ngp-text);\n      cursor: pointer;\n      box-sizing: border-box;\n    }\n\n    [ngpComboboxDropdown] {\n      background-color: var(--ngp-background);\n      border: 1px solid var(--ngp-border);\n      padding: 0.25rem;\n      border-radius: 0.75rem;\n      outline: none;\n      position: absolute;\n      animation: popover-show 0.1s ease-out;\n      width: var(--ngp-combobox-width);\n      box-shadow: var(--ngp-shadow-lg);\n      box-sizing: border-box;\n      margin-top: 4px;\n      max-height: 240px;\n      overflow-y: auto;\n      transform-origin: var(--ngp-combobox-transform-origin);\n    }\n\n    [ngpComboboxDropdown][data-enter] {\n      animation: combobox-show 0.1s ease-out;\n    }\n\n    [ngpComboboxDropdown][data-exit] {\n      animation: combobox-hide 0.1s ease-out;\n    }\n\n    [ngpComboboxOption] {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0.375rem 0.75rem;\n      cursor: pointer;\n      border-radius: 0.5rem;\n      width: 100%;\n      height: 36px;\n      font-size: 14px;\n      color: var(--ngp-text-primary);\n      box-sizing: border-box;\n    }\n\n    [ngpComboboxOption][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpComboboxOption][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpComboboxOption][data-active] {\n      background-color: var(--ngp-background-active);\n    }\n\n    .empty-message {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 0.5rem;\n      color: var(--ngp-text-secondary);\n      font-size: 14px;\n      font-weight: 500;\n      text-align: center;\n    }\n\n    @keyframes combobox-show {\n      0% {\n        opacity: 0;\n        transform: translateY(-10px) scale(0.9);\n      }\n      100% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n    }\n\n    @keyframes combobox-hide {\n      0% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n      100% {\n        opacity: 0;\n        transform: translateY(-10px) scale(0.9);\n      }\n    }\n  `,\n})\nexport class Combobox implements ControlValueAccessor {\n  /** The options for the combobox. */\n  readonly options = input<string[]>([]);\n\n  /** The selected value. */\n  readonly value = model<string | undefined>();\n\n  /** The placeholder for the input. */\n  readonly placeholder = input<string>('');\n\n  /** The disabled state of the combobox. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /** The filter value. */\n  protected readonly filter = signal<string>('');\n\n  /** Get the filtered options. */\n  protected readonly filteredOptions = computed(() =>\n    this.options().filter(option => option.toLowerCase().includes(this.filter().toLowerCase())),\n  );\n\n  /** Store the form disabled state */\n  protected readonly formDisabled = signal(false);\n\n  /** The on change callback */\n  private onChange?: ChangeFn<string>;\n\n  /** The on touch callback */\n  protected onTouched?: TouchedFn;\n\n  onFilterChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.filter.set(input.value);\n  }\n\n  writeValue(value: string | undefined): void {\n    this.value.set(value);\n    this.filter.set(value ?? '');\n  }\n\n  registerOnChange(fn: ChangeFn<string | undefined>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n\n  protected onValueChange(value: string): void {\n    this.onChange?.(value);\n    // update the filter value\n    this.filter.set(value);\n  }\n\n  protected resetOnClose(open: boolean): void {\n    // if the dropdown is closed, reset the filter value\n    if (open) {\n      return;\n    }\n\n    // if the filter value is empty, set the value to undefined\n    if (this.filter() === '') {\n      this.value.set(undefined);\n    } else {\n      // otherwise set the filter value to the selected value\n      this.filter.set(this.value() ?? '');\n    }\n  }\n}\n",
+      "code": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Component, computed, input, model, signal } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronDown } from '@ng-icons/heroicons/outline';\nimport {\n  NgpCombobox,\n  NgpComboboxButton,\n  NgpComboboxDropdown,\n  NgpComboboxInput,\n  NgpComboboxOption,\n  NgpComboboxPortal,\n} from 'ng-primitives/combobox';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-combobox',\n  imports: [\n    NgpCombobox,\n    NgpComboboxDropdown,\n    NgpComboboxOption,\n    NgpComboboxInput,\n    NgpComboboxPortal,\n    NgpComboboxButton,\n    NgIcon,\n  ],\n  providers: [provideIcons({ heroChevronDown }), provideValueAccessor(Combobox)],\n  template: `\n    <div\n      [(ngpComboboxValue)]=\"value\"\n      [ngpComboboxDisabled]=\"disabled() || formDisabled()\"\n      (ngpComboboxOpenChange)=\"resetOnClose($event)\"\n      (ngpComboboxValueChange)=\"onValueChange($event)\"\n      ngpCombobox\n    >\n      <input\n        [value]=\"filter()\"\n        [placeholder]=\"placeholder()\"\n        (input)=\"onFilterChange($event)\"\n        (blur)=\"onTouched?.()\"\n        ngpComboboxInput\n      />\n\n      <button ngpComboboxButton aria-label=\"Toggle dropdown\">\n        <ng-icon name=\"heroChevronDown\" />\n      </button>\n\n      <div *ngpComboboxPortal ngpComboboxDropdown>\n        @for (option of filteredOptions(); track option) {\n          <div [ngpComboboxOptionValue]=\"option\" ngpComboboxOption>\n            {{ option }}\n          </div>\n        } @empty {\n          <div class=\"empty-message\">No options found</div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    [ngpCombobox] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      height: 36px;\n      width: 300px;\n      border-radius: 8px;\n      border: none;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-input-shadow);\n      box-sizing: border-box;\n    }\n\n    [ngpCombobox][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpComboboxInput] {\n      flex: 1;\n      padding: 0 16px;\n      border: none;\n      background-color: transparent;\n      color: var(--ngp-text);\n      font-family: inherit;\n      font-size: 14px;\n      padding: 0 16px;\n      outline: none;\n      height: 100%;\n    }\n\n    [ngpComboboxButton] {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      width: 36px;\n      background-color: transparent;\n      border: none;\n      color: var(--ngp-text);\n      cursor: pointer;\n      box-sizing: border-box;\n    }\n\n    [ngpComboboxDropdown] {\n      background-color: var(--ngp-background);\n      border: 1px solid var(--ngp-border);\n      padding: 0.25rem;\n      border-radius: 0.75rem;\n      outline: none;\n      position: absolute;\n      animation: popover-show 0.1s ease-out;\n      width: var(--ngp-combobox-width);\n      box-shadow: var(--ngp-shadow-lg);\n      box-sizing: border-box;\n      margin-top: 4px;\n      max-height: 240px;\n      overflow-y: auto;\n      transform-origin: var(--ngp-combobox-transform-origin);\n    }\n\n    [ngpComboboxDropdown][data-enter] {\n      animation: combobox-show 0.1s ease-out;\n    }\n\n    [ngpComboboxDropdown][data-exit] {\n      animation: combobox-hide 0.1s ease-out;\n    }\n\n    [ngpComboboxOption] {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0.375rem 0.75rem;\n      cursor: pointer;\n      border-radius: 0.5rem;\n      width: 100%;\n      height: 36px;\n      font-size: 14px;\n      color: var(--ngp-text-primary);\n      box-sizing: border-box;\n    }\n\n    [ngpComboboxOption][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpComboboxOption][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpComboboxOption][data-active] {\n      background-color: var(--ngp-background-active);\n    }\n\n    .empty-message {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 0.5rem;\n      color: var(--ngp-text-secondary);\n      font-size: 14px;\n      font-weight: 500;\n      text-align: center;\n    }\n\n    @keyframes combobox-show {\n      0% {\n        opacity: 0;\n        transform: translateY(-10px) scale(0.9);\n      }\n      100% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n    }\n\n    @keyframes combobox-hide {\n      0% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n      100% {\n        opacity: 0;\n        transform: translateY(-10px) scale(0.9);\n      }\n    }\n  `,\n})\nexport class Combobox implements ControlValueAccessor {\n  /** The options for the combobox. */\n  readonly options = input<string[]>([]);\n\n  /** The selected value. */\n  readonly value = model<string | undefined>();\n\n  /** The placeholder for the input. */\n  readonly placeholder = input<string>('');\n\n  /** The disabled state of the combobox. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /** The filter value. */\n  protected readonly filter = signal<string>('');\n\n  /** Get the filtered options. */\n  protected readonly filteredOptions = computed(() =>\n    this.options().filter(option => option.toLowerCase().includes(this.filter().toLowerCase())),\n  );\n\n  /** Store the form disabled state */\n  protected readonly formDisabled = signal(false);\n\n  /** The on change callback */\n  private onChange?: ChangeFn<string | undefined>;\n\n  /** The on touch callback */\n  protected onTouched?: TouchedFn;\n\n  onFilterChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.filter.set(input.value);\n  }\n\n  writeValue(value: string | undefined): void {\n    this.value.set(value);\n    this.filter.set(value ?? '');\n  }\n\n  registerOnChange(fn: ChangeFn<string | undefined>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n\n  protected onValueChange(value: string): void {\n    this.onChange?.(value);\n    // update the filter value\n    this.filter.set(value);\n  }\n\n  protected resetOnClose(open: boolean): void {\n    // if the dropdown is closed, reset the filter value\n    if (open) {\n      return;\n    }\n\n    // if the filter value is empty, clear the value and notify the form control\n    if (this.filter() === '') {\n      this.value.set(undefined);\n      this.onChange?.(undefined);\n    } else {\n      // otherwise set the filter value to the selected value\n      this.filter.set(this.value() ?? '');\n    }\n  }\n}\n",
       "hasVariants": false,
       "hasSizes": true
     }
@@ -486,7 +486,7 @@
       }
     ],
     "reusableComponent": {
-      "code": "import { Component, computed } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronLeftMini, heroChevronRightMini } from '@ng-icons/heroicons/mini';\nimport {\n  injectDatePickerState,\n  NgpDatePicker,\n  NgpDatePickerCell,\n  NgpDatePickerCellRender,\n  NgpDatePickerDateButton,\n  NgpDatePickerGrid,\n  NgpDatePickerLabel,\n  NgpDatePickerNextMonth,\n  NgpDatePickerPreviousMonth,\n  NgpDatePickerRowRender,\n} from 'ng-primitives/date-picker';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-date-picker',\n  hostDirectives: [\n    {\n      directive: NgpDatePicker,\n      inputs: [\n        'ngpDatePickerDate: date',\n        'ngpDatePickerMin: min',\n        'ngpDatePickerMax: max',\n        'ngpDatePickerDisabled: disabled',\n      ],\n      outputs: ['ngpDatePickerDateChange: dateChange'],\n    },\n  ],\n  imports: [\n    NgIcon,\n    NgpDatePickerLabel,\n    NgpDatePickerNextMonth,\n    NgpDatePickerPreviousMonth,\n    NgpDatePickerGrid,\n    NgpDatePickerCell,\n    NgpDatePickerRowRender,\n    NgpDatePickerCellRender,\n    NgpDatePickerDateButton,\n  ],\n  providers: [\n    provideIcons({ heroChevronRightMini, heroChevronLeftMini }),\n    provideValueAccessor(DatePicker),\n  ],\n  template: `\n    <div class=\"date-picker-header\">\n      <button ngpDatePickerPreviousMonth aria-label=\"previous month\">\n        <ng-icon name=\"heroChevronLeftMini\" />\n      </button>\n      <h2 ngpDatePickerLabel>{{ label() }}</h2>\n      <button ngpDatePickerNextMonth aria-label=\"next month\">\n        <ng-icon name=\"heroChevronRightMini\" />\n      </button>\n    </div>\n    <table ngpDatePickerGrid>\n      <thead>\n        <tr>\n          <th scope=\"col\" abbr=\"Sunday\">S</th>\n          <th scope=\"col\" abbr=\"Monday\">M</th>\n          <th scope=\"col\" abbr=\"Tuesday\">T</th>\n          <th scope=\"col\" abbr=\"Wednesday\">W</th>\n          <th scope=\"col\" abbr=\"Thursday\">T</th>\n          <th scope=\"col\" abbr=\"Friday\">F</th>\n          <th scope=\"col\" abbr=\"Saturday\">S</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngpDatePickerRowRender>\n          <td *ngpDatePickerCellRender=\"let date\" ngpDatePickerCell>\n            <button ngpDatePickerDateButton>\n              {{ date.getDate() }}\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  `,\n  styles: `\n    :host {\n      display: inline-block;\n      background-color: var(--ngp-background);\n      border-radius: 12px;\n      padding: 16px;\n      box-shadow: var(--ngp-shadow);\n      border: 1px solid var(--ngp-border);\n    }\n\n    .date-picker-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      height: 36px;\n      margin-bottom: 16px;\n    }\n\n    th {\n      font-size: 14px;\n      font-weight: 500;\n      width: 40px;\n      height: 40px;\n      text-align: center;\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpDatePickerLabel] {\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--ngp-text-primary);\n    }\n\n    [ngpDatePickerPreviousMonth],\n    [ngpDatePickerNextMonth] {\n      all: unset;\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      font-size: 20px;\n      border: 1px solid var(--ngp-border);\n      cursor: pointer;\n    }\n\n    [ngpDatePickerPreviousMonth][data-hover],\n    [ngpDatePickerNextMonth][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpDatePickerPreviousMonth][data-focus-visible],\n    [ngpDatePickerNextMonth][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    [ngpDatePickerPreviousMonth][data-press],\n    [ngpDatePickerNextMonth][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpDatePickerPreviousMonth][data-disabled],\n    [ngpDatePickerNextMonth][data-disabled] {\n      cursor: not-allowed;\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton] {\n      all: unset;\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      cursor: pointer;\n    }\n\n    [ngpDatePickerDateButton][data-today] {\n      color: var(--ngp-text-blue);\n    }\n\n    [ngpDatePickerDateButton][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpDatePickerDateButton][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpDatePickerDateButton][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpDatePickerDateButton][data-outside-month] {\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton][data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n    }\n\n    [ngpDatePickerDateButton][data-selected][data-outside-month] {\n      background-color: var(--ngp-background-disabled);\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton][data-disabled] {\n      cursor: not-allowed;\n      color: var(--ngp-text-disabled);\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class DatePicker implements ControlValueAccessor {\n  /** Access the date picker host directive */\n  private readonly state = injectDatePickerState<Date>();\n\n  /**\n   * Get the current focused date in string format.\n   * @returns The focused date in \"February 2024\" format.\n   */\n  readonly label = computed(\n    () =>\n      `${this.state().focusedDate().toLocaleString('default', { month: 'long' })} ${this.state().focusedDate().getFullYear()}`,\n  );\n\n  /**\n   * The onChange callback function for the date picker.\n   */\n  protected onChange?: ChangeFn<Date | undefined>;\n\n  /**\n   * The onTouched callback function for the date picker.\n   */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the date picker, call the onChange function with the new value.\n    this.state().dateChange.subscribe(date => this.onChange?.(date));\n  }\n\n  writeValue(date: Date): void {\n    this.state().select(date);\n  }\n\n  registerOnChange(fn: ChangeFn<Date | undefined>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().disabled.set(isDisabled);\n  }\n}\n",
+      "code": "import { Component, computed } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronLeftMini, heroChevronRightMini } from '@ng-icons/heroicons/mini';\nimport {\n  injectDatePickerState,\n  NgpDatePicker,\n  NgpDatePickerCell,\n  NgpDatePickerCellRender,\n  NgpDatePickerDateButton,\n  NgpDatePickerGrid,\n  NgpDatePickerLabel,\n  NgpDatePickerNextMonth,\n  NgpDatePickerPreviousMonth,\n  NgpDatePickerRowRender,\n} from 'ng-primitives/date-picker';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-date-picker',\n  hostDirectives: [\n    {\n      directive: NgpDatePicker,\n      inputs: [\n        'ngpDatePickerDate: date',\n        'ngpDatePickerMin: min',\n        'ngpDatePickerMax: max',\n        'ngpDatePickerDisabled: disabled',\n      ],\n      outputs: ['ngpDatePickerDateChange: dateChange'],\n    },\n  ],\n  imports: [\n    NgIcon,\n    NgpDatePickerLabel,\n    NgpDatePickerNextMonth,\n    NgpDatePickerPreviousMonth,\n    NgpDatePickerGrid,\n    NgpDatePickerCell,\n    NgpDatePickerRowRender,\n    NgpDatePickerCellRender,\n    NgpDatePickerDateButton,\n  ],\n  providers: [\n    provideIcons({ heroChevronRightMini, heroChevronLeftMini }),\n    provideValueAccessor(DatePicker),\n  ],\n  template: `\n    <div class=\"date-picker-header\">\n      <button ngpDatePickerPreviousMonth aria-label=\"previous month\">\n        <ng-icon name=\"heroChevronLeftMini\" />\n      </button>\n      <h2 ngpDatePickerLabel>{{ label() }}</h2>\n      <button ngpDatePickerNextMonth aria-label=\"next month\">\n        <ng-icon name=\"heroChevronRightMini\" />\n      </button>\n    </div>\n    <table ngpDatePickerGrid>\n      <thead>\n        <tr>\n          <th scope=\"col\" abbr=\"Sunday\">S</th>\n          <th scope=\"col\" abbr=\"Monday\">M</th>\n          <th scope=\"col\" abbr=\"Tuesday\">T</th>\n          <th scope=\"col\" abbr=\"Wednesday\">W</th>\n          <th scope=\"col\" abbr=\"Thursday\">T</th>\n          <th scope=\"col\" abbr=\"Friday\">F</th>\n          <th scope=\"col\" abbr=\"Saturday\">S</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngpDatePickerRowRender>\n          <td *ngpDatePickerCellRender=\"let date\" ngpDatePickerCell>\n            <button ngpDatePickerDateButton>\n              {{ date.getDate() }}\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  `,\n  styles: `\n    :host {\n      display: inline-block;\n      background-color: var(--ngp-background);\n      border-radius: 12px;\n      padding: 16px;\n      box-shadow: var(--ngp-shadow);\n      border: 1px solid var(--ngp-border);\n    }\n\n    .date-picker-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      height: 36px;\n      margin-bottom: 16px;\n    }\n\n    th {\n      font-size: 14px;\n      font-weight: 500;\n      width: 40px;\n      height: 40px;\n      text-align: center;\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpDatePickerLabel] {\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--ngp-text-primary);\n    }\n\n    [ngpDatePickerPreviousMonth],\n    [ngpDatePickerNextMonth] {\n      all: unset;\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      font-size: 20px;\n      border: 1px solid var(--ngp-border);\n      cursor: pointer;\n    }\n\n    [ngpDatePickerPreviousMonth][data-hover],\n    [ngpDatePickerNextMonth][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpDatePickerPreviousMonth][data-focus-visible],\n    [ngpDatePickerNextMonth][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    [ngpDatePickerPreviousMonth][data-press],\n    [ngpDatePickerNextMonth][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpDatePickerPreviousMonth][data-disabled],\n    [ngpDatePickerNextMonth][data-disabled] {\n      cursor: not-allowed;\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton] {\n      all: unset;\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      cursor: pointer;\n    }\n\n    [ngpDatePickerDateButton][data-today] {\n      color: var(--ngp-text-blue);\n    }\n\n    [ngpDatePickerDateButton][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpDatePickerDateButton][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpDatePickerDateButton][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpDatePickerDateButton][data-outside-month] {\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton][data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n    }\n\n    [ngpDatePickerDateButton][data-selected][data-outside-month] {\n      background-color: var(--ngp-background-disabled);\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton][data-disabled] {\n      cursor: not-allowed;\n      color: var(--ngp-text-disabled);\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class DatePicker implements ControlValueAccessor {\n  /** Access the date picker host directive */\n  private readonly state = injectDatePickerState<Date>();\n\n  /**\n   * Get the current focused date in string format.\n   * @returns The focused date in \"February 2024\" format.\n   */\n  readonly label = computed(\n    () =>\n      `${this.state().focusedDate().toLocaleString('default', { month: 'long' })} ${this.state().focusedDate().getFullYear()}`,\n  );\n\n  /**\n   * The onChange callback function for the date picker.\n   */\n  protected onChange?: ChangeFn<Date | undefined>;\n\n  /**\n   * The onTouched callback function for the date picker.\n   */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the date picker, call the onChange function with the new value.\n    this.state().dateChange.subscribe(date => this.onChange?.(date));\n  }\n\n  writeValue(date: Date): void {\n    // writing a value from the model must not re-emit through onChange\n    this.state().select(date, false, { emit: false });\n  }\n\n  registerOnChange(fn: ChangeFn<Date | undefined>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().disabled.set(isDisabled);\n  }\n}\n",
       "hasVariants": false,
       "hasSizes": true
     }
@@ -508,6 +508,16 @@
     "accessibility": [],
     "examples": []
   },
+  {
+    "name": "date-time-date-fns",
+    "entryPoint": "ng-primitives/date-time-date-fns",
+    "exports": [],
+    "hasSecondaryEntryPoint": true,
+    "category": "date-time",
+    "description": "date-time-date-fns primitive component",
+    "accessibility": [],
+    "examples": []
+  },
   {
     "name": "date-time-luxon",
     "entryPoint": "ng-primitives/date-time-luxon",
@@ -1119,7 +1129,59 @@
       }
     ],
     "reusableComponent": {
-      "code": "import { Component, computed } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n  heroChevronDoubleLeft,\n  heroChevronDoubleRight,\n  heroChevronLeft,\n  heroChevronRight,\n} from '@ng-icons/heroicons/outline';\nimport {\n  injectPaginationState,\n  NgpPagination,\n  NgpPaginationButton,\n  NgpPaginationFirst,\n  NgpPaginationLast,\n  NgpPaginationNext,\n  NgpPaginationPrevious,\n} from 'ng-primitives/pagination';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-pagination',\n  hostDirectives: [\n    {\n      directive: NgpPagination,\n      inputs: [\n        'ngpPaginationPage:page',\n        'ngpPaginationPageCount:pageCount',\n        'ngpPaginationDisabled:disabled',\n      ],\n      outputs: ['ngpPaginationPageChange:pageChange'],\n    },\n  ],\n  imports: [\n    NgpPaginationButton,\n    NgpPaginationFirst,\n    NgpPaginationLast,\n    NgpPaginationNext,\n    NgpPaginationPrevious,\n    NgIcon,\n  ],\n  providers: [\n    provideValueAccessor(NgpPagination),\n    provideIcons({\n      heroChevronDoubleLeft,\n      heroChevronDoubleRight,\n      heroChevronLeft,\n      heroChevronRight,\n    }),\n  ],\n  template: `\n    <ul>\n      <li>\n        <button ngpPaginationFirst aria-label=\"First Page\">\n          <ng-icon name=\"heroChevronDoubleLeft\" />\n        </button>\n      </li>\n\n      <li>\n        <button ngpPaginationPrevious aria-label=\"Previous Page\">\n          <ng-icon name=\"heroChevronLeft\" />\n        </button>\n      </li>\n\n      @for (page of pages(); track page) {\n        <li>\n          <button\n            [ngpPaginationButtonPage]=\"page\"\n            [attr.aria-label]=\"'Page ' + page\"\n            ngpPaginationButton\n          >\n            {{ page }}\n          </button>\n        </li>\n      }\n\n      <li>\n        <button ngpPaginationNext aria-label=\"Next Page\">\n          <ng-icon name=\"heroChevronRight\" />\n        </button>\n      </li>\n\n      <li>\n        <button ngpPaginationLast aria-label=\"Last Page\">\n          <ng-icon name=\"heroChevronDoubleRight\" />\n        </button>\n      </li>\n    </ul>\n  `,\n  styles: `\n    ul {\n      display: flex;\n      align-items: center;\n      column-gap: 0.5rem;\n      list-style: none;\n    }\n\n    [ngpPaginationFirst],\n    [ngpPaginationPrevious],\n    [ngpPaginationButton],\n    [ngpPaginationNext],\n    [ngpPaginationLast] {\n      all: unset;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 2rem;\n      height: 2rem;\n      border-radius: 0.5rem;\n      color: var(--ngp-text-primary);\n      outline: none;\n      font-size: 14px;\n      font-weight: 500;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-button-shadow);\n      cursor: pointer;\n      transition: background-color 0.2s;\n\n      &[data-hover]:not([data-disabled]):not([data-selected]) {\n        background-color: var(--ngp-background-hover);\n      }\n\n      &[data-focus-visible]:not([data-disabled]) {\n        outline: 2px solid var(--ngp-focus-ring);\n      }\n\n      &[data-press]:not([data-disabled]):not([data-selected]) {\n        background-color: var(--ngp-background-active);\n      }\n\n      &[data-disabled] {\n        color: rgb(210 210 210);\n        background-color: var(--ngp-background-disabled);\n        cursor: not-allowed;\n        box-shadow: none;\n      }\n\n      &[data-selected] {\n        background-color: var(--ngp-background-inverse);\n        color: var(--ngp-text-inverse);\n      }\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Pagination implements ControlValueAccessor {\n  /** Access the pagination state */\n  protected readonly state = injectPaginationState();\n\n  /** Get the pages as an array we can iterate over */\n  protected readonly pages = computed(() =>\n    Array.from({ length: this.state().pageCount() }).map((_, i) => i + 1),\n  );\n\n  /** The onChange callback */\n  private onChange?: ChangeFn<number>;\n\n  /** The onTouched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    this.state().pageChange.subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the control */\n  writeValue(value: number): void {\n    this.state().page.set(value);\n  }\n\n  /** Register a callback to be called when the value changes */\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  /** Register a callback to be called when the control is touched */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n}\n",
+      "code": "import { Component, computed } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n  heroChevronDoubleLeft,\n  heroChevronDoubleRight,\n  heroChevronLeft,\n  heroChevronRight,\n} from '@ng-icons/heroicons/outline';\nimport {\n  injectPaginationState,\n  NgpPagination,\n  NgpPaginationButton,\n  NgpPaginationFirst,\n  NgpPaginationLast,\n  NgpPaginationNext,\n  NgpPaginationPrevious,\n} from 'ng-primitives/pagination';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-pagination',\n  hostDirectives: [\n    {\n      directive: NgpPagination,\n      inputs: [\n        'ngpPaginationPage:page',\n        'ngpPaginationPageCount:pageCount',\n        'ngpPaginationDisabled:disabled',\n      ],\n      outputs: ['ngpPaginationPageChange:pageChange'],\n    },\n  ],\n  imports: [\n    NgpPaginationButton,\n    NgpPaginationFirst,\n    NgpPaginationLast,\n    NgpPaginationNext,\n    NgpPaginationPrevious,\n    NgIcon,\n  ],\n  providers: [\n    provideValueAccessor(NgpPagination),\n    provideIcons({\n      heroChevronDoubleLeft,\n      heroChevronDoubleRight,\n      heroChevronLeft,\n      heroChevronRight,\n    }),\n  ],\n  template: `\n    <ul>\n      <li>\n        <button ngpPaginationFirst aria-label=\"First Page\">\n          <ng-icon name=\"heroChevronDoubleLeft\" />\n        </button>\n      </li>\n\n      <li>\n        <button ngpPaginationPrevious aria-label=\"Previous Page\">\n          <ng-icon name=\"heroChevronLeft\" />\n        </button>\n      </li>\n\n      @for (page of pages(); track page) {\n        <li>\n          <button\n            [ngpPaginationButtonPage]=\"page\"\n            [attr.aria-label]=\"'Page ' + page\"\n            ngpPaginationButton\n          >\n            {{ page }}\n          </button>\n        </li>\n      }\n\n      <li>\n        <button ngpPaginationNext aria-label=\"Next Page\">\n          <ng-icon name=\"heroChevronRight\" />\n        </button>\n      </li>\n\n      <li>\n        <button ngpPaginationLast aria-label=\"Last Page\">\n          <ng-icon name=\"heroChevronDoubleRight\" />\n        </button>\n      </li>\n    </ul>\n  `,\n  styles: `\n    ul {\n      display: flex;\n      align-items: center;\n      column-gap: 0.5rem;\n      list-style: none;\n    }\n\n    [ngpPaginationFirst],\n    [ngpPaginationPrevious],\n    [ngpPaginationButton],\n    [ngpPaginationNext],\n    [ngpPaginationLast] {\n      all: unset;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 2rem;\n      height: 2rem;\n      border-radius: 0.5rem;\n      color: var(--ngp-text-primary);\n      outline: none;\n      font-size: 14px;\n      font-weight: 500;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-button-shadow);\n      cursor: pointer;\n      transition: background-color 0.2s;\n\n      &[data-hover]:not([data-disabled]):not([data-selected]) {\n        background-color: var(--ngp-background-hover);\n      }\n\n      &[data-focus-visible]:not([data-disabled]) {\n        outline: 2px solid var(--ngp-focus-ring);\n      }\n\n      &[data-press]:not([data-disabled]):not([data-selected]) {\n        background-color: var(--ngp-background-active);\n      }\n\n      &[data-disabled] {\n        color: rgb(210 210 210);\n        background-color: var(--ngp-background-disabled);\n        cursor: not-allowed;\n        box-shadow: none;\n      }\n\n      &[data-selected] {\n        background-color: var(--ngp-background-inverse);\n        color: var(--ngp-text-inverse);\n      }\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Pagination implements ControlValueAccessor {\n  /** Access the pagination state */\n  protected readonly state = injectPaginationState();\n\n  /** Get the pages as an array we can iterate over */\n  protected readonly pages = computed(() =>\n    Array.from({ length: this.state().pageCount() }).map((_, i) => i + 1),\n  );\n\n  /** The onChange callback */\n  private onChange?: ChangeFn<number>;\n\n  /** The onTouched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    this.state().pageChange.subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the control */\n  writeValue(value: number): void {\n    // writing a value from the model must not re-emit through onChange\n    this.state().setPage(value, { emit: false });\n  }\n\n  /** Register a callback to be called when the value changes */\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  /** Register a callback to be called when the control is touched */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  /** Reflect the form control's disabled state onto the pagination. */\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
+  {
+    "name": "password",
+    "entryPoint": "ng-primitives/password",
+    "exports": [
+      "defaultPasswordConfig",
+      "injectPasswordConfig",
+      "NgpPasswordConfig",
+      "NgpPasswordConfigToken",
+      "providePasswordConfig",
+      "NgpPasswordInput",
+      "injectPasswordInputState",
+      "ngpPasswordInput",
+      "NgpPasswordInputProps",
+      "NgpPasswordInputState",
+      "providePasswordInputState",
+      "NgpPasswordToggle",
+      "injectPasswordToggleState",
+      "ngpPasswordToggle",
+      "NgpPasswordToggleProps",
+      "NgpPasswordToggleState",
+      "providePasswordToggleState",
+      "NgpPassword",
+      "injectPasswordState",
+      "ngpPassword",
+      "NgpPasswordProps",
+      "NgpPasswordState",
+      "providePasswordState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "The password primitive is a form control that lets users reveal and hide the contents of a password field with an accessible toggle button.",
+    "accessibility": [
+      "screen reader"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpFormField>\n  <label ngpLabel>Password</label>\n  <div ngpPassword #password=\"ngpPassword\">\n    <input ngpPasswordInput type=\"password\" autocomplete=\"current-password\" />\n    <button ngpButton ngpPasswordToggle>\n      <ng-icon [name]=\"password.isVisible() ? 'lucideEyeOff' : 'lucideEye'\" />\n    </button>\n  </div>\n</div>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-1",
+        "code": "import { providePasswordConfig } from 'ng-primitives/password';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    providePasswordConfig({\n      showLabel: 'Show password',\n      hideLabel: 'Hide password',\n      shownAnnouncement: 'Your password is shown',\n      hiddenAnnouncement: 'Your password is hidden',\n      ignorePasswordManagers: false,\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, input, signal } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEye, lucideEyeOff } from '@ng-icons/lucide';\nimport { NgpButton } from 'ng-primitives/button';\nimport {\n  injectPasswordState,\n  NgpPassword,\n  NgpPasswordInput,\n  NgpPasswordToggle,\n} from 'ng-primitives/password';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-password',\n  hostDirectives: [NgpPassword],\n  imports: [NgIcon, NgpPasswordInput, NgpPasswordToggle, NgpButton],\n  providers: [provideValueAccessor(Password), provideIcons({ lucideEye, lucideEyeOff })],\n  template: `\n    <input\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      (input)=\"onValueChange($event)\"\n      ngpPasswordInput\n      type=\"password\"\n      autocomplete=\"current-password\"\n    />\n    <button ngpButton ngpPasswordToggle>\n      <ng-icon [name]=\"state().visible() ? 'lucideEyeOff' : 'lucideEye'\" />\n    </button>\n  `,\n  styles: `\n    :host {\n      display: block;\n      position: relative;\n    }\n\n    [ngpPasswordInput] {\n      height: 2.125rem;\n      width: 100%;\n      border-radius: 0.5rem;\n      padding: 0 40px 0 12px;\n      border: none;\n      background: var(--ngp-background);\n      color: var(--ngp-text-primary);\n      font-size: 0.875rem;\n      letter-spacing: -0.006em;\n      box-shadow: var(--ngp-input-shadow);\n      outline: none;\n    }\n\n    [ngpPasswordInput][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpPasswordInput]::placeholder {\n      color: var(--ngp-text-placeholder);\n    }\n\n    [ngpPasswordToggle] {\n      position: absolute;\n      top: 0;\n      right: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2.125rem;\n      width: 2.125rem;\n      border: none;\n      border-radius: 0.5rem;\n      background-color: transparent;\n      color: var(--ngp-text-tertiary);\n      font-size: 1.125rem;\n      cursor: pointer;\n      outline: none;\n      transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    [ngpPasswordToggle][data-hover] {\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpPasswordToggle][data-visible] {\n      color: var(--ngp-primary);\n    }\n\n    [ngpPasswordToggle][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: -2px;\n    }\n  `,\n  host: {\n    '(focusout)': 'onFocusOut($event)',\n  },\n})\nexport class Password implements ControlValueAccessor {\n  /** Access the password state to read the visibility. */\n  protected readonly state = injectPasswordState();\n\n  /** The placeholder text */\n  readonly placeholder = input<string>('');\n\n  /** The current value */\n  protected value = signal<string>('');\n\n  /** The function to call when the value changes */\n  private onChange?: ChangeFn<string>;\n\n  /** The function to call when the control is touched */\n  protected onTouched?: TouchedFn;\n\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  protected onValueChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.value.set(input.value);\n    this.onChange?.(input.value);\n  }\n\n  protected onFocusOut(event: FocusEvent): void {\n    // only mark as touched when focus leaves the component, not when moving\n    // between the input and the toggle button\n    const host = event.currentTarget as HTMLElement;\n    if (!host.contains(event.relatedTarget as Node | null)) {\n      this.onTouched?.();\n    }\n  }\n}\n",
       "hasVariants": false,
       "hasSizes": true
     }
@@ -1580,7 +1642,7 @@
       }
     ],
     "reusableComponent": {
-      "code": "import { Component, input } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport {\n  injectSliderState,\n  NgpSlider,\n  NgpSliderRange,\n  NgpSliderThumb,\n  NgpSliderTrack,\n} from 'ng-primitives/slider';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-slider',\n  hostDirectives: [\n    {\n      directive: NgpSlider,\n      inputs: [\n        'ngpSliderValue:value',\n        'ngpSliderMin:min',\n        'ngpSliderMax:max',\n        'ngpSliderDisabled:disabled',\n      ],\n      outputs: ['ngpSliderValueChange:valueChange'],\n    },\n  ],\n  imports: [NgpSliderTrack, NgpSliderRange, NgpSliderThumb],\n  providers: [provideValueAccessor(Slider)],\n  template: `\n    <div ngpSliderTrack>\n      <div ngpSliderRange></div>\n    </div>\n    <div [ariaLabel]=\"ariaLabel()\" ngpSliderThumb></div>\n  `,\n  styles: `\n    :host {\n      display: flex;\n      position: relative;\n      width: 200px;\n      height: 20px;\n      touch-action: none;\n      user-select: none;\n      align-items: center;\n    }\n\n    [ngpSliderTrack] {\n      position: relative;\n      height: 5px;\n      width: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-secondary);\n    }\n\n    [ngpSliderRange] {\n      position: absolute;\n      height: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-inverse);\n    }\n\n    [ngpSliderThumb] {\n      position: absolute;\n      display: block;\n      height: 20px;\n      width: 20px;\n      border-radius: 10px;\n      background-color: white;\n      box-shadow: var(--ngp-button-shadow);\n      outline: none;\n      transform: translateX(-50%);\n    }\n\n    [ngpSliderThumb][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 0;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Slider implements ControlValueAccessor {\n  /** Access the slider state */\n  private readonly state = injectSliderState();\n\n  /** Forward the aria-label to the thumb */\n  readonly ariaLabel = input<string | null>(null, {\n    alias: 'aria-label',\n  });\n\n  /**\n   * The onChange callback function.\n   */\n  private onChange?: ChangeFn<number>;\n\n  /**\n   * The onTouched callback function.\n   */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the slider, call the onChange function with the new value.\n    this.state()\n      .valueChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  writeValue(value: number): void {\n    this.state().setValue(value);\n  }\n\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
+      "code": "import { Component, input } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport {\n  injectSliderState,\n  NgpSlider,\n  NgpSliderRange,\n  NgpSliderThumb,\n  NgpSliderTrack,\n} from 'ng-primitives/slider';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-slider',\n  hostDirectives: [\n    {\n      directive: NgpSlider,\n      inputs: [\n        'ngpSliderValue:value',\n        'ngpSliderMin:min',\n        'ngpSliderMax:max',\n        'ngpSliderDisabled:disabled',\n      ],\n      outputs: ['ngpSliderValueChange:valueChange'],\n    },\n  ],\n  imports: [NgpSliderTrack, NgpSliderRange, NgpSliderThumb],\n  providers: [provideValueAccessor(Slider)],\n  template: `\n    <div ngpSliderTrack>\n      <div ngpSliderRange></div>\n    </div>\n    <div [ariaLabel]=\"ariaLabel()\" ngpSliderThumb></div>\n  `,\n  styles: `\n    :host {\n      display: flex;\n      position: relative;\n      width: 200px;\n      height: 20px;\n      touch-action: none;\n      user-select: none;\n      align-items: center;\n    }\n\n    [ngpSliderTrack] {\n      position: relative;\n      height: 5px;\n      width: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-secondary);\n    }\n\n    [ngpSliderRange] {\n      position: absolute;\n      height: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-inverse);\n    }\n\n    [ngpSliderThumb] {\n      position: absolute;\n      display: block;\n      height: 20px;\n      width: 20px;\n      border-radius: 10px;\n      background-color: white;\n      box-shadow: var(--ngp-button-shadow);\n      outline: none;\n      transform: translateX(-50%);\n    }\n\n    [ngpSliderThumb][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 0;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Slider implements ControlValueAccessor {\n  /** Access the slider state */\n  private readonly state = injectSliderState();\n\n  /** Forward the aria-label to the thumb */\n  readonly ariaLabel = input<string | null>(null, {\n    alias: 'aria-label',\n  });\n\n  /**\n   * The onChange callback function.\n   */\n  private onChange?: ChangeFn<number>;\n\n  /**\n   * The onTouched callback function.\n   */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the slider, call the onChange function with the new value.\n    this.state()\n      .valueChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  writeValue(value: number): void {\n    // writing a value from the model must not re-emit through onChange\n    this.state().setValue(value, { emit: false });\n  }\n\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
       "hasVariants": false,
       "hasSizes": false
     }
@@ -1626,7 +1688,7 @@
       }
     ],
     "reusableComponent": {
-      "code": "import { Component } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { injectSwitchState, NgpSwitch, NgpSwitchThumb } from 'ng-primitives/switch';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-switch',\n  hostDirectives: [\n    {\n      directive: NgpSwitch,\n      inputs: ['ngpSwitchChecked:checked', 'ngpSwitchDisabled:disabled'],\n      outputs: ['ngpSwitchCheckedChange:checkedChange'],\n    },\n  ],\n  imports: [NgpSwitchThumb],\n  template: `\n    <span ngpSwitchThumb></span>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      align-items: center;\n      position: relative;\n      width: 2.5rem;\n      height: 1.5rem;\n      border-radius: 999px;\n      background-color: var(--ngp-background-secondary);\n      border: 1px solid var(--ngp-border);\n      padding: 0;\n      outline: none;\n      transition-property:\n        color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n      box-sizing: border-box;\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    :host[data-checked] {\n      background-color: var(--ngp-background-blue);\n      border-color: var(--ngp-border-blue);\n    }\n\n    [ngpSwitchThumb] {\n      display: block;\n      height: 1.25rem;\n      width: 1.25rem;\n      border-radius: 999px;\n      background-color: white;\n      box-shadow: var(--ngp-button-shadow);\n      outline: none;\n      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n      transform: translateX(1px);\n      box-sizing: border-box;\n    }\n\n    [ngpSwitchThumb][data-checked] {\n      transform: translateX(17px);\n    }\n  `,\n  providers: [provideValueAccessor(Switch)],\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Switch implements ControlValueAccessor {\n  /** Access the switch state. */\n  private readonly switch = injectSwitchState();\n\n  /** The on change callback */\n  private onChange?: ChangeFn<boolean>;\n\n  /** The on touched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Any time the switch changes, update the form value.\n    this.switch()\n      .checkedChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the switch. */\n  writeValue(value: boolean): void {\n    this.switch().setChecked(value);\n  }\n\n  /** Register a callback function to be called when the value changes. */\n  registerOnChange(fn: ChangeFn<boolean>): void {\n    this.onChange = fn;\n  }\n\n  /** Register a callback function to be called when the switch is touched. */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  /** Set the disabled state of the switch. */\n  setDisabledState(isDisabled: boolean): void {\n    this.switch().setDisabled(isDisabled);\n  }\n}\n",
+      "code": "import { Component } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { injectSwitchState, NgpSwitch, NgpSwitchThumb } from 'ng-primitives/switch';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-switch',\n  hostDirectives: [\n    {\n      directive: NgpSwitch,\n      inputs: ['ngpSwitchChecked:checked', 'ngpSwitchDisabled:disabled'],\n      outputs: ['ngpSwitchCheckedChange:checkedChange'],\n    },\n  ],\n  imports: [NgpSwitchThumb],\n  template: `\n    <span ngpSwitchThumb></span>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      align-items: center;\n      position: relative;\n      width: 2.5rem;\n      height: 1.5rem;\n      border-radius: 999px;\n      background-color: var(--ngp-background-secondary);\n      border: 1px solid var(--ngp-border);\n      padding: 0;\n      outline: none;\n      transition-property:\n        color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n      box-sizing: border-box;\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    :host[data-checked] {\n      background-color: var(--ngp-background-blue);\n      border-color: var(--ngp-border-blue);\n    }\n\n    [ngpSwitchThumb] {\n      display: block;\n      height: 1.25rem;\n      width: 1.25rem;\n      border-radius: 999px;\n      background-color: white;\n      box-shadow: var(--ngp-button-shadow);\n      outline: none;\n      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n      transform: translateX(1px);\n      box-sizing: border-box;\n    }\n\n    [ngpSwitchThumb][data-checked] {\n      transform: translateX(17px);\n    }\n  `,\n  providers: [provideValueAccessor(Switch)],\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Switch implements ControlValueAccessor {\n  /** Access the switch state. */\n  private readonly switch = injectSwitchState();\n\n  /** The on change callback */\n  private onChange?: ChangeFn<boolean>;\n\n  /** The on touched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Any time the switch changes, update the form value.\n    this.switch()\n      .checkedChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the switch. */\n  writeValue(value: boolean): void {\n    // writing a value from the model must not re-emit through onChange\n    this.switch().setChecked(value, { emit: false });\n  }\n\n  /** Register a callback function to be called when the value changes. */\n  registerOnChange(fn: ChangeFn<boolean>): void {\n    this.onChange = fn;\n  }\n\n  /** Register a callback function to be called when the switch is touched. */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  /** Set the disabled state of the switch. */\n  setDisabledState(isDisabled: boolean): void {\n    this.switch().setDisabled(isDisabled);\n  }\n}\n",
       "hasVariants": false,
       "hasSizes": false
     }

package/src/generated/reusable-components.json

@@ -22,14 +22,14 @@
   },
   {
     "name": "checkbox",
-    "code": "import { Component } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroCheckMini, heroMinusMini } from '@ng-icons/heroicons/mini';\nimport { injectCheckboxState, NgpCheckbox } from 'ng-primitives/checkbox';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-checkbox',\n  hostDirectives: [\n    {\n      directive: NgpCheckbox,\n      inputs: [\n        'ngpCheckboxChecked:checked',\n        'ngpCheckboxIndeterminate:indeterminate',\n        'ngpCheckboxDisabled:disabled',\n      ],\n      outputs: [\n        'ngpCheckboxCheckedChange:checkedChange',\n        'ngpCheckboxIndeterminateChange:indeterminateChange',\n      ],\n    },\n  ],\n  providers: [provideValueAccessor(Checkbox), provideIcons({ heroCheckMini, heroMinusMini })],\n  imports: [NgIcon],\n  template: `\n    @if (state().indeterminate()) {\n      <ng-icon name=\"heroMinusMini\" />\n    } @else if (state().checked()) {\n      <ng-icon name=\"heroCheckMini\" />\n    }\n  `,\n  styles: `\n    :host {\n      display: flex;\n      width: 1.25rem;\n      height: 1.25rem;\n      cursor: pointer;\n      align-items: center;\n      justify-content: center;\n      border-radius: 0.25rem;\n      border: 1px solid var(--ngp-border);\n      background-color: transparent;\n      padding: 0;\n      outline: none;\n      flex: none;\n      color: var(--ngp-text-inverse);\n      font-size: 0.75rem;\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-checked],\n    :host[data-indeterminate] {\n      border-color: var(--ngp-background-inverse);\n      background-color: var(--ngp-background-inverse);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouchedFn?.()',\n  },\n})\nexport class Checkbox implements ControlValueAccessor {\n  /**\n   * The checked state of the checkbox.\n   */\n  protected readonly state = injectCheckboxState();\n\n  /**\n   * The onChange function for the checkbox.\n   */\n  protected onChangeFn?: ChangeFn<boolean>;\n\n  /**\n   * The onTouched function for the checkbox.\n   */\n  protected onTouchedFn?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the checkbox, call the onChange function with the new value.\n    this.state()\n      .checkedChange.pipe(takeUntilDestroyed())\n      .subscribe(checked => this.onChangeFn?.(checked));\n  }\n\n  writeValue(checked: boolean): void {\n    this.state().setChecked(checked);\n  }\n\n  registerOnChange(fn: ChangeFn<boolean>): void {\n    this.onChangeFn = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouchedFn = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
+    "code": "import { Component } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroCheckMini, heroMinusMini } from '@ng-icons/heroicons/mini';\nimport { injectCheckboxState, NgpCheckbox } from 'ng-primitives/checkbox';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-checkbox',\n  hostDirectives: [\n    {\n      directive: NgpCheckbox,\n      inputs: [\n        'ngpCheckboxChecked:checked',\n        'ngpCheckboxIndeterminate:indeterminate',\n        'ngpCheckboxDisabled:disabled',\n      ],\n      outputs: [\n        'ngpCheckboxCheckedChange:checkedChange',\n        'ngpCheckboxIndeterminateChange:indeterminateChange',\n      ],\n    },\n  ],\n  providers: [provideValueAccessor(Checkbox), provideIcons({ heroCheckMini, heroMinusMini })],\n  imports: [NgIcon],\n  template: `\n    @if (state().indeterminate()) {\n      <ng-icon name=\"heroMinusMini\" />\n    } @else if (state().checked()) {\n      <ng-icon name=\"heroCheckMini\" />\n    }\n  `,\n  styles: `\n    :host {\n      display: flex;\n      width: 1.25rem;\n      height: 1.25rem;\n      cursor: pointer;\n      align-items: center;\n      justify-content: center;\n      border-radius: 0.25rem;\n      border: 1px solid var(--ngp-border);\n      background-color: transparent;\n      padding: 0;\n      outline: none;\n      flex: none;\n      color: var(--ngp-text-inverse);\n      font-size: 0.75rem;\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-checked],\n    :host[data-indeterminate] {\n      border-color: var(--ngp-background-inverse);\n      background-color: var(--ngp-background-inverse);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouchedFn?.()',\n  },\n})\nexport class Checkbox implements ControlValueAccessor {\n  /**\n   * The checked state of the checkbox.\n   */\n  protected readonly state = injectCheckboxState();\n\n  /**\n   * The onChange function for the checkbox.\n   */\n  protected onChangeFn?: ChangeFn<boolean>;\n\n  /**\n   * The onTouched function for the checkbox.\n   */\n  protected onTouchedFn?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the checkbox, call the onChange function with the new value.\n    this.state()\n      .checkedChange.pipe(takeUntilDestroyed())\n      .subscribe(checked => this.onChangeFn?.(checked));\n  }\n\n  writeValue(checked: boolean): void {\n    // writing a value from the model must not re-emit through onChange\n    this.state().setChecked(checked, { emit: false });\n  }\n\n  registerOnChange(fn: ChangeFn<boolean>): void {\n    this.onChangeFn = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouchedFn = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
     "primitive": "checkbox",
     "hasVariants": false,
     "hasSizes": true
   },
   {
     "name": "combobox",
-    "code": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Component, computed, input, model, signal } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronDown } from '@ng-icons/heroicons/outline';\nimport {\n  NgpCombobox,\n  NgpComboboxButton,\n  NgpComboboxDropdown,\n  NgpComboboxInput,\n  NgpComboboxOption,\n  NgpComboboxPortal,\n} from 'ng-primitives/combobox';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-combobox',\n  imports: [\n    NgpCombobox,\n    NgpComboboxDropdown,\n    NgpComboboxOption,\n    NgpComboboxInput,\n    NgpComboboxPortal,\n    NgpComboboxButton,\n    NgIcon,\n  ],\n  providers: [provideIcons({ heroChevronDown }), provideValueAccessor(Combobox)],\n  template: `\n    <div\n      [(ngpComboboxValue)]=\"value\"\n      [ngpComboboxDisabled]=\"disabled() || formDisabled()\"\n      (ngpComboboxOpenChange)=\"resetOnClose($event)\"\n      (ngpComboboxValueChange)=\"onValueChange($event)\"\n      ngpCombobox\n    >\n      <input\n        [value]=\"filter()\"\n        [placeholder]=\"placeholder()\"\n        (input)=\"onFilterChange($event)\"\n        (blur)=\"onTouched?.()\"\n        ngpComboboxInput\n      />\n\n      <button ngpComboboxButton aria-label=\"Toggle dropdown\">\n        <ng-icon name=\"heroChevronDown\" />\n      </button>\n\n      <div *ngpComboboxPortal ngpComboboxDropdown>\n        @for (option of filteredOptions(); track option) {\n          <div [ngpComboboxOptionValue]=\"option\" ngpComboboxOption>\n            {{ option }}\n          </div>\n        } @empty {\n          <div class=\"empty-message\">No options found</div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    [ngpCombobox] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      height: 36px;\n      width: 300px;\n      border-radius: 8px;\n      border: none;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-input-shadow);\n      box-sizing: border-box;\n    }\n\n    [ngpCombobox][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpComboboxInput] {\n      flex: 1;\n      padding: 0 16px;\n      border: none;\n      background-color: transparent;\n      color: var(--ngp-text);\n      font-family: inherit;\n      font-size: 14px;\n      padding: 0 16px;\n      outline: none;\n      height: 100%;\n    }\n\n    [ngpComboboxButton] {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      width: 36px;\n      background-color: transparent;\n      border: none;\n      color: var(--ngp-text);\n      cursor: pointer;\n      box-sizing: border-box;\n    }\n\n    [ngpComboboxDropdown] {\n      background-color: var(--ngp-background);\n      border: 1px solid var(--ngp-border);\n      padding: 0.25rem;\n      border-radius: 0.75rem;\n      outline: none;\n      position: absolute;\n      animation: popover-show 0.1s ease-out;\n      width: var(--ngp-combobox-width);\n      box-shadow: var(--ngp-shadow-lg);\n      box-sizing: border-box;\n      margin-top: 4px;\n      max-height: 240px;\n      overflow-y: auto;\n      transform-origin: var(--ngp-combobox-transform-origin);\n    }\n\n    [ngpComboboxDropdown][data-enter] {\n      animation: combobox-show 0.1s ease-out;\n    }\n\n    [ngpComboboxDropdown][data-exit] {\n      animation: combobox-hide 0.1s ease-out;\n    }\n\n    [ngpComboboxOption] {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0.375rem 0.75rem;\n      cursor: pointer;\n      border-radius: 0.5rem;\n      width: 100%;\n      height: 36px;\n      font-size: 14px;\n      color: var(--ngp-text-primary);\n      box-sizing: border-box;\n    }\n\n    [ngpComboboxOption][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpComboboxOption][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpComboboxOption][data-active] {\n      background-color: var(--ngp-background-active);\n    }\n\n    .empty-message {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 0.5rem;\n      color: var(--ngp-text-secondary);\n      font-size: 14px;\n      font-weight: 500;\n      text-align: center;\n    }\n\n    @keyframes combobox-show {\n      0% {\n        opacity: 0;\n        transform: translateY(-10px) scale(0.9);\n      }\n      100% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n    }\n\n    @keyframes combobox-hide {\n      0% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n      100% {\n        opacity: 0;\n        transform: translateY(-10px) scale(0.9);\n      }\n    }\n  `,\n})\nexport class Combobox implements ControlValueAccessor {\n  /** The options for the combobox. */\n  readonly options = input<string[]>([]);\n\n  /** The selected value. */\n  readonly value = model<string | undefined>();\n\n  /** The placeholder for the input. */\n  readonly placeholder = input<string>('');\n\n  /** The disabled state of the combobox. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /** The filter value. */\n  protected readonly filter = signal<string>('');\n\n  /** Get the filtered options. */\n  protected readonly filteredOptions = computed(() =>\n    this.options().filter(option => option.toLowerCase().includes(this.filter().toLowerCase())),\n  );\n\n  /** Store the form disabled state */\n  protected readonly formDisabled = signal(false);\n\n  /** The on change callback */\n  private onChange?: ChangeFn<string>;\n\n  /** The on touch callback */\n  protected onTouched?: TouchedFn;\n\n  onFilterChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.filter.set(input.value);\n  }\n\n  writeValue(value: string | undefined): void {\n    this.value.set(value);\n    this.filter.set(value ?? '');\n  }\n\n  registerOnChange(fn: ChangeFn<string | undefined>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n\n  protected onValueChange(value: string): void {\n    this.onChange?.(value);\n    // update the filter value\n    this.filter.set(value);\n  }\n\n  protected resetOnClose(open: boolean): void {\n    // if the dropdown is closed, reset the filter value\n    if (open) {\n      return;\n    }\n\n    // if the filter value is empty, set the value to undefined\n    if (this.filter() === '') {\n      this.value.set(undefined);\n    } else {\n      // otherwise set the filter value to the selected value\n      this.filter.set(this.value() ?? '');\n    }\n  }\n}\n",
+    "code": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Component, computed, input, model, signal } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronDown } from '@ng-icons/heroicons/outline';\nimport {\n  NgpCombobox,\n  NgpComboboxButton,\n  NgpComboboxDropdown,\n  NgpComboboxInput,\n  NgpComboboxOption,\n  NgpComboboxPortal,\n} from 'ng-primitives/combobox';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-combobox',\n  imports: [\n    NgpCombobox,\n    NgpComboboxDropdown,\n    NgpComboboxOption,\n    NgpComboboxInput,\n    NgpComboboxPortal,\n    NgpComboboxButton,\n    NgIcon,\n  ],\n  providers: [provideIcons({ heroChevronDown }), provideValueAccessor(Combobox)],\n  template: `\n    <div\n      [(ngpComboboxValue)]=\"value\"\n      [ngpComboboxDisabled]=\"disabled() || formDisabled()\"\n      (ngpComboboxOpenChange)=\"resetOnClose($event)\"\n      (ngpComboboxValueChange)=\"onValueChange($event)\"\n      ngpCombobox\n    >\n      <input\n        [value]=\"filter()\"\n        [placeholder]=\"placeholder()\"\n        (input)=\"onFilterChange($event)\"\n        (blur)=\"onTouched?.()\"\n        ngpComboboxInput\n      />\n\n      <button ngpComboboxButton aria-label=\"Toggle dropdown\">\n        <ng-icon name=\"heroChevronDown\" />\n      </button>\n\n      <div *ngpComboboxPortal ngpComboboxDropdown>\n        @for (option of filteredOptions(); track option) {\n          <div [ngpComboboxOptionValue]=\"option\" ngpComboboxOption>\n            {{ option }}\n          </div>\n        } @empty {\n          <div class=\"empty-message\">No options found</div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    [ngpCombobox] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      height: 36px;\n      width: 300px;\n      border-radius: 8px;\n      border: none;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-input-shadow);\n      box-sizing: border-box;\n    }\n\n    [ngpCombobox][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpComboboxInput] {\n      flex: 1;\n      padding: 0 16px;\n      border: none;\n      background-color: transparent;\n      color: var(--ngp-text);\n      font-family: inherit;\n      font-size: 14px;\n      padding: 0 16px;\n      outline: none;\n      height: 100%;\n    }\n\n    [ngpComboboxButton] {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      width: 36px;\n      background-color: transparent;\n      border: none;\n      color: var(--ngp-text);\n      cursor: pointer;\n      box-sizing: border-box;\n    }\n\n    [ngpComboboxDropdown] {\n      background-color: var(--ngp-background);\n      border: 1px solid var(--ngp-border);\n      padding: 0.25rem;\n      border-radius: 0.75rem;\n      outline: none;\n      position: absolute;\n      animation: popover-show 0.1s ease-out;\n      width: var(--ngp-combobox-width);\n      box-shadow: var(--ngp-shadow-lg);\n      box-sizing: border-box;\n      margin-top: 4px;\n      max-height: 240px;\n      overflow-y: auto;\n      transform-origin: var(--ngp-combobox-transform-origin);\n    }\n\n    [ngpComboboxDropdown][data-enter] {\n      animation: combobox-show 0.1s ease-out;\n    }\n\n    [ngpComboboxDropdown][data-exit] {\n      animation: combobox-hide 0.1s ease-out;\n    }\n\n    [ngpComboboxOption] {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0.375rem 0.75rem;\n      cursor: pointer;\n      border-radius: 0.5rem;\n      width: 100%;\n      height: 36px;\n      font-size: 14px;\n      color: var(--ngp-text-primary);\n      box-sizing: border-box;\n    }\n\n    [ngpComboboxOption][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpComboboxOption][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpComboboxOption][data-active] {\n      background-color: var(--ngp-background-active);\n    }\n\n    .empty-message {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 0.5rem;\n      color: var(--ngp-text-secondary);\n      font-size: 14px;\n      font-weight: 500;\n      text-align: center;\n    }\n\n    @keyframes combobox-show {\n      0% {\n        opacity: 0;\n        transform: translateY(-10px) scale(0.9);\n      }\n      100% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n    }\n\n    @keyframes combobox-hide {\n      0% {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n      100% {\n        opacity: 0;\n        transform: translateY(-10px) scale(0.9);\n      }\n    }\n  `,\n})\nexport class Combobox implements ControlValueAccessor {\n  /** The options for the combobox. */\n  readonly options = input<string[]>([]);\n\n  /** The selected value. */\n  readonly value = model<string | undefined>();\n\n  /** The placeholder for the input. */\n  readonly placeholder = input<string>('');\n\n  /** The disabled state of the combobox. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /** The filter value. */\n  protected readonly filter = signal<string>('');\n\n  /** Get the filtered options. */\n  protected readonly filteredOptions = computed(() =>\n    this.options().filter(option => option.toLowerCase().includes(this.filter().toLowerCase())),\n  );\n\n  /** Store the form disabled state */\n  protected readonly formDisabled = signal(false);\n\n  /** The on change callback */\n  private onChange?: ChangeFn<string | undefined>;\n\n  /** The on touch callback */\n  protected onTouched?: TouchedFn;\n\n  onFilterChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.filter.set(input.value);\n  }\n\n  writeValue(value: string | undefined): void {\n    this.value.set(value);\n    this.filter.set(value ?? '');\n  }\n\n  registerOnChange(fn: ChangeFn<string | undefined>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n\n  protected onValueChange(value: string): void {\n    this.onChange?.(value);\n    // update the filter value\n    this.filter.set(value);\n  }\n\n  protected resetOnClose(open: boolean): void {\n    // if the dropdown is closed, reset the filter value\n    if (open) {\n      return;\n    }\n\n    // if the filter value is empty, clear the value and notify the form control\n    if (this.filter() === '') {\n      this.value.set(undefined);\n      this.onChange?.(undefined);\n    } else {\n      // otherwise set the filter value to the selected value\n      this.filter.set(this.value() ?? '');\n    }\n  }\n}\n",
     "primitive": "combobox",
     "hasVariants": false,
     "hasSizes": true
@@ -43,7 +43,7 @@
   },
   {
     "name": "date-picker",
-    "code": "import { Component, computed } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronLeftMini, heroChevronRightMini } from '@ng-icons/heroicons/mini';\nimport {\n  injectDatePickerState,\n  NgpDatePicker,\n  NgpDatePickerCell,\n  NgpDatePickerCellRender,\n  NgpDatePickerDateButton,\n  NgpDatePickerGrid,\n  NgpDatePickerLabel,\n  NgpDatePickerNextMonth,\n  NgpDatePickerPreviousMonth,\n  NgpDatePickerRowRender,\n} from 'ng-primitives/date-picker';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-date-picker',\n  hostDirectives: [\n    {\n      directive: NgpDatePicker,\n      inputs: [\n        'ngpDatePickerDate: date',\n        'ngpDatePickerMin: min',\n        'ngpDatePickerMax: max',\n        'ngpDatePickerDisabled: disabled',\n      ],\n      outputs: ['ngpDatePickerDateChange: dateChange'],\n    },\n  ],\n  imports: [\n    NgIcon,\n    NgpDatePickerLabel,\n    NgpDatePickerNextMonth,\n    NgpDatePickerPreviousMonth,\n    NgpDatePickerGrid,\n    NgpDatePickerCell,\n    NgpDatePickerRowRender,\n    NgpDatePickerCellRender,\n    NgpDatePickerDateButton,\n  ],\n  providers: [\n    provideIcons({ heroChevronRightMini, heroChevronLeftMini }),\n    provideValueAccessor(DatePicker),\n  ],\n  template: `\n    <div class=\"date-picker-header\">\n      <button ngpDatePickerPreviousMonth aria-label=\"previous month\">\n        <ng-icon name=\"heroChevronLeftMini\" />\n      </button>\n      <h2 ngpDatePickerLabel>{{ label() }}</h2>\n      <button ngpDatePickerNextMonth aria-label=\"next month\">\n        <ng-icon name=\"heroChevronRightMini\" />\n      </button>\n    </div>\n    <table ngpDatePickerGrid>\n      <thead>\n        <tr>\n          <th scope=\"col\" abbr=\"Sunday\">S</th>\n          <th scope=\"col\" abbr=\"Monday\">M</th>\n          <th scope=\"col\" abbr=\"Tuesday\">T</th>\n          <th scope=\"col\" abbr=\"Wednesday\">W</th>\n          <th scope=\"col\" abbr=\"Thursday\">T</th>\n          <th scope=\"col\" abbr=\"Friday\">F</th>\n          <th scope=\"col\" abbr=\"Saturday\">S</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngpDatePickerRowRender>\n          <td *ngpDatePickerCellRender=\"let date\" ngpDatePickerCell>\n            <button ngpDatePickerDateButton>\n              {{ date.getDate() }}\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  `,\n  styles: `\n    :host {\n      display: inline-block;\n      background-color: var(--ngp-background);\n      border-radius: 12px;\n      padding: 16px;\n      box-shadow: var(--ngp-shadow);\n      border: 1px solid var(--ngp-border);\n    }\n\n    .date-picker-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      height: 36px;\n      margin-bottom: 16px;\n    }\n\n    th {\n      font-size: 14px;\n      font-weight: 500;\n      width: 40px;\n      height: 40px;\n      text-align: center;\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpDatePickerLabel] {\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--ngp-text-primary);\n    }\n\n    [ngpDatePickerPreviousMonth],\n    [ngpDatePickerNextMonth] {\n      all: unset;\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      font-size: 20px;\n      border: 1px solid var(--ngp-border);\n      cursor: pointer;\n    }\n\n    [ngpDatePickerPreviousMonth][data-hover],\n    [ngpDatePickerNextMonth][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpDatePickerPreviousMonth][data-focus-visible],\n    [ngpDatePickerNextMonth][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    [ngpDatePickerPreviousMonth][data-press],\n    [ngpDatePickerNextMonth][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpDatePickerPreviousMonth][data-disabled],\n    [ngpDatePickerNextMonth][data-disabled] {\n      cursor: not-allowed;\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton] {\n      all: unset;\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      cursor: pointer;\n    }\n\n    [ngpDatePickerDateButton][data-today] {\n      color: var(--ngp-text-blue);\n    }\n\n    [ngpDatePickerDateButton][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpDatePickerDateButton][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpDatePickerDateButton][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpDatePickerDateButton][data-outside-month] {\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton][data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n    }\n\n    [ngpDatePickerDateButton][data-selected][data-outside-month] {\n      background-color: var(--ngp-background-disabled);\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton][data-disabled] {\n      cursor: not-allowed;\n      color: var(--ngp-text-disabled);\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class DatePicker implements ControlValueAccessor {\n  /** Access the date picker host directive */\n  private readonly state = injectDatePickerState<Date>();\n\n  /**\n   * Get the current focused date in string format.\n   * @returns The focused date in \"February 2024\" format.\n   */\n  readonly label = computed(\n    () =>\n      `${this.state().focusedDate().toLocaleString('default', { month: 'long' })} ${this.state().focusedDate().getFullYear()}`,\n  );\n\n  /**\n   * The onChange callback function for the date picker.\n   */\n  protected onChange?: ChangeFn<Date | undefined>;\n\n  /**\n   * The onTouched callback function for the date picker.\n   */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the date picker, call the onChange function with the new value.\n    this.state().dateChange.subscribe(date => this.onChange?.(date));\n  }\n\n  writeValue(date: Date): void {\n    this.state().select(date);\n  }\n\n  registerOnChange(fn: ChangeFn<Date | undefined>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().disabled.set(isDisabled);\n  }\n}\n",
+    "code": "import { Component, computed } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronLeftMini, heroChevronRightMini } from '@ng-icons/heroicons/mini';\nimport {\n  injectDatePickerState,\n  NgpDatePicker,\n  NgpDatePickerCell,\n  NgpDatePickerCellRender,\n  NgpDatePickerDateButton,\n  NgpDatePickerGrid,\n  NgpDatePickerLabel,\n  NgpDatePickerNextMonth,\n  NgpDatePickerPreviousMonth,\n  NgpDatePickerRowRender,\n} from 'ng-primitives/date-picker';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-date-picker',\n  hostDirectives: [\n    {\n      directive: NgpDatePicker,\n      inputs: [\n        'ngpDatePickerDate: date',\n        'ngpDatePickerMin: min',\n        'ngpDatePickerMax: max',\n        'ngpDatePickerDisabled: disabled',\n      ],\n      outputs: ['ngpDatePickerDateChange: dateChange'],\n    },\n  ],\n  imports: [\n    NgIcon,\n    NgpDatePickerLabel,\n    NgpDatePickerNextMonth,\n    NgpDatePickerPreviousMonth,\n    NgpDatePickerGrid,\n    NgpDatePickerCell,\n    NgpDatePickerRowRender,\n    NgpDatePickerCellRender,\n    NgpDatePickerDateButton,\n  ],\n  providers: [\n    provideIcons({ heroChevronRightMini, heroChevronLeftMini }),\n    provideValueAccessor(DatePicker),\n  ],\n  template: `\n    <div class=\"date-picker-header\">\n      <button ngpDatePickerPreviousMonth aria-label=\"previous month\">\n        <ng-icon name=\"heroChevronLeftMini\" />\n      </button>\n      <h2 ngpDatePickerLabel>{{ label() }}</h2>\n      <button ngpDatePickerNextMonth aria-label=\"next month\">\n        <ng-icon name=\"heroChevronRightMini\" />\n      </button>\n    </div>\n    <table ngpDatePickerGrid>\n      <thead>\n        <tr>\n          <th scope=\"col\" abbr=\"Sunday\">S</th>\n          <th scope=\"col\" abbr=\"Monday\">M</th>\n          <th scope=\"col\" abbr=\"Tuesday\">T</th>\n          <th scope=\"col\" abbr=\"Wednesday\">W</th>\n          <th scope=\"col\" abbr=\"Thursday\">T</th>\n          <th scope=\"col\" abbr=\"Friday\">F</th>\n          <th scope=\"col\" abbr=\"Saturday\">S</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngpDatePickerRowRender>\n          <td *ngpDatePickerCellRender=\"let date\" ngpDatePickerCell>\n            <button ngpDatePickerDateButton>\n              {{ date.getDate() }}\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  `,\n  styles: `\n    :host {\n      display: inline-block;\n      background-color: var(--ngp-background);\n      border-radius: 12px;\n      padding: 16px;\n      box-shadow: var(--ngp-shadow);\n      border: 1px solid var(--ngp-border);\n    }\n\n    .date-picker-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      height: 36px;\n      margin-bottom: 16px;\n    }\n\n    th {\n      font-size: 14px;\n      font-weight: 500;\n      width: 40px;\n      height: 40px;\n      text-align: center;\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpDatePickerLabel] {\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--ngp-text-primary);\n    }\n\n    [ngpDatePickerPreviousMonth],\n    [ngpDatePickerNextMonth] {\n      all: unset;\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      font-size: 20px;\n      border: 1px solid var(--ngp-border);\n      cursor: pointer;\n    }\n\n    [ngpDatePickerPreviousMonth][data-hover],\n    [ngpDatePickerNextMonth][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpDatePickerPreviousMonth][data-focus-visible],\n    [ngpDatePickerNextMonth][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    [ngpDatePickerPreviousMonth][data-press],\n    [ngpDatePickerNextMonth][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpDatePickerPreviousMonth][data-disabled],\n    [ngpDatePickerNextMonth][data-disabled] {\n      cursor: not-allowed;\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton] {\n      all: unset;\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      cursor: pointer;\n    }\n\n    [ngpDatePickerDateButton][data-today] {\n      color: var(--ngp-text-blue);\n    }\n\n    [ngpDatePickerDateButton][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpDatePickerDateButton][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpDatePickerDateButton][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpDatePickerDateButton][data-outside-month] {\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton][data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n    }\n\n    [ngpDatePickerDateButton][data-selected][data-outside-month] {\n      background-color: var(--ngp-background-disabled);\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton][data-disabled] {\n      cursor: not-allowed;\n      color: var(--ngp-text-disabled);\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class DatePicker implements ControlValueAccessor {\n  /** Access the date picker host directive */\n  private readonly state = injectDatePickerState<Date>();\n\n  /**\n   * Get the current focused date in string format.\n   * @returns The focused date in \"February 2024\" format.\n   */\n  readonly label = computed(\n    () =>\n      `${this.state().focusedDate().toLocaleString('default', { month: 'long' })} ${this.state().focusedDate().getFullYear()}`,\n  );\n\n  /**\n   * The onChange callback function for the date picker.\n   */\n  protected onChange?: ChangeFn<Date | undefined>;\n\n  /**\n   * The onTouched callback function for the date picker.\n   */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the date picker, call the onChange function with the new value.\n    this.state().dateChange.subscribe(date => this.onChange?.(date));\n  }\n\n  writeValue(date: Date): void {\n    // writing a value from the model must not re-emit through onChange\n    this.state().select(date, false, { emit: false });\n  }\n\n  registerOnChange(fn: ChangeFn<Date | undefined>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().disabled.set(isDisabled);\n  }\n}\n",
     "primitive": "date-picker",
     "hasVariants": false,
     "hasSizes": true
@@ -120,11 +120,18 @@
   },
   {
     "name": "pagination",
-    "code": "import { Component, computed } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n  heroChevronDoubleLeft,\n  heroChevronDoubleRight,\n  heroChevronLeft,\n  heroChevronRight,\n} from '@ng-icons/heroicons/outline';\nimport {\n  injectPaginationState,\n  NgpPagination,\n  NgpPaginationButton,\n  NgpPaginationFirst,\n  NgpPaginationLast,\n  NgpPaginationNext,\n  NgpPaginationPrevious,\n} from 'ng-primitives/pagination';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-pagination',\n  hostDirectives: [\n    {\n      directive: NgpPagination,\n      inputs: [\n        'ngpPaginationPage:page',\n        'ngpPaginationPageCount:pageCount',\n        'ngpPaginationDisabled:disabled',\n      ],\n      outputs: ['ngpPaginationPageChange:pageChange'],\n    },\n  ],\n  imports: [\n    NgpPaginationButton,\n    NgpPaginationFirst,\n    NgpPaginationLast,\n    NgpPaginationNext,\n    NgpPaginationPrevious,\n    NgIcon,\n  ],\n  providers: [\n    provideValueAccessor(NgpPagination),\n    provideIcons({\n      heroChevronDoubleLeft,\n      heroChevronDoubleRight,\n      heroChevronLeft,\n      heroChevronRight,\n    }),\n  ],\n  template: `\n    <ul>\n      <li>\n        <button ngpPaginationFirst aria-label=\"First Page\">\n          <ng-icon name=\"heroChevronDoubleLeft\" />\n        </button>\n      </li>\n\n      <li>\n        <button ngpPaginationPrevious aria-label=\"Previous Page\">\n          <ng-icon name=\"heroChevronLeft\" />\n        </button>\n      </li>\n\n      @for (page of pages(); track page) {\n        <li>\n          <button\n            [ngpPaginationButtonPage]=\"page\"\n            [attr.aria-label]=\"'Page ' + page\"\n            ngpPaginationButton\n          >\n            {{ page }}\n          </button>\n        </li>\n      }\n\n      <li>\n        <button ngpPaginationNext aria-label=\"Next Page\">\n          <ng-icon name=\"heroChevronRight\" />\n        </button>\n      </li>\n\n      <li>\n        <button ngpPaginationLast aria-label=\"Last Page\">\n          <ng-icon name=\"heroChevronDoubleRight\" />\n        </button>\n      </li>\n    </ul>\n  `,\n  styles: `\n    ul {\n      display: flex;\n      align-items: center;\n      column-gap: 0.5rem;\n      list-style: none;\n    }\n\n    [ngpPaginationFirst],\n    [ngpPaginationPrevious],\n    [ngpPaginationButton],\n    [ngpPaginationNext],\n    [ngpPaginationLast] {\n      all: unset;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 2rem;\n      height: 2rem;\n      border-radius: 0.5rem;\n      color: var(--ngp-text-primary);\n      outline: none;\n      font-size: 14px;\n      font-weight: 500;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-button-shadow);\n      cursor: pointer;\n      transition: background-color 0.2s;\n\n      &[data-hover]:not([data-disabled]):not([data-selected]) {\n        background-color: var(--ngp-background-hover);\n      }\n\n      &[data-focus-visible]:not([data-disabled]) {\n        outline: 2px solid var(--ngp-focus-ring);\n      }\n\n      &[data-press]:not([data-disabled]):not([data-selected]) {\n        background-color: var(--ngp-background-active);\n      }\n\n      &[data-disabled] {\n        color: rgb(210 210 210);\n        background-color: var(--ngp-background-disabled);\n        cursor: not-allowed;\n        box-shadow: none;\n      }\n\n      &[data-selected] {\n        background-color: var(--ngp-background-inverse);\n        color: var(--ngp-text-inverse);\n      }\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Pagination implements ControlValueAccessor {\n  /** Access the pagination state */\n  protected readonly state = injectPaginationState();\n\n  /** Get the pages as an array we can iterate over */\n  protected readonly pages = computed(() =>\n    Array.from({ length: this.state().pageCount() }).map((_, i) => i + 1),\n  );\n\n  /** The onChange callback */\n  private onChange?: ChangeFn<number>;\n\n  /** The onTouched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    this.state().pageChange.subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the control */\n  writeValue(value: number): void {\n    this.state().page.set(value);\n  }\n\n  /** Register a callback to be called when the value changes */\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  /** Register a callback to be called when the control is touched */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n}\n",
+    "code": "import { Component, computed } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n  heroChevronDoubleLeft,\n  heroChevronDoubleRight,\n  heroChevronLeft,\n  heroChevronRight,\n} from '@ng-icons/heroicons/outline';\nimport {\n  injectPaginationState,\n  NgpPagination,\n  NgpPaginationButton,\n  NgpPaginationFirst,\n  NgpPaginationLast,\n  NgpPaginationNext,\n  NgpPaginationPrevious,\n} from 'ng-primitives/pagination';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-pagination',\n  hostDirectives: [\n    {\n      directive: NgpPagination,\n      inputs: [\n        'ngpPaginationPage:page',\n        'ngpPaginationPageCount:pageCount',\n        'ngpPaginationDisabled:disabled',\n      ],\n      outputs: ['ngpPaginationPageChange:pageChange'],\n    },\n  ],\n  imports: [\n    NgpPaginationButton,\n    NgpPaginationFirst,\n    NgpPaginationLast,\n    NgpPaginationNext,\n    NgpPaginationPrevious,\n    NgIcon,\n  ],\n  providers: [\n    provideValueAccessor(NgpPagination),\n    provideIcons({\n      heroChevronDoubleLeft,\n      heroChevronDoubleRight,\n      heroChevronLeft,\n      heroChevronRight,\n    }),\n  ],\n  template: `\n    <ul>\n      <li>\n        <button ngpPaginationFirst aria-label=\"First Page\">\n          <ng-icon name=\"heroChevronDoubleLeft\" />\n        </button>\n      </li>\n\n      <li>\n        <button ngpPaginationPrevious aria-label=\"Previous Page\">\n          <ng-icon name=\"heroChevronLeft\" />\n        </button>\n      </li>\n\n      @for (page of pages(); track page) {\n        <li>\n          <button\n            [ngpPaginationButtonPage]=\"page\"\n            [attr.aria-label]=\"'Page ' + page\"\n            ngpPaginationButton\n          >\n            {{ page }}\n          </button>\n        </li>\n      }\n\n      <li>\n        <button ngpPaginationNext aria-label=\"Next Page\">\n          <ng-icon name=\"heroChevronRight\" />\n        </button>\n      </li>\n\n      <li>\n        <button ngpPaginationLast aria-label=\"Last Page\">\n          <ng-icon name=\"heroChevronDoubleRight\" />\n        </button>\n      </li>\n    </ul>\n  `,\n  styles: `\n    ul {\n      display: flex;\n      align-items: center;\n      column-gap: 0.5rem;\n      list-style: none;\n    }\n\n    [ngpPaginationFirst],\n    [ngpPaginationPrevious],\n    [ngpPaginationButton],\n    [ngpPaginationNext],\n    [ngpPaginationLast] {\n      all: unset;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 2rem;\n      height: 2rem;\n      border-radius: 0.5rem;\n      color: var(--ngp-text-primary);\n      outline: none;\n      font-size: 14px;\n      font-weight: 500;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-button-shadow);\n      cursor: pointer;\n      transition: background-color 0.2s;\n\n      &[data-hover]:not([data-disabled]):not([data-selected]) {\n        background-color: var(--ngp-background-hover);\n      }\n\n      &[data-focus-visible]:not([data-disabled]) {\n        outline: 2px solid var(--ngp-focus-ring);\n      }\n\n      &[data-press]:not([data-disabled]):not([data-selected]) {\n        background-color: var(--ngp-background-active);\n      }\n\n      &[data-disabled] {\n        color: rgb(210 210 210);\n        background-color: var(--ngp-background-disabled);\n        cursor: not-allowed;\n        box-shadow: none;\n      }\n\n      &[data-selected] {\n        background-color: var(--ngp-background-inverse);\n        color: var(--ngp-text-inverse);\n      }\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Pagination implements ControlValueAccessor {\n  /** Access the pagination state */\n  protected readonly state = injectPaginationState();\n\n  /** Get the pages as an array we can iterate over */\n  protected readonly pages = computed(() =>\n    Array.from({ length: this.state().pageCount() }).map((_, i) => i + 1),\n  );\n\n  /** The onChange callback */\n  private onChange?: ChangeFn<number>;\n\n  /** The onTouched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    this.state().pageChange.subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the control */\n  writeValue(value: number): void {\n    // writing a value from the model must not re-emit through onChange\n    this.state().setPage(value, { emit: false });\n  }\n\n  /** Register a callback to be called when the value changes */\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  /** Register a callback to be called when the control is touched */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  /** Reflect the form control's disabled state onto the pagination. */\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
     "primitive": "pagination",
     "hasVariants": false,
     "hasSizes": true
   },
+  {
+    "name": "password",
+    "code": "import { Component, input, signal } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEye, lucideEyeOff } from '@ng-icons/lucide';\nimport { NgpButton } from 'ng-primitives/button';\nimport {\n  injectPasswordState,\n  NgpPassword,\n  NgpPasswordInput,\n  NgpPasswordToggle,\n} from 'ng-primitives/password';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-password',\n  hostDirectives: [NgpPassword],\n  imports: [NgIcon, NgpPasswordInput, NgpPasswordToggle, NgpButton],\n  providers: [provideValueAccessor(Password), provideIcons({ lucideEye, lucideEyeOff })],\n  template: `\n    <input\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      (input)=\"onValueChange($event)\"\n      ngpPasswordInput\n      type=\"password\"\n      autocomplete=\"current-password\"\n    />\n    <button ngpButton ngpPasswordToggle>\n      <ng-icon [name]=\"state().visible() ? 'lucideEyeOff' : 'lucideEye'\" />\n    </button>\n  `,\n  styles: `\n    :host {\n      display: block;\n      position: relative;\n    }\n\n    [ngpPasswordInput] {\n      height: 2.125rem;\n      width: 100%;\n      border-radius: 0.5rem;\n      padding: 0 40px 0 12px;\n      border: none;\n      background: var(--ngp-background);\n      color: var(--ngp-text-primary);\n      font-size: 0.875rem;\n      letter-spacing: -0.006em;\n      box-shadow: var(--ngp-input-shadow);\n      outline: none;\n    }\n\n    [ngpPasswordInput][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpPasswordInput]::placeholder {\n      color: var(--ngp-text-placeholder);\n    }\n\n    [ngpPasswordToggle] {\n      position: absolute;\n      top: 0;\n      right: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2.125rem;\n      width: 2.125rem;\n      border: none;\n      border-radius: 0.5rem;\n      background-color: transparent;\n      color: var(--ngp-text-tertiary);\n      font-size: 1.125rem;\n      cursor: pointer;\n      outline: none;\n      transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    [ngpPasswordToggle][data-hover] {\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpPasswordToggle][data-visible] {\n      color: var(--ngp-primary);\n    }\n\n    [ngpPasswordToggle][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: -2px;\n    }\n  `,\n  host: {\n    '(focusout)': 'onFocusOut($event)',\n  },\n})\nexport class Password implements ControlValueAccessor {\n  /** Access the password state to read the visibility. */\n  protected readonly state = injectPasswordState();\n\n  /** The placeholder text */\n  readonly placeholder = input<string>('');\n\n  /** The current value */\n  protected value = signal<string>('');\n\n  /** The function to call when the value changes */\n  private onChange?: ChangeFn<string>;\n\n  /** The function to call when the control is touched */\n  protected onTouched?: TouchedFn;\n\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  protected onValueChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.value.set(input.value);\n    this.onChange?.(input.value);\n  }\n\n  protected onFocusOut(event: FocusEvent): void {\n    // only mark as touched when focus leaves the component, not when moving\n    // between the input and the toggle button\n    const host = event.currentTarget as HTMLElement;\n    if (!host.contains(event.relatedTarget as Node | null)) {\n      this.onTouched?.();\n    }\n  }\n}\n",
+    "primitive": "password",
+    "hasVariants": false,
+    "hasSizes": true
+  },
   {
     "name": "popover",
     "code": "import { Directive, input } from '@angular/core';\nimport { injectPopoverTriggerState } from 'ng-primitives/popover';\nimport { NgpPopoverTrigger } from 'ng-primitives/popover';\nimport { Popover } from './popover';\n\n@Directive({\n  selector: '[appPopoverTrigger]',\n  hostDirectives: [\n    {\n      directive: NgpPopoverTrigger,\n      inputs: [\n        'ngpPopoverTriggerDisabled:appPopoverTriggerDisabled',\n        'ngpPopoverTriggerPlacement:appPopoverTriggerPlacement',\n        'ngpPopoverTriggerOffset:appPopoverTriggerOffset',\n        'ngpPopoverTriggerShowDelay:appPopoverTriggerShowDelay',\n        'ngpPopoverTriggerHideDelay:appPopoverTriggerHideDelay',\n        'ngpPopoverTriggerFlip:appPopoverTriggerFlip',\n        'ngpPopoverTriggerContainer:appPopoverTriggerContainer',\n        'ngpPopoverTriggerCloseOnOutsideClick:appPopoverTriggerCloseOnOutsideClick',\n        'ngpPopoverTriggerCloseOnEscape:appPopoverTriggerCloseOnEscape',\n        'ngpPopoverTriggerScrollBehavior:appPopoverTriggerScrollBehavior',\n        'ngpPopoverTriggerContext:appPopoverTrigger',\n      ],\n    },\n  ],\n})\nexport class PopoverTrigger {\n  /** Access the popover trigger */\n  private readonly popoverTrigger = injectPopoverTriggerState();\n\n  /** Define the content of the popover */\n  readonly content = input.required<string>({\n    alias: 'appPopoverTrigger',\n  });\n\n  constructor() {\n    this.popoverTrigger().popover.set(Popover);\n  }\n}\n",
@@ -148,7 +155,7 @@
   },
   {
     "name": "range-slider",
-    "code": "import { Component, input } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport {\n  injectRangeSliderState,\n  NgpRangeSlider,\n  NgpRangeSliderRange,\n  NgpRangeSliderThumb,\n  NgpRangeSliderTrack,\n  provideRangeSliderState,\n} from 'ng-primitives/slider';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\nimport { merge } from 'rxjs';\n\n@Component({\n  selector: 'app-range-slider',\n  hostDirectives: [\n    {\n      directive: NgpRangeSlider,\n      inputs: [\n        'ngpRangeSliderLow:low',\n        'ngpRangeSliderHigh:high',\n        'ngpRangeSliderMin:min',\n        'ngpRangeSliderMax:max',\n        'ngpRangeSliderStep:step',\n        'ngpRangeSliderDisabled:disabled',\n        'ngpRangeSliderOrientation:orientation',\n      ],\n      outputs: ['ngpRangeSliderLowChange:lowChange', 'ngpRangeSliderHighChange:highChange'],\n    },\n  ],\n  imports: [NgpRangeSliderTrack, NgpRangeSliderRange, NgpRangeSliderThumb],\n  providers: [provideRangeSliderState(), provideValueAccessor(RangeSlider)],\n  template: `\n    <div ngpRangeSliderTrack>\n      <div ngpRangeSliderRange></div>\n    </div>\n    <div ngpRangeSliderThumb></div>\n    <div ngpRangeSliderThumb></div>\n  `,\n  styles: `\n    :host {\n      display: flex;\n      position: relative;\n      width: 200px;\n      height: 20px;\n      touch-action: none;\n      user-select: none;\n      align-items: center;\n    }\n\n    [ngpRangeSliderTrack] {\n      position: relative;\n      height: 5px;\n      width: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-secondary);\n    }\n\n    [ngpRangeSliderRange] {\n      position: absolute;\n      height: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-inverse);\n    }\n\n    [ngpRangeSliderThumb] {\n      position: absolute;\n      display: block;\n      height: 20px;\n      width: 20px;\n      border-radius: 10px;\n      background-color: white;\n      box-shadow: var(--ngp-button-shadow);\n      outline: none;\n      transform: translateX(-50%);\n    }\n\n    [ngpRangeSliderThumb][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 0;\n    }\n\n    [ngpRangeSliderThumb][data-thumb='high'] {\n      z-index: 2;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class RangeSlider implements ControlValueAccessor {\n  /** Access the range slider state */\n  private readonly state = injectRangeSliderState();\n\n  /** Forward aria-labels to each thumb */\n  readonly ariaLabelLow = input<string | null>(null);\n  readonly ariaLabelHigh = input<string | null>(null);\n\n  /** The onChange callback function. */\n  private onChange?: ChangeFn<[number, number]>;\n\n  /** The onTouched callback function. */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever either value changes, call the onChange function with the new tuple [low, high].\n    merge(this.state().lowChange, this.state().highChange)\n      .pipe(takeUntilDestroyed())\n      .subscribe(() => this.onChange?.([this.state().low(), this.state().high()]));\n  }\n\n  writeValue(value: [number, number]): void {\n    if (!value || value.length !== 2) {\n      return;\n    }\n\n    const [low, high] = value;\n    // Use the directive's clamping setters to respect min/max and ordering\n    this.state().setLowValue(low);\n    this.state().setHighValue(high);\n  }\n\n  registerOnChange(fn: ChangeFn<[number, number]>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
+    "code": "import { Component, input } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport {\n  injectRangeSliderState,\n  NgpRangeSlider,\n  NgpRangeSliderRange,\n  NgpRangeSliderThumb,\n  NgpRangeSliderTrack,\n  provideRangeSliderState,\n} from 'ng-primitives/slider';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\nimport { merge } from 'rxjs';\n\n@Component({\n  selector: 'app-range-slider',\n  hostDirectives: [\n    {\n      directive: NgpRangeSlider,\n      inputs: [\n        'ngpRangeSliderLow:low',\n        'ngpRangeSliderHigh:high',\n        'ngpRangeSliderMin:min',\n        'ngpRangeSliderMax:max',\n        'ngpRangeSliderStep:step',\n        'ngpRangeSliderDisabled:disabled',\n        'ngpRangeSliderOrientation:orientation',\n      ],\n      outputs: ['ngpRangeSliderLowChange:lowChange', 'ngpRangeSliderHighChange:highChange'],\n    },\n  ],\n  imports: [NgpRangeSliderTrack, NgpRangeSliderRange, NgpRangeSliderThumb],\n  providers: [provideRangeSliderState(), provideValueAccessor(RangeSlider)],\n  template: `\n    <div ngpRangeSliderTrack>\n      <div ngpRangeSliderRange></div>\n    </div>\n    <div ngpRangeSliderThumb></div>\n    <div ngpRangeSliderThumb></div>\n  `,\n  styles: `\n    :host {\n      display: flex;\n      position: relative;\n      width: 200px;\n      height: 20px;\n      touch-action: none;\n      user-select: none;\n      align-items: center;\n    }\n\n    [ngpRangeSliderTrack] {\n      position: relative;\n      height: 5px;\n      width: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-secondary);\n    }\n\n    [ngpRangeSliderRange] {\n      position: absolute;\n      height: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-inverse);\n    }\n\n    [ngpRangeSliderThumb] {\n      position: absolute;\n      display: block;\n      height: 20px;\n      width: 20px;\n      border-radius: 10px;\n      background-color: white;\n      box-shadow: var(--ngp-button-shadow);\n      outline: none;\n      transform: translateX(-50%);\n    }\n\n    [ngpRangeSliderThumb][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 0;\n    }\n\n    [ngpRangeSliderThumb][data-thumb='high'] {\n      z-index: 2;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class RangeSlider implements ControlValueAccessor {\n  /** Access the range slider state */\n  private readonly state = injectRangeSliderState();\n\n  /** Forward aria-labels to each thumb */\n  readonly ariaLabelLow = input<string | null>(null);\n  readonly ariaLabelHigh = input<string | null>(null);\n\n  /** The onChange callback function. */\n  private onChange?: ChangeFn<[number, number]>;\n\n  /** The onTouched callback function. */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever either value changes, call the onChange function with the new tuple [low, high].\n    merge(this.state().lowChange, this.state().highChange)\n      .pipe(takeUntilDestroyed())\n      .subscribe(() => this.onChange?.([this.state().low(), this.state().high()]));\n  }\n\n  writeValue(value: [number, number]): void {\n    if (!value || value.length !== 2) {\n      return;\n    }\n\n    const [low, high] = value;\n    // Use the directive's clamping setters to respect min/max and ordering.\n    // writing a value from the model must not re-emit through onChange\n    this.state().setLowValue(low, { emit: false });\n    this.state().setHighValue(high, { emit: false });\n  }\n\n  registerOnChange(fn: ChangeFn<[number, number]>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
     "primitive": "range-slider",
     "hasVariants": false,
     "hasSizes": false
@@ -176,14 +183,14 @@
   },
   {
     "name": "slider",
-    "code": "import { Component, input } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport {\n  injectSliderState,\n  NgpSlider,\n  NgpSliderRange,\n  NgpSliderThumb,\n  NgpSliderTrack,\n} from 'ng-primitives/slider';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-slider',\n  hostDirectives: [\n    {\n      directive: NgpSlider,\n      inputs: [\n        'ngpSliderValue:value',\n        'ngpSliderMin:min',\n        'ngpSliderMax:max',\n        'ngpSliderDisabled:disabled',\n      ],\n      outputs: ['ngpSliderValueChange:valueChange'],\n    },\n  ],\n  imports: [NgpSliderTrack, NgpSliderRange, NgpSliderThumb],\n  providers: [provideValueAccessor(Slider)],\n  template: `\n    <div ngpSliderTrack>\n      <div ngpSliderRange></div>\n    </div>\n    <div [ariaLabel]=\"ariaLabel()\" ngpSliderThumb></div>\n  `,\n  styles: `\n    :host {\n      display: flex;\n      position: relative;\n      width: 200px;\n      height: 20px;\n      touch-action: none;\n      user-select: none;\n      align-items: center;\n    }\n\n    [ngpSliderTrack] {\n      position: relative;\n      height: 5px;\n      width: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-secondary);\n    }\n\n    [ngpSliderRange] {\n      position: absolute;\n      height: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-inverse);\n    }\n\n    [ngpSliderThumb] {\n      position: absolute;\n      display: block;\n      height: 20px;\n      width: 20px;\n      border-radius: 10px;\n      background-color: white;\n      box-shadow: var(--ngp-button-shadow);\n      outline: none;\n      transform: translateX(-50%);\n    }\n\n    [ngpSliderThumb][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 0;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Slider implements ControlValueAccessor {\n  /** Access the slider state */\n  private readonly state = injectSliderState();\n\n  /** Forward the aria-label to the thumb */\n  readonly ariaLabel = input<string | null>(null, {\n    alias: 'aria-label',\n  });\n\n  /**\n   * The onChange callback function.\n   */\n  private onChange?: ChangeFn<number>;\n\n  /**\n   * The onTouched callback function.\n   */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the slider, call the onChange function with the new value.\n    this.state()\n      .valueChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  writeValue(value: number): void {\n    this.state().setValue(value);\n  }\n\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
+    "code": "import { Component, input } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport {\n  injectSliderState,\n  NgpSlider,\n  NgpSliderRange,\n  NgpSliderThumb,\n  NgpSliderTrack,\n} from 'ng-primitives/slider';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-slider',\n  hostDirectives: [\n    {\n      directive: NgpSlider,\n      inputs: [\n        'ngpSliderValue:value',\n        'ngpSliderMin:min',\n        'ngpSliderMax:max',\n        'ngpSliderDisabled:disabled',\n      ],\n      outputs: ['ngpSliderValueChange:valueChange'],\n    },\n  ],\n  imports: [NgpSliderTrack, NgpSliderRange, NgpSliderThumb],\n  providers: [provideValueAccessor(Slider)],\n  template: `\n    <div ngpSliderTrack>\n      <div ngpSliderRange></div>\n    </div>\n    <div [ariaLabel]=\"ariaLabel()\" ngpSliderThumb></div>\n  `,\n  styles: `\n    :host {\n      display: flex;\n      position: relative;\n      width: 200px;\n      height: 20px;\n      touch-action: none;\n      user-select: none;\n      align-items: center;\n    }\n\n    [ngpSliderTrack] {\n      position: relative;\n      height: 5px;\n      width: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-secondary);\n    }\n\n    [ngpSliderRange] {\n      position: absolute;\n      height: 100%;\n      border-radius: 999px;\n      background-color: var(--ngp-background-inverse);\n    }\n\n    [ngpSliderThumb] {\n      position: absolute;\n      display: block;\n      height: 20px;\n      width: 20px;\n      border-radius: 10px;\n      background-color: white;\n      box-shadow: var(--ngp-button-shadow);\n      outline: none;\n      transform: translateX(-50%);\n    }\n\n    [ngpSliderThumb][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 0;\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Slider implements ControlValueAccessor {\n  /** Access the slider state */\n  private readonly state = injectSliderState();\n\n  /** Forward the aria-label to the thumb */\n  readonly ariaLabel = input<string | null>(null, {\n    alias: 'aria-label',\n  });\n\n  /**\n   * The onChange callback function.\n   */\n  private onChange?: ChangeFn<number>;\n\n  /**\n   * The onTouched callback function.\n   */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the slider, call the onChange function with the new value.\n    this.state()\n      .valueChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  writeValue(value: number): void {\n    // writing a value from the model must not re-emit through onChange\n    this.state().setValue(value, { emit: false });\n  }\n\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
     "primitive": "slider",
     "hasVariants": false,
     "hasSizes": false
   },
   {
     "name": "switch",
-    "code": "import { Component } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { injectSwitchState, NgpSwitch, NgpSwitchThumb } from 'ng-primitives/switch';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-switch',\n  hostDirectives: [\n    {\n      directive: NgpSwitch,\n      inputs: ['ngpSwitchChecked:checked', 'ngpSwitchDisabled:disabled'],\n      outputs: ['ngpSwitchCheckedChange:checkedChange'],\n    },\n  ],\n  imports: [NgpSwitchThumb],\n  template: `\n    <span ngpSwitchThumb></span>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      align-items: center;\n      position: relative;\n      width: 2.5rem;\n      height: 1.5rem;\n      border-radius: 999px;\n      background-color: var(--ngp-background-secondary);\n      border: 1px solid var(--ngp-border);\n      padding: 0;\n      outline: none;\n      transition-property:\n        color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n      box-sizing: border-box;\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    :host[data-checked] {\n      background-color: var(--ngp-background-blue);\n      border-color: var(--ngp-border-blue);\n    }\n\n    [ngpSwitchThumb] {\n      display: block;\n      height: 1.25rem;\n      width: 1.25rem;\n      border-radius: 999px;\n      background-color: white;\n      box-shadow: var(--ngp-button-shadow);\n      outline: none;\n      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n      transform: translateX(1px);\n      box-sizing: border-box;\n    }\n\n    [ngpSwitchThumb][data-checked] {\n      transform: translateX(17px);\n    }\n  `,\n  providers: [provideValueAccessor(Switch)],\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Switch implements ControlValueAccessor {\n  /** Access the switch state. */\n  private readonly switch = injectSwitchState();\n\n  /** The on change callback */\n  private onChange?: ChangeFn<boolean>;\n\n  /** The on touched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Any time the switch changes, update the form value.\n    this.switch()\n      .checkedChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the switch. */\n  writeValue(value: boolean): void {\n    this.switch().setChecked(value);\n  }\n\n  /** Register a callback function to be called when the value changes. */\n  registerOnChange(fn: ChangeFn<boolean>): void {\n    this.onChange = fn;\n  }\n\n  /** Register a callback function to be called when the switch is touched. */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  /** Set the disabled state of the switch. */\n  setDisabledState(isDisabled: boolean): void {\n    this.switch().setDisabled(isDisabled);\n  }\n}\n",
+    "code": "import { Component } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { injectSwitchState, NgpSwitch, NgpSwitchThumb } from 'ng-primitives/switch';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-switch',\n  hostDirectives: [\n    {\n      directive: NgpSwitch,\n      inputs: ['ngpSwitchChecked:checked', 'ngpSwitchDisabled:disabled'],\n      outputs: ['ngpSwitchCheckedChange:checkedChange'],\n    },\n  ],\n  imports: [NgpSwitchThumb],\n  template: `\n    <span ngpSwitchThumb></span>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      align-items: center;\n      position: relative;\n      width: 2.5rem;\n      height: 1.5rem;\n      border-radius: 999px;\n      background-color: var(--ngp-background-secondary);\n      border: 1px solid var(--ngp-border);\n      padding: 0;\n      outline: none;\n      transition-property:\n        color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n      box-sizing: border-box;\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    :host[data-checked] {\n      background-color: var(--ngp-background-blue);\n      border-color: var(--ngp-border-blue);\n    }\n\n    [ngpSwitchThumb] {\n      display: block;\n      height: 1.25rem;\n      width: 1.25rem;\n      border-radius: 999px;\n      background-color: white;\n      box-shadow: var(--ngp-button-shadow);\n      outline: none;\n      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n      transform: translateX(1px);\n      box-sizing: border-box;\n    }\n\n    [ngpSwitchThumb][data-checked] {\n      transform: translateX(17px);\n    }\n  `,\n  providers: [provideValueAccessor(Switch)],\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Switch implements ControlValueAccessor {\n  /** Access the switch state. */\n  private readonly switch = injectSwitchState();\n\n  /** The on change callback */\n  private onChange?: ChangeFn<boolean>;\n\n  /** The on touched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Any time the switch changes, update the form value.\n    this.switch()\n      .checkedChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the switch. */\n  writeValue(value: boolean): void {\n    // writing a value from the model must not re-emit through onChange\n    this.switch().setChecked(value, { emit: false });\n  }\n\n  /** Register a callback function to be called when the value changes. */\n  registerOnChange(fn: ChangeFn<boolean>): void {\n    this.onChange = fn;\n  }\n\n  /** Register a callback function to be called when the switch is touched. */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  /** Set the disabled state of the switch. */\n  setDisabledState(isDisabled: boolean): void {\n    this.switch().setDisabled(isDisabled);\n  }\n}\n",
     "primitive": "switch",
     "hasVariants": false,
     "hasSizes": false