yukit-web 0.0.22 → 0.0.24

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yukit-web",
   "description": "Angular UI component library for Yurest web applications.",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "author": {
     "name": "Yurest Solutions",
     "email": "develop@yurest.com"

package/src/lib/theme/tokens/component-colors.css

@@ -3,6 +3,7 @@
   --yuw-accent-foreground: var(--neutrals-white);
   --secondary: var(--sidebar-accent);
   --secondary-foreground: var(--sidebar-accent-foreground);
+  --yuw-callout-bg: var(--accent-primary-lighter-2);
 }
 
 [data-yuw-color='primary'] button.bg-primary:not(:disabled) {
@@ -19,6 +20,7 @@
   --yuw-accent-foreground: var(--background);
   --secondary: var(--neutrals-element-low);
   --secondary-foreground: var(--neutrals-overlay-accent);
+  --yuw-callout-bg: var(--neutrals-overlay);
 }
 
 [data-yuw-color='secondary'] button.bg-primary:not(:disabled) {
@@ -35,6 +37,7 @@
   --yuw-accent-foreground: var(--neutrals-white);
   --secondary: var(--feedback-error-light);
   --secondary-foreground: var(--neutrals-surface);
+  --yuw-callout-bg: var(--feedback-error-lighter-2);
 }
 
 [data-yuw-color='destructive'] button.bg-primary:not(:disabled):hover {
@@ -46,6 +49,7 @@
   --yuw-accent-foreground: var(--neutrals-white);
   --secondary: var(--feedback-success-light);
   --secondary-foreground: var(--neutrals-surface);
+  --yuw-callout-bg: var(--feedback-success-lighter-2);
 }
 
 [data-yuw-color='success'] button.bg-primary:not(:disabled):hover {
@@ -57,6 +61,7 @@
   --yuw-accent-foreground: var(--neutrals-white);
   --secondary: var(--feedback-warning-light);
   --secondary-foreground: var(--neutrals-surface);
+  --yuw-callout-bg: var(--feedback-warning-lighter-2);
 }
 
 [data-yuw-color='warning'] button.bg-primary:not(:disabled):hover {
@@ -68,6 +73,7 @@
   --yuw-accent-foreground: var(--neutrals-white);
   --secondary: var(--feedback-info-light);
   --secondary-foreground: var(--neutrals-surface);
+  --yuw-callout-bg: var(--feedback-info-lighter-2);
 }
 
 [data-yuw-color='info'] button.bg-primary:not(:disabled):hover {
@@ -79,6 +85,7 @@
   --yuw-accent-foreground: var(--neutrals-white);
   --secondary: var(--feedback-additional-light);
   --secondary-foreground: var(--neutrals-surface);
+  --yuw-callout-bg: var(--feedback-additional-lighter-2);
 }
 
 [data-yuw-color='violet'] button.bg-primary:not(:disabled):hover {
@@ -90,6 +97,7 @@
   --yuw-accent-foreground: var(--neutrals-white);
   --secondary: var(--neutrals-overlay);
   --secondary-foreground: var(--neutrals-element-mid);
+  --yuw-callout-bg: var(--neutrals-overlay);
 }
 
 [data-yuw-color='muted'] button.bg-primary:not(:disabled):hover {
@@ -126,42 +134,49 @@
   --yuw-accent: var(--accent-primary-dark);
   --secondary: var(--sidebar-accent);
   --secondary-foreground: var(--sidebar-accent-foreground);
+  --yuw-callout-bg: var(--accent-primary-lighter-2);
 }
 
 .dark [data-yuw-color='secondary'] {
   --secondary: var(--neutrals-element-low);
   --secondary-foreground: var(--neutrals-overlay-accent);
   --input: color-mix(in oklab, var(--yuw-accent) 40%, transparent);
+  --yuw-callout-bg: var(--neutrals-overlay);
 }
 
 .dark [data-yuw-color='destructive'] {
   --yuw-accent: var(--feedback-error-dark);
   --secondary: var(--feedback-error-lighter-2);
   --secondary-foreground: var(--neutrals-white);
+  --yuw-callout-bg: var(--feedback-error-lighter-2);
 }
 
 .dark [data-yuw-color='success'] {
   --yuw-accent: var(--feedback-success-dark);
   --secondary: var(--feedback-success-lighter-2);
   --secondary-foreground: var(--neutrals-white);
+  --yuw-callout-bg: var(--feedback-success-lighter-2);
 }
 
 .dark [data-yuw-color='warning'] {
   --yuw-accent: var(--feedback-warning-dark);
   --secondary: var(--feedback-warning-lighter-2);
   --secondary-foreground: var(--neutrals-white);
+  --yuw-callout-bg: var(--feedback-warning-lighter-2);
 }
 
 .dark [data-yuw-color='info'] {
   --yuw-accent: var(--feedback-info-dark);
   --secondary: var(--feedback-info-lighter-2);
   --secondary-foreground: var(--neutrals-white);
+  --yuw-callout-bg: var(--feedback-info-lighter-2);
 }
 
 .dark [data-yuw-color='violet'] {
   --yuw-accent-foreground: var(--neutrals-white);
   --secondary: var(--feedback-additional-dark);
   --secondary-foreground: var(--neutrals-white);
+  --yuw-callout-bg: var(--feedback-additional-lighter-2);
 }
 
 .dark [data-yuw-color] button.bg-background:not(:disabled):hover {

package/types/yukit-web.d.ts

@@ -132,6 +132,8 @@ interface YuwTextFieldContract {
     readonly readonly: InputSignalWithTransform<boolean, unknown>;
     readonly required: InputSignalWithTransform<boolean, unknown>;
     readonly invalid: InputSignalWithTransform<boolean, unknown>;
+    readonly helperText: InputSignal<string | undefined>;
+    readonly errorText: InputSignal<string | undefined>;
     readonly name: InputSignal<string | undefined>;
     readonly autocomplete: InputSignal<string | undefined>;
 }
@@ -678,7 +680,11 @@ declare const YuwAccordionImports: readonly [typeof YuwAccordion, typeof YuwAcco
  * - `disabled`: Disables input interaction.
  * - `readonly`: Makes the field read-only.
  * - `required`: Marks the field as required.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state (form validation or
+ *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
+ *   reactive forms); required when no such message exists.
  * - `name`: HTML `name` attribute.
  * - `autocomplete`: Native `autocomplete` attribute.
  * - `maxlength`: Hard cap on character count, enforced natively by the browser.
@@ -702,6 +708,8 @@ declare class YuwInputComponent extends YuwValueAccessorBase<string> implements
     private readonly _rightAddons;
     readonly autocomplete: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errorText: _angular_core.InputSignal<string | undefined>;
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly inputmode: _angular_core.InputSignal<YuwInputModeDto | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -726,7 +734,7 @@ declare class YuwInputComponent extends YuwValueAccessorBase<string> implements
     protected onChange(): void;
     protected onInput(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputComponent, "yuw-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; }, ["_leftAddons", "_rightAddons"], ["yuw-left-addon", "yuw-right-addon"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputComponent, "yuw-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; }, ["_leftAddons", "_rightAddons"], ["yuw-left-addon", "yuw-right-addon"], true, never>;
 }
 
 /**
@@ -754,7 +762,11 @@ declare const YuwInputAddonImports: readonly [typeof YuwLeftAddonDirective, type
  * - `disabled`: Disables input interaction.
  * - `readonly`: Makes the field read-only.
  * - `required`: Marks the field as required.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state (form validation or
+ *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
+ *   reactive forms); required when no such message exists.
  * - `name`: HTML `name` attribute.
  * - `autocomplete`: Native `autocomplete` attribute.
  * - `rows`: Fallback visible height in lines where `field-sizing` is unsupported; ignored otherwise.
@@ -776,6 +788,8 @@ declare class YuwTextareaComponent extends YuwValueAccessorBase<string> implemen
     private readonly _rightAddons;
     readonly autocomplete: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errorText: _angular_core.InputSignal<string | undefined>;
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly maxlength: _angular_core.InputSignal<number | undefined>;
@@ -798,7 +812,7 @@ declare class YuwTextareaComponent extends YuwValueAccessorBase<string> implemen
     protected onChange(): void;
     protected onInput(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwTextareaComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwTextareaComponent, "yuw-textarea", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; }, ["_leftAddons", "_rightAddons"], ["yuw-left-addon", "yuw-right-addon"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwTextareaComponent, "yuw-textarea", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; }, ["_leftAddons", "_rightAddons"], ["yuw-left-addon", "yuw-right-addon"], true, never>;
 }
 
 /**
@@ -818,7 +832,11 @@ type YuwSearchInputCollapseFromDto = 'left' | 'right';
  * - `disabled`: Disables input interaction.
  * - `readonly`: Makes the field read-only.
  * - `required`: Marks the field as required.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state (form validation or
+ *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
+ *   reactive forms); required when no such message exists.
  * - `name`: HTML `name` attribute.
  * - `autocomplete`: Native `autocomplete` attribute.
  * - `placeholder`: Hint text shown inside the empty field.
@@ -871,8 +889,10 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
     readonly clearAriaLabel: _angular_core.InputSignal<string | undefined>;
     readonly collapseFrom: _angular_core.InputSignal<YuwSearchInputCollapseFromDto | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errorText: _angular_core.InputSignal<string | undefined>;
     readonly expandAriaLabel: _angular_core.InputSignal<string | undefined>;
     readonly expandedWidth: _angular_core.InputSignal<string>;
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly name: _angular_core.InputSignal<string | undefined>;
@@ -921,7 +941,7 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
     protected onExpandFocus(event: FocusEvent): void;
     protected onInput(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwSearchInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwSearchInputComponent, "yuw-search-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "collapseFrom": { "alias": "collapseFrom"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expandAriaLabel": { "alias": "expandAriaLabel"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; "searched": "searched"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwSearchInputComponent, "yuw-search-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "collapseFrom": { "alias": "collapseFrom"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "expandAriaLabel": { "alias": "expandAriaLabel"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; "searched": "searched"; }, never, never, true, never>;
 }
 
 /**
@@ -934,7 +954,11 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
  * - `disabled`: Disables input interaction.
  * - `readonly`: Makes the field read-only.
  * - `required`: Marks the field as required.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state (form validation or
+ *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
+ *   reactive forms); required when no such message exists.
  * - `name`: HTML `name` attribute.
  * - `autocomplete`: Native `autocomplete` attribute (e.g. `'current-password'`, `'new-password'`).
  * - `placeholder`: Hint text shown inside the empty field.
@@ -955,6 +979,8 @@ declare class YuwPasswordInputComponent extends YuwValueAccessorBase<string> imp
     private readonly _leftAddons;
     readonly autocomplete: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errorText: _angular_core.InputSignal<string | undefined>;
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly masked: _angular_core.ModelSignal<boolean>;
@@ -978,7 +1004,7 @@ declare class YuwPasswordInputComponent extends YuwValueAccessorBase<string> imp
     protected onInput(event: Event): void;
     protected onToggleReveal(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwPasswordInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwPasswordInputComponent, "yuw-password-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "masked": { "alias": "masked"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "revealAriaLabel": { "alias": "revealAriaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "masked": "maskedChange"; "value": "valueChange"; "committed": "committed"; }, ["_leftAddons"], ["yuw-left-addon"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwPasswordInputComponent, "yuw-password-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "masked": { "alias": "masked"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "revealAriaLabel": { "alias": "revealAriaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "masked": "maskedChange"; "value": "valueChange"; "committed": "committed"; }, ["_leftAddons"], ["yuw-left-addon"], true, never>;
 }
 
 /**
@@ -1010,7 +1036,11 @@ type YuwInputOtpModeDto = 'numeric' | 'text';
  * - `mode`: Virtual-keyboard hint (`'numeric'`, `'text'`). Default is `'numeric'`.
  * - `disabled`: Disables input interaction.
  * - `size`: Cell size, matching the `<yuw-button>` of the same name.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state (form validation or
+ *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
+ *   reactive forms); required when no such message exists.
  * - `autofocus`: Focuses the field on init. Appropriate on dedicated verification screens.
  * - `transformPaste`: Normalizes pasted text before it fills the slots.
  * - `class`: Extra classes merged onto the OTP container.
@@ -1027,7 +1057,9 @@ type YuwInputOtpModeDto = 'numeric' | 'text';
 declare class YuwInputOtpComponent extends YuwValueAccessorBase<string> {
     readonly autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errorText: _angular_core.InputSignal<string | undefined>;
     readonly groupSizes: _angular_core.InputSignal<readonly number[]>;
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly mode: _angular_core.InputSignal<YuwInputOtpModeDto>;
@@ -1045,7 +1077,7 @@ declare class YuwInputOtpComponent extends YuwValueAccessorBase<string> {
     protected _emptyValue(): string;
     protected onValueChange(next: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwInputOtpComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputOtpComponent, "yuw-input-otp", never, { "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "groupSizes": { "alias": "groupSizes"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transformPaste": { "alias": "transformPaste"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputOtpComponent, "yuw-input-otp", never, { "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "groupSizes": { "alias": "groupSizes"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transformPaste": { "alias": "transformPaste"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
 }
 
 /**
@@ -1879,10 +1911,17 @@ type YuwDatatableRowClass<TData extends RowData> = string | ((row: TData, index:
  * - `columnVisibility`: Two-way column visibility state (`ColumnVisibilityState`).
  * - `rowSelection`: Two-way row selection state (`RowSelectionState`).
  * - `pagination`: Two-way pagination state (`PaginationState`). Default is `{ pageIndex: 0, pageSize: 10 }`.
+ * - `totalItems`: Total row count across all pages, for server-side pagination where `data` holds
+ *   only the current page. When set, pagination becomes manual — TanStack stops slicing `data`
+ *   itself and `getPageCount()` is derived from this count instead of `data.length`. Leave unset
+ *   for the default client-side pagination, where `data` holds the whole dataset.
  *
  * Outputs:
  * - `selectedRowsChange`: Emits the selected row objects (`TData[]`) on selection changes. The
  *   initial state does not emit — only actual changes after mount.
+ * - `rowClicked`: Emits a row's data (`TData`) on click, Enter, or Space. Every body row carries
+ *   `role="button"` and `tabindex="0"` so it stays operable from the keyboard, not just the mouse,
+ *   even when nothing is listening.
  *
  * Usage:
  * ```html
@@ -1932,6 +1971,7 @@ declare class YuwDatatableComponent<TData extends RowData> implements OnInit {
     readonly sorting: _angular_core.ModelSignal<SortingState>;
     readonly summary: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly tableClass: _angular_core.InputSignal<string | undefined>;
+    readonly totalItems: _angular_core.InputSignal<number | undefined>;
     protected rowClicked: _angular_core.OutputEmitterRef<TData>;
     protected readonly _ariaSort: Record<'asc' | 'desc', 'ascending' | 'descending'>;
     private readonly _options;
@@ -1969,8 +2009,9 @@ declare class YuwDatatableComponent<TData extends RowData> implements OnInit {
     ngOnInit(): void;
     protected onPageChange(page: number): void;
     protected onRowClick(row: TData): void;
+    protected onRowKeydown(event: KeyboardEvent, row: TData): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwDatatableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwDatatableComponent<any>, "yuw-datatable", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "cellClass": { "alias": "cellClass"; "required": false; "isSignal": true; }; "columnFilters": { "alias": "columnFilters"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "columnVisibility": { "alias": "columnVisibility"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingRows": { "alias": "loadingRows"; "required": false; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": true; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "paginationAriaLabel": { "alias": "paginationAriaLabel"; "required": true; "isSignal": true; }; "paginationEllipsisSrText": { "alias": "paginationEllipsisSrText"; "required": true; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": true; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "required": false; "isSignal": true; }; "rowSelection": { "alias": "rowSelection"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "sorting": { "alias": "sorting"; "required": false; "isSignal": true; }; "summary": { "alias": "summary"; "required": false; "isSignal": true; }; "tableClass": { "alias": "tableClass"; "required": false; "isSignal": true; }; }, { "columnFilters": "columnFiltersChange"; "columnVisibility": "columnVisibilityChange"; "pagination": "paginationChange"; "rowSelection": "rowSelectionChange"; "sorting": "sortingChange"; "rowClicked": "rowClicked"; "selectedRowsChange": "selectedRowsChange"; }, ["customPagination"], ["[yuwDatatablePagination]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwDatatableComponent<any>, "yuw-datatable", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "cellClass": { "alias": "cellClass"; "required": false; "isSignal": true; }; "columnFilters": { "alias": "columnFilters"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "columnVisibility": { "alias": "columnVisibility"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingRows": { "alias": "loadingRows"; "required": false; "isSignal": true; }; "nextPageLabel": { "alias": "nextPageLabel"; "required": true; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "paginationAriaLabel": { "alias": "paginationAriaLabel"; "required": true; "isSignal": true; }; "paginationEllipsisSrText": { "alias": "paginationEllipsisSrText"; "required": true; "isSignal": true; }; "previousPageLabel": { "alias": "previousPageLabel"; "required": true; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "required": false; "isSignal": true; }; "rowSelection": { "alias": "rowSelection"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "sorting": { "alias": "sorting"; "required": false; "isSignal": true; }; "summary": { "alias": "summary"; "required": false; "isSignal": true; }; "tableClass": { "alias": "tableClass"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; }, { "columnFilters": "columnFiltersChange"; "columnVisibility": "columnVisibilityChange"; "pagination": "paginationChange"; "rowSelection": "rowSelectionChange"; "sorting": "sortingChange"; "rowClicked": "rowClicked"; "selectedRowsChange": "selectedRowsChange"; }, ["customPagination"], ["[yuwDatatablePagination]"], true, never>;
 }
 
 declare class YuwDatatableRowSelect {
@@ -2400,6 +2441,9 @@ type YuwAlertVariantDto = 'default' | 'destructive';
  *
  * Inputs:
  * - `variant`: Visual tone (`'default'`, `'destructive'`). Default is `'default'`.
+ * - `color`: Shared color vocabulary (`YuwColorDto`, e.g. `'warning'`, `'info'`, `'destructive'`)
+ *   for a tinted callout — soft background, colored border, icon and title/border in the color's
+ *   strong tone. Leave unset for the plain `variant`-only look.
  * - `title`: Heading text. User-facing text the consuming app is responsible for translating.
  *   Ignored when a `[yuwAlertTitle]` slot is projected.
  * - `description`: Body text. User-facing text the consuming app is responsible for translating.
@@ -2416,7 +2460,7 @@ type YuwAlertVariantDto = 'default' | 'destructive';
  *
  * Usage:
  * ```html
- * <yuw-alert variant="destructive" title="Pago rechazado" description="Revisa los datos de la tarjeta.">
+ * <yuw-alert color="warning" title="Pago pendiente" description="Revisa los datos de la tarjeta.">
  *   <ng-icon yuwAlertIcon name="lucideTriangleAlert" />
  *   <yuw-button yuwAlertAction size="sm" variant="ghost">Reintentar</yuw-button>
  * </yuw-alert>
@@ -2431,12 +2475,15 @@ declare class YuwAlertComponent {
     protected readonly descriptionSlot: _angular_core.Signal<YuwAlertDescriptionDirective | undefined>;
     protected readonly hasAction: _angular_core.Signal<YuwAlertActionDirective | undefined>;
     protected readonly titleSlot: _angular_core.Signal<YuwAlertTitleDirective | undefined>;
+    readonly color: _angular_core.InputSignal<YuwColorDto | undefined>;
     readonly description: _angular_core.InputSignal<string | undefined>;
     readonly title: _angular_core.InputSignal<string | undefined>;
     readonly userClass: _angular_core.InputSignal<string>;
     readonly variant: _angular_core.InputSignal<YuwAlertVariantDto>;
+    protected readonly alertClass: _angular_core.Signal<string>;
+    protected readonly effectiveVariant: _angular_core.Signal<YuwAlertVariantDto>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwAlertComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwAlertComponent, "yuw-alert", never, { "description": { "alias": "description"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, ["descriptionSlot", "hasAction", "titleSlot"], ["[yuwAlertIcon]", "[yuwAlertTitle]", "[yuwAlertDescription]", "*", "[yuwAlertAction]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwAlertComponent, "yuw-alert", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, ["descriptionSlot", "hasAction", "titleSlot"], ["[yuwAlertIcon]", "[yuwAlertTitle]", "[yuwAlertDescription]", "*", "[yuwAlertAction]"], true, never>;
 }
 declare const YuwAlertImports: readonly [typeof YuwAlertComponent, typeof YuwAlertActionDirective, typeof YuwAlertTitleDirective, typeof YuwAlertDescriptionDirective];