@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
270 lines (258 loc) • 12.8 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{NavigationRailCollapsedDefinition as o,NavigationRailCollapsedXRDefinition as s,NavigationRailExpandedDefinition as c}from"../../component-definitions/navigation-rail.definition.js";import"../../definitions.js";import"../../utils.js";const l=r(c,{expandShapes:!0,prefix:`--mdc-navigation-rail`,useBaseFallback:!0}),u=t(n(l,!0).join(``)),d=r(o,{expandShapes:!0,prefix:`--mdc-navigation-rail`,useBaseFallback:!0}),f=t(n(d,!0).join(``)),p=r(s,{expandShapes:!0,prefix:`--mdc-navigation-rail`,useBaseFallback:!0}),m=t(n(p,!0).join(``)),h={collapsed:a(i(`--mdc-navigation-tab`,{"container-width":`var(--_standard-container-width)`})),expandedStandard:a(i(`--mdc-navigation-tab`,{"container-width":`var(--_standard-container-width)`})),expandedModal:a(i(`--mdc-navigation-tab`,{"container-width":`var(--_modal-container-width)`})),collapsedXR:a(i(`--mdc-navigation-tab`,{"container-width":`var(--_standard-container-width)`}))},g=[e`
:host:has(dialog.expanded) {${u};}
:host:has(dialog.collapsed) {${f};}
:host:has(dialog.collapsed-xr) {${m};}
`,e`
:host {
position: relative;
vertical-align: top;
display: inline-flex;
z-index: 0;
}
.scrim {
background: var(--_scrim-color);
display: none;
inset: 0;
opacity: var(--_scrim-opacity);
pointer-events: none;
position: fixed;
z-index: 0;
}
:host([modal][expanded]) .scrim {
display: flex;
}
dialog {
all: unset;
display: flex;
flex-direction: column;
position: relative;
vertical-align: top;
border: none;
outline: none;
height: inherit;
margin: inherit;
max-height: inherit;
max-width: inherit;
min-height: inherit;
min-width: inherit;
overflow: visible;
box-sizing: border-box;
z-index: 0;
}
dialog::backdrop,
::backdrop {
background: none;
}
.container {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
position: relative;
transform-origin: top;
/* Smooth width transition between collapsed ↔ expanded.
Suppressed when the host has the quick attribute
(handled via :host([quick]) selector below). */
transition: width 0.3s ease;
}
.expanded-xr .container {
height: fit-content;
}
.background {
border-radius: inherit;
position: absolute;
inset: 0;
z-index: -1;
background: var(--_standard-container-color);
}
.scroller-section {
position: relative;
flex: 1;
overflow: hidden;
}
.scroller {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
}
dialog.scrollable .scroller {
overflow-y: scroll;
}
.destination {
flex: 1;
height: min-content;
position: relative;
display: flex;
flex-direction: column;
}
.menu-and-fab {
display: flex;
flex-direction: column;
align-items: center;
}
/* Suppress width transition when quick is set */
:host([quick]) .container {
transition: none;
}
mdc-divider {
position: absolute;
left: 0;
right: 0;
height: 1px;
opacity: 0;
transition-property: opacity, background;
transition-duration: 150ms;
z-index: 1;
}
mdc-divider.top {
top: 0;
}
mdc-divider.bottom {
bottom: 0;
}
.show-top-divider mdc-divider.top,
.show-bottom-divider mdc-divider.bottom {
opacity: 1;
}
.anchor {
position: absolute;
}
.top.anchor {
top: 0;
}
.bottom.anchor {
bottom: 0;
}
`,e`
:host(:has(dialog.expanded.standard)) {${h.expandedStandard};}
dialog.expanded.standard .container {
gap: var(--_standard-container-item-gap);
width: var(--_standard-container-width);
border-start-start-radius: var(--_standard-container-shape-start-start);
border-start-end-radius: var(--_standard-container-shape-start-end);
border-end-end-radius: var(--_standard-container-shape-end-end);
border-end-start-radius: var(--_standard-container-shape-end-start);
padding-block-start: var(--_standard-container-block-leading-space);
padding-block-end: var(--_standard-container-block-trailing-space);
padding-inline-start: var(--_standard-container-inline-leading-space);
padding-inline-end: var(--_standard-container-inline-trailing-space);
}
dialog.expanded.standard .container .background {
background: var(--_standard-container-color);
}
dialog.expanded.standard .container .content .destination {
align-items: flex-start;
gap: var(--_standard-segments-item-gap);
padding-block-start: var(--_standard-segments-block-leading-space);
padding-block-end: var(--_standard-segments-block-trailing-space);
padding-inline-start: var(--_standard-segments-inline-leading-space);
padding-inline-end: var(--_standard-segments-inline-trailing-space);
}
dialog.expanded.standard .container .menu-and-fab {
align-items: flex-start;
gap: var(--_standard-menu-and-fab-item-gap);
padding-block-start: var(--_standard-menu-and-fab-block-leading-space);
padding-block-end: var(--_standard-menu-and-fab-block-trailing-space);
padding-inline-start: var(--_standard-menu-and-fab-inline-leading-space);
padding-inline-end: var(--_standard-menu-and-fab-inline-trailing-space);
}
`,e`
:host(:has(dialog.expanded.modal)) {${h.expandedModal};}
dialog.expanded.modal .container {
gap: var(--_modal-container-item-gap);
width: var(--_modal-container-width);
border-start-start-radius: var(--_modal-container-shape-start-start);
border-start-end-radius: var(--_modal-container-shape-start-end);
border-end-end-radius: var(--_modal-container-shape-end-end);
border-end-start-radius: var(--_modal-container-shape-end-start);
padding-block-start: var(--_modal-container-block-leading-space);
padding-block-end: var(--_modal-container-block-trailing-space);
padding-inline-start: var(--_modal-container-inline-leading-space);
padding-inline-end: var(--_modal-container-inline-trailing-space);
}
dialog.expanded.modal .container .background {
background: var(--_modal-container-color);
}
dialog.expanded.modal .container .content .destination {
align-items: flex-start;
gap: var(--_modal-segments-item-gap);
padding-block-start: var(--_modal-segments-block-leading-space);
padding-block-end: var(--_modal-segments-block-trailing-space);
padding-inline-start: var(--_modal-segments-inline-leading-space);
padding-inline-end: var(--_modal-segments-inline-trailing-space);
}
dialog.expanded.modal .container .menu-and-fab {
align-items: flex-start;
gap: var(--_modal-menu-and-fab-item-gap);
padding-block-start: var(--_modal-menu-and-fab-block-leading-space);
padding-block-end: var(--_modal-menu-and-fab-block-trailing-space);
padding-inline-start: var(--_modal-menu-and-fab-inline-leading-space);
padding-inline-end: var(--_modal-menu-and-fab-inline-trailing-space);
}
`,e`
:host(:has(dialog.collapsed)) {${h.collapsed};}
dialog.collapsed .container {
gap: var(--_standard-container-item-gap);
width: var(--_standard-container-width);
border-start-start-radius: var(--_standard-container-shape-start-start);
border-start-end-radius: var(--_standard-container-shape-start-end);
border-end-end-radius: var(--_standard-container-shape-end-end);
border-end-start-radius: var(--_standard-container-shape-end-start);
padding-block-start: var(--_standard-container-block-leading-space);
padding-block-end: var(--_standard-container-block-trailing-space);
padding-inline-start: var(--_standard-container-inline-leading-space);
padding-inline-end: var(--_standard-container-inline-trailing-space);
}
dialog.collapsed .container .background {
background: var(--_standard-container-color);
}
dialog.collapsed .container .content .destination {
gap: var(--_standard-segments-item-gap);
padding-block-start: var(--_standard-segments-block-leading-space);
padding-block-end: var(--_standard-segments-block-trailing-space);
padding-inline-start: var(--_standard-segments-inline-leading-space);
padding-inline-end: var(--_standard-segments-inline-trailing-space);
}
dialog.collapsed .container .menu-and-fab {
gap: var(--_standard-menu-and-fab-item-gap);
padding-block-start: var(--_standard-menu-and-fab-block-leading-space);
padding-block-end: var(--_standard-menu-and-fab-block-trailing-space);
padding-inline-start: var(--_standard-menu-and-fab-inline-leading-space);
padding-inline-end: var(--_standard-menu-and-fab-inline-trailing-space);
}
`,e`
:host(:has(dialog.collapsed-xr)) {${h.collapsedXR};}
dialog.expanded-xr .container {
gap: var(--_standard-container-item-gap);
width: var(--_standard-container-width);
border-start-start-radius: var(--_standard-container-shape-start-start);
border-start-end-radius: var(--_standard-container-shape-start-end);
border-end-end-radius: var(--_standard-container-shape-end-end);
border-end-start-radius: var(--_standard-container-shape-end-start);
padding-block-start: var(--_standard-container-block-leading-space);
padding-block-end: var(--_standard-container-block-trailing-space);
padding-inline-start: var(--_standard-container-inline-leading-space);
padding-inline-end: var(--_standard-container-inline-trailing-space);
}
dialog.expanded.modal .container .background {
background: var(--_standard-container-color);
}
dialog.expanded.modal .container .content .destination {
align-items: flex-start;
gap: var(--_standard-segments-item-gap);
padding-block-start: var(--_standard-segments-block-leading-space);
padding-block-end: var(--_standard-segments-block-trailing-space);
padding-inline-start: var(--_standard-segments-inline-leading-space);
padding-inline-end: var(--_standard-segments-inline-trailing-space);
}
dialog.expanded.modal .container .menu-and-fab {
align-items: flex-start;
gap: var(--_standard-menu-and-fab-item-gap);
padding-block-start: var(--_standard-menu-and-fab-block-leading-space);
padding-block-end: var(--_standard-menu-and-fab-block-trailing-space);
padding-inline-start: var(--_standard-menu-and-fab-inline-leading-space);
padding-inline-end: var(--_standard-menu-and-fab-inline-trailing-space);
}
`];export{g as NavigationRailStyles};
//# sourceMappingURL=navigation-rail.style.js.map