@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
59 lines (58 loc) • 2.14 kB
TypeScript
/**
* ---------------------------------------------------------------------
* 🔒 AUTOGENERATED BY VENDORISM
* Removing this comment will prevent it from being managed by it.
* ---------------------------------------------------------------------
*/
import SynergyElement from '../../internal/synergy-element.js';
import SynIconButton from '../icon-button/icon-button.component.js';
import type { CSSResultGroup } from 'lit';
/**
* @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs
* @status stable
* @since 2.0
*
* @dependency syn-icon-button
*
* @slot - The tab's label.
*
* @event syn-close - Emitted when the tab is closable and the close button is activated.
*
* @csspart base - The component's base wrapper.
* @csspart close-button - The close button, an `<syn-icon-button>`.
* @csspart close-button__base - The close button's exported `base` part.
*/
export default class SynTab extends SynergyElement {
static styles: CSSResultGroup;
static dependencies: {
'syn-icon-button': typeof SynIconButton;
};
private readonly localize;
private readonly attrId;
private readonly componentId;
tab: HTMLElement;
/** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
panel: string;
/** Draws the tab in an active state. */
active: boolean;
/** Makes the tab closable and shows a close button. */
closable: boolean;
/** Disables the tab and prevents selection. */
disabled: boolean;
/**
* @internal
* Need to wrap in a `@property()` otherwise CustomElement throws a "The result must not have attributes" runtime error.
*/
tabIndex: number;
connectedCallback(): void;
private handleCloseClick;
handleActiveChange(): void;
handleDisabledChange(): void;
render(): import("lit").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'syn-tab': SynTab;
}
}