@tekus/design-system 5.36.0 → 5.38.1

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

@@ -68,16 +68,6 @@ declare class AutocompleteComponent<T = unknown> implements ControlValueAccessor
      * Allows usage with the syntax: `[(model)]="myValue"`.
      */
     model: _angular_core.ModelSignal<AutocompleteValue<T> | undefined>;
-    /**
-     * @event modelChange
-     * @description
-     * Emits whenever the value changes.
-     * Payload: the selected item(s) of type `AutocompleteValue<T>`.
-     *
-     * @example
-     * <tk-autocomplete (modelChange)="onChange($event)"></tk-autocomplete>
-     */
-    modelChange: _angular_core.OutputEmitterRef<AutocompleteValue<T>>;
     private onChangeFn;
     private onTouchedFn;
     private readonly init;
@@ -121,7 +111,8 @@ declare class AutocompleteComponent<T = unknown> implements ControlValueAccessor
      * @method handleChange
      * @description
      * Handles value changes from the autocomplete component.
-     * Updates Angular Forms, Signals, and emits the modelChange event.
+     * Updates Angular Forms and Signals. `model.set()` emits the model's
+     * auto-generated `modelChange` output — no separate emit needed.
      *
      * @param {AutocompleteValue<T>} value - The new selected value(s).
      */
@@ -150,7 +141,7 @@ declare class AutocompleteComponent<T = unknown> implements ControlValueAccessor
      */
     get effectiveControl(): FormControl | undefined;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AutocompleteComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AutocompleteComponent<any>, "tk-autocomplete", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "modelChange": "modelChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AutocompleteComponent<any>, "tk-autocomplete", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; }, never, never, true, never>;
 }
 
 export { AutocompleteComponent };

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

@@ -0,0 +1,104 @@
+import * as _angular_core from '@angular/core';
+
+type AvatarVariant = 'text' | 'icon' | 'image';
+type AvatarSeverity = 'secondary' | 'primary' | 'contrast';
+type AvatarSize = 's' | 'm' | 'l' | 'xl';
+/**
+ * Maximum number of characters rendered by the `'text'` variant. This variant is
+ * designed for initials (e.g. `'AB'`); longer strings break the layout at every
+ * size, so `value` is always truncated to this length rather than allowed to overflow.
+ */
+declare const AVATAR_TEXT_MAX_LENGTH = 2;
+/**
+ * @component AvatarComponent
+ * @description
+ * A component used to represent a user, entity, or placeholder with initials, an icon, or an image.
+ *
+ * This component supports:
+ * - `variant`: What the avatar displays. Options: `'text' | 'icon' | 'image'`.
+ * - `severity`: The color scheme of the avatar. Options: `'secondary' | 'primary' | 'contrast'`. Ignored when `variant` is `'image'`.
+ * - `size`: The size of the avatar. Options: `'s' | 'm' | 'l' | 'xl'`.
+ * - `value`: The initials to display for the `'text'` variant. Limited to 2 characters — longer values are truncated.
+ * - `icon`: The icon name to display for the `'icon'` variant, rendered via `tk-icon`.
+ * - `image` / `alt`: The image source and accessible text for the `'image'` variant.
+ * - `ariaLabel`: The accessible name for the `'text'` and `'icon'` variants.
+ *
+ * @usage
+ * ### Basic Usage
+ * ```html
+ * <tk-avatar variant="text" value="AB" severity="primary" size="m" ariaLabel="Ana Bermúdez"></tk-avatar>
+ * <tk-avatar variant="icon" icon="user" severity="secondary" size="m" ariaLabel="Usuario sin foto"></tk-avatar>
+ * <tk-avatar variant="image" image="/assets/avatar.png" alt="Ana Bermúdez" size="m"></tk-avatar>
+ * ```
+ */
+declare class AvatarComponent {
+    /**
+     * What the avatar displays.
+     * @default 'text'
+     */
+    variant: _angular_core.InputSignal<AvatarVariant>;
+    /**
+     * The color scheme of the avatar. Ignored when `variant` is `'image'`.
+     * @default 'secondary'
+     */
+    severity: _angular_core.InputSignal<AvatarSeverity>;
+    /**
+     * The size of the avatar.
+     * @default 'm'
+     */
+    size: _angular_core.InputSignal<AvatarSize>;
+    /**
+     * The initials to display. Only used when `variant` is `'text'`.
+     *
+     * Limited to {@link AVATAR_TEXT_MAX_LENGTH} characters — this variant is meant
+     * for initials (e.g. `'AB'`), not arbitrary text. Longer values are silently
+     * truncated (see `displayValue`) since they overflow the avatar at every size.
+     */
+    value: _angular_core.InputSignal<string>;
+    /** The icon name to display, forwarded to `tk-icon`. Only used when `variant` is `'icon'`. */
+    icon: _angular_core.InputSignal<string>;
+    /** The image source. Only used when `variant` is `'image'`. */
+    image: _angular_core.InputSignal<string>;
+    /** The accessible alt text for the image. Only used when `variant` is `'image'`. */
+    alt: _angular_core.InputSignal<string>;
+    /**
+     * The accessible name announced by screen readers, for the `'text'` and
+     * `'icon'` variants. Should be the entity the avatar stands for (e.g. the
+     * user's full name), not a description of the graphic.
+     *
+     * Always worth setting: neither variant carries a meaningful name on its own —
+     * `'text'` would otherwise announce bare initials and `'icon'` the raw icon
+     * name. The `'image'` variant ignores this input and uses `alt` instead,
+     * since its `<img>` already provides the accessible name.
+     */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * The `value` truncated to {@link AVATAR_TEXT_MAX_LENGTH} characters. This is
+     * what actually gets rendered for the `'text'` variant.
+     */
+    displayValue: _angular_core.Signal<string>;
+    /**
+     * Whether the avatar exposes itself as a labelled image to assistive tech.
+     * True for every variant except `'image'`, which is excluded because its
+     * `<img [alt]>` already carries the accessible name — adding `role="img"`
+     * plus a label on the wrapper too would announce the avatar twice.
+     */
+    isLabelled: _angular_core.Signal<boolean>;
+    /**
+     * The accessible name actually rendered for the `'text'` and `'icon'`
+     * variants. Falls back to the displayed initials or the icon name when
+     * `ariaLabel` is not provided, so the avatar is never fully silent.
+     */
+    accessibleLabel: _angular_core.Signal<string>;
+    /**
+     * Computed host class (BEM block + modifiers) combining `variant` and `size`
+     * always, plus `severity` unless `variant` is `'image'` (severity doesn't
+     * apply to images).
+     */
+    hostClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "tk-avatar", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { AVATAR_TEXT_MAX_LENGTH, AvatarComponent };
+export type { AvatarSeverity, AvatarSize, AvatarVariant };

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

@@ -58,6 +58,12 @@ declare class CheckboxComponent implements ControlValueAccessor, OnInit {
      * 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 checkbox when there is no error.
+     */
+    hint: _angular_core.InputSignal<string>;
     /**
      * @property {ModelSignal<boolean>} indeterminate
      * @description
@@ -101,7 +107,7 @@ declare class CheckboxComponent implements ControlValueAccessor, OnInit {
      */
     onBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "tk-checkbox", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "binary": { "alias": "binary"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "indeterminate": "indeterminateChange"; "disabled": "disabledChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "tk-checkbox", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "binary": { "alias": "binary"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "indeterminate": "indeterminateChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
 export { CheckboxComponent };

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

@@ -11,9 +11,19 @@ import { ContrastResult } from '@tekus/design-system/utils/wcag-contrast';
 type ColorPickerVariant = 'input' | 'swatch';
 /**
  * Reason the picker popover was closed.
- * - `accept`: the selection was confirmed.
+ * - `accept`: the selection was confirmed (Enter, click-outside).
+ * - `cancel`: the selection was discarded and restored to its prior value
+ *   (Escape, or another `tk-color-picker` instance opening in the same view).
  */
-type ColorPickerCloseReason = 'accept';
+type ColorPickerCloseReason = 'accept' | 'cancel';
+/**
+ * Emission strategy for `colorChange` / `textColorChange` / `value`.
+ * - `live`: emit on every valid draft change (default, current behavior).
+ * - `onClose`: emit once, with the final value, only when the popover closes
+ *   by confirmation (Enter / click-outside). Escape or being closed by
+ *   another instance never emits.
+ */
+type ColorPickerEmitMode = 'live' | 'onClose';
 /**
  * Enables or disables each section of the picker popover.
  * Every flag defaults to `true`; disabled sections are not rendered.
@@ -83,6 +93,7 @@ declare class ColorPickerComponent implements ControlValueAccessor {
     readonly ngControl: NgControl | null;
     private readonly destroyRef;
     private readonly el;
+    private readonly registry;
     private readonly init;
     /**
      * @property {ColorPickerVariant} variant
@@ -170,6 +181,25 @@ declare class ColorPickerComponent implements ControlValueAccessor {
      * @default `''`
      */
     errorMessage: _angular_core.InputSignal<string>;
+    /**
+     * @property {ColorPickerEmitMode} emitMode
+     * @description
+     * Emission strategy for `colorChange`/`textColorChange`/`value`:
+     * `'live'` emits on every valid draft change (default, unchanged behavior).
+     * `'onClose'` emits once, with the final value, only when the popover
+     * closes by confirmation (Enter / click-outside) — Escape, or being closed
+     * by another `tk-color-picker` instance opening in the same view, never
+     * emits.
+     *
+     * Exception: editing the trigger HEX field directly while the popover is
+     * closed (`variant="input"`) has no popover session to defer to, so under
+     * `'onClose'` it commits on its own equivalent of "close" — Enter, or
+     * losing focus (blur) — not on every debounce tick while still typing.
+     * This avoids firing on each momentarily-complete-looking HEX mid-edit,
+     * which matters when `colorChange` is wired straight to an API call.
+     * @default `'live'`
+     */
+    emitMode: _angular_core.InputSignal<ColorPickerEmitMode>;
     /**
      * @property {ColorPickerTexts} texts
      * @description
@@ -197,17 +227,22 @@ declare class ColorPickerComponent implements ControlValueAccessor {
     /**
      * @event colorChange
      * @description
-     * Emits the confirmed background hex color: on Accept (action bar mode) or
-     * on every valid change (live mode / trigger HEX edit while closed). Never
-     * emits invalid values, on hydration, or while disabled.
+     * Emits the confirmed background hex color. Timing depends on `emitMode()`:
+     * `'live'` emits on every valid change (drag, keystroke, swatch pick, or
+     * trigger HEX edit while closed); `'onClose'` emits once, with the final
+     * value, only when the popover closes by confirmation (Enter /
+     * click-outside). Never emits on Escape, when another instance forces this
+     * one to close, on invalid values, on hydration, or while disabled. Always
+     * emitted together with `textColorChange` in the same synchronous call, so
+     * both values belong to the same commit.
      */
     colorChange: _angular_core.OutputEmitterRef<string>;
     /**
      * @event textColorChange
      * @description
-     * Emits together with `colorChange`: the ideal text color over the
-     * confirmed background (`#000000` on light colors, `#ffffff` on dark ones,
-     * or the `contrastColor` override when provided).
+     * Emits together with `colorChange`, same timing, same commit: the ideal
+     * text color over the confirmed background (`#000000` on light colors,
+     * `#ffffff` on dark ones, or the `contrastColor` override when provided).
      */
     textColorChange: _angular_core.OutputEmitterRef<string>;
     /**
@@ -228,7 +263,7 @@ declare class ColorPickerComponent implements ControlValueAccessor {
      * Emits when the popover closes, with the close reason
      * (`accept` confirmed, `cancel` discarded/restored).
      */
-    closed: _angular_core.OutputEmitterRef<"accept">;
+    closed: _angular_core.OutputEmitterRef<ColorPickerCloseReason>;
     popover: _angular_core.Signal<Popover | undefined>;
     private swatchBtnRef;
     private inputTriggerRef;
@@ -251,6 +286,14 @@ declare class ColorPickerComponent implements ControlValueAccessor {
     protected readonly resolvedSections: _angular_core.Signal<Required<ColorPickerSections>>;
     protected readonly t: _angular_core.Signal<Required<ColorPickerTexts>>;
     /** Valid draft hex to paint swatches, or null → neutral fallback via CSS. */
+    /**
+     * Always reflects `draftHex()`, not `value()` — independent of `emitMode`
+     * and of whether the popover is open. `draftHex` tracks every keystroke
+     * (trigger or panel HEX field, spectrum/hue/swatch picks) in real time, so
+     * the swatch gives immediate visual feedback while the user is still
+     * typing, even under `emitMode="onClose"` where the actual commit/emit is
+     * deferred to Enter/blur/click-outside.
+     */
     protected readonly swatchColor: _angular_core.Signal<string | null>;
     /**
      * Text color of the contrast pair: the `contrastColor` override when valid,
@@ -268,6 +311,8 @@ declare class ColorPickerComponent implements ControlValueAccessor {
     protected readonly errorId: string;
     private static instanceCount;
     private originalValue;
+    private closeReason;
+    private suppressNextHideCommit;
     private readonly customColorWritePtr;
     private readonly hexInput$;
     onChange: (value: string) => void;
@@ -308,7 +353,17 @@ declare class ColorPickerComponent implements ControlValueAccessor {
     private fixPanelPosition;
     protected onPopoverHide(): void;
     protected onPanelEnter(event: Event): void;
+    /** Bound to `(keydown.escape)` on the popover panel: intercepts Escape
+     * before it can bubble to PrimeNG's own document-level close handler, so
+     * the close reason is already recorded as `cancel` by the time `onHide`
+     * fires. */
+    protected onPanelEscape(event: Event): void;
     private confirmAndClose;
+    /** Closes the popover as a cancellation: `onPopoverHide()` will restore
+     * `originalValue` and emit nothing. Shared by Escape and by the registry
+     * when another `tk-color-picker` instance opens in the same view. */
+    private cancelAndClose;
+    private restoreOriginalValue;
     protected onSpectrumChange(change: {
         saturation: number;
         brightness: number;
@@ -340,7 +395,15 @@ declare class ColorPickerComponent implements ControlValueAccessor {
     private setFromHex;
     private applyHsv;
     /**
-     * Commits the draft color immediately (live mode).
+     * Commits the draft color immediately, but only in `'live'` emitMode.
+     * In `'onClose'` mode, mid-edit draft changes never commit here — not even
+     * for the trigger HEX field edited while the popover is closed. That path
+     * still needs an explicit "I'm done" signal, just like a popover session
+     * does: Enter (`onHexKeydown`) or losing focus (`onHexBlur`), both of which
+     * commit unconditionally regardless of `emitMode()`. Committing on every
+     * debounce tick while the field still has focus would fire on each
+     * completed-looking HEX mid-typing — exactly the noise `'onClose'` exists
+     * to avoid (e.g. a consumer wiring this straight to an API call).
      */
     private maybeCommit;
     private commitDraft;
@@ -349,8 +412,8 @@ declare class ColorPickerComponent implements ControlValueAccessor {
     private hexToHsv;
     private hsvToHex;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPickerComponent, "tk-color-picker", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "presetColors": { "alias": "presetColors"; "required": false; "isSignal": true; }; "contrastColor": { "alias": "contrastColor"; "required": false; "isSignal": true; }; "maxCustomColors": { "alias": "maxCustomColors"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "texts": { "alias": "texts"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "customColors": { "alias": "customColors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "customColors": "customColorsChange"; "colorChange": "colorChange"; "textColorChange": "textColorChange"; "validChange": "validChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPickerComponent, "tk-color-picker", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "presetColors": { "alias": "presetColors"; "required": false; "isSignal": true; }; "contrastColor": { "alias": "contrastColor"; "required": false; "isSignal": true; }; "maxCustomColors": { "alias": "maxCustomColors"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "emitMode": { "alias": "emitMode"; "required": false; "isSignal": true; }; "texts": { "alias": "texts"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "customColors": { "alias": "customColors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "customColors": "customColorsChange"; "colorChange": "colorChange"; "textColorChange": "textColorChange"; "validChange": "validChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 export { ColorPickerComponent };
-export type { ColorPickerCloseReason, ColorPickerSections, ColorPickerTexts, ColorPickerVariant };
+export type { ColorPickerCloseReason, ColorPickerEmitMode, ColorPickerSections, ColorPickerTexts, ColorPickerVariant };

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

@@ -213,6 +213,16 @@ declare class DatePickerComponent implements OnInit, ControlValueAccessor, Valid
      * <tk-date-picker [minDate]="minDate" errorMessage="Date is required" />
      */
     errorMessage: _angular_core.InputSignal<string | null>;
+    /**
+     * @description
+     * Hint text rendered beneath the field when there is no error to show.
+     *
+     * @default null
+     *
+     * @example
+     * <tk-date-picker hint="Format: dd/mm/yyyy" />
+     */
+    hint: _angular_core.InputSignal<string | null>;
     /**
      * @description
      * Optional external `FormControl` to bind when not using the standard
@@ -312,7 +322,7 @@ declare class DatePickerComponent implements OnInit, ControlValueAccessor, Valid
      */
     private applyTimeCascading;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatePickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent, "tk-date-picker", never, { "required": { "alias": "required"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "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; }; "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; }; "disabled": { "alias": "disabled"; "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; }; "errorMessage": { "alias": "errorMessage"; "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, { "required": { "alias": "required"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "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; }; "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; }; "disabled": { "alias": "disabled"; "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; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "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-grid-container.d.ts

@@ -0,0 +1,123 @@
+import * as _angular_cdk_layout from '@angular/cdk/layout';
+import * as _angular_core from '@angular/core';
+import { GridColumns, GutterType, ComposeSize, ContainerType, GapGutter, FixedGridProps, AutoFillGridProps } from '@tekus/design-system/core/types';
+
+/**
+ * A responsive CSS Grid container that exposes typed, two-way models to control
+ * column count, track size, inter-item gutter, and container padding.
+ *
+ * Behavior:
+ * - columns: GridColumns (default 12). Numeric values are capped per Breakpoints
+ * (2/3/4/8 for mobileSmall/mobileLarge/tabletVertical/tabletHorizontal). No cap when size is minmax().
+ * - size: ComposeSize (default '1fr'). Required to be minmax() when columns is 'auto-fill', otherwise an error is thrown.
+ * - gutter: Gutter (default 'normal'), mapped to GapGutter for host gap.
+ * - containerType: ContainerType (default 'medium'), mapped to PaddingGridContainer for host padding.
+ *
+ * Host bindings:
+ * - style.grid-template-columns via repeat(...) from computed columns/size.
+ * - style.gap via GapGutter.
+ * - style.padding via PaddingGridContainer.
+ *
+ * Intended to wrap GridItemDirective children. Public type is compatible with FixedGridProps | AutoFillGridProps.
+ * @selector tk-grid-container
+ */
+declare class GridContainerComponent {
+    /**
+     * Two-way bound model defining the number of columns in the grid.
+     *
+     * The value is capped based on the current screen breakpoint. If the `size` model
+     * is a `minmax()` function, the column cap is disabled.
+     *
+     * @default 12
+     * @see GridColumns
+     */
+    columns: _angular_core.ModelSignal<GridColumns>;
+    /**
+     * Two-way bound model defining the spacing between grid items.
+     *
+     * The value is mapped to a CSS `gap` property based on the `Gutter` type.
+     *
+     * @default Gutter.normal
+     * @see Gutter
+     * @see GutterType
+     */
+    gutter: _angular_core.ModelSignal<GutterType>;
+    /**
+     * Two-way bound model defining the grid track size.
+     *
+     * Accepts any ComposeSize value (e.g., '1fr', fixed lengths, or minmax()) and
+     * drives the computed grid template for the container.
+     *
+     * @default '1fr'
+     * @see ComposeSize
+     */
+    size: _angular_core.ModelSignal<ComposeSize>;
+    /**
+     * Two-way bound model defining the internal spacing of the grid container.
+     *
+     * The value is mapped to a CSS `padding` property based on the `PaddingGridContainer` type.
+     *
+     * @default 'medium'
+     * @see ContainerType
+     */
+    containerType: _angular_core.ModelSignal<ContainerType>;
+    /**
+     * A private static RegExp to validate strings that match the `minmax()` function.
+     */
+    readonly MINMAX_RE: RegExp;
+    /**
+     * A private service injection to observe screen breakpoint changes.
+     */
+    private readonly breakpointObserver;
+    /**
+     * A signal derived from `breakpointObserver` to reactively track changes
+     * across all defined breakpoints.
+     */
+    screenChanges: _angular_core.Signal<_angular_cdk_layout.BreakpointState | undefined>;
+    /**
+     * A computed signal that determines the final number of columns for the grid.
+     *
+     * It caps the `columns` model value based on the current screen breakpoint,
+     * unless the `size` model is a `minmax()` function.
+     */
+    readonly finalColumns: _angular_core.Signal<GridColumns>;
+    /**
+     * Host binding that maps the `gutter` model to the host element's `style.gap` property.
+     */
+    readonly hostGap: _angular_core.Signal<GapGutter>;
+    /**
+     * Host binding that sets the `style.grid-template-columns` property based on
+     * the computed column count and track size.
+     */
+    readonly gridColumns: _angular_core.Signal<string>;
+    /**
+     * Host binding that sets the `style.padding` property based on the `containerType` model.
+     */
+    readonly containerPadding: _angular_core.Signal<string>;
+    /**
+     * Computes the final `grid-template-columns` string for the host element.
+     *
+     * It handles both fixed and `auto-fill` column types and validates that the `size`
+     * model is a `minmax()` function when `columns` is set to `'auto-fill'`.
+     * @returns The CSS value for the `grid-template-columns` property.
+     */
+    computeGridTemplateColumns(): string;
+    /**
+     * A private helper method to check if a given value is a valid `minmax()` function string.
+     * @param value The value to check.
+     * @returns `true` if the value is a valid `minmax()` string, `false` otherwise.
+     */
+    private isMinMax;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridContainerComponent, "tk-grid-container", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "gutter": { "alias": "gutter"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "containerType": { "alias": "containerType"; "required": false; "isSignal": true; }; }, { "columns": "columnsChange"; "gutter": "gutterChange"; "size": "sizeChange"; "containerType": "containerTypeChange"; }, never, ["*"], true, never>;
+}
+/**
+ * A public type to represent an instance of the `GridContainerComponent` class,
+ * combined with its public input properties.
+ *
+ * This allows for better type-checking when the component is used in a template.
+ */
+type GridComponent = new () => GridContainerComponent & (FixedGridProps | AutoFillGridProps);
+
+export { GridContainerComponent };
+export type { GridComponent };

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

@@ -38,6 +38,12 @@ declare class InputNumberComponent implements ControlValueAccessor, OnInit {
      * 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.
+     */
+    hint: _angular_core.InputSignal<string>;
     /**
      * @property {InputSignal<boolean>} showButtons
      * @description
@@ -45,6 +51,34 @@ declare class InputNumberComponent implements ControlValueAccessor, OnInit {
      * @default false
      */
     showButtons: _angular_core.InputSignal<boolean>;
+    /**
+     * @property {InputSignal<boolean>} useGrouping
+     * @description
+     * Whether to display thousands separators.
+     * @default false
+     */
+    useGrouping: _angular_core.InputSignal<boolean>;
+    /**
+     * @property {InputSignal<number | null>} minFractionDigits
+     * @description
+     * Minimum number of decimal digits allowed.
+     */
+    minFractionDigits: _angular_core.InputSignal<number | null>;
+    /**
+     * @property {InputSignal<number | null>} maxFractionDigits
+     * @description
+     * Maximum number of decimal digits allowed. Left unset (`null`) by
+     * default — integer entry only, matching prior behavior — and safe for
+     * already-bound decimal values (Intl.NumberFormat applies its own default
+     * of up to 3 decimal places for display when this isn't set, so no
+     * rounding happens). PrimeNG's InputNumber only lets the user *type* a new
+     * decimal separator when this is explicitly set to a value greater than 0
+     * — set it (e.g. `[maxFractionDigits]="2"`) to accept typed decimal
+     * input. Set to 0 only if you deliberately want to force integer-only
+     * display too — it rounds any already-bound decimal value.
+     * @default null
+     */
+    maxFractionDigits: _angular_core.InputSignal<number | null>;
     /**
      * @property {boolean} disabled
      * @description
@@ -98,7 +132,7 @@ declare class InputNumberComponent implements ControlValueAccessor, OnInit {
      */
     onBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputNumberComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputNumberComponent, "tk-input-number", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "showButtons": { "alias": "showButtons"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputNumberComponent, "tk-input-number", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "showButtons": { "alias": "showButtons"; "required": false; "isSignal": true; }; "useGrouping": { "alias": "useGrouping"; "required": false; "isSignal": true; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; "isSignal": true; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 export { InputNumberComponent };

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

@@ -53,6 +53,12 @@ declare class RadioButtonComponent implements ControlValueAccessor, OnInit {
      * 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 radio button when there is no error.
+     */
+    hint: _angular_core.InputSignal<string>;
     /**
      * @property {ModelSignal<boolean>} disabled
      * @description
@@ -94,7 +100,7 @@ declare class RadioButtonComponent implements ControlValueAccessor, OnInit {
      */
     onBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioButtonComponent, "tk-radio-button", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "disabled": "disabledChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioButtonComponent, "tk-radio-button", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
 export { RadioButtonComponent };

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

@@ -0,0 +1,45 @@
+import * as _angular_core from '@angular/core';
+import { TagSeverity } from '@tekus/design-system/components/tag';
+
+/**
+ * @component SectionComponent
+ * @description
+ * The Section component provides a structured, responsive layout block with an optional header and content area.
+ * It supports standard layouts, split layouts (two columns or two rows) with independent scrollable areas,
+ * and custom transclusion slots for headers, tags, and actions.
+ *
+ * @usage
+ * ```html
+ * <tk-section title="Licensing" tagText="Active" tagSeverity="success" icon="pi-cog">
+ *   <div>Standard content area</div>
+ * </tk-section>
+ * ```
+ */
+declare class SectionComponent {
+    /** The primary title of the section. Optional. If omitted, the header is not rendered. */
+    title: _angular_core.InputSignal<string | undefined>;
+    /** Optional fixed height for the section (e.g. '300px', '100%'). If content exceeds this height, it scrolls. */
+    height: _angular_core.InputSignal<string | undefined>;
+    /** Optional tag text displayed next to the title. */
+    tagText: _angular_core.InputSignal<string | undefined>;
+    /** Optional tag severity for color styling. Defaults to 'info'. */
+    tagSeverity: _angular_core.InputSignal<TagSeverity>;
+    /** Optional prefix icon class (e.g. 'pi-plus'). Shows a circular prefix icon in the header if set. */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /** Additional info text for the right side of the main header */
+    infoText: _angular_core.InputSignal<string | undefined>;
+    /** Icon for the right side of the main header */
+    infoIcon: _angular_core.InputSignal<string | undefined>;
+    /** Severity color for the main header info text ('default', 'danger', etc.) */
+    infoSeverity: _angular_core.InputSignal<"success" | "info" | "danger" | "default" | "warning">;
+    /** If true, the section body is split into two panels (left/right or top/bottom). */
+    split: _angular_core.InputSignal<boolean>;
+    /** Layout direction for the split panels: 'row' (side-by-side) or 'column' (stacked). Defaults to 'row'. */
+    direction: _angular_core.InputSignal<"row" | "column">;
+    /** If true and split mode is enabled, each panel will scroll independently when content overflows. */
+    scrollable: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionComponent, "tk-section", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "tagText": { "alias": "tagText"; "required": false; "isSignal": true; }; "tagSeverity": { "alias": "tagSeverity"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "infoText": { "alias": "infoText"; "required": false; "isSignal": true; }; "infoIcon": { "alias": "infoIcon"; "required": false; "isSignal": true; }; "infoSeverity": { "alias": "infoSeverity"; "required": false; "isSignal": true; }; "split": { "alias": "split"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; }, {}, never, ["[headerIcon]", "[headerTag]", "[actions]", "*", "[left]", "[right]"], true, never>;
+}
+
+export { SectionComponent };