@keepui/ui 0.3.0 → 0.5.0

package/fesm2022/keepui-ui.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, input, output, computed, ChangeDetectionStrategy, Component, inject, signal, makeEnvironmentProviders } from '@angular/core';
+import { InjectionToken, Injectable, input, output, computed, ChangeDetectionStrategy, Component, inject, signal, DestroyRef, viewChild, model, effect, viewChildren, makeEnvironmentProviders } from '@angular/core';
 import { TranslocoPipe, TRANSLOCO_SCOPE, TranslocoService, provideTransloco } from '@jsverse/transloco';
+import { NgTemplateOutlet } from '@angular/common';
 import { of } from 'rxjs';
 
 /**
@@ -551,6 +552,10 @@ const KEEPUI_TRANSLATION_KEYS = {
         PREVIEW_ALT: 'imagePreview.previewAlt',
         ERROR_UNEXPECTED: 'imagePreview.errorUnexpected',
     },
+    SIGNAL_TEXT_INPUT: {
+        SHOW_PASSWORD: 'signalTextInput.showPassword',
+        HIDE_PASSWORD: 'signalTextInput.hidePassword',
+    },
 };
 /** Ordered list of languages available in KeepUI. */
 const KEEPUI_AVAILABLE_LANGUAGES = [
@@ -690,6 +695,1496 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }] });
 
+const DROPDOWN_ITEM_HEIGHT = 40;
+const DROPDOWN_PADDING = 8;
+const DROPDOWN_GAP = 8;
+/**
+ * Signal-based accessible dropdown / select component.
+ *
+ * Fully platform-agnostic — no native API usage. The panel opens in `fixed`
+ * position so it is never clipped by overflow-hidden ancestors. It repositions
+ * itself automatically on scroll and resize.
+ *
+ * The `value` and `touched` properties are `model()` signals so the component
+ * integrates seamlessly with Angular signal-based forms.
+ *
+ * ```html
+ * <keepui-signal-dropdown
+ *   label="País"
+ *   placeholder="Selecciona un país"
+ *   [options]="countries"
+ *   [(value)]="selectedCountry"
+ * />
+ * ```
+ *
+ * @typeParam T – type of each option's `value` property. Defaults to `string`.
+ */
+class SignalDropdownComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.isOpen = signal(false);
+        this.openUpwards = signal(false);
+        this.panelTopPx = signal(0);
+        this.panelLeftPx = signal(0);
+        this.panelWidthPx = signal(0);
+        this.dropdownButton = viewChild('dropdownButton');
+        this.dropdownContainer = viewChild('dropdownContainer');
+        /** Optional label text rendered above the dropdown. */
+        this.label = input('');
+        /** Placeholder shown when no value is selected. */
+        this.placeholder = input('');
+        /** Array of options to display in the panel. */
+        this.options = input.required();
+        /** Layout width of the wrapper. @default 'full' */
+        this.width = input('full');
+        /** Marks the field as required. Adds `aria-required` and a visual asterisk. @default false */
+        this.required = input(false);
+        /** Human-readable error message shown below the dropdown. Takes precedence over `errors[0]`. */
+        this.errorMessage = input('');
+        /**
+         * Array of error strings. The first item is displayed when `errorMessage` is empty.
+         * Set together with `invalid=true` to trigger the error state.
+         */
+        this.errors = input([]);
+        /**
+         * Stable `id` used to link the `<label>` with the trigger `<button>`.
+         * A random suffix is generated by default.
+         */
+        this.selectId = input(`ku-dropdown-${Math.random().toString(36).slice(2, 8)}`);
+        /** Disables the dropdown. @default false */
+        this.disabled = input(false);
+        /**
+         * Forces the error visual state regardless of the `touched` model.
+         * Useful for external form validation. @default false
+         */
+        this.invalid = input(false);
+        /** Currently selected value. Use `[(value)]` for two-way binding. */
+        this.value = model(null);
+        /** Whether the control has been interacted with. Use `[(touched)]` for two-way binding. */
+        this.touched = model(false);
+        /** Emitted when the selected value changes. */
+        this.valueChange = output();
+        this.errorId = computed(() => `${this.selectId()}-error`);
+        this.panelStyle = computed(() => `top:${this.panelTopPx()}px;left:${this.panelLeftPx()}px;width:${this.panelWidthPx()}px`);
+        this.widthClass = computed(() => {
+            const map = {
+                full: 'w-full',
+                half: 'w-1/2',
+                auto: 'w-auto',
+            };
+            return map[this.width()];
+        });
+        this.selectedLabel = computed(() => {
+            const current = this.value();
+            if (current === null)
+                return this.placeholder();
+            return this.options().find(o => o.value === current)?.label ?? this.placeholder();
+        });
+        this.selectedBadges = computed(() => {
+            const current = this.value();
+            if (current === null)
+                return [];
+            return this.options().find(o => o.value === current)?.badges ?? [];
+        });
+        this.showError = computed(() => this.touched() && (this.invalid() || this.errorMessage().length > 0 || this.errors().length > 0));
+        this.recalculatePosition = () => {
+            if (this.isOpen())
+                this.calculateDropdownPosition();
+        };
+        effect(() => {
+            if (this.isOpen()) {
+                this.calculateDropdownPosition();
+                this.addViewportListeners();
+            }
+            else {
+                this.removeViewportListeners();
+            }
+        });
+        this.destroyRef.onDestroy(() => this.removeViewportListeners());
+    }
+    onDocumentClick(event) {
+        const container = this.dropdownContainer()?.nativeElement;
+        if (container && !container.contains(event.target)) {
+            this.isOpen.set(false);
+        }
+    }
+    toggleDropdown() {
+        if (this.disabled())
+            return;
+        this.isOpen.update(open => !open);
+    }
+    close() {
+        if (this.isOpen()) {
+            this.isOpen.set(false);
+            this.dropdownButton()?.nativeElement.focus();
+        }
+    }
+    selectOption(option) {
+        this.value.set(option.value);
+        this.isOpen.set(false);
+        this.dropdownButton()?.nativeElement.focus();
+        this.valueChange.emit(option.value);
+    }
+    onBlur() {
+        this.touched.set(true);
+    }
+    isSelected(optionValue) {
+        return this.value() === optionValue;
+    }
+    onButtonKeydown(event) {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (!this.isOpen()) {
+                this.isOpen.set(true);
+            }
+        }
+    }
+    onOptionKeydown(event, option, index) {
+        const panel = this.dropdownContainer()?.nativeElement;
+        const optionButtons = panel?.querySelectorAll('[role="option"]');
+        if (!optionButtons)
+            return;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            optionButtons[Math.min(index + 1, optionButtons.length - 1)]?.focus();
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (index === 0) {
+                this.dropdownButton()?.nativeElement.focus();
+            }
+            else {
+                optionButtons[index - 1]?.focus();
+            }
+        }
+        else if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.selectOption(option);
+        }
+    }
+    calculateDropdownPosition() {
+        const button = this.dropdownButton()?.nativeElement;
+        if (!button)
+            return;
+        const rect = button.getBoundingClientRect();
+        const estimatedHeight = Math.min(this.options().length * DROPDOWN_ITEM_HEIGHT + DROPDOWN_PADDING, 256);
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const shouldOpenUpwards = spaceBelow < estimatedHeight + DROPDOWN_GAP &&
+            spaceAbove > estimatedHeight + DROPDOWN_GAP;
+        this.openUpwards.set(shouldOpenUpwards);
+        this.panelWidthPx.set(rect.width);
+        this.panelLeftPx.set(rect.left);
+        this.panelTopPx.set(shouldOpenUpwards
+            ? rect.top - estimatedHeight - DROPDOWN_GAP
+            : rect.bottom + DROPDOWN_GAP);
+    }
+    addViewportListeners() {
+        this.removeViewportListeners();
+        window.addEventListener('scroll', this.recalculatePosition, true);
+        window.addEventListener('resize', this.recalculatePosition);
+    }
+    removeViewportListeners() {
+        window.removeEventListener('scroll', this.recalculatePosition, true);
+        window.removeEventListener('resize', this.recalculatePosition);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SignalDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SignalDropdownComponent, isStandalone: true, selector: "keepui-signal-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, selectId: { classPropertyName: "selectId", publicName: "selectId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "close()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="flex flex-col gap-1" [class]="widthClass()">
+
+      @if (label()) {
+        <label [for]="selectId()" class="text-sm text-ku-gray-text">
+          {{ label() }}
+          @if (required()) {
+            <span class="text-ku-error-primary" aria-hidden="true"> *</span>
+          }
+        </label>
+      }
+
+      <div class="relative" #dropdownContainer>
+
+        <button
+          #dropdownButton
+          [id]="selectId()"
+          type="button"
+          [disabled]="disabled()"
+          [attr.aria-disabled]="disabled() ? true : null"
+          [attr.aria-expanded]="isOpen()"
+          [attr.aria-haspopup]="'listbox'"
+          [attr.aria-required]="required() ? true : null"
+          [attr.aria-invalid]="showError() ? true : null"
+          [attr.aria-describedby]="showError() ? errorId() : null"
+          (click)="toggleDropdown()"
+          (blur)="onBlur()"
+          (keydown)="onButtonKeydown($event)"
+          class="w-full inline-flex items-center gap-2 bg-ku-primary border rounded-xl
+                 px-4 py-2.5 text-sm transition-all cursor-pointer min-h-[2.75rem]
+                 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ku-action-primary
+                 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          [class]="showError() ? 'border-ku-error-primary' : 'border-ku-secondary-border'"
+        >
+          <span
+            class="flex-1 text-left flex items-center justify-between gap-2 min-w-0"
+            [class]="value() === null ? 'text-ku-gray-text opacity-70' : 'text-ku-primary-text'"
+          >
+            <span class="truncate">{{ selectedLabel() }}</span>
+
+            @if (selectedBadges().length) {
+              <span class="flex flex-wrap items-center gap-1.5 shrink-0">
+                @for (badge of selectedBadges(); track badge) {
+                  <span class="inline-flex items-center rounded-full bg-ku-action-background
+                               px-2 py-0.5 text-[11px] font-medium text-ku-action-primary">
+                    {{ badge }}
+                  </span>
+                }
+              </span>
+            }
+          </span>
+
+          <keepui-icon
+            name="chevron-down-icon"
+            [size]="18"
+            aria-hidden="true"
+            class="text-ku-gray-text transition-transform duration-200 shrink-0"
+            [class.rotate-180]="isOpen()"
+          />
+        </button>
+
+        @if (isOpen()) {
+          <div
+            role="listbox"
+            [attr.aria-label]="label() || null"
+            class="fixed rounded-xl shadow-lg bg-ku-primary border border-ku-secondary-border
+                   z-[1000] overflow-y-auto max-h-64"
+            [style]="panelStyle()"
+          >
+            @for (option of options(); track option.value; let i = $index) {
+              <button
+                type="button"
+                role="option"
+                [attr.aria-selected]="isSelected(option.value)"
+                (click)="selectOption(option)"
+                (keydown)="onOptionKeydown($event, option, i)"
+                class="w-full text-left cursor-pointer px-4 py-2 text-sm text-ku-primary-text
+                       flex items-center gap-3 transition-colors min-h-[2.75rem]
+                       hover:bg-ku-primary-hover focus-visible:outline-none
+                       focus-visible:bg-ku-primary-hover"
+                [class]="isSelected(option.value) ? 'bg-ku-primary-hover' : ''"
+              >
+                <span class="flex-1 flex items-center justify-between gap-2 min-w-0">
+                  <span class="truncate">{{ option.label }}</span>
+
+                  @if (option.badges?.length) {
+                    <span class="flex flex-wrap items-center gap-1.5 shrink-0">
+                      @for (badge of option.badges ?? []; track badge) {
+                        <span class="inline-flex items-center rounded-full bg-ku-action-background
+                                     px-2 py-0.5 text-[11px] font-medium text-ku-action-primary">
+                          {{ badge }}
+                        </span>
+                      }
+                    </span>
+                  }
+                </span>
+
+                @if (isSelected(option.value)) {
+                  <keepui-icon
+                    name="check-icon"
+                    [size]="16"
+                    aria-hidden="true"
+                    class="text-ku-action-primary shrink-0"
+                  />
+                }
+              </button>
+            }
+          </div>
+        }
+
+      </div>
+
+      @if (showError()) {
+        <span
+          [id]="errorId()"
+          class="text-sm text-ku-error-primary"
+          role="alert"
+        >
+          @if (errorMessage()) {
+            {{ errorMessage() }}
+          } @else if (errors().length > 0) {
+            {{ errors()[0] }}
+          }
+        </span>
+      }
+
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "keepui-icon", inputs: ["name", "size", "viewBox", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SignalDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keepui-signal-dropdown',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconComponent],
+                    host: {
+                        class: 'block',
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(document:keydown.escape)': 'close()',
+                    },
+                    template: `
+    <div class="flex flex-col gap-1" [class]="widthClass()">
+
+      @if (label()) {
+        <label [for]="selectId()" class="text-sm text-ku-gray-text">
+          {{ label() }}
+          @if (required()) {
+            <span class="text-ku-error-primary" aria-hidden="true"> *</span>
+          }
+        </label>
+      }
+
+      <div class="relative" #dropdownContainer>
+
+        <button
+          #dropdownButton
+          [id]="selectId()"
+          type="button"
+          [disabled]="disabled()"
+          [attr.aria-disabled]="disabled() ? true : null"
+          [attr.aria-expanded]="isOpen()"
+          [attr.aria-haspopup]="'listbox'"
+          [attr.aria-required]="required() ? true : null"
+          [attr.aria-invalid]="showError() ? true : null"
+          [attr.aria-describedby]="showError() ? errorId() : null"
+          (click)="toggleDropdown()"
+          (blur)="onBlur()"
+          (keydown)="onButtonKeydown($event)"
+          class="w-full inline-flex items-center gap-2 bg-ku-primary border rounded-xl
+                 px-4 py-2.5 text-sm transition-all cursor-pointer min-h-[2.75rem]
+                 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ku-action-primary
+                 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          [class]="showError() ? 'border-ku-error-primary' : 'border-ku-secondary-border'"
+        >
+          <span
+            class="flex-1 text-left flex items-center justify-between gap-2 min-w-0"
+            [class]="value() === null ? 'text-ku-gray-text opacity-70' : 'text-ku-primary-text'"
+          >
+            <span class="truncate">{{ selectedLabel() }}</span>
+
+            @if (selectedBadges().length) {
+              <span class="flex flex-wrap items-center gap-1.5 shrink-0">
+                @for (badge of selectedBadges(); track badge) {
+                  <span class="inline-flex items-center rounded-full bg-ku-action-background
+                               px-2 py-0.5 text-[11px] font-medium text-ku-action-primary">
+                    {{ badge }}
+                  </span>
+                }
+              </span>
+            }
+          </span>
+
+          <keepui-icon
+            name="chevron-down-icon"
+            [size]="18"
+            aria-hidden="true"
+            class="text-ku-gray-text transition-transform duration-200 shrink-0"
+            [class.rotate-180]="isOpen()"
+          />
+        </button>
+
+        @if (isOpen()) {
+          <div
+            role="listbox"
+            [attr.aria-label]="label() || null"
+            class="fixed rounded-xl shadow-lg bg-ku-primary border border-ku-secondary-border
+                   z-[1000] overflow-y-auto max-h-64"
+            [style]="panelStyle()"
+          >
+            @for (option of options(); track option.value; let i = $index) {
+              <button
+                type="button"
+                role="option"
+                [attr.aria-selected]="isSelected(option.value)"
+                (click)="selectOption(option)"
+                (keydown)="onOptionKeydown($event, option, i)"
+                class="w-full text-left cursor-pointer px-4 py-2 text-sm text-ku-primary-text
+                       flex items-center gap-3 transition-colors min-h-[2.75rem]
+                       hover:bg-ku-primary-hover focus-visible:outline-none
+                       focus-visible:bg-ku-primary-hover"
+                [class]="isSelected(option.value) ? 'bg-ku-primary-hover' : ''"
+              >
+                <span class="flex-1 flex items-center justify-between gap-2 min-w-0">
+                  <span class="truncate">{{ option.label }}</span>
+
+                  @if (option.badges?.length) {
+                    <span class="flex flex-wrap items-center gap-1.5 shrink-0">
+                      @for (badge of option.badges ?? []; track badge) {
+                        <span class="inline-flex items-center rounded-full bg-ku-action-background
+                                     px-2 py-0.5 text-[11px] font-medium text-ku-action-primary">
+                          {{ badge }}
+                        </span>
+                      }
+                    </span>
+                  }
+                </span>
+
+                @if (isSelected(option.value)) {
+                  <keepui-icon
+                    name="check-icon"
+                    [size]="16"
+                    aria-hidden="true"
+                    class="text-ku-action-primary shrink-0"
+                  />
+                }
+              </button>
+            }
+          </div>
+        }
+
+      </div>
+
+      @if (showError()) {
+        <span
+          [id]="errorId()"
+          class="text-sm text-ku-error-primary"
+          role="alert"
+        >
+          @if (errorMessage()) {
+            {{ errorMessage() }}
+          } @else if (errors().length > 0) {
+            {{ errors()[0] }}
+          }
+        </span>
+      }
+
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Signal-based accessible text input supporting all common HTML input types,
+ * leading/trailing icons, a trailing content slot, and a built-in
+ * password-visibility toggle (when `type="password"`).
+ *
+ * The `value` and `touched` properties are `model()` signals so the component
+ * integrates seamlessly with Angular signal-based forms.
+ *
+ * Password toggle labels are translated via Transloco (scope `'keepui'`).
+ * Call `provideKeepUiI18n()` in your `app.config.ts` to activate i18n.
+ *
+ * ```html
+ * <keepui-signal-text-input
+ *   label="Email"
+ *   type="email"
+ *   placeholder="usuario@ejemplo.com"
+ *   leadingIcon="mail-icon"
+ *   [(value)]="email"
+ * />
+ *
+ * <!-- Password with toggle -->
+ * <keepui-signal-text-input
+ *   label="Contraseña"
+ *   type="password"
+ *   [(value)]="password"
+ * />
+ * ```
+ */
+class SignalTextInputComponent {
+    constructor() {
+        this.isPasswordVisible = signal(false);
+        this.inputRef = viewChild('inputRef');
+        /** Translation key references (typed via KEEPUI_TRANSLATION_KEYS). */
+        this.keys = KEEPUI_TRANSLATION_KEYS.SIGNAL_TEXT_INPUT;
+        /** Optional label text rendered above the input. */
+        this.label = input('');
+        /** Placeholder passed to the underlying `<input>`. */
+        this.placeholder = input('');
+        /** HTML `type` attribute. Use `'password'` to enable the visibility toggle. @default 'text' */
+        this.type = input('text');
+        /** Layout width of the wrapper. @default 'full' */
+        this.width = input('full');
+        /** Name of the leading icon (SVG symbol ID). Leave empty for no icon. */
+        this.leadingIcon = input('');
+        /** Name of the trailing icon (SVG symbol ID). Ignored when `type="password"`. */
+        this.trailingIcon = input('');
+        /**
+         * When `true`, a slot for custom trailing content is enabled
+         * (projects `[trailingSlot]` content). Overrides `trailingIcon`.
+         * @default false
+         */
+        this.hasTrailingSlot = input(false);
+        /** Marks the field as required. Adds `aria-required` and a visual asterisk. @default false */
+        this.required = input(false);
+        /** When `false`, hides the visual asterisk even if `required=true`. @default true */
+        this.showRequiredIndicator = input(true);
+        /** Human-readable error message. Takes precedence over `errors[0]`. */
+        this.errorMessage = input('');
+        /**
+         * Array of error strings. The first item is displayed when `errorMessage` is empty.
+         * Set together with `invalid=true` to trigger the error state.
+         */
+        this.errors = input([]);
+        /**
+         * Stable `id` used to link the `<label>` with the `<input>`.
+         * A random suffix is generated by default.
+         */
+        this.inputId = input(`ku-text-input-${Math.random().toString(36).slice(2, 8)}`);
+        /** Disables the input. @default false */
+        this.disabled = input(false);
+        /**
+         * Forces the error visual state regardless of the `touched` model.
+         * Useful for external form validation. @default false
+         */
+        this.invalid = input(false);
+        /** Current text value. Use `[(value)]` for two-way binding. */
+        this.value = model('');
+        /** Whether the control has been interacted with. Use `[(touched)]` for two-way binding. */
+        this.touched = model(false);
+        this.errorId = computed(() => `${this.inputId()}-error`);
+        this.isPasswordType = computed(() => this.type() === 'password');
+        this.resolvedType = computed(() => {
+            if (this.isPasswordType()) {
+                return this.isPasswordVisible() ? 'text' : 'password';
+            }
+            return this.type();
+        });
+        this.widthClass = computed(() => {
+            const map = {
+                full: 'w-full',
+                half: 'w-1/2',
+                auto: 'w-auto',
+            };
+            return map[this.width()];
+        });
+        this.hasLeading = computed(() => this.leadingIcon().length > 0);
+        this.hasTrailing = computed(() => this.trailingIcon().length > 0 && !this.isPasswordType());
+        this.showError = computed(() => this.touched() &&
+            (this.invalid() || this.errorMessage().length > 0 || this.errors().length > 0));
+        this.isDateEmpty = computed(() => this.type() === 'date' && !this.value());
+        this.inputClasses = computed(() => {
+            const textColor = this.isDateEmpty()
+                ? 'text-ku-gray-text'
+                : 'text-ku-primary-text';
+            const paddingLeft = this.hasLeading() ? 'pl-9' : 'pl-4';
+            const paddingRight = this.hasTrailingSlot()
+                ? 'pr-24'
+                : this.hasTrailing() || this.isPasswordType()
+                    ? 'pr-10'
+                    : 'pr-4';
+            const borderColor = this.showError()
+                ? 'border-ku-error-primary'
+                : 'border-ku-secondary-border focus-visible:border-ku-action-primary';
+            const cursor = this.type() === 'date' ? 'cursor-pointer' : '';
+            return `${textColor} ${paddingLeft} ${paddingRight} ${borderColor} ${cursor}`;
+        });
+    }
+    onInput(event) {
+        const target = event.target;
+        this.value.set(target.value);
+    }
+    onBlur() {
+        this.touched.set(true);
+    }
+    openDatePicker() {
+        if (this.type() === 'date') {
+            try {
+                this.inputRef()?.nativeElement.showPicker();
+            }
+            catch { /* showPicker not supported in all browsers */ }
+        }
+    }
+    togglePasswordVisibility() {
+        this.isPasswordVisible.update(v => !v);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SignalTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SignalTextInputComponent, isStandalone: true, selector: "keepui-signal-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, hasTrailingSlot: { classPropertyName: "hasTrailingSlot", publicName: "hasTrailingSlot", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { classAttribute: "block" }, providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'keepui' }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="flex flex-col gap-1" [class]="widthClass()">
+
+      @if (label()) {
+        <label [for]="inputId()" class="text-sm text-ku-gray-text">
+          {{ label() }}
+          @if (required() && showRequiredIndicator()) {
+            <span class="text-ku-error-primary" aria-hidden="true"> *</span>
+          }
+        </label>
+      }
+
+      <div class="relative flex items-center">
+
+        @if (hasLeading()) {
+          <span
+            class="absolute left-3 flex items-center pointer-events-none text-ku-gray-text"
+            aria-hidden="true"
+          >
+            <keepui-icon [name]="leadingIcon()" [size]="18" />
+          </span>
+        }
+
+        <input
+          #inputRef
+          [id]="inputId()"
+          [type]="resolvedType()"
+          [value]="value()"
+          [placeholder]="placeholder()"
+          [disabled]="disabled()"
+          [attr.required]="required() ? true : null"
+          [attr.aria-required]="required() ? true : null"
+          [attr.aria-invalid]="showError() ? true : null"
+          [attr.aria-describedby]="showError() ? errorId() : null"
+          class="bg-ku-primary border rounded-xl py-2.5 text-sm text-ku-primary-text
+                 placeholder:text-ku-gray-text outline-none transition-colors w-full
+                 disabled:opacity-50 disabled:cursor-not-allowed min-h-[2.75rem]
+                 dark:[color-scheme:dark]"
+          [class]="inputClasses()"
+          (click)="openDatePicker()"
+          (input)="onInput($event)"
+          (blur)="onBlur()"
+        />
+
+        @if (hasTrailingSlot()) {
+          <div class="absolute right-1 flex items-center">
+            <ng-content select="[trailingSlot]" />
+          </div>
+        } @else if (isPasswordType()) {
+          <button
+            type="button"
+            (click)="togglePasswordVisibility()"
+            class="absolute right-3 flex items-center justify-center text-ku-gray-text
+                   hover:text-ku-primary-text transition-colors cursor-pointer
+                   focus-visible:outline-none focus-visible:ring-2
+                   focus-visible:ring-ku-action-primary rounded min-h-[2.75rem] min-w-[2.75rem]"
+            [attr.aria-label]="(isPasswordVisible()
+              ? keys.HIDE_PASSWORD
+              : keys.SHOW_PASSWORD) | transloco"
+          >
+            <keepui-icon
+              [name]="isPasswordVisible() ? 'eye-off-icon' : 'eye-icon'"
+              [size]="18"
+              aria-hidden="true"
+            />
+          </button>
+        } @else if (hasTrailing()) {
+          <span
+            class="absolute right-3 flex items-center pointer-events-none text-ku-gray-text"
+            aria-hidden="true"
+          >
+            <keepui-icon [name]="trailingIcon()" [size]="18" />
+          </span>
+        }
+
+      </div>
+
+      @if (showError()) {
+        <span
+          [id]="errorId()"
+          class="text-sm text-ku-error-primary"
+          role="alert"
+        >
+          @if (errorMessage()) {
+            {{ errorMessage() }}
+          } @else if (errors().length > 0) {
+            {{ errors()[0] }}
+          }
+        </span>
+      }
+
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "keepui-icon", inputs: ["name", "size", "viewBox", "ariaLabel"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SignalTextInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keepui-signal-text-input',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconComponent, TranslocoPipe],
+                    providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'keepui' }],
+                    host: { class: 'block' },
+                    template: `
+    <div class="flex flex-col gap-1" [class]="widthClass()">
+
+      @if (label()) {
+        <label [for]="inputId()" class="text-sm text-ku-gray-text">
+          {{ label() }}
+          @if (required() && showRequiredIndicator()) {
+            <span class="text-ku-error-primary" aria-hidden="true"> *</span>
+          }
+        </label>
+      }
+
+      <div class="relative flex items-center">
+
+        @if (hasLeading()) {
+          <span
+            class="absolute left-3 flex items-center pointer-events-none text-ku-gray-text"
+            aria-hidden="true"
+          >
+            <keepui-icon [name]="leadingIcon()" [size]="18" />
+          </span>
+        }
+
+        <input
+          #inputRef
+          [id]="inputId()"
+          [type]="resolvedType()"
+          [value]="value()"
+          [placeholder]="placeholder()"
+          [disabled]="disabled()"
+          [attr.required]="required() ? true : null"
+          [attr.aria-required]="required() ? true : null"
+          [attr.aria-invalid]="showError() ? true : null"
+          [attr.aria-describedby]="showError() ? errorId() : null"
+          class="bg-ku-primary border rounded-xl py-2.5 text-sm text-ku-primary-text
+                 placeholder:text-ku-gray-text outline-none transition-colors w-full
+                 disabled:opacity-50 disabled:cursor-not-allowed min-h-[2.75rem]
+                 dark:[color-scheme:dark]"
+          [class]="inputClasses()"
+          (click)="openDatePicker()"
+          (input)="onInput($event)"
+          (blur)="onBlur()"
+        />
+
+        @if (hasTrailingSlot()) {
+          <div class="absolute right-1 flex items-center">
+            <ng-content select="[trailingSlot]" />
+          </div>
+        } @else if (isPasswordType()) {
+          <button
+            type="button"
+            (click)="togglePasswordVisibility()"
+            class="absolute right-3 flex items-center justify-center text-ku-gray-text
+                   hover:text-ku-primary-text transition-colors cursor-pointer
+                   focus-visible:outline-none focus-visible:ring-2
+                   focus-visible:ring-ku-action-primary rounded min-h-[2.75rem] min-w-[2.75rem]"
+            [attr.aria-label]="(isPasswordVisible()
+              ? keys.HIDE_PASSWORD
+              : keys.SHOW_PASSWORD) | transloco"
+          >
+            <keepui-icon
+              [name]="isPasswordVisible() ? 'eye-off-icon' : 'eye-icon'"
+              [size]="18"
+              aria-hidden="true"
+            />
+          </button>
+        } @else if (hasTrailing()) {
+          <span
+            class="absolute right-3 flex items-center pointer-events-none text-ku-gray-text"
+            aria-hidden="true"
+          >
+            <keepui-icon [name]="trailingIcon()" [size]="18" />
+          </span>
+        }
+
+      </div>
+
+      @if (showError()) {
+        <span
+          [id]="errorId()"
+          class="text-sm text-ku-error-primary"
+          role="alert"
+        >
+          @if (errorMessage()) {
+            {{ errorMessage() }}
+          } @else if (errors().length > 0) {
+            {{ errors()[0] }}
+          }
+        </span>
+      }
+
+    </div>
+  `,
+                }]
+        }] });
+
+/**
+ * Signal-based accessible textarea component with character counter,
+ * resize control, and integrated error display.
+ *
+ * The `value` and `touched` properties are `model()` signals so the component
+ * integrates seamlessly with Angular signal-based forms.
+ *
+ * ```html
+ * <keepui-signal-textarea
+ *   label="Descripción"
+ *   placeholder="Escribe aquí…"
+ *   [rows]="5"
+ *   [maxLength]="500"
+ *   [(value)]="description"
+ * />
+ * ```
+ */
+class SignalTextareaComponent {
+    constructor() {
+        /** Optional label text rendered above the textarea. */
+        this.label = input('');
+        /** Placeholder passed to the underlying `<textarea>`. */
+        this.placeholder = input('');
+        /** Number of visible text rows. @default 4 */
+        this.rows = input(4);
+        /** Layout width of the wrapper. @default 'full' */
+        this.width = input('full');
+        /** CSS `resize` behaviour. @default 'none' */
+        this.resize = input('none');
+        /** Marks the field as required. @default false */
+        this.required = input(false);
+        /** Human-readable error message. Takes precedence over `errors[0]`. */
+        this.errorMessage = input('');
+        /**
+         * Array of error strings. The first item is displayed when `errorMessage` is empty.
+         * Set together with `invalid=true` to trigger the error state.
+         */
+        this.errors = input([]);
+        /**
+         * Stable `id` used to link the `<label>` with the `<textarea>`.
+         * A random suffix is generated by default.
+         */
+        this.textareaId = input(`ku-textarea-${Math.random().toString(36).slice(2, 8)}`);
+        /** Disables the textarea. @default false */
+        this.disabled = input(false);
+        /** Maximum number of characters allowed. Shows a character counter when set. */
+        this.maxLength = input(undefined);
+        /**
+         * Forces the error visual state regardless of the `touched` model.
+         * Useful for external form validation. @default false
+         */
+        this.invalid = input(false);
+        /** Current text value. Use `[(value)]` for two-way binding. */
+        this.value = model('');
+        /** Whether the control has been interacted with. Use `[(touched)]` for two-way binding. */
+        this.touched = model(false);
+        this.errorId = computed(() => `${this.textareaId()}-error`);
+        this.charCountId = computed(() => `${this.textareaId()}-count`);
+        this.charCount = computed(() => this.value().length);
+        this.showError = computed(() => this.touched() &&
+            (this.invalid() || this.errorMessage().length > 0 || this.errors().length > 0));
+        this.widthClass = computed(() => {
+            const map = {
+                full: 'w-full',
+                half: 'w-1/2',
+                auto: 'w-auto',
+            };
+            return map[this.width()];
+        });
+        this.resizeClass = computed(() => {
+            const map = {
+                none: 'resize-none',
+                vertical: 'resize-y',
+                horizontal: 'resize-x',
+                both: 'resize',
+            };
+            return map[this.resize()];
+        });
+        this.textareaClasses = computed(() => {
+            const borderColor = this.showError()
+                ? 'border-ku-error-primary'
+                : 'border-ku-secondary-border focus-visible:border-ku-action-primary';
+            return `${this.resizeClass()} ${borderColor}`;
+        });
+    }
+    onInput(event) {
+        const target = event.target;
+        this.value.set(target.value);
+    }
+    onBlur() {
+        this.touched.set(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SignalTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SignalTextareaComponent, isStandalone: true, selector: "keepui-signal-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, textareaId: { classPropertyName: "textareaId", publicName: "textareaId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div class="flex flex-col gap-1" [class]="widthClass()">
+
+      @if (label()) {
+        <label [for]="textareaId()" class="text-sm text-ku-gray-text">
+          {{ label() }}
+          @if (required()) {
+            <span class="text-ku-error-primary" aria-hidden="true"> *</span>
+          }
+        </label>
+      }
+
+      <textarea
+        [id]="textareaId()"
+        [value]="value()"
+        [placeholder]="placeholder()"
+        [rows]="rows()"
+        [disabled]="disabled()"
+        [attr.maxlength]="maxLength() ?? null"
+        [attr.required]="required() ? true : null"
+        [attr.aria-required]="required() ? true : null"
+        [attr.aria-invalid]="showError() ? true : null"
+        [attr.aria-describedby]="showError() ? errorId() : (maxLength() ? charCountId() : null)"
+        class="bg-ku-primary border rounded-xl p-3 text-sm text-ku-primary-text
+               placeholder:text-ku-gray-text outline-none transition-colors w-full
+               disabled:opacity-50 disabled:cursor-not-allowed"
+        [class]="textareaClasses()"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+      ></textarea>
+
+      <div class="flex items-start justify-between gap-2">
+
+        <span
+          [id]="errorId()"
+          class="text-sm text-ku-error-primary"
+          role="alert"
+        >
+          @if (showError()) {
+            @if (errorMessage()) {
+              {{ errorMessage() }}
+            } @else if (errors().length > 0) {
+              {{ errors()[0] }}
+            }
+          }
+        </span>
+
+        @if (maxLength()) {
+          <span
+            [id]="charCountId()"
+            class="text-xs text-ku-gray-text ml-auto shrink-0"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            {{ charCount() }}&thinsp;/&thinsp;{{ maxLength() }}
+          </span>
+        }
+
+      </div>
+
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SignalTextareaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keepui-signal-textarea',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                    template: `
+    <div class="flex flex-col gap-1" [class]="widthClass()">
+
+      @if (label()) {
+        <label [for]="textareaId()" class="text-sm text-ku-gray-text">
+          {{ label() }}
+          @if (required()) {
+            <span class="text-ku-error-primary" aria-hidden="true"> *</span>
+          }
+        </label>
+      }
+
+      <textarea
+        [id]="textareaId()"
+        [value]="value()"
+        [placeholder]="placeholder()"
+        [rows]="rows()"
+        [disabled]="disabled()"
+        [attr.maxlength]="maxLength() ?? null"
+        [attr.required]="required() ? true : null"
+        [attr.aria-required]="required() ? true : null"
+        [attr.aria-invalid]="showError() ? true : null"
+        [attr.aria-describedby]="showError() ? errorId() : (maxLength() ? charCountId() : null)"
+        class="bg-ku-primary border rounded-xl p-3 text-sm text-ku-primary-text
+               placeholder:text-ku-gray-text outline-none transition-colors w-full
+               disabled:opacity-50 disabled:cursor-not-allowed"
+        [class]="textareaClasses()"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+      ></textarea>
+
+      <div class="flex items-start justify-between gap-2">
+
+        <span
+          [id]="errorId()"
+          class="text-sm text-ku-error-primary"
+          role="alert"
+        >
+          @if (showError()) {
+            @if (errorMessage()) {
+              {{ errorMessage() }}
+            } @else if (errors().length > 0) {
+              {{ errors()[0] }}
+            }
+          }
+        </span>
+
+        @if (maxLength()) {
+          <span
+            [id]="charCountId()"
+            class="text-xs text-ku-gray-text ml-auto shrink-0"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            {{ charCount() }}&thinsp;/&thinsp;{{ maxLength() }}
+          </span>
+        }
+
+      </div>
+
+    </div>
+  `,
+                }]
+        }] });
+
+/**
+ * Accessible pill-style tab group with icon support and two visual variants.
+ *
+ * Implements the WAI-ARIA `tablist` pattern: keyboard navigation with arrow keys,
+ * `Home`, and `End`. Each tab carries `role="tab"` and `aria-selected`.
+ *
+ * Works identically on **web** and **Angular + Capacitor**.
+ *
+ * ```html
+ * <!-- Basic usage -->
+ * <keepui-tab-group
+ *   [tabs]="tabs"
+ *   [selectedTabId]="activeTab"
+ *   (tabChange)="activeTab = $event"
+ * />
+ *
+ * <!-- Filled variant -->
+ * <keepui-tab-group
+ *   variant="filled"
+ *   [tabs]="tabs"
+ *   [selectedTabId]="activeTab"
+ *   (tabChange)="activeTab = $event"
+ * />
+ * ```
+ */
+class TabGroupComponent {
+    constructor() {
+        /** List of tabs to render. */
+        this.tabs = input.required();
+        /** ID of the currently selected tab. */
+        this.selectedTabId = input.required();
+        /** Visual style variant. @default 'default' */
+        this.variant = input('default');
+        /**
+         * Accessible label for the tablist container.
+         * Provide a meaningful description when multiple tab groups exist on the page.
+         */
+        this.ariaLabel = input('');
+        /** Emits the `id` of the tab the user has selected. */
+        this.tabChange = output();
+        this.tabButtons = viewChildren('tabButton');
+        this.containerClass = computed(() => this.variant() === 'filled'
+            ? 'bg-ku-action-primary/10 border-ku-action-primary/20'
+            : 'bg-ku-secondary border-ku-secondary-border');
+    }
+    buttonClass(tabId) {
+        const isActive = this.selectedTabId() === tabId;
+        if (this.variant() === 'filled') {
+            return isActive
+                ? 'bg-ku-action-primary text-white'
+                : 'text-ku-gray-text hover:text-ku-primary-text hover:bg-ku-action-primary/10';
+        }
+        return isActive
+            ? 'bg-ku-primary text-ku-primary-text shadow-sm border border-ku-primary-border'
+            : 'text-ku-gray-text hover:text-ku-primary-text hover:bg-ku-secondary-hover';
+    }
+    iconClass(tabId) {
+        const isActive = this.selectedTabId() === tabId;
+        if (this.variant() === 'filled') {
+            return isActive ? 'text-white' : 'text-ku-gray-text';
+        }
+        return isActive ? 'text-ku-action-primary' : 'text-ku-gray-text';
+    }
+    onTabClick(tab) {
+        if (!tab.disabled && tab.id !== this.selectedTabId()) {
+            this.tabChange.emit(tab.id);
+        }
+    }
+    onKeydown(event) {
+        const tabs = this.tabs().filter(t => !t.disabled);
+        const activeIndex = tabs.findIndex(t => t.id === this.selectedTabId());
+        let nextIndex = activeIndex;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            nextIndex = (activeIndex + 1) % tabs.length;
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            nextIndex = (activeIndex - 1 + tabs.length) % tabs.length;
+        }
+        else if (event.key === 'Home') {
+            nextIndex = 0;
+        }
+        else if (event.key === 'End') {
+            nextIndex = tabs.length - 1;
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        const nextTab = tabs[nextIndex];
+        this.tabChange.emit(nextTab.id);
+        this.focusTab(nextTab.id);
+    }
+    focusTab(tabId) {
+        const allTabs = this.tabs();
+        const index = allTabs.findIndex(t => t.id === tabId);
+        const buttons = this.tabButtons();
+        buttons[index]?.nativeElement.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TabGroupComponent, isStandalone: true, selector: "keepui-tab-group", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      role="tablist"
+      [attr.aria-label]="ariaLabel() || null"
+      class="flex items-center p-1 rounded-full border transition-colors duration-200"
+      [class]="containerClass()"
+      (keydown)="onKeydown($event)"
+    >
+      @for (tab of tabs(); track tab.id; let i = $index) {
+        <button
+          #tabButton
+          type="button"
+          role="tab"
+          [id]="'keepui-tab-' + tab.id"
+          [attr.aria-selected]="selectedTabId() === tab.id"
+          [attr.aria-disabled]="tab.disabled ? true : null"
+          [disabled]="tab.disabled || false"
+          [tabindex]="selectedTabId() === tab.id ? 0 : -1"
+          class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full
+                 transition-colors duration-200 text-sm font-medium cursor-pointer
+                 min-h-[2.75rem]
+                 focus-visible:outline-none focus-visible:ring-2
+                 focus-visible:ring-ku-action-primary focus-visible:ring-offset-2
+                 disabled:cursor-not-allowed disabled:opacity-40"
+          [class]="buttonClass(tab.id)"
+          (click)="onTabClick(tab)"
+        >
+          @if (tab.icon) {
+            <keepui-icon
+              [name]="tab.icon"
+              [size]="16"
+              [class]="iconClass(tab.id)"
+              aria-hidden="true"
+            />
+          }
+          <span>{{ tab.label }}</span>
+        </button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "keepui-icon", inputs: ["name", "size", "viewBox", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TabGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keepui-tab-group',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconComponent],
+                    template: `
+    <div
+      role="tablist"
+      [attr.aria-label]="ariaLabel() || null"
+      class="flex items-center p-1 rounded-full border transition-colors duration-200"
+      [class]="containerClass()"
+      (keydown)="onKeydown($event)"
+    >
+      @for (tab of tabs(); track tab.id; let i = $index) {
+        <button
+          #tabButton
+          type="button"
+          role="tab"
+          [id]="'keepui-tab-' + tab.id"
+          [attr.aria-selected]="selectedTabId() === tab.id"
+          [attr.aria-disabled]="tab.disabled ? true : null"
+          [disabled]="tab.disabled || false"
+          [tabindex]="selectedTabId() === tab.id ? 0 : -1"
+          class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full
+                 transition-colors duration-200 text-sm font-medium cursor-pointer
+                 min-h-[2.75rem]
+                 focus-visible:outline-none focus-visible:ring-2
+                 focus-visible:ring-ku-action-primary focus-visible:ring-offset-2
+                 disabled:cursor-not-allowed disabled:opacity-40"
+          [class]="buttonClass(tab.id)"
+          (click)="onTabClick(tab)"
+        >
+          @if (tab.icon) {
+            <keepui-icon
+              [name]="tab.icon"
+              [size]="16"
+              [class]="iconClass(tab.id)"
+              aria-hidden="true"
+            />
+          }
+          <span>{{ tab.label }}</span>
+        </button>
+      }
+    </div>
+  `,
+                }]
+        }] });
+
+/**
+ * Visual step-progress indicator with optional navigation.
+ *
+ * Renders a sequence of numbered step circles connected by a progress bar.
+ * Completed steps show a check-mark; the active step is highlighted; future
+ * steps are muted. Steps with an `icon` replace the number with the given SVG symbol.
+ *
+ * Accessibility: uses `role="list"` / `role="listitem"` with `aria-current="step"` on
+ * the active item. When steps are interactive (i.e. `stepChange` is listened to),
+ * completed and current steps render as `<button>` elements; future steps remain
+ * inert `<span>` elements.
+ *
+ * Works identically on **web** and **Angular + Capacitor**.
+ *
+ * ```html
+ * <!-- Read-only progress indicator -->
+ * <keepui-stepper [steps]="steps" [activeIndex]="1" />
+ *
+ * <!-- Interactive stepper (go back to a previous step) -->
+ * <keepui-stepper
+ *   [steps]="steps"
+ *   [activeIndex]="currentStep"
+ *   (stepChange)="currentStep = $event"
+ * />
+ *
+ * <!-- Small variant -->
+ * <keepui-stepper [steps]="steps" [activeIndex]="0" size="sm" />
+ * ```
+ */
+class StepperComponent {
+    constructor() {
+        /** Steps to render. */
+        this.steps = input.required();
+        /** Zero-based index of the currently active step. @default 0 */
+        this.activeIndex = input(0);
+        /** Visual size of the step circles and connector bars. @default 'md' */
+        this.size = input('md');
+        /** Layout direction. @default 'horizontal' */
+        this.orientation = input('horizontal');
+        /**
+         * Accessible label for the `<nav>` element.
+         * @default ''
+         */
+        this.ariaLabel = input('');
+        /**
+         * Emits the zero-based index of the step the user clicked.
+         * Only completed steps and the active step are clickable.
+         * When no subscriber is attached, the stepper is purely visual.
+         */
+        this.stepChange = output();
+        this.iconSize = computed(() => (this.size() === 'sm' ? 12 : 16));
+        this.wrapperClass = computed(() => 'w-full');
+        this.listClass = computed(() => {
+            const base = 'list-none m-0 p-0 flex';
+            return this.orientation() === 'vertical'
+                ? `${base} flex-col gap-0`
+                : `${base} flex-row items-start`;
+        });
+        this.itemClass = computed(() => {
+            const base = 'flex';
+            return this.orientation() === 'vertical'
+                ? `${base} flex-row items-center flex-1`
+                : `${base} flex-col items-center flex-1`;
+        });
+        this.stepColumnClass = computed(() => {
+            return this.orientation() === 'vertical'
+                ? 'flex flex-row items-center gap-3'
+                : 'flex flex-col items-center gap-1.5';
+        });
+    }
+    isCompleted(index) {
+        return index < this.activeIndex();
+    }
+    isActive(index) {
+        return index === this.activeIndex();
+    }
+    isClickable(index, step) {
+        return !step.disabled && (this.isCompleted(index) || this.isActive(index));
+    }
+    onStepClick(index, step) {
+        if (!step.disabled) {
+            this.stepChange.emit(index);
+        }
+    }
+    bubbleClass(index) {
+        const sizeClass = this.size() === 'sm'
+            ? 'w-6 h-6 text-xs'
+            : 'w-9 h-9 text-sm';
+        const base = [
+            'inline-flex items-center justify-center rounded-full shrink-0',
+            'transition-colors duration-200',
+            'focus-visible:outline-none focus-visible:ring-2',
+            'focus-visible:ring-ku-action-primary focus-visible:ring-offset-2',
+            sizeClass,
+        ].join(' ');
+        if (this.isCompleted(index)) {
+            return `${base} bg-ku-action-primary text-white cursor-pointer`;
+        }
+        if (this.isActive(index)) {
+            return `${base} bg-ku-action-primary text-white ring-2 ring-ku-action-primary ring-offset-2`;
+        }
+        return `${base} bg-ku-secondary border-2 border-ku-secondary-border text-ku-gray-text cursor-default`;
+    }
+    labelClass(index) {
+        const base = 'text-xs font-medium text-center transition-colors duration-200';
+        if (this.isActive(index)) {
+            return `${base} text-ku-primary-text`;
+        }
+        if (this.isCompleted(index)) {
+            return `${base} text-ku-action-primary`;
+        }
+        return `${base} text-ku-gray-text`;
+    }
+    connectorClass(index) {
+        const filled = this.isCompleted(index) || this.isActive(index);
+        if (this.orientation() === 'vertical') {
+            const height = this.size() === 'sm' ? 'h-8' : 'h-10';
+            return [
+                `${height} w-0.5 mx-auto my-1 rounded-full transition-colors duration-300`,
+                filled ? 'bg-ku-action-primary' : 'bg-ku-secondary-border',
+            ].join(' ');
+        }
+        return [
+            'w-full h-0.5 mt-4 mb-1 rounded-full transition-colors duration-300',
+            filled ? 'bg-ku-action-primary' : 'bg-ku-secondary-border',
+        ].join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: StepperComponent, isStandalone: true, selector: "keepui-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: `
+    <nav
+      [attr.aria-label]="ariaLabel() || null"
+      [class]="wrapperClass()"
+    >
+      <ol
+        role="list"
+        [class]="listClass()"
+      >
+        @for (step of steps(); track step.id; let i = $index; let last = $last) {
+          <li
+            role="listitem"
+            [class]="itemClass()"
+            [attr.aria-current]="isActive(i) ? 'step' : null"
+          >
+            <div [class]="stepColumnClass()">
+              @if (isClickable(i, step)) {
+                <button
+                  type="button"
+                  [class]="bubbleClass(i)"
+                  [attr.aria-label]="step.label"
+                  [attr.aria-disabled]="step.disabled ? true : null"
+                  [disabled]="step.disabled || false"
+                  (click)="onStepClick(i, step)"
+                >
+                  <ng-container *ngTemplateOutlet="bubbleContent; context: { i, step }" />
+                </button>
+              } @else {
+                <span [class]="bubbleClass(i)" aria-hidden="true">
+                  <ng-container *ngTemplateOutlet="bubbleContent; context: { i, step }" />
+                </span>
+              }
+
+              <span [class]="labelClass(i)">{{ step.label }}</span>
+            </div>
+
+            @if (!last) {
+              <div [class]="connectorClass(i)"></div>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+
+    <ng-template #bubbleContent let-i="i" let-step="step">
+      @if (isCompleted(i)) {
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      } @else if (step.icon) {
+        <keepui-icon [name]="step.icon" [size]="iconSize()" aria-hidden="true" />
+      } @else {
+        <span class="font-semibold leading-none">{{ i + 1 }}</span>
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "keepui-icon", inputs: ["name", "size", "viewBox", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keepui-stepper',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconComponent, NgTemplateOutlet],
+                    template: `
+    <nav
+      [attr.aria-label]="ariaLabel() || null"
+      [class]="wrapperClass()"
+    >
+      <ol
+        role="list"
+        [class]="listClass()"
+      >
+        @for (step of steps(); track step.id; let i = $index; let last = $last) {
+          <li
+            role="listitem"
+            [class]="itemClass()"
+            [attr.aria-current]="isActive(i) ? 'step' : null"
+          >
+            <div [class]="stepColumnClass()">
+              @if (isClickable(i, step)) {
+                <button
+                  type="button"
+                  [class]="bubbleClass(i)"
+                  [attr.aria-label]="step.label"
+                  [attr.aria-disabled]="step.disabled ? true : null"
+                  [disabled]="step.disabled || false"
+                  (click)="onStepClick(i, step)"
+                >
+                  <ng-container *ngTemplateOutlet="bubbleContent; context: { i, step }" />
+                </button>
+              } @else {
+                <span [class]="bubbleClass(i)" aria-hidden="true">
+                  <ng-container *ngTemplateOutlet="bubbleContent; context: { i, step }" />
+                </span>
+              }
+
+              <span [class]="labelClass(i)">{{ step.label }}</span>
+            </div>
+
+            @if (!last) {
+              <div [class]="connectorClass(i)"></div>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+
+    <ng-template #bubbleContent let-i="i" let-step="step">
+      @if (isCompleted(i)) {
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      } @else if (step.icon) {
+        <keepui-icon [name]="step.icon" [size]="iconSize()" aria-hidden="true" />
+      } @else {
+        <span class="font-semibold leading-none">{{ i + 1 }}</span>
+      }
+    </ng-template>
+  `,
+                }]
+        }] });
+
 /**
  * Registers KeepUI core providers for a **web** Angular application.
  *
@@ -725,6 +2220,10 @@ const EN = {
         previewAlt: 'Selected image preview',
         errorUnexpected: 'An unexpected error occurred',
     },
+    signalTextInput: {
+        showPassword: 'Show password',
+        hidePassword: 'Hide password',
+    },
 };
 const ES = {
     imagePreview: {
@@ -733,6 +2232,10 @@ const ES = {
         previewAlt: 'Vista previa de imagen seleccionada',
         errorUnexpected: 'Ha ocurrido un error inesperado',
     },
+    signalTextInput: {
+        showPassword: 'Mostrar contraseña',
+        hidePassword: 'Ocultar contraseña',
+    },
 };
 const DE = {
     imagePreview: {
@@ -741,6 +2244,10 @@ const DE = {
         previewAlt: 'Vorschau des ausgewählten Bildes',
         errorUnexpected: 'Ein unerwarteter Fehler ist aufgetreten',
     },
+    signalTextInput: {
+        showPassword: 'Passwort anzeigen',
+        hidePassword: 'Passwort verbergen',
+    },
 };
 /** Map from locale code to its translation object. */
 const KEEPUI_TRANSLATIONS = {
@@ -905,5 +2412,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CardComponent, FILE_PORT, IconActionButtonComponent, IconComponent, ImagePreviewComponent, KEEPUI_AVAILABLE_LANGUAGES, KEEPUI_TRANSLATIONS, KEEPUI_TRANSLATION_KEYS, KeepUiLanguageService, MockFileService, WebFileService, provideKeepUi, provideKeepUiI18n };
+export { ButtonComponent, CardComponent, FILE_PORT, IconActionButtonComponent, IconComponent, ImagePreviewComponent, KEEPUI_AVAILABLE_LANGUAGES, KEEPUI_TRANSLATIONS, KEEPUI_TRANSLATION_KEYS, KeepUiLanguageService, MockFileService, SignalDropdownComponent, SignalTextInputComponent, SignalTextareaComponent, StepperComponent, TabGroupComponent, WebFileService, provideKeepUi, provideKeepUiI18n };
 //# sourceMappingURL=keepui-ui.mjs.map