@helixui/library 0.1.0

package/dist/shared/hx-tab-panel-8p6KfVzz.js

@@ -0,0 +1,470 @@
+import { css as x, LitElement as _, nothing as C, html as m } from "lit";
+import { property as c, state as g, customElement as y } from "lit/decorators.js";
+import { t as P } from "./lit-Dpo7RLp4.js";
+const O = x`
+  :host {
+    display: block;
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Container ─── */
+
+  .tabs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-tabs-gap, 0);
+  }
+
+  :host([orientation='vertical']) .tabs {
+    flex-direction: row;
+  }
+
+  /* ─── Tablist ─── */
+
+  .tablist {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 0;
+    border-bottom: var(--hx-tabs-border-width, 1px) solid
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .tablist::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* ─── Vertical Orientation ─── */
+
+  :host([orientation='vertical']) {
+    --_tab-indicator-bottom: 0px;
+    --_tab-indicator-end: var(--hx-tabs-indicator-size, 2px);
+    --_tab-indicator-bottom-color: transparent;
+    --_tab-indicator-end-color: var(
+      --hx-tabs-indicator-color,
+      var(--hx-color-primary-500, #2563eb)
+    );
+  }
+
+  :host([orientation='vertical']) .tablist {
+    flex-direction: column;
+    border-bottom: none;
+    border-inline-end: var(--hx-tabs-border-width, 1px) solid
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));
+    overflow-x: visible;
+    overflow-y: auto;
+    min-width: var(--hx-tabs-vertical-width, 12rem);
+    flex-shrink: 0;
+  }
+
+  /* ─── Panels Container ─── */
+
+  .panels {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .tablist {
+      scroll-behavior: auto;
+    }
+  }
+`;
+var k = Object.defineProperty, z = Object.getOwnPropertyDescriptor, f = (t, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? z(e, a) : e, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (s = (i ? r(e, a, s) : r(s)) || s);
+  return i && s && k(e, a, s), s;
+};
+let D = 0, h = class extends _ {
+  constructor() {
+    super(...arguments), this._id = `hx-tabs-${++D}`, this.orientation = "horizontal", this.activation = "automatic", this.label = "", this._activePanel = "", this._cachedTabs = null, this._cachedPanels = null, this._observer = null, this._handleTabSelect = (t) => {
+      t.stopPropagation();
+      const e = t.composedPath().find((a) => a instanceof Element && a.tagName.toLowerCase() === "hx-tab");
+      e && this._activateTab(e);
+    }, this._handleSlotChange = () => {
+      if (this._cachedTabs = null, this._cachedPanels = null, this._syncTabsAndPanels(), !this._getPanels().some((a) => a.name === this._activePanel)) {
+        const a = this._getEnabledTabs()[0];
+        a ? this._activateTab(a, !1) : this._activePanel = "";
+      }
+    }, this._handleKeydown = (t) => {
+      var w, S, T, E;
+      const e = this._getEnabledTabs();
+      if (e.length === 0)
+        return;
+      const a = this.orientation === "horizontal", i = a ? "ArrowLeft" : "ArrowUp", s = a ? "ArrowRight" : "ArrowDown";
+      if (![i, s, "Home", "End", " ", "Enter"].includes(t.key))
+        return;
+      const r = e.find((p) => p === document.activeElement);
+      if (t.key === " " || t.key === "Enter") {
+        r && (t.preventDefault(), this._activateTab(r), (S = (w = r.shadowRoot) == null ? void 0 : w.querySelector("button")) == null || S.focus());
+        return;
+      }
+      t.preventDefault();
+      let n = r ? e.indexOf(r) : -1;
+      if (n === -1) {
+        const p = e.find((A) => A.panel === this._activePanel);
+        n = p ? e.indexOf(p) : 0;
+      }
+      let b;
+      t.key === "Home" ? b = 0 : t.key === "End" ? b = e.length - 1 : t.key === s ? b = (n + 1) % e.length : b = n <= 0 ? e.length - 1 : n - 1;
+      const u = e[b];
+      u && ((E = (T = u.shadowRoot) == null ? void 0 : T.querySelector("button")) == null || E.focus(), this.activation === "automatic" && this._activateTab(u));
+    };
+  }
+  // ─── Public API ───
+  /**
+   * Gets or sets the zero-based index of the currently selected tab.
+   * Setting this programmatically activates the tab at the given index.
+   */
+  get selectedIndex() {
+    return this._getTabs().findIndex((t) => t.panel === this._activePanel);
+  }
+  set selectedIndex(t) {
+    const e = this._getTabs()[t];
+    e && !e.disabled && this._activateTab(e, !0);
+  }
+  _getTabs() {
+    return this._cachedTabs || (this._cachedTabs = Array.from(this.querySelectorAll(":scope > hx-tab"))), this._cachedTabs;
+  }
+  _getPanels() {
+    return this._cachedPanels || (this._cachedPanels = Array.from(
+      this.querySelectorAll(":scope > hx-tab-panel")
+    )), this._cachedPanels;
+  }
+  _getEnabledTabs() {
+    return this._getTabs().filter((t) => !t.disabled);
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("hx-tab-select", this._handleTabSelect), this.addEventListener("keydown", this._handleKeydown), this._observer = new MutationObserver(() => {
+      this._cachedTabs = null, this._cachedPanels = null, this._syncTabsAndPanels();
+    }), this._observer.observe(this, {
+      subtree: !0,
+      attributeFilter: ["panel", "name"]
+    });
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), this.removeEventListener("hx-tab-select", this._handleTabSelect), this.removeEventListener("keydown", this._handleKeydown), (t = this._observer) == null || t.disconnect(), this._observer = null;
+  }
+  firstUpdated() {
+    if (this._syncTabsAndPanels(), !this._activePanel) {
+      const t = this._getEnabledTabs()[0];
+      t && this._activateTab(t, !1);
+    }
+  }
+  updated(t) {
+    super.updated(t), t.has("_activePanel") && this._updateTabsAndPanels();
+  }
+  // ─── Tab / Panel Sync ───
+  _syncTabsAndPanels() {
+    const t = this._getTabs(), e = this._getPanels();
+    t.forEach((a, i) => {
+      const s = a.id || `hx-tab-${this._id}-${i}`;
+      a.id = s;
+      const o = a.panel, r = e.find((n) => n.name === o) ?? e[i];
+      if (r) {
+        const n = r.id || `hx-panel-${this._id}-${i}`;
+        r.id = n, a.controls = n, r.setAttribute("aria-labelledby", s);
+      }
+    }), this._updateTabsAndPanels();
+  }
+  _updateTabsAndPanels() {
+    const t = this._getTabs(), e = this._getPanels();
+    t.forEach((a) => {
+      const i = a.panel === this._activePanel;
+      a.selected = i, a.tabIndex = i ? 0 : -1;
+    }), e.forEach((a) => {
+      a.name === this._activePanel ? (a.removeAttribute("hidden"), a.setAttribute("tabindex", "0")) : (a.setAttribute("hidden", ""), a.setAttribute("tabindex", "-1"));
+    });
+  }
+  // ─── Tab Activation ───
+  _activateTab(t, e = !0) {
+    if (t.disabled)
+      return;
+    const a = this._getTabs(), i = this._activePanel;
+    if (this._activePanel = t.panel, e && i !== this._activePanel) {
+      const s = a.indexOf(t);
+      this.dispatchEvent(
+        new CustomEvent("hx-tab-change", {
+          bubbles: !0,
+          composed: !0,
+          detail: { tabId: t.id, index: s }
+        })
+      );
+    }
+  }
+  // ─── Render ───
+  render() {
+    return m`
+      <div class="tabs">
+        <div
+          part="tablist"
+          class="tablist"
+          role="tablist"
+          aria-orientation=${this.orientation}
+          aria-label=${this.label || C}
+        >
+          <slot name="tab" @slotchange=${this._handleSlotChange}></slot>
+        </div>
+        <div part="panels" class="panels">
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+h.styles = [P, O];
+f([
+  c({ type: String, reflect: !0 })
+], h.prototype, "orientation", 2);
+f([
+  c({ type: String, attribute: "activation", reflect: !0 })
+], h.prototype, "activation", 2);
+f([
+  c({ type: String, reflect: !0 })
+], h.prototype, "label", 2);
+f([
+  g()
+], h.prototype, "_activePanel", 2);
+h = f([
+  y("hx-tabs")
+], h);
+const I = x`
+  :host {
+    display: inline-block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    padding: var(--hx-tabs-tab-padding-y, var(--hx-space-2, 0.5rem))
+      var(--hx-tabs-tab-padding-x, var(--hx-space-4, 1rem));
+    border: none;
+    border-bottom: var(--_tab-indicator-bottom, var(--hx-tabs-indicator-size, 2px)) solid
+      transparent;
+    border-inline-end: var(--_tab-indicator-end, 0px) solid transparent;
+    background: none;
+    font-family: var(--hx-tabs-tab-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-tabs-tab-font-size, var(--hx-font-size-md, 1rem));
+    font-weight: var(--hx-tabs-tab-font-weight, var(--hx-font-weight-medium, 500));
+    color: var(--hx-tabs-tab-color, var(--hx-color-neutral-600, #495057));
+    line-height: var(--hx-line-height-tight, 1.25);
+    cursor: pointer;
+    white-space: nowrap;
+    user-select: none;
+    -webkit-user-select: none;
+    transition:
+      color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease),
+      border-inline-end-color var(--hx-transition-fast, 150ms ease),
+      background-color var(--hx-transition-fast, 150ms ease);
+    position: relative;
+  }
+
+  /* ─── Hover State ─── */
+
+  .tab:not([aria-selected='true']):not([aria-disabled='true']):hover {
+    color: var(--hx-tabs-tab-hover-color, var(--hx-color-neutral-800, #212529));
+    background-color: var(--hx-tabs-tab-hover-bg, var(--hx-color-neutral-50, #f8f9fa));
+  }
+
+  /* ─── Selected State ─── */
+
+  .tab[aria-selected='true'] {
+    color: var(--hx-tabs-tab-active-color, var(--hx-color-primary-600, #1d4ed8));
+    border-bottom-color: var(
+      --_tab-indicator-bottom-color,
+      var(--hx-tabs-indicator-color, var(--hx-color-primary-500, #2563eb))
+    );
+    border-inline-end-color: var(--_tab-indicator-end-color, transparent);
+    font-weight: var(--hx-tabs-tab-active-font-weight, var(--hx-font-weight-semibold, 600));
+  }
+
+  /* ─── Focus State ─── */
+
+  .tab:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 0.125rem);
+  }
+
+  /* ─── Disabled State ─── */
+
+  .tab[aria-disabled='true'] {
+    cursor: not-allowed;
+    color: var(--hx-color-neutral-400, #adb5bd);
+  }
+
+  /* ─── Prefix / Suffix Slots ─── */
+
+  .tab__prefix,
+  .tab__suffix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .tab {
+      transition: none;
+    }
+  }
+`;
+var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, d = (t, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? K(e, a) : e, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (s = (i ? r(e, a, s) : r(s)) || s);
+  return i && s && H(e, a, s), s;
+};
+let l = class extends _ {
+  constructor() {
+    super(...arguments), this.panel = "", this.selected = !1, this.disabled = !1, this.controls = "", this._hasPrefixSlot = !1, this._hasSuffixSlot = !1;
+  }
+  // ─── Event Handling ───
+  _handleClick() {
+    this.disabled || this.dispatchEvent(
+      new CustomEvent("hx-tab-select", {
+        bubbles: !0,
+        composed: !0,
+        detail: { panel: this.panel }
+      })
+    );
+  }
+  _handlePrefixSlotChange(t) {
+    const e = t.target;
+    this._hasPrefixSlot = e.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _handleSuffixSlotChange(t) {
+    const e = t.target;
+    this._hasSuffixSlot = e.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  // ─── Render ───
+  render() {
+    return m`
+      <button
+        part="tab"
+        class="tab"
+        role="tab"
+        aria-selected=${this.selected ? "true" : "false"}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-controls=${this.controls || C}
+        tabindex=${this.selected ? "0" : "-1"}
+        @click=${this._handleClick}
+      >
+        <span part="prefix" class="tab__prefix" ?hidden=${!this._hasPrefixSlot}>
+          <slot name="prefix" @slotchange=${this._handlePrefixSlotChange}></slot>
+        </span>
+        <slot></slot>
+        <span part="suffix" class="tab__suffix" ?hidden=${!this._hasSuffixSlot}>
+          <slot name="suffix" @slotchange=${this._handleSuffixSlotChange}></slot>
+        </span>
+      </button>
+    `;
+  }
+};
+l.styles = [P, I];
+d([
+  c({ type: String, reflect: !0 })
+], l.prototype, "panel", 2);
+d([
+  c({ type: Boolean, reflect: !0 })
+], l.prototype, "selected", 2);
+d([
+  c({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+d([
+  c({ type: String, attribute: !1 })
+], l.prototype, "controls", 2);
+d([
+  g()
+], l.prototype, "_hasPrefixSlot", 2);
+d([
+  g()
+], l.prototype, "_hasSuffixSlot", 2);
+l = d([
+  y("hx-tab")
+], l);
+const L = x`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  :host(:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-sm, 0.125rem);
+  }
+
+  .panel {
+    padding: var(--hx-tabs-panel-padding, var(--hx-space-4, 1rem));
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-md, 1rem);
+    color: var(--hx-tabs-panel-color, var(--hx-color-neutral-700, #343a40));
+    line-height: var(--hx-line-height-normal, 1.5);
+    outline: none;
+  }
+`;
+var j = Object.defineProperty, N = Object.getOwnPropertyDescriptor, $ = (t, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? N(e, a) : e, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (s = (i ? r(e, a, s) : r(s)) || s);
+  return i && s && j(e, a, s), s;
+};
+let v = class extends _ {
+  constructor() {
+    super(...arguments), this.name = "";
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "tabpanel");
+  }
+  // ─── Render ───
+  render() {
+    return m`
+      <div part="panel" class="panel">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+v.styles = [P, L];
+$([
+  c({ type: String, reflect: !0 })
+], v.prototype, "name", 2);
+v = $([
+  y("hx-tab-panel")
+], v);
+export {
+  l as H,
+  v as a,
+  h as b
+};
+//# sourceMappingURL=hx-tab-panel-8p6KfVzz.js.map

package/dist/shared/hx-tab-panel-8p6KfVzz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-tab-panel-8p6KfVzz.js","sources":["../../src/components/hx-tabs/hx-tabs.styles.ts","../../src/components/hx-tabs/hx-tabs.ts","../../src/components/hx-tabs/hx-tab.styles.ts","../../src/components/hx-tabs/hx-tab.ts","../../src/components/hx-tabs/hx-tab-panel.styles.ts","../../src/components/hx-tabs/hx-tab-panel.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTabsStyles = css`\n  :host {\n    display: block;\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Container ─── */\n\n  .tabs {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-tabs-gap, 0);\n  }\n\n  :host([orientation='vertical']) .tabs {\n    flex-direction: row;\n  }\n\n  /* ─── Tablist ─── */\n\n  .tablist {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    gap: 0;\n    border-bottom: var(--hx-tabs-border-width, 1px) solid\n      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .tablist::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* ─── Vertical Orientation ─── */\n\n  :host([orientation='vertical']) {\n    --_tab-indicator-bottom: 0px;\n    --_tab-indicator-end: var(--hx-tabs-indicator-size, 2px);\n    --_tab-indicator-bottom-color: transparent;\n    --_tab-indicator-end-color: var(\n      --hx-tabs-indicator-color,\n      var(--hx-color-primary-500, #2563eb)\n    );\n  }\n\n  :host([orientation='vertical']) .tablist {\n    flex-direction: column;\n    border-bottom: none;\n    border-inline-end: var(--hx-tabs-border-width, 1px) solid\n      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));\n    overflow-x: visible;\n    overflow-y: auto;\n    min-width: var(--hx-tabs-vertical-width, 12rem);\n    flex-shrink: 0;\n  }\n\n  /* ─── Panels Container ─── */\n\n  .panels {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .tablist {\n      scroll-behavior: auto;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTabsStyles } from './hx-tabs.styles.js';\nimport type { HelixTab } from './hx-tab.js';\nimport type { HelixTabPanel } from './hx-tab-panel.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxTabsIdCounter = 0;\n\n/**\n * A tabbed content organizer that manages a set of `<hx-tab>` and `<hx-tab-panel>` children.\n * Supports horizontal and vertical orientations, automatic and manual activation modes,\n * and full keyboard navigation per the ARIA Authoring Practices Guide.\n *\n * @summary Tab container that organizes content into selectable panels.\n *\n * @tag hx-tabs\n *\n * @slot tab - Slot for `<hx-tab>` elements. Rendered inside the tablist.\n * @slot - Default slot for `<hx-tab-panel>` elements.\n *\n * @fires {CustomEvent<{tabId: string, index: number}>} hx-tab-change - Dispatched when the active tab changes.\n *\n * @csspart tablist - The tablist container element.\n * @csspart panels - The panel content container element.\n *\n * @cssprop [--hx-tabs-border-color=var(--hx-color-neutral-200, #e9ecef)] - Tablist border color.\n * @cssprop [--hx-tabs-border-width=1px] - Tablist border width.\n * @cssprop [--hx-tabs-vertical-width=12rem] - Width of the tablist in vertical orientation.\n * @cssprop [--hx-tabs-gap=0] - Gap between the tablist and panels container.\n * @cssprop [--hx-tabs-tab-color=var(--hx-color-neutral-600, #495057)] - Inactive tab text color.\n * @cssprop [--hx-tabs-tab-active-color=var(--hx-color-primary-600, #1d4ed8)] - Active tab text color.\n * @cssprop [--hx-tabs-tab-hover-color=var(--hx-color-neutral-800, #212529)] - Tab hover text color.\n * @cssprop [--hx-tabs-tab-hover-bg=var(--hx-color-neutral-50, #f8f9fa)] - Tab hover background.\n * @cssprop [--hx-tabs-tab-font-size=var(--hx-font-size-md, 1rem)] - Tab font size.\n * @cssprop [--hx-tabs-tab-font-weight=var(--hx-font-weight-medium, 500)] - Tab font weight.\n * @cssprop [--hx-tabs-tab-active-font-weight=var(--hx-font-weight-semibold, 600)] - Active tab font weight.\n * @cssprop [--hx-tabs-tab-padding-x=var(--hx-space-4, 1rem)] - Horizontal tab padding.\n * @cssprop [--hx-tabs-tab-padding-y=var(--hx-space-2, 0.5rem)] - Vertical tab padding.\n * @cssprop [--hx-tabs-indicator-color=var(--hx-color-primary-500, #2563eb)] - Active indicator color.\n * @cssprop [--hx-tabs-indicator-size=2px] - Active indicator thickness.\n * @cssprop [--hx-tabs-focus-ring-color=var(--hx-focus-ring-color, #2563eb)] - Focus ring color for tabs and panels.\n * @cssprop [--hx-tabs-panel-padding=var(--hx-space-4, 1rem)] - Panel inner padding.\n * @cssprop [--hx-tabs-panel-color=var(--hx-color-neutral-700, #343a40)] - Panel text color.\n */\n@customElement('hx-tabs')\nexport class HelixTabs extends LitElement {\n  static override styles = [tokenStyles, helixTabsStyles];\n\n  // ─── Internal ID ───\n\n  /** @internal */\n  private _id = `hx-tabs-${++_hxTabsIdCounter}`;\n\n  // ─── Properties ───\n\n  /**\n   * The layout orientation of the tabs.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Controls how keyboard navigation activates tabs.\n   * In `automatic` mode, focus also activates the tab.\n   * In `manual` mode, focus moves independently; Space or Enter activates.\n   * @attr activation\n   */\n  @property({ type: String, attribute: 'activation', reflect: true })\n  activation: 'manual' | 'automatic' = 'automatic';\n\n  /**\n   * Accessible label for the tablist. Rendered as `aria-label` on the tablist container.\n   * Provide a brief description of what the tabs represent (e.g., \"Patient record sections\").\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  // ─── State ───\n\n  /** @internal */\n  @state() private _activePanel = '';\n\n  // ─── Child Accessors ───\n\n  /** @internal */\n  private _cachedTabs: HelixTab[] | null = null;\n  /** @internal */\n  private _cachedPanels: HelixTabPanel[] | null = null;\n  /** @internal */\n  private _observer: MutationObserver | null = null;\n\n  // ─── Public API ───\n\n  /**\n   * Gets or sets the zero-based index of the currently selected tab.\n   * Setting this programmatically activates the tab at the given index.\n   */\n  get selectedIndex(): number {\n    return this._getTabs().findIndex((tab) => tab.panel === this._activePanel);\n  }\n\n  set selectedIndex(index: number) {\n    const tab = this._getTabs()[index];\n    if (tab && !tab.disabled) {\n      this._activateTab(tab, true);\n    }\n  }\n\n  private _getTabs(): HelixTab[] {\n    if (!this._cachedTabs) {\n      this._cachedTabs = Array.from(this.querySelectorAll(':scope > hx-tab')) as HelixTab[];\n    }\n    return this._cachedTabs;\n  }\n\n  private _getPanels(): HelixTabPanel[] {\n    if (!this._cachedPanels) {\n      this._cachedPanels = Array.from(\n        this.querySelectorAll(':scope > hx-tab-panel'),\n      ) as HelixTabPanel[];\n    }\n    return this._cachedPanels;\n  }\n\n  private _getEnabledTabs(): HelixTab[] {\n    return this._getTabs().filter((tab) => !tab.disabled);\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('hx-tab-select', this._handleTabSelect as EventListener);\n    this.addEventListener('keydown', this._handleKeydown);\n    // Watch for panel/name attribute changes on child tabs and panels\n    this._observer = new MutationObserver(() => {\n      this._cachedTabs = null;\n      this._cachedPanels = null;\n      this._syncTabsAndPanels();\n    });\n    this._observer.observe(this, {\n      subtree: true,\n      attributeFilter: ['panel', 'name'],\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('hx-tab-select', this._handleTabSelect as EventListener);\n    this.removeEventListener('keydown', this._handleKeydown);\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  override firstUpdated(): void {\n    this._syncTabsAndPanels();\n    // Activate the first enabled tab if none is selected\n    if (!this._activePanel) {\n      const firstEnabled = this._getEnabledTabs()[0];\n      if (firstEnabled) {\n        this._activateTab(firstEnabled, false);\n      }\n    }\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_activePanel')) {\n      this._updateTabsAndPanels();\n    }\n  }\n\n  // ─── Tab / Panel Sync ───\n\n  private _syncTabsAndPanels(): void {\n    const tabs = this._getTabs();\n    const panels = this._getPanels();\n\n    tabs.forEach((tab, i) => {\n      const tabId = tab.id || `hx-tab-${this._id}-${i}`;\n      tab.id = tabId;\n\n      // Connect tab to its panel by aria-controls\n      const panelName = tab.panel;\n      const panel = panels.find((p) => p.name === panelName) ?? panels[i];\n      if (panel) {\n        const panelId = panel.id || `hx-panel-${this._id}-${i}`;\n        panel.id = panelId;\n        // Set controls on the tab so aria-controls lands on the inner button (role=\"tab\")\n        tab.controls = panelId;\n        panel.setAttribute('aria-labelledby', tabId);\n      }\n    });\n\n    this._updateTabsAndPanels();\n  }\n\n  private _updateTabsAndPanels(): void {\n    const tabs = this._getTabs();\n    const panels = this._getPanels();\n\n    tabs.forEach((tab) => {\n      const isSelected = tab.panel === this._activePanel;\n      tab.selected = isSelected;\n      // Tabindex is managed by the inner button in hx-tab via the `selected` property.\n      // We also set it on the host for the roving tabindex pattern so document.activeElement\n      // comparisons work correctly when the inner button is focused.\n      tab.tabIndex = isSelected ? 0 : -1;\n    });\n\n    panels.forEach((panel) => {\n      const isActive = panel.name === this._activePanel;\n      if (isActive) {\n        panel.removeAttribute('hidden');\n        panel.setAttribute('tabindex', '0');\n      } else {\n        panel.setAttribute('hidden', '');\n        panel.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  // ─── Tab Activation ───\n\n  private _activateTab(tab: HelixTab, dispatchEvent = true): void {\n    if (tab.disabled) {\n      return;\n    }\n\n    const tabs = this._getTabs();\n    const previousPanel = this._activePanel;\n    this._activePanel = tab.panel;\n\n    if (dispatchEvent && previousPanel !== this._activePanel) {\n      const index = tabs.indexOf(tab);\n      /**\n       * Dispatched when the active tab changes.\n       * @event hx-tab-change\n       */\n      this.dispatchEvent(\n        new CustomEvent('hx-tab-change', {\n          bubbles: true,\n          composed: true,\n          detail: { tabId: tab.id, index },\n        }),\n      );\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleTabSelect = (e: CustomEvent<{ panel: string }>): void => {\n    e.stopPropagation();\n    const tab = e\n      .composedPath()\n      .find((el): el is HelixTab => el instanceof Element && el.tagName.toLowerCase() === 'hx-tab');\n    if (tab) {\n      this._activateTab(tab);\n    }\n  };\n\n  /** @internal */\n  private _handleSlotChange = (): void => {\n    this._cachedTabs = null;\n    this._cachedPanels = null;\n    this._syncTabsAndPanels();\n    // If the active panel was removed, fall back to the first enabled tab\n    const panels = this._getPanels();\n    const activePanelExists = panels.some((p) => p.name === this._activePanel);\n    if (!activePanelExists) {\n      const firstEnabled = this._getEnabledTabs()[0];\n      if (firstEnabled) {\n        this._activateTab(firstEnabled, false);\n      } else {\n        this._activePanel = '';\n      }\n    }\n  };\n\n  /** @internal */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    const enabledTabs = this._getEnabledTabs();\n    if (enabledTabs.length === 0) {\n      return;\n    }\n\n    const isHorizontal = this.orientation === 'horizontal';\n    const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n    const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n\n    const isNavigationKey = [prevKey, nextKey, 'Home', 'End', ' ', 'Enter'].includes(e.key);\n    if (!isNavigationKey) {\n      return;\n    }\n\n    // Determine focused tab — when a button inside shadow DOM is focused,\n    // document.activeElement returns the shadow host (hx-tab), not the inner button.\n    const focusedTab = enabledTabs.find((tab) => tab === document.activeElement);\n\n    if (e.key === ' ' || e.key === 'Enter') {\n      if (focusedTab) {\n        e.preventDefault();\n        this._activateTab(focusedTab);\n        focusedTab.shadowRoot?.querySelector('button')?.focus();\n      }\n      return;\n    }\n\n    e.preventDefault();\n\n    let currentIndex = focusedTab ? enabledTabs.indexOf(focusedTab) : -1;\n    // Fall back to the active tab's index if nothing is focused yet\n    if (currentIndex === -1) {\n      const activeTab = enabledTabs.find((tab) => tab.panel === this._activePanel);\n      currentIndex = activeTab ? enabledTabs.indexOf(activeTab) : 0;\n    }\n\n    let nextIndex: number;\n\n    if (e.key === 'Home') {\n      nextIndex = 0;\n    } else if (e.key === 'End') {\n      nextIndex = enabledTabs.length - 1;\n    } else if (e.key === nextKey) {\n      nextIndex = (currentIndex + 1) % enabledTabs.length;\n    } else {\n      // prevKey\n      nextIndex = currentIndex <= 0 ? enabledTabs.length - 1 : currentIndex - 1;\n    }\n\n    const targetTab = enabledTabs[nextIndex];\n    if (!targetTab) {\n      return;\n    }\n\n    // Focus the tab button inside the shadow root\n    targetTab.shadowRoot?.querySelector('button')?.focus();\n\n    if (this.activation === 'automatic') {\n      this._activateTab(targetTab);\n    }\n  };\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div class=\"tabs\">\n        <div\n          part=\"tablist\"\n          class=\"tablist\"\n          role=\"tablist\"\n          aria-orientation=${this.orientation}\n          aria-label=${this.label || nothing}\n        >\n          <slot name=\"tab\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div part=\"panels\" class=\"panels\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tabs': HelixTabs;\n  }\n}\n","import { css } from 'lit';\n\nexport const helixTabStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .tab {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    padding: var(--hx-tabs-tab-padding-y, var(--hx-space-2, 0.5rem))\n      var(--hx-tabs-tab-padding-x, var(--hx-space-4, 1rem));\n    border: none;\n    border-bottom: var(--_tab-indicator-bottom, var(--hx-tabs-indicator-size, 2px)) solid\n      transparent;\n    border-inline-end: var(--_tab-indicator-end, 0px) solid transparent;\n    background: none;\n    font-family: var(--hx-tabs-tab-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-tabs-tab-font-size, var(--hx-font-size-md, 1rem));\n    font-weight: var(--hx-tabs-tab-font-weight, var(--hx-font-weight-medium, 500));\n    color: var(--hx-tabs-tab-color, var(--hx-color-neutral-600, #495057));\n    line-height: var(--hx-line-height-tight, 1.25);\n    cursor: pointer;\n    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n    transition:\n      color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      border-inline-end-color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease);\n    position: relative;\n  }\n\n  /* ─── Hover State ─── */\n\n  .tab:not([aria-selected='true']):not([aria-disabled='true']):hover {\n    color: var(--hx-tabs-tab-hover-color, var(--hx-color-neutral-800, #212529));\n    background-color: var(--hx-tabs-tab-hover-bg, var(--hx-color-neutral-50, #f8f9fa));\n  }\n\n  /* ─── Selected State ─── */\n\n  .tab[aria-selected='true'] {\n    color: var(--hx-tabs-tab-active-color, var(--hx-color-primary-600, #1d4ed8));\n    border-bottom-color: var(\n      --_tab-indicator-bottom-color,\n      var(--hx-tabs-indicator-color, var(--hx-color-primary-500, #2563eb))\n    );\n    border-inline-end-color: var(--_tab-indicator-end-color, transparent);\n    font-weight: var(--hx-tabs-tab-active-font-weight, var(--hx-font-weight-semibold, 600));\n  }\n\n  /* ─── Focus State ─── */\n\n  .tab:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.125rem);\n  }\n\n  /* ─── Disabled State ─── */\n\n  .tab[aria-disabled='true'] {\n    cursor: not-allowed;\n    color: var(--hx-color-neutral-400, #adb5bd);\n  }\n\n  /* ─── Prefix / Suffix Slots ─── */\n\n  .tab__prefix,\n  .tab__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .tab {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTabStyles } from './hx-tab.styles.js';\n\n/**\n * An individual tab button, designed to be used inside an `<hx-tabs>` container.\n * Must be placed in the `tab` named slot of `<hx-tabs>`.\n *\n * @summary Presentational tab button that activates a corresponding panel.\n *\n * @tag hx-tab\n *\n * @slot - Default slot for the tab label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @csspart tab - The underlying button element.\n * @csspart prefix - The container for prefix slot content (e.g. icons).\n * @csspart suffix - The container for suffix slot content (e.g. badges).\n *\n * @cssprop [--hx-tabs-tab-color=var(--hx-color-neutral-600, #495057)] - Inactive tab text color.\n * @cssprop [--hx-tabs-tab-active-color=var(--hx-color-primary-600, #1d4ed8)] - Active tab text color.\n * @cssprop [--hx-tabs-tab-hover-color=var(--hx-color-neutral-800, #212529)] - Tab hover text color.\n * @cssprop [--hx-tabs-tab-hover-bg=var(--hx-color-neutral-50, #f8f9fa)] - Tab hover background.\n * @cssprop [--hx-tabs-tab-font-size=var(--hx-font-size-md, 1rem)] - Tab font size.\n * @cssprop [--hx-tabs-tab-font-weight=var(--hx-font-weight-medium, 500)] - Tab font weight.\n * @cssprop [--hx-tabs-tab-active-font-weight=var(--hx-font-weight-semibold, 600)] - Active tab font weight.\n * @cssprop [--hx-tabs-tab-padding-x=var(--hx-space-4, 1rem)] - Horizontal tab padding.\n * @cssprop [--hx-tabs-tab-padding-y=var(--hx-space-2, 0.5rem)] - Vertical tab padding.\n * @cssprop [--hx-tabs-indicator-color=var(--hx-color-primary-500, #2563eb)] - Active indicator color.\n * @cssprop [--hx-tabs-indicator-size=2px] - Active indicator thickness.\n * @cssprop [--hx-tabs-focus-ring-color=var(--hx-focus-ring-color, #2563eb)] - Focus ring color.\n */\n@customElement('hx-tab')\nexport class HelixTab extends LitElement {\n  static override styles = [tokenStyles, helixTabStyles];\n\n  // ─── Properties ───\n\n  /**\n   * The name of the `<hx-tab-panel>` this tab controls. Must match the `name`\n   * attribute on the corresponding `<hx-tab-panel>`.\n   * @attr panel\n   */\n  @property({ type: String, reflect: true })\n  panel = '';\n\n  /**\n   * Whether this tab is currently selected. Managed by the parent `<hx-tabs>`.\n   * @attr selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Whether this tab is disabled. Prevents selection and keyboard navigation.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The id of the panel this tab controls. Set by the parent `<hx-tabs>` to establish the\n   * aria-controls relationship on the inner button element (which carries role=\"tab\").\n   * @internal\n   */\n  @property({ type: String, attribute: false })\n  controls = '';\n\n  // ─── Slot Visibility ───\n\n  /** @internal */\n  @state() private _hasPrefixSlot = false;\n  /** @internal */\n  @state() private _hasSuffixSlot = false;\n\n  // ─── Event Handling ───\n\n  private _handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n    /**\n     * Internal event dispatched to signal tab selection to the parent container.\n     * Not part of the public API.\n     * @internal\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-tab-select', {\n        bubbles: true,\n        composed: true,\n        detail: { panel: this.panel },\n      }),\n    );\n  }\n\n  private _handlePrefixSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasPrefixSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _handleSuffixSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSuffixSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <button\n        part=\"tab\"\n        class=\"tab\"\n        role=\"tab\"\n        aria-selected=${this.selected ? 'true' : 'false'}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        aria-controls=${this.controls || nothing}\n        tabindex=${this.selected ? '0' : '-1'}\n        @click=${this._handleClick}\n      >\n        <span part=\"prefix\" class=\"tab__prefix\" ?hidden=${!this._hasPrefixSlot}>\n          <slot name=\"prefix\" @slotchange=${this._handlePrefixSlotChange}></slot>\n        </span>\n        <slot></slot>\n        <span part=\"suffix\" class=\"tab__suffix\" ?hidden=${!this._hasSuffixSlot}>\n          <slot name=\"suffix\" @slotchange=${this._handleSuffixSlotChange}></slot>\n        </span>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tab': HelixTab;\n  }\n}\n","import { css } from 'lit';\n\nexport const helixTabPanelStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  :host(:focus-visible) {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.125rem);\n  }\n\n  .panel {\n    padding: var(--hx-tabs-panel-padding, var(--hx-space-4, 1rem));\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-font-size-md, 1rem);\n    color: var(--hx-tabs-panel-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n    outline: none;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTabPanelStyles } from './hx-tab-panel.styles.js';\n\n/**\n * A content panel associated with an `<hx-tab>`, managed by a parent `<hx-tabs>`.\n *\n * @summary Tab content panel shown when its corresponding tab is selected.\n *\n * @tag hx-tab-panel\n *\n * @slot - Default slot for panel content.\n *\n * @csspart panel - The panel content wrapper.\n *\n * @cssprop [--hx-tabs-panel-padding=var(--hx-space-4, 1rem)] - Panel inner padding.\n * @cssprop [--hx-tabs-panel-color=var(--hx-color-neutral-700, #343a40)] - Panel text color.\n * @cssprop [--hx-tabs-focus-ring-color=var(--hx-focus-ring-color, #2563eb)] - Focus ring color.\n */\n@customElement('hx-tab-panel')\nexport class HelixTabPanel extends LitElement {\n  static override styles = [tokenStyles, helixTabPanelStyles];\n\n  // ─── Properties ───\n\n  /**\n   * The name that corresponds to the `panel` attribute on the associated `<hx-tab>`.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'tabpanel');\n    // tabindex is managed dynamically by the parent hx-tabs component:\n    // active panels get tabindex=\"0\", hidden panels get tabindex=\"-1\"\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div part=\"panel\" class=\"panel\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tab-panel': HelixTabPanel;\n  }\n}\n"],"names":["helixTabsStyles","css","_hxTabsIdCounter","HelixTabs","LitElement","e","tab","el","p","firstEnabled","enabledTabs","isHorizontal","prevKey","nextKey","focusedTab","_b","_a","currentIndex","activeTab","nextIndex","targetTab","_d","_c","index","changedProperties","tabs","panels","tabId","panelName","panel","panelId","isSelected","dispatchEvent","previousPanel","html","nothing","tokenStyles","__decorateClass","property","state","customElement","helixTabStyles","HelixTab","slot","helixTabPanelStyles","HelixTabPanel"],"mappings":"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"}