@ng-primitives/mcp 0.117.2 → 0.118.0

package/package.json

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

package/src/generated/api-data.json

@@ -384,8 +384,14 @@
     "inputs": [
       {
         "name": "ngpCheckboxChecked",
-        "type": "boolean",
+        "type": "boolean | undefined",
         "description": "Defines whether the checkbox is checked.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpCheckboxDefaultChecked",
+        "type": "boolean",
+        "description": "The default checked state for uncontrolled usage.",
         "isRequired": false,
         "defaultValue": "false"
       },
@@ -562,6 +568,13 @@
         "isRequired": false,
         "defaultValue": "true"
       },
+      {
+        "name": "ngpComboboxDropdownOffset",
+        "type": "NgpOffset",
+        "description": "Define the offset of the combobox dropdown relative to the trigger.\nCan be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.",
+        "isRequired": false,
+        "defaultValue": "0"
+      },
       {
         "name": "ngpComboboxScrollToOption",
         "type": "((index: number) => void) | undefined",
@@ -3068,6 +3081,13 @@
         "isRequired": false,
         "defaultValue": "true"
       },
+      {
+        "name": "ngpSelectDropdownOffset",
+        "type": "NgpOffset",
+        "description": "Define the offset of the select dropdown relative to the trigger.\nCan be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.",
+        "isRequired": false,
+        "defaultValue": "0"
+      },
       {
         "name": "ngpSelectScrollToOption",
         "type": "((index: number) => void) | undefined",
@@ -3832,6 +3852,12 @@
         "type": "NgpFlip",
         "description": "Whether the combobox dropdown should flip when there is not enough space. Can be a boolean to enable/disable, or an object with padding and fallbackPlacements options.",
         "default": "true"
+      },
+      {
+        "name": "offset",
+        "type": "NgpOffset",
+        "description": "Define the offset of the combobox dropdown relative to the trigger. Can be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.",
+        "default": "0"
       }
     ]
   },
@@ -4350,6 +4376,12 @@
         "type": "NgpFlip",
         "description": "Whether the select dropdown should flip when there is not enough space. Can be a boolean to enable/disable, or an object with padding and fallbackPlacements options.",
         "default": "true"
+      },
+      {
+        "name": "offset",
+        "type": "NgpOffset",
+        "description": "Define the offset of the select dropdown relative to the trigger. Can be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.",
+        "default": "0"
       }
     ]
   },

package/src/generated/primitives-data.json

@@ -358,12 +358,17 @@
       },
       {
         "name": "example-3",
+        "code": "<!-- Simple number offset -->\n<div ngpCombobox [ngpComboboxDropdownOffset]=\"12\">Dropdown with 12px offset</div>\n\n<!-- Object offset for precise control -->\n<div ngpCombobox [ngpComboboxDropdownOffset]=\"{mainAxis: 8, crossAxis: 4, alignmentAxis: 2}\">\n  Dropdown with custom offset\n</div>",
+        "description": "Custom Offset"
+      },
+      {
+        "name": "example-4",
         "code": "<div ngpComboboxOptionValue=\"all\" ngpComboboxOption>Select All</div>",
         "description": "Select All Functionality"
       },
       {
-        "name": "example-4",
-        "code": "import { provideComboboxConfig } from 'ng-primitives/combobox';\n\nbootstrapApplication(AppComponent, {\n  providers: [provideComboboxConfig({ placement: 'bottom', container: document.body, flip: true })],\n});",
+        "name": "example-5",
+        "code": "import { provideComboboxConfig } from 'ng-primitives/combobox';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideComboboxConfig({\n      placement: 'bottom',\n      container: document.body,\n      flip: true,\n      offset: 4,\n    }),\n  ],\n});",
         "description": "Global Configuration"
       }
     ],
@@ -712,7 +717,7 @@
       }
     ],
     "reusableComponent": {
-      "code": "import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n  booleanAttribute,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  numberAttribute,\n  signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot } from 'ng-primitives/input-otp';\nimport { ChangeFn, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-input-otp',\n  imports: [NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => InputOtp),\n      multi: true,\n    },\n  ],\n  template: `\n    <div\n      [ngpInputOtpValue]=\"value()\"\n      [ngpInputOtpDisabled]=\"disabled() || formDisabled()\"\n      [ngpInputOtpPattern]=\"pattern()\"\n      [ngpInputOtpPlaceholder]=\"placeholder()\"\n      [ngpInputOtpInputMode]=\"inputMode()\"\n      (ngpInputOtpValueChange)=\"onValueChange($event)\"\n      (ngpInputOtpComplete)=\"onComplete()\"\n      ngpInputOtp\n    >\n      <input ngpInputOtpInput />\n      <div class=\"slots\">\n        @for (_ of slots(); track $index) {\n          <div class=\"slot\" ngpInputOtpSlot></div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      flex-direction: column;\n      gap: 12px;\n      max-width: 100%;\n    }\n\n    .slots {\n      display: flex;\n      gap: 8px;\n    }\n\n    .slot {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 48px;\n      height: 48px;\n      border: 2px solid var(--ngp-border);\n      border-radius: 8px;\n      background: var(--ngp-background);\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--ngp-text-primary);\n      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n      cursor: pointer;\n      position: relative;\n    }\n\n    .slot[data-filled] {\n      border-color: var(--ngp-border-strong);\n      background: var(--ngp-background-accent);\n    }\n\n    .slot[data-active] {\n      border-color: var(--ngp-focus-ring);\n      box-shadow: 0 0 0 1px var(--ngp-focus-ring);\n    }\n\n    .slot[data-placeholder] {\n      color: var(--ngp-text-placeholder);\n    }\n\n    .slot[data-caret]::after {\n      content: '';\n      position: absolute;\n      width: 2px;\n      height: 20px;\n      background: var(--ngp-focus-ring);\n      animation: blink 1s infinite;\n    }\n\n    @keyframes blink {\n      0%,\n      50% {\n        opacity: 1;\n      }\n      51%,\n      100% {\n        opacity: 0;\n      }\n    }\n\n    :host([data-disabled]) .slot {\n      background: var(--ngp-background-disabled);\n      color: var(--ngp-text-disabled);\n      border-color: var(--ngp-border-disabled);\n      cursor: not-allowed;\n    }\n  `,\n})\nexport class InputOtp implements ControlValueAccessor {\n  /**\n   * The number of slots to display.\n   */\n  readonly length = input<number, NumberInput>(6, {\n    transform: numberAttribute,\n  });\n\n  /**\n   * Whether the input is disabled.\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The pattern for allowed characters.\n   */\n  readonly pattern = input('[0-9]');\n\n  /**\n   * The placeholder character for empty slots.\n   */\n  readonly placeholder = input('');\n\n  /**\n   * The input mode for the hidden input.\n   */\n  readonly inputMode = input<'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url'>(\n    'numeric',\n  );\n\n  /**\n   * Create an array for tracking slots.\n   */\n  protected readonly slots = computed(() => Array.from({ length: this.length() }, (_, i) => i));\n\n  /**\n   * The current value.\n   */\n  readonly value = model<string>('');\n\n  private onChange: ChangeFn<string> = () => {};\n  private onTouched: TouchedFn = () => {};\n\n  protected readonly formDisabled = signal(false);\n\n  /**\n   * Handle value changes from the input-otp directive.\n   */\n  onValueChange(value: string): void {\n    this.value.set(value);\n    this.onChange(value);\n  }\n\n  /**\n   * Handle completion events from the input-otp directive.\n   */\n  onComplete(): void {\n    this.onTouched();\n  }\n\n  // ControlValueAccessor implementation\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n",
+      "code": "import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n  booleanAttribute,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  numberAttribute,\n  signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot } from 'ng-primitives/input-otp';\nimport { ChangeFn, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-input-otp',\n  imports: [NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => InputOtp),\n      multi: true,\n    },\n  ],\n  template: `\n    <div\n      [ngpInputOtpValue]=\"value()\"\n      [ngpInputOtpDisabled]=\"disabled() || formDisabled()\"\n      [ngpInputOtpPattern]=\"pattern()\"\n      [ngpInputOtpPlaceholder]=\"placeholder()\"\n      [ngpInputOtpInputMode]=\"inputMode()\"\n      (ngpInputOtpValueChange)=\"onValueChange($event)\"\n      (ngpInputOtpComplete)=\"onComplete()\"\n      ngpInputOtp\n    >\n      <input [attr.aria-label]=\"ariaLabel()\" ngpInputOtpInput />\n      <div class=\"slots\">\n        @for (_ of slots(); track $index) {\n          <div class=\"slot\" ngpInputOtpSlot></div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      flex-direction: column;\n      gap: 12px;\n      max-width: 100%;\n    }\n\n    .slots {\n      display: flex;\n      gap: 8px;\n    }\n\n    .slot {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 48px;\n      height: 48px;\n      border: 2px solid var(--ngp-border);\n      border-radius: 8px;\n      background: var(--ngp-background);\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--ngp-text-primary);\n      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n      cursor: pointer;\n      position: relative;\n    }\n\n    .slot[data-filled] {\n      border-color: var(--ngp-border-strong);\n      background: var(--ngp-background-accent);\n    }\n\n    .slot[data-active] {\n      border-color: var(--ngp-focus-ring);\n      box-shadow: 0 0 0 1px var(--ngp-focus-ring);\n    }\n\n    .slot[data-placeholder] {\n      color: var(--ngp-text-placeholder);\n    }\n\n    .slot[data-caret]::after {\n      content: '';\n      position: absolute;\n      width: 2px;\n      height: 20px;\n      background: var(--ngp-focus-ring);\n      animation: blink 1s infinite;\n    }\n\n    @keyframes blink {\n      0%,\n      50% {\n        opacity: 1;\n      }\n      51%,\n      100% {\n        opacity: 0;\n      }\n    }\n\n    :host([data-disabled]) .slot {\n      background: var(--ngp-background-disabled);\n      color: var(--ngp-text-disabled);\n      border-color: var(--ngp-border-disabled);\n      cursor: not-allowed;\n    }\n  `,\n})\nexport class InputOtp implements ControlValueAccessor {\n  /**\n   * The number of slots to display.\n   */\n  readonly length = input<number, NumberInput>(6, {\n    transform: numberAttribute,\n  });\n\n  /**\n   * Whether the input is disabled.\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The pattern for allowed characters.\n   */\n  readonly pattern = input('[0-9]');\n\n  /**\n   * The placeholder character for empty slots.\n   */\n  readonly placeholder = input('');\n\n  /**\n   * The accessible label for the hidden input.\n   */\n  readonly ariaLabel = input('');\n\n  /**\n   * The input mode for the hidden input.\n   */\n  readonly inputMode = input<'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url'>(\n    'numeric',\n  );\n\n  /**\n   * Create an array for tracking slots.\n   */\n  protected readonly slots = computed(() => Array.from({ length: this.length() }, (_, i) => i));\n\n  /**\n   * The current value.\n   */\n  readonly value = model<string>('');\n\n  private onChange: ChangeFn<string> = () => {};\n  private onTouched: TouchedFn = () => {};\n\n  protected readonly formDisabled = signal(false);\n\n  /**\n   * Handle value changes from the input-otp directive.\n   */\n  onValueChange(value: string): void {\n    this.value.set(value);\n    this.onChange(value);\n  }\n\n  /**\n   * Handle completion events from the input-otp directive.\n   */\n  onComplete(): void {\n    this.onTouched();\n  }\n\n  // ControlValueAccessor implementation\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n",
       "hasVariants": false,
       "hasSizes": true
     }
@@ -1389,12 +1394,17 @@
       },
       {
         "name": "example-2",
-        "code": "import { provideSelectConfig } from 'ng-primitives/select';\n\nbootstrapApplication(AppComponent, {\n  providers: [provideSelectConfig({ placement: 'bottom', container: document.body, flip: true })],\n});",
+        "code": "<!-- Simple number offset -->\n<div ngpSelect [ngpSelectDropdownOffset]=\"12\">Dropdown with 12px offset</div>\n\n<!-- Object offset for precise control -->\n<div ngpSelect [ngpSelectDropdownOffset]=\"{mainAxis: 8, crossAxis: 4, alignmentAxis: 2}\">\n  Dropdown with custom offset\n</div>",
+        "description": "Custom Offset"
+      },
+      {
+        "name": "example-3",
+        "code": "import { provideSelectConfig } from 'ng-primitives/select';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideSelectConfig({\n      placement: 'bottom',\n      container: document.body,\n      flip: true,\n      offset: 4,\n    }),\n  ],\n});",
         "description": "Global Configuration"
       }
     ],
     "reusableComponent": {
-      "code": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Component, 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  NgpSelect,\n  NgpSelectDropdown,\n  NgpSelectOption,\n  NgpSelectPortal,\n} from 'ng-primitives/select';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-select',\n  imports: [NgpSelect, NgpSelectDropdown, NgpSelectOption, NgpSelectPortal, NgIcon],\n  providers: [provideIcons({ heroChevronDown }), provideValueAccessor(Select)],\n  template: `\n    <div\n      [(ngpSelectValue)]=\"value\"\n      [ngpSelectDisabled]=\"disabled() || formDisabled()\"\n      (ngpSelectValueChange)=\"onValueChange($event)\"\n      ngpSelect\n    >\n      @if (value(); as value) {\n        <span class=\"select-value\">{{ value }}</span>\n      } @else {\n        <span class=\"select-placeholder\">{{ placeholder() }}</span>\n      }\n\n      <ng-icon name=\"heroChevronDown\" />\n\n      <div *ngpSelectPortal ngpSelectDropdown>\n        @for (option of options(); track option) {\n          <div [ngpSelectOptionValue]=\"option\" ngpSelectOption>\n            {{ option }}\n          </div>\n        } @empty {\n          <div class=\"empty-message\">No options found</div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    [ngpSelect] {\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    [ngpSelect][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    .select-value,\n    .select-placeholder {\n      display: flex;\n      align-items: center;\n      flex: 1;\n      padding: 0 16px;\n      background-color: transparent;\n      color: var(--ngp-text-primary);\n      font-family: inherit;\n      font-size: 14px;\n      padding: 0 16px;\n      height: 100%;\n    }\n\n    .select-placeholder {\n      color: var(--ngp-text-secondary);\n    }\n\n    ng-icon {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      margin-inline: 8px;\n      font-size: 14px;\n    }\n\n    [ngpSelectDropdown] {\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-select-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-select-transform-origin);\n    }\n\n    [ngpSelectDropdown][data-enter] {\n      animation: select-show 0.1s ease-out;\n    }\n\n    [ngpSelectDropdown][data-exit] {\n      animation: select-hide 0.1s ease-out;\n    }\n\n    [ngpSelectOption] {\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    [ngpSelectOption][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpSelectOption][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpSelectOption][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 select-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 select-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 Select implements ControlValueAccessor {\n  /** The options for the select. */\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 select. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\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  writeValue(value: string | undefined): void {\n    this.value.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  }\n}\n",
+      "code": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Component, 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  NgpSelect,\n  NgpSelectDropdown,\n  NgpSelectOption,\n  NgpSelectPortal,\n} from 'ng-primitives/select';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-select',\n  imports: [NgpSelect, NgpSelectDropdown, NgpSelectOption, NgpSelectPortal, NgIcon],\n  providers: [provideIcons({ heroChevronDown }), provideValueAccessor(Select)],\n  template: `\n    <div\n      [(ngpSelectValue)]=\"value\"\n      [ngpSelectDisabled]=\"disabled() || formDisabled()\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      (ngpSelectValueChange)=\"onValueChange($event)\"\n      ngpSelect\n    >\n      @if (value(); as value) {\n        <span class=\"select-value\">{{ value }}</span>\n      } @else {\n        <span class=\"select-placeholder\">{{ placeholder() }}</span>\n      }\n\n      <ng-icon name=\"heroChevronDown\" />\n\n      <div *ngpSelectPortal ngpSelectDropdown>\n        @for (option of options(); track option) {\n          <div [ngpSelectOptionValue]=\"option\" ngpSelectOption>\n            {{ option }}\n          </div>\n        } @empty {\n          <div class=\"empty-message\">No options found</div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    [ngpSelect] {\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    [ngpSelect][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    .select-value,\n    .select-placeholder {\n      display: flex;\n      align-items: center;\n      flex: 1;\n      padding: 0 16px;\n      background-color: transparent;\n      color: var(--ngp-text-primary);\n      font-family: inherit;\n      font-size: 14px;\n      padding: 0 16px;\n      height: 100%;\n    }\n\n    .select-placeholder {\n      color: var(--ngp-text-secondary);\n    }\n\n    ng-icon {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      margin-inline: 8px;\n      font-size: 14px;\n    }\n\n    [ngpSelectDropdown] {\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-select-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-select-transform-origin);\n    }\n\n    [ngpSelectDropdown][data-enter] {\n      animation: select-show 0.1s ease-out;\n    }\n\n    [ngpSelectDropdown][data-exit] {\n      animation: select-hide 0.1s ease-out;\n    }\n\n    [ngpSelectOption] {\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    [ngpSelectOption][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpSelectOption][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpSelectOption][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 select-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 select-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 Select implements ControlValueAccessor {\n  /** The options for the select. */\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 accessible label for the select trigger. */\n  readonly ariaLabel = input<string>('');\n\n  /** The disabled state of the select. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\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  writeValue(value: string | undefined): void {\n    this.value.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  }\n}\n",
       "hasVariants": false,
       "hasSizes": true
     }

package/src/generated/reusable-components.json

@@ -78,7 +78,7 @@
   },
   {
     "name": "input-otp",
-    "code": "import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n  booleanAttribute,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  numberAttribute,\n  signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot } from 'ng-primitives/input-otp';\nimport { ChangeFn, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-input-otp',\n  imports: [NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => InputOtp),\n      multi: true,\n    },\n  ],\n  template: `\n    <div\n      [ngpInputOtpValue]=\"value()\"\n      [ngpInputOtpDisabled]=\"disabled() || formDisabled()\"\n      [ngpInputOtpPattern]=\"pattern()\"\n      [ngpInputOtpPlaceholder]=\"placeholder()\"\n      [ngpInputOtpInputMode]=\"inputMode()\"\n      (ngpInputOtpValueChange)=\"onValueChange($event)\"\n      (ngpInputOtpComplete)=\"onComplete()\"\n      ngpInputOtp\n    >\n      <input ngpInputOtpInput />\n      <div class=\"slots\">\n        @for (_ of slots(); track $index) {\n          <div class=\"slot\" ngpInputOtpSlot></div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      flex-direction: column;\n      gap: 12px;\n      max-width: 100%;\n    }\n\n    .slots {\n      display: flex;\n      gap: 8px;\n    }\n\n    .slot {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 48px;\n      height: 48px;\n      border: 2px solid var(--ngp-border);\n      border-radius: 8px;\n      background: var(--ngp-background);\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--ngp-text-primary);\n      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n      cursor: pointer;\n      position: relative;\n    }\n\n    .slot[data-filled] {\n      border-color: var(--ngp-border-strong);\n      background: var(--ngp-background-accent);\n    }\n\n    .slot[data-active] {\n      border-color: var(--ngp-focus-ring);\n      box-shadow: 0 0 0 1px var(--ngp-focus-ring);\n    }\n\n    .slot[data-placeholder] {\n      color: var(--ngp-text-placeholder);\n    }\n\n    .slot[data-caret]::after {\n      content: '';\n      position: absolute;\n      width: 2px;\n      height: 20px;\n      background: var(--ngp-focus-ring);\n      animation: blink 1s infinite;\n    }\n\n    @keyframes blink {\n      0%,\n      50% {\n        opacity: 1;\n      }\n      51%,\n      100% {\n        opacity: 0;\n      }\n    }\n\n    :host([data-disabled]) .slot {\n      background: var(--ngp-background-disabled);\n      color: var(--ngp-text-disabled);\n      border-color: var(--ngp-border-disabled);\n      cursor: not-allowed;\n    }\n  `,\n})\nexport class InputOtp implements ControlValueAccessor {\n  /**\n   * The number of slots to display.\n   */\n  readonly length = input<number, NumberInput>(6, {\n    transform: numberAttribute,\n  });\n\n  /**\n   * Whether the input is disabled.\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The pattern for allowed characters.\n   */\n  readonly pattern = input('[0-9]');\n\n  /**\n   * The placeholder character for empty slots.\n   */\n  readonly placeholder = input('');\n\n  /**\n   * The input mode for the hidden input.\n   */\n  readonly inputMode = input<'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url'>(\n    'numeric',\n  );\n\n  /**\n   * Create an array for tracking slots.\n   */\n  protected readonly slots = computed(() => Array.from({ length: this.length() }, (_, i) => i));\n\n  /**\n   * The current value.\n   */\n  readonly value = model<string>('');\n\n  private onChange: ChangeFn<string> = () => {};\n  private onTouched: TouchedFn = () => {};\n\n  protected readonly formDisabled = signal(false);\n\n  /**\n   * Handle value changes from the input-otp directive.\n   */\n  onValueChange(value: string): void {\n    this.value.set(value);\n    this.onChange(value);\n  }\n\n  /**\n   * Handle completion events from the input-otp directive.\n   */\n  onComplete(): void {\n    this.onTouched();\n  }\n\n  // ControlValueAccessor implementation\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n",
+    "code": "import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n  booleanAttribute,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  numberAttribute,\n  signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot } from 'ng-primitives/input-otp';\nimport { ChangeFn, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-input-otp',\n  imports: [NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => InputOtp),\n      multi: true,\n    },\n  ],\n  template: `\n    <div\n      [ngpInputOtpValue]=\"value()\"\n      [ngpInputOtpDisabled]=\"disabled() || formDisabled()\"\n      [ngpInputOtpPattern]=\"pattern()\"\n      [ngpInputOtpPlaceholder]=\"placeholder()\"\n      [ngpInputOtpInputMode]=\"inputMode()\"\n      (ngpInputOtpValueChange)=\"onValueChange($event)\"\n      (ngpInputOtpComplete)=\"onComplete()\"\n      ngpInputOtp\n    >\n      <input [attr.aria-label]=\"ariaLabel()\" ngpInputOtpInput />\n      <div class=\"slots\">\n        @for (_ of slots(); track $index) {\n          <div class=\"slot\" ngpInputOtpSlot></div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      flex-direction: column;\n      gap: 12px;\n      max-width: 100%;\n    }\n\n    .slots {\n      display: flex;\n      gap: 8px;\n    }\n\n    .slot {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 48px;\n      height: 48px;\n      border: 2px solid var(--ngp-border);\n      border-radius: 8px;\n      background: var(--ngp-background);\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--ngp-text-primary);\n      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n      cursor: pointer;\n      position: relative;\n    }\n\n    .slot[data-filled] {\n      border-color: var(--ngp-border-strong);\n      background: var(--ngp-background-accent);\n    }\n\n    .slot[data-active] {\n      border-color: var(--ngp-focus-ring);\n      box-shadow: 0 0 0 1px var(--ngp-focus-ring);\n    }\n\n    .slot[data-placeholder] {\n      color: var(--ngp-text-placeholder);\n    }\n\n    .slot[data-caret]::after {\n      content: '';\n      position: absolute;\n      width: 2px;\n      height: 20px;\n      background: var(--ngp-focus-ring);\n      animation: blink 1s infinite;\n    }\n\n    @keyframes blink {\n      0%,\n      50% {\n        opacity: 1;\n      }\n      51%,\n      100% {\n        opacity: 0;\n      }\n    }\n\n    :host([data-disabled]) .slot {\n      background: var(--ngp-background-disabled);\n      color: var(--ngp-text-disabled);\n      border-color: var(--ngp-border-disabled);\n      cursor: not-allowed;\n    }\n  `,\n})\nexport class InputOtp implements ControlValueAccessor {\n  /**\n   * The number of slots to display.\n   */\n  readonly length = input<number, NumberInput>(6, {\n    transform: numberAttribute,\n  });\n\n  /**\n   * Whether the input is disabled.\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The pattern for allowed characters.\n   */\n  readonly pattern = input('[0-9]');\n\n  /**\n   * The placeholder character for empty slots.\n   */\n  readonly placeholder = input('');\n\n  /**\n   * The accessible label for the hidden input.\n   */\n  readonly ariaLabel = input('');\n\n  /**\n   * The input mode for the hidden input.\n   */\n  readonly inputMode = input<'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url'>(\n    'numeric',\n  );\n\n  /**\n   * Create an array for tracking slots.\n   */\n  protected readonly slots = computed(() => Array.from({ length: this.length() }, (_, i) => i));\n\n  /**\n   * The current value.\n   */\n  readonly value = model<string>('');\n\n  private onChange: ChangeFn<string> = () => {};\n  private onTouched: TouchedFn = () => {};\n\n  protected readonly formDisabled = signal(false);\n\n  /**\n   * Handle value changes from the input-otp directive.\n   */\n  onValueChange(value: string): void {\n    this.value.set(value);\n    this.onChange(value);\n  }\n\n  /**\n   * Handle completion events from the input-otp directive.\n   */\n  onComplete(): void {\n    this.onTouched();\n  }\n\n  // ControlValueAccessor implementation\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n",
     "primitive": "input-otp",
     "hasVariants": false,
     "hasSizes": true
@@ -162,7 +162,7 @@
   },
   {
     "name": "select",
-    "code": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Component, 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  NgpSelect,\n  NgpSelectDropdown,\n  NgpSelectOption,\n  NgpSelectPortal,\n} from 'ng-primitives/select';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-select',\n  imports: [NgpSelect, NgpSelectDropdown, NgpSelectOption, NgpSelectPortal, NgIcon],\n  providers: [provideIcons({ heroChevronDown }), provideValueAccessor(Select)],\n  template: `\n    <div\n      [(ngpSelectValue)]=\"value\"\n      [ngpSelectDisabled]=\"disabled() || formDisabled()\"\n      (ngpSelectValueChange)=\"onValueChange($event)\"\n      ngpSelect\n    >\n      @if (value(); as value) {\n        <span class=\"select-value\">{{ value }}</span>\n      } @else {\n        <span class=\"select-placeholder\">{{ placeholder() }}</span>\n      }\n\n      <ng-icon name=\"heroChevronDown\" />\n\n      <div *ngpSelectPortal ngpSelectDropdown>\n        @for (option of options(); track option) {\n          <div [ngpSelectOptionValue]=\"option\" ngpSelectOption>\n            {{ option }}\n          </div>\n        } @empty {\n          <div class=\"empty-message\">No options found</div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    [ngpSelect] {\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    [ngpSelect][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    .select-value,\n    .select-placeholder {\n      display: flex;\n      align-items: center;\n      flex: 1;\n      padding: 0 16px;\n      background-color: transparent;\n      color: var(--ngp-text-primary);\n      font-family: inherit;\n      font-size: 14px;\n      padding: 0 16px;\n      height: 100%;\n    }\n\n    .select-placeholder {\n      color: var(--ngp-text-secondary);\n    }\n\n    ng-icon {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      margin-inline: 8px;\n      font-size: 14px;\n    }\n\n    [ngpSelectDropdown] {\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-select-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-select-transform-origin);\n    }\n\n    [ngpSelectDropdown][data-enter] {\n      animation: select-show 0.1s ease-out;\n    }\n\n    [ngpSelectDropdown][data-exit] {\n      animation: select-hide 0.1s ease-out;\n    }\n\n    [ngpSelectOption] {\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    [ngpSelectOption][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpSelectOption][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpSelectOption][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 select-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 select-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 Select implements ControlValueAccessor {\n  /** The options for the select. */\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 select. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\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  writeValue(value: string | undefined): void {\n    this.value.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  }\n}\n",
+    "code": "import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Component, 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  NgpSelect,\n  NgpSelectDropdown,\n  NgpSelectOption,\n  NgpSelectPortal,\n} from 'ng-primitives/select';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-select',\n  imports: [NgpSelect, NgpSelectDropdown, NgpSelectOption, NgpSelectPortal, NgIcon],\n  providers: [provideIcons({ heroChevronDown }), provideValueAccessor(Select)],\n  template: `\n    <div\n      [(ngpSelectValue)]=\"value\"\n      [ngpSelectDisabled]=\"disabled() || formDisabled()\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      (ngpSelectValueChange)=\"onValueChange($event)\"\n      ngpSelect\n    >\n      @if (value(); as value) {\n        <span class=\"select-value\">{{ value }}</span>\n      } @else {\n        <span class=\"select-placeholder\">{{ placeholder() }}</span>\n      }\n\n      <ng-icon name=\"heroChevronDown\" />\n\n      <div *ngpSelectPortal ngpSelectDropdown>\n        @for (option of options(); track option) {\n          <div [ngpSelectOptionValue]=\"option\" ngpSelectOption>\n            {{ option }}\n          </div>\n        } @empty {\n          <div class=\"empty-message\">No options found</div>\n        }\n      </div>\n    </div>\n  `,\n  styles: `\n    [ngpSelect] {\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    [ngpSelect][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    .select-value,\n    .select-placeholder {\n      display: flex;\n      align-items: center;\n      flex: 1;\n      padding: 0 16px;\n      background-color: transparent;\n      color: var(--ngp-text-primary);\n      font-family: inherit;\n      font-size: 14px;\n      padding: 0 16px;\n      height: 100%;\n    }\n\n    .select-placeholder {\n      color: var(--ngp-text-secondary);\n    }\n\n    ng-icon {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 100%;\n      margin-inline: 8px;\n      font-size: 14px;\n    }\n\n    [ngpSelectDropdown] {\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-select-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-select-transform-origin);\n    }\n\n    [ngpSelectDropdown][data-enter] {\n      animation: select-show 0.1s ease-out;\n    }\n\n    [ngpSelectDropdown][data-exit] {\n      animation: select-hide 0.1s ease-out;\n    }\n\n    [ngpSelectOption] {\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    [ngpSelectOption][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpSelectOption][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpSelectOption][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 select-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 select-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 Select implements ControlValueAccessor {\n  /** The options for the select. */\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 accessible label for the select trigger. */\n  readonly ariaLabel = input<string>('');\n\n  /** The disabled state of the select. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\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  writeValue(value: string | undefined): void {\n    this.value.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  }\n}\n",
     "primitive": "select",
     "hasVariants": false,
     "hasSizes": true