@kyralabs/m3e-css 1.7.0 → 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 +1 -1
- package/README.md +89 -0
- package/dist/date-picker.css +1 -0
- package/dist/focus-ring.css +1 -1
- package/dist/index.css +1 -1
- package/dist/slider.css +1 -1
- package/dist/state-layer.css +1 -1
- package/dist/time-picker.css +1 -0
- package/dist/top-app-bar.css +1 -1
- package/package.json +2 -2
package/dist/slider.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"@kyralabs/m3e-tokens/components/slider.css";@import"@kyralabs/m3e-tokens/components/slider-defaults.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@layer m3e.components{.m3e-slider{--_m3e-slider-thickness: var(--m3e-comp-slider-x-small-track-height);--_m3e-slider-thumb-length: var(--m3e-comp-slider-x-small-thumb-height);--_m3e-slider-corner: var(--m3e-comp-slider-x-small-track-corner-size);--_m3e-slider-icon-size: var(--m3e-comp-slider-medium-icon-size);--_m3e-slider-icon-padding: var(--m3e-comp-slider-medium-icon-padding);--_m3e-slider-shrink: 0;--_m3e-slider-steps: var(--m3e-comp-slider-steps, 0);--_m3e-slider-end: var(--m3e-comp-slider-value, 0);--_m3e-slider-start: var(--m3e-comp-slider-start-value, 0);--_m3e-slider-active: var(--m3e-comp-slider-track-color-active);--_m3e-slider-inactive: var(--m3e-comp-slider-track-color-inactive);--_m3e-slider-tick-active: var(--m3e-comp-slider-tick-color-active);--_m3e-slider-tick-inactive: var(--m3e-comp-slider-tick-color-inactive);--_m3e-slider-stop: var(--m3e-comp-slider-track-stop-indicator-color);--_m3e-slider-thumb: var(--m3e-comp-slider-thumb-color);--_m3e-slider-icon-active: var(--m3e-comp-slider-icon-color-active);--_m3e-slider-icon-inactive: var(--m3e-comp-slider-icon-color-inactive);position:relative;display:block;box-sizing:border-box;block-size:max(var(--m3e-comp-minimum-interactive-component-size),var(--_m3e-slider-thumb-length));-webkit-tap-highlight-color:transparent}.m3e-slider--size-s{--_m3e-slider-thickness: var(--m3e-comp-slider-small-track-height);--_m3e-slider-thumb-length: var(--m3e-comp-slider-small-thumb-height);--_m3e-slider-corner: var(--m3e-comp-slider-small-track-corner-size);--_m3e-slider-shrink: 1}.m3e-slider--size-m{--_m3e-slider-thickness: var(--m3e-comp-slider-medium-track-height);--_m3e-slider-thumb-length: var(--m3e-comp-slider-medium-thumb-height);--_m3e-slider-corner: var(--m3e-comp-slider-medium-track-corner-size);--_m3e-slider-icon-size: var(--m3e-comp-slider-medium-icon-size);--_m3e-slider-icon-padding: var(--m3e-comp-slider-medium-icon-padding);--_m3e-slider-shrink: 1}.m3e-slider--size-l{--_m3e-slider-thickness: var(--m3e-comp-slider-large-track-height);--_m3e-slider-thumb-length: var(--m3e-comp-slider-large-thumb-height);--_m3e-slider-corner: var(--m3e-comp-slider-large-track-corner-size);--_m3e-slider-icon-size: var(--m3e-comp-slider-large-icon-size);--_m3e-slider-icon-padding: var(--m3e-comp-slider-large-icon-padding);--_m3e-slider-shrink: 1}.m3e-slider--size-xl{--_m3e-slider-thickness: var(--m3e-comp-slider-x-large-track-height);--_m3e-slider-thumb-length: var(--m3e-comp-slider-x-large-thumb-height);--_m3e-slider-corner: var(--m3e-comp-slider-x-large-track-corner-size);--_m3e-slider-icon-size: var(--m3e-comp-slider-x-large-icon-size);--_m3e-slider-icon-padding: var(--m3e-comp-slider-x-large-icon-padding);--_m3e-slider-shrink: 1}.m3e-slider.m3e-slider--range{--_m3e-slider-shrink: 0}.m3e-slider.m3e-slider--centered{--_m3e-slider-shrink: 1}.m3e-slider__track{--_m3e-slider-length: 100cqi;--_m3e-slider-zero: calc(var(--_m3e-slider-length) * 0);--_m3e-slider-half: calc(var(--_m3e-slider-length) / 2);--_m3e-slider-gap: calc( var(--m3e-comp-slider-thumb-width) / 2 + var(--m3e-comp-slider-thumb-track-gap-size) );--_m3e-slider-inside: var(--m3e-comp-slider-track-inside-corner-size);--_m3e-slider-discrete: min(1, var(--_m3e-slider-steps));--_m3e-slider-thresholded: calc( 1 - var(--_m3e-slider-shrink) + var(--_m3e-slider-shrink) * var(--_m3e-slider-discrete) );--_m3e-slider-pos: calc( var(--_m3e-slider-end) * var(--_m3e-slider-length) + var(--_m3e-slider-discrete) * round(up, min(var(--_m3e-slider-end), 1 - var(--_m3e-slider-end)), 1) * var(--_m3e-slider-corner) * (1 - var(--_m3e-slider-end) - var(--_m3e-slider-end)) );--_m3e-slider-start-pos: calc( var(--_m3e-slider-start) * var(--_m3e-slider-length) + var(--_m3e-slider-discrete) * round(up, min(var(--_m3e-slider-start), 1 - var(--_m3e-slider-start)), 1) * var(--_m3e-slider-corner) * (1 - var(--_m3e-slider-start) - var(--_m3e-slider-start)) );--_m3e-slider-start-raw: var(--_m3e-slider-zero);--_m3e-slider-start-threshold: var(--_m3e-slider-zero);--_m3e-slider-active-from: var(--_m3e-slider-zero);--_m3e-slider-active-raw: calc(var(--_m3e-slider-pos) - var(--_m3e-slider-gap));--_m3e-slider-active-threshold: calc( var(--_m3e-slider-corner) * var(--_m3e-slider-thresholded) );--_m3e-slider-active-start-radius: var(--_m3e-slider-corner);--_m3e-slider-end-raw: calc( var(--_m3e-slider-length) - var(--_m3e-slider-pos) - var(--_m3e-slider-gap) );--_m3e-slider-end-threshold: calc(var(--_m3e-slider-corner) * var(--_m3e-slider-thresholded));--_m3e-slider-thumb-gap: var(--_m3e-slider-gap);--_m3e-slider-start-gap-centre: var(--_m3e-slider-zero);--_m3e-slider-start-gap: calc(var(--_m3e-slider-length) * -1);--_m3e-slider-centre-gap: calc(var(--_m3e-slider-length) * -1);position:absolute;inset-block:0;inset-inline:calc(var(--m3e-comp-slider-thumb-width) / 2);container-type:inline-size;touch-action:none}.m3e-slider--range>.m3e-slider__track{--_m3e-slider-start-raw: calc(var(--_m3e-slider-start-pos) - var(--_m3e-slider-gap));--_m3e-slider-start-threshold: calc(var(--_m3e-slider-corner) * var(--_m3e-slider-thresholded));--_m3e-slider-active-from: calc(var(--_m3e-slider-start-pos) + var(--_m3e-slider-gap));--_m3e-slider-active-raw: calc( var(--_m3e-slider-pos) - var(--_m3e-slider-start-pos) - var(--_m3e-slider-gap) - var(--_m3e-slider-gap) );--_m3e-slider-active-threshold: calc( var(--_m3e-slider-inside) * var(--_m3e-slider-thresholded) );--_m3e-slider-active-start-radius: var(--_m3e-slider-inside);--_m3e-slider-start-gap-centre: var(--_m3e-slider-start-pos);--_m3e-slider-start-gap: var(--_m3e-slider-gap)}.m3e-slider--centered>.m3e-slider__track{--_m3e-slider-after: round(up, max(0, var(--_m3e-slider-end) - .5 ), 1);--_m3e-slider-before: round(up, max(0, .5 - var(--_m3e-slider-end)), 1);--_m3e-slider-gap-to-start: calc( var(--m3e-comp-slider-thumb-width) * (1 - var(--_m3e-slider-after)) / 2 + var(--m3e-comp-slider-thumb-track-gap-size) );--_m3e-slider-gap-to-end: calc( var(--m3e-comp-slider-thumb-width) * (1 - var(--_m3e-slider-before)) / 2 + var(--m3e-comp-slider-thumb-track-gap-size) );--_m3e-slider-low: min(var(--_m3e-slider-pos), var(--_m3e-slider-half));--_m3e-slider-high: max(var(--_m3e-slider-pos), var(--_m3e-slider-half));--_m3e-slider-start-raw: calc(var(--_m3e-slider-low) - var(--_m3e-slider-gap-to-start));--_m3e-slider-start-threshold: calc(var(--_m3e-slider-corner) * var(--_m3e-slider-thresholded));--_m3e-slider-active-from: calc( var(--_m3e-slider-low) + var(--_m3e-slider-before) * var(--_m3e-slider-gap-to-start) );--_m3e-slider-active-raw: calc( var(--_m3e-slider-high) - var(--_m3e-slider-after) * var(--_m3e-slider-gap-to-end) - var(--_m3e-slider-active-from) );--_m3e-slider-active-threshold: calc( var(--_m3e-slider-inside) * var(--_m3e-slider-thresholded) );--_m3e-slider-active-start-radius: var(--_m3e-slider-inside);--_m3e-slider-end-raw: calc( var(--_m3e-slider-length) - var(--_m3e-slider-high) - var(--_m3e-slider-gap-to-end) );--_m3e-slider-thumb-gap: calc( var(--_m3e-slider-after) * var(--_m3e-slider-gap-to-end) + (1 - var(--_m3e-slider-after)) * var(--_m3e-slider-gap-to-start) );--_m3e-slider-centre-gap: calc( var(--_m3e-slider-after) * var(--_m3e-slider-gap-to-start) + (1 - var(--_m3e-slider-after)) * var(--_m3e-slider-gap-to-end) )}.m3e-slider__inactive-start,.m3e-slider__active,.m3e-slider__inactive-end{--_m3e-slider-size: min( max(var(--_m3e-slider-zero), var(--_m3e-slider-raw)), round( up, max(var(--_m3e-slider-zero), var(--_m3e-slider-raw) - var(--_m3e-slider-threshold)), var(--_m3e-slider-length) ) );position:absolute;inset-block:0;box-sizing:border-box;inline-size:var(--_m3e-slider-size);block-size:var(--_m3e-slider-thickness);margin-block:auto;background-color:var(--_m3e-slider-inactive);pointer-events:none}.m3e-slider__inactive-start{--_m3e-slider-raw: var(--_m3e-slider-start-raw);--_m3e-slider-threshold: var(--_m3e-slider-start-threshold);inset-inline-start:0;border-start-start-radius:var(--_m3e-slider-corner);border-end-start-radius:var(--_m3e-slider-corner);border-start-end-radius:var(--_m3e-slider-inside);border-end-end-radius:var(--_m3e-slider-inside)}.m3e-slider__active{--_m3e-slider-raw: var(--_m3e-slider-active-raw);--_m3e-slider-threshold: var(--_m3e-slider-active-threshold);inset-inline-start:var(--_m3e-slider-active-from);border-start-start-radius:var(--_m3e-slider-active-start-radius);border-end-start-radius:var(--_m3e-slider-active-start-radius);border-start-end-radius:var(--_m3e-slider-inside);border-end-end-radius:var(--_m3e-slider-inside);background-color:var(--_m3e-slider-active)}.m3e-slider__inactive-end{--_m3e-slider-raw: var(--_m3e-slider-end-raw);--_m3e-slider-threshold: var(--_m3e-slider-end-threshold);inset-inline-end:0;border-start-start-radius:var(--_m3e-slider-inside);border-end-start-radius:var(--_m3e-slider-inside);border-start-end-radius:var(--_m3e-slider-corner);border-end-end-radius:var(--_m3e-slider-corner)}.m3e-slider__inactive-start:after,.m3e-slider__inactive-end:after{--_m3e-slider-dot: min( var(--m3e-comp-slider-track-stop-indicator-size), round(up, var(--_m3e-slider-size), var(--_m3e-slider-length)) );content:"";position:absolute;inset-block:0;inline-size:var(--_m3e-slider-dot);block-size:var(--_m3e-slider-dot);margin-block:auto;border-radius:var(--m3e-comp-slider-stop-indicator-shape);background-color:var(--_m3e-slider-stop)}.m3e-slider__inactive-start:after{inset-inline-start:calc(var(--_m3e-slider-corner) - var(--_m3e-slider-dot) / 2)}.m3e-slider__inactive-end:after{inset-inline-end:calc(var(--_m3e-slider-corner) - var(--_m3e-slider-dot) / 2)}.m3e-slider__ticks{position:absolute;inset:0;pointer-events:none}.m3e-slider__tick{--_m3e-slider-spacing: calc( (var(--_m3e-slider-length) - var(--_m3e-slider-corner) - var(--_m3e-slider-corner)) / (var(--_m3e-slider-steps) + 1) );--_m3e-slider-at: calc( var(--_m3e-slider-corner) + var(--m3e-comp-slider-tick-index, 0) * var(--_m3e-slider-spacing) );--_m3e-slider-past-thumb: calc( max( var(--_m3e-slider-at) - var(--_m3e-slider-pos), var(--_m3e-slider-pos) - var(--_m3e-slider-at) ) - var(--_m3e-slider-thumb-gap) );--_m3e-slider-past-start: calc( max( var(--_m3e-slider-at) - var(--_m3e-slider-start-gap-centre), var(--_m3e-slider-start-gap-centre) - var(--_m3e-slider-at) ) - var(--_m3e-slider-start-gap) );--_m3e-slider-past-centre: calc( max( var(--_m3e-slider-at) - var(--_m3e-slider-half), var(--_m3e-slider-half) - var(--_m3e-slider-at) ) - var(--_m3e-slider-centre-gap) );--_m3e-slider-dot: min( var(--m3e-comp-slider-tick-size), round( up, max(var(--_m3e-slider-zero), var(--_m3e-slider-past-thumb)), var(--_m3e-slider-length) ), round( up, max(var(--_m3e-slider-zero), var(--_m3e-slider-past-start)), var(--_m3e-slider-length) ), round( up, max(var(--_m3e-slider-zero), var(--_m3e-slider-past-centre)), var(--_m3e-slider-length) ) );--_m3e-slider-on-active: min( round( up, max(var(--_m3e-slider-zero), var(--_m3e-slider-at) - var(--_m3e-slider-active-from)), var(--_m3e-slider-length) ), round( up, max( var(--_m3e-slider-zero), var(--_m3e-slider-active-from) + var(--_m3e-slider-active-raw) - var(--_m3e-slider-at) ), var(--_m3e-slider-length) ) );position:absolute;inset-block:0;inset-inline-start:var(--_m3e-slider-at);inline-size:var(--_m3e-slider-dot);block-size:var(--_m3e-slider-dot);margin-block:auto;margin-inline-start:calc(var(--_m3e-slider-dot) / 2 * -1);border-radius:var(--m3e-comp-slider-stop-indicator-shape);background:linear-gradient(var(--_m3e-slider-tick-active) var(--_m3e-slider-on-active),var(--_m3e-slider-tick-inactive) var(--_m3e-slider-on-active))}.m3e-slider__icon{--m3e-comp-icon-size: var(--_m3e-slider-icon-size);--_m3e-slider-icon-shown: min( var(--_m3e-slider-icon-size), round( up, max( var(--_m3e-slider-zero), var(--_m3e-slider-active-raw) - var(--_m3e-slider-icon-size) - var(--_m3e-slider-icon-padding) - var(--_m3e-slider-icon-padding) ), var(--_m3e-slider-length) ) );--_m3e-slider-icon-at: var(--_m3e-slider-icon-padding);position:absolute;inset-block:0;inset-inline-start:var(--_m3e-slider-icon-at);inline-size:var(--_m3e-slider-icon-shown);margin-block:auto;color:var(--_m3e-slider-icon-active);pointer-events:none}.m3e-slider__icon--inactive{--_m3e-slider-icon-shown: min( var(--_m3e-slider-icon-size), round( up, max( var(--_m3e-slider-zero), var(--_m3e-slider-icon-size) + var(--_m3e-slider-icon-padding) + var(--_m3e-slider-icon-padding) - var(--_m3e-slider-active-raw) ), var(--_m3e-slider-length) ) );--_m3e-slider-icon-at: calc( var(--_m3e-slider-pos) + var(--_m3e-slider-gap) + var(--_m3e-slider-icon-padding) );color:var(--_m3e-slider-icon-inactive)}.m3e-slider__icon:dir(rtl){inset-inline:auto var(--_m3e-slider-icon-at)}.m3e-slider__thumb{--_m3e-slider-at: var(--_m3e-slider-pos);position:absolute;inset-block:0;inset-inline-start:calc(var(--_m3e-slider-at) - var(--m3e-comp-slider-thumb-width) / 2);inline-size:var(--m3e-comp-slider-thumb-width);block-size:var(--_m3e-slider-thumb-length);margin-block:auto;cursor:pointer}.m3e-slider__thumb--start{--_m3e-slider-at: var(--_m3e-slider-start-pos)}.m3e-slider__input{appearance:none;position:absolute;inset:0;box-sizing:border-box;inline-size:auto;block-size:auto;margin:0;padding:0;border:0;background:none;opacity:0;pointer-events:none;outline:none}.m3e-slider__handle{position:absolute;inset:0;inline-size:var(--m3e-comp-slider-thumb-width);margin-inline:auto;border-radius:var(--m3e-comp-slider-handle-shape);background-color:var(--_m3e-slider-thumb)}.m3e-slider__value-indicator{position:absolute;inset-block-end:calc(100% + var(--m3e-comp-slider-value-indicator-active-bottom-space));inset-inline-start:50%;display:none;align-items:center;justify-content:center;box-sizing:border-box;inline-size:var(--m3e-comp-slider-value-indicator-container-width);block-size:var(--m3e-comp-slider-value-indicator-container-height);margin-inline-start:calc(var(--m3e-comp-slider-value-indicator-container-width) / 2 * -1);border-radius:var(--m3e-comp-slider-value-indicator-container-shape);background-color:var(--m3e-comp-slider-value-indicator-container-color);color:var(--m3e-comp-slider-value-indicator-label-text-color);font-family:var(--m3e-comp-slider-value-indicator-label-text-font);font-size:var(--m3e-comp-slider-value-indicator-label-text-size);font-weight:var(--m3e-comp-slider-value-indicator-label-text-weight);line-height:var(--m3e-comp-slider-value-indicator-label-text-line-height);letter-spacing:var(--m3e-comp-slider-value-indicator-label-text-tracking);white-space:nowrap;pointer-events:none}.m3e-slider--vertical{inline-size:max(var(--m3e-comp-minimum-interactive-component-size),var(--_m3e-slider-thumb-length));block-size:auto}.m3e-slider--vertical>.m3e-slider__track{--_m3e-slider-length: 100cqb;inset-block:calc(var(--m3e-comp-slider-thumb-width) / 2);inset-inline:0;container-type:size}.m3e-slider--vertical :is(.m3e-slider__inactive-start,.m3e-slider__active,.m3e-slider__inactive-end){inset-block:auto;inset-inline:0;inline-size:var(--_m3e-slider-thickness);block-size:var(--_m3e-slider-size);margin-block:0;margin-inline:auto}.m3e-slider--vertical .m3e-slider__inactive-start{inset-block-end:0;border-start-start-radius:var(--_m3e-slider-inside);border-start-end-radius:var(--_m3e-slider-inside);border-end-start-radius:var(--_m3e-slider-corner);border-end-end-radius:var(--_m3e-slider-corner)}.m3e-slider--vertical .m3e-slider__active{inset-block-end:var(--_m3e-slider-active-from);border-start-start-radius:var(--_m3e-slider-inside);border-start-end-radius:var(--_m3e-slider-inside);border-end-start-radius:var(--_m3e-slider-active-start-radius);border-end-end-radius:var(--_m3e-slider-active-start-radius)}.m3e-slider--vertical .m3e-slider__inactive-end{inset-block-start:0;border-start-start-radius:var(--_m3e-slider-corner);border-start-end-radius:var(--_m3e-slider-corner);border-end-start-radius:var(--_m3e-slider-inside);border-end-end-radius:var(--_m3e-slider-inside)}.m3e-slider--vertical :is(.m3e-slider__inactive-start,.m3e-slider__inactive-end):after{inset-block:auto;inset-inline:0;margin-block:0;margin-inline:auto}.m3e-slider--vertical .m3e-slider__inactive-start:after{inset-block-end:calc(var(--_m3e-slider-corner) - var(--_m3e-slider-dot) / 2)}.m3e-slider--vertical .m3e-slider__inactive-end:after{inset-block-start:calc(var(--_m3e-slider-corner) - var(--_m3e-slider-dot) / 2)}.m3e-slider--vertical .m3e-slider__tick{inset-block:auto;inset-block-end:var(--_m3e-slider-at);inset-inline:0;margin-block:0 calc(var(--_m3e-slider-dot) / 2 * -1);margin-inline:auto}.m3e-slider--vertical .m3e-slider__icon{inset-block:auto;inset-block-end:var(--_m3e-slider-icon-at);inset-inline:0;inline-size:var(--_m3e-slider-icon-size);block-size:var(--_m3e-slider-icon-shown);margin-block:0;margin-inline:auto}.m3e-slider--vertical .m3e-slider__thumb{inset-block:auto;inset-block-end:calc(var(--_m3e-slider-at) - var(--m3e-comp-slider-thumb-width) / 2);inset-inline:0;inline-size:var(--_m3e-slider-thumb-length);block-size:var(--m3e-comp-slider-thumb-width);margin-block:0;margin-inline:auto}.m3e-slider--vertical .m3e-slider__handle{inset:0;inline-size:auto;block-size:var(--m3e-comp-slider-thumb-width);margin:auto 0}.m3e-slider--vertical .m3e-slider__value-indicator{inset-block:50% auto;inset-inline:auto calc(100% + var(--m3e-comp-slider-value-indicator-active-bottom-space));margin-block-start:calc(var(--m3e-comp-slider-value-indicator-container-height) / 2 * -1);margin-inline-start:0}.m3e-slider:has(.m3e-slider__icon) .m3e-slider__inactive-end:after{display:none}.m3e-slider:not(:has(.m3e-slider__icon)) .m3e-slider__tick:last-child,.m3e-slider:is(.m3e-slider--range,.m3e-slider--centered) .m3e-slider__tick:first-child{display:none}.m3e-slider:is(.m3e-slider--range,.m3e-slider--centered) .m3e-slider__icon,.m3e-slider:not(.m3e-slider--size-m,.m3e-slider--size-l,.m3e-slider--size-xl) .m3e-slider__icon{display:none}.m3e-slider__thumb:is([data-dragging],:has(>.m3e-slider__input:focus-visible))>.m3e-slider__handle{inline-size:calc(var(--m3e-comp-slider-thumb-width) / 2)}.m3e-slider__thumb:is([data-dragging],:has(>.m3e-slider__input:focus-visible))>.m3e-slider__value-indicator{display:flex}.m3e-slider--vertical .m3e-slider__thumb:is([data-dragging],:has(>.m3e-slider__input:focus-visible))>.m3e-slider__handle{inline-size:auto;block-size:calc(var(--m3e-comp-slider-thumb-width) / 2)}.m3e-slider:has(.m3e-slider__input:disabled){--_m3e-slider-active: var(--m3e-comp-slider-track-color-active-disabled);--_m3e-slider-inactive: var(--m3e-comp-slider-track-color-inactive-disabled);--_m3e-slider-tick-active: var(--m3e-comp-slider-tick-color-active-disabled);--_m3e-slider-tick-inactive: var(--m3e-comp-slider-tick-color-inactive-disabled);--_m3e-slider-stop: var(--m3e-comp-slider-track-stop-indicator-color-disabled);--_m3e-slider-thumb: var(--m3e-comp-slider-thumb-color-disabled);--_m3e-slider-icon-active: var(--m3e-comp-slider-icon-color-active-disabled);--_m3e-slider-icon-inactive: var(--m3e-comp-slider-icon-color-inactive-disabled)}.m3e-slider:has(.m3e-slider__input:disabled) .m3e-slider__thumb{cursor:default}@media(forced-colors:active){.m3e-slider{--_m3e-slider-active: Highlight;--_m3e-slider-inactive: GrayText;--_m3e-slider-tick-active: HighlightText;--_m3e-slider-tick-inactive: CanvasText;--_m3e-slider-stop: CanvasText;--_m3e-slider-thumb: CanvasText;--_m3e-slider-icon-active: HighlightText;--_m3e-slider-icon-inactive: CanvasText}.m3e-slider:has(.m3e-slider__input:disabled){--_m3e-slider-active: GrayText;--_m3e-slider-inactive: GrayText;--_m3e-slider-tick-active: Canvas;--_m3e-slider-tick-inactive: Canvas;--_m3e-slider-stop: Canvas;--_m3e-slider-thumb: GrayText;--_m3e-slider-icon-active: Canvas;--_m3e-slider-icon-inactive: Canvas}.m3e-slider__track{forced-color-adjust:none}.m3e-slider__value-indicator{border:var(--m3e-sys-state-focus-indicator-thickness) solid CanvasText;background-color:Canvas;color:CanvasText}}}
|
|
1
|
+
@import"@kyralabs/m3e-tokens/components/slider.css";@import"@kyralabs/m3e-tokens/components/slider-defaults.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@import"@kyralabs/m3e-tokens/components/divider.css";@layer m3e.components{.m3e-slider{--_m3e-slider-thickness: var(--m3e-comp-slider-x-small-track-height);--_m3e-slider-thumb-length: var(--m3e-comp-slider-x-small-thumb-height);--_m3e-slider-corner: var(--m3e-comp-slider-x-small-track-corner-size);--_m3e-slider-icon-size: var(--m3e-comp-slider-medium-icon-size);--_m3e-slider-icon-padding: var(--m3e-comp-slider-medium-icon-padding);--_m3e-slider-shrink: 0;--_m3e-slider-steps: var(--m3e-comp-slider-steps, 0);--_m3e-slider-end: var(--m3e-comp-slider-value, 0);--_m3e-slider-start: var(--m3e-comp-slider-start-value, 0);--_m3e-slider-active: var(--m3e-comp-slider-track-color-active);--_m3e-slider-inactive: var(--m3e-comp-slider-track-color-inactive);--_m3e-slider-tick-active: var(--m3e-comp-slider-tick-color-active);--_m3e-slider-tick-inactive: var(--m3e-comp-slider-tick-color-inactive);--_m3e-slider-stop: var(--m3e-comp-slider-track-stop-indicator-color);--_m3e-slider-thumb: var(--m3e-comp-slider-thumb-color);--_m3e-slider-icon-active: var(--m3e-comp-slider-icon-color-active);--_m3e-slider-icon-inactive: var(--m3e-comp-slider-icon-color-inactive);position:relative;display:block;box-sizing:border-box;block-size:max(var(--m3e-comp-minimum-interactive-component-size),var(--_m3e-slider-thumb-length));-webkit-tap-highlight-color:transparent}.m3e-slider--size-s{--_m3e-slider-thickness: var(--m3e-comp-slider-small-track-height);--_m3e-slider-thumb-length: var(--m3e-comp-slider-small-thumb-height);--_m3e-slider-corner: var(--m3e-comp-slider-small-track-corner-size);--_m3e-slider-shrink: 1}.m3e-slider--size-m{--_m3e-slider-thickness: var(--m3e-comp-slider-medium-track-height);--_m3e-slider-thumb-length: var(--m3e-comp-slider-medium-thumb-height);--_m3e-slider-corner: var(--m3e-comp-slider-medium-track-corner-size);--_m3e-slider-icon-size: var(--m3e-comp-slider-medium-icon-size);--_m3e-slider-icon-padding: var(--m3e-comp-slider-medium-icon-padding);--_m3e-slider-shrink: 1}.m3e-slider--size-l{--_m3e-slider-thickness: var(--m3e-comp-slider-large-track-height);--_m3e-slider-thumb-length: var(--m3e-comp-slider-large-thumb-height);--_m3e-slider-corner: var(--m3e-comp-slider-large-track-corner-size);--_m3e-slider-icon-size: var(--m3e-comp-slider-large-icon-size);--_m3e-slider-icon-padding: var(--m3e-comp-slider-large-icon-padding);--_m3e-slider-shrink: 1}.m3e-slider--size-xl{--_m3e-slider-thickness: var(--m3e-comp-slider-x-large-track-height);--_m3e-slider-thumb-length: var(--m3e-comp-slider-x-large-thumb-height);--_m3e-slider-corner: var(--m3e-comp-slider-x-large-track-corner-size);--_m3e-slider-icon-size: var(--m3e-comp-slider-x-large-icon-size);--_m3e-slider-icon-padding: var(--m3e-comp-slider-x-large-icon-padding);--_m3e-slider-shrink: 1}.m3e-slider.m3e-slider--range{--_m3e-slider-shrink: 0}.m3e-slider.m3e-slider--centered{--_m3e-slider-shrink: 1}.m3e-slider__track{--_m3e-slider-length: 100cqi;--_m3e-slider-zero: calc(var(--_m3e-slider-length) * 0);--_m3e-slider-half: calc(var(--_m3e-slider-length) / 2);--_m3e-slider-gap: calc( var(--m3e-comp-slider-thumb-width) / 2 + var(--m3e-comp-slider-thumb-track-gap-size) );--_m3e-slider-inside: var(--m3e-comp-slider-track-inside-corner-size);--_m3e-slider-discrete: min(1, var(--_m3e-slider-steps));--_m3e-slider-thresholded: calc( 1 - var(--_m3e-slider-shrink) + var(--_m3e-slider-shrink) * var(--_m3e-slider-discrete) );--_m3e-slider-pos: calc( var(--_m3e-slider-end) * var(--_m3e-slider-length) + var(--_m3e-slider-discrete) * round(up, min(var(--_m3e-slider-end), 1 - var(--_m3e-slider-end)), 1) * var(--_m3e-slider-corner) * (1 - var(--_m3e-slider-end) - var(--_m3e-slider-end)) );--_m3e-slider-start-pos: calc( var(--_m3e-slider-start) * var(--_m3e-slider-length) + var(--_m3e-slider-discrete) * round(up, min(var(--_m3e-slider-start), 1 - var(--_m3e-slider-start)), 1) * var(--_m3e-slider-corner) * (1 - var(--_m3e-slider-start) - var(--_m3e-slider-start)) );--_m3e-slider-start-raw: var(--_m3e-slider-zero);--_m3e-slider-start-threshold: var(--_m3e-slider-zero);--_m3e-slider-active-from: var(--_m3e-slider-zero);--_m3e-slider-active-raw: calc(var(--_m3e-slider-pos) - var(--_m3e-slider-gap));--_m3e-slider-active-threshold: calc( var(--_m3e-slider-corner) * var(--_m3e-slider-thresholded) );--_m3e-slider-active-start-radius: var(--_m3e-slider-corner);--_m3e-slider-end-raw: calc( var(--_m3e-slider-length) - var(--_m3e-slider-pos) - var(--_m3e-slider-gap) );--_m3e-slider-end-threshold: calc(var(--_m3e-slider-corner) * var(--_m3e-slider-thresholded));--_m3e-slider-thumb-gap: var(--_m3e-slider-gap);--_m3e-slider-start-gap-centre: var(--_m3e-slider-zero);--_m3e-slider-start-gap: calc(var(--_m3e-slider-length) * -1);--_m3e-slider-centre-gap: calc(var(--_m3e-slider-length) * -1);position:absolute;inset-block:0;inset-inline:calc(var(--m3e-comp-slider-thumb-width) / 2);container-type:inline-size;touch-action:none}.m3e-slider--range>.m3e-slider__track{--_m3e-slider-start-raw: calc(var(--_m3e-slider-start-pos) - var(--_m3e-slider-gap));--_m3e-slider-start-threshold: calc(var(--_m3e-slider-corner) * var(--_m3e-slider-thresholded));--_m3e-slider-active-from: calc(var(--_m3e-slider-start-pos) + var(--_m3e-slider-gap));--_m3e-slider-active-raw: calc( var(--_m3e-slider-pos) - var(--_m3e-slider-start-pos) - var(--_m3e-slider-gap) - var(--_m3e-slider-gap) );--_m3e-slider-active-threshold: calc( var(--_m3e-slider-inside) * var(--_m3e-slider-thresholded) );--_m3e-slider-active-start-radius: var(--_m3e-slider-inside);--_m3e-slider-start-gap-centre: var(--_m3e-slider-start-pos);--_m3e-slider-start-gap: var(--_m3e-slider-gap)}.m3e-slider--centered>.m3e-slider__track{--_m3e-slider-after: round(up, max(0, var(--_m3e-slider-end) - .5 ), 1);--_m3e-slider-before: round(up, max(0, .5 - var(--_m3e-slider-end)), 1);--_m3e-slider-gap-to-start: calc( var(--m3e-comp-slider-thumb-width) * (1 - var(--_m3e-slider-after)) / 2 + var(--m3e-comp-slider-thumb-track-gap-size) );--_m3e-slider-gap-to-end: calc( var(--m3e-comp-slider-thumb-width) * (1 - var(--_m3e-slider-before)) / 2 + var(--m3e-comp-slider-thumb-track-gap-size) );--_m3e-slider-low: min(var(--_m3e-slider-pos), var(--_m3e-slider-half));--_m3e-slider-high: max(var(--_m3e-slider-pos), var(--_m3e-slider-half));--_m3e-slider-start-raw: calc(var(--_m3e-slider-low) - var(--_m3e-slider-gap-to-start));--_m3e-slider-start-threshold: calc(var(--_m3e-slider-corner) * var(--_m3e-slider-thresholded));--_m3e-slider-active-from: calc( var(--_m3e-slider-low) + var(--_m3e-slider-before) * var(--_m3e-slider-gap-to-start) );--_m3e-slider-active-raw: calc( var(--_m3e-slider-high) - var(--_m3e-slider-after) * var(--_m3e-slider-gap-to-end) - var(--_m3e-slider-active-from) );--_m3e-slider-active-threshold: calc( var(--_m3e-slider-inside) * var(--_m3e-slider-thresholded) );--_m3e-slider-active-start-radius: var(--_m3e-slider-inside);--_m3e-slider-end-raw: calc( var(--_m3e-slider-length) - var(--_m3e-slider-high) - var(--_m3e-slider-gap-to-end) );--_m3e-slider-thumb-gap: calc( var(--_m3e-slider-after) * var(--_m3e-slider-gap-to-end) + (1 - var(--_m3e-slider-after)) * var(--_m3e-slider-gap-to-start) );--_m3e-slider-centre-gap: calc( var(--_m3e-slider-after) * var(--_m3e-slider-gap-to-start) + (1 - var(--_m3e-slider-after)) * var(--_m3e-slider-gap-to-end) )}.m3e-slider__inactive-start,.m3e-slider__active,.m3e-slider__inactive-end{--_m3e-slider-size: min( max(var(--_m3e-slider-zero), var(--_m3e-slider-raw)), round( up, max(var(--_m3e-slider-zero), var(--_m3e-slider-raw) - var(--_m3e-slider-threshold)), var(--_m3e-slider-length) ) );position:absolute;inset-block:0;box-sizing:border-box;inline-size:var(--_m3e-slider-size);block-size:var(--_m3e-slider-thickness);margin-block:auto;background-color:var(--_m3e-slider-inactive);pointer-events:none}.m3e-slider__inactive-start{--_m3e-slider-raw: var(--_m3e-slider-start-raw);--_m3e-slider-threshold: var(--_m3e-slider-start-threshold);inset-inline-start:0;border-start-start-radius:var(--_m3e-slider-corner);border-end-start-radius:var(--_m3e-slider-corner);border-start-end-radius:var(--_m3e-slider-inside);border-end-end-radius:var(--_m3e-slider-inside)}.m3e-slider__active{--_m3e-slider-raw: var(--_m3e-slider-active-raw);--_m3e-slider-threshold: var(--_m3e-slider-active-threshold);inset-inline-start:var(--_m3e-slider-active-from);border-start-start-radius:var(--_m3e-slider-active-start-radius);border-end-start-radius:var(--_m3e-slider-active-start-radius);border-start-end-radius:var(--_m3e-slider-inside);border-end-end-radius:var(--_m3e-slider-inside);background-color:var(--_m3e-slider-active)}.m3e-slider__inactive-end{--_m3e-slider-raw: var(--_m3e-slider-end-raw);--_m3e-slider-threshold: var(--_m3e-slider-end-threshold);inset-inline-end:0;border-start-start-radius:var(--_m3e-slider-inside);border-end-start-radius:var(--_m3e-slider-inside);border-start-end-radius:var(--_m3e-slider-corner);border-end-end-radius:var(--_m3e-slider-corner)}.m3e-slider__inactive-start:after,.m3e-slider__inactive-end:after{--_m3e-slider-dot: min( var(--m3e-comp-slider-track-stop-indicator-size), round(up, var(--_m3e-slider-size), var(--_m3e-slider-length)) );content:"";position:absolute;inset-block:0;inline-size:var(--_m3e-slider-dot);block-size:var(--_m3e-slider-dot);margin-block:auto;border-radius:var(--m3e-comp-slider-stop-indicator-shape);background-color:var(--_m3e-slider-stop)}.m3e-slider__inactive-start:after{inset-inline-start:calc(var(--_m3e-slider-corner) - var(--_m3e-slider-dot) / 2)}.m3e-slider__inactive-end:after{inset-inline-end:calc(var(--_m3e-slider-corner) - var(--_m3e-slider-dot) / 2)}.m3e-slider__ticks{position:absolute;inset:0;pointer-events:none}.m3e-slider__tick{--_m3e-slider-spacing: calc( (var(--_m3e-slider-length) - var(--_m3e-slider-corner) - var(--_m3e-slider-corner)) / (var(--_m3e-slider-steps) + 1) );--_m3e-slider-at: calc( var(--_m3e-slider-corner) + var(--m3e-comp-slider-tick-index, 0) * var(--_m3e-slider-spacing) );--_m3e-slider-past-thumb: calc( max( var(--_m3e-slider-at) - var(--_m3e-slider-pos), var(--_m3e-slider-pos) - var(--_m3e-slider-at) ) - var(--_m3e-slider-thumb-gap) );--_m3e-slider-past-start: calc( max( var(--_m3e-slider-at) - var(--_m3e-slider-start-gap-centre), var(--_m3e-slider-start-gap-centre) - var(--_m3e-slider-at) ) - var(--_m3e-slider-start-gap) );--_m3e-slider-past-centre: calc( max( var(--_m3e-slider-at) - var(--_m3e-slider-half), var(--_m3e-slider-half) - var(--_m3e-slider-at) ) - var(--_m3e-slider-centre-gap) );--_m3e-slider-dot: min( var(--m3e-comp-slider-tick-size), round( up, max(var(--_m3e-slider-zero), var(--_m3e-slider-past-thumb)), var(--_m3e-slider-length) ), round( up, max(var(--_m3e-slider-zero), var(--_m3e-slider-past-start)), var(--_m3e-slider-length) ), round( up, max(var(--_m3e-slider-zero), var(--_m3e-slider-past-centre)), var(--_m3e-slider-length) ) );--_m3e-slider-on-active: min( round( up, max(var(--_m3e-slider-zero), var(--_m3e-slider-at) - var(--_m3e-slider-active-from)), var(--_m3e-slider-length) ), round( up, max( var(--_m3e-slider-zero), var(--_m3e-slider-active-from) + var(--_m3e-slider-active-raw) - var(--_m3e-slider-at) ), var(--_m3e-slider-length) ) );position:absolute;inset-block:0;inset-inline-start:var(--_m3e-slider-at);inline-size:var(--_m3e-slider-dot);block-size:var(--_m3e-slider-dot);margin-block:auto;margin-inline-start:calc(var(--_m3e-slider-dot) / 2 * -1);border-radius:var(--m3e-comp-slider-stop-indicator-shape);background:linear-gradient(var(--_m3e-slider-tick-active) var(--_m3e-slider-on-active),var(--_m3e-slider-tick-inactive) var(--_m3e-slider-on-active))}.m3e-slider__icon{--m3e-comp-icon-size: var(--_m3e-slider-icon-size);--_m3e-slider-icon-shown: min( var(--_m3e-slider-icon-size), round( up, max( var(--_m3e-slider-zero), var(--_m3e-slider-active-raw) - var(--_m3e-slider-icon-size) - var(--_m3e-slider-icon-padding) - var(--_m3e-slider-icon-padding) ), var(--_m3e-slider-length) ) );--_m3e-slider-icon-at: var(--_m3e-slider-icon-padding);position:absolute;inset-block:0;inset-inline-start:var(--_m3e-slider-icon-at);inline-size:var(--_m3e-slider-icon-shown);margin-block:auto;color:var(--_m3e-slider-icon-active);pointer-events:none}.m3e-slider__icon--inactive{--_m3e-slider-icon-shown: min( var(--_m3e-slider-icon-size), round( up, max( var(--_m3e-slider-zero), var(--_m3e-slider-icon-size) + var(--_m3e-slider-icon-padding) + var(--_m3e-slider-icon-padding) - var(--_m3e-slider-active-raw) ), var(--_m3e-slider-length) ) );--_m3e-slider-icon-at: calc( var(--_m3e-slider-pos) + var(--_m3e-slider-gap) + var(--_m3e-slider-icon-padding) );color:var(--_m3e-slider-icon-inactive)}.m3e-slider__icon:dir(rtl){inset-inline:auto var(--_m3e-slider-icon-at)}.m3e-slider__thumb{--_m3e-slider-at: var(--_m3e-slider-pos);position:absolute;inset-block:0;inset-inline-start:calc(var(--_m3e-slider-at) - var(--m3e-comp-slider-thumb-width) / 2);inline-size:var(--m3e-comp-slider-thumb-width);block-size:var(--_m3e-slider-thumb-length);margin-block:auto;cursor:pointer}.m3e-slider__thumb--start{--_m3e-slider-at: var(--_m3e-slider-start-pos)}.m3e-slider__input{appearance:none;position:absolute;inset:0;box-sizing:border-box;inline-size:auto;block-size:auto;margin:0;padding:0;border:0;background:none;opacity:0;pointer-events:none;outline:none}.m3e-slider__handle{position:absolute;inset:0;inline-size:var(--m3e-comp-slider-thumb-width);margin-inline:auto;border-radius:var(--m3e-comp-slider-handle-shape);background-color:var(--_m3e-slider-thumb)}.m3e-slider__value-indicator{position:absolute;inset-block-end:calc(100% + var(--m3e-comp-slider-value-indicator-active-bottom-space));inset-inline-start:50%;display:none;align-items:center;justify-content:center;box-sizing:border-box;inline-size:var(--m3e-comp-slider-value-indicator-container-width);block-size:var(--m3e-comp-slider-value-indicator-container-height);margin-inline-start:calc(var(--m3e-comp-slider-value-indicator-container-width) / 2 * -1);border-radius:var(--m3e-comp-slider-value-indicator-container-shape);background-color:var(--m3e-comp-slider-value-indicator-container-color);color:var(--m3e-comp-slider-value-indicator-label-text-color);font-family:var(--m3e-comp-slider-value-indicator-label-text-font);font-size:var(--m3e-comp-slider-value-indicator-label-text-size);font-weight:var(--m3e-comp-slider-value-indicator-label-text-weight);line-height:var(--m3e-comp-slider-value-indicator-label-text-line-height);letter-spacing:var(--m3e-comp-slider-value-indicator-label-text-tracking);white-space:nowrap;pointer-events:none}.m3e-slider--vertical{inline-size:max(var(--m3e-comp-minimum-interactive-component-size),var(--_m3e-slider-thumb-length));block-size:auto}.m3e-slider--vertical>.m3e-slider__track{--_m3e-slider-length: 100cqb;inset-block:calc(var(--m3e-comp-slider-thumb-width) / 2);inset-inline:0;container-type:size}.m3e-slider--vertical :is(.m3e-slider__inactive-start,.m3e-slider__active,.m3e-slider__inactive-end){inset-block:auto;inset-inline:0;inline-size:var(--_m3e-slider-thickness);block-size:var(--_m3e-slider-size);margin-block:0;margin-inline:auto}.m3e-slider--vertical .m3e-slider__inactive-start{inset-block-end:0;border-start-start-radius:var(--_m3e-slider-inside);border-start-end-radius:var(--_m3e-slider-inside);border-end-start-radius:var(--_m3e-slider-corner);border-end-end-radius:var(--_m3e-slider-corner)}.m3e-slider--vertical .m3e-slider__active{inset-block-end:var(--_m3e-slider-active-from);border-start-start-radius:var(--_m3e-slider-inside);border-start-end-radius:var(--_m3e-slider-inside);border-end-start-radius:var(--_m3e-slider-active-start-radius);border-end-end-radius:var(--_m3e-slider-active-start-radius)}.m3e-slider--vertical .m3e-slider__inactive-end{inset-block-start:0;border-start-start-radius:var(--_m3e-slider-corner);border-start-end-radius:var(--_m3e-slider-corner);border-end-start-radius:var(--_m3e-slider-inside);border-end-end-radius:var(--_m3e-slider-inside)}.m3e-slider--vertical :is(.m3e-slider__inactive-start,.m3e-slider__inactive-end):after{inset-block:auto;inset-inline:0;margin-block:0;margin-inline:auto}.m3e-slider--vertical .m3e-slider__inactive-start:after{inset-block-end:calc(var(--_m3e-slider-corner) - var(--_m3e-slider-dot) / 2)}.m3e-slider--vertical .m3e-slider__inactive-end:after{inset-block-start:calc(var(--_m3e-slider-corner) - var(--_m3e-slider-dot) / 2)}.m3e-slider--vertical .m3e-slider__tick{inset-block:auto;inset-block-end:var(--_m3e-slider-at);inset-inline:0;margin-block:0 calc(var(--_m3e-slider-dot) / 2 * -1);margin-inline:auto}.m3e-slider--vertical .m3e-slider__icon{inset-block:auto;inset-block-end:var(--_m3e-slider-icon-at);inset-inline:0;inline-size:var(--_m3e-slider-icon-size);block-size:var(--_m3e-slider-icon-shown);margin-block:0;margin-inline:auto}.m3e-slider--vertical .m3e-slider__thumb{inset-block:auto;inset-block-end:calc(var(--_m3e-slider-at) - var(--m3e-comp-slider-thumb-width) / 2);inset-inline:0;inline-size:var(--_m3e-slider-thumb-length);block-size:var(--m3e-comp-slider-thumb-width);margin-block:0;margin-inline:auto}.m3e-slider--vertical .m3e-slider__handle{inset:0;inline-size:auto;block-size:var(--m3e-comp-slider-thumb-width);margin:auto 0}.m3e-slider--vertical .m3e-slider__value-indicator{inset-block:50% auto;inset-inline:auto calc(100% + var(--m3e-comp-slider-value-indicator-active-bottom-space));margin-block-start:calc(var(--m3e-comp-slider-value-indicator-container-height) / 2 * -1);margin-inline-start:0}.m3e-slider:has(.m3e-slider__icon) .m3e-slider__inactive-end:after{display:none}.m3e-slider:not(:has(.m3e-slider__icon)) .m3e-slider__tick:last-child,.m3e-slider:is(.m3e-slider--range,.m3e-slider--centered) .m3e-slider__tick:first-child{display:none}.m3e-slider:is(.m3e-slider--range,.m3e-slider--centered) .m3e-slider__icon,.m3e-slider:not(.m3e-slider--size-m,.m3e-slider--size-l,.m3e-slider--size-xl) .m3e-slider__icon{display:none}.m3e-slider__thumb:is([data-dragging],:has(>.m3e-slider__input:focus-visible))>.m3e-slider__handle{inline-size:calc(var(--m3e-comp-slider-thumb-width) / 2)}.m3e-slider__thumb:is([data-dragging],:has(>.m3e-slider__input:focus-visible))>.m3e-slider__value-indicator{display:flex}.m3e-slider--vertical .m3e-slider__thumb:is([data-dragging],:has(>.m3e-slider__input:focus-visible))>.m3e-slider__handle{inline-size:auto;block-size:calc(var(--m3e-comp-slider-thumb-width) / 2)}.m3e-slider:has(.m3e-slider__input:disabled){--_m3e-slider-active: var(--m3e-comp-slider-track-color-active-disabled);--_m3e-slider-inactive: var(--m3e-comp-slider-track-color-inactive-disabled);--_m3e-slider-tick-active: var(--m3e-comp-slider-tick-color-active-disabled);--_m3e-slider-tick-inactive: var(--m3e-comp-slider-tick-color-inactive-disabled);--_m3e-slider-stop: var(--m3e-comp-slider-track-stop-indicator-color-disabled);--_m3e-slider-thumb: var(--m3e-comp-slider-thumb-color-disabled);--_m3e-slider-icon-active: var(--m3e-comp-slider-icon-color-active-disabled);--_m3e-slider-icon-inactive: var(--m3e-comp-slider-icon-color-inactive-disabled)}.m3e-slider:has(.m3e-slider__input:disabled) .m3e-slider__thumb{cursor:default}@media(forced-colors:active){.m3e-slider{--_m3e-slider-active: Highlight;--_m3e-slider-inactive: Canvas;--_m3e-slider-tick-active: HighlightText;--_m3e-slider-tick-inactive: CanvasText;--_m3e-slider-stop: CanvasText;--_m3e-slider-thumb: CanvasText;--_m3e-slider-icon-active: HighlightText;--_m3e-slider-icon-inactive: CanvasText}.m3e-slider:has(.m3e-slider__input:disabled){--_m3e-slider-active: GrayText;--_m3e-slider-inactive: GrayText;--_m3e-slider-tick-active: Canvas;--_m3e-slider-tick-inactive: Canvas;--_m3e-slider-stop: Canvas;--_m3e-slider-thumb: GrayText;--_m3e-slider-icon-active: Canvas;--_m3e-slider-icon-inactive: Canvas}.m3e-slider:not(:has(.m3e-slider__input:disabled)) :is(.m3e-slider__inactive-start,.m3e-slider__inactive-end){box-shadow:inset 0 0 0 var(--m3e-comp-divider-thickness) CanvasText}.m3e-slider__track{forced-color-adjust:none}.m3e-slider__value-indicator{border:var(--m3e-sys-state-focus-indicator-thickness) solid CanvasText;background-color:Canvas;color:CanvasText}}}
|
package/dist/state-layer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@property --_m3e-ripple-size{syntax: "<length-percentage>"; inherits: false; initial-value: 0%;}@keyframes m3e-ripple-grow{0%{--_m3e-ripple-size: 0%}}@layer m3e.base{:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-item__state,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-checkbox__state,.m3e-radio-button__state,.m3e-switch__state){position:relative;isolation:isolate}:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-item__state,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-checkbox__state,.m3e-radio-button__state,.m3e-switch__state):before{--_m3e-state-layer-opacity: 0;content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--m3e-comp-state-layer-color, currentcolor);opacity:var(--_m3e-state-layer-opacity);pointer-events:none;transition:opacity var(--m3e-sys-motion-spring-default-effects-duration) var(--m3e-sys-motion-spring-default-effects-easing)}@media(hover:hover){:where(.m3e-navigation-item:hover .m3e-navigation-item__state):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-hover-state-layer-opacity)}}:where(.m3e-navigation-item:focus-visible .m3e-navigation-item__state):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-navigation-item:active .m3e-navigation-item__state):before{opacity:var(--m3e-sys-state-pressed-state-layer-opacity)}:where(.m3e-navigation-item[aria-disabled=true] .m3e-navigation-item__state):before{display:none}@media(hover:hover){:where(.m3e-checkbox:hover .m3e-checkbox__state,.m3e-radio-button:hover .m3e-radio-button__state,.m3e-switch:hover .m3e-switch__state):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-hover-state-layer-opacity)}}:where(.m3e-checkbox__input:focus-visible~.m3e-checkbox__state,.m3e-radio-button__input:focus-visible~.m3e-radio-button__state,.m3e-switch__input:focus-visible~.m3e-switch__track .m3e-switch__state):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-checkbox:active .m3e-checkbox__state,.m3e-radio-button:active .m3e-radio-button__state,.m3e-switch:active .m3e-switch__state):before{opacity:var(--m3e-sys-state-pressed-state-layer-opacity)}:where(.m3e-checkbox__input:disabled~.m3e-checkbox__state,.m3e-radio-button__input:disabled~.m3e-radio-button__state,.m3e-switch__input:disabled~.m3e-switch__track .m3e-switch__state):before{display:none}@media(hover:hover){:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action):hover:before{--_m3e-state-layer-opacity: var(--m3e-sys-state-hover-state-layer-opacity)}}:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action):focus-visible:before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action)[data-dragged]:before{--_m3e-state-layer-opacity: var(--m3e-sys-state-dragged-state-layer-opacity)}:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action):active:before,:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-item__state,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-checkbox__state,.m3e-radio-button__state,.m3e-switch__state)[data-pressed]:before{opacity:var(--m3e-sys-state-pressed-state-layer-opacity)}:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action):is(:disabled,[aria-disabled=true]):before{display:none}:where(.m3e-card--interactive):has(.m3e-card__action:focus-visible):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-card--interactive):has(.m3e-card__action:active):before{opacity:var(--m3e-sys-state-pressed-state-layer-opacity)}:where(.m3e-card--interactive):has(.m3e-card__action[aria-disabled=true]):before{display:none}:where(.m3e-filter-chip):has(>.m3e-filter-chip__input:focus-visible):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-filter-chip):has(>.m3e-filter-chip__input:disabled):before{display:none}:where(.m3e-segmented-button):has(>.m3e-segmented-button__input:focus-visible):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-segmented-button):has(>.m3e-segmented-button__input:disabled):before{display:none}:where(.m3e-search__result)[data-focus-visible]:before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-item__state,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-checkbox__state,.m3e-radio-button__state,.m3e-switch__state)[data-ripple][data-pressed]:before{--_m3e-ripple-opacity: calc( var(--_m3e-state-layer-opacity) + var(--m3e-sys-state-pressed-state-layer-opacity) - var(--_m3e-state-layer-opacity) * var(--m3e-sys-state-pressed-state-layer-opacity) );--_m3e-ripple-size: var(--_m3e-ripple-radius, 100%);background:radial-gradient(circle at var(--_m3e-ripple-x, 50%) var(--_m3e-ripple-y, 50%),var(--m3e-comp-state-layer-color, currentcolor) var(--_m3e-ripple-size),color-mix(in srgb,var(--m3e-comp-state-layer-color, currentcolor) calc(var(--_m3e-state-layer-opacity) / var(--_m3e-ripple-opacity) * 100%),transparent) var(--_m3e-ripple-size));opacity:var(--_m3e-ripple-opacity);transition:none;animation:m3e-ripple-grow var(--m3e-sys-motion-spring-default-effects-duration) var(--m3e-sys-motion-spring-default-effects-easing) both}@media(forced-colors:active){:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-item__state,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-checkbox__state,.m3e-radio-button__state,.m3e-switch__state):before{display:none}}}
|
|
1
|
+
@property --_m3e-ripple-size{syntax: "<length-percentage>"; inherits: false; initial-value: 0%;}@keyframes m3e-ripple-grow{0%{--_m3e-ripple-size: 0%}}@layer m3e.base{:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-item__state,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__item,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item,.m3e-checkbox__state,.m3e-radio-button__state,.m3e-switch__state){position:relative;isolation:isolate}:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-item__state,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__item,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item,.m3e-checkbox__state,.m3e-radio-button__state,.m3e-switch__state):before{--_m3e-state-layer-opacity: 0;content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--m3e-comp-state-layer-color, currentcolor);opacity:var(--_m3e-state-layer-opacity);pointer-events:none;transition:opacity var(--m3e-sys-motion-spring-default-effects-duration) var(--m3e-sys-motion-spring-default-effects-easing)}@media(hover:hover){:where(.m3e-navigation-item:hover .m3e-navigation-item__state):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-hover-state-layer-opacity)}}:where(.m3e-navigation-item:focus-visible .m3e-navigation-item__state):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-navigation-item:active .m3e-navigation-item__state):before{opacity:var(--m3e-sys-state-pressed-state-layer-opacity)}:where(.m3e-navigation-item[aria-disabled=true] .m3e-navigation-item__state):before{display:none}@media(hover:hover){:where(.m3e-checkbox:hover .m3e-checkbox__state,.m3e-radio-button:hover .m3e-radio-button__state,.m3e-switch:hover .m3e-switch__state):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-hover-state-layer-opacity)}}:where(.m3e-checkbox__input:focus-visible~.m3e-checkbox__state,.m3e-radio-button__input:focus-visible~.m3e-radio-button__state,.m3e-switch__input:focus-visible~.m3e-switch__track .m3e-switch__state):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-checkbox:active .m3e-checkbox__state,.m3e-radio-button:active .m3e-radio-button__state,.m3e-switch:active .m3e-switch__state):before{opacity:var(--m3e-sys-state-pressed-state-layer-opacity)}:where(.m3e-checkbox__input:disabled~.m3e-checkbox__state,.m3e-radio-button__input:disabled~.m3e-radio-button__state,.m3e-switch__input:disabled~.m3e-switch__track .m3e-switch__state):before{display:none}@media(hover:hover){:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__item,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item):hover:before{--_m3e-state-layer-opacity: var(--m3e-sys-state-hover-state-layer-opacity)}}:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__item,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item):focus-visible:before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__item,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item)[data-dragged]:before{--_m3e-state-layer-opacity: var(--m3e-sys-state-dragged-state-layer-opacity)}:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__item,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item):active:before,:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-item__state,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__item,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item,.m3e-checkbox__state,.m3e-radio-button__state,.m3e-switch__state)[data-pressed]:before{opacity:var(--m3e-sys-state-pressed-state-layer-opacity)}:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__item,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item):is(:disabled,[aria-disabled=true]):before{display:none}:where(.m3e-card--interactive):has(.m3e-card__action:focus-visible):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-card--interactive):has(.m3e-card__action:active):before{opacity:var(--m3e-sys-state-pressed-state-layer-opacity)}:where(.m3e-card--interactive):has(.m3e-card__action[aria-disabled=true]):before{display:none}:where(.m3e-filter-chip):has(>.m3e-filter-chip__input:focus-visible):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-filter-chip):has(>.m3e-filter-chip__input:disabled):before{display:none}:where(.m3e-segmented-button):has(>.m3e-segmented-button__input:focus-visible):before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-segmented-button):has(>.m3e-segmented-button__input:disabled):before{display:none}:where(.m3e-search__result)[data-focus-visible]:before{--_m3e-state-layer-opacity: var(--m3e-sys-state-focus-state-layer-opacity)}:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-item__state,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__item,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item,.m3e-checkbox__state,.m3e-radio-button__state,.m3e-switch__state)[data-ripple][data-pressed]:before{--_m3e-ripple-opacity: calc( var(--_m3e-state-layer-opacity) + var(--m3e-sys-state-pressed-state-layer-opacity) - var(--_m3e-state-layer-opacity) * var(--m3e-sys-state-pressed-state-layer-opacity) );--_m3e-ripple-size: var(--_m3e-ripple-radius, 100%);background:radial-gradient(circle at var(--_m3e-ripple-x, 50%) var(--_m3e-ripple-y, 50%),var(--m3e-comp-state-layer-color, currentcolor) var(--_m3e-ripple-size),color-mix(in srgb,var(--m3e-comp-state-layer-color, currentcolor) calc(var(--_m3e-state-layer-opacity) / var(--_m3e-ripple-opacity) * 100%),transparent) var(--_m3e-ripple-size));opacity:var(--_m3e-ripple-opacity);transition:none;animation:m3e-ripple-grow var(--m3e-sys-motion-spring-default-effects-duration) var(--m3e-sys-motion-spring-default-effects-easing) both}@media(forced-colors:active){:where(.m3e-state-layer,.m3e-button,.m3e-icon-button,.m3e-card--interactive,.m3e-assist-chip,.m3e-filter-chip,.m3e-segmented-button,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-navigation-item__state,.m3e-navigation-drawer-item,.m3e-tab,.m3e-menu__item,.m3e-fab-menu__item,.m3e-search__result,.m3e-list-item--interactive,.m3e-bottom-sheet__handle,.m3e-carousel__action,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__item,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item,.m3e-checkbox__state,.m3e-radio-button__state,.m3e-switch__state):before{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/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}}}
|
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"
|