@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
67 lines • 2.29 kB
TypeScript
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
import { LitElement, type TemplateResult } from 'lit';
declare const SChecked: unique symbol;
export type TNavigationTabDirection = 'vertical' | 'horizonal';
declare const BaseNavigationTab_base: import("../../utils/behaviors/mixin").MixinReturn<typeof LitElement, import("../../utils/behaviors/element-internals").WithElementInternals>;
/**
*
* Our design wish is: through this navigation-tab component, it can be used in bar, rail, and xr style bar and rail.
*
* @version
* Material Design 3 - Expressive
*
* @link
* https://www.figma.com/design/4GM7ohCF2Qtjzs7Fra6jlp/Material-3-Design-Kit--Community-?node-id=55141-14251&p=f&t=Lo93bap9LHFqZ0Q1-0
*
* @todo
* XR
*/
export declare abstract class BaseNavigationTab extends BaseNavigationTab_base {
static shadowRootOptions: ShadowRootInit;
/**
* In XR mode, only 'vertical' is valid.
*/
/**
* In design principle, only vertical navigation-rail tabs are allowed to hide the label.
*/
/**
* To distinguish between tabs of different navigations. Should be managed by navigation components.
*/
get name(): string;
set name(name: string);
get checked(): boolean;
set checked(value: boolean);
protected hasLabel: boolean;
protected hasActiveIcon: boolean;
protected hasInactiveIcon: boolean;
protected hasBadge: boolean;
private buttonElement;
private [SChecked];
private readonly selectionController;
constructor();
protected render(): TemplateResult;
protected renderIndicator(): TemplateResult<1>;
protected renderLabel(): TemplateResult<1>;
protected renderIcon(): TemplateResult<1>;
protected renderBadge(): TemplateResult<1>;
protected getRenderClasses(): {
'has-label': boolean;
'has-active-icon': boolean;
'has-inactive-icon': boolean;
'has-badge': boolean;
active: boolean;
inactive: boolean;
};
private handleClick;
private handleKeydown;
private handleLabelSlotChange;
private handleActiveIconSlotChange;
private handleInactiveIconSlotChange;
private handleBadgeSlotChange;
}
export {};
//# sourceMappingURL=base-navigation-tab.d.ts.map