@brightspot/ui 1.10.0 → 1.11.0

package/dist/components/tabs/Tab.js

@@ -0,0 +1,152 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
+import { ReadyMixin } from '../../util/ReadyMixin.js';
+import '../badge/Badge.js';
+import '../icon/Icon.js';
+/**
+ * An individual tab within a tab group.
+ *
+ * Renders a button with role="tab" that participates in keyboard navigation
+ * and selection state managed by the parent `btu-tabs` container.
+ *
+ * @element btu-tab
+ *
+ * @fires {CustomEvent} btu-tab-ready - Fired after first render
+ * @fires {CustomEvent<{name: string}>} btu-tab-change - Fired when a non-disabled tab with a name is clicked
+ *
+ * @cssprop --badge-color-background - Background color of the count indicator badge (default: gray-50)
+ * @cssprop --badge-color-foreground - Text color of the count indicator badge (default: gray-700)
+ *
+ * @example
+ * ```html
+ * <btu-tabs>
+ *   <btu-tab name="main" label="Main"></btu-tab>
+ *   <btu-tab name="seo" label="SEO"></btu-tab>
+ *   <btu-tab name="styles" label="Styles" disabled></btu-tab>
+ * </btu-tabs>
+ * ```
+ */
+export default class Tab extends EventEmitterMixin(ReadyMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the tab is disabled and non-interactive.
+         * @attr
+         */
+        this.disabled = false;
+        /**
+         * Placement of the icon relative to the label.
+         * @attr icon-position
+         */
+        this.iconPosition = 'leading';
+        /**
+         * When true, hides the label visually while maintaining accessibility.
+         * @attr icon-only
+         */
+        this.iconOnly = false;
+        /**
+         * When true, displays an error badge on the tab.
+         * @attr
+         */
+        this.error = false;
+        /** @internal Active state set by parent btu-tabs */
+        this._active = false;
+        /** @internal Roving tabindex value set by parent btu-tabs */
+        this._tabindex = -1;
+        /** @internal Set by parent btu-tabs */
+        this.size = 'md';
+        /** @internal */
+        this.initialClasses = [];
+    }
+    static get tagName() {
+        return 'BTU-TAB';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.className) {
+            this.initialClasses = this.className.split(' ').filter(c => c.trim());
+        }
+    }
+    createRenderRoot() {
+        return this;
+    }
+    willUpdate() {
+        this.className = [...this.initialClasses, 'btu-tab'].filter(Boolean).join(' ');
+    }
+    firstUpdated() {
+        this.emit('btu-tab-ready');
+    }
+    /** @internal */
+    handleClick() {
+        if (this.disabled || !this.name)
+            return;
+        this.emit('btu-tab-change', { name: this.name });
+    }
+    render() {
+        const iconTemplate = this.iconName
+            ? html `<btu-icon symbol="${this.iconName}" size="${this.size === 'lg' ? 'md' : 'sm'}"></btu-icon>`
+            : nothing;
+        const labelTemplate = this.iconOnly && this.iconName ? nothing : html `<span>${this.label}</span>`;
+        const badgeTemplate = this.badge != null ? html `<btu-badge size="sm">${this.badge}</btu-badge>` : nothing;
+        const errorDot = this.error ? html `<btu-badge size="sm" variant="error">!</btu-badge>` : nothing;
+        const indicator = this._active && !this.disabled
+            ? html `<span
+            class="btu-tab-indicator"
+            style=${styleMap(this.error ? { background: 'oklch(var(--btu-theme-error-600))' } : {})}
+          ></span>`
+            : nothing;
+        return html `<button
+      type="button"
+      role="tab"
+      class="btu-tab-button btu-tab-button-${this.size}"
+      aria-selected="${this._active}"
+      aria-disabled="${this.disabled || nothing}"
+      aria-description="${this.description || nothing}"
+      aria-label="${this.iconOnly && this.label ? this.label : nothing}"
+      tabindex="${this._tabindex}"
+      @click=${this.handleClick}
+    >
+      ${this.iconPosition === 'leading' ? iconTemplate : nothing} ${labelTemplate}
+      ${this.iconPosition === 'trailing' ? iconTemplate : nothing} ${badgeTemplate} ${errorDot} ${indicator}
+    </button>`;
+    }
+}
+__decorate([
+    property({ type: String, attribute: 'name', reflect: true })
+], Tab.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], Tab.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], Tab.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tab.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-name' })
+], Tab.prototype, "iconName", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-position' })
+], Tab.prototype, "iconPosition", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], Tab.prototype, "iconOnly", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'error' })
+], Tab.prototype, "error", void 0);
+__decorate([
+    property({ attribute: 'badge' })
+], Tab.prototype, "badge", void 0);
+if (!customElements.get('btu-tab')) {
+    customElements.define('btu-tab', Tab);
+}
+//# sourceMappingURL=Tab.js.map

package/dist/components/tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/tabs/Tab.ts"],"names":[],"mappings":"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"}

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,126 @@
+import { LitElement } from 'lit';
+import '../badge/Badge.js';
+import '../dropdown/Dropdown.js';
+import '../dropdown/DropdownItem.js';
+import '../dropdown/DropdownMenu.js';
+import '../icon/Icon.js';
+export interface TabsProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    activeTab?: string;
+    variant?: 'full' | 'menu';
+}
+declare const Tabs_base: (new (...args: any[]) => import("../../util/RovingTabindexMixin.js").RovingTabindexInterface) & (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * A container component for managing a group of tabs.
+ *
+ * Provides selection state management, size propagation to child tabs,
+ * and keyboard navigation following the WAI-ARIA Tabs pattern.
+ *
+ * When a tab becomes active, direct sibling elements that share the same
+ * `name` value are shown; other siblings with a `name` attribute are
+ * hidden. Only direct siblings are managed — nested tab groups control their
+ * own panels independently.
+ *
+ * @element btu-tabs
+ *
+ * @fires {CustomEvent} btu-tabs-ready - Fired after first render and initialization
+ * @fires {CustomEvent<{name: string}>} btu-tabs-show - Fired when a tab becomes active
+ * @fires {CustomEvent<{name: string}>} btu-tabs-hide - Fired when a tab is deactivated
+ * @fires {CustomEvent<{name: string}>} btu-tab-change - Fired when a tab is selected (bubbles from btu-tab)
+ * @fires {CustomEvent} btu-tab-ready - Fired when a child tab finishes initialization (bubbles from btu-tab)
+ *
+ * @cssprop --tabs-active-color - Text and icon color of the active tab (default: gray-700)
+ * @cssprop --tabs-active-indicator-color - Color of the active tab underline indicator (default: primary-500 → primary-700 → primary-900 gradient)
+ * @cssprop --tabs-border-color - Color of the bottom border divider (default: gray-200)
+ * @cssprop --tabs-color - Text and icon color for all tabs (default: gray-500; active/hover tabs use gray-700)
+ * @cssprop --tabs-background - Background color for all tab buttons (default: transparent)
+ * @cssprop --tabs-container-background - Background color of the tabs container (default: theme white)
+ * @cssprop --tabs-hover-background - Background color of a tab on hover (default: gray-100)
+ * @cssprop --tabs-hover-color - Text and icon color of a tab on hover (default: gray-700)
+ * @cssprop --tabs-gap - Spacing between tabs (default: 1rem)
+ *
+ * @example
+ * ```html
+ * <div>
+ *   <btu-tabs size="md" active-tab="main">
+ *     <btu-tab name="main" label="Main"></btu-tab>
+ *     <btu-tab name="seo" label="SEO"></btu-tab>
+ *     <btu-tab name="overrides" label="Overrides"></btu-tab>
+ *   </btu-tabs>
+ *   <div name="main" role="tabpanel">Main content</div>
+ *   <div name="seo" role="tabpanel">SEO content</div>
+ *   <div name="overrides" role="tabpanel">Overrides content</div>
+ * </div>
+ * ```
+ */
+export default class Tabs extends Tabs_base {
+    static get tagName(): string;
+    /**
+     * Size variant applied to all child tabs.
+     * @attr
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * The `name` value of the currently active tab.
+     * @attr active-tab
+     */
+    activeTab?: string;
+    /**
+     * Layout variant.
+     * - 'full': tabs scroll horizontally when they overflow (default)
+     * - 'menu': all tabs are hidden; the active tab label and a chevron dropdown are shown instead
+     * @attr variant
+     */
+    variant: 'full' | 'menu';
+    /** @internal */
+    private initialClasses;
+    /** @internal Bound event handler for cleanup */
+    private boundHandleTabChange;
+    /** @internal Bound event handler for cleanup */
+    private boundHandleKeyDown;
+    /** @internal */
+    _getRovingTargets(): HTMLElement[];
+    /** @internal Menu variant state */
+    private rafId;
+    private menuWrapper;
+    private menuDropdown;
+    private menuLabel;
+    private menuIcon;
+    private menuErrorBadge;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    createRenderRoot(): this;
+    willUpdate(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    /** @internal Tear down a variant's DOM and state before switching to another */
+    private teardownVariant;
+    /** @internal */
+    private syncTabs;
+    /** @internal Show/hide panel elements that are direct siblings with a matching name value */
+    private syncPanels;
+    /** @internal */
+    private getTabs;
+    /** @internal */
+    private activateTab;
+    /** @internal */
+    private handleTabChange;
+    /** @internal Keyboard navigation following WAI-ARIA Tabs pattern */
+    private handleKeyDown;
+    /** @internal */
+    private tabSizeToDropdownSize;
+    /** @internal */
+    private initMenu;
+    /** @internal */
+    private updateMenuItems;
+    /** @internal */
+    private syncMenuState;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-tabs': Tabs;
+    }
+}
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAKtC,OAAO,mBAAmB,CAAA;AAC1B,OAAO,yBAAyB,CAAA;AAEhC,OAAO,6BAA6B,CAAA;AAEpC,OAAO,6BAA6B,CAAA;AAEpC,OAAO,iBAAiB,CAAA;AAGxB,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,SAA8D;IAC9F,MAAM,KAAK,OAAO,WAEjB;IAED;;;OAGG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAO;IAEtC;;;OAGG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;OAKG;IAEH,OAAO,EAAE,MAAM,GAAG,MAAM,CAAS;IAEjC,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAe;IAErC,gDAAgD;IAChD,OAAO,CAAC,oBAAoB,CAAkC;IAC9D,gDAAgD;IAChD,OAAO,CAAC,kBAAkB,CAAgC;IAE1D,gBAAgB;IAChB,iBAAiB,IAAI,WAAW,EAAE;IAUlC,mCAAmC;IACnC,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,YAAY,CAAwB;IAC5C,OAAO,CAAC,SAAS,CAA+B;IAChD,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,cAAc,CAA2B;IAEjD,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAU5B,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAWlB,YAAY,IAAI,IAAI;IAcpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAoBtD,gFAAgF;IAChF,OAAO,CAAC,eAAe;IAYvB,gBAAgB;IAChB,OAAO,CAAC,QAAQ;IAYhB,6FAA6F;IAC7F,OAAO,CAAC,UAAU;IAWlB,gBAAgB;IAChB,OAAO,CAAC,OAAO;IAIf,gBAAgB;IAChB,OAAO,CAAC,WAAW;IAsBnB,gBAAgB;IAChB,OAAO,CAAC,eAAe;IAIvB,oEAAoE;IACpE,OAAO,CAAC,aAAa;IAuBrB,gBAAgB;IAChB,OAAO,CAAC,qBAAqB;IAM7B,gBAAgB;IAChB,OAAO,CAAC,QAAQ;IA+DhB,gBAAgB;IAChB,OAAO,CAAC,eAAe;IAsBvB,gBAAgB;IAChB,OAAO,CAAC,aAAa;IA4BrB,MAAM;CAGP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAA;KACjB;CACF"}

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,390 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
+import { ReadyMixin } from '../../util/ReadyMixin.js';
+import { RovingTabindexMixin } from '../../util/RovingTabindexMixin.js';
+import '../badge/Badge.js';
+import '../dropdown/Dropdown.js';
+import '../dropdown/DropdownItem.js';
+import '../dropdown/DropdownMenu.js';
+import '../icon/Icon.js';
+/**
+ * A container component for managing a group of tabs.
+ *
+ * Provides selection state management, size propagation to child tabs,
+ * and keyboard navigation following the WAI-ARIA Tabs pattern.
+ *
+ * When a tab becomes active, direct sibling elements that share the same
+ * `name` value are shown; other siblings with a `name` attribute are
+ * hidden. Only direct siblings are managed — nested tab groups control their
+ * own panels independently.
+ *
+ * @element btu-tabs
+ *
+ * @fires {CustomEvent} btu-tabs-ready - Fired after first render and initialization
+ * @fires {CustomEvent<{name: string}>} btu-tabs-show - Fired when a tab becomes active
+ * @fires {CustomEvent<{name: string}>} btu-tabs-hide - Fired when a tab is deactivated
+ * @fires {CustomEvent<{name: string}>} btu-tab-change - Fired when a tab is selected (bubbles from btu-tab)
+ * @fires {CustomEvent} btu-tab-ready - Fired when a child tab finishes initialization (bubbles from btu-tab)
+ *
+ * @cssprop --tabs-active-color - Text and icon color of the active tab (default: gray-700)
+ * @cssprop --tabs-active-indicator-color - Color of the active tab underline indicator (default: primary-500 → primary-700 → primary-900 gradient)
+ * @cssprop --tabs-border-color - Color of the bottom border divider (default: gray-200)
+ * @cssprop --tabs-color - Text and icon color for all tabs (default: gray-500; active/hover tabs use gray-700)
+ * @cssprop --tabs-background - Background color for all tab buttons (default: transparent)
+ * @cssprop --tabs-container-background - Background color of the tabs container (default: theme white)
+ * @cssprop --tabs-hover-background - Background color of a tab on hover (default: gray-100)
+ * @cssprop --tabs-hover-color - Text and icon color of a tab on hover (default: gray-700)
+ * @cssprop --tabs-gap - Spacing between tabs (default: 1rem)
+ *
+ * @example
+ * ```html
+ * <div>
+ *   <btu-tabs size="md" active-tab="main">
+ *     <btu-tab name="main" label="Main"></btu-tab>
+ *     <btu-tab name="seo" label="SEO"></btu-tab>
+ *     <btu-tab name="overrides" label="Overrides"></btu-tab>
+ *   </btu-tabs>
+ *   <div name="main" role="tabpanel">Main content</div>
+ *   <div name="seo" role="tabpanel">SEO content</div>
+ *   <div name="overrides" role="tabpanel">Overrides content</div>
+ * </div>
+ * ```
+ */
+export default class Tabs extends RovingTabindexMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Size variant applied to all child tabs.
+         * @attr
+         */
+        this.size = 'md';
+        /**
+         * Layout variant.
+         * - 'full': tabs scroll horizontally when they overflow (default)
+         * - 'menu': all tabs are hidden; the active tab label and a chevron dropdown are shown instead
+         * @attr variant
+         */
+        this.variant = 'full';
+        /** @internal */
+        this.initialClasses = [];
+        /** @internal Bound event handler for cleanup */
+        this.boundHandleTabChange = this.handleTabChange.bind(this);
+        /** @internal Bound event handler for cleanup */
+        this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+        /** @internal Menu variant state */
+        this.rafId = null;
+        this.menuWrapper = null;
+        this.menuDropdown = null;
+        this.menuLabel = null;
+        this.menuIcon = null;
+        this.menuErrorBadge = null;
+    }
+    static get tagName() {
+        return 'BTU-TABS';
+    }
+    /** @internal */
+    _getRovingTargets() {
+        const buttons = [];
+        for (const tab of this.getTabs()) {
+            if (tab.style.display === 'none')
+                continue;
+            const btn = tab.querySelector('button');
+            if (btn)
+                buttons.push(btn);
+        }
+        return buttons;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.className) {
+            this.initialClasses = this.className.split(' ').filter(c => c.trim());
+        }
+        this.setAttribute('role', 'tablist');
+        this.addEventListener('btu-tab-change', this.boundHandleTabChange);
+        this.addEventListener('keydown', this.boundHandleKeyDown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        this.removeEventListener('btu-tab-change', this.boundHandleTabChange);
+        this.removeEventListener('keydown', this.boundHandleKeyDown);
+    }
+    createRenderRoot() {
+        return this;
+    }
+    willUpdate() {
+        this.className = [
+            ...this.initialClasses,
+            'btu-tabs',
+            `btu-tabs-${this.size}`,
+            this.variant === 'menu' ? 'btu-tabs-menu-mode' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    firstUpdated() {
+        if (!this.activeTab) {
+            const firstEnabled = this.getTabs().find(t => !t.disabled);
+            if (firstEnabled)
+                this.activeTab = firstEnabled.name;
+        }
+        this.syncTabs();
+        this.syncPanels();
+        if (this.variant === 'menu') {
+            this.initMenu();
+        }
+        else {
+            this.emit('btu-tabs-ready');
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('activeTab') && !this.activeTab) {
+            const firstEnabled = this.getTabs().find(t => !t.disabled);
+            if (firstEnabled)
+                this.activeTab = firstEnabled.name;
+        }
+        if (changedProperties.has('activeTab') || changedProperties.has('size')) {
+            this.syncTabs();
+        }
+        if (changedProperties.has('activeTab')) {
+            this.syncPanels();
+        }
+        if (changedProperties.has('size') && this.menuDropdown) {
+            this.menuDropdown.size = this.tabSizeToDropdownSize(this.size);
+        }
+        if (changedProperties.has('variant') && changedProperties.get('variant') !== undefined) {
+            this.teardownVariant(changedProperties.get('variant'));
+            if (this.variant === 'menu')
+                this.initMenu();
+        }
+    }
+    /** @internal Tear down a variant's DOM and state before switching to another */
+    teardownVariant(previous) {
+        if (previous === 'menu') {
+            this.menuWrapper?.remove();
+            this.menuWrapper = null;
+            this.menuDropdown = null;
+            this.menuLabel = null;
+            this.menuIcon = null;
+            this.menuErrorBadge = null;
+            this.getTabs().forEach(tab => tab.style.removeProperty('display'));
+        }
+    }
+    /** @internal */
+    syncTabs() {
+        this.getTabs().forEach(tab => {
+            tab.size = this.size;
+            tab._active = tab.name === this.activeTab;
+            tab._tabindex = tab.name === this.activeTab ? 0 : -1;
+            tab.requestUpdate();
+        });
+        if (this.variant === 'menu') {
+            this.syncMenuState();
+        }
+    }
+    /** @internal Show/hide panel elements that are direct siblings with a matching name value */
+    syncPanels() {
+        if (!this.activeTab || !this.parentElement)
+            return;
+        Array.from(this.parentElement.children).forEach(child => {
+            if (child === this || !(child instanceof HTMLElement))
+                return;
+            // data-tab is a deprecated fallback for compat — use name instead
+            const panelName = child.getAttribute('name') ?? child.dataset.tab;
+            if (!panelName)
+                return;
+            child.hidden = panelName !== this.activeTab;
+        });
+    }
+    /** @internal */
+    getTabs() {
+        return Array.from(this.querySelectorAll('btu-tab'));
+    }
+    /** @internal */
+    activateTab(name) {
+        const newTab = this.getTabs().find(t => t.name === name);
+        if (!newTab || newTab.disabled) {
+            const available = this.getTabs()
+                .map(t => t.name)
+                .filter(Boolean);
+            console.warn(`[btu-tabs] Tab "${name}" not found or is disabled. Available tabs: ${available.join(', ')}`);
+            return;
+        }
+        if (name === this.activeTab)
+            return;
+        const oldName = this.activeTab;
+        if (oldName) {
+            this.emit('btu-tabs-hide', { name: oldName });
+        }
+        this.activeTab = name;
+        this.emit('btu-tabs-show', { name });
+        this.syncTabs();
+        this.syncPanels();
+    }
+    /** @internal */
+    handleTabChange(event) {
+        this.activateTab(event.detail.name);
+    }
+    /** @internal Keyboard navigation following WAI-ARIA Tabs pattern */
+    handleKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                this._rovingNext();
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this._rovingPrev();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._rovingFirst();
+                break;
+            case 'End':
+                event.preventDefault();
+                this._rovingLast();
+                break;
+        }
+    }
+    // ─── Menu variant ────────────────────────────────────────────────────────────
+    /** @internal */
+    tabSizeToDropdownSize(size) {
+        if (size === 'xs' || size === 'sm')
+            return 'small';
+        if (size === 'lg')
+            return 'large';
+        return 'medium';
+    }
+    /** @internal */
+    initMenu() {
+        // Hide all tab buttons — they're only accessible via the dropdown
+        this.getTabs().forEach(tab => (tab.style.display = 'none'));
+        const activeTab = this.getTabs().find(t => t.name === this.activeTab);
+        this.menuWrapper = document.createElement('div');
+        const wrapper = this.menuWrapper;
+        wrapper.className = 'btu-tab-menu-wrapper';
+        this.menuIcon = document.createElement('btu-icon');
+        this.menuIcon.setAttribute('size', this.size === 'lg' ? 'md' : 'sm');
+        this.menuIcon.setAttribute('symbol', activeTab?.iconName ?? '');
+        this.menuIcon.hidden = !activeTab?.iconName;
+        this.menuLabel = document.createElement('span');
+        this.menuLabel.className = 'btu-tab-menu-label';
+        this.menuLabel.textContent = activeTab?.label ?? '';
+        if (activeTab?.iconPosition === 'trailing') {
+            wrapper.appendChild(this.menuLabel);
+            wrapper.appendChild(this.menuIcon);
+        }
+        else {
+            wrapper.appendChild(this.menuIcon);
+            wrapper.appendChild(this.menuLabel);
+        }
+        this.menuErrorBadge = document.createElement('btu-badge');
+        this.menuErrorBadge.setAttribute('size', 'sm');
+        this.menuErrorBadge.setAttribute('variant', 'error');
+        this.menuErrorBadge.textContent = '!';
+        this.menuErrorBadge.hidden = !activeTab?.error;
+        wrapper.appendChild(this.menuErrorBadge);
+        const dropdownMenu = document.createElement('btu-dropdown-menu');
+        this.menuDropdown = document.createElement('btu-dropdown');
+        this.menuDropdown.label = 'Tabs';
+        this.menuDropdown.iconOnly = true;
+        this.menuDropdown.noChevron = false;
+        this.menuDropdown.variant = 'tertiary';
+        this.menuDropdown.placement = 'bottom-start';
+        this.menuDropdown.size = this.tabSizeToDropdownSize(this.size);
+        this.menuDropdown.appendChild(dropdownMenu);
+        this.menuDropdown.addEventListener('btu-dropdown-item-select', (e) => {
+            e.stopPropagation();
+            const item = e.target.closest('btu-dropdown-item');
+            const name = item?.dataset.name;
+            if (name)
+                this.activateTab(name);
+        });
+        wrapper.appendChild(this.menuDropdown);
+        this.appendChild(wrapper);
+        // Defer population to allow btu-dropdown to finish its firstUpdated lifecycle
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = null;
+            this.updateMenuItems();
+            this.emit('btu-tabs-ready');
+        });
+    }
+    /** @internal */
+    updateMenuItems() {
+        if (!this.isConnected)
+            return;
+        const menu = this.menuDropdown?.querySelector('btu-dropdown-menu');
+        if (!menu)
+            return;
+        menu.innerHTML = '';
+        const tabs = this.getTabs();
+        const hasIcons = tabs.some(t => !!t.iconName);
+        tabs.forEach(tab => {
+            const item = document.createElement('btu-dropdown-item');
+            item.dataset.name = tab.name ?? '';
+            item.label = tab.label ?? tab.name ?? '';
+            item.selected = tab.name === this.activeTab;
+            item.disabled = tab.disabled;
+            item.error = tab.error;
+            if (tab.iconName)
+                item.iconSymbol = tab.iconName;
+            menu.appendChild(item);
+            item._configure({ checkbox: false, icon: hasIcons, iconSymbol: '', favorites: false, shortcuts: false });
+        });
+    }
+    /** @internal */
+    syncMenuState() {
+        const activeTab = this.getTabs().find(t => t.name === this.activeTab);
+        if (this.menuLabel) {
+            this.menuLabel.textContent = activeTab?.label ?? '';
+        }
+        if (this.menuIcon) {
+            const symbol = activeTab?.iconName ?? '';
+            this.menuIcon.setAttribute('symbol', symbol);
+            this.menuIcon.setAttribute('size', this.size === 'lg' ? 'md' : 'sm');
+            this.menuIcon.hidden = !symbol;
+            // Reposition if icon-position changed
+            const wrapper = this.menuIcon.parentElement;
+            if (wrapper && this.menuLabel) {
+                if (activeTab?.iconPosition === 'trailing') {
+                    wrapper.insertBefore(this.menuIcon, this.menuErrorBadge);
+                }
+                else {
+                    wrapper.insertBefore(this.menuIcon, this.menuLabel);
+                }
+            }
+        }
+        if (this.menuErrorBadge) {
+            this.menuErrorBadge.hidden = !activeTab?.error;
+        }
+        this.menuDropdown?.querySelectorAll('btu-dropdown-item').forEach(item => {
+            item.selected = item.dataset.name === this.activeTab;
+        });
+    }
+    render() {
+        return html ``;
+    }
+}
+__decorate([
+    property({ type: String })
+], Tabs.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: 'active-tab' })
+], Tabs.prototype, "activeTab", void 0);
+__decorate([
+    property({ type: String })
+], Tabs.prototype, "variant", void 0);
+if (!customElements.get('btu-tabs')) {
+    customElements.define('btu-tabs', Tabs);
+}
+//# sourceMappingURL=Tabs.js.map