@solid-design-system/components 5.17.2 → 5.17.3

package/dist/chunks/{chunk.ZUL25WD4.js → chunk.22JGWQHD.js}

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

package/dist/chunks/{chunk.IKDVBWFR.js → chunk.23MU4JA7.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.TD5EDBVC.js → chunk.2SPLNABG.js}

@@ -27,7 +27,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.AUMWRORX.js → chunk.2YP3NW54.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.5L52M55A.js → chunk.35JOBQN4.js}

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

package/dist/chunks/{chunk.QPBJEOPN.js → chunk.3EBQKONT.js}

@@ -21,7 +21,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.JUZY76ML.js → chunk.45D7TZY2.js}

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

package/dist/chunks/{chunk.URTB3C7J.js → chunk.4JRGV2NE.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.J2MPIUT5.js → chunk.5ELWG4EZ.js}

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

package/dist/chunks/{chunk.P2JBJQH6.js → chunk.5XO674YZ.js}

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

package/dist/chunks/{chunk.AZ5YCFXX.js → chunk.6AKV5ZRR.js}

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

package/dist/chunks/{chunk.246LUIGB.js → chunk.6LF3BYIY.js}

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

package/dist/chunks/{chunk.OH3W4PGL.js → chunk.6RK24NSS.js}

@@ -35,7 +35,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.CA5LQ5RH.js → chunk.76BN4PS7.js}

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

package/dist/chunks/{chunk.VUTMPKYK.js → chunk.7UTDD55I.js}

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

package/dist/chunks/{chunk.KMU4KABG.js → chunk.B3QSQ6K7.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.6OGLZOU3.js → chunk.CJ7IHVFY.js}

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

package/dist/chunks/{chunk.TMJN75ST.js → chunk.CQ67F2XR.js}

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

package/dist/chunks/{chunk.ZAQS4XFO.js → chunk.CURHDJV6.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.MCUIYSD6.js";
+} from "./chunk.KS2U7CKH.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.4VSYGWIQ.js → chunk.CVZH2VLL.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,

package/dist/chunks/{chunk.HTEXYS4A.js → chunk.D2O3R3AC.js}

@@ -26,7 +26,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.NBHVDDUK.js → chunk.EBA2FO3J.js}

@@ -11,7 +11,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.WRP3NGPP.js → chunk.EGKZTSJA.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,

package/dist/chunks/{chunk.WTG2WY6X.js → chunk.EX2IEIQK.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.js";

package/dist/chunks/{chunk.FPIRMH7R.js → chunk.EZZAAWNK.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.E4O3LVAZ.js → chunk.FRJAG3MQ.js}

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

package/dist/chunks/{chunk.DOGMVREV.js → chunk.FUCATISJ.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass,
   __spreadValues
@@ -147,6 +147,7 @@ var SdInput = class extends SolidElement {
     this.name = "";
     this.title = "";
     this.required = false;
+    this.floatingLabel = false;
     this.styleOnValid = false;
     this.spellcheck = true;
   }
@@ -344,6 +345,9 @@ var SdInput = class extends SolidElement {
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasClearIcon = this.clearable && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
     const hasTooltip = !!slots["tooltip"];
+    const hasIconLeft = slots["left"];
+    const hasValue = this.value !== null && String(this.value).length > 0;
+    const isFloatingLabelActive = this.floatingLabel && hasLabel && (this.hasFocus || hasValue || this.placeholder);
     const inputState = this.disabled ? "disabled" : this.visuallyDisabled && !this.hasFocus ? "visuallyDisabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
     const textSize = this.size === "sm" ? "text-sm" : "text-base";
     const borderColor = {
@@ -364,7 +368,9 @@ var SdInput = class extends SolidElement {
       md: "text-lg",
       lg: "text-xl"
     }[this.size];
-    return html`<div part="form-control" class="${cx((this.disabled || this.visuallyDisabled) && "cursor-not-allowed")}">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx(
+    const verticalPadding = this.size === "lg" ? !this.floatingLabel ? "py-2" : isFloatingLabelActive ? "py-3" : "py-4" : !this.floatingLabel ? "py-1" : isFloatingLabelActive ? "py-2" : "py-3";
+    const floatingLabelHorizontalAlignmentWithIconLeft = { sm: "left-[36px]", md: "left-[44px]", lg: "left-12" }[this.size];
+    return html`<div part="form-control" class="${cx((this.disabled || this.visuallyDisabled) && "cursor-not-allowed")}">${(hasLabel || hasTooltip) && !this.floatingLabel ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx(
       "relative w-full",
       this.disabled && "pointer-events-none",
       this.visuallyDisabled && "cursor-not-allowed"
@@ -373,19 +379,33 @@ var SdInput = class extends SolidElement {
       borderColor
     )}"></div><div part="base" class="${cx(
       "px-4 flex flex-row items-center rounded-default transition-colors ease-in-out duration-medium hover:duration-fast",
-      // Vertical Padding
-      this.size === "lg" ? "py-2" : "py-1",
       // States
       !this.disabled && !this.readonly && !this.visuallyDisabled ? "hover:bg-neutral-200" : "",
       this.readonly ? "bg-neutral-100" : "bg-white",
-      inputState === "disabled" || inputState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
+      inputState === "disabled" || inputState === "visuallyDisabled" ? "text-neutral-500" : "text-black",
+      verticalPadding
     )}">${slots["left"] ? html`<slot name="left" part="left" class="${cx("inline-flex", this.size === "sm" ? "mr-1" : "mr-2", iconColor, iconSize)}"></slot>` : ""} <input part="input" id="input" class="${cx(
       "min-w-0 flex-grow focus:outline-none bg-transparent",
       this.visuallyDisabled || this.disabled ? "placeholder-neutral-500 cursor-not-allowed" : "placeholder-neutral-700",
-      this.size === "sm" ? "h-6" : "h-8",
-      textSize
+      this.size === "sm" ? isFloatingLabelActive ? "h-4" : "h-6" : isFloatingLabelActive ? "h-6" : "h-8",
+      textSize,
+      isFloatingLabelActive && "leading-none mt-4"
     )}" 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="${// eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ifDefined(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("text-neutral-700", iconSize)}" library="_internal" 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="_internal" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="_internal" 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="_internal" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" 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="_internal" 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="_internal" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" 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-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    ifDefined(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}"> ${hasLabel && this.floatingLabel ? html`<label part="form-control-floating-label" class="${cx(
+      "pointer-events-none absolute",
+      hasIconLeft ? floatingLabelHorizontalAlignmentWithIconLeft : "left-4",
+      !this.readonly && "transition-all duration-medium ease-out",
+      !isFloatingLabelActive || !hasValue && (this.readonly || this.visuallyDisabled) ? "top-1/2 -translate-y-1/2" : this.size === "lg" ? "top-2" : "top-1"
+    )}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><span id="floating-label" class="${cx(
+      "pointer-events-none leading-none",
+      !this.readonly && "transition-all duration-medium ease-out",
+      !isFloatingLabelActive || !hasValue && (this.readonly || this.visuallyDisabled) ? "text-base" : "text-xs",
+      (this.visuallyDisabled || this.disabled) && "text-neutral-500",
+      isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "text-neutral-700"
+    )}">${this.label}</span></label>` : null} ${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(
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-neutral-700",
+      iconSize
+    )}" library="_internal" 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="_internal" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconSize)}" library="_internal" 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="_internal" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" 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="_internal" 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="_internal" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" 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-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -393,7 +413,7 @@ var SdInput = class extends SolidElement {
  */
 SdInput.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #label:after{content:" *"}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}`
+  css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) :is(#label,#floating-label):after{content:" *"}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}`
 ];
 __decorateClass([
   query("#input")
@@ -479,6 +499,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdInput.prototype, "required", 2);
+__decorateClass([
+  property({ attribute: "floating-label", type: Boolean, reflect: true })
+], SdInput.prototype, "floatingLabel", 2);
 __decorateClass([
   property()
 ], SdInput.prototype, "pattern", 2);

package/dist/chunks/{chunk.QPBHKXL6.js → chunk.FWUEEHWY.js}

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

package/dist/chunks/{chunk.TJKIQ2ZR.js → chunk.H2XMCGBK.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";