@solid-design-system/components 6.0.1 → 6.1.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.OFTSKSC7.js → chunk.CBKLWEL2.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";
@@ -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.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.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.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";
+} from "../../chunks/chunk.75WDCMIC.js";
 import "../../chunks/chunk.BTZPMBVC.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/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";
+} from "../../chunks/chunk.CBKLWEL2.js";
 import "../../chunks/chunk.BTZPMBVC.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/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.1.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}

package/dist/solid-components.js

@@ -4,7 +4,7 @@ import {
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdTextarea
-} from "./chunks/chunk.IJHQ4XX6.js";
+} from "./chunks/chunk.5XWO3USG.js";
 import {
   SdThemeListener
 } from "./chunks/chunk.DCHRUIDY.js";
@@ -19,7 +19,7 @@ import {
 } from "./chunks/chunk.4UT3FCHQ.js";
 import {
   SdSwitch
-} from "./chunks/chunk.TWG4FA4B.js";
+} from "./chunks/chunk.ASEJW6QN.js";
 import {
   SdTab
 } from "./chunks/chunk.DCOB6WLB.js";
@@ -37,7 +37,7 @@ import {
 } from "./chunks/chunk.FKFGVTXH.js";
 import {
   SdRange
-} from "./chunks/chunk.XIYY4LMK.js";
+} from "./chunks/chunk.2VPWVTT6.js";
 import "./chunks/chunk.D3YSIVTB.js";
 import {
   SdRangeTick
@@ -47,7 +47,7 @@ import {
 } from "./chunks/chunk.M2D3WWF3.js";
 import {
   SdSelect
-} from "./chunks/chunk.OFTSKSC7.js";
+} from "./chunks/chunk.CBKLWEL2.js";
 import {
   SdSkeleton
 } from "./chunks/chunk.DXDDB6AB.js";
@@ -74,13 +74,13 @@ import {
 } from "./chunks/chunk.BTNS6ZNO.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.6K3SH3FI.js";
+} from "./chunks/chunk.FSUOT4WC.js";
 import {
   SdRadio
 } from "./chunks/chunk.AUSBWPVD.js";
 import {
   SdInput
-} from "./chunks/chunk.36LBQ45L.js";
+} from "./chunks/chunk.LBDV5GNR.js";
 import {
   SdMapMarker
 } from "./chunks/chunk.UPCVQSXM.js";
@@ -99,7 +99,7 @@ import {
 } from "./chunks/chunk.L3OEOSPQ.js";
 import {
   SdDatepicker
-} from "./chunks/chunk.PBKH5RXQ.js";
+} from "./chunks/chunk.QM4E25CD.js";
 import "./chunks/chunk.SMPFJ52B.js";
 import {
   SdDialog
@@ -118,13 +118,13 @@ import {
 } from "./chunks/chunk.3PTRIEGP.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.E4LGOPKO.js";
+} from "./chunks/chunk.NEUULRS7.js";
 import {
   SdCheckboxGroup
 } from "./chunks/chunk.DFHY67LW.js";
 import {
   SdCombobox
-} from "./chunks/chunk.PQ22Q7VF.js";
+} from "./chunks/chunk.75WDCMIC.js";
 import {
   SdTag
 } from "./chunks/chunk.BTZPMBVC.js";
@@ -185,11 +185,11 @@ import "./chunks/chunk.UMIKFOMI.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdButton
-} from "./chunks/chunk.JCOSW4ZH.js";
+} from "./chunks/chunk.YATRFNET.js";
 import {
   SdLoader
 } from "./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/utilities/form.js

@@ -1,6 +1,6 @@
 import {
   formCollections
-} from "../chunks/chunk.XCQC3F3H.js";
+} from "../chunks/chunk.C3WIBDGG.js";
 import "../chunks/chunk.S3NI7NKU.js";
 
 // src/utilities/form.ts

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist-versioned/chunks/chunk.22PWID5B.js

@@ -84,7 +84,7 @@ var SdLink = class extends SolidElement {
 SdLink.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-::slotted(sd-6-0-1-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-6-0-1-icon){font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}:host([size=lg][standalone]) ::slotted(sd-6-0-1-icon){font-size:var(--sd-text-xl);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}`
+::slotted(sd-6-1-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-6-1-0-icon){font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}:host([size=lg][standalone]) ::slotted(sd-6-1-0-icon){font-size:var(--sd-text-xl);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}`
 ];
 __decorateClass([
   query("a")
@@ -111,7 +111,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-6-0-1-link")
+  customElement("sd-6-1-0-link")
 ], SdLink);
 
 export {