@tekus/design-system 5.37.0 → 5.39.0

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-data-list.d.ts

@@ -0,0 +1,193 @@
+import * as _angular_cdk_layout from '@angular/cdk/layout';
+import * as _angular_core from '@angular/core';
+import { TagSeverity } from '@tekus/design-system/components/tag';
+
+/**
+ * How the pairs are arranged.
+ *
+ * - `'list'`: a single vertical column at 100% width. Each item lays out
+ *   horizontally — term on the left, value on the right — with a divider between items.
+ * - `'grid'`: a responsive multi-column grid with no dividers. Each item stacks
+ *   vertically — term above value. The column count is owned by the component
+ *   (see `DataListComponent.gridColumnCount`), not by the consumer.
+ */
+type TkDataListLayout = 'list' | 'grid';
+/**
+ * The closed set of value types a data list can render.
+ *
+ * This union is deliberately closed: a value is governed, typed data, not free-form
+ * content. Adding a type is a system-level change, never something a consumer does
+ * inline.
+ *
+ * It expresses the same idea as `tk-table`'s `TableColumnType` — typed values rather
+ * than free-form content — but the two unions are independent and only overlap on
+ * `'text'` and `'tag'`. Do not expect parity: `'link'` and `'number'` exist only here,
+ * and table's `'image'`, `'actions'`, `'checkbox'`, `'selection'`, `'action-group'` and
+ * `'connection-status'` exist only there. Unifying the vocabulary would be a
+ * system-level decision affecting both components.
+ */
+type TkDataListValueType = 'text' | 'link' | 'tag' | 'number';
+/**
+ * A single term→value pair rendered by `tk-data-list`.
+ */
+interface TkDataListItem {
+    /** The term naming the value. Required. */
+    label: string;
+    /**
+     * The value to render.
+     *
+     * `null`, `undefined` and blank strings all render as the `--` placeholder,
+     * uniformly across every `type`. Note that `0` is a real value, not an empty one.
+     */
+    value: string | number | null | undefined;
+    /**
+     * How the value is rendered.
+     * @default 'text'
+     */
+    type?: TkDataListValueType;
+    /** An optional secondary line beneath the label. */
+    description?: string;
+    /**
+     * An optional icon shown in a secondary icon avatar before the label.
+     * Forwarded to `tk-avatar` as `variant="icon"`; decorative and hidden from
+     * assistive technology.
+     */
+    leadingIcon?: string;
+    /**
+     * The colour scheme of the tag. Only used when `type` is `'tag'`.
+     * @default 'primary'
+     */
+    tagSeverity?: TagSeverity;
+    /**
+     * Invoked when the value is activated. Required in practice for `type: 'link'`.
+     *
+     * Link values render a `tk-button` in its link variant, so they are
+     * action-based rather than href-based: this callback is the navigation or
+     * action hook. Assistive technology announces them as buttons.
+     *
+     * A `'link'` without a handler would be a button that does nothing, so it is
+     * rendered as plain text instead — no dead control reaches the accessibility
+     * tree or the tab order.
+     */
+    handler?: () => void;
+}
+
+/** Rendered in place of a value that is `null`, `undefined` or a blank string. */
+declare const DATA_LIST_EMPTY_PLACEHOLDER = "--";
+/**
+ * @component DataListComponent
+ * @description
+ * Displays a collection of read-only term→value pairs, where each value is a typed
+ * piece of data (text, link, tag or number). It is the pair-oriented sibling of
+ * `tk-table`: both render governed, typed values, but the data list presents them as
+ * label→value pairs instead of rows and columns. Use it for detail panels, record
+ * summaries and entity overviews.
+ *
+ * This component supports:
+ * - `items`: the pairs to render. See {@link TkDataListItem}.
+ * - `layout`: `'list'` (one column, dividers, term left / value right) or `'grid'`
+ *   (responsive multi-column, no dividers, term above value).
+ * - `emptyPlaceholder`: the text rendered in place of an empty value.
+ *
+ * The consumer only chooses the layout. Everything that follows from it — item
+ * orientation, dividers and the responsive column count — is owned by the component.
+ * To vary the layout across breakpoints (e.g. list on mobile, grid on desktop), switch
+ * the `layout` input at your own breakpoint.
+ *
+ * Renders as a description list (`<dl>`) so assistive technology announces each entry
+ * as a term→value pair. Interactivity lives inside the value, never on the item — the
+ * item itself is neither focusable nor clickable.
+ *
+ * @usage
+ * ### Basic Usage
+ * ```html
+ * <tk-data-list [items]="details" layout="list"></tk-data-list>
+ * ```
+ * ```ts
+ * details: TkDataListItem[] = [
+ *   { label: 'Owner', value: 'Ana Bermúdez' },
+ *   { label: 'Status', value: 'Active', type: 'tag' },
+ *   { label: 'Devices', value: 2322, type: 'number' },
+ *   { label: 'Contract', value: 'Open', type: 'link', handler: () => this.openContract() },
+ * ];
+ * ```
+ */
+declare class DataListComponent {
+    /**
+     * The term→value pairs to render, in order.
+     * @default []
+     */
+    items: _angular_core.InputSignal<TkDataListItem[]>;
+    /**
+     * How the pairs are arranged.
+     * @default 'list'
+     */
+    layout: _angular_core.InputSignal<TkDataListLayout>;
+    /**
+     * The text rendered in place of a value that is `null`, `undefined` or blank.
+     *
+     * Exposed as an input so it can be localised (`'N/A'`, `'Sin dato'`, …). The
+     * default is the system-wide placeholder.
+     * @default '--'
+     */
+    emptyPlaceholder: _angular_core.InputSignal<string>;
+    private readonly breakpointObserver;
+    /**
+     * Reactive viewport state across every breakpoint the design system defines.
+     *
+     * Grid mode sizes off the viewport rather than the component's own width, matching
+     * `tk-grid-container`. A consequence worth knowing: a data list inside a narrow
+     * drawer still reports the viewport's column count.
+     */
+    readonly screenChanges: _angular_core.Signal<_angular_cdk_layout.BreakpointState | undefined>;
+    /** Whether the grid layout is active. */
+    readonly isGrid: _angular_core.Signal<boolean>;
+    /**
+     * The number of grid columns for the current viewport.
+     *
+     * Mobile 1 · Tablet 2 · Small 2 · Normal 3 · Extra large 5. Falls back to a single
+     * column when the observer has not reported yet, so the first paint is mobile-first
+     * rather than over-wide.
+     */
+    readonly gridColumnCount: _angular_core.Signal<1 | 5 | 3 | 2>;
+    /**
+     * The `grid-template-columns` value bound on the `<dl>`, or `null` in list layout
+     * so the property is left off the element entirely.
+     *
+     * The track count is capped at the number of items: a data list usually holds fewer
+     * pairs than the viewport allows columns, and emitting the full count would leave
+     * empty tracks that squeeze every value into a fraction of the available width
+     * (e.g. three items over five tracks). Never drops below one, so an empty list still
+     * produces a valid value.
+     */
+    readonly gridTemplateColumns: _angular_core.Signal<string | null>;
+    /**
+     * Whether a value should render as the `--` placeholder.
+     *
+     * Applied before the type is considered, so the rule holds uniformly across every
+     * type. `0` and `false`-ish numbers are real values and are not treated as empty.
+     */
+    isEmpty(value: TkDataListItem['value']): boolean;
+    /**
+     * The effective value type, defaulting to `'text'`.
+     *
+     * A `'link'` with no `handler` has nothing to invoke, so it resolves to `'text'`: it
+     * renders as plain data instead of as a button that does nothing. That keeps a dead
+     * control out of the accessibility tree and the tab order entirely, which `disabled`
+     * would not do — and `disabled` would also claim the action merely is unavailable
+     * right now, which is not the case.
+     */
+    resolveType(item: TkDataListItem): TkDataListValueType;
+    /** The effective tag severity, defaulting to the one used in the design. */
+    resolveTagSeverity(item: TkDataListItem): TagSeverity;
+    /**
+     * The value as a string, for the child components that require one
+     * (`tk-tag.value` and `tk-button.label` are both typed `string`).
+     */
+    asText(value: TkDataListItem['value']): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataListComponent, "tk-data-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "emptyPlaceholder": { "alias": "emptyPlaceholder"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { DATA_LIST_EMPTY_PLACEHOLDER, DataListComponent };
+export type { TkDataListItem, TkDataListLayout, TkDataListValueType };

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

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

@@ -185,10 +185,6 @@ declare class SelectComponent<T = unknown> implements ControlValueAccessor, OnDe
      * Text to display when no results match the filter.
      */
     emptyFilterMessage: _angular_core.InputSignal<string>;
-    /**
-     * Emits whenever the value changes.
-     */
-    modelChange: _angular_core.OutputEmitterRef<T | null>;
     /**
      * Emits the filter search term.
      */
@@ -205,7 +201,7 @@ declare class SelectComponent<T = unknown> implements ControlValueAccessor, OnDe
      * Includes a "Ghost Option" logic to ensure the selected item is always visible
      * even if it's not in the current loaded chunk of data.
      */
-    get items(): T[];
+    readonly items: _angular_core.Signal<T[]>;
     /**
      * Receives value updates from Angular Forms API.
      * @param value - New value from the forms API.
@@ -265,7 +261,7 @@ declare class SelectComponent<T = unknown> implements ControlValueAccessor, OnDe
      */
     private handleScroll;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent<any>, "tk-select", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "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; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fetchParams": { "alias": "fetchParams"; "required": false; "isSignal": true; }; "sortField": { "alias": "sortField"; "required": false; "isSignal": true; }; "sortOrder": { "alias": "sortOrder"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; }, { "dataSource": "dataSourceChange"; "model": "modelChange"; "modelChange": "modelChange"; "filterChange": "filterChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent<any>, "tk-select", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "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; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fetchParams": { "alias": "fetchParams"; "required": false; "isSignal": true; }; "sortField": { "alias": "sortField"; "required": false; "isSignal": true; }; "sortOrder": { "alias": "sortOrder"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; }, { "dataSource": "dataSourceChange"; "model": "modelChange"; "filterChange": "filterChange"; }, never, never, true, never>;
 }
 
 declare class IntersectionDirective implements OnInit, OnDestroy {

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

@@ -0,0 +1,161 @@
+import * as _angular_core from '@angular/core';
+import { Signal, InjectionToken } from '@angular/core';
+import { TagSeverity } from '@tekus/design-system/components/tag';
+
+/**
+ * The feedback intent of a stat. It drives the color of the value — and only the
+ * value: the surface, the label, the description and the progress bar are
+ * identical across every severity.
+ */
+type StatSeverity = 'secondary' | 'primary' | 'success' | 'warn' | 'danger';
+/**
+ * How a `tk-stat-group` lays its children out.
+ * - `auto`: a row that collapses to a column on small screens.
+ * - `row`: always horizontal.
+ * - `column`: always vertical.
+ */
+type StatGroupOrientation = 'auto' | 'row' | 'column';
+/** The contract a `tk-stat-group` exposes to the `tk-stat` children it projects. */
+interface StatGroupContext {
+    readonly orientation: Signal<StatGroupOrientation>;
+}
+/**
+ * Provided by `tk-stat-group`, injected optionally by `tk-stat`.
+ *
+ * This is how a stat discovers that it lives inside a group and must drop its own
+ * surface — the group owns the background, so the children must not paint their
+ * own. A stat never sets its grouped appearance itself, and a consumer never has
+ * to hand it down.
+ */
+declare const TK_STAT_GROUP: InjectionToken<StatGroupContext>;
+
+/**
+ * @component StatComponent
+ * @description
+ * Displays a single highlighted metric: a large dominant value, a small label above
+ * it, and optionally a status tag, a description and a progress bar. Used at the top
+ * of listings, summaries and dashboards to surface a key figure at a glance.
+ *
+ * This component supports:
+ * - `label` / `value`: the two required parts. The value is the dominant figure.
+ * - `severity`: the feedback intent. Colors the value — and nothing else.
+ * - `prefix` / `suffix`: small muted affixes flanking the value (e.g. `'$'`, `'/200'`).
+ * - `description`: a secondary line below the value.
+ * - `tagValue` / `tagSeverity`: a trailing tag in the header, via `tk-tag`.
+ * - `progress`: shows a `tk-progress-bar` below the content when set.
+ * - `severityLabel`: screen-reader-only text so `severity` is not color-only.
+ *
+ * There is no `grouped` input: wrapping stats in `tk-stat-group` applies the grouped
+ * appearance automatically.
+ *
+ * @usage
+ * ### Basic Usage
+ * ```html
+ * <tk-stat label="Usuarios mensuales" [value]="500" description="Audiencia estimada" />
+ * <tk-stat label="Slots" [value]="25" suffix="/200" [progress]="12" tagValue="Disponible" tagSeverity="success" />
+ * ```
+ */
+declare class StatComponent {
+    /** The small title shown above the value. */
+    label: _angular_core.InputSignal<string>;
+    /**
+     * The dominant figure. Accepts a number or an already-formatted string
+     * (`'1.2K'`, `'99,9 %'`) so the consumer keeps control of formatting and locale.
+     */
+    value: _angular_core.InputSignal<string | number>;
+    /**
+     * The feedback intent of the stat, which colors the value.
+     * @default 'secondary'
+     */
+    severity: _angular_core.InputSignal<StatSeverity>;
+    /** Small muted text rendered immediately before the value (e.g. `'$'`). */
+    prefix: _angular_core.InputSignal<string>;
+    /** Small muted text rendered immediately after the value (e.g. `'/200'`, `'/GB'`). */
+    suffix: _angular_core.InputSignal<string>;
+    /** A secondary line below the value, giving context or the origin of the figure. */
+    description: _angular_core.InputSignal<string>;
+    /** The text of the trailing header tag. The tag is only rendered when this is set. */
+    tagValue: _angular_core.InputSignal<string>;
+    /**
+     * The severity of the trailing header tag.
+     * @default 'secondary'
+     */
+    tagSeverity: _angular_core.InputSignal<TagSeverity>;
+    /**
+     * The completion percentage (0-100) shown as a progress bar below the content.
+     * Leave `undefined` to omit the bar — `0` is a valid value and renders an empty bar.
+     */
+    progress: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Screen-reader-only text describing what this stat's `severity` means (e.g.
+     * `'sobre la cuota'`). Set it whenever `severity` is not `'secondary'`, so the
+     * meaning is not carried by color alone. Saying it visibly through `tagValue` or
+     * `description` is usually better, since it serves sighted users too.
+     */
+    severityLabel: _angular_core.InputSignal<string>;
+    /**
+     * The group this stat is projected into, if any. Injected optionally: a standalone
+     * stat resolves `null` and keeps its own surface.
+     */
+    private readonly group;
+    /** Whether this stat is projected inside a `tk-stat-group`. */
+    readonly grouped: boolean;
+    /** Unique DOM id linking the rendered label to the host's `aria-labelledby`. */
+    readonly labelId: string;
+    /**
+     * Whether a progress bar should be rendered. Tests for `null`/`undefined` rather
+     * than truthiness so that `progress = 0` still renders an empty bar.
+     */
+    hasProgress: _angular_core.Signal<boolean>;
+    /** Computed host class: the BEM block plus the severity and grouped modifiers. */
+    hostClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatComponent, "tk-stat", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "tagValue": { "alias": "tagValue"; "required": false; "isSignal": true; }; "tagSeverity": { "alias": "tagSeverity"; "required": false; "isSignal": true; }; "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "severityLabel": { "alias": "severityLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @component StatGroupComponent
+ * @description
+ * Wraps a row of related `tk-stat` into a single shared surface, inserting a
+ * separator between each pair. The group owns the background and the radius; every
+ * stat projected into it drops its own surface automatically, through the
+ * {@link TK_STAT_GROUP} token this component provides.
+ *
+ * This component supports:
+ * - `orientation`: `'auto'` (a row that collapses to a column on small screens),
+ *   `'row'` or `'column'`.
+ * - `ariaLabel`: names the group for assistive tech. Only when set does the group
+ *   expose `role="group"` — an unnamed group is noise.
+ *
+ * @usage
+ * ### Basic Usage
+ * ```html
+ * <tk-stat-group ariaLabel="Resumen de la campaña">
+ *   <tk-stat label="Usuarios mensuales" [value]="500" description="Audiencia estimada" />
+ *   <tk-stat label="Estado de la pantalla" [value]="500" severity="success" description="12 de 12 días" />
+ *   <tk-stat label="Slots" [value]="25" suffix="/200" [progress]="12" />
+ * </tk-stat-group>
+ * ```
+ */
+declare class StatGroupComponent implements StatGroupContext {
+    /**
+     * How the stats are laid out.
+     * - `'auto'`: horizontal, collapsing to a column on viewports narrower than a
+     *   vertical tablet. This is the responsive default the design calls for.
+     * - `'row'` / `'column'`: force one direction — for a group inside a narrow
+     *   sidebar on a wide screen, or one that must stay horizontal on mobile.
+     * @default 'auto'
+     */
+    orientation: _angular_core.InputSignal<StatGroupOrientation>;
+    /**
+     * The accessible name of the group. When set, the group exposes itself as
+     * `role="group"` with this label; when omitted it stays structurally invisible to
+     * assistive tech, since an unnamed group adds nothing but noise.
+     */
+    ariaLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatGroupComponent, "tk-stat-group", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { StatComponent, StatGroupComponent, TK_STAT_GROUP };
+export type { StatGroupContext, StatGroupOrientation, StatSeverity };