@statistikzh/leu 0.27.0 → 0.28.0

package/dist/Popup.d.ts

@@ -1,2 +1,2 @@
-import { n as VirtualElement, t as LeuPopup } from "./Popup-Btgm2a3D.js";
+import { n as VirtualElement, t as LeuPopup } from "./Popup-B5iDSLIO.js";
 export { LeuPopup, VirtualElement };

package/dist/Popup.js

@@ -1,3 +1,3 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuPopup } from "./Popup-8jhVy8gB.js";
+import "./LeuElement-DQI8cqZV.js";
+import { t as LeuPopup } from "./Popup-nJrJHGSy.js";
 export { LeuPopup };

package/dist/{ProgressBar-CG0_lHfS.js → ProgressBar-Dmq9veqU.js}

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
 import { css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";

package/dist/ProgressBar.d.ts

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuElement } from "./LeuElement-DK1jntuu.js";
 import * as lit_html0 from "lit-html";
 
 //#region src/components/progress-bar/ProgressBar.d.ts

package/dist/ProgressBar.js

@@ -1,3 +1,3 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuProgressBar } from "./ProgressBar-CG0_lHfS.js";
+import "./LeuElement-DQI8cqZV.js";
+import { t as LeuProgressBar } from "./ProgressBar-Dmq9veqU.js";
 export { LeuProgressBar };

package/dist/{Radio-DG3xqP3s.js → Radio-W5ck_IJI.js}

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";

package/dist/Radio.d.ts

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuElement } from "./LeuElement-DK1jntuu.js";
 import * as lit_html0 from "lit-html";
 
 //#region src/components/radio/Radio.d.ts

package/dist/Radio.js

@@ -1,3 +1,3 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuRadio } from "./Radio-DG3xqP3s.js";
+import "./LeuElement-DQI8cqZV.js";
+import { t as LeuRadio } from "./Radio-W5ck_IJI.js";
 export { LeuRadio };

package/dist/{RadioGroup-BKCp9ICX.js → RadioGroup-De5x2YCO.js}

@@ -1,6 +1,6 @@
-import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
-import { t as LeuRadio } from "./Radio-DG3xqP3s.js";
+import { t as LeuRadio } from "./Radio-W5ck_IJI.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";

package/dist/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuElement } from "./LeuElement-DK1jntuu.js";
 import * as lit_html0 from "lit-html";
 
 //#region src/components/radio/RadioGroup.d.ts

package/dist/RadioGroup.js

@@ -1,4 +1,4 @@
-import "./LeuElement-k4RjIeoG.js";
-import "./Radio-DG3xqP3s.js";
-import { t as LeuRadioGroup } from "./RadioGroup-BKCp9ICX.js";
+import "./LeuElement-DQI8cqZV.js";
+import "./Radio-W5ck_IJI.js";
+import { t as LeuRadioGroup } from "./RadioGroup-De5x2YCO.js";
 export { LeuRadioGroup };

package/dist/{Range-7LrESv4K.js → Range-NCdfDkeD.js}

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
 import { n as isNumber, t as clamp } from "./utils-hfk5Nwy8.js";
 import { css, html, nothing } from "lit";

package/dist/Range.d.ts

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuElement } from "./LeuElement-DK1jntuu.js";
 import { PropertyValues, nothing } from "lit";
 import * as lit_html0 from "lit-html";
 

package/dist/Range.js

@@ -1,3 +1,3 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuRange } from "./Range-7LrESv4K.js";
+import "./LeuElement-DQI8cqZV.js";
+import { t as LeuRange } from "./Range-NCdfDkeD.js";
 export { LeuRange };

package/dist/{ScrollTop-CJJsfniA.js → ScrollTop-DwcNIKmN.js}

@@ -1,7 +1,7 @@
-import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
-import { t as LeuIcon } from "./Icon-CbZXpyHU.js";
-import { t as LeuButton } from "./Button-BSyDL_cV.js";
+import { t as LeuIcon } from "./Icon-D83qesg5.js";
+import { t as LeuButton } from "./Button-DyNVOHCd.js";
 import { r as throttle } from "./utils-hfk5Nwy8.js";
 import { css, html } from "lit";
 import { state } from "lit/decorators.js";

package/dist/ScrollTop.d.ts

@@ -1,6 +1,6 @@
-import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
-import { t as LeuIcon } from "./Icon-Op80LrrO.js";
-import { t as LeuButton } from "./Button-BgNUxmo_.js";
+import { t as LeuElement } from "./LeuElement-DK1jntuu.js";
+import { t as LeuIcon } from "./Icon-CUfh3eb3.js";
+import { t as LeuButton } from "./Button-DcuvEVkC.js";
 import * as lit_html0 from "lit-html";
 
 //#region src/components/scroll-top/ScrollTop.d.ts

package/dist/ScrollTop.js

@@ -1,7 +1,7 @@
-import "./LeuElement-k4RjIeoG.js";
-import "./Icon-CbZXpyHU.js";
-import "./Spinner-VhKfzI3Q.js";
-import "./Button-BSyDL_cV.js";
+import "./LeuElement-DQI8cqZV.js";
+import "./Icon-D83qesg5.js";
+import "./Spinner-BBiVZxFH.js";
+import "./Button-DyNVOHCd.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import { t as LeuScrollTop } from "./ScrollTop-CJJsfniA.js";
+import { t as LeuScrollTop } from "./ScrollTop-DwcNIKmN.js";
 export { LeuScrollTop };

package/dist/{Select-CxEDXIBn.js → Select-Bpicra9q.js}

@@ -1,13 +1,13 @@
-import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.js";
 import { t as __decorate } from "./decorate-DwpAc4D0.js";
-import { t as LeuIcon } from "./Icon-CbZXpyHU.js";
+import { t as LeuIcon } from "./Icon-D83qesg5.js";
 import { t as HasSlotController } from "./hasSlotController-DSBCVzPD.js";
-import { t as LeuButton } from "./Button-BSyDL_cV.js";
+import { t as LeuButton } from "./Button-DyNVOHCd.js";
 import { t as FormAssociatedMixin } from "./FormAssociatedMixin-DLPvFtbT.js";
-import { t as LeuMenuItem } from "./MenuItem-Cs3KFhJm.js";
-import { t as LeuMenu } from "./Menu-Cu8eIF1T.js";
-import { t as LeuPopup } from "./Popup-8jhVy8gB.js";
-import { t as LeuInput } from "./Input-DBXX7ev8.js";
+import { t as LeuMenuItem } from "./MenuItem-DCttylRO.js";
+import { t as LeuMenu } from "./Menu-DRU1LiMM.js";
+import { t as LeuPopup } from "./Popup-nJrJHGSy.js";
+import { t as LeuInput } from "./Input-D7zS50oz.js";
 import { css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -509,7 +509,6 @@ var LeuSelect = class extends FormAssociatedMixin(LeuElement) {
             type="button"
             class="apply-button"
             @click=${this._closeDropdown}
-            fluid
             >Anwenden</leu-button
           >
         </div>

package/dist/Select.d.ts

@@ -1,12 +1,12 @@
-import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
-import { t as FormAssociatedMixinType } from "./FormAssociatedMixin-Cc74LjbC.js";
-import { t as LeuIcon } from "./Icon-Op80LrrO.js";
-import { t as LeuButton } from "./Button-BgNUxmo_.js";
-import { t as HasSlotController } from "./hasSlotController-DWPyZ52b.js";
-import { t as LeuMenuItem } from "./MenuItem-QcgnRk_7.js";
-import { t as LeuMenu } from "./Menu-CQdx1ef3.js";
-import { t as LeuPopup } from "./Popup-Btgm2a3D.js";
-import { t as LeuInput } from "./Input-CeaAOB4p.js";
+import { t as LeuElement } from "./LeuElement-DK1jntuu.js";
+import { t as FormAssociatedMixinType } from "./FormAssociatedMixin-Cw7LsSUE.js";
+import { t as LeuIcon } from "./Icon-CUfh3eb3.js";
+import { t as LeuButton } from "./Button-DcuvEVkC.js";
+import { t as HasSlotController } from "./hasSlotController-BjKyhJm-.js";
+import { t as LeuMenuItem } from "./MenuItem-LY4TRIho.js";
+import { t as LeuMenu } from "./Menu-Z2b7dsB5.js";
+import { t as LeuPopup } from "./Popup-B5iDSLIO.js";
+import { t as LeuInput } from "./Input-fEiQvGDF.js";
 import { PropertyValues, nothing } from "lit";
 import * as lit_html0 from "lit-html";
 import * as lit_html_directives_ref_js0 from "lit-html/directives/ref.js";

package/dist/Select.js

@@ -1,11 +1,11 @@
-import "./LeuElement-k4RjIeoG.js";
-import "./Icon-CbZXpyHU.js";
-import "./Spinner-VhKfzI3Q.js";
-import "./Button-BSyDL_cV.js";
+import "./LeuElement-DQI8cqZV.js";
+import "./Icon-D83qesg5.js";
+import "./Spinner-BBiVZxFH.js";
+import "./Button-DyNVOHCd.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import "./MenuItem-Cs3KFhJm.js";
-import "./Menu-Cu8eIF1T.js";
-import "./Popup-8jhVy8gB.js";
-import "./Input-DBXX7ev8.js";
-import { t as LeuSelect } from "./Select-CxEDXIBn.js";
+import "./MenuItem-DCttylRO.js";
+import "./Menu-DRU1LiMM.js";
+import "./Popup-nJrJHGSy.js";
+import "./Input-D7zS50oz.js";
+import { t as LeuSelect } from "./Select-Bpicra9q.js";
 export { LeuSelect };

package/dist/{Spinner-VhKfzI3Q.js → Spinner-BBiVZxFH.js}

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-k4RjIeoG.js";
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.js";
 import { css, html } from "lit";
 //#region src/components/spinner/spinner.css?inline
 var spinner_default = css`@keyframes leu-spinner-rotate {

package/dist/{Spinner-CrM1enM0.d.ts → Spinner-DHYaX6-Y.d.ts}

@@ -1,4 +1,4 @@
-import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuElement } from "./LeuElement-DK1jntuu.js";
 import * as lit_html0 from "lit-html";
 
 //#region src/components/spinner/Spinner.d.ts

package/dist/Spinner.d.ts

@@ -1,2 +1,2 @@
-import { t as LeuSpinner } from "./Spinner-CrM1enM0.js";
+import { t as LeuSpinner } from "./Spinner-DHYaX6-Y.js";
 export { LeuSpinner };

package/dist/Spinner.js

@@ -1,3 +1,3 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuSpinner } from "./Spinner-VhKfzI3Q.js";
+import "./LeuElement-DQI8cqZV.js";
+import { t as LeuSpinner } from "./Spinner-BBiVZxFH.js";
 export { LeuSpinner };

package/dist/Tab-CN97q0nj.d.ts

@@ -0,0 +1,30 @@
+import { t as LeuElement } from "./LeuElement-DK1jntuu.js";
+import { PropertyValues } from "lit";
+import * as lit_html0 from "lit-html";
+
+//#region src/components/tab/Tab.d.ts
+/**
+ * Tab Button.
+ *
+ * @prop {string} name - Name to link Button and Panel together
+ * @prop {boolean} active - Is active
+ *
+ * @tagname leu-tab
+ */
+declare class LeuTab extends LeuElement {
+  static styles: any[];
+  protected readonly componentId: string;
+  /**
+   * Name of the tab. Apply the same name to the corresponding panel to link them together.
+   * Has to be unique within the tab component.
+   */
+  name: string;
+  active: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  handleClick(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  render(): lit_html0.TemplateResult<1>;
+}
+//#endregion
+export { LeuTab as t };

package/dist/Tab-Ce9nrDok.js

@@ -0,0 +1,117 @@
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/tab/tab.css?inline
+var tab_default = css`:host {
+  --tab-button-font-regular: var(--leu-font-family-regular);
+
+  --tab-button-active-background: var(--leu-color-black-100);
+  --tab-button-active-color: var(--leu-color-black-0);
+
+  --tab-button-inactive-background: var(--leu-color-black-transp-10);
+  --tab-button-inactive-color: var(--leu-color-black-transp-60);
+
+  --tab-button-hover-background: var(--leu-color-black-transp-20);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--tab-button-font-regular);
+  background: var(--tab-button-inactive-background);
+  color: var(--tab-button-inactive-color);
+  border: 0;
+  border-radius: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+
+  white-space: nowrap;
+}
+@media (min-width: 1024px) {
+:host {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+  }
+:host(:hover) {
+  background: var(--tab-button-hover-background);
+}
+:host(:focus-visible) {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+:host([active]) {
+  background: var(--tab-button-active-background);
+  color: var(--tab-button-active-color);
+}
+.label {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+@media (min-width: 1024px) {
+.label {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+}
+  }
+`;
+//#endregion
+//#region src/components/tab/Tab.ts
+let nextId = 1;
+/**
+* Tab Button.
+*
+* @prop {string} name - Name to link Button and Panel together
+* @prop {boolean} active - Is active
+*
+* @tagname leu-tab
+*/
+var LeuTab = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.componentId = `leu-tab-${nextId++}`;
+		this.name = "";
+		this.active = false;
+	}
+	static {
+		this.styles = [LeuElement.styles, tab_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "tab");
+		this.addEventListener("click", this.handleClick);
+		this.id = this.id.length > 0 ? this.id : this.componentId;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("click", this.handleClick);
+	}
+	handleClick() {
+		if (this.active) return;
+		this.active = true;
+		this.dispatchEvent(new CustomEvent("leu:tab-select", {
+			detail: { name: this.name },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("active")) {
+			this.ariaSelected = this.active ? "true" : "false";
+			this.tabIndex = this.active ? 0 : -1;
+		}
+	}
+	render() {
+		return html`<span class="label"><slot></slot></span>`;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuTab.prototype, "name", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuTab.prototype, "active", void 0);
+//#endregion
+export { LeuTab as t };

package/dist/Tab.d.ts

@@ -0,0 +1,2 @@
+import { t as LeuTab } from "./Tab-CN97q0nj.js";
+export { LeuTab };

package/dist/Tab.js

@@ -0,0 +1,3 @@
+import "./LeuElement-DQI8cqZV.js";
+import { t as LeuTab } from "./Tab-Ce9nrDok.js";
+export { LeuTab };

package/dist/TabGroup-C-cd4Wcx.js

@@ -0,0 +1,248 @@
+import { t as LeuElement } from "./LeuElement-DQI8cqZV.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuTab } from "./Tab-Ce9nrDok.js";
+import { t as LeuTabPanel } from "./TabPanel-BW1ydVBT.js";
+import { css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
+//#region src/components/tab/tab-group.css?inline
+var tab_group_default = css`:host {
+  --tab-font-regular: var(--leu-font-family-regular);
+  --tab-font-black: var(--leu-font-family-black);
+
+  font-family: var(--tab-font-regular);
+}
+.container {
+  position: relative;
+  width: 100%;
+}
+.container::before,
+.container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 0.375rem;
+  pointer-events: none;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.2s ease;
+  transition-property: visibility, opacity;
+}
+.container::before {
+  left: 0;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
+}
+.container::after {
+  right: 0;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent);
+}
+.container--scrollable-left::before,
+.container--scrollable-right::after {
+  visibility: visible;
+  opacity: 1;
+}
+.tab-menu {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--leu-color-black-transp-10);
+
+  overflow: auto;
+  scrollbar-width: thin;
+}
+@media (min-width: 1024px) {
+.tab-menu {
+    margin-bottom: 2rem;
+}
+  }
+@media (min-width: 1280px) {
+.tab-menu {
+    padding: 1rem 0;
+    margin-bottom: 2.5rem;
+}
+  }
+`;
+//#endregion
+//#region src/components/tab/TabGroup.ts
+/**
+* Tab Group
+*
+* @slot tabs - Slot for the leu-tab elements
+* @slot panels - Slot for the leu-tab-panel elements
+* @todo: add disabled state to tabs and panels
+* @todo: add backdrop / shadow
+* @todo: add styling option for full-bleed layout (tabslist is full-bleed, panels use the full width of the container)
+*
+* @tagname leu-tab-group
+*/
+var LeuTabGroup = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.active = "";
+		this.isScrollable = {
+			left: false,
+			right: false
+		};
+		this.tabs = [];
+		this.panels = [];
+		this.initialShowEventDispatched = false;
+		this.tabMenuRef = createRef();
+		this.resizeObserver = new ResizeObserver(() => {
+			this.checkScrollable();
+		});
+		this.mutationObserver = new MutationObserver((records) => {
+			for (const record of records) {
+				if (!(record.target instanceof HTMLElement)) continue;
+				if (record.type === "attributes" && record.attributeName === "id" && record.target.matches("leu-tab, leu-tab-panel")) {
+					this.linkTabsAndPanels();
+					continue;
+				}
+			}
+		});
+	}
+	static {
+		this.styles = [LeuElement.styles, tab_group_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.resizeObserver.disconnect();
+		this.mutationObserver.disconnect();
+	}
+	firstUpdated() {
+		if (this.tabMenuRef.value) this.resizeObserver.observe(this.tabMenuRef.value);
+		this.mutationObserver.observe(this, {
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["id"]
+		});
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("active") || changedProperties.has("tabs") || changedProperties.has("panels")) {
+			this.updatePanels();
+			this.updateTabs();
+		}
+	}
+	async handleTabsSlotChange() {
+		this.tabs = (this.shadowRoot?.querySelector("slot[name=\"tabs\"]"))?.assignedElements({ flatten: true }).filter((el) => el instanceof LeuTab) ?? [];
+		if (this.tabs.length > 0 && !this.tabs.some((tab) => tab.name === this.active)) this.active = this.tabs[0].name;
+		this.linkTabsAndPanels();
+		await this.updateComplete;
+		this.checkScrollable();
+	}
+	handlePanelsSlotChange() {
+		this.panels = (this.shadowRoot?.querySelector("slot[name=\"panels\"]"))?.assignedElements({ flatten: true }).filter((el) => el instanceof LeuTabPanel) ?? [];
+		this.linkTabsAndPanels();
+	}
+	/**
+	* Link tabs and panels by setting the appropriate aria attributes.
+	* Generates global ids for tabs and panels if they don't have one.
+	*/
+	linkTabsAndPanels() {
+		for (const tab of this.tabs) {
+			const panel = this.panels.find((o) => o.name === tab.name);
+			if (!panel) continue;
+			tab.setAttribute("aria-controls", panel.id);
+			panel.setAttribute("aria-labelledby", tab.id);
+		}
+	}
+	get activeTab() {
+		return this.tabs.find((o) => o.active);
+	}
+	get activePanel() {
+		return this.panels.find((o) => o.name === this.activeTab?.name);
+	}
+	updatePanels() {
+		for (const panel of this.panels) panel.active = panel.name === this.active;
+	}
+	updateTabs() {
+		for (const tab of this.tabs) tab.active = tab.name === this.active;
+	}
+	async keydownHandler(event) {
+		const activeTab = this.activeTab;
+		let nextTab = null;
+		if (![
+			"ArrowRight",
+			"ArrowLeft",
+			"Home",
+			"End"
+		].includes(event.key) || !activeTab) return;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowLeft": {
+				const direction = event.key === "ArrowRight" ? 1 : -1;
+				const currentIndex = this.tabs.indexOf(activeTab);
+				const numOfTabs = this.tabs.length;
+				const nextIndex = (currentIndex + direction + numOfTabs) % numOfTabs;
+				nextTab = this.tabs[nextIndex];
+				break;
+			}
+			case "Home":
+				nextTab = this.tabs[0];
+				break;
+			case "End":
+				nextTab = this.tabs[this.tabs.length - 1];
+				break;
+			default: return;
+		}
+		this.active = nextTab.name;
+		await this.updateComplete;
+		nextTab.focus();
+		nextTab.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}
+	checkScrollable() {
+		const tabMenu = this.tabMenuRef.value;
+		if (!tabMenu) return;
+		this.isScrollable = {
+			left: tabMenu.scrollLeft > 0,
+			right: tabMenu.scrollLeft < tabMenu.scrollWidth - tabMenu.clientWidth
+		};
+	}
+	handleScrollEvent() {
+		this.checkScrollable();
+	}
+	handleTabSelect(event) {
+		this.active = event.detail.name;
+	}
+	render() {
+		return html`
+      <div class=${classMap({
+			container: true,
+			"container--scrollable-left": this.isScrollable.left,
+			"container--scrollable-right": this.isScrollable.right
+		})}>
+        <div
+          class="tab-menu"
+          role="tablist"
+          @keydown=${this.keydownHandler}
+          @leu:tab-select=${this.handleTabSelect}
+          @scroll="${this.handleScrollEvent}"
+          aria-label=${this.label}
+          ${ref(this.tabMenuRef)}
+        >
+          <slot name="tabs" @slotchange=${this.handleTabsSlotChange}></slot>
+        </div>
+      </div>
+      <slot name="panels" @slotchange=${this.handlePanelsSlotChange}></slot>
+    `;
+	}
+};
+__decorate([property({ type: String })], LeuTabGroup.prototype, "label", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuTabGroup.prototype, "active", void 0);
+__decorate([state()], LeuTabGroup.prototype, "isScrollable", void 0);
+__decorate([state()], LeuTabGroup.prototype, "tabs", void 0);
+__decorate([state()], LeuTabGroup.prototype, "panels", void 0);
+//#endregion
+export { LeuTabGroup as t };