@solid-design-system/components 4.5.1 → 4.5.3

package/dist-versioned/chunks/{chunk.3YTMF6YZ.js → chunk.V7WU4CMK.js}

@@ -211,7 +211,7 @@ var SdTextarea = class extends SolidElement {
       "flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",
       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-4-5-1-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-4-5-1-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-5-1-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-4-5-1-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${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="${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-4-5-3-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-4-5-3-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-5-3-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-4-5-3-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -237,28 +237,28 @@ __decorateClass([
   state()
 ], SdTextarea.prototype, "showInvalidStyle", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdTextarea.prototype, "title", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdTextarea.prototype, "name", 2);
 __decorateClass([
   property()
 ], SdTextarea.prototype, "value", 2);
 __decorateClass([
-  property({ reflect: true })
+  property({ type: String, reflect: true })
 ], SdTextarea.prototype, "size", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdTextarea.prototype, "label", 2);
 __decorateClass([
-  property({ attribute: "help-text" })
+  property({ type: String, attribute: "help-text", reflect: true })
 ], SdTextarea.prototype, "helpText", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdTextarea.prototype, "placeholder", 2);
 __decorateClass([
-  property({ type: Number })
+  property({ type: Number, reflect: true })
 ], SdTextarea.prototype, "rows", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
@@ -270,31 +270,31 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdTextarea.prototype, "readonly", 2);
 __decorateClass([
-  property({ reflect: true })
+  property({ type: String, reflect: true })
 ], SdTextarea.prototype, "form", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdTextarea.prototype, "required", 2);
 __decorateClass([
-  property({ type: Number })
+  property({ type: Number, reflect: true })
 ], SdTextarea.prototype, "minlength", 2);
 __decorateClass([
-  property({ type: Number })
+  property({ type: Number, reflect: true })
 ], SdTextarea.prototype, "maxlength", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdTextarea.prototype, "autocapitalize", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdTextarea.prototype, "autocorrect", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], SdTextarea.prototype, "autocomplete", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, reflect: true })
 ], SdTextarea.prototype, "autofocus", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdTextarea.prototype, "enterkeyhint", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "style-on-valid" })
@@ -310,7 +310,7 @@ __decorateClass([
   })
 ], SdTextarea.prototype, "spellcheck", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdTextarea.prototype, "inputmode", 2);
 __decorateClass([
   defaultValue()
@@ -325,7 +325,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdTextarea.prototype, "handleValueChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-4-5-1-textarea")
+  customElement("sd-4-5-3-textarea")
 ], SdTextarea);
 
 export {

package/dist-versioned/chunks/{chunk.73HAOWEX.js → chunk.VFC3SCSY.js}

@@ -142,7 +142,7 @@ var SdAccordion = class extends SolidElement {
     )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-4-5-1-icon library="system" name="chevron-down"></sd-4-5-1-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-4-5-1-icon library="system" name="chevron-down"></sd-4-5-1-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-4-5-3-icon library="system" name="chevron-down"></sd-4-5-3-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-4-5-3-icon library="system" name="chevron-down"></sd-4-5-3-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
   }
 };
 SdAccordion.styles = [
@@ -162,13 +162,13 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdAccordion.prototype, "open", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], SdAccordion.prototype, "summary", 2);
 __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-4-5-1-accordion")
+  customElement("sd-4-5-3-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.5W3UXUG2.js → chunk.WQ4TYFW3.js}

@@ -83,7 +83,7 @@ SdTeaser.styles = [
   css`:host{display:block}::slotted(*){margin:var(--sd-spacing-0,0)}::slotted([slot=headline]){font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700;margin:var(--sd-spacing-0,0)!important}`
 ];
 __decorateClass([
-  property({ reflect: true })
+  property({ type: String, reflect: true })
 ], SdTeaser.prototype, "variant", 2);
 __decorateClass([
   property({ reflect: true, type: Number })
@@ -98,7 +98,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-4-5-1-teaser")
+  customElement("sd-4-5-3-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.WPHOQL7V.js → chunk.X4KMEIZK.js}

@@ -17,6 +17,7 @@ import {
 
 // src/components/expandable/expandable.ts
 import { css, html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { property, query } from "lit/decorators.js";
 import cx from "classix";
 var SdExpandable = class extends SolidElement {
@@ -71,7 +72,7 @@ var SdExpandable = class extends SolidElement {
       "sd-interactive sd-interactive--reset",
       this.inverted && "sd-interactive--inverted",
       !this.inverted ? "!focus-visible:focus-outline" : "!focus-visible:focus-outline-inverted"
-    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}">${this.open ? html`<slot name="toggle-open"><sd-4-5-1-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-5-1-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-5-1-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-5-1-icon>${this.localize.term("showMore")}</slot>`}</div></button><details part="details" aria-hidden="${!this.open}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
+    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}">${this.open ? html`<slot name="toggle-open"><sd-4-5-3-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-5-3-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-5-3-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-5-3-icon>${this.localize.term("showMore")}</slot>`}</div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
   }
   firstUpdated() {
     this.cloneContentToLightDOM();
@@ -108,7 +109,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdExpandable.prototype, "onOpenChange", 1);
 SdExpandable = __decorateClass([
-  customElement("sd-4-5-1-expandable")
+  customElement("sd-4-5-3-expandable")
 ], SdExpandable);
 
 export {

package/dist-versioned/chunks/{chunk.ZWJNBDIV.js → chunk.XMUDNUDW.js}

@@ -17,19 +17,19 @@ var SdButtonGroup = class extends SolidElement {
   }
   handleFocus(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-4-5-1-button-group__button--focus");
+    button == null ? void 0 : button.classList.add("sd-4-5-3-button-group__button--focus");
   }
   handleBlur(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-4-5-1-button-group__button--focus");
+    button == null ? void 0 : button.classList.remove("sd-4-5-3-button-group__button--focus");
   }
   handleMouseOver(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-4-5-1-button-group__button--hover");
+    button == null ? void 0 : button.classList.add("sd-4-5-3-button-group__button--hover");
   }
   handleMouseOut(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-4-5-1-button-group__button--hover");
+    button == null ? void 0 : button.classList.remove("sd-4-5-3-button-group__button--hover");
   }
   handleSlotChange() {
     const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
@@ -37,11 +37,11 @@ var SdButtonGroup = class extends SolidElement {
       const index = slottedElements.indexOf(el);
       const button = findButton(el);
       if (button !== null) {
-        button.classList.add("sd-4-5-1-button-group__button");
-        button.classList.toggle("sd-4-5-1-button-group__button--first", index === 0);
-        button.classList.toggle("sd-4-5-1-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle("sd-4-5-1-button-group__button--last", index === slottedElements.length - 1);
-        button.classList.toggle("sd-4-5-1-button-group__button--radio", button.tagName.toLowerCase() === "sd-4-5-1-radio-button");
+        button.classList.add("sd-4-5-3-button-group__button");
+        button.classList.toggle("sd-4-5-3-button-group__button--first", index === 0);
+        button.classList.toggle("sd-4-5-3-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle("sd-4-5-3-button-group__button--last", index === slottedElements.length - 1);
+        button.classList.toggle("sd-4-5-3-button-group__button--radio", button.tagName.toLowerCase() === "sd-4-5-3-radio-button");
       }
     });
   }
@@ -60,14 +60,14 @@ __decorateClass([
   state()
 ], SdButtonGroup.prototype, "disableRole", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdButtonGroup.prototype, "label", 2);
 SdButtonGroup = __decorateClass([
-  customElement("sd-4-5-1-button-group")
+  customElement("sd-4-5-3-button-group")
 ], SdButtonGroup);
 function findButton(el) {
   var _a;
-  const selector = "sd-4-5-1-button, sd-4-5-1-radio-button";
+  const selector = "sd-4-5-3-button, sd-4-5-3-radio-button";
   return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
 }
 

package/dist-versioned/chunks/{chunk.QN2ROZHZ.js → chunk.YCY2LBBX.js}

@@ -118,7 +118,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(
-      "sd-4-5-1-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-4-5-3-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -144,7 +144,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: "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
-    )}">${this.checked ? html`<sd-4-5-1-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-5-1-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-4-5-1-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-4-5-1-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}">${this.checked ? html`<sd-4-5-3-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-5-3-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-4-5-3-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-4-5-3-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()}`;
@@ -164,16 +164,16 @@ __decorateClass([
   query("#invalid-message")
 ], SdCheckbox.prototype, "invalidMessage", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdCheckbox.prototype, "title", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdCheckbox.prototype, "name", 2);
 __decorateClass([
   property()
 ], SdCheckbox.prototype, "value", 2);
 __decorateClass([
-  property({ reflect: true })
+  property({ type: String, reflect: true })
 ], SdCheckbox.prototype, "size", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
@@ -191,7 +191,7 @@ __decorateClass([
   defaultValue("checked")
 ], SdCheckbox.prototype, "defaultChecked", 2);
 __decorateClass([
-  property({ reflect: true })
+  property({ type: String, reflect: true })
 ], SdCheckbox.prototype, "form", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
@@ -206,7 +206,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-4-5-1-checkbox")
+  customElement("sd-4-5-3-checkbox")
 ], SdCheckbox);
 
 export {

package/dist-versioned/chunks/{chunk.ZJGD23K6.js → chunk.Z3FJM2FE.js}

@@ -378,7 +378,7 @@ var SdInput = class extends SolidElement {
       this.size === "sm" ? "h-6" : "h-8",
       textSize,
       this.visuallyDisabled && "cursor-not-allowed"
-    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-4-5-1-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-4-5-1-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-4-5-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-4-5-1-icon></slot>` : html`<slot name="hide-password-icon"><sd-4-5-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-4-5-1-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-4-5-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-4-5-1-icon>` : ""} ${this.type === "time" ? html`<sd-4-5-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-4-5-1-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-4-5-1-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-4-5-1-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-4-5-1-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-4-5-1-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-4-5-1-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-4-5-1-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-4-5-1-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-5-1-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-4-5-1-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-5-1-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-4-5-3-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-4-5-3-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-4-5-3-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-4-5-3-icon></slot>` : html`<slot name="hide-password-icon"><sd-4-5-3-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-4-5-3-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-4-5-3-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-4-5-3-icon>` : ""} ${this.type === "time" ? html`<sd-4-5-3-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-4-5-3-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-4-5-3-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-4-5-3-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-4-5-3-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-4-5-3-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-4-5-3-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-4-5-3-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-4-5-3-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-5-3-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-4-5-3-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-5-3-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -386,7 +386,7 @@ var SdInput = class extends SolidElement {
  */
 SdInput.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #label:after{content:" *"}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-4-5-1-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}`
+  css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #label:after{content:" *"}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-4-5-3-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}`
 ];
 __decorateClass([
   query("#input")
@@ -404,13 +404,13 @@ __decorateClass([
   state()
 ], SdInput.prototype, "showInvalidStyle", 2);
 __decorateClass([
-  property({ reflect: true })
+  property({ type: String, reflect: true })
 ], SdInput.prototype, "type", 2);
 __decorateClass([
-  property({ reflect: true })
+  property({ type: String, reflect: true })
 ], SdInput.prototype, "size", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdInput.prototype, "inputmode", 2);
 __decorateClass([
   property()
@@ -419,16 +419,16 @@ __decorateClass([
   defaultValue()
 ], SdInput.prototype, "defaultValue", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdInput.prototype, "placeholder", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdInput.prototype, "label", 2);
 __decorateClass([
-  property({ attribute: "help-text" })
+  property({ type: String, attribute: "help-text", reflect: true })
 ], SdInput.prototype, "helpText", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, reflect: true })
 ], SdInput.prototype, "clearable", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
@@ -440,34 +440,34 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdInput.prototype, "readonly", 2);
 __decorateClass([
-  property({ attribute: "password-toggle", type: Boolean })
+  property({ attribute: "password-toggle", type: Boolean, reflect: true })
 ], SdInput.prototype, "passwordToggle", 2);
 __decorateClass([
-  property({ attribute: "password-visible", type: Boolean })
+  property({ attribute: "password-visible", type: Boolean, reflect: true })
 ], SdInput.prototype, "passwordVisible", 2);
 __decorateClass([
-  property({ attribute: "spin-buttons", type: Boolean })
+  property({ attribute: "spin-buttons", type: Boolean, reflect: true })
 ], SdInput.prototype, "spinButtons", 2);
 __decorateClass([
-  property({ type: Number })
+  property({ type: Number, reflect: true })
 ], SdInput.prototype, "minlength", 2);
 __decorateClass([
-  property({ type: Number })
+  property({ type: Number, reflect: true })
 ], SdInput.prototype, "maxlength", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], SdInput.prototype, "min", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], SdInput.prototype, "max", 2);
 __decorateClass([
-  property({ reflect: true })
+  property({ type: String, reflect: true })
 ], SdInput.prototype, "form", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdInput.prototype, "name", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdInput.prototype, "title", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
@@ -476,22 +476,22 @@ __decorateClass([
   property()
 ], SdInput.prototype, "pattern", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], SdInput.prototype, "step", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdInput.prototype, "autocapitalize", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdInput.prototype, "autocorrect", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], SdInput.prototype, "autocomplete", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, reflect: true })
 ], SdInput.prototype, "autofocus", 2);
 __decorateClass([
-  property()
+  property({ type: String, reflect: true })
 ], SdInput.prototype, "enterkeyhint", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "style-on-valid" })
@@ -516,7 +516,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdInput.prototype, "handleValueChange", 1);
 SdInput = __decorateClass([
-  customElement("sd-4-5-1-input")
+  customElement("sd-4-5-3-input")
 ], SdInput);
 
 export {

package/dist-versioned/chunks/{chunk.L5QYLWGO.js → chunk.ZTZN3GYY.js}

@@ -56,7 +56,7 @@ var SdCarousel = class extends SolidElement {
     this.pausedAutoplay = false;
     this.autoplayController = new AutoplayController(this, () => this.next());
     this.scrollController = new ScrollController(this);
-    this.slides = this.getElementsByTagName("sd-4-5-1-carousel-item");
+    this.slides = this.getElementsByTagName("sd-4-5-3-carousel-item");
     // determines which slide is displayed
     // A map containing the state of all the slides
     this.intersectionObserverEntries = /* @__PURE__ */ new Map();
@@ -370,7 +370,7 @@ var SdCarousel = class extends SolidElement {
     )}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? (e) => {
       this.previous();
       this.unblockAutoplay(e, this.previousButton);
-    } : null}"><slot name="previous-icon"><sd-4-5-1-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-4-5-1-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
+    } : null}"><slot name="previous-icon"><sd-4-5-3-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-4-5-3-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
       const isActive = index + 1 === currentPage;
       return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
         "carousel__pagination-item",
@@ -393,7 +393,7 @@ var SdCarousel = class extends SolidElement {
     )}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @click="${nextEnabled ? (e) => {
       this.next();
       this.unblockAutoplay(e, this.nextButton);
-    } : null}"><slot name="next-icon"><sd-4-5-1-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-4-5-1-icon></slot></button></div><button class="${cx(
+    } : null}"><slot name="next-icon"><sd-4-5-3-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-4-5-3-icon></slot></button></div><button class="${cx(
       "ml-6 !rounded-sm",
       "!absolute !right-0 sd-interactive",
       this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset",
@@ -403,12 +403,12 @@ var SdCarousel = class extends SolidElement {
       if (e.detail) {
         this.autoplayControls.blur();
       }
-    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-4-5-1-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-4-5-1-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-4-5-1-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-4-5-1-icon></slot></button></div></div>`;
+    }}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-4-5-3-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-4-5-3-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-4-5-3-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-4-5-3-icon></slot></button></div></div>`;
   }
 };
 SdCarousel.styles = [
   ...SolidElement.styles,
-  css`:host{--slide-gap:var(--sl-spacing-medium,1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:". slides ." ". pagination ."}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1)*var(--slide-gap))/var(--slides-per-page));-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);grid-auto-columns:var(--slide-size);padding-inline:var(--scroll-hint);scroll-padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-4-5-1-button::part(label){align-items:center;display:flex;flex:1 1 auto;pointer-events:none}`
+  css`:host{--slide-gap:var(--sl-spacing-medium,1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:". slides ." ". pagination ."}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1)*var(--slide-gap))/var(--slides-per-page));-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);grid-auto-columns:var(--slide-size);padding-inline:var(--scroll-hint);scroll-padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-4-5-3-button::part(label){align-items:center;display:flex;flex:1 1 auto;pointer-events:none}`
 ];
 __decorateClass([
   query('[part~="autoplay-controls"]')
@@ -435,10 +435,10 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdCarousel.prototype, "autoplay", 2);
 __decorateClass([
-  property({ type: Number, attribute: "slides-per-page" })
+  property({ type: Number, attribute: "slides-per-page", reflect: true })
 ], SdCarousel.prototype, "slidesPerPage", 2);
 __decorateClass([
-  property({ type: Number, attribute: "slides-per-move" })
+  property({ type: Number, attribute: "slides-per-move", reflect: true })
 ], SdCarousel.prototype, "slidesPerMove", 2);
 __decorateClass([
   query("slot:not([name])")
@@ -475,7 +475,7 @@ __decorateClass([
   watch("autoplay")
 ], SdCarousel.prototype, "handleAutoplayChange", 1);
 SdCarousel = __decorateClass([
-  customElement("sd-4-5-1-carousel")
+  customElement("sd-4-5-3-carousel")
 ], SdCarousel);
 
 export {

package/dist-versioned/components/accordion/accordion.d.ts

@@ -21,6 +21,6 @@ export default class SdAccordion extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-5-1-accordion': SdAccordion;
+        'sd-4-5-3-accordion': SdAccordion;
     }
 }

package/dist-versioned/components/accordion/accordion.js

@@ -1,6 +1,6 @@
 import {
   SdAccordion
-} from "../../chunks/chunk.73HAOWEX.js";
+} from "../../chunks/chunk.VFC3SCSY.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.SH45GYZL.js";
 import "../../chunks/chunk.7WEXXSFH.js";

package/dist-versioned/components/accordion-group/accordion-group.d.ts

@@ -11,6 +11,6 @@ export default class SdAccordionGroup extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-5-1-accordion-group': SdAccordionGroup;
+        'sd-4-5-3-accordion-group': SdAccordionGroup;
     }
 }

package/dist-versioned/components/accordion-group/accordion-group.js

@@ -1,7 +1,7 @@
 import {
   SdAccordionGroup
-} from "../../chunks/chunk.LUV3NLSJ.js";
-import "../../chunks/chunk.73HAOWEX.js";
+} from "../../chunks/chunk.KX2TPV2P.js";
+import "../../chunks/chunk.VFC3SCSY.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.SH45GYZL.js";
 import "../../chunks/chunk.7WEXXSFH.js";

package/dist-versioned/components/animation/animation.d.ts

@@ -34,6 +34,6 @@ export default class SdAnimation extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-5-1-animation': SdAnimation;
+        'sd-4-5-3-animation': SdAnimation;
     }
 }

package/dist-versioned/components/audio/audio.d.ts

@@ -51,6 +51,6 @@ export default class SdAudio extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-5-1-audio': SdAudio;
+        'sd-4-5-3-audio': SdAudio;
     }
 }

package/dist-versioned/components/audio/audio.js

@@ -1,6 +1,6 @@
 import {
   SdAudio
-} from "../../chunks/chunk.Y6WJUTMM.js";
+} from "../../chunks/chunk.7RSKPK73.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.3WMXHPM4.js";

package/dist-versioned/components/badge/badge.d.ts

@@ -8,6 +8,6 @@ export default class SdBadge extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-5-1-badge': SdBadge;
+        'sd-4-5-3-badge': SdBadge;
     }
 }

package/dist-versioned/components/badge/badge.js

@@ -1,6 +1,6 @@
 import {
   SdBadge
-} from "../../chunks/chunk.LRQ55FZL.js";
+} from "../../chunks/chunk.HKBYU6Q2.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist-versioned/components/brandshape/brandshape.d.ts

@@ -25,7 +25,7 @@ export default class SdBrandshape extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-4-5-1-brandshape': SdBrandshape;
+        'sd-4-5-3-brandshape': SdBrandshape;
     }
 }
 export {};