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

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

@@ -0,0 +1,72 @@
+import {
+  HasSlotController
+} from "./chunk.IVMQWO2L.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.OIQ2TZCT.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/[.6] to-60%"
+    )}"></div><div class="${cx(
+      {
+        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/75 to-primary-800/[.6]  text-white"
+      }[this.variant]
+    )}"><div class="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`:host{display:block}::slotted(*){margin:var(--sd-spacing-0,0)}::slotted([slot=headline]){font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700;margin:var(--sd-spacing-0,0)!important}:host([variant=white]) .background:focus-within{background-color:rgb(var(--sd-color-white,255 255 255)/var(--sd-opacity-90,.9))}:host([variant=neutral-100]) .background:focus-within{background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--sd-opacity-90,.9))}:host([variant=primary]) .background:focus-within{background-color:rgb(var(--sd-color-primary,0 53 142)/var(--sd-opacity-90,.9))}:host([variant=primary-100]) .background:focus-within{background-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--sd-opacity-90,.9))}`
+];
+__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-teaser-media")
+], SdTeaserMedia);
+
+export {
+  SdTeaserMedia
+};

package/dist-versioned/chunks/{chunk.HKQXWZ7G.js → chunk.CRVR6VBF.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.USLIZWTB.js";
+} from "./chunk.OIQ2TZCT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -189,13 +189,13 @@ var SdTextarea = class extends SolidElement {
       {
         disabled: "border-neutral-500",
         visuallyDisabled: "border-neutral-500",
-        readonly: "form-control-color-border",
+        readonly: "border-neutral-800",
         activeInvalid: "border-error border-2",
         activeValid: "border-success border-2",
         active: "border-primary border-2",
         invalid: "border-error",
         valid: "border-success",
-        default: "form-control-color-border"
+        default: "border-neutral-800"
       }[textareaState]
     )}"></div><div part="base" class="${cx(
       "textarea h-full flex items-top rounded-default group transition-colors duration-medium hover:duration-fast ease-in-out",
@@ -208,7 +208,7 @@ var SdTextarea = class extends SolidElement {
       this.readonly ? "bg-neutral-100" : "bg-white",
       textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}"><textarea part="textarea" id="input" class="${cx(
-      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-5-16-0-next-0-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none group-has-[sd-5-16-0-icon]:pe-8",
       {
         sm: "py-1",
         md: "py-1",
@@ -216,7 +216,7 @@ var SdTextarea = class extends SolidElement {
       }[this.size],
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-5-16-0-next-0-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-5-16-0-next-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-5-16-0-next-0-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-16-0-next-0-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-5-16-0-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-5-16-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-5-16-0-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-16-0-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -224,7 +224,7 @@ var SdTextarea = class extends SolidElement {
  */
 SdTextarea.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{display:block;height:100%}:host textarea{scrollbar-gutter:stable}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{color:var(--sd-color-text-neutral-500,var(--sd-color-neutral-500))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:var(--sd-color-text-neutral-500,var(--sd-color-neutral-500))}:host([required]) #label::after{content:' *'}:host([visually-disabled]) textarea{caret-color:transparent}.no-scrollbar::-webkit-scrollbar{display:none}`
+  css`:host{display:block;height:100%}:host textarea{scrollbar-gutter:stable}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([required]) #label:after{content:" *"}:host([visually-disabled]) textarea{caret-color:transparent}.no-scrollbar::-webkit-scrollbar{display:none}`
 ];
 __decorateClass([
   query("#input")
@@ -330,7 +330,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdTextarea.prototype, "handleValueChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-5-16-0-next-0-textarea")
+  customElement("sd-5-16-0-textarea")
 ], SdTextarea);
 
 export {

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

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.USLIZWTB.js";
+} from "./chunk.OIQ2TZCT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -104,7 +104,17 @@ var SdBrandshape = class extends SolidElement {
   }
   render() {
     const isStylizedVariant = this.variant.startsWith("border-") || this.variant === "image";
-    return html`<div class="${cx(isStylizedVariant && "fill-transparent", "relative")}" part="base">${isStylizedVariant ? this.renderStylizedVariant() : ""} ${this.renderShapes()}</div>`;
+    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>`;
   }
 };
 /**
@@ -112,9 +122,7 @@ var SdBrandshape = class extends SolidElement {
  */
 SdBrandshape.styles = [
   ...SolidElement.styles,
-  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}`
+  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)}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -129,7 +137,7 @@ __decorateClass([
   state()
 ], SdBrandshape.prototype, "componentBreakpoint", 2);
 SdBrandshape = __decorateClass([
-  customElement("sd-5-16-0-next-0-brandshape")
+  customElement("sd-5-16-0-brandshape")
 ], SdBrandshape);
 
 export {

package/dist-versioned/chunks/{chunk.WC5FU2I2.js → chunk.DZRWUZL3.js}

@@ -14,7 +14,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.USLIZWTB.js";
+} from "./chunk.OIQ2TZCT.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -142,12 +142,12 @@ var SdAccordion = class extends SolidElement {
     )}"></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-5-16-0-next-0-icon library="_internal" name="chevron-down"></sd-5-16-0-next-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-16-0-next-0-icon library="_internal" name="chevron-down"></sd-5-16-0-next-0-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-5-16-0-icon library="_internal" name="chevron-down"></sd-5-16-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-16-0-icon library="_internal" name="chevron-down"></sd-5-16-0-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 */:host{display:block}[part=header]::-webkit-details-marker{display:none}`
+  css`:host{display:block}[part=header]::-webkit-details-marker{display:none}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -168,7 +168,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-5-16-0-next-0-accordion")
+  customElement("sd-5-16-0-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.G3OXXGZX.js → chunk.EC2EIUQN.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.USLIZWTB.js";
+} from "./chunk.OIQ2TZCT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -53,7 +53,7 @@ var SdInclude = class extends SolidElement {
 };
 SdInclude.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{display:block}`
+  css`:host{display:block}`
 ];
 __decorateClass([
   property({ reflect: true })
@@ -68,7 +68,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-5-16-0-next-0-include")
+  customElement("sd-5-16-0-include")
 ], SdInclude);
 
 export {

package/dist-versioned/chunks/{chunk.RC3XRXWM.js → chunk.ELJG6ONZ.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.USLIZWTB.js";
+} from "./chunk.OIQ2TZCT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -51,7 +51,7 @@ var SdLink = class extends SolidElement {
       "icon-right": this.hasSlotController.test("icon-right")
     };
     return html`<a part="base" class="${cx(
-      this.standalone ? "flex items-start" : "inline",
+      "inline",
       this.href && !this.visuallyDisabled ? "cursor-pointer" : "",
       this.visuallyDisabled ? "cursor-not-allowed focus-visible:focus-outline" : "",
       {
@@ -61,9 +61,10 @@ var SdLink = class extends SolidElement {
       }[this.size],
       {
         disabled: !this.inverted ? "text-neutral-500" : "text-neutral-600",
-        enabled: !this.inverted ? ` text-primary hover:text-primary-500 active:interactive--active-color-text focus-visible:focus-outline` : `text-white hover:text-primary-200 active:text-primary-400 focus-visible:focus-outline-inverted`,
+        enabled: !this.inverted ? ` text-primary hover:text-primary-500 active:text-primary-800 focus-visible:focus-outline` : `text-white hover:text-primary-200 active:text-primary-400 focus-visible:focus-outline-inverted`,
         visuallyDisabled: !this.inverted ? "text-neutral-500" : "text-neutral-600"
-      }[this.href && !this.visuallyDisabled ? "enabled" : this.visuallyDisabled ? "visuallyDisabled" : "disabled"]
+      }[this.href && !this.visuallyDisabled ? "enabled" : this.visuallyDisabled ? "visuallyDisabled" : "disabled"],
+      this.standalone && "flex items-start"
     )}" href="${ifDefined(this.href || void 0)}" target="${ifDefined(this.target || void 0)}" download="${ifDefined(this.download)}" rel="${ifDefined(this.target ? "noreferrer noopener" : void 0)}" aria-disabled="${!this.href || this.visuallyDisabled ? "true" : "false"}" tabindex="${!this.href ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${cx(
       "inline",
       slots["icon-left"] && (!this.standalone ? "mr-[0.25em]" : {
@@ -83,7 +84,7 @@ var SdLink = class extends SolidElement {
 };
 SdLink.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */::slotted(sd-5-16-0-next-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-5-16-0-next-0-icon){font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}:host([size=lg][standalone]) ::slotted(sd-5-16-0-next-0-icon){font-size:var(--sd-text-xl);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}`
+  css`::slotted(sd-5-16-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-5-16-0-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-5-16-0-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
 ];
 __decorateClass([
   query("a")
@@ -110,7 +111,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-5-16-0-next-0-link")
+  customElement("sd-5-16-0-link")
 ], SdLink);
 
 export {

package/dist-versioned/chunks/{chunk.QM6BYZJR.js → chunk.FBXO7EOO.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.USLIZWTB.js";
+} from "./chunk.OIQ2TZCT.js";
 import {
   __decorateClass,
   __spreadValues
@@ -37,8 +37,8 @@ var SdTabGroup = class extends SolidElement {
   }
   connectedCallback() {
     const whenAllDefined = Promise.all([
-      customElements.whenDefined("sd-5-16-0-next-0-tab"),
-      customElements.whenDefined("sd-5-16-0-next-0-tab-panel")
+      customElements.whenDefined("sd-5-16-0-tab"),
+      customElements.whenDefined("sd-5-16-0-tab-panel")
     ]);
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => {
@@ -86,20 +86,20 @@ var SdTabGroup = class extends SolidElement {
   }
   getAllTabs(options = { includeDisabled: true }) {
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
-    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-5-16-0-next-0-tab" ? el : el.querySelector("sd-5-16-0-next-0-tab")).filter((el) => {
-      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-5-16-0-next-0-tab" : el.tagName.toLowerCase() === "sd-5-16-0-next-0-tab" && !el.disabled;
+    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-5-16-0-tab" ? el : el.querySelector("sd-5-16-0-tab")).filter((el) => {
+      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-5-16-0-tab" : el.tagName.toLowerCase() === "sd-5-16-0-tab" && !el.disabled;
     });
   }
   getAllPanels() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-16-0-next-0-tab-panel");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-5-16-0-tab-panel");
   }
   getActiveTab() {
     return this.tabs.find((t) => t.matches(":focus"));
   }
   handleClick(event) {
     const target = event.target;
-    const tab = target.closest("sd-5-16-0-next-0-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-16-0-next-0-tab-group");
+    const tab = target.closest("sd-5-16-0-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-16-0-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -109,8 +109,8 @@ var SdTabGroup = class extends SolidElement {
   }
   handleKeyDown(event) {
     const target = event.target;
-    const tab = target.closest("sd-5-16-0-next-0-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-16-0-next-0-tab-group");
+    const tab = target.closest("sd-5-16-0-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-5-16-0-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -137,7 +137,7 @@ var SdTabGroup = class extends SolidElement {
     if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
       const activeEl = this.tabs.find((t) => t.matches(":focus"));
       const isRtl = this.localize.dir() === "rtl";
-      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-5-16-0-next-0-tab") {
+      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-5-16-0-tab") {
         let index = this.tabs.indexOf(activeEl);
         if (event.key === "Home") {
           index = 0;
@@ -258,15 +258,15 @@ var SdTabGroup = class extends SolidElement {
     return html`<div part="base" class="${cx("flex flex-col rounded-none")}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}"><div part="nav" class="${cx(this.hasScrollControls && "relative py-0 px-12")}">${this.hasScrollControls ? html`<button part="scroll-button--start" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${ifDefined(!this.canScroll.left || void 0)}" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "left-auto right-0"
-    )}" @click="${this.handleScrollToStart}"><sd-5-16-0-next-0-icon library="_internal" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-16-0-next-0-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist">${((_a = this.activeTab) == null ? void 0 : _a.variant) !== "container" ? html`<div part="active-tab-indicator" id="indicator" class="absolute h-1 bg-accent bottom-0 transition-[transform,width] duration-medium ease-in-out z-30"></div>` : ""}<div part="separation" class="border-neutral-400 absolute w-full h-0.25 bottom-0 border-b z-10"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${ifDefined(!this.canScroll.right || void 0)}" class="${cx(
+    )}" @click="${this.handleScrollToStart}"><sd-5-16-0-icon library="_internal" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-16-0-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist">${((_a = this.activeTab) == null ? void 0 : _a.variant) !== "container" ? html`<div part="active-tab-indicator" id="indicator" class="absolute h-1 bg-accent bottom-0 transition-[transform,width] duration-medium ease-in-out z-30"></div>` : ""}<div part="separation" class="border-neutral-400 absolute w-full h-0.25 bottom-0 border-b z-10"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" disabled="${ifDefined(!this.canScroll.right || void 0)}" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "right-auto left-0"
-    )}" @click="${this.handleScrollToEnd}"><sd-5-16-0-next-0-icon library="_internal" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-16-0-next-0-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
+    )}" @click="${this.handleScrollToEnd}"><sd-5-16-0-icon library="_internal" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-5-16-0-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
   }
 };
 SdTabGroup.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:calc(var(--sd-spacing-1) * 0);width:calc(var(--sd-spacing-1) * 0)}::slotted(sd-5-16-0-next-0-tab-panel){--padding:1rem 0}::slotted(sd-5-16-0-next-0-tab-panel:focus-visible){outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary)}`
+  css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}::slotted(sd-5-16-0-tab-panel){--padding:1rem 0}::slotted(sd-5-16-0-tab-panel:focus-visible){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -299,7 +299,7 @@ __decorateClass([
   debounce(20)
 ], SdTabGroup.prototype, "handleScroll", 1);
 SdTabGroup = __decorateClass([
-  customElement("sd-5-16-0-next-0-tab-group")
+  customElement("sd-5-16-0-tab-group")
 ], SdTabGroup);
 
 export {

package/dist-versioned/chunks/{chunk.24UVKYTF.js → chunk.G4KMETYR.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.USLIZWTB.js";
+} from "./chunk.OIQ2TZCT.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -210,15 +210,15 @@ var SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-5-16-0-next-0-icon name="${{
+    )}"><sd-5-16-0-icon name="${{
       info: "info-circle",
       success: "confirm-circle",
       warning: "exclamation-circle",
       error: "warning"
-    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-5-16-0-next-0-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-5-16-0-icon></slot><div part="content" class="${cx(
       "h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
       "border-solid border-[1px] border-l-0 border-neutral-400"
-    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-5-16-0-next-0-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-5-16-0-next-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-5-16-0-next-0-icon></sd-5-16-0-next-0-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div></div>`;
+    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-5-16-0-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-5-16-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-5-16-0-icon></sd-5-16-0-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div></div>`;
   }
 };
 /**
@@ -226,7 +226,7 @@ var SdNotification = class extends SolidElement {
  */
 SdNotification.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{display:contents}#notification:hover #duration-indicator__elapsed{animation-play-state:paused!important}`
+  css`:host{display:contents}#notification:hover #duration-indicator__elapsed{animation-play-state:paused!important}`
 ];
 __decorateClass([
   query('[part~="base"]')
@@ -262,7 +262,7 @@ __decorateClass([
   watch("duration")
 ], SdNotification.prototype, "handleDurationChange", 1);
 SdNotification = __decorateClass([
-  customElement("sd-5-16-0-next-0-notification")
+  customElement("sd-5-16-0-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.SRU7VSQX.js → chunk.G6YNGJXE.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.USLIZWTB.js";
+} from "./chunk.OIQ2TZCT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -83,7 +83,7 @@ var SdTeaser = class extends SolidElement {
 };
 SdTeaser.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)}@property --tw-font-weight{syntax:"*";inherits:false}`
+  css`:host{display:block}::slotted(*){margin:var(--sd-spacing-0,0)}::slotted([slot=headline]){font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700;margin:var(--sd-spacing-0,0)!important}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -104,7 +104,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-5-16-0-next-0-teaser")
+  customElement("sd-5-16-0-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.QIWTRSHI.js → chunk.GM6L2JR4.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.USLIZWTB.js";
+} from "./chunk.OIQ2TZCT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -22,10 +22,10 @@ var SdCarouselItem = class extends SolidElement {
 };
 SdCarouselItem.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always;display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}::slotted(img){height:100%;width:100%;-o-object-fit:cover;object-fit:cover}`
+  css`:host{align-items:center;aspect-ratio:var(--aspect-ratio);display:flex;flex-direction:column;height:100%;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;width:100%}::slotted(img){height:100%;-o-object-fit:cover;object-fit:cover;width:100%}`
 ];
 SdCarouselItem = __decorateClass([
-  customElement("sd-5-16-0-next-0-carousel-item")
+  customElement("sd-5-16-0-carousel-item")
 ], SdCarouselItem);
 
 export {

package/dist-versioned/chunks/{chunk.G3MAHVJA.js → chunk.GS3K7X5A.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.WC5FU2I2.js";
+} from "./chunk.DZRWUZL3.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.USLIZWTB.js";
+} from "./chunk.OIQ2TZCT.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -35,18 +35,18 @@ var SdQuickfact = class extends SdAccordion {
       "flex flex-grow-0 flex-shrink-0 flex-auto self-start sm:self-center transition-transform ease-in-out duration-medium text-xl sm:text-4xl sm:mt-2",
       this.open && "rotate-180",
       !this.expandable && "hidden"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-5-16-0-next-0-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-5-16-0-next-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-16-0-next-0-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-5-16-0-next-0-icon></slot></span></${header}><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></${base}>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-5-16-0-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-5-16-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-5-16-0-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-5-16-0-icon></slot></span></${header}><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></${base}>`;
   }
 };
 SdQuickfact.styles = [
   ...SdAccordion.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{display:block}@media (min-width:640px){[part=summary-icon]{font-size:var(--sd-spacing-12,3rem)}}[part=icon]{font-size:var(--sd-spacing-12,3rem)}@media (min-width:640px){[part=icon]{font-size:var(--sd-spacing-24,6rem)}}`
+  css`:host{display:block}@media (min-width:640px){[part=summary-icon]{font-size:var(--sd-spacing-12,3rem)}}[part=icon]{font-size:var(--sd-spacing-12,3rem)}@media (min-width:640px){[part=icon]{font-size:var(--sd-spacing-24,6rem)}}`
 ];
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdQuickfact.prototype, "expandable", 2);
 SdQuickfact = __decorateClass([
-  customElement("sd-5-16-0-next-0-quickfact")
+  customElement("sd-5-16-0-quickfact")
 ], SdQuickfact);
 setDefaultAnimation("quickfact.show", {
   keyframes: [{ height: "0" }, { height: "auto" }],

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

@@ -0,0 +1 @@
+//