@ng-primitives/mcp 0.104.0 → 0.105.1

package/package.json

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

package/src/generated/primitives-data.json

@@ -311,7 +311,7 @@
       }
     ],
     "reusableComponent": {
-      "code": "import { Component } from '@angular/core';\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().checkedChange.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    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",
       "hasVariants": false,
       "hasSizes": true
     }
@@ -1295,7 +1295,7 @@
       }
     ],
     "reusableComponent": {
-      "code": "import { Component } from '@angular/core';\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().checkedChange.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    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",
       "hasVariants": false,
       "hasSizes": false
     }
@@ -1461,7 +1461,7 @@
       }
     ],
     "reusableComponent": {
-      "code": "import { Component } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgpButton } from 'ng-primitives/button';\nimport { injectToggleState, NgpToggle } from 'ng-primitives/toggle';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'button[app-toggle]',\n  hostDirectives: [\n    {\n      directive: NgpToggle,\n      inputs: ['ngpToggleSelected:selected', 'ngpToggleDisabled:disabled'],\n      outputs: ['ngpToggleSelectedChange:selectedChange'],\n    },\n    { directive: NgpButton, inputs: ['disabled'] },\n  ],\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      padding-left: 1rem;\n      padding-right: 1rem;\n      border-radius: 0.5rem;\n      color: var(--ngp-text-primary);\n      border: none;\n      outline: none;\n      height: 2.5rem;\n      font-weight: 500;\n      background-color: var(--ngp-background);\n      transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: var(--ngp-button-shadow);\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    :host[data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n    }\n  `,\n  providers: [provideValueAccessor(Toggle)],\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Toggle implements ControlValueAccessor {\n  /** Access the toggle state. */\n  private readonly toggle = injectToggleState();\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 toggle changes, update the form value.\n    this.toggle().selectedChange.subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the toggle. */\n  writeValue(value: boolean): void {\n    this.toggle().setSelected(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 toggle is touched. */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  /** Set the disabled state of the toggle. */\n  setDisabledState(isDisabled: boolean): void {\n    this.toggle().setDisabled(isDisabled);\n  }\n}\n",
+      "code": "import { Component } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgpButton } from 'ng-primitives/button';\nimport { injectToggleState, NgpToggle } from 'ng-primitives/toggle';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'button[app-toggle]',\n  hostDirectives: [\n    {\n      directive: NgpToggle,\n      inputs: ['ngpToggleSelected:selected', 'ngpToggleDisabled:disabled'],\n      outputs: ['ngpToggleSelectedChange:selectedChange'],\n    },\n    { directive: NgpButton, inputs: ['disabled'] },\n  ],\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      padding-left: 1rem;\n      padding-right: 1rem;\n      border-radius: 0.5rem;\n      color: var(--ngp-text-primary);\n      border: none;\n      outline: none;\n      height: 2.5rem;\n      font-weight: 500;\n      background-color: var(--ngp-background);\n      transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: var(--ngp-button-shadow);\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    :host[data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n    }\n  `,\n  providers: [provideValueAccessor(Toggle)],\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Toggle implements ControlValueAccessor {\n  /** Access the toggle state. */\n  private readonly toggle = injectToggleState();\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 toggle changes, update the form value.\n    this.toggle()\n      .selectedChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the toggle. */\n  writeValue(value: boolean): void {\n    this.toggle().setSelected(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 toggle is touched. */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  /** Set the disabled state of the toggle. */\n  setDisabledState(isDisabled: boolean): void {\n    this.toggle().setDisabled(isDisabled);\n  }\n}\n",
       "hasVariants": false,
       "hasSizes": false
     }

package/src/generated/reusable-components.json

@@ -22,7 +22,7 @@
   },
   {
     "name": "checkbox",
-    "code": "import { Component } from '@angular/core';\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().checkedChange.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    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",
     "primitive": "checkbox",
     "hasVariants": false,
     "hasSizes": true
@@ -169,7 +169,7 @@
   },
   {
     "name": "switch",
-    "code": "import { Component } from '@angular/core';\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().checkedChange.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    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",
     "primitive": "switch",
     "hasVariants": false,
     "hasSizes": false
@@ -197,7 +197,7 @@
   },
   {
     "name": "toggle",
-    "code": "import { Component } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgpButton } from 'ng-primitives/button';\nimport { injectToggleState, NgpToggle } from 'ng-primitives/toggle';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'button[app-toggle]',\n  hostDirectives: [\n    {\n      directive: NgpToggle,\n      inputs: ['ngpToggleSelected:selected', 'ngpToggleDisabled:disabled'],\n      outputs: ['ngpToggleSelectedChange:selectedChange'],\n    },\n    { directive: NgpButton, inputs: ['disabled'] },\n  ],\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      padding-left: 1rem;\n      padding-right: 1rem;\n      border-radius: 0.5rem;\n      color: var(--ngp-text-primary);\n      border: none;\n      outline: none;\n      height: 2.5rem;\n      font-weight: 500;\n      background-color: var(--ngp-background);\n      transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: var(--ngp-button-shadow);\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    :host[data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n    }\n  `,\n  providers: [provideValueAccessor(Toggle)],\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Toggle implements ControlValueAccessor {\n  /** Access the toggle state. */\n  private readonly toggle = injectToggleState();\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 toggle changes, update the form value.\n    this.toggle().selectedChange.subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the toggle. */\n  writeValue(value: boolean): void {\n    this.toggle().setSelected(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 toggle is touched. */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  /** Set the disabled state of the toggle. */\n  setDisabledState(isDisabled: boolean): void {\n    this.toggle().setDisabled(isDisabled);\n  }\n}\n",
+    "code": "import { Component } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgpButton } from 'ng-primitives/button';\nimport { injectToggleState, NgpToggle } from 'ng-primitives/toggle';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'button[app-toggle]',\n  hostDirectives: [\n    {\n      directive: NgpToggle,\n      inputs: ['ngpToggleSelected:selected', 'ngpToggleDisabled:disabled'],\n      outputs: ['ngpToggleSelectedChange:selectedChange'],\n    },\n    { directive: NgpButton, inputs: ['disabled'] },\n  ],\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      padding-left: 1rem;\n      padding-right: 1rem;\n      border-radius: 0.5rem;\n      color: var(--ngp-text-primary);\n      border: none;\n      outline: none;\n      height: 2.5rem;\n      font-weight: 500;\n      background-color: var(--ngp-background);\n      transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: var(--ngp-button-shadow);\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    :host[data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n    }\n  `,\n  providers: [provideValueAccessor(Toggle)],\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Toggle implements ControlValueAccessor {\n  /** Access the toggle state. */\n  private readonly toggle = injectToggleState();\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 toggle changes, update the form value.\n    this.toggle()\n      .selectedChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the toggle. */\n  writeValue(value: boolean): void {\n    this.toggle().setSelected(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 toggle is touched. */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  /** Set the disabled state of the toggle. */\n  setDisabledState(isDisabled: boolean): void {\n    this.toggle().setDisabled(isDisabled);\n  }\n}\n",
     "primitive": "toggle",
     "hasVariants": false,
     "hasSizes": false