@solid-design-system/components 4.6.0 → 4.6.2

package/dist/chunks/{chunk.J6PAMLVK.js → chunk.2BTNPIIA.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.6LYLGSX3.js → chunk.2PUHCALR.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.Y2FOO3FA.js → chunk.33Z66RGK.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.OXBXUGWH.js → chunk.4FGGIABU.js}

@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.YK6S6HZ4.js → chunk.55MYJKOZ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.F6HAHWTA.js → chunk.5FQR2C3Z.js}

@@ -1,9 +1,9 @@
 import {
   SdTag
-} from "./chunk.4UFJQHKS.js";
+} from "./chunk.JFUXDVSP.js";
 import {
   SdPopup
-} from "./chunk.J6PAMLVK.js";
+} from "./chunk.2BTNPIIA.js";
 import {
   defaultValue
 } from "./chunk.GI7VDIWX.js";
@@ -19,7 +19,7 @@ import {
 } from "./chunk.N4LHE3QK.js";
 import {
   SdIcon
-} from "./chunk.OXBXUGWH.js";
+} from "./chunk.4FGGIABU.js";
 import {
   animateTo,
   stopAnimations
@@ -39,7 +39,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.IM5JZDS3.js → chunk.5WMLZS55.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.X76Z4RXF.js → chunk.6BZVWWJH.js}

@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.LC3D4URT.js → chunk.6GEEKZAO.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.MQ6ICGPI.js → chunk.7LEAXICZ.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.VVQFKQCA.js → chunk.BPSZYJ7Z.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.NEKLPVFO.js → chunk.CWDRTJP6.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -190,7 +190,8 @@ var SdButton = class extends SolidElement {
         lg: "mr-2"
       }[this.size]
     )}"></slot><slot part="label" id="content" class="${cx(
-      slots["icon-only"] ? "flex flex-auto items-center pointer-events-none" : "inline-block",
+      "inline-flex items-center justify-center",
+      slots["icon-only"] && "pointer-events-none",
       this.loading && "invisible"
     )}"></slot><slot name="icon-right" part="icon-right" class="${cx(
       "flex flex-auto items-center pointer-events-none",

package/dist/chunks/{chunk.7TMWATHG.js → chunk.DTROPLWA.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.MVNSX2YV.js → chunk.DWJJNVK4.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.342YDQBD.js → chunk.DXNE63DE.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.R5XFXSJX.js → chunk.EEZURJVH.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.XIMBKTC4.js → chunk.FHD45LNI.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.64BWZ3LX.js → chunk.G22VBGDU.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.OJPRPWQ6.js → chunk.GE2RNW2L.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.YFQEXSPT.js → chunk.HGCAGKAN.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.SMEOTY3O.js → chunk.HGTEA7ZU.js}

@@ -1,9 +1,9 @@
 import {
   SdTag
-} from "./chunk.4UFJQHKS.js";
+} from "./chunk.JFUXDVSP.js";
 import {
   SdPopup
-} from "./chunk.J6PAMLVK.js";
+} from "./chunk.2BTNPIIA.js";
 import {
   defaultValue
 } from "./chunk.GI7VDIWX.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk.N4LHE3QK.js";
 import {
   SdIcon
-} from "./chunk.OXBXUGWH.js";
+} from "./chunk.4FGGIABU.js";
 import {
   animateTo,
   stopAnimations
@@ -48,7 +48,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.BWM7HK6T.js → chunk.HVQFYN4Q.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ROZOXNYF.js → chunk.IBGXHO4B.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.M5FMORVS.js";
+} from "./chunk.ODT6T47Z.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.R5NZJWEY.js → chunk.IT5IEST5.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.OL2UOEVU.js → chunk.J46EMIEI.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.4UFJQHKS.js → chunk.JFUXDVSP.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.55H4GBUB.js → chunk.JOE2FCYM.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.RTCWEXYZ.js → chunk.KNC4IRP2.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.GJ5ZL7G4.js → chunk.KZTW7NPR.js}

@@ -1,6 +1,6 @@
 import {
   SdRadio
-} from "./chunk.E34LORFJ.js";
+} from "./chunk.RQ7H3KYN.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -9,7 +9,7 @@ import {
 } from "./chunk.KVKRZJS7.js";
 import {
   SdButtonGroup
-} from "./chunk.2IOIJOEY.js";
+} from "./chunk.QTKOFCJ2.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ITN656DK.js → chunk.LC3HWWVO.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.DH7CSW7E.js → chunk.MONGBDKC.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.TPJVN72V.js → chunk.NCWRKGWV.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.M5FMORVS.js → chunk.ODT6T47Z.js}

@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.BDDUJR5B.js → chunk.OSFHS5G5.js}

@@ -28,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.UC7VV6EF.js → chunk.OV6G7CEM.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.js";

package/dist/chunks/{chunk.6NJK6JPU.js → chunk.PLE7R7FE.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.DDHJSPNQ.js → chunk.PYP5VT7Q.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.64ZFR4OK.js → chunk.QI3HLIGL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.2LMWBUBT.js";
 import {
   SdCarouselItem
-} from "./chunk.64BWZ3LX.js";
+} from "./chunk.G22VBGDU.js";
 import {
   prefersReducedMotion
 } from "./chunk.EY4JPJJQ.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.2IOIJOEY.js → chunk.QTKOFCJ2.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ZCST44QS.js → chunk.RHXSPE3W.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.5V36G6NT.js → chunk.RM6FOML7.js}

@@ -1,6 +1,6 @@
 import {
   SdDivider
-} from "./chunk.OL2UOEVU.js";
+} from "./chunk.J46EMIEI.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.E34LORFJ.js → chunk.RQ7H3KYN.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.JFU6G72P.js → chunk.UQGHMQG5.js}

@@ -28,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.DPXI2Q7Y.js → chunk.VFE45I2T.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ACEQGXCU.js → chunk.W4ODHTDG.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.UQ4F6T5U.js → chunk.W4P6W76T.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -25,19 +25,13 @@ var SdBadge = class extends SolidElement {
         blue: !this.inverted ? "text-white bg-primary-500 border-white" : "text-primary bg-primary-100 border-primary",
         green: !this.inverted ? "text-white bg-success border-white" : "text-white bg-success border-primary",
         red: !this.inverted ? "text-white bg-error border-white" : "text-white bg-error border-primary"
-      }[this.variant],
-      {
-        /* size and fonts*/
-        sm: "h-2 min-w-2",
-        md: "h-4 px-1 min-w-4",
-        lg: "h-5 min-w-5"
-      }[this.size]
+      }[this.variant]
     )}"><span id="content" part="content" class="${cx(this.size === "sm" && "sr-only")}"><slot></slot></span></span>`;
   }
 };
 SdBadge.styles = [
   ...SolidElement.styles,
-  css`:host{align-items:center;display:inline-flex;justify-content:center}:host([size=md]){font-size:.625rem}:host([size=lg]){font-size:.75rem}:host([size=lg])::part(base){padding-left:.313rem;padding-right:.313rem}`
+  css`:host{align-items:center;display:inline-flex;justify-content:center}:host([size=md]){font-size:.625rem;height:var(--sd-spacing-4,1rem);min-width:var(--sd-spacing-4,1rem)}:host([size=lg]){font-size:.75rem;height:var(--sd-spacing-5,1.25rem);min-width:var(--sd-spacing-5,1.25rem)}:host([size=sm])::part(base){height:var(--sd-spacing-2,.5rem);min-width:var(--sd-spacing-2,.5rem)}:host([size=md])::part(base){padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}:host([size=lg])::part(base){padding-left:.313rem;padding-right:.313rem}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })

package/dist/chunks/{chunk.SFKTVZHK.js → chunk.WECFZLMT.js}

@@ -24,7 +24,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.F4OMEZQP.js → chunk.WM45G2PF.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.5O6BWTAZ.js";
+} from "./chunk.Z7LGSMQC.js";
 import {
   __decorateClass,
   __spreadValues
@@ -378,7 +378,7 @@ var SdInput = class extends SolidElement {
       this.size === "sm" ? "h-6" : "h-8",
       textSize,
       this.visuallyDisabled && "cursor-not-allowed"
-    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**