@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/tabs-CDf79ZXn.js

@@ -0,0 +1,523 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./icon-SU3ebQcn.js";
+import { LitElement as n, css as r, html as i, nothing as a } from "lit";
+import { customElement as o, property as s, queryAssignedElements as c, state as l } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { repeat as d } from "lit/directives/repeat.js";
+//#region source/components/tabs/tabs.style.ts
+var f = r`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .tabs {
+    font-family: var(--bp-font-family);
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Tablist - horizontal by default */
+  .tablist {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--bp-spacing-xs);
+    border-bottom: var(--bp-border-width) solid var(--bp-color-border);
+    padding-bottom: var(--bp-spacing-xs);
+  }
+
+  /* Tab button base */
+  .tab {
+    /* Reset */
+    appearance: none;
+    border: none;
+    background: transparent;
+    margin: 0;
+
+    /* Layout */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--bp-spacing-xs);
+    cursor: pointer;
+    flex-shrink: 0;
+
+    /* Typography */
+    font-family: var(--bp-font-family);
+    font-weight: var(--bp-font-weight-medium);
+    white-space: nowrap;
+
+    /* Visual */
+    color: var(--bp-color-text-muted);
+    border-radius: var(--bp-border-radius);
+    transition: all var(--bp-transition-fast);
+
+    /* Focus */
+    outline: none;
+  }
+
+  .tab__icon {
+    flex-shrink: 0;
+  }
+
+  .tab__label {
+    display: inline-block;
+  }
+
+  .tab__close {
+    /* Reset */
+    appearance: none;
+    border: none;
+    background: transparent;
+    padding: var(--bp-spacing-xs);
+    margin: calc(-1 * var(--bp-spacing-xs));
+    margin-left: var(--bp-spacing-xs);
+    cursor: pointer;
+    border-radius: var(--bp-border-radius);
+
+    /* Layout */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--bp-spacing-lg);
+    height: var(--bp-spacing-lg);
+
+    /* Visual */
+    color: var(--bp-color-text-muted);
+    transition: all var(--bp-transition-fast);
+  }
+
+  .tab__close svg {
+    width: var(--bp-spacing-md);
+    height: var(--bp-spacing-md);
+  }
+
+  .tab__close:hover {
+    background: var(--bp-color-surface);
+    color: var(--bp-color-text);
+  }
+
+  .tab__close:active {
+    transform: scale(0.95);
+  }
+
+  /* Panels container */
+  .panels {
+    flex: 1;
+    padding: var(--bp-spacing-md);
+  }
+
+  /* Sizes */
+  .tabs--sm .tab {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-sm);
+    line-height: var(--bp-line-height-tight);
+  }
+
+  .tabs--md .tab {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  .tabs--lg .tab {
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    font-size: var(--bp-font-size-lg);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  /* Default variant */
+  .tabs--default .tab--active {
+    color: var(--bp-color-primary);
+    background: var(--bp-color-surface);
+  }
+
+  .tabs--default .tab:hover:not(.tab--disabled):not(.tab--active) {
+    color: var(--bp-color-text);
+    background: var(--bp-color-surface-subdued);
+  }
+
+  .tab:active:not(.tab--disabled) {
+    opacity: 0.8;
+  }
+
+  /* Underline variant */
+  .tabs--underline .tablist {
+    gap: var(--bp-spacing-md);
+  }
+
+  .tabs--underline .tab {
+    border-radius: 0;
+    position: relative;
+    padding-bottom: var(--bp-spacing-sm);
+    margin-bottom: calc(-1 * var(--bp-spacing-xs) - var(--bp-border-width));
+  }
+
+  .tabs--underline .tab::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--bp-spacing-0-5);
+    background: transparent;
+    transition: background var(--bp-transition-fast);
+  }
+
+  .tabs--underline .tab--active::after {
+    background: var(--bp-color-primary);
+  }
+
+  .tabs--underline .tab--active {
+    color: var(--bp-color-primary);
+  }
+
+  .tabs--underline .tab:hover:not(.tab--disabled):not(.tab--active) {
+    color: var(--bp-color-text);
+  }
+
+  .tabs--underline .tab:hover:not(.tab--disabled):not(.tab--active)::after {
+    background: var(--bp-color-border);
+  }
+
+  /* Pills variant */
+  .tabs--pills .tablist {
+    border-bottom: none;
+    gap: var(--bp-spacing-xs);
+    padding-bottom: 0;
+    background: var(--bp-color-surface);
+    padding: var(--bp-spacing-xs);
+    border-radius: var(--bp-border-radius-large);
+  }
+
+  .tabs--pills .tab {
+    border-radius: var(--bp-border-radius);
+  }
+
+  .tabs--pills .tab--active {
+    background: var(--bp-color-background);
+    color: var(--bp-color-text);
+    box-shadow: var(--bp-shadow-sm);
+  }
+
+  .tabs--pills .tab:hover:not(.tab--disabled):not(.tab--active) {
+    color: var(--bp-color-text);
+  }
+
+  /* Placement: bottom */
+  .tabs--bottom {
+    flex-direction: column-reverse;
+  }
+
+  .tabs--bottom .tablist {
+    border-bottom: none;
+    border-top: var(--bp-border-width) solid var(--bp-color-border);
+    padding-bottom: 0;
+    padding-top: var(--bp-spacing-xs);
+  }
+
+  .tabs--bottom.tabs--underline .tab {
+    margin-bottom: 0;
+    margin-top: calc(-1 * var(--bp-spacing-xs) - var(--bp-border-width));
+    padding-bottom: var(--bp-spacing-sm);
+    padding-top: var(--bp-spacing-sm);
+  }
+
+  .tabs--bottom.tabs--underline .tab::after {
+    top: 0;
+    bottom: auto;
+  }
+
+  /* Placement: start (vertical left) */
+  .tabs--start {
+    flex-direction: row;
+  }
+
+  .tabs--start .tablist {
+    flex-direction: column;
+    border-bottom: none;
+    border-right: var(--bp-border-width) solid var(--bp-color-border);
+    padding-bottom: 0;
+    padding-right: var(--bp-spacing-xs);
+  }
+
+  .tabs--start .tab {
+    justify-content: flex-start;
+  }
+
+  .tabs--start.tabs--underline .tab {
+    margin-bottom: 0;
+    margin-right: calc(-1 * var(--bp-spacing-xs) - var(--bp-border-width));
+    padding-right: var(--bp-spacing-sm);
+  }
+
+  .tabs--start.tabs--underline .tab::after {
+    left: auto;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--bp-spacing-0-5);
+    height: auto;
+  }
+
+  /* Placement: end (vertical right) */
+  .tabs--end {
+    flex-direction: row-reverse;
+  }
+
+  .tabs--end .tablist {
+    flex-direction: column;
+    border-bottom: none;
+    border-left: var(--bp-border-width) solid var(--bp-color-border);
+    padding-bottom: 0;
+    padding-left: var(--bp-spacing-xs);
+  }
+
+  .tabs--end .tab {
+    justify-content: flex-start;
+  }
+
+  .tabs--end.tabs--underline .tab {
+    margin-bottom: 0;
+    margin-left: calc(-1 * var(--bp-spacing-xs) - var(--bp-border-width));
+    padding-left: var(--bp-spacing-sm);
+  }
+
+  .tabs--end.tabs--underline .tab::after {
+    right: auto;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--bp-spacing-0-5);
+    height: auto;
+  }
+
+  /* States */
+  .tab--disabled {
+    cursor: not-allowed;
+    opacity: var(--bp-opacity-disabled);
+    pointer-events: none;
+  }
+
+  .tabs--disabled .tab {
+    cursor: not-allowed;
+    opacity: var(--bp-opacity-disabled);
+    pointer-events: none;
+  }
+
+  .tab:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+`, p = class extends n {
+	static {
+		this.dependencies = [t];
+	}
+	static {
+		this.styles = [f];
+	}
+	constructor() {
+		super(), this.focusedTabId = null, this.handleSlotChange = () => {
+			if (!this.value && this.tabs.length > 0) {
+				let e = this.tabs.find((e) => !e.disabled);
+				e && (this.value = e.id);
+			} else if (!this.value) {
+				let e = this.getPanels();
+				e.length > 0 && (this.value = e[0].getAttribute("data-tab-id") || "");
+			}
+			this.updatePanelVisibility();
+		}, this.handleTabClick = (e, t) => {
+			t || this.disabled || this.selectTab(e);
+		}, this.handleTabKeyDown = (e, t) => {
+			if (this.disabled) return;
+			let n = this.getEnabledTabs(), r = n.findIndex((e) => e.id === t), i = r, a = !1;
+			switch (e.key) {
+				case "ArrowLeft":
+				case "ArrowUp":
+					e.preventDefault(), a = !0, i = r > 0 ? r - 1 : n.length - 1;
+					break;
+				case "ArrowRight":
+				case "ArrowDown":
+					e.preventDefault(), a = !0, i = r < n.length - 1 ? r + 1 : 0;
+					break;
+				case "Home":
+					e.preventDefault(), a = !0, i = 0;
+					break;
+				case "End":
+					e.preventDefault(), a = !0, i = n.length - 1;
+					break;
+				case "Enter":
+				case " ":
+					this.manual && this.focusedTabId && (e.preventDefault(), a = !0, this.selectTab(this.focusedTabId));
+					break;
+				case "Delete":
+				case "Backspace": this.tabs.find((e) => e.id === t)?.closable && (e.preventDefault(), a = !0, this.handleTabClose(e, t));
+			}
+			if (a && i !== r) {
+				let e = n[i];
+				e && (this.focusedTabId = e.id, this.focusTab(e.id), this.manual || this.selectTab(e.id));
+			}
+		}, this.handleTabClose = (e, t) => {
+			e.stopPropagation(), this.dispatchEvent(new CustomEvent("bp-tab-close", {
+				detail: { tabId: t },
+				bubbles: !0,
+				composed: !0
+			}));
+			let n = this.tabs.findIndex((e) => e.id === t);
+			if (this.tabs = this.tabs.filter((e) => e.id !== t), this.value === t && this.tabs.length > 0) {
+				let e = Math.min(n, this.tabs.length - 1);
+				this.value = this.tabs[e].id;
+			}
+		}, this.handleTabFocus = (e) => {
+			this.focusedTabId = e;
+		}, this.handleTabBlur = () => {
+			this.focusedTabId = null;
+		}, this.value = "", this.tabs = [], this.size = "md", this.variant = "default", this.placement = "top", this.disabled = !1, this.manual = !1;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "tablist");
+	}
+	updated(e) {
+		super.updated(e), e.has("value") && this.updatePanelVisibility();
+	}
+	getPanels() {
+		return this.panelElements.filter((e) => e.hasAttribute("data-tab-id") || e.tagName === "BP-TAB-PANEL");
+	}
+	getEnabledTabs() {
+		return this.tabs.filter((e) => !e.disabled);
+	}
+	updatePanelVisibility() {
+		this.getPanels().forEach((e) => {
+			let t = (e.getAttribute("data-tab-id") || "") === this.value;
+			e.hidden = !t, e.setAttribute("aria-hidden", String(!t)), t ? e.setAttribute("tabindex", "0") : e.removeAttribute("tabindex");
+		});
+	}
+	focusTab(e) {
+		(this.shadowRoot?.querySelector(`[data-tab-id="${e}"]`))?.focus();
+	}
+	selectTab(e) {
+		let t = this.value;
+		t !== e && (this.value = e, this.updatePanelVisibility(), this.dispatchEvent(new CustomEvent("bp-tab-change", {
+			detail: {
+				value: e,
+				previousValue: t
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	renderTab(e) {
+		let t = this.value === e.id, n = e.disabled || this.disabled;
+		return i`
+      <button
+        class=${u({
+			tab: !0,
+			"tab--active": t,
+			"tab--disabled": n
+		})}
+        part="tab ${t ? "tab-active" : ""} ${n ? "tab-disabled" : ""}"
+        role="tab"
+        data-tab-id=${e.id}
+        id="tab-${e.id}"
+        aria-selected=${t}
+        aria-controls="panel-${e.id}"
+        aria-disabled=${n}
+        tabindex=${t ? 0 : -1}
+        ?disabled=${n}
+        @click=${() => this.handleTabClick(e.id, n)}
+        @keydown=${(t) => this.handleTabKeyDown(t, e.id)}
+        @focus=${() => this.handleTabFocus(e.id)}
+        @blur=${this.handleTabBlur}
+      >
+        ${e.icon ? i`<bp-icon name=${e.icon} class="tab__icon"></bp-icon>` : a}
+        <span class="tab__label">${e.label}</span>
+        ${e.closable ? i`
+                <button
+                  class="tab__close"
+                  part="tab-close"
+                  aria-label="Close ${e.label}"
+                  @click=${(t) => this.handleTabClose(t, e.id)}
+                  @keydown=${(e) => e.stopPropagation()}
+                >
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="M18 6L6 18M6 6l12 12" />
+                  </svg>
+                </button>
+              ` : a}
+      </button>
+    `;
+	}
+	render() {
+		let e = {
+			tabs: !0,
+			[`tabs--${this.size}`]: !0,
+			[`tabs--${this.variant}`]: !0,
+			[`tabs--${this.placement}`]: !0,
+			"tabs--disabled": this.disabled
+		}, t = this.placement === "start" || this.placement === "end";
+		return i`
+      <div
+        class=${u(e)}
+        part="tabs"
+        aria-orientation=${t ? "vertical" : "horizontal"}
+      >
+        <div class="tablist" part="tablist" role="tablist">
+          ${d(this.tabs, (e) => e.id, (e) => this.renderTab(e))}
+        </div>
+        <div class="panels" part="panels">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+	}
+};
+e([s({
+	type: String,
+	reflect: !0
+})], p.prototype, "value", void 0), e([s({ type: Array })], p.prototype, "tabs", void 0), e([s({
+	type: String,
+	reflect: !0
+})], p.prototype, "size", void 0), e([s({
+	type: String,
+	reflect: !0
+})], p.prototype, "variant", void 0), e([s({
+	type: String,
+	reflect: !0
+})], p.prototype, "placement", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "disabled", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "manual", void 0), e([l()], p.prototype, "focusedTabId", void 0), e([c({
+	slot: "",
+	flatten: !0
+})], p.prototype, "panelElements", void 0), p = e([o("bp-tabs")], p);
+var m = class extends n {
+	constructor() {
+		super(), this.tabId = "";
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "tabpanel"), this.setAttribute("data-tab-id", this.tabId);
+	}
+	updated(e) {
+		super.updated(e), e.has("tabId") && (this.setAttribute("data-tab-id", this.tabId), this.id = `panel-${this.tabId}`, this.setAttribute("aria-labelledby", `tab-${this.tabId}`));
+	}
+	render() {
+		return i`<slot></slot>`;
+	}
+};
+e([s({
+	type: String,
+	attribute: "tab-id",
+	reflect: !0
+})], m.prototype, "tabId", void 0), m = e([o("bp-tab-panel")], m);
+//#endregion
+export { p as n, m as t };
+
+//# sourceMappingURL=tabs-CDf79ZXn.js.map

package/dist/shared/tabs-CDf79ZXn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-CDf79ZXn.js","names":["_decorate","__decorate","tabsStyles","BpTabs","LitElement","BpIcon","firstEnabled","tab","panels","disabled","tabId","enabledTabs","currentIndex","newIndex","handled","event","t","newTab","closedIndex","nextIndex","changedProperties","el","isActive","panel","previousValue","isDisabled","classMap","e","nothing","containerClasses","isVertical","repeat","property","state","queryAssignedElements","customElement","BpTabPanel"],"sources":["../../source/components/tabs/tabs.style.ts","../../source/components/tabs/tabs.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tabsStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .tabs {\n    font-family: var(--bp-font-family);\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Tablist - horizontal by default */\n  .tablist {\n    display: flex;\n    flex-wrap: nowrap;\n    gap: var(--bp-spacing-xs);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n    padding-bottom: var(--bp-spacing-xs);\n  }\n\n  /* Tab button base */\n  .tab {\n    /* Reset */\n    appearance: none;\n    border: none;\n    background: transparent;\n    margin: 0;\n\n    /* Layout */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bp-spacing-xs);\n    cursor: pointer;\n    flex-shrink: 0;\n\n    /* Typography */\n    font-family: var(--bp-font-family);\n    font-weight: var(--bp-font-weight-medium);\n    white-space: nowrap;\n\n    /* Visual */\n    color: var(--bp-color-text-muted);\n    border-radius: var(--bp-border-radius);\n    transition: all var(--bp-transition-fast);\n\n    /* Focus */\n    outline: none;\n  }\n\n  .tab__icon {\n    flex-shrink: 0;\n  }\n\n  .tab__label {\n    display: inline-block;\n  }\n\n  .tab__close {\n    /* Reset */\n    appearance: none;\n    border: none;\n    background: transparent;\n    padding: var(--bp-spacing-xs);\n    margin: calc(-1 * var(--bp-spacing-xs));\n    margin-left: var(--bp-spacing-xs);\n    cursor: pointer;\n    border-radius: var(--bp-border-radius);\n\n    /* Layout */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--bp-spacing-lg);\n    height: var(--bp-spacing-lg);\n\n    /* Visual */\n    color: var(--bp-color-text-muted);\n    transition: all var(--bp-transition-fast);\n  }\n\n  .tab__close svg {\n    width: var(--bp-spacing-md);\n    height: var(--bp-spacing-md);\n  }\n\n  .tab__close:hover {\n    background: var(--bp-color-surface);\n    color: var(--bp-color-text);\n  }\n\n  .tab__close:active {\n    transform: scale(0.95);\n  }\n\n  /* Panels container */\n  .panels {\n    flex: 1;\n    padding: var(--bp-spacing-md);\n  }\n\n  /* Sizes */\n  .tabs--sm .tab {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-tight);\n  }\n\n  .tabs--md .tab {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  .tabs--lg .tab {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-lg);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  /* Default variant */\n  .tabs--default .tab--active {\n    color: var(--bp-color-primary);\n    background: var(--bp-color-surface);\n  }\n\n  .tabs--default .tab:hover:not(.tab--disabled):not(.tab--active) {\n    color: var(--bp-color-text);\n    background: var(--bp-color-surface-subdued);\n  }\n\n  .tab:active:not(.tab--disabled) {\n    opacity: 0.8;\n  }\n\n  /* Underline variant */\n  .tabs--underline .tablist {\n    gap: var(--bp-spacing-md);\n  }\n\n  .tabs--underline .tab {\n    border-radius: 0;\n    position: relative;\n    padding-bottom: var(--bp-spacing-sm);\n    margin-bottom: calc(-1 * var(--bp-spacing-xs) - var(--bp-border-width));\n  }\n\n  .tabs--underline .tab::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: var(--bp-spacing-0-5);\n    background: transparent;\n    transition: background var(--bp-transition-fast);\n  }\n\n  .tabs--underline .tab--active::after {\n    background: var(--bp-color-primary);\n  }\n\n  .tabs--underline .tab--active {\n    color: var(--bp-color-primary);\n  }\n\n  .tabs--underline .tab:hover:not(.tab--disabled):not(.tab--active) {\n    color: var(--bp-color-text);\n  }\n\n  .tabs--underline .tab:hover:not(.tab--disabled):not(.tab--active)::after {\n    background: var(--bp-color-border);\n  }\n\n  /* Pills variant */\n  .tabs--pills .tablist {\n    border-bottom: none;\n    gap: var(--bp-spacing-xs);\n    padding-bottom: 0;\n    background: var(--bp-color-surface);\n    padding: var(--bp-spacing-xs);\n    border-radius: var(--bp-border-radius-large);\n  }\n\n  .tabs--pills .tab {\n    border-radius: var(--bp-border-radius);\n  }\n\n  .tabs--pills .tab--active {\n    background: var(--bp-color-background);\n    color: var(--bp-color-text);\n    box-shadow: var(--bp-shadow-sm);\n  }\n\n  .tabs--pills .tab:hover:not(.tab--disabled):not(.tab--active) {\n    color: var(--bp-color-text);\n  }\n\n  /* Placement: bottom */\n  .tabs--bottom {\n    flex-direction: column-reverse;\n  }\n\n  .tabs--bottom .tablist {\n    border-bottom: none;\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\n    padding-bottom: 0;\n    padding-top: var(--bp-spacing-xs);\n  }\n\n  .tabs--bottom.tabs--underline .tab {\n    margin-bottom: 0;\n    margin-top: calc(-1 * var(--bp-spacing-xs) - var(--bp-border-width));\n    padding-bottom: var(--bp-spacing-sm);\n    padding-top: var(--bp-spacing-sm);\n  }\n\n  .tabs--bottom.tabs--underline .tab::after {\n    top: 0;\n    bottom: auto;\n  }\n\n  /* Placement: start (vertical left) */\n  .tabs--start {\n    flex-direction: row;\n  }\n\n  .tabs--start .tablist {\n    flex-direction: column;\n    border-bottom: none;\n    border-right: var(--bp-border-width) solid var(--bp-color-border);\n    padding-bottom: 0;\n    padding-right: var(--bp-spacing-xs);\n  }\n\n  .tabs--start .tab {\n    justify-content: flex-start;\n  }\n\n  .tabs--start.tabs--underline .tab {\n    margin-bottom: 0;\n    margin-right: calc(-1 * var(--bp-spacing-xs) - var(--bp-border-width));\n    padding-right: var(--bp-spacing-sm);\n  }\n\n  .tabs--start.tabs--underline .tab::after {\n    left: auto;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    width: var(--bp-spacing-0-5);\n    height: auto;\n  }\n\n  /* Placement: end (vertical right) */\n  .tabs--end {\n    flex-direction: row-reverse;\n  }\n\n  .tabs--end .tablist {\n    flex-direction: column;\n    border-bottom: none;\n    border-left: var(--bp-border-width) solid var(--bp-color-border);\n    padding-bottom: 0;\n    padding-left: var(--bp-spacing-xs);\n  }\n\n  .tabs--end .tab {\n    justify-content: flex-start;\n  }\n\n  .tabs--end.tabs--underline .tab {\n    margin-bottom: 0;\n    margin-left: calc(-1 * var(--bp-spacing-xs) - var(--bp-border-width));\n    padding-left: var(--bp-spacing-sm);\n  }\n\n  .tabs--end.tabs--underline .tab::after {\n    right: auto;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: var(--bp-spacing-0-5);\n    height: auto;\n  }\n\n  /* States */\n  .tab--disabled {\n    cursor: not-allowed;\n    opacity: var(--bp-opacity-disabled);\n    pointer-events: none;\n  }\n\n  .tabs--disabled .tab {\n    cursor: not-allowed;\n    opacity: var(--bp-opacity-disabled);\n    pointer-events: none;\n  }\n\n  .tab:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tabsStyles } from './tabs.style.js';\nimport type { IconName } from '../icon/icons/icon-name.generated.js';\nimport { BpIcon } from '../icon/icon.js';\n\nexport type TabsSize = 'sm' | 'md' | 'lg';\nexport type TabsVariant = 'default' | 'pills' | 'underline';\nexport type TabsPlacement = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * Tab item interface for programmatic tab configuration\n */\nexport interface TabItem {\n  /** Unique identifier for the tab */\n  id: string;\n  /** Display label for the tab */\n  label: string;\n  /** Whether the tab is disabled */\n  disabled?: boolean;\n  /** Icon name to display before the label */\n  icon?: IconName;\n  /** Whether this tab can be closed */\n  closable?: boolean;\n}\n\n/**\n * A tabs component for organizing content into tabbed sections.\n *\n * @element bp-tabs\n *\n * @property {string} value - The ID of the currently selected tab\n * @property {TabItem[]} tabs - Array of tab items (alternative to slotted tabs)\n * @property {TabsSize} size - The size of the tabs\n * @property {TabsVariant} variant - The visual style of the tabs\n * @property {TabsPlacement} placement - Position of the tab list relative to panels\n * @property {boolean} disabled - Whether all tabs are disabled\n * @property {boolean} manual - Whether activation requires pressing Enter/Space (vs automatic on arrow)\n *\n * @slot - Default slot for bp-tab-panel elements\n * @slot tab - Slot for custom tab buttons (use with data-tab-id attribute)\n *\n * @fires bp-tab-change - Fired when the selected tab changes\n * @fires bp-tab-close - Fired when a closable tab's close button is clicked\n *\n * @csspart tabs - The main container\n * @csspart tablist - The tab button list container\n * @csspart tab - Individual tab button\n * @csspart tab-active - The currently active tab\n * @csspart tab-disabled - A disabled tab\n * @csspart panels - The panel container\n * @csspart panel - Individual panel wrapper\n */\n@customElement('bp-tabs')\nexport class BpTabs extends LitElement {\n  /**\n   * Child components that self-register as custom elements on import.\n   * Value imports prevent bundler tree-shaking of the registration side effect.\n   */\n  static dependencies = [BpIcon];\n\n  /**\n   * The ID of the currently selected tab\n   */\n  @property({ type: String, reflect: true }) declare value: string;\n\n  /**\n   * Array of tab items for programmatic tab configuration\n   */\n  @property({ type: Array }) declare tabs: TabItem[];\n\n  /**\n   * The size of the tabs\n   */\n  @property({ type: String, reflect: true }) declare size: TabsSize;\n\n  /**\n   * The visual style of the tabs\n   */\n  @property({ type: String, reflect: true }) declare variant: TabsVariant;\n\n  /**\n   * Position of the tab list relative to panels\n   */\n  @property({ type: String, reflect: true }) declare placement: TabsPlacement;\n\n  /**\n   * Whether all tabs are disabled\n   */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /**\n   * Whether activation requires pressing Enter/Space (manual) vs automatic on arrow navigation\n   */\n  @property({ type: Boolean, reflect: true }) declare manual: boolean;\n\n  @state() private focusedTabId: string | null = null;\n\n  @queryAssignedElements({ slot: '', flatten: true })\n  private panelElements!: HTMLElement[];\n\n  static styles = [tabsStyles];\n\n  constructor() {\n    super();\n    this.value = '';\n    this.tabs = [];\n    this.size = 'md';\n    this.variant = 'default';\n    this.placement = 'top';\n    this.disabled = false;\n    this.manual = false;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'tablist');\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('value')) {\n      this.updatePanelVisibility();\n    }\n  }\n\n  private handleSlotChange = () => {\n    // Auto-select first tab if none selected\n    if (!this.value && this.tabs.length > 0) {\n      const firstEnabled = this.tabs.find((tab) => !tab.disabled);\n      if (firstEnabled) {\n        this.value = firstEnabled.id;\n      }\n    } else if (!this.value) {\n      // Check for panels with data-tab-id\n      const panels = this.getPanels();\n      if (panels.length > 0) {\n        this.value = panels[0].getAttribute('data-tab-id') || '';\n      }\n    }\n\n    this.updatePanelVisibility();\n  };\n\n  private getPanels(): HTMLElement[] {\n    return this.panelElements.filter(\n      (el) => el.hasAttribute('data-tab-id') || el.tagName === 'BP-TAB-PANEL'\n    );\n  }\n\n  private getEnabledTabs(): TabItem[] {\n    return this.tabs.filter((tab) => !tab.disabled);\n  }\n\n  private updatePanelVisibility() {\n    const panels = this.getPanels();\n    panels.forEach((panel) => {\n      const panelId = panel.getAttribute('data-tab-id') || '';\n      const isActive = panelId === this.value;\n      panel.hidden = !isActive;\n      panel.setAttribute('aria-hidden', String(!isActive));\n      if (isActive) {\n        panel.setAttribute('tabindex', '0');\n      } else {\n        panel.removeAttribute('tabindex');\n      }\n    });\n  }\n\n  private handleTabClick = (tabId: string, disabled: boolean) => {\n    if (disabled || this.disabled) return;\n\n    this.selectTab(tabId);\n  };\n\n  private handleTabKeyDown = (event: KeyboardEvent, tabId: string) => {\n    if (this.disabled) return;\n\n    const enabledTabs = this.getEnabledTabs();\n    const currentIndex = enabledTabs.findIndex((tab) => tab.id === tabId);\n\n    let newIndex = currentIndex;\n    let handled = false;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        handled = true;\n        newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;\n        break;\n\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        handled = true;\n        newIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        handled = true;\n        newIndex = 0;\n        break;\n\n      case 'End':\n        event.preventDefault();\n        handled = true;\n        newIndex = enabledTabs.length - 1;\n        break;\n\n      case 'Enter':\n      case ' ':\n        if (this.manual && this.focusedTabId) {\n          event.preventDefault();\n          handled = true;\n          this.selectTab(this.focusedTabId);\n        }\n        break;\n\n      case 'Delete':\n      case 'Backspace': {\n        const tab = this.tabs.find((t) => t.id === tabId);\n        if (tab?.closable) {\n          event.preventDefault();\n          handled = true;\n          this.handleTabClose(event, tabId);\n        }\n        break;\n      }\n    }\n\n    if (handled && newIndex !== currentIndex) {\n      const newTab = enabledTabs[newIndex];\n      if (newTab) {\n        this.focusedTabId = newTab.id;\n        this.focusTab(newTab.id);\n\n        // In automatic mode, select the tab on arrow navigation\n        if (!this.manual) {\n          this.selectTab(newTab.id);\n        }\n      }\n    }\n  };\n\n  private focusTab(tabId: string) {\n    const tabButton = this.shadowRoot?.querySelector(\n      `[data-tab-id=\"${tabId}\"]`\n    ) as HTMLElement | null;\n    tabButton?.focus();\n  }\n\n  private selectTab(tabId: string) {\n    const previousValue = this.value;\n    if (previousValue === tabId) return;\n\n    this.value = tabId;\n    this.updatePanelVisibility();\n\n    this.dispatchEvent(\n      new CustomEvent('bp-tab-change', {\n        detail: {\n          value: tabId,\n          previousValue,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleTabClose = (event: Event, tabId: string) => {\n    event.stopPropagation();\n\n    this.dispatchEvent(\n      new CustomEvent('bp-tab-close', {\n        detail: { tabId },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    // Remove the closed tab\n    const closedIndex = this.tabs.findIndex((t) => t.id === tabId);\n    this.tabs = this.tabs.filter((t) => t.id !== tabId);\n\n    // If the closed tab was active, activate an adjacent tab\n    if (this.value === tabId && this.tabs.length > 0) {\n      const nextIndex = Math.min(closedIndex, this.tabs.length - 1);\n      this.value = this.tabs[nextIndex].id;\n    }\n  };\n\n  private handleTabFocus = (tabId: string) => {\n    this.focusedTabId = tabId;\n  };\n\n  private handleTabBlur = () => {\n    this.focusedTabId = null;\n  };\n\n  private renderTab(tab: TabItem) {\n    const isActive = this.value === tab.id;\n    const isDisabled = tab.disabled || this.disabled;\n\n    const tabClasses = {\n      tab: true,\n      'tab--active': isActive,\n      'tab--disabled': isDisabled,\n    };\n\n    return html`\n      <button\n        class=${classMap(tabClasses)}\n        part=\"tab ${isActive ? 'tab-active' : ''} ${\n          isDisabled ? 'tab-disabled' : ''\n        }\"\n        role=\"tab\"\n        data-tab-id=${tab.id}\n        id=\"tab-${tab.id}\"\n        aria-selected=${isActive}\n        aria-controls=\"panel-${tab.id}\"\n        aria-disabled=${isDisabled}\n        tabindex=${isActive ? 0 : -1}\n        ?disabled=${isDisabled}\n        @click=${() => this.handleTabClick(tab.id, isDisabled)}\n        @keydown=${(e: KeyboardEvent) => this.handleTabKeyDown(e, tab.id)}\n        @focus=${() => this.handleTabFocus(tab.id)}\n        @blur=${this.handleTabBlur}\n      >\n        ${\n          tab.icon\n            ? html`<bp-icon name=${tab.icon} class=\"tab__icon\"></bp-icon>`\n            : nothing\n        }\n        <span class=\"tab__label\">${tab.label}</span>\n        ${\n          tab.closable\n            ? html`\n                <button\n                  class=\"tab__close\"\n                  part=\"tab-close\"\n                  aria-label=\"Close ${tab.label}\"\n                  @click=${(e: Event) => this.handleTabClose(e, tab.id)}\n                  @keydown=${(e: KeyboardEvent) => e.stopPropagation()}\n                >\n                  <svg\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                  >\n                    <path d=\"M18 6L6 18M6 6l12 12\" />\n                  </svg>\n                </button>\n              `\n            : nothing\n        }\n      </button>\n    `;\n  }\n\n  render() {\n    const containerClasses = {\n      tabs: true,\n      [`tabs--${this.size}`]: true,\n      [`tabs--${this.variant}`]: true,\n      [`tabs--${this.placement}`]: true,\n      'tabs--disabled': this.disabled,\n    };\n\n    const isVertical = this.placement === 'start' || this.placement === 'end';\n\n    return html`\n      <div\n        class=${classMap(containerClasses)}\n        part=\"tabs\"\n        aria-orientation=${isVertical ? 'vertical' : 'horizontal'}\n      >\n        <div class=\"tablist\" part=\"tablist\" role=\"tablist\">\n          ${repeat(\n            this.tabs,\n            (tab) => tab.id,\n            (tab) => this.renderTab(tab)\n          )}\n        </div>\n        <div class=\"panels\" part=\"panels\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\n/**\n * A tab panel component for use with bp-tabs.\n *\n * @element bp-tab-panel\n *\n * @property {string} tabId - The ID that links this panel to its tab\n *\n * @slot - Content of the panel\n *\n * @csspart panel - The panel container\n */\n@customElement('bp-tab-panel')\nexport class BpTabPanel extends LitElement {\n  /**\n   * The ID that links this panel to its tab\n   */\n  @property({ type: String, attribute: 'tab-id', reflect: true })\n  declare tabId: string;\n\n  constructor() {\n    super();\n    this.tabId = '';\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'tabpanel');\n    this.setAttribute('data-tab-id', this.tabId);\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('tabId')) {\n      this.setAttribute('data-tab-id', this.tabId);\n      this.id = `panel-${this.tabId}`;\n      this.setAttribute('aria-labelledby', `tab-${this.tabId}`);\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-tabs': BpTabs;\n    'bp-tab-panel': BpTabPanel;\n  }\n}\n"],"mappings":"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"}