@solid-design-system/components 6.12.0 → 6.13.0

package/dist-versioned/chunks/{chunk.MJU6BUDN.js → chunk.5AXRL3L6.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KH2LWYO6.js";
+} from "./chunk.BZ3NPOMD.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -60,10 +60,10 @@ var SdTeaser = class extends SolidElement {
       "flex",
       {
         white: "bg-white",
-        "white border-neutral-400": "bg-white border sd-6-12-0-teaser--neutral-400-color-border",
-        "neutral-100": "sd-6-12-0-teaser--neutral-100-color-background",
+        "white border-neutral-400": "bg-white border sd-6-13-0-teaser--neutral-400-color-border",
+        "neutral-100": "sd-6-13-0-teaser--neutral-100-color-background",
         primary: "bg-primary text-white",
-        "primary-100": "sd-6-12-0-teaser--primary-100-color-background"
+        "primary-100": "sd-6-13-0-teaser--primary-100-color-background"
       }[this.variant],
       this._orientation === "vertical" && "flex-col",
       this._orientation === "horizontal" && "flex-row gap-8",
@@ -105,7 +105,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-6-12-0-teaser")
+  customElement("sd-6-13-0-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.6ZTH3QOK.js → chunk.5QGEDYVS.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KH2LWYO6.js";
+} from "./chunk.BZ3NPOMD.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.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`<div class="flex flex-col"><label part="base" class="${cx(
-      "sd-6-12-0-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-6-13-0-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -127,7 +127,7 @@ var SdCheckbox = class extends SolidElement {
         lg: "text-base"
       }[this.size]
     )}"><input class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.indeterminate ? "mixed" : this.checked}" aria-describedby="invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"} ${this.indeterminate ? " control--indeterminate" : ""}" class="${cx(
-      "relative flex flex-shrink-0 items-center justify-center border sd-6-12-0-checkbox-border-width rounded-sm h-4 w-4",
+      "relative flex flex-shrink-0 items-center justify-center border sd-6-13-0-checkbox-border-width rounded-sm h-4 w-4",
       "transition-colors ease-in-out duration-medium group-hover:duration-fast",
       "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary",
       {
@@ -160,10 +160,10 @@ var SdCheckbox = class extends SolidElement {
         filled: "bg-accent group-hover:bg-accent-550",
         default: "hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
-    )}"></div></div>${this.checked ? html`<sd-6-12-0-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-6-12-0-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-6-12-0-icon part="indeterminate-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-minus"></sd-6-12-0-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}"></div></div>${this.checked ? html`<sd-6-13-0-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-6-13-0-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-6-13-0-icon part="indeterminate-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-minus"></sd-6-13-0-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><div id="invalid-icon-message" part="invalid-icon-message" class="${cx("flex items-center gap-2", this.showInvalidStyle && "mt-2")}">${this.showInvalidStyle ? html`<sd-6-12-0-icon id="invalid-icon" part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-6-12-0-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div></div>`;
+    )}"><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-6-13-0-icon id="invalid-icon" part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-6-13-0-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div></div>`;
   }
 };
 /**
@@ -223,7 +223,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-6-12-0-checkbox")
+  customElement("sd-6-13-0-checkbox")
 ], SdCheckbox);
 
 export {

package/dist-versioned/chunks/{chunk.XVLJVMWL.js → chunk.625PTA26.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KH2LWYO6.js";
+} from "./chunk.BZ3NPOMD.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -1304,7 +1304,7 @@ var SdDatepicker = class extends SolidElement {
       this.open ? "block" : "hidden",
       ((_b = this.currentPlacement) == null ? void 0 : _b.startsWith("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",
       "border-primary"
-    )}"><div class="flex flex-row items-center w-full justify-between mb-3" part="header"><div class="flex items-center"><button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-year-button" @click="${() => this.setYear(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", -1, false)}" aria-label="${this.localize.term("previousYear")}"><sd-6-12-0-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-6-12-0-icon></button> <button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-month-button" @click="${() => this.setMonth(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", -1, false)}" aria-label="${this.localize.term("previousMonth")}"><sd-6-12-0-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-6-12-0-icon></button></div><div tabindex="-1" class="month-label flex justify-center sd-headline sd-headline--size-base text-primary!" part="month-label" aria-live="polite">${monthLabel}</div><div class="flex items-center"><button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-month-button" @click="${() => this.setMonth(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", 1, false)}" aria-label="${this.localize.term("nextMonth")}"><sd-6-12-0-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-6-12-0-icon></button> <button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-year-button" @click="${() => this.setYear(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", 1, true)}" aria-label="${this.localize.term("nextYear")}"><sd-6-12-0-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-6-12-0-icon></button></div></div><sd-6-12-0-divider></sd-6-12-0-divider><div class="sr-only" aria-live="polite" aria-atomic="true">${this.statusNavText}</div><div class="sr-only" aria-live="assertive" aria-atomic="true">${this.statusSelectText}</div><div class="sr-only" id="keyboard-hint">${this.localize.term("datePickerInfo")}</div><div class="grid mt-2" role="grid" aria-describedby="keyboard-hint" aria-label="${monthLabel}" part="grid" @mouseleave="${this.onGridMouseLeave}" @focusin="${() => {
+    )}"><div class="flex flex-row items-center w-full justify-between mb-3" part="header"><div class="flex items-center"><button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-year-button" @click="${() => this.setYear(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", -1, false)}" aria-label="${this.localize.term("previousYear")}"><sd-6-13-0-icon library="_internal" name="chevrons-sm-left" class="h-6 w-6"></sd-6-13-0-icon></button> <button type="button" tabindex="0" class="nav prev w-6 h-6 hover:cursor-pointer sd-interactive" part="prev-month-button" @click="${() => this.setMonth(-1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", -1, false)}" aria-label="${this.localize.term("previousMonth")}"><sd-6-13-0-icon library="_internal" name="chevron-sm-left" class="h-6 w-6"></sd-6-13-0-icon></button></div><div tabindex="-1" class="month-label flex justify-center sd-headline sd-headline--size-base text-primary!" part="month-label" aria-live="polite">${monthLabel}</div><div class="flex items-center"><button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-month-button" @click="${() => this.setMonth(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "month", 1, false)}" aria-label="${this.localize.term("nextMonth")}"><sd-6-13-0-icon library="_internal" name="chevron-sm-right" class="h-6 w-6"></sd-6-13-0-icon></button> <button type="button" tabindex="0" class="nav next w-6 h-6 hover:cursor-pointer sd-interactive" part="next-year-button" @click="${() => this.setYear(1)}" @keydown="${(ev) => this.handleHeaderKeyDown(ev, "year", 1, true)}" aria-label="${this.localize.term("nextYear")}"><sd-6-13-0-icon library="_internal" name="chevrons-sm-right" class="h-6 w-6"></sd-6-13-0-icon></button></div></div><sd-6-13-0-divider></sd-6-13-0-divider><div class="sr-only" aria-live="polite" aria-atomic="true">${this.statusNavText}</div><div class="sr-only" aria-live="assertive" aria-atomic="true">${this.statusSelectText}</div><div class="sr-only" id="keyboard-hint">${this.localize.term("datePickerInfo")}</div><div class="grid mt-2" role="grid" aria-describedby="keyboard-hint" aria-label="${monthLabel}" part="grid" @mouseleave="${this.onGridMouseLeave}" @focusin="${() => {
       this.tabbingIntoGrid = false;
     }}"><div class="grid-row grid-head grid grid-cols-7 gap-y-[1px]" role="row">${weekdays.map(
       (w, colIndex) => html`<div role="columnheader" aria-colindex="${colIndex + 1}" part="weekday" class="cell head flex items-center justify-center font-bold text-black text-sm leading-none h-8" aria-label="${w}" title="${w}" id="${"col-" + (colIndex + 1)}">${w}</div>`
@@ -1404,7 +1404,7 @@ var SdDatepicker = class extends SolidElement {
       this.open && this.alignment === "left" ? "rounded-bl-none" : "",
       this.open && this.alignment === "right" ? "rounded-br-none" : "",
       this.open && (((_a = this.currentPlacement) == null ? void 0 : _a.startsWith("bottom")) ? "rounded-bl-none rounded-br-none" : "rounded-tl-none rounded-tr-none")
-    )}"></div><sd-6-12-0-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
+    )}"></div><sd-6-13-0-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
       "inline-flex relative w-full",
       ((_b = this.currentPlacement) == null ? void 0 : _b.startsWith("bottom")) ? "origin-top" : "origin-bottom"
     )}" placement="${this.alignment === "left" ? `${this.placement}-start` : `${this.placement}-end`}" flip shift auto-size="vertical" auto-size-padding="10" exportparts="popup:popup__content,"><div part="base" class="${cx(
@@ -1418,7 +1418,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-6-12-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-12-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-12-0-icon class="${cx("text-success shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-12-0-icon>` : ""}<sd-6-12-0-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-6-12-0-icon></div>${this.renderCalendar()}</sd-6-12-0-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)}`;
+    )}" 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-6-13-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-13-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-13-0-icon class="${cx("text-success shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-13-0-icon>` : ""}<sd-6-13-0-icon class="${cx(iconColor, iconMarginLeft, iconSize, "hover:cursor-pointer")}" library="_internal" name="calendar" @click="${this.show}"></sd-6-13-0-icon></div>${this.renderCalendar()}</sd-6-13-0-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 = [
@@ -1544,7 +1544,7 @@ __decorateClass([
   state()
 ], SdDatepicker.prototype, "inputValue", 2);
 __decorateClass([
-  query("sd-6-12-0-popup")
+  query("sd-6-13-0-popup")
 ], SdDatepicker.prototype, "popup", 2);
 __decorateClass([
   query("#invalid-message")
@@ -1578,7 +1578,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdDatepicker.prototype, "handleSizeChange", 1);
 SdDatepicker = __decorateClass([
-  customElement("sd-6-12-0-datepicker")
+  customElement("sd-6-13-0-datepicker")
 ], SdDatepicker);
 
 export {

package/dist-versioned/chunks/{chunk.77QMG2JK.js → chunk.63TRAYVA.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.KH2LWYO6.js";
+} from "./chunk.BZ3NPOMD.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -26,7 +26,7 @@ SdCarouselItem.styles = [
 :host{aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always;display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}::slotted(img){height:100%;width:100%;-o-object-fit:cover;object-fit:cover}`
 ];
 SdCarouselItem = __decorateClass([
-  customElement("sd-6-12-0-carousel-item")
+  customElement("sd-6-13-0-carousel-item")
 ], SdCarouselItem);
 
 export {

package/dist-versioned/chunks/{chunk.5IGIZXCC.js → chunk.6TKEPB7X.js}

@@ -1,6 +1,6 @@
 import {
   SdRadio
-} from "./chunk.QMQD2SCQ.js";
+} from "./chunk.FEYN7C4E.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KH2LWYO6.js";
+} from "./chunk.BZ3NPOMD.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -73,14 +73,14 @@ var SdRadioGroup = class extends SolidElement {
     this.formControlController.updateValidity();
   }
   getAllRadios() {
-    const radios = [...this.querySelectorAll("sd-6-12-0-radio, sd-6-12-0-radio-button")];
+    const radios = [...this.querySelectorAll("sd-6-13-0-radio, sd-6-13-0-radio-button")];
     if (radios.length === 0) {
       console.warn("No radios found in the radio group.");
     }
     return radios;
   }
   handleRadioClick(event) {
-    const target = event.target.closest("sd-6-12-0-radio, sd-6-12-0-radio-button");
+    const target = event.target.closest("sd-6-13-0-radio, sd-6-13-0-radio-button");
     const oldValue = this.value;
     const radios = this.getAllRadios();
     if (radios.length === 0) {
@@ -170,7 +170,7 @@ var SdRadioGroup = class extends SolidElement {
         }
       })
     );
-    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-6-12-0-radio-button");
+    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-6-13-0-radio-button");
     if (!radios.some((radio) => radio.checked)) {
       if (this.hasButtonGroup) {
         const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
@@ -182,26 +182,26 @@ var SdRadioGroup = class extends SolidElement {
       }
     }
     if (this.hasButtonGroup) {
-      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-12-0-button-group");
+      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-13-0-button-group");
       if (buttonGroup) {
         buttonGroup.disableRole = true;
       }
     }
   }
   syncRadios() {
-    if (customElements.get("sd-6-12-0-radio") && customElements.get("sd-6-12-0-radio-button")) {
+    if (customElements.get("sd-6-13-0-radio") && customElements.get("sd-6-13-0-radio-button")) {
       this.syncRadioElements();
       return;
     }
-    if (customElements.get("sd-6-12-0-radio")) {
+    if (customElements.get("sd-6-13-0-radio")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-6-12-0-radio").then(() => this.syncRadios());
+      customElements.whenDefined("sd-6-13-0-radio").then(() => this.syncRadios());
     }
-    if (customElements.get("sd-6-12-0-radio-button")) {
+    if (customElements.get("sd-6-13-0-radio-button")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-6-12-0-radio-button").then(() => this.syncRadios());
+      customElements.whenDefined("sd-6-13-0-radio-button").then(() => this.syncRadios());
     }
   }
   updateCheckedRadio() {
@@ -279,7 +279,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-6-12-0-button-group class="border border-primary sd-6-12-0-radio-button-group-border-radius sd-6-12-0-radio-button-group-border-width sd-6-12-0-radio-button-group-padding" part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-6-12-0-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-6-12-0-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-6-12-0-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div>`;
+    )}"><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-6-13-0-button-group class="border border-primary sd-6-13-0-radio-button-group-border-radius sd-6-13-0-radio-button-group-border-width sd-6-13-0-radio-button-group-padding" part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-6-13-0-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-6-13-0-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-6-13-0-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div>`;
   }
 };
 /**
@@ -288,7 +288,7 @@ var SdRadioGroup = class extends SolidElement {
 SdRadioGroup.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}:host([orientation=vertical]) ::slotted(sd-6-12-0-radio){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-6-12-0-radio:last-of-type){margin-bottom:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]) ::slotted(sd-6-12-0-radio){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-6-12-0-radio:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-12-0-radio){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-12-0-radio:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([required]) #label::after{content:' *'}:host:has(sd-6-12-0-button-group){display:inline-flex}`
+:host{display:block}:host([orientation=vertical]) ::slotted(sd-6-13-0-radio){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-6-13-0-radio:last-of-type){margin-bottom:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]) ::slotted(sd-6-13-0-radio){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-6-13-0-radio:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-13-0-radio){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-13-0-radio:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([required]) #label::after{content:' *'}:host:has(sd-6-13-0-button-group){display:inline-flex}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -342,7 +342,7 @@ __decorateClass([
   watch("value")
 ], SdRadioGroup.prototype, "handleValueChange", 1);
 SdRadioGroup = __decorateClass([
-  customElement("sd-6-12-0-radio-group")
+  customElement("sd-6-13-0-radio-group")
 ], SdRadioGroup);
 
 export {

package/dist-versioned/chunks/{chunk.Z5DZQTVN.js → chunk.B7QHYC64.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.KH2LWYO6.js";
+} from "./chunk.BZ3NPOMD.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -53,7 +53,7 @@ SdThemeListener.styles = [
 :host{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}`
 ];
 SdThemeListener = __decorateClass([
-  customElement("sd-6-12-0-theme-listener")
+  customElement("sd-6-13-0-theme-listener")
 ], SdThemeListener);
 
 export {

package/dist-versioned/chunks/{chunk.P4H32F7J.js → chunk.BL24LTAQ.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KH2LWYO6.js";
+} from "./chunk.BZ3NPOMD.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -53,7 +53,7 @@ var SdNavigationItem = class extends SolidElement {
       }
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = node;
-        return element.tagName.toLowerCase() === "sd-6-12-0-icon";
+        return element.tagName.toLowerCase() === "sd-6-13-0-icon";
       }
       return false;
     });
@@ -126,8 +126,8 @@ var SdNavigationItem = class extends SolidElement {
     const root = html`<${tag} part="base" class="${cx(
       "flex items-center cursor-pointer relative focus-visible:focus-outline group hover:bg-neutral-200 transition-colors duration-fast ease-in-out min-h-[48px] navigable-border-radius",
       { md: "navigable-font-size", lg: "text-lg", sm: "text-[14px]" }[this.size],
-      this.disabled ? "text-neutral-500 pointer-events-none" : "sd-6-12-0-navigation-item-color-text",
-      this.current && "font-bold sd-6-12-0-navigation-item--current-color-text",
+      this.disabled ? "text-neutral-500 pointer-events-none" : "sd-6-13-0-navigation-item-color-text",
+      this.current && "font-bold sd-6-13-0-navigation-item--current-color-text",
       !isAccordion && "w-full",
       this.divider && this.vertical && "mt-0.25",
       !this.vertical && "inline-flex items-center",
@@ -143,19 +143,19 @@ var SdNavigationItem = class extends SolidElement {
       slots["description"] && "pt-3",
       !slots["description"] && !this.separated && horizontalPadding,
       this.calculatePaddingX
-    )}">${this.divider && this.vertical ? html`<sd-6-12-0-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-6-12-0-divider>` : ""} <span id="content" part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline-flex text-start"></slot></span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-6-12-0-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+    )}">${this.divider && this.vertical ? html`<sd-6-13-0-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-6-13-0-divider>` : ""} <span id="content" part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline-flex text-start"></slot></span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-6-13-0-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
       "h-6 w-6 ml-2 transition-all",
       isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-6-12-0-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot id="description" name="description" part="description" class="${cx(
+    )}"></sd-6-13-0-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot id="description" name="description" part="description" class="${cx(
       "inline-block text-sm text-left font-normal text-black pb-3",
       isAccordion || this.separated ? "grow" : "w-full",
       this.calculatePaddingX
     )}"></slot>` : ""}</div></${tag}>`;
     if (this.separated) {
-      return html`<div part="details" id="navigation-item-details" class="relative flex flex-col"><div class="flex items-start">${root} ${slots["children"] && this.vertical ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset -mt-1" @click="${this.handleClickSummary}"><sd-6-12-0-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+      return html`<div part="details" id="navigation-item-details" class="relative flex flex-col"><div class="flex items-start">${root} ${slots["children"] && this.vertical ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset -mt-1" @click="${this.handleClickSummary}"><sd-6-13-0-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
         "m-4 h-6 w-6 transition-all",
         isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-      )}"></sd-6-12-0-icon></button>` : ""}</div>${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
+      )}"></sd-6-13-0-icon></button>` : ""}</div>${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
     }
     if (isAccordion) {
       return html`<details aria-expanded="${this.open}" part="details" id="navigation-item-details" ?open="${this.open}" class="relative">${root}<slot name="children"></slot></details>`;
@@ -217,7 +217,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdNavigationItem.prototype, "separated", 2);
 SdNavigationItem = __decorateClass([
-  customElement("sd-6-12-0-navigation-item")
+  customElement("sd-6-13-0-navigation-item")
 ], SdNavigationItem);
 
 export {

package/dist-versioned/chunks/{chunk.V5VJQQ73.js → chunk.BX3GPTGI.js}

@@ -27,7 +27,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.KH2LWYO6.js";
+} from "./chunk.BZ3NPOMD.js";
 import {
   animateTo,
   stopAnimations
@@ -183,7 +183,7 @@ var SdDialog = class extends SolidElement {
     )}"><div part="overlay" class="fixed inset-0 overlay-color-background opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
       "panel-color-border border flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
       this.open && "flex opacity-100"
-    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-6-12-0-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-6-12-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-12-0-icon></sd-6-12-0-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
+    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-6-13-0-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-6-13-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-13-0-icon></sd-6-13-0-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDialog.styles = [
@@ -213,7 +213,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDialog.prototype, "handleOpenChange", 1);
 SdDialog = __decorateClass([
-  customElement("sd-6-12-0-dialog")
+  customElement("sd-6-13-0-dialog")
 ], SdDialog);
 setDefaultAnimation("dialog.show", {
   keyframes: [