@solid-design-system/components 4.0.0-next.1 → 4.0.0-next.11

package/dist/chunks/{chunk.J2XBUIBC.js → chunk.27SQRFDZ.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.SPBPHTSS.js → chunk.37664KT7.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -17,7 +17,6 @@ var SdVideo = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.playing = false;
-    this.overlay = false;
     this.isBelowBreakpoint = false;
     this.hasSlotController = new HasSlotController(this, "[default]", "play-icon", "poster");
   }
@@ -100,10 +99,7 @@ var SdVideo = class extends SolidElement {
       this.playing ? "opacity-0" : "opacity-100",
       this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
       "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-icon id="default-play-icon" library="system" name="start"></sd-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<div part="overlay" id="overlay" role="presentation" class="${cx(
-      this.overlay && !this.playing ? "opacity-100" : "opacity-0",
-      "bg-[black] bg-opacity-60 w-full h-full absolute top-0 left-0 pointer-events-none z-20 play-pause-transition"
-    )}"></div><slot></slot></div>`;
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-icon id="default-play-icon" library="system" name="start"></sd-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<slot></slot></div>`;
   }
 };
 SdVideo.styles = [
@@ -116,9 +112,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdVideo.prototype, "playing", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdVideo.prototype, "overlay", 2);
 __decorateClass([
   property({ type: Boolean })
 ], SdVideo.prototype, "isBelowBreakpoint", 2);

package/dist/chunks/{chunk.VHGHICFG.js → chunk.3ZXUWSEL.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.SSH6ATRK.js → chunk.4OXUMYNO.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.IN3GJ5QL.js → chunk.5XUZOO7Z.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.WWS3CQ2Z.js → chunk.6674RGIJ.js}

@@ -1,14 +1,15 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
 
 // src/components/flipcard/flipcard.ts
 import { css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
 import cx from "classix";
 var SdFlipcard = class extends SolidElement {
   constructor() {
@@ -17,21 +18,28 @@ var SdFlipcard = class extends SolidElement {
     this.placement = "top";
     this.frontVariant = "primary";
     this.backVariant = "primary";
+    this.activeSide = "front";
   }
   connectedCallback() {
     super.connectedCallback();
   }
   flipFront() {
+    this.activeSide = "back";
     this.front.classList.add("clicked--front");
     this.back.classList.add("clicked--back");
     this.emit("sd-flip-front");
-    this.back.focus();
+    setTimeout(() => {
+      this.back.focus();
+    });
   }
   flipBack() {
+    this.activeSide = "front";
     this.front.classList.remove("clicked--front");
     this.back.classList.remove("clicked--back");
     this.emit("sd-flip-back");
-    this.front.focus();
+    setTimeout(() => {
+      this.front.focus();
+    });
   }
   handleFrontKeydown(event) {
     if (event.code === "Enter" && this.front === event.target) {
@@ -44,7 +52,7 @@ var SdFlipcard = class extends SolidElement {
     }
   }
   render() {
-    return html`<div part="base" class="${cx("flip-card relative h-full w-full")}"><div part="front" tabindex="0" class="${cx(
+    return html`<div part="base" class="${cx("flip-card relative h-full w-full")}"><div part="front" tabindex="0" aria-hidden="${this.activeSide === "back"}" inert="${ifDefined(this.activeSide === "back" || void 0)}" class="${cx(
       "flip-card__side flip-card__side--front 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",
@@ -67,15 +75,15 @@ var SdFlipcard = class extends SolidElement {
         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-b from-primary-800/75 to-primary-800/60" : "bg-gradient-to-t  from-primary-800/75 to-primary-800/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]
     )}"><slot name="front"></slot></div><div part="front-secondary-gradient" class="${cx(
       "flip-card__gradient",
       {
         primary: "mb-auto",
         "primary-100": "mb-auto",
-        "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-40% mb-auto" : "bg-gradient-to-t from-white/60 to-40% mt-auto",
-        "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-40% mt-auto" : "bg-gradient-to-b from-primary-800/60 to-40% mb-auto"
+        "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-button part="front-button" size="md" variant="${{
       primary: "tertiary",
@@ -87,7 +95,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-icon library="system" name="reload" label="Flip to Back"></sd-icon></sd-button></div><div part="back" tabindex="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-icon library="system" name="reload" label="Flip to Back"></sd-icon></sd-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",
@@ -110,15 +118,15 @@ var SdFlipcard = class extends SolidElement {
         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-b from-primary-800/75 to-primary-800/60" : "bg-gradient-to-t  from-primary-800/75 to-primary-800/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(
       "flip-card__gradient",
       {
         primary: "mb-auto",
         "primary-100": "mb-auto",
-        "gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-40% mb-auto" : "bg-gradient-to-t from-white/60 to-40% mt-auto",
-        "gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-40% mt-auto" : "bg-gradient-to-b from-primary-800/60 to-40% mb-auto"
+        "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-button size="md" part="back-button" variant="${{
       primary: "tertiary",
@@ -158,6 +166,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true, attribute: "back-variant" })
 ], SdFlipcard.prototype, "backVariant", 2);
+__decorateClass([
+  state()
+], SdFlipcard.prototype, "activeSide", 2);
 SdFlipcard = __decorateClass([
   customElement("sd-flipcard")
 ], SdFlipcard);

package/dist/chunks/{chunk.JIKTGTDS.js → chunk.6TF5WSJN.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -21,7 +21,7 @@ var SdDivider = class extends SolidElement {
     this.setAttribute("role", "separator");
   }
   render() {
-    return html`<hr part="main" class="${cx(
+    return html`<hr part="main" aria-orientation="${this.orientation}" class="${cx(
       this.inverted ? "border-primary-400" : "border-neutral-400",
       this.orientation === "horizontal" ? "border-t w-full" : " border-l h-full"
     )}">`;

package/dist/chunks/{chunk.BVC5FY4L.js → chunk.72J5QL5P.js}

@@ -1,6 +1,6 @@
 import {
   SdRadio
-} from "./chunk.J7MMF6WJ.js";
+} from "./chunk.IWGFPJAK.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -9,7 +9,7 @@ import {
 } from "./chunk.KVKRZJS7.js";
 import {
   SdButtonGroup
-} from "./chunk.ZWJI7SLE.js";
+} from "./chunk.B46YO2DU.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.QCICV36Z.js → chunk.7DX4PB23.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.2LMWBUBT.js";
 import {
   SdCarouselItem
-} from "./chunk.RNSJAVQE.js";
+} from "./chunk.QS7JZELX.js";
 import {
   prefersReducedMotion
 } from "./chunk.EY4JPJJQ.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.6CUAQSFA.js → chunk.7RBU4QLX.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.U6RY25TF.js → chunk.7Y2R5BEJ.js}

@@ -28,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.6JI7NL3E.js → chunk.ARGAIVTZ.js}

@@ -1,18 +1,19 @@
 import {
   SdAccordion
-} from "./chunk.DAM3ICHP.js";
+} from "./chunk.TE6Y3FYE.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
 
 // src/components/quickfact/quickfact.ts
-import { css, html } from "lit";
+import { css } from "lit";
+import { html, literal } from "lit/static-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { property } from "lit/decorators.js";
 import cx from "classix";
@@ -22,17 +23,58 @@ var SdQuickfact = class extends SdAccordion {
     this.expandable = false;
   }
   render() {
-    return html`<div part="base" class="sm:p-6"><header part="header" id="header" class="${cx(
+    const base = this.expandable ? literal`details` : literal`div`;
+    const header = this.expandable ? literal`summary` : literal`div`;
+    return html`
+      <${base} part="base" class="sm:p-6">
+        <${header}
+          part="header"
+          id="header"
+          class=${cx(
       "text-base font-bold items-center focus-visible:focus-outline text-primary relative group flex flex-row hover:bg-transparent gap-3 pb-3 pt-0 px-0 sm:flex-col sm:gap-4 sm:pb-8",
       this.expandable && "cursor-pointer select-none"
-    )}" role="${ifDefined(this.expandable ? "button" : void 0)}" aria-expanded="${ifDefined(this.expandable ? this.open ? "true" : "false" : void 0)}" aria-controls="${ifDefined(this.expandable ? "content" : void 0)}" tabindex="${this.expandable ? "0" : "-1"}" @click="${this.expandable ? this.handleSummaryClick : null}" @keydown="${this.expandable ? this.handleSummaryKeyDown : null}"><div part="icon" class="${cx("flex flex-grow-0 flex-shrink-0 flex-auto items-center", !this.expandable && "cursor-default")}"><slot name="icon"></slot></div><slot name="summary" part="summary" class="${cx(
+    )}
+          role=${ifDefined(this.expandable ? "button" : void 0)}
+          aria-expanded=${ifDefined(this.expandable ? this.open ? "true" : "false" : void 0)}
+          aria-controls=${ifDefined(this.expandable ? "content" : void 0)}
+          tabindex=${this.expandable ? "0" : "-1"}
+          @click=${this.expandable ? this.handleSummaryClick : null}
+          @keydown=${this.expandable ? this.handleSummaryKeyDown : null}
+        >
+          <div
+            part="icon"
+            class=${cx("flex flex-grow-0 flex-shrink-0 flex-auto items-center", !this.expandable && "cursor-default")}
+          >
+            <slot name="icon"></slot>
+          </div>
+          <slot
+            name="summary"
+            part="summary"
+            class=${cx(
       "flex flex-auto items-start text-left text-base leading-normal font-normal sm:leading-tight sm:text-3xl sm:text-center",
       this.expandable ? "text-primary" : "text-black cursor-default"
-    )}">${this.summary}</slot><span part="summary-icon" class="${cx(
+    )}>
+            ${this.summary}
+            </slot>
+          <span
+            part="summary-icon"
+            class=${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto self-start sm:self-center transition-all ease-in-out duration-300 text-xl sm:text-4xl sm:mt-2",
       this.open && "rotate-180",
       !this.expandable && "hidden"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot></span></header><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></div>`;
+    )}
+            ><slot name="expand-icon" class=${cx(this.open && "hidden")}>
+              <sd-icon library="system" name="chevron-down"></sd-icon>
+            </slot>
+            <slot name="collapse-icon" class=${cx(!this.open && "hidden")}>
+              <sd-icon library="system" name="chevron-down"></sd-icon> </slot
+          ></span>
+        </${header}>
+        <div part="content" id="content" class=${cx("overflow-hidden", !this.expandable && "hidden")}>
+          <slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot>
+        </div>
+      </${base}>
+    `;
   }
 };
 SdQuickfact.styles = [

package/dist/chunks/{chunk.ZWJI7SLE.js → chunk.B46YO2DU.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.727ERQ4F.js → chunk.BD26OX54.js}

@@ -28,7 +28,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.ZGPGFEVP.js → chunk.BV77EY65.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.MTSAWJLV.js → chunk.CLK342K3.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.QP3SM2LZ.js → chunk.DRB2G3P6.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass,
   __spreadValues

package/dist/chunks/{chunk.4WYIZLVF.js → chunk.IV33PV6V.js}

@@ -1,13 +1,13 @@
 import {
   SdDivider
-} from "./chunk.JIKTGTDS.js";
+} from "./chunk.6TF5WSJN.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.J7MMF6WJ.js → chunk.IWGFPJAK.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.BXB5WF23.js → chunk.JLAN3PNI.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.RZRTIYXA.js → chunk.JQLMRRV4.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -14,7 +14,7 @@ var SdBadge = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.size = "lg";
-    this.variant = "default";
+    this.variant = "blue";
     this.inverted = false;
   }
   render() {
@@ -22,9 +22,9 @@ var SdBadge = class extends SolidElement {
       "inline-flex items-center justify-center gap-x-[1px] text-center font-bold whitespace-nowrap border rounded-full select-none cursor-[inherit]",
       {
         /* variants */
-        default: !this.inverted ? "text-white bg-primary-500 border-white" : "text-primary bg-primary-100 border-primary",
-        success: !this.inverted ? "text-white bg-success border-white" : "text-white bg-success border-primary",
-        error: !this.inverted ? "text-white bg-error border-white" : "text-white bg-error border-primary"
+        blue: !this.inverted ? "text-white bg-primary-500 border-white" : "text-primary bg-primary-100 border-primary",
+        green: !this.inverted ? "text-white bg-success border-white" : "text-white bg-success border-primary",
+        red: !this.inverted ? "text-white bg-error border-white" : "text-white bg-error border-primary"
       }[this.variant],
       {
         /* size and fonts*/

package/dist/chunks/{chunk.2IBVAXOX.js → chunk.LHLEDGCK.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.7BEDTYS7.js → chunk.LHOEG5AE.js}

@@ -1,10 +1,13 @@
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
+import {
+  HasSlotController
+} from "./chunk.YEZS5ZR2.js";
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -19,6 +22,7 @@ var SdTab = class extends SolidElement {
     super(...arguments);
     this.attrId = ++id;
     this.componentId = `sd-tab-${this.attrId}`;
+    this.hasSlotController = new HasSlotController(this, "left");
     this.variant = "default";
     this.active = false;
     this.disabled = false;
@@ -44,12 +48,15 @@ var SdTab = class extends SolidElement {
   }
   render() {
     this.id = this.id.length > 0 ? this.id : this.componentId;
+    const slots = {
+      left: this.hasSlotController.test("left")
+    };
     return html`<div part="base" class="${cx(
       "inline-flex min-w-max h-12 px-3 leading-none items-center justify-center whitespace-nowrap select-none cursor-pointer group relative focus-visible:focus-outline outline-2 !-outline-offset-2",
       this.variant === "container" && " rounded-[4px_4px_0_0]",
       this.variant === "container" && this.active && "tab--active-container-border bg-white",
       this.disabled ? "opacity-50 !cursor-not-allowed" : "hover:bg-neutral-200"
-    )}" tabindex="${this.disabled ? "-1" : this.active ? "0" : "-1"}"><slot name="left" class="${cx("pr-2", this.disabled ? "text-neutral-500" : "text-primary")}"></slot><slot class="${cx(this.disabled ? "text-neutral-500" : "text-primary")}"></slot><div part="active-tab-indicator" class="${cx(
+    )}" tabindex="${!this.active || this.disabled ? "-1" : "0"}"><slot name="left" class="${cx(slots.left && "block pr-2", this.disabled ? "text-neutral-500" : "text-primary")}"></slot><slot class="${cx(this.disabled ? "text-neutral-500" : "text-primary")}"></slot><div part="active-tab-indicator" class="${cx(
       (!this.active || this.disabled) && "hidden",
       "absolute bottom-0 h-1 bg-accent",
       this.variant === "default" ? "w-full" : "w-3/4 group-hover:w-full transition-all duration-200 ease-in-out"

package/dist/chunks/{chunk.3LGDUVS4.js → chunk.LS4AX4SN.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.U5NFPAOX.js → chunk.MH53Q556.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.76ZNNLGN.js → chunk.MX7GY5XQ.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.7OHSCBBX.js → chunk.NVHRZE37.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.NM6QP6RJ.js → chunk.O37UUDLF.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.HPR3PWAE.js → chunk.QGX7W3RC.js}

@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.RNSJAVQE.js → chunk.QS7JZELX.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.56SNEGI4.js → chunk.RD6YNTHQ.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass,
   __spreadValues
@@ -62,8 +62,11 @@ var SdTabGroup = class extends SolidElement {
     });
   }
   disconnectedCallback() {
+    var _a;
     this.mutationObserver.disconnect();
-    this.resizeObserver.unobserve(this.nav);
+    if (this.nav) {
+      (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this.nav);
+    }
   }
   getAllTabs(options = { includeDisabled: true }) {
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');

package/dist/chunks/{chunk.DQPVSTUQ.js → chunk.RMWDQZ5A.js}

@@ -4,7 +4,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.UDZYWRPT.js";
+} from "./chunk.YZQTF7B4.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";