@solid-design-system/components 7.0.0-next.10 → 7.0.0-next.11

package/dist-versioned/chunks/chunk.G7M7XYS3.js

@@ -55,19 +55,19 @@ var SdProgressBar = class extends SolidElement {
       this.isLoading ? this.localize.term("loading") : this.valueFormatter(this.clampedValue)
     )}" aria-label="${ifDefined(!hasLabel ? this.label || this.localize.term("progress") : void 0)}" aria-labelledby="${ifDefined(hasLabel ? "label" : this.label)}" style="${`--percentage: ${this.percentage}%;`}">${this.isLoading ? html`<div part="track" class="${cx(
       "absolute top-0 left-0 h-full progress-bar__track--loading-left",
-      this.inverted ? "sd-7-0-0-next-10-progress-bar__slide-bar--inverted-color-background" : "sd-7-0-0-next-10-progress-bar__slide-bar-color-background"
+      this.inverted ? "sd-7-0-0-next-11-progress-bar__slide-bar--inverted-color-background" : "sd-7-0-0-next-11-progress-bar__slide-bar-color-background"
     )}"></div><div part="track" class="${cx(
       "absolute top-0 right-0 h-full progress-bar__track--loading-right",
-      this.inverted ? "sd-7-0-0-next-10-progress-bar__slide-bar--inverted-color-background" : "sd-7-0-0-next-10-progress-bar__slide-bar-color-background"
+      this.inverted ? "sd-7-0-0-next-11-progress-bar__slide-bar--inverted-color-background" : "sd-7-0-0-next-11-progress-bar__slide-bar-color-background"
     )}"></div><div part="indicator" class="${cx(
       "absolute top-0 h-full progress-bar__indicator--loading",
-      this.inverted ? "sd-7-0-0-next-10-progress-bar--active--inverted-color-background" : "bg-accent"
+      this.inverted ? "sd-7-0-0-next-11-progress-bar--active--inverted-color-background" : "bg-accent"
     )}"></div>` : html`<div part="indicator" class="${cx(
       "w-[var(--percentage)]",
-      this.inverted ? "sd-7-0-0-next-10-progress-bar--active--inverted-color-background" : "bg-accent"
+      this.inverted ? "sd-7-0-0-next-11-progress-bar--active--inverted-color-background" : "bg-accent"
     )}"></div>${this.value && this.value > 0 && this.value < this.safeMax ? html`<div class="w-0.5 shrink-0"></div>` : nothing}<div part="track" class="${cx(
       "flex-1",
-      this.inverted ? "sd-7-0-0-next-10-progress-bar__slide-bar--inverted-color-background" : "sd-7-0-0-next-10-progress-bar__slide-bar-color-background"
+      this.inverted ? "sd-7-0-0-next-11-progress-bar__slide-bar--inverted-color-background" : "sd-7-0-0-next-11-progress-bar__slide-bar-color-background"
     )}"></div>`}</div>${this.showValue ? html`<span class="${cx(
       "text-neutral-700 text-xs w-shrink-0",
       this.inverted ? "text-white" : "text-neutral-700",
@@ -103,7 +103,7 @@ __decorateClass([
   property({ attribute: false })
 ], SdProgressBar.prototype, "valueFormatter", 2);
 SdProgressBar = __decorateClass([
-  customElement("sd-7-0-0-next-10-progress-bar")
+  customElement("sd-7-0-0-next-11-progress-bar")
 ], SdProgressBar);
 
 export {

package/dist-versioned/chunks/chunk.GBB73ZFE.js

@@ -228,7 +228,7 @@ var SdTextarea = class extends SolidElement {
       textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "text-black",
       ["invalid", "activeInvalid"].includes(textareaState) && "form-control--invalid-color-background"
     )}"><textarea part="textarea" id="input" class="${cx(
-      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-7-0-0-next-10-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-7-0-0-next-11-icon]:pe-8",
       {
         sm: isFloatingLabelActive ? "pb-1" : "py-2",
         md: isFloatingLabelActive ? "pb-1" : "py-2",
@@ -236,7 +236,7 @@ var SdTextarea = class extends SolidElement {
       }[this.size],
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect === void 0 ? void 0 : this.autocorrect ? "on" : "off")}" ?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-7-0-0-next-10-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-7-0-0-next-10-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-0-0-next-10-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-10-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect === void 0 ? void 0 : this.autocorrect ? "on" : "off")}" ?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-7-0-0-next-11-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-7-0-0-next-11-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-0-0-next-11-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-11-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
       "text-sm mt-1",
       hasHelpText && !this.showInvalidStyle ? "block" : "hidden",
       this.visuallyDisabled || this.disabled ? "text-neutral-500" : "text-neutral-700"
@@ -369,7 +369,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdTextarea.prototype, "handleSizeChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-7-0-0-next-10-textarea")
+  customElement("sd-7-0-0-next-11-textarea")
 ], SdTextarea);
 
 export {

package/dist-versioned/chunks/chunk.GRRHK6BP.js

@@ -18,7 +18,7 @@ var SdTabPanel = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-7-0-0-next-10-tab-panel-${this.attrId}`;
+    this.componentId = `sd-7-0-0-next-11-tab-panel-${this.attrId}`;
     this.name = "";
     this.active = false;
   }
@@ -49,7 +49,7 @@ __decorateClass([
   watch("active")
 ], SdTabPanel.prototype, "handleActiveChange", 1);
 SdTabPanel = __decorateClass([
-  customElement("sd-7-0-0-next-10-tab-panel")
+  customElement("sd-7-0-0-next-11-tab-panel")
 ], SdTabPanel);
 
 export {

package/dist-versioned/chunks/chunk.HIR2MKW6.js

@@ -20,7 +20,7 @@ var SdRangeTick = class extends SolidElement {
     this.subtick = false;
   }
   render() {
-    return html`<div part="base" class="${cx(this.subtick ? "w-0.25" : "w-0.5")}"><div part="line" class="${cx(this.subtick ? "h-2" : "h-[10px]")}"></div><div part="label" class="flex items-center justify-center text-center text-nowrap text-sm sd-7-0-0-next-10-range-scale-ticks-color-text"><slot></slot></div></div>`;
+    return html`<div part="base" class="${cx(this.subtick ? "w-0.25" : "w-0.5")}"><div part="line" class="${cx(this.subtick ? "h-2" : "h-[10px]")}"></div><div part="label" class="flex items-center justify-center text-center text-nowrap text-sm sd-7-0-0-next-11-range-scale-ticks-color-text"><slot></slot></div></div>`;
   }
 };
 SdRangeTick.styles = [
@@ -32,7 +32,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdRangeTick.prototype, "subtick", 2);
 SdRangeTick = __decorateClass([
-  customElement("sd-7-0-0-next-10-range-tick")
+  customElement("sd-7-0-0-next-11-range-tick")
 ], SdRangeTick);
 
 export {

package/dist-versioned/chunks/{chunk.GOZXDQTL.js → chunk.HSFOQQ52.js}

@@ -420,14 +420,14 @@ var SdInput = class extends SolidElement {
       !isFloatingLabelActive || !hasValue && (this.readonly || this.visuallyDisabled) ? textSize : "text-xs",
       (this.visuallyDisabled || this.disabled) && "text-neutral-500",
       isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "form-control--filled__floating-label-color-text"
-    )}">${this.label}</span></label>` : null} ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-7-0-0-next-10-icon class="${cx(
+    )}">${this.label}</span></label>` : null} ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-7-0-0-next-11-icon class="${cx(
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-neutral-700",
       iconSize
-    )}" library="_internal" name="closing-round"></sd-7-0-0-next-10-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx(
+    )}" library="_internal" name="close-circle"></sd-7-0-0-next-11-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx(
       "flex items-center sd-interactive",
       iconMarginLeft,
       this.floatingLabel && !isFloatingLabelActive && "hide-password-toggle"
-    )}" type="button" @click="${this.handlePasswordToggle}" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-7-0-0-next-10-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-7-0-0-next-10-icon></slot>` : html`<slot name="hide-password-icon"><sd-7-0-0-next-10-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-7-0-0-next-10-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-7-0-0-next-10-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-7-0-0-next-10-icon>` : ""} ${this.type === "time" ? html`<sd-7-0-0-next-10-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-7-0-0-next-10-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-7-0-0-next-10-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-7-0-0-next-10-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-7-0-0-next-10-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-7-0-0-next-10-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-7-0-0-next-10-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-10-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" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}"><slot name="decrement-number-stepper"><sd-7-0-0-next-10-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-7-0-0-next-10-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-7-0-0-next-10-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-7-0-0-next-10-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
+    )}" type="button" @click="${this.handlePasswordToggle}" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-7-0-0-next-11-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-open"></sd-7-0-0-next-11-icon></slot>` : html`<slot name="hide-password-icon"><sd-7-0-0-next-11-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-7-0-0-next-11-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-7-0-0-next-11-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-7-0-0-next-11-icon>` : ""} ${this.type === "time" ? html`<sd-7-0-0-next-11-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-7-0-0-next-11-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-7-0-0-next-11-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-7-0-0-next-11-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-7-0-0-next-11-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-7-0-0-next-11-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-7-0-0-next-11-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-11-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" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}"><slot name="decrement-number-stepper"><sd-7-0-0-next-11-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-7-0-0-next-11-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-7-0-0-next-11-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-7-0-0-next-11-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
       "text-sm mt-1",
       hasHelpText && !this.showInvalidStyle ? "block" : "hidden",
       this.visuallyDisabled || this.disabled ? "text-neutral-500" : "text-neutral-700"
@@ -440,7 +440,7 @@ var SdInput = class extends SolidElement {
 SdInput.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) :is(#label,#floating-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;display:none;-webkit-appearance:none}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-7-0-0-next-10-icon{color:rgba(var(--sd-color-text-neutral-500))}.hide-password-toggle{display:none}.has-floating-label input[type=date]:not(.has-value),.has-floating-label input[type=datetime-local]:not(.has-value),.has-floating-label input[type=time]:not(.has-value){color:transparent}.has-floating-label input[type=date]:focus,.has-floating-label input[type=datetime-local]:focus,.has-floating-label input[type=time]:focus{color:inherit}.icon-color{color:rgba(var(--sd-form-control-color-icon-fill))}`
+:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) :is(#label,#floating-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;display:none;-webkit-appearance:none}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-7-0-0-next-11-icon{color:rgba(var(--sd-color-text-neutral-500))}.hide-password-toggle{display:none}.has-floating-label input[type=date]:not(.has-value),.has-floating-label input[type=datetime-local]:not(.has-value),.has-floating-label input[type=time]:not(.has-value){color:transparent}.has-floating-label input[type=date]:focus,.has-floating-label input[type=datetime-local]:focus,.has-floating-label input[type=time]:focus{color:inherit}.icon-color{color:rgba(var(--sd-form-control-color-icon-fill))}`
 ];
 __decorateClass([
   query("#input")
@@ -587,7 +587,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdInput.prototype, "handleSizeChange", 1);
 SdInput = __decorateClass([
-  customElement("sd-7-0-0-next-10-input")
+  customElement("sd-7-0-0-next-11-input")
 ], SdInput);
 
 export {

package/dist-versioned/chunks/chunk.I57THEU4.js

@@ -24,7 +24,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-7-0-0-next-10-tab-${this.attrId}`;
+    this.componentId = `sd-7-0-0-next-11-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.localize = new LocalizeController(this);
     this.variant = "default";
@@ -62,17 +62,17 @@ var SdTab = class extends SolidElement {
       "outline-hidden focus-visible:focus-outline outline-2 !-outline-offset-2 transition-all duration-fast ease-in-out",
       this.variant === "container" ? "tab-container-border bg-white rounded-[4px_4px_0_0]" : "navigable-border-radius",
       this.variant === "container" && this.active && "tab--active-container-border bg-white",
-      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:sd-7-0-0-next-10-tab--hover-color-background",
-      this.active && "z-20 sd-7-0-0-next-10-tab--active-color-text"
+      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:sd-7-0-0-next-11-tab--hover-color-background",
+      this.active && "z-20 sd-7-0-0-next-11-tab--active-color-text"
     )}" tabindex="${!this.active || this.disabled ? "-1" : "0"}"><div class="${cx("flex h-full items-center justify-center whitespace-nowrap")}"><slot name="left" class="${cx(
       slots.left && "block pr-2",
-      this.disabled || this.visuallyDisabled ? "sd-7-0-0-next-10-tab--disabled-color-text" : this.active ? "sd-7-0-0-next-10-tab--active-color-text" : "sd-7-0-0-next-10-tab-color-text"
+      this.disabled || this.visuallyDisabled ? "sd-7-0-0-next-11-tab--disabled-color-text" : this.active ? "sd-7-0-0-next-11-tab--active-color-text" : "sd-7-0-0-next-11-tab-color-text"
     )}"></slot><slot class="${cx(
-      this.disabled || this.visuallyDisabled ? "sd-7-0-0-next-10-tab--disabled-color-text" : this.active ? "sd-7-0-0-next-10-tab--active-color-text" : "sd-7-0-0-next-10-tab-color-text"
+      this.disabled || this.visuallyDisabled ? "sd-7-0-0-next-11-tab--disabled-color-text" : this.active ? "sd-7-0-0-next-11-tab--active-color-text" : "sd-7-0-0-next-11-tab-color-text"
     )}"></slot>${this.variant === "container" ? html`<div part="active-tab-indicator" class="${cx(
       "absolute bottom-0 h-1 bg-accent w-3/4 bottom-0 group-hover:w-[calc(100%-2px)] navigable__current-indicator-height navigable__current-indicator-border-radius"
     )}"></div>` : ""}<div part="hover-bottom-border" class="${cx(
-      !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-7-0-0-next-10-tab-color-border"
+      !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-7-0-0-next-11-tab-color-border"
     )}"></div></div></div>`;
   }
 };
@@ -109,7 +109,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-7-0-0-next-10-tab")
+  customElement("sd-7-0-0-next-11-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.P5V6KORX.js → chunk.I5C34XR6.js}

@@ -98,11 +98,11 @@ var SdCombobox = class extends SolidElement {
       return normalizedOption.includes(normalizedQuery) || normalizedOptionLabel.includes(normalizedQuery);
     };
     this.getTag = (option) => {
-      return html`<sd-7-0-0-next-10-tag class="min-w-0 max-w-full" ?disabled="${this.disabled}" part="tag" exportparts="
+      return html`<sd-7-0-0-next-11-tag class="min-w-0 max-w-full" ?disabled="${this.disabled}" part="tag" exportparts="
               base:tag__base,
               content:tag__content,
               removable-indicator:tag__removable-indicator,
-            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-7-0-0-next-10-tag>`;
+            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-7-0-0-next-11-tag>`;
     };
     this.handleDocumentFocusIn = (event) => {
       const path = event.composedPath();
@@ -241,9 +241,9 @@ var SdCombobox = class extends SolidElement {
       return html`${typeof optionHtml === "string" ? unsafeHTML(optionHtml) : optionHtml}`;
     };
     return this.filteredOptions.map((item) => {
-      if (item.tagName.toLowerCase() === "sd-7-0-0-next-10-optgroup") {
+      if (item.tagName.toLowerCase() === "sd-7-0-0-next-11-optgroup") {
         Array.from(item.children).forEach((option) => {
-          if (option.tagName.toLowerCase() === "sd-7-0-0-next-10-option") {
+          if (option.tagName.toLowerCase() === "sd-7-0-0-next-11-option") {
             renderOption(option);
           }
         });
@@ -263,11 +263,11 @@ var SdCombobox = class extends SolidElement {
       });
     } else {
       return [
-        html`<sd-7-0-0-next-10-tag class="min-w-0 max-w-full" ?disabled="${this.disabled}" part="tag" exportparts="
+        html`<sd-7-0-0-next-11-tag class="min-w-0 max-w-full" ?disabled="${this.disabled}" part="tag" exportparts="
               base:tag__base,
               content:tag__content,
               removable-indicator:tag__removable-indicator,
-            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.localize.term("tagsSelected")}</sd-7-0-0-next-10-tag>`
+            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.localize.term("tagsSelected")}</sd-7-0-0-next-11-tag>`
       ];
     }
   }
@@ -403,7 +403,7 @@ var SdCombobox = class extends SolidElement {
   }
   handleOptionClick(event) {
     const target = event.target;
-    const option = target.closest("sd-7-0-0-next-10-option");
+    const option = target.closest("sd-7-0-0-next-11-option");
     const oldValue = this.value;
     if (option && !option.disabled) {
       if (this.multiple) {
@@ -455,7 +455,7 @@ var SdCombobox = class extends SolidElement {
     scrollIntoView(this.getCurrentOption(), this.listbox, "vertical", "auto");
   }
   getAllFilteredOptions() {
-    return [...this.filteredWrapper.querySelectorAll("sd-7-0-0-next-10-option")];
+    return [...this.filteredWrapper.querySelectorAll("sd-7-0-0-next-11-option")];
   }
   getCurrentOption() {
     return this.getAllFilteredOptions().find((option) => option.current);
@@ -585,7 +585,7 @@ var SdCombobox = class extends SolidElement {
       clonedOption.selected = option.selected;
       clonedOption.checkbox = option.checkbox;
       clonedOption.size = option.size;
-      const hasOptgroup = ((_b = option.parentElement) == null ? void 0 : _b.tagName.toLowerCase()) === "sd-7-0-0-next-10-optgroup";
+      const hasOptgroup = ((_b = option.parentElement) == null ? void 0 : _b.tagName.toLowerCase()) === "sd-7-0-0-next-11-optgroup";
       if (!hasOptgroup) {
         return clonedOption;
       }
@@ -609,7 +609,7 @@ var SdCombobox = class extends SolidElement {
     this.formControlController.emitInvalidEvent(event);
     this.invalidMessage.textContent = event.target.validationMessage;
   }
-  /** Receives incoming event detail from sd-7-0-0-next-10-popup and updates local state for conditional styling. */
+  /** Receives incoming event detail from sd-7-0-0-next-11-popup and updates local state for conditional styling. */
   handleCurrentPlacement(e) {
     const incomingPlacement = e.detail;
     if (incomingPlacement) {
@@ -621,7 +621,7 @@ var SdCombobox = class extends SolidElement {
   }
   handleUseTagsChange() {
     const allOptions = this.getAllFilteredOptions();
-    if (customElements.get("sd-7-0-0-next-10-option")) {
+    if (customElements.get("sd-7-0-0-next-11-option")) {
       allOptions.forEach((option) => {
         option.checkbox = this.multiple;
       });
@@ -750,8 +750,8 @@ var SdCombobox = class extends SolidElement {
     return filterOnlyOptgroups(getAssignedElementsForSlot(this.defaultSlot));
   }
   async handleDefaultSlotChange() {
-    if (!customElements.get("sd-7-0-0-next-10-option")) {
-      customElements.whenDefined("sd-7-0-0-next-10-option").then(() => this.handleDefaultSlotChange());
+    if (!customElements.get("sd-7-0-0-next-11-option")) {
+      customElements.whenDefined("sd-7-0-0-next-11-option").then(() => this.handleDefaultSlotChange());
       return;
     }
     const slottedOptions = this.getSlottedOptions();
@@ -763,10 +763,10 @@ var SdCombobox = class extends SolidElement {
       if (this.multiple) {
         option.checkbox = true;
       }
-      option.id = option.id || `sd-7-0-0-next-10-combobox-option-${index}`;
+      option.id = option.id || `sd-7-0-0-next-11-combobox-option-${index}`;
     });
     slottedOptgroups.forEach((optgroup, index) => {
-      optgroup.id = optgroup.id || `sd-7-0-0-next-10-combobox-optgroup-${index}`;
+      optgroup.id = optgroup.id || `sd-7-0-0-next-11-combobox-optgroup-${index}`;
     });
     await this.syncSelectedOptionsAndValue();
     if (this.multiple) {
@@ -831,7 +831,7 @@ var SdCombobox = class extends SolidElement {
         default: "form-control-color-border"
       }[selectState],
       this.open && (this.currentPlacement === "bottom" ? "rounded-bl-none rounded-br-none" : "rounded-tl-none rounded-tr-none")
-    )}"></div><sd-7-0-0-next-10-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
+    )}"></div><sd-7-0-0-next-11-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
       "inline-flex relative w-full",
       this.currentPlacement === "bottom" ? "origin-top" : "origin-bottom"
     )}" placement="${this.placement}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift sync="width" auto-size="vertical" auto-size-padding="10" exportparts="
@@ -860,18 +860,18 @@ var SdCombobox = class extends SolidElement {
       "flex justify-center",
       iconMarginLeft,
       this.value.length > 0 ? "visible" : "invisible"
-    )}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.preventLoosingFocus}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-7-0-0-next-10-icon class="${cx("text-neutral-700", iconSize)}" name="closing-round" library="_internal"></sd-7-0-0-next-10-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-7-0-0-next-10-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="_internal" name="risk"></sd-7-0-0-next-10-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-0-0-next-10-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle"></sd-7-0-0-next-10-icon>` : ""}<slot name="right" part="right" class="${cx(
+    )}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.preventLoosingFocus}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-7-0-0-next-11-icon class="${cx("text-neutral-700", iconSize)}" name="close-circle" library="_internal"></sd-7-0-0-next-11-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-7-0-0-next-11-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="_internal" name="risk"></sd-7-0-0-next-11-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-0-0-next-11-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle"></sd-7-0-0-next-11-icon>` : ""}<slot name="right" part="right" class="${cx(
       "inline-flex ml-2 leading-[0]",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "form-control-color-icon-fill",
       iconSize
-    )}">${this.type !== "search" ? html`<sd-7-0-0-next-10-icon class="${cx(
+    )}">${this.type !== "search" ? html`<sd-7-0-0-next-11-icon class="${cx(
       "transition-transform duration-medium ease-in-out",
       this.open ? "rotate-180" : "rotate-0"
-    )}" name="chevron-down" part="chevron" library="_internal" color="currentColor" label="${this.localize.term("open")}"></sd-7-0-0-next-10-icon>` : ""}</slot>${this.type === "search" ? html`<button class="${cx("flex items-center", iconMarginLeft)}" type="button" @mousedown="${this.preventLoosingFocus}" @click="${this.handleSearchClick}"><sd-7-0-0-next-10-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-7-0-0-next-10-icon></button>` : html`<button class="combobox-button absolute top-2" tabindex="-1" aria-hidden="true" @keydown="${this.handleComboboxMouseDown}" type="button"><span class="sr-only">${this.localize.term("open")}</span></button>`}</div><div id="listbox" role="${ifDefined(!this.multiple ? "listbox" : void 0)}" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
+    )}" name="chevron-bottom" part="chevron" library="_internal" color="currentColor" label="${this.localize.term("open")}"></sd-7-0-0-next-11-icon>` : ""}</slot>${this.type === "search" ? html`<button class="${cx("flex items-center", iconMarginLeft)}" type="button" @mousedown="${this.preventLoosingFocus}" @click="${this.handleSearchClick}"><sd-7-0-0-next-11-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-7-0-0-next-11-icon></button>` : html`<button class="combobox-button absolute top-2" tabindex="-1" aria-hidden="true" @keydown="${this.handleComboboxMouseDown}" type="button"><span class="sr-only">${this.localize.term("open")}</span></button>`}</div><div id="listbox" role="${ifDefined(!this.multiple ? "listbox" : void 0)}" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
       "bg-white px-2 py-3 relative border-primary overflow-y-auto",
       this.open && "shadow-listbox transition-shadow duration-medium ease-in-out",
       this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 form-control__listbox-border-bottom-right-radius form-control__listbox-border-bottom-left-radius" : "border-r-2 border-t-2 border-l-2 form-control__listbox-border-top-right-radius form-control__listbox-border-top-left-radius"
-    )}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-7-0-0-next-10-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
+    )}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-7-0-0-next-11-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
       "text-sm mt-1",
       hasHelpText ? "block" : "hidden",
       this.visuallyDisabled || this.disabled ? "text-neutral-500" : "text-neutral-700"
@@ -881,10 +881,10 @@ var SdCombobox = class extends SolidElement {
 SdCombobox.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([visually-disabled]) input{caret-color:transparent}:host([size=sm]) .combobox-button{right:var(--sd-spacing-4);height:var(--sd-spacing-4);width:var(--sd-spacing-4)}:host([size=md]) .combobox-button{right:.85rem;height:var(--sd-spacing-6);width:var(--sd-spacing-6)}:host([size=lg]) .combobox-button{right:var(--sd-spacing-3);height:var(--sd-spacing-8);width:var(--sd-spacing-8)}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-7-0-0-next-10-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-7-0-0-next-10-tag::part(base){border-radius:var(--sd-radius);border-width:var(--sd-combobox__tag-border-width,var(--sd-spacing-0\\.25));padding-inline:var(--sd-spacing-1)}sd-7-0-0-next-10-tag::part(content){display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:var(--tag-max-width,15ch)}sd-7-0-0-next-10-tag[size=lg]::part(base){padding-inline:var(--sd-spacing-2)}sd-7-0-0-next-10-tag[disabled=false]::part(base):hover{background-color:rgba(var(--sd-color-background-primary-100))}[part=filtered-listbox] sd-7-0-0-next-10-optgroup:first-of-type{--display-divider:none}mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold);color:inherit}:host([type=search]) sd-7-0-0-next-10-icon[name=magnifying-glass],[part=chevron]{color:rgba(var(--sd-form-control-color-icon-fill))}:host([disabled])::part(chevron),:host([type=search][disabled]) sd-7-0-0-next-10-icon[name=magnifying-glass],:host([type=search][visually-disabled]) sd-7-0-0-next-10-icon[name=magnifying-glass],:host([visually-disabled])::part(chevron){color:rgba(var(--sd-color-icon-fill-neutral-500,--sd-color-neutral-500))}@property --tw-font-weight{syntax:"*";inherits:false}`
+:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([visually-disabled]) input{caret-color:transparent}:host([size=sm]) .combobox-button{right:var(--sd-spacing-4);height:var(--sd-spacing-4);width:var(--sd-spacing-4)}:host([size=md]) .combobox-button{right:.85rem;height:var(--sd-spacing-6);width:var(--sd-spacing-6)}:host([size=lg]) .combobox-button{right:var(--sd-spacing-3);height:var(--sd-spacing-8);width:var(--sd-spacing-8)}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-7-0-0-next-11-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-7-0-0-next-11-tag::part(base){border-radius:var(--sd-radius);border-width:var(--sd-combobox__tag-border-width,var(--sd-spacing-0\\.25));padding-inline:var(--sd-spacing-1)}sd-7-0-0-next-11-tag::part(content){display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:var(--tag-max-width,15ch)}sd-7-0-0-next-11-tag[size=lg]::part(base){padding-inline:var(--sd-spacing-2)}sd-7-0-0-next-11-tag[disabled=false]::part(base):hover{background-color:rgba(var(--sd-color-background-primary-100))}[part=filtered-listbox] sd-7-0-0-next-11-optgroup:first-of-type{--display-divider:none}mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold);color:inherit}:host([type=search]) sd-7-0-0-next-11-icon[name=magnifying-glass],[part=chevron]{color:rgba(var(--sd-form-control-color-icon-fill))}:host([disabled])::part(chevron),:host([type=search][disabled]) sd-7-0-0-next-11-icon[name=magnifying-glass],:host([type=search][visually-disabled]) sd-7-0-0-next-11-icon[name=magnifying-glass],:host([visually-disabled])::part(chevron){color:rgba(var(--sd-color-icon-fill-neutral-500,--sd-color-neutral-500))}@property --tw-font-weight{syntax:"*";inherits:false}`
 ];
 __decorateClass([
-  query("sd-7-0-0-next-10-popup")
+  query("sd-7-0-0-next-11-popup")
 ], SdCombobox.prototype, "popup", 2);
 __decorateClass([
   query('[part="combobox"]')
@@ -1048,7 +1048,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdCombobox.prototype, "handleSizeChange", 1);
 SdCombobox = __decorateClass([
-  customElement("sd-7-0-0-next-10-combobox")
+  customElement("sd-7-0-0-next-11-combobox")
 ], SdCombobox);
 setDefaultAnimation("combobox.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],

package/dist-versioned/chunks/chunk.IXJGPE6X.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-7-0-0-next-10-button-group__button--focus");
+    button == null ? void 0 : button.classList.add("sd-7-0-0-next-11-button-group__button--focus");
   }
   handleBlur(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-7-0-0-next-10-button-group__button--focus");
+    button == null ? void 0 : button.classList.remove("sd-7-0-0-next-11-button-group__button--focus");
   }
   handleMouseOver(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-7-0-0-next-10-button-group__button--hover");
+    button == null ? void 0 : button.classList.add("sd-7-0-0-next-11-button-group__button--hover");
   }
   handleMouseOut(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-7-0-0-next-10-button-group__button--hover");
+    button == null ? void 0 : button.classList.remove("sd-7-0-0-next-11-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-7-0-0-next-10-button-group__button");
-        button.classList.toggle("sd-7-0-0-next-10-button-group__button--first", index === 0);
-        button.classList.toggle("sd-7-0-0-next-10-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle("sd-7-0-0-next-10-button-group__button--last", index === slottedElements.length - 1);
-        button.classList.toggle("sd-7-0-0-next-10-button-group__button--radio", button.tagName.toLowerCase() === "sd-7-0-0-next-10-radio-button");
+        button.classList.add("sd-7-0-0-next-11-button-group__button");
+        button.classList.toggle("sd-7-0-0-next-11-button-group__button--first", index === 0);
+        button.classList.toggle("sd-7-0-0-next-11-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle("sd-7-0-0-next-11-button-group__button--last", index === slottedElements.length - 1);
+        button.classList.toggle("sd-7-0-0-next-11-button-group__button--radio", button.tagName.toLowerCase() === "sd-7-0-0-next-11-radio-button");
       }
     });
   }
@@ -64,11 +64,11 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdButtonGroup.prototype, "label", 2);
 SdButtonGroup = __decorateClass([
-  customElement("sd-7-0-0-next-10-button-group")
+  customElement("sd-7-0-0-next-11-button-group")
 ], SdButtonGroup);
 function findButton(el) {
   var _a;
-  const selector = "sd-7-0-0-next-10-button, sd-7-0-0-next-10-radio-button";
+  const selector = "sd-7-0-0-next-11-button, sd-7-0-0-next-11-radio-button";
   return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
 }
 

package/dist-versioned/chunks/chunk.JAPL7DQX.js

@@ -57,13 +57,13 @@ var SdTeaser = class extends SolidElement {
       "teaser-has-headline": this.hasSlotController.test("headline")
     };
     return html`<div class="${cx(
-      "flex sd-7-0-0-next-10-teaser-border-radius",
+      "flex sd-7-0-0-next-11-teaser-border-radius",
       {
         white: "bg-white",
-        "white border-neutral-400": "bg-white border sd-7-0-0-next-10-teaser--neutral-400-color-border",
-        "neutral-100": "sd-7-0-0-next-10-teaser--neutral-100-color-background",
+        "white border-neutral-400": "bg-white border sd-7-0-0-next-11-teaser--neutral-400-color-border",
+        "neutral-100": "sd-7-0-0-next-11-teaser--neutral-100-color-background",
         primary: "bg-primary text-white",
-        "primary-100": "sd-7-0-0-next-10-teaser--primary-100-color-background"
+        "primary-100": "sd-7-0-0-next-11-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-7-0-0-next-10-teaser")
+  customElement("sd-7-0-0-next-11-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/chunk.KEJFWGZI.js

@@ -48,7 +48,7 @@ var SubmenuController = class {
       if (event.target === this.host) {
         event.preventDefault();
         event.stopPropagation();
-      } else if (event.target instanceof Element && (event.target.tagName === "sd-7-0-0-next-10-menu-item" || ((_a = event.target.role) == null ? void 0 : _a.startsWith("menuitem")))) {
+      } else if (event.target instanceof Element && (event.target.tagName === "sd-7-0-0-next-11-menu-item" || ((_a = event.target.role) == null ? void 0 : _a.startsWith("menuitem")))) {
         const type = event.target.getAttribute("type");
         if (type !== "checkbox") {
           this.disableSubmenu();
@@ -69,7 +69,7 @@ var SubmenuController = class {
     // Set the safe triangle values for the submenu when the position changes
     this.handlePopupReposition = () => {
       const submenuSlot = this.host.renderRoot.querySelector("slot[name='submenu']");
-      const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sd-7-0-0-next-10-menu")[0];
+      const menu = submenuSlot == null ? void 0 : submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sd-7-0-0-next-11-menu")[0];
       const isRtl = getComputedStyle(this.host).direction === "rtl";
       if (!menu) {
         return;
@@ -141,7 +141,7 @@ var SubmenuController = class {
     }
     let menuItems = null;
     for (const elt of submenuSlot.assignedElements()) {
-      menuItems = elt.querySelectorAll("sd-7-0-0-next-10-menu-item, [role^='menuitem']");
+      menuItems = elt.querySelectorAll("sd-7-0-0-next-11-menu-item, [role^='menuitem']");
       if (menuItems.length !== 0) {
         break;
       }
@@ -220,7 +220,7 @@ var SubmenuController = class {
     if (!this.isConnected) {
       return html`<slot name="submenu" hidden></slot>`;
     }
-    return html`<sd-7-0-0-next-10-popup ${ref(this.popupRef)} placement="${isRtl ? "left-start" : "right-start"}" anchor="anchor" flip flip-fallback-strategy="best-fit" skidding="${this.skidding}" strategy="fixed" auto-size="vertical" auto-size-padding="10"><slot name="submenu"></slot></sd-7-0-0-next-10-popup>`;
+    return html`<sd-7-0-0-next-11-popup ${ref(this.popupRef)} placement="${isRtl ? "left-start" : "right-start"}" anchor="anchor" flip flip-fallback-strategy="best-fit" skidding="${this.skidding}" strategy="fixed" auto-size="vertical" auto-size-padding="10"><slot name="submenu"></slot></sd-7-0-0-next-11-popup>`;
   }
 };