ng-primitives 0.64.0 → 0.65.0

package/fesm2022/ng-primitives-utils.mjs

@@ -1,5 +1,5 @@
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { inject, DestroyRef, signal, afterNextRender, effect, untracked, Renderer2, ElementRef } from '@angular/core';
+import { inject, DestroyRef, signal, afterNextRender, afterRenderEffect, effect, untracked, Renderer2, ElementRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { pipe, NEVER, EMPTY } from 'rxjs';
 import { takeUntil, catchError, defaultIfEmpty } from 'rxjs/operators';
@@ -86,7 +86,7 @@ function booleanAttributeBinding(element, attribute, value) {
     if (!value) {
         return;
     }
-    afterNextRender({
+    afterRenderEffect({
         write: () => value() ? element.setAttribute(attribute, '') : element.removeAttribute(attribute),
     });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-utils.mjs","sources":["../../../../packages/ng-primitives/utils/src/forms/providers.ts","../../../../packages/ng-primitives/utils/src/observables/take-until-destroyed.ts","../../../../packages/ng-primitives/utils/src/forms/status.ts","../../../../packages/ng-primitives/utils/src/helpers/attributes.ts","../../../../packages/ng-primitives/utils/src/helpers/disposables.ts","../../../../packages/ng-primitives/utils/src/helpers/unique-id.ts","../../../../packages/ng-primitives/utils/src/signals/index.ts","../../../../packages/ng-primitives/utils/src/ui/dimensions.ts","../../../../packages/ng-primitives/utils/src/ng-primitives-utils.ts"],"sourcesContent":["import { ExistingProvider, Type } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n/**\n * A simple helper function to provide a value accessor for a given type.\n * @param type The type to provide the value accessor for\n */\nexport function provideValueAccessor<T>(type: Type<T>): ExistingProvider {\n  return { provide: NG_VALUE_ACCESSOR, useExisting: type, multi: true };\n}\n","/* eslint-disable @nx/workspace-take-until-destroyed */\nimport { DestroyRef } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { EMPTY, MonoTypeOperatorFunction, NEVER, pipe } from 'rxjs';\nimport { catchError, defaultIfEmpty, takeUntil } from 'rxjs/operators';\n\n/**\n * The built-in `takeUntilDestroyed` operator does not handle the case when the component is destroyed before the source observable emits.\n * This operator ensures that the source observable completes gracefully without throwing an error.\n * https://github.com/angular/angular/issues/54527#issuecomment-2098254508\n *\n * @internal\n */\nexport function safeTakeUntilDestroyed<T>(destroyRef?: DestroyRef): MonoTypeOperatorFunction<T> {\n  return pipe(\n    takeUntil(\n      NEVER.pipe(\n        takeUntilDestroyed(destroyRef),\n        catchError(() => EMPTY),\n        defaultIfEmpty(null),\n      ),\n    ),\n  );\n}\n","import { DestroyRef, Signal, WritableSignal, afterNextRender, inject, signal } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { safeTakeUntilDestroyed } from '../observables/take-until-destroyed';\n\nexport interface NgpControlStatus {\n  valid: boolean | null;\n  invalid: boolean | null;\n  pristine: boolean | null;\n  dirty: boolean | null;\n  touched: boolean | null;\n  pending: boolean | null;\n  disabled: boolean | null;\n}\n\nfunction setStatusSignal(\n  control: NgControl | null,\n  status: WritableSignal<NgpControlStatus>,\n): void {\n  if (!control?.control) {\n    return;\n  }\n\n  status.set({\n    valid: control?.control?.valid ?? null,\n    invalid: control?.control?.invalid ?? null,\n    pristine: control?.control?.pristine ?? null,\n    dirty: control?.control?.dirty ?? null,\n    touched: control?.control?.touched ?? null,\n    pending: control?.control?.pending ?? null,\n    disabled: control?.control?.disabled ?? null,\n  });\n}\n\nfunction subscribeToControlStatus(\n  control: NgControl | null,\n  status: WritableSignal<NgpControlStatus>,\n  destroyRef?: DestroyRef,\n): void {\n  if (!control?.control) {\n    return;\n  }\n\n  control.control.events\n    .pipe(safeTakeUntilDestroyed(destroyRef))\n    .subscribe(() => setStatusSignal(control, status));\n}\n\n/**\n * A utility function to get the status of an Angular form control as a reactive signal.\n * This function injects the NgControl and returns a signal that reflects the control's status.\n * @internal\n */\nexport function controlStatus(): Signal<NgpControlStatus> {\n  const control = inject(NgControl, { optional: true });\n  const destroyRef = inject(DestroyRef);\n\n  const status = signal<NgpControlStatus>({\n    valid: null,\n    invalid: null,\n    pristine: null,\n    dirty: null,\n    touched: null,\n    pending: null,\n    disabled: null,\n  });\n\n  // Fallback if control is not yet available\n  if (!control?.control) {\n    // There is still a chance that the control will be available i.e. after executing OnInit lifecycle hook\n    // in `formControlName` directive, so we set up an effect to subscribe to the control status\n    afterNextRender({\n      write: () => {\n        // If control is still not available, we do nothing, otherwise we subscribe to the control status\n        if (control?.control) {\n          subscribeToControlStatus(control, status, destroyRef);\n          // We re-set the status to ensure it reflects the current state on initialization\n          setStatusSignal(control, status);\n        }\n      },\n    });\n    return status;\n  }\n\n  subscribeToControlStatus(control, status);\n\n  return status;\n}\n","import { afterNextRender, Signal } from '@angular/core';\n\nexport function booleanAttributeBinding(\n  element: HTMLElement,\n  attribute: string,\n  value: Signal<boolean> | undefined,\n): void {\n  if (!value) {\n    return;\n  }\n\n  afterNextRender({\n    write: () =>\n      value() ? element.setAttribute(attribute, '') : element.removeAttribute(attribute),\n  });\n}\n","import { DestroyRef, inject } from '@angular/core';\n\n/**\n * Disposable functions are a way to manage timers, intervals, and event listeners\n * that should be cleared when a component is destroyed.\n *\n * This is heavily inspired by Headless UI disposables:\n * https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/utils/disposables.ts\n */\nexport function injectDisposables() {\n  const destroyRef = inject(DestroyRef);\n  let isDestroyed = false;\n\n  destroyRef.onDestroy(() => (isDestroyed = true));\n\n  return {\n    /**\n     * Set a timeout that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @param delay The delay before the callback is executed\n     * @returns A function to clear the timeout\n     */\n    setTimeout: (callback: () => void, delay: number) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      const id = setTimeout(callback, delay);\n      const cleanup = () => clearTimeout(id);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n    /**\n     * Set an interval that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @param delay The delay before the callback is executed\n     * @param target\n     * @param type\n     * @param listener\n     * @param options\n     * @returns A function to clear the interval\n     */\n    addEventListener: <K extends keyof HTMLElementEventMap>(\n      target: EventTarget,\n      type: K,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,\n      options?: boolean | AddEventListenerOptions,\n    ) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      target.addEventListener(type, listener as EventListenerOrEventListenerObject, options);\n      const cleanup = () =>\n        target.removeEventListener(type, listener as EventListenerOrEventListenerObject, options);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n    /**\n     * Set an interval that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @param delay The delay before the callback is executed\n     * @returns A function to clear the interval\n     */\n    setInterval: (callback: () => void, delay: number) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      const id = setInterval(callback, delay);\n      const cleanup = () => clearInterval(id);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n    /**\n     * Set a requestAnimationFrame that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @returns A function to clear the requestAnimationFrame\n     */\n    requestAnimationFrame: (callback: FrameRequestCallback) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      const id = requestAnimationFrame(callback);\n      const cleanup = () => cancelAnimationFrame(id);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n  };\n}\n","/**\n * Store a map of unique ids for elements so that there are no collisions.\n */\nconst uniqueIdMap = new Map<string, number>();\n\n/**\n * Generate a unique id for an element\n * @param prefix - The prefix to use for the id\n * @returns The generated id\n */\nexport function uniqueId(prefix: string): string {\n  const id = uniqueIdMap.get(prefix) ?? 0;\n  uniqueIdMap.set(prefix, id + 1);\n  return `${prefix}-${id}`;\n}\n","import { effect, Injector, Signal, signal, untracked } from '@angular/core';\n\n/**\n * Listen for changes to a signal and call a function when the signal changes.\n * @param source\n * @param fn\n * @param options\n * @param options.injector\n * @internal\n */\nexport function onChange<T>(\n  source: Signal<T | null | undefined>,\n  fn: (value: T | null | undefined, previousValue: T | null | undefined) => void,\n  options?: { injector: Injector },\n): void {\n  const previousValue = signal(source());\n\n  effect(\n    () => {\n      const value = source();\n      if (value !== previousValue()) {\n        untracked(() => fn(value, previousValue()));\n        previousValue.set(value);\n      }\n    },\n    { injector: options?.injector },\n  );\n\n  // call the fn with the initial value\n  fn(source(), null);\n}\n\n/**\n * Listen for changes to a boolean signal and call one of two functions when the signal changes.\n * @param source\n * @param onTrue\n * @param onFalse\n * @param options\n */\nexport function onBooleanChange(\n  source: Signal<boolean>,\n  onTrue?: () => void,\n  onFalse?: () => void,\n  options?: { injector: Injector },\n): void {\n  onChange(source, value => (value ? onTrue?.() : onFalse?.()), options);\n}\n","import { ElementRef, Renderer2, afterNextRender, inject, signal } from '@angular/core';\n\n/**\n * Injects the dimensions of the element\n * @returns The dimensions of the element\n */\nexport function injectDimensions() {\n  const renderer = inject(Renderer2);\n  const element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  const size = signal<{ width: number; height: number; mounted: boolean }>({\n    width: 0,\n    height: 0,\n    mounted: false,\n  });\n  let transitionDuration: string | undefined, animationName: string | undefined;\n\n  afterNextRender({\n    earlyRead: () => {\n      transitionDuration = element.style.transitionDuration;\n      animationName = element.style.animationName;\n    },\n    write: () => {\n      // block any animations/transitions so the element renders at its full dimensions\n      renderer.setStyle(element, 'transitionDuration', '0s');\n      renderer.setStyle(element, 'animationName', 'none');\n    },\n    read: () => {\n      const { width, height } = element.getBoundingClientRect();\n      size.set({ width, height, mounted: true });\n      // restore the original transition duration and animation name\n      renderer.setStyle(element, 'transitionDuration', transitionDuration);\n      renderer.setStyle(element, 'animationName', animationName);\n    },\n  });\n\n  return size;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-primitives-utils.mjs","sources":["../../../../packages/ng-primitives/utils/src/forms/providers.ts","../../../../packages/ng-primitives/utils/src/observables/take-until-destroyed.ts","../../../../packages/ng-primitives/utils/src/forms/status.ts","../../../../packages/ng-primitives/utils/src/helpers/attributes.ts","../../../../packages/ng-primitives/utils/src/helpers/disposables.ts","../../../../packages/ng-primitives/utils/src/helpers/unique-id.ts","../../../../packages/ng-primitives/utils/src/signals/index.ts","../../../../packages/ng-primitives/utils/src/ui/dimensions.ts","../../../../packages/ng-primitives/utils/src/ng-primitives-utils.ts"],"sourcesContent":["import { ExistingProvider, Type } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n/**\n * A simple helper function to provide a value accessor for a given type.\n * @param type The type to provide the value accessor for\n */\nexport function provideValueAccessor<T>(type: Type<T>): ExistingProvider {\n  return { provide: NG_VALUE_ACCESSOR, useExisting: type, multi: true };\n}\n","/* eslint-disable @nx/workspace-take-until-destroyed */\nimport { DestroyRef } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { EMPTY, MonoTypeOperatorFunction, NEVER, pipe } from 'rxjs';\nimport { catchError, defaultIfEmpty, takeUntil } from 'rxjs/operators';\n\n/**\n * The built-in `takeUntilDestroyed` operator does not handle the case when the component is destroyed before the source observable emits.\n * This operator ensures that the source observable completes gracefully without throwing an error.\n * https://github.com/angular/angular/issues/54527#issuecomment-2098254508\n *\n * @internal\n */\nexport function safeTakeUntilDestroyed<T>(destroyRef?: DestroyRef): MonoTypeOperatorFunction<T> {\n  return pipe(\n    takeUntil(\n      NEVER.pipe(\n        takeUntilDestroyed(destroyRef),\n        catchError(() => EMPTY),\n        defaultIfEmpty(null),\n      ),\n    ),\n  );\n}\n","import { DestroyRef, Signal, WritableSignal, afterNextRender, inject, signal } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { safeTakeUntilDestroyed } from '../observables/take-until-destroyed';\n\nexport interface NgpControlStatus {\n  valid: boolean | null;\n  invalid: boolean | null;\n  pristine: boolean | null;\n  dirty: boolean | null;\n  touched: boolean | null;\n  pending: boolean | null;\n  disabled: boolean | null;\n}\n\nfunction setStatusSignal(\n  control: NgControl | null,\n  status: WritableSignal<NgpControlStatus>,\n): void {\n  if (!control?.control) {\n    return;\n  }\n\n  status.set({\n    valid: control?.control?.valid ?? null,\n    invalid: control?.control?.invalid ?? null,\n    pristine: control?.control?.pristine ?? null,\n    dirty: control?.control?.dirty ?? null,\n    touched: control?.control?.touched ?? null,\n    pending: control?.control?.pending ?? null,\n    disabled: control?.control?.disabled ?? null,\n  });\n}\n\nfunction subscribeToControlStatus(\n  control: NgControl | null,\n  status: WritableSignal<NgpControlStatus>,\n  destroyRef?: DestroyRef,\n): void {\n  if (!control?.control) {\n    return;\n  }\n\n  control.control.events\n    .pipe(safeTakeUntilDestroyed(destroyRef))\n    .subscribe(() => setStatusSignal(control, status));\n}\n\n/**\n * A utility function to get the status of an Angular form control as a reactive signal.\n * This function injects the NgControl and returns a signal that reflects the control's status.\n * @internal\n */\nexport function controlStatus(): Signal<NgpControlStatus> {\n  const control = inject(NgControl, { optional: true });\n  const destroyRef = inject(DestroyRef);\n\n  const status = signal<NgpControlStatus>({\n    valid: null,\n    invalid: null,\n    pristine: null,\n    dirty: null,\n    touched: null,\n    pending: null,\n    disabled: null,\n  });\n\n  // Fallback if control is not yet available\n  if (!control?.control) {\n    // There is still a chance that the control will be available i.e. after executing OnInit lifecycle hook\n    // in `formControlName` directive, so we set up an effect to subscribe to the control status\n    afterNextRender({\n      write: () => {\n        // If control is still not available, we do nothing, otherwise we subscribe to the control status\n        if (control?.control) {\n          subscribeToControlStatus(control, status, destroyRef);\n          // We re-set the status to ensure it reflects the current state on initialization\n          setStatusSignal(control, status);\n        }\n      },\n    });\n    return status;\n  }\n\n  subscribeToControlStatus(control, status);\n\n  return status;\n}\n","import { afterRenderEffect, Signal } from '@angular/core';\n\nexport function booleanAttributeBinding(\n  element: HTMLElement,\n  attribute: string,\n  value: Signal<boolean> | undefined,\n): void {\n  if (!value) {\n    return;\n  }\n\n  afterRenderEffect({\n    write: () =>\n      value() ? element.setAttribute(attribute, '') : element.removeAttribute(attribute),\n  });\n}\n","import { DestroyRef, inject } from '@angular/core';\n\n/**\n * Disposable functions are a way to manage timers, intervals, and event listeners\n * that should be cleared when a component is destroyed.\n *\n * This is heavily inspired by Headless UI disposables:\n * https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/utils/disposables.ts\n */\nexport function injectDisposables() {\n  const destroyRef = inject(DestroyRef);\n  let isDestroyed = false;\n\n  destroyRef.onDestroy(() => (isDestroyed = true));\n\n  return {\n    /**\n     * Set a timeout that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @param delay The delay before the callback is executed\n     * @returns A function to clear the timeout\n     */\n    setTimeout: (callback: () => void, delay: number) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      const id = setTimeout(callback, delay);\n      const cleanup = () => clearTimeout(id);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n    /**\n     * Set an interval that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @param delay The delay before the callback is executed\n     * @param target\n     * @param type\n     * @param listener\n     * @param options\n     * @returns A function to clear the interval\n     */\n    addEventListener: <K extends keyof HTMLElementEventMap>(\n      target: EventTarget,\n      type: K,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,\n      options?: boolean | AddEventListenerOptions,\n    ) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      target.addEventListener(type, listener as EventListenerOrEventListenerObject, options);\n      const cleanup = () =>\n        target.removeEventListener(type, listener as EventListenerOrEventListenerObject, options);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n    /**\n     * Set an interval that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @param delay The delay before the callback is executed\n     * @returns A function to clear the interval\n     */\n    setInterval: (callback: () => void, delay: number) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      const id = setInterval(callback, delay);\n      const cleanup = () => clearInterval(id);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n    /**\n     * Set a requestAnimationFrame that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @returns A function to clear the requestAnimationFrame\n     */\n    requestAnimationFrame: (callback: FrameRequestCallback) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      const id = requestAnimationFrame(callback);\n      const cleanup = () => cancelAnimationFrame(id);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n  };\n}\n","/**\n * Store a map of unique ids for elements so that there are no collisions.\n */\nconst uniqueIdMap = new Map<string, number>();\n\n/**\n * Generate a unique id for an element\n * @param prefix - The prefix to use for the id\n * @returns The generated id\n */\nexport function uniqueId(prefix: string): string {\n  const id = uniqueIdMap.get(prefix) ?? 0;\n  uniqueIdMap.set(prefix, id + 1);\n  return `${prefix}-${id}`;\n}\n","import { effect, Injector, Signal, signal, untracked } from '@angular/core';\n\n/**\n * Listen for changes to a signal and call a function when the signal changes.\n * @param source\n * @param fn\n * @param options\n * @param options.injector\n * @internal\n */\nexport function onChange<T>(\n  source: Signal<T | null | undefined>,\n  fn: (value: T | null | undefined, previousValue: T | null | undefined) => void,\n  options?: { injector: Injector },\n): void {\n  const previousValue = signal(source());\n\n  effect(\n    () => {\n      const value = source();\n      if (value !== previousValue()) {\n        untracked(() => fn(value, previousValue()));\n        previousValue.set(value);\n      }\n    },\n    { injector: options?.injector },\n  );\n\n  // call the fn with the initial value\n  fn(source(), null);\n}\n\n/**\n * Listen for changes to a boolean signal and call one of two functions when the signal changes.\n * @param source\n * @param onTrue\n * @param onFalse\n * @param options\n */\nexport function onBooleanChange(\n  source: Signal<boolean>,\n  onTrue?: () => void,\n  onFalse?: () => void,\n  options?: { injector: Injector },\n): void {\n  onChange(source, value => (value ? onTrue?.() : onFalse?.()), options);\n}\n","import { ElementRef, Renderer2, afterNextRender, inject, signal } from '@angular/core';\n\n/**\n * Injects the dimensions of the element\n * @returns The dimensions of the element\n */\nexport function injectDimensions() {\n  const renderer = inject(Renderer2);\n  const element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  const size = signal<{ width: number; height: number; mounted: boolean }>({\n    width: 0,\n    height: 0,\n    mounted: false,\n  });\n  let transitionDuration: string | undefined, animationName: string | undefined;\n\n  afterNextRender({\n    earlyRead: () => {\n      transitionDuration = element.style.transitionDuration;\n      animationName = element.style.animationName;\n    },\n    write: () => {\n      // block any animations/transitions so the element renders at its full dimensions\n      renderer.setStyle(element, 'transitionDuration', '0s');\n      renderer.setStyle(element, 'animationName', 'none');\n    },\n    read: () => {\n      const { width, height } = element.getBoundingClientRect();\n      size.set({ width, height, mounted: true });\n      // restore the original transition duration and animation name\n      renderer.setStyle(element, 'transitionDuration', transitionDuration);\n      renderer.setStyle(element, 'animationName', animationName);\n    },\n  });\n\n  return size;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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.64.0",
+  "version": "0.65.0",
   "keywords": [
     "angular",
     "primitives",
@@ -75,14 +75,14 @@
       "types": "./autofill/index.d.ts",
       "default": "./fesm2022/ng-primitives-autofill.mjs"
     },
-    "./button": {
-      "types": "./button/index.d.ts",
-      "default": "./fesm2022/ng-primitives-button.mjs"
-    },
     "./avatar": {
       "types": "./avatar/index.d.ts",
       "default": "./fesm2022/ng-primitives-avatar.mjs"
     },
+    "./button": {
+      "types": "./button/index.d.ts",
+      "default": "./fesm2022/ng-primitives-button.mjs"
+    },
     "./checkbox": {
       "types": "./checkbox/index.d.ts",
       "default": "./fesm2022/ng-primitives-checkbox.mjs"
@@ -155,6 +155,10 @@
       "types": "./popover/index.d.ts",
       "default": "./fesm2022/ng-primitives-popover.mjs"
     },
+    "./portal": {
+      "types": "./portal/index.d.ts",
+      "default": "./fesm2022/ng-primitives-portal.mjs"
+    },
     "./progress": {
       "types": "./progress/index.d.ts",
       "default": "./fesm2022/ng-primitives-progress.mjs"
@@ -163,10 +167,6 @@
       "types": "./radio/index.d.ts",
       "default": "./fesm2022/ng-primitives-radio.mjs"
     },
-    "./portal": {
-      "types": "./portal/index.d.ts",
-      "default": "./fesm2022/ng-primitives-portal.mjs"
-    },
     "./resize": {
       "types": "./resize/index.d.ts",
       "default": "./fesm2022/ng-primitives-resize.mjs"
@@ -207,14 +207,18 @@
       "types": "./textarea/index.d.ts",
       "default": "./fesm2022/ng-primitives-textarea.mjs"
     },
-    "./toggle-group": {
-      "types": "./toggle-group/index.d.ts",
-      "default": "./fesm2022/ng-primitives-toggle-group.mjs"
-    },
     "./toast": {
       "types": "./toast/index.d.ts",
       "default": "./fesm2022/ng-primitives-toast.mjs"
     },
+    "./toggle": {
+      "types": "./toggle/index.d.ts",
+      "default": "./fesm2022/ng-primitives-toggle.mjs"
+    },
+    "./toggle-group": {
+      "types": "./toggle-group/index.d.ts",
+      "default": "./fesm2022/ng-primitives-toggle-group.mjs"
+    },
     "./toolbar": {
       "types": "./toolbar/index.d.ts",
       "default": "./fesm2022/ng-primitives-toolbar.mjs"
@@ -226,10 +230,6 @@
     "./utils": {
       "types": "./utils/index.d.ts",
       "default": "./fesm2022/ng-primitives-utils.mjs"
-    },
-    "./toggle": {
-      "types": "./toggle/index.d.ts",
-      "default": "./fesm2022/ng-primitives-toggle.mjs"
     }
   },
   "module": "fesm2022/ng-primitives.mjs",

package/schematics/ng-generate/__snapshots__/index.spec.ts.snap

@@ -17,7 +17,11 @@ export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'outline'
 @Component({
   selector: 'button[app-button]',
   hostDirectives: [{ directive: NgpButton, inputs: ['disabled'] }],
-  template: '<ng-content />',
+  template: \`
+    <ng-content select="[slot=leading]" />
+    <ng-content />
+    <ng-content select="[slot=trailing]" />
+  \`,
   host: {
     '[attr.data-size]': 'size()',
     '[attr.data-variant]': 'variant()',
@@ -41,8 +45,56 @@ export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'outline'
       align-items: center;
       justify-content: center;
       cursor: pointer;
+      gap: 0.5rem;
+    }
+
+    :host[data-hover] {
+      background-color: var(--ngp-background-hover);
+    }
+
+    :host[data-focus-visible] {
+      outline: 2px solid var(--ngp-focus-ring);
+    }
+
+    :host[data-press] {
+      background-color: var(--ngp-background-active);
+    }
+
+    /* Size variants */
+    :host[data-size='sm'] {
+      height: 2rem;
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+      font-size: 0.875rem;
+      --ng-icon__size: 0.875rem;
     }
 
+    :host[data-size='md'],
+    :host:not([data-size]) {
+      height: 2.5rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      font-size: 0.875rem;
+      --ng-icon__size: 0.875rem;
+    }
+
+    :host[data-size='lg'] {
+      height: 3rem;
+      padding-left: 1.25rem;
+      padding-right: 1.25rem;
+      font-size: 1rem;
+      --ng-icon__size: 1rem;
+    }
+
+    :host[data-size='xl'] {
+      height: 3.5rem;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+      font-size: 1.125rem;
+      --ng-icon__size: 1.125rem;
+    }
+
+    /* Variant styles */
     :host[data-variant='primary'],
     :host:not([data-variant]) {
       background-color: var(--ngp-background);
@@ -116,58 +168,25 @@ export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'outline'
     }
 
     :host[data-variant='ghost'][data-press] {
-      background-color: var(--ngp-ghost-background-active, rgba(15, 23, 42, 0.1));
+      background-color: var(--ngp-background-active);
     }
 
     :host[data-variant='link'] {
       background-color: transparent;
-      color: var(--ngp-text-primary);
+      color: var(--ngp-link-color, #3b82f6);
       border: none;
       box-shadow: none;
-      text-decoration-line: none;
-      height: auto;
-      padding: 0;
+      text-decoration: underline;
+      text-underline-offset: 4px;
     }
 
     :host[data-variant='link'][data-hover] {
-      text-decoration-line: underline;
-    }
-
-    :host[data-variant='link'][data-press] {
-      text-decoration-line: underline;
-    }
-
-    :host[data-focus-visible] {
-      outline: 2px solid var(--ngp-focus-ring);
-    }
-
-    :host[data-size='sm'] {
-      height: 2rem;
-      padding-left: 0.75rem;
-      padding-right: 0.75rem;
-      font-size: 0.875rem;
-    }
-
-    :host[data-size='md'],
-    :host:not([data-size]) {
-      height: 2.5rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      font-size: 0.875rem;
+      text-decoration-thickness: 2px;
     }
 
-    :host[data-size='lg'] {
-      height: 3rem;
-      padding-left: 1.25rem;
-      padding-right: 1.25rem;
-      font-size: 1rem;
-    }
-
-    :host[data-size='xl'] {
-      height: 3.5rem;
-      padding-left: 1.5rem;
-      padding-right: 1.5rem;
-      font-size: 1.125rem;
+    :host[disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
     }
   \`,
 })

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

@@ -14,7 +14,11 @@ export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'outline'
 @Component({
   selector: 'button[<%= prefix %>-button]',
   hostDirectives: [{ directive: NgpButton, inputs: ['disabled'] }],
-  template: '<ng-content />',
+  template: `
+    <ng-content select="[slot=leading]" />
+    <ng-content />
+    <ng-content select="[slot=trailing]" />
+  `,
   host: {
     '[attr.data-size]': 'size()',
     '[attr.data-variant]': 'variant()',
@@ -38,8 +42,56 @@ export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'outline'
       align-items: center;
       justify-content: center;
       cursor: pointer;
+      gap: 0.5rem;
+    }
+
+    :host[data-hover] {
+      background-color: var(--ngp-background-hover);
+    }
+
+    :host[data-focus-visible] {
+      outline: 2px solid var(--ngp-focus-ring);
+    }
+
+    :host[data-press] {
+      background-color: var(--ngp-background-active);
+    }
+
+    /* Size variants */
+    :host[data-size='sm'] {
+      height: 2rem;
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+      font-size: 0.875rem;
+      --ng-icon__size: 0.875rem;
+    }
+
+    :host[data-size='md'],
+    :host:not([data-size]) {
+      height: 2.5rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      font-size: 0.875rem;
+      --ng-icon__size: 0.875rem;
     }
 
+    :host[data-size='lg'] {
+      height: 3rem;
+      padding-left: 1.25rem;
+      padding-right: 1.25rem;
+      font-size: 1rem;
+      --ng-icon__size: 1rem;
+    }
+
+    :host[data-size='xl'] {
+      height: 3.5rem;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+      font-size: 1.125rem;
+      --ng-icon__size: 1.125rem;
+    }
+
+    /* Variant styles */
     :host[data-variant='primary'],
     :host:not([data-variant]) {
       background-color: var(--ngp-background);
@@ -113,58 +165,25 @@ export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'outline'
     }
 
     :host[data-variant='ghost'][data-press] {
-      background-color: var(--ngp-ghost-background-active, rgba(15, 23, 42, 0.1));
+      background-color: var(--ngp-background-active);
     }
 
     :host[data-variant='link'] {
       background-color: transparent;
-      color: var(--ngp-text-primary);
+      color: var(--ngp-link-color, #3b82f6);
       border: none;
       box-shadow: none;
-      text-decoration-line: none;
-      height: auto;
-      padding: 0;
+      text-decoration: underline;
+      text-underline-offset: 4px;
     }
 
     :host[data-variant='link'][data-hover] {
-      text-decoration-line: underline;
-    }
-
-    :host[data-variant='link'][data-press] {
-      text-decoration-line: underline;
-    }
-
-    :host[data-focus-visible] {
-      outline: 2px solid var(--ngp-focus-ring);
+      text-decoration-thickness: 2px;
     }
 
-    :host[data-size='sm'] {
-      height: 2rem;
-      padding-left: 0.75rem;
-      padding-right: 0.75rem;
-      font-size: 0.875rem;
-    }
-
-    :host[data-size='md'],
-    :host:not([data-size]) {
-      height: 2.5rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      font-size: 0.875rem;
-    }
-
-    :host[data-size='lg'] {
-      height: 3rem;
-      padding-left: 1.25rem;
-      padding-right: 1.25rem;
-      font-size: 1rem;
-    }
-
-    :host[data-size='xl'] {
-      height: 3.5rem;
-      padding-left: 1.5rem;
-      padding-right: 1.5rem;
-      font-size: 1.125rem;
+    :host[disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
     }
   `,
 })