@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
487 lines • 23.4 kB
TypeScript
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* The values in this file are taken from M3 Figma.
* Some values are slightly adjusted and do not conform
* to the MD3 design specifications.
*
* |--------------- borderless
* | container-block-leading-space
* | icon-container
* | container-inline-leading-space /`````````\ also state-layer
* | container-inline-leading-space | <----- indicator-inline/block-leading/trailing-space
* | container-inline-leading-space \_________/
* |
* | Tab Label
* |
* | container-block-leading-space
* |_______________
*
* @example
* ```html
* <tab>
* <indicator />
* <icon-container>
* <state-layer>
* <icon />
* </state-layer>
* </icon-container>
* </tab>
* ```
*
* @link
* https://www.figma.com/community/file/1035203688168086460
* https://www.figma.com/design/4GM7ohCF2Qtjzs7Fra6jlp/Material-3-Design-Kit--Community-?node-id=55141-14251&p=f&t=Lo93bap9LHFqZ0Q1-0
*/
export declare const NavigationBarVerticalTabDefinition: {
'icon-container-shape'?: string | undefined;
'indicator-shape'?: string | undefined;
'icon-size'?: string | undefined;
'unselected-icon-color'?: string | undefined;
'selected-icon-color'?: string | undefined;
'icon-container-height'?: string | undefined;
'icon-container-width'?: string | undefined;
'icon-container-block-leading-space'?: string | undefined;
'icon-container-block-trailing-space'?: string | undefined;
'icon-container-inline-leading-space'?: string | undefined;
'icon-container-inline-trailing-space'?: string | undefined;
'unselected-indicator-color'?: string | undefined;
'selected-indicator-color'?: string | undefined;
'indicator-height'?: string | undefined;
'indicator-width'?: string | undefined;
'unselected-label-color'?: any;
'selected-label-color'?: any;
'label-size'?: any;
'label-line-height'?: any;
'label-font'?: any;
'label-tracking'?: any;
'label-font-weight'?: any;
'badge-color'?: string | undefined;
'badge-height'?: string | undefined;
'badge-width'?: string | undefined;
'badge-label-color'?: any;
'badge-label-size'?: any;
'badge-label-line-height'?: any;
'badge-label-font'?: any;
'badge-label-tracking'?: any;
'badge-label-font-weight'?: any;
'unselected-enabled-state-layer-color'?: string | undefined;
'unselected-hovered-state-layer-color'?: string | undefined;
'unselected-focused-state-layer-color'?: string | undefined;
'unselected-pressed-state-layer-color'?: string | undefined;
'selected-enabled-state-layer-color'?: string | undefined;
'selected-hovered-state-layer-color'?: string | undefined;
'selected-focused-state-layer-color'?: string | undefined;
'selected-pressed-state-layer-color'?: string | undefined;
'unselected-enabled-state-layer-opacity'?: string | undefined;
'unselected-hovered-state-layer-opacity'?: string | undefined;
'unselected-focused-state-layer-opacity'?: string | undefined;
'unselected-pressed-state-layer-opacity'?: string | undefined;
'selected-enabled-state-layer-opacity'?: string | undefined;
'selected-hovered-state-layer-opacity'?: string | undefined;
'selected-focused-state-layer-opacity'?: string | undefined;
'selected-pressed-state-layer-opacity'?: string | undefined;
'container-height'?: string | undefined;
'container-width'?: string | undefined;
'container-block-leading-space'?: string | undefined;
'container-block-trailing-space'?: string | undefined;
'container-inline-leading-space'?: string | undefined;
'container-inline-trailing-space'?: string | undefined;
'spacing-between-icon-and-label'?: any;
};
export declare const NavigationBarHorizontalTabDefinition: {
'icon-container-shape'?: string | undefined;
'indicator-shape'?: string | undefined;
'icon-size'?: string | undefined;
'unselected-icon-color'?: string | undefined;
'selected-icon-color'?: string | undefined;
'icon-container-height'?: string | undefined;
'icon-container-width'?: string | undefined;
'icon-container-block-leading-space'?: string | undefined;
'icon-container-block-trailing-space'?: string | undefined;
'icon-container-inline-leading-space'?: string | undefined;
'icon-container-inline-trailing-space'?: string | undefined;
'unselected-indicator-color'?: string | undefined;
'selected-indicator-color'?: string | undefined;
'indicator-height'?: string | undefined;
'indicator-width'?: string | undefined;
'unselected-label-color'?: any;
'selected-label-color'?: any;
'label-size'?: any;
'label-line-height'?: any;
'label-font'?: any;
'label-tracking'?: any;
'label-font-weight'?: any;
'badge-color'?: string | undefined;
'badge-height'?: string | undefined;
'badge-width'?: string | undefined;
'badge-label-color'?: any;
'badge-label-size'?: any;
'badge-label-line-height'?: any;
'badge-label-font'?: any;
'badge-label-tracking'?: any;
'badge-label-font-weight'?: any;
'unselected-enabled-state-layer-color'?: string | undefined;
'unselected-hovered-state-layer-color'?: string | undefined;
'unselected-focused-state-layer-color'?: string | undefined;
'unselected-pressed-state-layer-color'?: string | undefined;
'selected-enabled-state-layer-color'?: string | undefined;
'selected-hovered-state-layer-color'?: string | undefined;
'selected-focused-state-layer-color'?: string | undefined;
'selected-pressed-state-layer-color'?: string | undefined;
'unselected-enabled-state-layer-opacity'?: string | undefined;
'unselected-hovered-state-layer-opacity'?: string | undefined;
'unselected-focused-state-layer-opacity'?: string | undefined;
'unselected-pressed-state-layer-opacity'?: string | undefined;
'selected-enabled-state-layer-opacity'?: string | undefined;
'selected-hovered-state-layer-opacity'?: string | undefined;
'selected-focused-state-layer-opacity'?: string | undefined;
'selected-pressed-state-layer-opacity'?: string | undefined;
'container-height'?: string | undefined;
'container-width'?: string | undefined;
'container-block-leading-space'?: string | undefined;
'container-block-trailing-space'?: string | undefined;
'container-inline-leading-space'?: string | undefined;
'container-inline-trailing-space'?: string | undefined;
'spacing-between-icon-and-label'?: any;
};
export declare const NavigationBarXRVerticalTabDefinition: {
'icon-container-shape'?: string | undefined;
'indicator-shape'?: string | undefined;
'icon-size'?: string | undefined;
'unselected-icon-color'?: string | undefined;
'selected-icon-color'?: string | undefined;
'icon-container-height'?: string | undefined;
'icon-container-width'?: string | undefined;
'icon-container-block-leading-space'?: string | undefined;
'icon-container-block-trailing-space'?: string | undefined;
'icon-container-inline-leading-space'?: string | undefined;
'icon-container-inline-trailing-space'?: string | undefined;
'unselected-indicator-color'?: string | undefined;
'selected-indicator-color'?: string | undefined;
'indicator-height'?: string | undefined;
'indicator-width'?: string | undefined;
'unselected-label-color'?: any;
'selected-label-color'?: any;
'label-size'?: any;
'label-line-height'?: any;
'label-font'?: any;
'label-tracking'?: any;
'label-font-weight'?: any;
'badge-color'?: string | undefined;
'badge-height'?: string | undefined;
'badge-width'?: string | undefined;
'badge-label-color'?: any;
'badge-label-size'?: any;
'badge-label-line-height'?: any;
'badge-label-font'?: any;
'badge-label-tracking'?: any;
'badge-label-font-weight'?: any;
'unselected-enabled-state-layer-color'?: string | undefined;
'unselected-hovered-state-layer-color'?: string | undefined;
'unselected-focused-state-layer-color'?: string | undefined;
'unselected-pressed-state-layer-color'?: string | undefined;
'selected-enabled-state-layer-color'?: string | undefined;
'selected-hovered-state-layer-color'?: string | undefined;
'selected-focused-state-layer-color'?: string | undefined;
'selected-pressed-state-layer-color'?: string | undefined;
'unselected-enabled-state-layer-opacity'?: string | undefined;
'unselected-hovered-state-layer-opacity'?: string | undefined;
'unselected-focused-state-layer-opacity'?: string | undefined;
'unselected-pressed-state-layer-opacity'?: string | undefined;
'selected-enabled-state-layer-opacity'?: string | undefined;
'selected-hovered-state-layer-opacity'?: string | undefined;
'selected-focused-state-layer-opacity'?: string | undefined;
'selected-pressed-state-layer-opacity'?: string | undefined;
'container-height'?: string | undefined;
'container-width'?: string | undefined;
'container-block-leading-space'?: string | undefined;
'container-block-trailing-space'?: string | undefined;
'container-inline-leading-space'?: string | undefined;
'container-inline-trailing-space'?: string | undefined;
'spacing-between-icon-and-label'?: any;
};
export declare const NavigationRailVerticalTabDefinition: {
'icon-container-shape'?: string | undefined;
'indicator-shape'?: string | undefined;
'icon-size'?: string | undefined;
'unselected-icon-color'?: string | undefined;
'selected-icon-color'?: string | undefined;
'icon-container-height'?: string | undefined;
'icon-container-width'?: string | undefined;
'icon-container-block-leading-space'?: string | undefined;
'icon-container-block-trailing-space'?: string | undefined;
'icon-container-inline-leading-space'?: string | undefined;
'icon-container-inline-trailing-space'?: string | undefined;
'unselected-indicator-color'?: string | undefined;
'selected-indicator-color'?: string | undefined;
'indicator-height'?: string | undefined;
'indicator-width'?: string | undefined;
'unselected-label-color'?: any;
'selected-label-color'?: any;
'label-size'?: any;
'label-line-height'?: any;
'label-font'?: any;
'label-tracking'?: any;
'label-font-weight'?: any;
'badge-color'?: string | undefined;
'badge-height'?: string | undefined;
'badge-width'?: string | undefined;
'badge-label-color'?: any;
'badge-label-size'?: any;
'badge-label-line-height'?: any;
'badge-label-font'?: any;
'badge-label-tracking'?: any;
'badge-label-font-weight'?: any;
'unselected-enabled-state-layer-color'?: string | undefined;
'unselected-hovered-state-layer-color'?: string | undefined;
'unselected-focused-state-layer-color'?: string | undefined;
'unselected-pressed-state-layer-color'?: string | undefined;
'selected-enabled-state-layer-color'?: string | undefined;
'selected-hovered-state-layer-color'?: string | undefined;
'selected-focused-state-layer-color'?: string | undefined;
'selected-pressed-state-layer-color'?: string | undefined;
'unselected-enabled-state-layer-opacity'?: string | undefined;
'unselected-hovered-state-layer-opacity'?: string | undefined;
'unselected-focused-state-layer-opacity'?: string | undefined;
'unselected-pressed-state-layer-opacity'?: string | undefined;
'selected-enabled-state-layer-opacity'?: string | undefined;
'selected-hovered-state-layer-opacity'?: string | undefined;
'selected-focused-state-layer-opacity'?: string | undefined;
'selected-pressed-state-layer-opacity'?: string | undefined;
'container-height'?: string | undefined;
'container-width'?: string | undefined;
'container-block-leading-space'?: string | undefined;
'container-block-trailing-space'?: string | undefined;
'container-inline-leading-space'?: string | undefined;
'container-inline-trailing-space'?: string | undefined;
'spacing-between-icon-and-label'?: any;
};
export declare const NavigationRailHorizontalTabDefinition: {
'icon-container-shape'?: string | undefined;
'indicator-shape'?: string | undefined;
'icon-size'?: string | undefined;
'unselected-icon-color'?: string | undefined;
'selected-icon-color'?: string | undefined;
'icon-container-height'?: string | undefined;
'icon-container-width'?: string | undefined;
'icon-container-block-leading-space'?: string | undefined;
'icon-container-block-trailing-space'?: string | undefined;
'icon-container-inline-leading-space'?: string | undefined;
'icon-container-inline-trailing-space'?: string | undefined;
'unselected-indicator-color'?: string | undefined;
'selected-indicator-color'?: string | undefined;
'indicator-height'?: string | undefined;
'indicator-width'?: string | undefined;
'unselected-label-color'?: any;
'selected-label-color'?: any;
'label-size'?: any;
'label-line-height'?: any;
'label-font'?: any;
'label-tracking'?: any;
'label-font-weight'?: any;
'badge-color'?: string | undefined;
'badge-height'?: string | undefined;
'badge-width'?: string | undefined;
'badge-label-color'?: any;
'badge-label-size'?: any;
'badge-label-line-height'?: any;
'badge-label-font'?: any;
'badge-label-tracking'?: any;
'badge-label-font-weight'?: any;
'unselected-enabled-state-layer-color'?: string | undefined;
'unselected-hovered-state-layer-color'?: string | undefined;
'unselected-focused-state-layer-color'?: string | undefined;
'unselected-pressed-state-layer-color'?: string | undefined;
'selected-enabled-state-layer-color'?: string | undefined;
'selected-hovered-state-layer-color'?: string | undefined;
'selected-focused-state-layer-color'?: string | undefined;
'selected-pressed-state-layer-color'?: string | undefined;
'unselected-enabled-state-layer-opacity'?: string | undefined;
'unselected-hovered-state-layer-opacity'?: string | undefined;
'unselected-focused-state-layer-opacity'?: string | undefined;
'unselected-pressed-state-layer-opacity'?: string | undefined;
'selected-enabled-state-layer-opacity'?: string | undefined;
'selected-hovered-state-layer-opacity'?: string | undefined;
'selected-focused-state-layer-opacity'?: string | undefined;
'selected-pressed-state-layer-opacity'?: string | undefined;
'container-height'?: string | undefined;
'container-width'?: string | undefined;
'container-block-leading-space'?: string | undefined;
'container-block-trailing-space'?: string | undefined;
'container-inline-leading-space'?: string | undefined;
'container-inline-trailing-space'?: string | undefined;
'spacing-between-icon-and-label'?: any;
};
export declare const NavigationRailRoundTabDefinition: {
'icon-container-shape'?: string | undefined;
'indicator-shape'?: string | undefined;
'icon-size'?: string | undefined;
'unselected-icon-color'?: string | undefined;
'selected-icon-color'?: string | undefined;
'icon-container-height'?: string | undefined;
'icon-container-width'?: string | undefined;
'icon-container-block-leading-space'?: string | undefined;
'icon-container-block-trailing-space'?: string | undefined;
'icon-container-inline-leading-space'?: string | undefined;
'icon-container-inline-trailing-space'?: string | undefined;
'unselected-indicator-color'?: string | undefined;
'selected-indicator-color'?: string | undefined;
'indicator-height'?: string | undefined;
'indicator-width'?: string | undefined;
'unselected-label-color'?: any;
'selected-label-color'?: any;
'label-size'?: any;
'label-line-height'?: any;
'label-font'?: any;
'label-tracking'?: any;
'label-font-weight'?: any;
'badge-color'?: string | undefined;
'badge-height'?: string | undefined;
'badge-width'?: string | undefined;
'badge-label-color'?: any;
'badge-label-size'?: any;
'badge-label-line-height'?: any;
'badge-label-font'?: any;
'badge-label-tracking'?: any;
'badge-label-font-weight'?: any;
'unselected-enabled-state-layer-color'?: string | undefined;
'unselected-hovered-state-layer-color'?: string | undefined;
'unselected-focused-state-layer-color'?: string | undefined;
'unselected-pressed-state-layer-color'?: string | undefined;
'selected-enabled-state-layer-color'?: string | undefined;
'selected-hovered-state-layer-color'?: string | undefined;
'selected-focused-state-layer-color'?: string | undefined;
'selected-pressed-state-layer-color'?: string | undefined;
'unselected-enabled-state-layer-opacity'?: string | undefined;
'unselected-hovered-state-layer-opacity'?: string | undefined;
'unselected-focused-state-layer-opacity'?: string | undefined;
'unselected-pressed-state-layer-opacity'?: string | undefined;
'selected-enabled-state-layer-opacity'?: string | undefined;
'selected-hovered-state-layer-opacity'?: string | undefined;
'selected-focused-state-layer-opacity'?: string | undefined;
'selected-pressed-state-layer-opacity'?: string | undefined;
'container-height'?: string | undefined;
'container-width'?: string | undefined;
'container-block-leading-space'?: string | undefined;
'container-block-trailing-space'?: string | undefined;
'container-inline-leading-space'?: string | undefined;
'container-inline-trailing-space'?: string | undefined;
'spacing-between-icon-and-label'?: any;
};
export declare const NavigationRailXRVerticalTabDefinition: {
'icon-container-shape'?: string | undefined;
'indicator-shape'?: string | undefined;
'icon-size'?: string | undefined;
'unselected-icon-color'?: string | undefined;
'selected-icon-color'?: string | undefined;
'icon-container-height'?: string | undefined;
'icon-container-width'?: string | undefined;
'icon-container-block-leading-space'?: string | undefined;
'icon-container-block-trailing-space'?: string | undefined;
'icon-container-inline-leading-space'?: string | undefined;
'icon-container-inline-trailing-space'?: string | undefined;
'unselected-indicator-color'?: string | undefined;
'selected-indicator-color'?: string | undefined;
'indicator-height'?: string | undefined;
'indicator-width'?: string | undefined;
'unselected-label-color'?: any;
'selected-label-color'?: any;
'label-size'?: any;
'label-line-height'?: any;
'label-font'?: any;
'label-tracking'?: any;
'label-font-weight'?: any;
'badge-color'?: string | undefined;
'badge-height'?: string | undefined;
'badge-width'?: string | undefined;
'badge-label-color'?: any;
'badge-label-size'?: any;
'badge-label-line-height'?: any;
'badge-label-font'?: any;
'badge-label-tracking'?: any;
'badge-label-font-weight'?: any;
'unselected-enabled-state-layer-color'?: string | undefined;
'unselected-hovered-state-layer-color'?: string | undefined;
'unselected-focused-state-layer-color'?: string | undefined;
'unselected-pressed-state-layer-color'?: string | undefined;
'selected-enabled-state-layer-color'?: string | undefined;
'selected-hovered-state-layer-color'?: string | undefined;
'selected-focused-state-layer-color'?: string | undefined;
'selected-pressed-state-layer-color'?: string | undefined;
'unselected-enabled-state-layer-opacity'?: string | undefined;
'unselected-hovered-state-layer-opacity'?: string | undefined;
'unselected-focused-state-layer-opacity'?: string | undefined;
'unselected-pressed-state-layer-opacity'?: string | undefined;
'selected-enabled-state-layer-opacity'?: string | undefined;
'selected-hovered-state-layer-opacity'?: string | undefined;
'selected-focused-state-layer-opacity'?: string | undefined;
'selected-pressed-state-layer-opacity'?: string | undefined;
'container-height'?: string | undefined;
'container-width'?: string | undefined;
'container-block-leading-space'?: string | undefined;
'container-block-trailing-space'?: string | undefined;
'container-inline-leading-space'?: string | undefined;
'container-inline-trailing-space'?: string | undefined;
'spacing-between-icon-and-label'?: any;
};
export declare const NavigationRailXRRoundTabDefinition: {
'icon-container-shape'?: string | undefined;
'indicator-shape'?: string | undefined;
'icon-size'?: string | undefined;
'unselected-icon-color'?: string | undefined;
'selected-icon-color'?: string | undefined;
'icon-container-height'?: string | undefined;
'icon-container-width'?: string | undefined;
'icon-container-block-leading-space'?: string | undefined;
'icon-container-block-trailing-space'?: string | undefined;
'icon-container-inline-leading-space'?: string | undefined;
'icon-container-inline-trailing-space'?: string | undefined;
'unselected-indicator-color'?: string | undefined;
'selected-indicator-color'?: string | undefined;
'indicator-height'?: string | undefined;
'indicator-width'?: string | undefined;
'unselected-label-color'?: any;
'selected-label-color'?: any;
'label-size'?: any;
'label-line-height'?: any;
'label-font'?: any;
'label-tracking'?: any;
'label-font-weight'?: any;
'badge-color'?: string | undefined;
'badge-height'?: string | undefined;
'badge-width'?: string | undefined;
'badge-label-color'?: any;
'badge-label-size'?: any;
'badge-label-line-height'?: any;
'badge-label-font'?: any;
'badge-label-tracking'?: any;
'badge-label-font-weight'?: any;
'unselected-enabled-state-layer-color'?: string | undefined;
'unselected-hovered-state-layer-color'?: string | undefined;
'unselected-focused-state-layer-color'?: string | undefined;
'unselected-pressed-state-layer-color'?: string | undefined;
'selected-enabled-state-layer-color'?: string | undefined;
'selected-hovered-state-layer-color'?: string | undefined;
'selected-focused-state-layer-color'?: string | undefined;
'selected-pressed-state-layer-color'?: string | undefined;
'unselected-enabled-state-layer-opacity'?: string | undefined;
'unselected-hovered-state-layer-opacity'?: string | undefined;
'unselected-focused-state-layer-opacity'?: string | undefined;
'unselected-pressed-state-layer-opacity'?: string | undefined;
'selected-enabled-state-layer-opacity'?: string | undefined;
'selected-hovered-state-layer-opacity'?: string | undefined;
'selected-focused-state-layer-opacity'?: string | undefined;
'selected-pressed-state-layer-opacity'?: string | undefined;
'container-height'?: string | undefined;
'container-width'?: string | undefined;
'container-block-leading-space'?: string | undefined;
'container-block-trailing-space'?: string | undefined;
'container-inline-leading-space'?: string | undefined;
'container-inline-trailing-space'?: string | undefined;
'spacing-between-icon-and-label'?: any;
};
//# sourceMappingURL=navigation-tab.definition.d.ts.map