@duskmoon-dev/el-tabs 0.4.0

package/dist/cjs/index.js

@@ -0,0 +1,498 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  register: () => register,
+  ElDmTabs: () => ElDmTabs,
+  ElDmTabPanel: () => ElDmTabPanel,
+  ElDmTab: () => ElDmTab
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/el-dm-tabs.ts
+var import_el_core = require("@duskmoon-dev/el-core");
+var styles = import_el_core.css`
+  :host {
+    display: block;
+    font-family: inherit;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([orientation='vertical']) {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .tablist {
+    display: flex;
+    position: relative;
+    gap: 0.25rem;
+    border-bottom: 1px solid var(--color-outline);
+  }
+
+  :host([variant='pills']) .tablist {
+    border-bottom: none;
+    gap: 0.5rem;
+  }
+
+  :host([variant='enclosed']) .tablist {
+    border-bottom: 1px solid var(--color-outline);
+    gap: 0;
+  }
+
+  :host([orientation='vertical']) .tablist {
+    flex-direction: column;
+    border-bottom: none;
+    border-right: 1px solid var(--color-outline);
+    padding-right: 0.5rem;
+  }
+
+  :host([orientation='vertical'][variant='pills']) .tablist {
+    border-right: none;
+  }
+
+  :host([orientation='vertical'][variant='enclosed']) .tablist {
+    border-right: 1px solid var(--color-outline);
+    padding-right: 0;
+  }
+
+  .indicator {
+    position: absolute;
+    bottom: -1px;
+    height: 2px;
+    background-color: var(--color-primary);
+    transition:
+      left 200ms ease,
+      width 200ms ease;
+    pointer-events: none;
+  }
+
+  :host([orientation='vertical']) .indicator {
+    right: -1px;
+    left: auto;
+    bottom: auto;
+    width: 2px;
+    height: auto;
+    transition:
+      top 200ms ease,
+      height 200ms ease;
+  }
+
+  :host([variant='pills']) .indicator,
+  :host([variant='enclosed']) .indicator {
+    display: none;
+  }
+
+  .panels {
+    flex: 1;
+    min-width: 0;
+  }
+
+  ::slotted(el-dm-tab-panel) {
+    display: none;
+  }
+
+  ::slotted(el-dm-tab-panel[active]) {
+    display: block;
+  }
+`;
+
+class ElDmTabs extends import_el_core.BaseElement {
+  static properties = {
+    value: { type: String, reflect: true },
+    variant: { type: String, reflect: true, default: "underline" },
+    color: { type: String, reflect: true },
+    orientation: { type: String, reflect: true, default: "horizontal" }
+  };
+  _indicatorStyle = "";
+  constructor() {
+    super();
+    this.attachStyles(styles);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("tab-click", this._handleTabClick);
+    this.addEventListener("keydown", this._handleKeyDown);
+    requestAnimationFrame(() => {
+      this._initializeSelection();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("tab-click", this._handleTabClick);
+    this.removeEventListener("keydown", this._handleKeyDown);
+  }
+  _initializeSelection() {
+    const tabs = this._getTabs();
+    if (tabs.length === 0)
+      return;
+    if (!this.value && tabs.length > 0) {
+      const firstTab = tabs[0];
+      const tabId = firstTab.getAttribute("tab-id");
+      if (tabId) {
+        this.value = tabId;
+      }
+    }
+    this._updateSelection();
+  }
+  _getTabs() {
+    return Array.from(this.querySelectorAll("el-dm-tab"));
+  }
+  _getPanels() {
+    return Array.from(this.querySelectorAll("el-dm-tab-panel"));
+  }
+  _handleTabClick = (event) => {
+    const { tabId } = event.detail;
+    if (tabId && tabId !== this.value) {
+      const oldValue = this.value;
+      this.value = tabId;
+      this._updateSelection();
+      this.emit("change", { value: tabId, oldValue });
+    }
+  };
+  _handleKeyDown = (event) => {
+    const target = event.target;
+    if (target.tagName !== "EL-DM-TAB")
+      return;
+    const tabs = this._getTabs();
+    const currentIndex = tabs.indexOf(target);
+    if (currentIndex === -1)
+      return;
+    let nextIndex = -1;
+    const isVertical = this.orientation === "vertical";
+    switch (event.key) {
+      case "ArrowLeft":
+        if (!isVertical) {
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+        }
+        break;
+      case "ArrowRight":
+        if (!isVertical) {
+          nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+        }
+        break;
+      case "ArrowUp":
+        if (isVertical) {
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+        }
+        break;
+      case "ArrowDown":
+        if (isVertical) {
+          nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+        }
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = tabs.length - 1;
+        break;
+      default:
+        return;
+    }
+    if (nextIndex !== -1) {
+      event.preventDefault();
+      const nextTab = tabs[nextIndex];
+      nextTab.focus();
+      const tabId = nextTab.getAttribute("tab-id");
+      if (tabId) {
+        const oldValue = this.value;
+        this.value = tabId;
+        this._updateSelection();
+        this.emit("change", { value: tabId, oldValue });
+      }
+    }
+  };
+  _updateSelection() {
+    const tabs = this._getTabs();
+    const panels = this._getPanels();
+    tabs.forEach((tab) => {
+      const tabId = tab.getAttribute("tab-id");
+      const isSelected = tabId === this.value;
+      tab.setAttribute("aria-selected", String(isSelected));
+      tab.setAttribute("tabindex", isSelected ? "0" : "-1");
+      if (isSelected) {
+        tab.setAttribute("active", "");
+      } else {
+        tab.removeAttribute("active");
+      }
+    });
+    panels.forEach((panel) => {
+      const panelFor = panel.getAttribute("panel-for");
+      const isActive = panelFor === this.value;
+      if (isActive) {
+        panel.setAttribute("active", "");
+        panel.removeAttribute("hidden");
+      } else {
+        panel.removeAttribute("active");
+        panel.setAttribute("hidden", "");
+      }
+    });
+    this._updateIndicator();
+  }
+  _updateIndicator() {
+    if (this.variant !== "underline")
+      return;
+    const activeTab = this.querySelector("el-dm-tab[active]");
+    if (!activeTab) {
+      this._indicatorStyle = "display: none;";
+      this.update();
+      return;
+    }
+    const tablist = this.shadowRoot?.querySelector(".tablist");
+    if (!tablist)
+      return;
+    const tablistRect = tablist.getBoundingClientRect();
+    const tabRect = activeTab.getBoundingClientRect();
+    if (this.orientation === "vertical") {
+      const top = tabRect.top - tablistRect.top;
+      this._indicatorStyle = `top: ${top}px; height: ${tabRect.height}px;`;
+    } else {
+      const left = tabRect.left - tablistRect.left;
+      this._indicatorStyle = `left: ${left}px; width: ${tabRect.width}px;`;
+    }
+    this.update();
+  }
+  render() {
+    const colorStyle = this.color ? `--color-primary: var(--color-${this.color}, ${this.color});` : "";
+    return `
+      <div
+        class="tablist"
+        role="tablist"
+        part="tablist"
+        aria-orientation="${this.orientation || "horizontal"}"
+        style="${colorStyle}"
+      >
+        <slot name="tab"></slot>
+        <div class="indicator" part="indicator" style="${this._indicatorStyle}"></div>
+      </div>
+      <div class="panels">
+        <slot></slot>
+      </div>
+    `;
+  }
+  update() {
+    super.update();
+    requestAnimationFrame(() => {
+      this._updateIndicator();
+    });
+  }
+}
+var tabStyles = import_el_core.css`
+  :host {
+    display: inline-flex;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    border: none;
+    background: transparent;
+    color: var(--color-on-surface);
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      color 150ms ease,
+      background-color 150ms ease,
+      border-color 150ms ease;
+    position: relative;
+  }
+
+  .tab:hover:not(:disabled) {
+    color: var(--color-primary);
+    background-color: var(--color-surface-variant);
+  }
+
+  .tab:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+    border-radius: 0.25rem;
+  }
+
+  .tab:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :host([active]) .tab {
+    color: var(--color-primary);
+  }
+
+  /* Pills variant styles */
+  :host-context(el-dm-tabs[variant='pills']) .tab {
+    border-radius: 9999px;
+    padding: 0.5rem 1rem;
+  }
+
+  :host-context(el-dm-tabs[variant='pills'][active]) .tab,
+  :host([active]):host-context(el-dm-tabs[variant='pills']) .tab {
+    background-color: var(--color-primary);
+    color: var(--color-on-primary);
+  }
+
+  /* Enclosed variant styles */
+  :host-context(el-dm-tabs[variant='enclosed']) .tab {
+    border: 1px solid transparent;
+    border-bottom: none;
+    border-radius: 0.5rem 0.5rem 0 0;
+    margin-bottom: -1px;
+    padding: 0.75rem 1.25rem;
+  }
+
+  :host([active]):host-context(el-dm-tabs[variant='enclosed']) .tab {
+    border-color: var(--color-outline);
+    background-color: var(--color-surface);
+  }
+
+  /* Vertical orientation */
+  :host-context(el-dm-tabs[orientation='vertical']) .tab {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  :host-context(el-dm-tabs[orientation='vertical'][variant='enclosed']) .tab {
+    border-radius: 0.5rem 0 0 0.5rem;
+    border: 1px solid transparent;
+    border-right: none;
+    margin-right: -1px;
+    margin-bottom: 0;
+  }
+
+  :host([active]):host-context(el-dm-tabs[orientation='vertical'][variant='enclosed']) .tab {
+    border-color: var(--color-outline);
+  }
+`;
+
+class ElDmTab extends import_el_core.BaseElement {
+  static properties = {
+    tabId: { type: String, reflect: true, attribute: "tab-id" },
+    disabled: { type: Boolean, reflect: true },
+    active: { type: Boolean, reflect: true }
+  };
+  constructor() {
+    super();
+    this.attachStyles(tabStyles);
+    this.slot = "tab";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tab");
+    this.setAttribute("tabindex", this.active ? "0" : "-1");
+  }
+  _handleClick() {
+    if (this.disabled)
+      return;
+    this.emit("tab-click", { tabId: this.tabId }, { bubbles: true, composed: true });
+  }
+  render() {
+    return `
+      <button
+        class="tab"
+        part="tab"
+        ?disabled="${this.disabled}"
+        aria-selected="${this.active}"
+        aria-disabled="${this.disabled}"
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+  update() {
+    super.update();
+    const button = this.shadowRoot?.querySelector("button");
+    button?.addEventListener("click", this._handleClick.bind(this));
+  }
+}
+var panelStyles = import_el_core.css`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .panel {
+    padding: 1rem 0;
+  }
+`;
+
+class ElDmTabPanel extends import_el_core.BaseElement {
+  static properties = {
+    panelFor: { type: String, reflect: true, attribute: "panel-for" },
+    active: { type: Boolean, reflect: true }
+  };
+  constructor() {
+    super();
+    this.attachStyles(panelStyles);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tabpanel");
+    if (!this.active) {
+      this.setAttribute("hidden", "");
+    }
+  }
+  render() {
+    return `
+      <div class="panel" part="panel">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// src/index.ts
+function register() {
+  if (!customElements.get("el-dm-tabs")) {
+    customElements.define("el-dm-tabs", ElDmTabs);
+  }
+  if (!customElements.get("el-dm-tab")) {
+    customElements.define("el-dm-tab", ElDmTab);
+  }
+  if (!customElements.get("el-dm-tab-panel")) {
+    customElements.define("el-dm-tab-panel", ElDmTabPanel);
+  }
+}
+
+//# debugId=AA944EC74C7ADE5164756E2164756E21
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,11 @@
+{
+  "version": 3,
+  "sources": ["../../src/el-dm-tabs.ts", "../../src/index.ts"],
+  "sourcesContent": [
+    "/**\n * DuskMoon Tabs Element\n *\n * A tab navigation component with tab panels for organizing content.\n * Implements WAI-ARIA tabs pattern for accessibility.\n *\n * @element el-dm-tabs\n *\n * @attr {string} value - Currently selected tab id\n * @attr {string} variant - Tab style variant: underline, pills, enclosed\n * @attr {string} color - Color theme for tabs\n * @attr {string} orientation - Tab orientation: horizontal, vertical\n *\n * @slot - Default slot for el-dm-tab and el-dm-tab-panel elements\n *\n * @csspart tablist - The tab list container\n * @csspart indicator - The animated indicator (underline variant)\n *\n * @fires change - Fired when tab selection changes\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\n\nexport type TabsVariant = 'underline' | 'pills' | 'enclosed';\nexport type TabsOrientation = 'horizontal' | 'vertical';\n\nconst styles = css`\n  :host {\n    display: block;\n    font-family: inherit;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  :host([orientation='vertical']) {\n    display: flex;\n    gap: 1rem;\n  }\n\n  .tablist {\n    display: flex;\n    position: relative;\n    gap: 0.25rem;\n    border-bottom: 1px solid var(--color-outline);\n  }\n\n  :host([variant='pills']) .tablist {\n    border-bottom: none;\n    gap: 0.5rem;\n  }\n\n  :host([variant='enclosed']) .tablist {\n    border-bottom: 1px solid var(--color-outline);\n    gap: 0;\n  }\n\n  :host([orientation='vertical']) .tablist {\n    flex-direction: column;\n    border-bottom: none;\n    border-right: 1px solid var(--color-outline);\n    padding-right: 0.5rem;\n  }\n\n  :host([orientation='vertical'][variant='pills']) .tablist {\n    border-right: none;\n  }\n\n  :host([orientation='vertical'][variant='enclosed']) .tablist {\n    border-right: 1px solid var(--color-outline);\n    padding-right: 0;\n  }\n\n  .indicator {\n    position: absolute;\n    bottom: -1px;\n    height: 2px;\n    background-color: var(--color-primary);\n    transition:\n      left 200ms ease,\n      width 200ms ease;\n    pointer-events: none;\n  }\n\n  :host([orientation='vertical']) .indicator {\n    right: -1px;\n    left: auto;\n    bottom: auto;\n    width: 2px;\n    height: auto;\n    transition:\n      top 200ms ease,\n      height 200ms ease;\n  }\n\n  :host([variant='pills']) .indicator,\n  :host([variant='enclosed']) .indicator {\n    display: none;\n  }\n\n  .panels {\n    flex: 1;\n    min-width: 0;\n  }\n\n  ::slotted(el-dm-tab-panel) {\n    display: none;\n  }\n\n  ::slotted(el-dm-tab-panel[active]) {\n    display: block;\n  }\n`;\n\nexport class ElDmTabs extends BaseElement {\n  static properties = {\n    value: { type: String, reflect: true },\n    variant: { type: String, reflect: true, default: 'underline' },\n    color: { type: String, reflect: true },\n    orientation: { type: String, reflect: true, default: 'horizontal' },\n  };\n\n  declare value: string;\n  declare variant: TabsVariant;\n  declare color: string;\n  declare orientation: TabsOrientation;\n\n  private _indicatorStyle = '';\n\n  constructor() {\n    super();\n    this.attachStyles(styles);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('tab-click', this._handleTabClick as EventListener);\n    this.addEventListener('keydown', this._handleKeyDown);\n\n    // Initialize selection after DOM is ready\n    requestAnimationFrame(() => {\n      this._initializeSelection();\n    });\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('tab-click', this._handleTabClick as EventListener);\n    this.removeEventListener('keydown', this._handleKeyDown);\n  }\n\n  private _initializeSelection(): void {\n    const tabs = this._getTabs();\n    if (tabs.length === 0) return;\n\n    // If no value set, select first tab\n    if (!this.value && tabs.length > 0) {\n      const firstTab = tabs[0];\n      const tabId = firstTab.getAttribute('tab-id');\n      if (tabId) {\n        this.value = tabId;\n      }\n    }\n\n    this._updateSelection();\n  }\n\n  private _getTabs(): HTMLElement[] {\n    return Array.from(this.querySelectorAll('el-dm-tab'));\n  }\n\n  private _getPanels(): HTMLElement[] {\n    return Array.from(this.querySelectorAll('el-dm-tab-panel'));\n  }\n\n  private _handleTabClick = (event: CustomEvent<{ tabId: string }>): void => {\n    const { tabId } = event.detail;\n    if (tabId && tabId !== this.value) {\n      const oldValue = this.value;\n      this.value = tabId;\n      this._updateSelection();\n      this.emit('change', { value: tabId, oldValue });\n    }\n  };\n\n  private _handleKeyDown = (event: KeyboardEvent): void => {\n    const target = event.target as HTMLElement;\n    if (target.tagName !== 'EL-DM-TAB') return;\n\n    const tabs = this._getTabs();\n    const currentIndex = tabs.indexOf(target);\n    if (currentIndex === -1) return;\n\n    let nextIndex = -1;\n    const isVertical = this.orientation === 'vertical';\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        if (!isVertical) {\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n        }\n        break;\n      case 'ArrowRight':\n        if (!isVertical) {\n          nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n        }\n        break;\n      case 'ArrowUp':\n        if (isVertical) {\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n        }\n        break;\n      case 'ArrowDown':\n        if (isVertical) {\n          nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n        }\n        break;\n      case 'Home':\n        nextIndex = 0;\n        break;\n      case 'End':\n        nextIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    if (nextIndex !== -1) {\n      event.preventDefault();\n      const nextTab = tabs[nextIndex];\n      nextTab.focus();\n      const tabId = nextTab.getAttribute('tab-id');\n      if (tabId) {\n        const oldValue = this.value;\n        this.value = tabId;\n        this._updateSelection();\n        this.emit('change', { value: tabId, oldValue });\n      }\n    }\n  };\n\n  private _updateSelection(): void {\n    const tabs = this._getTabs();\n    const panels = this._getPanels();\n\n    // Update tab states\n    tabs.forEach((tab) => {\n      const tabId = tab.getAttribute('tab-id');\n      const isSelected = tabId === this.value;\n      tab.setAttribute('aria-selected', String(isSelected));\n      tab.setAttribute('tabindex', isSelected ? '0' : '-1');\n      if (isSelected) {\n        tab.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n      }\n    });\n\n    // Update panel states\n    panels.forEach((panel) => {\n      const panelFor = panel.getAttribute('panel-for');\n      const isActive = panelFor === this.value;\n      if (isActive) {\n        panel.setAttribute('active', '');\n        panel.removeAttribute('hidden');\n      } else {\n        panel.removeAttribute('active');\n        panel.setAttribute('hidden', '');\n      }\n    });\n\n    // Update indicator position\n    this._updateIndicator();\n  }\n\n  private _updateIndicator(): void {\n    if (this.variant !== 'underline') return;\n\n    const activeTab = this.querySelector('el-dm-tab[active]') as HTMLElement | null;\n    if (!activeTab) {\n      this._indicatorStyle = 'display: none;';\n      this.update();\n      return;\n    }\n\n    const tablist = this.shadowRoot?.querySelector('.tablist');\n    if (!tablist) return;\n\n    const tablistRect = tablist.getBoundingClientRect();\n    const tabRect = activeTab.getBoundingClientRect();\n\n    if (this.orientation === 'vertical') {\n      const top = tabRect.top - tablistRect.top;\n      this._indicatorStyle = `top: ${top}px; height: ${tabRect.height}px;`;\n    } else {\n      const left = tabRect.left - tablistRect.left;\n      this._indicatorStyle = `left: ${left}px; width: ${tabRect.width}px;`;\n    }\n\n    this.update();\n  }\n\n  render(): string {\n    const colorStyle = this.color\n      ? `--color-primary: var(--color-${this.color}, ${this.color});`\n      : '';\n\n    return `\n      <div\n        class=\"tablist\"\n        role=\"tablist\"\n        part=\"tablist\"\n        aria-orientation=\"${this.orientation || 'horizontal'}\"\n        style=\"${colorStyle}\"\n      >\n        <slot name=\"tab\"></slot>\n        <div class=\"indicator\" part=\"indicator\" style=\"${this._indicatorStyle}\"></div>\n      </div>\n      <div class=\"panels\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  update(): void {\n    super.update();\n\n    // Re-attach mutation observer after update\n    requestAnimationFrame(() => {\n      this._updateIndicator();\n    });\n  }\n}\n\n/**\n * DuskMoon Tab Element\n *\n * Individual tab button within el-dm-tabs.\n *\n * @element el-dm-tab\n *\n * @attr {string} tab-id - Unique identifier for this tab\n * @attr {boolean} disabled - Whether the tab is disabled\n *\n * @slot - Default slot for tab label\n *\n * @csspart tab - The tab button\n */\n\nconst tabStyles = css`\n  :host {\n    display: inline-flex;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  .tab {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.75rem 1rem;\n    border: none;\n    background: transparent;\n    color: var(--color-on-surface);\n    font-family: inherit;\n    font-size: 0.875rem;\n    font-weight: 500;\n    cursor: pointer;\n    white-space: nowrap;\n    transition:\n      color 150ms ease,\n      background-color 150ms ease,\n      border-color 150ms ease;\n    position: relative;\n  }\n\n  .tab:hover:not(:disabled) {\n    color: var(--color-primary);\n    background-color: var(--color-surface-variant);\n  }\n\n  .tab:focus-visible {\n    outline: 2px solid var(--color-primary);\n    outline-offset: -2px;\n    border-radius: 0.25rem;\n  }\n\n  .tab:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  :host([active]) .tab {\n    color: var(--color-primary);\n  }\n\n  /* Pills variant styles */\n  :host-context(el-dm-tabs[variant='pills']) .tab {\n    border-radius: 9999px;\n    padding: 0.5rem 1rem;\n  }\n\n  :host-context(el-dm-tabs[variant='pills'][active]) .tab,\n  :host([active]):host-context(el-dm-tabs[variant='pills']) .tab {\n    background-color: var(--color-primary);\n    color: var(--color-on-primary);\n  }\n\n  /* Enclosed variant styles */\n  :host-context(el-dm-tabs[variant='enclosed']) .tab {\n    border: 1px solid transparent;\n    border-bottom: none;\n    border-radius: 0.5rem 0.5rem 0 0;\n    margin-bottom: -1px;\n    padding: 0.75rem 1.25rem;\n  }\n\n  :host([active]):host-context(el-dm-tabs[variant='enclosed']) .tab {\n    border-color: var(--color-outline);\n    background-color: var(--color-surface);\n  }\n\n  /* Vertical orientation */\n  :host-context(el-dm-tabs[orientation='vertical']) .tab {\n    width: 100%;\n    justify-content: flex-start;\n  }\n\n  :host-context(el-dm-tabs[orientation='vertical'][variant='enclosed']) .tab {\n    border-radius: 0.5rem 0 0 0.5rem;\n    border: 1px solid transparent;\n    border-right: none;\n    margin-right: -1px;\n    margin-bottom: 0;\n  }\n\n  :host([active]):host-context(el-dm-tabs[orientation='vertical'][variant='enclosed']) .tab {\n    border-color: var(--color-outline);\n  }\n`;\n\nexport class ElDmTab extends BaseElement {\n  static properties = {\n    tabId: { type: String, reflect: true, attribute: 'tab-id' },\n    disabled: { type: Boolean, reflect: true },\n    active: { type: Boolean, reflect: true },\n  };\n\n  declare tabId: string;\n  declare disabled: boolean;\n  declare active: boolean;\n\n  constructor() {\n    super();\n    this.attachStyles(tabStyles);\n    this.slot = 'tab';\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'tab');\n    this.setAttribute('tabindex', this.active ? '0' : '-1');\n  }\n\n  private _handleClick(): void {\n    if (this.disabled) return;\n    this.emit('tab-click', { tabId: this.tabId }, { bubbles: true, composed: true });\n  }\n\n  render(): string {\n    return `\n      <button\n        class=\"tab\"\n        part=\"tab\"\n        ?disabled=\"${this.disabled}\"\n        aria-selected=\"${this.active}\"\n        aria-disabled=\"${this.disabled}\"\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  update(): void {\n    super.update();\n    const button = this.shadowRoot?.querySelector('button');\n    button?.addEventListener('click', this._handleClick.bind(this));\n  }\n}\n\n/**\n * DuskMoon Tab Panel Element\n *\n * Content panel for el-dm-tabs.\n *\n * @element el-dm-tab-panel\n *\n * @attr {string} panel-for - ID of the tab this panel belongs to\n *\n * @slot - Default slot for panel content\n *\n * @csspart panel - The panel container\n */\n\nconst panelStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  .panel {\n    padding: 1rem 0;\n  }\n`;\n\nexport class ElDmTabPanel extends BaseElement {\n  static properties = {\n    panelFor: { type: String, reflect: true, attribute: 'panel-for' },\n    active: { type: Boolean, reflect: true },\n  };\n\n  declare panelFor: string;\n  declare active: boolean;\n\n  constructor() {\n    super();\n    this.attachStyles(panelStyles);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'tabpanel');\n    if (!this.active) {\n      this.setAttribute('hidden', '');\n    }\n  }\n\n  render(): string {\n    return `\n      <div class=\"panel\" part=\"panel\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n",
+    "/**\n * @duskmoon-dev/el-tabs\n *\n * DuskMoon Tabs custom elements for tab navigation\n */\n\nimport { ElDmTabs, ElDmTab, ElDmTabPanel } from './el-dm-tabs.js';\n\nexport { ElDmTabs, ElDmTab, ElDmTabPanel };\nexport type { TabsVariant, TabsOrientation } from './el-dm-tabs.js';\n\n/**\n * Register all tab-related custom elements\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-tabs';\n * register();\n * ```\n */\nexport function register(): void {\n  if (!customElements.get('el-dm-tabs')) {\n    customElements.define('el-dm-tabs', ElDmTabs);\n  }\n  if (!customElements.get('el-dm-tab')) {\n    customElements.define('el-dm-tab', ElDmTab);\n  }\n  if (!customElements.get('el-dm-tab-panel')) {\n    customElements.define('el-dm-tab-panel', ElDmTabPanel);\n  }\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "AA944EC74C7ADE5164756E2164756E21",
+  "names": []
+}