yukit-web 0.0.21 → 0.0.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yukit-web",
   "description": "Angular UI component library for Yurest web applications.",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "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

@@ -952,6 +952,7 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
  * ```
  */
 declare class YuwPasswordInputComponent extends YuwValueAccessorBase<string> implements YuwTextFieldContract {
+    private readonly _leftAddons;
     readonly autocomplete: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
@@ -969,6 +970,7 @@ declare class YuwPasswordInputComponent extends YuwValueAccessorBase<string> imp
     protected readonly _autoId: string;
     protected readonly _classes: _angular_core.Signal<string>;
     protected readonly _disabled: _angular_core.Signal<boolean>;
+    protected readonly _hasLeftAddon: _angular_core.Signal<boolean>;
     protected readonly _inputId: _angular_core.Signal<string>;
     protected readonly _reveal: _angular_core.Signal<yukit_web.YuwPasswordRevealStateDto>;
     protected _emptyValue(): string;
@@ -976,7 +978,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"; }, never, never, 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; }; "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>;
 }
 
 /**
@@ -1877,10 +1879,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
@@ -1930,6 +1939,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;
@@ -1967,8 +1977,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 {
@@ -2398,6 +2409,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.
@@ -2414,7 +2428,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>
@@ -2429,12 +2443,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];