@ng-primitives/mcp 0.124.0 → 0.125.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-primitives/mcp",
-  "version": "0.124.0",
+  "version": "0.125.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": "''"
       },
@@ -3222,133 +3222,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 +3381,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 +3476,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 +3567,7 @@
     "inputs": [
       {
         "name": "ngpToggleGroupItemValue",
-        "type": "string | undefined",
+        "type": "T | undefined",
         "description": "The value of the item.",
         "isRequired": true
       },
@@ -3605,17 +3619,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 +3647,7 @@
     "outputs": [
       {
         "name": "ngpToggleGroupValueChange",
-        "type": "string[]",
+        "type": "T[]",
         "description": "Emits when the value of the toggle group changes."
       }
     ]

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,7 @@
       }
     ],
     "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
     }
@@ -1580,7 +1590,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 +1636,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,7 +120,7 @@
   },
   {
     "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
@@ -148,7 +148,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 +176,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