@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
189 lines (182 loc) • 7.99 kB
JavaScript
import{css as e,unsafeCSS as t}from"../../node_modules/@lit/reactive-element/css-tag.js";import"../../node_modules/lit/index.js";import{defineVars as n}from"../../node_modules/@sandlada/jss/dist/define-vars.js";import{defineTokenRefsRecord as r}from"../../node_modules/@sandlada/jss/dist/define-token-refs.js";import{overrideComponentTokens as i}from"../../utils/tokens/override-component-tokens.js";import{stringTokens as a}from"../../utils/tokens/string-tokens.js";import{FloatingTabDefinition as o,PrimaryTabDefinition as s,SecondaryTabDefinition as c}from"../../component-definitions/tab.definition.js";import"../../definitions.js";import"../../utils.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* Styles for `mdc-tab`.
*
* Three variants consume the same `--_*` internal tokens, redefined per
* variant via `defineTokenRefsRecord`:
* - `primary` : MD3 primary tab — full-width cell, 3dp bottom indicator,
* icon stacked above label.
* - `secondary` : MD3 secondary tab — inline icon + label, 2dp indicator.
* - `floating` : MD3E floating tab — pill cell, filled pill indicator.
*
* The `.tab` container deliberately has NO `overflow: hidden` so the outward
* focus ring is not clipped; each absolutely-positioned layer (ripple /
* indicator) clips itself to the container shape instead.
*/
const l=r(s,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-tab`}),u=t(n(l,!0).join(``)),d=r(c,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-tab`}),f=t(n(d,!0).join(``)),p=r(o,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-tab`}),m=t(n(p,!0).join(``));a(i(`--mdc-ripple`,{"enabled-hovered-color":`var(--_hovered-state-layer-color-unselected)`,"enabled-hovered-opacity":`var(--_hovered-state-layer-opacity-unselected)`,"enabled-focused-color":`var(--_focused-state-layer-color-unselected)`,"enabled-focused-opacity":`var(--_focused-state-layer-opacity-unselected)`,"enabled-pressed-color":`var(--_pressed-state-layer-color-unselected)`,"enabled-pressed-opacity":`var(--_pressed-state-layer-opacity-unselected)`})),a(i(`--mdc-ripple`,{"enabled-hovered-color":`var(--_hovered-state-layer-color-selected)`,"enabled-hovered-opacity":`var(--_hovered-state-layer-opacity-selected)`,"enabled-focused-color":`var(--_focused-state-layer-color-selected)`,"enabled-focused-opacity":`var(--_focused-state-layer-opacity-selected)`,"enabled-pressed-color":`var(--_pressed-state-layer-color-selected)`,"enabled-pressed-opacity":`var(--_pressed-state-layer-opacity-selected)`}));const h=a(i(`--mdc-icon`,{"enabled-size":`var(--_icon-size)`})),g=[e`
:host([variant="primary"]) {
${u};
}
:host([variant="secondary"]) {
${f};
}
:host([variant="floating"]) {
${m};
}
`,e`
:host {
display: inline-flex;
position: relative;
box-sizing: border-box;
vertical-align: top;
flex: 0 1 auto;
height: var(--_container-height);
max-width: 360px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
outline: none;
z-index: 0;
}
.tab {
position: relative;
z-index: 0;
box-sizing: border-box;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-start-start-radius: var(--_container-shape-start-start);
border-start-end-radius: var(--_container-shape-start-end);
border-end-start-radius: var(--_container-shape-end-start);
border-end-end-radius: var(--_container-shape-end-end);
background-color: var(--_enabled-container-color);
box-shadow: var(--_enabled-container-elevation);
}
:host([variant="primary"]) {
flex: 1 1 auto;
min-width: 90px;
}
:host([has-icon]:not([icon-only])) {
height: var(--_with-icon-and-label-text-container-height);
}
:host([icon-only]) .label {
display: none;
}
`,e`
.content {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
max-width: 100%;
padding-inline-start: var(--_container-inline-leading-space);
padding-inline-end: var(--_container-inline-trailing-space);
}
/* MD3 primary: icon above label when both are present. */
:host([variant="primary"]) .content {
flex-direction: column;
gap: var(--_spacing-between-icon-and-label);
}
/* MD3 secondary / MD3E floating: inline icon + label. */
:host([variant="secondary"]) .content,
:host([variant="floating"]) .content {
flex-direction: row;
gap: var(--_spacing-between-icon-and-label);
}
`,e`
.icon {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
flex: none;
width: var(--_icon-size);
height: var(--_icon-size);
color: var(--_enabled-icon-color-unselected);
${t(h)};
pointer-events: none;
}
:host(:hover:not([active])) .icon {
color: var(--_hovered-icon-color);
}
:host(:focus-visible:not([active])) .icon {
color: var(--_focused-icon-color);
}
:host(:active:not([active])) .icon {
color: var(--_pressed-icon-color);
}
:host([active]) .icon {
color: var(--_enabled-icon-color-selected);
}
`,e`
.label {
display: inline-block;
box-sizing: border-box;
min-width: 0;
max-width: 100%;
font-family: var(--_label-font);
font-size: var(--_label-size);
line-height: var(--_label-line-height);
font-weight: var(--_label-weight);
letter-spacing: var(--_label-tracking);
color: var(--_enabled-label-color-unselected);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
:host(:hover:not([active])) .label {
color: var(--_hovered-label-color);
}
:host(:focus-visible:not([active])) .label {
color: var(--_focused-label-color);
}
:host(:active:not([active])) .label {
color: var(--_pressed-label-color);
}
:host([active]) .label {
color: var(--_enabled-label-color-selected);
}
`,e`
.indicator {
position: absolute;
box-sizing: border-box;
background-color: var(--_enabled-active-indicator-color);
border-start-start-radius: var(--_active-indicator-shape-start-start);
border-start-end-radius: var(--_active-indicator-shape-start-end);
border-end-start-radius: var(--_active-indicator-shape-end-start);
border-end-end-radius: var(--_active-indicator-shape-end-end);
transform-origin: center;
z-index: -1;
pointer-events: none;
}
:host(:not([active])) .indicator {
opacity: 0;
}
/* Primary & secondary: a bar flush to the block-end edge. */
:host([variant="primary"]) .indicator,
:host([variant="secondary"]) .indicator {
inset-inline-start: var(--_active-indicator-inline-leading-space);
inset-inline-end: var(--_active-indicator-inline-trailing-space);
inset-block-end: var(--_active-indicator-block-trailing-space);
height: var(--_active-indicator-height);
}
/* MD3E floating: a filled pill inset by the container inline padding. */
:host([variant="floating"]) .indicator {
inset-block-start: var(--_active-indicator-block-leading-space);
inset-block-end: var(--_active-indicator-block-trailing-space);
inset-inline-start: var(--_active-indicator-inline-leading-space);
inset-inline-end: var(--_active-indicator-inline-trailing-space);
}
`];export{g as TabStyles};
//# sourceMappingURL=tab.style.js.map