@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
74 lines (69 loc) • 3.2 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{NavigationBarDefinition as i}from"../../component-definitions/navigation-bar.definition.js";import"../../definitions.js";const a=r(i,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-navigation-bar`}),o=t(n(a,!0).join(``)),s={Vertical:`vertical`,Horizontal:`horizontal`,VerticalXR:`vertical-xr`},c=e=>t(`
height: var(--_${e}-container-height);
padding-inline-start: var(--_${e}-container-block-leading-space);
padding-inline-end: var(--_${e}-container-block-trailing-space);
padding-block-start: var(--_${e}-container-inline-leading-space);
padding-block-end: var(--_${e}-container-inline-trailing-space);
gap: var(--_${e}-tab-between-space);
border-top-left-radius: var(--_${e}-container-shape-radius-start-start);
border-top-right-radius: var(--_${e}-container-shape-radius-start-end);
border-bottom-right-radius: var(--_${e}-container-shape-radius-end-end);
border-bottom-left-radius: var(--_${e}-container-shape-radius-end-start);
`),l=e=>t(`
background-color: var(--_${e}-container-color);
`),u=e`
:host {
${o};
}
:host {
position: relative;
vertical-align: top;
display: inline-flex;
box-sizing: border-box;
/* In-flow collapse: clip the translated inner content so the host can
shrink without leaving a blank gap. */
overflow: hidden;
}
/* The inner container is the translate target driven by WAAPI in
base-navigation-bar. will-change hints the compositor for smoothness. */
.container {
position: relative;
display: flex;
align-items: center;
will-change: transform;
/* Keep the container from wrapping/shrinking while the host collapses,
so its natural size is preserved for measurement + translate math. */
flex: 0 0 auto;
}
.vertical.container {
${c(s.Vertical)};
}
.horizontal.container {
${c(s.Horizontal)};
}
.vertical-xr.container {
${c(s.VerticalXR)};
}
.background {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.vertical .background {
${l(s.Vertical)};
}
.horizontal .background {
${l(s.Horizontal)};
}
.vertical-xr .background {
${l(s.VerticalXR)};
}
/* ---- In-flow collapse: per-edge resting states ------------------------ */
/* Vertical edges collapse the host height; the inner container slides
along the Y axis. Horizontal edges collapse the host width; the inner
container slides along the X axis. The base class sets inline
height/width + transform during/after animation, so no static hidden
rules are needed here. */
`;export{u as NavigationBarStyles};
//# sourceMappingURL=navigation-bar.style.js.map