@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
119 lines • 4.56 kB
TypeScript
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* Navigation tab component that behaves like a single-select control and
* synchronizes selection through the navigation state store.
*
* @example
* ```html
* <mdc-navigation-bar navigation-scope="main-nav">
* <mdc-navigation-tab name="bar-tabs" value="/home">Home</mdc-navigation-tab>
* <mdc-navigation-tab name="bar-tabs" value="/settings">Settings</mdc-navigation-tab>
* </mdc-navigation-bar>
*
* <script>
* const tab = document.querySelector('mdc-navigation-tab')
* tab?.addEventListener('change', (event) => {
* console.log(event.detail.value, event.detail.source, event.detail.trigger)
* })
* </script>
* ```
*/
import { LitElement, type PropertyValues } from 'lit';
import { type NavigationEventSource, type NavigationEventTrigger } from '../../utils/navigation/navigation-state-store';
import type { INavigationTab, NavigationTabVariant } from './navigation-tab.interface';
export interface NavigationTabEventDetail {
/** Business navigation key for this tab, used for cross-container sync. */
value: string;
/** Whether the event originated from user interaction or external sync. */
source: NavigationEventSource;
/** Interaction trigger that caused this event. */
trigger: NavigationEventTrigger;
}
declare global {
interface HTMLElementTagNameMap {
'mdc-navigation-tab': MDCNavigationTab;
}
}
declare const MDCNavigationTab_base: Omit<typeof LitElement, "prototype"> & (new () => LitElement & import("../../utils/behaviors/element-internals").WithElementInternals & object & import("../ripple/ripple-options.mixin").IMixinRippleOptions & import("../ripple/ripple-options.mixin").IMixinRippleAttributes & import("../focus-ring/focus-ring-options.mixin").IMixinFocusRingOption);
/**
*
* @tutorial
* - bar : vertical | horizontal
* - bar-xr : vertical
* - rail : vertical | horizontal | round
* - rail-xr: vertical | round
*
* @version "Material Design 3"
* @version "Material Design 3 - Expressive"
*/
export declare class MDCNavigationTab extends MDCNavigationTab_base implements INavigationTab {
static shadowRootOptions: {
clonable?: boolean;
customElementRegistry?: CustomElementRegistry | null;
mode: ShadowRootMode;
serializable?: boolean;
slotAssignment?: SlotAssignmentMode;
delegatesFocus: boolean;
};
static styles: import("lit").CSSResult[];
label: string;
name: string;
value: string;
href: string | null;
navigationScope: string;
checked: boolean;
disabled: boolean;
/**
* horizontal is not available for bar-xr and rail-xr types.
*/
variant: NavigationTabVariant;
private inputElement;
private indicatorElement;
private labelElement;
get rippleControl(): HTMLElement | null;
get focusRingControl(): HTMLInputElement;
focusRingInward: boolean;
private readonly tabId;
private unsubscribeScope;
private pendingUserTrigger;
private checkedBeforeControllerSelection;
private selectionHandledByController;
private suppressCheckedUpdatePublish;
private readonly selectionController;
private readonly opacityController;
private readonly widthController;
constructor();
connectedCallback(): void;
disconnectedCallback(): void;
protected willUpdate(changedProperties: PropertyValues<this>): void;
protected updated(changedProperties: PropertyValues<this>): void;
protected getRenderClasses(): {
[x: string]: boolean;
container: boolean;
};
/**
* Render logic intentionally uses a native input element to mirror
* input-like semantics (`name`, `checked`, `disabled`) for the tab control.
*/
protected render(): unknown;
protected renderInactiveIconSlot(): import("lit-html").TemplateResult<1>;
protected renderActiveIconSlot(): import("lit-html").TemplateResult<1>;
protected renderInput(): import("lit-html").TemplateResult<1>;
private readonly handlePointerDownCapture;
private readonly handleKeyDownCapture;
private readonly stopNativeInputAndChange;
private readonly handleScopeMutation;
private handleControllerSelection;
private handleCheckedMutation;
private subscribeScope;
private syncWithScopeState;
private dispatchNavigationInput;
private dispatchNavigationChange;
private get normalizedScope();
}
export {};
//# sourceMappingURL=navigation-tab.d.ts.map