ng-primitives 0.120.4 → 0.121.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "ng-primitives",
   "description": "Angular Primitives is a low-level headless UI component library with a focus on accessibility, customization, and developer experience. ",
   "license": "Apache-2.0",
-  "version": "0.120.4",
+  "version": "0.121.0",
   "keywords": [
     "angular",
     "primitives",
@@ -35,12 +35,12 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/core": ">=19.0.0",
-    "@angular/cdk": ">=19.0.0",
-    "@angular/forms": ">=19.0.0",
+    "@angular/core": "^21.0.0 || ^22.0.0",
+    "@angular/cdk": "^21.0.0 || ^22.0.0",
+    "@angular/forms": "^21.0.0 || ^22.0.0",
     "rxjs": ">=6.6.0",
     "@floating-ui/dom": ">=1.6.0",
-    "@angular/common": ">=19.0.0"
+    "@angular/common": "^21.0.0 || ^22.0.0"
   },
   "peerDependenciesMeta": {
     "luxon": {
@@ -61,202 +61,203 @@
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/ng-primitives.d.ts",
       "default": "./fesm2022/ng-primitives.mjs"
     },
     "./a11y": {
-      "types": "./a11y/index.d.ts",
+      "types": "./types/ng-primitives-a11y.d.ts",
       "default": "./fesm2022/ng-primitives-a11y.mjs"
     },
     "./accordion": {
-      "types": "./accordion/index.d.ts",
+      "types": "./types/ng-primitives-accordion.d.ts",
       "default": "./fesm2022/ng-primitives-accordion.mjs"
     },
     "./ai": {
-      "types": "./ai/index.d.ts",
+      "types": "./types/ng-primitives-ai.d.ts",
       "default": "./fesm2022/ng-primitives-ai.mjs"
     },
     "./autofill": {
-      "types": "./autofill/index.d.ts",
+      "types": "./types/ng-primitives-autofill.d.ts",
       "default": "./fesm2022/ng-primitives-autofill.mjs"
     },
     "./avatar": {
-      "types": "./avatar/index.d.ts",
+      "types": "./types/ng-primitives-avatar.d.ts",
       "default": "./fesm2022/ng-primitives-avatar.mjs"
     },
     "./breadcrumbs": {
-      "types": "./breadcrumbs/index.d.ts",
+      "types": "./types/ng-primitives-breadcrumbs.d.ts",
       "default": "./fesm2022/ng-primitives-breadcrumbs.mjs"
     },
     "./button": {
-      "types": "./button/index.d.ts",
+      "types": "./types/ng-primitives-button.d.ts",
       "default": "./fesm2022/ng-primitives-button.mjs"
     },
     "./checkbox": {
-      "types": "./checkbox/index.d.ts",
+      "types": "./types/ng-primitives-checkbox.d.ts",
       "default": "./fesm2022/ng-primitives-checkbox.mjs"
     },
     "./combobox": {
-      "types": "./combobox/index.d.ts",
+      "types": "./types/ng-primitives-combobox.d.ts",
       "default": "./fesm2022/ng-primitives-combobox.mjs"
     },
     "./common": {
-      "types": "./common/index.d.ts",
+      "types": "./types/ng-primitives-common.d.ts",
       "default": "./fesm2022/ng-primitives-common.mjs"
     },
     "./context-menu": {
-      "types": "./context-menu/index.d.ts",
+      "types": "./types/ng-primitives-context-menu.d.ts",
       "default": "./fesm2022/ng-primitives-context-menu.mjs"
     },
     "./date-picker": {
-      "types": "./date-picker/index.d.ts",
+      "types": "./types/ng-primitives-date-picker.d.ts",
       "default": "./fesm2022/ng-primitives-date-picker.mjs"
     },
     "./date-time": {
-      "types": "./date-time/index.d.ts",
+      "types": "./types/ng-primitives-date-time.d.ts",
       "default": "./fesm2022/ng-primitives-date-time.mjs"
     },
     "./date-time-luxon": {
-      "types": "./date-time-luxon/index.d.ts",
+      "types": "./types/ng-primitives-date-time-luxon.d.ts",
       "default": "./fesm2022/ng-primitives-date-time-luxon.mjs"
     },
     "./dialog": {
-      "types": "./dialog/index.d.ts",
+      "types": "./types/ng-primitives-dialog.d.ts",
       "default": "./fesm2022/ng-primitives-dialog.mjs"
     },
     "./file-upload": {
-      "types": "./file-upload/index.d.ts",
+      "types": "./types/ng-primitives-file-upload.d.ts",
       "default": "./fesm2022/ng-primitives-file-upload.mjs"
     },
     "./focus-trap": {
-      "types": "./focus-trap/index.d.ts",
+      "types": "./types/ng-primitives-focus-trap.d.ts",
       "default": "./fesm2022/ng-primitives-focus-trap.mjs"
     },
     "./form-field": {
-      "types": "./form-field/index.d.ts",
+      "types": "./types/ng-primitives-form-field.d.ts",
       "default": "./fesm2022/ng-primitives-form-field.mjs"
     },
     "./input": {
-      "types": "./input/index.d.ts",
+      "types": "./types/ng-primitives-input.d.ts",
       "default": "./fesm2022/ng-primitives-input.mjs"
     },
     "./input-otp": {
-      "types": "./input-otp/index.d.ts",
+      "types": "./types/ng-primitives-input-otp.d.ts",
       "default": "./fesm2022/ng-primitives-input-otp.mjs"
     },
     "./interactions": {
-      "types": "./interactions/index.d.ts",
+      "types": "./types/ng-primitives-interactions.d.ts",
       "default": "./fesm2022/ng-primitives-interactions.mjs"
     },
     "./internal": {
-      "types": "./internal/index.d.ts",
+      "types": "./types/ng-primitives-internal.d.ts",
       "default": "./fesm2022/ng-primitives-internal.mjs"
     },
     "./listbox": {
-      "types": "./listbox/index.d.ts",
+      "types": "./types/ng-primitives-listbox.d.ts",
       "default": "./fesm2022/ng-primitives-listbox.mjs"
     },
     "./menu": {
-      "types": "./menu/index.d.ts",
+      "types": "./types/ng-primitives-menu.d.ts",
       "default": "./fesm2022/ng-primitives-menu.mjs"
     },
     "./meter": {
-      "types": "./meter/index.d.ts",
+      "types": "./types/ng-primitives-meter.d.ts",
       "default": "./fesm2022/ng-primitives-meter.mjs"
     },
     "./navigation-menu": {
-      "types": "./navigation-menu/index.d.ts",
+      "types": "./types/ng-primitives-navigation-menu.d.ts",
       "default": "./fesm2022/ng-primitives-navigation-menu.mjs"
     },
     "./number-field": {
-      "types": "./number-field/index.d.ts",
+      "types": "./types/ng-primitives-number-field.d.ts",
       "default": "./fesm2022/ng-primitives-number-field.mjs"
     },
     "./pagination": {
-      "types": "./pagination/index.d.ts",
+      "types": "./types/ng-primitives-pagination.d.ts",
       "default": "./fesm2022/ng-primitives-pagination.mjs"
     },
     "./popover": {
-      "types": "./popover/index.d.ts",
+      "types": "./types/ng-primitives-popover.d.ts",
       "default": "./fesm2022/ng-primitives-popover.mjs"
     },
     "./portal": {
-      "types": "./portal/index.d.ts",
+      "types": "./types/ng-primitives-portal.d.ts",
       "default": "./fesm2022/ng-primitives-portal.mjs"
     },
     "./progress": {
-      "types": "./progress/index.d.ts",
+      "types": "./types/ng-primitives-progress.d.ts",
       "default": "./fesm2022/ng-primitives-progress.mjs"
     },
     "./radio": {
-      "types": "./radio/index.d.ts",
+      "types": "./types/ng-primitives-radio.d.ts",
       "default": "./fesm2022/ng-primitives-radio.mjs"
     },
     "./resize": {
-      "types": "./resize/index.d.ts",
+      "types": "./types/ng-primitives-resize.d.ts",
       "default": "./fesm2022/ng-primitives-resize.mjs"
     },
     "./roving-focus": {
-      "types": "./roving-focus/index.d.ts",
+      "types": "./types/ng-primitives-roving-focus.d.ts",
       "default": "./fesm2022/ng-primitives-roving-focus.mjs"
     },
     "./search": {
-      "types": "./search/index.d.ts",
+      "types": "./types/ng-primitives-search.d.ts",
       "default": "./fesm2022/ng-primitives-search.mjs"
     },
     "./select": {
-      "types": "./select/index.d.ts",
+      "types": "./types/ng-primitives-select.d.ts",
       "default": "./fesm2022/ng-primitives-select.mjs"
     },
     "./separator": {
-      "types": "./separator/index.d.ts",
+      "types": "./types/ng-primitives-separator.d.ts",
       "default": "./fesm2022/ng-primitives-separator.mjs"
     },
     "./slider": {
-      "types": "./slider/index.d.ts",
+      "types": "./types/ng-primitives-slider.d.ts",
       "default": "./fesm2022/ng-primitives-slider.mjs"
     },
     "./state": {
-      "types": "./state/index.d.ts",
+      "types": "./types/ng-primitives-state.d.ts",
       "default": "./fesm2022/ng-primitives-state.mjs"
     },
     "./switch": {
-      "types": "./switch/index.d.ts",
+      "types": "./types/ng-primitives-switch.d.ts",
       "default": "./fesm2022/ng-primitives-switch.mjs"
     },
     "./tabs": {
-      "types": "./tabs/index.d.ts",
+      "types": "./types/ng-primitives-tabs.d.ts",
       "default": "./fesm2022/ng-primitives-tabs.mjs"
     },
     "./textarea": {
-      "types": "./textarea/index.d.ts",
+      "types": "./types/ng-primitives-textarea.d.ts",
       "default": "./fesm2022/ng-primitives-textarea.mjs"
     },
     "./toast": {
-      "types": "./toast/index.d.ts",
+      "types": "./types/ng-primitives-toast.d.ts",
       "default": "./fesm2022/ng-primitives-toast.mjs"
     },
     "./toggle": {
-      "types": "./toggle/index.d.ts",
+      "types": "./types/ng-primitives-toggle.d.ts",
       "default": "./fesm2022/ng-primitives-toggle.mjs"
     },
     "./toggle-group": {
-      "types": "./toggle-group/index.d.ts",
+      "types": "./types/ng-primitives-toggle-group.d.ts",
       "default": "./fesm2022/ng-primitives-toggle-group.mjs"
     },
     "./toolbar": {
-      "types": "./toolbar/index.d.ts",
+      "types": "./types/ng-primitives-toolbar.d.ts",
       "default": "./fesm2022/ng-primitives-toolbar.mjs"
     },
     "./tooltip": {
-      "types": "./tooltip/index.d.ts",
+      "types": "./types/ng-primitives-tooltip.d.ts",
       "default": "./fesm2022/ng-primitives-tooltip.mjs"
     },
     "./utils": {
-      "types": "./utils/index.d.ts",
+      "types": "./types/ng-primitives-utils.d.ts",
       "default": "./fesm2022/ng-primitives-utils.mjs"
     }
   },
   "module": "fesm2022/ng-primitives.mjs",
-  "typings": "index.d.ts"
+  "typings": "types/ng-primitives.d.ts",
+  "type": "module"
 }

package/schematics/ng-generate/templates/select/select.__fileSuffix@dasherize__.ts.template

@@ -1,9 +1,10 @@
-import { BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, Component, input, model, signal } from '@angular/core';
+import { Component, input } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ControlValueAccessor } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { heroChevronDown } from '@ng-icons/heroicons/outline';
 import {
+  injectSelectState,
   NgpSelect,
   NgpSelectDropdown,
   NgpSelectOption,
@@ -13,39 +14,38 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
 
 @Component({
   selector: '<%= prefix %>-select',
-  imports: [NgpSelect, NgpSelectDropdown, NgpSelectOption, NgpSelectPortal, NgIcon],
+  hostDirectives: [
+    {
+      directive: NgpSelect,
+      inputs: ['ngpSelectValue:value', 'ngpSelectMultiple:multiple', 'ngpSelectDisabled:disabled'],
+      outputs: ['ngpSelectValueChange:valueChange'],
+    },
+  ],
   providers: [provideIcons({ heroChevronDown }), provideValueAccessor(Select<%= componentSuffix %>)],
+  imports: [NgpSelectDropdown, NgpSelectOption, NgpSelectPortal, NgIcon],
   template: `
-    <div
-      [(ngpSelectValue)]="value"
-      [ngpSelectDisabled]="disabled() || formDisabled()"
-      [attr.aria-label]="ariaLabel() || null"
-      (ngpSelectValueChange)="onValueChange($event)"
-      ngpSelect
-    >
-      @if (value(); as value) {
-        <span class="select-value">{{ value }}</span>
-      } @else {
-        <span class="select-placeholder">{{ placeholder() }}</span>
-      }
+    @if (state().value(); as value) {
+      <span class="select-value">{{ value }}</span>
+    } @else {
+      <span class="select-placeholder">{{ placeholder() }}</span>
+    }
+
+    <ng-icon name="heroChevronDown" />
 
-      <ng-icon name="heroChevronDown" />
-
-      <div *ngpSelectPortal ngpSelectDropdown>
-        @for (option of options(); track option) {
-          <div [ngpSelectOptionValue]="option" ngpSelectOption>
-            {{ option }}
-          </div>
-        } @empty {
-          <div class="empty-message">No options found</div>
-        }
-      </div>
+    <div *ngpSelectPortal ngpSelectDropdown>
+      @for (option of options(); track option) {
+        <div [ngpSelectOptionValue]="option" ngpSelectOption>
+          {{ option }}
+        </div>
+      } @empty {
+        <div class="empty-message">No options found</div>
+      }
     </div>
   `,
   styles: `
 /* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
 
-    [ngpSelect] {
+    :host {
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -58,7 +58,7 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
       box-sizing: border-box;
     }
 
-    [ngpSelect][data-focus] {
+    :host[data-focus] {
       outline: 2px solid var(--ngp-focus-ring);
       outline-offset: 2px;
     }
@@ -174,36 +174,40 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
       }
     }
   `,
+  host: {
+    '[attr.aria-label]': 'ariaLabel() || null',
+    '(focusout)': 'onTouched?.()',
+  },
 })
 export class Select<%= componentSuffix %> implements ControlValueAccessor {
+  /** Access the underlying select primitive state. */
+  protected readonly state = injectSelectState<string>();
+
   /** The options for the select. */
   readonly options = input<string[]>([]);
 
-  /** The selected value. */
-  readonly value = model<string | undefined>();
-
   /** The placeholder for the input. */
   readonly placeholder = input<string>('');
 
   /** The accessible label for the select trigger. */
   readonly ariaLabel = input<string>('');
 
-  /** The disabled state of the select. */
-  readonly disabled = input<boolean, BooleanInput>(false, {
-    transform: booleanAttribute,
-  });
+  /** Form change callback. */
+  private onChange?: ChangeFn<string | undefined>;
 
-  /** Store the form disabled state */
-  protected readonly formDisabled = signal(false);
-
-  /** The on change callback */
-  private onChange?: ChangeFn<string>;
-
-  /** The on touch callback */
+  /** Form touched callback. */
   protected onTouched?: TouchedFn;
 
+  constructor() {
+    // Forward primitive value changes (user-driven selections) to the form.
+    this.state()
+      .valueChange.pipe(takeUntilDestroyed())
+      .subscribe(value => this.onChange?.(value as string | undefined));
+  }
+
   writeValue(value: string | undefined): void {
-    this.value.set(value);
+    // Pass { emit: false } so writeValue doesn't bounce back through onChange.
+    this.state().setValue(value, { emit: false });
   }
 
   registerOnChange(fn: ChangeFn<string | undefined>): void {
@@ -215,10 +219,6 @@ export class Select<%= componentSuffix %> implements ControlValueAccessor {
   }
 
   setDisabledState(isDisabled: boolean): void {
-    this.formDisabled.set(isDisabled);
-  }
-
-  protected onValueChange(value: string): void {
-    this.onChange?.(value);
+    this.state().setDisabled(isDisabled);
   }
 }

package/{a11y/index.d.ts → types/ng-primitives-a11y.d.ts}

@@ -1,5 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
+import * as ng_primitives_a11y from 'ng-primitives/a11y';
+import * as ng_primitives_state from 'ng-primitives/state';
 
 interface NgpActiveDescendantManagerProps {
     /**
@@ -90,6 +92,20 @@ interface ActivationOptions {
     origin?: 'keyboard' | 'pointer';
 }
 
+/**
+ * Hide an element visually while keeping it present in the DOM.
+ */
+declare class NgpVisuallyHidden {
+    protected readonly state: ng_primitives_a11y.NgpVisuallyHiddenState;
+    /**
+     * Set the element visibility.
+     * @param visible
+     */
+    setVisibility(visible: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpVisuallyHidden, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpVisuallyHidden, "[ngpVisuallyHidden]", ["ngpVisuallyHidden"], {}, {}, never, never, true, never>;
+}
+
 /**
  * The state interface for the VisuallyHidden pattern.
  */
@@ -117,34 +133,12 @@ declare const NgpVisuallyHiddenStateToken: _angular_core.InjectionToken<_angular
 declare const ngpVisuallyHidden: ({ hidden: _hidden }: NgpVisuallyHiddenProps) => NgpVisuallyHiddenState;
 declare const injectVisuallyHiddenState: {
     (): Signal<NgpVisuallyHiddenState>;
-    (options: {
-        hoisted: true;
-        optional?: boolean;
-        skipSelf?: boolean;
-    }): Signal<NgpVisuallyHiddenState | null>;
-    (options?: {
-        hoisted?: boolean;
-        optional?: boolean;
-        skipSelf?: boolean;
-    }): Signal<NgpVisuallyHiddenState> | Signal<NgpVisuallyHiddenState | null>;
+    (options: ng_primitives_state.StateInjectionOptions): Signal<NgpVisuallyHiddenState | null>;
+    (options?: ng_primitives_state.StateInjectionOptions): Signal<NgpVisuallyHiddenState> | Signal<NgpVisuallyHiddenState | null>;
 };
 declare const provideVisuallyHiddenState: (opts?: {
     inherit?: boolean;
 }) => _angular_core.FactoryProvider;
 
-/**
- * Hide an element visually while keeping it present in the DOM.
- */
-declare class NgpVisuallyHidden {
-    protected readonly state: NgpVisuallyHiddenState;
-    /**
-     * Set the element visibility.
-     * @param visible
-     */
-    setVisibility(visible: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpVisuallyHidden, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpVisuallyHidden, "[ngpVisuallyHidden]", ["ngpVisuallyHidden"], {}, {}, never, never, true, never>;
-}
-
 export { NgpVisuallyHidden, NgpVisuallyHiddenStateToken, activeDescendantManager, injectVisuallyHiddenState, ngpVisuallyHidden, provideVisuallyHiddenState };
 export type { ActivationOptions, NgpActiveDescendantManagerProps, NgpActiveDescendantManagerState, NgpVisuallyHiddenProps, NgpVisuallyHiddenState };