@solid-design-system/components 5.15.11 → 5.16.0-next.0

package/dist-versioned/chunks/{chunk.QAJG6PYM.js → chunk.WFMQUAS5.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -83,7 +83,7 @@ var SdMapMarker = class extends SolidElement {
  */
 SdMapMarker.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}#motion-wrapper{mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain}:host([variant=cluster]) [part=base],svg{width:calc(var(--sd-spacing-12,3rem)*var(--map-marker-scaling,1))}:host([variant=cluster]) [part=base]{height:calc(var(--sd-spacing-12,3rem)*var(--map-marker-scaling,1))}:host(:not([variant=cluster])) [part=base]{height:calc(var(--sd-spacing-16,4rem)*var(--map-marker-scaling,1))}:host([variant=cluster]) [part=content]{font-size:calc(var(--sd-font-size-sm,.875rem)*var(--map-marker-scaling,1))}:host([variant=place]) [part=content]{font-size:calc(var(--sd-font-size-3xl,2rem)*var(--map-marker-scaling,1));margin-top:calc(var(--sd-spacing-2,.5rem)*-1)}:host([variant=main]) [part=marker],:host([variant=place]) [part=marker]{--tw-drop-shadow:drop-shadow(var(--sd-shadow,0px 1px 3px #515151));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:host([variant=main]) #marker-circle{height:calc(var(--sd-spacing-4,1rem)*var(--map-marker-scaling,1));left:calc(var(--sd-spacing-4,1rem)*var(--map-marker-scaling,1));right:calc(var(--sd-spacing-4,1rem)*var(--map-marker-scaling,1));top:calc(var(--sd-spacing-4,1rem)*var(--map-marker-scaling,1));width:calc(var(--sd-spacing-4,1rem)*var(--map-marker-scaling,1))}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;:host{display:block}#motion-wrapper{mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:contain;-webkit-mask-size:contain}:host([variant=cluster]) [part=base],svg{width:calc(var(--sd-spacing-12,3rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=base]{height:calc(var(--sd-spacing-12,3rem) * var(--map-marker-scaling,1))}:host(:not([variant=cluster])) [part=base]{height:calc(var(--sd-spacing-16,4rem) * var(--map-marker-scaling,1))}:host([variant=cluster]) [part=content]{font-size:calc(var(--sd-font-size-sm,.875rem) * var(--map-marker-scaling,1))}:host([variant=place]) [part=content]{margin-top:calc(var(--sd-spacing-2) * -1);font-size:calc(var(--sd-font-size-3xl,2rem) * var(--map-marker-scaling,1))}:host([variant=main]) [part=marker],:host([variant=place]) [part=marker]{--tw-drop-shadow-size:drop-shadow(var(--sd-drop-shadow));--tw-drop-shadow:drop-shadow(var(--sd-drop-shadow));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}:host([variant=main]) #marker-circle{width:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));height:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));left:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));right:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1));top:calc(var(--sd-spacing-4,1rem) * var(--map-marker-scaling,1))}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -107,7 +107,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdMapMarker.prototype, "label", 2);
 SdMapMarker = __decorateClass([
-  customElement("sd-5-15-11-map-marker")
+  customElement("sd-5-16-0-next-0-map-marker")
 ], SdMapMarker);
 
 export {

package/dist-versioned/chunks/{chunk.WZZP5YIS.js → chunk.WKRNHLCB.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -49,13 +49,13 @@ var SdLoader = class extends SolidElement {
  */
 SdLoader.styles = [
   ...SolidElement.styles,
-  css`:host{display:inline-block;height:1em;width:1em}.dot:nth-child(2){animation-delay:.1s}.dot:first-child{animation-delay:.2s}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{display:inline-block;width:1em;height:1em}.dot:nth-child(2){animation-delay:.1s}.dot:nth-child(1){animation-delay:.2s}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
 ], SdLoader.prototype, "color", 2);
 SdLoader = __decorateClass([
-  customElement("sd-5-15-11-loader")
+  customElement("sd-5-16-0-next-0-loader")
 ], SdLoader);
 
 export {

package/dist-versioned/chunks/{chunk.Q44CB3ZY.js → chunk.WZUYGJSJ.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -24,7 +24,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-5-15-11-tab-${this.attrId}`;
+    this.componentId = `sd-5-16-0-next-0-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.localize = new LocalizeController(this);
     this.variant = "default";
@@ -59,7 +59,7 @@ var SdTab = class extends SolidElement {
     };
     return html`<div part="base" class="${cx(
       "inline-flex justify-center min-w-max items-center h-12 px-3 leading-none select-none cursor-pointer group relative",
-      "focus-visible:focus-outline outline-2 !-outline-offset-2 transition-all duration-fast ease-in-out",
+      "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]",
       this.variant === "container" && this.active && "tab--active-container-border bg-white",
       this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:bg-neutral-200",
@@ -77,7 +77,7 @@ var SdTab = class extends SolidElement {
 };
 SdTab.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:inline-block}:host(:hover)::part(hover-bottom-border){--tw-border-opacity:1;border-bottom-color:rgb(var(--sd-color-neutral-400,195 195 195)/var(--tw-border-opacity,1))}.tab-container-border:after{border-color:transparent;border-width:1px;--tw-content:""}.tab--active-container-border:after,.tab-container-border:after{content:var(--tw-content);height:100%;position:absolute;width:100%}.tab--active-container-border:after{border-width:1px;--tw-border-opacity:1;border-color:rgb(var(--sd-color-neutral-400,195 195 195)/var(--tw-border-opacity,1));transition-duration:.15s;transition-duration:var(--sd-duration-medium,.3s);transition-property:border;transition-timing-function:cubic-bezier(.4,0,.2,1);--tw-content:"";border-bottom:none;border-radius:4px 4px 0 0}[part=active-tab-indicator]{--tw-scale-x:0;--tw-scale-y:0;opacity:var(--sd-opacity-0,0);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:var(--sd-duration-fast,.15s);transition:width var(--sd-duration-fast) ease-in-out,opacity var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out var(--sd-duration-fast)}:host([active]) [part=active-tab-indicator]{--tw-scale-x:1;--tw-scale-y:1;opacity:var(--sd-opacity-100,1);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition:width var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;:host{box-sizing:border-box;display:inline-block}:host(:hover)::part(hover-bottom-border){border-bottom-color:var(--sd-color-border-neutral-400,var(--sd-color-neutral-400))}.tab-container-border::after{position:absolute;height:100%;width:100%;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-content:'';content:var(--tw-content)}.tab--active-container-border::after{position:absolute;height:100%;width:100%;border-style:var(--tw-border-style);border-width:1px;border-color:var(--sd-color-border-neutral-400,var(--sd-color-neutral-400));transition-property:border;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms));--tw-duration:var(--sd-duration-medium, 300ms);transition-duration:var(--sd-duration-medium,300ms);--tw-ease:var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));--tw-content:'';content:var(--tw-content);border-bottom:none;border-radius:4px 4px 0 0}[part=active-tab-indicator]{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-0);--tw-duration:var(--sd-duration-fast, 150ms);transition-duration:var(--sd-duration-fast,150ms);transition:width var(--sd-duration-fast) ease-in-out,opacity var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out var(--sd-duration-fast)}:host([active]) [part=active-tab-indicator]{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-100);transition:width var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -107,7 +107,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-5-15-11-tab")
+  customElement("sd-5-16-0-next-0-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.6MHK4U6F.js → chunk.X6YLTXVX.js}

@@ -1,6 +1,6 @@
 import {
   SdRadio
-} from "./chunk.IUS3S54L.js";
+} from "./chunk.ACNKTEJM.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -74,10 +74,10 @@ var SdRadioGroup = class extends SolidElement {
     this.formControlController.updateValidity();
   }
   getAllRadios() {
-    return [...this.querySelectorAll("sd-5-15-11-radio, sd-5-15-11-radio-button")];
+    return [...this.querySelectorAll("sd-5-16-0-next-0-radio, sd-5-16-0-next-0-radio-button")];
   }
   handleRadioClick(event) {
-    const target = event.target.closest("sd-5-15-11-radio, sd-5-15-11-radio-button");
+    const target = event.target.closest("sd-5-16-0-next-0-radio, sd-5-16-0-next-0-radio-button");
     const radios = this.getAllRadios();
     const oldValue = this.value;
     if (target.disabled) {
@@ -154,7 +154,7 @@ var SdRadioGroup = class extends SolidElement {
         }
       })
     );
-    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-5-15-11-radio-button");
+    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-5-16-0-next-0-radio-button");
     if (!radios.some((radio) => radio.checked)) {
       if (this.hasButtonGroup) {
         const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
@@ -166,26 +166,26 @@ var SdRadioGroup = class extends SolidElement {
       }
     }
     if (this.hasButtonGroup) {
-      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-5-15-11-button-group");
+      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-5-16-0-next-0-button-group");
       if (buttonGroup) {
         buttonGroup.disableRole = true;
       }
     }
   }
   syncRadios() {
-    if (customElements.get("sd-5-15-11-radio") && customElements.get("sd-5-15-11-radio-button")) {
+    if (customElements.get("sd-5-16-0-next-0-radio") && customElements.get("sd-5-16-0-next-0-radio-button")) {
       this.syncRadioElements();
       return;
     }
-    if (customElements.get("sd-5-15-11-radio")) {
+    if (customElements.get("sd-5-16-0-next-0-radio")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-5-15-11-radio").then(() => this.syncRadios());
+      customElements.whenDefined("sd-5-16-0-next-0-radio").then(() => this.syncRadios());
     }
-    if (customElements.get("sd-5-15-11-radio-button")) {
+    if (customElements.get("sd-5-16-0-next-0-radio-button")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-5-15-11-radio-button").then(() => this.syncRadios());
+      customElements.whenDefined("sd-5-16-0-next-0-radio-button").then(() => this.syncRadios());
     }
   }
   updateCheckedRadio() {
@@ -264,7 +264,7 @@ var SdRadioGroup = class extends SolidElement {
         vertical: "flex-col",
         horizontal: "flex-row"
       }[this.orientation]
-    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-5-15-11-button-group class="border border-primary rounded-full" part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-5-15-11-button-group>` : defaultSlot}</div></fieldset><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot>${this.formControlController.renderInvalidMessage()}`;
+    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-5-16-0-next-0-button-group class="border border-primary rounded-full" part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-5-16-0-next-0-button-group>` : defaultSlot}</div></fieldset><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -272,7 +272,7 @@ var SdRadioGroup = class extends SolidElement {
  */
 SdRadioGroup.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-5-15-11-radio){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-5-15-11-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-5-15-11-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-5-15-11-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-5-15-11-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-5-15-11-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label:after{content:" *"}:host:has(sd-5-15-11-button-group){display:inline-flex}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{display:block}:host([orientation=vertical]) ::slotted(sd-5-16-0-next-0-radio){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-5-16-0-next-0-radio:last-of-type){margin-bottom:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]) ::slotted(sd-5-16-0-next-0-radio){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-5-16-0-next-0-radio:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-5-16-0-next-0-radio){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-5-16-0-next-0-radio:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([required]) #label::after{content:' *'}:host:has(sd-5-16-0-next-0-button-group){display:inline-flex}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -329,7 +329,7 @@ __decorateClass([
   watch("value")
 ], SdRadioGroup.prototype, "handleValueChange", 1);
 SdRadioGroup = __decorateClass([
-  customElement("sd-5-15-11-radio-group")
+  customElement("sd-5-16-0-next-0-radio-group")
 ], SdRadioGroup);
 
 export {

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

@@ -15,7 +15,7 @@ var FormControlController = class {
       const disabled = this.options.disabled(this.host);
       const name = this.options.name(this.host);
       const value = this.options.value(this.host);
-      const isButton = this.host.tagName.toLowerCase() === "sd-5-15-11-button";
+      const isButton = this.host.tagName.toLowerCase() === "sd-5-16-0-next-0-button";
       if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
         if (Array.isArray(value)) {
           value.forEach((val) => {
@@ -40,7 +40,7 @@ var FormControlController = class {
         event.stopImmediatePropagation();
         const invalidElements = (_b = this.form) == null ? void 0 : _b.querySelectorAll("[data-invalid]");
         const sdRadioGroups = Array.from(invalidElements).filter(
-          (element) => element.tagName.toLowerCase() === "sd-5-15-11-radio-group"
+          (element) => element.tagName.toLowerCase() === "sd-5-16-0-next-0-radio-group"
         );
         sdRadioGroups.forEach((radioGroup) => {
           var _a2, _b2;
@@ -88,7 +88,7 @@ var FormControlController = class {
       },
       reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
       setValue: (input, value) => input.value = value,
-      assumeInteractionOn: ["sd-5-15-11-input"]
+      assumeInteractionOn: ["sd-5-16-0-next-0-input"]
     }, options);
   }
   hostConnected() {

package/dist-versioned/chunks/{chunk.PEAIITW7.js → chunk.XQ6ZMO6V.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.js";
@@ -204,17 +204,19 @@ var SdAudio = class extends SolidElement {
     }
     return null;
   }
+  onThemeChange() {
+    this.clear();
+    setTimeout(this.initAnimation.bind(this), this.token("--sd-duration-fast", 150));
+  }
   initAnimation() {
-    this.context = this.canvas.getContext("2d");
+    var _a;
+    const context = (_a = this.canvas) == null ? void 0 : _a.getContext("2d");
+    if (!context) return;
+    this.context = context;
     const button = this.audioPlayerContainer.querySelector(".playback-speed");
     const computedStyles = window.getComputedStyle(button);
     const color = computedStyles.color;
-    let computedColor;
-    if (this.inverted) {
-      computedColor = `#FFFFFF33`;
-    } else {
-      computedColor = this.rgbToHex(color) + "33";
-    }
+    const computedColor = this.inverted ? `#FFFFFF33` : this.rgbToHex(color) + "33";
     this.waveList = [
       new Wave({
         canvas: this.canvas,
@@ -298,18 +300,18 @@ var SdAudio = class extends SolidElement {
     )}" part="audio-controls"><button class="${cx(
       "playback-speed justify-self-start text-base font-bold hover:cursor-pointer sd-interactive",
       this.inverted && "sd-interactive--inverted"
-    )}" aria-label="${this.localize.term("playbackSpeed")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-5-15-11-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" title="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" class="mb-4">${this.isPlaying ? html`<slot name="pause-icon"><sd-5-15-11-icon class="text-xl" name="pause" library="_internal"></sd-5-15-11-icon></slot>` : html`<slot name="play-icon"><sd-5-15-11-icon class="text-xl" name="start" library="_internal"></sd-5-15-11-icon></slot>`}</sd-5-15-11-button><div class="flex items-center gap-6 justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" aria-label="${this.isTranscriptOpen ? this.localize.term("transcriptIsOpen") : this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" part="transcript"><sd-5-15-11-icon class="w-6 h-6" name="transcript" library="_internal"></sd-5-15-11-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${!this.isMuted ? this.localize.term("mute") : this.localize.term("unmute")}" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-5-15-11-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-5-15-11-icon></button></div></div>`;
+    )}" aria-label="${this.localize.term("playbackSpeed")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-5-16-0-next-0-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" title="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" class="mb-4">${this.isPlaying ? html`<slot name="pause-icon"><sd-5-16-0-next-0-icon class="text-xl" name="pause" library="_internal"></sd-5-16-0-next-0-icon></slot>` : html`<slot name="play-icon"><sd-5-16-0-next-0-icon class="text-xl" name="start" library="_internal"></sd-5-16-0-next-0-icon></slot>`}</sd-5-16-0-next-0-button><div class="flex items-center gap-6 justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" aria-label="${this.isTranscriptOpen ? this.localize.term("transcriptIsOpen") : this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" part="transcript"><sd-5-16-0-next-0-icon class="w-6 h-6" name="transcript" library="_internal"></sd-5-16-0-next-0-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${!this.isMuted ? this.localize.term("mute") : this.localize.term("unmute")}" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-5-16-0-next-0-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-5-16-0-next-0-icon></button></div></div>`;
     const renderTimestamps = html`<div class="${cx(
       "w-full flex justify-between",
       this.reversedLayout ? "mb-0.5" : "mt-0.5",
       this.animated && this.reversedLayout && "absolute bottom-0 left-0 !mb-4"
-    )}" part="timestamps"><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "text-black")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "text-black")}">${this.duration}</div></div>`;
-    return html`<div class="${cx("w-full flex relative", this.reversedLayout ? "flex-col-reverse" : "flex-col")}" aria-label="${this.localize.term("audioPlayer")}" part="audio-player"><slot @slotchange="${this.updateAudioDuration}"></slot>${!this.animated || this.animated && this.reversedLayout ? renderAudioControls : null}<div class="relative">${this.animated && !this.reversedLayout ? html`${renderAudioControls}` : null} ${this.animated ? html`<canvas class="w-full h-16 -mb-2"></canvas>` : null} ${!this.hideTimestamps && this.animated && this.reversedLayout ? renderTimestamps : null}<sd-5-15-11-range part="progress-slider" no-tooltip min="0" max="100" step="0.001" label="${this.localize.term("seekBar")}" @mousedown="${this.handleThumbGrab}" @touchstart="${this.handleThumbGrab}" @mouseup="${this.handleThumbRelease}" @touchend="${this.handleThumbRelease}" @sd-5-15-11-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-5-15-11-range></div>${this.hasSlotController.test("transcript") ? html`<sd-5-15-11-drawer><slot name="transcript"></slot></sd-5-15-11-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
+    )}" part="timestamps"><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-5-16-0-next-0-audio__timestamp-color-text")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-5-16-0-next-0-audio__timestamp-color-text")}">${this.duration}</div></div>`;
+    return html`<div class="${cx("w-full flex relative", this.reversedLayout ? "flex-col-reverse" : "flex-col")}" aria-label="${this.localize.term("audioPlayer")}" part="audio-player"><slot @slotchange="${this.updateAudioDuration}"></slot>${!this.animated || this.animated && this.reversedLayout ? renderAudioControls : null}<div class="relative">${this.animated && !this.reversedLayout ? html`${renderAudioControls}` : null} ${this.animated ? html`<canvas class="w-full h-16 -mb-2"></canvas>` : null} ${!this.hideTimestamps && this.animated && this.reversedLayout ? renderTimestamps : null}<sd-5-16-0-next-0-range part="progress-slider" no-tooltip min="0" max="100" step="0.001" label="${this.localize.term("seekBar")}" @mousedown="${this.handleThumbGrab}" @touchstart="${this.handleThumbGrab}" @mouseup="${this.handleThumbRelease}" @touchend="${this.handleThumbRelease}" @sd-5-16-0-next-0-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-5-16-0-next-0-range></div>${this.hasSlotController.test("transcript") ? html`<sd-5-16-0-next-0-drawer><slot name="transcript"></slot></sd-5-16-0-next-0-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
   }
 };
 SdAudio.styles = [
   ...SolidElement.styles,
-  css`sd-5-15-11-button::part(base){align-items:center;border-radius:var(--sd-border-radius-full,9999px);display:flex;height:var(--sd-spacing-12,3rem);justify-content:center;width:var(--sd-spacing-12,3rem)}sd-5-15-11-button::part(motion-wrapper){border-radius:var(--sd-border-radius-full,9999px)}sd-5-15-11-button::part(label){align-items:center;display:flex;flex-grow:0}sd-5-15-11-range::part(form-control-label){display:none}:host([inverted]) sd-5-15-11-range::part(thumb){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));outline-color:rgb(var(--sd-color-white,255 255 255)/1)}:host([animated]) sd-5-15-11-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-5-15-11-range::part(track){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-400,153 171 208)/var(--tw-bg-opacity,1))}:host([inverted]:not([animated])) sd-5-15-11-range::part(active-track){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1))}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */sd-5-16-0-next-0-button::part(base){display:flex;height:var(--sd-spacing-12);width:var(--sd-spacing-12);align-items:center;justify-content:center;border-radius:var(--sd-radius-full)}sd-5-16-0-next-0-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-5-16-0-next-0-button::part(label){display:flex;flex-grow:0;align-items:center}sd-5-16-0-next-0-range::part(form-control-label){display:none}:host([inverted]) sd-5-16-0-next-0-range::part(thumb){outline-color:var(--color-white,#fff);background-color:var(--sd-color-border-white,var(--sd-color-white))}:host([animated]) sd-5-16-0-next-0-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-5-16-0-next-0-range::part(track){background-color:var(--sd-color-border-primary-400,var(--sd-color-primary-400))}:host([inverted]:not([animated])) sd-5-16-0-next-0-range::part(active-track){background-color:var(--sd-color-border-white,var(--sd-color-white))}`
 ];
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "reversed-layout" })
@@ -351,13 +353,13 @@ __decorateClass([
   query('[part="audio-player"]')
 ], SdAudio.prototype, "audioPlayerContainer", 2);
 __decorateClass([
-  query("sd-5-15-11-drawer")
+  query("sd-5-16-0-next-0-drawer")
 ], SdAudio.prototype, "drawer", 2);
 __decorateClass([
   query("canvas")
 ], SdAudio.prototype, "canvas", 2);
 SdAudio = __decorateClass([
-  customElement("sd-5-15-11-audio")
+  customElement("sd-5-16-0-next-0-audio")
 ], SdAudio);
 
 export {

package/dist-versioned/chunks/{chunk.SDWNASDC.js → chunk.XT3GA2SZ.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -118,7 +118,7 @@ var SdCheckbox = class extends SolidElement {
   render() {
     const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
     return html`<label part="base" class="${cx(
-      "sd-5-15-11-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-5-16-0-next-0-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -143,7 +143,7 @@ var SdCheckbox = class extends SolidElement {
         invalidIndeterminate: "border-error bg-error group-hover:bg-error-400",
         invalid: "border-error group-hover:bg-neutral-200",
         filled: "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550",
-        default: "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
+        default: "form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
     )}"><div class="${cx(
       "absolute h-3 transition-[width] right-0.25 duration-medium",
@@ -160,7 +160,7 @@ var SdCheckbox = class extends SolidElement {
         filled: "bg-accent group-hover:bg-accent-550",
         default: "hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
-    )}"></div></div>${this.checked ? html`<sd-5-15-11-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-15-11-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-5-15-11-icon part="indeterminate-icon" class="text-white w-3 h-3" library="_internal" name="status-minus"></sd-5-15-11-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}"></div></div>${this.checked ? html`<sd-5-16-0-next-0-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-16-0-next-0-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-5-16-0-next-0-icon part="indeterminate-icon" class="text-white w-3 h-3" library="_internal" name="status-minus"></sd-5-16-0-next-0-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
     )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
@@ -171,7 +171,7 @@ var SdCheckbox = class extends SolidElement {
  */
 SdCheckbox.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){outline-width:0}:host([required]) #label:after{content:" *"}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){outline-style:var(--tw-outline-style);outline-width:0}:host([required]) #label::after{content:' *'}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
 ];
 __decorateClass([
   query('input[type="checkbox"]')
@@ -222,7 +222,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-5-15-11-checkbox")
+  customElement("sd-5-16-0-next-0-checkbox")
 ], SdCheckbox);
 
 export {

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

@@ -0,0 +1,76 @@
+import {
+  HasSlotController
+} from "./chunk.IVMQWO2L.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.USLIZWTB.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/teaser-media/teaser-media.ts
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import cx from "classix";
+var SdTeaserMedia = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "white";
+    this.hasSlotController = new HasSlotController(
+      this,
+      "[default]",
+      "media",
+      "meta",
+      "headline",
+      "expandable"
+    );
+  }
+  render() {
+    const slots = {
+      "teaser-has-default": this.hasSlotController.test("[default]"),
+      "teaser-has-media": this.hasSlotController.test("media"),
+      "teaser-has-meta": this.hasSlotController.test("meta"),
+      "teaser-has-headline": this.hasSlotController.test("headline"),
+      "teaser-has-expandable": this.hasSlotController.test("expandable")
+    };
+    return html`<div class="relative flex flex-col group" part="base"><div class="absolute flex flex-col justify-end h-full w-full pb-4"><div class="${cx(
+      "flex-1",
+      this.variant === "gradient-light" && "bg-gradient-to-t from-white/[.8] to-60%",
+      this.variant === "gradient-dark" && "bg-gradient-to-t from-primary-800/[.8] to-60%"
+    )}"></div><div class="${cx("relative", ["primary", "gradient-dark"].includes(this.variant) && "text-white")}"><div class="${cx(
+      "absolute inset-0",
+      {
+        white: "bg-white/[.8] group-hover:bg-white/90",
+        "neutral-100": "bg-neutral-100/[.8] group-hover:bg-neutral-100/90",
+        primary: "bg-primary/[.8] text-white group-hover:bg-primary/90",
+        "primary-100": "bg-primary-100/[.8] group-hover:bg-primary-100/90",
+        "gradient-light": "bg-gradient-to-t from-white/90 to-white/[.8]",
+        "gradient-dark": "bg-gradient-to-t from-primary-800/90 to-primary-800/[.8]"
+      }[this.variant]
+    )}"></div><div class="relative flex-col text-left p-4" part="content"><div class="flex flex-col"><div part="headline" class="text-lg font-bold m-0 order-2"><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 order-1", !slots["teaser-has-meta"] && "hidden")}"><slot name="meta"></slot></div></div><div class="${cx(
+      "hidden",
+      slots["teaser-has-expandable"] && "h-[0px] invisible opacity-0 md:[transition:_height_0.2s_linear,opacity_0.1s_linear_0.1s] md:block md:group-hover:h-auto md:group-hover:my-4 md:group-hover:opacity-[100%] md:group-hover:visible"
+    )}" part="expandable" aria-hidden="true"><slot name="expandable"></slot></div><div part="main" class="${cx(!slots["teaser-has-default"] && "hidden")}"><slot></slot></div></div></div></div><div class="${cx("mb-4 -z-10", !slots["teaser-has-media"] && "hidden")}" part="media"><slot name="media"></slot></div></div>`;
+  }
+};
+SdTeaserMedia.styles = [
+  ...SolidElement.styles,
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;:host{display:block}::slotted(*){margin:calc(var(--sd-spacing-1) * 0)}::slotted([slot=headline]){margin:calc(var(--sd-spacing-1) * 0)!important;font-size:var(--sd-text-lg)!important;line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))!important;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold)}:host([variant=white]) .background:focus-within{background-color:var(--sd-color-background-white,var(--sd-color-white))}@supports (color:color-mix(in lab,red,red)){:host([variant=white]) .background:focus-within{background-color:color-mix(in oklab,var(--sd-color-background-white,var(--sd-color-white)) var(--sd-opacity-90),transparent)}}:host([variant=neutral-100]) .background:focus-within{background-color:var(--sd-color-background-neutral-100,var(--sd-color-neutral-100))}@supports (color:color-mix(in lab,red,red)){:host([variant=neutral-100]) .background:focus-within{background-color:color-mix(in oklab,var(--sd-color-background-neutral-100,var(--sd-color-neutral-100)) var(--sd-opacity-90),transparent)}}:host([variant=primary]) .background:focus-within{background-color:var(--sd-color-background-primary,var(--sd-color-primary))}@supports (color:color-mix(in lab,red,red)){:host([variant=primary]) .background:focus-within{background-color:color-mix(in oklab,var(--sd-color-background-primary,var(--sd-color-primary)) var(--sd-opacity-90),transparent)}}:host([variant=primary-100]) .background:focus-within{background-color:var(--sd-color-background-primary-100,var(--sd-color-primary-100))}@supports (color:color-mix(in lab,red,red)){:host([variant=primary-100]) .background:focus-within{background-color:color-mix(in oklab,var(--sd-color-background-primary-100,var(--sd-color-primary-100)) var(--sd-opacity-90),transparent)}}:host([variant=gradient-light]) .bg-gradient-to-t{--sd-color-background-white:var(--sd-informational-gradient--white-color-background, var(--sd-color-white))}:host([variant=gradient-dark]) .bg-gradient-to-t{--sd-color-background-primary-800:var(
+          --sd-informational-gradient--primary-800-color-background,
+          var(--sd-color-primary-800)
+        )}@property --tw-font-weight{syntax:"*";inherits:false}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdTeaserMedia.prototype, "variant", 2);
+__decorateClass([
+  query('[part="base"]')
+], SdTeaserMedia.prototype, "teaserMedia", 2);
+SdTeaserMedia = __decorateClass([
+  customElement("sd-5-16-0-next-0-teaser-media")
+], SdTeaserMedia);
+
+export {
+  SdTeaserMedia
+};

package/dist-versioned/chunks/{chunk.JMHQQHEP.js → chunk.XULVG6IQ.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -32,7 +32,7 @@ var SdDivider = class extends SolidElement {
  */
 SdDivider.styles = [
   ...SolidElement.styles,
-  css`:host{margin:var(--sd-spacing-0,0)}:host(sd-5-15-11-divider[orientation=horizontal]){display:block}:host(sd-5-15-11-divider[orientation=vertical]){display:inline-block}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{margin:calc(var(--sd-spacing-1) * 0)}:host(sd-5-16-0-next-0-divider[orientation=horizontal]){display:block}:host(sd-5-16-0-next-0-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -41,7 +41,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDivider.prototype, "inverted", 2);
 SdDivider = __decorateClass([
-  customElement("sd-5-15-11-divider")
+  customElement("sd-5-16-0-next-0-divider")
 ], SdDivider);
 
 export {

package/dist-versioned/chunks/{chunk.JM3YRKVA.js → chunk.Z4YIKXCF.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -97,7 +97,7 @@ var SdMenu = class extends SolidElement {
   }
   isMenuItem(item) {
     var _a;
-    return item.tagName.toLowerCase() === "sd-5-15-11-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
+    return item.tagName.toLowerCase() === "sd-5-16-0-next-0-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
   }
   /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
   getAllItems() {
@@ -131,13 +131,13 @@ var SdMenu = class extends SolidElement {
 };
 SdMenu.styles = [
   ...SolidElement.styles,
-  css`:host{border-radius:var(--sd-border-radius-md,.375rem);display:block;overflow:auto;overscroll-behavior:auto;padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);position:relative;--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75))!important;--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}::slotted(sd-5-15-11-divider){padding-bottom:var(--sd-spacing-3,.75rem);padding-top:var(--sd-spacing-3,.75rem)}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;:host{position:relative;display:block;overflow:auto;overscroll-behavior:auto;border-radius:var(--sd-radius-md);padding-inline:var(--sd-spacing-2);padding-block:var(--sd-spacing-3);--tw-shadow:var(--sd-shadow)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}::slotted(sd-5-16-0-next-0-divider){padding-block:var(--sd-spacing-3)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`
 ];
 __decorateClass([
   query("slot")
 ], SdMenu.prototype, "defaultSlot", 2);
 SdMenu = __decorateClass([
-  customElement("sd-5-15-11-menu")
+  customElement("sd-5-16-0-next-0-menu")
 ], SdMenu);
 
 export {

package/dist-versioned/chunks/{chunk.R735ROML.js → chunk.ZI6VDRWN.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -104,17 +104,7 @@ var SdBrandshape = class extends SolidElement {
   }
   render() {
     const isStylizedVariant = this.variant.startsWith("border-") || this.variant === "image";
-    return html`<div class="${cx(
-      {
-        "neutral-100": "fill-neutral-100",
-        primary: "fill-primary",
-        white: "fill-white",
-        "border-white": "fill-transparent",
-        "border-primary": "fill-transparent",
-        image: "fill-transparent"
-      }[this.variant],
-      "relative"
-    )}" part="base">${isStylizedVariant ? this.renderStylizedVariant() : ""} ${this.renderShapes()}</div>`;
+    return html`<div class="${cx(isStylizedVariant && "fill-transparent", "relative")}" part="base">${isStylizedVariant ? this.renderStylizedVariant() : ""} ${this.renderShapes()}</div>`;
   }
 };
 /**
@@ -122,7 +112,9 @@ var SdBrandshape = class extends SolidElement {
  */
 SdBrandshape.styles = [
   ...SolidElement.styles,
-  css`:host{container-type:inline-size;display:block;--angle:11deg;--radius:60px;--tan:tan(var(--angle));--adjacent:100cqw;--opposite:calc(var(--tan)*var(--adjacent));--curve:calc((var(--opposite) - (var(--radius)/3))*0.5)}@supports not (transform:skewY(11deg)){:host{--tan:0.1943803091}}@media (min-width:415px){:host{--radius:72px}}@media (min-width:640px){:host{--radius:84px}}:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]:before{border-radius:0 var(--radius);height:calc(100% - var(--curve)*2);left:var(--sd-spacing-0,0);margin-top:calc(var(--curve));position:absolute;top:var(--sd-spacing-0,0);transform:skewY(calc(var(--angle)*-1))}slot[name=image]::slotted(img),slot[name=image]::slotted(video){height:calc(100% + var(--curve)*2)!important;-o-object-fit:cover;object-fit:cover;position:absolute!important;transform:translateY(calc(var(--curve)*-1)) skewY(var(--angle));width:100%}@supports not (height:100cqw){:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]:before{height:100%;margin-top:0;transform:unset}slot[name=image]::slotted(img),slot[name=image]::slotted(video){height:100%!important;transform:unset}}:host([variant=border-primary]){--internal-border-color:rgb(var(--sd-color-primary,0 53 142))}:host([variant=border-white]){--internal-border-color:var(--sd-color-white,#fff)}:host([variant^=border-]) [part=stylized-container]:before{border-color:var(--internal-border-color,#000);border-style:solid;border-width:2px;content:"";right:var(--sd-spacing-0,0)}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;:host{display:block;container-type:inline-size;--angle:11deg;--radius:60px;--tan:tan(var(--angle));--adjacent:100cqw;--opposite:calc(var(--tan) * var(--adjacent));--curve:calc(
+          (var(--opposite) - (var(--radius) / 3)) * 0.5
+        )}@supports not (transform:skewY(11deg)){:host{--tan:0.1943803091}}@media (min-width:415px){:host{--radius:72px}}@media (min-width:640px){:host{--radius:84px}}:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]::before{position:absolute;top:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);transform:skewY(calc(var(--angle) * -1));height:calc(100% - var(--curve) * 2);border-radius:0 var(--radius);margin-top:calc(var(--curve))}slot[name=image]::slotted(img),slot[name=image]::slotted(video){width:100%;-o-object-fit:cover;object-fit:cover;transform:translateY(calc(var(--curve) * -1)) skewY(var(--angle));height:calc(100% + var(--curve) * 2)!important;position:absolute!important}@supports not (height:100cqw){:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]::before{transform:unset;height:100%;margin-top:0}slot[name=image]::slotted(img),slot[name=image]::slotted(video){transform:unset;height:100%!important}}:host([variant=border-primary]){--internal-border-color:var(--sd-color-border-primary, var(--sd-color-primary))}:host([variant=border-white]){--internal-border-color:var(--sd-color-border-white, var(--sd-color-white))}:host([variant^=border-]) [part=stylized-container]::before{right:calc(var(--sd-spacing-1) * 0);border-style:var(--tw-border-style);border-width:var(--sd-border-width-2);--tw-border-style:solid;border-style:solid;content:'';border-color:var(--internal-border-color,#000)}:host([variant=neutral-100]) [part=base]{fill:var(--sd-color-background-neutral-100,var(--sd-color-neutral-100))}:host([variant=white]) [part=base]{fill:var(--sd-color-background-white,var(--sd-color-white))}:host([variant=primary]) [part=base]{fill:var(--sd-color-background-primary,var(--sd-color-primary))}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -137,7 +129,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-5-15-11-brandshape")
+  customElement("sd-5-16-0-next-0-brandshape")
 ], SdBrandshape);
 
 export {

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

@@ -21,6 +21,6 @@ export default class SdAccordion extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-5-15-11-accordion': SdAccordion;
+        'sd-5-16-0-next-0-accordion': SdAccordion;
     }
 }