@mhmo91/schmancy 0.4.1 → 0.4.3

package/dist/{input-CpYu_aUV.js → input-6XNB7MZP.js}

@@ -1,18 +1,18 @@
 import { nothing as E, html as f, LitElement as k } from "lit";
 import { property as i, query as R, state as v, customElement as V } from "lit/decorators.js";
-import { ifDefined as h } from "lit/directives/if-defined.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
 import { createRef as S, ref as C } from "lit/directives/ref.js";
 import { when as $ } from "lit/directives/when.js";
-import { fromEvent as d, map as x, takeUntil as m, distinctUntilChanged as w, filter as g } from "rxjs";
+import { fromEvent as c, map as x, takeUntil as d, distinctUntilChanged as w, filter as g } from "rxjs";
 import "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
-import { T as z } from "./tailwind.mixin-DbsxfE0U.js";
+import { T as z } from "./tailwind.mixin-Ba46CZMW.js";
 import { c as b } from "./ripple-BumgqsDT.js";
-import { S as c } from "./theme.interface-C5Kj6WjD.js";
+import { S as p } from "./theme.interface-C5Kj6WjD.js";
 const I = ":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 O = Object.defineProperty, A = Object.getOwnPropertyDescriptor, a = (t, e, r, u) => {
-  for (var p, l = u > 1 ? void 0 : u ? A(e, r) : e, y = t.length - 1; y >= 0; y--) (p = t[y]) && (l = (u ? p(e, r, l) : p(l)) || l);
-  return u && l && O(e, r, l), l;
+var O = Object.defineProperty, A = Object.getOwnPropertyDescriptor, a = (t, e, n, h) => {
+  for (var m, l = h > 1 ? void 0 : h ? A(e, n) : e, y = t.length - 1; y >= 0; y--) (m = t[y]) && (l = (h ? m(e, n, l) : m(l)) || l);
+  return h && l && O(e, n, l), l;
 };
 let s = class extends z(I) {
   constructor() {
@@ -26,20 +26,17 @@ let s = class extends z(I) {
     this.id || (this.id = "sch-input-" + s._idCounter++), super.willUpdate(t);
   }
   get form() {
-    var t;
-    return ((t = this.internals) == null ? void 0 : t.form) ?? null;
+    return this.internals?.form ?? null;
   }
   updated(t) {
-    var e;
-    super.updated(t), t.has("value") && (this.value !== this.defaultValue && (this.dirty = !0), (e = this.internals) == null || e.setFormValue(this.value), this.validateInput()), t.has("error") && this.updateValidityState(), !this.hasUpdated && t.has("value") && (this.defaultValue = this.value);
+    super.updated(t), t.has("value") && (this.value !== this.defaultValue && (this.dirty = !0), this.internals?.setFormValue(this.value), this.validateInput()), t.has("error") && this.updateValidityState(), !this.hasUpdated && t.has("value") && (this.defaultValue = this.value);
   }
   connectedCallback() {
     super.connectedCallback(), this.defaultValue = this.value, this.setupFormIntegration(), this.setupExternalLabelAssociation();
   }
   setupFormIntegration() {
-    var t;
-    (t = this.internals) != null && t.form && (this.formResetObserver = new MutationObserver((e) => {
-      for (const r of e) r.type === "attributes" && r.attributeName === "reset" && this.resetToDefault();
+    this.internals?.form && (this.formResetObserver = new MutationObserver((t) => {
+      for (const e of t) e.type === "attributes" && e.attributeName === "reset" && this.resetToDefault();
     }), this.formResetObserver.observe(this.internals.form, { attributes: !0, childList: !1, subtree: !1 }), this.internals.form.addEventListener("reset", () => {
       this.resetToDefault();
     }), this.internals.form.addEventListener("submit", () => {
@@ -83,24 +80,20 @@ let s = class extends z(I) {
     }
   }
   updateValidityState() {
-    var t, e, r;
-    this.error ? this.validationMessage ? (t = this.internals) == null || t.setValidity({ customError: !0 }, this.validationMessage, this.inputElement) : (e = this.internals) == null || e.setValidity({ customError: !0 }, "Invalid input", this.inputElement) : (r = this.internals) == null || r.setValidity({});
+    this.error ? this.validationMessage ? this.internals?.setValidity({ customError: !0 }, this.validationMessage, this.inputElement) : this.internals?.setValidity({ customError: !0 }, "Invalid input", this.inputElement) : this.internals?.setValidity({});
   }
   validateInput(t = !1) {
-    var p, l;
     if (this.disabled) return;
-    const e = this.shouldShowValidation(t), r = ((p = this.inputElement) == null ? void 0 : p.validity) ?? { customError: !1, valid: !0 }, u = !r.valid && !r.customError;
-    e && u ? (this.error = !0, this.validationMessage = ((l = this.inputElement) == null ? void 0 : l.validationMessage) || "") : r.valid ? (this.error = !1, r.customError || (this.validationMessage = "")) : e || (this.error = !1), this.updateValidityState();
+    const e = this.shouldShowValidation(t), n = this.inputElement?.validity ?? { customError: !1, valid: !0 }, h = !n.valid && !n.customError;
+    e && h ? (this.error = !0, this.validationMessage = this.inputElement?.validationMessage || "") : n.valid ? (this.error = !1, n.customError || (this.validationMessage = "")) : e || (this.error = !1), this.updateValidityState();
   }
   checkValidity() {
-    var e;
-    const t = ((e = this.inputRef.value) == null ? void 0 : e.checkValidity()) ?? !0;
+    const t = this.inputRef.value?.checkValidity() ?? !0;
     return this.internals && !t ? (this.internals.checkValidity(), !1) : t;
   }
   reportValidity() {
-    var e;
     this.touched = !0, this.submitted = !0;
-    const t = ((e = this.inputRef.value) == null ? void 0 : e.reportValidity()) ?? !0;
+    const t = this.inputRef.value?.reportValidity() ?? !0;
     return this.validateInput(!0), this.internals && !t ? (this.internals.reportValidity(), !1) : t;
   }
   setCustomValidity(t) {
@@ -112,85 +105,75 @@ let s = class extends z(I) {
     }, 0), this.setupInputEvents(), this.setupFocusBlurEvents(), this.setupAutofillDetection(), this.setupEnterKeyEvents();
   }
   setupInputEvents() {
-    d(this.inputElement, "input").pipe(x((t) => {
+    c(this.inputElement, "input").pipe(x((t) => {
       const e = t;
       return { value: t.target.value, inputType: e.inputType, data: e.data, isComposing: e.isComposing, originalEvent: t };
-    }), m(this.disconnecting)).subscribe((t) => {
+    }), d(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();
-    }), d(this.inputElement, "change").pipe(x((t) => t.target.value), w(), m(this.disconnecting)).subscribe((t) => {
+    }), c(this.inputElement, "change").pipe(x((t) => t.target.value), w(), d(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() {
-    d(this.inputElement, "focus").pipe(m(this.disconnecting)).subscribe((t) => {
+    c(this.inputElement, "focus").pipe(d(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);
-    }), d(this.inputElement, "blur").pipe(m(this.disconnecting)).subscribe((t) => {
+    }), c(this.inputElement, "blur").pipe(d(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() {
-    d(this.inputElement, "animationstart").pipe(g((t) => t.animationName === "onAutoFillStart"), m(this.disconnecting)).subscribe((t) => {
+    c(this.inputElement, "animationstart").pipe(g((t) => t.animationName === "onAutoFillStart"), d(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 }));
-    }), d(this.inputElement, "animationstart").pipe(g((t) => t.animationName === "onAutoFillCancel"), m(this.disconnecting)).subscribe(() => {
+    }), c(this.inputElement, "animationstart").pipe(g((t) => t.animationName === "onAutoFillCancel"), d(this.disconnecting)).subscribe(() => {
       this.isAutofilled = !1;
     });
   }
   setupEnterKeyEvents() {
-    d(this.inputElement, "keyup").pipe(g((t) => t.key === "Enter"), m(this.disconnecting)).subscribe((t) => {
+    c(this.inputElement, "keyup").pipe(g((t) => t.key === "Enter"), d(this.disconnecting)).subscribe((t) => {
       const { value: e } = t.target;
       this.value = e, this.dirty = this.value !== this.defaultValue;
-      const r = new CustomEvent("enter", { detail: { value: e }, bubbles: !0, composed: !0 });
-      Object.defineProperties(r, { key: { value: "Enter" }, code: { value: "Enter" }, keyCode: { value: 13 }, which: { value: 13 } }), this.dispatchEvent(r);
+      const n = new CustomEvent("enter", { detail: { value: e }, bubbles: !0, composed: !0 });
+      Object.defineProperties(n, { key: { value: "Enter" }, code: { value: "Enter" }, keyCode: { value: 13 }, which: { value: 13 } }), this.dispatchEvent(n);
     });
   }
   select() {
-    var t;
-    return (t = this.inputRef.value) == null ? void 0 : t.select();
+    return this.inputRef.value?.select();
   }
   getValidity() {
-    var t;
-    return (t = this.inputRef.value) == null ? void 0 : t.validity;
+    return this.inputRef.value?.validity;
   }
-  setSelectionRange(t, e, r) {
-    var u;
-    (u = this.inputRef.value) == null || u.setSelectionRange(t, e, r);
+  setSelectionRange(t, e, n) {
+    this.inputRef.value?.setSelectionRange(t, e, n);
   }
   get selectionStart() {
-    var t;
-    return ((t = this.inputRef.value) == null ? void 0 : t.selectionStart) ?? null;
+    return this.inputRef.value?.selectionStart ?? null;
   }
   get selectionEnd() {
-    var t;
-    return ((t = this.inputRef.value) == null ? void 0 : t.selectionEnd) ?? null;
+    return this.inputRef.value?.selectionEnd ?? null;
   }
   get selectionDirection() {
-    var t;
-    return ((t = this.inputRef.value) == null ? void 0 : t.selectionDirection) ?? null;
+    return this.inputRef.value?.selectionDirection ?? null;
   }
-  setRangeText(t, e, r, u) {
-    var p, l;
-    e !== void 0 && r !== void 0 ? (p = this.inputRef.value) == null || p.setRangeText(t, e, r, u) : (l = this.inputRef.value) == null || l.setRangeText(t);
+  setRangeText(t, e, n, h) {
+    e !== void 0 && n !== void 0 ? this.inputRef.value?.setRangeText(t, e, n, h) : this.inputRef.value?.setRangeText(t);
   }
   focus(t) {
-    var e;
-    (e = this.inputRef.value) == null || e.focus(t), this.dispatchEvent(new Event("focus"));
+    this.inputRef.value?.focus(t), this.dispatchEvent(new Event("focus"));
   }
   click() {
-    var t;
-    (t = this.inputRef.value) == null || t.click(), this.dispatchEvent(new Event("click"));
+    this.inputRef.value?.click(), this.dispatchEvent(new Event("click"));
   }
   blur() {
-    var t;
-    (t = this.inputRef.value) == null || t.blur(), this.dispatchEvent(new Event("blur"));
+    this.inputRef.value?.blur(), this.dispatchEvent(new Event("blur"));
   }
   render() {
-    const { height: t, padding: e, fontSize: r } = (() => {
+    const { height: t, padding: e, fontSize: n } = (() => {
       switch (this.size) {
         case "sm":
           return { height: "40px", padding: "0 8px", fontSize: "0.875rem" };
@@ -199,14 +182,14 @@ let s = class extends z(I) {
         default:
           return { height: "50px", padding: "0 16px", fontSize: "1rem" };
       }
-    })(), u = { "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 }, p = { "opacity-40": this.disabled, "block mb-[4px]": !0, "text-sm": this.size === "sm", "text-base": this.size === "md", "text-lg": this.size === "lg" }, l = { height: t, padding: e, fontSize: r };
+    })(), h = { "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" }, l = { height: t, padding: e, fontSize: n };
     return f`
 			${$(this.label, () => f`
 					<label
 						for=${this.id}
 						id="label-${this.id}"
-						class=${this.classMap(p)}
-						${b({ color: this.error ? c.sys.color.error.default : c.sys.color.primary.default })}
+						class=${this.classMap(m)}
+						${b({ color: this.error ? p.sys.color.error.default : p.sys.color.primary.default })}
 					>
 						<schmancy-typography type="label" token=${this.size === "sm" ? "sm" : this.size === "lg" ? "lg" : "md"}>
 							${this.label}
@@ -215,25 +198,25 @@ let s = class extends z(I) {
 				`)}
 
 			<input
-				${b({ bgColor: c.sys.color.surface.highest, color: c.sys.color.surface.on })}
+				${b({ bgColor: p.sys.color.surface.highest, color: p.sys.color.surface.on })}
 				${C(this.inputRef)}
 				id=${this.id}
 				name=${this.name}
-				class=${this.classMap(u)}
+				class=${this.classMap(h)}
 				style=${this.styleMap(l)}
 				.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)}
+				inputmode=${u(this.inputmode)}
+				pattern=${u(this.pattern)}
+				step=${u(this.step)}
+				minlength=${u(this.minlength)}
+				maxlength=${u(this.maxlength)}
+				min=${u(this.min)}
+				max=${u(this.max)}
+				list=${u(this.list)}
 				?required=${this.required}
 				?disabled=${this.disabled}
 				?readonly=${this.readonly}
@@ -241,7 +224,7 @@ let s = class extends z(I) {
 				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-label=${u(this.label ? void 0 : this.placeholder || "Input")}
 				aria-autocomplete=${this.list ? "list" : "none"}
 			/>
 
@@ -249,7 +232,7 @@ let s = class extends z(I) {
 					<div
 						id="hint-${this.id}"
 						class="${this.size === "sm" ? "pt-[1px] text-xs" : this.size === "lg" ? "pt-[3px] text-base" : "pt-[2px] text-sm"}"
-						${b({ color: this.error ? c.sys.color.error.default : c.sys.color.primary.default })}
+						${b({ color: this.error ? p.sys.color.error.default : p.sys.color.primary.default })}
 					>
 						<schmancy-typography
 							align="left"
@@ -264,11 +247,11 @@ let s = class extends z(I) {
   }
 };
 s._idCounter = 0, s.formAssociated = !0, s.shadowRootOptions = { ...k.shadowRootOptions, delegatesFocus: !0 }, a([i({ reflect: !0 })], s.prototype, "id", 2), a([i({ type: String })], s.prototype, "label", 2), a([i({ reflect: !0 })], s.prototype, "type", 2), a([i()], s.prototype, "name", 2), a([i()], s.prototype, "placeholder", 2), a([i({ type: String, reflect: !0 })], s.prototype, "value", 2), a([i({ type: String, reflect: !0 })], s.prototype, "pattern", 2), a([i({ type: Boolean, reflect: !0 })], s.prototype, "required", 2), a([i({ type: Boolean, reflect: !0 })], s.prototype, "disabled", 2), a([i({ type: Boolean, reflect: !0 })], s.prototype, "readonly", 2), a([i({ type: Boolean, reflect: !0 })], s.prototype, "clickable", 2), a([i({ type: Boolean, reflect: !0 })], s.prototype, "spellcheck", 2), a([i({ type: String, reflect: !0 })], s.prototype, "align", 2), a([i()], s.prototype, "inputmode", 2), a([i({ type: Number, reflect: !0 })], s.prototype, "minlength", 2), a([i({ type: Number })], s.prototype, "maxlength", 2), a([i()], s.prototype, "min", 2), a([i()], s.prototype, "max", 2), a([i({ type: Number, reflect: !0 })], s.prototype, "step", 2), a([i({ type: Boolean })], s.prototype, "autofocus", 2), a([i({ type: String, reflect: !0 })], s.prototype, "autocomplete", 2), a([i({ type: Number, reflect: !0 })], s.prototype, "tabIndex", 2), a([i()], s.prototype, "hint", 2), a([i({ type: Boolean, reflect: !0 })], s.prototype, "error", 2), a([i({ type: String, reflect: !0 })], s.prototype, "size", 2), a([i({ type: String })], s.prototype, "validateOn", 2), a([i({ type: String })], s.prototype, "list", 2), a([i({ type: String })], s.prototype, "validationMessage", 2), a([R("input")], s.prototype, "inputElement", 2), a([v()], s.prototype, "isAutofilled", 2), a([v()], s.prototype, "touched", 2), a([v()], s.prototype, "dirty", 2), a([v()], s.prototype, "submitted", 2), a([v()], s.prototype, "defaultValue", 2), s = a([V("sch-input")], s);
-var B = Object.defineProperty, M = Object.getOwnPropertyDescriptor, n = (t, e, r, u) => {
-  for (var p, l = u > 1 ? void 0 : u ? M(e, r) : e, y = t.length - 1; y >= 0; y--) (p = t[y]) && (l = (u ? p(e, r, l) : p(l)) || l);
-  return u && l && B(e, r, l), l;
+var B = Object.defineProperty, M = Object.getOwnPropertyDescriptor, o = (t, e, n, h) => {
+  for (var m, l = h > 1 ? void 0 : h ? M(e, n) : e, y = t.length - 1; y >= 0; y--) (m = t[y]) && (l = (h ? m(e, n, l) : m(l)) || l);
+  return h && l && B(e, n, l), l;
 };
-let o = class extends z(I) {
+let r = class extends z(I) {
   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.inputRef = S(), "attachInternals" in this) try {
       this.internals = this.attachInternals();
@@ -277,60 +260,50 @@ let o = class extends z(I) {
     }
   }
   willUpdate(t) {
-    this.id || (this.id = "schmancy-input-" + o._idCounter++), super.willUpdate(t);
+    this.id || (this.id = "schmancy-input-" + r._idCounter++), super.willUpdate(t);
   }
   get form() {
-    var t;
-    return ((t = this.internals) == null ? void 0 : t.form) ?? null;
+    return this.internals?.form ?? null;
   }
   updated(t) {
-    var e, r, u;
-    super.updated(t), t.has("value") && ((e = this.internals) == null || e.setFormValue(this.value)), t.has("error") && (this.error ? (r = this.internals) == null || r.setValidity({ customError: !0 }, "Invalid input", this.inputElement) : (u = this.internals) == null || u.setValidity({}));
+    super.updated(t), t.has("value") && this.internals?.setFormValue(this.value), t.has("error") && (this.error ? this.internals?.setValidity({ customError: !0 }, "Invalid input", this.inputElement) : this.internals?.setValidity({}));
   }
   checkValidity() {
-    var t;
-    return ((t = this.inputRef.value) == null ? void 0 : t.checkValidity()) ?? !0;
+    return this.inputRef.value?.checkValidity() ?? !0;
   }
   reportValidity() {
-    var t;
-    return ((t = this.inputRef.value) == null ? void 0 : t.reportValidity()) ?? !0;
+    return this.inputRef.value?.reportValidity() ?? !0;
   }
   setCustomValidity(t) {
-    var e;
-    (e = this.inputRef.value) == null || e.setCustomValidity(t);
+    this.inputRef.value?.setCustomValidity(t);
   }
   firstUpdated() {
-    this.autofocus && this.focus(), d(this.inputElement, "input").pipe(x((t) => t.target.value), w(), m(this.disconnecting)).subscribe((t) => {
+    this.autofocus && this.focus(), c(this.inputElement, "input").pipe(x((t) => t.target.value), w(), d(this.disconnecting)).subscribe((t) => {
       this.value = t, this.dispatchEvent(new CustomEvent("input", { detail: { value: t }, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: { value: t }, bubbles: !0, composed: !0 }));
-    }), d(this.inputElement, "change").pipe(x((t) => t.target.value), w(), m(this.disconnecting)).subscribe((t) => {
+    }), c(this.inputElement, "change").pipe(x((t) => t.target.value), w(), d(this.disconnecting)).subscribe((t) => {
       this.value = t, this.dispatchEvent(new CustomEvent("change", { detail: { value: t }, bubbles: !0, composed: !0 }));
-    }), d(this.inputElement, "keyup").pipe(g((t) => t.key === "Enter"), m(this.disconnecting)).subscribe((t) => {
+    }), c(this.inputElement, "keyup").pipe(g((t) => t.key === "Enter"), d(this.disconnecting)).subscribe((t) => {
       const { value: e } = t.target;
       this.value = e, this.dispatchEvent(new CustomEvent("enter", { detail: { value: e }, bubbles: !0, composed: !0 }));
-    }), d(this.inputElement, "animationstart").pipe(g((t) => t.animationName === "onAutoFillStart"), m(this.disconnecting)).subscribe((t) => {
+    }), c(this.inputElement, "animationstart").pipe(g((t) => t.animationName === "onAutoFillStart"), d(this.disconnecting)).subscribe((t) => {
       const { value: e } = t.target;
       this.value = e, this.dispatchEvent(new CustomEvent("change", { detail: { value: e }, bubbles: !0, composed: !0 }));
     });
   }
   select() {
-    var t;
-    return (t = this.inputRef.value) == null ? void 0 : t.select();
+    return this.inputRef.value?.select();
   }
   getValidity() {
-    var t;
-    return (t = this.inputRef.value) == null ? void 0 : t.validity;
+    return this.inputRef.value?.validity;
   }
   focus(t) {
-    var e;
-    (e = this.inputRef.value) == null || e.focus(t), this.dispatchEvent(new Event("focus"));
+    this.inputRef.value?.focus(t), this.dispatchEvent(new Event("focus"));
   }
   click() {
-    var t;
-    (t = this.inputRef.value) == null || t.click(), this.dispatchEvent(new Event("click"));
+    this.inputRef.value?.click(), this.dispatchEvent(new Event("click"));
   }
   blur() {
-    var t;
-    (t = this.inputRef.value) == null || t.blur(), this.dispatchEvent(new Event("blur"));
+    this.inputRef.value?.blur(), this.dispatchEvent(new Event("blur"));
   }
   render() {
     const t = { "w-full flex-1 h-[50px] rounded-[8px] border-0 px-[8px] sm:px-[12px] md:px-[16px]": !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" }, e = { "opacity-40": this.disabled, "block mb-[4px]": !0 };
@@ -340,14 +313,14 @@ let o = class extends z(I) {
 						for=${this.id}
 						id="label-${this.id}"
 						class=${this.classMap(e)}
-						${b({ color: this.error ? c.sys.color.error.default : c.sys.color.primary.default })}
+						${b({ color: this.error ? p.sys.color.error.default : p.sys.color.primary.default })}
 					>
 						<schmancy-typography type="label" token="lg">${this.label}</schmancy-typography>
 					</label>
 				`)}
 
 			<input
-				${b({ bgColor: c.sys.color.surface.highest, color: c.sys.color.surface.on })}
+				${b({ bgColor: p.sys.color.surface.highest, color: p.sys.color.surface.on })}
 				${C(this.inputRef)}
 				id=${this.id}
 				name=${this.name}
@@ -357,13 +330,13 @@ let o = class extends z(I) {
 				.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)}
+				inputmode=${u(this.inputmode)}
+				pattern=${u(this.pattern)}
+				step=${u(this.step)}
+				minlength=${u(this.minlength)}
+				maxlength=${u(this.maxlength)}
+				min=${u(this.min)}
+				max=${u(this.max)}
 				?required=${this.required}
 				?disabled=${this.disabled}
 				?readonly=${this.readonly}
@@ -371,14 +344,14 @@ let o = class extends z(I) {
 				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-label=${u(this.label ? void 0 : this.placeholder || "Input")}
 			/>
 
 			${$(this.hint, () => f`
 					<div
 						id="hint-${this.id}"
 						class="pt-[2px]"
-						${b({ color: this.error ? c.sys.color.error.default : c.sys.color.primary.default })}
+						${b({ color: this.error ? p.sys.color.error.default : p.sys.color.primary.default })}
 					>
 						<schmancy-typography align="left" type="label"> ${this.hint} </schmancy-typography>
 					</div>
@@ -386,5 +359,5 @@ let o = class extends z(I) {
 		`;
   }
 };
-o._idCounter = 0, o.formAssociated = !0, o.shadowRootOptions = { ...k.shadowRootOptions, delegatesFocus: !0 }, n([i({ reflect: !0 })], o.prototype, "id", 2), n([i({ type: String })], o.prototype, "label", 2), n([i({ reflect: !0 })], o.prototype, "type", 2), n([i()], o.prototype, "name", 2), n([i()], o.prototype, "placeholder", 2), n([i({ type: String, reflect: !0 })], o.prototype, "value", 2), n([i({ type: String, reflect: !0 })], o.prototype, "pattern", 2), n([i({ type: Boolean, reflect: !0 })], o.prototype, "required", 2), n([i({ type: Boolean, reflect: !0 })], o.prototype, "disabled", 2), n([i({ type: Boolean, reflect: !0 })], o.prototype, "readonly", 2), n([i({ type: Boolean, reflect: !0 })], o.prototype, "clickable", 2), n([i({ type: Boolean, reflect: !0 })], o.prototype, "spellcheck", 2), n([i({ type: String, reflect: !0 })], o.prototype, "align", 2), n([i()], o.prototype, "inputmode", 2), n([i({ type: Number })], o.prototype, "minlength", 2), n([i({ type: Number })], o.prototype, "maxlength", 2), n([i()], o.prototype, "min", 2), n([i()], o.prototype, "max", 2), n([i({ type: Number, reflect: !0 })], o.prototype, "step", 2), n([i({ type: Boolean })], o.prototype, "autofocus", 2), n([i({ type: String, reflect: !0 })], o.prototype, "autocomplete", 2), n([i({ type: Number, reflect: !0 })], o.prototype, "tabIndex", 2), n([i()], o.prototype, "hint", 2), n([i({ type: Boolean, reflect: !0 })], o.prototype, "error", 2), n([R("input")], o.prototype, "inputElement", 2), o = n([V("schmancy-input")], o);
-//# sourceMappingURL=input-CpYu_aUV.js.map
+r._idCounter = 0, r.formAssociated = !0, r.shadowRootOptions = { ...k.shadowRootOptions, delegatesFocus: !0 }, o([i({ reflect: !0 })], r.prototype, "id", 2), o([i({ type: String })], r.prototype, "label", 2), o([i({ reflect: !0 })], r.prototype, "type", 2), o([i()], r.prototype, "name", 2), o([i()], r.prototype, "placeholder", 2), o([i({ type: String, reflect: !0 })], r.prototype, "value", 2), o([i({ type: String, reflect: !0 })], r.prototype, "pattern", 2), o([i({ type: Boolean, reflect: !0 })], r.prototype, "required", 2), o([i({ type: Boolean, reflect: !0 })], r.prototype, "disabled", 2), o([i({ type: Boolean, reflect: !0 })], r.prototype, "readonly", 2), o([i({ type: Boolean, reflect: !0 })], r.prototype, "clickable", 2), o([i({ type: Boolean, reflect: !0 })], r.prototype, "spellcheck", 2), o([i({ type: String, reflect: !0 })], r.prototype, "align", 2), o([i()], r.prototype, "inputmode", 2), o([i({ type: Number })], r.prototype, "minlength", 2), o([i({ type: Number })], r.prototype, "maxlength", 2), o([i()], r.prototype, "min", 2), o([i()], r.prototype, "max", 2), o([i({ type: Number, reflect: !0 })], r.prototype, "step", 2), o([i({ type: Boolean })], r.prototype, "autofocus", 2), o([i({ type: String, reflect: !0 })], r.prototype, "autocomplete", 2), o([i({ type: Number, reflect: !0 })], r.prototype, "tabIndex", 2), o([i()], r.prototype, "hint", 2), o([i({ type: Boolean, reflect: !0 })], r.prototype, "error", 2), o([R("input")], r.prototype, "inputElement", 2), r = o([V("schmancy-input")], r);
+//# sourceMappingURL=input-6XNB7MZP.js.map