@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
343 lines (330 loc) • 13.7 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{Easing as i}from"../../node_modules/@sandlada/mdk/build/domain/easing.js";import"../../node_modules/@sandlada/mdk/build/index.js";import{overrideComponentTokens as a}from"../../utils/tokens/override-component-tokens.js";import{stringTokens as o}from"../../utils/tokens/string-tokens.js";import{NavigationBarHorizontalTabDefinition as s,NavigationBarVerticalTabDefinition as c,NavigationBarXRVerticalTabDefinition as l,NavigationRailHorizontalTabDefinition as u,NavigationRailRoundTabDefinition as d,NavigationRailVerticalTabDefinition as f,NavigationRailXRRoundTabDefinition as p,NavigationRailXRVerticalTabDefinition as m}from"../../component-definitions/navigation-tab.definition.js";import"../../definitions.js";import"../../utils.js";const h=r(c,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-navigation-tab`}),g=t(n(h,!0).join(``)),_=r(s,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-navigation-tab`}),v=t(n(_,!0).join(``)),y=r(l,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-navigation-tab`}),b=t(n(y,!0).join(``)),x=r(f,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-navigation-tab`}),S=t(n(x,!0).join(``)),C=r(u,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-navigation-tab`}),w=t(n(C,!0).join(``)),T=r(d,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-navigation-tab`}),E=t(n(T,!0).join(``)),D=r(m,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-navigation-tab`}),O=t(n(D,!0).join(``)),k=r(p,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-navigation-tab`}),A=t(n(k,!0).join(``));console.log(S.cssText);const j=i.ExpressiveDefaultSpatial.ToCSSVariable(),M={unselected:o(a(`--mdc-ripple`,{"enabled-hovered-color":`var(--_unselected-hovered-ripple-color)`,"enabled-hovered-opacity":`var(--_unselected-hovered-ripple-opacity)`,"enabled-focused-color":`var(--_unselected-focused-ripple-color)`,"enabled-focused-opacity":`var(--_unselected-focused-ripple-opacity)`,"enabled-pressed-color":`var(--_unselected-pressed-ripple-color)`,"enabled-pressed-opacity":`var(--_unselected-pressed-ripple-opacity)`})),selected:o(a(`--mdc-ripple`,{"enabled-hovered-color":`var(--_selected-hovered-ripple-color)`,"enabled-hovered-opacity":`var(--_selected-hovered-ripple-opacity)`,"enabled-focused-color":`var(--_selected-focused-ripple-color)`,"enabled-focused-opacity":`var(--_selected-focused-ripple-opacity)`,"enabled-pressed-color":`var(--_selected-pressed-ripple-color)`,"enabled-pressed-opacity":`var(--_selected-pressed-ripple-opacity)`}))},N=o(a(`--mdc-icon`,{"enabled-size":`var(--_icon-size)`})),P=[e`
:host([variant="bar-vertical"]) {
${g};
}
:host([variant="bar-horizontal"]) {
${v};
}
:host([variant="bar-xr-vertical"]) {
${b};
}
:host([variant="rail-vertical"]) {
${S};
}
:host([variant="rail-horizontal"]) {
${w};
}
:host([variant="rail-round"]) {
${E};
}
:host([variant="rail-xr-vertical"]) {
${O};
}
:host([variant="rail-xr-round"]) {
${A};
}
`,e`
:host {
flex-grow: 0;
flex-shrink: 0;
vertical-align: top;
position: relative;
box-sizing: border-box;
display: inline-flex;
width: fit-content;
height: fit-content;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
z-index: 0;
}
input {
all: unset;
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
}
.container {
all: unset;
position: relative;
box-sizing: border-box;
z-index: 0;
}
.indicator {
display: flex;
z-index: -1;
overflow: clip;
transform-origin: center;
transition-property: opacity, background, transform;
transition-duration: 400ms;
transition-timing-function: ${t(j)};
}
.label {
justify-self: center;
z-index: 0;
pointer-events: none;
user-select: none;
}
.icon {
fill: currentColor;
display: grid;
align-items: center;
z-index: 0;
transition-property: opacity, color;
transition-duration: 200ms;
pointer-events: none;
user-select: none;
}
:host(:not([checked])) .icon.inactive-icon {
opacity: 1;
}
:host(:not([checked])) .icon.active-icon {
opacity: 0;
}
:host([checked]) .icon.inactive-icon {
opacity: 0;
}
:host([checked]) .icon.active-icon {
opacity: 1;
}
`,e`
:host([variant="rail-vertical"]) .container,
:host([variant="rail-xr-vertical"]) .container,
:host([variant="bar-vertical"]) .container,
:host([variant="bar-xr-vertical"]) .container {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr min(var(--_label-line-height), var(--_label-size));
gap: var(--_spacing-between-icon-and-label);
place-self: center;
place-content: center;
}
:host([variant="rail-vertical"]) .indicator,
:host([variant="rail-xr-vertical"]) .indicator,
:host([variant="bar-vertical"]) .indicator,
:host([variant="bar-xr-vertical"]) .indicator {
position: relative;
place-self: center;
grid-column: 1/2;
grid-row: 1/2;
width: var(--_indicator-width);
}
:host([variant="rail-vertical"]) .container .icon-container,
:host([variant="rail-xr-vertical"]) .container .icon-container,
:host([variant="bar-vertical"]) .container .icon-container,
:host([variant="bar-xr-vertical"]) .container .icon-container {
position: relative;
grid-column: 1/2;
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
place-content: center;
place-self: center;
}
:host([variant="rail-vertical"]) .container .icon-container .icon,
:host([variant="rail-xr-vertical"]) .container .icon-container .icon,
:host([variant="bar-vertical"]) .container .icon-container .icon,
:host([variant="bar-xr-vertical"]) .container .icon-container .icon {
align-self: center;
justify-self: center;
grid-column: 1/2;
grid-row: 1/2;
}
:host([variant="rail-vertical"]) .container .label.out-icon-container,
:host([variant="rail-xr-vertical"]) .container .label.out-icon-container,
:host([variant="bar-vertical"]) .container .label.out-icon-container,
:host([variant="bar-xr-vertical"]) .container .label.out-icon-container {
grid-column: 1/2;
grid-row: 2/3;
}
:host([variant="rail-vertical"]) .container .label.in-icon-container,
:host([variant="rail-xr-vertical"]) .container .label.in-icon-container,
:host([variant="bar-vertical"]) .container .label.in-icon-container,
:host([variant="bar-xr-vertical"]) .container .label.in-icon-container {
display: none;
}
`,e`
:host([variant="rail-horizontal"]) .container,
:host([variant="bar-horizontal"]) .container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
box-sizing: border-box;
align-items: center;
justify-content: center;
position: relative;
}
:host([variant="rail-horizontal"]) .container .icon-container,
:host([variant="bar-horizontal"]) .container .icon-container {
grid-column: 1/2;
grid-row: 1/2;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-content: center;
gap: var(--_spacing-between-icon-and-label);
box-sizing: border-box;
position: relative;
}
:host([variant="rail-horizontal"]) .indicator,
:host([variant="bar-horizontal"]) .indicator {
grid-column: 1/2;
grid-row: 1/2;
position: absolute;
inset: 0;
margin: auto;
display: flex;
width: 100%;
min-width: var(--_indicator-width);
z-index: -1;
}
:host([variant="rail-horizontal"]) .label.in-icon-container,
:host([variant="bar-horizontal"]) .label.in-icon-container {
grid-column: 2/3;
grid-row: 1/-1;
box-sizing: border-box;
}
:host([variant="rail-horizontal"]) .label.out-icon-container,
:host([variant="bar-horizontal"]) .label.out-icon-container {
display: none;
}
:host([variant="rail-horizontal"]) .icon,
:host([variant="bar-horizontal"]) .icon {
place-content: center;
grid-column: 1/2;
grid-row: 1/-1;
}
`,e`
:host([variant="rail-xr-round"]) .container,
:host([variant="rail-round"]) .container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
place-content: center;
position: relative;
box-sizing: border-box;
}
:host([variant="rail-xr-round"]) .container .icon-container,
:host([variant="rail-round"]) .container .icon-container {
gap: var(--_spacing-between-icon-and-label);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-content: center;
place-content: center;
box-sizing: border-box;
position: relative;
grid-column: 1/2;
grid-row: 1/2;
}
:host([variant="rail-xr-round"]) .icon,
:host([variant="rail-round"]) .icon {
place-content: center;
grid-column: 1/2;
grid-row: 1/-1;
}
:host([variant="rail-xr-round"]) .indicator,
:host([variant="rail-round"]) .indicator {
grid-column: 1/2;
grid-row: 1/2;
place-self: center;
width: var(--_indicator-width);
}
:host([variant="rail-xr-round"]) .label,
:host([variant="rail-round"]) .label {
display: none;
}
`,e`
.container {
padding-block-start: var(--_container-block-leading-space);
padding-block-end: var(--_container-block-trailing-space);
padding-inline-start: var(--_container-inline-leading-space);
padding-inline-end: var(--_container-inline-trailing-space);
height: var(--_container-height);
min-width: var(--_container-width);
}
`,e`
:host(:not([checked])) {
${t(M.unselected)};
}
:host([checked]) {
${t(M.selected)};
}
.ripple-layer {
position: absolute;
inset: 0;
/* background:red; */
border-start-start-radius: var(--_indicator-shape-start-start);
border-start-end-radius: var(--_indicator-shape-start-end);
border-end-start-radius: var(--_indicator-shape-end-start);
border-end-end-radius: var(--_indicator-shape-end-end);
/* height: var(--_indicator-height); */
}
`,e``,e`
:host(:not([checked])) .icon {
${t(N)};
size: var(--_icon-size);
}
:host(:not([checked])) .icon.inactive-icon {
color: var(--_unselected-icon-color);
}
:host([checked]) .icon.active-icon {
color: var(--_selected-icon-color);
}
.icon-container {
border-start-start-radius: var(--_icon-container-shape-start-start);
border-start-end-radius: var(--_icon-container-shape-start-end);
border-end-start-radius: var(--_icon-container-shape-end-start);
border-end-end-radius: var(--_icon-container-shape-end-end);
padding-inline-start: var(--_icon-container-inline-leading-space);
padding-inline-end: var(--_icon-container-inline-trailing-space);
padding-block-start: var(--_icon-container-block-leading-space);
padding-block-end: var(--_icon-container-block-trailing-space);
height: var(--_icon-container-height);
min-width: var(--_icon-container-width);
}
`,e`
.indicator {
border-start-start-radius: var(--_indicator-shape-start-start);
border-start-end-radius: var(--_indicator-shape-start-end);
border-end-start-radius: var(--_indicator-shape-end-start);
border-end-end-radius: var(--_indicator-shape-end-end);
height: var(--_indicator-height);
}
:host(:not([checked])) .indicator {
transform: scaleX(0) scaleY(0.8);
opacity: 0;
background: var(--_unselected-indicator-color);
}
:host([checked]) .indicator {
transform: scaleX(1) scaleY(1);
opacity: 1;
background: var(--_selected-indicator-color);
}
`,e``,e`
.label {
font-family: var(--_label-font);
font-size: var(--_label-size);
font-weight: var(--_label-font-weight);
line-height: var(--_label-line-height);
letter-spacing: var(--_label-tracking);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
:host(:not([checked])) .label {
color: var(--_unselected-label-color);
}
:host([checked]) .label {
color: var(--_selected-label-color);
}
`];export{P as NavigationTabStyles};
//# sourceMappingURL=navigation-tab.style.js.map