@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/tab-group/tab-group.component.js

@@ -0,0 +1,340 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html, nothing, svg } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import { MzTabPanel } from "../tab-panel/tab-panel.component.js";
+import styles from "./tab-group.styles.js";
+const chevronLeft = svg`<polyline points="15 18 9 12 15 6"></polyline>`;
+const chevronRight = svg`<polyline points="9 18 15 12 9 6"></polyline>`;
+const chevronUp = svg`<polyline points="18 15 12 9 6 15"></polyline>`;
+const chevronDown = svg`<polyline points="6 9 12 15 18 9"></polyline>`;
+class MzTabGroup extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.placement = "top";
+    this.activation = "auto";
+    this.noScrollControls = false;
+    this.panels = [];
+    this.activeTab = "";
+    this.canScrollStart = false;
+    this.canScrollEnd = false;
+    this.resizeObserver = null;
+  }
+  // --- Lifecycle ---
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateScrollButtons();
+      this.updateIndicator();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+  firstUpdated() {
+    if (this.tabContainer) {
+      this.resizeObserver?.observe(this.tabContainer);
+      this.tabContainer.addEventListener("scroll", () => this.updateScrollButtons(), { passive: true });
+    }
+  }
+  updated() {
+    this.updateIndicator();
+  }
+  // --- Panel discovery ---
+  handleSlotChange() {
+    const slot = this.shadowRoot?.querySelector("slot:not([name])");
+    if (!slot) return;
+    const assignedPanels = slot.assignedElements({ flatten: true }).filter((el) => el.tagName === "MZ-TAB-PANEL");
+    this.panels = assignedPanels;
+    const activePanel = assignedPanels.find((p) => p.name === this.activeTab && !p.disabled);
+    if (!activePanel) {
+      const firstEnabled = assignedPanels.find((p) => !p.disabled);
+      if (firstEnabled) {
+        this.setActiveTab(firstEnabled.name, false);
+      }
+    } else {
+      this.syncPanelStates();
+    }
+    this.requestUpdate();
+    requestAnimationFrame(() => {
+      this.updateScrollButtons();
+      this.updateIndicator();
+    });
+  }
+  // --- Tab activation ---
+  setActiveTab(name, emitEvents = true) {
+    if (name === this.activeTab) return;
+    const oldTab = this.activeTab;
+    this.activeTab = name;
+    this.syncPanelStates();
+    if (emitEvents) {
+      if (oldTab) {
+        this.emit("mz-tab-hide", { detail: { name: oldTab } });
+      }
+      this.emit("mz-tab-show", { detail: { name } });
+    }
+  }
+  syncPanelStates() {
+    for (const panel of this.panels) {
+      panel.active = panel.name === this.activeTab;
+    }
+  }
+  /** Programmatically show a tab by name. */
+  show(name) {
+    const panel = this.panels.find((p) => p.name === name);
+    if (panel && !panel.disabled) {
+      this.setActiveTab(name);
+    }
+  }
+  // --- Event handlers ---
+  handleTabClick(name) {
+    const panel = this.panels.find((p) => p.name === name);
+    if (panel?.disabled) return;
+    this.setActiveTab(name);
+  }
+  handleKeyDown(event) {
+    const isVertical = this.placement === "start" || this.placement === "end";
+    const enabledPanels = this.panels.filter((p) => !p.disabled);
+    const currentIndex = enabledPanels.findIndex((p) => p.name === this.activeTab);
+    let newIndex = currentIndex;
+    const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+    const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+    switch (event.key) {
+      case prevKey:
+        event.preventDefault();
+        newIndex = currentIndex <= 0 ? enabledPanels.length - 1 : currentIndex - 1;
+        break;
+      case nextKey:
+        event.preventDefault();
+        newIndex = currentIndex >= enabledPanels.length - 1 ? 0 : currentIndex + 1;
+        break;
+      case "Home":
+        event.preventDefault();
+        newIndex = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        newIndex = enabledPanels.length - 1;
+        break;
+      case "Enter":
+      case " ":
+        if (this.activation === "manual") {
+          event.preventDefault();
+          const focused = this.shadowRoot?.activeElement;
+          const name = focused?.dataset?.tabName;
+          if (name) {
+            this.setActiveTab(name);
+          }
+        }
+        return;
+      default:
+        return;
+    }
+    if (newIndex !== currentIndex && enabledPanels[newIndex]) {
+      const targetPanel = enabledPanels[newIndex];
+      if (this.activation === "auto") {
+        this.setActiveTab(targetPanel.name);
+      }
+      requestAnimationFrame(() => {
+        const tabBtn = this.shadowRoot?.querySelector(
+          `[data-tab-name="${targetPanel.name}"]`
+        );
+        tabBtn?.focus();
+      });
+      this.scrollTabIntoView(targetPanel.name);
+    }
+  }
+  // --- Scroll controls ---
+  scrollTabIntoView(name) {
+    requestAnimationFrame(() => {
+      const tabBtn = this.shadowRoot?.querySelector(
+        `[data-tab-name="${name}"]`
+      );
+      tabBtn?.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "smooth" });
+    });
+  }
+  updateScrollButtons() {
+    if (!this.tabContainer || this.noScrollControls) return;
+    const isVertical = this.placement === "start" || this.placement === "end";
+    if (isVertical) {
+      this.canScrollStart = this.tabContainer.scrollTop > 0;
+      this.canScrollEnd = this.tabContainer.scrollTop + this.tabContainer.clientHeight < this.tabContainer.scrollHeight - 1;
+    } else {
+      this.canScrollStart = this.tabContainer.scrollLeft > 0;
+      this.canScrollEnd = this.tabContainer.scrollLeft + this.tabContainer.clientWidth < this.tabContainer.scrollWidth - 1;
+    }
+  }
+  handleScrollStart() {
+    const isVertical = this.placement === "start" || this.placement === "end";
+    const distance = 200;
+    if (isVertical) {
+      this.tabContainer.scrollBy({ top: -distance, behavior: "smooth" });
+    } else {
+      this.tabContainer.scrollBy({ left: -distance, behavior: "smooth" });
+    }
+  }
+  handleScrollEnd() {
+    const isVertical = this.placement === "start" || this.placement === "end";
+    const distance = 200;
+    if (isVertical) {
+      this.tabContainer.scrollBy({ top: distance, behavior: "smooth" });
+    } else {
+      this.tabContainer.scrollBy({ left: distance, behavior: "smooth" });
+    }
+  }
+  // --- Indicator positioning ---
+  updateIndicator() {
+    if (!this.tabContainer || !this.indicator) return;
+    const activeBtn = this.shadowRoot?.querySelector(
+      `.tab-group__tab--active`
+    );
+    if (!activeBtn) {
+      this.indicator.style.width = "0";
+      this.indicator.style.height = "0";
+      return;
+    }
+    const isVertical = this.placement === "start" || this.placement === "end";
+    const containerRect = this.tabContainer.getBoundingClientRect();
+    const btnRect = activeBtn.getBoundingClientRect();
+    if (isVertical) {
+      const top = btnRect.top - containerRect.top + this.tabContainer.scrollTop;
+      this.indicator.style.top = `${top}px`;
+      this.indicator.style.height = `${btnRect.height}px`;
+      this.indicator.style.width = "";
+      this.indicator.style.left = "";
+    } else {
+      const left = btnRect.left - containerRect.left + this.tabContainer.scrollLeft;
+      this.indicator.style.left = `${left}px`;
+      this.indicator.style.width = `${btnRect.width}px`;
+      this.indicator.style.height = "";
+      this.indicator.style.top = "";
+    }
+  }
+  // --- Render ---
+  render() {
+    const isVertical = this.placement === "start" || this.placement === "end";
+    const orientation = isVertical ? "vertical" : "horizontal";
+    const showScrollButtons = !this.noScrollControls && (this.canScrollStart || this.canScrollEnd);
+    const startIcon = isVertical ? chevronUp : chevronLeft;
+    const endIcon = isVertical ? chevronDown : chevronRight;
+    return html`
+      <div part="base" class="tab-group">
+        <div part="nav" class="tab-group__nav-container">
+          ${showScrollButtons ? html`
+                <button
+                  class=${classMap({
+      "tab-group__scroll-button": true,
+      "tab-group__scroll-button--visible": this.canScrollStart
+    })}
+                  aria-label="Scroll tabs backward"
+                  tabindex="-1"
+                  @click=${this.handleScrollStart}
+                >
+                  <svg viewBox="0 0 24 24">${startIcon}</svg>
+                </button>
+              ` : nothing}
+
+          <div
+            part="tabs"
+            class="tab-group__tabs"
+            role="tablist"
+            aria-orientation=${orientation}
+            @keydown=${this.handleKeyDown}
+          >
+            ${this.panels.map((panel) => this.renderTab(panel))}
+            <div part="active-tab-indicator" class="tab-group__indicator"></div>
+          </div>
+
+          ${showScrollButtons ? html`
+                <button
+                  class=${classMap({
+      "tab-group__scroll-button": true,
+      "tab-group__scroll-button--visible": this.canScrollEnd
+    })}
+                  aria-label="Scroll tabs forward"
+                  tabindex="-1"
+                  @click=${this.handleScrollEnd}
+                >
+                  <svg viewBox="0 0 24 24">${endIcon}</svg>
+                </button>
+              ` : nothing}
+        </div>
+
+        <div part="body" class="tab-group__body">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+  renderTab(panel) {
+    const isActive = panel.name === this.activeTab;
+    const isDisabled = panel.disabled;
+    const tabIndex = isActive ? "0" : "-1";
+    return html`
+      <button
+        id="tab-${panel.name}"
+        class=${classMap({
+      "tab-group__tab": true,
+      "tab-group__tab--active": isActive,
+      "tab-group__tab--disabled": isDisabled
+    })}
+        role="tab"
+        aria-selected=${isActive ? "true" : "false"}
+        aria-controls="panel-${panel.name}"
+        aria-disabled=${isDisabled ? "true" : "false"}
+        tabindex=${isDisabled ? "-1" : tabIndex}
+        data-tab-name=${panel.name}
+        @click=${() => this.handleTabClick(panel.name)}
+      >
+        ${panel.label}
+      </button>
+    `;
+  }
+}
+MzTabGroup.styles = styles;
+MzTabGroup.dependencies = {
+  "mz-tab-panel": MzTabPanel
+};
+__decorateClass([
+  property({ reflect: true })
+], MzTabGroup.prototype, "placement", 2);
+__decorateClass([
+  property()
+], MzTabGroup.prototype, "activation", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-scroll-controls" })
+], MzTabGroup.prototype, "noScrollControls", 2);
+__decorateClass([
+  state()
+], MzTabGroup.prototype, "panels", 2);
+__decorateClass([
+  state()
+], MzTabGroup.prototype, "activeTab", 2);
+__decorateClass([
+  state()
+], MzTabGroup.prototype, "canScrollStart", 2);
+__decorateClass([
+  state()
+], MzTabGroup.prototype, "canScrollEnd", 2);
+__decorateClass([
+  query(".tab-group__tabs")
+], MzTabGroup.prototype, "tabContainer", 2);
+__decorateClass([
+  query(".tab-group__indicator")
+], MzTabGroup.prototype, "indicator", 2);
+export {
+  MzTabGroup
+};
+//# sourceMappingURL=tab-group.component.js.map

package/dist/components/tab-group/tab-group.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/tab-group/tab-group.component.ts"],
+  "sourcesContent": ["import { html, nothing, svg } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport { MzTabPanel } from '../tab-panel/tab-panel.component.js';\nimport styles from './tab-group.styles.js';\n\n// Scroll button chevron icons as SVG template results\nconst chevronLeft = svg`<polyline points=\"15 18 9 12 15 6\"></polyline>`;\nconst chevronRight = svg`<polyline points=\"9 18 15 12 9 6\"></polyline>`;\nconst chevronUp = svg`<polyline points=\"18 15 12 9 6 15\"></polyline>`;\nconst chevronDown = svg`<polyline points=\"6 9 12 15 18 9\"></polyline>`;\n\n/**\n * @summary A tabbed interface that displays one panel at a time.\n *\n * @tag mz-tab-group\n *\n * @dependency mz-tab-panel\n *\n * @slot - The `<mz-tab-panel>` elements.\n *\n * @event mz-tab-show - Emitted when a tab is shown. `event.detail.name` is the panel name.\n * @event mz-tab-hide - Emitted when a tab is hidden. `event.detail.name` is the panel name.\n *\n * @csspart base - The component's base wrapper.\n * @csspart nav - The tab navigation container.\n * @csspart tabs - The tab button strip (the `role=\"tablist\"` element).\n * @csspart active-tab-indicator - The active tab indicator bar.\n * @csspart body - The panel body area.\n *\n * @cssproperty --mz-tab-group-indicator-color - Color of the active tab indicator.\n * @cssproperty --mz-tab-group-border-color - Color of the tab strip border.\n * @cssproperty --mz-tab-group-tab-color - Color of inactive tab text.\n * @cssproperty --mz-tab-group-tab-color-hover - Color of tab text on hover.\n * @cssproperty --mz-tab-group-tab-color-active - Color of active tab text.\n * @cssproperty --mz-tab-group-tab-bg-hover - Background of tab on hover.\n */\nexport class MzTabGroup extends ManzanoElement {\n  static styles = styles;\n\n  static dependencies = {\n    'mz-tab-panel': MzTabPanel\n  };\n\n  /** Where the tabs are placed relative to the panels. */\n  @property({ reflect: true }) placement: 'top' | 'bottom' | 'start' | 'end' = 'top';\n\n  /** How tabs are activated: 'auto' activates on arrow focus, 'manual' requires Enter/Space. */\n  @property() activation: 'auto' | 'manual' = 'auto';\n\n  /** Disables the scroll buttons that appear when tabs overflow. */\n  @property({ type: Boolean, attribute: 'no-scroll-controls' }) noScrollControls = false;\n\n  @state() private panels: MzTabPanel[] = [];\n  @state() private activeTab = '';\n  @state() private canScrollStart = false;\n  @state() private canScrollEnd = false;\n\n  @query('.tab-group__tabs') private tabContainer!: HTMLElement;\n  @query('.tab-group__indicator') private indicator!: HTMLElement;\n\n  private resizeObserver: ResizeObserver | null = null;\n\n  // --- Lifecycle ---\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => {\n      this.updateScrollButtons();\n      this.updateIndicator();\n    });\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n  }\n\n  protected firstUpdated(): void {\n    if (this.tabContainer) {\n      this.resizeObserver?.observe(this.tabContainer);\n      this.tabContainer.addEventListener('scroll', () => this.updateScrollButtons(), { passive: true });\n    }\n  }\n\n  protected updated(): void {\n    this.updateIndicator();\n  }\n\n  // --- Panel discovery ---\n\n  private handleSlotChange(): void {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (!slot) return;\n\n    const assignedPanels = slot\n      .assignedElements({ flatten: true })\n      .filter((el): el is MzTabPanel => el.tagName === 'MZ-TAB-PANEL');\n\n    this.panels = assignedPanels;\n\n    // If no active tab yet, or the active tab no longer exists, activate the first non-disabled panel\n    const activePanel = assignedPanels.find(p => p.name === this.activeTab && !p.disabled);\n    if (!activePanel) {\n      const firstEnabled = assignedPanels.find(p => !p.disabled);\n      if (firstEnabled) {\n        this.setActiveTab(firstEnabled.name, false);\n      }\n    } else {\n      // Re-sync panel active states\n      this.syncPanelStates();\n    }\n\n    this.requestUpdate();\n\n    // Update scroll buttons and indicator after DOM settles\n    requestAnimationFrame(() => {\n      this.updateScrollButtons();\n      this.updateIndicator();\n    });\n  }\n\n  // --- Tab activation ---\n\n  private setActiveTab(name: string, emitEvents = true): void {\n    if (name === this.activeTab) return;\n\n    const oldTab = this.activeTab;\n    this.activeTab = name;\n\n    this.syncPanelStates();\n\n    if (emitEvents) {\n      if (oldTab) {\n        this.emit('mz-tab-hide', { detail: { name: oldTab } });\n      }\n      this.emit('mz-tab-show', { detail: { name } });\n    }\n  }\n\n  private syncPanelStates(): void {\n    for (const panel of this.panels) {\n      panel.active = panel.name === this.activeTab;\n    }\n  }\n\n  /** Programmatically show a tab by name. */\n  show(name: string): void {\n    const panel = this.panels.find(p => p.name === name);\n    if (panel && !panel.disabled) {\n      this.setActiveTab(name);\n    }\n  }\n\n  // --- Event handlers ---\n\n  private handleTabClick(name: string): void {\n    const panel = this.panels.find(p => p.name === name);\n    if (panel?.disabled) return;\n    this.setActiveTab(name);\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    const isVertical = this.placement === 'start' || this.placement === 'end';\n    const enabledPanels = this.panels.filter(p => !p.disabled);\n    const currentIndex = enabledPanels.findIndex(p => p.name === this.activeTab);\n\n    let newIndex = currentIndex;\n\n    // Determine which arrow keys map to prev/next\n    const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';\n    const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';\n\n    switch (event.key) {\n      case prevKey:\n        event.preventDefault();\n        newIndex = currentIndex <= 0 ? enabledPanels.length - 1 : currentIndex - 1;\n        break;\n      case nextKey:\n        event.preventDefault();\n        newIndex = currentIndex >= enabledPanels.length - 1 ? 0 : currentIndex + 1;\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = enabledPanels.length - 1;\n        break;\n      case 'Enter':\n      case ' ':\n        // In manual mode, Enter/Space activates the focused tab\n        if (this.activation === 'manual') {\n          event.preventDefault();\n          const focused = this.shadowRoot?.activeElement as HTMLElement;\n          const name = focused?.dataset?.tabName;\n          if (name) {\n            this.setActiveTab(name);\n          }\n        }\n        return;\n      default:\n        return;\n    }\n\n    if (newIndex !== currentIndex && enabledPanels[newIndex]) {\n      const targetPanel = enabledPanels[newIndex];\n\n      if (this.activation === 'auto') {\n        // Auto mode: activate on focus\n        this.setActiveTab(targetPanel.name);\n      }\n\n      // Focus the new tab button\n      requestAnimationFrame(() => {\n        const tabBtn = this.shadowRoot?.querySelector(\n          `[data-tab-name=\"${targetPanel.name}\"]`\n        ) as HTMLElement;\n        tabBtn?.focus();\n      });\n\n      // Scroll tab into view\n      this.scrollTabIntoView(targetPanel.name);\n    }\n  }\n\n  // --- Scroll controls ---\n\n  private scrollTabIntoView(name: string): void {\n    requestAnimationFrame(() => {\n      const tabBtn = this.shadowRoot?.querySelector(\n        `[data-tab-name=\"${name}\"]`\n      ) as HTMLElement;\n      tabBtn?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });\n    });\n  }\n\n  private updateScrollButtons(): void {\n    if (!this.tabContainer || this.noScrollControls) return;\n\n    const isVertical = this.placement === 'start' || this.placement === 'end';\n\n    if (isVertical) {\n      this.canScrollStart = this.tabContainer.scrollTop > 0;\n      this.canScrollEnd =\n        this.tabContainer.scrollTop + this.tabContainer.clientHeight <\n        this.tabContainer.scrollHeight - 1;\n    } else {\n      this.canScrollStart = this.tabContainer.scrollLeft > 0;\n      this.canScrollEnd =\n        this.tabContainer.scrollLeft + this.tabContainer.clientWidth <\n        this.tabContainer.scrollWidth - 1;\n    }\n  }\n\n  private handleScrollStart(): void {\n    const isVertical = this.placement === 'start' || this.placement === 'end';\n    const distance = 200;\n\n    if (isVertical) {\n      this.tabContainer.scrollBy({ top: -distance, behavior: 'smooth' });\n    } else {\n      this.tabContainer.scrollBy({ left: -distance, behavior: 'smooth' });\n    }\n  }\n\n  private handleScrollEnd(): void {\n    const isVertical = this.placement === 'start' || this.placement === 'end';\n    const distance = 200;\n\n    if (isVertical) {\n      this.tabContainer.scrollBy({ top: distance, behavior: 'smooth' });\n    } else {\n      this.tabContainer.scrollBy({ left: distance, behavior: 'smooth' });\n    }\n  }\n\n  // --- Indicator positioning ---\n\n  private updateIndicator(): void {\n    if (!this.tabContainer || !this.indicator) return;\n\n    const activeBtn = this.shadowRoot?.querySelector(\n      `.tab-group__tab--active`\n    ) as HTMLElement;\n\n    if (!activeBtn) {\n      this.indicator.style.width = '0';\n      this.indicator.style.height = '0';\n      return;\n    }\n\n    const isVertical = this.placement === 'start' || this.placement === 'end';\n    const containerRect = this.tabContainer.getBoundingClientRect();\n    const btnRect = activeBtn.getBoundingClientRect();\n\n    if (isVertical) {\n      const top = btnRect.top - containerRect.top + this.tabContainer.scrollTop;\n      this.indicator.style.top = `${top}px`;\n      this.indicator.style.height = `${btnRect.height}px`;\n      this.indicator.style.width = '';\n      this.indicator.style.left = '';\n    } else {\n      const left = btnRect.left - containerRect.left + this.tabContainer.scrollLeft;\n      this.indicator.style.left = `${left}px`;\n      this.indicator.style.width = `${btnRect.width}px`;\n      this.indicator.style.height = '';\n      this.indicator.style.top = '';\n    }\n  }\n\n  // --- Render ---\n\n  render() {\n    const isVertical = this.placement === 'start' || this.placement === 'end';\n    const orientation = isVertical ? 'vertical' : 'horizontal';\n\n    const showScrollButtons = !this.noScrollControls && (this.canScrollStart || this.canScrollEnd);\n    const startIcon = isVertical ? chevronUp : chevronLeft;\n    const endIcon = isVertical ? chevronDown : chevronRight;\n\n    return html`\n      <div part=\"base\" class=\"tab-group\">\n        <div part=\"nav\" class=\"tab-group__nav-container\">\n          ${showScrollButtons\n            ? html`\n                <button\n                  class=${classMap({\n                    'tab-group__scroll-button': true,\n                    'tab-group__scroll-button--visible': this.canScrollStart\n                  })}\n                  aria-label=\"Scroll tabs backward\"\n                  tabindex=\"-1\"\n                  @click=${this.handleScrollStart}\n                >\n                  <svg viewBox=\"0 0 24 24\">${startIcon}</svg>\n                </button>\n              `\n            : nothing}\n\n          <div\n            part=\"tabs\"\n            class=\"tab-group__tabs\"\n            role=\"tablist\"\n            aria-orientation=${orientation}\n            @keydown=${this.handleKeyDown}\n          >\n            ${this.panels.map(panel => this.renderTab(panel))}\n            <div part=\"active-tab-indicator\" class=\"tab-group__indicator\"></div>\n          </div>\n\n          ${showScrollButtons\n            ? html`\n                <button\n                  class=${classMap({\n                    'tab-group__scroll-button': true,\n                    'tab-group__scroll-button--visible': this.canScrollEnd\n                  })}\n                  aria-label=\"Scroll tabs forward\"\n                  tabindex=\"-1\"\n                  @click=${this.handleScrollEnd}\n                >\n                  <svg viewBox=\"0 0 24 24\">${endIcon}</svg>\n                </button>\n              `\n            : nothing}\n        </div>\n\n        <div part=\"body\" class=\"tab-group__body\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderTab(panel: MzTabPanel) {\n    const isActive = panel.name === this.activeTab;\n    const isDisabled = panel.disabled;\n\n    // Active tab gets tabindex=\"0\", others get \"-1\"\n    const tabIndex = isActive ? '0' : '-1';\n\n    return html`\n      <button\n        id=\"tab-${panel.name}\"\n        class=${classMap({\n          'tab-group__tab': true,\n          'tab-group__tab--active': isActive,\n          'tab-group__tab--disabled': isDisabled\n        })}\n        role=\"tab\"\n        aria-selected=${isActive ? 'true' : 'false'}\n        aria-controls=\"panel-${panel.name}\"\n        aria-disabled=${isDisabled ? 'true' : 'false'}\n        tabindex=${isDisabled ? '-1' : tabIndex}\n        data-tab-name=${panel.name}\n        @click=${() => this.handleTabClick(panel.name)}\n      >\n        ${panel.label}\n      </button>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/tab-group/tab-group.d.ts

@@ -0,0 +1,8 @@
+import { MzTabGroup } from './tab-group.component.js';
+export * from './tab-group.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-tab-group': MzTabGroup;
+    }
+}
+//# sourceMappingURL=tab-group.d.ts.map

package/dist/components/tab-group/tab-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-group.d.ts","sourceRoot":"","sources":["../../../src/components/tab-group/tab-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,cAAc,0BAA0B,CAAC;AAIzC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/components/tab-group/tab-group.js

@@ -0,0 +1,4 @@
+import { MzTabGroup } from "./tab-group.component.js";
+export * from "./tab-group.component.js";
+MzTabGroup.define("mz-tab-group");
+//# sourceMappingURL=tab-group.js.map

package/dist/components/tab-group/tab-group.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/tab-group/tab-group.ts"],
+  "sourcesContent": ["import { MzTabGroup } from './tab-group.component.js';\n\nexport * from './tab-group.component.js';\n\nMzTabGroup.define('mz-tab-group');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-tab-group': MzTabGroup;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,cAAc;AAEd,WAAW,OAAO,cAAc;",
+  "names": []
+}

package/dist/components/tab-group/tab-group.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=tab-group.styles.d.ts.map

package/dist/components/tab-group/tab-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tab-group/tab-group.styles.ts"],"names":[],"mappings":";AAGA,wBAoOE"}

package/dist/components/tab-group/tab-group.styles.js

@@ -0,0 +1,235 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var tab_group_styles_default = css`
+  ${componentStyles}
+
+  :host {
+    --_tab-group-indicator-color: var(--mz-tab-group-indicator-color, var(--mz-color-primary));
+    --_tab-group-border-color: var(--mz-tab-group-border-color, var(--mz-color-border));
+    --_tab-group-tab-color: var(--mz-tab-group-tab-color, var(--mz-color-text-secondary));
+    --_tab-group-tab-color-hover: var(--mz-tab-group-tab-color-hover, var(--mz-color-text));
+    --_tab-group-tab-color-active: var(--mz-tab-group-tab-color-active, var(--_tab-group-indicator-color));
+    --_tab-group-tab-bg-hover: var(--mz-tab-group-tab-bg-hover, var(--mz-color-surface-raised));
+
+    display: block;
+    font-family: var(--mz-font-sans);
+  }
+
+  .tab-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Placement variations */
+  :host([placement='bottom']) .tab-group {
+    flex-direction: column-reverse;
+  }
+
+  :host([placement='start']) .tab-group {
+    flex-direction: row;
+  }
+
+  :host([placement='end']) .tab-group {
+    flex-direction: row-reverse;
+  }
+
+  /* Nav container: holds scroll buttons + tab strip */
+  .tab-group__nav-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  /* Tab strip */
+  .tab-group__tabs {
+    display: flex;
+    position: relative;
+    overflow-x: auto;
+    scrollbar-width: none;
+    gap: var(--mz-space-2xs);
+    padding: 0 var(--mz-space-xs);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .tab-group__tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Border on the tab strip */
+  :host([placement='top']) .tab-group__tabs,
+  :host(:not([placement])) .tab-group__tabs {
+    border-bottom: var(--mz-border-width-sm) solid var(--_tab-group-border-color);
+  }
+
+  :host([placement='bottom']) .tab-group__tabs {
+    border-top: var(--mz-border-width-sm) solid var(--_tab-group-border-color);
+  }
+
+  /* Vertical orientation */
+  :host([placement='start']) .tab-group__tabs,
+  :host([placement='end']) .tab-group__tabs {
+    flex-direction: column;
+    overflow-x: visible;
+    overflow-y: auto;
+    border-bottom: none;
+  }
+
+  :host([placement='start']) .tab-group__tabs {
+    border-right: var(--mz-border-width-sm) solid var(--_tab-group-border-color);
+  }
+
+  :host([placement='end']) .tab-group__tabs {
+    border-left: var(--mz-border-width-sm) solid var(--_tab-group-border-color);
+  }
+
+  /* Individual tab button */
+  .tab-group__tab {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mz-space-2xs);
+    padding: var(--mz-space-sm) var(--mz-space-md);
+    border: none;
+    background: none;
+    font-family: inherit;
+    font-size: var(--mz-font-size-sm);
+    font-weight: var(--mz-font-weight-medium);
+    color: var(--_tab-group-tab-color);
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      color var(--mz-transition-fast) ease,
+      background-color var(--mz-transition-fast) ease;
+    position: relative;
+    outline: none;
+  }
+
+  /* Top/bottom placement: round top corners */
+  :host([placement='top']) .tab-group__tab,
+  :host(:not([placement])) .tab-group__tab {
+    border-radius: var(--mz-radius-sm) var(--mz-radius-sm) 0 0;
+  }
+
+  :host([placement='bottom']) .tab-group__tab {
+    border-radius: 0 0 var(--mz-radius-sm) var(--mz-radius-sm);
+  }
+
+  :host([placement='start']) .tab-group__tab {
+    border-radius: var(--mz-radius-sm) 0 0 var(--mz-radius-sm);
+  }
+
+  :host([placement='end']) .tab-group__tab {
+    border-radius: 0 var(--mz-radius-sm) var(--mz-radius-sm) 0;
+  }
+
+  .tab-group__tab:hover:not(.tab-group__tab--disabled) {
+    color: var(--_tab-group-tab-color-hover);
+    background: var(--_tab-group-tab-bg-hover);
+  }
+
+  .tab-group__tab:focus-visible {
+    outline: var(--mz-focus-ring);
+    outline-offset: calc(-1 * var(--mz-focus-ring-width));
+  }
+
+  .tab-group__tab--active {
+    color: var(--_tab-group-tab-color-active);
+  }
+
+  .tab-group__tab--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Active indicator */
+  .tab-group__indicator {
+    position: absolute;
+    background: var(--_tab-group-indicator-color);
+    transition:
+      left var(--mz-transition-normal) ease,
+      top var(--mz-transition-normal) ease,
+      width var(--mz-transition-normal) ease,
+      height var(--mz-transition-normal) ease;
+    pointer-events: none;
+  }
+
+  /* Horizontal indicator (top/bottom) */
+  :host([placement='top']) .tab-group__indicator,
+  :host(:not([placement])) .tab-group__indicator {
+    bottom: 0;
+    height: 2px;
+    border-radius: 2px 2px 0 0;
+  }
+
+  :host([placement='bottom']) .tab-group__indicator {
+    top: 0;
+    height: 2px;
+    border-radius: 0 0 2px 2px;
+  }
+
+  /* Vertical indicator (start/end) */
+  :host([placement='start']) .tab-group__indicator {
+    right: 0;
+    width: 2px;
+    border-radius: 0 2px 2px 0;
+  }
+
+  :host([placement='end']) .tab-group__indicator {
+    left: 0;
+    width: 2px;
+    border-radius: 2px 0 0 2px;
+  }
+
+  /* Body (panel area) */
+  .tab-group__body {
+    display: block;
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* Add horizontal padding to panel body for vertical placements */
+  :host([placement='start']) .tab-group__body,
+  :host([placement='end']) .tab-group__body {
+    --mz-tab-panel-padding: var(--mz-space-sm) var(--mz-space-md);
+  }
+
+  /* Scroll buttons */
+  .tab-group__scroll-button {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    background: var(--mz-color-surface-raised);
+    color: var(--_tab-group-tab-color);
+    cursor: pointer;
+    flex-shrink: 0;
+    border-radius: var(--mz-radius-sm);
+    padding: 0;
+  }
+
+  .tab-group__scroll-button:hover {
+    color: var(--_tab-group-tab-color-hover);
+    background: color-mix(in srgb, var(--mz-color-text) 8%, var(--mz-color-surface));
+  }
+
+  .tab-group__scroll-button--visible {
+    display: inline-flex;
+  }
+
+  /* Scroll button SVG icon */
+  .tab-group__scroll-button svg {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+`;
+export {
+  tab_group_styles_default as default
+};
+//# sourceMappingURL=tab-group.styles.js.map