@solid-design-system/components 6.13.1 → 6.14.0

package/dist-versioned/chunks/{chunk.DHLNHGWA.js → chunk.2OXZCSWC.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.XUN5IQYN.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -20,7 +20,7 @@ var SdRangeTick = class extends SolidElement {
     this.subtick = false;
   }
   render() {
-    return html`<div part="base" class="${cx(this.subtick ? "w-0.25" : "w-0.5")}"><div part="line" class="${cx(this.subtick ? "h-2" : "h-[10px]")}"></div><div part="label" class="flex items-center justify-center text-center text-nowrap text-sm sd-6-13-1-range-scale-ticks-color-text"><slot></slot></div></div>`;
+    return html`<div part="base" class="${cx(this.subtick ? "w-0.25" : "w-0.5")}"><div part="line" class="${cx(this.subtick ? "h-2" : "h-[10px]")}"></div><div part="label" class="flex items-center justify-center text-center text-nowrap text-sm sd-6-14-0-range-scale-ticks-color-text"><slot></slot></div></div>`;
   }
 };
 SdRangeTick.styles = [
@@ -32,7 +32,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdRangeTick.prototype, "subtick", 2);
 SdRangeTick = __decorateClass([
-  customElement("sd-6-13-1-range-tick")
+  customElement("sd-6-14-0-range-tick")
 ], SdRangeTick);
 
 export {

package/dist-versioned/chunks/{chunk.YDUILGDN.js → chunk.3BN2HSGI.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.XUN5IQYN.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -81,14 +81,14 @@ var SdStep = class extends SolidElement {
     const hasDescription = this.description ? true : hasDefaultSlot;
     const isHorizontalInline = this.horizontalInline && this.orientation === "horizontal";
     const circleAndTailContainerClasses = cx(
-      "flex shrink-0 gap-2",
+      "flex shrink-0 gap-2 group",
       this.noTail && !isHorizontalInline && "w-max",
       this.orientation === "horizontal" ? "flex-row" : "flex-col items-stretch",
       isHorizontalInline && "items-start",
       this.orientation === "horizontal" && !this.horizontalInline ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" ? "mt-1" : "mt-3"
     );
     const circleButtonClasses = cx(
-      "border sd-6-13-1-step__circle-border-width rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
+      "border sd-6-14-0-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" : "w-12" : this.size === "lg" ? "w-12" : "w-8",
       this.disabled && "border-neutral-500 text-neutral-500",
@@ -104,8 +104,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 && "text-primary"
-    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting ? html`<sd-6-13-1-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-6-13-1-icon>` : 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-6-14-0-step-color-text"
+    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting ? html`<sd-6-14-0-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-6-14-0-icon>` : 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"
@@ -116,7 +116,7 @@ var SdStep = class extends SolidElement {
       !this.disabled && !this.current && !this.notInteractive && !this.waiting && "text-black"
     )}"><slot name="label">${this.label}</slot></div>`} ${!this.noTail ? html`<div part="tail" class="${cx(
       "border-t flex-1 mr-2 mt-3",
-      !this.disabled && !this.current && !this.notInteractive && !this.waiting ? "border-primary" : "border-neutral-500"
+      !this.disabled && !this.current && !this.notInteractive && !this.waiting ? "border-primary group-hover:border-primary-500" : "border-neutral-500"
     )}"></div>` : ""}</div>${hasDescription ? html`<div part="description" id="description" class="${cx(
       "sd-paragraph sd-paragraph--size-sm break-words",
       hasDescription ? "flex-1" : "w-0 h-0 overflow-hidden",
@@ -124,7 +124,7 @@ var SdStep = class extends SolidElement {
       (this.disabled || this.waiting) && "!text-neutral-700"
     )}">${this.description || html`<slot></slot>`}</div>` : ""}</div>` : this.noTail ? "" : html`<div part="tail" class="${cx(
       this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",
-      !this.disabled && !this.current && !this.notInteractive && !this.waiting ? "border-primary" : "border-neutral-400"
+      !this.disabled && !this.current && !this.notInteractive && !this.waiting ? "border-primary group-hover:border-primary-500" : "border-neutral-400"
     )}"></div>`}</div>${!isHorizontalInline ? html`<div part="text-container" class="${cx(
       "mt-4 break-words flex flex-col gap-2",
       this.orientation === "horizontal" ? "text-center w-40" : "text-left",
@@ -145,7 +145,7 @@ var SdStep = class extends SolidElement {
 SdStep.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | 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])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-6-13-1-icon,slot[name=circle-content]::slotted(sd-6-13-1-icon){color:rgba(var(--sd-color-icon-fill-primary))}:host([horizontal-inline]):has([part=description]){min-width:calc(var(--sd-spacing-1) * 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-6-14-0-icon,slot[name=circle-content]::slotted(sd-6-14-0-icon){color:rgba(var(--sd-color-icon-fill-primary))}[part=circle]:hover slot[name=circle-content] sd-6-14-0-icon,[part=circle]:hover slot[name=circle-content]::slotted(sd-6-14-0-icon){color:rgba(var(--sd-color-icon-fill-primary-500))}:host([horizontal-inline]):has([part=description]){min-width:calc(var(--sd-spacing-1) * 0);flex:1}.translateLg{transform:translateX(3.438rem)}.translateSm{transform:translateX(4rem)}.not-interactive-lg{width:4.5rem}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
@@ -196,7 +196,7 @@ __decorateClass([
   watch("notInteractive")
 ], SdStep.prototype, "handleInteractivityChange", 1);
 SdStep = __decorateClass([
-  customElement("sd-6-13-1-step")
+  customElement("sd-6-14-0-step")
 ], SdStep);
 
 export {

package/dist-versioned/chunks/{chunk.XMJYRHLS.js → chunk.3CILMNMC.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.XUN5IQYN.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -26,7 +26,7 @@ SdCarouselItem.styles = [
 :host{aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always;display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}::slotted(img){height:100%;width:100%;-o-object-fit:cover;object-fit:cover}`
 ];
 SdCarouselItem = __decorateClass([
-  customElement("sd-6-13-1-carousel-item")
+  customElement("sd-6-14-0-carousel-item")
 ], SdCarouselItem);
 
 export {

package/dist-versioned/chunks/{chunk.XD4EBUSG.js → chunk.4E46CLAH.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.XUN5IQYN.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -24,7 +24,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-6-13-1-tab-${this.attrId}`;
+    this.componentId = `sd-6-14-0-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.localize = new LocalizeController(this);
     this.variant = "default";
@@ -58,22 +58,24 @@ var SdTab = class extends SolidElement {
       left: this.hasSlotController.test("left")
     };
     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",
+      "inline-flex justify-center min-w-max items-center h-12 px-3 leading-none select-none cursor-pointer group relative choice-control-font-weight",
       "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:color-background",
-      this.active && "z-20"
+      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:sd-6-14-0-tab--hover-color-background",
+      this.active && "z-20 sd-6-14-0-tab--active-color-text"
     )}" tabindex="${!this.active || this.disabled ? "-1" : "0"}"><div class="${cx(
       "flex h-full items-center justify-center whitespace-nowrap",
       this.disabled || this.visuallyDisabled && "opacity-50 "
     )}"><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(
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.active ? "sd-6-14-0-tab--active-color-text" : "sd-6-14-0-tab-color-text"
+    )}"></slot><slot class="${cx(
+      this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.active ? "sd-6-14-0-tab--active-color-text" : "sd-6-14-0-tab-color-text"
+    )}"></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 sd-6-13-1-tab-color-border"
+      !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-6-14-0-tab-color-border"
     )}"></div></div></div>`;
   }
 };
@@ -110,7 +112,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-6-13-1-tab")
+  customElement("sd-6-14-0-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.NZDAUJVV.js → chunk.4FE2UCUY.js}

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

package/dist-versioned/chunks/{chunk.MCPTLXS6.js → chunk.5THT3TCI.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.XUN5IQYN.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -53,7 +53,7 @@ var SdNavigationItem = class extends SolidElement {
       }
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = node;
-        return element.tagName.toLowerCase() === "sd-6-13-1-icon";
+        return element.tagName.toLowerCase() === "sd-6-14-0-icon";
       }
       return false;
     });
@@ -126,8 +126,8 @@ var SdNavigationItem = class extends SolidElement {
     const root = html`<${tag} part="base" class="${cx(
       "flex items-center cursor-pointer relative focus-visible:focus-outline group hover:bg-neutral-200 transition-colors duration-fast ease-in-out min-h-[48px] navigable-border-radius",
       { md: "navigable-font-size", lg: "text-lg", sm: "text-[14px]" }[this.size],
-      this.disabled ? "text-neutral-500 pointer-events-none" : "sd-6-13-1-navigation-item-color-text",
-      this.current && "font-bold sd-6-13-1-navigation-item--current-color-text",
+      this.disabled ? "text-neutral-500 pointer-events-none" : "sd-6-14-0-navigation-item-color-text",
+      this.current && "font-bold sd-6-14-0-navigation-item--current-color-text",
       !isAccordion && "w-full",
       this.divider && this.vertical && "mt-0.25",
       !this.vertical && "inline-flex items-center",
@@ -143,19 +143,19 @@ var SdNavigationItem = class extends SolidElement {
       slots["description"] && "pt-3",
       !slots["description"] && !this.separated && horizontalPadding,
       this.calculatePaddingX
-    )}">${this.divider && this.vertical ? html`<sd-6-13-1-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-6-13-1-divider>` : ""} <span id="content" part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline-flex text-start"></slot></span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-6-13-1-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+    )}">${this.divider && this.vertical ? html`<sd-6-14-0-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-6-14-0-divider>` : ""} <span id="content" part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline-flex text-start"></slot></span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-6-14-0-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
       "h-6 w-6 ml-2 transition-all",
       isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-6-13-1-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot id="description" name="description" part="description" class="${cx(
+    )}"></sd-6-14-0-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot id="description" name="description" part="description" class="${cx(
       "inline-block text-sm text-left font-normal text-black pb-3",
       isAccordion || this.separated ? "grow" : "w-full",
       this.calculatePaddingX
     )}"></slot>` : ""}</div></${tag}>`;
     if (this.separated) {
-      return html`<div part="details" id="navigation-item-details" class="relative flex flex-col"><div class="flex items-start">${root} ${slots["children"] && this.vertical ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset -mt-1" @click="${this.handleClickSummary}"><sd-6-13-1-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+      return html`<div part="details" id="navigation-item-details" class="relative flex flex-col"><div class="flex items-start">${root} ${slots["children"] && this.vertical ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset -mt-1" @click="${this.handleClickSummary}"><sd-6-14-0-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
         "m-4 h-6 w-6 transition-all",
         isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-      )}"></sd-6-13-1-icon></button>` : ""}</div>${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
+      )}"></sd-6-14-0-icon></button>` : ""}</div>${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
     }
     if (isAccordion) {
       return html`<details aria-expanded="${this.open}" part="details" id="navigation-item-details" ?open="${this.open}" class="relative">${root}<slot name="children"></slot></details>`;
@@ -169,7 +169,7 @@ var SdNavigationItem = class extends SolidElement {
 SdNavigationItem.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
-:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}[part=current-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,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top 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([current]) [part=current-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,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}@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}@property --tw-duration{syntax:"*";inherits:false}`
+:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}.sd-6-14-0-navigation-item--current-color-text{color:rgb(var(--sd-navigation-item--current-color-text,var(--sd-navigation-item-color-text)))}details summary::-webkit-details-marker{display:none}[part=current-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,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top 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([current]) [part=current-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,height var(--sd-duration-fast) ease-in-out,left var(--sd-duration-fast) ease-in-out,top var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}@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}@property --tw-duration{syntax:"*";inherits:false}`
 ];
 __decorateClass([
   query('[part="base"]')
@@ -217,7 +217,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdNavigationItem.prototype, "separated", 2);
 SdNavigationItem = __decorateClass([
-  customElement("sd-6-13-1-navigation-item")
+  customElement("sd-6-14-0-navigation-item")
 ], SdNavigationItem);
 
 export {

package/dist-versioned/chunks/{chunk.VP3AKE25.js → chunk.6IJYJRHT.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.AZKCE2J4.js";
+} from "./chunk.XUN5IQYN.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -72,14 +72,14 @@ var SdFlipcard = class extends SolidElement {
         "gradient-dark": "text-white"
       }[this.frontVariant]
     )}"><div class="${cx(
-      "absolute inset-0",
+      "absolute inset-0 pointer-events-none -z-10",
       {
         primary: "",
         "primary-100": "",
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/75 to-white/60" : "bg-gradient-to-t  from-white/75 to-white/60",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/75 to-primary-800/60" : "bg-gradient-to-b  from-primary-800/75 to-primary-800/60"
       }[this.frontVariant]
-    )}"></div><slot name="front"></slot></div><div part="front-secondary-gradient" class="${cx(
+    )}"></div><slot name="front" class="relative z-10"></slot></div><div part="front-secondary-gradient" class="${cx(
       "flip-card__gradient",
       {
         primary: "mb-auto",
@@ -87,7 +87,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.frontVariant]
-    )}"></div><sd-6-13-1-button part="front-button" size="md" variant="${{
+    )}"></div><sd-6-14-0-button part="front-button" size="md" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -97,7 +97,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-6-13-1-icon library="_internal" name="reload" label="Flip to Back"></sd-6-13-1-icon></sd-6-13-1-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
+    }[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-6-14-0-icon library="_internal" name="reload" label="Flip to Back"></sd-6-14-0-icon></sd-6-14-0-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
       "flip-card__side flip-card__side--back overflow-hidden transition-transform duration-1000 ease-in-out",
       "flex focus-visible:focus-outline",
       "absolute top-0 left-0 w-full h-full justify-end text-left",
@@ -109,7 +109,7 @@ var SdFlipcard = class extends SolidElement {
       "absolute h-full w-full -z-20",
       (this.backVariant === "primary" || this.backVariant === "primary-100") && "hidden"
     )}"><slot name="media-back"></slot></div><div part="back-slot-container" class="${cx(
-      "flex",
+      "flex relative",
       {
         primary: "text-white",
         "primary-100": "text-black",
@@ -122,7 +122,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/75 to-white/60" : "bg-gradient-to-t  from-white/75 to-white/60",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/75 to-primary-800/60" : "bg-gradient-to-b  from-primary-800/75 to-primary-800/60"
       }[this.backVariant]
-    )}"><slot name="back"></slot></div><div part="back-secondary-gradient" class="${cx(
+    )}"><slot name="back" class="relative z-10"></slot></div><div part="back-secondary-gradient" class="${cx(
       "flip-card__gradient",
       {
         primary: "mb-auto",
@@ -130,7 +130,7 @@ var SdFlipcard = class extends SolidElement {
         "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
         "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
       }[this.backVariant]
-    )}"></div><sd-6-13-1-button size="md" part="back-button" variant="${{
+    )}"></div><sd-6-14-0-button size="md" part="back-button" variant="${{
       primary: "tertiary",
       "primary-100": "tertiary",
       "gradient-light": "primary",
@@ -140,7 +140,7 @@ var SdFlipcard = class extends SolidElement {
       "primary-100": false,
       "gradient-light": true,
       "gradient-dark": true
-    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-6-13-1-icon library="_internal" name="reload" label="Flip to Front"></sd-6-13-1-icon></sd-6-13-1-button></div></div>`;
+    }[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-6-14-0-icon library="_internal" name="reload" label="Flip to Front"></sd-6-14-0-icon></sd-6-14-0-button></div></div>`;
   }
 };
 /**
@@ -149,10 +149,9 @@ var SdFlipcard = class extends SolidElement {
 SdFlipcard.styles = [
   ...SolidElement.styles,
   css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
-:host{display:block;aspect-ratio:var(--sd-aspect-3\\/4);--name:'';--height:480px;height:var(--height)}.flip-card{perspective:100rem}.flip-card__side{backface-visibility:hidden}.flip-card__side--back{transform:rotateY(180deg)}.clicked--front{transform:rotateY(-180deg)}.clicked--back{transform:rotateY(0)}.flip-card__side--back.vertical{transform:rotateX(180deg)}.clicked--front.vertical{transform:rotateX(-180deg)}.clicked--back.vertical{transform:rotateX(0)}.flip-card__gradient{flex:.4 1 0}:host([front-variant=gradient-light]) [part=front-secondary-gradient],:host([front-variant=gradient-light]) [part=front-slot-container] .bg-gradient-to-b{--sd-color-background-white:rgba(
-          var(--sd-informational-gradient--white-color-background, rgba(var(--sd-color-white)))
-        )}:host([front-variant=gradient-dark]) [part=front-secondary-gradient],:host([front-variant=gradient-dark]) [part=front-slot-container] .bg-gradient-to-b{--sd-color-background-primary-800:rgba(
-          var(--sd-informational-gradient--primary-800-color-background, rgba(var(--sd-color-primary-800)))
+:host{display:block;aspect-ratio:var(--sd-aspect-3\\/4);--name:'';--height:480px;height:var(--height)}.flip-card{perspective:100rem}.flip-card__side{backface-visibility:hidden}.flip-card__side--back{transform:rotateY(180deg)}.clicked--front{transform:rotateY(-180deg)}.clicked--back{transform:rotateY(0)}.flip-card__side--back.vertical{transform:rotateX(180deg)}.clicked--front.vertical{transform:rotateX(-180deg)}.clicked--back.vertical{transform:rotateX(0)}.flip-card__gradient{flex:.2 1 0;pointer-events:none}.bg-gradient-to-b,.bg-gradient-to-t{--sd-color-background-primary-800:var(
+          --sd-informational-gradient--primary-800-color-background,
+          var(--sd-color-primary-800)
         )}`
 ];
 __decorateClass([
@@ -177,7 +176,7 @@ __decorateClass([
   state()
 ], SdFlipcard.prototype, "activeSide", 2);
 SdFlipcard = __decorateClass([
-  customElement("sd-6-13-1-flipcard")
+  customElement("sd-6-14-0-flipcard")
 ], SdFlipcard);
 
 export {