@solid-design-system/components 4.2.8 → 4.3.1

package/dist/chunks/{chunk.RIXJCB23.js → chunk.3WMXHPM4.js}

@@ -36,6 +36,7 @@ var translation = {
   resize: "Resize",
   scrollToEnd: "Scroll to end",
   scrollToStart: "Scroll to start",
+  search: "Search",
   seekBar: "Seek bar",
   selectAColorFromTheScreen: "Select a color from the screen",
   selectDefaultPlaceholder: "Please select",

package/dist/chunks/{chunk.ZMLS5RFG.js → chunk.KAQYKKNZ.js}

@@ -35,6 +35,7 @@ var translation = {
   removed: (name) => `${name} entfernt`,
   resize: "Gr\xF6\xDFe \xE4ndern",
   scrollToEnd: "Zum Ende scrollen",
+  search: "Suchen",
   seekBar: "Bar suchen",
   scrollToStart: "Zum Anfang scrollen",
   selectAColorFromTheScreen: "Farbe vom Bildschirm ausw\xE4hlen",

package/dist/chunks/{chunk.5R6D4NTV.js → chunk.L5QYLWGO.js}

@@ -84,8 +84,6 @@ var SdCarousel = class extends SolidElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("role", "region");
-    this.setAttribute("aria-label", this.localize.term("carousel"));
     ["click", "keydown"].forEach((event) => this.addEventListener(event, this.handleUserInteraction));
     const intersectionObserver = new IntersectionObserver(
       (entries) => {

package/dist/chunks/{chunk.E2YBDG2J.js → chunk.ZJGD23K6.js}

@@ -195,6 +195,10 @@ var SdInput = class extends SolidElement {
     this.input.focus();
     event.stopPropagation();
   }
+  handleSearchClick(event) {
+    this.emit("sd-search");
+    event.stopPropagation();
+  }
   handleFocus() {
     this.hasFocus = true;
     this.emit("sd-focus");
@@ -374,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-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" 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="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" 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="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.type === "search" ? html`<button class="flex items-center" type="button" tabindex="-1"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="magnifying-glass"></sd-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-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-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" 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="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" 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="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" 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="system" 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="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**

package/dist/components/accordion/accordion.js

@@ -13,8 +13,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -14,8 +14,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/audio/audio.js

@@ -3,8 +3,8 @@ import {
 } from "../../chunks/chunk.Y6WJUTMM.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.S3NI7NKU.js";

package/dist/components/button/button.js

@@ -6,8 +6,8 @@ import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/carousel/carousel.js

@@ -1,6 +1,6 @@
 import {
   SdCarousel
-} from "../../chunks/chunk.5R6D4NTV.js";
+} from "../../chunks/chunk.L5QYLWGO.js";
 import "../../chunks/chunk.F4VGSDIW.js";
 import "../../chunks/chunk.2LMWBUBT.js";
 import "../../chunks/chunk.NOWCQZBS.js";
@@ -16,8 +16,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/combobox/combobox.js

@@ -21,8 +21,8 @@ import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/dialog/dialog.js

@@ -20,8 +20,8 @@ import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/drawer/drawer.js

@@ -20,8 +20,8 @@ import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/dropdown/dropdown.js

@@ -9,8 +9,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/expandable/expandable.js

@@ -4,8 +4,8 @@ import {
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/flipcard/flipcard.js

@@ -14,8 +14,8 @@ import "../../chunks/chunk.XS4QJO4N.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/input/input.d.ts

@@ -53,6 +53,7 @@ export default class SdInput extends SolidElement implements SolidFormControl {
     private handleBlur;
     private handleChange;
     private handleClearClick;
+    private handleSearchClick;
     private handleFocus;
     private handleInput;
     private handleInvalid;

package/dist/components/input/input.js

@@ -1,6 +1,6 @@
 import {
   SdInput
-} from "../../chunks/chunk.E2YBDG2J.js";
+} from "../../chunks/chunk.ZJGD23K6.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.SH45GYZL.js";
@@ -13,8 +13,8 @@ import "../../chunks/chunk.XS4QJO4N.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/notification/notification.js

@@ -6,8 +6,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/optgroup/optgroup.js

@@ -4,8 +4,8 @@ import {
 import "../../chunks/chunk.X7HEAUGJ.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/quickfact/quickfact.js

@@ -14,8 +14,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/scrollable/scrollable.js

@@ -2,8 +2,8 @@ import {
   SdScrollable
 } from "../../chunks/chunk.IKWY7WM6.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/select/select.js

@@ -19,8 +19,8 @@ import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/spinner/spinner.js

@@ -2,8 +2,8 @@ import {
   SdSpinner
 } from "../../chunks/chunk.GWCHNKGW.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -3,8 +3,8 @@ import {
 } from "../../chunks/chunk.DNHLNGIL.js";
 import "../../chunks/chunk.WDWV53JP.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/tooltip/tooltip.js

@@ -7,8 +7,8 @@ import "../../chunks/chunk.EY4JPJJQ.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/video/video.js

@@ -3,8 +3,8 @@ import {
 } from "../../chunks/chunk.JD5XFZKL.js";
 import "../../chunks/chunk.YEZS5ZR2.js";
 import "../../chunks/chunk.YKM42GKF.js";
-import "../../chunks/chunk.RIXJCB23.js";
-import "../../chunks/chunk.ZMLS5RFG.js";
+import "../../chunks/chunk.3WMXHPM4.js";
+import "../../chunks/chunk.KAQYKKNZ.js";
 import "../../chunks/chunk.T5VRGBLR.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/custom-elements.json

@@ -8135,6 +8135,10 @@
             {
               "description": "Emitted when the control receives input.",
               "name": "sd-input"
+            },
+            {
+              "description": "Emitted when the search button is activated.",
+              "name": "sd-search"
             }
           ],
           "attributes": [
@@ -16987,7 +16991,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.2.8",
+    "version": "4.3.1",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -3,8 +3,8 @@ import {
 } from "./chunks/chunk.6DKXZWRN.js";
 import "./chunks/chunk.HAL7R4WT.js";
 import {
-  SdSwitch
-} from "./chunks/chunk.MKZ5TRQH.js";
+  SdTabPanel
+} from "./chunks/chunk.GQXJC6ZE.js";
 import {
   SdTeaser
 } from "./chunks/chunk.WJHCLJNK.js";
@@ -20,27 +20,27 @@ import {
 import {
   SdVideo
 } from "./chunks/chunk.JD5XFZKL.js";
-import {
-  SdSelect
-} from "./chunks/chunk.XNH47HGG.js";
 import {
   SdScrollable
 } from "./chunks/chunk.IKWY7WM6.js";
+import {
+  SdSelect
+} from "./chunks/chunk.XNH47HGG.js";
 import {
   SdStep
 } from "./chunks/chunk.RI66LCUS.js";
 import {
   SdStepGroup
 } from "./chunks/chunk.2LL4ZNH4.js";
+import {
+  SdSwitch
+} from "./chunks/chunk.MKZ5TRQH.js";
 import {
   SdTab
 } from "./chunks/chunk.MCUC6LS6.js";
 import {
   SdTabGroup
 } from "./chunks/chunk.DNHLNGIL.js";
-import {
-  SdTabPanel
-} from "./chunks/chunk.GQXJC6ZE.js";
 import {
   SdNotification
 } from "./chunks/chunk.OENW3EQT.js";
@@ -67,7 +67,7 @@ import {
 } from "./chunks/chunk.DI4CIT2A.js";
 import {
   SdInput
-} from "./chunks/chunk.E2YBDG2J.js";
+} from "./chunks/chunk.ZJGD23K6.js";
 import {
   SdLink
 } from "./chunks/chunk.JPGDK3CW.js";
@@ -135,7 +135,7 @@ import "./chunks/chunk.KVKRZJS7.js";
 import "./chunks/chunk.ZWJNBDIV.js";
 import {
   SdCarousel
-} from "./chunks/chunk.5R6D4NTV.js";
+} from "./chunks/chunk.L5QYLWGO.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import "./chunks/chunk.2LMWBUBT.js";
 import "./chunks/chunk.NOWCQZBS.js";
@@ -175,8 +175,8 @@ import "./chunks/chunk.YEZS5ZR2.js";
 import {
   LocalizeController
 } from "./chunks/chunk.YKM42GKF.js";
-import "./chunks/chunk.RIXJCB23.js";
-import "./chunks/chunk.ZMLS5RFG.js";
+import "./chunks/chunk.3WMXHPM4.js";
+import "./chunks/chunk.KAQYKKNZ.js";
 import "./chunks/chunk.T5VRGBLR.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";

package/dist/translations/de.js

@@ -1,6 +1,6 @@
 import {
   de_default
-} from "../chunks/chunk.ZMLS5RFG.js";
+} from "../chunks/chunk.KAQYKKNZ.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   de_default as default

package/dist/translations/en.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.RIXJCB23.js";
+} from "../chunks/chunk.3WMXHPM4.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   en_default as default

package/dist/utilities/localize.d.ts

@@ -47,6 +47,7 @@ export interface Translation extends DefaultTranslation {
     resize: string;
     scrollToEnd: string;
     scrollToStart: string;
+    search: string;
     seekBar: string;
     selectAColorFromTheScreen: string;
     selectDefaultPlaceholder: string;

package/dist/utilities/localize.js

@@ -1,8 +1,8 @@
 import {
   LocalizeController
 } from "../chunks/chunk.YKM42GKF.js";
-import "../chunks/chunk.RIXJCB23.js";
-import "../chunks/chunk.ZMLS5RFG.js";
+import "../chunks/chunk.3WMXHPM4.js";
+import "../chunks/chunk.KAQYKKNZ.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   LocalizeController

package/dist/vscode.html-custom-data.json

@@ -1158,7 +1158,7 @@
     },
     {
       "name": "sd-input",
-      "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-clear** - Emitted when the clear button is activated.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the input.\n- **right** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **input** - The internal `<input>` control.\n- **left** - The container that wraps the left.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **right** - The container that wraps the right.\n- **invalid-icon** - The invalid icon.\n- **valid-icon** - The valid icon.\n- **invalid-message** - The invalid message.",
+      "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-clear** - Emitted when the clear button is activated.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-search** - Emitted when the search button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the input.\n- **right** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **input** - The internal `<input>` control.\n- **left** - The container that wraps the left.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **right** - The container that wraps the right.\n- **invalid-icon** - The invalid icon.\n- **valid-icon** - The valid icon.\n- **invalid-message** - The invalid message.",
       "attributes": [
         {
           "name": "type",

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": "4.2.8",
+  "version": "4.3.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2745,7 +2745,7 @@
         },
         {
           "name": "sd-input",
-          "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-clear** - Emitted when the clear button is activated.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the input.\n- **right** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **input** - The internal `<input>` control.\n- **left** - The container that wraps the left.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **right** - The container that wraps the right.\n- **invalid-icon** - The invalid icon.\n- **valid-icon** - The valid icon.\n- **invalid-message** - The invalid message.",
+          "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-clear** - Emitted when the clear button is activated.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-search** - Emitted when the search button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the input.\n- **right** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **input** - The internal `<input>` control.\n- **left** - The container that wraps the left.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **right** - The container that wraps the right.\n- **invalid-icon** - The invalid icon.\n- **valid-icon** - The valid icon.\n- **invalid-message** - The invalid message.",
           "doc-url": "",
           "attributes": [
             {
@@ -2977,6 +2977,10 @@
             {
               "name": "sd-input",
               "description": "Emitted when the control receives input."
+            },
+            {
+              "name": "sd-search",
+              "description": "Emitted when the search button is activated."
             }
           ],
           "js": {
@@ -3185,6 +3189,10 @@
               {
                 "name": "sd-input",
                 "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "sd-search",
+                "description": "Emitted when the search button is activated."
               }
             ]
           }

package/dist-versioned/_components/menu/menu.js

@@ -32,7 +32,7 @@ let SdMenu = class SdMenu extends SolidElement {
         if (item.type === 'checkbox') {
             item.checked = !item.checked;
         }
-        this.emit('sd-4-2-8-select', { detail: { item } });
+        this.emit('sd-4-3-1-select', { detail: { item } });
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {

package/dist-versioned/_components/menu/menu.styles.js

@@ -11,7 +11,7 @@ export default css `
     overscroll-behavior: none;
   }
 
-  ::slotted(sd-4-2-8-divider) {
+  ::slotted(sd-4-3-1-divider) {
     --spacing: var(--sd-spacing-x-small);
   }
 `;

package/dist-versioned/_components/menu-item/menu-item.js

@@ -74,7 +74,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <sd-4-2-8-icon name="check" library="system" aria-hidden="true"></sd-4-2-8-icon>
+          <sd-4-3-1-icon name="check" library="system" aria-hidden="true"></sd-4-3-1-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -84,7 +84,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span class="menu-item__chevron">
-          <sd-4-2-8-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-2-8-icon>
+          <sd-4-3-1-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-3-1-icon>
         </span>
       </div>
     `;