@solid-design-system/components 6.0.1 → 6.2.0

package/dist/chunks/{chunk.XIYY4LMK.js → chunk.2VPWVTT6.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk.GI7VDIWX.js";
 import {
   FormControlController
-} from "./chunk.XCQC3F3H.js";
+} from "./chunk.C3WIBDGG.js";
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";

package/dist/chunks/{chunk.IJHQ4XX6.js → chunk.5XWO3USG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.GI7VDIWX.js";
 import {
   FormControlController
-} from "./chunk.XCQC3F3H.js";
+} from "./chunk.C3WIBDGG.js";
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";
@@ -229,7 +229,7 @@ var SdTextarea = class extends SolidElement {
       }[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="${!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()}`;
+    )}" 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(this.size)}`;
   }
 };
 /**

package/dist/chunks/{chunk.PQ22Q7VF.js → chunk.75WDCMIC.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.WDWV53JP.js";
 import {
   FormControlController
-} from "./chunk.XCQC3F3H.js";
+} from "./chunk.C3WIBDGG.js";
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";
@@ -841,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><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()}`;
+    )}" 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(this.size)}`;
   }
 };
 SdCombobox.styles = [

package/dist/chunks/{chunk.TWG4FA4B.js → chunk.ASEJW6QN.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.GI7VDIWX.js";
 import {
   FormControlController
-} from "./chunk.XCQC3F3H.js";
+} from "./chunk.C3WIBDGG.js";
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";
@@ -122,7 +122,7 @@ var SdSwitch = class extends SolidElement {
     )}"></span> </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
       this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "sd-switch-color-text"
-    )}"><slot></slot></span></label> ${this.hasSlotController.test("tooltip") ? html`<slot name="tooltip"></slot>` : null}</div>${this.formControlController.renderInvalidMessage()}`;
+    )}"><slot></slot></span></label> ${this.hasSlotController.test("tooltip") ? html`<slot name="tooltip"></slot>` : null}</div><div part="invalid-icon-message" class="flex items-center gap-2 mt-2">${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-icon>` : ""} ${this.formControlController.renderInvalidMessage("lg")}</div>`;
   }
 };
 /**

package/dist/chunks/{chunk.XCQC3F3H.js → chunk.C3WIBDGG.js}

@@ -216,8 +216,13 @@ var FormControlController = class {
     return (_a = this.form) != null ? _a : null;
   }
   /** Returns a styled `<div>` element to display inline validation messages via its `textContent` property when a form element is invalid. */
-  renderInvalidMessage() {
-    return html`<div id="invalid-message" class="text-error text-sm mt-1 text-left" part="invalid-message" aria-live="polite" ?hidden="${!this.host.showInvalidStyle}"></div>`;
+  renderInvalidMessage(size) {
+    const sizeClass = {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-base"
+    }[size];
+    return html`<div id="invalid-message" class="text-error text-left ${sizeClass}" part="invalid-message" aria-live="polite" ?hidden="${!this.host.showInvalidStyle}"></div>`;
   }
   /** Resets the form, restoring all the control to their default value */
   reset(invoker) {

package/dist/chunks/{chunk.6K3SH3FI.js → chunk.FSUOT4WC.js}

@@ -6,7 +6,7 @@ import {
   customErrorValidityState,
   validValidityState,
   valueMissingValidityState
-} from "./chunk.XCQC3F3H.js";
+} from "./chunk.C3WIBDGG.js";
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";
@@ -259,7 +259,7 @@ var SdRadioGroup = class extends SolidElement {
         vertical: "flex-col",
         horizontal: "flex-row"
       }[this.orientation]
-    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-button-group class="border border-primary sd-radio-button-group-border-radius sd-radio-button-group-border-width sd-radio-button-group-padding" part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-button-group>` : defaultSlot}</div></fieldset><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>${this.formControlController.renderInvalidMessage()}`;
+    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-button-group class="border border-primary sd-radio-button-group-border-radius sd-radio-button-group-border-width sd-radio-button-group-padding" part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-button-group>` : defaultSlot}</div></fieldset><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 part="invalid-icon-message" class="flex items-center gap-2 mt-2">${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div>`;
   }
 };
 /**

package/dist/chunks/{chunk.36LBQ45L.js → chunk.LBDV5GNR.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.GI7VDIWX.js";
 import {
   FormControlController
-} from "./chunk.XCQC3F3H.js";
+} from "./chunk.C3WIBDGG.js";
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";
@@ -406,7 +406,7 @@ var SdInput = class extends SolidElement {
     )}">${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 library="_internal" name="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 library="_internal" name="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 && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" 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 library="_internal" name="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 library="_internal" name="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 && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
   }
 };
 /**

package/dist/chunks/{chunk.E4LGOPKO.js → chunk.NEUULRS7.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.GI7VDIWX.js";
 import {
   FormControlController
-} from "./chunk.XCQC3F3H.js";
+} from "./chunk.C3WIBDGG.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
@@ -117,7 +117,7 @@ var SdCheckbox = class extends SolidElement {
   }
   render() {
     const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
-    return html`<label part="base" class="${cx(
+    return html`<div class="flex flex-col"><label part="base" class="${cx(
       "sd-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
@@ -145,7 +145,7 @@ var SdCheckbox = class extends SolidElement {
         filled: "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550",
         default: "form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
-    )}"><div class="${cx(
+    )}"><div part="checkbox" class="${cx(
       "absolute h-3 transition-[width] right-0 duration-medium",
       this.checked || this.indeterminate ? "w-0" : "w-3"
     )}"><div class="${cx(
@@ -163,7 +163,7 @@ var SdCheckbox = class extends SolidElement {
     )}"></div></div>${this.checked ? html`<sd-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-icon part="indeterminate-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-minus"></sd-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
-    )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
+    )}"><slot></slot></span></label><div id="invalid-icon-message" part="invalid-icon-message" class="${cx("flex items-center gap-2", this.showInvalidStyle && "mt-2")}">${this.showInvalidStyle ? html`<sd-icon id="invalid-icon" part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div></div>`;
   }
 };
 /**

package/dist/chunks/{chunk.BTZPMBVC.js → chunk.NW7LJJS2.js}

@@ -63,7 +63,7 @@ var SdTag = class extends SolidElement {
     const tag = isLink ? literal`a` : this.removable ? literal`div` : literal`button`;
     return html`<${tag} part="base" type="${ifDefined(isLink ? void 0 : "button")}" href="${ifDefined(isLink ? this.href : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" aria-labelledby="content" aria-disabled="${this.disabled ? "true" : "false"}" aria-pressed="${ifDefined(this.toggleable ? this.selected : void 0)}" tabindex="${this.disabled || this.removable ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" class="${cx(
       /* basic styles of the wrapper */
-      "inline-flex border box-border sd-tag-border-radius items-center leading-none whitespace-nowrap transition-colors duration-fast ease-in-out focus-visible:focus-outline",
+      "flex border box-border sd-tag-border-radius items-center leading-none whitespace-nowrap transition-colors duration-fast ease-in-out focus-visible:focus-outline",
       {
         /* sizes, fonts */
         lg: "h-8 sd-tag-font-weight sd-tag--size-lg-font-size gap-2",

package/dist/chunks/{chunk.PBKH5RXQ.js → chunk.QM4E25CD.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.SMPFJ52B.js";
 import {
   FormControlController
-} from "./chunk.XCQC3F3H.js";
+} from "./chunk.C3WIBDGG.js";
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";
@@ -1328,7 +1328,7 @@ var SdDatepicker = class extends SolidElement {
       { sm: "h-8", md: "h-10", lg: "h-12" }[this.size],
       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()}`;
+    )}" 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(this.size)}`;
   }
 };
 SdDatepicker.styles = [

package/dist/chunks/{chunk.4CS6FZHE.js → chunk.UWQPJU3Q.js}

@@ -74,8 +74,8 @@ var SdOption = class extends SolidElement {
       left: this.hasSlotController.test("left"),
       right: this.hasSlotController.test("right")
     };
-    return html`<div part="base" class="${cx(
-      "px-4 flex items-center w-full transition-colors duration-fast ease-in-out text-left text-base relative",
+    return html`<div part="base" style="word-break:break-word" class="${cx(
+      "px-4 flex items-start w-full transition-colors duration-fast ease-in-out text-left text-base relative",
       {
         sm: "text-sm py-1",
         md: "text-base py-2",
@@ -92,6 +92,11 @@ var SdOption = class extends SolidElement {
       !this.disabled && this.hasHover ? "h-full top-0" : "top-1"
     )}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
       "relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4 mr-2",
+      {
+        sm: "mt-0.5",
+        md: "mt-1",
+        lg: "mt-1"
+      }[this.size],
       this.disabled ? "sd-option--disabled-color-border" : this.selected ? "bg-accent border-accent" : "bg-white form-control-color-border"
     )}">${this.selected ? html`<sd-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
   }

package/dist/chunks/{chunk.OFTSKSC7.js → chunk.XC7QKBQE.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.WDWV53JP.js";
 import {
   FormControlController
-} from "./chunk.XCQC3F3H.js";
+} from "./chunk.C3WIBDGG.js";
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";
@@ -77,7 +77,7 @@ var SdSelect = class extends SolidElement {
     this.styleOnValid = false;
     this.hoist = false;
     this.getTag = (option) => {
-      return html`<sd-tag class="relative z-10" ?disabled="${this.disabled}" part="tag" exportparts="
+      return html`<sd-tag class="relative z-10 min-w-0 max-w-full" ?disabled="${this.disabled}" part="tag" exportparts="
               base:tag__base,
               content:tag__content,
               removable-indicator:tag__removable-indicator,
@@ -444,13 +444,13 @@ var SdSelect = class extends SolidElement {
       return this.selectedOptions.map((option, index) => {
         if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
           const tag = this.getTag(option, index);
-          return html`<div @sd-remove="${(e) => this.handleTagRemove(e, option)}">${typeof tag === "string" ? unsafeHTML(tag) : tag}</div>`;
+          return html`<div @sd-remove="${(e) => this.handleTagRemove(e, option)}" class="max-w-full">${typeof tag === "string" ? unsafeHTML(tag) : tag}</div>`;
         }
         return [html``];
       });
     } else {
       return [
-        html`<sd-tag class="z-10" ?disabled="${this.disabled}" part="tag" exportparts="
+        html`<sd-tag class="z-10 min-w-0 max-w-full" ?disabled="${this.disabled}" part="tag" exportparts="
               base:tag__base,
               content:tag__content,
               removable-indicator:tag__removable-indicator,
@@ -632,7 +632,7 @@ var SdSelect = class extends SolidElement {
       this.visuallyDisabled || this.disabled ? "hover:bg-transparent" : "hover:bg-neutral-200",
       ["invalid", "activeInvalid"].includes(selectState) && "form-control--invalid-color-background"
     )}" slot="anchor"><div class="${cx(
-      "input-container items-center w-full h-full px-4 flex",
+      "input-container items-center w-full h-full px-4 flex min-w-0",
       {
         sm: "py-1",
         md: "py-1",
@@ -640,15 +640,15 @@ var SdSelect = class extends SolidElement {
       }[this.size],
       verticalPadding
     )}"><input name="${this.name}" form="${this.form}" part="display-input" class="${cx(
-      "top-0 left-0 appearance-none outline-none flex-grow bg-transparent flex-1 placeholder:text-neutral-700",
+      "top-0 left-0 appearance-none outline-none flex-grow bg-transparent flex-1 placeholder:text-neutral-700 min-w-0",
       cursorStyles,
       this.multiple && this.useTags && this.value.length > 0 ? "hidden" : "",
       this.size === "sm" ? isFloatingLabelActive ? "h-4" : "h-6" : isFloatingLabelActive ? "h-6" : "h-8",
       isFloatingLabelActive && "leading-none mt-4"
-    )}" type="text" .disabled="${this.disabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? this.placeholder || this.localize.term("selectDefaultPlaceholder") : ""}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" aria-describedby="help-text invalid-message" role="combobox" tabindex="-1"> ${this.multiple && this.useTags ? html`<div part="tags" class="${cx("flex-grow flex flex-wrap items-center gap-1", this.floatingLabel && "pt-6")}">${this.tags}</div>` : ""}<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(
+    )}" type="text" .disabled="${this.disabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? this.placeholder || this.localize.term("selectDefaultPlaceholder") : ""}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" aria-describedby="help-text invalid-message" role="combobox" tabindex="-1"> ${this.multiple && this.useTags && this.tags && this.tags.length > 0 ? html`<div part="tags" class="${cx("flex-grow flex flex-wrap items-center gap-1 min-w-0", this.floatingLabel && "pt-6")}">${this.tags}</div>` : ""}<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(
       "select__clear flex justify-center",
       iconMarginLeft,
-      this.value.length > 0 ? "visible" : "invisible"
+      this.value.length > 0 ? "visible" : "hidden"
     )}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-700 z-10", iconSize)}" library="_internal" name="closing-round"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="_internal" name="risk"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle"></sd-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
       "inline-flex ml-2 items-center transition-transform duration-medium ease-in-out",
       this.open ? "rotate-180" : "rotate-0",
@@ -667,7 +667,7 @@ var SdSelect = 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" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-popup></div><div class="text-sm text-neutral-700 mt-1" part="form-control-help-text" id="help-text" aria-hidden="${hasHelpText ? "false" : "true"}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-popup></div><div class="text-sm text-neutral-700 mt-1" part="form-control-help-text" id="help-text" aria-hidden="${hasHelpText ? "false" : "true"}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage(this.size)}`;
   }
 };
 /**

package/dist/chunks/{chunk.JCOSW4ZH.js → chunk.YATRFNET.js}

@@ -1,7 +1,7 @@
 import {
   FormControlController,
   validValidityState
-} from "./chunk.XCQC3F3H.js";
+} from "./chunk.C3WIBDGG.js";
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";

package/dist/components/audio/audio.js

@@ -6,9 +6,9 @@ import "../../chunks/chunk.SF6AUNJF.js";
 import "../../chunks/chunk.EDMG7C5H.js";
 import "../../chunks/chunk.UMIKFOMI.js";
 import "../../chunks/chunk.WDWV53JP.js";
-import "../../chunks/chunk.JCOSW4ZH.js";
+import "../../chunks/chunk.YATRFNET.js";
 import "../../chunks/chunk.2EWH2DC2.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";

package/dist/components/button/button.js

@@ -1,8 +1,8 @@
 import {
   SdButton
-} from "../../chunks/chunk.JCOSW4ZH.js";
+} from "../../chunks/chunk.YATRFNET.js";
 import "../../chunks/chunk.2EWH2DC2.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.GWKDETUD.js";

package/dist/components/checkbox/checkbox.js

@@ -1,8 +1,8 @@
 import {
   SdCheckbox
-} from "../../chunks/chunk.E4LGOPKO.js";
+} from "../../chunks/chunk.NEUULRS7.js";
 import "../../chunks/chunk.GI7VDIWX.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.MH7JHBWP.js";
 import "../../chunks/chunk.GKH647YK.js";
 import "../../chunks/chunk.2BO5LK23.js";

package/dist/components/combobox/combobox.js

@@ -1,13 +1,13 @@
 import {
   SdCombobox
-} from "../../chunks/chunk.PQ22Q7VF.js";
-import "../../chunks/chunk.BTZPMBVC.js";
+} from "../../chunks/chunk.75WDCMIC.js";
+import "../../chunks/chunk.NW7LJJS2.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.WBJBQ4QI.js";
 import "../../chunks/chunk.UIQBHPD3.js";
 import "../../chunks/chunk.P5FGSFP3.js";
 import "../../chunks/chunk.WDWV53JP.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";

package/dist/components/datepicker/datepicker.js

@@ -1,10 +1,10 @@
 import {
   SdDatepicker
-} from "../../chunks/chunk.PBKH5RXQ.js";
+} from "../../chunks/chunk.QM4E25CD.js";
 import "../../chunks/chunk.SMPFJ52B.js";
 import "../../chunks/chunk.Q7ZMX7IB.js";
 import "../../chunks/chunk.P5FGSFP3.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.MH7JHBWP.js";
 import "../../chunks/chunk.GKH647YK.js";

package/dist/components/dialog/dialog.js

@@ -4,9 +4,9 @@ import {
 import "../../chunks/chunk.EDMG7C5H.js";
 import "../../chunks/chunk.UMIKFOMI.js";
 import "../../chunks/chunk.WDWV53JP.js";
-import "../../chunks/chunk.JCOSW4ZH.js";
+import "../../chunks/chunk.YATRFNET.js";
 import "../../chunks/chunk.2EWH2DC2.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";

package/dist/components/drawer/drawer.js

@@ -5,9 +5,9 @@ import "../../chunks/chunk.SF6AUNJF.js";
 import "../../chunks/chunk.EDMG7C5H.js";
 import "../../chunks/chunk.UMIKFOMI.js";
 import "../../chunks/chunk.WDWV53JP.js";
-import "../../chunks/chunk.JCOSW4ZH.js";
+import "../../chunks/chunk.YATRFNET.js";
 import "../../chunks/chunk.2EWH2DC2.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";

package/dist/components/flipcard/flipcard.js

@@ -1,9 +1,9 @@
 import {
   SdFlipcard
 } from "../../chunks/chunk.PBXAIJQ4.js";
-import "../../chunks/chunk.JCOSW4ZH.js";
+import "../../chunks/chunk.YATRFNET.js";
 import "../../chunks/chunk.2EWH2DC2.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.MH7JHBWP.js";
 import "../../chunks/chunk.GKH647YK.js";

package/dist/components/input/input.js

@@ -1,8 +1,8 @@
 import {
   SdInput
-} from "../../chunks/chunk.36LBQ45L.js";
+} from "../../chunks/chunk.LBDV5GNR.js";
 import "../../chunks/chunk.GI7VDIWX.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.MH7JHBWP.js";
 import "../../chunks/chunk.GKH647YK.js";

package/dist/components/notification/notification.js

@@ -2,9 +2,9 @@ import {
   SdNotification
 } from "../../chunks/chunk.ZMEUQIVY.js";
 import "../../chunks/chunk.SF6AUNJF.js";
-import "../../chunks/chunk.JCOSW4ZH.js";
+import "../../chunks/chunk.YATRFNET.js";
 import "../../chunks/chunk.2EWH2DC2.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";

package/dist/components/option/option.js

@@ -1,6 +1,6 @@
 import {
   SdOption
-} from "../../chunks/chunk.4CS6FZHE.js";
+} from "../../chunks/chunk.UWQPJU3Q.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.MH7JHBWP.js";
 import "../../chunks/chunk.GKH647YK.js";

package/dist/components/radio-group/radio-group.js

@@ -1,9 +1,9 @@
 import {
   SdRadioGroup
-} from "../../chunks/chunk.6K3SH3FI.js";
+} from "../../chunks/chunk.FSUOT4WC.js";
 import "../../chunks/chunk.AUSBWPVD.js";
 import "../../chunks/chunk.DTTVI7KT.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.TNJNUASM.js";

package/dist/components/range/range.js

@@ -1,9 +1,9 @@
 import {
   SdRange
-} from "../../chunks/chunk.XIYY4LMK.js";
+} from "../../chunks/chunk.2VPWVTT6.js";
 import "../../chunks/chunk.D3YSIVTB.js";
 import "../../chunks/chunk.GI7VDIWX.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.GWKDETUD.js";

package/dist/components/select/select.js

@@ -1,11 +1,11 @@
 import {
   SdSelect
-} from "../../chunks/chunk.OFTSKSC7.js";
-import "../../chunks/chunk.BTZPMBVC.js";
+} from "../../chunks/chunk.XC7QKBQE.js";
+import "../../chunks/chunk.NW7LJJS2.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.P5FGSFP3.js";
 import "../../chunks/chunk.WDWV53JP.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";

package/dist/components/switch/switch.js

@@ -1,8 +1,8 @@
 import {
   SdSwitch
-} from "../../chunks/chunk.TWG4FA4B.js";
+} from "../../chunks/chunk.ASEJW6QN.js";
 import "../../chunks/chunk.GI7VDIWX.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.TNJNUASM.js";

package/dist/components/tag/tag.js

@@ -1,6 +1,6 @@
 import {
   SdTag
-} from "../../chunks/chunk.BTZPMBVC.js";
+} from "../../chunks/chunk.NW7LJJS2.js";
 import "../../chunks/chunk.MH7JHBWP.js";
 import "../../chunks/chunk.GKH647YK.js";
 import "../../chunks/chunk.2BO5LK23.js";

package/dist/components/textarea/textarea.js

@@ -1,8 +1,8 @@
 import {
   SdTextarea
-} from "../../chunks/chunk.IJHQ4XX6.js";
+} from "../../chunks/chunk.5XWO3USG.js";
 import "../../chunks/chunk.GI7VDIWX.js";
-import "../../chunks/chunk.XCQC3F3H.js";
+import "../../chunks/chunk.C3WIBDGG.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.MH7JHBWP.js";
 import "../../chunks/chunk.GKH647YK.js";

package/dist/custom-elements.json

@@ -22493,7 +22493,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "6.0.1",
+    "version": "6.2.0",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/internal/form.d.ts

@@ -32,7 +32,7 @@ export declare class FormControlController implements ReactiveController {
     private doAction;
     updateValidityStyle(): void;
     getForm(): HTMLFormElement | null;
-    renderInvalidMessage(): import("lit").TemplateResult<1>;
+    renderInvalidMessage(size: string): import("lit").TemplateResult<1>;
     reset(invoker?: HTMLInputElement | SdButton): void;
     submit(invoker?: HTMLInputElement | SdButton): void;
     setValidity(isValid: boolean): void;

package/dist/internal/form.js

@@ -206,10 +206,15 @@ export class FormControlController {
     getForm() {
         return this.form ?? null;
     }
-    renderInvalidMessage() {
+    renderInvalidMessage(size) {
+        const sizeClass = {
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-base'
+        }[size];
         return html `<div
       id="invalid-message"
-      class="text-error text-sm mt-1 text-left"
+      class="text-error text-left ${sizeClass}"
       part="invalid-message"
       aria-live="polite"
       ?hidden=${!this.host.showInvalidStyle}