@tekus/design-system 5.37.0 → 5.38.1

package/scss/_config.scss

@@ -0,0 +1,242 @@
+// Internal configuration module — not for direct consumer import.
+// All default color values match tk-foundations.json exactly.
+
+@use 'sass:color';
+@use 'sass:math';
+
+// ── Configurable API ──────────────────────────────────────────────────────────
+$config-brand:         'default' !default; // 'default' | 'brand-a' | 'brand-b'
+$config-scale:         null      !default; // html font-size multiplier — overrides the brand's suggested scale
+$config-primary:       null      !default; // hex color — auto-generates 11-step primary palette
+$config-secondary:     null      !default; // hex color — auto-generates 11-step secondary palette
+$config-accent:        null      !default; // hex color — auto-generates 11-step accent palette
+$config-border-radius: null      !default; // 'rounded' | 'pill' | 'square' — overrides the brand's default radius style
+
+// ── Palette generation ────────────────────────────────────────────────────────
+// Places $base at step 500; steps 50-400 mix toward white, steps 600-950 toward black.
+// Components are rounded so Sass emits clean hex values instead of rgb() decimals.
+@function _tk-palette-step($base, $step) {
+  $mixed: $base;
+  @if $step == 50  { $mixed: color.mix(white, $base, 91%); }
+  @else if $step == 100 { $mixed: color.mix(white, $base, 83%); }
+  @else if $step == 200 { $mixed: color.mix(white, $base, 67%); }
+  @else if $step == 300 { $mixed: color.mix(white, $base, 48%); }
+  @else if $step == 400 { $mixed: color.mix(white, $base, 28%); }
+  @else if $step == 600 { $mixed: color.mix($base, black, 85%); }
+  @else if $step == 700 { $mixed: color.mix($base, black, 70%); }
+  @else if $step == 800 { $mixed: color.mix($base, black, 52%); }
+  @else if $step == 900 { $mixed: color.mix($base, black, 35%); }
+  @else if $step == 950 { $mixed: color.mix($base, black, 20%); }
+  // Round components and return as a legacy sRGB color so Sass serializes to hex
+  @return color.change($mixed,
+    $red:   math.round(color.channel($mixed, "red",   $space: rgb)),
+    $green: math.round(color.channel($mixed, "green", $space: rgb)),
+    $blue:  math.round(color.channel($mixed, "blue",  $space: rgb))
+  );
+}
+
+// ── Default brand palettes ────────────────────────────────────────────────────
+// Primary and accent are null for the default brand — variables.css already
+// defines these values, so there's no need to duplicate them here.
+// They are populated only when a brand preset or $config-primary/$config-accent is set.
+$brand-primary-50:  null;
+$brand-primary-100: null;
+$brand-primary-200: null;
+$brand-primary-300: null;
+$brand-primary-400: null;
+$brand-primary-500: null;
+$brand-primary-600: null;
+$brand-primary-700: null;
+$brand-primary-800: null;
+$brand-primary-900: null;
+$brand-primary-950: null;
+
+$brand-accent-50:  null;
+$brand-accent-100: null;
+$brand-accent-200: null;
+$brand-accent-300: null;
+$brand-accent-400: null;
+$brand-accent-500: null;
+$brand-accent-600: null;
+$brand-accent-700: null;
+$brand-accent-800: null;
+$brand-accent-900: null;
+$brand-accent-950: null;
+
+// Secondary palette — defaults to the surface palette tokens from variables.css.
+// Using var() cross-references so secondary tracks surface automatically.
+// Override with $config-secondary: #hex to generate a fully custom palette.
+$brand-secondary-50:  var(--tk-color-base-surface-50);
+$brand-secondary-100: var(--tk-color-base-surface-100);
+$brand-secondary-200: var(--tk-color-base-surface-200);
+$brand-secondary-300: var(--tk-color-base-surface-300);
+$brand-secondary-400: var(--tk-color-base-surface-400);
+$brand-secondary-500: var(--tk-color-base-surface-500);
+$brand-secondary-600: var(--tk-color-base-surface-600);
+$brand-secondary-700: var(--tk-color-base-surface-700);
+$brand-secondary-800: var(--tk-color-base-surface-800);
+$brand-secondary-900: var(--tk-color-base-surface-900);
+$brand-secondary-950: var(--tk-color-base-surface-950);
+
+// Typography
+$brand-font-family: 'Poppins', sans-serif;
+
+// Border radius style suggested by the brand — overridden by an explicit
+// $config-border-radius. 'default' (rounded) | 'sharp' | 'soft' | 'pill'
+$brand-radius-style: 'default';
+
+// Rem scale suggested by the brand — overridden by an explicit $config-scale,
+// same precedence as $brand-radius-style above.
+$brand-scale: 1;
+
+// ── Brand overrides ───────────────────────────────────────────────────────────
+// Each brand declares all 11 primary + 11 accent shades so no shade leaks
+// in from the default brand.
+
+@if $config-brand == 'brand-a' {
+  // Primary: warm red
+  $brand-primary-50:  #ffe8ec;
+  $brand-primary-100: #ffc1cc;
+  $brand-primary-200: #ff96a8;
+  $brand-primary-300: #ff6b83;
+  $brand-primary-400: #f5395c;
+  $brand-primary-500: #e40040;
+  $brand-primary-600: #c90039;
+  $brand-primary-700: #ad0031;
+  $brand-primary-800: #8a0027;
+  $brand-primary-900: #66001d;
+  $brand-primary-950: #3d0011;
+
+  // Accent: same hue (monochromatic brand)
+  $brand-accent-50:  #ffe8ec;
+  $brand-accent-100: #ffc1cc;
+  $brand-accent-200: #ff96a8;
+  $brand-accent-300: #ff6b83;
+  $brand-accent-400: #f5395c;
+  $brand-accent-500: #e40040;
+  $brand-accent-600: #c90039;
+  $brand-accent-700: #ad0031;
+  $brand-accent-800: #8a0027;
+  $brand-accent-900: #66001d;
+  $brand-accent-950: #3d0011;
+
+  $brand-font-family: 'Inter', sans-serif;
+  $brand-radius-style: 'pill';
+}
+
+@else if $config-brand == 'brand-b' {
+  // Primary: corporate blue
+  $brand-primary-50:  #e0f1fb;
+  $brand-primary-100: #b3d9f5;
+  $brand-primary-200: #80bfed;
+  $brand-primary-300: #4da5e5;
+  $brand-primary-400: #2691db;
+  $brand-primary-500: #007bc4;
+  $brand-primary-600: #006cb0;
+  $brand-primary-700: #005a96;
+  $brand-primary-800: #00477a;
+  $brand-primary-900: #003460;
+  $brand-primary-950: #001e3a;
+
+  // Accent: complementary teal
+  $brand-accent-50:  #e0f7f4;
+  $brand-accent-100: #b3ece4;
+  $brand-accent-200: #80ded2;
+  $brand-accent-300: #4dd0bf;
+  $brand-accent-400: #26c5b0;
+  $brand-accent-500: #00b8a0;
+  $brand-accent-600: #00a390;
+  $brand-accent-700: #008a7a;
+  $brand-accent-800: #006e61;
+  $brand-accent-900: #005249;
+  $brand-accent-950: #003330;
+
+  $brand-font-family: 'Poppins', sans-serif;
+  $brand-radius-style: 'soft';
+  $brand-scale: 0.95;
+}
+
+// ── Resolved scale ────────────────────────────────────────────────────────────
+// An explicit $config-scale always wins over the brand's suggested scale;
+// $brand-scale applies only when the consumer left it unset.
+$scale: if($config-scale, $config-scale, $brand-scale);
+
+// ── Border radius (scale handled separately by html font-size) ────────────────
+// $config-border-radius, when set, overrides the brand's suggested style —
+// same precedence as $config-primary/$config-secondary/$config-accent.
+$radius-style: if($config-border-radius, $config-border-radius, $brand-radius-style);
+
+$radius-xs: var(--tk-borderRadius-xs);
+$radius-s:  var(--tk-borderRadius-s);
+$radius-m:  var(--tk-borderRadius-m);
+// The `l` slot is the "fully rounded" step: it is consumed only by pill-shaped
+// surfaces (tag, multiselect chip, autocomplete chip), which were `full` before
+// this theming layer existed. Basing it on --tk-borderRadius-l would silently
+// shrink them from 62.4375rem to 1.5rem under the default/soft styles.
+$radius-l:  var(--tk-borderRadius-full);
+// The `xl` slot is the *actual* adaptive counterpart of --tk-borderRadius-l
+// (1.5rem), consumed by large decorative surfaces such as the avatar in its
+// `l`/`xl` sizes. It exists as a separate slot because the `l` name above was
+// already taken by the fully-rounded/pill step.
+$radius-xl: var(--tk-borderRadius-l);
+
+@if $radius-style == 'sharp' or $radius-style == 'square' {
+  $radius-xs: var(--tk-borderRadius-null);
+  $radius-s:  var(--tk-borderRadius-null);
+  $radius-m:  var(--tk-borderRadius-null);
+  $radius-l:  var(--tk-borderRadius-null);
+  $radius-xl: var(--tk-borderRadius-null);
+} @else if $radius-style == 'pill' {
+  $radius-xs: var(--tk-borderRadius-full);
+  $radius-s:  var(--tk-borderRadius-full);
+  $radius-m:  var(--tk-borderRadius-full);
+  $radius-l:  var(--tk-borderRadius-full);
+  $radius-xl: var(--tk-borderRadius-full);
+} @else if $radius-style == 'soft' {
+  $radius-m: 0.75rem;
+}
+// 'default' / 'rounded' → no override; keep the base values above as-is.
+
+// ── Custom palette overrides (applied after brand presets) ────────────────────
+// Custom colors override brand preset colors. Custom override at step 500 = the exact input hex.
+@if $config-primary {
+  $brand-primary-50:  _tk-palette-step($config-primary, 50);
+  $brand-primary-100: _tk-palette-step($config-primary, 100);
+  $brand-primary-200: _tk-palette-step($config-primary, 200);
+  $brand-primary-300: _tk-palette-step($config-primary, 300);
+  $brand-primary-400: _tk-palette-step($config-primary, 400);
+  $brand-primary-500: _tk-palette-step($config-primary, 500);
+  $brand-primary-600: _tk-palette-step($config-primary, 600);
+  $brand-primary-700: _tk-palette-step($config-primary, 700);
+  $brand-primary-800: _tk-palette-step($config-primary, 800);
+  $brand-primary-900: _tk-palette-step($config-primary, 900);
+  $brand-primary-950: _tk-palette-step($config-primary, 950);
+}
+
+@if $config-secondary {
+  $brand-secondary-50:  _tk-palette-step($config-secondary, 50);
+  $brand-secondary-100: _tk-palette-step($config-secondary, 100);
+  $brand-secondary-200: _tk-palette-step($config-secondary, 200);
+  $brand-secondary-300: _tk-palette-step($config-secondary, 300);
+  $brand-secondary-400: _tk-palette-step($config-secondary, 400);
+  $brand-secondary-500: _tk-palette-step($config-secondary, 500);
+  $brand-secondary-600: _tk-palette-step($config-secondary, 600);
+  $brand-secondary-700: _tk-palette-step($config-secondary, 700);
+  $brand-secondary-800: _tk-palette-step($config-secondary, 800);
+  $brand-secondary-900: _tk-palette-step($config-secondary, 900);
+  $brand-secondary-950: _tk-palette-step($config-secondary, 950);
+}
+
+@if $config-accent {
+  $brand-accent-50:  _tk-palette-step($config-accent, 50);
+  $brand-accent-100: _tk-palette-step($config-accent, 100);
+  $brand-accent-200: _tk-palette-step($config-accent, 200);
+  $brand-accent-300: _tk-palette-step($config-accent, 300);
+  $brand-accent-400: _tk-palette-step($config-accent, 400);
+  $brand-accent-500: _tk-palette-step($config-accent, 500);
+  $brand-accent-600: _tk-palette-step($config-accent, 600);
+  $brand-accent-700: _tk-palette-step($config-accent, 700);
+  $brand-accent-800: _tk-palette-step($config-accent, 800);
+  $brand-accent-900: _tk-palette-step($config-accent, 900);
+  $brand-accent-950: _tk-palette-step($config-accent, 950);
+}

package/scss/tk-bundle.scss

@@ -0,0 +1,105 @@
+// Public entry point for the configurable token bundle.
+//
+// Consumer usage (in end-project global stylesheet):
+//   @use '@tekus/design-system/scss/tk-bundle' with (
+//     $config-brand:         'brand-a',   // preset brand (optional)
+//     $config-scale:         1.1,         // rem scale multiplier (optional)
+//     $config-primary:       #e40040,     // custom primary hex → auto-generates 11-step palette
+//     $config-secondary:     #007bc4,     // custom secondary hex → emits --tk-color-base-secondary-*
+//     $config-accent:        #00b8a0,     // custom accent hex → overrides brand accent palette
+//     $config-border-radius: 'pill',      // 'rounded' | 'pill' | 'square' (optional)
+//   );
+//
+// Scale is applied as an html font-size multiplier so ALL rem-based tokens
+// (spacing, typography, radius, component sizes) scale uniformly without
+// enumerating individual tokens.
+//
+// Brand sets preset primary/accent palettes, font-family, and border-radius style.
+// Custom color params override those presets (or generate new palettes for secondary).
+// Omitted params fall back to brand preset values.
+//
+// Border radius has 3 styles: 'rounded' (default — current token values, unchanged),
+// 'pill' (fully rounded m/l radii, e.g. buttons/chips), and 'square' (no radius at all).
+// When set, it overrides whatever radius style the selected brand suggests.
+
+$config-brand:         'default' !default;
+$config-scale:         null      !default;
+$config-primary:       null      !default;
+$config-secondary:     null      !default;
+$config-accent:        null      !default;
+$config-border-radius: null      !default;
+
+@use 'config' as cfg with (
+  $config-brand:         $config-brand,
+  $config-scale:         $config-scale,
+  $config-primary:       $config-primary,
+  $config-secondary:     $config-secondary,
+  $config-accent:        $config-accent,
+  $config-border-radius: $config-border-radius
+);
+
+html {
+  font-size: calc(100% * #{cfg.$scale});
+}
+
+:root {
+  // ── Primary palette (only when brand or $config-primary is active) ─────────
+  // Default brand skips this block — variables.css defines primary values and
+  // re-emitting them as var() self-references would create an invalid CSS cycle.
+  @if cfg.$brand-primary-50 {
+    --tk-color-base-primary-50:  #{cfg.$brand-primary-50};
+    --tk-color-base-primary-100: #{cfg.$brand-primary-100};
+    --tk-color-base-primary-200: #{cfg.$brand-primary-200};
+    --tk-color-base-primary-300: #{cfg.$brand-primary-300};
+    --tk-color-base-primary-400: #{cfg.$brand-primary-400};
+    --tk-color-base-primary-500: #{cfg.$brand-primary-500};
+    --tk-color-base-primary-600: #{cfg.$brand-primary-600};
+    --tk-color-base-primary-700: #{cfg.$brand-primary-700};
+    --tk-color-base-primary-800: #{cfg.$brand-primary-800};
+    --tk-color-base-primary-900: #{cfg.$brand-primary-900};
+    --tk-color-base-primary-950: #{cfg.$brand-primary-950};
+  }
+
+  // ── Accent palette (only when brand or $config-accent is active) ───────────
+  @if cfg.$brand-accent-50 {
+    --tk-color-base-accent-50:  #{cfg.$brand-accent-50};
+    --tk-color-base-accent-100: #{cfg.$brand-accent-100};
+    --tk-color-base-accent-200: #{cfg.$brand-accent-200};
+    --tk-color-base-accent-300: #{cfg.$brand-accent-300};
+    --tk-color-base-accent-400: #{cfg.$brand-accent-400};
+    --tk-color-base-accent-500: #{cfg.$brand-accent-500};
+    --tk-color-base-accent-600: #{cfg.$brand-accent-600};
+    --tk-color-base-accent-700: #{cfg.$brand-accent-700};
+    --tk-color-base-accent-800: #{cfg.$brand-accent-800};
+    --tk-color-base-accent-900: #{cfg.$brand-accent-900};
+    --tk-color-base-accent-950: #{cfg.$brand-accent-950};
+  }
+
+  // ── Secondary palette (always emitted; defaults to surface palette) ─────────
+  --tk-color-base-secondary-50:  #{cfg.$brand-secondary-50};
+  --tk-color-base-secondary-100: #{cfg.$brand-secondary-100};
+  --tk-color-base-secondary-200: #{cfg.$brand-secondary-200};
+  --tk-color-base-secondary-300: #{cfg.$brand-secondary-300};
+  --tk-color-base-secondary-400: #{cfg.$brand-secondary-400};
+  --tk-color-base-secondary-500: #{cfg.$brand-secondary-500};
+  --tk-color-base-secondary-600: #{cfg.$brand-secondary-600};
+  --tk-color-base-secondary-700: #{cfg.$brand-secondary-700};
+  --tk-color-base-secondary-800: #{cfg.$brand-secondary-800};
+  --tk-color-base-secondary-900: #{cfg.$brand-secondary-900};
+  --tk-color-base-secondary-950: #{cfg.$brand-secondary-950};
+
+  // ── Typography ─────────────────────────────────────────────────────────────
+  --tk-font-family: #{cfg.$brand-font-family};
+
+  // ── Brand-adaptive border radius ───────────────────────────────────────────
+  // Use these tokens where you want brand-style adaptation (buttons, inputs, cards).
+  // Keep --tk-borderRadius-xs/s/m/l for strict, non-adaptive values.
+  // Note: the `theme-l` step is the pill/fully-rounded slot — it resolves to
+  // --tk-borderRadius-full under every style except 'square'/'sharp'. It is NOT
+  // the adaptive counterpart of --tk-borderRadius-l; that one is `theme-xl`.
+  --tk-borderRadius-theme-xs: #{cfg.$radius-xs};
+  --tk-borderRadius-theme-s:  #{cfg.$radius-s};
+  --tk-borderRadius-theme-m:  #{cfg.$radius-m};
+  --tk-borderRadius-theme-l:  #{cfg.$radius-l};
+  --tk-borderRadius-theme-xl: #{cfg.$radius-xl};
+}

package/styles/variables.css

@@ -177,6 +177,7 @@
   --tk-size-base-100: 1rem;
   --tk-size-base-150: 1.5rem;
   --tk-size-base-200: 2rem;
+  --tk-size-base-250: 2.5rem;
   --tk-size-base-500: 5rem;
   --tk-size-base-1000: 10rem;
   --tk-size-base-2000: 20rem;

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-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-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 };