ng-primitives 0.24.0 → 0.26.0

package/accordion/accordion/accordion.directive.d.ts

@@ -6,8 +6,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { BooleanInput } from '@angular/cdk/coercion';
+import { NgpOrientation } from 'ng-primitives/common';
+import { NgpCanOrientate } from 'ng-primitives/internal';
 import * as i0 from "@angular/core";
-export declare class NgpAccordion<T> {
+export declare class NgpAccordion<T> implements NgpCanOrientate {
     /**
      * Access the global accordion configuration.
      */
@@ -31,7 +33,7 @@ export declare class NgpAccordion<T> {
     /**
      * The accordion orientation.
      */
-    readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+    readonly orientation: import("@angular/core").InputSignal<NgpOrientation>;
     /**
      * @param value The value to check.
      * @returns Whether the value is open.

package/button/index.d.ts

@@ -6,4 +6,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 export { NgpButton } from './button/button.directive';
-export { NgpButtonToken, injectButton } from './button/button.token';
+export { injectButton, NgpButtonToken } from './button/button.token';

package/checkbox/checkbox/checkbox.directive.d.ts

@@ -19,11 +19,19 @@ export declare class NgpCheckbox implements NgpCanDisable {
     /**
      * Defines whether the checkbox is checked.
      */
-    readonly checked: import("@angular/core").ModelSignal<boolean>;
+    readonly checked: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The event that is emitted when the checkbox value changes.
+     */
+    readonly checkedChange: import("@angular/core").OutputEmitterRef<boolean>;
     /**
      * Defines whether the checkbox is indeterminate.
      */
-    readonly indeterminate: import("@angular/core").ModelSignal<boolean>;
+    readonly indeterminate: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The event that is emitted when the indeterminate value changes.
+     */
+    readonly indeterminateChange: import("@angular/core").OutputEmitterRef<boolean>;
     /**
      * Whether the checkbox is required.
      */
@@ -32,8 +40,13 @@ export declare class NgpCheckbox implements NgpCanDisable {
      * Defines whether the checkbox is disabled.
      */
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The form control state. This is used to allow communication between the checkbox and the control value access and any
+     * components that use this as a host directive.
+     */
+    protected readonly state: import("dist/packages/ng-primitives/state").State<import("./checkbox.state").NgpCheckboxState>;
     protected onEnter(event: KeyboardEvent): void;
     toggle(event?: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpCheckbox, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpCheckbox, "[ngpCheckbox]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "ngpCheckboxChecked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "ngpCheckboxIndeterminate"; "required": false; "isSignal": true; }; "required": { "alias": "ngpCheckboxRequired"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpCheckboxDisabled"; "required": false; "isSignal": true; }; }, { "checked": "ngpCheckboxCheckedChange"; "indeterminate": "ngpCheckboxIndeterminateChange"; }, never, never, true, [{ directive: typeof i1.NgpFormControl; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpHover; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpFocusVisible; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpPress; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpCheckbox, "[ngpCheckbox]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "ngpCheckboxChecked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "ngpCheckboxIndeterminate"; "required": false; "isSignal": true; }; "required": { "alias": "ngpCheckboxRequired"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpCheckboxDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpCheckboxCheckedChange"; "indeterminateChange": "ngpCheckboxIndeterminateChange"; }, never, never, true, [{ directive: typeof i1.NgpFormControl; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpHover; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpFocusVisible; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpPress; inputs: {}; outputs: {}; }]>;
 }

package/checkbox/checkbox/checkbox.state.d.ts

@@ -0,0 +1,41 @@
+import { OutputEmitterRef, Signal } from '@angular/core';
+/**
+ * The state for the checkbox primitive.
+ */
+export interface NgpCheckboxState {
+    /**
+     * The id of the checkbox.
+     */
+    id: Signal<string>;
+    /**
+     * The checked state of the checkbox.
+     */
+    checked: Signal<boolean>;
+    /**
+     * The checked change event of the checkbox.
+     */
+    checkedChange: OutputEmitterRef<boolean>;
+    /**
+     * The indeterminate state of the checkbox.
+     * @default false
+     */
+    indeterminate: Signal<boolean>;
+    /**
+     * The indeterminate change event of the checkbox.
+     */
+    indeterminateChange: OutputEmitterRef<boolean>;
+    /**
+     * The required state of the checkbox.
+     * @default false
+     */
+    required: Signal<boolean>;
+    /**
+     * The disabled state of the checkbox.
+     * @default false
+     */
+    disabled: Signal<boolean>;
+}
+/**
+ * The initial state for the checkbox primitive.
+ */
+export declare const NgpCheckboxStateToken: import("ng-primitives/state").StateToken<NgpCheckboxState>, provideCheckboxState: import("ng-primitives/state").StateFactory<NgpCheckboxState> & import("ng-primitives/state").StateProvider, injectCheckboxState: import("ng-primitives/state").StateFactory<NgpCheckboxState> & import("ng-primitives/state").StateInjector<NgpCheckboxState>, checkboxState: import("ng-primitives/state").StateFactory<NgpCheckboxState>;

package/checkbox/checkbox/checkbox.token.d.ts

@@ -5,7 +5,7 @@
  * This source code is licensed under the Apache 2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { InjectionToken } from '@angular/core';
+import { ExistingProvider, InjectionToken, Type } from '@angular/core';
 import type { NgpCheckbox } from './checkbox.directive';
 export declare const NgpCheckboxToken: InjectionToken<NgpCheckbox>;
 /**
@@ -13,3 +13,9 @@ export declare const NgpCheckboxToken: InjectionToken<NgpCheckbox>;
  * @returns The Checkbox directive instance
  */
 export declare function injectCheckbox(): NgpCheckbox;
+/**
+ * Provide the Checkbox directive instance
+ * @param checkbox The Checkbox directive
+ * @returns The Checkbox directive provider
+ */
+export declare function provideCheckbox(checkbox: Type<NgpCheckbox>): ExistingProvider;

package/checkbox/index.d.ts

@@ -6,4 +6,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 export { NgpCheckbox } from './checkbox/checkbox.directive';
-export { NgpCheckboxToken, injectCheckbox } from './checkbox/checkbox.token';
+export { injectCheckboxState, provideCheckboxState } from './checkbox/checkbox.state';
+export { injectCheckbox, NgpCheckboxToken } from './checkbox/checkbox.token';

package/collection.json

@@ -0,0 +1,15 @@
+{
+  "schematics": {
+    "ng-add": {
+      "description": "Add Angular Primitives to a project.",
+      "factory": "./schematics/ng-add/index",
+      "schema": "./schematics/ng-add/schema.json",
+      "hidden": true
+    },
+    "primitive": {
+      "description": "Add Angular Primitives to a project.",
+      "factory": "./schematics/ng-generate/index",
+      "schema": "./schematics/ng-generate/schema.json"
+    }
+  }
+}

package/common/index.d.ts

@@ -1,2 +1,3 @@
 export { NgpHeader } from './header/header.directive';
-export { NgpHeaderToken, injectHeader } from './header/header.token';
+export { injectHeader, NgpHeaderToken } from './header/header.token';
+export { NgpOrientation } from './types/orientation';

package/common/types/orientation.d.ts

@@ -0,0 +1 @@
+export type NgpOrientation = 'horizontal' | 'vertical';

package/date-picker/date-picker/date-picker.directive.d.ts

@@ -7,6 +7,7 @@
  */
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { BooleanInput } from '@angular/cdk/coercion';
+import type { NgpDatePickerDateButton } from '../date-picker-date-button/date-picker-date-button.directive';
 import * as i0 from "@angular/core";
 export declare class NgpDatePicker<T> {
     /**
@@ -36,26 +37,50 @@ export declare class NgpDatePicker<T> {
     /**
      * The selected value.
      */
-    readonly date: import("@angular/core").ModelSignal<T | undefined>;
+    readonly date: import("@angular/core").InputSignal<T | undefined>;
+    /**
+     * Emit when the date changes.
+     */
+    readonly dateChange: import("@angular/core").OutputEmitterRef<T | undefined>;
     /**
      * The focused value.
      */
-    readonly focusedDate: import("@angular/core").ModelSignal<T>;
+    readonly focusedDate: import("@angular/core").InputSignal<T>;
+    /**
+     * Emit when the focused date changes.
+     */
+    readonly focusedDateChange: import("@angular/core").OutputEmitterRef<T>;
     /**
      * Detect the label element.
      * @internal
      */
-    readonly label: import("@angular/core").Signal<import("ng-primitives/date-picker").NgpDatePickerLabel | undefined>;
+    readonly label: import("@angular/core").Signal<import("ng-primitives/date-picker").NgpDatePickerLabel<unknown> | undefined>;
     /**
      * Access all the date picker buttons
      */
     private readonly buttons;
+    /**
+     * The date picker state.
+     */
+    protected readonly state: import("dist/packages/ng-primitives/state").State<import("./date-picker.state").NgpDatePickerState<T>>;
     /**
      * Set the focused date.
      * @param date The date to focus.
      * @internal
      */
     setFocusedDate(date: T, origin: FocusOrigin | undefined, direction: 'forward' | 'backward'): void;
+    /**
+     * Register a date button.
+     * @param button The date button to register.
+     * @internal
+     */
+    registerButton(button: NgpDatePickerDateButton<T>): void;
+    /**
+     * Unregister a date button.
+     * @param button The date button to unregister.
+     * @internal
+     */
+    unregisterButton(button: NgpDatePickerDateButton<T>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpDatePicker<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpDatePicker<any>, "[ngpDatePicker]", ["ngpDatePicker"], { "min": { "alias": "ngpDatePickerMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpDatePickerMax"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpDatePickerDisabled"; "required": false; "isSignal": true; }; "dateDisabled": { "alias": "ngpDatePickerDateDisabled"; "required": false; "isSignal": true; }; "date": { "alias": "ngpDatePickerDate"; "required": false; "isSignal": true; }; "focusedDate": { "alias": "ngpDatePickerFocusedDate"; "required": false; "isSignal": true; }; }, { "date": "ngpDatePickerDateChange"; "focusedDate": "ngpDatePickerFocusedDateChange"; }, ["label", "buttons"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpDatePicker<any>, "[ngpDatePicker]", ["ngpDatePicker"], { "min": { "alias": "ngpDatePickerMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpDatePickerMax"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpDatePickerDisabled"; "required": false; "isSignal": true; }; "dateDisabled": { "alias": "ngpDatePickerDateDisabled"; "required": false; "isSignal": true; }; "date": { "alias": "ngpDatePickerDate"; "required": false; "isSignal": true; }; "focusedDate": { "alias": "ngpDatePickerFocusedDate"; "required": false; "isSignal": true; }; }, { "dateChange": "ngpDatePickerDateChange"; "focusedDateChange": "ngpDatePickerFocusedDateChange"; }, ["label"], never, true, never>;
 }

package/date-picker/date-picker/date-picker.state.d.ts

@@ -0,0 +1,52 @@
+import { OutputEmitterRef, Signal } from '@angular/core';
+import { State } from 'ng-primitives/state';
+/**
+ * The state for the date-picker primitive.
+ */
+export interface NgpDatePickerState<T> {
+    /**
+     * The minimum date that can be selected.
+     */
+    min: Signal<T | undefined>;
+    /**
+     * The maximum date that can be selected.
+     */
+    max: Signal<T | undefined>;
+    /**
+     * Determine if the date picker is disabled.
+     */
+    disabled: Signal<boolean>;
+    /**
+     * The currently selected date.
+     */
+    date: Signal<T | undefined>;
+    /**
+     * Whether a specific date is disabled.
+     */
+    dateDisabled: Signal<(date: T) => boolean>;
+    /**
+     * Emit when the selected date changes.
+     */
+    dateChange: OutputEmitterRef<T | undefined>;
+    /**
+     * The currently focused date.
+     */
+    focusedDate: Signal<T>;
+    /**
+     * Emit when the focused date changes.
+     */
+    focusedDateChange: OutputEmitterRef<T>;
+}
+/**
+ * The initial state for the date-picker primitive.
+ */
+declare const provideDatePickerState: import("ng-primitives/state").StateFactory<NgpDatePickerState<unknown>> & import("ng-primitives/state").StateProvider;
+export { provideDatePickerState };
+/**
+ * Inject the date-picker state.
+ */
+export declare const injectDatePickerState: <T>() => State<NgpDatePickerState<T>>;
+/**
+ * Update the date-picker state.
+ */
+export declare const datePickerState: <T>(state: NgpDatePickerState<T>) => State<NgpDatePickerState<T>>;

package/date-picker/date-picker/date-picker.token.d.ts

@@ -5,10 +5,14 @@
  * This source code is licensed under the Apache 2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { InjectionToken } from '@angular/core';
+import { ExistingProvider, InjectionToken, Type } from '@angular/core';
 import type { NgpDatePicker } from './date-picker.directive';
 export declare const NgpDatePickerToken: InjectionToken<NgpDatePicker<unknown>>;
 /**
  * Inject the DatePicker directive instance
  */
 export declare function injectDatePicker<T>(): NgpDatePicker<T>;
+/**
+ * Provide the DatePicker directive instance
+ */
+export declare function provideDatePicker<T>(datePicker: Type<NgpDatePicker<T>>): ExistingProvider;

package/date-picker/date-picker-date-button/date-picker-date-button.directive.d.ts

@@ -1,7 +1,8 @@
+import { OnDestroy } from '@angular/core';
 import { NgpCanDisable } from 'ng-primitives/internal';
 import * as i0 from "@angular/core";
 import * as i1 from "ng-primitives/button";
-export declare class NgpDatePickerDateButton<T> implements NgpCanDisable {
+export declare class NgpDatePickerDateButton<T> implements NgpCanDisable, OnDestroy {
     /**
      * Access the element ref.
      */
@@ -14,6 +15,10 @@ export declare class NgpDatePickerDateButton<T> implements NgpCanDisable {
      * Access the date picker.
      */
     private readonly datePicker;
+    /**
+     * Access the date picker state.
+     */
+    private readonly state;
     /**
      * Access the date adapter.
      */
@@ -48,6 +53,8 @@ export declare class NgpDatePickerDateButton<T> implements NgpCanDisable {
      * Determine if the element is a button.
      */
     protected readonly isButton: boolean;
+    constructor();
+    ngOnDestroy(): void;
     /**
      * When the button is clicked, select the date.
      */

package/date-picker/date-picker-grid/date-picker-grid.directive.d.ts

@@ -4,6 +4,10 @@ export declare class NgpDatePickerGrid<T> {
      * Access the date picker.
      */
     private readonly datePicker;
+    /**
+     * Access the date picker state.
+     */
+    protected readonly state: import("dist/packages/ng-primitives/state").State<import("../date-picker/date-picker.state").NgpDatePickerState<T>>;
     /**
      * Determine the id for the label.
      */

package/date-picker/date-picker-label/date-picker-label.directive.d.ts

@@ -1,9 +1,9 @@
 import * as i0 from "@angular/core";
-export declare class NgpDatePickerLabel {
+export declare class NgpDatePickerLabel<T> {
     /**
      * Access the date picker.
      */
-    protected readonly datePicker: import("ng-primitives/date-picker").NgpDatePicker<unknown>;
+    protected readonly state: import("dist/packages/ng-primitives/state").State<import("../date-picker/date-picker.state").NgpDatePickerState<T>>;
     /**
      * Define a unique id for the label.
      */
@@ -12,6 +12,6 @@ export declare class NgpDatePickerLabel {
      * Define the aria live attribute.
      */
     readonly ariaLive: import("@angular/core").InputSignal<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgpDatePickerLabel, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpDatePickerLabel, "[ngpDatePickerLabel]", ["ngpDatePickerLabel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLive": { "alias": "aria-live"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpDatePickerLabel<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpDatePickerLabel<any>, "[ngpDatePickerLabel]", ["ngpDatePickerLabel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLive": { "alias": "aria-live"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/date-picker/date-picker-label/date-picker-label.token.d.ts

@@ -7,8 +7,8 @@
  */
 import { InjectionToken } from '@angular/core';
 import type { NgpDatePickerLabel } from './date-picker-label.directive';
-export declare const NgpDatePickerLabelToken: InjectionToken<NgpDatePickerLabel>;
+export declare const NgpDatePickerLabelToken: InjectionToken<NgpDatePickerLabel<unknown>>;
 /**
  * Inject the DatePickerLabel directive instance
  */
-export declare function injectDatePickerLabel(): NgpDatePickerLabel;
+export declare function injectDatePickerLabel<T>(): NgpDatePickerLabel<T>;

package/date-picker/date-picker-next-month/date-picker-next-month.directive.d.ts

@@ -14,6 +14,10 @@ export declare class NgpDatePickerNextMonth<T> implements NgpCanDisable {
      * Access the date picker.
      */
     private readonly datePicker;
+    /**
+     * Access the date picker state.
+     */
+    private readonly state;
     /**
      * Determine if this is a button element
      */

package/date-picker/date-picker-previous-month/date-picker-previous-month.directive.d.ts

@@ -14,6 +14,10 @@ export declare class NgpDatePickerPreviousMonth<T> implements NgpCanDisable {
      * Access the date picker.
      */
     private readonly datePicker;
+    /**
+     * Access the date picker state.
+     */
+    private readonly state;
     /**
      * Determine if this is a button element
      */

package/date-picker/date-picker-row-render/date-picker-row-render.directive.d.ts

@@ -15,7 +15,7 @@ export declare class NgpDatePickerRowRender<T> implements OnDestroy {
     /**
      * Access the date picker.
      */
-    private readonly datePicker;
+    private readonly state;
     /**
      * Access the template ref for the cell.
      */

package/date-picker/index.d.ts

@@ -23,3 +23,4 @@ export { NgpDatePicker } from './date-picker/date-picker.directive';
 export { NgpDatePickerToken, injectDatePicker } from './date-picker/date-picker.token';
 export { NgpDatePickerCell } from './date-picker-cell/date-picker-cell.directive';
 export { NgpDatePickerCellToken, injectDatePickerCell, } from './date-picker-cell/date-picker-cell.token';
+export { provideDatePickerState, injectDatePickerState } from './date-picker/date-picker.state';

package/example-theme/index.css

@@ -2,83 +2,83 @@
  * This is a sample theme for the ng-primitives examples. It uses colors from the TailwindCSS palette.
  */
 :root {
-  --white: oklch(1 0.001 0.001);
-  --black: oklch(0 0.001 0.001);
+  --ngp-white: oklch(1 0.001 0.001);
+  --ngp-black: oklch(0 0.001 0.001);
 
-  --gray-50: oklch(0.985 0 0);
-  --gray-100: oklch(0.967 0.001 286.375);
-  --gray-200: oklch(0.92 0.004 286.32);
-  --gray-300: oklch(0.871 0.006 286.286);
-  --gray-400: oklch(0.705 0.015 286.067);
-  --gray-500: oklch(0.552 0.016 285.938);
-  --gray-600: oklch(0.442 0.017 285.786);
-  --gray-700: oklch(0.37 0.013 285.805);
-  --gray-800: oklch(0.274 0.006 286.033);
-  --gray-900: oklch(0.21 0.006 285.885);
-  --gray-950: oklch(0.141 0.005 285.823);
+  --ngp-gray-50: oklch(0.985 0 0);
+  --ngp-gray-100: oklch(0.967 0.001 286.375);
+  --ngp-gray-200: oklch(0.92 0.004 286.32);
+  --ngp-gray-300: oklch(0.871 0.006 286.286);
+  --ngp-gray-400: oklch(0.705 0.015 286.067);
+  --ngp-gray-500: oklch(0.552 0.016 285.938);
+  --ngp-gray-600: oklch(0.442 0.017 285.786);
+  --ngp-gray-700: oklch(0.37 0.013 285.805);
+  --ngp-gray-800: oklch(0.274 0.006 286.033);
+  --ngp-gray-900: oklch(0.21 0.006 285.885);
+  --ngp-gray-950: oklch(0.141 0.005 285.823);
 
-  --background: var(--white);
-  --background-secondary: var(--gray-300);
-  --background-hover: var(--gray-50);
-  --background-active: var(--gray-100);
-  --background-inverse: var(--black);
-  --background-disabled: var(--gray-100);
-  --background-blue: #dbeafe;
+  --ngp-background: var(--ngp-white);
+  --ngp-background-secondary: var(--ngp-gray-300);
+  --ngp-background-hover: var(--ngp-gray-50);
+  --ngp-background-active: var(--ngp-gray-100);
+  --ngp-background-inverse: var(--ngp-black);
+  --ngp-background-disabled: var(--ngp-gray-100);
+  --ngp-background-blue: #dbeafe;
 
-  --border: var(--gray-200);
-  --border-secondary: var(--gray-300);
-  --border-blue: #3b82f6;
+  --ngp-border: var(--ngp-gray-200);
+  --ngp-border-secondary: var(--ngp-gray-300);
+  --ngp-border-blue: #3b82f6;
 
-  --text-emphasis: var(--black);
-  --text-primary: var(--gray-900);
-  --text-secondary: var(--gray-600);
-  --text-tertiary: var(--gray-500);
-  --text-disabled: var(--gray-400);
-  --text-placeholder: var(--gray-400);
-  --text-inverse: var(--white);
-  --text-blue: #3b82f6;
-  --text-red: #ef4444;
+  --ngp-text-emphasis: var(--ngp-black);
+  --ngp-text-primary: var(--ngp-gray-900);
+  --ngp-text-secondary: var(--ngp-gray-600);
+  --ngp-text-tertiary: var(--ngp-gray-500);
+  --ngp-text-disabled: var(--ngp-gray-400);
+  --ngp-text-placeholder: var(--ngp-gray-400);
+  --ngp-text-inverse: var(--ngp-white);
+  --ngp-text-blue: #3b82f6;
+  --ngp-text-red: #ef4444;
 
-  --shadow: 0 1px 2px 0 rgba(0 0 0 0.05);
+  --ngp-shadow: 0 1px 2px 0 rgba(0 0 0 0.05);
 
-  --focus-ring: rgb(59 130 246);
+  --ngp-focus-ring: rgb(59 130 246);
 
-  --avatar-background: #bae6fd;
-  --avatar-border: #fff;
+  --ngp-avatar-background: #bae6fd;
+  --ngp-avatar-border: #fff;
 
-  --button-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1),
+  --ngp-button-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1),
     0 0 0 1px rgb(0 0 0 / 0.05);
 
-  --input-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  --ngp-input-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 .dark {
-  --background: var(--gray-950);
-  --background-secondary: var(--gray-700);
-  --background-hover: var(--gray-900);
-  --background-active: var(--gray-800);
-  --background-inverse: var(--white);
-  --background-disabled: var(--gray-900);
-  --background-blue: rgba(95, 160, 246, 0.274);
+  --ngp-background: var(--ngp-gray-950);
+  --ngp-background-secondary: var(--ngp-gray-700);
+  --ngp-background-hover: var(--ngp-gray-900);
+  --ngp-background-active: var(--ngp-gray-800);
+  --ngp-background-inverse: var(--ngp-white);
+  --ngp-background-disabled: var(--ngp-gray-900);
+  --ngp-background-blue: rgba(95, 160, 246, 0.274);
 
-  --border: var(--gray-800);
-  --border-secondary: var(--gray-700);
-  --border-blue: #1980ff;
+  --ngp-border: var(--ngp-gray-800);
+  --ngp-border-secondary: var(--ngp-gray-700);
+  --ngp-border-blue: #1980ff;
 
-  --text-emphasis: var(--white);
-  --text-primary: var(--gray-100);
-  --text-secondary: var(--gray-300);
-  --text-tertiary: var(--gray-400);
-  --text-disabled: var(--gray-500);
-  --text-inverse: var(--black);
-  --text-blue: #1980ff;
-  --text-red: #ff4d4d;
+  --ngp-text-emphasis: var(--ngp-white);
+  --ngp-text-primary: var(--ngp-gray-100);
+  --ngp-text-secondary: var(--ngp-gray-300);
+  --ngp-text-tertiary: var(--ngp-gray-400);
+  --ngp-text-disabled: var(--ngp-gray-500);
+  --ngp-text-inverse: var(--ngp-black);
+  --ngp-text-blue: #1980ff;
+  --ngp-text-red: #ff4d4d;
 
-  --avatar-background: #18181b;
-  --avatar-border: #3f3f46;
+  --ngp-avatar-background: #18181b;
+  --ngp-avatar-border: #3f3f46;
 
-  --input-shadow: 0 1px 2px rgba(255, 255, 255, 0.007), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  --ngp-input-shadow: 0 1px 2px rgba(255, 255, 255, 0.007), 0 0 0 1px rgba(255, 255, 255, 0.1);
 
-  --button-shadow: 0 1px 3px 0 rgb(255, 255, 255, 0.1), 0 1px 2px -1px rgb(255, 255, 255, 0.1),
+  --ngp-button-shadow: 0 1px 3px 0 rgb(255, 255, 255, 0.1), 0 1px 2px -1px rgb(255, 255, 255, 0.1),
     0 0 0 1px rgb(255, 255, 255, 0.05);
 }

package/fesm2022/ng-primitives-a11y.mjs

@@ -64,7 +64,6 @@ class NgpVisuallyHidden {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpVisuallyHidden, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[ngpVisuallyHidden]',
                     exportAs: 'ngpVisuallyHidden',
                     providers: [{ provide: NgpVisuallyHiddenToken, useExisting: NgpVisuallyHidden }],

package/fesm2022/ng-primitives-a11y.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-a11y.mjs","sources":["../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden.token.ts","../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden.directive.ts","../../../../packages/ng-primitives/a11y/src/index.ts","../../../../packages/ng-primitives/a11y/src/ng-primitives-a11y.ts"],"sourcesContent":["/**\n * Copyright © 2024 Angular Primitives.\n * https://github.com/ng-primitives/ng-primitives\n *\n * This source code is licensed under the Apache 2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { InjectionToken, inject } from '@angular/core';\nimport type { NgpVisuallyHidden } from './visually-hidden.directive';\n\nexport const NgpVisuallyHiddenToken = new InjectionToken<NgpVisuallyHidden>(\n  'NgpVisuallyHiddenToken',\n);\n\n/**\n * Inject the VisuallyHidden directive instance\n */\nexport function injectVisuallyHidden(): NgpVisuallyHidden {\n  return inject(NgpVisuallyHiddenToken);\n}\n","/**\n * Copyright © 2024 Angular Primitives.\n * https://github.com/ng-primitives/ng-primitives\n *\n * This source code is licensed under the Apache 2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Directive, computed, signal } from '@angular/core';\nimport { NgpVisuallyHiddenToken } from './visually-hidden.token';\n\n@Directive({\n  standalone: true,\n  selector: '[ngpVisuallyHidden]',\n  exportAs: 'ngpVisuallyHidden',\n  providers: [{ provide: NgpVisuallyHiddenToken, useExisting: NgpVisuallyHidden }],\n  host: {\n    '[style]': 'style()',\n  },\n})\nexport class NgpVisuallyHidden {\n  /**\n   * Whether the element is hidden.\n   */\n  protected readonly hidden = signal<boolean>(true);\n\n  protected readonly style = computed(() => {\n    if (!this.hidden()) {\n      return {};\n    }\n\n    return {\n      position: 'absolute',\n      width: '1px',\n      height: '1px',\n      margin: '-1px',\n      padding: '0',\n      overflow: 'hidden',\n      clip: 'rect(0, 0, 0, 0)',\n      whiteSpace: 'nowrap',\n      border: '0',\n      wordWrap: 'normal',\n      outline: '0',\n      '-webkit-appearance': 'none',\n      '-moz-appearance': 'none',\n      'inset-inline-start': '0',\n    };\n  });\n\n  /**\n   * Set the element visibility.\n   * @param visible\n   */\n  setVisibility(visible: boolean): void {\n    this.hidden.set(!visible);\n  }\n}\n","/**\n * Copyright © 2024 Angular Primitives.\n * https://github.com/ng-primitives/ng-primitives\n *\n * This source code is licensed under the Apache 2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport * from './visually-hidden/visually-hidden.directive';\nexport {\n  NgpVisuallyHiddenToken,\n  injectVisuallyHidden,\n} from './visually-hidden/visually-hidden.token';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;;;;;AAMG;MAIU,sBAAsB,GAAG,IAAI,cAAc,CACtD,wBAAwB;AAG1B;;AAEG;SACa,oBAAoB,GAAA;AAClC,IAAA,OAAO,MAAM,CAAC,sBAAsB,CAAC;AACvC;;ACnBA;;;;;;AAMG;MAaU,iBAAiB,CAAA;AAT9B,IAAA,WAAA,GAAA;AAUE;;AAEG;AACgB,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAU,IAAI,CAAC;AAE9B,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;AAClB,gBAAA,OAAO,EAAE;;YAGX,OAAO;AACL,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,MAAM,EAAE,KAAK;AACb,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,IAAI,EAAE,kBAAkB;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,MAAM,EAAE,GAAG;AACX,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,oBAAoB,EAAE,MAAM;AAC5B,gBAAA,iBAAiB,EAAE,MAAM;AACzB,gBAAA,oBAAoB,EAAE,GAAG;aAC1B;AACH,SAAC,CAAC;AASH;AAPC;;;AAGG;AACH,IAAA,aAAa,CAAC,OAAgB,EAAA;QAC5B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;;8GAlChB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,EAAA,SAAA,EALjB,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAKrE,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAT7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,QAAQ,EAAE,mBAAmB;oBAC7B,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAmB,iBAAA,EAAE,CAAC;AAChF,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,SAAS;AACrB,qBAAA;AACF,iBAAA;;;AClBD;;;;;;AAMG;;ACNH;;AAEG;;;;"}
+{"version":3,"file":"ng-primitives-a11y.mjs","sources":["../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden.token.ts","../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden.directive.ts","../../../../packages/ng-primitives/a11y/src/index.ts","../../../../packages/ng-primitives/a11y/src/ng-primitives-a11y.ts"],"sourcesContent":["/**\n * Copyright © 2024 Angular Primitives.\n * https://github.com/ng-primitives/ng-primitives\n *\n * This source code is licensed under the Apache 2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { InjectionToken, inject } from '@angular/core';\nimport type { NgpVisuallyHidden } from './visually-hidden.directive';\n\nexport const NgpVisuallyHiddenToken = new InjectionToken<NgpVisuallyHidden>(\n  'NgpVisuallyHiddenToken',\n);\n\n/**\n * Inject the VisuallyHidden directive instance\n */\nexport function injectVisuallyHidden(): NgpVisuallyHidden {\n  return inject(NgpVisuallyHiddenToken);\n}\n","/**\n * Copyright © 2024 Angular Primitives.\n * https://github.com/ng-primitives/ng-primitives\n *\n * This source code is licensed under the Apache 2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Directive, computed, signal } from '@angular/core';\nimport { NgpVisuallyHiddenToken } from './visually-hidden.token';\n\n@Directive({\n  selector: '[ngpVisuallyHidden]',\n  exportAs: 'ngpVisuallyHidden',\n  providers: [{ provide: NgpVisuallyHiddenToken, useExisting: NgpVisuallyHidden }],\n  host: {\n    '[style]': 'style()',\n  },\n})\nexport class NgpVisuallyHidden {\n  /**\n   * Whether the element is hidden.\n   */\n  protected readonly hidden = signal<boolean>(true);\n\n  protected readonly style = computed(() => {\n    if (!this.hidden()) {\n      return {};\n    }\n\n    return {\n      position: 'absolute',\n      width: '1px',\n      height: '1px',\n      margin: '-1px',\n      padding: '0',\n      overflow: 'hidden',\n      clip: 'rect(0, 0, 0, 0)',\n      whiteSpace: 'nowrap',\n      border: '0',\n      wordWrap: 'normal',\n      outline: '0',\n      '-webkit-appearance': 'none',\n      '-moz-appearance': 'none',\n      'inset-inline-start': '0',\n    };\n  });\n\n  /**\n   * Set the element visibility.\n   * @param visible\n   */\n  setVisibility(visible: boolean): void {\n    this.hidden.set(!visible);\n  }\n}\n","/**\n * Copyright © 2024 Angular Primitives.\n * https://github.com/ng-primitives/ng-primitives\n *\n * This source code is licensed under the Apache 2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport * from './visually-hidden/visually-hidden.directive';\nexport {\n  NgpVisuallyHiddenToken,\n  injectVisuallyHidden,\n} from './visually-hidden/visually-hidden.token';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;;;;;AAMG;MAIU,sBAAsB,GAAG,IAAI,cAAc,CACtD,wBAAwB;AAG1B;;AAEG;SACa,oBAAoB,GAAA;AAClC,IAAA,OAAO,MAAM,CAAC,sBAAsB,CAAC;AACvC;;ACnBA;;;;;;AAMG;MAYU,iBAAiB,CAAA;AAR9B,IAAA,WAAA,GAAA;AASE;;AAEG;AACgB,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAU,IAAI,CAAC;AAE9B,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;AAClB,gBAAA,OAAO,EAAE;;YAGX,OAAO;AACL,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,MAAM,EAAE,KAAK;AACb,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,IAAI,EAAE,kBAAkB;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,MAAM,EAAE,GAAG;AACX,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,oBAAoB,EAAE,MAAM;AAC5B,gBAAA,iBAAiB,EAAE,MAAM;AACzB,gBAAA,oBAAoB,EAAE,GAAG;aAC1B;AACH,SAAC,CAAC;AASH;AAPC;;;AAGG;AACH,IAAA,aAAa,CAAC,OAAgB,EAAA;QAC5B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;;8GAlChB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,EAAA,SAAA,EALjB,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAKrE,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,QAAQ,EAAE,mBAAmB;oBAC7B,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAmB,iBAAA,EAAE,CAAC;AAChF,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,SAAS;AACrB,qBAAA;AACF,iBAAA;;;ACjBD;;;;;;AAMG;;ACNH;;AAEG;;;;"}

package/fesm2022/ng-primitives-accordion.mjs

@@ -78,7 +78,6 @@ class NgpAccordionContent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpAccordionContent, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[ngpAccordionContent]',
                     exportAs: 'ngpAccordionContent',
                     providers: [{ provide: NgpAccordionContentToken, useExisting: NgpAccordionContent }],
@@ -154,7 +153,6 @@ class NgpAccordionItem {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpAccordionItem, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[ngpAccordionItem]',
                     exportAs: 'ngpAccordionItem',
                     providers: [{ provide: NgpAccordionItemToken, useExisting: NgpAccordionItem }],
@@ -203,7 +201,6 @@ class NgpAccordionTrigger {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpAccordionTrigger, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[ngpAccordionTrigger]',
                     exportAs: 'ngpAccordionTrigger',
                     providers: [{ provide: NgpAccordionTriggerToken, useExisting: NgpAccordionTrigger }],
@@ -331,7 +328,6 @@ class NgpAccordion {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpAccordion, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[ngpAccordion]',
                     exportAs: 'ngpAccordion',
                     providers: [{ provide: NgpAccordionToken, useExisting: NgpAccordion }],