/** * Copyright Aquera Inc 2023 * * This source code is licensed under the BSD-3-Clause license found in the * LICENSE file in the root directory of this source tree. */ import NileElement from '../internal/nile-element'; import type { CSSResultGroup, PropertyValueMap } from 'lit'; import '../nile-icon-button/nile-icon-button'; /** * Tab group navigation component. * * @tag nile-nav-tab-group * * @slot - Used for grouping tab panels in the tab group. Must be `` elements. * @slot nav - Used for grouping tabs in the tab group. Must be `` elements. * * @csspart base - The component's base wrapper. * @csspart nav - The tab group's navigation container where tabs are slotted in. * @csspart tabs - The container that wraps the tabs. * @csspart active-tab-indicator - The line that highlights the currently selected tab. * @csspart toggle-frame - Toggle variant: absolutely positioned ring that draws the group chrome (tabs paint above it). * @csspart body - The tab group's body where tab panels are slotted in. * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an ``. * @csspart scroll-button--start - The starting scroll button. * @csspart scroll-button--end - The ending scroll button. * @csspart scroll-button__base - The scroll button's exported `base` part. * * @cssproperty --indicator-color - The color of the active tab indicator. * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels). * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels). * @cssproperty --show-indicator-on-hover - Whether to show the indicator on hover. * * @event nile-close - Bubbled from a closable ``; re-emitted so parents can listen on this element. */ export declare class NileNavTabGroup extends NileElement { static styles: CSSResultGroup; /** * Selection model (for reviewers): * - `activeTabName` is the internal source of truth; clicks and keyboard update it. * - `activeTabProp` / attribute `value` is the host-controlled API; changes in `updated()` copy into `activeTabName`. * - `setActiveTab()` syncs each tab’s `active` flag, each panel’s `active`, `activeTabProp` / `value`, indicator/pill geometry, and optionally emits `nile-tab-change`. * - `this.tabs` only includes non-disabled tabs (see `syncTabsAndPanels`); keyboard roving focus uses that list. */ private activeTab?; private mutationObserver; private resizeObserver; private visibilityObserver; private pillRepositionTimer; private pillTransitionClassTimer; private pillReady; private observedTabs; private tabs; private panels; /** Tabs emit `nile-close` on the host; bubble is stopped so we re-emit from the group with `{ panel }` for consumers. */ private readonly handleCloseEvent; /** Tracks visibility for snapping the indicator when a hidden parent (e.g. dropdown) is reopened. */ private tabGroupWasIntersecting; /** Last measured nav width; used to detect layout resume after display:none / collapse. */ private lastNavClientWidth; tabGroup: HTMLElement; body: HTMLSlotElement; nav: HTMLElement; indicator: HTMLElement; hoverIndicator: HTMLElement; hasScrollControls: boolean; /** The placement of the tabs. */ placement: 'top' | 'bottom' | 'start' | 'end'; /** The currently active tab value. */ activeTabProp: string; /** Track for showing Indicators and Background. */ noTrack: boolean; /** Disables the scroll arrows that appear when tabs overflow. */ noScrollControls: boolean; /** Controls whether tabs are centered and have equal width. */ centered: boolean; variant: 'underline' | 'filled' | 'toggle' | 'neutral-filled' | 'toggle-button'; indicatorPlacement: string; fullWidth: boolean; width: string; showIndicatorOnHover: boolean; activeTabName: string; private get showScrollControlButtons(); connectedCallback(): void; disconnectedCallback(): void; protected updated(_changedProperties: PropertyValueMap | Map): void; syncIndicator(): void; private handleNavClick; private positionPill; private debouncedPositionPill; private handleTabHover; private handleTabHoverLeave; private positionHoverIndicator; render(): import("lit-html").TemplateResult<1>; private getAllTabs; private getAllPanels; /** * Resolves the tab to treat as selected for indicator/pill wiring. * Prefer `activeTabName` match; if empty (before init), fall back to `.active` or first usable tab. */ private getActiveTab; /** Reflects horizontal overflow into `hasScrollControls` (top/bottom only; vertical stacks do not scroll this strip). */ setScrollControls(): void; private handleKeyDown; private handleScrollToStart; private handleScrollToEnd; private setActiveTab; private setAriaLabels; private getRelativeOffsetToAncestor; private getLayoutBoxRelativeToContainer; private repositionIndicator; private syncTabsAndPanels; } export default NileNavTabGroup; declare global { interface HTMLElementTagNameMap { 'nile-nav-tab-group': NileNavTabGroup; } }