@solid-design-system/components 4.0.0-next.0 → 4.0.0-next.10

package/dist-versioned/chunks/{chunk.J2XBUIBC.js → chunk.MEGJ7CBG.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ var SdExpandable = class extends SolidElement {
       "sd-interactive sd-interactive--reset !h-full !justify-center !w-full !text-base !flex !items-center !underline !underline-offset-2 !toggle",
       this.inverted && "sd-interactive--inverted",
       !this.inverted ? "!focus-visible:focus-outline" : "!focus-visible:focus-outline-inverted"
-    )}" @click="${this.onToggleClick}">${this.open ? html`<slot name="toggle-open"><sd-4-0-0-next-0-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-0-0-next-0-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-0-0-next-0-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-0-0-next-0-icon>${this.localize.term("showMore")}</slot>`}</button>`;
+    )}" @click="${this.onToggleClick}">${this.open ? html`<slot name="toggle-open"><sd-4-0-0-next-10-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-0-0-next-10-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-0-0-next-10-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-0-0-next-10-icon>${this.localize.term("showMore")}</slot>`}</button>`;
   }
   firstUpdated() {
     this.cloneContentToLightDOM();
@@ -108,7 +108,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdExpandable.prototype, "onOpenChange", 1);
 SdExpandable = __decorateClass([
-  customElement("sd-4-0-0-next-0-expandable")
+  customElement("sd-4-0-0-next-10-expandable")
 ], SdExpandable);
 
 export {

package/dist-versioned/chunks/{chunk.PGZ5AWZ2.js → chunk.MF3CL2AP.js}

@@ -24,7 +24,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -76,7 +76,7 @@ var SdDropdown = class extends SolidElement {
    * within the slotted trigger. This could be the slotted element itself, a child of the slotted element,
    * or an element within the slotted elements shadow root.
    *
-   * e.g. the accessible trigger of an <sd-4-0-0-next-0-button> is a <button> located inside its shadow root.
+   * e.g. the accessible trigger of an <sd-4-0-0-next-10-button> is a <button> located inside its shadow root.
    *
    * To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
    * */
@@ -87,11 +87,11 @@ var SdDropdown = class extends SolidElement {
     if (accessibleTrigger) {
       switch (accessibleTrigger.tagName.toLowerCase()) {
         // Solid buttons have to update the internal button so it's announced correctly by screen readers
-        case "sd-4-0-0-next-0-button":
-        case "sd-4-0-0-next-0-icon-button":
+        case "sd-4-0-0-next-10-button":
+        case "sd-4-0-0-next-10-icon-button":
           target = accessibleTrigger.button;
           break;
-        case "sd-4-0-0-next-0-navigation-item":
+        case "sd-4-0-0-next-10-navigation-item":
           target = accessibleTrigger.button;
           break;
         default:
@@ -236,7 +236,7 @@ var SdDropdown = class extends SolidElement {
   }
   addOpenListeners() {
     this.panel.addEventListener("sd-activate", this.handleMenuItemActivate);
-    this.panel.addEventListener("sd-4-0-0-next-0-select", this.handlePanelSelect);
+    this.panel.addEventListener("sd-4-0-0-next-10-select", this.handlePanelSelect);
     this.panel.addEventListener("keydown", this.handleKeyDown);
     document.addEventListener("keydown", this.handleDocumentKeyDown);
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
@@ -244,7 +244,7 @@ var SdDropdown = class extends SolidElement {
   removeOpenListeners() {
     if (this.panel) {
       this.panel.removeEventListener("sd-activate", this.handleMenuItemActivate);
-      this.panel.removeEventListener("sd-4-0-0-next-0-select", this.handlePanelSelect);
+      this.panel.removeEventListener("sd-4-0-0-next-10-select", this.handlePanelSelect);
       this.panel.removeEventListener("keydown", this.handleKeyDown);
     }
     document.removeEventListener("keydown", this.handleDocumentKeyDown);
@@ -277,11 +277,11 @@ var SdDropdown = class extends SolidElement {
     }
   }
   render() {
-    return html`<sd-4-0-0-next-0-popup part="base" id="dropdown" placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10" ?active="${this.open}"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
+    return html`<sd-4-0-0-next-10-popup part="base" id="dropdown" placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10" ?active="${this.open}"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
       "shadow bg-white",
       this.open ? "block pointer-events-auto" : "pointer-events-none",
       this.rounded && "rounded-md"
-    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-4-0-0-next-0-popup>`;
+    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-4-0-0-next-10-popup>`;
   }
 };
 SdDropdown.styles = [
@@ -334,7 +334,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDropdown.prototype, "handleOpenChange", 1);
 SdDropdown = __decorateClass([
-  customElement("sd-4-0-0-next-0-dropdown")
+  customElement("sd-4-0-0-next-10-dropdown")
 ], SdDropdown);
 setDefaultAnimation("dropdown.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.3IT4HBTI.js → chunk.NTKMCOLR.js}

@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -126,7 +126,7 @@ __decorateClass([
   watch(["name", "src", "library"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-4-0-0-next-0-icon")
+  customElement("sd-4-0-0-next-10-icon")
 ], SdIcon);
 
 export {

package/dist-versioned/chunks/{chunk.XVFJS7VS.js → chunk.O3MWFP7G.js}

@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -175,15 +175,15 @@ var SdTooltip = class extends SolidElement {
   render() {
     const isStart = this.placement.endsWith("-start");
     const isEnd = this.placement.endsWith("-end");
-    return html`<sd-4-0-0-next-0-popup part="base" exportparts="
+    return html`<sd-4-0-0-next-10-popup part="base" exportparts="
           popup:base__popup,
           arrow:base__arrow
-        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0"><slot slot="anchor" aria-describedby="tooltip" class="${cx(this.size === "lg" ? "text-xl" : "text-base")}"><button class="flex sd-interactive rounded-full"><sd-4-0-0-next-0-icon library="system" name="info-circle" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-4-0-0-next-0-icon></button></slot><slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="Tooltip" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-4-0-0-next-0-popup>`;
+        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0"><slot slot="anchor" aria-describedby="tooltip" class="${cx(this.size === "lg" ? "text-xl" : "text-base")}"><button class="flex sd-interactive rounded-full"><sd-4-0-0-next-10-icon library="system" name="info-circle" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-4-0-0-next-10-icon></button></slot><slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="Tooltip" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-4-0-0-next-10-popup>`;
   }
 };
 SdTooltip.styles = [
   ...SolidElement.styles,
-  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-4-0-0-next-0-popup{--arrow-color:rgb(var(--sd-color-primary,0 53 142)/1);--arrow-size:10px}sd-4-0-0-next-0-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-0-0-next-0-popup::part(arrow){--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-0-0-next-0-popup[placement^=top]::part(popup){transform-origin:bottom}sd-4-0-0-next-0-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`
+  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-4-0-0-next-10-popup{--arrow-color:rgb(var(--sd-color-primary,0 53 142)/1);--arrow-size:10px}sd-4-0-0-next-10-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-0-0-next-10-popup::part(arrow){--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-0-0-next-10-popup[placement^=top]::part(popup){transform-origin:bottom}sd-4-0-0-next-10-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -192,7 +192,7 @@ __decorateClass([
   query("#tooltip")
 ], SdTooltip.prototype, "body", 2);
 __decorateClass([
-  query("sd-4-0-0-next-0-popup")
+  query("sd-4-0-0-next-10-popup")
 ], SdTooltip.prototype, "popup", 2);
 __decorateClass([
   property()
@@ -225,7 +225,7 @@ __decorateClass([
   watch("disabled")
 ], SdTooltip.prototype, "handleDisabledChange", 1);
 SdTooltip = __decorateClass([
-  customElement("sd-4-0-0-next-0-tooltip")
+  customElement("sd-4-0-0-next-10-tooltip")
 ], SdTooltip);
 setDefaultAnimation("tooltip.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.J7MMF6WJ.js → chunk.O4QXE2LJ.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -70,7 +70,7 @@ var SdRadio = class extends SolidElement {
   }
   render() {
     return html`<span part="base" class="${cx(
-      "sd-4-0-0-next-0-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      "sd-4-0-0-next-10-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
       this.disabled && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -122,7 +122,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdRadio.prototype, "handleDisabledChange", 1);
 SdRadio = __decorateClass([
-  customElement("sd-4-0-0-next-0-radio")
+  customElement("sd-4-0-0-next-10-radio")
 ], SdRadio);
 
 export {

package/dist-versioned/chunks/{chunk.KJFKVSZA.js → chunk.O5W5RLTG.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -67,15 +67,15 @@ var SdTeaser = class extends SolidElement {
       this._orientation === "vertical" && "flex-col",
       this._orientation === "horizontal" && "flex-row gap-8",
       this._orientation === "horizontal" && inset && "py-8 px-10"
-    )}" part="base"><div style="${this._orientation === "horizontal" ? `width: var(--distribution-media, 100%);` : ""}" class="${cx(
+    )}" part="base"><div part="media" id="media" aria-hidden="true" style="${this._orientation === "horizontal" ? `width: var(--distribution-media, 100%);` : ""}" class="${cx(
       !inset && this._orientation === "vertical" && "mb-4",
       !slots["teaser-has-media"] && "hidden",
       this.variant === "white border-neutral-400" && this._orientation === "vertical" && "mx-[-1px] mt-[-1px]"
-    )}" part="media"><slot name="media"></slot></div><div style="${this._orientation === "horizontal" ? `width: var(--distribution-content, 100%); ${inset ? "width: var(--distribution-content, calc(100% - 2rem));" : ""}` : ""}" class="${cx(
+    )}"><slot name="media"></slot></div><div style="${this._orientation === "horizontal" ? `width: var(--distribution-content, 100%); ${inset ? "width: var(--distribution-content, calc(100% - 2rem));" : ""}` : ""}" class="${cx(
       "flex flex-col text-left",
       this._orientation === "horizontal" && `flex flex-col`,
       this._orientation === "vertical" && inset && "m-4"
-    )}" part="content"><div part="meta" class="${cx("gap-2 mb-4", !slots["teaser-has-meta"] && "hidden")}"><slot name="meta"></slot></div><div part="headline" class="${cx("text-lg font-bold m-0", this.variant === "primary" ? "text-white" : "text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="main" class="${cx(!slots["teaser-has-default"] && "hidden")}"><slot></slot></div></div></div>`;
+    )}" part="content"><div class="flex flex-col-reverse"><div part="headline" class="${cx("text-lg font-bold m-0", this.variant === "primary" ? "text-white" : "text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="meta" class="${cx("gap-2 mb-4", !slots["teaser-has-meta"] && "hidden")}"><slot name="meta"></slot></div></div><div part="main" class="${cx(!slots["teaser-has-default"] && "hidden")}" aria-labelledby="media"><slot></slot></div></div></div>`;
   }
 };
 SdTeaser.styles = [
@@ -98,7 +98,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-4-0-0-next-0-teaser")
+  customElement("sd-4-0-0-next-10-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.7OHSCBBX.js → chunk.OZBWEFM7.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -64,7 +64,7 @@ __decorateClass([
   query('[part="base"]')
 ], SdTeaserMedia.prototype, "teaserMedia", 2);
 SdTeaserMedia = __decorateClass([
-  customElement("sd-4-0-0-next-0-teaser-media")
+  customElement("sd-4-0-0-next-10-teaser-media")
 ], SdTeaserMedia);
 
 export {

package/dist-versioned/chunks/{chunk.PDRECIYA.js → chunk.QQ4M35EE.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -68,7 +68,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-4-0-0-next-0-include")
+  customElement("sd-4-0-0-next-10-include")
 ], SdInclude);
 
 export {

package/dist-versioned/chunks/{chunk.QP3SM2LZ.js → chunk.RKAIYDTU.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass,
   __spreadValues
@@ -364,7 +364,7 @@ var SdInput = class extends SolidElement {
       "min-w-0 flex-grow focus:outline-none bg-transparent placeholder-neutral-700",
       this.size === "sm" ? "h-6" : "h-8",
       textSize
-    )}" 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" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center ", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-4-0-0-next-0-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-4-0-0-next-0-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-4-0-0-next-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-4-0-0-next-0-icon></slot>` : html`<slot name="hide-password-icon"><sd-4-0-0-next-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-4-0-0-next-0-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-4-0-0-next-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-4-0-0-next-0-icon>` : ""} ${this.type === "time" ? html`<sd-4-0-0-next-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-4-0-0-next-0-icon>` : ""} ${this.type === "search" ? html`<button class="flex items-center" type="button" tabindex="-1"><sd-4-0-0-next-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="magnifying-glass"></sd-4-0-0-next-0-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-4-0-0-next-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-4-0-0-next-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-4-0-0-next-0-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-4-0-0-next-0-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-4-0-0-next-0-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-0-0-next-0-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-4-0-0-next-0-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-0-0-next-0-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", 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" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center ", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-4-0-0-next-10-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-4-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="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-4-0-0-next-10-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-4-0-0-next-10-icon></slot>` : html`<slot name="hide-password-icon"><sd-4-0-0-next-10-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-4-0-0-next-10-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-4-0-0-next-10-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-4-0-0-next-10-icon>` : ""} ${this.type === "time" ? html`<sd-4-0-0-next-10-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-4-0-0-next-10-icon>` : ""} ${this.type === "search" ? html`<button class="flex items-center" type="button" tabindex="-1"><sd-4-0-0-next-10-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="magnifying-glass"></sd-4-0-0-next-10-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-4-0-0-next-10-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-4-0-0-next-10-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-4-0-0-next-10-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-4-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"><slot name="decrement-number-stepper"><sd-4-0-0-next-10-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-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-4-0-0-next-10-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-0-0-next-10-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", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -372,7 +372,7 @@ var SdInput = class extends SolidElement {
  */
 SdInput.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #label:after{content:" *"}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-4-0-0-next-0-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}`
+  css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #label:after{content:" *"}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-4-0-0-next-10-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}`
 ];
 __decorateClass([
   query("#input")
@@ -499,7 +499,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdInput.prototype, "handleValueChange", 1);
 SdInput = __decorateClass([
-  customElement("sd-4-0-0-next-0-input")
+  customElement("sd-4-0-0-next-10-input")
 ], SdInput);
 
 export {

package/dist-versioned/chunks/{chunk.U6RY25TF.js → chunk.SFM7ZSKY.js}

@@ -28,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -206,7 +206,7 @@ var SdDrawer = class extends SolidElement {
         end: "top-0 end-0 bottom-auto start-auto w-[--width] h-full",
         start: "top-0 end-auto bottom-auto start-0 w-[--width] h-full"
       }[this.placement]
-    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.label}" aria-labelledby="${ifDefined(!this.noHeader ? "title" : void 0)}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-4-0-0-next-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-4-0-0-next-0-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-0-0-next-0-icon></sd-4-0-0-next-0-button></div></header>` : ""}<div part="body" class="flex-auto block px-4"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></div>`;
+    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.label}" aria-labelledby="${ifDefined(!this.noHeader ? "title" : void 0)}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-4-0-0-next-10-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-4-0-0-next-10-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-0-0-next-10-icon></sd-4-0-0-next-10-button></div></header>` : ""}<div part="body" class="flex-auto block px-4"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDrawer.styles = [
@@ -247,7 +247,7 @@ __decorateClass([
   watch("contained", { waitUntilFirstUpdate: true })
 ], SdDrawer.prototype, "handleNoModalChange", 1);
 SdDrawer = __decorateClass([
-  customElement("sd-4-0-0-next-0-drawer")
+  customElement("sd-4-0-0-next-10-drawer")
 ], SdDrawer);
 setDefaultAnimation("drawer.showStart", {
   keyframes: [

package/dist-versioned/chunks/{chunk.Z2UY62T2.js → chunk.SI6BILWU.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -90,7 +90,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "onResize", 1);
 SdHeader = __decorateClass([
-  customElement("sd-4-0-0-next-0-header")
+  customElement("sd-4-0-0-next-10-header")
 ], SdHeader);
 
 export {

package/dist-versioned/chunks/{chunk.DQPVSTUQ.js → chunk.STNLNYKE.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -131,12 +131,12 @@ var SdScrollable = class extends SolidElement {
       this.orientation === "auto" && "scroll-auto overflow-auto",
       this.scrollbars ? "show-scrollbars" : "hide-scrollbars",
       this.inset ? "p-4" : ""
-    )}" @scroll="${this.updateScrollIndicatorVisibility}" tabindex="0"><div part="scroll-content" class="flex-1"><slot></slot></div></div>${this.buttons ? html`${this.isScrollHorizontalEnabled ? html`${this.canScroll.left ? html`<div part="button-left" class="absolute z-10 flex items-center justify-center top-0 left-0 h-full w-8"><button part="button-start" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("left", e)}"><slot name="icon-start"><sd-4-0-0-next-0-icon library="system" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-4-0-0-next-0-icon></slot></button></div>` : null} ${this.canScroll.right ? html`<div part="button-right" class="absolute z-10 flex items-center justify-center top-0 right-0 h-full w-8"><button part="button-end" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("right", e)}"><slot name="icon-end"><sd-4-0-0-next-0-icon library="system" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-4-0-0-next-0-icon></slot></button></div>` : null}` : null} ${this.isScrollVerticalEnabled ? html`${this.canScroll.up ? html`<div part="button-top" class="absolute z-10 flex items-center justify-center top-0 left-0 w-full h-8"><button part="button-start" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("up", e)}"><slot name="icon-start"><sd-4-0-0-next-0-icon library="system" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-4-0-0-next-0-icon></slot></button></div>` : null} ${this.canScroll.down ? html`<div part="button-bottom" class="absolute z-10 flex items-center justify-center bottom-0 left-0 w-full h-8"><button part="button-end" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("down", e)}"><slot name="icon-end"><sd-4-0-0-next-0-icon library="system" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-4-0-0-next-0-icon></slot></button></div>` : null}` : null}` : null} ${this.shadows ? html`${this.isScrollHorizontalEnabled ? html`${this.canScroll.left ? html`<div part="shadow-left" class="${scrollShadowClasses} left top-0 left-0 w-[6px] h-full"></div>` : null} ${this.canScroll.right ? html`<div part="shadow-right" class="${scrollShadowClasses} right top-0 right-0 w-[6px] h-full"></div>` : null}` : null} ${this.isScrollVerticalEnabled ? html`${this.canScroll.up ? html`<div part="shadow-top" class="${scrollShadowClasses} top top-0 left-0 w-full h-[6px]"></div>` : null} ${this.canScroll.down ? html`<div part="shadow-bottom" class="${scrollShadowClasses} bottom bottom-0 left-0 w-full h-[6px]"></div>` : null}` : null}` : null}`;
+    )}" @scroll="${this.updateScrollIndicatorVisibility}" tabindex="0"><div part="scroll-content" class="flex-1"><slot></slot></div></div>${this.buttons ? html`${this.isScrollHorizontalEnabled ? html`${this.canScroll.left ? html`<div part="button-left" class="absolute z-10 flex items-center justify-center top-0 left-0 h-full w-8"><button part="button-start" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("left", e)}"><slot name="icon-start"><sd-4-0-0-next-10-icon library="system" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-4-0-0-next-10-icon></slot></button></div>` : null} ${this.canScroll.right ? html`<div part="button-right" class="absolute z-10 flex items-center justify-center top-0 right-0 h-full w-8"><button part="button-end" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("right", e)}"><slot name="icon-end"><sd-4-0-0-next-10-icon library="system" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-4-0-0-next-10-icon></slot></button></div>` : null}` : null} ${this.isScrollVerticalEnabled ? html`${this.canScroll.up ? html`<div part="button-top" class="absolute z-10 flex items-center justify-center top-0 left-0 w-full h-8"><button part="button-start" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("up", e)}"><slot name="icon-start"><sd-4-0-0-next-10-icon library="system" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-4-0-0-next-10-icon></slot></button></div>` : null} ${this.canScroll.down ? html`<div part="button-bottom" class="absolute z-10 flex items-center justify-center bottom-0 left-0 w-full h-8"><button part="button-end" class="${cx(scrollButtonClasses)}" @click="${(e) => this.handleScroll("down", e)}"><slot name="icon-end"><sd-4-0-0-next-10-icon library="system" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-4-0-0-next-10-icon></slot></button></div>` : null}` : null}` : null} ${this.shadows ? html`${this.isScrollHorizontalEnabled ? html`${this.canScroll.left ? html`<div part="shadow-left" class="${scrollShadowClasses} left top-0 left-0 w-[6px] h-full"></div>` : null} ${this.canScroll.right ? html`<div part="shadow-right" class="${scrollShadowClasses} right top-0 right-0 w-[6px] h-full"></div>` : null}` : null} ${this.isScrollVerticalEnabled ? html`${this.canScroll.up ? html`<div part="shadow-top" class="${scrollShadowClasses} top top-0 left-0 w-full h-[6px]"></div>` : null} ${this.canScroll.down ? html`<div part="shadow-bottom" class="${scrollShadowClasses} bottom bottom-0 left-0 w-full h-[6px]"></div>` : null}` : null}` : null}`;
   }
 };
 SdScrollable.styles = [
   ...SolidElement.styles,
-  css`:host{--gradient-color:hsla(0,0%,100%,0);--gradient:var(--gradient-color) 0%,#fff 80%,#fff 100%;display:flex;overflow:hidden;position:relative}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-border-radius-sm,.125rem)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1,.25rem);width:var(--sd-spacing-1,.25rem)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-right]{background:linear-gradient(90deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-top]{background:linear-gradient(0deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-bottom]{background:linear-gradient(180deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}.sd-4-0-0-next-0-icon--top{align-self:flex-start}.sd-4-0-0-next-0-icon--down{align-self:flex-end}`
+  css`:host{--gradient-color:hsla(0,0%,100%,0);--gradient:var(--gradient-color) 0%,#fff 80%,#fff 100%;display:flex;overflow:hidden;position:relative}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-border-radius-sm,.125rem)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1,.25rem);width:var(--sd-spacing-1,.25rem)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-right]{background:linear-gradient(90deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-top]{background:linear-gradient(0deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-bottom]{background:linear-gradient(180deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}.sd-4-0-0-next-10-icon--top{align-self:flex-start}.sd-4-0-0-next-10-icon--down{align-self:flex-end}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -169,7 +169,7 @@ __decorateClass([
   state()
 ], SdScrollable.prototype, "isKeyboardNavigation", 2);
 SdScrollable = __decorateClass([
-  customElement("sd-4-0-0-next-0-scrollable")
+  customElement("sd-4-0-0-next-10-scrollable")
 ], SdScrollable);
 
 export {

package/dist-versioned/chunks/{chunk.SPBPHTSS.js → chunk.T7U45C76.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -17,7 +17,6 @@ var SdVideo = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.playing = false;
-    this.overlay = false;
     this.isBelowBreakpoint = false;
     this.hasSlotController = new HasSlotController(this, "[default]", "play-icon", "poster");
   }
@@ -100,10 +99,7 @@ var SdVideo = class extends SolidElement {
       this.playing ? "opacity-0" : "opacity-100",
       this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
       "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-4-0-0-next-0-icon id="default-play-icon" library="system" name="start"></sd-4-0-0-next-0-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<div part="overlay" id="overlay" role="presentation" class="${cx(
-      this.overlay && !this.playing ? "opacity-100" : "opacity-0",
-      "bg-[black] bg-opacity-60 w-full h-full absolute top-0 left-0 pointer-events-none z-20 play-pause-transition"
-    )}"></div><slot></slot></div>`;
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-4-0-0-next-10-icon id="default-play-icon" library="system" name="start"></sd-4-0-0-next-10-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<slot></slot></div>`;
   }
 };
 SdVideo.styles = [
@@ -116,14 +112,11 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdVideo.prototype, "playing", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdVideo.prototype, "overlay", 2);
 __decorateClass([
   property({ type: Boolean })
 ], SdVideo.prototype, "isBelowBreakpoint", 2);
 SdVideo = __decorateClass([
-  customElement("sd-4-0-0-next-0-video")
+  customElement("sd-4-0-0-next-10-video")
 ], SdVideo);
 
 export {

package/dist-versioned/chunks/{chunk.ZWJI7SLE.js → chunk.TLVJDDZL.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -17,19 +17,19 @@ var SdButtonGroup = class extends SolidElement {
   }
   handleFocus(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-4-0-0-next-0-button-group__button--focus");
+    button == null ? void 0 : button.classList.add("sd-4-0-0-next-10-button-group__button--focus");
   }
   handleBlur(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-4-0-0-next-0-button-group__button--focus");
+    button == null ? void 0 : button.classList.remove("sd-4-0-0-next-10-button-group__button--focus");
   }
   handleMouseOver(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-4-0-0-next-0-button-group__button--hover");
+    button == null ? void 0 : button.classList.add("sd-4-0-0-next-10-button-group__button--hover");
   }
   handleMouseOut(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-4-0-0-next-0-button-group__button--hover");
+    button == null ? void 0 : button.classList.remove("sd-4-0-0-next-10-button-group__button--hover");
   }
   handleSlotChange() {
     const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
@@ -37,11 +37,11 @@ var SdButtonGroup = class extends SolidElement {
       const index = slottedElements.indexOf(el);
       const button = findButton(el);
       if (button !== null) {
-        button.classList.add("sd-4-0-0-next-0-button-group__button");
-        button.classList.toggle("sd-4-0-0-next-0-button-group__button--first", index === 0);
-        button.classList.toggle("sd-4-0-0-next-0-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle("sd-4-0-0-next-0-button-group__button--last", index === slottedElements.length - 1);
-        button.classList.toggle("sd-4-0-0-next-0-button-group__button--radio", button.tagName.toLowerCase() === "sd-4-0-0-next-0-radio-button");
+        button.classList.add("sd-4-0-0-next-10-button-group__button");
+        button.classList.toggle("sd-4-0-0-next-10-button-group__button--first", index === 0);
+        button.classList.toggle("sd-4-0-0-next-10-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle("sd-4-0-0-next-10-button-group__button--last", index === slottedElements.length - 1);
+        button.classList.toggle("sd-4-0-0-next-10-button-group__button--radio", button.tagName.toLowerCase() === "sd-4-0-0-next-10-radio-button");
       }
     });
   }
@@ -63,11 +63,11 @@ __decorateClass([
   property()
 ], SdButtonGroup.prototype, "label", 2);
 SdButtonGroup = __decorateClass([
-  customElement("sd-4-0-0-next-0-button-group")
+  customElement("sd-4-0-0-next-10-button-group")
 ], SdButtonGroup);
 function findButton(el) {
   var _a;
-  const selector = "sd-4-0-0-next-0-button, sd-4-0-0-next-0-radio-button";
+  const selector = "sd-4-0-0-next-10-button, sd-4-0-0-next-10-radio-button";
   return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
 }
 

package/dist-versioned/chunks/{chunk.RZRTIYXA.js → chunk.TYDRZQYV.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -14,7 +14,7 @@ var SdBadge = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.size = "lg";
-    this.variant = "default";
+    this.variant = "blue";
     this.inverted = false;
   }
   render() {
@@ -22,9 +22,9 @@ var SdBadge = class extends SolidElement {
       "inline-flex items-center justify-center gap-x-[1px] text-center font-bold whitespace-nowrap border rounded-full select-none cursor-[inherit]",
       {
         /* variants */
-        default: !this.inverted ? "text-white bg-primary-500 border-white" : "text-primary bg-primary-100 border-primary",
-        success: !this.inverted ? "text-white bg-success border-white" : "text-white bg-success border-primary",
-        error: !this.inverted ? "text-white bg-error border-white" : "text-white bg-error border-primary"
+        blue: !this.inverted ? "text-white bg-primary-500 border-white" : "text-primary bg-primary-100 border-primary",
+        green: !this.inverted ? "text-white bg-success border-white" : "text-white bg-success border-primary",
+        red: !this.inverted ? "text-white bg-error border-white" : "text-white bg-error border-primary"
       }[this.variant],
       {
         /* size and fonts*/
@@ -49,7 +49,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdBadge.prototype, "inverted", 2);
 SdBadge = __decorateClass([
-  customElement("sd-4-0-0-next-0-badge")
+  customElement("sd-4-0-0-next-10-badge")
 ], SdBadge);
 
 export {

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

@@ -1,7 +1,7 @@
 // src/components/combobox/utils.ts
 var getAssignedElementsForSlot = (slot) => Array.from(slot.assignedElements({ flatten: true }));
-var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-4-0-0-next-0-option" ? item : Array.from(item.querySelectorAll(":scope > sd-4-0-0-next-0-option"));
-var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-4-0-0-next-0-optgroup";
+var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-4-0-0-next-10-option" ? item : Array.from(item.querySelectorAll(":scope > sd-4-0-0-next-10-option"));
+var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-4-0-0-next-10-optgroup";
 var getAllOptions = (items) => items.map(getOptionOrNestedOptions);
 var filterOnlyOptgroups = (items) => items.filter(isOptgroup);
 var normalizeString = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();

package/dist-versioned/chunks/{chunk.H655M7FD.js → chunk.UO7UGXMA.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.DNCLRX5Q.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -137,7 +137,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-4-0-0-next-0-brandshape")
+  customElement("sd-4-0-0-next-10-brandshape")
 ], SdBrandshape);
 
 export {