@solid-design-system/components 7.0.0-next.11 → 7.0.0-next.12

package/dist-versioned/chunks/{chunk.QD2ZQPDB.js → chunk.QAKJW5ON.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DJJN4MJ4.js";
+} from "./chunk.PVSLBUSF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -84,7 +84,7 @@ var SdLink = class extends SolidElement {
 SdLink.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-::slotted(sd-7-0-0-next-11-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-7-0-0-next-11-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-7-0-0-next-11-icon){font-size:var(--sd-text-xl);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}`
+::slotted(sd-7-0-0-next-12-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-7-0-0-next-12-icon){font-size:var(--sd-text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}:host([size=lg][standalone]) ::slotted(sd-7-0-0-next-12-icon){font-size:var(--sd-text-xl,1.5rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}`
 ];
 __decorateClass([
   query("a")
@@ -111,7 +111,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-7-0-0-next-11-link")
+  customElement("sd-7-0-0-next-12-link")
 ], SdLink);
 
 export {

package/dist-versioned/chunks/{chunk.HSFOQQ52.js → chunk.QN22ZMGT.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DJJN4MJ4.js";
+} from "./chunk.PVSLBUSF.js";
 import {
   __decorateClass,
   __spreadValues
@@ -420,14 +420,14 @@ var SdInput = class extends SolidElement {
       !isFloatingLabelActive || !hasValue && (this.readonly || this.visuallyDisabled) ? textSize : "text-xs",
       (this.visuallyDisabled || this.disabled) && "text-neutral-500",
       isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "form-control--filled__floating-label-color-text"
-    )}">${this.label}</span></label>` : null} ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-7-0-0-next-11-icon class="${cx(
+    )}">${this.label}</span></label>` : null} ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-7-0-0-next-12-icon class="${cx(
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-neutral-700",
       iconSize
-    )}" library="_internal" name="close-circle"></sd-7-0-0-next-11-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx(
+    )}" library="_internal" name="close-circle"></sd-7-0-0-next-12-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx(
       "flex items-center sd-interactive",
       iconMarginLeft,
       this.floatingLabel && !isFloatingLabelActive && "hide-password-toggle"
-    )}" type="button" @click="${this.handlePasswordToggle}" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-7-0-0-next-11-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-open"></sd-7-0-0-next-11-icon></slot>` : html`<slot name="hide-password-icon"><sd-7-0-0-next-11-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-7-0-0-next-11-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-7-0-0-next-11-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-7-0-0-next-11-icon>` : ""} ${this.type === "time" ? html`<sd-7-0-0-next-11-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-7-0-0-next-11-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-7-0-0-next-11-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-7-0-0-next-11-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-7-0-0-next-11-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-7-0-0-next-11-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-7-0-0-next-11-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-11-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}"><slot name="decrement-number-stepper"><sd-7-0-0-next-11-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-7-0-0-next-11-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-7-0-0-next-11-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-7-0-0-next-11-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
+    )}" type="button" @click="${this.handlePasswordToggle}" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-7-0-0-next-12-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-open"></sd-7-0-0-next-12-icon></slot>` : html`<slot name="hide-password-icon"><sd-7-0-0-next-12-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-7-0-0-next-12-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-7-0-0-next-12-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-7-0-0-next-12-icon>` : ""} ${this.type === "time" ? html`<sd-7-0-0-next-12-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-7-0-0-next-12-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-7-0-0-next-12-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-7-0-0-next-12-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-7-0-0-next-12-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-7-0-0-next-12-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-7-0-0-next-12-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-12-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}"><slot name="decrement-number-stepper"><sd-7-0-0-next-12-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-7-0-0-next-12-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-7-0-0-next-12-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-7-0-0-next-12-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
       "text-sm mt-1",
       hasHelpText && !this.showInvalidStyle ? "block" : "hidden",
       this.visuallyDisabled || this.disabled ? "text-neutral-500" : "text-neutral-700"
@@ -440,7 +440,7 @@ var SdInput = class extends SolidElement {
 SdInput.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) :is(#label,#floating-label)::after{content:' *'}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0;display:none;-webkit-appearance:none}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-7-0-0-next-11-icon{color:rgba(var(--sd-color-text-neutral-500))}.hide-password-toggle{display:none}.has-floating-label input[type=date]:not(.has-value),.has-floating-label input[type=datetime-local]:not(.has-value),.has-floating-label input[type=time]:not(.has-value){color:transparent}.has-floating-label input[type=date]:focus,.has-floating-label input[type=datetime-local]:focus,.has-floating-label input[type=time]:focus{color:inherit}.icon-color{color:rgba(var(--sd-form-control-color-icon-fill))}`
+:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) :is(#label,#floating-label)::after{content:' *'}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0;display:none;-webkit-appearance:none}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-7-0-0-next-12-icon{color:rgba(var(--sd-color-text-neutral-500,174 174 174))}.hide-password-toggle{display:none}.has-floating-label input[type=date]:not(.has-value),.has-floating-label input[type=datetime-local]:not(.has-value),.has-floating-label input[type=time]:not(.has-value){color:transparent}.has-floating-label input[type=date]:focus,.has-floating-label input[type=datetime-local]:focus,.has-floating-label input[type=time]:focus{color:inherit}.icon-color{color:rgba(var(--sd-form-control-color-icon-fill))}`
 ];
 __decorateClass([
   query("#input")
@@ -587,7 +587,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdInput.prototype, "handleSizeChange", 1);
 SdInput = __decorateClass([
-  customElement("sd-7-0-0-next-11-input")
+  customElement("sd-7-0-0-next-12-input")
 ], SdInput);
 
 export {

package/dist-versioned/chunks/{chunk.ZCNNMATK.js → chunk.QPJTXP3H.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DJJN4MJ4.js";
+} from "./chunk.PVSLBUSF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -92,7 +92,7 @@ var SdStep = class extends SolidElement {
       this.orientation === "horizontal" && !this.horizontalInline ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" || this.size === "xs" ? "mt-1" : "mt-3"
     );
     const circleButtonClasses = cx(
-      "border sd-7-0-0-next-11-step__circle-border-width rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
+      "border sd-7-0-0-next-12-step__circle-border-width rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
       this.disabled ? "focus-visible:outline-none cursor-not-allowed" : !this.notInteractive && !this.waiting ? "focus-visible:focus-outline hover:cursor-pointer" : "",
       this.notInteractive ? this.size === "lg" ? "not-interactive-lg" : this.size === "xs" ? "w-2" : "w-12" : this.size === "lg" ? "w-12" : this.size === "xs" ? "w-2" : "w-8 h-8",
       this.disabled && "border-neutral-500 text-neutral-500",
@@ -110,8 +110,8 @@ var SdStep = class extends SolidElement {
     )}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"><div part="circle-and-tail-container" class="${circleAndTailContainerClasses}"><${tag} part="circle" href="${ifDefined(isLink ? this.href : void 0)}" aria-disabled="${ifDefined(this.disabled || this.waiting || void 0)}" aria-current="${this.current ? "step" : void 0}" aria-labelledby="${ifDefined(this.notInteractive || this.waiting || !hasLabel ? void 0 : "label")}" aria-describedby="${ifDefined(this.notInteractive || this.waiting || !hasDescription ? void 0 : "description")}" class="${circleButtonClasses}"><slot name="circle-content" class="${cx(
       "text-lg",
       !this.disabled && !this.current && !this.notInteractive && !this.waiting && "text-primary hover:text-primary-500 hover:fill-primary-500",
-      this.notInteractive && "sd-7-0-0-next-11-step-color-text"
-    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting && this.size !== "xs" ? html`<sd-7-0-0-next-11-icon library="sd-status-assets" name="status-check" class="${cx(this.size === "sm" && "text-sm")}"></sd-7-0-0-next-11-icon>` : this.size === "xs" ? "" : html`${this.index}`}</slot></${tag}>${isHorizontalInline ? html`<div class="${cx(!this.noTail && "flex-1", "flex flex-col gap-1")}"><div class="${cx(
+      this.notInteractive && "sd-7-0-0-next-12-step-color-text"
+    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting && this.size !== "xs" ? html`<sd-7-0-0-next-12-icon library="sd-status-assets" name="status-check" class="${cx(this.size === "sm" && "text-sm")}"></sd-7-0-0-next-12-icon>` : this.size === "xs" ? "" : html`${this.index}`}</slot></${tag}>${isHorizontalInline ? html`<div class="${cx(!this.noTail && "flex-1", "flex flex-col gap-1")}"><div class="${cx(
       "flex w-full",
       hasLabel && "gap-2",
       this.size === "sm" && !hasDescription ? "mt-1" : "mt-3"
@@ -152,7 +152,7 @@ var SdStep = class extends SolidElement {
 SdStep.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{flex:1}:host([orientation=horizontal]) [part=tail]{border-top-width:var(--sd-step__tail-border-width)}:host([orientation=vertical]) [part=tail]{border-left-width:var(--sd-step__tail-border-width)}:host([no-tail]){flex-grow:0}:host(:not([current])) (:not([notInteractive])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-7-0-0-next-11-icon,slot[name=circle-content]::slotted(sd-7-0-0-next-11-icon){color:rgba(var(--sd-color-icon-fill-primary))}[part=circle]:hover slot[name=circle-content] sd-7-0-0-next-11-icon,[part=circle]:hover slot[name=circle-content]::slotted(sd-7-0-0-next-11-icon){color:rgba(var(--sd-color-icon-fill-primary-500))}:host([horizontal-inline]):has([part=description]){min-width:0;flex:1}.translateLg{transform:translateX(3.438rem)}.translateSm{transform:translateX(4rem)}.not-interactive-lg{width:4.5rem}`
+:host{flex:1}:host([orientation=horizontal]) [part=tail]{border-top-width:var(--sd-step__tail-border-width)}:host([orientation=vertical]) [part=tail]{border-left-width:var(--sd-step__tail-border-width)}:host([no-tail]){flex-grow:0}:host(:not([current])) (:not([notInteractive])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-7-0-0-next-12-icon,slot[name=circle-content]::slotted(sd-7-0-0-next-12-icon){color:rgba(var(--sd-color-icon-fill-primary))}[part=circle]:hover slot[name=circle-content] sd-7-0-0-next-12-icon,[part=circle]:hover slot[name=circle-content]::slotted(sd-7-0-0-next-12-icon){color:rgba(var(--sd-color-icon-fill-primary-500))}:host([horizontal-inline]):has([part=description]){min-width:0;flex:1}.translateLg{transform:translateX(3.438rem)}.translateSm{transform:translateX(4rem)}.not-interactive-lg{width:4.5rem}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -203,7 +203,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStep.prototype, "handleInteractivityChange", 1);
 SdStep = __decorateClass([
-  customElement("sd-7-0-0-next-11-step")
+  customElement("sd-7-0-0-next-12-step")
 ], SdStep);
 
 export {

package/dist-versioned/chunks/{chunk.ZCG43UX7.js → chunk.SHN2I24K.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DJJN4MJ4.js";
+} from "./chunk.PVSLBUSF.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -211,22 +211,22 @@ var SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-7-0-0-next-11-icon name="${{
+    )}"><sd-7-0-0-next-12-icon name="${{
       info: "info-circle",
       success: "confirm-circle",
       warning: "exclamation-circle",
       error: "risk"
-    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-7-0-0-next-11-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-7-0-0-next-12-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 sd-7-0-0-next-11-notification-color-border",
+      "border-solid border-[1px] border-l-0 sd-7-0-0-next-12-notification-color-border",
       {
-        info: "sd-7-0-0-next-11-notification--info-color-background",
-        success: "sd-7-0-0-next-11-notification--success-color-background",
-        warning: "sd-7-0-0-next-11-notification--warning-color-background",
-        error: "sd-7-0-0-next-11-notification--error-color-background"
+        info: "sd-7-0-0-next-12-notification--info-color-background",
+        success: "sd-7-0-0-next-12-notification--success-color-background",
+        warning: "sd-7-0-0-next-12-notification--warning-color-background",
+        error: "sd-7-0-0-next-12-notification--error-color-background"
       }[this.variant]
-    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-7-0-0-next-11-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-7-0-0-next-11-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-7-0-0-next-11-icon></sd-7-0-0-next-11-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 sd-7-0-0-next-11-notification__duration-indicator-color-background z-10 animate-grow`
+    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-7-0-0-next-12-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-7-0-0-next-12-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-7-0-0-next-12-icon></sd-7-0-0-next-12-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 sd-7-0-0-next-12-notification__duration-indicator-color-background 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>`;
   }
 };
@@ -272,7 +272,7 @@ __decorateClass([
   watch("duration")
 ], SdNotification.prototype, "handleDurationChange", 1);
 SdNotification = __decorateClass([
-  customElement("sd-7-0-0-next-11-notification")
+  customElement("sd-7-0-0-next-12-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.QOIO3YAP.js → chunk.TAXXEJSP.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DJJN4MJ4.js";
+} from "./chunk.PVSLBUSF.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`<div class="flex flex-col"><label part="base" class="${cx(
-      "sd-7-0-0-next-11-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
+      "sd-7-0-0-next-12-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 shrink-0 items-center justify-center border sd-7-0-0-next-11-checkbox-border-width rounded-sm h-4 w-4",
+      "relative flex shrink-0 items-center justify-center border sd-7-0-0-next-12-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 outline-transparent",
       {
@@ -141,7 +141,7 @@ var SdCheckbox = class extends SolidElement {
         disabled: "border-neutral-500",
         visuallyDisabled: "border-neutral-500",
         invalidIndeterminate: "border-error bg-error group-hover:bg-error-400 group-hover:border-error-400",
-        invalid: "border-error group-hover:border-error-400 sd-7-0-0-next-11-checkbox--invalid-color-background group-hover:bg-transparent",
+        invalid: "border-error group-hover:border-error-400 sd-7-0-0-next-12-checkbox--invalid-color-background group-hover:bg-transparent",
         filled: "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550",
         default: "form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
       }[checkboxState]
@@ -156,14 +156,14 @@ var SdCheckbox = class extends SolidElement {
         disabled: "",
         visuallyDisabled: "",
         invalidIndeterminate: " bg-error group-hover:bg-error-400",
-        invalid: "sd-7-0-0-next-11-checkbox--invalid-color-background",
+        invalid: "sd-7-0-0-next-12-checkbox--invalid-color-background",
         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-7-0-0-next-11-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-7-0-0-next-11-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-7-0-0-next-11-icon part="indeterminate-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-minus"></sd-7-0-0-next-11-icon>` : ""} </span><span part="label" id="label" class="${cx(
+    )}"></div></div>${this.checked ? html`<sd-7-0-0-next-12-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-7-0-0-next-12-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-7-0-0-next-12-icon part="indeterminate-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-minus"></sd-7-0-0-next-12-icon>` : ""} </span><span part="label" id="label" class="${cx(
       "select-none inline-block ml-2",
       this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-black"
-    )}"><slot></slot></span></label><div id="invalid-icon-message" part="invalid-icon-message" class="${cx("flex items-center gap-2", this.showInvalidStyle && "mt-2")}">${this.showInvalidStyle ? html`<sd-7-0-0-next-11-icon id="invalid-icon" part="invalid-icon" library="_internal" name="risk"></sd-7-0-0-next-11-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div></div>`;
+    )}"><slot></slot></span></label><div id="invalid-icon-message" part="invalid-icon-message" class="${cx("flex items-center gap-2", this.showInvalidStyle && "mt-2")}">${this.showInvalidStyle ? html`<sd-7-0-0-next-12-icon id="invalid-icon" part="invalid-icon" library="_internal" name="risk"></sd-7-0-0-next-12-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div></div>`;
   }
 };
 /**
@@ -223,7 +223,7 @@ __decorateClass([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleStateChange", 1);
 SdCheckbox = __decorateClass([
-  customElement("sd-7-0-0-next-11-checkbox")
+  customElement("sd-7-0-0-next-12-checkbox")
 ], SdCheckbox);
 
 export {

package/dist-versioned/chunks/{chunk.GBB73ZFE.js → chunk.TDFNLRUN.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DJJN4MJ4.js";
+} from "./chunk.PVSLBUSF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -228,7 +228,7 @@ var SdTextarea = class extends SolidElement {
       textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "text-black",
       ["invalid", "activeInvalid"].includes(textareaState) && "form-control--invalid-color-background"
     )}"><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-7-0-0-next-11-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-7-0-0-next-12-icon]:pe-8",
       {
         sm: isFloatingLabelActive ? "pb-1" : "py-2",
         md: isFloatingLabelActive ? "pb-1" : "py-2",
@@ -236,7 +236,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="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect === void 0 ? void 0 : this.autocorrect ? "on" : "off")}" ?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-7-0-0-next-11-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-7-0-0-next-11-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-0-0-next-11-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-11-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
+    )}" 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="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect === void 0 ? void 0 : this.autocorrect ? "on" : "off")}" ?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-7-0-0-next-12-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-7-0-0-next-12-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-0-0-next-12-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-0-0-next-12-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
       "text-sm mt-1",
       hasHelpText && !this.showInvalidStyle ? "block" : "hidden",
       this.visuallyDisabled || this.disabled ? "text-neutral-500" : "text-neutral-700"
@@ -249,7 +249,7 @@ var SdTextarea = class extends SolidElement {
 SdTextarea.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | 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:rgba(var(--sd-color-text-neutral-500))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([required]) #label::after{content:' *'}:host([visually-disabled]) textarea{caret-color:transparent}.no-scrollbar::-webkit-scrollbar{display:none}`
+:host{display:block;height:100%}:host textarea{scrollbar-gutter:stable}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{color:rgba(var(--sd-color-text-neutral-500,174 174 174))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:rgba(var(--sd-color-text-neutral-500,174 174 174))}:host([required]) #label::after{content:' *'}:host([visually-disabled]) textarea{caret-color:transparent}.no-scrollbar::-webkit-scrollbar{display:none}`
 ];
 __decorateClass([
   query("#input")
@@ -369,7 +369,7 @@ __decorateClass([
   watch(["size", "floatingLabel"])
 ], SdTextarea.prototype, "handleSizeChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-7-0-0-next-11-textarea")
+  customElement("sd-7-0-0-next-12-textarea")
 ], SdTextarea);
 
 export {

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

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

package/dist-versioned/chunks/{chunk.IXJGPE6X.js → chunk.UP7LZTGK.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.DJJN4MJ4.js";
+} from "./chunk.PVSLBUSF.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-7-0-0-next-11-button-group__button--focus");
+    button == null ? void 0 : button.classList.add("sd-7-0-0-next-12-button-group__button--focus");
   }
   handleBlur(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-7-0-0-next-11-button-group__button--focus");
+    button == null ? void 0 : button.classList.remove("sd-7-0-0-next-12-button-group__button--focus");
   }
   handleMouseOver(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("sd-7-0-0-next-11-button-group__button--hover");
+    button == null ? void 0 : button.classList.add("sd-7-0-0-next-12-button-group__button--hover");
   }
   handleMouseOut(event) {
     const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("sd-7-0-0-next-11-button-group__button--hover");
+    button == null ? void 0 : button.classList.remove("sd-7-0-0-next-12-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-7-0-0-next-11-button-group__button");
-        button.classList.toggle("sd-7-0-0-next-11-button-group__button--first", index === 0);
-        button.classList.toggle("sd-7-0-0-next-11-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle("sd-7-0-0-next-11-button-group__button--last", index === slottedElements.length - 1);
-        button.classList.toggle("sd-7-0-0-next-11-button-group__button--radio", button.tagName.toLowerCase() === "sd-7-0-0-next-11-radio-button");
+        button.classList.add("sd-7-0-0-next-12-button-group__button");
+        button.classList.toggle("sd-7-0-0-next-12-button-group__button--first", index === 0);
+        button.classList.toggle("sd-7-0-0-next-12-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle("sd-7-0-0-next-12-button-group__button--last", index === slottedElements.length - 1);
+        button.classList.toggle("sd-7-0-0-next-12-button-group__button--radio", button.tagName.toLowerCase() === "sd-7-0-0-next-12-radio-button");
       }
     });
   }
@@ -64,11 +64,11 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], SdButtonGroup.prototype, "label", 2);
 SdButtonGroup = __decorateClass([
-  customElement("sd-7-0-0-next-11-button-group")
+  customElement("sd-7-0-0-next-12-button-group")
 ], SdButtonGroup);
 function findButton(el) {
   var _a;
-  const selector = "sd-7-0-0-next-11-button, sd-7-0-0-next-11-radio-button";
+  const selector = "sd-7-0-0-next-12-button, sd-7-0-0-next-12-radio-button";
   return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
 }
 

package/dist-versioned/chunks/{chunk.UMF56HAL.js → chunk.V52RU2QQ.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DJJN4MJ4.js";
+} from "./chunk.PVSLBUSF.js";
 import {
   Wave
 } from "./chunk.POFWU6ZT.js";
@@ -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-7-0-0-next-11-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" title="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" class="mb-4">${this.isPlaying ? html`<slot name="pause-icon"><sd-7-0-0-next-11-icon class="text-xl" name="pause" library="_internal"></sd-7-0-0-next-11-icon></slot>` : html`<slot name="play-icon"><sd-7-0-0-next-11-icon class="text-xl" name="play" library="_internal"></sd-7-0-0-next-11-icon></slot>`}</sd-7-0-0-next-11-button><div class="flex items-center gap-6 justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" aria-label="${this.isTranscriptOpen ? this.localize.term("transcriptIsOpen") : this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" part="transcript"><sd-7-0-0-next-11-icon class="w-6 h-6" name="transcript" library="_internal"></sd-7-0-0-next-11-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${!this.isMuted ? this.localize.term("mute") : this.localize.term("unmute")}" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-7-0-0-next-11-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-7-0-0-next-11-icon></button></div></div>`;
+    )}" aria-label="${this.localize.term("playbackSpeed")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-7-0-0-next-12-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-7-0-0-next-12-icon class="text-xl" name="pause" library="_internal"></sd-7-0-0-next-12-icon></slot>` : html`<slot name="play-icon"><sd-7-0-0-next-12-icon class="text-xl" name="play" library="_internal"></sd-7-0-0-next-12-icon></slot>`}</sd-7-0-0-next-12-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-7-0-0-next-12-icon class="w-6 h-6" name="transcript" library="_internal"></sd-7-0-0-next-12-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-7-0-0-next-12-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-7-0-0-next-12-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-7-0-0-next-11-audio__timestamp-color-text")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-7-0-0-next-11-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-7-0-0-next-11-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-7-0-0-next-11-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-7-0-0-next-11-range></div>${this.hasSlotController.test("transcript") ? html`<sd-7-0-0-next-11-drawer><slot name="transcript"></slot></sd-7-0-0-next-11-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-7-0-0-next-11-theme-listener></sd-7-0-0-next-11-theme-listener>`;
+    )}" part="timestamps"><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "text-neutral-700")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "text-neutral-700")}">${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-7-0-0-next-12-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-7-0-0-next-12-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-7-0-0-next-12-range></div>${this.hasSlotController.test("transcript") ? html`<sd-7-0-0-next-12-drawer><slot name="transcript"></slot></sd-7-0-0-next-12-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-7-0-0-next-12-theme-listener></sd-7-0-0-next-12-theme-listener>`;
   }
 };
 SdAudio.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-sd-7-0-0-next-11-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-7-0-0-next-11-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-7-0-0-next-11-button::part(label){display:flex;flex-grow:0;align-items:center}sd-7-0-0-next-11-range::part(form-control-label){display:none}:host([inverted]) sd-7-0-0-next-11-range::part(thumb){outline-color:rgba(var(--sd-color-border-white,var(--sd-color-white)));background-color:rgba(var(--sd-color-icon-fill-white,rgba(var(--sd-color-white))))}:host([animated]) sd-7-0-0-next-11-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-7-0-0-next-11-range::part(track){background-color:rgba(var(--sd-audio__slide-bar--inverted-color-background,rgba(var(--sd-color-primary-400))))}:host([inverted]:not([animated])) sd-7-0-0-next-11-range::part(active-track){background-color:rgba(var(--sd-audio__track-bar--inverted-color-background,rgba(var(--sd-color-white))))}.sd-7-0-0-next-11-audio__timestamp-color-text{color:rgb(var(--sd-audio__timestamp-color-text,var(--sd-color-text-neutral-700)))}`
+sd-7-0-0-next-12-button::part(base){display:flex;height:var(--sd-spacing-12,3rem);width:var(--sd-spacing-12,3rem);align-items:center;justify-content:center;border-radius:var(--sd-radius-full,624.9375rem)}sd-7-0-0-next-12-button::part(motion-wrapper){border-radius:var(--sd-radius-full,624.9375rem)}sd-7-0-0-next-12-button::part(label){display:flex;flex-grow:0;align-items:center}sd-7-0-0-next-12-range::part(form-control-label){display:none}:host([inverted]) sd-7-0-0-next-12-range::part(thumb){outline-color:rgba(var(--sd-color-border-white,var(--sd-color-white,255 255 255)));background-color:rgba(var(--sd-color-icon-fill-white,rgba(var(--sd-color-white))))}:host([animated]) sd-7-0-0-next-12-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-7-0-0-next-12-range::part(track){background-color:rgba(var(--sd-audio__slide-bar--inverted-color-background,rgba(var(--sd-color-primary-400))))}:host([inverted]:not([animated])) sd-7-0-0-next-12-range::part(active-track){background-color:rgba(var(--sd-audio__track-bar--inverted-color-background,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-7-0-0-next-11-drawer")
+  query("sd-7-0-0-next-12-drawer")
 ], SdAudio.prototype, "drawer", 2);
 __decorateClass([
   query("canvas")
 ], SdAudio.prototype, "canvas", 2);
 SdAudio = __decorateClass([
-  customElement("sd-7-0-0-next-11-audio")
+  customElement("sd-7-0-0-next-12-audio")
 ], SdAudio);
 
 export {

package/dist-versioned/chunks/{chunk.PCB2BA7U.js → chunk.VAEJX7NE.js}

@@ -17,7 +17,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DJJN4MJ4.js";
+} from "./chunk.PVSLBUSF.js";
 import {
   animateTo,
   stopAnimations
@@ -154,7 +154,7 @@ var SdDropdown = class extends SolidElement {
    * within the slotted trigger. This could be the slotted element itself, a child of the slotted element,
    * or an element within the slotted elements shadow root.
    *
-   * e.g. the accessible trigger of an <sd-7-0-0-next-11-button> is a <button> located inside its shadow root.
+   * e.g. the accessible trigger of an <sd-7-0-0-next-12-button> is a <button> located inside its shadow root.
    *
    * To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
    * */
@@ -165,11 +165,11 @@ var SdDropdown = class extends SolidElement {
     if (accessibleTrigger) {
       switch (accessibleTrigger.tagName.toLowerCase()) {
         // Solid buttons have to update the internal button so it's announced correctly by screen readers
-        case "sd-7-0-0-next-11-button":
-        case "sd-7-0-0-next-11-icon-button":
+        case "sd-7-0-0-next-12-button":
+        case "sd-7-0-0-next-12-icon-button":
           target = accessibleTrigger.button;
           break;
-        case "sd-7-0-0-next-11-navigation-item":
+        case "sd-7-0-0-next-12-navigation-item":
           target = accessibleTrigger.button;
           break;
         default:
@@ -193,7 +193,7 @@ var SdDropdown = class extends SolidElement {
     }
   }
   getMenu() {
-    return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sd-7-0-0-next-11-menu");
+    return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sd-7-0-0-next-12-menu");
   }
   handleKeyDown(event) {
     if (this.open && event.key === "Escape") {
@@ -205,7 +205,7 @@ var SdDropdown = class extends SolidElement {
   handleDocumentKeyDown(event) {
     var _a;
     if (event.key === "Tab") {
-      if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sd-7-0-0-next-11-menu-item") {
+      if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sd-7-0-0-next-12-menu-item") {
         event.preventDefault();
         this.hide();
         this.focusOnTrigger();
@@ -231,7 +231,7 @@ var SdDropdown = class extends SolidElement {
   }
   handlePanelSelect(event) {
     const target = event.target;
-    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sd-7-0-0-next-11-menu") {
+    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sd-7-0-0-next-12-menu") {
       this.hide();
       this.focusOnTrigger();
     }
@@ -320,7 +320,7 @@ var SdDropdown = class extends SolidElement {
   }
   addOpenListeners() {
     this.panel.addEventListener("sd-activate", this.handleMenuItemActivate);
-    this.panel.addEventListener("sd-7-0-0-next-11-select", this.handlePanelSelect);
+    this.panel.addEventListener("sd-7-0-0-next-12-select", this.handlePanelSelect);
     this.panel.addEventListener("keydown", this.handleKeyDown);
     document.addEventListener("keydown", this.handleDocumentKeyDown);
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
@@ -328,7 +328,7 @@ var SdDropdown = class extends SolidElement {
   removeOpenListeners() {
     if (this.panel) {
       this.panel.removeEventListener("sd-activate", this.handleMenuItemActivate);
-      this.panel.removeEventListener("sd-7-0-0-next-11-select", this.handlePanelSelect);
+      this.panel.removeEventListener("sd-7-0-0-next-12-select", this.handlePanelSelect);
       this.panel.removeEventListener("keydown", this.handleKeyDown);
     }
     document.removeEventListener("keydown", this.handleDocumentKeyDown);
@@ -361,13 +361,13 @@ var SdDropdown = class extends SolidElement {
     }
   }
   render() {
-    return html`<sd-7-0-0-next-11-popup part="base" id="dropdown" exportparts="
+    return html`<sd-7-0-0-next-12-popup part="base" id="dropdown" exportparts="
           popup:base__popup,
         " placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
-      "panel-color-border border shadow sd-7-0-0-next-11-dropdown-color-background block",
+      "panel-color-border border shadow sd-7-0-0-next-12-dropdown-color-background block",
       this.open ? "pointer-events-auto" : "pointer-events-none",
       this.rounded && "rounded-md"
-    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-7-0-0-next-11-popup>`;
+    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-7-0-0-next-12-popup>`;
   }
 };
 SdDropdown.styles = [
@@ -421,7 +421,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDropdown.prototype, "handleOpenChange", 1);
 SdDropdown = __decorateClass([
-  customElement("sd-7-0-0-next-11-dropdown")
+  customElement("sd-7-0-0-next-12-dropdown")
 ], SdDropdown);
 setDefaultAnimation("dropdown.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],

package/dist-versioned/chunks/{chunk.77CINHAJ.js → chunk.WCQW4CQT.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.DJJN4MJ4.js";
+} from "./chunk.PVSLBUSF.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -69,7 +69,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-7-0-0-next-11-include")
+  customElement("sd-7-0-0-next-12-include")
 ], SdInclude);
 
 export {