@keepui/ui 0.2.0 → 0.4.0

package/fesm2022/keepui-ui.mjs

@@ -1,5 +1,5 @@
 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, makeEnvironmentProviders } from '@angular/core';
 import { TranslocoPipe, TRANSLOCO_SCOPE, TranslocoService, provideTransloco } from '@jsverse/transloco';
 import { of } from 'rxjs';
 
@@ -137,25 +137,24 @@ class ButtonComponent {
             };
             const variantMap = {
                 primary: [
-                    'bg-ku-primary text-ku-primary-text border border-ku-primary-border',
-                    'enabled:hover:bg-ku-primary-hover enabled:hover:border-ku-primary-border',
-                    'enabled:active:bg-ku-primary-hover enabled:active:border-ku-primary-border',
+                    'bg-ku-action-primary text-white border border-ku-action-primary',
+                    'enabled:hover:opacity-90',
+                    'enabled:active:opacity-80',
                 ].join(' '),
                 secondary: [
-                    'bg-ku-secondary text-ku-secondary-text border border-ku-secondary-border',
-                    'enabled:hover:bg-ku-secondary-hover enabled:hover:border-ku-gray-border',
-                    'disabled:text-ku-gray-text',
+                    'bg-ku-primary text-ku-action-primary border border-ku-action-primary',
+                    'enabled:hover:bg-ku-action-background transition-colors',
                 ].join(' '),
                 outline: [
-                    'bg-transparent border border-ku-secondary-border text-ku-secondary-text',
-                    'enabled:hover:border-ku-primary-border enabled:hover:text-ku-brand-text',
+                    'bg-ku-primary border border-ku-secondary-border text-ku-gray-text',
+                    'enabled:hover:text-ku-action-primary enabled:hover:border-ku-action-primary transition-colors',
                 ].join(' '),
                 ghost: [
-                    'bg-transparent border border-ku-primary-border text-ku-brand-text',
-                    'enabled:hover:bg-ku-primary/10',
+                    'bg-transparent border border-ku-action-primary text-ku-action-primary',
+                    'enabled:hover:bg-ku-action-background',
                 ].join(' '),
                 danger: [
-                    'bg-ku-red-bg text-ku-red-text border border-ku-red-border',
+                    'bg-ku-error-primary text-white border border-ku-error-primary',
                     'enabled:hover:opacity-90',
                     'enabled:active:opacity-80',
                 ].join(' '),
@@ -349,6 +348,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }] });
 
+/**
+ * Generic SVG sprite icon renderer.
+ *
+ * Renders a `<use href="#name">` reference pointing to an SVG symbol pre-registered
+ * in the DOM by the consuming application (e.g. via `IconRegistryService`).
+ *
+ * Accessibility:
+ * - When used decoratively (default), the SVG carries `aria-hidden="true"` automatically.
+ * - When used as a standalone meaningful icon, supply an `ariaLabel` — the SVG will
+ *   receive `role="img"` and `aria-label` accordingly.
+ *
+ * ```html
+ * <!-- Decorative — hidden from screen readers -->
+ * <keepui-icon name="check-icon" [size]="20" aria-hidden="true" />
+ *
+ * <!-- Meaningful standalone icon -->
+ * <keepui-icon name="close-icon" ariaLabel="Cerrar" />
+ * ```
+ */
+class IconComponent {
+    constructor() {
+        /** ID of the SVG symbol to render (without the `#` prefix). */
+        this.name = input.required();
+        /** Width and height of the icon in pixels. @default 24 */
+        this.size = input(24);
+        /** `viewBox` attribute forwarded to the `<svg>` element. @default '0 0 24 24' */
+        this.viewBox = input('0 0 24 24');
+        /**
+         * Accessible label for standalone icons.
+         * When provided, sets `role="img"` and `aria-label` on the SVG.
+         * When omitted, the SVG is marked `aria-hidden="true"` (decorative).
+         * @default ''
+         */
+        this.ariaLabel = input('');
+        this.href = computed(() => `#${this.name()}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: IconComponent, isStandalone: true, selector: "keepui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, viewBox: { classPropertyName: "viewBox", publicName: "viewBox", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex items-center justify-center" }, ngImport: i0, template: `
+    <svg
+      class="block"
+      [attr.width]="size()"
+      [attr.height]="size()"
+      [attr.viewBox]="viewBox()"
+      [attr.aria-hidden]="ariaLabel() ? null : true"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.role]="ariaLabel() ? 'img' : null"
+    >
+      <use [attr.href]="href()" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keepui-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'inline-flex items-center justify-center',
+                    },
+                    template: `
+    <svg
+      class="block"
+      [attr.width]="size()"
+      [attr.height]="size()"
+      [attr.viewBox]="viewBox()"
+      [attr.aria-hidden]="ariaLabel() ? null : true"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.role]="ariaLabel() ? 'img' : null"
+    >
+      <use [attr.href]="href()" />
+    </svg>
+  `,
+                }]
+        }] });
+
+/**
+ * Circular icon-only action button with `default` and `danger` variants,
+ * loading state, and full accessibility support.
+ *
+ * Because this button renders no visible text, `ariaLabel` is **required** to
+ * satisfy WCAG 2.1 SC 4.1.2 (Name, Role, Value).
+ *
+ * The icon color is inherited automatically via `currentColor` from the button's
+ * text color, so SVG symbols defined with `stroke="currentColor"` will adapt to
+ * both variants and themes without extra classes.
+ *
+ * ```html
+ * <keepui-icon-action-button icon="edit-icon" ariaLabel="Editar" />
+ *
+ * <keepui-icon-action-button
+ *   icon="trash-icon"
+ *   variant="danger"
+ *   ariaLabel="Eliminar elemento"
+ *   [loading]="isDeleting()"
+ * />
+ * ```
+ */
+class IconActionButtonComponent {
+    constructor() {
+        /** ID of the SVG symbol to render (without the `#` prefix). */
+        this.icon = input.required();
+        /**
+         * Accessible label for the button. Always required — icon-only buttons must
+         * have a programmatic name for screen readers (WCAG 2.1 SC 4.1.2).
+         */
+        this.ariaLabel = input.required();
+        /** Visual style variant. @default 'default' */
+        this.variant = input('default');
+        /** Size of the inner icon in pixels. @default 20 */
+        this.iconSize = input(20);
+        /** HTML `type` attribute of the inner `<button>`. @default 'button' */
+        this.type = input('button');
+        /** Disables the button when `true`. @default false */
+        this.disabled = input(false);
+        /**
+         * Shows an animated spinner and disables the button.
+         * Also sets `aria-busy="true"` on the element.
+         * @default false
+         */
+        this.loading = input(false);
+        this.isDisabled = computed(() => this.disabled() || this.loading());
+        this.buttonClass = computed(() => {
+            const base = [
+                'inline-flex items-center justify-center shrink-0 cursor-pointer',
+                'size-11 rounded-full border transition-colors',
+                'focus-visible:outline-none focus-visible:ring-2',
+                'focus-visible:ring-ku-primary-border focus-visible:ring-offset-2',
+                'disabled:cursor-not-allowed disabled:opacity-50',
+            ].join(' ');
+            const variantMap = {
+                default: [
+                    'border-ku-secondary-border bg-ku-primary text-ku-gray-text',
+                    'enabled:hover:bg-ku-action-background enabled:hover:border-ku-action-primary',
+                    'enabled:hover:text-ku-action-primary',
+                ].join(' '),
+                danger: [
+                    'border-ku-secondary-border bg-ku-primary text-ku-gray-text',
+                    'enabled:hover:bg-ku-error-background  enabled:hover:border-ku-error-primary enabled:hover:text-ku-error-primary',
+                    'enabled:hover:opacity-90',
+                ].join(' '),
+            };
+            return `${base} ${variantMap[this.variant()]}`;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: IconActionButtonComponent, isStandalone: true, selector: "keepui-icon-action-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      [attr.type]="type()"
+      [disabled]="isDisabled()"
+      [attr.aria-disabled]="isDisabled() ? true : null"
+      [attr.aria-busy]="loading() ? true : null"
+      [attr.aria-label]="ariaLabel()"
+      [class]="buttonClass()"
+    >
+      @if (loading()) {
+        <span class="keepui-iab-spinner" aria-hidden="true"></span>
+      } @else {
+        <keepui-icon [name]="icon()" [size]="iconSize()" />
+      }
+    </button>
+  `, isInline: true, styles: [".keepui-iab-spinner{display:inline-block;width:1.25em;height:1.25em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:keepui-iab-spin .65s linear infinite;flex-shrink:0}@keyframes keepui-iab-spin{to{transform:rotate(360deg)}}\n"], 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: IconActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'keepui-icon-action-button', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      [attr.type]="type()"
+      [disabled]="isDisabled()"
+      [attr.aria-disabled]="isDisabled() ? true : null"
+      [attr.aria-busy]="loading() ? true : null"
+      [attr.aria-label]="ariaLabel()"
+      [class]="buttonClass()"
+    >
+      @if (loading()) {
+        <span class="keepui-iab-spinner" aria-hidden="true"></span>
+      } @else {
+        <keepui-icon [name]="icon()" [size]="iconSize()" />
+      }
+    </button>
+  `, styles: [".keepui-iab-spinner{display:inline-block;width:1.25em;height:1.25em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:keepui-iab-spin .65s linear infinite;flex-shrink:0}@keyframes keepui-iab-spin{to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
 /**
  * Typed constants for every translation key used in @keepui/ui.
  *
@@ -369,6 +551,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 = [
@@ -508,6 +694,1035 @@ 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>
+  `,
+                }]
+        }] });
+
 /**
  * Registers KeepUI core providers for a **web** Angular application.
  *
@@ -543,6 +1758,10 @@ const EN = {
         previewAlt: 'Selected image preview',
         errorUnexpected: 'An unexpected error occurred',
     },
+    signalTextInput: {
+        showPassword: 'Show password',
+        hidePassword: 'Hide password',
+    },
 };
 const ES = {
     imagePreview: {
@@ -551,6 +1770,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: {
@@ -559,6 +1782,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 = {
@@ -723,5 +1950,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CardComponent, FILE_PORT, 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, WebFileService, provideKeepUi, provideKeepUiI18n };
 //# sourceMappingURL=keepui-ui.mjs.map