valtech-components 2.0.1035 → 4.0.1

package/lib/components/atoms/box/box.component.d.ts

@@ -1,8 +1,7 @@
-import { EventEmitter, OnInit } from '@angular/core';
-import { IconService } from '../../../services/icons.service';
+import { EventEmitter } from '@angular/core';
 import { BoxMetadata } from './types';
 import * as i0 from "@angular/core";
-export declare class BoxComponent implements OnInit {
+export declare class BoxComponent {
     /**
      * Box configuration object.
      * @type {BoxMetadata}
@@ -18,8 +17,6 @@ export declare class BoxComponent implements OnInit {
      * Event emitted when the box or its icon is clicked.
      */
     onClick: EventEmitter<any>;
-    constructor(icon: IconService);
-    ngOnInit(): void;
     clickHandler(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BoxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BoxComponent, "val-box", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, ["[body]"], true, never>;

package/lib/components/atoms/button/factory.d.ts

@@ -1,71 +1,17 @@
 import { ButtonMetadata, IconMetada } from '../../types';
 export declare const Icon: (name: string, slot: 'start' | 'end') => IconMetada;
-export declare const BaseDefault: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const ClearDefault: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const ClearDefaultRound: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const SolidDefault: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const SolidDefaultRound: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const OutlineDefault: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const OutlineDefaultRound: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const ClearDefaultFull: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const ClearDefaultRoundFull: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const ClearDefaultBlock: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const ClearDefaultRoundBlock: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const SolidDefaultFull: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const SolidDefaultRoundFull: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const SolidDefaultBlock: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const SolidDefaultRoundBlock: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const OutlineDefaultFull: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const OutlineDefaultRoundFull: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const OutlineDefaultBlock: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const OutlineDefaultRoundBlock: (text: string, type: 'button' | 'submit' | 'reset') => ButtonMetadata;
-export declare const SolidDefaultButton: (text: string) => ButtonMetadata;
-export declare const SolidSmallButton: (text: string) => ButtonMetadata;
-export declare const SolidLargeButton: (text: string) => ButtonMetadata;
-export declare const SolidDefaultRoundButton: (text: string) => ButtonMetadata;
-export declare const SolidSmallRoundButton: (text: string) => ButtonMetadata;
-export declare const SolidLargeRoundButton: (text: string) => ButtonMetadata;
-export declare const SolidFullButton: (text: string) => ButtonMetadata;
-export declare const SolidBlockButton: (text: string) => ButtonMetadata;
-/** PRIMARY */
-export declare const PrimarySolidDefaultRoundButton: (text: string) => ButtonMetadata;
-export declare const PrimarySolidDefaultRoundIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
-export declare const PrimarySolidDefaultRoundHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const PrimarySolidDefaultRoundIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const PrimarySolidSmallRoundButton: (text: string) => ButtonMetadata;
-export declare const PrimarySolidSmallRoundIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
-export declare const PrimarySolidSmallRoundHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const PrimarySolidSmallRoundIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const PrimarySolidLargeRoundButton: (text: string) => ButtonMetadata;
-export declare const PrimarySolidLargeRoundIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
-export declare const PrimarySolidLargeRoundHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const PrimarySolidLargeRoundIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const PrimarySolidBlockButton: (text: string) => ButtonMetadata;
-export declare const PrimarySolidBlockIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
-export declare const PrimarySolidBlockHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const PrimarySolidBlockIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const PrimarySolidFullButton: (text: string) => ButtonMetadata;
-export declare const PrimarySolidFullIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
-export declare const PrimarySolidFullHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const PrimarySolidFullIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-/** SECONDARY */
-export declare const SecondarySolidDefaultRoundButton: (text: string) => ButtonMetadata;
-export declare const SecondarySolidDefaultRoundIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
-export declare const SecondarySolidDefaultRoundHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const SecondarySolidDefaultRoundIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const SecondarySolidSmallRoundButton: (text: string) => ButtonMetadata;
-export declare const SecondarySolidSmallRoundIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
-export declare const SecondarySolidSmallRoundHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const SecondarySolidSmallRoundIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const SecondarySolidLargeRoundButton: (text: string) => ButtonMetadata;
-export declare const SecondarySolidLargeRoundIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
-export declare const SecondarySolidLargeRoundHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const SecondarySolidLargeRoundIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const SecondarySolidFullButton: (text: string) => ButtonMetadata;
-export declare const SecondarySolidFullIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
-export declare const SecondarySolidFullHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const SecondarySolidFullIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const SecondarySolidBlockButton: (text: string) => ButtonMetadata;
-export declare const SecondarySolidBlockIconButton: (text: string, icon: IconMetada) => ButtonMetadata;
-export declare const SecondarySolidBlockHrefButton: (text: string, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
-export declare const SecondarySolidBlockIconHrefButton: (text: string, icon: IconMetada, href: string, target: '_blank' | '_self' | '_parent' | '_top') => ButtonMetadata;
+/**
+ * Single source of truth for building a `ButtonMetadata`.
+ *
+ * Applies the shared defaults (`primary` color, `ENABLED` state, `default`
+ * size, `button` type) and merges any overrides. This builder (and
+ * `iconButton`) is the canonical way to construct a button in code; for
+ * templates prefer a registered `<val-button preset="...">` (channel `button`
+ * of the PresetService).
+ *
+ * @example
+ * button({ text: 'Save', fill: 'solid', shape: 'round', expand: 'full' })
+ */
+export declare const button: (overrides?: Partial<ButtonMetadata>) => ButtonMetadata;
+/** Convenience builder for a button with a leading/trailing icon. */
+export declare const iconButton: (text: string, icon: IconMetada, overrides?: Partial<ButtonMetadata>) => ButtonMetadata;

package/lib/components/atoms/divider/divider.component.d.ts

@@ -1,4 +1,3 @@
-import { OnInit } from '@angular/core';
 import { DividerMetadata } from './types';
 import * as i0 from "@angular/core";
 /**
@@ -11,7 +10,7 @@ import * as i0 from "@angular/core";
  *
  * @input props: DividerMetadata - Configuration for the divider (size, color, fill)
  */
-export declare class DividerComponent implements OnInit {
+export declare class DividerComponent {
     /**
      * Divider configuration object.
      * @type {DividerMetadata}
@@ -20,8 +19,6 @@ export declare class DividerComponent implements OnInit {
      * @property fill - The divider fill style ('solid' | 'gradient').
      */
     props: DividerMetadata;
-    constructor();
-    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DividerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DividerComponent, "val-divider", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/components/atoms/href/href.component.d.ts

@@ -1,8 +1,8 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { EventEmitter } from '@angular/core';
 import { DownloadService } from '../../../services/download.service';
 import { HrefMetadata } from './types';
 import * as i0 from "@angular/core";
-export declare class HrefComponent implements OnInit {
+export declare class HrefComponent {
     private downloadService;
     /**
      * Link configuration object.
@@ -17,7 +17,6 @@ export declare class HrefComponent implements OnInit {
     props: HrefMetadata;
     onClick: EventEmitter<string>;
     constructor(downloadService: DownloadService);
-    ngOnInit(): void;
     getFileName(): string;
     onClickHandler(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HrefComponent, never>;

package/lib/components/atoms/image/image.component.d.ts

@@ -23,6 +23,11 @@ export declare class ImageComponent implements OnInit {
     ngOnInit(): void;
     changeToVisible(): void;
     openPreview(): void;
+    /**
+     * Keyboard activation of the preview trigger. Space must preventDefault to
+     * avoid scrolling the page when the focused image is activated.
+     */
+    onPreviewKeydown(event: Event): void;
     closePreview(): void;
     zoomIn(): void;
     zoomOut(): void;

package/lib/components/molecules/action-card/action-card.component.d.ts

@@ -75,7 +75,7 @@ export declare class ActionCardComponent {
     getTitle(): string;
     /** Get description with i18n support */
     getDescription(): string;
-    /** Resolve color to CSS value */
+    /** Resolve color to CSS value (named Ionic token → CSS var, else passthrough) */
     private resolveColor;
     getBackgroundColor(): string | null;
     getBorderColor(): string | null;

package/lib/components/molecules/card/card.component.d.ts

@@ -35,7 +35,6 @@ export declare class CardComponent implements OnInit, OnChanges {
     types: typeof CardType;
     actionTypes: typeof ToolbarActionType;
     sections: typeof CardSection;
-    constructor();
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -44,6 +43,8 @@ export declare class CardComponent implements OnInit, OnChanges {
      */
     private resolveProps;
     clickHandler(section: CardSection, token?: string): void;
+    /** Activación por teclado con Space — previene el scroll de la página. */
+    onKeyActivate(event: Event, section: CardSection, token?: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "val-card", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
 }

package/lib/components/molecules/checkbox-radio-input/checkbox-radio-input.component.d.ts

@@ -1,5 +1,5 @@
 import { OnInit } from '@angular/core';
-import { InputMetadata, InputOption } from '../../types';
+import { InputMetadata } from '../../types';
 import * as i0 from "@angular/core";
 export declare class CheckboxRadioInputComponent implements OnInit {
     props: InputMetadata;
@@ -10,8 +10,7 @@ export declare class CheckboxRadioInputComponent implements OnInit {
         ERROR: "ERROR";
     };
     ngOnInit(): void;
-    isSelected(option: InputOption): boolean;
-    onOptionSelect(option: InputOption, event: any): void;
+    onSelectionChange(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxRadioInputComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxRadioInputComponent, "val-checkbox-radio-input", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/components/molecules/chip-group/chip-group.component.d.ts

@@ -3,13 +3,18 @@ import { ChipGroupMetadata, ChipMetadata, ChipSelectionEvent, ChipRemoveEvent }
 import * as i0 from "@angular/core";
 export declare class ChipGroupComponent implements OnInit, OnChanges {
     private presets;
+    private i18n;
     preset?: string;
     props: Partial<ChipGroupMetadata>;
     resolvedProps: ChipGroupMetadata;
     selectionChange: EventEmitter<ChipSelectionEvent>;
     chipRemove: EventEmitter<ChipRemoveEvent>;
     chipClick: EventEmitter<ChipMetadata>;
+    constructor();
     ngOnInit(): void;
+    removeLabel(chip: ChipMetadata): string;
+    /** Activación de chip selectable por teclado (Enter/Space). */
+    onChipKey(event: Event, chip: ChipMetadata): void;
     ngOnChanges(changes: SimpleChanges): void;
     private resolveProps;
     getChipColor(chip: ChipMetadata): string;

package/lib/components/molecules/command-display/command-display.component.d.ts

@@ -4,6 +4,10 @@ export declare class CommandDisplayComponent {
     private toast;
     private i18n;
     props: CommandDisplayMetadata;
+    /** Mensaje anunciado por el lector de pantalla al copiar. */
+    copiedMessage: string;
+    constructor();
+    copyLabel(): string;
     copyCommand(): Promise<void>;
     presentToast(message: string): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<CommandDisplayComponent, never>;

package/lib/components/molecules/comment/comment.component.d.ts

@@ -15,7 +15,10 @@ export declare class CommentComponent implements OnInit {
         collapsed: boolean;
     }>;
     displayContent: string;
+    constructor();
     ngOnInit(): void;
+    /** Aria-label accesible del autor (avatar + nombre clicables). */
+    authorLabel(): string;
     getInitials(name: string): string;
     formatTimestamp(timestamp: string | Date): string;
     getLoadMoreRepliesText(): string;

package/lib/components/molecules/cta-card/cta-card.component.d.ts

@@ -36,7 +36,6 @@ export declare class CtaCardComponent {
     onAction: EventEmitter<string>;
     /** Merged configuration with defaults */
     config: import("@angular/core").Signal<CtaCardMetadata & Required<Pick<CtaCardMetadata, "borderRadius" | "bordered" | "shadowed" | "align" | "padding">>>;
-    private resolveColor;
     getBackground(): string;
     getColor(): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<CtaCardComponent, never>;

package/lib/components/molecules/hint/hint.component.d.ts

@@ -9,11 +9,21 @@ export declare class HintComponent implements OnInit {
      * @property errors - The error messages mapping.
      */
     props: InputMetadata;
+    /**
+     * Id del contenedor del hint. Lo pasa `val-form` para enlazar el input con el
+     * mensaje de error vía `aria-describedby`.
+     */
+    id?: string;
+    /**
+     * Si el hint representa un error (vs un hint informativo). Hoy `val-hint`
+     * siempre muestra errores de validación, así que por defecto es `true`.
+     */
+    isError: boolean;
     private i18n;
     constructor();
     ngOnInit(): void;
     get shouldShowErrors(): boolean;
     get Errors(): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<HintComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HintComponent, "val-hint", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HintComponent, "val-hint", never, { "props": { "alias": "props"; "required": false; }; "id": { "alias": "id"; "required": false; }; "isError": { "alias": "isError"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/components/molecules/pagination/pagination.component.d.ts

@@ -2,10 +2,15 @@ import { OnChanges, EventEmitter, SimpleChanges } from '@angular/core';
 import { PaginationMetadata, PageChangeEvent } from './types';
 import * as i0 from "@angular/core";
 export declare class PaginationComponent implements OnChanges {
+    private i18n;
     props: PaginationMetadata;
     pageChange: EventEmitter<PageChangeEvent>;
     visiblePages: number[];
     totalPages: number;
+    constructor();
+    t(key: string): string;
+    pageLabel(page: number): string;
+    pageInfo(): string;
     ngOnChanges(changes: SimpleChanges): void;
     goToPage(page: number): void;
     private calculateTotalPages;

package/lib/components/molecules/password-input/password-input.component.d.ts

@@ -1,9 +1,10 @@
 import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { IconService } from '../../../services/icons.service';
 import { InputMetadata } from '../../types';
 import * as i0 from "@angular/core";
 export declare class PasswordInputComponent implements OnInit, OnChanges {
     private presets;
+    private i18n;
+    constructor();
     /**
      * Preset name to apply. Presets define reusable input configurations
      * that can be registered at app level via provideValtechPresets().
@@ -24,7 +25,8 @@ export declare class PasswordInputComponent implements OnInit, OnChanges {
      */
     resolvedProps: InputMetadata;
     hidePassword: boolean;
-    constructor(icon: IconService);
+    /** Aria-label del botón mostrar/ocultar según el estado de visibilidad. */
+    toggleLabel(): string;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     /**

package/lib/components/molecules/permission-selector/types.d.ts

@@ -1,4 +1,5 @@
 import { LocalizedLabel } from '../../../services/org/permission-catalog.service';
+export type { LocalizedLabel };
 /**
  * Un recurso del catálogo de permisos tal como lo consume `val-permission-selector`.
  * Mismo shape que `PermissionResource` del catálogo del backend (resource + actions

package/lib/components/molecules/rating/rating.component.d.ts

@@ -3,16 +3,27 @@ import { RatingMetadata, RatingChangeEvent } from './types';
 import * as i0 from "@angular/core";
 export declare class RatingComponent implements OnInit, OnChanges {
     private presets;
+    private i18n;
     preset?: string;
     props: Partial<RatingMetadata>;
     resolvedProps: RatingMetadata;
     ratingChange: EventEmitter<RatingChangeEvent>;
     hoverValue: number | null;
+    constructor();
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     private resolveProps;
     get displayValue(): number;
     getStars(): number[];
+    groupLabel(): string;
+    starLabel(position: number): string;
+    /**
+     * Roving tabindex: solo una estrella es tabbable. La estrella del valor
+     * actual (o la primera si no hay valor) recibe `0`, el resto `-1`.
+     */
+    getStarTabindex(position: number): number;
+    /** Navegación con flechas: mueve el foco y selecciona la estrella vecina. */
+    onArrow(event: Event, delta: number): void;
     getStarIcon(position: number): string;
     getStarColor(position: number): string;
     onStarClick(position: number): void;

package/lib/components/molecules/text-input/text-input.component.d.ts

@@ -16,6 +16,7 @@ export declare class TextInputComponent implements OnInit, OnChanges {
      * @type {InputMetadata}
      * @property control - The Angular FormControl for the input.
      * @property placeholder - The placeholder text.
+     * @property inputType - Native HTML input type ('text' | 'email' | 'number' | 'tel' | 'password' | 'time' | ...).
      * @property label, name, hint, type, validators, etc. - See InputMetadata for all options.
      */
     props: Partial<InputMetadata>;
@@ -30,8 +31,28 @@ export declare class TextInputComponent implements OnInit, OnChanges {
         WORKING: "WORKING";
         ERROR: "ERROR";
     };
+    /** Ids únicos por instancia para el wiring de accesibilidad label↔input↔error. */
+    private readonly uid;
+    readonly inputId: string;
+    /**
+     * Id del label visible. Si `val-form` orquesta el campo, pasa el id del
+     * `<val-title>` externo vía `props.labelId`; si no, se usa el id interno.
+     */
+    get labelId(): string;
+    /**
+     * Id del contenedor de error. Si `val-form` orquesta el campo, pasa el id del
+     * `<val-hint>` externo vía `props.errorId`; si no, se usa el id interno.
+     */
+    get errorId(): string;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Native HTML input type, defaulting to 'text'. Drives both the `[type]` of the
+     * `<ion-input>` and the branch between `<ion-input>` and `<ion-datetime>`.
+     */
+    get resolvedType(): NonNullable<InputMetadata['inputType']>;
+    /** Para `aria-invalid` / `aria-describedby`: error visible solo si tocado. */
+    get isInvalid(): boolean;
     /**
      * Merge preset configuration with explicit props.
      * Explicit props take precedence over preset values.

package/lib/components/organisms/form/form.component.d.ts

@@ -41,6 +41,9 @@ export declare class FormComponent implements OnInit, OnChanges, DoCheck {
     private usernamePropMemo;
     private textareaPropMemo;
     private selectPropMemo;
+    private textInputPropMemo;
+    private fieldIdMemo;
+    private fieldUid;
     private previousState;
     private previousUploadingCount;
     private uploadingFields;
@@ -61,7 +64,23 @@ export declare class FormComponent implements OnInit, OnChanges, DoCheck {
     submitHandler(token?: string): Promise<void>;
     onAttachmentChange(fieldName: string, items: AttachmentItem[]): void;
     getControl(field: string): FormControl;
+    /**
+     * Ids estables (label + error) para un field. Memoizados por referencia para
+     * que el wiring `aria-labelledby` / `aria-describedby` no cambie entre ciclos
+     * de change detection.
+     */
+    private fieldIds;
+    /** Id del label visible del campo (consumido por el template + el input). */
+    labelId(field: InputMetadata): string;
+    /** Id del contenedor de error (`val-hint`) del campo. */
+    errorId(field: InputMetadata): string;
     getFieldProp(field: InputMetadata): InputMetadata;
+    /**
+     * Adapter para los tipos colapsados en `val-text-input` (EMAIL/NUMBER/HOUR).
+     * Reusa `getFieldProp` (con su control + wiring de ids) e inyecta el `inputType`
+     * HTML nativo. Memoizado por referencia de field para no romper la identidad.
+     */
+    getTextInputProp(field: InputMetadata, inputType: NonNullable<InputMetadata['inputType']>): InputMetadata;
     /**
      * Adapter para SELECT — igual que `getFieldProp` pero limpia `label`.
      * val-form ya renderiza el título del campo con `<val-title>` arriba del input;

package/lib/components/types.d.ts

@@ -100,8 +100,17 @@ export type InputMetadata = {
     description?: string;
     /** Input placeholder */
     placeholder: string;
-    /** Input type */
+    /** Input type (drives val-form routing — which input component renders) */
     type: InputType;
+    /**
+     * Native HTML input type for `val-text-input` (the `[type]` attribute of the
+     * underlying `<ion-input>` / control). Decoupled from `InputType` (which is the
+     * form-routing enum). When `type === InputType.TEXT`, `val-form` forwards a
+     * sensible `inputType` ('text' by default, 'email'/'number'/'time'/... for the
+     * collapsed email/number/hour cases). `'time'` makes `val-text-input` render an
+     * `<ion-datetime presentation="time">` instead of an `<ion-input>`.
+     */
+    inputType?: 'text' | 'email' | 'number' | 'tel' | 'password' | 'time' | 'url' | 'search' | 'date';
     /** Display order */
     order: number;
     /** Associated validators */
@@ -161,6 +170,17 @@ export type InputMetadata = {
     inputStyles?: Record<string, string>;
     /** Upload function (only for ATTACHMENT type). Receives a File, must resolve to the uploaded URL. */
     uploadFn?: (file: File) => Promise<string>;
+    /**
+     * Id del elemento que actúa como label visible del campo. `val-form` lo asigna
+     * al `<val-title>` que renderiza sobre el input y lo pasa al input para enlazar
+     * vía `aria-labelledby`. Si se omite, el input genera su propio id interno.
+     */
+    labelId?: string;
+    /**
+     * Id del contenedor de error (`val-hint`). `val-form` lo asigna al `<val-hint>`
+     * y lo pasa al input para enlazar vía `aria-describedby` cuando hay error.
+     */
+    errorId?: string;
 };
 /**
  * A section in a form, grouping multiple fields.

package/lib/services/presets/default-presets.d.ts

@@ -0,0 +1,22 @@
+import { PresetConfig, ComponentPresets } from './types';
+/**
+ * Presets de botón por defecto provistos por la librería.
+ *
+ * Son el reemplazo recomendado de las factories deprecadas de
+ * `atoms/button/factory.ts`: en vez de construir el `ButtonMetadata` a mano,
+ * el consumer usa `<val-button preset="primary-round" [props]="{ text }">`.
+ *
+ * Cada preset define solo el ESTILO reutilizable (color/fill/shape/expand/size).
+ * El `text`, `type`, `state`, `icon` y `href` se pasan por `[props]` en cada uso.
+ *
+ * Disponibles sin configuración: `PresetService` los siembra de fábrica y
+ * `provideValtechPresets` los preserva (las apps EXTIENDEN estos defaults en
+ * vez de pisarlos). Una app puede sobrescribir un preset declarando la misma
+ * clave bajo `button` en su `APP_PRESETS`.
+ */
+export declare const DEFAULT_BUTTON_PRESETS: ComponentPresets;
+/**
+ * Presets que la librería siembra de fábrica en `PresetService`.
+ * Hoy solo botón; agregar otros componentes acá a medida que se definan.
+ */
+export declare const DEFAULT_PRESETS: PresetConfig;

package/lib/services/presets/index.d.ts

@@ -1,3 +1,4 @@
 export { PresetConfig, ComponentPresets, PresetsOptions } from './types';
 export { PresetService } from './preset.service';
 export { provideValtechPresets } from './config';
+export { DEFAULT_BUTTON_PRESETS, DEFAULT_PRESETS } from './default-presets';

package/lib/services/presets/preset.service.d.ts

@@ -41,6 +41,10 @@ export declare class PresetService {
      *
      * @param presets Configuración de presets
      *
+     * Hace MERGE por componente sobre lo ya registrado (incluidos los defaults
+     * de la librería), así que las apps EXTIENDEN los presets existentes en vez
+     * de reemplazarlos. Para sobrescribir un preset, declarar la misma clave.
+     *
      * @example
      * presets.registerPresets({
      *   button: {

package/lib/shared/utils/ionic-color.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Ionic color helpers — single source of truth.
+ *
+ * Several presentational cards used to inline a literal `IONIC_COLORS` array
+ * plus a `resolveColor()` copy. This util consolidates that logic so the named
+ * Ionic palette and the CSS-var resolution live in one place.
+ */
+/** The named Ionic color palette tokens. */
+export declare const IONIC_COLORS: readonly ["primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", "dark"];
+export type IonicColor = (typeof IONIC_COLORS)[number];
+/** True when `value` is one of the named Ionic palette tokens. */
+export declare function isIonicColor(value: string | undefined): value is IonicColor;
+/**
+ * Resolve a color value to a usable CSS color.
+ *
+ * - A named Ionic token (e.g. `primary`) becomes `var(--ion-color-primary)`.
+ * - Any other value (hex, rgb, CSS var, etc.) is returned unchanged.
+ * - `undefined`/empty returns `undefined`.
+ */
+export declare function resolveIonicColor(value: string | undefined): string | undefined;

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "2.0.1035";
+export declare const VERSION = "4.0.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.1035",
+  "version": "4.0.1",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/public-api.d.ts

@@ -65,13 +65,11 @@ export * from './lib/components/molecules/content-loader/content-loader.componen
 export * from './lib/components/molecules/content-loader/types';
 export * from './lib/components/molecules/date-input/date-input.component';
 export * from './lib/components/molecules/date-input/types';
-export * from './lib/components/molecules/email-input/email-input.component';
 export * from './lib/components/molecules/expandable-text/expandable-text.component';
 export * from './lib/components/molecules/expandable-text/types';
 export * from './lib/components/molecules/file-input/file-input.component';
 export * from './lib/components/molecules/file-input/types';
 export * from './lib/components/molecules/hint/hint.component';
-export * from './lib/components/molecules/hour-input/hour-input.component';
 export * from './lib/components/molecules/language-selector/language-selector.component';
 export * from './lib/components/molecules/language-selector/types';
 export * from './lib/components/molecules/layered-card/layered-card.component';
@@ -84,7 +82,6 @@ export * from './lib/components/molecules/notes-box/notes-box.component';
 export * from './lib/components/molecules/notes-box/types';
 export * from './lib/components/molecules/page-links/page-links.component';
 export * from './lib/components/molecules/page-links/types';
-export * from './lib/components/molecules/number-input/number-input.component';
 export * from './lib/components/molecules/number-from-to/number-from-to.component';
 export * from './lib/components/molecules/number-from-to/types';
 export * from './lib/components/molecules/password-input/password-input.component';
@@ -418,6 +415,7 @@ export * from './lib/shared/pipes/process-links.pipe';
 export * from './lib/shared/utils/datetime';
 export * from './lib/shared/utils/dom';
 export * from './lib/shared/utils/form-defaults';
+export * from './lib/shared/utils/ionic-color';
 export * from './lib/shared/utils/validators';
 export * from './lib/shared/utils/styles';
 export * from './lib/shared/utils/text';
@@ -429,12 +427,8 @@ export * from './lib/services/requests/request-form-builder.service';
 export * from './lib/services/requests/request-firestore.service';
 export * from './lib/components/organisms/article-strip/article-strip.component';
 export * from './lib/components/organisms/article-strip/types';
-export * from './lib/components/molecules/info-card/info-card.component';
-export * from './lib/components/molecules/info-card/types';
 export * from './lib/components/molecules/metric-card/metric-card.component';
 export * from './lib/components/molecules/metric-card/types';
-export * from './lib/components/molecules/content-card/content-card.component';
-export * from './lib/components/molecules/content-card/types';
 export * from './lib/components/organisms/auth-cta/auth-cta.component';
 export * from './lib/components/organisms/auth-cta/types';
 export * from './lib/components/molecules/ticket-card/ticket-card.component';

package/src/lib/components/styles/mixins.scss

@@ -27,6 +27,22 @@
   box-shadow: 0 pxToRem(-10) pxToRem(16) addColorOpacity($color-default-shadow, 0.07);
 }
 
+// Accessible focus indicator. Use on any custom-built interactive element
+// (elements with role="button"/tabindex, native button/a that need a consistent
+// ring) so keyboard users get a visible focus state. Only shows for keyboard
+// focus (:focus-visible), never on mouse/touch.
+@mixin focus-ring($offset: 2px, $color: var(--ion-color-primary, #7026df)) {
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: pxToRem(2) solid $color;
+    outline-offset: $offset;
+    border-radius: inherit;
+  }
+}
+
 @mixin transform-translateY($value) {
   transform: translateY($value);
   -webkit-transform: translateY($value);