@sandlada/mdc/build/component-definitions/tab.definition.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{ElevationLevel as e}from"../node_modules/@sandlada/mdk/build/domain/elevation.js";import{Shape as t}from"../node_modules/@sandlada/mdk/build/domain/shape.js";import{State as n}from"../node_modules/@sandlada/mdk/build/domain/state.js";import{Typescale as r}from"../node_modules/@sandlada/mdk/build/domain/typescale.js";import"../node_modules/@sandlada/mdk/build/index.js";import{Color as i}from"../utils/tokens/theme.js";import{createStyleDefinition as a}from"../utils/tokens/create-style-definition.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* Style definitions for `mdc-tab` per Material Design 3 and the
* MD3 Expressive (MD3E) additions.
*
* Three variants are provided:
* - `primary`   : the standard MD3 primary tab — a full-width cell with a
*                 3dp active indicator bar at the bottom edge. Icon and label
*                 stack vertically by default.
* - `secondary` : the MD3 secondary tab — inline icon + label with a 2dp
*                 full-width active indicator.
* - `floating`  : the MD3E Expressive floating tab — a pill-shaped cell whose
*                 active indicator is a filled, fully-rounded container that
*                 slides between tabs.
*
* @link
* https://m3.material.io/components/tabs/overview
*/
const o=a({"enabled-container-color":`transparent`,"enabled-container-elevation":e.Level0,"container-block-leading-space":`0px`,"container-block-trailing-space":`0px`,"container-inline-leading-space":`16px`,"container-inline-trailing-space":`16px`,"active-indicator-inline-leading-space":`0px`,"active-indicator-inline-trailing-space":`0px`,"active-indicator-block-leading-space":`0px`,"active-indicator-block-trailing-space":`0px`,"label-font":r.TitleSmall.Font,"label-size":r.TitleSmall.FontSize,"label-line-height":r.TitleSmall.LineHeight,"label-weight":r.TitleSmall.FontWeight,"label-tracking":r.TitleSmall.Tracking,"enabled-label-color-unselected":i.OnSurfaceVariant,"enabled-label-color-selected":i.Primary,"hovered-label-color":i.OnSurfaceVariant,"focused-label-color":i.OnSurfaceVariant,"pressed-label-color":i.OnSurfaceVariant,"icon-size":`24px`,"enabled-icon-color-unselected":i.OnSurfaceVariant,"enabled-icon-color-selected":i.Primary,"hovered-icon-color":i.OnSurfaceVariant,"focused-icon-color":i.OnSurfaceVariant,"pressed-icon-color":i.OnSurfaceVariant,"enabled-state-layer-color-unselected":i.OnSurface,"hovered-state-layer-color-unselected":i.OnSurface,"focused-state-layer-color-unselected":i.OnSurface,"pressed-state-layer-color-unselected":i.OnSurface,"enabled-state-layer-opacity-unselected":`0`,"hovered-state-layer-opacity-unselected":n.HoveredStateLayerOpacity,"focused-state-layer-opacity-unselected":n.FocusedStateLayerOpacity,"pressed-state-layer-opacity-unselected":n.PressedStateLayerOpacity,"enabled-state-layer-color-selected":i.OnSurface,"hovered-state-layer-color-selected":i.OnSurface,"focused-state-layer-color-selected":i.OnSurface,"pressed-state-layer-color-selected":i.OnSurface,"enabled-state-layer-opacity-selected":`0`,"hovered-state-layer-opacity-selected":n.HoveredStateLayerOpacity,"focused-state-layer-opacity-selected":n.FocusedStateLayerOpacity,"pressed-state-layer-opacity-selected":n.PressedStateLayerOpacity,"spacing-between-icon-and-label":`8px`}),s=a({...o,"container-height":`48px`,"with-icon-and-label-text-container-height":`64px`,"container-shape-start-start":t.None,"container-shape-start-end":t.None,"container-shape-end-start":t.None,"container-shape-end-end":t.None,"enabled-active-indicator-color":i.Primary,"active-indicator-height":`3px`,"active-indicator-shape-start-start":t.None,"active-indicator-shape-start-end":t.None,"active-indicator-shape-end-start":t.None,"active-indicator-shape-end-end":t.None,"spacing-between-icon-and-label":`2px`}),c=a(s),l=a({...o,"container-height":`48px`,"container-shape-start-start":t.None,"container-shape-start-end":t.None,"container-shape-end-start":t.None,"container-shape-end-end":t.None,"enabled-active-indicator-color":i.Primary,"active-indicator-height":`2px`,"active-indicator-shape-start-start":t.None,"active-indicator-shape-start-end":t.None,"active-indicator-shape-end-start":t.None,"active-indicator-shape-end-end":t.None}),u=a(l),d=a({...o,"container-height":`56px`,"container-shape-start-start":t.Full,"container-shape-start-end":t.Full,"container-shape-end-start":t.Full,"container-shape-end-end":t.Full,"container-inline-leading-space":`8px`,"container-inline-trailing-space":`8px`,"enabled-active-indicator-color":i.SecondaryContainer,"active-indicator-height":`56px`,"active-indicator-shape-start-start":t.Full,"active-indicator-shape-start-end":t.Full,"active-indicator-shape-end-start":t.Full,"active-indicator-shape-end-end":t.Full,"enabled-label-color-unselected":i.OnSurfaceVariant,"enabled-label-color-selected":i.OnSecondaryContainer,"enabled-icon-color-unselected":i.OnSurfaceVariant,"enabled-icon-color-selected":i.OnSecondaryContainer,"enabled-state-layer-color-selected":i.OnSecondaryContainer,"hovered-state-layer-color-selected":i.OnSecondaryContainer,"focused-state-layer-color-selected":i.OnSecondaryContainer,"pressed-state-layer-color-selected":i.OnSecondaryContainer}),f=a(d);export{f as FloatingTabDefinition,c as PrimaryTabDefinition,u as SecondaryTabDefinition};
//# sourceMappingURL=tab.definition.js.map