@eagami/ui 5.70.0 → 5.71.0

package/fesm2022/eagami-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ApplicationRef, CSP_NONCE, ChangeDetectionStrategy, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostAttributeToken, HostBinding, HostListener, Injectable, InjectionToken, Injector, PLATFORM_ID, Renderer2, RendererStyleFlags2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, contentChild, createComponent, effect, forwardRef, inject, input, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
+import { ApplicationRef, CSP_NONCE, ChangeDetectionStrategy, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostAttributeToken, HostBinding, HostListener, Injectable, InjectionToken, Injector, NgZone, PLATFORM_ID, Renderer2, RendererStyleFlags2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, contentChild, createComponent, effect, forwardRef, inject, input, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 import { FormResetEvent, FormSubmittedEvent, NG_VALUE_ACCESSOR, NgControl, TouchedChangeEvent } from "@angular/forms";
 const EAGAMI_I18N_CONFIG = new InjectionToken("EAGAMI_I18N_CONFIG");
@@ -10891,7 +10891,17 @@ var ButtonComponent = class ButtonComponent {
 		...ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {},
 		alias: "aria-describedby"
 	});
+	ariaExpanded = input(void 0, {
+		...ngDevMode ? { debugName: "ariaExpanded" } : /* istanbul ignore next */ {},
+		alias: "aria-expanded"
+	});
+	ariaControls = input(void 0, {
+		...ngDevMode ? { debugName: "ariaControls" } : /* istanbul ignore next */ {},
+		alias: "aria-controls"
+	});
+	renderer = inject(Renderer2);
 	buttonEl = viewChild("buttonEl", ...ngDevMode ? [{ debugName: "buttonEl" }] : /* istanbul ignore next */ []);
+	ownedAria = /* @__PURE__ */ new Set();
 	clicked = output();
 	isDisabled = computed(() => this.disabled() || this.loading(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
 	hostClasses = computed(() => buttonClasses({
@@ -10903,6 +10913,15 @@ var ButtonComponent = class ButtonComponent {
 		loading: this.loading(),
 		disabled: this.isDisabled()
 	}), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const button = this.buttonEl()?.nativeElement;
+			if (!button) return;
+			const expanded = this.ariaExpanded();
+			this.reflectAria(button, "aria-expanded", expanded === void 0 ? void 0 : String(expanded));
+			this.reflectAria(button, "aria-controls", this.ariaControls() || void 0);
+		});
+	}
 	handleClick(event) {
 		if (this.isDisabled()) {
 			event.preventDefault();
@@ -10913,6 +10932,12 @@ var ButtonComponent = class ButtonComponent {
 	focus() {
 		this.buttonEl()?.nativeElement.focus();
 	}
+	reflectAria(button, name, value) {
+		if (value !== void 0) {
+			this.renderer.setAttribute(button, name, value);
+			this.ownedAria.add(name);
+		} else if (this.ownedAria.delete(name)) this.renderer.removeAttribute(button, name);
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.3",
@@ -11018,6 +11043,20 @@ var ButtonComponent = class ButtonComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			ariaExpanded: {
+				classPropertyName: "ariaExpanded",
+				publicName: "aria-expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaControls: {
+				classPropertyName: "ariaControls",
+				publicName: "aria-controls",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: { clicked: "clicked" },
@@ -11070,6 +11109,7 @@ i0.ɵɵngDeclareClassMetadata({
 			styles: [":host{display:inline-flex}.ea-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;min-height:var(--ea-button-min-height, 2.5em);padding:var(--ea-button-padding, .5em 1em);white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--ea-button-radius, var(--radius-md));transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-button:has(.ea-button__icon):has(.ea-button__label:empty){padding:var(--ea-button-padding, .5em)}.ea-button--2xs{font-size:var(--ea-button-font-size, var(--font-size-2xs))}.ea-button--xs{font-size:var(--ea-button-font-size, var(--font-size-xs))}.ea-button--sm{font-size:var(--ea-button-font-size, var(--font-size-sm))}.ea-button--md{font-size:var(--ea-button-font-size, var(--font-size-md))}.ea-button--lg{font-size:var(--ea-button-font-size, var(--font-size-lg))}.ea-button--xl{font-size:var(--ea-button-font-size, var(--font-size-xl))}.ea-button--primary{background-color:var(--ea-button-background-color, var(--color-brand-default));border-color:var(--ea-button-border-color, var(--color-brand-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-brand-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-brand-hover)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-brand-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-brand-active)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--secondary{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, var(--color-border-strong));color:var(--ea-button-color, var(--color-text-primary))}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-neutral-500)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost{background-color:var(--ea-button-background-color, transparent);border-color:var(--ea-button-border-color, transparent);color:var(--ea-button-color, var(--color-text-primary))}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-state-hover)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-primary)))}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-state-active)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-primary)))}.ea-button--danger{background-color:var(--ea-button-background-color, var(--color-error-default));border-color:var(--ea-button-border-color, var(--color-error-default));color:var(--ea-button-color, var(--color-neutral-0))}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-neutral-0)))}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, var(--color-error-700)));border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, var(--color-error-700)));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-neutral-0)));filter:brightness(.9)}.ea-button--link{min-height:var(--ea-button-min-height, 0);padding:var(--ea-button-padding, 0);border-color:var(--ea-button-border-color, transparent);background-color:var(--ea-button-background-color, transparent);color:var(--ea-button-color, var(--color-text-link))}.ea-button--link:has(.ea-button__icon):has(.ea-button__label:empty){padding:var(--ea-button-padding, 0)}.ea-button--link:hover:not(.ea-button--disabled){border-color:var(--ea-button-border-color-hover, var(--ea-button-border-color, transparent));background-color:var(--ea-button-background-color-hover, var(--ea-button-background-color, transparent));color:var(--ea-button-color-hover, var(--ea-button-color, var(--color-text-link-hover)))}.ea-button--link:active:not(.ea-button--disabled){border-color:var(--ea-button-border-color-active, var(--ea-button-border-color, transparent));background-color:var(--ea-button-background-color-active, var(--ea-button-background-color, transparent));color:var(--ea-button-color-active, var(--ea-button-color, var(--color-text-link-hover)))}.ea-button--link:hover:not(.ea-button--disabled) .ea-button__label,.ea-button--link:focus-visible .ea-button__label{text-decoration:underline}.ea-button--full-width{width:100%}.ea-button--align-start{justify-content:flex-start}.ea-button--align-end{justify-content:flex-end}.ea-button--uppercase{text-transform:uppercase}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:default;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:.5em}.ea-button__content--hidden{visibility:hidden}.ea-button__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-button__label{display:inline-flex;align-items:center}.ea-button__label:empty{display:none}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@media(prefers-reduced-motion:reduce){.ea-button__spinner svg{animation-duration:2.5s}}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		variant: [{
 			type: i0.Input,
@@ -11175,6 +11215,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		ariaExpanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-expanded",
+				required: false
+			}]
+		}],
+		ariaControls: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-controls",
+				required: false
+			}]
+		}],
 		buttonEl: [{
 			type: i0.ViewChild,
 			args: ["buttonEl", { isSignal: true }]
@@ -12086,6 +12142,164 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
+const TYPE_MS = 45;
+const HOLD_MS = 2500;
+const ROTATE_MS = 6e3;
+function sameHints(a, b) {
+	return a.length === b.length && a.every((hint, i) => hint === b[i]);
+}
+function injectTypedPlaceholder(hints) {
+	const zone = inject(NgZone);
+	const injector = inject(Injector);
+	const list = computed(() => hints(), {
+		...ngDevMode ? { debugName: "list" } : /* istanbul ignore next */ {},
+		equal: sameHints
+	});
+	const started = signal(false, ...ngDevMode ? [{ debugName: "started" }] : /* istanbul ignore next */ []);
+	const reducedMotion = signal(false, ...ngDevMode ? [{ debugName: "reducedMotion" }] : /* istanbul ignore next */ []);
+	const index = signal(0, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	const typedLength = signal(0, ...ngDevMode ? [{ debugName: "typedLength" }] : /* istanbul ignore next */ []);
+	const hint = computed(() => {
+		const all = list();
+		return all.length > 0 ? all[index() % all.length] : "";
+	}, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	const text = computed(() => hint().slice(0, typedLength()), ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	const typing = computed(() => typedLength() < hint().length, ...ngDevMode ? [{ debugName: "typing" }] : /* istanbul ignore next */ []);
+	const animating = computed(() => started() && !reducedMotion() && list().length > 0, ...ngDevMode ? [{ debugName: "animating" }] : /* istanbul ignore next */ []);
+	afterNextRender(() => started.set(true), { injector });
+	effect((onCleanup) => {
+		const all = list();
+		if (!started() || all.length === 0) return;
+		const motion = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
+		let timer;
+		const schedule = (step, ms) => {
+			timer = zone.runOutsideAngular(() => setTimeout(step, ms));
+		};
+		const advance = () => index.update((i) => (i + 1) % all.length);
+		const rotate = () => {
+			advance();
+			schedule(rotate, ROTATE_MS);
+		};
+		const type = () => {
+			typedLength.update((length) => length + 1);
+			if (typedLength() < hint().length) {
+				schedule(type, TYPE_MS);
+				return;
+			}
+			schedule(() => {
+				advance();
+				typedLength.set(0);
+				schedule(type, TYPE_MS);
+			}, HOLD_MS);
+		};
+		const run = () => {
+			clearTimeout(timer);
+			const reduced = motion?.matches ?? false;
+			reducedMotion.set(reduced);
+			index.set(0);
+			typedLength.set(0);
+			if (reduced) schedule(rotate, ROTATE_MS);
+			else type();
+		};
+		motion?.addEventListener("change", run);
+		untracked(run);
+		onCleanup(() => {
+			clearTimeout(timer);
+			motion?.removeEventListener("change", run);
+		});
+	});
+	return {
+		animating,
+		hint,
+		text,
+		typing
+	};
+}
+var TypedPlaceholderComponent = class TypedPlaceholderComponent {
+	text = input.required(...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	typing = input.required(...ngDevMode ? [{ debugName: "typing" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: TypedPlaceholderComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: TypedPlaceholderComponent,
+		isStandalone: true,
+		selector: "ea-typed-placeholder",
+		inputs: {
+			text: {
+				classPropertyName: "text",
+				publicName: "text",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			typing: {
+				classPropertyName: "typing",
+				publicName: "typing",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"aria-hidden": "true",
+				"dir": "auto"
+			},
+			properties: { "class.ea-typed-placeholder--blinking": "!typing()" }
+		},
+		ngImport: i0,
+		template: `{{ text() }}<span class="ea-typed-placeholder__cursor"></span>`,
+		isInline: true,
+		styles: [":host{opacity:1;font-style:italic;color:var(--color-text-tertiary);overflow:hidden;display:block;line-height:var(--line-height-normal);text-align:start;text-indent:0;text-transform:none;letter-spacing:normal;word-spacing:normal;font-family:var(--font-family-sans);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-typed-placeholder__cursor{margin-inline-start:.0625em;border-inline-start:max(.0625em,var(--border-width-thin)) solid}:host(.ea-typed-placeholder--blinking) .ea-typed-placeholder__cursor{animation:ea-typed-placeholder-blink 1.06s step-end infinite}@keyframes ea-typed-placeholder-blink{50%{opacity:0}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: TypedPlaceholderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ea-typed-placeholder",
+			template: `{{ text() }}<span class="ea-typed-placeholder__cursor"></span>`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"aria-hidden": "true",
+				dir: "auto",
+				"[class.ea-typed-placeholder--blinking]": "!typing()"
+			},
+			styles: [":host{opacity:1;font-style:italic;color:var(--color-text-tertiary);overflow:hidden;display:block;line-height:var(--line-height-normal);text-align:start;text-indent:0;text-transform:none;letter-spacing:normal;word-spacing:normal;font-family:var(--font-family-sans);pointer-events:none;-webkit-user-select:none;user-select:none}.ea-typed-placeholder__cursor{margin-inline-start:.0625em;border-inline-start:max(.0625em,var(--border-width-thin)) solid}:host(.ea-typed-placeholder--blinking) .ea-typed-placeholder__cursor{animation:ea-typed-placeholder-blink 1.06s step-end infinite}@keyframes ea-typed-placeholder-blink{50%{opacity:0}}\n"]
+		}]
+	}],
+	propDecorators: {
+		text: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "text",
+				required: true
+			}]
+		}],
+		typing: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "typing",
+				required: true
+			}]
+		}]
+	}
+});
 var EyeOffIconComponent = class EyeOffIconComponent extends IconComponentBase {
 	static slug = "eye-off";
 	static category = "feather";
@@ -12297,6 +12511,7 @@ var InputComponent = class InputComponent {
 	});
 	type = input("text", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	typedPlaceholder = input([], ...ngDevMode ? [{ debugName: "typedPlaceholder" }] : /* istanbul ignore next */ []);
 	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
 	keepIcon = input(true, ...ngDevMode ? [{ debugName: "keepIcon" }] : /* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
@@ -12327,6 +12542,9 @@ var InputComponent = class InputComponent {
 	onChange = () => {};
 	onTouched = () => {};
 	isDisabled = computed(() => this.disabled() || this._formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	typed = injectTypedPlaceholder(this.typedPlaceholder);
+	typedPlaceholderShown = computed(() => this.typed.animating() && !this.value(), ...ngDevMode ? [{ debugName: "typedPlaceholderShown" }] : /* istanbul ignore next */ []);
+	nativePlaceholder = computed(() => this.typedPlaceholder().length > 0 ? this.typed.hint() : this.placeholder(), ...ngDevMode ? [{ debugName: "nativePlaceholder" }] : /* istanbul ignore next */ []);
 	effectiveType = computed(() => this.type() === "password" && this.passwordVisible() ? "text" : this.type(), ...ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []);
 	errorState = injectControlErrorState({
 		errorMsg: this.errorMsg,
@@ -12534,6 +12752,13 @@ var InputComponent = class InputComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			typedPlaceholder: {
+				classPropertyName: "typedPlaceholder",
+				publicName: "typedPlaceholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			icon: {
 				classPropertyName: "icon",
 				publicName: "icon",
@@ -12707,8 +12932,8 @@ var InputComponent = class InputComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [required]=\"required()\"\n      [optional]=\"optional()\" />\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.max-width]=\"numberWidth()\">\n    @if ((keepIcon() || !value()) && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.spellcheck]=\"spellcheck() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n      [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n      [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.role]=\"role() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n      [attr.aria-controls]=\"ariaControls() ?? null\"\n      [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n      [attr.aria-autocomplete]=\"ariaAutocomplete() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"onClearMousedown($event)\"\n        (click)=\"clear()\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
-		styles: [".ea-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-input-field--2xs{font-size:var(--font-size-2xs)}.ea-input-field--xs{font-size:var(--font-size-xs)}.ea-input-field--sm{font-size:var(--font-size-sm)}.ea-input-field--md{font-size:var(--font-size-md)}.ea-input-field--lg{font-size:var(--font-size-lg)}.ea-input-field--xl{font-size:var(--font-size-xl)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--focused{border-color:var(--ea-input-border-color-focus, var(--color-border-default));outline:none;box-shadow:var(--ea-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-input-wrapper--error.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:default}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--readonly button{cursor:default}.ea-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:1em;color:var(--color-text-secondary)}.ea-input-wrapper__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__password-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__password-toggle:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:default}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"],
+		template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [required]=\"required()\"\n      [optional]=\"optional()\" />\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.max-width]=\"numberWidth()\">\n    @if ((keepIcon() || !value()) && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <span class=\"ea-input-wrapper__control\">\n      <input\n        #inputEl\n        class=\"ea-input\"\n        dir=\"auto\"\n        [class.ea-input--typed-placeholder]=\"typedPlaceholderShown()\"\n        [id]=\"id()\"\n        [type]=\"effectiveType()\"\n        [placeholder]=\"nativePlaceholder()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"value()\"\n        [attr.autocomplete]=\"autocomplete() ?? null\"\n        [attr.spellcheck]=\"spellcheck() ?? null\"\n        [attr.list]=\"list() ?? null\"\n        [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n        [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n        [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n        [attr.maxlength]=\"maxLength() ?? null\"\n        [attr.minlength]=\"minLength() ?? null\"\n        [attr.role]=\"role() ?? null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n        [attr.aria-controls]=\"ariaControls() ?? null\"\n        [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n        [attr.aria-autocomplete]=\"ariaAutocomplete() ?? null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (input)=\"handleInput($event)\"\n        (keydown)=\"handleKeydown($event)\"\n        (wheel)=\"handleWheel($event)\"\n        (focus)=\"handleFocus($event)\"\n        (blur)=\"handleBlur($event)\" />\n\n      @if (typedPlaceholderShown()) {\n        <ea-typed-placeholder\n          class=\"ea-input-wrapper__typed-placeholder\"\n          [text]=\"typed.text()\"\n          [typing]=\"typed.typing()\" />\n      }\n    </span>\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"onClearMousedown($event)\"\n        (click)=\"clear()\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+		styles: [".ea-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-input-field--2xs{font-size:var(--font-size-2xs)}.ea-input-field--xs{font-size:var(--font-size-xs)}.ea-input-field--sm{font-size:var(--font-size-sm)}.ea-input-field--md{font-size:var(--font-size-md)}.ea-input-field--lg{font-size:var(--font-size-lg)}.ea-input-field--xl{font-size:var(--font-size-xl)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--focused{border-color:var(--ea-input-border-color-focus, var(--color-border-default));outline:none;box-shadow:var(--ea-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-input-wrapper--error.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:default}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--readonly button{cursor:default}.ea-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__control{position:relative;display:flex;flex:1;min-width:0}.ea-input-wrapper__typed-placeholder{position:absolute;inset:0;padding:.5em 0;white-space:pre}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:1em;color:var(--color-text-secondary)}.ea-input-wrapper__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__password-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__password-toggle:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-input--typed-placeholder::placeholder{color:transparent}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:default}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"],
 		dependencies: [
 			{
 				kind: "component",
@@ -12764,6 +12989,12 @@ var InputComponent = class InputComponent {
 				],
 				exportAs: ["ngComponentOutlet"]
 			},
+			{
+				kind: "component",
+				type: TypedPlaceholderComponent,
+				selector: "ea-typed-placeholder",
+				inputs: ["text", "typing"]
+			},
 			{
 				kind: "component",
 				type: XIconComponent,
@@ -12790,6 +13021,7 @@ i0.ɵɵngDeclareClassMetadata({
 				FieldMessagesComponent,
 				NgClass,
 				NgComponentOutlet,
+				TypedPlaceholderComponent,
 				XIconComponent
 			],
 			providers: [{
@@ -12797,8 +13029,8 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => InputComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [required]=\"required()\"\n      [optional]=\"optional()\" />\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.max-width]=\"numberWidth()\">\n    @if ((keepIcon() || !value()) && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.spellcheck]=\"spellcheck() ?? null\"\n      [attr.list]=\"list() ?? null\"\n      [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n      [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n      [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n      [attr.maxlength]=\"maxLength() ?? null\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.role]=\"role() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n      [attr.aria-controls]=\"ariaControls() ?? null\"\n      [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n      [attr.aria-autocomplete]=\"ariaAutocomplete() ?? null\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKeydown($event)\"\n      (wheel)=\"handleWheel($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"onClearMousedown($event)\"\n        (click)=\"clear()\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
-			styles: [".ea-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-input-field--2xs{font-size:var(--font-size-2xs)}.ea-input-field--xs{font-size:var(--font-size-xs)}.ea-input-field--sm{font-size:var(--font-size-sm)}.ea-input-field--md{font-size:var(--font-size-md)}.ea-input-field--lg{font-size:var(--font-size-lg)}.ea-input-field--xl{font-size:var(--font-size-xl)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--focused{border-color:var(--ea-input-border-color-focus, var(--color-border-default));outline:none;box-shadow:var(--ea-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-input-wrapper--error.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:default}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--readonly button{cursor:default}.ea-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:1em;color:var(--color-text-secondary)}.ea-input-wrapper__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__password-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__password-toggle:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:default}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"]
+			template: "<div class=\"ea-input-field ea-input-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [required]=\"required()\"\n      [optional]=\"optional()\" />\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.max-width]=\"numberWidth()\">\n    @if ((keepIcon() || !value()) && icon(); as leadingIcon) {\n      <span\n        class=\"ea-input-wrapper__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"leadingIcon\" />\n      </span>\n    }\n\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <span class=\"ea-input-wrapper__control\">\n      <input\n        #inputEl\n        class=\"ea-input\"\n        dir=\"auto\"\n        [class.ea-input--typed-placeholder]=\"typedPlaceholderShown()\"\n        [id]=\"id()\"\n        [type]=\"effectiveType()\"\n        [placeholder]=\"nativePlaceholder()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [value]=\"value()\"\n        [attr.autocomplete]=\"autocomplete() ?? null\"\n        [attr.spellcheck]=\"spellcheck() ?? null\"\n        [attr.list]=\"list() ?? null\"\n        [attr.min]=\"type() === 'number' ? (min() ?? null) : null\"\n        [attr.max]=\"type() === 'number' ? (max() ?? null) : null\"\n        [attr.step]=\"type() === 'number' ? (step() ?? null) : null\"\n        [attr.maxlength]=\"maxLength() ?? null\"\n        [attr.minlength]=\"minLength() ?? null\"\n        [attr.role]=\"role() ?? null\"\n        [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n        [attr.aria-expanded]=\"ariaExpanded() ?? null\"\n        [attr.aria-controls]=\"ariaControls() ?? null\"\n        [attr.aria-activedescendant]=\"ariaActivedescendant() ?? null\"\n        [attr.aria-autocomplete]=\"ariaAutocomplete() ?? null\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"\n          showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n        \"\n        (input)=\"handleInput($event)\"\n        (keydown)=\"handleKeydown($event)\"\n        (wheel)=\"handleWheel($event)\"\n        (focus)=\"handleFocus($event)\"\n        (blur)=\"handleBlur($event)\" />\n\n      @if (typedPlaceholderShown()) {\n        <ea-typed-placeholder\n          class=\"ea-input-wrapper__typed-placeholder\"\n          [text]=\"typed.text()\"\n          [typing]=\"typed.typing()\" />\n      }\n    </span>\n\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__clear\"\n        [attr.aria-label]=\"i18n.messages().input.clear\"\n        (mousedown)=\"onClearMousedown($event)\"\n        (click)=\"clear()\">\n        <ea-icon-x class=\"ea-input-wrapper__clear-icon\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"\n          passwordVisible()\n            ? i18n.messages().input.hidePassword\n            : i18n.messages().input.showPassword\n        \"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  <ea-field-messages\n    [id]=\"id()\"\n    [error]=\"errorText()\"\n    [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
+			styles: [".ea-input-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-input-field--2xs{font-size:var(--font-size-2xs)}.ea-input-field--xs{font-size:var(--font-size-xs)}.ea-input-field--sm{font-size:var(--font-size-sm)}.ea-input-field--md{font-size:var(--font-size-md)}.ea-input-field--lg{font-size:var(--font-size-lg)}.ea-input-field--xl{font-size:var(--font-size-xl)}.ea-input-wrapper{display:flex;align-items:center;gap:.5em;min-height:2.5em;padding:0 .75em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--focused{border-color:var(--ea-input-border-color-focus, var(--color-border-default));outline:none;box-shadow:var(--ea-input-shadow-focus, var(--shadow-focus-ring))}@media(forced-colors:active){.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-input-wrapper--error.ea-input-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:default}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-input-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper--readonly button{cursor:default}.ea-input-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__control{position:relative;display:flex;flex:1;min-width:0}.ea-input-wrapper__typed-placeholder{position:absolute;inset:0;padding:.5em 0;white-space:pre}.ea-input-wrapper__icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:1em;color:var(--color-text-secondary)}.ea-input-wrapper__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__clear>*{font-size:1.25em}.ea-input-wrapper__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__clear:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__clear:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-input-wrapper__password-toggle>*{font-size:1.25em}.ea-input-wrapper__password-toggle:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-input-wrapper__password-toggle:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-input-wrapper__password-toggle:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-input-wrapper__password-toggle:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-input-wrapper__password-toggle:disabled{cursor:default;opacity:.5}.ea-input-wrapper__password-toggle{color:var(--ea-input-toggle-color, var(--color-text-secondary))}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1em;height:1em;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;padding:.5em 0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-input--typed-placeholder::placeholder{color:transparent}.ea-input:-webkit-autofill,.ea-input:autofill{-webkit-text-fill-color:var(--color-text-primary);-webkit-box-shadow:0 0 0 1000px var(--color-bg-base) inset;transition:background-color 5000s ease-in-out 0s}.ea-input:disabled{cursor:default}.ea-input::-webkit-calendar-picker-indicator,.ea-input::-webkit-credentials-auto-fill-button,.ea-input::-webkit-contacts-auto-fill-button,.ea-input::-webkit-strong-password-auto-fill-button,.ea-input::-webkit-caps-lock-indicator{display:none!important;visibility:hidden;pointer-events:none;width:0;height:0}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -12903,6 +13135,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		typedPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "typedPlaceholder",
+				required: false
+			}]
+		}],
 		icon: [{
 			type: i0.Input,
 			args: [{
@@ -13383,6 +13623,7 @@ var CommandPaletteComponent = class CommandPaletteComponent {
 					"aria-autocomplete",
 					"type",
 					"placeholder",
+					"typedPlaceholder",
 					"icon",
 					"keepIcon",
 					"size",
@@ -21718,7 +21959,9 @@ var FileUploaderComponent = class FileUploaderComponent {
 					"aria-label",
 					"aria-current",
 					"aria-labelledby",
-					"aria-describedby"
+					"aria-describedby",
+					"aria-expanded",
+					"aria-controls"
 				],
 				outputs: ["clicked"]
 			},
@@ -25526,7 +25769,9 @@ var PaginatorComponent = class PaginatorComponent {
 					"aria-label",
 					"aria-current",
 					"aria-labelledby",
-					"aria-describedby"
+					"aria-describedby",
+					"aria-expanded",
+					"aria-controls"
 				],
 				outputs: ["clicked"]
 			},
@@ -30977,6 +31222,7 @@ var TextareaComponent = class TextareaComponent {
 		alias: "aria-label"
 	});
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	typedPlaceholder = input([], ...ngDevMode ? [{ debugName: "typedPlaceholder" }] : /* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
 	hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
 	errorMsg = input(void 0, ...ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []);
@@ -30998,6 +31244,9 @@ var TextareaComponent = class TextareaComponent {
 	onChange = () => {};
 	onTouched = () => {};
 	isDisabled = computed(() => this.disabled() || this._formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	typed = injectTypedPlaceholder(this.typedPlaceholder);
+	typedPlaceholderShown = computed(() => this.typed.animating() && !this.value(), ...ngDevMode ? [{ debugName: "typedPlaceholderShown" }] : /* istanbul ignore next */ []);
+	nativePlaceholder = computed(() => this.typedPlaceholder().length > 0 ? this.typed.hint() : this.placeholder(), ...ngDevMode ? [{ debugName: "nativePlaceholder" }] : /* istanbul ignore next */ []);
 	errorState = injectControlErrorState({
 		errorMsg: this.errorMsg,
 		errorMessages: this.errorMessages
@@ -31130,6 +31379,13 @@ var TextareaComponent = class TextareaComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			typedPlaceholder: {
+				classPropertyName: "typedPlaceholder",
+				publicName: "typedPlaceholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			size: {
 				classPropertyName: "size",
 				publicName: "size",
@@ -31247,8 +31503,8 @@ var TextareaComponent = class TextareaComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [required]=\"required()\"\n      [optional]=\"optional()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  <ng-template #messages>\n    <ea-field-messages\n      [id]=\"id()\"\n      [error]=\"errorText()\"\n      [hint]=\"showHint() ? hint() : null\" />\n  </ng-template>\n\n  @if (showCount()) {\n    <div class=\"ea-textarea-field__footer\">\n      <ng-container [ngTemplateOutlet]=\"messages\" />\n      <span\n        class=\"ea-textarea-field__count\"\n        [id]=\"id() + '-count'\">\n        {{ countText() }}\n      </span>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"messages\" />\n  }\n</div>\n",
-		styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:default}\n"],
+		template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [required]=\"required()\"\n      [optional]=\"optional()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [class.ea-textarea--typed-placeholder]=\"typedPlaceholderShown()\"\n      [id]=\"id()\"\n      [placeholder]=\"nativePlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n\n    @if (typedPlaceholderShown()) {\n      <ea-typed-placeholder\n        class=\"ea-textarea-wrapper__typed-placeholder\"\n        [text]=\"typed.text()\"\n        [typing]=\"typed.typing()\" />\n    }\n  </div>\n\n  <ng-template #messages>\n    <ea-field-messages\n      [id]=\"id()\"\n      [error]=\"errorText()\"\n      [hint]=\"showHint() ? hint() : null\" />\n  </ng-template>\n\n  @if (showCount()) {\n    <div class=\"ea-textarea-field__footer\">\n      <ng-container [ngTemplateOutlet]=\"messages\" />\n      <span\n        class=\"ea-textarea-field__count\"\n        [id]=\"id() + '-count'\">\n        {{ countText() }}\n      </span>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"messages\" />\n  }\n</div>\n",
+		styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.ea-textarea-wrapper{position:relative;display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-textarea-wrapper__typed-placeholder{position:absolute;inset:0;padding:.75em;white-space:pre-wrap;overflow-wrap:break-word}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-textarea--typed-placeholder::placeholder{color:transparent}.ea-textarea:disabled{cursor:default}\n"],
 		dependencies: [
 			{
 				kind: "component",
@@ -31289,6 +31545,12 @@ var TextareaComponent = class TextareaComponent {
 					"ngTemplateOutlet",
 					"ngTemplateOutletInjector"
 				]
+			},
+			{
+				kind: "component",
+				type: TypedPlaceholderComponent,
+				selector: "ea-typed-placeholder",
+				inputs: ["text", "typing"]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -31307,7 +31569,8 @@ i0.ɵɵngDeclareClassMetadata({
 				FieldLabelComponent,
 				FieldMessagesComponent,
 				NgClass,
-				NgTemplateOutlet
+				NgTemplateOutlet,
+				TypedPlaceholderComponent
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [{
@@ -31315,8 +31578,8 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => TextareaComponent),
 				multi: true
 			}],
-			template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [required]=\"required()\"\n      [optional]=\"optional()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  <ng-template #messages>\n    <ea-field-messages\n      [id]=\"id()\"\n      [error]=\"errorText()\"\n      [hint]=\"showHint() ? hint() : null\" />\n  </ng-template>\n\n  @if (showCount()) {\n    <div class=\"ea-textarea-field__footer\">\n      <ng-container [ngTemplateOutlet]=\"messages\" />\n      <span\n        class=\"ea-textarea-field__count\"\n        [id]=\"id() + '-count'\">\n        {{ countText() }}\n      </span>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"messages\" />\n  }\n</div>\n",
-			styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.ea-textarea-wrapper{display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:default}\n"]
+			template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n  @if (label(); as labelText) {\n    <ea-field-label\n      [text]=\"labelText\"\n      [icon]=\"labelIcon()\"\n      [help]=\"labelHelp()\"\n      [forId]=\"id()\"\n      [required]=\"required()\"\n      [optional]=\"optional()\" />\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\"\n    [style.resize]=\"resize()\"\n    [style.min-height]=\"minHeightStyle()\"\n    [style.max-height.px]=\"maxHeight() ?? null\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      dir=\"auto\"\n      [class.ea-textarea--typed-placeholder]=\"typedPlaceholderShown()\"\n      [id]=\"id()\"\n      [placeholder]=\"nativePlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n\n    @if (typedPlaceholderShown()) {\n      <ea-typed-placeholder\n        class=\"ea-textarea-wrapper__typed-placeholder\"\n        [text]=\"typed.text()\"\n        [typing]=\"typed.typing()\" />\n    }\n  </div>\n\n  <ng-template #messages>\n    <ea-field-messages\n      [id]=\"id()\"\n      [error]=\"errorText()\"\n      [hint]=\"showHint() ? hint() : null\" />\n  </ng-template>\n\n  @if (showCount()) {\n    <div class=\"ea-textarea-field__footer\">\n      <ng-container [ngTemplateOutlet]=\"messages\" />\n      <span\n        class=\"ea-textarea-field__count\"\n        [id]=\"id() + '-count'\">\n        {{ countText() }}\n      </span>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"messages\" />\n  }\n</div>\n",
+			styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.ea-textarea-wrapper{position:relative;display:flex;min-width:12em;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-textarea-wrapper__typed-placeholder{position:absolute;inset:0;padding:.75em;white-space:pre-wrap;overflow-wrap:break-word}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-textarea--typed-placeholder::placeholder{color:transparent}.ea-textarea:disabled{cursor:default}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -31372,6 +31635,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		typedPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "typedPlaceholder",
+				required: false
+			}]
+		}],
 		size: [{
 			type: i0.Input,
 			args: [{