@solid-design-system/components 5.16.1 → 5.16.2-next.1

package/dist/chunks/chunk.WSXRRFIW.js

@@ -0,0 +1,77 @@
+import {
+  HasSlotController
+} from "./chunk.IVMQWO2L.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.RY4KWEME.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;@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(
+          --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-teaser-media")
+], SdTeaserMedia);
+
+export {
+  SdTeaserMedia
+};

package/dist/chunks/{chunk.UFU7P2YD.js → chunk.WTFF4KWO.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.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: "border-neutral-800",
+        readonly: "form-control-color-border",
         activeInvalid: "border-error border-2",
         activeValid: "border-success border-2",
         active: "border-primary border-2",
         invalid: "border-error",
         valid: "border-success",
-        default: "border-neutral-800"
+        default: "form-control-color-border"
       }[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-neutral-700 resize-none group-has-[sd-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-icon]:pe-8",
       {
         sm: "py-1",
         md: "py-1",
@@ -224,7 +224,8 @@ var SdTextarea = class extends SolidElement {
  */
 SdTextarea.styles = [
   ...SolidElement.styles,
-  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}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+: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)}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:var(--sd-color-text-neutral-500)}:host([required]) #label::after{content:' *'}:host([visually-disabled]) textarea{caret-color:transparent}.no-scrollbar::-webkit-scrollbar{display:none}`
 ];
 __decorateClass([
   query("#input")

package/dist/chunks/{chunk.CKLEIUJP.js → chunk.XNEWFPWE.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -398,9 +398,9 @@ var SdRange = class extends SolidElement {
           ariaLabel = this.tooltipFormatter(value);
         }
       }
-      return html`<sd-tooltip hoist trigger="focus" disabled="${ifDefined(this.disabled || this.visuallyDisabled || this.noTooltip ? true : void 0)}"><div id="${id}" part="thumb" role="slider" tabindex="${this.disabled || this.visuallyDisabled ? -1 : 0}" aria-disabled="${ifDefined(this.disabled || this.visuallyDisabled ? "true" : void 0)}" aria-labelledby="${ariaLabeledBy}" aria-label="${ariaLabel}" aria-valuemax="${this.max}" aria-valuemin="${this.min}" aria-valuenow="${value}" aria-valuetext="${this.tooltipFormatter(value)}" data-range-id="${rangeId}" @pointerdown="${this.onClickThumb}" @pointermove="${this.onDragThumb}" @pointerup="${this.onReleaseThumb}" @pointercancel="${this.onReleaseThumb}" @pointerleave="${this.onReleaseThumb}" @keydown="${this.onKeyPress}" @focus="${this.onFocusThumb}" class="${cx(
+      return html`<sd-tooltip hoist trigger="focus" disabled="${ifDefined(this.disabled || this.visuallyDisabled || this.noTooltip ? true : void 0)}"><div id="${id}" part="thumb" role="slider" tabindex="${this.disabled || this.visuallyDisabled ? -1 : 0}" aria-disabled="${ifDefined(this.disabled || this.visuallyDisabled ? "true" : void 0)}" aria-labelledby="${ariaLabeledBy}" aria-label="${ariaLabel}" aria-valuemax="${this.max}" aria-valuemin="${this.min}" aria-valuenow="${value}" aria-valuetext="${this.tooltipFormatter(value)}" data-range-id="${rangeId}" data-disabled="${ifDefined(this.disabled || this.visuallyDisabled || void 0)}" @pointerdown="${this.onClickThumb}" @pointermove="${this.onDragThumb}" @pointerup="${this.onReleaseThumb}" @pointercancel="${this.onReleaseThumb}" @pointerleave="${this.onReleaseThumb}" @keydown="${this.onKeyPress}" @focus="${this.onFocusThumb}" class="${cx(
         "rounded-full absolute top-0 size-4 hover:cursor-grab after:-inset-2",
-        this.disabled || this.visuallyDisabled ? "bg-neutral-500 outline-none" : "bg-primary hover:bg-primary-500 cursor-pointer focus-visible:focus-outline"
+        this.disabled || this.visuallyDisabled ? "outline-none" : "cursor-pointer focus-visible:focus-outline"
       )}"></div></sd-tooltip>`;
     });
   }
@@ -411,15 +411,13 @@ var SdRange = class extends SolidElement {
     };
     const hasLabel = !!(this.label || slots["label"]);
     const hasHelpText = !!(this.helpText || slots["helpText"]);
-    return html`<div part="form-control" @focusout="${this.onBlur}" class="flex flex-col">${hasLabel ? html`<div class="flex items-center gap-1"><label id="label" part="form-control-label" aria-hidden="${hasLabel ? "false" : "true"}" class="${cx("w-full", hasLabel ? "inline-block" : "hidden")}" @click="${this.focus}"><slot name="label">${this.label}</slot></label></div>` : null} <label id="aria-label-hidden" class="sr-only">(${this._value.map(this.tooltipFormatter).join(" - ")})</label><div part="base" class="${cx("inline-flex w-full", this.visuallyDisabled && "focus-visible:focus-outline")}" tabindex="${ifDefined(this.visuallyDisabled ? "0" : void 0)}"><div part="input-wrapper" class="relative flex-1 mx-2 mb-[10px]"><input id="input" tabindex="-1" hidden @invalid="${this.handleInvalid}"><div part="track-wrapper" role="presentation" @pointerdown="${this.onClickTrack}" class="relative cursor-pointer -mx-2"><div part="track-click-helper" class="absolute -inset-y-2 inset-x-0"></div><div part="track" class="${cx("h-1 my-[6px]", this.disabled || this.visuallyDisabled ? "bg-neutral-500" : "bg-neutral-400")}"></div><div part="active-track" hidden="${ifDefined(this.noTrackBar ? true : void 0)}" class="${cx(
-      "absolute top-0 h-1",
-      this.disabled || this.visuallyDisabled ? "bg-neutral-500" : "bg-primary"
-    )}"></div></div>${this.renderThumbs(hasLabel)}<div class="-mt-[10px]" part="scale-ticks" @pointerdown="${this.onClickTrackItem}" role="presentation"><slot name="scale-ticks"></slot></div></div></div><slot></slot><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}">${this.helpText}</slot></div>`;
+    return html`<div part="form-control" @focusout="${this.onBlur}" class="flex flex-col">${hasLabel ? html`<div class="flex items-center gap-1"><label id="label" part="form-control-label" aria-hidden="${hasLabel ? "false" : "true"}" class="${cx("w-full", hasLabel ? "inline-block" : "hidden")}" @click="${this.focus}"><slot name="label">${this.label}</slot></label></div>` : null} <label id="aria-label-hidden" class="sr-only">(${this._value.map(this.tooltipFormatter).join(" - ")})</label><div part="base" class="${cx("inline-flex w-full", this.visuallyDisabled && "focus-visible:focus-outline")}" tabindex="${ifDefined(this.visuallyDisabled ? "0" : void 0)}"><div part="input-wrapper" class="relative flex-1 mx-2 mb-[10px]"><input id="input" tabindex="-1" hidden @invalid="${this.handleInvalid}"><div part="track-wrapper" role="presentation" @pointerdown="${this.onClickTrack}" class="relative cursor-pointer -mx-2"><div part="track-click-helper" class="absolute -inset-y-2 inset-x-0"></div><div part="track" data-disabled="${ifDefined(this.disabled || this.visuallyDisabled || void 0)}" class="${cx("h-1 my-[6px]")}"></div><div part="active-track" hidden="${ifDefined(this.noTrackBar ? true : void 0)}" data-disabled="${ifDefined(this.disabled || this.visuallyDisabled || void 0)}" class="${cx("absolute top-0 h-1")}"></div></div>${this.renderThumbs(hasLabel)}<div class="-mt-[10px]" part="scale-ticks" @pointerdown="${this.onClickTrackItem}" role="presentation"><slot name="scale-ticks"></slot></div></div></div><slot></slot><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}">${this.helpText}</slot></div>`;
   }
 };
 SdRange.styles = [
   ...SolidElement.styles,
-  css`[part=base]{touch-action:none;-webkit-touch-callout:none}[part=thumb].grabbed{--tw-bg-opacity:1!important;background-color:rgb(var(--sd-color-primary-800,5 21 48)/var(--tw-bg-opacity,1))!important}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+[part='base']{touch-action:none;-webkit-touch-callout:none}[part=thumb]{background-color:var(--sd-color-icon-fill-primary,var(--sd-color-primary))}[part=thumb]:hover{background-color:var(--sd-color-icon-fill-primary-500,var(--sd-color-primary-500))}[part=thumb].grabbed{background-color:var(--sd-color-icon-fill-primary-800,var(--sd-color-primary-800))}[part=thumb][data-disabled]{background-color:var(--sd-color-icon-fill-neutral-500,var(--sd-color-neutral-500))}[part=track]{background-color:var(--sd-color-border-neutral-400,var(--sd-color-neutral-400))}[part=track][data-disabled]{background-color:var(--sd-color-background-neutral-500,var(--sd-color-neutral-500))}[part=active-track]{background-color:var(--sd-color-icon-fill-primary,var(--sd-color-primary))}[part=active-track][data-disabled]{background-color:var(--sd-color-icon-fill-neutral-500,var(--sd-color-neutral-500))}`
 ];
 __decorateClass([
   query("#input")

package/dist/chunks/{chunk.BLKVBNBL.js → chunk.YBIM4TC7.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -53,7 +53,8 @@ var SdInclude = class extends SolidElement {
 };
 SdInclude.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:block}`
 ];
 __decorateClass([
   property({ reflect: true })

package/dist/chunks/{chunk.ZEBYA7QQ.js → chunk.YLQNXR3G.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.AQI2R5GT.js";
+} from "./chunk.4CD5TTGT.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -40,7 +40,8 @@ var SdQuickfact = class extends SdAccordion {
 };
 SdQuickfact.styles = [
   ...SdAccordion.styles,
-  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)}}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+: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 })

package/dist/chunks/{chunk.7YENJBA2.js → chunk.ZBAABZKL.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -31,7 +31,8 @@ var SdBadge = class extends SolidElement {
 };
 SdBadge.styles = [
   ...SolidElement.styles,
-  css`:host{align-items:center;display:inline-flex;justify-content:center}:host([size=md]){font-size:.625rem;height:var(--sd-spacing-4,1rem);min-width:var(--sd-spacing-4,1rem)}:host([size=lg]){font-size:.75rem;height:var(--sd-spacing-5,1.25rem);min-width:var(--sd-spacing-5,1.25rem)}:host([size=sm])::part(base){height:var(--sd-spacing-2,.5rem);min-width:var(--sd-spacing-2,.5rem)}:host([size=md])::part(base){padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}:host([size=lg])::part(base){padding-left:.313rem;padding-right:.313rem}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:inline-flex;align-items:center;justify-content:center}:host([size=md]){height:var(--sd-spacing-4);min-width:var(--sd-spacing-4);font-size:.625rem}:host([size=lg]){height:calc(var(--sd-spacing-1) * 5);min-width:calc(var(--sd-spacing-1) * 5);font-size:.75rem}:host([size=sm])::part(base){height:var(--sd-spacing-2);min-width:var(--sd-spacing-2)}:host([size=md])::part(base){padding-inline:var(--sd-spacing-1)}:host([size=lg])::part(base){padding-left:.313rem;padding-right:.313rem}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })

package/dist/chunks/{chunk.43SFOPTI.js → chunk.ZRJRFFVA.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -66,7 +66,7 @@ var SdRadioButton = class extends SolidElement {
     return html`<div part="base" role="presentation" class="relative"><button part="${`button${this.checked ? " button--checked" : ""}`}" role="radio" aria-checked="${this.checked}" class="${cx(
       "relative text-center rounded-full transition-all ease-in-out duration-100 items-center justify-center focus-visible:focus-outline",
       this.size === "sm" ? "text-sm" : "text-base",
-      this.checked && !this.disabled && !this.visuallyDisabled ? "bg-primary text-white hover:bg-primary-500" : !this.checked && (this.disabled || this.visuallyDisabled) ? "text-neutral-500 hover:cursor-not-allowed" : this.checked && (this.disabled || this.visuallyDisabled) ? "bg-neutral-400 text-white hover:cursor-not-allowed " : "bg-transparent text-primary border-primary hover:text-primary-500 cursor-pointer",
+      this.checked && !this.disabled && !this.visuallyDisabled ? "sd-button--primary--default-color-background sd-button--primary--default-color-text hover:sd-button--primary--hover-color-background" : !this.checked && (this.disabled || this.visuallyDisabled) ? "text-neutral-500 hover:cursor-not-allowed" : this.checked && (this.disabled || this.visuallyDisabled) ? "bg-neutral-400 text-white hover:cursor-not-allowed " : "bg-transparent text-primary border-primary hover:text-primary-500 cursor-pointer",
       hasDefaultSlot && {
         sm: "px-3",
         md: "px-4",
@@ -88,7 +88,8 @@ var SdRadioButton = class extends SolidElement {
 };
 SdRadioButton.styles = [
   ...SolidElement.styles,
-  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;inset:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);outline-color:rgb(var(--sd-color-error,204 25 55)/1);outline-style:dotted;outline-width:1px;position:absolute;z-index:-10}.lg-label,.lg-no-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{padding-left:var(--sd-spacing-5,1.25rem);padding-right:var(--sd-spacing-5,1.25rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{padding-left:var(--sd-spacing-4,1rem);padding-right:var(--sd-spacing-4,1rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{padding-left:var(--sd-spacing-3,.75rem);padding-right:var(--sd-spacing-3,.75rem)}:host([size=lg].sd-button-group__button:not(.sd-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-3,.75rem)*-1)}:host([size=md].sd-button-group__button:not(.sd-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-2,.5rem)*-1)}:host([size=sm].sd-button-group__button:not(.sd-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-1,.25rem)*-1)}:host(.sd-button-group__button--hover){z-index:20}:host(.sd-button-group__button--focus),:host(.sd-button-group__button[checked]){z-index:10}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
+:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;position:absolute;inset:calc(var(--sd-spacing-1) * 0);z-index:calc(10 * -1);opacity:var(--sd-opacity-0);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:var(--sd-border-color-error,var(--sd-color-error));--tw-outline-style:dotted;outline-style:dotted}.lg-label{height:var(--sd-spacing-12)}.lg-no-label{height:var(--sd-spacing-12);padding-inline:calc(var(--sd-spacing-1) * 5)}.md-label{height:var(--sd-spacing-10)}.md-no-label{height:var(--sd-spacing-10);padding-inline:var(--sd-spacing-4)}.sm-label{height:var(--sd-spacing-8)}.sm-no-label{height:var(--sd-spacing-8);padding-inline:var(--sd-spacing-3)}:host([size=lg].sd-button-group__button:not(.sd-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-3) * -1)}:host([size=md].sd-button-group__button:not(.sd-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-2) * -1)}:host([size=sm].sd-button-group__button:not(.sd-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-1) * -1)}:host(.sd-button-group__button--hover){z-index:20}:host(.sd-button-group__button--focus),:host(.sd-button-group__button[checked]){z-index:10}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
 ];
 __decorateClass([
   query(".button")

package/dist/chunks/{chunk.XF7G3LFU.js → chunk.ZXOKRAZP.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.PJJCHCFO.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -59,8 +59,8 @@ 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",
-      this.variant === "container" && "tab-container-border bg-white rounded-[4px_4px_0_0]",
+      "outline-hidden focus-visible:focus-outline outline-2 !-outline-offset-2 transition-all duration-fast ease-in-out",
+      this.variant === "container" ? "tab-container-border bg-white rounded-[4px_4px_0_0]" : "navigable-border-radius",
       this.variant === "container" && this.active && "tab--active-container-border bg-white",
       this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:bg-neutral-200",
       this.active && "z-20"
@@ -70,14 +70,17 @@ var SdTab = class extends SolidElement {
     )}"><slot name="left" class="${cx(
       slots.left && "block pr-2",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary"
-    )}"></slot><slot class="${cx(this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary")}"></slot>${this.variant === "container" ? html`<div part="active-tab-indicator" class="${cx("absolute bottom-0 h-1 bg-accent w-3/4 bottom-0 group-hover:w-full")}"></div>` : ""}<div part="hover-bottom-border" class="${cx(
+    )}"></slot><slot class="${cx(this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary")}"></slot>${this.variant === "container" ? html`<div part="active-tab-indicator" class="${cx(
+      "absolute bottom-0 h-1 bg-accent w-3/4 bottom-0 group-hover:w-[calc(100%-2px)] navigable__current-indicator-height navigable__current-indicator-border-radius"
+    )}"></div>` : ""}<div part="hover-bottom-border" class="${cx(
       !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b border-transparent group-hover:border-b-neutral-400 transition-[border] duration-fast ease-in-out"
     )}"></div></div></div>`;
   }
 };
 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;@layer theme,base,components,utilities;
+:host{box-sizing:border-box;display:inline-block}:host(:hover)::part(hover-bottom-border){border-bottom-color:var(--sd-color-border-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);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]")

package/dist/components/accordion/accordion.js

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "../../chunks/chunk.AQI2R5GT.js";
+} from "../../chunks/chunk.4CD5TTGT.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.QVBR2RUV.js";
-import "../../chunks/chunk.UVOGBJGP.js";
-import "../../chunks/chunk.7VPFFNHR.js";
-import "../../chunks/chunk.QSQRQKYT.js";
+import "../../chunks/chunk.5H7CWETG.js";
+import "../../chunks/chunk.GYXMDYGY.js";
+import "../../chunks/chunk.KPAQRMCC.js";
+import "../../chunks/chunk.O6MXNSO7.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -14,7 +14,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.ID6DABAJ.js";
 import "../../chunks/chunk.3S7EW72P.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/accordion-group/accordion-group.js

@@ -1,13 +1,13 @@
 import {
   SdAccordionGroup
-} from "../../chunks/chunk.44BJS2SJ.js";
-import "../../chunks/chunk.AQI2R5GT.js";
+} from "../../chunks/chunk.WSRHW32L.js";
+import "../../chunks/chunk.4CD5TTGT.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.QVBR2RUV.js";
-import "../../chunks/chunk.UVOGBJGP.js";
-import "../../chunks/chunk.7VPFFNHR.js";
-import "../../chunks/chunk.QSQRQKYT.js";
+import "../../chunks/chunk.5H7CWETG.js";
+import "../../chunks/chunk.GYXMDYGY.js";
+import "../../chunks/chunk.KPAQRMCC.js";
+import "../../chunks/chunk.O6MXNSO7.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -15,7 +15,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.ID6DABAJ.js";
 import "../../chunks/chunk.3S7EW72P.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/animation/animation.js

@@ -1,9 +1,9 @@
 import {
   SdAnimation
-} from "../../chunks/chunk.PB672B5H.js";
+} from "../../chunks/chunk.3BVNSUFD.js";
 import "../../chunks/chunk.TJOP7HQP.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/audio/audio.d.ts

@@ -47,6 +47,7 @@ export default class SdAudio extends SolidElement {
     private showTranscript;
     private showTranscriptKeydown;
     private rgbToHex;
+    onThemeChange(): void;
     private initAnimation;
     private drawStillWaves;
     private stopAnimation;

package/dist/components/audio/audio.js

@@ -1,21 +1,21 @@
 import {
   SdAudio
-} from "../../chunks/chunk.QV5WLO4L.js";
-import "../../chunks/chunk.G4FXGRRH.js";
+} from "../../chunks/chunk.CT4BIUEI.js";
+import "../../chunks/chunk.RIWKWSAL.js";
 import "../../chunks/chunk.SF6AUNJF.js";
 import "../../chunks/chunk.EDMG7C5H.js";
 import "../../chunks/chunk.UMIKFOMI.js";
 import "../../chunks/chunk.WDWV53JP.js";
-import "../../chunks/chunk.AXFVYO5L.js";
-import "../../chunks/chunk.4VTG7PRD.js";
+import "../../chunks/chunk.N5XK43AK.js";
+import "../../chunks/chunk.HB45IF2T.js";
 import "../../chunks/chunk.XCQC3F3H.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.N4LHE3QK.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.QVBR2RUV.js";
-import "../../chunks/chunk.UVOGBJGP.js";
-import "../../chunks/chunk.7VPFFNHR.js";
-import "../../chunks/chunk.QSQRQKYT.js";
+import "../../chunks/chunk.5H7CWETG.js";
+import "../../chunks/chunk.GYXMDYGY.js";
+import "../../chunks/chunk.KPAQRMCC.js";
+import "../../chunks/chunk.O6MXNSO7.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -23,7 +23,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.ID6DABAJ.js";
 import "../../chunks/chunk.3S7EW72P.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.POFWU6ZT.js";
 import "../../chunks/chunk.S3NI7NKU.js";

package/dist/components/badge/badge.js

@@ -1,7 +1,7 @@
 import {
   SdBadge
-} from "../../chunks/chunk.7YENJBA2.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+} from "../../chunks/chunk.ZBAABZKL.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/brandshape/brandshape.js

@@ -1,7 +1,7 @@
 import {
   SdBrandshape
-} from "../../chunks/chunk.72VNUTTV.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+} from "../../chunks/chunk.7XXRAMBH.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,10 +1,10 @@
 import {
   SdBreadcrumb
-} from "../../chunks/chunk.XU2JEV5G.js";
+} from "../../chunks/chunk.7RSL7EOY.js";
 import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.ID6DABAJ.js";
 import "../../chunks/chunk.3S7EW72P.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/breadcrumb-item/breadcrumb-item.js

@@ -1,11 +1,11 @@
 import {
   SdBreadcrumbItem
-} from "../../chunks/chunk.4DHEQEYR.js";
+} from "../../chunks/chunk.4FY6QRJ7.js";
 import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.ID6DABAJ.js";
 import "../../chunks/chunk.3S7EW72P.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/button/button.js

@@ -1,14 +1,14 @@
 import {
   SdButton
-} from "../../chunks/chunk.AXFVYO5L.js";
-import "../../chunks/chunk.4VTG7PRD.js";
+} from "../../chunks/chunk.N5XK43AK.js";
+import "../../chunks/chunk.HB45IF2T.js";
 import "../../chunks/chunk.XCQC3F3H.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.ID6DABAJ.js";
 import "../../chunks/chunk.3S7EW72P.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/button-group/button-group.js

@@ -1,7 +1,7 @@
 import {
   SdButtonGroup
-} from "../../chunks/chunk.DKBTK7VW.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+} from "../../chunks/chunk.BFDY2E6R.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/carousel/carousel.js

@@ -1,16 +1,16 @@
 import {
   SdCarousel
-} from "../../chunks/chunk.7MXI26GR.js";
+} from "../../chunks/chunk.M5EPD6OZ.js";
 import "../../chunks/chunk.W2YDXTG5.js";
 import "../../chunks/chunk.FNYEXUNK.js";
 import "../../chunks/chunk.NOWCQZBS.js";
-import "../../chunks/chunk.GUZQ4ADZ.js";
+import "../../chunks/chunk.WSXDUNN7.js";
 import "../../chunks/chunk.F4VGSDIW.js";
 import "../../chunks/chunk.B4BZKR24.js";
-import "../../chunks/chunk.QVBR2RUV.js";
-import "../../chunks/chunk.UVOGBJGP.js";
-import "../../chunks/chunk.7VPFFNHR.js";
-import "../../chunks/chunk.QSQRQKYT.js";
+import "../../chunks/chunk.5H7CWETG.js";
+import "../../chunks/chunk.GYXMDYGY.js";
+import "../../chunks/chunk.KPAQRMCC.js";
+import "../../chunks/chunk.O6MXNSO7.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
@@ -18,7 +18,7 @@ import "../../chunks/chunk.X3FE7OHE.js";
 import "../../chunks/chunk.ID6DABAJ.js";
 import "../../chunks/chunk.3S7EW72P.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/carousel-item/carousel-item.js

@@ -1,7 +1,7 @@
 import {
   SdCarouselItem
-} from "../../chunks/chunk.GUZQ4ADZ.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+} from "../../chunks/chunk.WSXDUNN7.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/checkbox/checkbox.js

@@ -1,17 +1,17 @@
 import {
   SdCheckbox
-} from "../../chunks/chunk.QL6JHFGU.js";
+} from "../../chunks/chunk.OK3VBJRJ.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.XCQC3F3H.js";
-import "../../chunks/chunk.QVBR2RUV.js";
-import "../../chunks/chunk.UVOGBJGP.js";
-import "../../chunks/chunk.7VPFFNHR.js";
-import "../../chunks/chunk.QSQRQKYT.js";
+import "../../chunks/chunk.5H7CWETG.js";
+import "../../chunks/chunk.GYXMDYGY.js";
+import "../../chunks/chunk.KPAQRMCC.js";
+import "../../chunks/chunk.O6MXNSO7.js";
 import "../../chunks/chunk.4TPOL3LB.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.X2OQMWGY.js";
-import "../../chunks/chunk.PJJCHCFO.js";
+import "../../chunks/chunk.RY4KWEME.js";
 import "../../chunks/chunk.HQWAKJBV.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {