@kyralabs/m3e-css 1.4.0 → 1.6.0

package/dist/wide-navigation-rail.css

@@ -1 +1 @@
-@import"@kyralabs/m3e-tokens/components/navigation-rail-collapsed.css";@import"@kyralabs/m3e-tokens/components/navigation-rail-expanded.css";@import"@kyralabs/m3e-tokens/components/navigation-rail-color.css";@import"@kyralabs/m3e-tokens/components/navigation-rail-baseline-item.css";@import"@kyralabs/m3e-tokens/components/navigation-rail-vertical-item.css";@import"@kyralabs/m3e-tokens/components/navigation-rail-horizontal-item.css";@import"@kyralabs/m3e-tokens/components/navigation-defaults.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@import"@kyralabs/m3e-tokens/components/divider.css";@property --_m3e-nav-indicator-progress{syntax: "<number>"; inherits: false; initial-value: 0;}@property --_m3e-nav-indicator-alpha{syntax: "<number>"; inherits: false; initial-value: 0;}@layer m3e.components{.m3e-navigation-item{--_m3e-nav-icon: var(--_m3e-nav-icon-unselected);--_m3e-nav-label: var(--_m3e-nav-label-unselected);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:var(--_m3e-nav-item-justify, center);box-sizing:border-box;min-inline-size:var(--m3e-comp-minimum-interactive-component-size);min-block-size:max(var(--m3e-comp-minimum-interactive-component-size),var(--_m3e-nav-item-min-block, var(--m3e-comp-minimum-interactive-component-size)));margin:0;padding-block:var(--_m3e-nav-item-padding-block-start, var(--m3e-sys-space-0)) var(--_m3e-nav-item-padding-block-end, var(--m3e-sys-space-0));padding-inline:var(--_m3e-nav-item-padding-inline-start, var(--m3e-sys-space-0)) var(--m3e-sys-space-0);border:none;background:none;color:var(--_m3e-nav-label);font:inherit;text-align:center;text-decoration:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.m3e-navigation-item__content{display:grid;grid-template:"pill" var(--_m3e-nav-pill-block) "label" auto;row-gap:var(--_m3e-nav-label-gap);place-items:center}.m3e-navigation-item__indicator,.m3e-navigation-item__state{grid-area:pill;box-sizing:border-box;block-size:100%;border-radius:var(--m3e-sys-shape-corner-full)}.m3e-navigation-item__state{inline-size:var(--_m3e-nav-pill-inline)}.m3e-navigation-item__indicator{--_m3e-nav-indicator-progress: 0;--_m3e-nav-indicator-alpha: 0;inline-size:calc(var(--_m3e-nav-pill-inline) * max(0,var(--_m3e-nav-indicator-progress)));background-color:var(--_m3e-nav-indicator);opacity:var(--_m3e-nav-indicator-alpha);transition:--_m3e-nav-indicator-progress var(--_m3e-nav-width-duration) var(--_m3e-nav-width-easing),--_m3e-nav-indicator-alpha var(--_m3e-nav-alpha-duration) var(--_m3e-nav-alpha-easing)}.m3e-navigation-item__icon{grid-area:pill;color:var(--_m3e-nav-icon);transition:font-variation-settings var(--m3e-sys-motion-spring-default-effects-duration) var(--m3e-sys-motion-spring-default-effects-easing)}.m3e-navigation-item__label{grid-area:label;font-family:var(--_m3e-nav-label-font);font-size:var(--_m3e-nav-label-size);font-weight:var(--_m3e-nav-label-weight);line-height:var(--_m3e-nav-label-line-height);letter-spacing:var(--_m3e-nav-label-tracking);color:var(--_m3e-nav-label)}.m3e-navigation-item:not(:has(.m3e-navigation-item__label)){--_m3e-nav-pill-block: var(--_m3e-nav-pill-block-icon-only);--_m3e-nav-item-justify: center;--_m3e-nav-item-padding-block-start: var(--m3e-sys-space-0);--_m3e-nav-item-padding-block-end: var(--m3e-sys-space-0)}:where(.m3e-short-navigation-bar--horizontal,.m3e-wide-navigation-rail--expanded)>.m3e-navigation-item:has(.m3e-navigation-item__label){--_m3e-nav-label-selected: var(--_m3e-nav-label-selected-start);text-align:start}:where(.m3e-short-navigation-bar--horizontal,.m3e-wide-navigation-rail--expanded)>.m3e-navigation-item:has(.m3e-navigation-item__label) .m3e-navigation-item__content{position:relative;grid-template:"icon label" auto / auto auto;column-gap:var(--_m3e-nav-icon-label-gap);padding:var(--_m3e-nav-start-padding-block) var(--_m3e-nav-start-padding-inline)}:where(.m3e-short-navigation-bar--horizontal,.m3e-wide-navigation-rail--expanded)>.m3e-navigation-item:has(.m3e-navigation-item__label) :is(.m3e-navigation-item__indicator,.m3e-navigation-item__state){position:absolute;inset-block:0;inset-inline:0;margin-inline:auto}:where(.m3e-short-navigation-bar--horizontal,.m3e-wide-navigation-rail--expanded)>.m3e-navigation-item:has(.m3e-navigation-item__label) .m3e-navigation-item__state{inline-size:100%}:where(.m3e-short-navigation-bar--horizontal,.m3e-wide-navigation-rail--expanded)>.m3e-navigation-item:has(.m3e-navigation-item__label) .m3e-navigation-item__indicator{inline-size:calc(100%*max(0,var(--_m3e-nav-indicator-progress)))}:where(.m3e-short-navigation-bar--horizontal,.m3e-wide-navigation-rail--expanded)>.m3e-navigation-item:has(.m3e-navigation-item__label) .m3e-navigation-item__icon{grid-area:icon}:where(.m3e-short-navigation-bar--horizontal,.m3e-wide-navigation-rail--expanded)>.m3e-navigation-item:has(.m3e-navigation-item__label) :is(.m3e-navigation-item__icon,.m3e-navigation-item__label){position:relative}.m3e-navigation-item:is([aria-current]:not([aria-current=false]),[data-selected]){--_m3e-nav-icon: var(--_m3e-nav-icon-selected);--_m3e-nav-label: var(--_m3e-nav-label-selected)}.m3e-navigation-item:is([aria-current]:not([aria-current=false]),[data-selected]) .m3e-navigation-item__indicator{--_m3e-nav-indicator-progress: 1;--_m3e-nav-indicator-alpha: 1}.m3e-navigation-item:is([aria-current]:not([aria-current=false]),[data-selected]) .m3e-navigation-item__icon{--m3e-comp-icon-fill: var(--m3e-ref-typeface-icon-filled)}.m3e-navigation-item.m3e-navigation-item[aria-disabled=true]{--_m3e-nav-icon: color-mix( in srgb, var(--_m3e-nav-icon-unselected) calc(var(--m3e-sys-state-disabled-alpha) * 100%), transparent );--_m3e-nav-label: color-mix( in srgb, var(--_m3e-nav-label-unselected) calc(var(--m3e-sys-state-disabled-alpha) * 100%), transparent );cursor:default}@media(forced-colors:active){.m3e-navigation-item:is([aria-current]:not([aria-current=false]),[data-selected]) .m3e-navigation-item__indicator{forced-color-adjust:none;background-color:SelectedItem}.m3e-navigation-item:is([aria-current]:not([aria-current=false]),[data-selected]) .m3e-navigation-item__icon{forced-color-adjust:none;color:SelectedItemText}.m3e-navigation-item.m3e-navigation-item[aria-disabled=true] :is(.m3e-navigation-item__icon,.m3e-navigation-item__label){color:GrayText}}}@layer m3e.components{.m3e-wide-navigation-rail{--_m3e-wnr-item-space: var(--m3e-comp-navigation-rail-collapsed-item-vertical-space);--_m3e-nav-pill-inline: var(--m3e-comp-navigation-rail-vertical-item-active-indicator-width);--_m3e-nav-pill-block: var(--m3e-comp-navigation-rail-vertical-item-active-indicator-height);--_m3e-nav-pill-block-icon-only: var( --m3e-comp-navigation-rail-vertical-item-active-indicator-width );--_m3e-nav-label-gap: var(--m3e-comp-navigation-rail-vertical-item-icon-label-space);--_m3e-nav-item-min-block: var(--m3e-comp-navigation-rail-baseline-item-container-height);--_m3e-nav-item-justify: flex-start;--_m3e-nav-start-padding-block: calc( ( var(--m3e-comp-navigation-rail-horizontal-item-active-indicator-height) - var(--m3e-comp-navigation-rail-baseline-item-icon-size) ) / 2 );--_m3e-nav-start-padding-inline: var( --m3e-comp-navigation-rail-horizontal-item-full-width-leading-space );--_m3e-nav-icon-label-gap: var(--m3e-comp-navigation-rail-horizontal-item-icon-label-space);--_m3e-nav-label-font: var(--m3e-comp-navigation-rail-vertical-item-label-text-font);--_m3e-nav-label-size: var(--m3e-comp-navigation-rail-vertical-item-label-text-size);--_m3e-nav-label-weight: var(--m3e-comp-navigation-rail-vertical-item-label-text-weight);--_m3e-nav-label-line-height: var( --m3e-comp-navigation-rail-vertical-item-label-text-line-height );--_m3e-nav-label-tracking: var(--m3e-comp-navigation-rail-vertical-item-label-text-tracking);--_m3e-nav-icon-unselected: var(--m3e-comp-navigation-rail-color-item-inactive-icon);--_m3e-nav-icon-selected: var(--m3e-comp-navigation-rail-color-item-active-icon);--_m3e-nav-label-unselected: var(--m3e-comp-navigation-rail-color-item-inactive-label-text);--_m3e-nav-label-selected: var(--m3e-comp-navigation-rail-color-item-active-label-text);--_m3e-nav-label-selected-start: var(--m3e-comp-navigation-rail-color-item-active-icon);--_m3e-nav-indicator: var(--m3e-comp-navigation-rail-color-item-active-indicator);--_m3e-nav-width-duration: var(--m3e-sys-motion-spring-default-spatial-duration);--_m3e-nav-width-easing: var(--m3e-sys-motion-spring-default-spatial-easing);--_m3e-nav-alpha-duration: var(--m3e-sys-motion-spring-default-spatial-duration);--_m3e-nav-alpha-easing: var(--m3e-sys-motion-spring-default-spatial-easing);--m3e-comp-state-layer-color: var(--m3e-sys-color-on-surface);display:flex;flex-direction:column;row-gap:var(--_m3e-wnr-item-space);box-sizing:border-box;inline-size:var(--m3e-comp-navigation-rail-collapsed-container-width);max-inline-size:var(--m3e-comp-navigation-rail-expanded-container-width-maximum);padding-block:calc(var(--m3e-comp-navigation-rail-collapsed-top-space) + env(safe-area-inset-top)) env(safe-area-inset-bottom);padding-inline-start:env(safe-area-inset-left);border-radius:var(--m3e-comp-navigation-rail-collapsed-container-shape);background-color:var(--m3e-comp-navigation-rail-collapsed-container-color);color:var(--m3e-sys-color-on-surface)}.m3e-wide-navigation-rail__header{display:flex;flex-direction:column;align-items:flex-start;margin-block-end:calc(var(--m3e-comp-navigation-rail-baseline-item-header-space-minimum) - var(--_m3e-wnr-item-space))}.m3e-wide-navigation-rail>.m3e-navigation-item{align-self:stretch}.m3e-wide-navigation-rail--expanded{--_m3e-wnr-item-space: var(--m3e-sys-space-0);--_m3e-nav-item-min-block: var(--m3e-comp-minimum-interactive-component-size);--_m3e-nav-item-justify: center;--_m3e-nav-item-padding-inline-start: var( --m3e-comp-wide-navigation-rail-item-horizontal-padding );--_m3e-nav-label-font: var(--m3e-comp-navigation-rail-horizontal-item-label-text-font);--_m3e-nav-label-size: var(--m3e-comp-navigation-rail-horizontal-item-label-text-size);--_m3e-nav-label-weight: var(--m3e-comp-navigation-rail-horizontal-item-label-text-weight);--_m3e-nav-label-line-height: var( --m3e-comp-navigation-rail-horizontal-item-label-text-line-height );--_m3e-nav-label-tracking: var(--m3e-comp-navigation-rail-horizontal-item-label-text-tracking);inline-size:fit-content;min-inline-size:var(--m3e-comp-navigation-rail-expanded-container-width-minimum);padding-inline-end:var(--m3e-comp-wide-navigation-rail-item-horizontal-padding);border-radius:var(--m3e-comp-navigation-rail-expanded-container-shape)}.m3e-wide-navigation-rail--expanded>.m3e-navigation-item{align-self:flex-start;align-items:flex-start;max-inline-size:100%}.m3e-wide-navigation-rail--expanded>.m3e-wide-navigation-rail__header{margin-block-end:var(--m3e-comp-navigation-rail-baseline-item-header-space-minimum)}.m3e-wide-navigation-rail .m3e-navigation-item__label{transition:color var(--m3e-sys-motion-spring-default-effects-duration) var(--m3e-sys-motion-spring-default-effects-easing)}@media(forced-colors:active){.m3e-wide-navigation-rail{border-inline-end:var(--m3e-comp-divider-thickness) solid CanvasText}}}
+@import"@kyralabs/m3e-tokens/components/navigation-rail-collapsed.css";@import"@kyralabs/m3e-tokens/components/navigation-rail-expanded.css";@import"@kyralabs/m3e-tokens/components/navigation-rail-color.css";@import"@kyralabs/m3e-tokens/components/navigation-rail-baseline-item.css";@import"@kyralabs/m3e-tokens/components/navigation-rail-vertical-item.css";@import"@kyralabs/m3e-tokens/components/navigation-rail-horizontal-item.css";@import"@kyralabs/m3e-tokens/components/navigation-defaults.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@import"@kyralabs/m3e-tokens/components/divider.css";@property --_m3e-nav-indicator-progress{syntax: "<number>"; inherits: false; initial-value: 0;}@property --_m3e-nav-indicator-alpha{syntax: "<number>"; inherits: false; initial-value: 0;}@layer m3e.components{.m3e-navigation-item{--_m3e-nav-icon: var(--_m3e-nav-icon-unselected);--_m3e-nav-label: var(--_m3e-nav-label-unselected);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:var(--_m3e-nav-item-justify, center);box-sizing:border-box;min-inline-size:var(--m3e-comp-minimum-interactive-component-size);min-block-size:max(var(--m3e-comp-minimum-interactive-component-size),var(--_m3e-nav-item-min-block, var(--m3e-comp-minimum-interactive-component-size)));margin:0;padding-block:var(--_m3e-nav-item-padding-block-start, var(--m3e-sys-space-0)) var(--_m3e-nav-item-padding-block-end, var(--m3e-sys-space-0));padding-inline:var(--_m3e-nav-item-padding-inline-start, var(--m3e-sys-space-0)) var(--m3e-sys-space-0);border:none;background:none;color:var(--_m3e-nav-label);font:inherit;text-align:center;text-decoration:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.m3e-navigation-item__content{display:grid;grid-template:"pill" var(--_m3e-nav-pill-block) "label" auto;row-gap:var(--_m3e-nav-label-gap);place-items:center}.m3e-navigation-item__indicator,.m3e-navigation-item__state{grid-area:pill;box-sizing:border-box;block-size:100%;border-radius:var(--m3e-sys-shape-corner-full)}.m3e-navigation-item__state{inline-size:var(--_m3e-nav-pill-inline)}.m3e-navigation-item__indicator{--_m3e-nav-indicator-progress: 0;--_m3e-nav-indicator-alpha: 0;inline-size:calc(var(--_m3e-nav-pill-inline) * max(0,var(--_m3e-nav-indicator-progress)));background-color:var(--_m3e-nav-indicator);opacity:var(--_m3e-nav-indicator-alpha);transition:--_m3e-nav-indicator-progress var(--_m3e-nav-width-duration) var(--_m3e-nav-width-easing),--_m3e-nav-indicator-alpha var(--_m3e-nav-alpha-duration) var(--_m3e-nav-alpha-easing)}.m3e-navigation-item__icon{grid-area:pill;color:var(--_m3e-nav-icon);transition:font-variation-settings var(--m3e-sys-motion-spring-default-effects-duration) var(--m3e-sys-motion-spring-default-effects-easing)}.m3e-navigation-item__label{grid-area:label;font-family:var(--_m3e-nav-label-font);font-size:var(--_m3e-nav-label-size);font-weight:var(--_m3e-nav-label-weight);line-height:var(--_m3e-nav-label-line-height);letter-spacing:var(--_m3e-nav-label-tracking);color:var(--_m3e-nav-label)}.m3e-navigation-item:not(:has(.m3e-navigation-item__label)){--_m3e-nav-pill-block: var(--_m3e-nav-pill-block-icon-only);--_m3e-nav-item-justify: center;--_m3e-nav-item-padding-block-start: var(--m3e-sys-space-0);--_m3e-nav-item-padding-block-end: var(--m3e-sys-space-0)}:where(.m3e-short-navigation-bar--horizontal)>.m3e-navigation-item:has(.m3e-navigation-item__label){--_m3e-nav-label-selected: var(--_m3e-nav-label-selected-start);text-align:start}:where(.m3e-short-navigation-bar--horizontal)>.m3e-navigation-item:has(.m3e-navigation-item__label) .m3e-navigation-item__content{position:relative;grid-template:"icon label" auto / auto auto;column-gap:var(--_m3e-nav-icon-label-gap);padding:var(--_m3e-nav-start-padding-block) var(--_m3e-nav-start-padding-inline)}:where(.m3e-short-navigation-bar--horizontal)>.m3e-navigation-item:has(.m3e-navigation-item__label) :is(.m3e-navigation-item__indicator,.m3e-navigation-item__state){position:absolute;inset-block:0;inset-inline:0;margin-inline:auto}:where(.m3e-short-navigation-bar--horizontal)>.m3e-navigation-item:has(.m3e-navigation-item__label) .m3e-navigation-item__state{inline-size:100%}:where(.m3e-short-navigation-bar--horizontal)>.m3e-navigation-item:has(.m3e-navigation-item__label) .m3e-navigation-item__indicator{inline-size:calc(100%*max(0,var(--_m3e-nav-indicator-progress)))}:where(.m3e-short-navigation-bar--horizontal)>.m3e-navigation-item:has(.m3e-navigation-item__label) .m3e-navigation-item__icon{grid-area:icon}:where(.m3e-short-navigation-bar--horizontal)>.m3e-navigation-item:has(.m3e-navigation-item__label) :is(.m3e-navigation-item__icon,.m3e-navigation-item__label){position:relative}.m3e-navigation-item:is([aria-current]:not([aria-current=false]),[data-selected]){--_m3e-nav-icon: var(--_m3e-nav-icon-selected);--_m3e-nav-label: var(--_m3e-nav-label-selected)}.m3e-navigation-item:is([aria-current]:not([aria-current=false]),[data-selected]) .m3e-navigation-item__indicator{--_m3e-nav-indicator-progress: 1;--_m3e-nav-indicator-alpha: 1}.m3e-navigation-item:is([aria-current]:not([aria-current=false]),[data-selected]) .m3e-navigation-item__icon{--m3e-comp-icon-fill: var(--m3e-ref-typeface-icon-filled)}.m3e-navigation-item.m3e-navigation-item[aria-disabled=true]{--_m3e-nav-icon: color-mix( in srgb, var(--_m3e-nav-icon-unselected) calc(var(--m3e-sys-state-disabled-alpha) * 100%), transparent );--_m3e-nav-label: color-mix( in srgb, var(--_m3e-nav-label-unselected) calc(var(--m3e-sys-state-disabled-alpha) * 100%), transparent );cursor:default}@media(forced-colors:active){.m3e-navigation-item:is([aria-current]:not([aria-current=false]),[data-selected]) .m3e-navigation-item__indicator{forced-color-adjust:none;background-color:SelectedItem}.m3e-navigation-item:is([aria-current]:not([aria-current=false]),[data-selected]) .m3e-navigation-item__icon{forced-color-adjust:none;color:SelectedItemText}.m3e-navigation-item.m3e-navigation-item[aria-disabled=true] :is(.m3e-navigation-item__icon,.m3e-navigation-item__label){color:GrayText}}}@layer m3e.base{:where(m3e-navigation-item){display:none}}@layer m3e.components{.m3e-wide-navigation-rail{--_m3e-wnr-progress: 0;--_m3e-wnr-layout: 0;--_m3e-wnr-target: 0;--_m3e-wnr-icon: var(--m3e-comp-navigation-rail-baseline-item-icon-size);--_m3e-wnr-pad: var(--m3e-comp-wide-navigation-rail-item-horizontal-padding);--_m3e-wnr-gap: var(--m3e-comp-navigation-rail-horizontal-item-icon-label-space);--_m3e-wnr-collapsed-pad-x: calc( ( var(--m3e-comp-navigation-rail-vertical-item-active-indicator-width) - var(--_m3e-wnr-icon) ) / 2 );--_m3e-wnr-collapsed-pad-y: calc( ( var(--m3e-comp-navigation-rail-vertical-item-active-indicator-height) - var(--_m3e-wnr-icon) ) / 2 );--_m3e-wnr-expanded-pad-x: var( --m3e-comp-navigation-rail-horizontal-item-full-width-leading-space );--_m3e-wnr-expanded-pad-y: calc( ( var(--m3e-comp-navigation-rail-horizontal-item-active-indicator-height) - var(--_m3e-wnr-icon) ) / 2 );--_m3e-wnr-dir: 1;--_m3e-nav-label-font: var(--m3e-comp-navigation-rail-vertical-item-label-text-font);--_m3e-nav-icon-unselected: var(--m3e-comp-navigation-rail-color-item-inactive-icon);--_m3e-nav-icon-selected: var(--m3e-comp-navigation-rail-color-item-active-icon);--_m3e-nav-label-unselected: var(--m3e-comp-navigation-rail-color-item-inactive-label-text);--_m3e-nav-label-selected: var(--m3e-comp-navigation-rail-color-item-active-label-text);--_m3e-nav-indicator: var(--m3e-comp-navigation-rail-color-item-active-indicator);--_m3e-nav-width-duration: var(--m3e-sys-motion-spring-default-spatial-duration);--_m3e-nav-width-easing: var(--m3e-sys-motion-spring-default-spatial-easing);--_m3e-nav-alpha-duration: var(--m3e-sys-motion-spring-default-spatial-duration);--_m3e-nav-alpha-easing: var(--m3e-sys-motion-spring-default-spatial-easing);--m3e-comp-state-layer-color: var(--m3e-sys-color-on-surface);display:flex;flex-direction:column;row-gap:calc(var(--m3e-comp-navigation-rail-collapsed-item-vertical-space) * (1 - var(--_m3e-wnr-layout)));box-sizing:border-box;inline-size:var(--m3e-comp-navigation-rail-collapsed-container-width);max-inline-size:var(--m3e-comp-navigation-rail-expanded-container-width-maximum);margin:0;padding-block:calc(var(--m3e-comp-navigation-rail-collapsed-top-space) + env(safe-area-inset-top)) env(safe-area-inset-bottom);padding-inline:env(safe-area-inset-left) 0;border:none;border-radius:var(--m3e-comp-navigation-rail-collapsed-container-shape);background-color:var(--m3e-comp-navigation-rail-collapsed-container-color);color:var(--m3e-sys-color-on-surface);overflow:clip visible}.m3e-wide-navigation-rail:dir(rtl){--_m3e-wnr-dir: -1}.m3e-wide-navigation-rail__header{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;margin-block-end:calc(var(--m3e-comp-navigation-rail-baseline-item-header-space-minimum) - var(--m3e-comp-navigation-rail-collapsed-item-vertical-space) * (1 - var(--_m3e-wnr-layout)))}.m3e-wide-navigation-rail--expanded{--_m3e-wnr-progress: 1;--_m3e-wnr-layout: 1;--_m3e-wnr-target: 1;--_m3e-nav-label-font: var(--m3e-comp-navigation-rail-horizontal-item-label-text-font);inline-size:fit-content;min-inline-size:var(--m3e-comp-navigation-rail-expanded-container-width-minimum);padding-inline-end:var(--_m3e-wnr-pad);border-radius:var(--m3e-comp-navigation-rail-expanded-container-shape)}.m3e-wide-navigation-rail[data-animating]{inline-size:var(--_m3e-wnr-inline-size);min-inline-size:0;max-inline-size:none}.m3e-wide-navigation-rail>.m3e-navigation-item{--_p: max(0, var(--_m3e-wnr-progress));--_s: clamp(0, round(down, calc(var(--_p) + 1 / 2), 1), 1);--_f: max(var(--_s), var(--_m3e-wnr-target));--_pad-x: calc( var(--_m3e-wnr-collapsed-pad-x) + (var(--_m3e-wnr-expanded-pad-x) - var(--_m3e-wnr-collapsed-pad-x)) * var(--_p) );--_pad-y: calc( var(--_m3e-wnr-collapsed-pad-y) + (var(--_m3e-wnr-expanded-pad-y) - var(--_m3e-wnr-collapsed-pad-y)) * var(--_p) );--_lh: calc( var(--m3e-comp-navigation-rail-vertical-item-label-text-line-height) + ( var(--m3e-comp-navigation-rail-horizontal-item-label-text-line-height) - var(--m3e-comp-navigation-rail-vertical-item-label-text-line-height) ) * var(--_f) );--_pill-h: calc( var(--_m3e-wnr-icon) + (max(var(--_m3e-wnr-icon), var(--_lh)) - var(--_m3e-wnr-icon)) * var(--_p) + var(--_pad-y) + var(--_pad-y) );--_min-h: calc( var(--m3e-comp-navigation-rail-baseline-item-container-height) + ( var(--m3e-comp-minimum-interactive-component-size) - var(--m3e-comp-navigation-rail-baseline-item-container-height) ) * var(--_m3e-wnr-layout) );--_h-top: max( var(--_pill-h) + var(--m3e-comp-navigation-rail-vertical-item-icon-label-space) + var(--_lh), var(--_min-h) );--_h-start: max(var(--_pill-h), var(--_min-h));--_h: calc(var(--_h-top) + (var(--_h-start) - var(--_h-top)) * var(--_p));--_icon-y: calc( var(--_pad-y) + var(--_p) * (calc((var(--_h) - var(--_m3e-wnr-icon)) / 2) - var(--_pad-y)) );--_pill-w: calc( var(--_m3e-wnr-icon) + var(--_pad-x) + var(--_pad-x) + ( 100% - var(--_m3e-wnr-icon) - var(--_m3e-wnr-expanded-pad-x) - var(--_m3e-wnr-expanded-pad-x) ) * var(--_p) );--_m3e-nav-label-size: calc( var(--m3e-comp-navigation-rail-vertical-item-label-text-size) + ( var(--m3e-comp-navigation-rail-horizontal-item-label-text-size) - var(--m3e-comp-navigation-rail-vertical-item-label-text-size) ) * var(--_f) );--_m3e-nav-label-weight: calc( var(--m3e-comp-navigation-rail-vertical-item-label-text-weight) + ( var(--m3e-comp-navigation-rail-horizontal-item-label-text-weight) - var(--m3e-comp-navigation-rail-vertical-item-label-text-weight) ) * var(--_f) );--_m3e-nav-label-line-height: var(--_lh);--_m3e-nav-label-tracking: calc( var(--m3e-comp-navigation-rail-vertical-item-label-text-tracking) + ( var(--m3e-comp-navigation-rail-horizontal-item-label-text-tracking) - var(--m3e-comp-navigation-rail-vertical-item-label-text-tracking) ) * var(--_f) );display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;align-self:stretch;block-size:var(--_h);min-block-size:0;padding:0;padding-inline-start:var(--_m3e-wnr-pad);text-align:start}.m3e-wide-navigation-rail--expanded>.m3e-navigation-item{--_m3e-nav-label-selected: var(--m3e-comp-navigation-rail-color-item-active-icon);align-self:flex-start}.m3e-wide-navigation-rail>.m3e-navigation-item>.m3e-navigation-item__content{position:relative;display:flex;align-items:flex-start;column-gap:var(--_m3e-wnr-gap);box-sizing:border-box;inline-size:max-content;block-size:var(--_pill-h);padding-inline:var(--_m3e-wnr-expanded-pad-x)}.m3e-wide-navigation-rail>.m3e-navigation-item>.m3e-navigation-item__content>:is(.m3e-navigation-item__indicator,.m3e-navigation-item__state){position:absolute;inset-block:0;inset-inline-start:0;block-size:auto}.m3e-wide-navigation-rail>.m3e-navigation-item>.m3e-navigation-item__content>.m3e-navigation-item__state{inline-size:var(--_pill-w)}.m3e-wide-navigation-rail>.m3e-navigation-item>.m3e-navigation-item__content>.m3e-navigation-item__indicator{inline-size:calc(var(--_pill-w) * max(0,var(--_m3e-nav-indicator-progress)))}.m3e-wide-navigation-rail>.m3e-navigation-item>.m3e-navigation-item__content>:is(.m3e-navigation-item__icon,.m3e-navigation-item__label){position:relative;flex:none}.m3e-wide-navigation-rail>.m3e-navigation-item>.m3e-navigation-item__content>.m3e-navigation-item__icon{translate:calc((var(--_pad-x) - var(--_m3e-wnr-expanded-pad-x)) * var(--_m3e-wnr-dir)) var(--_icon-y)}.m3e-wide-navigation-rail>.m3e-navigation-item>.m3e-navigation-item__content>.m3e-navigation-item__label{--_flow-x: calc( var(--_m3e-wnr-pad) + var(--_m3e-wnr-expanded-pad-x) + var(--_m3e-wnr-icon) + var(--_m3e-wnr-gap) );--_x-top: calc( ( var(--_m3e-wnr-icon) + var(--_pad-x) + var(--_pad-x) + var(--_m3e-wnr-pad) + var(--_m3e-wnr-pad) - 100% ) / 2 );--_x-start: calc( ( var(--_m3e-wnr-pad) + var(--_pad-x) + var(--_m3e-wnr-icon) + var(--_m3e-wnr-gap) - var(--_m3e-wnr-pad) * (1 - var(--_p)) * var(--_m3e-wnr-target) ) * var(--_p) );--_y-top: calc( var(--_icon-y) + var(--_m3e-wnr-icon) + var(--_pad-y) + var(--m3e-comp-navigation-rail-vertical-item-icon-label-space) );--_y-start: calc((var(--_h) - var(--_lh)) / 2);inline-size:max-content;max-inline-size:var(--m3e-comp-navigation-rail-collapsed-container-width);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;translate:calc(((1 - var(--_s)) * var(--_x-top) + var(--_s) * var(--_x-start) - var(--_flow-x)) * var(--_m3e-wnr-dir)) calc((1 - var(--_s)) * var(--_y-top) + var(--_s) * var(--_y-start));opacity:calc((var(--_p) + var(--_p) - 1) * (var(--_p) + var(--_p) - 1));transition:color var(--m3e-comp-wide-navigation-rail-label-color-duration) var(--m3e-comp-wide-navigation-rail-label-color-easing)}.m3e-wide-navigation-rail--expanded>.m3e-navigation-item>.m3e-navigation-item__content>.m3e-navigation-item__label{max-inline-size:calc(var(--m3e-comp-navigation-rail-expanded-container-width-maximum) - var(--_m3e-wnr-pad) - var(--_m3e-wnr-pad) - var(--_m3e-wnr-expanded-pad-x) - var(--_m3e-wnr-expanded-pad-x) - var(--_m3e-wnr-icon) - var(--_m3e-wnr-gap))}.m3e-wide-navigation-rail>.m3e-navigation-item:not(:has(.m3e-navigation-item__label)){--_pill-w: 100%;justify-content:center;block-size:max(var(--m3e-comp-navigation-rail-vertical-item-active-indicator-width),var(--_min-h))}.m3e-wide-navigation-rail>.m3e-navigation-item:not(:has(.m3e-navigation-item__label))>.m3e-navigation-item__content{align-items:center;inline-size:var(--m3e-comp-navigation-rail-vertical-item-active-indicator-width);block-size:var(--m3e-comp-navigation-rail-vertical-item-active-indicator-width);padding-inline:var(--_m3e-wnr-collapsed-pad-x)}.m3e-wide-navigation-rail>.m3e-navigation-item:not(:has(.m3e-navigation-item__label))>.m3e-navigation-item__content>.m3e-navigation-item__indicator{inset-inline-end:0;margin-inline:auto}.m3e-wide-navigation-rail>.m3e-navigation-item:not(:has(.m3e-navigation-item__label))>.m3e-navigation-item__content>.m3e-navigation-item__icon{translate:none}.m3e-modal-wide-navigation-rail{display:flex;flex-direction:column;box-sizing:border-box;inline-size:max-content;border-radius:var(--m3e-comp-navigation-rail-collapsed-container-shape);background-color:var(--m3e-comp-navigation-rail-collapsed-container-color)}.m3e-modal-wide-navigation-rail>.m3e-wide-navigation-rail{flex:1 1 auto}.m3e-modal-wide-navigation-rail--hide-on-collapse>.m3e-wide-navigation-rail{translate:calc((var(--_m3e-wnr-slide, 1) - 1) * 100% * var(--_m3e-wnr-dir)) 0}.m3e-modal-wide-navigation-rail[data-open]{inline-size:var(--m3e-comp-navigation-rail-collapsed-container-width)}.m3e-modal-wide-navigation-rail[data-open]>.m3e-wide-navigation-rail{position:fixed;inset-block:0;inset-inline:0 auto;block-size:auto;max-block-size:none;border-radius:var(--m3e-comp-modal-wide-navigation-rail-container-shape);background-color:var(--m3e-comp-modal-wide-navigation-rail-container-color);color:var(--m3e-sys-color-on-surface)}.m3e-modal-wide-navigation-rail[data-open]>.m3e-wide-navigation-rail>.m3e-wide-navigation-rail__header{padding-block-start:var(--m3e-comp-modal-wide-navigation-rail-expanded-header-top-padding)}.m3e-modal-wide-navigation-rail__scrim{display:none}.m3e-modal-wide-navigation-rail[data-open]>.m3e-modal-wide-navigation-rail__scrim{position:fixed;inset:0;display:block;inline-size:auto;block-size:auto;margin:0;padding:0;border:none;background-color:var(--m3e-comp-modal-wide-navigation-rail-scrim-color);opacity:calc(var(--m3e-comp-modal-wide-navigation-rail-scrim-opacity) * var(--_m3e-wnr-scrim, 1))}.m3e-modal-wide-navigation-rail--hide-on-collapse,.m3e-modal-wide-navigation-rail--hide-on-collapse[data-open]{inline-size:0;background:none}.m3e-modal-wide-navigation-rail--hide-on-collapse:not([data-open])>.m3e-wide-navigation-rail{display:none}@media(forced-colors:active){.m3e-wide-navigation-rail{border-inline-end:var(--m3e-comp-divider-thickness) solid CanvasText}.m3e-modal-wide-navigation-rail[data-open]>.m3e-modal-wide-navigation-rail__scrim{forced-color-adjust:none}}}@layer m3e.base{:where(m3e-wide-navigation-rail,m3e-modal-wide-navigation-rail){display:contents}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyralabs/m3e-css",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Framework-free Material 3 Expressive component classes. No JavaScript.",
   "keywords": [
     "material-design",
@@ -40,7 +40,7 @@
     "provenance": true
   },
   "dependencies": {
-    "@kyralabs/m3e-tokens": "^1.4.0"
+    "@kyralabs/m3e-tokens": "^1.6.0"
   },
   "scripts": {
     "build": "node ../../tools/build-css.js"