@solid-design-system/components 6.0.0-next.22 → 6.0.0-next.24

package/dist/chunks/{chunk.ARH5HQTN.js → chunk.2KNNUBKN.js}

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

package/dist/chunks/{chunk.RJWK5GMF.js → chunk.2WQCSOBT.js}

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

package/dist/chunks/{chunk.RD3IRAC3.js → chunk.32IX6D3L.js}

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

package/dist/chunks/{chunk.SMJX5NIM.js → chunk.37OK4KWY.js}

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

package/dist/chunks/{chunk.IAEZIPFH.js → chunk.4NTO3WSB.js}

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

package/dist/chunks/{chunk.ESO3UE3C.js → chunk.5CGWX5RR.js}

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

package/dist/chunks/{chunk.RR3Q5MBE.js → chunk.5L5PZI7S.js}

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

package/dist/chunks/{chunk.4QTDQJIH.js → chunk.6VXSQ6EW.js}

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

package/dist/chunks/{chunk.YF3BJYUM.js → chunk.6XHQXYWH.js}

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

package/dist/chunks/{chunk.IAEDCKKK.js → chunk.BPDXM4IA.js}

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

package/dist/chunks/{chunk.ONQR2THN.js → chunk.CNEVB3DU.js}

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

package/dist/chunks/{chunk.6VZW3ADW.js → chunk.DDFLKY5G.js}

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

package/dist/chunks/{chunk.D7D7W462.js → chunk.EAYDTYXQ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.FNYEXUNK.js";
 import {
   SdCarouselItem
-} from "./chunk.RJWK5GMF.js";
+} from "./chunk.2WQCSOBT.js";
 import {
   AutoplayController
 } from "./chunk.F4VGSDIW.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   prefersReducedMotion
 } from "./chunk.HQWAKJBV.js";

package/dist/chunks/{chunk.MI6R5ZZP.js → chunk.EFJRL7C3.js}

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

package/dist/chunks/{chunk.ZKYLWME6.js → chunk.EMHDLIJ3.js}

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

package/dist/chunks/{chunk.7FO25F4H.js → chunk.HGBP6KHT.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -102,6 +102,7 @@ var SdDatepicker = class extends SolidElement {
     this.alignment = "left";
     this.label = "";
     this.helpText = "";
+    this.floatingLabel = false;
     this.disabled = false;
     this.required = false;
     this.visuallyDisabled = false;
@@ -1277,6 +1278,8 @@ var SdDatepicker = class extends SolidElement {
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasTooltip = !!slots["tooltip"];
+    const hasValue = this.value !== null && String(this.value).length > 0 || this.range && this.rangeStart !== null || this.rangeEnd !== null;
+    const isFloatingLabelActive = this.floatingLabel && hasLabel && (this.hasFocus || this.open || hasValue) && !this.disabled && !this.visuallyDisabled;
     const iconColor = this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary";
     const iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
     const iconSize = { sm: "text-base", md: "text-lg", lg: "text-xl" }[this.size];
@@ -1297,7 +1300,7 @@ var SdDatepicker = class extends SolidElement {
       "min-w-[284px]",
       this.open && "z-50",
       (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 form-control-color-text" : "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(
+    )}">${hasLabel && !this.floatingLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block form-control-color-text" : "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"
@@ -1306,7 +1309,15 @@ var SdDatepicker = class extends SolidElement {
       borderColor,
       this.open && this.alignment === "left" ? "rounded-bl-none" : "",
       this.open && this.alignment === "right" ? "rounded-br-none" : ""
-    )}"></div><sd-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx("inline-flex relative w-full")}" sync="width" auto-size="vertical" auto-size-padding="10" exportparts="popup:popup__content,"><div part="base" class="${cx(
+    )}">${hasLabel && this.floatingLabel ? html`<label id="label" part="form-control-floating-label" class="${cx(
+      "absolute left-4 z-20 pointer-events-none transition-all duration-200",
+      !isFloatingLabelActive ? "top-1/2 -translate-y-1/2 text-base" : this.size === "lg" ? "top-2 text-xs" : "top-1 text-xs",
+      isFloatingLabelActive && "mt-1"
+    )}" for="input"><span class="${cx(
+      "leading-none",
+      (this.visuallyDisabled || this.disabled) && "text-neutral-500",
+      isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "form-control--filled__floating-label-color-text"
+    )}">${this.label}</span></label>` : null}</div><sd-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx("inline-flex relative w-full")}" sync="width" auto-size="vertical" auto-size-padding="10" exportparts="popup:popup__content,"><div part="base" class="${cx(
       "px-4 flex flex-row items-center rounded-default transition-colors ease-in-out duration-medium hover:duration-fast w-full",
       !this.disabled && !this.readonly && !this.visuallyDisabled ? "hover:bg-neutral-200" : "",
       this.readonly ? "bg-neutral-100" : "bg-white",
@@ -1315,8 +1326,9 @@ var SdDatepicker = class extends SolidElement {
       "min-w-0 flex-grow focus:outline-none bg-transparent hover:cursor-pointer form-control-color-text",
       this.visuallyDisabled || this.disabled ? "placeholder:text-neutral-500 cursor-not-allowed" : "placeholder:text-neutral-700",
       { sm: "h-8", md: "h-10", lg: "h-12" }[this.size],
-      textSize
-    )}" autocomplete="off" spellcheck="false" placeholder="${this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly || this.visuallyDisabled}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${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>` : ""}<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-icon>${this.renderCalendar()}</div></sd-popup></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()}`;
+      textSize,
+      this.floatingLabel && "mt-4"
+    )}" autocomplete="off" spellcheck="false" placeholder="${!this.floatingLabel || isFloatingLabelActive ? this.placeholder || this.localize.term(this.range ? "dateRangePlaceholder" : "datePlaceholder") : ""}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly || this.visuallyDisabled}" @input="${this.handleInput}" @click="${this.handleMouseDown}" @keydown="${this.handleInputKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleInputBlur}" @invalid="${this.handleInvalid}"> ${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>` : ""}<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-icon>${this.renderCalendar()}</div></sd-popup></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()}`;
   }
 };
 SdDatepicker.styles = [
@@ -1372,6 +1384,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "help-text", reflect: true })
 ], SdDatepicker.prototype, "helpText", 2);
+__decorateClass([
+  property({ attribute: "floating-label", type: Boolean, reflect: true })
+], SdDatepicker.prototype, "floatingLabel", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDatepicker.prototype, "disabled", 2);

package/dist/chunks/{chunk.2Z7CXAOD.js → chunk.HIHJFSSK.js}

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

package/dist/chunks/{chunk.QZBVTJJG.js → chunk.HXD2XVDE.js}

@@ -35,7 +35,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   animateTo,
   stopAnimations
@@ -83,6 +83,7 @@ var SdCombobox = class extends SolidElement {
     this.helpText = "";
     this.form = "";
     this.required = false;
+    this.floatingLabel = false;
     this.type = "text";
     this.currentPlacement = this.placement;
     this.getOption = defaultOptionRenderer;
@@ -760,6 +761,9 @@ var SdCombobox = class extends SolidElement {
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
     const hasClearIcon = this.clearable && !this.disabled && !this.visuallyDisabled;
+    const hasIconLeft = slots["left"];
+    const hasValue = this.value !== null && String(this.value).length > 0;
+    const isFloatingLabelActive = this.floatingLabel && hasLabel && (this.hasFocus || hasValue);
     const selectState = this.disabled ? "disabled" : this.visuallyDisabled && !this.hasFocus ? "visuallyDisabled" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus || this.open ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
     const cursorStyles = this.disabled || this.visuallyDisabled ? "cursor-not-allowed" : "cursor-pointer";
     const iconColor = this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary";
@@ -770,12 +774,23 @@ var SdCombobox = class extends SolidElement {
       md: "text-lg",
       lg: "text-xl"
     }[this.size];
+    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(
       "relative text-left",
       cursorStyles,
       this.size === "sm" ? "text-sm" : "text-base",
       this.open && "z-50"
-    )}"><label id="label" part="form-control-label" class="${hasLabel && "inline-block mb-2 form-control-color-text"}" aria-hidden="${!hasLabel}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label> <span aria-live="polite" class="sr-only">${this.deletedTagLabel}</span><div part="form-control-input" class="relative w-full bg-white text-black"><div part="border" class="${cx(
+    )}">${hasLabel && !this.floatingLabel ? html`<div class="flex items-center gap-1 mb-2"><label id="label" part="form-control-label" class="${hasLabel && "inline-block form-control-color-text"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label></div>` : null} <span aria-live="polite" class="sr-only">${this.deletedTagLabel}</span><div part="form-control-input" class="relative w-full bg-white text-black">${hasLabel && this.floatingLabel ? html`<label id="label" part="form-control-floating-label" class="${cx(
+      "absolute left-4 z-20 pointer-events-none transition-all duration-200",
+      hasIconLeft ? floatingLabelHorizontalAlignmentWithIconLeft : "left-4",
+      !isFloatingLabelActive ? "top-1/2 -translate-y-1/2 text-base" : this.size === "lg" ? "top-2 text-xs" : "top-1 text-xs",
+      isFloatingLabelActive && "mt-1"
+    )}" for="input"><span class="${cx(
+      "leading-none",
+      (this.visuallyDisabled || this.disabled) && "text-neutral-500",
+      isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "form-control--filled__floating-label-color-text"
+    )}">${this.label}</span></label>` : null}<div part="border" class="${cx(
       "absolute top-0 w-full h-full pointer-events-none border rounded-default z-10 transition-[border] duration-medium ease-in-out",
       {
         disabled: "border-neutral-500",
@@ -803,12 +818,15 @@ var SdCombobox = class extends SolidElement {
         sm: "py-1 min-h-[32px]",
         md: "py-1 min-h-[40px]",
         lg: "py-2 min-h-[48px]"
-      }[this.size]
-    )}" slot="anchor" @keydown="${this.handleComboboxKeyDown}" @mousedown="${this.handleComboboxMouseDown}">${slots["left"] ? html`<slot part="left" name="left" class="${cx("inline-flex", iconMarginRight, iconColor, iconSize)}"></slot>` : ""} ${this.multiple && this.useTags && this.tags.length > 0 ? html`<div part="tags" class="${cx("flex items-center gap-1", iconMarginRight)}">${this.tags}</div>` : null} <input id="display-input" name="${this.name}" form="${this.form}" part="display-input" class="${cx(
+      }[this.size],
+      verticalPadding
+    )}" slot="anchor" @keydown="${this.handleComboboxKeyDown}" @mousedown="${this.handleComboboxMouseDown}">${slots["left"] ? html`<slot part="left" name="left" class="${cx("inline-flex", iconMarginRight, iconColor, iconSize)}"></slot>` : ""} ${this.multiple && this.useTags && this.tags.length > 0 ? html`<div part="tags" class="${cx("flex items-center gap-1", iconMarginRight, this.floatingLabel && "mt-4")}">${this.tags}</div>` : null} <input id="display-input" name="${this.name}" form="${this.form}" part="display-input" class="${cx(
       "appearance-none outline-none bg-transparent flex-auto min-w-0",
       cursorStyles,
-      this.selectedTextLabel && !this.multiple ? "placeholder:form-control-color-text" : "placeholder:text-neutral-700"
-    )}" type="text" placeholder="${this.selectedTextLabel && !this.multiple ? this.selectedTextLabel : this.placeholder || this.localize.term("comboboxDefaultPlaceholder")}" .disabled="${this.disabled}" .value="${this.displayInputValue}" autocomplete="off" spellcheck="false" autocapitalize="off" aria-controls="listbox" aria-expanded="${this.open}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled || this.visuallyDisabled}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}" aria-autocomplete="list" aria-owns="listbox" @input="${this.handleInput}" @change="${this.handleChange}"><div aria-live="polite" id="control-value" class="absolute top-0 left-0 opacity-0 -z-10">${this.selectedOptions.map((option) => option == null ? void 0 : option.getTextLabel()).join(", ")}</div><input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-controls="control-value" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx(
+      this.selectedTextLabel && !this.multiple ? "placeholder:form-control-color-text" : "placeholder:text-neutral-700",
+      this.size === "sm" ? isFloatingLabelActive ? "h-4" : "h-6" : isFloatingLabelActive ? "h-6" : "h-8",
+      isFloatingLabelActive && "leading-none mt-4"
+    )}" type="text" placeholder="${!this.floatingLabel || isFloatingLabelActive ? this.selectedTextLabel && !this.multiple ? this.selectedTextLabel : this.placeholder || this.localize.term("comboboxDefaultPlaceholder") : ""}" .disabled="${this.disabled}" .value="${this.displayInputValue}" autocomplete="off" spellcheck="false" autocapitalize="off" aria-controls="listbox" aria-expanded="${this.open}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled || this.visuallyDisabled}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}" aria-autocomplete="list" aria-owns="listbox" @input="${this.handleInput}" @change="${this.handleChange}"><div aria-live="polite" id="control-value" class="absolute top-0 left-0 opacity-0 -z-10">${this.selectedOptions.map((option) => option == null ? void 0 : option.getTextLabel()).join(", ")}</div><input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-controls="control-value" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx(
       "flex justify-center",
       iconMarginLeft,
       this.value.length > 0 ? "visible" : "invisible"
@@ -823,7 +841,7 @@ var SdCombobox = class extends SolidElement {
       "bg-white px-2 py-3 relative border-primary overflow-y-auto",
       this.open && "shadow transition-shadow duration-medium ease-in-out",
       this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default" : "border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default"
-    )}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-popup></div><div part="form-control-help-text" id="help-text" class="text-sm text-neutral-700 mt-1" aria-hidden="${!hasHelpText}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-popup></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()}`;
   }
 };
 SdCombobox.styles = [
@@ -941,6 +959,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdCombobox.prototype, "required", 2);
+__decorateClass([
+  property({ attribute: "floating-label", type: Boolean, reflect: true })
+], SdCombobox.prototype, "floatingLabel", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], SdCombobox.prototype, "type", 2);

package/dist/chunks/{chunk.PSFJL5BC.js → chunk.IXGD5CJO.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.4KOK7NFI.js → chunk.KBXGHMNB.js}

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

package/dist/chunks/{chunk.HSAMYW74.js → chunk.L3VE4QNO.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -45,6 +45,7 @@ var SdTextarea = class extends SolidElement {
     this.readonly = false;
     this.form = "";
     this.required = false;
+    this.floatingLabel = false;
     this.styleOnValid = false;
     this.spellcheck = true;
     this.defaultValue = "";
@@ -177,6 +178,8 @@ var SdTextarea = class extends SolidElement {
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasTooltip = !!slots["tooltip"];
+    const hasValue = this.value !== null && String(this.value).length > 0;
+    const isFloatingLabelActive = this.floatingLabel && hasLabel && (this.hasFocus && !this.visuallyDisabled || hasValue);
     const textareaState = 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 iconSize = {
@@ -184,7 +187,7 @@ var SdTextarea = class extends SolidElement {
       md: "text-lg top-2",
       lg: "text-xl top-2"
     }[this.size];
-    return html`<div part="form-control" class="flex flex-col h-full text-left">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block form-control-color-text" : "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 h-full w-full", this.disabled && "cursor-not-allowed")}"><div part="border" class="${cx(
+    return html`<div part="form-control" class="flex flex-col h-full text-left">${hasLabel && !this.floatingLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block form-control-color-text" : "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 h-full w-full", this.disabled && "cursor-not-allowed")}"><div part="border" class="${cx(
       "absolute w-full h-full pointer-events-none border rounded-default transition-[border] duration-medium ease-in-out",
       {
         disabled: "border-neutral-500",
@@ -197,8 +200,17 @@ var SdTextarea = class extends SolidElement {
         valid: "border-success",
         default: "form-control-color-border"
       }[textareaState]
-    )}"></div><div part="base" class="${cx(
+    )}">${hasLabel && this.floatingLabel ? html`<label id="label" part="form-control-floating-label" class="${cx(
+      "absolute left-4 z-20 pointer-events-none transition-all duration-200",
+      textSize,
+      !isFloatingLabelActive ? "top-2.5 text-base" : this.size === "lg" ? "top-2 text-xs" : "top-1 text-xs"
+    )}" for="input"><span class="${cx(
+      "leading-none",
+      (this.visuallyDisabled || this.disabled) && "text-neutral-500",
+      isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "form-control--filled__floating-label-color-text"
+    )}">${this.label}</span></label>` : null}</div><div part="base" class="${cx(
       "textarea h-full flex items-top rounded-default group transition-colors duration-medium hover:duration-fast ease-in-out",
+      this.floatingLabel && "pt-6",
       {
         sm: "textarea-sm",
         md: "textarea-md",
@@ -211,13 +223,13 @@ var SdTextarea = class extends SolidElement {
     )}"><textarea part="textarea" id="input" class="${cx(
       "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-icon]:pe-8",
       {
-        sm: "py-1",
-        md: "py-1",
-        lg: "py-2"
+        sm: this.floatingLabel ? "pb-1" : "py-1",
+        md: this.floatingLabel ? "pb-1" : "py-1",
+        lg: this.floatingLabel ? "pb-2" : "py-2"
       }[this.size],
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -282,6 +294,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdTextarea.prototype, "required", 2);
+__decorateClass([
+  property({ attribute: "floating-label", type: Boolean, reflect: true })
+], SdTextarea.prototype, "floatingLabel", 2);
 __decorateClass([
   property({ type: Number, reflect: true })
 ], SdTextarea.prototype, "minlength", 2);

package/dist/chunks/{chunk.3DVN6TIZ.js → chunk.LDI2EMTX.js}

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

package/dist/chunks/{chunk.V4N7KIXL.js → chunk.LFTPT2LS.js}

@@ -30,7 +30,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.H4SEXNBN.js";
+} from "./chunk.S34JD54Y.js";
 import {
   animateTo,
   stopAnimations

package/dist/chunks/{chunk.Q3WYBER2.js → chunk.LTJRYNEW.js}

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

package/dist/chunks/{chunk.3QHBV32W.js → chunk.LY4UJCKI.js}

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

package/dist/chunks/{chunk.CMW2TFVK.js → chunk.MLSP6BU6.js}

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

package/dist/chunks/{chunk.Z5JYDAEW.js → chunk.MRII2AQC.js}

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

package/dist/chunks/{chunk.K4Z3IEUN.js → chunk.MXJTDQ2Z.js}

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