@solid-design-system/components 6.0.0-next.2 → 6.0.0-next.21

package/dist-versioned/chunks/{chunk.VN6V46I7.js → chunk.N37INEPQ.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -71,7 +71,7 @@ var SdRadio = class extends SolidElement {
   }
   render() {
     return html`<span part="base" class="${cx(
-      "sd-6-0-0-next-2-radio group flex items-center text-base leading-normal text-black cursor-pointer",
+      "sd-6-0-0-next-21-radio group flex items-center text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -80,12 +80,15 @@ var SdRadio = class extends SolidElement {
         lg: "text-base"
       }[this.size]
     )}"><span part="${`${this.checked ? "control--checked" : "control--unchecked"}`}" class="${cx(
-      "flex-initial shrink-0 relative inline-flex items-center justify-center border rounded-full bg-white h-4 w-4 duration-fast ease-in-out",
-      this.disabled || this.visuallyDisabled ? "border-neutral-500" : this.invalid ? "border-error hover:border-error-400 group-hover:border-error-400" : this.checked ? "border-accent hover:border-accent-550 group-hover:border-accent-550" : "form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200"
+      "flex-initial shrink-0 relative inline-flex items-center justify-center border sd-6-0-0-next-21-radio-border-width rounded-full bg-white h-4 w-4 duration-fast ease-in-out",
+      this.disabled || this.visuallyDisabled ? "border-neutral-500" : this.invalid ? cx(
+        "border-error hover:border-error-400 group-hover:border-error-400",
+        this.checked ? "sd-6-0-0-next-21-radio--checked--invalid--default-color-background" : "sd-6-0-0-next-21-radio--default--invalid-color-background"
+      ) : this.checked ? "sd-6-0-0-next-21-radio--checked--default-color-background hover:sd-6-0-0-next-21-radio--checked--hover-color-background group-hover:sd-6-0-0-next-21-radio--checked--hover-color-background border-accent hover:border-accent-550 group-hover:border-accent-550" : "form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200"
     )}"><span part="checked" class="${cx(
-      "rounded-full inline-flex text-white bg-accent h-2.5 w-2.5 transition-[transform, colors] duration-medium ease-in-out",
+      "rounded-full inline-flex text-white sd-6-0-0-next-21-radio--checked--default__icon-color-background h-2.5 w-2.5 transition-[transform, colors] duration-medium ease-in-out",
       this.checked ? "scale-100" : "scale-0",
-      this.disabled ? "bg-neutral-500" : this.visuallyDisabled ? "bg-white" : this.invalid ? "bg-error hover:bg-error-400 group-hover:bg-error-400" : this.checked ? "bg-accent hover:bg-accent-550 group-hover:bg-accent-550" : "bg-neutral-800"
+      this.disabled ? "bg-neutral-500" : this.visuallyDisabled ? "bg-white" : this.invalid ? "sd-6-0-0-next-21-radio--checked--invalid--default__icon-color-background hover:sd-6-0-0-next-21-radio--checked--invalid--hover__icon-color-background group-hover:sd-6-0-0-next-21-radio--checked--invalid--hover__icon-color-background" : this.checked ? "sd-6-0-0-next-21-radio--checked--default__icon-color-background hover:sd-6-0-0-next-21-radio--checked--hover__icon-color-background group-hover:sd-6-0-0-next-21-radio--checked--hover__icon-color-background" : "bg-neutral-800"
     )}"></span></span><slot part="label" class="${cx(
       "ml-2 select-none inline-block",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.invalid ? "text-error" : "text-black"
@@ -97,8 +100,8 @@ var SdRadio = class extends SolidElement {
  */
 SdRadio.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){--tw-outline-style:none;outline-style:none}:host(:focus-visible) [part=control--checked],:host(:focus-visible) [part=control--unchecked]{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:var(--sd-border-color-primary,var(--sd-color-primary))}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
+  css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){--tw-outline-style:none;outline-style:none}:host(:focus-visible) [part=control--checked],:host(:focus-visible) [part=control--unchecked]{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:var(--sd-color-border-primary,var(--sd-color-primary))}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
 ];
 __decorateClass([
   state()
@@ -128,7 +131,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
 ], SdRadio.prototype, "handleDisabledChange", 1);
 SdRadio = __decorateClass([
-  customElement("sd-6-0-0-next-2-radio")
+  customElement("sd-6-0-0-next-21-radio")
 ], SdRadio);
 
 export {

package/dist-versioned/chunks/{chunk.QJ2PELD5.js → chunk.N3HOCV7I.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -55,7 +55,7 @@ var SdStepGroup = class extends SolidElement {
     });
   }
   getAllSteps() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-6-0-0-next-2-step");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-6-0-0-next-21-step");
   }
   /**
    * Sets the active step.
@@ -90,7 +90,7 @@ var SdStepGroup = class extends SolidElement {
 };
 SdStepGroup.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
 :host{width:-moz-max-content;width:max-content}`
 ];
 __decorateClass([
@@ -121,7 +121,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStepGroup.prototype, "handleInteractivityChange", 1);
 SdStepGroup = __decorateClass([
-  customElement("sd-6-0-0-next-2-step-group")
+  customElement("sd-6-0-0-next-21-step-group")
 ], SdStepGroup);
 
 export {

package/dist-versioned/chunks/{chunk.BFDY2E6R.js → chunk.O6OCDAKK.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.KXLUF5NH.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-6-0-0-next-2-button-group__button--focus");
+    button == null ? void 0 : button.classList.add("sd-6-0-0-next-21-button-group__button--focus");
   }
   handleBlur(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-6-0-0-next-2-button-group__button--focus");
+    button == null ? void 0 : button.classList.remove("sd-6-0-0-next-21-button-group__button--focus");
   }
   handleMouseOver(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-6-0-0-next-2-button-group__button--hover");
+    button == null ? void 0 : button.classList.add("sd-6-0-0-next-21-button-group__button--hover");
   }
   handleMouseOut(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-6-0-0-next-2-button-group__button--hover");
+    button == null ? void 0 : button.classList.remove("sd-6-0-0-next-21-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-6-0-0-next-2-button-group__button");
-        button.classList.toggle("sd-6-0-0-next-2-button-group__button--first", index === 0);
-        button.classList.toggle("sd-6-0-0-next-2-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle("sd-6-0-0-next-2-button-group__button--last", index === slottedElements.length - 1);
-        button.classList.toggle("sd-6-0-0-next-2-button-group__button--radio", button.tagName.toLowerCase() === "sd-6-0-0-next-2-radio-button");
+        button.classList.add("sd-6-0-0-next-21-button-group__button");
+        button.classList.toggle("sd-6-0-0-next-21-button-group__button--first", index === 0);
+        button.classList.toggle("sd-6-0-0-next-21-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle("sd-6-0-0-next-21-button-group__button--last", index === slottedElements.length - 1);
+        button.classList.toggle("sd-6-0-0-next-21-button-group__button--radio", button.tagName.toLowerCase() === "sd-6-0-0-next-21-radio-button");
       }
     });
   }
@@ -51,7 +51,7 @@ var SdButtonGroup = class extends SolidElement {
 };
 SdButtonGroup.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
 :host{display:inline-block}[part=base]{display:flex;flex-wrap:nowrap}`
 ];
 __decorateClass([
@@ -64,11 +64,11 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdButtonGroup.prototype, "label", 2);
 SdButtonGroup = __decorateClass([
-  customElement("sd-6-0-0-next-2-button-group")
+  customElement("sd-6-0-0-next-21-button-group")
 ], SdButtonGroup);
 function findButton(el) {
   var _a;
-  const selector = "sd-6-0-0-next-2-button, sd-6-0-0-next-2-radio-button";
+  const selector = "sd-6-0-0-next-21-button, sd-6-0-0-next-21-radio-button";
   return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
 }
 

package/dist-versioned/chunks/{chunk.5WAWAUSM.js → chunk.ORYQ3FH3.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -54,12 +54,12 @@ var SdHeader = class extends SolidElement {
     }
   }
   render() {
-    return html`<header class="w-full sd-6-0-0-next-2-header-color-background relative" role="banner"><div part="main" class="relative mx-auto my-0 box-border"><slot></slot></div></header>`;
+    return html`<header class="w-full sd-6-0-0-next-21-header-color-background relative" role="banner"><div part="main" class="relative mx-auto my-0 box-border"><slot></slot></div></header>`;
   }
 };
 SdHeader.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
 :host{position:relative;z-index:var(--sd-z-index-header,600);display:block}@media (min-height:32rem){:host([fixed]){padding-bottom:var(--sd-header-calculated-height)!important}:host([fixed]) header{position:fixed;top:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);width:100%}:host([fixed]) header::after{position:absolute;top:100%;right:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);height:var(--sd-spacing-2);--tw-content:'';content:var(--tw-content);background:var(--gradient-vertical-black-40-transparent,linear-gradient(0deg,#18181800 50%,#18181866 100%))}}[part=main]{width:var(--sd-header-inner-width);max-width:var(--sd-header-inner-max-width);padding:var(--sd-header-padding,12px 16px)}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
 ];
 __decorateClass([
@@ -72,7 +72,7 @@ __decorateClass([
   debounce(100)
 ], SdHeader.prototype, "updateCalculatedHeight", 1);
 SdHeader = __decorateClass([
-  customElement("sd-6-0-0-next-2-header")
+  customElement("sd-6-0-0-next-21-header")
 ], SdHeader);
 
 export {

package/dist-versioned/chunks/{chunk.7RSL7EOY.js → chunk.OTKB2VRV.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -22,7 +22,7 @@ var SdBreadcrumb = class extends SolidElement {
     this.isTruncated = false;
   }
   get items() {
-    return this.querySelectorAll("sd-6-0-0-next-2-breadcrumb-item");
+    return this.querySelectorAll("sd-6-0-0-next-21-breadcrumb-item");
   }
   cacheItemPositions() {
     this.items.forEach((item) => {
@@ -67,12 +67,12 @@ var SdBreadcrumb = class extends SolidElement {
   }
   handleMobileChevron() {
     var _a, _b, _c;
-    const icon = document.createElement("sd-6-0-0-next-2-icon");
+    const icon = document.createElement("sd-6-0-0-next-21-icon");
     icon.setAttribute("slot", "icon-left");
     icon.setAttribute("library", "_internal");
     icon.setAttribute("name", "chevron-left");
     icon.setAttribute("class", "text-base me-1 lg:hidden");
-    (_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-0-0-next-2-link")) == null ? void 0 : _c.appendChild(icon);
+    (_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-0-0-next-21-link")) == null ? void 0 : _c.appendChild(icon);
   }
   handleSlotChange() {
     this.handleMobileChevron();
@@ -87,13 +87,13 @@ var SdBreadcrumb = class extends SolidElement {
     this.resizeObserver.unobserve(this);
   }
   render() {
-    return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-6-0-0-next-2-dropdown part="truncated" class="${cx(!this.isTruncated && "absolute opacity-0 pointer-events-none")}"><button slot="trigger" tabindex="${this.isTruncated ? "0" : "-1"}" aria-label="${this.localize.term("truncatedBreadcrumbs")}" aria-expanded="false" aria-haspopup="true" class="flex sd-interactive">[...]</button><ol part="truncated-dropdown" class="flex flex-col gap-4 px-2 py-3 min-w-40"></ol></sd-6-0-0-next-2-dropdown><ol part="list" class="flex items-center"><slot @slotchange="${this.handleSlotChange}"></slot></ol></nav>`;
+    return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-6-0-0-next-21-dropdown part="truncated" class="${cx(!this.isTruncated && "absolute opacity-0 pointer-events-none")}"><button slot="trigger" tabindex="${this.isTruncated ? "0" : "-1"}" aria-label="${this.localize.term("truncatedBreadcrumbs")}" aria-expanded="false" aria-haspopup="true" class="flex sd-interactive">[...]</button><ol part="truncated-dropdown" class="flex flex-col gap-4 px-2 py-3 min-w-40"></ol></sd-6-0-0-next-21-dropdown><ol part="list" class="flex items-center"><slot @slotchange="${this.handleSlotChange}"></slot></ol></nav>`;
   }
 };
 SdBreadcrumb.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;display:block}::slotted(sd-6-0-0-next-2-breadcrumb-item:not(:last-of-type))::after,sd-6-0-0-next-2-dropdown::after{margin-inline:var(--sd-spacing-2);display:none;height:var(--sd-spacing-1);width:var(--sd-spacing-1);border-radius:var(--sd-radius-full);background-color:var(--sd-breadcrumb__separator-color,var(--sd-color-neutral-400));--tw-content:'';content:var(--tw-content)}@media (width >= 64rem){::slotted(sd-6-0-0-next-2-breadcrumb-item:not(:last-of-type))::after,sd-6-0-0-next-2-dropdown::after{display:inline-block}}::slotted(sd-6-0-0-next-2-breadcrumb-item:nth-last-child(2)){display:flex}@media (width >= 64rem){::slotted(sd-6-0-0-next-2-breadcrumb-item:nth-last-child(2))::after{background-color:var(--sd-color-background-accent)}}::slotted(sd-6-0-0-next-2-breadcrumb-item),sd-6-0-0-next-2-dropdown{display:none;align-items:center;font-size:var(--sd-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (width >= 64rem){::slotted(sd-6-0-0-next-2-breadcrumb-item),sd-6-0-0-next-2-dropdown{display:flex}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
+  css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{position:relative;display:block}::slotted(sd-6-0-0-next-21-breadcrumb-item:not(:last-of-type))::after,sd-6-0-0-next-21-dropdown::after{margin-inline:var(--sd-spacing-2);display:none;height:var(--sd-spacing-1);width:var(--sd-spacing-1);border-radius:var(--sd-radius-full);background-color:rgba(var(--sd-breadcrumb__separator-color,rgba(var(--sd-color-neutral-400))));--tw-content:'';content:var(--tw-content)}@media (width >= 64rem){::slotted(sd-6-0-0-next-21-breadcrumb-item:not(:last-of-type))::after,sd-6-0-0-next-21-dropdown::after{display:inline-block}}::slotted(sd-6-0-0-next-21-breadcrumb-item:nth-last-child(2)){display:flex}@media (width >= 64rem){::slotted(sd-6-0-0-next-21-breadcrumb-item:nth-last-child(2))::after{background-color:rgba(var(--sd-color-background-accent))}}::slotted(sd-6-0-0-next-21-breadcrumb-item),sd-6-0-0-next-21-dropdown{display:none;align-items:center;font-size:var(--sd-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (width >= 64rem){::slotted(sd-6-0-0-next-21-breadcrumb-item),sd-6-0-0-next-21-dropdown{display:flex}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -117,7 +117,7 @@ __decorateClass([
   state()
 ], SdBreadcrumb.prototype, "isTruncated", 2);
 SdBreadcrumb = __decorateClass([
-  customElement("sd-6-0-0-next-2-breadcrumb")
+  customElement("sd-6-0-0-next-21-breadcrumb")
 ], SdBreadcrumb);
 
 export {

package/dist-versioned/chunks/{chunk.OK3VBJRJ.js → chunk.PL4OFYJO.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.KXLUF5NH.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-6-0-0-next-2-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-6-0-0-next-21-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -127,7 +127,7 @@ var SdCheckbox = class extends SolidElement {
         lg: "text-base"
       }[this.size]
     )}"><input class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.indeterminate ? "mixed" : this.checked}" aria-describedby="invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"} ${this.indeterminate ? " control--indeterminate" : ""}" class="${cx(
-      "relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4",
+      "relative flex flex-shrink-0 items-center justify-center border sd-6-0-0-next-21-checkbox-border-width rounded-sm h-4 w-4",
       "transition-colors ease-in-out duration-medium group-hover:duration-fast",
       "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary",
       {
@@ -146,7 +146,7 @@ var SdCheckbox = class extends SolidElement {
         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",
+      "absolute h-3 transition-[width] right-0 duration-medium",
       this.checked || this.indeterminate ? "w-0" : "w-3"
     )}"><div class="${cx(
       "w-full h-full transition-colors duration-medium ease-in-out group-hover:duration-fast",
@@ -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-6-0-0-next-2-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-6-0-0-next-2-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-6-0-0-next-2-icon part="indeterminate-icon" class="text-white w-3 h-3" library="_internal" name="status-minus"></sd-6-0-0-next-2-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}"></div></div>${this.checked ? html`<sd-6-0-0-next-21-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-6-0-0-next-21-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-6-0-0-next-21-icon part="indeterminate-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-minus"></sd-6-0-0-next-21-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`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+  css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
 :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([
@@ -223,7 +223,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-6-0-0-next-2-checkbox")
+  customElement("sd-6-0-0-next-21-checkbox")
 ], SdCheckbox);
 
 export {

package/dist-versioned/chunks/{chunk.4CD5TTGT.js → chunk.PPWK76KX.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -135,20 +135,21 @@ var SdAccordion = class extends SolidElement {
   }
   render() {
     return html`<details part="base" class="border-neutral-400"><summary part="header" id="header" class="${cx(
-      "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-6-0-0-next-2-accordion-padding-block focus-visible:focus-outline sd-6-0-0-next-2-accordion-color-text relative group transition-colors ease-in-out duration-fast sd-6-0-0-next-2-accordion-color-background hover:bg-neutral-200"
+      "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-6-0-0-next-21-accordion-padding-block focus-visible:focus-outline focus-visible:z-10 sd-6-0-0-next-21-accordion-color-text relative group transition-colors ease-in-out duration-fast hover:bg-neutral-200",
+      this.open && "sd-6-0-0-next-21-accordion-color-background"
     )}" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${cx(
       !this.open && "opacity-0",
-      "w-1 sd-6-0-0-next-2-accordion__indicator-color absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full"
+      "w-1 sd-6-0-0-next-21-accordion__indicator-color absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full"
     )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-medium text-xl",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-0-0-next-2-icon library="_internal" name="chevron-down"></sd-6-0-0-next-2-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-0-0-next-2-icon library="_internal" name="chevron-down"></sd-6-0-0-next-2-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-0-0-next-21-icon library="_internal" name="chevron-down"></sd-6-0-0-next-21-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-0-0-next-21-icon library="_internal" name="chevron-down"></sd-6-0-0-next-21-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
   }
 };
 SdAccordion.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block}[part=header]::-webkit-details-marker{display:none}[part=base]{border-block-width:var(--sd-accordion-border-width,var(--sd-spacing-0\\.25))}[part=summary-icon]{color:var(--sd-accordion__chevron-color-text)}`
+  css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:block}[part=header]::-webkit-details-marker{display:none}[part=base]{border-block-width:var(--sd-accordion-border-width)}[part=summary-icon]{color:var(--sd-accordion__chevron-color-text)}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -169,7 +170,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-6-0-0-next-2-accordion")
+  customElement("sd-6-0-0-next-21-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.CT4BIUEI.js → chunk.QCQ7A7DT.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.js";
@@ -194,7 +194,7 @@ var SdAudio = class extends SolidElement {
   }
   rgbToHex(rgbString) {
     const result = rgbString.match(/\d+/g);
-    if (result && result.length === 3) {
+    if ((result == null ? void 0 : result.length) === 3) {
       const r = parseInt(result[0]);
       const g = parseInt(result[1]);
       const b = parseInt(result[2]);
@@ -300,19 +300,19 @@ 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-6-0-0-next-2-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-6-0-0-next-2-icon class="text-xl" name="pause" library="_internal"></sd-6-0-0-next-2-icon></slot>` : html`<slot name="play-icon"><sd-6-0-0-next-2-icon class="text-xl" name="start" library="_internal"></sd-6-0-0-next-2-icon></slot>`}</sd-6-0-0-next-2-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-6-0-0-next-2-icon class="w-6 h-6" name="transcript" library="_internal"></sd-6-0-0-next-2-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-6-0-0-next-2-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-6-0-0-next-2-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-6-0-0-next-21-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-6-0-0-next-21-icon class="text-xl" name="pause" library="_internal"></sd-6-0-0-next-21-icon></slot>` : html`<slot name="play-icon"><sd-6-0-0-next-21-icon class="text-xl" name="start" library="_internal"></sd-6-0-0-next-21-icon></slot>`}</sd-6-0-0-next-21-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-6-0-0-next-21-icon class="w-6 h-6" name="transcript" library="_internal"></sd-6-0-0-next-21-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-6-0-0-next-21-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-6-0-0-next-21-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" : "sd-6-0-0-next-2-audio__timestamp-color-text")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-0-0-next-2-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-6-0-0-next-2-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-6-0-0-next-2-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-6-0-0-next-2-range></div>${this.hasSlotController.test("transcript") ? html`<sd-6-0-0-next-2-drawer><slot name="transcript"></slot></sd-6-0-0-next-2-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-6-0-0-next-2-theme-listener></sd-6-0-0-next-2-theme-listener>`;
+    )}" part="timestamps"><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-0-0-next-21-audio__timestamp-color-text")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-0-0-next-21-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-6-0-0-next-21-range part="progress-slider" tooltip="hidden" 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-6-0-0-next-21-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-6-0-0-next-21-range></div>${this.hasSlotController.test("transcript") ? html`<sd-6-0-0-next-21-drawer><slot name="transcript"></slot></sd-6-0-0-next-21-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-6-0-0-next-21-theme-listener></sd-6-0-0-next-21-theme-listener>`;
   }
 };
 SdAudio.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-sd-6-0-0-next-2-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-6-0-0-next-2-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-6-0-0-next-2-button::part(label){display:flex;flex-grow:0;align-items:center}sd-6-0-0-next-2-range::part(form-control-label){display:none}:host([inverted]) sd-6-0-0-next-2-range::part(thumb){outline-color:var(--color-white,#fff);background-color:var(--sd-color-border-white,var(--sd-color-white))}:host([animated]) sd-6-0-0-next-2-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-6-0-0-next-2-range::part(track){background-color:var(--sd-color-border-primary-400,var(--sd-color-primary-400))}:host([inverted]:not([animated])) sd-6-0-0-next-2-range::part(active-track){background-color:var(--sd-color-border-white,var(--sd-color-white))}`
+  css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+sd-6-0-0-next-21-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-6-0-0-next-21-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-6-0-0-next-21-button::part(label){display:flex;flex-grow:0;align-items:center}sd-6-0-0-next-21-range::part(form-control-label){display:none}:host([inverted]) sd-6-0-0-next-21-range::part(thumb){outline-color:var(--color-white,#fff);background-color:rgba(var(--sd-color-border-white,rgba(var(--sd-color-white))))}:host([animated]) sd-6-0-0-next-21-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-6-0-0-next-21-range::part(track){background-color:rgba(var(--sd-color-border-primary-400,rgba(var(--sd-color-primary-400))))}:host([inverted]:not([animated])) sd-6-0-0-next-21-range::part(active-track){background-color:rgba(var(--sd-color-border-white,rgba(var(--sd-color-white))))}`
 ];
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "reversed-layout" })
@@ -354,13 +354,13 @@ __decorateClass([
   query('[part="audio-player"]')
 ], SdAudio.prototype, "audioPlayerContainer", 2);
 __decorateClass([
-  query("sd-6-0-0-next-2-drawer")
+  query("sd-6-0-0-next-21-drawer")
 ], SdAudio.prototype, "drawer", 2);
 __decorateClass([
   query("canvas")
 ], SdAudio.prototype, "canvas", 2);
 SdAudio = __decorateClass([
-  customElement("sd-6-0-0-next-2-audio")
+  customElement("sd-6-0-0-next-21-audio")
 ], SdAudio);
 
 export {

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

@@ -0,0 +1,42 @@
+import {
+  SolidElement,
+  customElement
+} from "./chunk.KXLUF5NH.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/skeleton/skeleton.ts
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import cx from "classix";
+var SdSkeleton = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "rectangular";
+  }
+  render() {
+    return html`<div part="base" aria-hidden="true" class="${cx(
+      "bg-neutral-200 w-full h-full animate-pulse",
+      {
+        rectangular: "rounded-sm",
+        circular: "rounded-full inline-block"
+      }[this.variant]
+    )}"><slot></slot></div>`;
+  }
+};
+SdSkeleton.styles = [
+  ...SolidElement.styles,
+  css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:block}::slotted(*){visibility:hidden}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdSkeleton.prototype, "variant", 2);
+SdSkeleton = __decorateClass([
+  customElement("sd-6-0-0-next-21-skeleton")
+], SdSkeleton);
+
+export {
+  SdSkeleton
+};

package/dist-versioned/chunks/{chunk.FPMNMEXR.js → chunk.QSLMGPBG.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -22,7 +22,7 @@ var SdDivider = class extends SolidElement {
   }
   render() {
     return html`<hr part="main" aria-orientation="${this.orientation}" class="${cx(
-      this.inverted ? "border-primary-400" : "border-neutral-400",
+      this.inverted ? "sd-6-0-0-next-21-divider--inverted-color-border" : "border-neutral-400",
       this.orientation === "horizontal" ? "border-t w-full" : " border-l h-full"
     )}">`;
   }
@@ -32,8 +32,8 @@ var SdDivider = class extends SolidElement {
  */
 SdDivider.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{margin:calc(var(--sd-spacing-1) * 0)}:host(sd-6-0-0-next-2-divider[orientation=horizontal]){display:block}:host(sd-6-0-0-next-2-divider[orientation=vertical]){display:inline-block}`
+  css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{margin:calc(var(--sd-spacing-1) * 0)}:host(sd-6-0-0-next-21-divider[orientation=horizontal]){display:block}:host(sd-6-0-0-next-21-divider[orientation=vertical]){display:inline-block}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -42,7 +42,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdDivider.prototype, "inverted", 2);
 SdDivider = __decorateClass([
-  customElement("sd-6-0-0-next-2-divider")
+  customElement("sd-6-0-0-next-21-divider")
 ], SdDivider);
 
 export {

package/dist-versioned/chunks/{chunk.WSXRRFIW.js → chunk.R2DOQKTM.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RY4KWEME.js";
+} from "./chunk.KXLUF5NH.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -42,9 +42,9 @@ var SdTeaserMedia = class extends SolidElement {
       "absolute inset-0",
       {
         white: "bg-white/[.8] group-hover:bg-white/90",
-        "neutral-100": "bg-neutral-100/[.8] group-hover:bg-neutral-100/90",
+        "neutral-100": "sd-6-0-0-next-21-teaser-media--neutral-100-color-background group-hover:sd-6-0-0-next-21-teaser-media--neutral-100--hover-color-background",
         primary: "bg-primary/[.8] text-white group-hover:bg-primary/90",
-        "primary-100": "bg-primary-100/[.8] group-hover:bg-primary-100/90",
+        "primary-100": "sd-6-0-0-next-21-teaser-media--primary-100-color-background group-hover:sd-6-0-0-next-21-teaser-media--primary-100--hover-color-background",
         "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]
@@ -56,11 +56,11 @@ var SdTeaserMedia = class extends SolidElement {
 };
 SdTeaserMedia.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-: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)}@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-opacity-90),transparent)}}:host([variant=neutral-100]) .background:focus-within{background-color:var(--sd-color-background-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-opacity-90),transparent)}}:host([variant=primary]) .background:focus-within{background-color:var(--sd-color-background-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-opacity-90),transparent)}}:host([variant=primary-100]) .background:focus-within{background-color:var(--sd-color-background-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-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(
+  css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:block}::slotted(*){margin:calc(var(--sd-spacing-1) * 0)}:host([variant=white]) .background:focus-within{background-color:rgba(var(--sd-color-background-white))}@supports (color:color-mix(in lab,red,red)){:host([variant=white]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-white)) var(--sd-opacity-90),transparent)}}:host([variant=neutral-100]) .background:focus-within{background-color:rgba(var(--sd-color-background-neutral-100))}@supports (color:color-mix(in lab,red,red)){:host([variant=neutral-100]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-neutral-100)) var(--sd-opacity-90),transparent)}}:host([variant=primary]) .background:focus-within{background-color:rgba(var(--sd-color-background-primary))}@supports (color:color-mix(in lab,red,red)){:host([variant=primary]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-primary)) var(--sd-opacity-90),transparent)}}:host([variant=primary-100]) .background:focus-within{background-color:rgba(var(--sd-color-background-primary-100))}@supports (color:color-mix(in lab,red,red)){:host([variant=primary-100]) .background:focus-within{background-color:color-mix(in oklab,rgba(var(--sd-color-background-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 })
@@ -69,7 +69,7 @@ __decorateClass([
   query('[part="base"]')
 ], SdTeaserMedia.prototype, "teaserMedia", 2);
 SdTeaserMedia = __decorateClass([
-  customElement("sd-6-0-0-next-2-teaser-media")
+  customElement("sd-6-0-0-next-21-teaser-media")
 ], SdTeaserMedia);
 
 export {