@tekus/design-system 5.23.0 → 5.24.0

package/types/tekus-design-system-components-checkbox.d.ts

@@ -1,13 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, OnDestroy } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
 
-declare class CheckboxComponent implements ControlValueAccessor, OnInit, OnDestroy {
-    /** Internal references and injections */
+declare class CheckboxComponent implements ControlValueAccessor, OnInit {
     readonly ngControl: NgControl | null;
-    /**
-     * Initialize the component and register it as a ControlValueAccessor.
-     */
+    private readonly destroyRef;
     constructor();
     /** Properties and Signals */
     /**
@@ -78,9 +75,7 @@ declare class CheckboxComponent implements ControlValueAccessor, OnInit, OnDestr
     get effectiveControl(): FormControl;
     onChange: (value: unknown) => void;
     onTouched: () => void;
-    private readonly subscription;
     ngOnInit(): void;
-    ngOnDestroy(): void;
     /**
      * Implementation of ControlValueAccessor: Writes a new value from the form.
      */

package/types/tekus-design-system-components-date-picker.d.ts

@@ -4,9 +4,10 @@ import { OnInit, OnDestroy } from '@angular/core';
 import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
 
 type DateValue = Date | [Date, Date] | null;
-declare class DatePickerComponent implements OnInit, OnDestroy, ControlValueAccessor {
+declare class DatePickerComponent implements OnInit, ControlValueAccessor, OnDestroy {
     /** Internal references and injections */
     readonly ngControl: NgControl | null;
+    private readonly destroyRef;
     constructor();
     /**
      * @property {InputSignal<'date' | 'time' | 'both'>} variant
@@ -116,9 +117,16 @@ declare class DatePickerComponent implements OnInit, OnDestroy, ControlValueAcce
      * @property {InputSignal<string | HTMLElement | null | undefined>} appendTo
      * @description
      * Target element to attach the overlay to.
-     * @default 'body'
+     * @default 'null'
      */
     appendTo: _angular_core.InputSignal<string | HTMLElement | null | undefined>;
+    /**
+     * @property {InputSignal<number>} baseZIndex
+     * @description
+     * Base z-index value for the overlay.
+     * @default 10000
+     */
+    baseZIndex: _angular_core.InputSignal<number>;
     /**
      * @property {InputSignal<Date | null>} maxDate
      * @description
@@ -236,7 +244,7 @@ declare class DatePickerComponent implements OnInit, OnDestroy, ControlValueAcce
      */
     clear(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatePickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent, "tk-date-picker", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "stepHour": { "alias": "stepHour"; "required": false; "isSignal": true; }; "stepMinute": { "alias": "stepMinute"; "required": false; "isSignal": true; }; "stepSecond": { "alias": "stepSecond"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "modelValue": { "alias": "modelValue"; "required": false; "isSignal": true; }; }, { "modelValue": "modelValueChange"; "handleSelect": "handleSelect"; "handleClear": "handleClear"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent, "tk-date-picker", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "stepHour": { "alias": "stepHour"; "required": false; "isSignal": true; }; "stepMinute": { "alias": "stepMinute"; "required": false; "isSignal": true; }; "stepSecond": { "alias": "stepSecond"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "modelValue": { "alias": "modelValue"; "required": false; "isSignal": true; }; }, { "modelValue": "modelValueChange"; "handleSelect": "handleSelect"; "handleClear": "handleClear"; }, never, never, true, never>;
 }
 
 export { DatePickerComponent };

package/types/tekus-design-system-components-drawer.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { Type, OnDestroy, EventEmitter, ComponentRef } from '@angular/core';
+import { Type, OnDestroy, ComponentRef } from '@angular/core';
 import { Variant } from '@tekus/design-system/components/button';
 import { SeverityType } from '@tekus/design-system/components/modal';
 import { TkCloseInterceptor } from '@tekus/design-system/core/types';
@@ -90,7 +90,7 @@ declare class DrawerComponent<T = unknown> implements OnDestroy {
     /** Whether the drawer content has a scrollbar */
     hasScroll: boolean;
     /** Emits when the drawer closes, passing the return value from header action or null */
-    readonly onClose: EventEmitter<unknown>;
+    readonly closed: _angular_core.OutputEmitterRef<unknown>;
     private alreadyEmitted;
     private returnValueOnClose;
     constructor();
@@ -123,7 +123,7 @@ declare class DrawerComponent<T = unknown> implements OnDestroy {
     handleHeaderAction(action: (() => void) | undefined, returnValue: unknown): void;
     private resetClosureState;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerComponent<any>, "tk-drawer", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "headerAction": { "alias": "headerAction"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "interceptor": { "alias": "interceptor"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerComponent<any>, "tk-drawer", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "headerAction": { "alias": "headerAction"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "interceptor": { "alias": "interceptor"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; "closed": "closed"; }, never, never, true, never>;
 }
 
 declare class DrawerService {

package/types/tekus-design-system-components-fallback-view.d.ts

@@ -1,12 +1,11 @@
-import * as i0 from '@angular/core';
-import { EventEmitter } from '@angular/core';
+import * as _angular_core from '@angular/core';
 
 type FallbackViewType = 'content' | 'section';
 /**
  * @component FallbackViewComponent
  * @description
  * A reusable component for displaying fallback or empty states such as
- * “no results found”, “error loading data”, or “content not available”.
+ * "no results found", "error loading data", or "content not available".
  * It provides a consistent structure with support for an image, title,
  * message, and optional action buttons.
  *
@@ -68,9 +67,9 @@ declare class FallbackViewComponent {
      * - `'content'`: Standard size.
      * - `'section'`: A more compact version.
      *
-     * @default `'default'`
+     * @default `'content'`
      */
-    type: FallbackViewType;
+    type: _angular_core.InputSignal<FallbackViewType>;
     /**
      * @property {string} imageSrc
      * @description
@@ -78,12 +77,12 @@ declare class FallbackViewComponent {
      *
      * @default `''`
      */
-    imageSrc: string;
+    imageSrc: _angular_core.InputSignal<string>;
     /**
      * @property {string} illustrationAlt
      * Descriptive alternative text for the image. Improves accessibility.
      */
-    illustrationAlt: string;
+    illustrationAlt: _angular_core.InputSignal<string>;
     /**
      * @property {string} title
      * @description
@@ -91,7 +90,7 @@ declare class FallbackViewComponent {
      *
      * @default `''`
      */
-    title: string;
+    title: _angular_core.InputSignal<string>;
     /**
      * @property {string} message
      * @description
@@ -99,7 +98,7 @@ declare class FallbackViewComponent {
      *
      * @default `''`
      */
-    message: string;
+    message: _angular_core.InputSignal<string>;
     /**
      * @property {string} buttonLabel
      * @description
@@ -107,7 +106,7 @@ declare class FallbackViewComponent {
      *
      * @default `''`
      */
-    buttonLabel: string;
+    buttonLabel: _angular_core.InputSignal<string>;
     /**
      * @property {string} linkLabel
      * @description
@@ -116,7 +115,7 @@ declare class FallbackViewComponent {
      *
      * @default `''`
      */
-    linkLabel: string;
+    linkLabel: _angular_core.InputSignal<string>;
     /**
      * @property {boolean} buttonDisabled
      * @description
@@ -125,25 +124,25 @@ declare class FallbackViewComponent {
      *
      * @default false
      */
-    buttonDisabled: boolean;
+    buttonDisabled: _angular_core.InputSignal<boolean>;
     /**
      * @event buttonAction
      * @description
      * Emits when the main action button is clicked. Listen to this event
      * to handle the primary call-to-action.
      */
-    buttonAction: EventEmitter<void>;
+    buttonAction: _angular_core.OutputEmitterRef<void>;
     /**
      * @event linkAction
      * @description
      * Emits when the link-styled button is clicked. Use for secondary
      * or alternative actions.
      */
-    linkAction: EventEmitter<void>;
+    linkAction: _angular_core.OutputEmitterRef<void>;
     /**
-     * @method  onButtonActionClick
+     * @method onButtonActionClick
      * @description
-     * Internal handler that emits the `primaryAction` event when the
+     * Internal handler that emits the `buttonAction` event when the
      * main button is clicked.
      */
     onButtonActionClick(): void;
@@ -154,8 +153,8 @@ declare class FallbackViewComponent {
      * link button is clicked.
      */
     onLinkActionClick(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FallbackViewComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FallbackViewComponent, "tk-fallback-view", never, { "type": { "alias": "type"; "required": false; }; "imageSrc": { "alias": "imageSrc"; "required": false; }; "illustrationAlt": { "alias": "illustrationAlt"; "required": false; }; "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; }; "linkLabel": { "alias": "linkLabel"; "required": false; }; "buttonDisabled": { "alias": "buttonDisabled"; "required": false; }; }, { "buttonAction": "buttonAction"; "linkAction": "linkAction"; }, never, ["[image]", "[title]", "[message]", "[actions]"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FallbackViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FallbackViewComponent, "tk-fallback-view", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; "illustrationAlt": { "alias": "illustrationAlt"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "linkLabel": { "alias": "linkLabel"; "required": false; "isSignal": true; }; "buttonDisabled": { "alias": "buttonDisabled"; "required": false; "isSignal": true; }; }, { "buttonAction": "buttonAction"; "linkAction": "linkAction"; }, never, ["[image]", "[title]", "[message]", "[actions]"], true, never>;
 }
 
 export { FallbackViewComponent };

package/types/tekus-design-system-components-icon.d.ts

@@ -1,5 +1,4 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, EffectRef } from '@angular/core';
 import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
 import { SizeProp, IconProp } from '@fortawesome/fontawesome-svg-core';
 
@@ -30,31 +29,31 @@ type IconStylesGeneral = IconStylesLight | IconStylesSolid | IconStylesRegular |
 type IconColors = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | null;
 
 type SizeMap = SizeProp | 'md';
-declare class IconComponent implements OnDestroy {
+declare class IconComponent {
     /**
      * The name of the icon to display.
      * This is a required field.
      * It should match one of the icons in the *IconCatalog*.
      */
-    icon: _angular_core.ModelSignal<string>;
+    icon: _angular_core.InputSignal<string>;
     /**
      * The style of the icon to display.
      * This is an optional field.
      * It defaults to 'regular'.
      */
-    styleIcon: _angular_core.ModelSignal<IconStylesGeneral>;
+    styleIcon: _angular_core.InputSignal<IconStylesGeneral>;
     /**
      * The color of the icon to display.
      */
-    color: _angular_core.ModelSignal<IconColors | undefined>;
+    color: _angular_core.InputSignal<IconColors | undefined>;
     /**
      * The size of the icon to display.
      */
-    size: _angular_core.ModelSignal<SizeMap | undefined>;
+    size: _angular_core.InputSignal<SizeMap | undefined>;
     /**
      * Whether the icon is disabled.
      */
-    disabled: _angular_core.ModelSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
     /**
      * The definition of the icon to display for Font Awesome.
      */
@@ -71,15 +70,7 @@ declare class IconComponent implements OnDestroy {
      * The size property to use for the icon.
      */
     sizeProp: _angular_core.Signal<SizeProp | null>;
-    /**
-     * The effect reference for the icon.
-     */
-    iconEffect: EffectRef;
     constructor();
-    /**
-     * Destroy icon effect
-     */
-    ngOnDestroy(): void;
     /**
      * Gets the icon to display.
      */
@@ -101,7 +92,7 @@ declare class IconComponent implements OnDestroy {
      */
     loadIconCustom(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "tk-icon", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "styleIcon": { "alias": "styleIcon"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "icon": "iconChange"; "styleIcon": "styleIconChange"; "color": "colorChange"; "size": "sizeChange"; "disabled": "disabledChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "tk-icon", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "styleIcon": { "alias": "styleIcon"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { IconComponent };

package/types/tekus-design-system-components-input-number.d.ts

@@ -1,9 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, OnDestroy } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
 
-declare class InputNumberComponent implements ControlValueAccessor, OnInit, OnDestroy {
+declare class InputNumberComponent implements ControlValueAccessor, OnInit {
     readonly ngControl: NgControl | null;
+    private readonly destroyRef;
     constructor();
     /**
      * @property {ModelSignal<number | null>} value
@@ -54,9 +55,7 @@ declare class InputNumberComponent implements ControlValueAccessor, OnInit, OnDe
     onChange: (value: number | null) => void;
     onTouched: () => void;
     private isWriting;
-    private readonly subscription;
     ngOnInit(): void;
-    ngOnDestroy(): void;
     /**
      * @method writeValue
      * @description

package/types/tekus-design-system-components-input-text.d.ts

@@ -1,10 +1,11 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, OnDestroy } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
 
-declare class InputTextComponent implements ControlValueAccessor, OnInit, OnDestroy {
+declare class InputTextComponent implements ControlValueAccessor, OnInit {
     readonly ngControl: NgControl | null;
-    constructor();
+    private readonly destroyRef;
+    private readonly init;
     /**
      * @property {ModelSignal<string>} value
      * @description
@@ -57,11 +58,6 @@ declare class InputTextComponent implements ControlValueAccessor, OnInit, OnDest
      * Message to display when the control is invalid and touched.
      */
     errorMessage: _angular_core.InputSignal<string>;
-    /**
-     * @property {InputSignal<string>} hint
-     * @description
-     * Hint text to display below the input.
-     */
     /**
      * @property {InputSignal<string>} hint
      * @description
@@ -85,9 +81,7 @@ declare class InputTextComponent implements ControlValueAccessor, OnInit, OnDest
     onChange: (value: string) => void;
     onTouched: () => void;
     private isWriting;
-    private readonly subscription;
     ngOnInit(): void;
-    ngOnDestroy(): void;
     /**
      * @method writeValue
      * @description

package/types/tekus-design-system-components-modal.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { Type, OnDestroy, EventEmitter, ComponentRef } from '@angular/core';
+import { Type, OnDestroy, ComponentRef } from '@angular/core';
 import { Variant } from '@tekus/design-system/components/button';
 import { TkCloseInterceptor } from '@tekus/design-system/core/types';
 import { Observable } from 'rxjs';
@@ -83,7 +83,7 @@ declare class ModalComponent<T = unknown> implements OnDestroy {
     /** Whether the modal content has a scrollbar */
     hasScroll: boolean;
     /** Emits when the modal closes, passing the return value from footer buttons or null */
-    readonly onClose: EventEmitter<unknown>;
+    readonly closed: _angular_core.OutputEmitterRef<unknown>;
     private alreadyEmitted;
     private returnValueOnClose;
     constructor();
@@ -153,7 +153,7 @@ declare class ModalComponent<T = unknown> implements OnDestroy {
      */
     private resetClosureState;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalComponent<any>, "tk-modal", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "footerButtons": { "alias": "footerButtons"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "interceptor": { "alias": "interceptor"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalComponent<any>, "tk-modal", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "footerButtons": { "alias": "footerButtons"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "interceptor": { "alias": "interceptor"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; "closed": "closed"; }, never, never, true, never>;
 }
 
 /**

package/types/tekus-design-system-components-panel.d.ts

@@ -1,5 +1,4 @@
-import * as i0 from '@angular/core';
-import { EventEmitter } from '@angular/core';
+import * as _angular_core from '@angular/core';
 
 /**
  * @component PanelComponent
@@ -15,7 +14,7 @@ import { EventEmitter } from '@angular/core';
  * <tk-panel
  *   header="Panel Title"
  *   [toggleable]="true"
- *   [collapsed]="false">
+ *   [(collapsed)]="isCollapsed">
  *   <p>Panel content goes here</p>
  * </tk-panel>
  * ```
@@ -28,7 +27,7 @@ declare class PanelComponent {
      *
      * @default undefined
      */
-    header?: string;
+    header: _angular_core.InputSignal<string | undefined>;
     /**
      * @property {boolean} toggleable
      * @description
@@ -36,23 +35,16 @@ declare class PanelComponent {
      *
      * @default false
      */
-    toggleable: boolean;
+    toggleable: _angular_core.InputSignal<boolean>;
     /**
-     * @property {boolean} collapsed
+     * @property {ModelSignal<boolean>} collapsed
      * @description
      * Defines whether the panel is collapsed or expanded.
-     * Supports two-way binding.
+     * Supports two-way binding via [(collapsed)].
      *
      * @default false
      */
-    collapsed: boolean;
-    /**
-     * @event collapsedChange
-     * @description
-     * Emits when the collapsed state changes.
-     * Enables two-way binding with [(collapsed)].
-     */
-    collapsedChange: EventEmitter<boolean>;
+    collapsed: _angular_core.ModelSignal<boolean>;
     /**
      * @event toggled
      * @description
@@ -64,7 +56,7 @@ declare class PanelComponent {
      * <tk-panel (toggled)="handleToggle($event)"></tk-panel>
      * ```
      */
-    toggled: EventEmitter<{
+    toggled: _angular_core.OutputEmitterRef<{
         collapsed: boolean;
     }>;
     /**
@@ -78,8 +70,8 @@ declare class PanelComponent {
     handleToggle(event: {
         collapsed: boolean | undefined;
     }): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PanelComponent, "tk-panel", never, { "header": { "alias": "header"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, { "collapsedChange": "collapsedChange"; "toggled": "toggled"; }, never, ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PanelComponent, "tk-panel", never, { "header": { "alias": "header"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "toggled": "toggled"; }, never, ["*"], true, never>;
 }
 
 export { PanelComponent };

package/types/tekus-design-system-components-radio-button.d.ts

@@ -1,9 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, OnDestroy } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { ControlValueAccessor, NgControl, FormControl } from '@angular/forms';
 
-declare class RadioButtonComponent implements ControlValueAccessor, OnInit, OnDestroy {
+declare class RadioButtonComponent implements ControlValueAccessor, OnInit {
     readonly ngControl: NgControl | null;
+    private readonly destroyRef;
     /**
      * Initialize the component and register it as a ControlValueAccessor.
      */
@@ -64,15 +65,10 @@ declare class RadioButtonComponent implements ControlValueAccessor, OnInit, OnDe
     get effectiveControl(): FormControl;
     onChange: (value: unknown) => void;
     onTouched: () => void;
-    private readonly subscription;
     /**
      * Configure synchronization between the form control and component state.
      */
     ngOnInit(): void;
-    /**
-     * Clean up subscriptions.
-     */
-    ngOnDestroy(): void;
     /**
      * Implementation of ControlValueAccessor: Writes a new value from the form.
      */

package/types/tekus-design-system-components-select.d.ts

@@ -94,7 +94,20 @@ declare class SelectComponent<T = unknown> implements ControlValueAccessor {
     modelChange: _angular_core.OutputEmitterRef<T | null>;
     private onChangeFn;
     private onTouchedFn;
-    constructor();
+    private readonly init;
+    /**
+     * @effect disabled → internalDisabled
+     * @description
+     * Synchronizes the disabled input signal with the internal disabled state.
+     */
+    private readonly syncDisabled;
+    /**
+     * @effect model → internal value
+     * @description
+     * Synchronizes changes coming from the Signal `model()` back into the internal value.
+     * Ensures consistency between Angular Forms, PrimeNG UI events, and Signals.
+     */
+    private readonly syncModel;
     /**
      * @method writeValue
      * @description

package/types/tekus-design-system-components-table.d.ts

@@ -34,12 +34,12 @@ declare class TableComponent<T = unknown> {
      */
     data: _angular_core.InputSignal<T[]>;
     /**
-     * @property {ViewChild} tableRef
+     * @property {viewChild} tableRef
      * @description
      * Reference to the PrimeNG Table component instance.
      * Used to access table methods and properties directly.
      */
-    tableRef: Table;
+    readonly tableRef: _angular_core.Signal<Table<any> | undefined>;
     /**
      * @property {InputSignal<TableColumn<T>[]>} columns
      * @description
@@ -74,9 +74,9 @@ declare class TableComponent<T = unknown> {
      * Property name to uniquely identify a row.
      */
     dataKey: _angular_core.InputSignal<string | undefined>;
-    initialData: T[];
-    internalData: T[];
-    isSorted: boolean | null;
+    readonly initialData: _angular_core.WritableSignal<T[]>;
+    readonly internalData: _angular_core.WritableSignal<T[]>;
+    readonly isSorted: _angular_core.WritableSignal<boolean | null>;
     /**
      * @computed isAllSelected
      * @description

package/types/tekus-design-system-components-textarea.d.ts

@@ -1,9 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, OnDestroy } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { ControlValueAccessor, FormControl } from '@angular/forms';
 
-declare class TextareaComponent implements ControlValueAccessor, OnInit, OnDestroy {
+declare class TextareaComponent implements ControlValueAccessor, OnInit {
     private readonly ngControl;
+    private readonly destroyRef;
     constructor();
     /**
      * @property {ModelSignal<string>} value
@@ -73,9 +74,7 @@ declare class TextareaComponent implements ControlValueAccessor, OnInit, OnDestr
     private propagateChange;
     private propagateTouched;
     private syncingFromView;
-    private readonly subscriptions;
     ngOnInit(): void;
-    ngOnDestroy(): void;
     /**
      * @method writeValue
      * @description

package/types/tekus-design-system-directives-gird-item.d.ts

@@ -1,6 +1,6 @@
-import * as _angular_core from '@angular/core';
 import * as _angular_cdk_layout from '@angular/cdk/layout';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import * as _angular_core from '@angular/core';
 
 /**
  * Directive that controls the number of columns covered by an item within a grid.
@@ -16,7 +16,7 @@ declare class GridItemDirective {
      * The final value will be adjusted based on the current breakpoint.
      * @default 1
      */
-    span: number;
+    span: _angular_core.InputSignal<number>;
     /**
      * Injected service to observe changes in screen breakpoints.
      * @readonly
@@ -34,13 +34,13 @@ declare class GridItemDirective {
      */
     readonly finalSpan: _angular_core.Signal<number>;
     /**
-     * Host Binding that applies the `finalSnap` value to the `grid-column` style of the host element.
+     * Computed signal that applies the `finalSpan` value to the `grid-column` style of the host element.
      *
      * This causes the element to occupy the number of columns computed in the grid.
      */
-    get columnSpan(): string;
+    readonly columnSpan: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridItemDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridItemDirective, "[tkGridItem]", never, { "span": { "alias": "span"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridItemDirective, "[tkGridItem]", never, { "span": { "alias": "span"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { GridItemDirective };