@mhmo91/schmancy 0.8.6 → 0.9.3

package/dist/input-BnfTpRN9.js

@@ -0,0 +1,364 @@
+import { i as e } from "./tailwind.mixin-BIVhjNvD.js";
+import { SchmancyFormField as t } from "./mixins.js";
+import { distinctUntilChanged as n, filter as r, fromEvent as i, map as a, takeUntil as o } from "rxjs";
+import { customElement as s, property as c, query as l, state as u } from "lit/decorators.js";
+import { LitElement as d, html as f, nothing as p } from "lit";
+import { createRef as m, ref as h } from "lit/directives/ref.js";
+import { when as g } from "lit/directives/when.js";
+import { ifDefined as _ } from "lit/directives/if-defined.js";
+var v, y = class extends t("/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n:host{width:100%;min-width:calc(var(--spacing,.25rem) * 0);box-sizing:border-box;max-width:100%;display:block}.date-input-container{width:100%;min-width:0;width:100%!important;max-width:100%!important}input{appearance:none;border-radius:8px;width:-webkit-fill-available;font-size:16px;transition:box-shadow .3s cubic-bezier(.34,1.56,.64,1),border-color .2s}input:focus{box-shadow:0 0 0 1px var(--schmancy-sys-color-secondary-default), 0 0 16px -4px var(--schmancy-sys-color-secondary-default)}@supports (color:color-mix(in lab, red, red)){input:focus{box-shadow:0 0 0 1px var(--schmancy-sys-color-secondary-default), 0 0 16px -4px color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 20%, transparent)}}input[aria-invalid=true]{box-shadow:0 0 12px -4px var(--schmancy-sys-color-error-default)}@supports (color:color-mix(in lab, red, red)){input[aria-invalid=true]{box-shadow:0 0 12px -4px color-mix(in srgb, var(--schmancy-sys-color-error-default) 15%, transparent)}}input[aria-invalid=true]:focus{box-shadow:0 0 0 1px var(--schmancy-sys-color-error-default), 0 0 16px -4px var(--schmancy-sys-color-error-default)}@supports (color:color-mix(in lab, red, red)){input[aria-invalid=true]:focus{box-shadow:0 0 0 1px var(--schmancy-sys-color-error-default), 0 0 16px -4px color-mix(in srgb, var(--schmancy-sys-color-error-default) 25%, transparent)}}@media (prefers-reduced-motion:reduce){input{transition:none}}input[type=number]::-webkit-inner-spin-button{appearance:none;margin:calc(var(--spacing,.25rem) * 0)}input[type=number]::-webkit-outer-spin-button{appearance:none;margin:calc(var(--spacing,.25rem) * 0)}input[type=number]{appearance:textfield}input:-webkit-autofill{animation-name:onAutoFillStart;-webkit-box-shadow:0 0 0 30px var(--schmancy-sys-color-surface-highest) inset!important;-webkit-text-fill-color:var(--schmancy-sys-color-surface-on)!important}input:autofill{background-color:var(--schmancy-sys-color-surface-highest)!important;color:var(--schmancy-sys-color-surface-on)!important}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{appearance:none;width:100%;line-height:inherit;border-radius:8px;min-width:100%;max-width:100%;margin:0;display:block;overflow:hidden;border-radius:8px!important;width:100%!important}input::-webkit-datetime-edit{align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex}input::-webkit-datetime-edit-fields-wrapper{align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex}input::-webkit-datetime-edit{flex:1;width:100%}input::-webkit-datetime-edit-fields-wrapper{flex:1;justify-content:space-between;width:100%}input::-webkit-datetime-edit-text{align-items:center;display:flex}input::-webkit-datetime-edit-day-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-month-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-year-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-hour-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-minute-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-second-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-millisecond-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-meridiem-field{flex-shrink:0;padding:0 2px}input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=month]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=week]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}@-moz-document url-prefix(){input[type=date],input[type=datetime-local],input[type=time]{min-height:inherit}}@supports (-webkit-touch-callout:none){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{appearance:none;border-radius:0;width:-webkit-fill-available!important;width:fill-available!important;padding-left:12px!important;padding-right:12px!important}input::-webkit-datetime-edit{width:100%!important;padding-left:0!important;padding-right:0!important}input::-webkit-datetime-edit-fields-wrapper{width:100%!important;margin:0!important;padding:0!important}}") {
+	static {
+		v = this;
+	}
+	constructor(...e) {
+		super(...e), this.value = "", this.type = "text", this.placeholder = "", this.clickable = !1, this.spellcheck = !1, this.align = "left", this.step = "any", this.autofocus = !1, this.autocomplete = "on", this.tabIndex = 0, this.size = "md", this.validateOn = "touched", this.inputRef = m(), this.isAutofilled = !1, this.touched = !1, this.dirty = !1, this.submitted = !1, this.defaultValue = "";
+	}
+	static {
+		this._idCounter = 0;
+	}
+	static {
+		this.shadowRootOptions = {
+			...d.shadowRootOptions,
+			delegatesFocus: !0
+		};
+	}
+	willUpdate(e) {
+		this.id ||= "sch-input-" + v._idCounter++, super.willUpdate(e);
+	}
+	updated(e) {
+		super.updated(e), e.has("value") && (this.value !== this.defaultValue && (this.dirty = !0), this.validateInput()), !this.hasUpdated && e.has("value") && (this.defaultValue = this.value);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.defaultValue = this.value, this.setupFormIntegration(), this.setupExternalLabelAssociation();
+	}
+	setupFormIntegration() {
+		this.form && (this.formResetObserver = new MutationObserver((e) => {
+			for (let t of e) t.type === "attributes" && t.attributeName === "reset" && this.resetToDefault();
+		}), this.formResetObserver.observe(this.form, {
+			attributes: !0,
+			childList: !1,
+			subtree: !1
+		}), i(this.form, "reset").pipe(o(this.disconnecting)).subscribe(() => {
+			this.resetToDefault();
+		}), i(this.form, "submit").pipe(o(this.disconnecting)).subscribe(() => {
+			this.submitted = !0, this.validateInput(!0);
+		}));
+	}
+	setupExternalLabelAssociation() {
+		if (this.id) {
+			let e = () => {
+				document.querySelectorAll(`label[for="${this.id}"]`).forEach((e) => {
+					i(e, "click").pipe(o(this.disconnecting)).subscribe(() => {
+						this.focus();
+					});
+				});
+			};
+			document.readyState === "complete" ? e() : i(document, "DOMContentLoaded").pipe(o(this.disconnecting)).subscribe(e);
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.formResetObserver && this.formResetObserver.disconnect();
+	}
+	resetToDefault() {
+		this.value = this.defaultValue, this.touched = !1, this.dirty = !1, this.submitted = !1, this.error = !1, this.validationMessage = "", this.dispatchEvent(new CustomEvent("reset", { bubbles: !0 }));
+	}
+	shouldShowValidation(e = !1) {
+		if (e) return !0;
+		switch (this.validateOn) {
+			case "always": return !0;
+			case "touched":
+			default: return this.touched;
+			case "dirty": return this.dirty;
+			case "submitted": return this.submitted;
+		}
+	}
+	validateInput(e = !1) {
+		if (this.disabled) return;
+		let t = this.shouldShowValidation(e), n = this.inputElement?.validity ?? {
+			badInput: !1,
+			customError: !1,
+			patternMismatch: !1,
+			rangeOverflow: !1,
+			rangeUnderflow: !1,
+			stepMismatch: !1,
+			tooLong: !1,
+			tooShort: !1,
+			typeMismatch: !1,
+			valid: !0,
+			valueMissing: !1
+		}, r = !n.valid && !n.customError;
+		t && r ? (this.error = !0, this.validationMessage = this.inputElement?.validationMessage || "") : n.valid ? (this.error = !1, n.customError || (this.validationMessage = "")) : t || (this.error = !1);
+	}
+	checkValidity() {
+		let e = this.inputRef.value?.checkValidity() ?? !0, t = super.checkValidity();
+		return e && t;
+	}
+	reportValidity() {
+		this.touched = !0, this.submitted = !0;
+		let e = this.inputRef.value?.reportValidity() ?? !0;
+		this.validateInput(!0);
+		let t = super.reportValidity();
+		return e && t;
+	}
+	setCustomValidity(e) {
+		this.inputRef.value && this.inputRef.value.setCustomValidity(e), super.setCustomValidity(e), this.error = e !== "" && this.shouldShowValidation();
+	}
+	firstUpdated() {
+		this.autofocus && setTimeout(() => {
+			this.focus();
+		}, 0), this.setupInputEvents(), this.setupFocusBlurEvents(), this.setupAutofillDetection(), this.setupEnterKeyEvents();
+	}
+	setupInputEvents() {
+		i(this.inputElement, "input").pipe(a((e) => {
+			e.stopPropagation();
+			let t = e;
+			return {
+				value: e.target.value,
+				inputType: t.inputType,
+				data: t.data,
+				isComposing: t.isComposing,
+				originalEvent: e
+			};
+		}), o(this.disconnecting)).subscribe((e) => {
+			this.value = e.value, this.dirty = this.value !== this.defaultValue;
+			let t = new CustomEvent("input", {
+				detail: { value: e.value },
+				bubbles: !0,
+				composed: !0
+			});
+			Object.defineProperties(t, {
+				inputType: { value: e.inputType },
+				data: { value: e.data },
+				isComposing: { value: e.isComposing }
+			}), this.dispatchEvent(t), this.validateInput();
+		}), i(this.inputElement, "change").pipe(a((e) => (e.stopPropagation(), e.target.value)), n(), o(this.disconnecting)).subscribe((e) => {
+			this.value = e, this.dirty = this.value !== this.defaultValue, this.emitChange({ value: e }), this.validateInput();
+		});
+	}
+	setupFocusBlurEvents() {
+		i(this.inputElement, "focus").pipe(o(this.disconnecting)).subscribe((e) => {
+			let t = new CustomEvent("focus", {
+				bubbles: e.bubbles,
+				cancelable: e.cancelable,
+				composed: e.composed
+			});
+			Object.defineProperties(t, { relatedTarget: { value: e.relatedTarget } }), this.dispatchEvent(t);
+		}), i(this.inputElement, "blur").pipe(o(this.disconnecting)).subscribe((e) => {
+			this.touched = !0, this.disabled || this.validateInput();
+			let t = new CustomEvent("blur", {
+				bubbles: e.bubbles,
+				cancelable: e.cancelable,
+				composed: e.composed
+			});
+			Object.defineProperties(t, { relatedTarget: { value: e.relatedTarget } }), this.dispatchEvent(t);
+		});
+	}
+	setupAutofillDetection() {
+		i(this.inputElement, "animationstart").pipe(r((e) => e.animationName === "onAutoFillStart"), o(this.disconnecting)).subscribe((e) => {
+			let { value: t } = e.target;
+			this.value = t, this.isAutofilled = !0, this.dirty = this.value !== this.defaultValue, this.dispatchEvent(new CustomEvent("autofill", {
+				detail: { value: t },
+				bubbles: !0,
+				composed: !0
+			})), this.emitChange({ value: t });
+		}), i(this.inputElement, "animationstart").pipe(r((e) => e.animationName === "onAutoFillCancel"), o(this.disconnecting)).subscribe(() => {
+			this.isAutofilled = !1;
+		});
+	}
+	setupEnterKeyEvents() {
+		i(this.inputElement, "keydown").pipe(r((e) => e.key === "Enter"), o(this.disconnecting)).subscribe((e) => {
+			let { value: t } = e.target;
+			this.value !== t && (this.value = t, this.dirty = this.value !== this.defaultValue), this.inputElement.blur();
+			let n = new CustomEvent("enter", {
+				detail: { value: this.value },
+				bubbles: !0,
+				composed: !0
+			});
+			Object.defineProperties(n, {
+				key: { value: "Enter" },
+				code: { value: "Enter" },
+				keyCode: { value: 13 },
+				which: { value: 13 }
+			}), this.dispatchEvent(n);
+		});
+	}
+	select() {
+		return this.inputRef.value?.select();
+	}
+	getValidity() {
+		return this.inputRef.value?.validity;
+	}
+	setSelectionRange(e, t, n) {
+		this.inputRef.value?.setSelectionRange(e, t, n);
+	}
+	get selectionStart() {
+		return this.inputRef.value?.selectionStart ?? null;
+	}
+	get selectionEnd() {
+		return this.inputRef.value?.selectionEnd ?? null;
+	}
+	get selectionDirection() {
+		return this.inputRef.value?.selectionDirection ?? null;
+	}
+	setRangeText(e, t, n, r) {
+		t !== void 0 && n !== void 0 ? this.inputRef.value?.setRangeText(e, t, n, r) : this.inputRef.value?.setRangeText(e);
+	}
+	focus(e) {
+		this.inputRef.value?.focus(e), this.dispatchEvent(new Event("focus"));
+	}
+	click() {
+		this.inputRef.value?.click(), this.dispatchEvent(new Event("click"));
+	}
+	blur() {
+		this.inputRef.value?.blur(), this.dispatchEvent(new Event("blur"));
+	}
+	render() {
+		let { height: e, padding: t, fontSize: n } = (() => {
+			switch (this.size) {
+				case "xxs": return {
+					height: "24px",
+					padding: "0 8px",
+					fontSize: "0.625rem"
+				};
+				case "xs": return {
+					height: "32px",
+					padding: "0 12px",
+					fontSize: "0.75rem"
+				};
+				case "sm": return {
+					height: "40px",
+					padding: "0 16px",
+					fontSize: "0.875rem"
+				};
+				case "lg": return {
+					height: "56px",
+					padding: "0 20px",
+					fontSize: "1rem"
+				};
+				default: return {
+					height: "48px",
+					padding: "0 16px",
+					fontSize: "0.875rem"
+				};
+			}
+		})(), r = [
+			"date",
+			"datetime-local",
+			"time",
+			"month",
+			"week"
+		].includes(this.type), i = {
+			"block w-full min-w-0 rounded-2xl border bg-surface-containerLowest text-surface-on": !0,
+			"border-outline": !this.error,
+			"border-error-default": this.error,
+			"outline-secondary-default focus:outline-1 focus:border-secondary-default": !0,
+			"disabled:opacity-40 disabled:cursor-not-allowed": !0,
+			"placeholder:text-muted": !0,
+			"ring-0 focus:ring-1 focus:ring-inset": !0,
+			"focus:ring-secondary-default": !this.error,
+			"focus:ring-error-default": this.error,
+			"caret-transparent focus:outline-hidden cursor-pointer select-none": this.readonly,
+			"cursor-pointer": this.clickable,
+			"text-left": this.align === "left" || r,
+			"text-center": this.align === "center" && !r,
+			"text-right": this.align === "right" && !r,
+			autofilled: this.isAutofilled
+		}, a = {
+			"block mb-1 font-medium": !0,
+			"opacity-40": this.disabled,
+			"text-[10px]": this.size === "xxs",
+			"text-xs": this.size === "xs",
+			"text-sm": this.size === "sm",
+			"text-base": this.size === "md",
+			"text-lg": this.size === "lg",
+			"text-primary-default": !this.error,
+			"text-error-default": this.error
+		}, o = {
+			height: e,
+			padding: t,
+			fontSize: n,
+			lineHeight: e
+		};
+		return f`
+			<div class="w-full min-w-0 ${r ? "date-input-container" : ""}">
+				${g(this.label, () => f`
+						<label
+							for=${this.id}
+							class=${this.classMap(a)}
+						>
+							${this.label}
+						</label>
+					`)}
+
+				<input
+					${h(this.inputRef)}
+					id=${this.id}
+					name=${this.name}
+					class=${this.classMap(i)}
+					style=${this.styleMap(o)}
+					.value=${this.value}
+					.type=${this.type}
+					.autocomplete=${this.autocomplete}
+					.spellcheck=${this.spellcheck}
+					placeholder=${this.placeholder}
+					inputmode=${_(this.inputmode)}
+					pattern=${_(this.pattern)}
+					.step=${this.step ?? ""}
+					minlength=${_(this.minlength)}
+					maxlength=${_(this.maxlength)}
+					min=${_(this.min)}
+					max=${_(this.max)}
+					list=${_(this.list)}
+					?required=${this.required}
+					?disabled=${this.disabled}
+					?readonly=${this.readonly}
+					aria-invalid=${this.error ? "true" : "false"}
+					aria-required=${this.required ? "true" : "false"}
+					aria-labelledby=${this.label ? `label-${this.id}` : p}
+					aria-describedby=${this.hint || this.validationMessage ? `hint-${this.id}` : p}
+					aria-label=${_(this.label ? void 0 : this.placeholder || "Input")}
+				/>
+
+				${g(this.hint || this.error && this.validationMessage, () => f`
+						<div
+							id="hint-${this.id}"
+							class="mt-1 text-sm ${this.error ? "text-error-default" : "text-surface-onVariant"}"
+						>
+							${this.error && this.validationMessage ? this.validationMessage : this.hint}
+						</div>
+					`)}
+			</div>
+		`;
+	}
+};
+e([c({
+	type: String,
+	reflect: !0
+})], y.prototype, "value", void 0), e([c({ reflect: !0 })], y.prototype, "type", void 0), e([c()], y.prototype, "placeholder", void 0), e([c({
+	type: String,
+	reflect: !0
+})], y.prototype, "pattern", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "clickable", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "spellcheck", void 0), e([c({
+	type: String,
+	reflect: !0
+})], y.prototype, "align", void 0), e([c()], y.prototype, "inputmode", void 0), e([c({
+	type: Number,
+	reflect: !0
+})], y.prototype, "minlength", void 0), e([c({ type: Number })], y.prototype, "maxlength", void 0), e([c()], y.prototype, "min", void 0), e([c()], y.prototype, "max", void 0), e([c({ reflect: !0 })], y.prototype, "step", void 0), e([c({ type: Boolean })], y.prototype, "autofocus", void 0), e([c({
+	type: String,
+	reflect: !0
+})], y.prototype, "autocomplete", void 0), e([c({
+	type: Number,
+	reflect: !0
+})], y.prototype, "tabIndex", void 0), e([c({
+	type: String,
+	reflect: !0
+})], y.prototype, "size", void 0), e([c({ type: String })], y.prototype, "validateOn", void 0), e([c({ type: String })], y.prototype, "list", void 0), e([l("input")], y.prototype, "inputElement", void 0), e([u()], y.prototype, "isAutofilled", void 0), e([u()], y.prototype, "touched", void 0), e([u()], y.prototype, "dirty", void 0), e([u()], y.prototype, "submitted", void 0), e([u()], y.prototype, "defaultValue", void 0);
+var b = y = v = e([s("schmancy-input")], y), x = class extends y {};
+x = e([s("sch-input")], x);
+export { b as n, x as t };

package/dist/input-BnfTpRN9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-BnfTpRN9.js","names":[],"sources":["../src/input/input.scss?inline","../src/input/input.ts"],"sourcesContent":["  @reference \"tailwindcss\";\n\n:host {\n\t@apply block w-full min-w-0;\n\t/* Ensure no constraints on mobile */\n\tmax-width: 100%;\n\tbox-sizing: border-box;\n}\n\n/* Date input container needs special handling on mobile */\n.date-input-container {\n\t@apply w-full;\n\t/* Explicit width for mobile Safari */\n\twidth: 100% !important;\n\tmax-width: 100% !important;\n\tmin-width: 0;\n}\n\n/* Reset native input styles for consistency */\ninput {\n\t/* Remove all native styling */\n\t@apply appearance-none rounded-[8px];\n\t/* Prevent Safari zoom on focus */\n\tfont-size: 16px;\n\twidth: -webkit-fill-available;\n\t/* Ensure border radius is applied */\n\tborder-radius: 8px;\n\t/* Smooth transitions for luminous focus */\n\ttransition:\n\t\tbox-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),\n\t\tborder-color 200ms ease;\n}\n\n/* Luminous focus glow — light-based depth on focus */\ninput:focus {\n\tbox-shadow:\n\t\t0 0 0 1px var(--schmancy-sys-color-secondary-default),\n\t\t0 0 16px -4px color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 20%, transparent);\n}\n\n/* Luminous error glow — red glow on error focus */\ninput[aria-invalid=\"true\"] {\n\tbox-shadow: 0 0 12px -4px color-mix(in srgb, var(--schmancy-sys-color-error-default) 15%, transparent);\n}\ninput[aria-invalid=\"true\"]:focus {\n\tbox-shadow:\n\t\t0 0 0 1px var(--schmancy-sys-color-error-default),\n\t\t0 0 16px -4px color-mix(in srgb, var(--schmancy-sys-color-error-default) 25%, transparent);\n}\n\n@media (prefers-reduced-motion: reduce) {\n\tinput { transition: none; }\n}\n\n/* Remove number input spinners */\ninput[type='number']::-webkit-inner-spin-button,\ninput[type='number']::-webkit-outer-spin-button {\n\t-webkit-appearance: none;\n\tappearance: none;\n\t@apply m-0;\n}\n\ninput[type='number'] {\n\t-moz-appearance: textfield;\n\tappearance: textfield;\n}\n\n/* Autofill styling */\n@keyframes onAutoFillStart {\n\tfrom {}\n\tto {}\n}\n\ninput:-webkit-autofill {\n\tanimation-name: onAutoFillStart;\n\t/* Use box-shadow trick to override autofill background */\n\t-webkit-box-shadow: 0 0 0 30px var(--schmancy-sys-color-surface-highest) inset !important;\n\t-webkit-text-fill-color: var(--schmancy-sys-color-surface-on) !important;\n}\n\n/* Simplified autofill for all browsers */\ninput:autofill {\n\tbackground-color: var(--schmancy-sys-color-surface-highest) !important;\n\tcolor: var(--schmancy-sys-color-surface-on) !important;\n}\n\n/* Date and datetime inputs need special handling */\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"time\"],\ninput[type=\"month\"],\ninput[type=\"week\"] {\n\t/* Ensure consistent height and padding */\n\t@apply block w-full rounded-[8px];\n\t/* Reset WebKit styling */\n\t-webkit-appearance: none;\n\tappearance: none;\n\t/* Ensure text doesn't get cut off */\n\tline-height: inherit;\n\t/* Force full width on mobile */\n\twidth: 100% !important;\n\tmin-width: 100%;\n\tmax-width: 100%;\n\t/* Remove any default margins */\n\tmargin: 0;\n\t/* Force border radius */\n\tborder-radius: 8px !important;\n\toverflow: hidden;\n}\n\n/* WebKit date/time edit container - this is what needs centering */\ninput::-webkit-datetime-edit,\ninput::-webkit-datetime-edit-fields-wrapper {\n\t/* Center the date/time fields vertically */\n\tdisplay: flex;\n\talign-items: center;\n\theight: 100%;\n\t/* Ensure full width on mobile */\n\twidth: 100%;\n\tpadding: 0;\n\tmargin: 0;\n}\n\ninput::-webkit-datetime-edit {\n\t/* Ensure the edit container fills available space */\n\tflex: 1;\n\twidth: 100%;\n}\n\ninput::-webkit-datetime-edit-fields-wrapper {\n\t/* Make fields wrapper expand */\n\tflex: 1;\n\twidth: 100%;\n\tjustify-content: space-between;\n}\n\ninput::-webkit-datetime-edit-text {\n\t/* Ensure separators are also centered */\n\tdisplay: flex;\n\talign-items: center;\n}\n\n/* Individual date fields */\ninput::-webkit-datetime-edit-day-field,\ninput::-webkit-datetime-edit-month-field,\ninput::-webkit-datetime-edit-year-field,\ninput::-webkit-datetime-edit-hour-field,\ninput::-webkit-datetime-edit-minute-field,\ninput::-webkit-datetime-edit-second-field,\ninput::-webkit-datetime-edit-millisecond-field,\ninput::-webkit-datetime-edit-meridiem-field {\n\t/* Ensure fields don't shrink */\n\tflex-shrink: 0;\n\tpadding: 0 2px;\n}\n\n/* Safari date input calendar icon */\ninput[type=\"date\"]::-webkit-calendar-picker-indicator,\ninput[type=\"datetime-local\"]::-webkit-calendar-picker-indicator,\ninput[type=\"time\"]::-webkit-calendar-picker-indicator,\ninput[type=\"month\"]::-webkit-calendar-picker-indicator,\ninput[type=\"week\"]::-webkit-calendar-picker-indicator {\n\t/* Make the calendar icon more subtle */\n\topacity: 0.5;\n\tcursor: pointer;\n}\n\n/* Firefox date input styling */\n@-moz-document url-prefix() {\n\tinput[type=\"date\"],\n\tinput[type=\"datetime-local\"],\n\tinput[type=\"time\"] {\n\t\t/* Firefox needs explicit height */\n\t\tmin-height: inherit;\n\t}\n}\n\n/* iOS Safari specific fixes */\n@supports (-webkit-touch-callout: none) {\n\tinput[type=\"date\"],\n\tinput[type=\"datetime-local\"],\n\tinput[type=\"time\"],\n\tinput[type=\"month\"],\n\tinput[type=\"week\"] {\n\t\t/* iOS Safari needs explicit width */\n\t\twidth: -webkit-fill-available !important;\n\t\twidth: fill-available !important;\n\t\t/* Remove default iOS styling */\n\t\t-webkit-appearance: none;\n\t\tappearance: none;\n\t\tborder-radius: 0;\n\t\t/* Remove default padding that causes issues */\n\t\tpadding-left: 12px !important;\n\t\tpadding-right: 12px !important;\n\t}\n\t\n\t/* Target shadow DOM elements on iOS */\n\tinput::-webkit-datetime-edit {\n\t\t/* Force full width */\n\t\twidth: 100% !important;\n\t\tpadding-left: 0 !important;\n\t\tpadding-right: 0 !important;\n\t}\n\t\n\tinput::-webkit-datetime-edit-fields-wrapper {\n\t\t/* Ensure proper spacing on mobile */\n\t\twidth: 100% !important;\n\t\tpadding: 0 !important;\n\t\tmargin: 0 !important;\n\t}\n}\n","import { html, LitElement, nothing, PropertyValueMap } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { when } from 'lit/directives/when.js'\nimport { distinctUntilChanged, filter, fromEvent, map, takeUntil } from 'rxjs'\n\nimport { SchmancyFormField } from '@mixins/index'\n\n// Import styles\nimport style from './input.scss?inline'\n\n// If you want to be form-associated, define the type on `ElementInternals`.\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input': SchmancyInput\n\t\t'sch-input': SchmancyInput\n\t}\n}\n\ntype EventDetails = {\n\tvalue: string\n}\n\n/**\n * Custom events the component may emit:\n * - 'input': on every keystroke\n * - 'change': on native blur/change\n * - 'enter': specifically when user presses Enter\n */\nexport type SchmancyInputInputEvent = CustomEvent<EventDetails>\nexport type SchmancyInputChangeEvent = CustomEvent<EventDetails>\nexport type SchmancyInputEnterEvent = CustomEvent<EventDetails>\n\n/**\n * Size variants for the input - M3 spec aligned.\n * - xxs: Ultra-compact (24dp) - for menu cards, compact UIs\n * - xs: Dense/compact (32dp) - M3 density -3\n * - sm: Default (40dp) - M3 density 0\n * - md: Standard (48dp) - M3 large\n * - lg: Extra large (56dp) - M3 extra large\n */\nexport type InputSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'\n\n/**\n * Enhanced version of the SchmancyInput component with improved form integration\n * and compatibility with legacy API.\n *\n * This component uses the native form association API and maintains parity with\n * native input behaviors while providing a stylish, accessible interface.\n *\n * @prop {string} name - Name attribute for form submission (inherited from FormFieldMixin)\n * @prop {string} label - Label text for the form field (inherited from FormFieldMixin)\n * @prop {boolean} required - Whether the field is required (inherited from FormFieldMixin)\n * @prop {boolean} disabled - Whether the field is disabled (inherited from FormFieldMixin)\n * @prop {boolean} readonly - Whether the field is read-only (inherited from FormFieldMixin)\n * @prop {boolean} error - Whether the field is in an error state (inherited from FormFieldMixin)\n * @prop {string} validationMessage - The validation message to display (inherited from FormFieldMixin)\n * @prop {string} hint - Optional hint text to display below the field (inherited from FormFieldMixin)\n */\n@customElement('schmancy-input')\nexport default class SchmancyInput extends SchmancyFormField(style) {\n\t// ----------------------------\n\t//  A) Public properties\n\t// ----------------------------\n\n\t/** Auto-incrementing counter for generating unique IDs */\n\tstatic _idCounter = 0\n\n\t/** Override value to be string only for input element */\n\t@property({ type: String, reflect: true })\n\tpublic override value = ''\n\n\n\t/**\n\t * The type of input. (e.g. 'text', 'password', 'email', etc.)\n\t */\n\t@property({ reflect: true })\n\tpublic type: HTMLInputElement['type'] = 'text'\n\n\n\t@property()\n\tpublic placeholder = ''\n\n\n\t/** Pattern validation attribute. */\n\t@property({ type: String, reflect: true })\n\tpublic pattern?: string\n\n\n\t/** If true, we visually show a pointer cursor even if readOnly. */\n\t@property({ type: Boolean, reflect: true }) public clickable = false\n\n\t/** Whether browser spellcheck is enabled. */\n\t@property({ type: Boolean, reflect: true })\n\tpublic spellcheck = false\n\n\t/**\n\t * Text alignment within the input.\n\t * - 'left' | 'center' | 'right'\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic align: 'left' | 'center' | 'right' = 'left'\n\n\t/** inputmode attribute (affects on-screen keyboards in mobile). */\n\t@property()\n\tpublic inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'\n\n\t@property({ type: Number, reflect: true })\n\tpublic minlength?: number\n\n\t@property({ type: Number })\n\tpublic maxlength?: number\n\n\t@property()\n\tpublic min?: string\n\n\t@property()\n\tpublic max?: string\n\n\t@property({ reflect: true })\n\tpublic step?: string = 'any'\n\n\t/** If true, auto-focus this input on first render. */\n\t@property({ type: Boolean })\n\tpublic autofocus = false\n\n\t/** Autocomplete/autofill hints. */\n\t@property({ type: String, reflect: true })\n\tpublic autocomplete: AutoFill = 'on'\n\n\t/**\n\t * tabIndex for focusing by tab key. Typically 0 or -1.\n\t */\n\t@property({ type: Number, reflect: true })\n\tpublic override tabIndex = 0\n\n\n\t/**\n\t * The size of the input.\n\t * - 'xxs': Ultra-compact size (24px) - for menu cards\n\t * - 'xs': Extra small, very compact size (32px)\n\t * - 'sm': Small, compact size (40px)\n\t * - 'md': Medium size (default) (48px)\n\t * - 'lg': Large size (56px)\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic size: InputSize = 'md'\n\n\t/**\n\t * Controls when validation should show.\n\t * - 'always' - Always show validation\n\t * - 'touched' - Only show after field has been focused and then blurred\n\t * - 'dirty' - Only show after value has changed\n\t * - 'submitted' - Only show after form submission\n\t */\n\t@property({ type: String })\n\tpublic validateOn: 'always' | 'touched' | 'dirty' | 'submitted' = 'touched'\n\n\t/**\n\t * For datalist support\n\t */\n\t@property({ type: String })\n\tpublic list?: string\n\n\n\t// ----------------------------\n\t//  B) Queries & Refs\n\t// ----------------------------\n\t@query('input') private inputElement!: HTMLInputElement\n\tprivate inputRef = createRef<HTMLInputElement>()\n\n\t// ----------------------------\n\t//  C) Internal States\n\t// ----------------------------\n\n\t/**\n\t * For integration with browser's autofill support\n\t */\n\t@state()\n\tprivate isAutofilled = false\n\n\t/**\n\t * Track user interaction state for validation\n\t */\n\t@state()\n\tprivate touched = false\n\n\t@state()\n\tprivate dirty = false\n\n\t@state()\n\tprivate submitted = false\n\n\t/**\n\t * Store the default value for reset behavior\n\t */\n\t@state()\n\tprivate defaultValue = ''\n\n\t// ----------------------------\n\t//  D) Form-associated logic\n\t// ----------------------------\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true, // so focus() goes to <input>\n\t}\n\n\tprivate formResetObserver?: MutationObserver\n\n\t/**\n\t * If user did not provide an ID, auto-generate one so <label for=\"...\">\n\t * and various aria-* attributes can reference it.\n\t */\n\tprotected override willUpdate(changedProps: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n\t\tif (!this.id) {\n\t\t\tthis.id = `sch-input-${SchmancyInput._idCounter++}`\n\t\t}\n\t\tsuper.willUpdate(changedProps)\n\t}\n\n\n\tprotected override updated(changedProps: Map<string, unknown>) {\n\t\tsuper.updated(changedProps)\n\n\t\t// Handle value changes\n\t\tif (changedProps.has('value')) {\n\t\t\t// If value changes from original default, mark as dirty\n\t\t\tif (this.value !== this.defaultValue) {\n\t\t\t\tthis.dirty = true\n\t\t\t}\n\n\t\t\t// Update validation state when value changes\n\t\t\tthis.validateInput()\n\t\t}\n\n\t\t// Store default value if this is the first update\n\t\tif (!this.hasUpdated && changedProps.has('value')) {\n\t\t\tthis.defaultValue = this.value\n\t\t}\n\t}\n\n\t/**\n\t * Connect to the closest form element and set up form integration\n\t */\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Store initial default value for form reset\n\t\tthis.defaultValue = this.value\n\n\t\t// Set up form integration\n\t\tthis.setupFormIntegration()\n\n\t\t// Setup for external label association\n\t\tthis.setupExternalLabelAssociation()\n\t}\n\n\t/**\n\t * Set up form integration with ElementInternals\n\t */\n\tprivate setupFormIntegration() {\n\t\tif (this.form) {\n\t\t\t// Listen for form reset events\n\t\t\tthis.formResetObserver = new MutationObserver(mutations => {\n\t\t\t\tfor (const mutation of mutations) {\n\t\t\t\t\tif (mutation.type === 'attributes' && mutation.attributeName === 'reset') {\n\t\t\t\t\t\tthis.resetToDefault()\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\n\t\t\t// Observe the form for reset events\n\t\t\tthis.formResetObserver.observe(this.form, {\n\t\t\t\tattributes: true,\n\t\t\t\tchildList: false,\n\t\t\t\tsubtree: false,\n\t\t\t})\n\n\t\t\t// Use RxJS for form reset events\n\t\t\tfromEvent(this.form, 'reset')\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(() => {\n\t\t\t\t\tthis.resetToDefault()\n\t\t\t\t})\n\n\t\t\t// Use RxJS for form submit events to mark field as submitted\n\t\t\tfromEvent(this.form, 'submit')\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(() => {\n\t\t\t\t\tthis.submitted = true\n\t\t\t\t\t// Validate on form submission\n\t\t\t\t\tthis.validateInput(true)\n\t\t\t\t})\n\t\t}\n\t}\n\n\t/**\n\t * Set up external label association for native HTML label support\n\t */\n\tprivate setupExternalLabelAssociation() {\n\t\tif (this.id) {\n\t\t\tconst setupLabelClickListener = () => {\n\t\t\t\tconst labels = document.querySelectorAll(`label[for=\"${this.id}\"]`)\n\t\t\t\tlabels.forEach(label => {\n\t\t\t\t\t// Use RxJS for label click events\n\t\t\t\t\tfromEvent(label, 'click')\n\t\t\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t\t\t.subscribe(() => {\n\t\t\t\t\t\t\tthis.focus()\n\t\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t}\n\n\t\t\t// Initialize after DOM is ready\n\t\t\tif (document.readyState === 'complete') {\n\t\t\t\tsetupLabelClickListener()\n\t\t\t} else {\n\t\t\t\t// Use RxJS for DOMContentLoaded event\n\t\t\t\tfromEvent(document, 'DOMContentLoaded')\n\t\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t\t.subscribe(setupLabelClickListener)\n\t\t\t}\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\n\t\t// Clean up the form observer\n\t\tif (this.formResetObserver) {\n\t\t\tthis.formResetObserver.disconnect()\n\t\t}\n\n\t\t// Note: RxJS subscriptions are automatically cleaned up via takeUntil(this.disconnecting)\n\t\t// No manual removeEventListener calls needed for RxJS-managed events\n\t}\n\n\t/**\n\t * Reset the input to its default state\n\t */\n\tprivate resetToDefault() {\n\t\tthis.value = this.defaultValue\n\t\tthis.touched = false\n\t\tthis.dirty = false\n\t\tthis.submitted = false\n\t\tthis.error = false\n\t\tthis.validationMessage = ''\n\t\tthis.dispatchEvent(new CustomEvent('reset', { bubbles: true }))\n\t}\n\n\t/**\n\t * Determines if validation errors should be shown based on current state\n\t * and validation strategy\n\t */\n\tprivate shouldShowValidation(forceValidation = false): boolean {\n\t\tif (forceValidation) return true\n\n\t\tswitch (this.validateOn) {\n\t\t\tcase 'always':\n\t\t\t\treturn true\n\t\t\tcase 'touched':\n\t\t\t\treturn this.touched\n\t\t\tcase 'dirty':\n\t\t\t\treturn this.dirty\n\t\t\tcase 'submitted':\n\t\t\t\treturn this.submitted\n\t\t\tdefault:\n\t\t\t\treturn this.touched\n\t\t}\n\t}\n\n\n\t/**\n\t * Validate input based on required, pattern, etc.\n\t * This mimics native validation behavior\n\t */\n\tprivate validateInput(forceValidation = false) {\n\t\t// Skip validation for disabled inputs\n\t\tif (this.disabled) return\n\n\t\t// Only show validation errors if we should based on the validation strategy\n\t\tconst shouldValidate = this.shouldShowValidation(forceValidation)\n\n\t\t// Get validity state from internal input if available\n\t\tconst validity: ValidityState = this.inputElement?.validity ?? {\n\t\t\tbadInput: false,\n\t\t\tcustomError: false,\n\t\t\tpatternMismatch: false,\n\t\t\trangeOverflow: false,\n\t\t\trangeUnderflow: false,\n\t\t\tstepMismatch: false,\n\t\t\ttooLong: false,\n\t\t\ttooShort: false,\n\t\t\ttypeMismatch: false,\n\t\t\tvalid: true,\n\t\t\tvalueMissing: false,\n\t\t}\n\n\t\t// Check if the input has an actual validation error (not a custom error)\n\t\tconst hasError = !validity.valid && !validity.customError\n\n\t\tif (shouldValidate && hasError) {\n\t\t\t// There's an error and we should show it\n\t\t\tthis.error = true\n\t\t\tthis.validationMessage = this.inputElement?.validationMessage || ''\n\t\t} else if (validity.valid) {\n\t\t\t// Input is valid, so clear the error state\n\t\t\tthis.error = false\n\n\t\t\t// Only clear validation message if there's no custom error\n\t\t\tif (!validity.customError) {\n\t\t\t\tthis.validationMessage = ''\n\t\t\t}\n\t\t} else if (!shouldValidate) {\n\t\t\t// We shouldn't show validation yet, so clear visual error state\n\t\t\tthis.error = false\n\t\t}\n\n\t\t// The mixin will handle updating internals based on error state\n\t}\n\n\t/**\n\t * Check validity without showing validation UI\n\t */\n\tpublic override checkValidity() {\n\t\t// Check internal input first\n\t\tconst inputValid = this.inputRef.value?.checkValidity() ?? true\n\n\t\t// Call parent implementation for basic validation\n\t\tconst parentValid = super.checkValidity()\n\n\t\treturn inputValid && parentValid\n\t}\n\n\t/**\n\t * Show validation UI and check validity\n\t */\n\tpublic override reportValidity() {\n\t\t// Mark as touched and submitted to show validation\n\t\tthis.touched = true\n\t\tthis.submitted = true\n\n\t\t// First check using native input\n\t\tconst inputValid = this.inputRef.value?.reportValidity() ?? true\n\n\t\t// Update our component's validation state with force=true\n\t\tthis.validateInput(true)\n\n\t\t// Call parent implementation\n\t\tconst parentValid = super.reportValidity()\n\n\t\treturn inputValid && parentValid\n\t}\n\n\t/**\n\t * Set a custom validation error message\n\t */\n\tpublic override setCustomValidity(message: string) {\n\t\t// Set on the native input\n\t\tif (this.inputRef.value) {\n\t\t\tthis.inputRef.value.setCustomValidity(message)\n\t\t}\n\n\t\t// Call parent implementation\n\t\tsuper.setCustomValidity(message)\n\t\t\n\t\t// Update error state based on validation strategy\n\t\tthis.error = message !== '' && this.shouldShowValidation()\n\t}\n\n\t// ----------------------------\n\t//  E) Lifecycle Hooks & Event Handlers\n\t// ----------------------------\n\tfirstUpdated() {\n\t\t// Autofocus if desired\n\t\tif (this.autofocus) {\n\t\t\t// Use setTimeout to match browser behavior - autofocus happens after initial rendering\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.focus()\n\t\t\t}, 0)\n\t\t}\n\n\t\t// Subscribe to input events\n\t\tthis.setupInputEvents()\n\t\tthis.setupFocusBlurEvents()\n\t\tthis.setupAutofillDetection()\n\t\tthis.setupEnterKeyEvents()\n\t}\n\n\t/**\n\t * Set up input event handling for value changes\n\t */\n\tprivate setupInputEvents() {\n\t\tfromEvent<InputEvent>(this.inputElement, 'input')\n\t\t\t.pipe(\n\t\t\t\tmap(ev => {\n\t\t\t\t\t// Stop native event from bubbling - we'll dispatch our own custom event\n\t\t\t\t\tev.stopPropagation()\n\n\t\t\t\t\t// Capture all input event properties for complete event forwarding\n\t\t\t\t\tconst inputEvent = ev as InputEvent\n\t\t\t\t\tconst target = ev.target as HTMLInputElement\n\t\t\t\t\treturn {\n\t\t\t\t\t\tvalue: target.value,\n\t\t\t\t\t\tinputType: inputEvent.inputType,\n\t\t\t\t\t\tdata: inputEvent.data,\n\t\t\t\t\t\tisComposing: inputEvent.isComposing,\n\t\t\t\t\t\toriginalEvent: ev,\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(eventData => {\n\t\t\t\t// Update component value\n\t\t\t\tthis.value = eventData.value\n\n\t\t\t\t// Mark as dirty when user types\n\t\t\t\tthis.dirty = this.value !== this.defaultValue\n\n\t\t\t\t// Fire custom 'input' event with extended details\n\t\t\t\tconst customEvent = new CustomEvent<EventDetails>('input', {\n\t\t\t\t\tdetail: { value: eventData.value },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\n\t\t\t\t// Add additional properties to match native events more closely\n\t\t\t\tObject.defineProperties(customEvent, {\n\t\t\t\t\tinputType: { value: eventData.inputType },\n\t\t\t\t\tdata: { value: eventData.data },\n\t\t\t\t\tisComposing: { value: eventData.isComposing },\n\t\t\t\t})\n\n\t\t\t\tthis.dispatchEvent(customEvent)\n\n\t\t\t\t// Run validation like native inputs do on input, but respect the validation strategy\n\t\t\t\tthis.validateInput()\n\t\t\t})\n\n\t\t// Subscribe to native change events (usually on blur)\n\t\tfromEvent<Event>(this.inputElement, 'change')\n\t\t\t.pipe(\n\t\t\t\tmap(ev => {\n\t\t\t\t\t// Stop native event from bubbling - we'll dispatch our own custom event\n\t\t\t\t\tev.stopPropagation()\n\t\t\t\t\treturn (ev.target as HTMLInputElement).value\n\t\t\t\t}),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dirty = this.value !== this.defaultValue\n\n\t\t\t\t// Fire regular change event using mixin helper\n\t\t\t\tthis.emitChange({ value })\n\n\t\t\t\t// Run validation on change like native inputs\n\t\t\t\tthis.validateInput()\n\t\t\t})\n\t}\n\n\t/**\n\t * Set up focus/blur event handling\n\t */\n\tprivate setupFocusBlurEvents() {\n\t\tfromEvent<FocusEvent>(this.inputElement, 'focus')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(ev => {\n\t\t\t\t// Create a custom focus event that includes standard props\n\t\t\t\tconst focusEvent = new CustomEvent('focus', {\n\t\t\t\t\tbubbles: ev.bubbles,\n\t\t\t\t\tcancelable: ev.cancelable,\n\t\t\t\t\tcomposed: ev.composed,\n\t\t\t\t})\n\n\t\t\t\t// Add focus-specific properties\n\t\t\t\tObject.defineProperties(focusEvent, {\n\t\t\t\t\trelatedTarget: { value: ev.relatedTarget },\n\t\t\t\t})\n\n\t\t\t\tthis.dispatchEvent(focusEvent)\n\t\t\t})\n\n\t\tfromEvent<FocusEvent>(this.inputElement, 'blur')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(ev => {\n\t\t\t\t// Mark as touched when field loses focus\n\t\t\t\tthis.touched = true\n\n\t\t\t\t// Run validation on blur like native inputs, respecting validation strategy\n\t\t\t\tif (!this.disabled) {\n\t\t\t\t\tthis.validateInput()\n\t\t\t\t}\n\n\t\t\t\t// Create a custom blur event that includes standard props\n\t\t\t\tconst blurEvent = new CustomEvent('blur', {\n\t\t\t\t\tbubbles: ev.bubbles,\n\t\t\t\t\tcancelable: ev.cancelable,\n\t\t\t\t\tcomposed: ev.composed,\n\t\t\t\t})\n\n\t\t\t\t// Add blur-specific properties\n\t\t\t\tObject.defineProperties(blurEvent, {\n\t\t\t\t\trelatedTarget: { value: ev.relatedTarget },\n\t\t\t\t})\n\n\t\t\t\tthis.dispatchEvent(blurEvent)\n\t\t\t})\n\t}\n\n\t/**\n\t * Set up autofill detection\n\t */\n\tprivate setupAutofillDetection() {\n\t\t// Detect autofill animation (Chrome, etc.)\n\t\tfromEvent<AnimationEvent>(this.inputElement, 'animationstart')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.animationName === 'onAutoFillStart'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(ev => {\n\t\t\t\tconst { value } = ev.target as HTMLInputElement\n\t\t\t\tthis.value = value\n\t\t\t\tthis.isAutofilled = true\n\t\t\t\tthis.dirty = this.value !== this.defaultValue\n\n\t\t\t\t// Dispatch autofill event for integration with autofill systems\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('autofill', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\n\t\t\t\t// Also propagate as a change event like browsers do\n\t\t\t\tthis.emitChange({ value })\n\t\t\t})\n\n\t\t// Detect end of autofill (Chrome)\n\t\tfromEvent<AnimationEvent>(this.inputElement, 'animationstart')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.animationName === 'onAutoFillCancel'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.isAutofilled = false\n\t\t\t})\n\t}\n\n\t/**\n\t * Set up enter key event handling\n\t */\n\tprivate setupEnterKeyEvents() {\n\t\t// Listen for Enter on keydown\n\t\tfromEvent<KeyboardEvent>(this.inputElement, 'keydown')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.key === 'Enter'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(ev => {\n\t\t\t\tconst { value } = ev.target as HTMLInputElement\n\t\t\t\t\n\t\t\t\t// Update value if changed\n\t\t\t\tif (this.value !== value) {\n\t\t\t\t\tthis.value = value\n\t\t\t\t\tthis.dirty = this.value !== this.defaultValue\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t// Blur the input to trigger change event naturally\n\t\t\t\t// This mimics what happens when you tab out of the field\n\t\t\t\tthis.inputElement.blur()\n\n\t\t\t\t// Dispatch enhanced enter event\n\t\t\t\tconst enterEvent = new CustomEvent<EventDetails>('enter', {\n\t\t\t\t\tdetail: { value: this.value },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\n\t\t\t\t// Add extra keyboard event props\n\t\t\t\tObject.defineProperties(enterEvent, {\n\t\t\t\t\tkey: { value: 'Enter' },\n\t\t\t\t\tcode: { value: 'Enter' },\n\t\t\t\t\tkeyCode: { value: 13 },\n\t\t\t\t\twhich: { value: 13 },\n\t\t\t\t})\n\n\t\t\t\tthis.dispatchEvent(enterEvent)\n\t\t\t})\n\t}\n\n\t// ----------------------------\n\t//  F) Utility Methods\n\t// ----------------------------\n\t/** Selects all text within the input. */\n\tpublic select() {\n\t\treturn this.inputRef.value?.select()\n\t}\n\n\t/** Returns the native validity state of the inner <input>. */\n\tpublic getValidity(): ValidityState | undefined {\n\t\treturn this.inputRef.value?.validity\n\t}\n\n\t/**\n\t * Sets the selection range. Mirrors native input.setSelectionRange\n\t */\n\tpublic setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none') {\n\t\tthis.inputRef.value?.setSelectionRange(start, end, direction)\n\t}\n\n\t/**\n\t * Returns the selected text within the input (start position)\n\t */\n\tpublic get selectionStart(): number | null {\n\t\treturn this.inputRef.value?.selectionStart ?? null\n\t}\n\n\t/**\n\t * Returns the selected text within the input (end position)\n\t */\n\tpublic get selectionEnd(): number | null {\n\t\treturn this.inputRef.value?.selectionEnd ?? null\n\t}\n\n\t/**\n\t * Returns the direction of selection\n\t */\n\tpublic get selectionDirection(): 'forward' | 'backward' | 'none' | null {\n\t\treturn this.inputRef.value?.selectionDirection ?? null\n\t}\n\n\t/**\n\t * Sets the range of text to be selected.\n\t */\n\tpublic setRangeText(\n\t\treplacement: string,\n\t\tstart?: number,\n\t\tend?: number,\n\t\tselectMode?: 'select' | 'start' | 'end' | 'preserve',\n\t) {\n\t\tif (start !== undefined && end !== undefined) {\n\t\t\tthis.inputRef.value?.setRangeText(replacement, start, end, selectMode)\n\t\t} else {\n\t\t\tthis.inputRef.value?.setRangeText(replacement)\n\t\t}\n\t}\n\n\t/**\n\t * Override to forward focus to the internal <input>.\n\t * Also dispatch a 'focus' event for external listeners.\n\t */\n\tpublic override focus(options?: FocusOptions) {\n\t\tthis.inputRef.value?.focus(options)\n\t\tthis.dispatchEvent(new Event('focus'))\n\t}\n\n\t/**\n\t * Override to forward clicks to the internal <input>.\n\t * Also dispatch a 'click' event for external listeners.\n\t */\n\tpublic override click() {\n\t\tthis.inputRef.value?.click()\n\t\tthis.dispatchEvent(new Event('click'))\n\t}\n\n\t/** Forward blur to the internal <input>. */\n\tpublic override blur() {\n\t\tthis.inputRef.value?.blur()\n\t\tthis.dispatchEvent(new Event('blur'))\n\t}\n\n\t// ----------------------------\n\t//  G) Rendering\n\t// ----------------------------\n\tprotected override render() {\n\t\t// Determine height and padding based on size - M3 spec aligned\n\t\tconst getHeightAndPadding = () => {\n\t\t\tswitch (this.size) {\n\t\t\t\tcase 'xxs':\n\t\t\t\t\t// Ultra-compact: 24dp height\n\t\t\t\t\treturn {\n\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\tpadding: '0 8px',\n\t\t\t\t\t\tfontSize: '0.625rem', // 10px\n\t\t\t\t\t}\n\t\t\t\tcase 'xs':\n\t\t\t\t\t// M3 dense: 32dp height\n\t\t\t\t\treturn {\n\t\t\t\t\t\theight: '32px',\n\t\t\t\t\t\tpadding: '0 12px',\n\t\t\t\t\t\tfontSize: '0.75rem', // 12px\n\t\t\t\t\t}\n\t\t\t\tcase 'sm':\n\t\t\t\t\t// M3 default: 40dp height\n\t\t\t\t\treturn {\n\t\t\t\t\t\theight: '40px',\n\t\t\t\t\t\tpadding: '0 16px',\n\t\t\t\t\t\tfontSize: '0.875rem', // 14px - M3 body-large\n\t\t\t\t\t}\n\t\t\t\tcase 'lg':\n\t\t\t\t\t// M3 extra large: 56dp height\n\t\t\t\t\treturn {\n\t\t\t\t\t\theight: '56px',\n\t\t\t\t\t\tpadding: '0 20px',\n\t\t\t\t\t\tfontSize: '1rem', // 16px\n\t\t\t\t\t}\n\t\t\t\tcase 'md':\n\t\t\t\tdefault:\n\t\t\t\t\t// M3 standard: 48dp height\n\t\t\t\t\treturn {\n\t\t\t\t\t\theight: '48px',\n\t\t\t\t\t\tpadding: '0 16px',\n\t\t\t\t\t\tfontSize: '0.875rem', // 14px - M3 body-large\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst { height, padding, fontSize } = getHeightAndPadding()\n\n\t\t// Check if it's a date-type input\n\t\tconst isDateType = ['date', 'datetime-local', 'time', 'month', 'week'].includes(this.type)\n\n\t\tconst inputClasses = {\n\t\t\t// Base styles - outlined style matching Revolut card field\n\t\t\t'block w-full min-w-0 rounded-2xl border bg-surface-containerLowest text-surface-on': true,\n\t\t\t// Border color\n\t\t\t'border-outline': !this.error,\n\t\t\t'border-error-default': this.error,\n\t\t\t// Focus styles\n\t\t\t'outline-secondary-default focus:outline-1 focus:border-secondary-default': true,\n\t\t\t// Disabled styles\n\t\t\t'disabled:opacity-40 disabled:cursor-not-allowed': true,\n\t\t\t// Placeholder\n\t\t\t'placeholder:text-muted': true,\n\t\t\t// Ring styles (subtle focus ring)\n\t\t\t'ring-0 focus:ring-1 focus:ring-inset': true,\n\t\t\t// Ring colors based on error state\n\t\t\t'focus:ring-secondary-default': !this.error,\n\t\t\t'focus:ring-error-default': this.error,\n\t\t\t// Readonly styles\n\t\t\t'caret-transparent focus:outline-hidden cursor-pointer select-none': this.readonly,\n\t\t\t'cursor-pointer': this.clickable,\n\t\t\t// Text alignment (date inputs always left-aligned)\n\t\t\t'text-left': this.align === 'left' || isDateType,\n\t\t\t'text-center': this.align === 'center' && !isDateType,\n\t\t\t'text-right': this.align === 'right' && !isDateType,\n\t\t\t// Autofill\n\t\t\tautofilled: this.isAutofilled,\n\t\t}\n\n\t\tconst labelClasses = {\n\t\t\t'block mb-1 font-medium': true,\n\t\t\t'opacity-40': this.disabled,\n\t\t\t'text-[10px]': this.size === 'xxs',\n\t\t\t'text-xs': this.size === 'xs',\n\t\t\t'text-sm': this.size === 'sm',\n\t\t\t'text-base': this.size === 'md',\n\t\t\t'text-lg': this.size === 'lg',\n\t\t\t'text-primary-default': !this.error,\n\t\t\t'text-error-default': this.error,\n\t\t}\n\n\t\tconst styles = {\n\t\t\theight,\n\t\t\tpadding,\n\t\t\tfontSize,\n\t\t\t// Ensure vertical centering for all input types\n\t\t\tlineHeight: height,\n\t\t}\n\n\t\t/**\n\t\t * - If `this.label` is present, we render a proper `<label for=\"${this.id}\">`.\n\t\t * - If not, we add an aria-label to the <input> for better accessibility.\n\t\t * - If there's a `hint`, we reference it via aria-describedby.\n\t\t * - If there's an error, we set aria-invalid and could set aria-errormessage.\n\t\t */\n\t\treturn html`\n\t\t\t<div class=\"w-full min-w-0 ${isDateType ? 'date-input-container' : ''}\">\n\t\t\t\t${when(\n\t\t\t\t\tthis.label,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tfor=${this.id}\n\t\t\t\t\t\t\tclass=${this.classMap(labelClasses)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${this.label}\n\t\t\t\t\t\t</label>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\n\t\t\t\t<input\n\t\t\t\t\t${ref(this.inputRef)}\n\t\t\t\t\tid=${this.id}\n\t\t\t\t\tname=${this.name}\n\t\t\t\t\tclass=${this.classMap(inputClasses)}\n\t\t\t\t\tstyle=${this.styleMap(styles)}\n\t\t\t\t\t.value=${this.value}\n\t\t\t\t\t.type=${this.type}\n\t\t\t\t\t.autocomplete=${this.autocomplete}\n\t\t\t\t\t.spellcheck=${this.spellcheck}\n\t\t\t\t\tplaceholder=${this.placeholder}\n\t\t\t\t\tinputmode=${ifDefined(this.inputmode)}\n\t\t\t\t\tpattern=${ifDefined(this.pattern)}\n\t\t\t\t\t.step=${this.step ?? ''}\n\t\t\t\t\tminlength=${ifDefined(this.minlength)}\n\t\t\t\t\tmaxlength=${ifDefined(this.maxlength)}\n\t\t\t\t\tmin=${ifDefined(this.min)}\n\t\t\t\t\tmax=${ifDefined(this.max)}\n\t\t\t\t\tlist=${ifDefined(this.list)}\n\t\t\t\t\t?required=${this.required}\n\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t?readonly=${this.readonly}\n\t\t\t\t\taria-invalid=${this.error ? 'true' : 'false'}\n\t\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\t\taria-labelledby=${this.label ? `label-${this.id}` : nothing}\n\t\t\t\t\taria-describedby=${this.hint || this.validationMessage ? `hint-${this.id}` : nothing}\n\t\t\t\t\taria-label=${ifDefined(!this.label ? this.placeholder || 'Input' : undefined)}\n\t\t\t\t/>\n\n\t\t\t\t${when(\n\t\t\t\t\tthis.hint || (this.error && this.validationMessage),\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tid=\"hint-${this.id}\"\n\t\t\t\t\t\t\tclass=\"mt-1 text-sm ${this.error ? 'text-error-default' : 'text-surface-onVariant'}\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${this.error && this.validationMessage ? this.validationMessage : this.hint}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\n/**\n * Register the component with the legacy tag name for backward compatibility\n * @prop {string} label - Label text for the form field (inherited from FormFieldMixin)\n * @prop {boolean} required - Whether the field is required (inherited from FormFieldMixin)\n * @prop {boolean} disabled - Whether the field is disabled (inherited from FormFieldMixin)\n * @prop {boolean} readonly - Whether the field is read-only (inherited from FormFieldMixin)\n * @prop {boolean} error - Whether the field is in an error state (inherited from FormFieldMixin)\n * @prop {string} validationMessage - The validation message to display (inherited from FormFieldMixin)\n * @prop {string} hint - Optional hint text to display below the field (inherited from FormFieldMixin)\n */\n@customElement('sch-input')\nexport class SchmancyInputCompat extends SchmancyInput {}\n"],"mappings":"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"}

package/dist/input-BwxwognS.cjs

@@ -0,0 +1,51 @@
+require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-DSuEu-y3.cjs`),t=require(`./mixins.cjs`);let n=require(`rxjs`),r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/ref.js`),o=require(`lit/directives/when.js`),s=require(`lit/directives/if-defined.js`);var c,l=class extends t.SchmancyFormField(`/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+:host{width:100%;min-width:calc(var(--spacing,.25rem) * 0);box-sizing:border-box;max-width:100%;display:block}.date-input-container{width:100%;min-width:0;width:100%!important;max-width:100%!important}input{appearance:none;border-radius:8px;width:-webkit-fill-available;font-size:16px;transition:box-shadow .3s cubic-bezier(.34,1.56,.64,1),border-color .2s}input:focus{box-shadow:0 0 0 1px var(--schmancy-sys-color-secondary-default), 0 0 16px -4px var(--schmancy-sys-color-secondary-default)}@supports (color:color-mix(in lab, red, red)){input:focus{box-shadow:0 0 0 1px var(--schmancy-sys-color-secondary-default), 0 0 16px -4px color-mix(in srgb, var(--schmancy-sys-color-secondary-default) 20%, transparent)}}input[aria-invalid=true]{box-shadow:0 0 12px -4px var(--schmancy-sys-color-error-default)}@supports (color:color-mix(in lab, red, red)){input[aria-invalid=true]{box-shadow:0 0 12px -4px color-mix(in srgb, var(--schmancy-sys-color-error-default) 15%, transparent)}}input[aria-invalid=true]:focus{box-shadow:0 0 0 1px var(--schmancy-sys-color-error-default), 0 0 16px -4px var(--schmancy-sys-color-error-default)}@supports (color:color-mix(in lab, red, red)){input[aria-invalid=true]:focus{box-shadow:0 0 0 1px var(--schmancy-sys-color-error-default), 0 0 16px -4px color-mix(in srgb, var(--schmancy-sys-color-error-default) 25%, transparent)}}@media (prefers-reduced-motion:reduce){input{transition:none}}input[type=number]::-webkit-inner-spin-button{appearance:none;margin:calc(var(--spacing,.25rem) * 0)}input[type=number]::-webkit-outer-spin-button{appearance:none;margin:calc(var(--spacing,.25rem) * 0)}input[type=number]{appearance:textfield}input:-webkit-autofill{animation-name:onAutoFillStart;-webkit-box-shadow:0 0 0 30px var(--schmancy-sys-color-surface-highest) inset!important;-webkit-text-fill-color:var(--schmancy-sys-color-surface-on)!important}input:autofill{background-color:var(--schmancy-sys-color-surface-highest)!important;color:var(--schmancy-sys-color-surface-on)!important}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{appearance:none;width:100%;line-height:inherit;border-radius:8px;min-width:100%;max-width:100%;margin:0;display:block;overflow:hidden;border-radius:8px!important;width:100%!important}input::-webkit-datetime-edit{align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex}input::-webkit-datetime-edit-fields-wrapper{align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex}input::-webkit-datetime-edit{flex:1;width:100%}input::-webkit-datetime-edit-fields-wrapper{flex:1;justify-content:space-between;width:100%}input::-webkit-datetime-edit-text{align-items:center;display:flex}input::-webkit-datetime-edit-day-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-month-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-year-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-hour-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-minute-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-second-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-millisecond-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-meridiem-field{flex-shrink:0;padding:0 2px}input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=month]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=week]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}@-moz-document url-prefix(){input[type=date],input[type=datetime-local],input[type=time]{min-height:inherit}}@supports (-webkit-touch-callout:none){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{appearance:none;border-radius:0;width:-webkit-fill-available!important;width:fill-available!important;padding-left:12px!important;padding-right:12px!important}input::-webkit-datetime-edit{width:100%!important;padding-left:0!important;padding-right:0!important}input::-webkit-datetime-edit-fields-wrapper{width:100%!important;margin:0!important;padding:0!important}}`){static{c=this}constructor(...e){super(...e),this.value=``,this.type=`text`,this.placeholder=``,this.clickable=!1,this.spellcheck=!1,this.align=`left`,this.step=`any`,this.autofocus=!1,this.autocomplete=`on`,this.tabIndex=0,this.size=`md`,this.validateOn=`touched`,this.inputRef=(0,a.createRef)(),this.isAutofilled=!1,this.touched=!1,this.dirty=!1,this.submitted=!1,this.defaultValue=``}static{this._idCounter=0}static{this.shadowRootOptions={...i.LitElement.shadowRootOptions,delegatesFocus:!0}}willUpdate(e){this.id||=`sch-input-`+ c._idCounter++,super.willUpdate(e)}updated(e){super.updated(e),e.has(`value`)&&(this.value!==this.defaultValue&&(this.dirty=!0),this.validateInput()),!this.hasUpdated&&e.has(`value`)&&(this.defaultValue=this.value)}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.setupFormIntegration(),this.setupExternalLabelAssociation()}setupFormIntegration(){this.form&&(this.formResetObserver=new MutationObserver(e=>{for(let t of e)t.type===`attributes`&&t.attributeName===`reset`&&this.resetToDefault()}),this.formResetObserver.observe(this.form,{attributes:!0,childList:!1,subtree:!1}),(0,n.fromEvent)(this.form,`reset`).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(()=>{this.resetToDefault()}),(0,n.fromEvent)(this.form,`submit`).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(()=>{this.submitted=!0,this.validateInput(!0)}))}setupExternalLabelAssociation(){if(this.id){let e=()=>{document.querySelectorAll(`label[for="${this.id}"]`).forEach(e=>{(0,n.fromEvent)(e,`click`).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(()=>{this.focus()})})};document.readyState===`complete`?e():(0,n.fromEvent)(document,`DOMContentLoaded`).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(e)}}disconnectedCallback(){super.disconnectedCallback(),this.formResetObserver&&this.formResetObserver.disconnect()}resetToDefault(){this.value=this.defaultValue,this.touched=!1,this.dirty=!1,this.submitted=!1,this.error=!1,this.validationMessage=``,this.dispatchEvent(new CustomEvent(`reset`,{bubbles:!0}))}shouldShowValidation(e=!1){if(e)return!0;switch(this.validateOn){case`always`:return!0;case`touched`:default:return this.touched;case`dirty`:return this.dirty;case`submitted`:return this.submitted}}validateInput(e=!1){if(this.disabled)return;let t=this.shouldShowValidation(e),n=this.inputElement?.validity??{badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1,valid:!0,valueMissing:!1},r=!n.valid&&!n.customError;t&&r?(this.error=!0,this.validationMessage=this.inputElement?.validationMessage||``):n.valid?(this.error=!1,n.customError||(this.validationMessage=``)):t||(this.error=!1)}checkValidity(){let e=this.inputRef.value?.checkValidity()??!0,t=super.checkValidity();return e&&t}reportValidity(){this.touched=!0,this.submitted=!0;let e=this.inputRef.value?.reportValidity()??!0;this.validateInput(!0);let t=super.reportValidity();return e&&t}setCustomValidity(e){this.inputRef.value&&this.inputRef.value.setCustomValidity(e),super.setCustomValidity(e),this.error=e!==``&&this.shouldShowValidation()}firstUpdated(){this.autofocus&&setTimeout(()=>{this.focus()},0),this.setupInputEvents(),this.setupFocusBlurEvents(),this.setupAutofillDetection(),this.setupEnterKeyEvents()}setupInputEvents(){(0,n.fromEvent)(this.inputElement,`input`).pipe((0,n.map)(e=>{e.stopPropagation();let t=e;return{value:e.target.value,inputType:t.inputType,data:t.data,isComposing:t.isComposing,originalEvent:e}}),(0,n.takeUntil)(this.disconnecting)).subscribe(e=>{this.value=e.value,this.dirty=this.value!==this.defaultValue;let t=new CustomEvent(`input`,{detail:{value:e.value},bubbles:!0,composed:!0});Object.defineProperties(t,{inputType:{value:e.inputType},data:{value:e.data},isComposing:{value:e.isComposing}}),this.dispatchEvent(t),this.validateInput()}),(0,n.fromEvent)(this.inputElement,`change`).pipe((0,n.map)(e=>(e.stopPropagation(),e.target.value)),(0,n.distinctUntilChanged)(),(0,n.takeUntil)(this.disconnecting)).subscribe(e=>{this.value=e,this.dirty=this.value!==this.defaultValue,this.emitChange({value:e}),this.validateInput()})}setupFocusBlurEvents(){(0,n.fromEvent)(this.inputElement,`focus`).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(e=>{let t=new CustomEvent(`focus`,{bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed});Object.defineProperties(t,{relatedTarget:{value:e.relatedTarget}}),this.dispatchEvent(t)}),(0,n.fromEvent)(this.inputElement,`blur`).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(e=>{this.touched=!0,this.disabled||this.validateInput();let t=new CustomEvent(`blur`,{bubbles:e.bubbles,cancelable:e.cancelable,composed:e.composed});Object.defineProperties(t,{relatedTarget:{value:e.relatedTarget}}),this.dispatchEvent(t)})}setupAutofillDetection(){(0,n.fromEvent)(this.inputElement,`animationstart`).pipe((0,n.filter)(e=>e.animationName===`onAutoFillStart`),(0,n.takeUntil)(this.disconnecting)).subscribe(e=>{let{value:t}=e.target;this.value=t,this.isAutofilled=!0,this.dirty=this.value!==this.defaultValue,this.dispatchEvent(new CustomEvent(`autofill`,{detail:{value:t},bubbles:!0,composed:!0})),this.emitChange({value:t})}),(0,n.fromEvent)(this.inputElement,`animationstart`).pipe((0,n.filter)(e=>e.animationName===`onAutoFillCancel`),(0,n.takeUntil)(this.disconnecting)).subscribe(()=>{this.isAutofilled=!1})}setupEnterKeyEvents(){(0,n.fromEvent)(this.inputElement,`keydown`).pipe((0,n.filter)(e=>e.key===`Enter`),(0,n.takeUntil)(this.disconnecting)).subscribe(e=>{let{value:t}=e.target;this.value!==t&&(this.value=t,this.dirty=this.value!==this.defaultValue),this.inputElement.blur();let n=new CustomEvent(`enter`,{detail:{value:this.value},bubbles:!0,composed:!0});Object.defineProperties(n,{key:{value:`Enter`},code:{value:`Enter`},keyCode:{value:13},which:{value:13}}),this.dispatchEvent(n)})}select(){return this.inputRef.value?.select()}getValidity(){return this.inputRef.value?.validity}setSelectionRange(e,t,n){this.inputRef.value?.setSelectionRange(e,t,n)}get selectionStart(){return this.inputRef.value?.selectionStart??null}get selectionEnd(){return this.inputRef.value?.selectionEnd??null}get selectionDirection(){return this.inputRef.value?.selectionDirection??null}setRangeText(e,t,n,r){t!==void 0&&n!==void 0?this.inputRef.value?.setRangeText(e,t,n,r):this.inputRef.value?.setRangeText(e)}focus(e){this.inputRef.value?.focus(e),this.dispatchEvent(new Event(`focus`))}click(){this.inputRef.value?.click(),this.dispatchEvent(new Event(`click`))}blur(){this.inputRef.value?.blur(),this.dispatchEvent(new Event(`blur`))}render(){let{height:e,padding:t,fontSize:n}=(()=>{switch(this.size){case`xxs`:return{height:`24px`,padding:`0 8px`,fontSize:`0.625rem`};case`xs`:return{height:`32px`,padding:`0 12px`,fontSize:`0.75rem`};case`sm`:return{height:`40px`,padding:`0 16px`,fontSize:`0.875rem`};case`lg`:return{height:`56px`,padding:`0 20px`,fontSize:`1rem`};default:return{height:`48px`,padding:`0 16px`,fontSize:`0.875rem`}}})(),r=[`date`,`datetime-local`,`time`,`month`,`week`].includes(this.type),c={"block w-full min-w-0 rounded-2xl border bg-surface-containerLowest text-surface-on":!0,"border-outline":!this.error,"border-error-default":this.error,"outline-secondary-default focus:outline-1 focus:border-secondary-default":!0,"disabled:opacity-40 disabled:cursor-not-allowed":!0,"placeholder:text-muted":!0,"ring-0 focus:ring-1 focus:ring-inset":!0,"focus:ring-secondary-default":!this.error,"focus:ring-error-default":this.error,"caret-transparent focus:outline-hidden cursor-pointer select-none":this.readonly,"cursor-pointer":this.clickable,"text-left":this.align===`left`||r,"text-center":this.align===`center`&&!r,"text-right":this.align===`right`&&!r,autofilled:this.isAutofilled},l={"block mb-1 font-medium":!0,"opacity-40":this.disabled,"text-[10px]":this.size===`xxs`,"text-xs":this.size===`xs`,"text-sm":this.size===`sm`,"text-base":this.size===`md`,"text-lg":this.size===`lg`,"text-primary-default":!this.error,"text-error-default":this.error},u={height:e,padding:t,fontSize:n,lineHeight:e};return i.html`
+			<div class="w-full min-w-0 ${r?`date-input-container`:``}">
+				${(0,o.when)(this.label,()=>i.html`
+						<label
+							for=${this.id}
+							class=${this.classMap(l)}
+						>
+							${this.label}
+						</label>
+					`)}
+
+				<input
+					${(0,a.ref)(this.inputRef)}
+					id=${this.id}
+					name=${this.name}
+					class=${this.classMap(c)}
+					style=${this.styleMap(u)}
+					.value=${this.value}
+					.type=${this.type}
+					.autocomplete=${this.autocomplete}
+					.spellcheck=${this.spellcheck}
+					placeholder=${this.placeholder}
+					inputmode=${(0,s.ifDefined)(this.inputmode)}
+					pattern=${(0,s.ifDefined)(this.pattern)}
+					.step=${this.step??``}
+					minlength=${(0,s.ifDefined)(this.minlength)}
+					maxlength=${(0,s.ifDefined)(this.maxlength)}
+					min=${(0,s.ifDefined)(this.min)}
+					max=${(0,s.ifDefined)(this.max)}
+					list=${(0,s.ifDefined)(this.list)}
+					?required=${this.required}
+					?disabled=${this.disabled}
+					?readonly=${this.readonly}
+					aria-invalid=${this.error?`true`:`false`}
+					aria-required=${this.required?`true`:`false`}
+					aria-labelledby=${this.label?`label-${this.id}`:i.nothing}
+					aria-describedby=${this.hint||this.validationMessage?`hint-${this.id}`:i.nothing}
+					aria-label=${(0,s.ifDefined)(this.label?void 0:this.placeholder||`Input`)}
+				/>
+
+				${(0,o.when)(this.hint||this.error&&this.validationMessage,()=>i.html`
+						<div
+							id="hint-${this.id}"
+							class="mt-1 text-sm ${this.error?`text-error-default`:`text-surface-onVariant`}"
+						>
+							${this.error&&this.validationMessage?this.validationMessage:this.hint}
+						</div>
+					`)}
+			</div>
+		`}};e.i([(0,r.property)({type:String,reflect:!0})],l.prototype,`value`,void 0),e.i([(0,r.property)({reflect:!0})],l.prototype,`type`,void 0),e.i([(0,r.property)()],l.prototype,`placeholder`,void 0),e.i([(0,r.property)({type:String,reflect:!0})],l.prototype,`pattern`,void 0),e.i([(0,r.property)({type:Boolean,reflect:!0})],l.prototype,`clickable`,void 0),e.i([(0,r.property)({type:Boolean,reflect:!0})],l.prototype,`spellcheck`,void 0),e.i([(0,r.property)({type:String,reflect:!0})],l.prototype,`align`,void 0),e.i([(0,r.property)()],l.prototype,`inputmode`,void 0),e.i([(0,r.property)({type:Number,reflect:!0})],l.prototype,`minlength`,void 0),e.i([(0,r.property)({type:Number})],l.prototype,`maxlength`,void 0),e.i([(0,r.property)()],l.prototype,`min`,void 0),e.i([(0,r.property)()],l.prototype,`max`,void 0),e.i([(0,r.property)({reflect:!0})],l.prototype,`step`,void 0),e.i([(0,r.property)({type:Boolean})],l.prototype,`autofocus`,void 0),e.i([(0,r.property)({type:String,reflect:!0})],l.prototype,`autocomplete`,void 0),e.i([(0,r.property)({type:Number,reflect:!0})],l.prototype,`tabIndex`,void 0),e.i([(0,r.property)({type:String,reflect:!0})],l.prototype,`size`,void 0),e.i([(0,r.property)({type:String})],l.prototype,`validateOn`,void 0),e.i([(0,r.property)({type:String})],l.prototype,`list`,void 0),e.i([(0,r.query)(`input`)],l.prototype,`inputElement`,void 0),e.i([(0,r.state)()],l.prototype,`isAutofilled`,void 0),e.i([(0,r.state)()],l.prototype,`touched`,void 0),e.i([(0,r.state)()],l.prototype,`dirty`,void 0),e.i([(0,r.state)()],l.prototype,`submitted`,void 0),e.i([(0,r.state)()],l.prototype,`defaultValue`,void 0);var u=l=c=e.i([(0,r.customElement)(`schmancy-input`)],l),d=class extends l{};d=e.i([(0,r.customElement)(`sch-input`)],d),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});