@mhmo91/schmancy 0.4.15 → 0.4.17

package/dist/{input-BKGOpZ3z.js → input-DQoSkBYb.js}

@@ -1,23 +1,22 @@
-import { nothing as E, html as b, LitElement as w } from "lit";
-import { property as i, query as k, state as f, customElement as R } from "lit/decorators.js";
+import { nothing as g, html as b, LitElement as w } from "lit";
+import { property as i, query as R, state as m, customElement as V } from "lit/decorators.js";
 import { ifDefined as h } from "lit/directives/if-defined.js";
-import { createRef as S, ref as V } from "lit/directives/ref.js";
-import { when as x } from "lit/directives/when.js";
-import { fromEvent as p, map as $, takeUntil as c, distinctUntilChanged as C, filter as v } from "rxjs";
+import { createRef as k, ref as S } from "lit/directives/ref.js";
+import { when as E } from "lit/directives/when.js";
+import { fromEvent as d, map as $, takeUntil as p, distinctUntilChanged as C, filter as y } from "rxjs";
 import "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
-import { T as O } from "./tailwind.mixin-CjS7whsn.js";
-import { c as g } from "./ripple-BumgqsDT.js";
-import { S as d } from "./theme.interface-C5Kj6WjD.js";
-import { S as I } from "./formField.mixin-DzKDhHbR.js";
-const z = ":host{border:unset!important;line-height:unset!important;background:unset!important;padding:unset!important;font-size:unset!important;box-shadow:unset!important;width:-webkit-fill-available}:host:focus{box-shadow:unset!important}input:focus-visible{outline:none!important}input{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:inherit;text-indent:inherit;text-shadow:inherit;text-overflow:inherit;text-rendering:inherit;text-size-adjust:inherit;text-align-last:inherit}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}@keyframes onAutoFillStart{}input:-webkit-autofill{animation-name:onAutoFillStart}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-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;transition:background-color 5000s ease-in-out 0s}@-moz-document url-prefix(){input:-moz-autofill,input:-moz-autofill:focus{background-color:var(--schmancy-sys-color-surface-highest)!important;color:var(--schmancy-sys-color-surface-on)!important}}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{background-color:var(--schmancy-sys-color-surface-highest)!important;color:var(--schmancy-sys-color-surface-on)!important}";
-var T = Object.defineProperty, A = Object.getOwnPropertyDescriptor, r = (t, e, a, l) => {
-  for (var m, u = l > 1 ? void 0 : l ? A(e, a) : e, y = t.length - 1; y >= 0; y--) (m = t[y]) && (u = (l ? m(e, a, u) : m(u)) || u);
-  return l && u && T(e, a, u), u;
+import { T as O } from "./tailwind.mixin-B176_-fw.js";
+import { c as x } from "./ripple-BumgqsDT.js";
+import { S as v } from "./theme.interface-C5Kj6WjD.js";
+import { S as I } from "./formField.mixin-CB_wbnxx.js";
+var T = Object.defineProperty, z = Object.getOwnPropertyDescriptor, l = (t, e, a, o) => {
+  for (var c, u = o > 1 ? void 0 : o ? z(e, a) : e, f = t.length - 1; f >= 0; f--) (c = t[f]) && (u = (o ? c(e, a, u) : c(u)) || u);
+  return o && u && T(e, a, u), u;
 };
-let s = class extends O(z) {
+let s = class extends O("") {
   constructor() {
-    if (super(), this.id = "", this.label = "", this.type = "text", this.name = `name_${Date.now()}`, this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.readonly = !1, this.clickable = !1, this.spellcheck = !1, this.align = "left", this.autofocus = !1, this.autocomplete = "on", this.tabIndex = 0, this.error = !1, this.size = "md", this.validateOn = "touched", this.validationMessage = "", this.inputRef = S(), this.isAutofilled = !1, this.touched = !1, this.dirty = !1, this.submitted = !1, this.defaultValue = "", "attachInternals" in this) try {
+    if (super(), this.id = "", this.label = "", this.type = "text", this.name = `name_${Date.now()}`, this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.readonly = !1, this.clickable = !1, this.spellcheck = !1, this.align = "left", this.autofocus = !1, this.autocomplete = "on", this.tabIndex = 0, this.error = !1, this.size = "md", this.validateOn = "touched", this.validationMessage = "", this.inputRef = k(), this.isAutofilled = !1, this.touched = !1, this.dirty = !1, this.submitted = !1, this.defaultValue = "", "attachInternals" in this) try {
       this.internals = this.attachInternals();
     } catch {
       this.internals = void 0;
@@ -85,8 +84,8 @@ let s = class extends O(z) {
   }
   validateInput(t = !1) {
     if (this.disabled) return;
-    const e = this.shouldShowValidation(t), a = this.inputElement?.validity ?? { customError: !1, valid: !0 }, l = !a.valid && !a.customError;
-    e && l ? (this.error = !0, this.validationMessage = this.inputElement?.validationMessage || "") : a.valid ? (this.error = !1, a.customError || (this.validationMessage = "")) : e || (this.error = !1), this.updateValidityState();
+    const e = this.shouldShowValidation(t), a = this.inputElement?.validity ?? { customError: !1, valid: !0 }, o = !a.valid && !a.customError;
+    e && o ? (this.error = !0, this.validationMessage = this.inputElement?.validationMessage || "") : a.valid ? (this.error = !1, a.customError || (this.validationMessage = "")) : e || (this.error = !1), this.updateValidityState();
   }
   checkValidity() {
     const t = this.inputRef.value?.checkValidity() ?? !0;
@@ -106,37 +105,37 @@ let s = class extends O(z) {
     }, 0), this.setupInputEvents(), this.setupFocusBlurEvents(), this.setupAutofillDetection(), this.setupEnterKeyEvents();
   }
   setupInputEvents() {
-    p(this.inputElement, "input").pipe($((t) => {
+    d(this.inputElement, "input").pipe($((t) => {
       const e = t;
       return { value: t.target.value, inputType: e.inputType, data: e.data, isComposing: e.isComposing, originalEvent: t };
-    }), c(this.disconnecting)).subscribe((t) => {
+    }), p(this.disconnecting)).subscribe((t) => {
       this.value = t.value, this.dirty = this.value !== this.defaultValue;
       const e = new CustomEvent("input", { detail: { value: t.value }, bubbles: !0, composed: !0 });
       Object.defineProperties(e, { inputType: { value: t.inputType }, data: { value: t.data }, isComposing: { value: t.isComposing } }), this.dispatchEvent(e), this.validateInput();
-    }), p(this.inputElement, "change").pipe($((t) => t.target.value), C(), c(this.disconnecting)).subscribe((t) => {
+    }), d(this.inputElement, "change").pipe($((t) => t.target.value), C(), p(this.disconnecting)).subscribe((t) => {
       this.value = t, this.dirty = this.value !== this.defaultValue, this.dispatchEvent(new CustomEvent("change", { detail: { value: t }, bubbles: !0, composed: !0 })), this.validateInput();
     });
   }
   setupFocusBlurEvents() {
-    p(this.inputElement, "focus").pipe(c(this.disconnecting)).subscribe((t) => {
+    d(this.inputElement, "focus").pipe(p(this.disconnecting)).subscribe((t) => {
       const e = new CustomEvent("focus", { bubbles: t.bubbles, cancelable: t.cancelable, composed: t.composed });
       Object.defineProperties(e, { relatedTarget: { value: t.relatedTarget } }), this.dispatchEvent(e);
-    }), p(this.inputElement, "blur").pipe(c(this.disconnecting)).subscribe((t) => {
+    }), d(this.inputElement, "blur").pipe(p(this.disconnecting)).subscribe((t) => {
       this.touched = !0, this.disabled || this.validateInput();
       const e = new CustomEvent("blur", { bubbles: t.bubbles, cancelable: t.cancelable, composed: t.composed });
       Object.defineProperties(e, { relatedTarget: { value: t.relatedTarget } }), this.dispatchEvent(e);
     });
   }
   setupAutofillDetection() {
-    p(this.inputElement, "animationstart").pipe(v((t) => t.animationName === "onAutoFillStart"), c(this.disconnecting)).subscribe((t) => {
+    d(this.inputElement, "animationstart").pipe(y((t) => t.animationName === "onAutoFillStart"), p(this.disconnecting)).subscribe((t) => {
       const { value: e } = t.target;
       this.value = e, this.isAutofilled = !0, this.dirty = this.value !== this.defaultValue, this.dispatchEvent(new CustomEvent("autofill", { detail: { value: e }, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: { value: e }, bubbles: !0, composed: !0 }));
-    }), p(this.inputElement, "animationstart").pipe(v((t) => t.animationName === "onAutoFillCancel"), c(this.disconnecting)).subscribe(() => {
+    }), d(this.inputElement, "animationstart").pipe(y((t) => t.animationName === "onAutoFillCancel"), p(this.disconnecting)).subscribe(() => {
       this.isAutofilled = !1;
     });
   }
   setupEnterKeyEvents() {
-    p(this.inputElement, "keyup").pipe(v((t) => t.key === "Enter"), c(this.disconnecting)).subscribe((t) => {
+    d(this.inputElement, "keyup").pipe(y((t) => t.key === "Enter"), p(this.disconnecting)).subscribe((t) => {
       const { value: e } = t.target;
       this.value = e, this.dirty = this.value !== this.defaultValue;
       const a = new CustomEvent("enter", { detail: { value: e }, bubbles: !0, composed: !0 });
@@ -161,8 +160,8 @@ let s = class extends O(z) {
   get selectionDirection() {
     return this.inputRef.value?.selectionDirection ?? null;
   }
-  setRangeText(t, e, a, l) {
-    e !== void 0 && a !== void 0 ? this.inputRef.value?.setRangeText(t, e, a, l) : this.inputRef.value?.setRangeText(t);
+  setRangeText(t, e, a, o) {
+    e !== void 0 && a !== void 0 ? this.inputRef.value?.setRangeText(t, e, a, o) : this.inputRef.value?.setRangeText(t);
   }
   focus(t) {
     this.inputRef.value?.focus(t), this.dispatchEvent(new Event("focus"));
@@ -183,14 +182,14 @@ let s = class extends O(z) {
         default:
           return { height: "50px", padding: "0 16px", fontSize: "1rem" };
       }
-    })(), l = { "w-full flex-1 rounded-[8px] border-0 bg-surface-highest text-surface-on": !0, "outline-secondary-default focus:outline-1 ": !0, "outline-secondary-default focus:outline-1": !0, "disabled:opacity-40 disabled:cursor-not-allowed": !0, "placeholder:text-muted": !0, "ring-0 ring-inset focus:ring-1 focus:ring-inset": !0, "ring-secondary-default ring-outline focus:ring-secondary-default": !this.error, "ring-error-default focus:ring-error-default": this.error, "caret-transparent focus:outline-hidden cursor-pointer text-select-none": this.readonly, "cursor-pointer": this.clickable, "text-center": this.align === "center", "text-right": this.align === "right", autofilled: this.isAutofilled }, m = { "opacity-40": this.disabled, "block mb-[4px]": !0, "text-sm": this.size === "sm", "text-base": this.size === "md", "text-lg": this.size === "lg" }, u = { height: t, padding: e, fontSize: a };
+    })(), o = { "w-full flex-1 rounded-[8px] border-0 bg-surface-highest text-surface-on": !0, "outline-secondary-default focus:outline-1 ": !0, "outline-secondary-default focus:outline-1": !0, "disabled:opacity-40 disabled:cursor-not-allowed": !0, "placeholder:text-muted": !0, "ring-0 ring-inset focus:ring-1 focus:ring-inset": !0, "ring-secondary-default ring-outline focus:ring-secondary-default": !this.error, "ring-error-default focus:ring-error-default": this.error, "caret-transparent focus:outline-hidden cursor-pointer text-select-none": this.readonly, "cursor-pointer": this.clickable, "text-center": this.align === "center", "text-right": this.align === "right", autofilled: this.isAutofilled }, c = { "opacity-40": this.disabled, "block mb-[4px]": !0, "text-sm": this.size === "sm", "text-base": this.size === "md", "text-lg": this.size === "lg" }, u = { height: t, padding: e, fontSize: a };
     return b`
-			${x(this.label, () => b`
+			${E(this.label, () => b`
 					<label
 						for=${this.id}
 						id="label-${this.id}"
-						class=${this.classMap(m)}
-						${g({ color: this.error ? d.sys.color.error.default : d.sys.color.primary.default })}
+						class=${this.classMap(c)}
+						${x({ color: this.error ? v.sys.color.error.default : v.sys.color.primary.default })}
 					>
 						<schmancy-typography type="label" token=${this.size === "sm" ? "sm" : this.size === "lg" ? "lg" : "md"}>
 							${this.label}
@@ -199,11 +198,11 @@ let s = class extends O(z) {
 				`)}
 
 			<input
-				${g({ bgColor: d.sys.color.surface.highest, color: d.sys.color.surface.on })}
-				${V(this.inputRef)}
+				${x({ bgColor: v.sys.color.surface.highest, color: v.sys.color.surface.on })}
+				${S(this.inputRef)}
 				id=${this.id}
 				name=${this.name}
-				class=${this.classMap(l)}
+				class=${this.classMap(o)}
 				style=${this.styleMap(u)}
 				.value=${this.value}
 				.type=${this.type}
@@ -223,17 +222,17 @@ let s = class extends O(z) {
 				?readonly=${this.readonly}
 				aria-invalid=${this.error ? "true" : "false"}
 				aria-required=${this.required ? "true" : "false"}
-				aria-labelledby=${this.label ? `label-${this.id}` : E}
-				aria-describedby=${this.hint ? `hint-${this.id}` : E}
+				aria-labelledby=${this.label ? `label-${this.id}` : g}
+				aria-describedby=${this.hint ? `hint-${this.id}` : g}
 				aria-label=${h(this.label ? void 0 : this.placeholder || "Input")}
 				aria-autocomplete=${this.list ? "list" : "none"}
 			/>
 
-			${x(this.hint, () => b`
+			${E(this.hint, () => b`
 					<div
 						id="hint-${this.id}"
 						class="${this.size === "sm" ? "pt-[1px] text-xs" : this.size === "lg" ? "pt-[3px] text-base" : "pt-[2px] text-sm"}"
-						${g({ color: this.error ? d.sys.color.error.default : d.sys.color.primary.default })}
+						${x({ color: this.error ? v.sys.color.error.default : v.sys.color.primary.default })}
 					>
 						<schmancy-typography
 							align="left"
@@ -247,17 +246,17 @@ let s = class extends O(z) {
 		`;
   }
 };
-s._idCounter = 0, s.formAssociated = !0, s.shadowRootOptions = { ...w.shadowRootOptions, delegatesFocus: !0 }, r([i({ reflect: !0 })], s.prototype, "id", 2), r([i({ type: String })], s.prototype, "label", 2), r([i({ reflect: !0 })], s.prototype, "type", 2), r([i()], s.prototype, "name", 2), r([i()], s.prototype, "placeholder", 2), r([i({ type: String, reflect: !0 })], s.prototype, "value", 2), r([i({ type: String, reflect: !0 })], s.prototype, "pattern", 2), r([i({ type: Boolean, reflect: !0 })], s.prototype, "required", 2), r([i({ type: Boolean, reflect: !0 })], s.prototype, "disabled", 2), r([i({ type: Boolean, reflect: !0 })], s.prototype, "readonly", 2), r([i({ type: Boolean, reflect: !0 })], s.prototype, "clickable", 2), r([i({ type: Boolean, reflect: !0 })], s.prototype, "spellcheck", 2), r([i({ type: String, reflect: !0 })], s.prototype, "align", 2), r([i()], s.prototype, "inputmode", 2), r([i({ type: Number, reflect: !0 })], s.prototype, "minlength", 2), r([i({ type: Number })], s.prototype, "maxlength", 2), r([i()], s.prototype, "min", 2), r([i()], s.prototype, "max", 2), r([i({ type: Number, reflect: !0 })], s.prototype, "step", 2), r([i({ type: Boolean })], s.prototype, "autofocus", 2), r([i({ type: String, reflect: !0 })], s.prototype, "autocomplete", 2), r([i({ type: Number, reflect: !0 })], s.prototype, "tabIndex", 2), r([i()], s.prototype, "hint", 2), r([i({ type: Boolean, reflect: !0 })], s.prototype, "error", 2), r([i({ type: String, reflect: !0 })], s.prototype, "size", 2), r([i({ type: String })], s.prototype, "validateOn", 2), r([i({ type: String })], s.prototype, "list", 2), r([i({ type: String })], s.prototype, "validationMessage", 2), r([k("input")], s.prototype, "inputElement", 2), r([f()], s.prototype, "isAutofilled", 2), r([f()], s.prototype, "touched", 2), r([f()], s.prototype, "dirty", 2), r([f()], s.prototype, "submitted", 2), r([f()], s.prototype, "defaultValue", 2), s = r([R("sch-input")], s);
-var M = Object.defineProperty, D = Object.getOwnPropertyDescriptor, o = (t, e, a, l) => {
-  for (var m, u = l > 1 ? void 0 : l ? D(e, a) : e, y = t.length - 1; y >= 0; y--) (m = t[y]) && (u = (l ? m(e, a, u) : m(u)) || u);
-  return l && u && M(e, a, u), u;
+s._idCounter = 0, s.formAssociated = !0, s.shadowRootOptions = { ...w.shadowRootOptions, delegatesFocus: !0 }, l([i({ reflect: !0 })], s.prototype, "id", 2), l([i({ type: String })], s.prototype, "label", 2), l([i({ reflect: !0 })], s.prototype, "type", 2), l([i()], s.prototype, "name", 2), l([i()], s.prototype, "placeholder", 2), l([i({ type: String, reflect: !0 })], s.prototype, "value", 2), l([i({ type: String, reflect: !0 })], s.prototype, "pattern", 2), l([i({ type: Boolean, reflect: !0 })], s.prototype, "required", 2), l([i({ type: Boolean, reflect: !0 })], s.prototype, "disabled", 2), l([i({ type: Boolean, reflect: !0 })], s.prototype, "readonly", 2), l([i({ type: Boolean, reflect: !0 })], s.prototype, "clickable", 2), l([i({ type: Boolean, reflect: !0 })], s.prototype, "spellcheck", 2), l([i({ type: String, reflect: !0 })], s.prototype, "align", 2), l([i()], s.prototype, "inputmode", 2), l([i({ type: Number, reflect: !0 })], s.prototype, "minlength", 2), l([i({ type: Number })], s.prototype, "maxlength", 2), l([i()], s.prototype, "min", 2), l([i()], s.prototype, "max", 2), l([i({ type: Number, reflect: !0 })], s.prototype, "step", 2), l([i({ type: Boolean })], s.prototype, "autofocus", 2), l([i({ type: String, reflect: !0 })], s.prototype, "autocomplete", 2), l([i({ type: Number, reflect: !0 })], s.prototype, "tabIndex", 2), l([i()], s.prototype, "hint", 2), l([i({ type: Boolean, reflect: !0 })], s.prototype, "error", 2), l([i({ type: String, reflect: !0 })], s.prototype, "size", 2), l([i({ type: String })], s.prototype, "validateOn", 2), l([i({ type: String })], s.prototype, "list", 2), l([i({ type: String })], s.prototype, "validationMessage", 2), l([R("input")], s.prototype, "inputElement", 2), l([m()], s.prototype, "isAutofilled", 2), l([m()], s.prototype, "touched", 2), l([m()], s.prototype, "dirty", 2), l([m()], s.prototype, "submitted", 2), l([m()], s.prototype, "defaultValue", 2), s = l([V("sch-input")], s);
+var A = Object.defineProperty, M = Object.getOwnPropertyDescriptor, n = (t, e, a, o) => {
+  for (var c, u = o > 1 ? void 0 : o ? M(e, a) : e, f = t.length - 1; f >= 0; f--) (c = t[f]) && (u = (o ? c(e, a, u) : c(u)) || u);
+  return o && u && A(e, a, u), u;
 };
-let n = class extends I(z) {
+let r = class extends I("") {
   constructor() {
-    super(...arguments), this.value = "", this.type = "text", this.placeholder = "", this.clickable = !1, this.spellcheck = !1, this.align = "left", this.autofocus = !1, this.autocomplete = "on", this.tabIndex = 0, this.size = "md", this.validateOn = "touched", this.inputRef = S(), this.isAutofilled = !1, this.touched = !1, this.dirty = !1, this.submitted = !1, this.defaultValue = "";
+    super(...arguments), this.value = "", this.type = "text", this.placeholder = "", this.clickable = !1, this.spellcheck = !1, this.align = "left", this.autofocus = !1, this.autocomplete = "on", this.tabIndex = 0, this.size = "md", this.validateOn = "touched", this.inputRef = k(), this.isAutofilled = !1, this.touched = !1, this.dirty = !1, this.submitted = !1, this.defaultValue = "";
   }
   willUpdate(t) {
-    this.id || (this.id = "sch-input-" + n._idCounter++), super.willUpdate(t);
+    this.id || (this.id = "sch-input-" + r._idCounter++), super.willUpdate(t);
   }
   updated(t) {
     super.updated(t), t.has("value") && (this.value !== this.defaultValue && (this.dirty = !0), this.validateInput()), !this.hasUpdated && t.has("value") && (this.defaultValue = this.value);
@@ -312,8 +311,8 @@ let n = class extends I(z) {
   }
   validateInput(t = !1) {
     if (this.disabled) return;
-    const e = this.shouldShowValidation(t), a = this.inputElement?.validity ?? { customError: !1, valid: !0 }, l = !a.valid && !a.customError;
-    e && l ? (this.error = !0, this.validationMessage = this.inputElement?.validationMessage || "") : a.valid ? (this.error = !1, a.customError || (this.validationMessage = "")) : e || (this.error = !1);
+    const e = this.shouldShowValidation(t), a = this.inputElement?.validity ?? { customError: !1, valid: !0 }, o = !a.valid && !a.customError;
+    e && o ? (this.error = !0, this.validationMessage = this.inputElement?.validationMessage || "") : a.valid ? (this.error = !1, a.customError || (this.validationMessage = "")) : e || (this.error = !1);
   }
   checkValidity() {
     const t = this.inputRef.value?.checkValidity() ?? !0, e = super.checkValidity();
@@ -335,37 +334,37 @@ let n = class extends I(z) {
     }, 0), this.setupInputEvents(), this.setupFocusBlurEvents(), this.setupAutofillDetection(), this.setupEnterKeyEvents();
   }
   setupInputEvents() {
-    p(this.inputElement, "input").pipe($((t) => {
+    d(this.inputElement, "input").pipe($((t) => {
       const e = t;
       return { value: t.target.value, inputType: e.inputType, data: e.data, isComposing: e.isComposing, originalEvent: t };
-    }), c(this.disconnecting)).subscribe((t) => {
+    }), p(this.disconnecting)).subscribe((t) => {
       this.value = t.value, this.dirty = this.value !== this.defaultValue;
       const e = new CustomEvent("input", { detail: { value: t.value }, bubbles: !0, composed: !0 });
       Object.defineProperties(e, { inputType: { value: t.inputType }, data: { value: t.data }, isComposing: { value: t.isComposing } }), this.dispatchEvent(e), this.validateInput();
-    }), p(this.inputElement, "change").pipe($((t) => t.target.value), C(), c(this.disconnecting)).subscribe((t) => {
+    }), d(this.inputElement, "change").pipe($((t) => t.target.value), C(), p(this.disconnecting)).subscribe((t) => {
       this.value = t, this.dirty = this.value !== this.defaultValue, this.emitChange({ value: t }), this.validateInput();
     });
   }
   setupFocusBlurEvents() {
-    p(this.inputElement, "focus").pipe(c(this.disconnecting)).subscribe((t) => {
+    d(this.inputElement, "focus").pipe(p(this.disconnecting)).subscribe((t) => {
       const e = new CustomEvent("focus", { bubbles: t.bubbles, cancelable: t.cancelable, composed: t.composed });
       Object.defineProperties(e, { relatedTarget: { value: t.relatedTarget } }), this.dispatchEvent(e);
-    }), p(this.inputElement, "blur").pipe(c(this.disconnecting)).subscribe((t) => {
+    }), d(this.inputElement, "blur").pipe(p(this.disconnecting)).subscribe((t) => {
       this.touched = !0, this.disabled || this.validateInput();
       const e = new CustomEvent("blur", { bubbles: t.bubbles, cancelable: t.cancelable, composed: t.composed });
       Object.defineProperties(e, { relatedTarget: { value: t.relatedTarget } }), this.dispatchEvent(e);
     });
   }
   setupAutofillDetection() {
-    p(this.inputElement, "animationstart").pipe(v((t) => t.animationName === "onAutoFillStart"), c(this.disconnecting)).subscribe((t) => {
+    d(this.inputElement, "animationstart").pipe(y((t) => t.animationName === "onAutoFillStart"), p(this.disconnecting)).subscribe((t) => {
       const { value: e } = t.target;
       this.value = e, this.isAutofilled = !0, this.dirty = this.value !== this.defaultValue, this.dispatchEvent(new CustomEvent("autofill", { detail: { value: e }, bubbles: !0, composed: !0 })), this.emitChange({ value: e });
-    }), p(this.inputElement, "animationstart").pipe(v((t) => t.animationName === "onAutoFillCancel"), c(this.disconnecting)).subscribe(() => {
+    }), d(this.inputElement, "animationstart").pipe(y((t) => t.animationName === "onAutoFillCancel"), p(this.disconnecting)).subscribe(() => {
       this.isAutofilled = !1;
     });
   }
   setupEnterKeyEvents() {
-    p(this.inputElement, "keydown").pipe(v((t) => t.key === "Enter"), c(this.disconnecting)).subscribe((t) => {
+    d(this.inputElement, "keydown").pipe(y((t) => t.key === "Enter"), p(this.disconnecting)).subscribe((t) => {
       const { value: e } = t.target;
       this.value !== e && (this.value = e, this.dirty = this.value !== this.defaultValue), this.inputElement.blur();
       const a = new CustomEvent("enter", { detail: { value: this.value }, bubbles: !0, composed: !0 });
@@ -390,8 +389,8 @@ let n = class extends I(z) {
   get selectionDirection() {
     return this.inputRef.value?.selectionDirection ?? null;
   }
-  setRangeText(t, e, a, l) {
-    e !== void 0 && a !== void 0 ? this.inputRef.value?.setRangeText(t, e, a, l) : this.inputRef.value?.setRangeText(t);
+  setRangeText(t, e, a, o) {
+    e !== void 0 && a !== void 0 ? this.inputRef.value?.setRangeText(t, e, a, o) : this.inputRef.value?.setRangeText(t);
   }
   focus(t) {
     this.inputRef.value?.focus(t), this.dispatchEvent(new Event("focus"));
@@ -412,69 +411,58 @@ let n = class extends I(z) {
         default:
           return { height: "50px", padding: "0 16px", fontSize: "1rem" };
       }
-    })(), l = { "w-full flex-1 rounded-[8px] border-0 bg-surface-highest text-surface-on": !0, "outline-secondary-default focus:outline-1 ": !0, "outline-secondary-default focus:outline-1": !0, "disabled:opacity-40 disabled:cursor-not-allowed": !0, "placeholder:text-muted": !0, "ring-0 ring-inset focus:ring-1 focus:ring-inset": !0, "ring-secondary-default ring-outline focus:ring-secondary-default": !this.error, "ring-error-default focus:ring-error-default": this.error, "caret-transparent focus:outline-hidden cursor-pointer text-select-none": this.readonly, "cursor-pointer": this.clickable, "text-center": this.align === "center", "text-right": this.align === "right", autofilled: this.isAutofilled }, m = { "opacity-40": this.disabled, "block mb-[4px]": !0, "text-sm": this.size === "sm", "text-base": this.size === "md", "text-lg": this.size === "lg" }, u = { height: t, padding: e, fontSize: a };
+    })(), o = ["date", "datetime-local", "time", "month", "week"].includes(this.type), c = { "block w-full min-w-0 rounded-[8px] border-0 bg-surface-highest text-surface-on": !0, "outline-secondary-default focus:outline-1": !0, "disabled:opacity-40 disabled:cursor-not-allowed": !0, "placeholder:text-muted": !0, "ring-0 ring-inset focus:ring-1 focus:ring-inset": !0, "ring-secondary-default ring-outline focus:ring-secondary-default": !this.error, "ring-error-default 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" || o, "text-center": this.align === "center" && !o, "text-right": this.align === "right" && !o, autofilled: this.isAutofilled }, u = { "block mb-1 font-medium": !0, "opacity-40": this.disabled, "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 }, f = { height: t, padding: e, fontSize: a, lineHeight: t };
     return b`
-			${x(this.label, () => b`
-					<label
-						for=${this.id}
-						id="label-${this.id}"
-						class=${this.classMap(m)}
-						${g({ color: this.error ? d.sys.color.error.default : d.sys.color.primary.default })}
-					>
-						<schmancy-typography type="label" token=${this.size === "sm" ? "sm" : this.size === "lg" ? "lg" : "md"}>
+			<div class="w-full min-w-0 ${o ? "date-input-container" : ""}">
+				${E(this.label, () => b`
+						<label
+							for=${this.id}
+							class=${this.classMap(u)}
+						>
 							${this.label}
-						</schmancy-typography>
-					</label>
-				`)}
+						</label>
+					`)}
 
-			<input
-				${g({ bgColor: d.sys.color.surface.highest, color: d.sys.color.surface.on })}
-				${V(this.inputRef)}
-				id=${this.id}
-				name=${this.name}
-				class=${this.classMap(l)}
-				style=${this.styleMap(u)}
-				.value=${this.value}
-				.type=${this.type}
-				.autocomplete=${this.autocomplete}
-				.spellcheck=${this.spellcheck}
-				placeholder=${this.placeholder}
-				inputmode=${h(this.inputmode)}
-				pattern=${h(this.pattern)}
-				step=${h(this.step)}
-				minlength=${h(this.minlength)}
-				maxlength=${h(this.maxlength)}
-				min=${h(this.min)}
-				max=${h(this.max)}
-				list=${h(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}` : E}
-				aria-describedby=${this.hint ? `hint-${this.id}` : E}
-				aria-label=${h(this.label ? void 0 : this.placeholder || "Input")}
-				aria-autocomplete=${this.list ? "list" : "none"}
-			/>
+				<input
+					${S(this.inputRef)}
+					id=${this.id}
+					name=${this.name}
+					class=${this.classMap(c)}
+					style=${this.styleMap(f)}
+					.value=${this.value}
+					.type=${this.type}
+					.autocomplete=${this.autocomplete}
+					.spellcheck=${this.spellcheck}
+					placeholder=${this.placeholder}
+					inputmode=${h(this.inputmode)}
+					pattern=${h(this.pattern)}
+					step=${h(this.step)}
+					minlength=${h(this.minlength)}
+					maxlength=${h(this.maxlength)}
+					min=${h(this.min)}
+					max=${h(this.max)}
+					list=${h(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}` : g}
+					aria-describedby=${this.hint || this.validationMessage ? `hint-${this.id}` : g}
+					aria-label=${h(this.label ? void 0 : this.placeholder || "Input")}
+				/>
 
-			${x(this.hint, () => b`
-					<div
-						id="hint-${this.id}"
-						class="${this.size === "sm" ? "pt-[1px] text-xs" : this.size === "lg" ? "pt-[3px] text-base" : "pt-[2px] text-sm"}"
-						${g({ color: this.error ? d.sys.color.error.default : d.sys.color.primary.default })}
-					>
-						<schmancy-typography
-							align="left"
-							type="label"
-							token=${this.size === "sm" ? "sm" : this.size === "lg" ? "lg" : "md"}
+				${E(this.hint || this.error && this.validationMessage, () => b`
+						<div
+							id="hint-${this.id}"
+							class="mt-1 text-sm ${this.error ? "text-error-default" : "text-surface-onVariant"}"
 						>
-							${this.hint}
-						</schmancy-typography>
-					</div>
-				`)}
+							${this.error && this.validationMessage ? this.validationMessage : this.hint}
+						</div>
+					`)}
+			</div>
 		`;
   }
 };
-n._idCounter = 0, n.shadowRootOptions = { ...w.shadowRootOptions, delegatesFocus: !0 }, o([i({ type: String, reflect: !0 })], n.prototype, "value", 2), o([i({ reflect: !0 })], n.prototype, "type", 2), o([i()], n.prototype, "placeholder", 2), o([i({ type: String, reflect: !0 })], n.prototype, "pattern", 2), o([i({ type: Boolean, reflect: !0 })], n.prototype, "clickable", 2), o([i({ type: Boolean, reflect: !0 })], n.prototype, "spellcheck", 2), o([i({ type: String, reflect: !0 })], n.prototype, "align", 2), o([i()], n.prototype, "inputmode", 2), o([i({ type: Number, reflect: !0 })], n.prototype, "minlength", 2), o([i({ type: Number })], n.prototype, "maxlength", 2), o([i()], n.prototype, "min", 2), o([i()], n.prototype, "max", 2), o([i({ type: Number, reflect: !0 })], n.prototype, "step", 2), o([i({ type: Boolean })], n.prototype, "autofocus", 2), o([i({ type: String, reflect: !0 })], n.prototype, "autocomplete", 2), o([i({ type: Number, reflect: !0 })], n.prototype, "tabIndex", 2), o([i({ type: String, reflect: !0 })], n.prototype, "size", 2), o([i({ type: String })], n.prototype, "validateOn", 2), o([i({ type: String })], n.prototype, "list", 2), o([k("input")], n.prototype, "inputElement", 2), o([f()], n.prototype, "isAutofilled", 2), o([f()], n.prototype, "touched", 2), o([f()], n.prototype, "dirty", 2), o([f()], n.prototype, "submitted", 2), o([f()], n.prototype, "defaultValue", 2), n = o([R("schmancy-input")], n);
-//# sourceMappingURL=input-BKGOpZ3z.js.map
+r._idCounter = 0, r.shadowRootOptions = { ...w.shadowRootOptions, delegatesFocus: !0 }, n([i({ type: String, reflect: !0 })], r.prototype, "value", 2), n([i({ reflect: !0 })], r.prototype, "type", 2), n([i()], r.prototype, "placeholder", 2), n([i({ type: String, reflect: !0 })], r.prototype, "pattern", 2), n([i({ type: Boolean, reflect: !0 })], r.prototype, "clickable", 2), n([i({ type: Boolean, reflect: !0 })], r.prototype, "spellcheck", 2), n([i({ type: String, reflect: !0 })], r.prototype, "align", 2), n([i()], r.prototype, "inputmode", 2), n([i({ type: Number, reflect: !0 })], r.prototype, "minlength", 2), n([i({ type: Number })], r.prototype, "maxlength", 2), n([i()], r.prototype, "min", 2), n([i()], r.prototype, "max", 2), n([i({ type: Number, reflect: !0 })], r.prototype, "step", 2), n([i({ type: Boolean })], r.prototype, "autofocus", 2), n([i({ type: String, reflect: !0 })], r.prototype, "autocomplete", 2), n([i({ type: Number, reflect: !0 })], r.prototype, "tabIndex", 2), n([i({ type: String, reflect: !0 })], r.prototype, "size", 2), n([i({ type: String })], r.prototype, "validateOn", 2), n([i({ type: String })], r.prototype, "list", 2), n([R("input")], r.prototype, "inputElement", 2), n([m()], r.prototype, "isAutofilled", 2), n([m()], r.prototype, "touched", 2), n([m()], r.prototype, "dirty", 2), n([m()], r.prototype, "submitted", 2), n([m()], r.prototype, "defaultValue", 2), r = n([V("schmancy-input")], r);
+//# sourceMappingURL=input-DQoSkBYb.js.map