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

package/dist/chunks/chunk.4QKRGAOL.js

@@ -0,0 +1,299 @@
+import {
+  FormControlController,
+  validValidityState
+} from "./chunk.KVKRZJS7.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
+import {
+  HasSlotController
+} from "./chunk.YEZS5ZR2.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/button/button.ts
+import { css } from "lit";
+import { html, literal } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+import cx from "classix";
+var SdButton = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      form: (input) => {
+        if (input.hasAttribute("form")) {
+          const doc = input.getRootNode();
+          const formId = input.getAttribute("form");
+          return doc.getElementById(formId);
+        }
+        return input.closest("form");
+      }
+    });
+    this.hasSlotController = new HasSlotController(this, "[default]", "icon-left", "icon-right");
+    this.invalid = false;
+    this.title = "";
+    this.variant = "primary";
+    this.inverted = false;
+    this.size = "lg";
+    this.disabled = false;
+    this.loading = false;
+    this.type = "button";
+    this.name = "";
+    this.value = "";
+    this.href = "";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    if (this.isButton()) {
+      return this.button.validity;
+    }
+    return validValidityState;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    if (this.isButton()) {
+      return this.button.validationMessage;
+    }
+    return "";
+  }
+  firstUpdated() {
+    if (this.isButton()) {
+      this.formControlController.updateValidity();
+    }
+  }
+  handleBlur() {
+    this.emit("sd-blur");
+  }
+  handleFocus() {
+    this.emit("sd-focus");
+  }
+  handleClick(event) {
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (this.type === "submit") {
+      this.formControlController.submit(this);
+    }
+    if (this.type === "reset") {
+      this.formControlController.reset(this);
+    }
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  isButton() {
+    return this.href ? false : true;
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleDisabledChange() {
+    if (this.isButton()) {
+      this.formControlController.setValidity(this.disabled);
+    }
+  }
+  /** Simulates a click on the button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the button. */
+  blur() {
+    this.button.blur();
+  }
+  /** Checks for validity but does not show the browser's validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    if (this.isButton()) {
+      return this.button.checkValidity();
+    }
+    return true;
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (this.isButton()) {
+      return this.button.reportValidity();
+    }
+    return true;
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    if (this.isButton()) {
+      this.button.setCustomValidity(message);
+      this.formControlController.updateValidity();
+    }
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? literal`a` : literal`button`;
+    const slots = {
+      label: this.hasSlotController.test("[default]"),
+      "icon-left": this.hasSlotController.test("icon-left"),
+      "icon-right": this.hasSlotController.test("icon-right"),
+      "icon-only": this._iconsInDefaultSlot.length > 0
+    };
+    return html`<${tag} part="base" class="${cx(
+      `font-md leading-[calc(var(--tw-varspacing)-2px)] no-underline
+        w-full h-varspacing whitespace-nowrap align-middle inline-flex items-stretch justify-center
+        border transition-colors duration-200 ease-in-out rounded-default
+        select-none cursor-[inherit]`,
+      !this.inverted ? "focus-visible:focus-outline" : "focus-visible:focus-outline-inverted",
+      this.loading && "relative cursor-wait",
+      this.disabled && "cursor-not-allowed",
+      slots["icon-only"] && "px-0 w-varspacing",
+      /**
+       * Anatomy
+       * */
+      {
+        /* sizes, fonts */
+        sm: "text-sm varspacing-8 px-4",
+        md: "text-base varspacing-10 px-4",
+        lg: "text-base varspacing-12 px-4"
+      }[this.size],
+      {
+        /* variants */
+        primary: !this.inverted ? `text-white bg-primary border-transparent
+          hover:text-primary-100 hover:bg-primary-500
+          active:text-primary-200 active:bg-primary-800
+          disabled:bg-neutral-500` : `text-primary bg-white border-transparent
+          hover:text-primary-500 hover:bg-primary-100
+          active:text-primary-800 active:bg-primary-200
+          disabled:bg-neutral-600 disabled:text-white`,
+        secondary: !this.inverted ? `text-primary border-primary
+          hover:text-primary-500 hover:border-primary-500 hover:bg-primary-100
+          active:text-primary-800 active:border-primary-800 active:bg-primary-200
+          disabled:text-neutral-500 disabled:border-neutral-500` : `text-white border-white
+          hover:text-primary-100 hover:bg-primary-500 hover:border-primary-100
+          active:text-primary-200 active:bg-primary-800 active:border-primary-200
+          disabled:text-neutral-600 disabled:border-neutral-600`,
+        tertiary: !this.inverted ? `text-primary border-transparent
+          hover:text-primary-500 hover:bg-primary-100
+          active:text-primary-800 active:bg-primary-200
+          disabled:text-neutral-500` : `text-white border-transparent
+          hover:text-primary-100 hover:bg-primary-500
+          active:text-primary-200 active:bg-primary-800
+          disabled:text-neutral-600`,
+        cta: `text-white bg-accent-500 border-transparent
+          hover:bg-accent-550
+          active:bg-accent-700
+          ${!this.inverted ? "disabled:bg-neutral-500" : "disabled:bg-neutral-600"} disabled:text-white`
+      }[this.variant]
+    )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${cx(
+      "flex flex-auto items-center pointer-events-none",
+      slots["icon-only"] && "hidden",
+      this.loading && "invisible",
+      slots["icon-left"] && {
+        sm: "mr-1",
+        md: "mr-2",
+        lg: "mr-2"
+      }[this.size]
+    )}"></slot><slot part="label" id="content" class="${cx(
+      slots["icon-only"] ? "flex flex-auto items-center pointer-events-none" : "inline-block",
+      this.loading && "invisible"
+    )}"></slot><slot name="icon-right" part="icon-right" class="${cx(
+      "flex flex-auto items-center pointer-events-none",
+      this.loading && "invisible",
+      slots["icon-only"] && "hidden",
+      slots["icon-right"] && {
+        sm: "ml-1",
+        md: "ml-2",
+        lg: "ml-2"
+      }[this.size]
+    )}"></slot>${this.loading ? html`<sd-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-spinner>` : ""}</${tag}>`;
+  }
+};
+/**
+ * Inherits global stylesheet including TailwindCSS
+ */
+SdButton.styles = [
+  ...SolidElement.styles,
+  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto)}sd-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-icon),sd-spinner{font-size:calc(var(--tw-varspacing)/2)}`
+];
+__decorateClass([
+  query("a, button")
+], SdButton.prototype, "button", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "sd-icon" })
+], SdButton.prototype, "_iconsInDefaultSlot", 2);
+__decorateClass([
+  state()
+], SdButton.prototype, "invalid", 2);
+__decorateClass([
+  property()
+], SdButton.prototype, "title", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdButton.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdButton.prototype, "inverted", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdButton.prototype, "loading", 2);
+__decorateClass([
+  property()
+], SdButton.prototype, "type", 2);
+__decorateClass([
+  property()
+], SdButton.prototype, "name", 2);
+__decorateClass([
+  property()
+], SdButton.prototype, "value", 2);
+__decorateClass([
+  property()
+], SdButton.prototype, "href", 2);
+__decorateClass([
+  property()
+], SdButton.prototype, "target", 2);
+__decorateClass([
+  property()
+], SdButton.prototype, "download", 2);
+__decorateClass([
+  property()
+], SdButton.prototype, "form", 2);
+__decorateClass([
+  property({ attribute: "formaction" })
+], SdButton.prototype, "formAction", 2);
+__decorateClass([
+  property({ attribute: "formenctype" })
+], SdButton.prototype, "formEnctype", 2);
+__decorateClass([
+  property({ attribute: "formmethod" })
+], SdButton.prototype, "formMethod", 2);
+__decorateClass([
+  property({ attribute: "formnovalidate", type: Boolean })
+], SdButton.prototype, "formNoValidate", 2);
+__decorateClass([
+  property({ attribute: "formtarget" })
+], SdButton.prototype, "formTarget", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SdButton.prototype, "handleDisabledChange", 1);
+SdButton = __decorateClass([
+  customElement("sd-button")
+], SdButton);
+
+export {
+  SdButton
+};

package/dist/chunks/chunk.4WYIZLVF.js

@@ -0,0 +1,68 @@
+import {
+  SdDivider
+} from "./chunk.JIKTGTDS.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/optgroup/optgroup.ts
+import { css } from "lit";
+import { html } from "lit/static-html.js";
+import { property, query } from "lit/decorators.js";
+import cx from "classix";
+var SdOptgroup = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.label = "";
+  }
+  /**
+   * Syncs the disabled prop for all slotted sd-options when it is triggered
+   */
+  handleDisableOptions() {
+    const { disabled } = this;
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-option").forEach((opt) => {
+      opt.disabled = disabled;
+    });
+  }
+  handleDisabledChange() {
+    this.handleDisableOptions();
+  }
+  render() {
+    const { disabled } = this;
+    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-divider id="divider" class="pt-2 pb-4" part="divider"></sd-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="group" part="options"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
+  }
+};
+SdOptgroup.dependencies = {
+  "sd-divider": SdDivider
+};
+SdOptgroup.styles = [
+  ...SolidElement.styles,
+  css`:host{--display-divider:block}#divider{display:var(--display-divider)}`
+];
+__decorateClass([
+  query("slot:not([name])")
+], SdOptgroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SdOptgroup.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], SdOptgroup.prototype, "label", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SdOptgroup.prototype, "handleDisabledChange", 1);
+SdOptgroup = __decorateClass([
+  customElement("sd-optgroup")
+], SdOptgroup);
+
+export {
+  SdOptgroup
+};

package/dist/chunks/chunk.56SNEGI4.js

@@ -0,0 +1,249 @@
+import {
+  scrollIntoView
+} from "./chunk.WDWV53JP.js";
+import {
+  LocalizeController
+} from "./chunk.YKM42GKF.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass,
+  __spreadValues
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/tab-group/tab-group.ts
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import cx from "classix";
+var SdTabGroup = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.tabs = [];
+    this.panels = [];
+    this.hasScrollControls = false;
+    this.variant = "default";
+    this.activation = "auto";
+  }
+  connectedCallback() {
+    const whenAllDefined = Promise.all([
+      customElements.whenDefined("sd-tab"),
+      customElements.whenDefined("sd-tab-panel")
+    ]);
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateScrollControls();
+    });
+    this.mutationObserver = new MutationObserver((mutations) => {
+      if (mutations.some((m) => !["aria-labelledby", "aria-controls"].includes(m.attributeName))) {
+        setTimeout(() => this.setAriaLabels());
+      }
+      if (mutations.some((m) => m.attributeName === "disabled")) {
+        this.syncTabsAndPanels();
+      }
+    });
+    this.updateComplete.then(() => {
+      this.syncTabsAndPanels();
+      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
+      this.resizeObserver.observe(this.nav);
+      whenAllDefined.then(() => {
+        const intersectionObserver = new IntersectionObserver((entries, observer) => {
+          var _a;
+          if (entries[0].intersectionRatio > 0) {
+            this.setAriaLabels();
+            this.setActiveTab((_a = this.activeTab) != null ? _a : this.tabs[0], { emitEvents: false });
+            observer.unobserve(entries[0].target);
+          }
+        });
+        intersectionObserver.observe(this.tabGroup);
+      });
+    });
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    this.resizeObserver.unobserve(this.nav);
+  }
+  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;
+    });
+  }
+  getAllPanels() {
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-tab-panel");
+  }
+  getActiveTab() {
+    return this.tabs.find((t) => t.matches(":focus"));
+  }
+  handleClick(event) {
+    const target = event.target;
+    const tab = target.closest("sd-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-tab-group");
+    if (tabGroup !== this) {
+      return;
+    }
+    if (tab !== null) {
+      this.setActiveTab(tab, { scrollBehavior: "smooth" });
+    }
+  }
+  handleKeyDown(event) {
+    const target = event.target;
+    const tab = target.closest("sd-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-tab-group");
+    if (tabGroup !== this) {
+      return;
+    }
+    if (["Enter", " "].includes(event.key)) {
+      if (tab !== null) {
+        this.setActiveTab(tab, { scrollBehavior: "smooth" });
+        event.preventDefault();
+      }
+    }
+    if (["Tab"].includes(event.key)) {
+      const index = this.tabs.indexOf(this.getActiveTab());
+      if (tab !== null) {
+        scrollIntoView(this.tabs[index + 1], this.nav, "horizontal");
+      }
+    }
+    if (["Shift", "Tab"].includes(event.key)) {
+      const index = this.tabs.indexOf(this.getActiveTab());
+      if (tab !== null) {
+        scrollIntoView(this.tabs[index - 1], this.nav, "horizontal");
+      }
+    }
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+      const activeEl = this.tabs.find((t) => t.matches(":focus"));
+      const isRtl = this.localize.dir() === "rtl";
+      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-tab") {
+        let index = this.tabs.indexOf(activeEl);
+        if (event.key === "Home") {
+          index = 0;
+        } else if (event.key === "End") {
+          index = this.tabs.length - 1;
+        } else if (event.key === (isRtl ? "ArrowRight" : "ArrowLeft") || event.key === "ArrowUp") {
+          index--;
+        } else if (event.key === (isRtl ? "ArrowLeft" : "ArrowRight") || event.key === "ArrowDown") {
+          index++;
+        }
+        if (index < 0) {
+          index = this.tabs.length - 1;
+        }
+        if (index > this.tabs.length - 1) {
+          index = 0;
+        }
+        this.tabs[index].focus({ preventScroll: true });
+        if (this.activation === "auto") {
+          this.setActiveTab(this.tabs[index], { scrollBehavior: "smooth" });
+        }
+        scrollIntoView(this.tabs[index], this.nav, "horizontal");
+        event.preventDefault();
+      }
+    }
+  }
+  handleScrollToStart() {
+    this.nav.scroll({
+      left: this.localize.dir() === "rtl" ? this.nav.scrollLeft + this.nav.clientWidth : this.nav.scrollLeft - this.nav.clientWidth,
+      behavior: "smooth"
+    });
+  }
+  handleScrollToEnd() {
+    this.nav.scroll({
+      left: this.localize.dir() === "rtl" ? this.nav.scrollLeft - this.nav.clientWidth : this.nav.scrollLeft + this.nav.clientWidth,
+      behavior: "smooth"
+    });
+  }
+  /** Sets the active tab and panel. */
+  setActiveTab(tab, options) {
+    options = __spreadValues({
+      emitEvents: true,
+      scrollBehavior: "auto"
+    }, options);
+    if (tab !== this.activeTab && !tab.disabled) {
+      const previousTab = this.activeTab;
+      this.activeTab = tab;
+      this.tabs.map((el) => el.active = el === this.activeTab);
+      this.panels.map((el) => {
+        var _a;
+        return el.active = el.name === ((_a = this.activeTab) == null ? void 0 : _a.panel);
+      });
+      scrollIntoView(this.activeTab, this.nav, "horizontal", options.scrollBehavior);
+      if (options.emitEvents) {
+        if (previousTab) {
+          this.emit("sd-tab-hide", { detail: { name: previousTab.panel } });
+        }
+        this.emit("sd-tab-show", { detail: { name: this.activeTab.panel } });
+      }
+    }
+  }
+  setAriaLabels() {
+    this.tabs.forEach((tab) => {
+      const panel = this.panels.find((el) => el.name === tab.panel);
+      if (panel) {
+        tab.setAttribute("aria-controls", panel.getAttribute("id"));
+      }
+    });
+  }
+  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.
+  syncTabsAndPanels() {
+    this.tabs = this.getAllTabs({ includeDisabled: false });
+    this.panels = this.getAllPanels();
+    this.panels.forEach((panel) => {
+      panel.tabIndex = 0;
+    });
+    this.updateComplete.then(() => this.updateScrollControls());
+    if (this.tabs.length !== 0 && this.tabs[0].variant === "container") {
+      this.variant = "container";
+    }
+  }
+  updateScrollControls() {
+    this.hasScrollControls = this.nav.scrollWidth > this.nav.clientWidth;
+  }
+  /** Shows the specified tab panel. */
+  show(panel) {
+    const tab = this.tabs.find((el) => el.panel === panel);
+    if (tab) {
+      this.setActiveTab(tab, { scrollBehavior: "smooth" });
+    }
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    return html`<div part="base" class="${cx("flex flex-col rounded-none")}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}"><div part="nav" class="${cx(this.hasScrollControls && "relative py-0 px-12")}">${this.hasScrollControls ? html`<button part="scroll-button--start" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
+      "sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",
+      this.localize.dir() === "rtl" && "left-auto right-0"
+    )}" @click="${this.handleScrollToStart}"><sd-icon library="system" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist"><div part="separation" class="w-full border-[0.25px] border-neutral-400 absolute bottom-0"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
+      "sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",
+      this.localize.dir() === "rtl" && "right-auto left-0"
+    )}" @click="${this.handleScrollToEnd}"><sd-icon library="system" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
+  }
+};
+SdTabGroup.styles = [
+  ...SolidElement.styles,
+  css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}:focus-within::slotted(sd-tab-panel){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}::slotted(sd-tab-panel){--padding:1rem 0}`
+];
+__decorateClass([
+  query("[part=base]")
+], SdTabGroup.prototype, "tabGroup", 2);
+__decorateClass([
+  query("[part=body]")
+], SdTabGroup.prototype, "body", 2);
+__decorateClass([
+  query("[part=scroll-container]")
+], SdTabGroup.prototype, "nav", 2);
+__decorateClass([
+  state()
+], SdTabGroup.prototype, "hasScrollControls", 2);
+__decorateClass([
+  state()
+], SdTabGroup.prototype, "variant", 2);
+__decorateClass([
+  property()
+], SdTabGroup.prototype, "activation", 2);
+SdTabGroup = __decorateClass([
+  customElement("sd-tab-group")
+], SdTabGroup);
+
+export {
+  SdTabGroup
+};