@solid-design-system/components 4.6.6 → 4.6.8

package/dist/chunks/{chunk.LLSVGPM2.js → chunk.3ORZT34X.js}

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

package/dist/chunks/chunk.3PS24RCT.js

@@ -0,0 +1,224 @@
+import {
+  LocalizeController
+} from "./chunk.YKM42GKF.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.TXYWAHFM.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/scrollable/scrollable.ts
+import { css, html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+import cx from "classix";
+var SdScrollable = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.orientation = "horizontal";
+    this.scrollbars = false;
+    this.buttons = false;
+    this.shadows = false;
+    this.inset = false;
+    this.step = 150;
+    this.canScroll = {
+      left: false,
+      right: false,
+      up: false,
+      down: false
+    };
+    this.isScrollHorizontalEnabled = false;
+    this.isScrollVerticalEnabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateScrollEnabledFlags();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.handleContainerScroll();
+    });
+    this.updateComplete.then(() => {
+      if (this.container) {
+        this.resizeObserver.observe(this.container);
+      }
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.container) {
+      this.resizeObserver.unobserve(this.container);
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("orientation") || changedProperties.has("buttons") || changedProperties.has("shadows")) {
+      this.updateScrollEnabledFlags();
+      this.handleContainerScroll();
+    }
+  }
+  updateScrollEnabledFlags() {
+    const dir = this.orientation;
+    this.isScrollHorizontalEnabled = dir === "horizontal" || dir === "auto";
+    this.isScrollVerticalEnabled = dir === "vertical" || dir === "auto";
+  }
+  get scrollButtons() {
+    return {
+      left: this.leftButton,
+      right: this.rightButton,
+      up: this.upButton,
+      down: this.downButton
+    };
+  }
+  handleContainerScroll() {
+    if (!this.container) {
+      return;
+    }
+    const canScrollLeft = this.isScrollHorizontalEnabled && this.container.scrollLeft > 0;
+    const canScrollRight = this.isScrollHorizontalEnabled && this.container.scrollLeft + this.container.clientWidth < this.container.scrollWidth - 1;
+    const canScrollUp = this.isScrollVerticalEnabled && this.container.scrollTop > 0;
+    const canScrollDown = this.isScrollVerticalEnabled && this.container.scrollTop + this.container.clientHeight < this.container.scrollHeight - 1;
+    this.canScroll = {
+      left: this.isScrollHorizontalEnabled && canScrollLeft,
+      right: this.isScrollHorizontalEnabled && canScrollRight,
+      up: this.isScrollVerticalEnabled && canScrollUp,
+      down: this.isScrollVerticalEnabled && canScrollDown
+    };
+    const startEventTriggered = canScrollLeft || canScrollUp;
+    const endEventTriggered = canScrollRight || canScrollDown;
+    if (startEventTriggered) {
+      this.dispatchEvent(new CustomEvent("start"));
+    }
+    if (endEventTriggered) {
+      this.dispatchEvent(new CustomEvent("end"));
+    }
+  }
+  handleScroll(direction, e) {
+    var _a, _b, _c;
+    const amount = ["left", "up"].includes(direction) ? -this.step : this.step;
+    const axis = ["left", "right"].includes(direction) ? "horizontal" : "vertical";
+    const towards = ["left", "up"].includes(direction) ? "start" : "end";
+    const isKeyboardTriggered = !["mouse", "touch"].includes((_a = e == null ? void 0 : e.pointerType) != null ? _a : "");
+    const scrollKey = axis === "horizontal" ? "left" : "top";
+    (_b = this.container) == null ? void 0 : _b.scrollBy({
+      behavior: "smooth",
+      [scrollKey]: amount
+    });
+    const eventName = `button-${direction}`;
+    this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true }));
+    const currentPosition = axis === "horizontal" ? this.container.scrollLeft : this.container.scrollTop;
+    const updatedPosition = currentPosition + amount;
+    const limit = axis === "horizontal" ? this.container.scrollWidth - this.container.clientWidth : this.container.scrollHeight - this.container.clientHeight;
+    const reachedStart = towards === "start" && updatedPosition <= 0;
+    const reachedEnd = towards === "end" && updatedPosition >= limit - 1;
+    if (!(reachedStart || reachedEnd)) {
+      const announcement = this.localize.term("scrolled");
+      this.announcementContainer.textContent = this.announcementContainer.textContent === announcement ? `${announcement}\u200B` : announcement;
+      return;
+    }
+    const clickedButton = this.scrollButtons[direction];
+    const oppositeButton = {
+      left: this.rightButton,
+      right: this.leftButton,
+      up: this.downButton,
+      down: this.upButton
+    }[direction];
+    const label = reachedStart ? `${this.localize.term("scrolled")}. ${this.localize.term("scrollToEnd")}` : `${this.localize.term("scrolled")}. ${this.localize.term("scrollToStart")}`;
+    (_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-icon")) == null ? void 0 : _c.setAttribute("label", label);
+    if (isKeyboardTriggered) {
+      oppositeButton == null ? void 0 : oppositeButton.focus();
+    } else {
+      clickedButton == null ? void 0 : clickedButton.blur();
+    }
+  }
+  handleButtonBlur(direction, e) {
+    var _a;
+    const scrollTo = ["left", "up"].includes(direction) ? "start" : "end";
+    const label = scrollTo === "start" ? this.localize.term("scrollToStart") : this.localize.term("scrollToEnd");
+    const button = e.target;
+    (_a = button.querySelector("sd-icon")) == null ? void 0 : _a.setAttribute("label", label);
+  }
+  render() {
+    const scrollButtonClasses = "relative p-0 border-0 bg-transparent cursor-pointer w-5 h-5 flex items-center justify-center sd-interactive rounded-md flex text-lg";
+    const scrollShadowClasses = "scroll-shadow absolute z-10 pointer-events-none";
+    return html`<div part="base" class="${cx(
+      "scroll-container flex overflow-hidden flex-1",
+      this.scrollbars ? "show-scrollbars" : "hide-scrollbars",
+      this.inset && "p-4",
+      {
+        horizontal: "scroll-horizontal flex-row whitespace-nowrap items-center overflow-x-scroll overflow-y-hidden",
+        vertical: "scroll-vertical justify-items-center overflow-y-scroll overflow-x-hidden",
+        auto: "scroll-auto overflow-auto"
+      }[this.orientation]
+    )}" @scroll="${this.handleContainerScroll}" tabindex="0"><div id="announcement-container" role="status" class="sr-only"></div><div part="scroll-content" class="flex-1"><slot></slot></div></div>${this.buttons ? html`${this.isScrollHorizontalEnabled ? html`<div part="button-left" class="${cx(
+      "absolute z-10 flex items-center justify-center top-0 left-0 h-full w-8",
+      !this.canScroll.left && "opacity-0 pointer-events-none"
+    )}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.left || void 0)}" tabindex="${ifDefined(!this.canScroll.left ? -1 : void 0)}" @click="${(e) => this.handleScroll("left", e)}" @blur="${(e) => this.handleButtonBlur("left", e)}"><slot name="icon-start"><sd-icon library="system" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-icon></slot></button></div><div part="button-right" class="${cx(
+      "absolute z-10 flex items-center justify-center top-0 right-0 h-full w-8",
+      !this.canScroll.right && "opacity-0 pointer-events-none"
+    )}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.right || void 0)}" tabindex="${ifDefined(!this.canScroll.right ? -1 : void 0)}" @click="${(e) => this.handleScroll("right", e)}" @blur="${(e) => this.handleButtonBlur("right", e)}"><slot name="icon-end"><sd-icon library="system" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-icon></slot></button></div>` : null} ${this.isScrollVerticalEnabled ? html`<div part="button-top" class="${cx(
+      "absolute z-10 flex items-center justify-center top-0 left-0 w-full h-8",
+      !this.canScroll.up && "opacity-0 pointer-events-none"
+    )}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.up || void 0)}" tabindex="${ifDefined(!this.canScroll.up ? -1 : void 0)}" @click="${(e) => this.handleScroll("up", e)}" @blur="${(e) => this.handleButtonBlur("up", e)}"><slot name="icon-start"><sd-icon library="system" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-icon></slot></button></div><div part="button-bottom" class="${cx(
+      "absolute z-10 flex items-center justify-center bottom-0 left-0 w-full h-8",
+      !this.canScroll.down && "opacity-0 pointer-events-none"
+    )}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.down || void 0)}" tabindex="${ifDefined(!this.canScroll.down ? -1 : void 0)}" @click="${(e) => this.handleScroll("down", e)}" @blur="${(e) => this.handleButtonBlur("down", e)}"><slot name="icon-end"><sd-icon library="system" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-icon></slot></button></div>` : null}` : null} ${this.shadows ? html`${this.isScrollHorizontalEnabled ? html`${this.canScroll.left ? html`<div part="shadow-left" class="${scrollShadowClasses} left top-0 left-0 w-[6px] h-full"></div>` : null} ${this.canScroll.right ? html`<div part="shadow-right" class="${scrollShadowClasses} right top-0 right-0 w-[6px] h-full"></div>` : null}` : null} ${this.isScrollVerticalEnabled ? html`${this.canScroll.up ? html`<div part="shadow-top" class="${scrollShadowClasses} top top-0 left-0 w-full h-[6px]"></div>` : null} ${this.canScroll.down ? html`<div part="shadow-bottom" class="${scrollShadowClasses} bottom bottom-0 left-0 w-full h-[6px]"></div>` : null}` : null}` : null}`;
+  }
+};
+SdScrollable.styles = [
+  ...SolidElement.styles,
+  css`:host{--gradient-color:hsla(0,0%,100%,0);--gradient:var(--gradient-color) 0%,#fff 80%,#fff 100%;display:flex;overflow:hidden;position:relative}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-border-radius-sm,.125rem)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1,.25rem);width:var(--sd-spacing-1,.25rem)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-right]{background:linear-gradient(90deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-top]{background:linear-gradient(0deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-bottom]{background:linear-gradient(180deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}.sd-icon--top{align-self:flex-start}.sd-icon--down{align-self:flex-end}`
+];
+__decorateClass([
+  query('[part="button-right"] button')
+], SdScrollable.prototype, "rightButton", 2);
+__decorateClass([
+  query('[part="button-left"] button')
+], SdScrollable.prototype, "leftButton", 2);
+__decorateClass([
+  query('[part="button-bottom"] button')
+], SdScrollable.prototype, "downButton", 2);
+__decorateClass([
+  query('[part="button-top"] button')
+], SdScrollable.prototype, "upButton", 2);
+__decorateClass([
+  query(".scroll-container")
+], SdScrollable.prototype, "container", 2);
+__decorateClass([
+  query("#announcement-container")
+], SdScrollable.prototype, "announcementContainer", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SdScrollable.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdScrollable.prototype, "scrollbars", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdScrollable.prototype, "buttons", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdScrollable.prototype, "shadows", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdScrollable.prototype, "inset", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], SdScrollable.prototype, "step", 2);
+__decorateClass([
+  state()
+], SdScrollable.prototype, "canScroll", 2);
+__decorateClass([
+  state()
+], SdScrollable.prototype, "isScrollHorizontalEnabled", 2);
+__decorateClass([
+  state()
+], SdScrollable.prototype, "isScrollVerticalEnabled", 2);
+SdScrollable = __decorateClass([
+  customElement("sd-scrollable")
+], SdScrollable);
+
+export {
+  SdScrollable
+};

package/dist/chunks/{chunk.BZQIZT43.js → chunk.6VCNAVH4.js}

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

package/dist/chunks/{chunk.EBZNAZNX.js → chunk.6WU4LF5Z.js}

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

package/dist/chunks/{chunk.CSBLXELN.js → chunk.AOWIHO7B.js}

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

package/dist/chunks/{chunk.CAJZPZNE.js → chunk.CKKINYND.js}

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

package/dist/chunks/{chunk.VFCTC43F.js → chunk.CTZX4JSW.js}

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

package/dist/chunks/{chunk.WQNN2PQR.js → chunk.DIVJNSSG.js}

@@ -1,6 +1,6 @@
 import {
   SdDivider
-} from "./chunk.I7E7S32P.js";
+} from "./chunk.EZKDJFKX.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
@@ -10,7 +10,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.4XX7HM5J.js → chunk.EJMQUF44.js}

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

package/dist/chunks/{chunk.I7E7S32P.js → chunk.EZKDJFKX.js}

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

package/dist/chunks/{chunk.CX3GTFZI.js → chunk.G4WRYNRZ.js}

@@ -37,6 +37,7 @@ var translation = {
   remove: "Remove",
   removed: (name) => `${name} removed`,
   resize: "Resize",
+  scrolled: "Scrolled",
   scrollToEnd: "Scroll to end",
   scrollToStart: "Scroll to start",
   search: "Search",

package/dist/chunks/{chunk.VFXEX6KC.js → chunk.HP5TMUCE.js}

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

package/dist/chunks/{chunk.P7ANANFF.js → chunk.I2AG6P7E.js}

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

package/dist/chunks/{chunk.AE7KY76S.js → chunk.IBTGZ65I.js}

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

package/dist/chunks/{chunk.I4XTOEGU.js → chunk.ILPAMBSC.js}

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

package/dist/chunks/{chunk.KYNXDWDX.js → chunk.ISZXPWVC.js}

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

package/dist/chunks/{chunk.HBJMJ2WP.js → chunk.J67NOH2J.js}

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

package/dist/chunks/{chunk.PTGF6MPV.js → chunk.JEZFJKCR.js}

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

package/dist/chunks/{chunk.Y3TGDH7A.js → chunk.L4ICI7XS.js}

@@ -37,6 +37,7 @@ var translation = {
   remove: "Entfernen",
   removed: (name) => `${name} entfernt`,
   resize: "Gr\xF6\xDFe \xE4ndern",
+  scrolled: "Gescrollt",
   scrollToEnd: "Zum Ende scrollen",
   scrollToStart: "Zum Anfang scrollen",
   search: "Suchen",

package/dist/chunks/{chunk.J3RQA6TF.js → chunk.LA5LTAEA.js}

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

package/dist/chunks/{chunk.IZ4Z4LUM.js → chunk.LGYGD6SX.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -26,6 +26,7 @@ var SdTab = class extends SolidElement {
     this.variant = "default";
     this.active = false;
     this.disabled = false;
+    this.visuallyDisabled = false;
     this.panel = "";
   }
   connectedCallback() {
@@ -36,7 +37,8 @@ var SdTab = class extends SolidElement {
     this.setAttribute("aria-selected", this.active ? "true" : "false");
   }
   handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    const isDisabled = this.disabled || this.visuallyDisabled;
+    this.setAttribute("aria-disabled", isDisabled ? "true" : "false");
   }
   /** Sets focus to the tab. */
   focus(options) {
@@ -52,17 +54,23 @@ var SdTab = class extends SolidElement {
       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",
+      "inline-flex justify-center min-w-max items-center h-12 px-3 leading-none select-none cursor-pointer group relative focus-visible:focus-outline outline-2 !-outline-offset-2",
       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.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.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:bg-neutral-200"
+    )}" 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><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"
     )}"></div><div part="hover-bottom-border" class="${cx(
       !this.active && !this.disabled && "absolute w-full h-0.25 bottom-0 border-b border-neutral-400 invisible group-hover:visible"
-    )}"></div></div>`;
+    )}"></div></div></div>`;
   }
 };
 SdTab.styles = [
@@ -81,6 +89,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdTab.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
+], SdTab.prototype, "visuallyDisabled", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], SdTab.prototype, "panel", 2);
@@ -88,7 +99,7 @@ __decorateClass([
   watch("active")
 ], SdTab.prototype, "handleActiveChange", 1);
 __decorateClass([
-  watch("disabled")
+  watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
   customElement("sd-tab")

package/dist/chunks/{chunk.QSTI27SQ.js → chunk.ML4MIKYQ.js}

@@ -24,7 +24,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.FGRAKZHX.js → chunk.O3TREWCC.js}

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

package/dist/chunks/{chunk.BRX25BL4.js → chunk.OJPVJA2S.js}

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

package/dist/chunks/{chunk.EUSRDE4F.js → chunk.OX2URSR7.js}

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

package/dist/chunks/{chunk.PJRFKYNK.js → chunk.PMZLGJKG.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass,
   __spreadValues
@@ -70,8 +70,8 @@ var SdTabGroup = class extends SolidElement {
   }
   getAllTabs(options = { includeDisabled: true }) {
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
-    return [...slot.assignedElements()].filter((el) => {
-      return options.includeDisabled ? el.tagName.toLowerCase() === "sd-tab" : el.tagName.toLowerCase() === "sd-tab" && !el.disabled;
+    return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-tab" ? el : el.querySelector("sd-tab")).filter((el) => {
+      return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-tab" : el.tagName.toLowerCase() === "sd-tab" && !el.disabled;
     });
   }
   getAllPanels() {
@@ -163,7 +163,7 @@ var SdTabGroup = class extends SolidElement {
       emitEvents: true,
       scrollBehavior: "auto"
     }, options);
-    if (tab !== this.activeTab && !tab.disabled) {
+    if (tab !== this.activeTab && !tab.disabled && !tab.visuallyDisabled) {
       const previousTab = this.activeTab;
       this.activeTab = tab;
       this.tabs.map((el) => el.active = el === this.activeTab);

package/dist/chunks/{chunk.VUARIZJD.js → chunk.PQNIAIWQ.js}

@@ -1,6 +1,6 @@
 import {
   SdRadio
-} from "./chunk.Q6EB7NKM.js";
+} from "./chunk.VSY4EUFN.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -9,7 +9,7 @@ import {
 } from "./chunk.KVKRZJS7.js";
 import {
   SdButtonGroup
-} from "./chunk.VFXEX6KC.js";
+} from "./chunk.HP5TMUCE.js";
 import {
   watch
 } from "./chunk.X2OQMWGY.js";
@@ -19,7 +19,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.AKUPBYMC.js → chunk.PS2S6VDP.js}

@@ -12,7 +12,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.NGVEOWER.js → chunk.PTZRO2RN.js}

@@ -1,12 +1,12 @@
 import {
   SdAccordion
-} from "./chunk.IV4SON4G.js";
+} from "./chunk.T4ZCLZI2.js";
 import {
   setDefaultAnimation
 } from "./chunk.N4LHE3QK.js";
 import {
   customElement
-} from "./chunk.O27A57VP.js";
+} from "./chunk.TXYWAHFM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.5EXPOZYT.js → chunk.Q7SDLREI.js}

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

package/dist/chunks/{chunk.YZAMSOBJ.js → chunk.R24LPR7A.js}

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

package/dist/chunks/{chunk.LVUPM2UK.js → chunk.SWZ7YNPJ.js}

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