@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
83 lines • 3.99 kB
TypeScript
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* Internal base class for `mdc-tab`.
*
* A tab is a single-select cell inside an `mdc-tabs` bar. Selection is owned
* by the parent bar (roving `tabindex`, `role="tab"`, `aria-selected`), while
* the tab is responsible for rendering its icon / label and the animated
* active indicator.
*
* Label and icon width/opacity changes are animated via
* {@link MeasuredDimensionController} and {@link OpacityTransitionController},
* so a tab visibly resizes / fades when its slotted content changes.
*/
import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
import { MeasuredDimensionController } from '../../../utils/controller/measured-dimension-controller';
import { OpacityTransitionController } from '../../../utils/controller/opacity-transition-controller';
import type { ITab, TabVariant } from '../tab.interface';
/**
* Symbol used by `mdc-tabs` to request a tab to animate its active indicator
* from the previously selected tab's indicator position.
*/
export declare const ANIMATE_INDICATOR: unique symbol;
declare const BaseTab_base: Omit<typeof LitElement, "prototype"> & (new () => LitElement & import("../../../utils/behaviors/element-internals").WithElementInternals & import("../../ripple/ripple-options.mixin").IMixinRippleOptions & import("../../ripple/ripple-options.mixin").IMixinRippleAttributes & import("../../focus-ring/focus-ring-options.mixin").IMixinFocusRingOption);
export declare abstract class BaseTab extends BaseTab_base implements ITab {
/**
* Marks the element as a tab child of `mdc-tabs`. The bar discovers its
* tabs by querying this attribute.
*/
readonly isTab = true;
/** Whether this tab is currently selected. */
active: boolean;
/** @deprecated use `active`. */
get selected(): boolean;
set selected(active: boolean);
/** Visual variant — `primary` | `secondary` | `floating`. */
variant: TabVariant;
/** Index within the parent `mdc-tabs`, assigned by the bar. */
index: number;
/** Set when the `icon` slot is populated. */
hasIcon: boolean;
/** Set when the default slot is empty — the tab shows only its icon. */
iconOnly: boolean;
protected readonly buttonElement: HTMLElement | null;
protected readonly contentElement: HTMLElement | null;
protected readonly indicatorElement: HTMLElement | null;
protected readonly labelElement: HTMLElement | null;
protected readonly iconElement: HTMLElement | null;
private readonly assignedDefaultNodes;
private readonly assignedIcons;
/** Animates the label width when the slotted label text changes. */
protected readonly labelWidthController: MeasuredDimensionController;
/** Fades the label when its content changes. */
protected readonly labelOpacityController: OpacityTransitionController;
/** Fades the icon when the icon slot content changes. */
protected readonly iconOpacityController: OpacityTransitionController;
/** Ripple / focus ring track pointer & focus on the host. */
get rippleControl(): HTMLElement | null;
get focusRingControl(): HTMLElement | null;
constructor();
protected getContentClasses(): {
'has-icon': boolean;
'has-label': boolean;
};
protected render(): TemplateResult;
protected updated(changedProperties: PropertyValues<this>): void;
private readonly handleKeydown;
private readonly handleContentClick;
private readonly handleSlotChange;
private readonly handleIconSlotChange;
/**
* Animates the active indicator from the previously selected tab's
* indicator bounds to this tab's, via a `translateX` + `scaleX` morph.
* Falls back to an opacity fade when motion is reduced.
*/
[ANIMATE_INDICATOR](previousTab: BaseTab | null): void;
private getKeyframes;
}
export {};
//# sourceMappingURL=base-tab.d.ts.map