@kyralabs/m3e-css 1.6.1 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/NOTICE +4 -2
- package/README.md +89 -0
- package/dist/badge.css +1 -0
- package/dist/bottom-sheet.css +1 -0
- package/dist/carousel.css +1 -0
- package/dist/date-picker.css +1 -0
- package/dist/dialog.css +1 -0
- package/dist/focus-ring.css +1 -1
- package/dist/index.css +1 -1
- package/dist/navigation-bar.css +1 -1
- package/dist/navigation-item.css +1 -1
- package/dist/navigation-rail.css +1 -1
- package/dist/navigation-suite.css +1 -1
- package/dist/pull-to-refresh.css +1 -0
- package/dist/segmented-button.css +1 -0
- package/dist/short-navigation-bar.css +1 -1
- package/dist/side-sheet.css +1 -0
- package/dist/slider.css +1 -1
- package/dist/snackbar.css +1 -0
- package/dist/state-layer.css +1 -1
- package/dist/tabs.css +1 -1
- package/dist/time-picker.css +1 -0
- package/dist/tooltip.css +1 -0
- package/dist/top-app-bar.css +1 -1
- package/dist/wide-navigation-rail.css +1 -1
- package/package.json +2 -2
package/dist/tabs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"@kyralabs/m3e-tokens/components/primary-navigation-tab.css";@import"@kyralabs/m3e-tokens/components/secondary-navigation-tab.css";@import"@kyralabs/m3e-tokens/components/tabs-defaults.css";@import"@kyralabs/m3e-tokens/components/divider.css";@layer m3e.components{.m3e-tabs{--_m3e-tabs-container: var(--m3e-comp-tabs-primary-container-color);--_m3e-tabs-content: var(--m3e-comp-tabs-primary-content-color);--_m3e-tabs-indicator-height: var(--m3e-comp-tabs-primary-indicator-height);--_m3e-tabs-indicator-color: var(--m3e-comp-tabs-primary-indicator-color);--_m3e-tabs-indicator-shape: var(--m3e-comp-tabs-primary-indicator-shape);position:relative;display:block;background-color:var(--_m3e-tabs-container);color:var(--_m3e-tabs-content)}.m3e-tabs--secondary{--_m3e-tabs-container: var(--m3e-comp-tabs-secondary-container-color);--_m3e-tabs-content: var(--m3e-comp-tabs-secondary-content-color);--_m3e-tabs-indicator-height: var(--m3e-comp-tabs-secondary-indicator-height);--_m3e-tabs-indicator-color: var(--m3e-comp-tabs-secondary-indicator-color);--_m3e-tabs-indicator-shape: var(--m3e-comp-tabs-secondary-indicator-shape)}.m3e-tabs:before{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:var(--m3e-comp-tabs-divider-thickness);background-color:var(--m3e-comp-tabs-divider-color);pointer-events:none}.m3e-tabs__list{position:relative;display:flex;align-items:stretch}.m3e-tabs--scrollable .m3e-tabs__list{padding-inline:var(--m3e-comp-tabs-scrollable-edge-padding);overflow:auto hidden;overscroll-behavior-x:contain;scrollbar-width:none}.m3e-tabs--scrollable .m3e-tabs__list::-webkit-scrollbar{display:none}.m3e-tab{--m3e-comp-state-layer-color: var(--_m3e-tabs-content);position:relative;display:flex;flex:1 1 0;justify-content:center;align-items:stretch;min-inline-size:0;min-block-size:var(--m3e-comp-tabs-small-tab-height);margin:0;padding:0 var(--m3e-comp-tabs-horizontal-text-padding);border:none;background:none;color:var(--m3e-comp-tabs-unselected-content-color, var(--_m3e-tabs-content));font-family:var(--m3e-comp-tabs-label-text-font);font-size:var(--m3e-comp-tabs-label-text-size);font-weight:var(--m3e-comp-tabs-label-text-weight);line-height:var(--m3e-comp-tabs-label-text-line-height);letter-spacing:var(--m3e-comp-tabs-label-text-tracking);text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color var(--m3e-comp-tabs-content-color-out-duration) var(--m3e-comp-tabs-content-color-out-easing)}.m3e-tab[aria-selected=true]{color:var(--_m3e-tabs-content);transition:color var(--m3e-comp-tabs-content-color-in-duration) var(--m3e-comp-tabs-content-color-in-easing)}.m3e-tab[aria-disabled=true]{cursor:default}.m3e-tabs--scrollable .m3e-tab{flex:none;min-inline-size:var(--m3e-comp-tabs-scrollable-min-tab-width);white-space:nowrap}.m3e-tab__content{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-inline-size:0;max-inline-size:100%;padding-block:calc(var(--m3e-comp-tabs-icon-distance-from-baseline) / 2)}.m3e-tab__icon{--m3e-comp-icon-size: var(--m3e-comp-primary-navigation-tab-icon-size)}.m3e-tabs--secondary .m3e-tab__icon{--m3e-comp-icon-size: var(--m3e-comp-secondary-navigation-tab-icon-size)}.m3e-tab[aria-selected=true] .m3e-tab__icon{--m3e-comp-icon-fill: var(--m3e-ref-typeface-icon-filled)}.m3e-tab__label{min-inline-size:0;max-inline-size:100%;overflow-wrap:anywhere}.m3e-tabs--leading-icon .m3e-tab{block-size:var(--m3e-comp-tabs-small-tab-height)}.m3e-tabs--leading-icon .m3e-tab__content{flex-direction:row;gap:var(--m3e-comp-tabs-leading-icon-label-space);padding-block:0}.m3e-tabs--leading-icon .m3e-tab__label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.m3e-tabs:not(.m3e-tabs--scrollable,.m3e-tabs--leading-icon) .m3e-tab__label{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--m3e-comp-tabs-label-max-lines)}.m3e-tabs:not(.m3e-tabs--leading-icon) .m3e-tab:has(.m3e-tab__icon
|
|
1
|
+
@import"@kyralabs/m3e-tokens/components/primary-navigation-tab.css";@import"@kyralabs/m3e-tokens/components/secondary-navigation-tab.css";@import"@kyralabs/m3e-tokens/components/tabs-defaults.css";@import"@kyralabs/m3e-tokens/components/divider.css";@import"@kyralabs/m3e-tokens/components/badge.css";@import"@kyralabs/m3e-tokens/components/badge-defaults.css";@layer m3e.components{.m3e-badge{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;min-inline-size:var(--m3e-comp-badge-size);min-block-size:var(--m3e-comp-badge-size);margin:0;padding:0;border-radius:var(--m3e-comp-badge-shape);background-color:var(--m3e-comp-badge-container-color);color:var(--m3e-comp-badge-large-label-text-color);white-space:nowrap}.m3e-badge--large{min-inline-size:var(--m3e-comp-badge-large-size);min-block-size:var(--m3e-comp-badge-large-size);padding-inline:var(--m3e-comp-badge-large-padding-horizontal);border-radius:var(--m3e-comp-badge-large-shape);font-family:var(--m3e-comp-badge-large-label-text-font);font-size:var(--m3e-comp-badge-large-label-text-size);font-weight:var(--m3e-comp-badge-large-label-text-weight);line-height:var(--m3e-comp-badge-large-label-text-line-height);letter-spacing:var(--m3e-comp-badge-large-label-text-tracking)}.m3e-badge__label{position:absolute;inline-size:0;block-size:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.m3e-badged-box{--_m3e-badge-direction: 1;position:relative;display:inline-flex;align-items:center;justify-content:center}.m3e-badged-box:dir(rtl){--_m3e-badge-direction: -1}.m3e-badged-box>.m3e-badge{--_m3e-badge-offset-inline: var(--m3e-comp-badge-offset);--_m3e-badge-offset-block: var(--m3e-comp-badge-offset);position:absolute;inset-block-end:calc(100% - var(--_m3e-badge-offset-block));inset-inline-start:calc(100% - var(--_m3e-badge-offset-inline));translate:calc(min(0%,var(--_m3e-badged-box-bounds-end) + var(--_m3e-badge-offset-inline) - 100%) * var(--_m3e-badge-direction)) max(0%,100% - var(--_m3e-badge-offset-block) - var(--_m3e-badged-box-bounds-top))}.m3e-badged-box>.m3e-badge--large{--_m3e-badge-offset-inline: var(--m3e-comp-badge-large-offset-horizontal);--_m3e-badge-offset-block: var(--m3e-comp-badge-large-offset-vertical)}@media(forced-colors:active){.m3e-badge{forced-color-adjust:none;background-color:CanvasText;color:Canvas}}}@layer m3e.components{.m3e-tabs{--_m3e-tabs-container: var(--m3e-comp-tabs-primary-container-color);--_m3e-tabs-content: var(--m3e-comp-tabs-primary-content-color);--_m3e-tabs-indicator-height: var(--m3e-comp-tabs-primary-indicator-height);--_m3e-tabs-indicator-color: var(--m3e-comp-tabs-primary-indicator-color);--_m3e-tabs-indicator-shape: var(--m3e-comp-tabs-primary-indicator-shape);position:relative;display:block;background-color:var(--_m3e-tabs-container);color:var(--_m3e-tabs-content)}.m3e-tabs--secondary{--_m3e-tabs-container: var(--m3e-comp-tabs-secondary-container-color);--_m3e-tabs-content: var(--m3e-comp-tabs-secondary-content-color);--_m3e-tabs-indicator-height: var(--m3e-comp-tabs-secondary-indicator-height);--_m3e-tabs-indicator-color: var(--m3e-comp-tabs-secondary-indicator-color);--_m3e-tabs-indicator-shape: var(--m3e-comp-tabs-secondary-indicator-shape)}.m3e-tabs:before{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:var(--m3e-comp-tabs-divider-thickness);background-color:var(--m3e-comp-tabs-divider-color);pointer-events:none}.m3e-tabs__list{position:relative;display:flex;align-items:stretch}.m3e-tabs--scrollable .m3e-tabs__list{padding-inline:var(--m3e-comp-tabs-scrollable-edge-padding);overflow:auto hidden;overscroll-behavior-x:contain;scrollbar-width:none}.m3e-tabs--scrollable .m3e-tabs__list::-webkit-scrollbar{display:none}.m3e-tab{--m3e-comp-state-layer-color: var(--_m3e-tabs-content);position:relative;display:flex;flex:1 1 0;justify-content:center;align-items:stretch;min-inline-size:0;min-block-size:var(--m3e-comp-tabs-small-tab-height);margin:0;padding:0 var(--m3e-comp-tabs-horizontal-text-padding);border:none;background:none;color:var(--m3e-comp-tabs-unselected-content-color, var(--_m3e-tabs-content));font-family:var(--m3e-comp-tabs-label-text-font);font-size:var(--m3e-comp-tabs-label-text-size);font-weight:var(--m3e-comp-tabs-label-text-weight);line-height:var(--m3e-comp-tabs-label-text-line-height);letter-spacing:var(--m3e-comp-tabs-label-text-tracking);text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color var(--m3e-comp-tabs-content-color-out-duration) var(--m3e-comp-tabs-content-color-out-easing)}.m3e-tab[aria-selected=true]{color:var(--_m3e-tabs-content);transition:color var(--m3e-comp-tabs-content-color-in-duration) var(--m3e-comp-tabs-content-color-in-easing)}.m3e-tab[aria-disabled=true]{cursor:default}.m3e-tabs--scrollable .m3e-tab{flex:none;min-inline-size:var(--m3e-comp-tabs-scrollable-min-tab-width);white-space:nowrap}.m3e-tab__content{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-inline-size:0;max-inline-size:100%;padding-block:calc(var(--m3e-comp-tabs-icon-distance-from-baseline) / 2)}.m3e-tab__icon{--m3e-comp-icon-size: var(--m3e-comp-primary-navigation-tab-icon-size)}.m3e-tabs--secondary .m3e-tab__icon{--m3e-comp-icon-size: var(--m3e-comp-secondary-navigation-tab-icon-size)}.m3e-tab[aria-selected=true] .m3e-tab__icon{--m3e-comp-icon-fill: var(--m3e-ref-typeface-icon-filled)}.m3e-tab__label{min-inline-size:0;max-inline-size:100%;overflow-wrap:anywhere}.m3e-tab__content>.m3e-badged-box{min-inline-size:0;max-inline-size:100%}.m3e-tabs--leading-icon .m3e-tab{block-size:var(--m3e-comp-tabs-small-tab-height)}.m3e-tabs--leading-icon .m3e-tab__content{flex-direction:row;gap:var(--m3e-comp-tabs-leading-icon-label-space);padding-block:0}.m3e-tabs--leading-icon .m3e-tab__label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.m3e-tabs:not(.m3e-tabs--scrollable,.m3e-tabs--leading-icon) .m3e-tab__label{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--m3e-comp-tabs-label-max-lines)}.m3e-tabs:not(.m3e-tabs--leading-icon) .m3e-tab:has(.m3e-tab__icon+:is(.m3e-tab__label,.m3e-badged-box)){min-block-size:var(--m3e-comp-tabs-large-tab-height)}.m3e-tabs:not(.m3e-tabs--leading-icon) .m3e-tab__content:has(.m3e-tab__icon+:is(.m3e-tab__label,.m3e-badged-box)){--_m3e-tab-baseline: calc( var(--m3e-comp-tabs-label-text-line-height) / 2 - var(--m3e-comp-tabs-label-text-size) * var(--m3e-comp-tabs-label-baseline-shift) );justify-content:flex-end;padding-block:0 calc(var(--m3e-comp-tabs-single-line-text-baseline-with-icon) + var(--m3e-comp-primary-navigation-tab-active-indicator-height) - var(--_m3e-tab-baseline))}.m3e-tabs:not(.m3e-tabs--leading-icon) .m3e-tab__icon+:is(.m3e-tab__label,.m3e-badged-box){margin-block-start:calc(var(--m3e-comp-tabs-icon-distance-from-baseline) - var(--m3e-comp-tabs-label-text-line-height) + var(--_m3e-tab-baseline))}.m3e-tabs--primary .m3e-tab[aria-selected=true] .m3e-tab__content:after,.m3e-tabs--secondary .m3e-tab[aria-selected=true]:after{--_m3e-tabs-indicator-inline-size: var(--_m3e-tabs-indicator-width, 100%);content:"";position:absolute;inset-inline-start:calc(50% - var(--_m3e-tabs-indicator-inline-size) / 2);inset-block-end:0;z-index:1;inline-size:var(--_m3e-tabs-indicator-inline-size);block-size:var(--_m3e-tabs-indicator-height);border-radius:var(--_m3e-tabs-indicator-shape);background-color:var(--_m3e-tabs-indicator-color);translate:var(--_m3e-tabs-indicator-shift, 0) 0;pointer-events:none}.m3e-tabs--primary .m3e-tab[aria-selected=true] .m3e-tab__content:after{--_m3e-tabs-indicator-inline-size: var( --_m3e-tabs-indicator-width, max(100%, var(--m3e-comp-tabs-indicator-min-width)) )}@media(forced-colors:active){.m3e-tabs:before{forced-color-adjust:none;background-color:CanvasText}.m3e-tabs--primary .m3e-tab[aria-selected=true] .m3e-tab__content:after,.m3e-tabs--secondary .m3e-tab[aria-selected=true]:after{forced-color-adjust:none;background-color:Highlight}}}@layer m3e.components{:where(m3e-tabs){display:contents}:where(m3e-tab){display:none}:where(m3e-tab-panel){display:block}:where(m3e-tab-panel[hidden]){display:none}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"@kyralabs/m3e-tokens/components/time-picker.css";@import"@kyralabs/m3e-tokens/components/time-input.css";@import"@kyralabs/m3e-tokens/components/time-picker-defaults.css";@import"@kyralabs/m3e-tokens/components/dialog.css";@layer m3e.components{.m3e-time-picker{--_m3e-time-picker-selector-width: var(--m3e-comp-time-picker-time-selector-container-width);--_m3e-time-picker-selector-height: var(--m3e-comp-time-picker-time-selector-container-height);--_m3e-time-picker-selector-shape: var(--m3e-comp-time-picker-time-selector-container-shape);--_m3e-time-picker-separator-width: var(--m3e-comp-time-picker-separator-width);--_m3e-time-picker-separator-height: var( --m3e-comp-time-picker-period-selector-vertical-container-height );--_m3e-time-picker-separator-font: var(--m3e-comp-time-picker-time-selector-label-text-font);--_m3e-time-picker-separator-size: var(--m3e-comp-time-picker-time-selector-label-text-size);--_m3e-time-picker-separator-weight: var( --m3e-comp-time-picker-time-selector-label-text-weight );--_m3e-time-picker-separator-tracking: var( --m3e-comp-time-picker-time-selector-label-text-tracking );--_m3e-time-picker-period-width: var( --m3e-comp-time-picker-period-selector-vertical-container-width );--_m3e-time-picker-period-height: var( --m3e-comp-time-picker-period-selector-vertical-container-height );--_m3e-time-picker-period-gap: var(--m3e-comp-time-picker-period-gap);--_m3e-time-picker-period-offset: var(--m3e-comp-time-picker-period-gap);--_m3e-time-picker-period-container: var(--m3e-comp-time-picker-period-container-color);--_m3e-time-picker-period-container-selected: var( --m3e-comp-time-picker-period-container-color-selected );--_m3e-time-picker-period-label-selected: var( --m3e-comp-time-picker-period-label-color-selected );--_m3e-time-picker-gap: var(--m3e-comp-time-picker-display-gap);--_m3e-time-picker-dial-color: var(--m3e-comp-time-picker-clock-dial-color);--_m3e-time-picker-selector-container: var( --m3e-comp-time-picker-time-selector-container-color-unselected );--_m3e-time-picker-selector-label: var( --m3e-comp-time-picker-time-selector-label-text-color-unselected );--_m3e-time-picker-selector-container-selected: var( --m3e-comp-time-picker-time-selector-container-color-selected );--_m3e-time-picker-selector-label-selected: var( --m3e-comp-time-picker-time-selector-label-text-color-selected );--_m3e-time-picker-selector-outline: transparent;display:flex;flex-direction:column;align-items:center;inline-size:fit-content;padding-block-end:var(--m3e-comp-time-picker-face-bottom-margin)}.m3e-time-picker--vibrant{--_m3e-time-picker-selector-width: var(--m3e-comp-time-picker-vibrant-time-field-width);--_m3e-time-picker-selector-height: var(--m3e-comp-time-picker-vibrant-time-field-height);--_m3e-time-picker-selector-shape: var(--m3e-comp-time-picker-vibrant-time-field-shape);--_m3e-time-picker-separator-width: var(--m3e-comp-time-picker-vibrant-separator-width);--_m3e-time-picker-separator-height: var(--m3e-comp-time-picker-vibrant-time-field-height);--_m3e-time-picker-period-width: var(--m3e-comp-time-picker-vibrant-period-width);--_m3e-time-picker-period-height: var(--m3e-comp-time-picker-vibrant-period-height);--_m3e-time-picker-period-gap: var(--m3e-comp-time-picker-vibrant-period-padding);--_m3e-time-picker-period-offset: var(--m3e-comp-time-picker-vibrant-period-large-padding);--_m3e-time-picker-period-container: var(--m3e-comp-time-picker-vibrant-period-container-color);--_m3e-time-picker-period-container-selected: var( --m3e-comp-time-picker-vibrant-period-container-color-selected );--_m3e-time-picker-period-label-selected: var( --m3e-comp-time-picker-vibrant-period-label-color-selected );--_m3e-time-picker-gap: var(--m3e-comp-time-picker-vibrant-vertical-gap);--_m3e-time-picker-dial-color: var(--m3e-comp-time-picker-vibrant-clock-dial-color);--_m3e-time-picker-selector-container: var( --m3e-comp-time-picker-vibrant-time-selector-container-color );--_m3e-time-picker-selector-label: var( --m3e-comp-time-picker-vibrant-time-selector-label-color );--_m3e-time-picker-selector-container-selected: var( --m3e-comp-time-picker-vibrant-time-selector-container-color-selected );--_m3e-time-picker-selector-label-selected: var( --m3e-comp-time-picker-vibrant-time-selector-label-color-selected );--_m3e-time-picker-selector-outline: var(--m3e-comp-time-picker-vibrant-selector-outline-color);padding-block-end:0}.m3e-time-picker--horizontal{--_m3e-time-picker-period-width: var( --m3e-comp-time-picker-period-selector-horizontal-container-width );--_m3e-time-picker-period-height: var( --m3e-comp-time-picker-period-selector-horizontal-container-height );flex-direction:row;padding-block-end:0}.m3e-time-picker--horizontal.m3e-time-picker--vibrant{--_m3e-time-picker-period-height: var(--m3e-comp-time-picker-vibrant-period-horizontal-height);--_m3e-time-picker-period-gap: var(--m3e-comp-time-picker-vibrant-separator-width);--_m3e-time-picker-gap: var(--m3e-comp-time-picker-vibrant-horizontal-gap)}.m3e-time-picker--vibrant.m3e-time-picker--24h:not(.m3e-time-picker--horizontal){--_m3e-time-picker-selector-width: var( --m3e-comp-time-picker-vibrant-time-field-width-portrait )}.m3e-time-input,.m3e-time-scroll{--_m3e-time-picker-field-width: var(--m3e-comp-time-input-time-field-container-width);--_m3e-time-picker-field-height: var(--m3e-comp-time-input-time-field-container-height);--_m3e-time-picker-field-shape: var(--m3e-comp-time-input-time-field-container-shape);--_m3e-time-picker-field-font: var(--m3e-comp-time-input-time-field-label-text-font);--_m3e-time-picker-field-size: var(--m3e-comp-time-input-time-field-label-text-size);--_m3e-time-picker-field-weight: var(--m3e-comp-time-input-time-field-label-text-weight);--_m3e-time-picker-field-line-height: var( --m3e-comp-time-input-time-field-label-text-line-height );--_m3e-time-picker-field-tracking: var(--m3e-comp-time-input-time-field-label-text-tracking);--_m3e-time-picker-separator-width: var(--m3e-comp-time-picker-separator-width);--_m3e-time-picker-separator-height: var( --m3e-comp-time-input-period-selector-container-height );--_m3e-time-picker-separator-font: var(--_m3e-time-picker-field-font);--_m3e-time-picker-separator-size: var(--_m3e-time-picker-field-size);--_m3e-time-picker-separator-weight: var(--_m3e-time-picker-field-weight);--_m3e-time-picker-separator-tracking: var(--_m3e-time-picker-field-tracking);--_m3e-time-picker-period-width: var(--m3e-comp-time-input-period-selector-container-width);--_m3e-time-picker-period-height: var(--m3e-comp-time-input-period-selector-container-height);--_m3e-time-picker-period-gap: var(--m3e-comp-time-picker-period-gap);--_m3e-time-picker-period-offset: var(--m3e-comp-time-picker-period-gap);--_m3e-time-picker-period-container: var(--m3e-comp-time-picker-period-container-color);--_m3e-time-picker-period-container-selected: var( --m3e-comp-time-picker-period-container-color-selected );--_m3e-time-picker-period-label-selected: var( --m3e-comp-time-picker-period-label-color-selected );--_m3e-time-picker-selector-container: var( --m3e-comp-time-picker-time-selector-container-color-unselected );--_m3e-time-picker-selector-label: var( --m3e-comp-time-picker-time-selector-label-text-color-unselected );--_m3e-time-picker-selector-container-selected: var( --m3e-comp-time-picker-time-selector-container-color-selected );--_m3e-time-picker-selector-label-selected: var( --m3e-comp-time-picker-time-selector-label-text-color-selected );--_m3e-time-picker-outline: var(--m3e-comp-time-picker-input-outline-color);--_m3e-time-picker-outline-focused: var(--m3e-comp-time-picker-input-outline-color-focused);--_m3e-time-picker-container-error: var(--m3e-comp-time-picker-input-container-color-error);--_m3e-time-picker-outline-error: var(--m3e-comp-time-picker-input-outline-color-error);--_m3e-time-picker-caret: var(--m3e-comp-time-picker-input-caret-color);display:flex;align-items:flex-start;inline-size:fit-content}.m3e-time-input--vibrant,.m3e-time-scroll{--_m3e-time-picker-field-width: var(--m3e-comp-time-picker-vibrant-time-field-width);--_m3e-time-picker-field-height: var(--m3e-comp-time-picker-vibrant-time-field-height);--_m3e-time-picker-field-shape: var(--m3e-comp-time-picker-vibrant-time-field-shape);--_m3e-time-picker-field-font: var(--m3e-comp-time-picker-vibrant-time-field-label-text-font);--_m3e-time-picker-field-size: var(--m3e-comp-time-picker-vibrant-time-field-label-text-size);--_m3e-time-picker-field-weight: var( --m3e-comp-time-picker-vibrant-time-field-label-text-weight );--_m3e-time-picker-field-line-height: var( --m3e-comp-time-picker-vibrant-time-field-label-text-line-height );--_m3e-time-picker-field-tracking: var( --m3e-comp-time-picker-vibrant-time-field-label-text-tracking );--_m3e-time-picker-separator-width: var(--m3e-comp-time-picker-vibrant-separator-width);--_m3e-time-picker-separator-height: var(--_m3e-time-picker-field-height);--_m3e-time-picker-period-width: var(--m3e-comp-time-picker-vibrant-period-width);--_m3e-time-picker-period-height: var(--m3e-comp-time-picker-vibrant-period-height);--_m3e-time-picker-period-gap: var(--m3e-comp-time-picker-vibrant-period-padding);--_m3e-time-picker-period-offset: var(--m3e-comp-time-picker-vibrant-period-padding);--_m3e-time-picker-period-container: var(--m3e-comp-time-picker-vibrant-period-container-color);--_m3e-time-picker-period-container-selected: var( --m3e-comp-time-picker-vibrant-period-container-color-selected );--_m3e-time-picker-period-label-selected: var( --m3e-comp-time-picker-vibrant-period-label-color-selected );--_m3e-time-picker-selector-container: var( --m3e-comp-time-picker-vibrant-input-container-color );--_m3e-time-picker-selector-label: var(--m3e-comp-time-picker-vibrant-input-label-color);--_m3e-time-picker-selector-container-selected: var( --m3e-comp-time-picker-vibrant-input-container-color-focused );--_m3e-time-picker-selector-label-selected: var( --m3e-comp-time-picker-vibrant-input-label-color-focused );--_m3e-time-picker-outline: var(--m3e-comp-time-picker-vibrant-input-outline-color);--_m3e-time-picker-outline-focused: var( --m3e-comp-time-picker-vibrant-input-outline-color-focused );--_m3e-time-picker-container-error: var( --m3e-comp-time-picker-vibrant-input-container-color-error );--_m3e-time-picker-outline-error: var(--m3e-comp-time-picker-vibrant-input-outline-color-error);--_m3e-time-picker-caret: var(--m3e-comp-time-picker-vibrant-input-label-color-focused)}.m3e-time-input--uncontained,.m3e-time-scroll--uncontained{--_m3e-time-picker-field-height: var(--m3e-comp-time-picker-uncontained-time-field-height)}.m3e-time-picker__display{display:flex;flex:none;align-items:flex-start;justify-content:center;margin-block-end:var(--_m3e-time-picker-gap)}.m3e-time-picker--horizontal>.m3e-time-picker__display{flex-direction:column;align-items:center;margin-block-end:0;margin-inline-end:var(--_m3e-time-picker-gap)}.m3e-time-picker__fields,.m3e-time-input__fields,.m3e-time-scroll__fields{display:flex;flex:none;direction:ltr}.m3e-time-picker__selector{--m3e-comp-state-layer-color: var(--_m3e-time-picker-selector-label);display:flex;align-items:center;justify-content:center;box-sizing:border-box;inline-size:var(--_m3e-time-picker-selector-width);block-size:var(--_m3e-time-picker-selector-height);margin:0;padding:0;border:none;border-radius:var(--_m3e-time-picker-selector-shape);background-color:var(--_m3e-time-picker-selector-container);color:var(--_m3e-time-picker-selector-label);font-family:var(--m3e-comp-time-picker-time-selector-label-text-font);font-size:var(--m3e-comp-time-picker-time-selector-label-text-size);font-weight:var(--m3e-comp-time-picker-time-selector-label-text-weight);line-height:var(--m3e-comp-time-picker-time-selector-label-text-line-height);letter-spacing:var(--m3e-comp-time-picker-time-selector-label-text-tracking);font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent}.m3e-time-picker__selector[aria-checked=true]{--_m3e-time-picker-selector-container: var(--_m3e-time-picker-selector-container-selected);--_m3e-time-picker-selector-label: var(--_m3e-time-picker-selector-label-selected);box-shadow:inset 0 0 0 var(--m3e-comp-time-picker-vibrant-selector-outline-width) var(--_m3e-time-picker-selector-outline)}.m3e-time-picker__separator,.m3e-time-input__separator,.m3e-time-scroll__separator{display:flex;flex:none;align-items:center;justify-content:center;inline-size:var(--_m3e-time-picker-separator-width);block-size:var(--_m3e-time-picker-separator-height);color:var(--m3e-comp-time-input-time-field-separator-color);font-family:var(--_m3e-time-picker-separator-font);font-size:var(--_m3e-time-picker-separator-size);font-weight:var(--_m3e-time-picker-separator-weight);letter-spacing:var(--_m3e-time-picker-separator-tracking);line-height:1;translate:0 var(--m3e-comp-time-picker-separator-offset);-webkit-user-select:none;user-select:none}.m3e-time-picker__period{display:grid;flex:none;grid-template-rows:1fr 1fr;gap:var(--_m3e-time-picker-period-gap);box-sizing:border-box;inline-size:var(--_m3e-time-picker-period-width);block-size:var(--_m3e-time-picker-period-height);margin-inline-start:var(--_m3e-time-picker-period-offset)}.m3e-time-picker--horizontal .m3e-time-picker__period{grid-template-rows:none;grid-template-columns:1fr 1fr;margin-block-start:var(--m3e-comp-time-picker-vibrant-period-large-padding);margin-inline-start:0}.m3e-time-picker__period-item{--_m3e-time-picker-item-height: calc( (var(--_m3e-time-picker-period-height) - var(--_m3e-time-picker-period-gap)) / 2 );--_m3e-time-picker-item-shape: calc(var(--_m3e-time-picker-item-height) / 2);--_m3e-time-picker-item-container: var(--_m3e-time-picker-period-container);--_m3e-time-picker-item-label: var( --m3e-comp-time-picker-period-selector-label-text-color-unselected );--m3e-comp-state-layer-color: var(--_m3e-time-picker-item-label);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-inline-size:0;margin:0;padding:0;border:none;border-radius:var(--_m3e-time-picker-item-shape);background-color:var(--_m3e-time-picker-item-container);color:var(--_m3e-time-picker-item-label);font-family:var(--m3e-comp-time-picker-period-selector-label-text-font);font-size:var(--m3e-comp-time-picker-period-selector-label-text-size);font-weight:var(--m3e-comp-time-picker-period-selector-label-text-weight);line-height:var(--m3e-comp-time-picker-period-selector-label-text-line-height);letter-spacing:var(--m3e-comp-time-picker-period-selector-label-text-tracking);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:border-radius var(--m3e-sys-motion-spring-fast-spatial-duration) var(--m3e-sys-motion-spring-fast-spatial-easing),background-color var(--m3e-sys-motion-spring-fast-effects-duration) var(--m3e-sys-motion-spring-fast-effects-easing),color var(--m3e-sys-motion-spring-fast-effects-duration) var(--m3e-sys-motion-spring-fast-effects-easing)}.m3e-time-picker__period-item[aria-checked=true]{--_m3e-time-picker-item-shape: var(--m3e-comp-time-picker-period-shape-selected);--_m3e-time-picker-item-container: var(--_m3e-time-picker-period-container-selected);--_m3e-time-picker-item-label: var(--_m3e-time-picker-period-label-selected);font-weight:var(--m3e-comp-time-picker-period-label-weight-selected)}.m3e-time-picker__period-item:is(:active,[data-pressed]){--_m3e-time-picker-item-shape: var(--m3e-comp-time-picker-period-shape-pressed)}.m3e-time-picker--horizontal .m3e-time-picker__period-item{--_m3e-time-picker-item-height: var(--_m3e-time-picker-period-height)}.m3e-time-picker__period-item:after{content:"";position:absolute;inset-block:min(0%,calc((var(--_m3e-time-picker-item-height) - var(--m3e-comp-minimum-interactive-component-size)) / 2));inset-inline:min(0%,calc((100% - var(--m3e-comp-minimum-interactive-component-size)) / 2))}.m3e-time-picker__side{position:relative;flex:none;box-sizing:border-box;min-inline-size:var(--m3e-comp-time-picker-minimum-interactive-size);block-size:var(--m3e-comp-time-picker-uncontained-toggle-height);margin-inline-start:var(--m3e-comp-time-picker-period-gap)}.m3e-time-picker-dialog__actions .m3e-icon-button{color:var(--m3e-sys-color-on-surface-variant)}.m3e-time-picker__side>.m3e-time-picker__period{display:contents}.m3e-time-picker__side :is(.m3e-time-picker__period-item,.m3e-icon-button){position:absolute;inset-inline:0;margin-inline:auto}.m3e-time-picker__side .m3e-time-picker__period-item{--_m3e-time-picker-item-height: var(--m3e-comp-time-picker-side-item-height);inset-block-start:0;inline-size:fit-content;min-inline-size:var(--m3e-comp-time-picker-side-item-min-width);block-size:var(--m3e-comp-time-picker-side-item-height);padding-inline:var(--m3e-comp-time-picker-side-item-padding)}.m3e-time-picker__side .m3e-time-picker__period-item+.m3e-time-picker__period-item{inset-block-start:calc(var(--m3e-comp-time-picker-side-item-height) + var(--m3e-comp-time-picker-side-period-gap))}.m3e-time-picker__side>.m3e-icon-button{inset-block-start:calc(var(--m3e-comp-time-picker-side-item-height) + var(--m3e-comp-time-picker-side-item-height) + var(--m3e-comp-time-picker-side-period-gap) + var(--m3e-comp-time-picker-side-toggle-gap) - (var(--m3e-comp-small-icon-button-container-height) - var(--m3e-comp-small-icon-button-icon-size)) / 2)}.m3e-time-picker__side>.m3e-icon-button:only-child{inset-block-start:calc(var(--m3e-comp-time-picker-side-toggle-top-24h) + (var(--m3e-comp-minimum-interactive-component-size) - var(--m3e-comp-small-icon-button-container-height)) / 2)}.m3e-time-picker__dial{--_m3e-time-picker-radius: var(--m3e-comp-time-picker-outer-radius);--_m3e-time-picker-handle: var( --m3e-comp-time-picker-clock-dial-selector-handle-container-size );--_m3e-time-picker-handle-x: calc( 50% + var(--_m3e-time-picker-cos, 0) * var(--_m3e-time-picker-radius) );--_m3e-time-picker-handle-y: calc( 50% + var(--_m3e-time-picker-sin, -1) * var(--_m3e-time-picker-radius) );position:relative;flex:none;inline-size:var(--m3e-comp-time-picker-clock-dial-container-size);block-size:var(--m3e-comp-time-picker-clock-dial-container-size);border-radius:var(--m3e-comp-time-picker-clock-dial-shape);background-color:var(--_m3e-time-picker-dial-color);direction:ltr;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.m3e-time-picker__dial[data-inner]{--_m3e-time-picker-radius: var(--m3e-comp-time-picker-inner-radius)}.m3e-time-picker__face{position:absolute;inset:0;transition:opacity var(--m3e-comp-time-picker-face-duration) var(--m3e-comp-time-picker-face-easing),visibility var(--m3e-comp-time-picker-face-duration) var(--m3e-sys-motion-easing-linear)}.m3e-time-picker__face:not([data-active]){opacity:0;visibility:hidden}.m3e-time-picker__label{--m3e-comp-state-layer-color: var( --m3e-comp-time-picker-clock-dial-label-text-color-unselected );--_m3e-time-picker-label-radius: var(--m3e-comp-time-picker-outer-radius);position:absolute;inset-block-start:calc(50% + var(--_m3e-time-picker-label-sin) * var(--_m3e-time-picker-label-radius) - var(--m3e-comp-time-picker-minimum-interactive-size) / 2);inset-inline-start:calc(50% + var(--_m3e-time-picker-label-cos) * var(--_m3e-time-picker-label-radius) - var(--m3e-comp-time-picker-minimum-interactive-size) / 2);display:flex;align-items:center;justify-content:center;inline-size:var(--m3e-comp-time-picker-minimum-interactive-size);block-size:var(--m3e-comp-time-picker-minimum-interactive-size);border-radius:var(--m3e-sys-shape-corner-full);outline-offset:calc(var(--m3e-sys-state-focus-indicator-thickness) * -1);color:var(--m3e-comp-time-picker-clock-dial-label-text-color-unselected);font-family:var(--m3e-comp-time-picker-clock-dial-label-text-font);font-size:var(--m3e-comp-time-picker-clock-dial-label-text-size);font-weight:var(--m3e-comp-time-picker-clock-dial-label-text-weight);line-height:var(--m3e-comp-time-picker-clock-dial-label-text-line-height);letter-spacing:var(--m3e-comp-time-picker-clock-dial-label-text-tracking);cursor:pointer}.m3e-time-picker__label--inner{--_m3e-time-picker-label-radius: var(--m3e-comp-time-picker-inner-radius)}.m3e-time-picker__handle,.m3e-time-picker__track,.m3e-time-picker__center{position:absolute;pointer-events:none}.m3e-time-picker__handle{inset-block-start:calc(var(--_m3e-time-picker-handle-y) - var(--_m3e-time-picker-handle) / 2);inset-inline-start:calc(var(--_m3e-time-picker-handle-x) - var(--_m3e-time-picker-handle) / 2);inline-size:var(--_m3e-time-picker-handle);block-size:var(--_m3e-time-picker-handle);border-radius:var(--m3e-comp-time-picker-clock-dial-selector-handle-container-shape);background-color:var(--m3e-comp-time-picker-clock-dial-selector-handle-container-color)}.m3e-time-picker__dial:has(>.m3e-time-picker__face>.m3e-time-picker__label[aria-checked=true]:focus-visible)>.m3e-time-picker__handle{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}.m3e-time-picker__track{inset-block-start:calc(50% - var(--m3e-comp-time-picker-clock-dial-selector-track-container-width) / 2);inset-inline-start:50%;inline-size:calc(var(--_m3e-time-picker-radius) - var(--_m3e-time-picker-handle) / 2);block-size:var(--m3e-comp-time-picker-clock-dial-selector-track-container-width);background-color:var(--m3e-comp-time-picker-clock-dial-selector-track-container-color);transform-origin:0 50%;rotate:atan2(var(--_m3e-time-picker-sin, -1),var(--_m3e-time-picker-cos, 0))}.m3e-time-picker__center{inset-block-start:calc(50% - var(--m3e-comp-time-picker-clock-dial-selector-center-container-size) / 2);inset-inline-start:calc(50% - var(--m3e-comp-time-picker-clock-dial-selector-center-container-size) / 2);inline-size:var(--m3e-comp-time-picker-clock-dial-selector-center-container-size);block-size:var(--m3e-comp-time-picker-clock-dial-selector-center-container-size);border-radius:var(--m3e-comp-time-picker-clock-dial-selector-center-container-shape);background-color:var(--m3e-comp-time-picker-clock-dial-selector-center-container-color)}.m3e-time-picker__highlight{position:absolute;inset:0;clip-path:circle(calc(var(--_m3e-time-picker-handle) / 2) at var(--_m3e-time-picker-handle-x) var(--_m3e-time-picker-handle-y));pointer-events:none}.m3e-time-picker__highlight .m3e-time-picker__label{color:var(--m3e-comp-time-picker-clock-dial-label-text-color-selected)}.m3e-time-picker__highlight .m3e-time-picker__label:after{content:attr(data-label)}.m3e-time-input__field{display:flex;flex-direction:column;inline-size:var(--_m3e-time-picker-field-width)}.m3e-time-input__input{--_m3e-time-picker-input-container: var(--_m3e-time-picker-selector-container);--_m3e-time-picker-input-label: var(--_m3e-time-picker-selector-label);--_m3e-time-picker-input-border: transparent;--_m3e-time-picker-input-border-width: 0;box-sizing:border-box;inline-size:var(--_m3e-time-picker-field-width);block-size:var(--_m3e-time-picker-field-height);margin:0;padding:0;border:none;border-radius:var(--_m3e-time-picker-field-shape);outline:none;background-color:var(--_m3e-time-picker-input-container);box-shadow:inset 0 0 0 var(--_m3e-time-picker-input-border-width) var(--_m3e-time-picker-input-border);color:var(--_m3e-time-picker-input-label);caret-color:var(--_m3e-time-picker-caret);font-family:var(--_m3e-time-picker-field-font);font-size:var(--_m3e-time-picker-field-size);font-weight:var(--_m3e-time-picker-field-weight);line-height:var(--_m3e-time-picker-field-line-height);letter-spacing:var(--_m3e-time-picker-field-tracking);font-variant-numeric:tabular-nums;text-align:center;cursor:pointer;appearance:none}.m3e-time-input__field[data-invalid]>.m3e-time-input__input{--_m3e-time-picker-input-container: var( --m3e-comp-time-picker-time-selector-container-color-error );--_m3e-time-picker-input-label: var(--m3e-comp-time-picker-time-selector-label-color-error)}.m3e-time-input__field[data-selected]>.m3e-time-input__input{--_m3e-time-picker-input-container: var(--_m3e-time-picker-selector-container);--_m3e-time-picker-input-label: var(--_m3e-time-picker-selector-label-selected);--_m3e-time-picker-input-border: var(--_m3e-time-picker-outline);--_m3e-time-picker-input-border-width: var(--m3e-comp-time-picker-input-outline-width);cursor:text}.m3e-time-input__field[data-selected]>.m3e-time-input__input:focus{--_m3e-time-picker-input-container: var(--_m3e-time-picker-selector-container-selected);--_m3e-time-picker-input-border: var(--_m3e-time-picker-outline-focused);--_m3e-time-picker-input-border-width: var(--m3e-comp-time-picker-input-outline-width-focused)}.m3e-time-input__field[data-invalid][data-selected]>.m3e-time-input__input{--_m3e-time-picker-input-container: var(--_m3e-time-picker-container-error);--_m3e-time-picker-input-label: var(--m3e-comp-time-picker-input-label-color-error);--_m3e-time-picker-input-border: var(--_m3e-time-picker-outline-error)}.m3e-time-input__supporting{min-block-size:calc(var(--m3e-comp-time-input-time-field-supporting-text-line-height) + var(--m3e-comp-time-input-time-field-supporting-text-line-height));padding-block-start:var(--m3e-comp-time-picker-supporting-text-top);color:var(--m3e-comp-time-input-time-field-supporting-text-color);font-family:var(--m3e-comp-time-input-time-field-supporting-text-font);font-size:var(--m3e-comp-time-input-time-field-supporting-text-size);font-weight:var(--m3e-comp-time-input-time-field-supporting-text-weight);line-height:var(--m3e-comp-time-input-time-field-supporting-text-line-height);letter-spacing:var(--m3e-comp-time-input-time-field-supporting-text-tracking)}.m3e-time-input__field[data-invalid]>.m3e-time-input__supporting{color:var(--m3e-comp-time-picker-supporting-text-color-error)}.m3e-time-scroll__field{--_m3e-time-scroll-page: calc( var(--m3e-comp-time-picker-scroll-field-height) / var(--m3e-comp-time-picker-scroll-field-pages) );position:relative;flex:none;box-sizing:border-box;inline-size:var(--m3e-comp-time-picker-scroll-field-width);block-size:var(--_m3e-time-picker-field-height);overflow:hidden;border-radius:var(--m3e-comp-time-picker-scroll-field-shape);outline-offset:calc(var(--m3e-sys-state-focus-indicator-thickness) * -1);background-color:var(--m3e-comp-time-picker-scroll-field-container-color);touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;-webkit-tap-highlight-color:transparent}.m3e-time-scroll__field[data-dragging]{cursor:grabbing}.m3e-time-scroll__item{position:absolute;inset-inline:0;inset-block-start:calc(50% - var(--_m3e-time-scroll-page) / 2 + var(--_m3e-time-scroll-offset, 0) * var(--_m3e-time-scroll-page));display:flex;align-items:center;justify-content:center;block-size:var(--_m3e-time-scroll-page);color:var(--m3e-comp-time-picker-scroll-field-label-color);font-family:var(--m3e-comp-time-picker-scroll-item-font);font-size:var(--m3e-comp-time-picker-scroll-item-size);font-weight:var(--m3e-comp-time-picker-scroll-item-weight);line-height:var(--m3e-comp-time-picker-scroll-item-line-height);letter-spacing:var(--m3e-comp-time-picker-scroll-item-tracking);font-variant-numeric:tabular-nums;cursor:pointer;transition-property:color,font-size,font-weight,line-height,letter-spacing;transition-duration:var(--m3e-comp-time-picker-scroll-item-duration);transition-timing-function:var(--m3e-comp-time-picker-scroll-item-easing)}.m3e-time-scroll__item[data-selected]{color:var(--m3e-comp-time-picker-scroll-field-label-color-selected);font-family:var(--m3e-comp-time-picker-scroll-item-selected-font);font-size:var(--m3e-comp-time-picker-scroll-item-selected-size);font-weight:var(--m3e-comp-time-picker-scroll-item-selected-weight);line-height:var(--m3e-comp-time-picker-scroll-item-selected-line-height);letter-spacing:var(--m3e-comp-time-picker-scroll-item-selected-tracking)}.m3e-dialog--custom>.m3e-dialog__container:has(>.m3e-time-picker-dialog){min-inline-size:0;max-inline-size:100%}.m3e-time-picker-dialog{display:grid;grid-template-rows:auto auto auto;justify-items:center;box-sizing:border-box;inline-size:fit-content;max-block-size:100%;padding:var(--m3e-comp-time-picker-dialog-padding-top) var(--m3e-comp-time-picker-dialog-padding) var(--m3e-comp-time-picker-dialog-padding-bottom);overflow:auto;border-radius:var(--m3e-comp-time-picker-dialog-container-shape);background-color:var(--m3e-comp-time-picker-dialog-container-color);color:var(--m3e-sys-color-on-surface)}.m3e-time-picker-dialog__title{justify-self:start;margin:0;margin-inline-start:calc(var(--m3e-comp-time-picker-dialog-padding-top) - var(--m3e-comp-time-picker-dialog-padding));padding-block-end:var(--m3e-comp-time-picker-dialog-title-padding-bottom);font-family:var(--m3e-comp-time-picker-dialog-title-font);font-size:var(--m3e-comp-time-picker-dialog-title-size);font-weight:var(--m3e-comp-time-picker-dialog-title-weight);line-height:var(--m3e-comp-time-picker-dialog-title-line-height);letter-spacing:var(--m3e-comp-time-picker-dialog-title-tracking)}.m3e-time-picker-dialog__content{display:flex;flex-direction:column}.m3e-time-picker-dialog__actions{display:flex;align-items:center;gap:var(--m3e-comp-time-picker-dialog-actions-gap);inline-size:100%}.m3e-time-picker-dialog__spacer{flex:1}.m3e-time-picker-dialog--vibrant{row-gap:var(--m3e-comp-time-picker-vibrant-dialog-padding);padding:var(--m3e-comp-time-picker-vibrant-dialog-padding);border-radius:var(--m3e-sys-shape-corner-extra-large);background-color:var(--m3e-comp-time-picker-vibrant-dialog-container-color)}.m3e-dialog__container:has(>.m3e-time-picker-dialog .m3e-time-picker--horizontal){block-size:100%}.m3e-time-picker-dialog:has(.m3e-time-picker--horizontal){position:relative;grid-template-rows:minmax(0,1fr) auto;row-gap:var(--m3e-comp-time-picker-dialog-landscape-content-actions);block-size:100%;padding-block:var(--m3e-comp-time-picker-dialog-landscape-content-top) var(--m3e-comp-time-picker-dialog-landscape-actions-bottom)}.m3e-time-picker-dialog:has(.m3e-time-picker--horizontal)>.m3e-time-picker-dialog__title{position:absolute;inset-block-start:var(--m3e-comp-time-picker-dialog-padding-top);inset-inline-start:var(--m3e-comp-time-picker-dialog-padding-top);margin:0}.m3e-time-picker-dialog:has(.m3e-time-picker--horizontal)>.m3e-time-picker-dialog__content{align-self:center}@media(height>=432px){.m3e-time-picker-dialog:has(.m3e-time-picker--horizontal)>.m3e-time-picker-dialog__actions{translate:0 calc(var(--m3e-comp-time-picker-dialog-padding-top) - var(--m3e-comp-time-picker-dialog-padding-bottom) - var(--m3e-comp-time-picker-dialog-landscape-content-top))}}.m3e-time-picker-dialog--vibrant:has(.m3e-time-picker--horizontal){grid-template-rows:auto auto;align-content:center;row-gap:var(--m3e-comp-time-picker-vibrant-dialog-landscape-padding);padding:var(--m3e-comp-time-picker-vibrant-dialog-padding) var(--m3e-comp-time-picker-vibrant-dialog-landscape-padding)}@media(prefers-reduced-motion:reduce){.m3e-time-picker__period-item{transition-property:background-color,color}}@media(forced-colors:active){.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-input__input,.m3e-time-scroll__field,.m3e-time-picker-dialog{border:var(--m3e-comp-time-picker-input-outline-width) solid ButtonText}.m3e-time-picker__selector[aria-checked=true],.m3e-time-picker__period-item[aria-checked=true],.m3e-time-input__field[data-selected]>.m3e-time-input__input{border-color:Highlight;outline:var(--m3e-comp-time-picker-input-outline-width-focused) solid Highlight}.m3e-time-input__field[data-invalid]>.m3e-time-input__input{border-style:dashed}.m3e-time-picker__dial{border:var(--m3e-comp-time-picker-input-outline-width) solid CanvasText}.m3e-time-picker__handle,.m3e-time-picker__track,.m3e-time-picker__center{background-color:Highlight}.m3e-time-picker__highlight{forced-color-adjust:none}.m3e-time-picker__highlight .m3e-time-picker__label{color:HighlightText}.m3e-time-scroll__item[data-selected]{color:Highlight}}}
|
package/dist/tooltip.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"@kyralabs/m3e-tokens/components/plain-tooltip.css";@import"@kyralabs/m3e-tokens/components/rich-tooltip.css";@import"@kyralabs/m3e-tokens/components/tooltip-defaults.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@import"@kyralabs/m3e-tokens/components/divider.css";@layer m3e.components{.m3e-tooltip{--_m3e-tooltip-container: var(--m3e-comp-plain-tooltip-container-color);position:relative;display:block;box-sizing:border-box;inline-size:max-content;min-inline-size:var(--m3e-comp-tooltip-min-width);max-inline-size:var(--m3e-comp-tooltip-plain-max-width);min-block-size:var(--m3e-comp-tooltip-min-height);margin:0;padding:var(--m3e-comp-tooltip-plain-padding-vertical) var(--m3e-comp-tooltip-plain-padding-horizontal);overflow:visible;border:none;border-radius:var(--m3e-comp-plain-tooltip-container-shape);background-color:var(--_m3e-tooltip-container);color:var(--m3e-comp-plain-tooltip-supporting-text-color);font-family:var(--m3e-comp-plain-tooltip-supporting-text-font);font-size:var(--m3e-comp-plain-tooltip-supporting-text-size);font-weight:var(--m3e-comp-plain-tooltip-supporting-text-weight);line-height:var(--m3e-comp-plain-tooltip-supporting-text-line-height);letter-spacing:var(--m3e-comp-plain-tooltip-supporting-text-tracking);overflow-wrap:break-word;text-align:start}.m3e-tooltip--rich{--_m3e-tooltip-container: var(--m3e-comp-rich-tooltip-container-color);max-inline-size:var(--m3e-comp-tooltip-rich-max-width);padding:0 var(--m3e-comp-tooltip-rich-padding-horizontal);border-radius:var(--m3e-comp-rich-tooltip-container-shape);box-shadow:var(--m3e-comp-tooltip-rich-shadow);color:var(--m3e-comp-rich-tooltip-supporting-text-color);font-family:var(--m3e-comp-rich-tooltip-supporting-text-font);font-size:var(--m3e-comp-rich-tooltip-supporting-text-size);font-weight:var(--m3e-comp-rich-tooltip-supporting-text-weight);line-height:var(--m3e-comp-rich-tooltip-supporting-text-line-height);letter-spacing:var(--m3e-comp-rich-tooltip-supporting-text-tracking)}.m3e-tooltip__subhead{padding-block-start:max(0%,calc(var(--m3e-comp-tooltip-rich-subhead-baseline) - var(--m3e-comp-rich-tooltip-subhead-line-height) / 2 - var(--m3e-comp-rich-tooltip-subhead-size) * var(--m3e-comp-tooltip-baseline-shift)));color:var(--m3e-comp-rich-tooltip-subhead-color);font-family:var(--m3e-comp-rich-tooltip-subhead-font);font-size:var(--m3e-comp-rich-tooltip-subhead-size);font-weight:var(--m3e-comp-rich-tooltip-subhead-weight);line-height:var(--m3e-comp-rich-tooltip-subhead-line-height);letter-spacing:var(--m3e-comp-rich-tooltip-subhead-tracking)}.m3e-tooltip__supporting-text{padding-block:var(--m3e-comp-tooltip-plain-padding-vertical)}.m3e-tooltip__subhead~.m3e-tooltip__supporting-text,.m3e-tooltip__supporting-text:has(~.m3e-tooltip__action){padding-block:max(0%,calc(var(--m3e-comp-tooltip-rich-text-baseline) - var(--m3e-comp-rich-tooltip-supporting-text-line-height) / 2 - var(--m3e-comp-rich-tooltip-supporting-text-size) * var(--m3e-comp-tooltip-baseline-shift))) var(--m3e-comp-tooltip-rich-text-padding-bottom)}.m3e-tooltip__action{display:flex;align-items:center;box-sizing:border-box;min-block-size:max(var(--m3e-comp-tooltip-rich-action-min-height),calc(var(--m3e-comp-minimum-interactive-component-size) + var(--m3e-comp-tooltip-rich-action-padding-bottom)));padding-block-end:var(--m3e-comp-tooltip-rich-action-padding-bottom);color:var(--m3e-comp-rich-tooltip-action-label-text-color);font-family:var(--m3e-comp-rich-tooltip-action-label-text-font);font-size:var(--m3e-comp-rich-tooltip-action-label-text-size);font-weight:var(--m3e-comp-rich-tooltip-action-label-text-weight);line-height:var(--m3e-comp-rich-tooltip-action-label-text-line-height);letter-spacing:var(--m3e-comp-rich-tooltip-action-label-text-tracking)}.m3e-tooltip--caret:after{--_m3e-tooltip-caret-w: var(--m3e-comp-tooltip-caret-width);--_m3e-tooltip-caret-h: var(--m3e-comp-tooltip-caret-height);content:"";position:absolute;top:var(--_m3e-tooltip-caret-y, 100%);left:calc(var(--_m3e-tooltip-caret-x, 50%) - var(--_m3e-tooltip-caret-w) / 2);inline-size:var(--_m3e-tooltip-caret-w);block-size:var(--_m3e-tooltip-caret-h);background-color:var(--_m3e-tooltip-container);clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none}.m3e-tooltip--caret[data-caret=up]:after{top:calc(var(--_m3e-tooltip-caret-y, 0%) - var(--_m3e-tooltip-caret-h));clip-path:polygon(50% 0,100% 100%,0 100%)}.m3e-tooltip--caret[data-caret=left]:after,.m3e-tooltip--caret[data-caret=right]:after{top:calc(var(--_m3e-tooltip-caret-y, 50%) - var(--_m3e-tooltip-caret-w) / 2);inline-size:var(--_m3e-tooltip-caret-h);block-size:var(--_m3e-tooltip-caret-w)}.m3e-tooltip--caret[data-caret=right]:after{left:var(--_m3e-tooltip-caret-x, 100%);clip-path:polygon(0 0,100% 50%,0 100%)}.m3e-tooltip--caret[data-caret=left]:after{left:calc(var(--_m3e-tooltip-caret-x, 0%) - var(--_m3e-tooltip-caret-h));clip-path:polygon(100% 0,100% 100%,0 50%)}.m3e-tooltip[popover]{position:fixed;inset:auto;top:var(--_m3e-tooltip-y, auto);left:var(--_m3e-tooltip-x, auto);scale:var(--_m3e-tooltip-scale, 1);opacity:var(--_m3e-tooltip-opacity, 1)}.m3e-tooltip[popover]:not(:popover-open){display:none}.m3e-tooltip[popover]::backdrop{display:none}.m3e-tooltip[popover]:not([data-driven]){transition:scale var(--m3e-comp-tooltip-scale-duration) var(--m3e-comp-tooltip-scale-easing),opacity var(--m3e-comp-tooltip-opacity-duration) var(--m3e-comp-tooltip-opacity-easing),display var(--m3e-comp-tooltip-scale-duration) allow-discrete,overlay var(--m3e-comp-tooltip-scale-duration) allow-discrete}.m3e-tooltip[popover]:not([data-driven],:popover-open){scale:var(--m3e-comp-tooltip-closed-scale);opacity:var(--m3e-comp-tooltip-closed-opacity)}@starting-style{.m3e-tooltip[popover]:not([data-driven]):popover-open{scale:var(--m3e-comp-tooltip-closed-scale);opacity:var(--m3e-comp-tooltip-closed-opacity)}}@supports (position-area: block-start){.m3e-tooltip[popover]:not([data-positioned]){position-area:block-start;position-try-fallbacks:flip-block;margin-block-end:var(--m3e-comp-tooltip-spacing)}}@media(forced-colors:active){.m3e-tooltip{border:var(--m3e-comp-divider-thickness) solid CanvasText}.m3e-tooltip--caret:after{forced-color-adjust:none;background-color:CanvasText}}}
|
package/dist/top-app-bar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"@kyralabs/m3e-tokens/components/app-bar.css";@import"@kyralabs/m3e-tokens/components/app-bar-small.css";@import"@kyralabs/m3e-tokens/components/app-bar-medium-flexible.css";@import"@kyralabs/m3e-tokens/components/app-bar-large-flexible.css";@import"@kyralabs/m3e-tokens/components/top-app-bar-defaults.css";@import"@kyralabs/m3e-tokens/components/divider.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@property --_m3e-top-app-bar-offset{syntax: "<length-percentage>"; inherits: true; initial-value: 0%;}@layer m3e.components{.m3e-top-app-bar{display:flex;align-items:center;box-sizing:border-box;min-block-size:var(--m3e-comp-app-bar-small-container-height);margin:0;padding:0;border-radius:var(--m3e-comp-app-bar-container-shape);background-color:var(--m3e-comp-app-bar-container-color);color:var(--m3e-comp-app-bar-title-color);transition:background-color var(--m3e-sys-motion-spring-default-effects-duration) var(--m3e-sys-motion-spring-default-effects-easing)}.m3e-top-app-bar[data-scrolled]{background-color:var(--m3e-comp-app-bar-on-scroll-container-color)}.m3e-top-app-bar:is([data-scroll-behavior=enter-always],[data-scroll-behavior=exit-until-collapsed]){clip-path:inset(0 0 calc(var(--_m3e-top-app-bar-offset) * -1) 0)}.m3e-top-app-bar:is([data-scroll-behavior=enter-always],[data-scroll-behavior=exit-until-collapsed])>*{translate:0 calc(var(--_m3e-top-app-bar-offset) / 2)}.m3e-top-app-bar__navigation,.m3e-top-app-bar__actions{display:flex;flex:none;align-items:center}:is(.m3e-top-app-bar__navigation,.m3e-top-app-bar__actions)>.m3e-icon-button{margin-inline:max(0%,calc((var(--m3e-comp-minimum-interactive-component-size) - var(--_m3e-icon-button-width)) / 2))}.m3e-top-app-bar__navigation{grid-area:1 / 1;padding-inline-start:var(--m3e-comp-top-app-bar-horizontal-padding);color:var(--m3e-comp-app-bar-leading-icon-color)}.m3e-top-app-bar__actions{grid-area:1 / 3;gap:var(--m3e-comp-app-bar-icon-button-space);justify-content:flex-end;margin-inline-start:auto;padding-inline-end:var(--m3e-comp-top-app-bar-horizontal-padding);color:var(--m3e-comp-app-bar-trailing-icon-color)}.m3e-top-app-bar__headline{display:flex;flex:1;flex-direction:column;justify-content:center;min-inline-size:0;padding-inline:var(--m3e-comp-top-app-bar-horizontal-padding)}.m3e-top-app-bar__headline:first-child{margin-inline-start:var(--m3e-comp-top-app-bar-title-inset)}.m3e-top-app-bar__title,.m3e-top-app-bar__subtitle{margin:0}.m3e-top-app-bar__title{color:var(--m3e-comp-app-bar-title-color);font-family:var(--m3e-comp-app-bar-small-title-font);font-size:var(--m3e-comp-app-bar-small-title-size);font-weight:var(--m3e-comp-app-bar-small-title-weight);line-height:var(--m3e-comp-app-bar-small-title-line-height);letter-spacing:var(--m3e-comp-app-bar-small-title-tracking)}.m3e-top-app-bar__subtitle{color:var(--m3e-comp-app-bar-subtitle-color);font-family:var(--m3e-comp-app-bar-small-subtitle-font);font-size:var(--m3e-comp-app-bar-small-subtitle-size);font-weight:var(--m3e-comp-app-bar-small-subtitle-weight);line-height:var(--m3e-comp-app-bar-small-subtitle-line-height);letter-spacing:var(--m3e-comp-app-bar-small-subtitle-tracking)}.m3e-top-app-bar:is(.m3e-top-app-bar--center-aligned,:has(>.m3e-top-app-bar__expanded)){display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(var(--_m3e-top-app-bar-collapsed-height, var(--m3e-comp-top-app-bar-expanded-height)),auto)}.m3e-top-app-bar>.m3e-top-app-bar__headline{grid-area:1 / 2}.m3e-top-app-bar--medium-flexible{--_m3e-top-app-bar-collapsed-height: var(--m3e-comp-top-app-bar-medium-collapsed-height);--_m3e-top-app-bar-expanded-height: var(--m3e-comp-top-app-bar-medium-flexible-expanded-height);--_m3e-top-app-bar-title-bottom-padding: var( --m3e-comp-top-app-bar-medium-title-bottom-padding )}.m3e-top-app-bar--medium-flexible:has(.m3e-top-app-bar__expanded .m3e-top-app-bar__subtitle){--_m3e-top-app-bar-expanded-height: var( --m3e-comp-top-app-bar-medium-flexible-with-subtitle-expanded-height )}.m3e-top-app-bar--large-flexible{--_m3e-top-app-bar-collapsed-height: var(--m3e-comp-top-app-bar-large-collapsed-height);--_m3e-top-app-bar-expanded-height: var(--m3e-comp-top-app-bar-large-flexible-expanded-height);--_m3e-top-app-bar-title-bottom-padding: var(--m3e-comp-top-app-bar-large-title-bottom-padding)}.m3e-top-app-bar--large-flexible:has(.m3e-top-app-bar__expanded .m3e-top-app-bar__subtitle){--_m3e-top-app-bar-expanded-height: var( --m3e-comp-top-app-bar-large-flexible-with-subtitle-expanded-height )}.m3e-top-app-bar--two-rows{--_m3e-top-app-bar-collapsed-height: var(--m3e-comp-top-app-bar-two-rows-collapsed-height);--_m3e-top-app-bar-expanded-height: var(--m3e-comp-top-app-bar-two-rows-expanded-height);--_m3e-top-app-bar-title-bottom-padding: var( --m3e-comp-top-app-bar-two-rows-title-bottom-padding )}.m3e-top-app-bar--two-rows:has(.m3e-top-app-bar__expanded .m3e-top-app-bar__subtitle){--_m3e-top-app-bar-expanded-height: var( --m3e-comp-top-app-bar-two-rows-with-subtitle-expanded-height )}.m3e-top-app-bar:has(>.m3e-top-app-bar__expanded){grid-template-rows:minmax(var(--_m3e-top-app-bar-collapsed-height),auto) minmax(calc(var(--_m3e-top-app-bar-expanded-height) - var(--_m3e-top-app-bar-collapsed-height)),auto);background-color:color-mix(in oklab,var(--m3e-comp-app-bar-container-color),var(--m3e-comp-app-bar-on-scroll-container-color) calc(var(--_m3e-top-app-bar-color-fraction, 0) * 100%));transition:none}.m3e-top-app-bar:has(>.m3e-top-app-bar__expanded)>*{translate:none}.m3e-top-app-bar__expanded{display:flex;grid-area:2 / 1 / 3 / -1;flex-direction:column;align-self:stretch;justify-content:flex-end;min-inline-size:0;padding-inline-end:var(--m3e-comp-top-app-bar-horizontal-padding);overflow:clip;contain:inline-size}.m3e-top-app-bar__expanded:after{content:"";flex:1 0 0;max-block-size:var(--_m3e-top-app-bar-title-bottom-padding)}.m3e-top-app-bar__expanded>.m3e-top-app-bar__headline{flex:none;margin-block-end:calc(var(--_m3e-top-app-bar-title-bottom-padding) * -1);opacity:var(--_m3e-top-app-bar-expanded-title-opacity, 1);translate:0 var(--_m3e-top-app-bar-offset)}.m3e-top-app-bar__expanded>.m3e-top-app-bar__headline>:last-child:after{content:"";display:inline-block;vertical-align:calc(var(--_m3e-top-app-bar-title-bottom-padding) * -1)}.m3e-top-app-bar.m3e-top-app-bar--center-aligned{grid-template-columns:1fr auto 1fr}.m3e-top-app-bar--center-aligned:before{content:"";grid-area:1 / 1;inline-size:var(--m3e-comp-top-app-bar-title-inset)}.m3e-top-app-bar--center-aligned .m3e-top-app-bar__headline{align-items:center;text-align:center}.m3e-top-app-bar--center-aligned>.m3e-top-app-bar__headline:first-child{margin-inline-start:0}.m3e-top-app-bar--center-aligned>.m3e-top-app-bar__expanded{padding-inline-end:0}.m3e-top-app-bar--center-aligned>.m3e-top-app-bar__expanded>.m3e-top-app-bar__headline{display:grid;grid-template-columns:minmax(calc(var(--m3e-comp-top-app-bar-title-inset) + var(--m3e-comp-top-app-bar-horizontal-padding)),1fr) auto minmax(calc(var(--m3e-comp-top-app-bar-horizontal-padding) * 2),1fr);justify-items:center;margin-inline-start:0;padding-inline:0}.m3e-top-app-bar--center-aligned>.m3e-top-app-bar__expanded>.m3e-top-app-bar__headline>*{grid-column:2}.m3e-top-app-bar:has(>.m3e-top-app-bar__expanded)>.m3e-top-app-bar__headline{opacity:var(--_m3e-top-app-bar-collapsed-title-opacity, 0)}:is(.m3e-top-app-bar--medium-flexible,.m3e-top-app-bar--two-rows) .m3e-top-app-bar__expanded .m3e-top-app-bar__title{font-family:var(--m3e-comp-app-bar-medium-flexible-title-font);font-size:var(--m3e-comp-app-bar-medium-flexible-title-size);font-weight:var(--m3e-comp-app-bar-medium-flexible-title-weight);line-height:var(--m3e-comp-app-bar-medium-flexible-title-line-height);letter-spacing:var(--m3e-comp-app-bar-medium-flexible-title-tracking)}:is(.m3e-top-app-bar--medium-flexible,.m3e-top-app-bar--two-rows) .m3e-top-app-bar__expanded .m3e-top-app-bar__subtitle{font-family:var(--m3e-comp-app-bar-medium-flexible-subtitle-font);font-size:var(--m3e-comp-app-bar-medium-flexible-subtitle-size);font-weight:var(--m3e-comp-app-bar-medium-flexible-subtitle-weight);line-height:var(--m3e-comp-app-bar-medium-flexible-subtitle-line-height);letter-spacing:var(--m3e-comp-app-bar-medium-flexible-subtitle-tracking)}.m3e-top-app-bar--large-flexible .m3e-top-app-bar__expanded .m3e-top-app-bar__title{font-family:var(--m3e-comp-app-bar-large-flexible-title-font);font-size:var(--m3e-comp-app-bar-large-flexible-title-size);font-weight:var(--m3e-comp-app-bar-large-flexible-title-weight);line-height:var(--m3e-comp-app-bar-large-flexible-title-line-height);letter-spacing:var(--m3e-comp-app-bar-large-flexible-title-tracking)}.m3e-top-app-bar--large-flexible .m3e-top-app-bar__expanded .m3e-top-app-bar__subtitle{font-family:var(--m3e-comp-app-bar-large-flexible-subtitle-font);font-size:var(--m3e-comp-app-bar-large-flexible-subtitle-size);font-weight:var(--m3e-comp-app-bar-large-flexible-subtitle-weight);line-height:var(--m3e-comp-app-bar-large-flexible-subtitle-line-height);letter-spacing:var(--m3e-comp-app-bar-large-flexible-subtitle-tracking)}@media(forced-colors:active){.m3e-top-app-bar{border-block-end:var(--m3e-comp-divider-thickness) solid CanvasText}}}
|
|
1
|
+
@import"@kyralabs/m3e-tokens/components/app-bar.css";@import"@kyralabs/m3e-tokens/components/app-bar-small.css";@import"@kyralabs/m3e-tokens/components/app-bar-medium-flexible.css";@import"@kyralabs/m3e-tokens/components/app-bar-large-flexible.css";@import"@kyralabs/m3e-tokens/components/top-app-bar-defaults.css";@import"@kyralabs/m3e-tokens/components/divider.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@property --_m3e-top-app-bar-offset{syntax: "<length-percentage>"; inherits: true; initial-value: 0%;}@layer m3e.components{.m3e-top-app-bar{display:flex;align-items:center;box-sizing:border-box;min-block-size:var(--m3e-comp-app-bar-small-container-height);margin:0;padding:0;border-radius:var(--m3e-comp-app-bar-container-shape);background-color:var(--m3e-comp-app-bar-container-color);color:var(--m3e-comp-app-bar-title-color);transition:background-color var(--m3e-sys-motion-spring-default-effects-duration) var(--m3e-sys-motion-spring-default-effects-easing)}.m3e-top-app-bar[data-scrolled]{background-color:var(--m3e-comp-app-bar-on-scroll-container-color)}.m3e-top-app-bar:is([data-scroll-behavior=enter-always],[data-scroll-behavior=exit-until-collapsed]){clip-path:inset(0 0 calc(var(--_m3e-top-app-bar-offset) * -1) 0)}.m3e-top-app-bar:is([data-scroll-behavior=enter-always],[data-scroll-behavior=exit-until-collapsed])>*{translate:0 calc(var(--_m3e-top-app-bar-offset) / 2)}.m3e-top-app-bar__navigation,.m3e-top-app-bar__actions{display:flex;flex:none;align-items:center}:is(.m3e-top-app-bar__navigation,.m3e-top-app-bar__actions)>.m3e-icon-button{margin-inline:max(0%,calc((var(--m3e-comp-minimum-interactive-component-size) - var(--_m3e-icon-button-width)) / 2))}.m3e-top-app-bar__navigation{grid-area:1 / 1;padding-inline-start:var(--m3e-comp-top-app-bar-horizontal-padding);color:var(--m3e-comp-app-bar-leading-icon-color)}.m3e-top-app-bar__actions{grid-area:1 / 3;gap:var(--m3e-comp-app-bar-icon-button-space);justify-content:flex-end;margin-inline-start:auto;padding-inline-end:var(--m3e-comp-top-app-bar-horizontal-padding);color:var(--m3e-comp-app-bar-trailing-icon-color)}.m3e-top-app-bar__headline{display:flex;flex:1;flex-direction:column;justify-content:center;min-inline-size:0;padding-inline:var(--m3e-comp-top-app-bar-horizontal-padding)}.m3e-top-app-bar__headline:first-child{margin-inline-start:var(--m3e-comp-top-app-bar-title-inset)}.m3e-top-app-bar__title,.m3e-top-app-bar__subtitle{margin:0}.m3e-top-app-bar__title{color:var(--m3e-comp-app-bar-title-color);font-family:var(--m3e-comp-app-bar-small-title-font);font-size:var(--m3e-comp-app-bar-small-title-size);font-weight:var(--m3e-comp-app-bar-small-title-weight);line-height:var(--m3e-comp-app-bar-small-title-line-height);letter-spacing:var(--m3e-comp-app-bar-small-title-tracking)}.m3e-top-app-bar__subtitle{color:var(--m3e-comp-app-bar-subtitle-color);font-family:var(--m3e-comp-app-bar-small-subtitle-font);font-size:var(--m3e-comp-app-bar-small-subtitle-size);font-weight:var(--m3e-comp-app-bar-small-subtitle-weight);line-height:var(--m3e-comp-app-bar-small-subtitle-line-height);letter-spacing:var(--m3e-comp-app-bar-small-subtitle-tracking)}.m3e-top-app-bar:is(.m3e-top-app-bar--center-aligned,:has(>.m3e-top-app-bar__expanded)){display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(var(--_m3e-top-app-bar-collapsed-height, var(--m3e-comp-top-app-bar-expanded-height)),auto)}.m3e-top-app-bar>.m3e-top-app-bar__headline{grid-area:1 / 2}.m3e-top-app-bar--medium-flexible{--_m3e-top-app-bar-collapsed-height: var( --m3e-comp-top-app-bar-container-collapsed-height, var(--m3e-comp-top-app-bar-medium-collapsed-height) );--_m3e-top-app-bar-expanded-height: var( --m3e-comp-top-app-bar-container-expanded-height, var(--m3e-comp-top-app-bar-medium-flexible-expanded-height) );--_m3e-top-app-bar-title-bottom-padding: var( --m3e-comp-top-app-bar-medium-title-bottom-padding )}.m3e-top-app-bar--medium-flexible:has(.m3e-top-app-bar__expanded .m3e-top-app-bar__subtitle){--_m3e-top-app-bar-expanded-height: var( --m3e-comp-top-app-bar-container-expanded-height, var(--m3e-comp-top-app-bar-medium-flexible-with-subtitle-expanded-height) )}.m3e-top-app-bar--large-flexible{--_m3e-top-app-bar-collapsed-height: var( --m3e-comp-top-app-bar-container-collapsed-height, var(--m3e-comp-top-app-bar-large-collapsed-height) );--_m3e-top-app-bar-expanded-height: var( --m3e-comp-top-app-bar-container-expanded-height, var(--m3e-comp-top-app-bar-large-flexible-expanded-height) );--_m3e-top-app-bar-title-bottom-padding: var(--m3e-comp-top-app-bar-large-title-bottom-padding)}.m3e-top-app-bar--large-flexible:has(.m3e-top-app-bar__expanded .m3e-top-app-bar__subtitle){--_m3e-top-app-bar-expanded-height: var( --m3e-comp-top-app-bar-container-expanded-height, var(--m3e-comp-top-app-bar-large-flexible-with-subtitle-expanded-height) )}.m3e-top-app-bar--two-rows{--_m3e-top-app-bar-collapsed-height: var( --m3e-comp-top-app-bar-container-collapsed-height, var(--m3e-comp-top-app-bar-two-rows-collapsed-height) );--_m3e-top-app-bar-expanded-height: var( --m3e-comp-top-app-bar-container-expanded-height, var(--m3e-comp-top-app-bar-two-rows-expanded-height) );--_m3e-top-app-bar-title-bottom-padding: var( --m3e-comp-top-app-bar-two-rows-title-bottom-padding )}.m3e-top-app-bar--two-rows:has(.m3e-top-app-bar__expanded .m3e-top-app-bar__subtitle){--_m3e-top-app-bar-expanded-height: var( --m3e-comp-top-app-bar-container-expanded-height, var(--m3e-comp-top-app-bar-two-rows-with-subtitle-expanded-height) )}.m3e-top-app-bar:has(>.m3e-top-app-bar__expanded){grid-template-rows:minmax(var(--_m3e-top-app-bar-collapsed-height),auto) minmax(calc(var(--_m3e-top-app-bar-expanded-height) - var(--_m3e-top-app-bar-collapsed-height)),auto);background-color:color-mix(in oklab,var(--m3e-comp-app-bar-container-color),var(--m3e-comp-app-bar-on-scroll-container-color) calc(var(--_m3e-top-app-bar-color-fraction, 0) * 100%));transition:none}.m3e-top-app-bar:has(>.m3e-top-app-bar__expanded)>*{translate:none}.m3e-top-app-bar__expanded{display:flex;grid-area:2 / 1 / 3 / -1;flex-direction:column;align-self:stretch;justify-content:flex-end;min-inline-size:0;padding-inline-end:var(--m3e-comp-top-app-bar-horizontal-padding);overflow:clip;contain:inline-size}.m3e-top-app-bar__expanded:after{content:"";flex:1 0 0;max-block-size:var(--_m3e-top-app-bar-title-bottom-padding)}.m3e-top-app-bar__expanded>.m3e-top-app-bar__headline{flex:none;margin-block-end:calc(var(--_m3e-top-app-bar-title-bottom-padding) * -1);opacity:var(--_m3e-top-app-bar-expanded-title-opacity, 1);translate:0 var(--_m3e-top-app-bar-offset)}.m3e-top-app-bar__expanded>.m3e-top-app-bar__headline>:last-child:after{content:"";display:inline-block;vertical-align:calc(var(--_m3e-top-app-bar-title-bottom-padding) * -1)}.m3e-top-app-bar.m3e-top-app-bar--center-aligned{grid-template-columns:1fr auto 1fr}.m3e-top-app-bar--center-aligned:before{content:"";grid-area:1 / 1;inline-size:var(--m3e-comp-top-app-bar-title-inset)}.m3e-top-app-bar--center-aligned .m3e-top-app-bar__headline{align-items:center;text-align:center}.m3e-top-app-bar--center-aligned>.m3e-top-app-bar__headline:first-child{margin-inline-start:0}.m3e-top-app-bar--center-aligned>.m3e-top-app-bar__expanded{padding-inline-end:0}.m3e-top-app-bar--center-aligned>.m3e-top-app-bar__expanded>.m3e-top-app-bar__headline{display:grid;grid-template-columns:minmax(calc(var(--m3e-comp-top-app-bar-title-inset) + var(--m3e-comp-top-app-bar-horizontal-padding)),1fr) auto minmax(calc(var(--m3e-comp-top-app-bar-horizontal-padding) * 2),1fr);justify-items:center;margin-inline-start:0;padding-inline:0}.m3e-top-app-bar--center-aligned>.m3e-top-app-bar__expanded>.m3e-top-app-bar__headline>*{grid-column:2}.m3e-top-app-bar:has(>.m3e-top-app-bar__expanded)>.m3e-top-app-bar__headline{opacity:var(--_m3e-top-app-bar-collapsed-title-opacity, 0)}:is(.m3e-top-app-bar--medium-flexible,.m3e-top-app-bar--two-rows) .m3e-top-app-bar__expanded .m3e-top-app-bar__title{font-family:var(--m3e-comp-app-bar-medium-flexible-title-font);font-size:var(--m3e-comp-app-bar-medium-flexible-title-size);font-weight:var(--m3e-comp-app-bar-medium-flexible-title-weight);line-height:var(--m3e-comp-app-bar-medium-flexible-title-line-height);letter-spacing:var(--m3e-comp-app-bar-medium-flexible-title-tracking)}:is(.m3e-top-app-bar--medium-flexible,.m3e-top-app-bar--two-rows) .m3e-top-app-bar__expanded .m3e-top-app-bar__subtitle{font-family:var(--m3e-comp-app-bar-medium-flexible-subtitle-font);font-size:var(--m3e-comp-app-bar-medium-flexible-subtitle-size);font-weight:var(--m3e-comp-app-bar-medium-flexible-subtitle-weight);line-height:var(--m3e-comp-app-bar-medium-flexible-subtitle-line-height);letter-spacing:var(--m3e-comp-app-bar-medium-flexible-subtitle-tracking)}.m3e-top-app-bar--large-flexible .m3e-top-app-bar__expanded .m3e-top-app-bar__title{font-family:var(--m3e-comp-app-bar-large-flexible-title-font);font-size:var(--m3e-comp-app-bar-large-flexible-title-size);font-weight:var(--m3e-comp-app-bar-large-flexible-title-weight);line-height:var(--m3e-comp-app-bar-large-flexible-title-line-height);letter-spacing:var(--m3e-comp-app-bar-large-flexible-title-tracking)}.m3e-top-app-bar--large-flexible .m3e-top-app-bar__expanded .m3e-top-app-bar__subtitle{font-family:var(--m3e-comp-app-bar-large-flexible-subtitle-font);font-size:var(--m3e-comp-app-bar-large-flexible-subtitle-size);font-weight:var(--m3e-comp-app-bar-large-flexible-subtitle-weight);line-height:var(--m3e-comp-app-bar-large-flexible-subtitle-line-height);letter-spacing:var(--m3e-comp-app-bar-large-flexible-subtitle-tracking)}@media(forced-colors:active){.m3e-top-app-bar{border-block-end:var(--m3e-comp-divider-thickness) solid CanvasText}}}
|
|
@@ -1 +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-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}}
|
|
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";@import"@kyralabs/m3e-tokens/components/badge.css";@import"@kyralabs/m3e-tokens/components/badge-defaults.css";@layer m3e.components{.m3e-badge{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;min-inline-size:var(--m3e-comp-badge-size);min-block-size:var(--m3e-comp-badge-size);margin:0;padding:0;border-radius:var(--m3e-comp-badge-shape);background-color:var(--m3e-comp-badge-container-color);color:var(--m3e-comp-badge-large-label-text-color);white-space:nowrap}.m3e-badge--large{min-inline-size:var(--m3e-comp-badge-large-size);min-block-size:var(--m3e-comp-badge-large-size);padding-inline:var(--m3e-comp-badge-large-padding-horizontal);border-radius:var(--m3e-comp-badge-large-shape);font-family:var(--m3e-comp-badge-large-label-text-font);font-size:var(--m3e-comp-badge-large-label-text-size);font-weight:var(--m3e-comp-badge-large-label-text-weight);line-height:var(--m3e-comp-badge-large-label-text-line-height);letter-spacing:var(--m3e-comp-badge-large-label-text-tracking)}.m3e-badge__label{position:absolute;inline-size:0;block-size:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.m3e-badged-box{--_m3e-badge-direction: 1;position:relative;display:inline-flex;align-items:center;justify-content:center}.m3e-badged-box:dir(rtl){--_m3e-badge-direction: -1}.m3e-badged-box>.m3e-badge{--_m3e-badge-offset-inline: var(--m3e-comp-badge-offset);--_m3e-badge-offset-block: var(--m3e-comp-badge-offset);position:absolute;inset-block-end:calc(100% - var(--_m3e-badge-offset-block));inset-inline-start:calc(100% - var(--_m3e-badge-offset-inline));translate:calc(min(0%,var(--_m3e-badged-box-bounds-end) + var(--_m3e-badge-offset-inline) - 100%) * var(--_m3e-badge-direction)) max(0%,100% - var(--_m3e-badge-offset-block) - var(--_m3e-badged-box-bounds-top))}.m3e-badged-box>.m3e-badge--large{--_m3e-badge-offset-inline: var(--m3e-comp-badge-large-offset-horizontal);--_m3e-badge-offset-block: var(--m3e-comp-badge-large-offset-vertical)}@media(forced-colors:active){.m3e-badge{forced-color-adjust:none;background-color:CanvasText;color:Canvas}}}@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__content>.m3e-badged-box{grid-area:pill}.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) :is(.m3e-navigation-item__icon,.m3e-badged-box){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) );--_m3e-badged-box-bounds-end: calc(var(--_m3e-wnr-pad) + var(--_pad-x));--_m3e-badged-box-bounds-top: var(--_icon-y);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,.m3e-badged-box){position:relative;flex:none}.m3e-wide-navigation-rail>.m3e-navigation-item>.m3e-navigation-item__content>:is(.m3e-navigation-item__icon,.m3e-badged-box){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-badged-box{order:-1}.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%;--_m3e-badged-box-bounds-end: calc(var(--_m3e-wnr-pad) + var(--_m3e-wnr-collapsed-pad-x));--_m3e-badged-box-bounds-top: var(--_m3e-wnr-collapsed-pad-x);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>:is(.m3e-navigation-item__icon,.m3e-badged-box){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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kyralabs/m3e-css",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"description": "Framework-free Material 3 Expressive component classes. No JavaScript.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"material-design",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"provenance": true
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@kyralabs/m3e-tokens": "^1.
|
|
43
|
+
"@kyralabs/m3e-tokens": "^1.8.0"
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"build": "node ../../tools/build-css.js"
|