@kyralabs/m3e-css 1.6.1 → 1.8.0

package/NOTICE

@@ -22,7 +22,7 @@ Copyright (C) The Android Open Source Project
 Licensed under the Apache License, Version 2.0
 
 --------------------------------------------------------------------------------
-AndroidX Compose Foundation (anchoredDraggable: the settle target and decay / tween choice)
+AndroidX Compose Foundation (anchoredDraggable: the settle target and decay / tween choice; snapping: the minimum fling velocity)
 https://android.googlesource.com/platform/frameworks/support/+/19991f2c0858aadfcb442ce02b2c8e4743c96898/compose/foundation/foundation/
 Copyright (C) The Android Open Source Project
 Licensed under the Apache License, Version 2.0
@@ -53,9 +53,11 @@ Copyright (C) The Android Open Source Project
 Licensed under the Apache License, Version 2.0
 
 --------------------------------------------------------------------------------
-Material Web (@material/web 2.5.0: elevation shadow values in @kyralabs/m3e-tokens)
+Material Web (@material/web 2.5.0: elevation shadow values and the dialog motion / window margin
+values in @kyralabs/m3e-tokens)
 https://github.com/material-components/material-web
 Copyright 2022 Google LLC
+Copyright 2023 Google LLC
 Licensed under the Apache License, Version 2.0
 
 --------------------------------------------------------------------------------

package/README.md

@@ -33,4 +33,93 @@ Canonical layouts (`layout.css`): `.m3e-layout` is a size container; inside it
 Import a single component with `@kyralabs/m3e-css/<component>.css` (for example `button.css`).
 Classes follow `.m3e-<component>`, `__<part>` and `--<modifier>`.
 
+## Components
+
+`index.css` imports every file below. Each also works on its own as
+`@kyralabs/m3e-css/<file>`. "Needs JS" marks components whose behavior (opening, positioning,
+dragging, springs) comes from `@kyralabs/m3e-elements` or `@kyralabs/m3e-react`; the CSS still
+draws them at rest. The pressed ripple on plain HTML needs `ripple.js` from m3e-elements (see its
+README).
+
+Primitives:
+
+- `surface.css`: `.m3e-surface`, tonal surface containers, elevation and shapes.
+- `icon.css`: `.m3e-icon`, a Material Symbols ligature (load a Material Symbols stylesheet too).
+- `state-layer.css`: `.m3e-state-layer`, the hover, focus, pressed and dragged overlays.
+- `focus-ring.css`: `.m3e-focus-ring`, the keyboard focus ring (`--inward` draws inside).
+
+Components:
+
+- `button.css`: `.m3e-button`, button and toggle button.
+- `icon-button.css`: `.m3e-icon-button`, icon button and icon toggle button.
+- `button-group.css`: `.m3e-button-group`, standard and connected button groups (needs JS for the
+  press width changes and overflow).
+- `split-button.css`: `.m3e-split-button`, a leading button and a trailing menu button (needs JS
+  for the menu).
+- `fab.css`: `.m3e-fab` and `.m3e-extended-fab`, FAB and extended FAB.
+- `fab-menu.css`: `.m3e-fab-menu`, a toggle FAB and its menu items (needs JS for focus and light
+  dismiss).
+- `loading-indicator.css`: `.m3e-loading-indicator`, the loading indicator (needs JS for the shape
+  morph; CSS alone rotates a fallback).
+- `linear-progress.css`: `.m3e-linear-progress`, linear progress, flat (wavy needs JS).
+- `circular-progress.css`: `.m3e-circular-progress`, circular progress, flat (wavy needs JS).
+- `floating-toolbar.css`: `.m3e-floating-toolbar`, floating toolbar, with or without a FAB.
+- `docked-toolbar.css`: `.m3e-docked-toolbar`, docked toolbar.
+- `top-app-bar.css`: `.m3e-top-app-bar`, small, center-aligned, flexible and two-rows top app
+  bars (scroll behaviors need JS).
+- `search.css`: `.m3e-search`, search bar and its expanded views (needs JS to expand).
+- `short-navigation-bar.css`: `.m3e-short-navigation-bar`, short navigation bar.
+- `wide-navigation-rail.css`: `.m3e-wide-navigation-rail` and `.m3e-modal-wide-navigation-rail`,
+  wide navigation rail (the modal rail needs JS).
+- `navigation-item.css`: `.m3e-navigation-item`, the destination inside a navigation bar or rail.
+- `navigation-drawer.css`: `.m3e-navigation-drawer`, permanent, dismissible and modal drawers
+  (opening needs JS).
+- `navigation-suite.css`: `.m3e-navigation-suite`, bar, rail or drawer by window size.
+- `tabs.css`: `.m3e-tabs` and `.m3e-tab`, primary and secondary tabs (switching needs JS).
+- `assist-chip.css`: `.m3e-assist-chip`, assist chip.
+- `filter-chip.css`: `.m3e-filter-chip`, filter chip (a native checkbox).
+- `input-chip.css`: `.m3e-input-chip`, input chip (needs JS for keyboard navigation and removal).
+- `suggestion-chip.css`: `.m3e-suggestion-chip`, suggestion chip.
+- `chip.css`: no class of its own; the base the four chip files import.
+- `chip-set.css`: `.m3e-chip-set`, a wrapping or single-line group of chips.
+- `card.css`: `.m3e-card`, filled, elevated and outlined cards.
+- `list.css`: `.m3e-list` and `.m3e-list-item`, lists and segmented list items.
+- `menu.css`: `.m3e-menu`, expressive and baseline menus (needs JS to open and position).
+- `checkbox.css`: `.m3e-checkbox`, checkbox.
+- `radio-button.css`: `.m3e-radio-button` and `.m3e-radio-group`, radio buttons.
+- `switch.css`: `.m3e-switch`, switch.
+- `slider.css`: `.m3e-slider`, slider and range slider (dragging needs JS).
+- `text-field.css`: `.m3e-text-field`, filled and outlined text fields.
+- `date-picker.css`: `.m3e-date-picker`, `.m3e-docked-date-picker` and
+  `.m3e-date-picker-dialog`, date pickers (needs JS).
+- `time-picker.css`: `.m3e-time-picker`, `.m3e-time-input`, `.m3e-time-scroll` and
+  `.m3e-time-picker-dialog`, time pickers (needs JS).
+- `dialog.css`: `.m3e-dialog`, alert, custom and full-screen dialogs (motion and focus need JS).
+- `bottom-sheet.css`: `.m3e-bottom-sheet`, standard and modal bottom sheets (needs JS to drag and
+  animate).
+- `side-sheet.css`: `.m3e-side-sheet`, standard and modal side sheets (motion and the modal need
+  JS).
+- `snackbar.css`: `.m3e-snackbar` and `.m3e-snackbar-host`, snackbar (the queue needs JS).
+- `tooltip.css`: `.m3e-tooltip`, plain and rich tooltips (showing them needs JS, or a popover).
+- `badge.css`: `.m3e-badge` and `.m3e-badged-box`, badge.
+- `divider.css`: `.m3e-divider`, horizontal and vertical dividers.
+- `carousel.css`: `.m3e-carousel`, carousel (keyline sizing needs JS; CSS alone snaps).
+- `pull-to-refresh.css`: `.m3e-pull-to-refresh`, pull to refresh (the pull needs JS).
+- `layout.css`: `.m3e-layout`, `.m3e-pane-scaffold` and `.m3e-feed`, canonical layouts (above).
+- `vertical-drag-handle.css`: `.m3e-vertical-drag-handle`, the pane scaffold's drag handle bar.
+
+Deprecated (D4), shipped until 2.0 with no new features:
+
+- `bottom-app-bar.css`: `.m3e-bottom-app-bar`, legacy bottom app bar; use `docked-toolbar.css`.
+- `navigation-bar.css`: `.m3e-navigation-bar`, legacy navigation bar; use
+  `short-navigation-bar.css`.
+- `navigation-rail.css`: `.m3e-navigation-rail`, legacy navigation rail; use
+  `wide-navigation-rail.css`.
+- `segmented-button.css`: `.m3e-segmented-button`, segmented button; use the connected button
+  group (`.m3e-button-group--connected`).
+- In `fab.css`, `.m3e-fab--size-small`; use the baseline FAB. In `list.css`,
+  `.m3e-list-item--baseline` (the non-expressive list item); use the expressive list item.
+
+The components respect `prefers-reduced-motion` and `forced-colors`.
+
 Apache-2.0; see `LICENSE` and `NOTICE`.

package/dist/badge.css

@@ -0,0 +1 @@
+@import"@kyralabs/m3e-tokens/components/badge.css";@import"@kyralabs/m3e-tokens/components/badge-defaults.css";@layer m3e.components{.m3e-badge{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;min-inline-size:var(--m3e-comp-badge-size);min-block-size:var(--m3e-comp-badge-size);margin:0;padding:0;border-radius:var(--m3e-comp-badge-shape);background-color:var(--m3e-comp-badge-container-color);color:var(--m3e-comp-badge-large-label-text-color);white-space:nowrap}.m3e-badge--large{min-inline-size:var(--m3e-comp-badge-large-size);min-block-size:var(--m3e-comp-badge-large-size);padding-inline:var(--m3e-comp-badge-large-padding-horizontal);border-radius:var(--m3e-comp-badge-large-shape);font-family:var(--m3e-comp-badge-large-label-text-font);font-size:var(--m3e-comp-badge-large-label-text-size);font-weight:var(--m3e-comp-badge-large-label-text-weight);line-height:var(--m3e-comp-badge-large-label-text-line-height);letter-spacing:var(--m3e-comp-badge-large-label-text-tracking)}.m3e-badge__label{position:absolute;inline-size:0;block-size:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.m3e-badged-box{--_m3e-badge-direction: 1;position:relative;display:inline-flex;align-items:center;justify-content:center}.m3e-badged-box:dir(rtl){--_m3e-badge-direction: -1}.m3e-badged-box>.m3e-badge{--_m3e-badge-offset-inline: var(--m3e-comp-badge-offset);--_m3e-badge-offset-block: var(--m3e-comp-badge-offset);position:absolute;inset-block-end:calc(100% - var(--_m3e-badge-offset-block));inset-inline-start:calc(100% - var(--_m3e-badge-offset-inline));translate:calc(min(0%,var(--_m3e-badged-box-bounds-end) + var(--_m3e-badge-offset-inline) - 100%) * var(--_m3e-badge-direction)) max(0%,100% - var(--_m3e-badge-offset-block) - var(--_m3e-badged-box-bounds-top))}.m3e-badged-box>.m3e-badge--large{--_m3e-badge-offset-inline: var(--m3e-comp-badge-large-offset-horizontal);--_m3e-badge-offset-block: var(--m3e-comp-badge-large-offset-vertical)}@media(forced-colors:active){.m3e-badge{forced-color-adjust:none;background-color:CanvasText;color:Canvas}}}

package/dist/bottom-sheet.css

@@ -0,0 +1 @@
+@import"@kyralabs/m3e-tokens/components/sheet-bottom.css";@import"@kyralabs/m3e-tokens/components/bottom-sheet-defaults.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@import"@kyralabs/m3e-tokens/components/divider.css";@layer m3e.components{.m3e-bottom-sheet{--_m3e-bs-container: var(--m3e-comp-sheet-bottom-docked-container-color);position:absolute;inset:0;z-index:1;overflow:clip;container-type:size;pointer-events:none}.m3e-bottom-sheet--modal{position:fixed;box-sizing:border-box;inline-size:100%;block-size:100%;max-inline-size:none;max-block-size:none;margin:0;padding:0;border:none;outline:none;background:transparent;pointer-events:auto}.m3e-bottom-sheet--modal:not([open]){display:none}.m3e-bottom-sheet--modal::backdrop{background:transparent}.m3e-bottom-sheet__scrim{position:absolute;inset:0;background-color:var(--m3e-comp-bottom-sheet-scrim-color);opacity:calc(var(--m3e-comp-bottom-sheet-scrim-opacity) * var(--_m3e-bs-scrim, 1))}.m3e-bottom-sheet__sheet{position:absolute;inset-inline:0;inset-block-end:0;display:flex;flex-direction:column;box-sizing:border-box;inline-size:100%;max-inline-size:var(--m3e-comp-bottom-sheet-max-width);max-block-size:100%;margin-inline:auto;border-start-start-radius:var(--m3e-comp-sheet-bottom-docked-container-shape-start-start);border-start-end-radius:var(--m3e-comp-sheet-bottom-docked-container-shape-start-end);border-end-end-radius:var(--m3e-comp-sheet-bottom-docked-container-shape-end-end);border-end-start-radius:var(--m3e-comp-sheet-bottom-docked-container-shape-end-start);background-color:var(--_m3e-bs-container);color:var(--m3e-sys-color-on-surface);pointer-events:auto;touch-action:none;translate:0 100%;visibility:hidden}.m3e-bottom-sheet--partially-expanded>.m3e-bottom-sheet__sheet{translate:0 max(0%,100% - 50cqh);visibility:visible}.m3e-bottom-sheet--expanded>.m3e-bottom-sheet__sheet{translate:0 0;visibility:visible}.m3e-bottom-sheet--peek.m3e-bottom-sheet--partially-expanded>.m3e-bottom-sheet__sheet{translate:0 max(0%,100% - var(--m3e-comp-bottom-sheet-peek-height))}.m3e-bottom-sheet[data-animating]>.m3e-bottom-sheet__sheet{translate:0 var(--_m3e-bs-translate, 0%);box-shadow:0 var(--_m3e-bs-stretch, 0%) 0 0 var(--_m3e-bs-container);visibility:visible}.m3e-bottom-sheet[data-dragging]{-webkit-user-select:none;user-select:none}.m3e-bottom-sheet__handle{position:relative;display:block;flex:none;box-sizing:content-box;inline-size:var(--m3e-comp-sheet-bottom-docked-drag-handle-width);block-size:var(--m3e-comp-sheet-bottom-docked-drag-handle-height);margin:0 auto;padding:var(--m3e-comp-bottom-sheet-drag-handle-padding-vertical) 0;border:none;background:transparent;color:var(--m3e-sys-color-on-surface);cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}.m3e-bottom-sheet__handle:after{position:absolute;inset-block:min(0%,calc((100% - var(--m3e-comp-minimum-interactive-component-size)) / 2));inset-inline:min(0%,calc((100% - var(--m3e-comp-minimum-interactive-component-size)) / 2));content:""}.m3e-bottom-sheet__handle-bar{display:block;block-size:100%;border-radius:var(--m3e-comp-bottom-sheet-drag-handle-shape);background-color:var(--m3e-comp-sheet-bottom-docked-drag-handle-color)}.m3e-bottom-sheet[data-dragging] .m3e-bottom-sheet__handle{cursor:grabbing}.m3e-bottom-sheet__content{flex:0 1 auto;min-block-size:0;overflow-y:auto;overscroll-behavior:contain;padding-block-end:env(safe-area-inset-bottom)}.m3e-bottom-sheet--expanded[data-scrolls]:not([data-animating]) .m3e-bottom-sheet__content{touch-action:pan-y}@media(forced-colors:active){.m3e-bottom-sheet__sheet{border:var(--m3e-comp-divider-thickness) solid CanvasText;border-block-end:none}.m3e-bottom-sheet__handle-bar{forced-color-adjust:none;background-color:CanvasText}.m3e-bottom-sheet__scrim{forced-color-adjust:none}}}@layer m3e.base{:where(m3e-bottom-sheet){display:contents}}

package/dist/carousel.css

@@ -0,0 +1 @@
+@import"@kyralabs/m3e-tokens/components/carousel-defaults.css";@layer m3e.components{.m3e-carousel{--_m3e-carousel-shape: var(--m3e-comp-carousel-item-shape);position:relative;display:block}.m3e-carousel__viewport{display:flex;align-items:center;gap:var(--m3e-comp-carousel-item-spacing);padding-inline:var(--m3e-comp-carousel-content-padding-start) var(--m3e-comp-carousel-content-padding-end);overflow:auto hidden;overscroll-behavior-x:contain;scroll-padding-inline:var(--m3e-comp-carousel-content-padding-start) var(--m3e-comp-carousel-content-padding-end);scroll-snap-type:x mandatory;scrollbar-width:none;outline:none}.m3e-carousel__viewport::-webkit-scrollbar{display:none}.m3e-carousel__item{position:relative;z-index:var(--_m3e-carousel-z, auto);flex:none;inline-size:var(--_m3e-carousel-item-size, var(--m3e-comp-carousel-item-width, 100%));outline:none;scroll-margin-inline-start:var(--_m3e-carousel-snap, 0);scroll-snap-align:start;scroll-snap-stop:always}.m3e-carousel__mask{display:block;box-sizing:border-box;inline-size:100%;margin:0;padding:0;border:0;border-radius:var(--_m3e-carousel-shape);background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;clip-path:inset(0 var(--_m3e-carousel-inset, 0) round var(--_m3e-carousel-shape));translate:var(--_m3e-carousel-translate, 0) 0}.m3e-carousel__mask>:where(img,video,picture,svg){display:block;inline-size:100%;object-fit:cover}.m3e-carousel__action{--m3e-comp-state-layer-color: var(--m3e-comp-carousel-item-state-layer-color);cursor:pointer;outline:none}.m3e-carousel__action:before{z-index:1}.m3e-carousel__item:after{content:"";position:absolute;inset-block:0;inset-inline:var(--_m3e-carousel-inset, 0);display:none;border-radius:var(--_m3e-carousel-shape);pointer-events:none;translate:var(--_m3e-carousel-translate, 0) 0}.m3e-carousel__item:is(:focus-visible,:has(>.m3e-carousel__action:focus-visible)):after{display:block}.m3e-carousel--full-screen{--_m3e-carousel-shape: var(--m3e-sys-shape-corner-none)}.m3e-carousel--full-screen>.m3e-carousel__viewport{flex-direction:column;align-items:stretch;gap:var(--m3e-comp-carousel-full-screen-item-spacing);block-size:100%;padding:0;overflow:hidden auto;overscroll-behavior:contain;scroll-padding:0;scroll-snap-type:y mandatory}.m3e-carousel--full-screen .m3e-carousel__item{inline-size:auto;block-size:100%;scroll-margin:0}.m3e-carousel--full-screen .m3e-carousel__mask{block-size:100%}.m3e-carousel--full-screen .m3e-carousel__mask>:where(img,video,picture,svg){block-size:100%}.m3e-carousel--uncontained>.m3e-carousel__viewport,.m3e-carousel[data-scrolling]>.m3e-carousel__viewport{scroll-snap-type:none}.m3e-carousel[data-keylines]>.m3e-carousel__viewport{padding-inline:0;scroll-padding-inline:0}@media(prefers-reduced-motion:reduce){.m3e-carousel__mask,.m3e-carousel__item:after{inset-inline:0;clip-path:inset(0 round var(--_m3e-carousel-shape));translate:none}}@media(forced-colors:active){.m3e-carousel__item:after{display:block;border:thin solid CanvasText}}}

package/dist/date-picker.css

@@ -0,0 +1 @@
+@import"@kyralabs/m3e-tokens/components/date-picker-modal.css";@import"@kyralabs/m3e-tokens/components/date-picker-defaults.css";@import"@kyralabs/m3e-tokens/components/divider.css";@import"@kyralabs/m3e-tokens/components/dialog.css";@layer m3e.components{.m3e-date-picker{--_m3e-date-picker-cell: var(--m3e-comp-date-picker-cell-size);--_m3e-date-picker-day: var(--m3e-comp-date-picker-modal-date-container-width);--_m3e-date-picker-rows: var(--m3e-comp-date-picker-calendar-rows);--_m3e-date-picker-padding: var(--m3e-comp-date-picker-horizontal-padding);position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-inline-size:var(--m3e-comp-date-picker-modal-container-width);background-color:var(--m3e-comp-date-picker-modal-container-color);color:var(--m3e-comp-date-picker-modal-date-label-text-color-unselected)}.m3e-date-picker__header{display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;border-block-end:var(--m3e-comp-divider-thickness) solid var(--m3e-comp-date-picker-divider-color)}.m3e-date-picker__header:has(>.m3e-date-picker__title){min-block-size:var(--m3e-comp-date-picker-modal-header-container-height)}.m3e-date-picker__title{padding-block-start:var(--m3e-comp-date-picker-title-padding-top);padding-inline:var(--m3e-comp-date-picker-title-padding-start) var(--m3e-comp-date-picker-title-padding-end);color:var(--m3e-comp-date-picker-modal-header-supporting-text-color);font-family:var(--m3e-comp-date-picker-modal-header-supporting-text-font);font-size:var(--m3e-comp-date-picker-modal-header-supporting-text-size);font-weight:var(--m3e-comp-date-picker-modal-header-supporting-text-weight);line-height:var(--m3e-comp-date-picker-modal-header-supporting-text-line-height);letter-spacing:var(--m3e-comp-date-picker-modal-header-supporting-text-tracking)}.m3e-date-picker__headline-row{display:flex;align-items:center;justify-content:space-between}.m3e-date-picker__headline-row:not(:has(>.m3e-date-picker__headline)){justify-content:flex-end}.m3e-date-picker__headline{display:flex;flex:1 1 0;gap:var(--m3e-comp-date-picker-range-headline-gap);align-items:center;min-inline-size:0;padding-block-end:var(--m3e-comp-date-picker-headline-padding-bottom);padding-inline:var(--m3e-comp-date-picker-headline-padding-start) var(--m3e-comp-date-picker-headline-padding-end);overflow:hidden;color:var(--m3e-comp-date-picker-modal-header-headline-color);font-family:var(--m3e-comp-date-picker-modal-header-headline-font);font-size:var(--m3e-comp-date-picker-modal-header-headline-size);font-weight:var(--m3e-comp-date-picker-modal-header-headline-weight);line-height:var(--m3e-comp-date-picker-modal-header-headline-line-height);letter-spacing:var(--m3e-comp-date-picker-modal-header-headline-tracking);white-space:nowrap}.m3e-date-picker__mode-toggle{flex:none;margin-block-end:var(--m3e-comp-date-picker-mode-toggle-padding-bottom);margin-inline-end:var(--m3e-comp-date-picker-mode-toggle-padding-end)}.m3e-date-picker__content{position:relative;overflow:clip}.m3e-date-picker__pane[hidden]{display:none}.m3e-date-picker__pane[data-leaving]{position:absolute;inset-block-start:0;inset-inline:0;pointer-events:none}.m3e-date-picker__content[data-switch]{animation:m3e-date-picker-size var(--m3e-comp-date-picker-mode-spatial-duration) var(--m3e-comp-date-picker-mode-spatial-easing)}.m3e-date-picker__content[data-switch]>[data-entering]{animation:m3e-date-picker-enter-below var(--m3e-comp-date-picker-mode-spatial-duration) var(--m3e-comp-date-picker-mode-spatial-easing),m3e-date-picker-fade-in var(--m3e-comp-date-picker-mode-fade-in-duration) var(--m3e-comp-date-picker-mode-fade-in-easing)}.m3e-date-picker__content[data-switch]>[data-leaving]{animation:m3e-date-picker-leave-up var(--m3e-comp-date-picker-mode-spatial-duration) var(--m3e-comp-date-picker-mode-spatial-easing) forwards,m3e-date-picker-fade-out var(--m3e-comp-date-picker-mode-fade-out-duration) var(--m3e-comp-date-picker-mode-fade-out-easing) forwards}.m3e-date-picker__content[data-switch=picker]>[data-entering]{animation-name:m3e-date-picker-enter-above,m3e-date-picker-fade-in}.m3e-date-picker__content[data-switch=picker]>[data-leaving]{animation-name:m3e-date-picker-leave-down,m3e-date-picker-fade-out}.m3e-date-picker--range>.m3e-date-picker__content[data-switch]{animation:none}.m3e-date-picker--range>.m3e-date-picker__content[data-switch]>[data-entering]{animation:m3e-date-picker-fade-in var(--m3e-comp-date-picker-range-mode-duration) var(--m3e-comp-date-picker-range-mode-easing)}.m3e-date-picker--range>.m3e-date-picker__content[data-switch]>[data-leaving]{animation:m3e-date-picker-fade-out var(--m3e-comp-date-picker-range-mode-duration) var(--m3e-comp-date-picker-range-mode-easing) forwards}.m3e-date-picker__nav{display:flex;align-items:center;justify-content:space-between;block-size:var(--m3e-comp-date-picker-month-year-height);padding-inline:var(--_m3e-date-picker-padding);color:var(--m3e-comp-date-picker-navigation-color)}.m3e-date-picker__arrows{display:flex}.m3e-date-picker[data-years] .m3e-date-picker__arrows{visibility:hidden}.m3e-date-picker__arrows .m3e-icon-button{flex:none;margin-inline:max(0%,calc((var(--m3e-comp-minimum-interactive-component-size) - var(--_m3e-icon-button-width)) / 2));color:inherit}.m3e-date-picker__arrows :where(.m3e-icon:dir(rtl)){transform:scaleX(-1)}.m3e-date-picker__year-button.m3e-button{--_m3e-button-content: var(--m3e-comp-date-picker-navigation-color);--_m3e-button-shape: var(--m3e-sys-shape-corner-full);gap:var(--m3e-comp-date-picker-year-button-icon-gap);min-block-size:var(--m3e-comp-date-picker-year-button-height);padding-block:var(--m3e-comp-date-picker-year-button-padding-block);padding-inline:var(--m3e-comp-date-picker-year-button-padding-inline)}.m3e-date-picker__year-button:where([aria-expanded=true]) .m3e-icon{transform:rotate(180deg)}.m3e-date-picker__body{position:relative;padding-inline:var(--_m3e-date-picker-padding)}.m3e-date-picker__weekdays,.m3e-date-picker__week{position:relative;display:flex;align-items:center;justify-content:space-evenly;block-size:var(--_m3e-date-picker-cell)}.m3e-date-picker__weekday{display:flex;align-items:center;justify-content:center;inline-size:var(--_m3e-date-picker-cell);block-size:var(--_m3e-date-picker-cell);color:var(--m3e-comp-date-picker-modal-weekdays-label-text-color);font-family:var(--m3e-comp-date-picker-modal-weekdays-label-text-font);font-size:var(--m3e-comp-date-picker-modal-weekdays-label-text-size);font-weight:var(--m3e-comp-date-picker-modal-weekdays-label-text-weight);line-height:var(--m3e-comp-date-picker-modal-weekdays-label-text-line-height);letter-spacing:var(--m3e-comp-date-picker-modal-weekdays-label-text-tracking);text-align:center}.m3e-date-picker__viewport{position:relative;block-size:calc(var(--_m3e-date-picker-cell) * var(--_m3e-date-picker-rows));overflow:hidden;touch-action:pan-y pinch-zoom}.m3e-date-picker__month{position:absolute;inset:0}.m3e-date-picker__day{--_m3e-date-picker-day-label: var( --m3e-comp-date-picker-modal-date-label-text-color-unselected );--_m3e-date-picker-day-container: transparent;--m3e-comp-state-layer-color: var(--m3e-comp-date-picker-date-state-layer-color);position:relative;display:flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;inline-size:var(--m3e-comp-date-picker-modal-date-container-width);block-size:var(--m3e-comp-date-picker-modal-date-container-height);margin-inline:calc((var(--_m3e-date-picker-cell) - var(--_m3e-date-picker-day)) / 2);border-radius:var(--m3e-comp-date-picker-modal-date-container-shape);background-color:var(--_m3e-date-picker-day-container);color:var(--_m3e-date-picker-day-label);font-family:var(--m3e-comp-date-picker-modal-date-label-text-font);font-size:var(--m3e-comp-date-picker-modal-date-label-text-size);font-weight:var(--m3e-comp-date-picker-modal-date-label-text-weight);line-height:var(--m3e-comp-date-picker-modal-date-label-text-line-height);letter-spacing:var(--m3e-comp-date-picker-modal-date-label-text-tracking);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color var(--m3e-comp-date-picker-day-color-duration) var(--m3e-comp-date-picker-day-color-easing),background-color var(--m3e-comp-date-picker-day-color-duration) var(--m3e-comp-date-picker-day-color-easing)}.m3e-date-picker__day:after{content:"";position:absolute;inset:calc((var(--_m3e-date-picker-day) - var(--_m3e-date-picker-cell)) / 2)}.m3e-date-picker__day:empty{visibility:hidden}.m3e-date-picker__day[aria-current=date]{--_m3e-date-picker-day-label: var(--m3e-comp-date-picker-modal-date-today-label-text-color);--m3e-comp-state-layer-color: var(--m3e-comp-date-picker-date-today-state-layer-color);border:var(--m3e-comp-date-picker-modal-date-today-container-outline-width) solid var(--m3e-comp-date-picker-modal-date-today-container-outline-color)}.m3e-date-picker__day[aria-current=date]:not([aria-selected=true]):after{inset:calc((var(--_m3e-date-picker-day) - var(--_m3e-date-picker-cell)) / 2 - var(--m3e-comp-date-picker-modal-date-today-container-outline-width))}.m3e-date-picker__day[data-in-range]{--_m3e-date-picker-day-label: var( --m3e-comp-date-picker-modal-selection-date-in-range-label-text-color );--m3e-comp-state-layer-color: var(--m3e-comp-date-picker-date-in-range-state-layer-color);transition:none}.m3e-date-picker__day[aria-selected=true]{--_m3e-date-picker-day-label: var(--m3e-comp-date-picker-modal-date-label-text-color-selected);--_m3e-date-picker-day-container: var( --m3e-comp-date-picker-modal-date-container-color-selected );--m3e-comp-state-layer-color: var(--m3e-comp-date-picker-date-selected-state-layer-color);border:none}.m3e-date-picker__day[data-end]:not([data-start]){transition:color var(--m3e-comp-date-picker-day-color-duration) var(--m3e-comp-date-picker-day-color-easing)}.m3e-date-picker__day[aria-disabled=true]{color:color-mix(in srgb,var(--_m3e-date-picker-day-label) calc(var(--m3e-sys-state-disabled-alpha) * 100%),transparent);background-color:color-mix(in srgb,var(--_m3e-date-picker-day-container) calc(var(--m3e-sys-state-disabled-alpha) * 100%),transparent);cursor:default}.m3e-date-picker__day[data-outside]{color:color-mix(in srgb,var(--m3e-comp-date-picker-docked-outside-month-color) calc(var(--m3e-comp-date-picker-docked-outside-month-opacity) * 100%),transparent);cursor:default}.m3e-date-picker__years{position:absolute;inset-block-start:0;inset-inline:0;display:none;grid-template-columns:repeat(var(--m3e-comp-date-picker-years-in-row),auto);row-gap:var(--m3e-comp-date-picker-years-vertical-padding);place-content:start space-evenly;box-sizing:border-box;block-size:calc(var(--_m3e-date-picker-cell) * (var(--_m3e-date-picker-rows) + 1) - var(--m3e-comp-divider-thickness));padding-inline:var(--_m3e-date-picker-padding);overflow-y:auto;border-block-end:var(--m3e-comp-divider-thickness) solid var(--m3e-comp-date-picker-divider-color);background-color:var(--m3e-comp-date-picker-modal-container-color);scrollbar-width:thin}.m3e-date-picker__years:is([data-state=open],[data-state=closing]){display:grid}.m3e-date-picker__years[data-state=open]{animation:m3e-date-picker-years-expand var(--m3e-comp-date-picker-year-grid-duration) var(--m3e-comp-date-picker-year-grid-easing),m3e-date-picker-years-fade-in var(--m3e-comp-date-picker-year-grid-duration) var(--m3e-comp-date-picker-year-grid-easing)}.m3e-date-picker__years[data-state=closing]{animation:m3e-date-picker-years-expand var(--m3e-comp-date-picker-year-grid-duration) var(--m3e-comp-date-picker-year-grid-easing) reverse forwards,m3e-date-picker-years-fade-out var(--m3e-comp-date-picker-year-grid-fade-out-duration) var(--m3e-comp-date-picker-year-grid-fade-out-easing) forwards}.m3e-date-picker__year{--_m3e-date-picker-year-label: var( --m3e-comp-date-picker-modal-selection-year-label-text-color-unselected );--_m3e-date-picker-year-container: transparent;--m3e-comp-state-layer-color: var(--m3e-comp-date-picker-year-state-layer-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;inline-size:var(--m3e-comp-date-picker-modal-selection-year-container-width);block-size:var(--m3e-comp-date-picker-modal-selection-year-container-height);border-radius:var(--m3e-comp-date-picker-modal-selection-year-state-layer-shape);background-color:var(--_m3e-date-picker-year-container);color:var(--_m3e-date-picker-year-label);font-family:var(--m3e-comp-date-picker-modal-selection-year-label-text-font);font-size:var(--m3e-comp-date-picker-modal-selection-year-label-text-size);font-weight:var(--m3e-comp-date-picker-modal-selection-year-label-text-weight);line-height:var(--m3e-comp-date-picker-modal-selection-year-label-text-line-height);letter-spacing:var(--m3e-comp-date-picker-modal-selection-year-label-text-tracking);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color var(--m3e-comp-date-picker-day-color-duration) var(--m3e-comp-date-picker-day-color-easing),background-color var(--m3e-comp-date-picker-day-color-duration) var(--m3e-comp-date-picker-day-color-easing)}.m3e-date-picker__year:after{content:"";position:absolute;inset-block:calc((var(--m3e-comp-date-picker-modal-selection-year-container-height) - var(--m3e-comp-minimum-interactive-component-size)) / 2);inset-inline:0}.m3e-date-picker__year[aria-current=date]{--_m3e-date-picker-year-label: var(--m3e-comp-date-picker-current-year-color);border:var(--m3e-comp-date-picker-modal-date-today-container-outline-width) solid var(--m3e-comp-date-picker-modal-date-today-container-outline-color)}.m3e-date-picker__year[aria-current=date]:not([aria-selected=true]):after{inset-block:calc((var(--m3e-comp-date-picker-modal-selection-year-container-height) - var(--m3e-comp-minimum-interactive-component-size)) / 2 - var(--m3e-comp-date-picker-modal-date-today-container-outline-width))}.m3e-date-picker__year[aria-selected=true]{--_m3e-date-picker-year-label: var( --m3e-comp-date-picker-modal-selection-year-label-text-color-selected );--_m3e-date-picker-year-container: var( --m3e-comp-date-picker-modal-selection-year-container-color-selected );--m3e-comp-state-layer-color: var(--m3e-comp-date-picker-year-selected-state-layer-color);border:none}.m3e-date-picker__year[aria-disabled=true]{color:color-mix(in srgb,var(--_m3e-date-picker-year-label) calc(var(--m3e-sys-state-disabled-alpha) * 100%),transparent);background-color:color-mix(in srgb,var(--_m3e-date-picker-year-container) calc(var(--m3e-sys-state-disabled-alpha) * 100%),transparent);cursor:default}.m3e-date-picker__input{display:flex;gap:var(--m3e-comp-date-picker-range-input-gap);padding-block:var(--m3e-comp-date-picker-input-padding-top) var(--m3e-comp-date-picker-input-padding-bottom);padding-inline:var(--m3e-comp-date-picker-input-padding-start) var(--m3e-comp-date-picker-input-padding-end)}.m3e-date-picker__input>.m3e-text-field{flex:1 1 0;min-inline-size:0}.m3e-date-picker__input:has(.m3e-text-field__supporting){padding-block-end:calc(var(--m3e-comp-date-picker-input-padding-bottom) - var(--m3e-comp-text-field-supporting-top-padding))}.m3e-date-picker--range .m3e-date-picker__header:has(>.m3e-date-picker__title){min-block-size:calc(var(--m3e-comp-date-picker-modal-range-selection-header-container-height) - var(--m3e-comp-date-picker-range-header-height-offset))}.m3e-date-picker--range .m3e-date-picker__title{padding-block-start:0;padding-inline:var(--m3e-comp-date-picker-range-title-padding-start) var(--m3e-comp-date-picker-range-title-padding-end)}.m3e-date-picker--range .m3e-date-picker__headline{padding-block-end:var(--m3e-comp-date-picker-range-headline-padding-bottom);padding-inline:var(--m3e-comp-date-picker-range-headline-padding-start) var(--m3e-comp-date-picker-range-headline-padding-end);font-family:var(--m3e-comp-date-picker-modal-range-selection-header-headline-font);font-size:var(--m3e-comp-date-picker-modal-range-selection-header-headline-size);font-weight:var(--m3e-comp-date-picker-modal-range-selection-header-headline-weight);line-height:var(--m3e-comp-date-picker-modal-range-selection-header-headline-line-height);letter-spacing:var(--m3e-comp-date-picker-modal-range-selection-header-headline-tracking)}.m3e-date-picker--range :where(.m3e-date-picker__headline>span){flex:none}.m3e-date-picker--range :where(.m3e-date-picker__headline>span:last-child){flex:0 1 auto;min-inline-size:0;white-space:normal}.m3e-dialog--full-screen:has(.m3e-date-picker--range){--m3e-comp-full-screen-dialog-container-color: var( --m3e-comp-date-picker-modal-container-color );--m3e-comp-full-screen-dialog-header-container-color: var( --m3e-comp-date-picker-modal-container-color )}.m3e-dialog--full-screen .m3e-dialog__content:has(.m3e-date-picker--range){padding-inline:0}.m3e-date-picker--range{flex:1 1 auto;block-size:100%;min-block-size:0}.m3e-date-picker--range>.m3e-date-picker__content{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}.m3e-date-picker--range .m3e-date-picker__pane[data-pane=picker]:not([hidden]){display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;padding-inline:var(--_m3e-date-picker-padding)}.m3e-date-picker__scroller{position:relative;flex:1 1 0;min-block-size:calc(var(--_m3e-date-picker-cell) * var(--_m3e-date-picker-rows));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.m3e-date-picker__spacer{position:relative}.m3e-date-picker__range-month{position:absolute;inset-inline:0}.m3e-date-picker__subhead{padding-block:var(--m3e-comp-date-picker-month-subhead-padding-top) var(--m3e-comp-date-picker-month-subhead-padding-bottom);padding-inline-start:var(--m3e-comp-date-picker-month-subhead-padding-start);color:var(--m3e-comp-date-picker-modal-range-selection-month-subhead-color);font-family:var(--m3e-comp-date-picker-modal-range-selection-month-subhead-font);font-size:var(--m3e-comp-date-picker-modal-range-selection-month-subhead-size);font-weight:var(--m3e-comp-date-picker-modal-range-selection-month-subhead-weight);line-height:var(--m3e-comp-date-picker-modal-range-selection-month-subhead-line-height);letter-spacing:var(--m3e-comp-date-picker-modal-range-selection-month-subhead-tracking)}.m3e-date-picker__range-month>.m3e-date-picker__month{position:relative;block-size:calc(var(--_m3e-date-picker-cell) * var(--_m3e-date-picker-rows))}.m3e-date-picker__band{position:absolute;block-size:var(--m3e-comp-date-picker-modal-range-selection-active-indicator-container-height);background-color:var( --m3e-comp-date-picker-modal-range-selection-active-indicator-container-color );pointer-events:none}.m3e-date-picker--docked{--_m3e-date-picker-day: var(--m3e-comp-date-picker-modal-date-container-width);inline-size:var(--m3e-comp-date-picker-docked-container-width);min-inline-size:0;border-radius:var(--m3e-comp-date-picker-docked-container-shape);background-color:var(--m3e-comp-date-picker-docked-container-color);box-shadow:var(--m3e-comp-date-picker-docked-container-shadow)}.m3e-docked-date-picker{position:relative;display:inline-block}.m3e-docked-date-picker>.m3e-date-picker--docked{position:absolute;inset-block-start:100%;inset-inline-start:0;z-index:1}.m3e-docked-date-picker>.m3e-date-picker--docked[hidden]{display:none}.m3e-date-picker__docked-nav{display:flex;align-items:center;justify-content:space-between;block-size:var(--m3e-comp-date-picker-docked-header-height);padding-inline:var(--_m3e-date-picker-padding);color:var(--m3e-comp-date-picker-docked-menu-button-color)}.m3e-date-picker__docked-nav>span{display:flex;align-items:center}.m3e-date-picker__docked-nav .m3e-icon-button{color:inherit}.m3e-date-picker__docked-nav :where(.m3e-icon-button .m3e-icon:dir(rtl)){transform:scaleX(-1)}.m3e-date-picker__menu-button{--m3e-comp-state-layer-color: var(--m3e-comp-date-picker-docked-menu-button-color);position:relative;display:inline-flex;gap:var(--m3e-comp-date-picker-year-button-icon-gap);align-items:center;box-sizing:border-box;block-size:var(--m3e-comp-date-picker-docked-menu-button-height);margin:0;padding-block:0;padding-inline:var(--m3e-comp-date-picker-year-button-padding-inline) var(--m3e-comp-date-picker-year-button-padding-block);border:none;border-radius:var(--m3e-comp-date-picker-docked-menu-button-shape);background:none;color:var(--m3e-comp-date-picker-docked-menu-button-color);font-family:var(--m3e-comp-date-picker-docked-menu-button-label-font);font-size:var(--m3e-comp-date-picker-docked-menu-button-label-size);font-weight:var(--m3e-comp-date-picker-docked-menu-button-label-weight);line-height:var(--m3e-comp-date-picker-docked-menu-button-label-line-height);letter-spacing:var(--m3e-comp-date-picker-docked-menu-button-label-tracking);cursor:pointer}.m3e-date-picker__menu-button .m3e-icon{--m3e-comp-icon-size: var(--m3e-comp-date-picker-docked-menu-button-icon-size)}.m3e-date-picker__menu-button:where([aria-expanded=true]) .m3e-icon{transform:rotate(180deg)}.m3e-date-picker__menu-button:after{content:"";position:absolute;inset-block:calc((var(--m3e-comp-date-picker-docked-menu-button-height) - var(--m3e-comp-minimum-interactive-component-size)) / 2);inset-inline:0}.m3e-date-picker__menu-button:disabled,.m3e-date-picker__docked-nav .m3e-icon-button:disabled{color:color-mix(in srgb,currentcolor calc(var(--m3e-sys-state-disabled-alpha) * 100%),transparent);cursor:default}.m3e-date-picker--docked .m3e-date-picker__viewport{block-size:calc(var(--m3e-comp-date-picker-docked-date-container-size) * var(--_m3e-date-picker-rows))}.m3e-date-picker__menu{box-sizing:border-box;block-size:calc(var(--_m3e-date-picker-cell) * (var(--_m3e-date-picker-rows) + 1));margin:0;padding:0;overflow-y:auto;border-block-start:var(--m3e-comp-divider-thickness) solid var(--m3e-comp-date-picker-divider-color);list-style:none;scrollbar-width:thin}.m3e-date-picker__menu-item{--m3e-comp-state-layer-color: var(--m3e-comp-date-picker-docked-menu-item-color);position:relative;display:flex;gap:var(--m3e-sys-space-200);align-items:center;box-sizing:border-box;block-size:var(--m3e-comp-date-picker-docked-menu-item-height);padding-inline:calc(var(--m3e-sys-space-200) + var(--m3e-comp-date-picker-docked-menu-item-selected-icon-size) + var(--m3e-sys-space-200)) var(--m3e-sys-space-200);color:var(--m3e-comp-date-picker-docked-menu-item-color);font-family:var(--m3e-comp-date-picker-docked-menu-item-label-font);font-size:var(--m3e-comp-date-picker-docked-menu-item-label-size);font-weight:var(--m3e-comp-date-picker-docked-menu-item-label-weight);line-height:var(--m3e-comp-date-picker-docked-menu-item-label-line-height);letter-spacing:var(--m3e-comp-date-picker-docked-menu-item-label-tracking);cursor:pointer;-webkit-user-select:none;user-select:none}.m3e-date-picker__menu-item[aria-selected=true]{padding-inline-start:var(--m3e-sys-space-200);background-color:var(--m3e-comp-date-picker-docked-menu-item-selected-container-color)}.m3e-date-picker__menu-item>.m3e-icon{--m3e-comp-icon-size: var(--m3e-comp-date-picker-docked-menu-item-selected-icon-size);color:var(--m3e-comp-date-picker-docked-menu-item-selected-icon-color)}.m3e-date-picker-dialog{display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;inline-size:var(--m3e-comp-date-picker-modal-container-width);max-block-size:var(--m3e-comp-date-picker-modal-container-height);overflow:hidden;border-radius:var(--m3e-comp-date-picker-modal-container-shape);background-color:var(--m3e-comp-date-picker-modal-container-color);box-shadow:var(--m3e-comp-date-picker-dialog-container-shadow)}.m3e-date-picker-dialog__content{flex:0 1 auto;min-block-size:0;overflow-y:auto}.m3e-date-picker-dialog__actions{display:flex;flex-wrap:wrap;gap:var(--m3e-comp-date-picker-dialog-actions-gap);justify-content:flex-end;padding-block-end:var(--m3e-comp-date-picker-dialog-actions-padding-bottom);padding-inline-end:var(--m3e-comp-date-picker-dialog-actions-padding-end);color:var(--m3e-comp-dialog-action-label-text-color)}@media(forced-colors:active){.m3e-date-picker__day[aria-selected=true],.m3e-date-picker__year[aria-selected=true]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}.m3e-date-picker__band{border-block:var(--m3e-comp-divider-thickness) solid Highlight;background-color:transparent}.m3e-date-picker--docked,.m3e-date-picker-dialog{border:var(--m3e-comp-divider-thickness) solid CanvasText}.m3e-date-picker__menu-item[aria-selected=true]{outline:var(--m3e-comp-divider-thickness) solid Highlight}}}@keyframes m3e-date-picker-years-expand{0%{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}@keyframes m3e-date-picker-years-fade-in{0%{opacity:var(--m3e-comp-date-picker-year-grid-initial-alpha)}to{opacity:1}}@keyframes m3e-date-picker-years-fade-out{to{opacity:0}}@keyframes m3e-date-picker-size{0%{block-size:var(--_m3e-date-picker-from)}to{block-size:var(--_m3e-date-picker-to)}}@keyframes m3e-date-picker-enter-below{0%{transform:translateY(var(--_m3e-date-picker-to))}}@keyframes m3e-date-picker-enter-above{0%{transform:translateY(calc(var(--m3e-comp-date-picker-mode-parallax) * -1))}}@keyframes m3e-date-picker-leave-up{to{transform:translateY(calc(var(--m3e-comp-date-picker-mode-parallax) * -1))}}@keyframes m3e-date-picker-leave-down{to{transform:translateY(var(--_m3e-date-picker-from))}}@keyframes m3e-date-picker-fade-in{0%{opacity:0}}@keyframes m3e-date-picker-fade-out{to{opacity:0}}

package/dist/dialog.css

@@ -0,0 +1 @@
+@import"@kyralabs/m3e-tokens/components/dialog.css";@import"@kyralabs/m3e-tokens/components/dialog-defaults.css";@import"@kyralabs/m3e-tokens/components/scrim.css";@import"@kyralabs/m3e-tokens/components/button-defaults.css";@import"@kyralabs/m3e-tokens/components/divider.css";@layer m3e.components{.m3e-dialog{position:fixed;inset:0;box-sizing:border-box;inline-size:100%;block-size:100%;max-inline-size:none;max-block-size:none;margin:0;padding:var(--m3e-comp-dialog-window-margin);overflow:hidden;border:none;outline:none;background:transparent;color:var(--m3e-comp-dialog-supporting-text-color)}.m3e-dialog[open]{display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center}.m3e-dialog::backdrop{background:transparent}.m3e-dialog__scrim{position:fixed;inset:0;background-color:var(--m3e-comp-scrim-container-color);opacity:var(--m3e-comp-scrim-container-opacity)}.m3e-dialog__container{position:relative;z-index:0;display:flex;flex-direction:column;box-sizing:border-box;min-inline-size:min(var(--m3e-comp-dialog-container-min-width),100%);max-inline-size:min(var(--m3e-comp-dialog-container-max-width),100%);max-block-size:100%;padding:var(--m3e-comp-dialog-container-padding);border-radius:var(--m3e-comp-dialog-container-shape)}.m3e-dialog__container:before{position:absolute;z-index:-1;inset:0 0 auto;block-size:100%;border-radius:inherit;background-color:var(--_m3e-dialog-container, var(--m3e-comp-dialog-container-color));content:""}.m3e-dialog__icon{--m3e-comp-icon-size: var(--m3e-comp-dialog-icon-size);flex:none;align-self:center;margin-block-end:var(--m3e-comp-dialog-icon-padding-bottom);color:var(--m3e-comp-dialog-icon-color)}.m3e-dialog__headline{flex:none;align-self:flex-start;margin:0 0 var(--m3e-comp-dialog-headline-padding-bottom);color:var(--m3e-comp-dialog-headline-color);font-family:var(--m3e-comp-dialog-headline-font);font-size:var(--m3e-comp-dialog-headline-size);font-weight:var(--m3e-comp-dialog-headline-weight);line-height:var(--m3e-comp-dialog-headline-line-height);letter-spacing:var(--m3e-comp-dialog-headline-tracking);overflow-wrap:break-word}.m3e-dialog__icon~.m3e-dialog__headline{align-self:center}.m3e-dialog__content{flex:0 1 auto;min-block-size:0;overflow-y:auto;padding-block-end:var(--m3e-comp-dialog-supporting-text-padding-bottom);color:var(--m3e-comp-dialog-supporting-text-color);font-family:var(--m3e-comp-dialog-supporting-text-font);font-size:var(--m3e-comp-dialog-supporting-text-size);font-weight:var(--m3e-comp-dialog-supporting-text-weight);line-height:var(--m3e-comp-dialog-supporting-text-line-height);letter-spacing:var(--m3e-comp-dialog-supporting-text-tracking);overflow-wrap:break-word}.m3e-dialog__content>:first-child{margin-block-start:0}.m3e-dialog__content>:last-child{margin-block-end:0}.m3e-dialog__actions{--_m3e-dialog-button-inset: calc( ( var(--m3e-comp-minimum-interactive-component-size) - var(--m3e-comp-dialog-button-min-height) ) / 2 );display:flex;flex:none;flex-wrap:wrap-reverse;align-items:center;align-self:flex-end;justify-content:flex-end;gap:max(0%,calc(var(--m3e-comp-dialog-actions-cross-axis-spacing) - (var(--m3e-comp-minimum-interactive-component-size) - var(--m3e-comp-dialog-button-min-height)))) var(--m3e-comp-dialog-actions-main-axis-spacing);max-inline-size:100%;color:var(--m3e-comp-dialog-action-label-text-color);font-family:var(--m3e-comp-dialog-action-label-text-font);font-size:var(--m3e-comp-dialog-action-label-text-size);font-weight:var(--m3e-comp-dialog-action-label-text-weight);line-height:var(--m3e-comp-dialog-action-label-text-line-height);letter-spacing:var(--m3e-comp-dialog-action-label-text-tracking)}.m3e-dialog__actions>*{margin-block:var(--_m3e-dialog-button-inset)}.m3e-dialog--custom>.m3e-dialog__container{display:block;padding:0;border-radius:0}.m3e-dialog--custom>.m3e-dialog__container:before{content:none}.m3e-dialog__header{display:flex;flex:none;align-items:center;gap:var(--m3e-comp-full-screen-dialog-header-spacing);margin-block-end:var(--m3e-comp-dialog-headline-padding-bottom)}.m3e-dialog__header>.m3e-dialog__headline{align-self:center;min-inline-size:0;margin:0}.m3e-dialog__close{--m3e-comp-icon-size: var(--m3e-comp-full-screen-dialog-header-icon-size);flex:none;color:var(--m3e-comp-full-screen-dialog-header-icon-color)}@media(width<600px){.m3e-dialog--full-screen{padding:0}.m3e-dialog--full-screen>.m3e-dialog__container{--_m3e-dialog-container: var(--m3e-comp-full-screen-dialog-container-color);display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);place-self:stretch;column-gap:var(--m3e-comp-full-screen-dialog-header-spacing);min-inline-size:0;max-inline-size:none;padding:0;border-radius:var(--m3e-comp-full-screen-dialog-container-shape)}.m3e-dialog--full-screen .m3e-dialog__header{display:grid;grid-template-columns:subgrid;grid-area:1 / 1 / 2 / -1;min-block-size:var(--m3e-comp-full-screen-dialog-header-container-height);margin:0;background-color:var(--m3e-comp-full-screen-dialog-header-container-color);transition:background-color var(--m3e-sys-motion-spring-default-effects-duration) var(--m3e-sys-motion-spring-default-effects-easing)}.m3e-dialog--full-screen[data-scrolled] .m3e-dialog__header{background-color:var(--m3e-comp-full-screen-dialog-header-on-scroll-container-color)}.m3e-dialog--full-screen .m3e-dialog__close{grid-column:1;margin-inline-start:var(--m3e-comp-full-screen-dialog-header-spacing)}.m3e-dialog--full-screen .m3e-dialog__headline{grid-column:2;overflow:hidden;color:var(--m3e-comp-full-screen-dialog-header-headline-color);font-family:var(--m3e-comp-full-screen-dialog-header-headline-font);font-size:var(--m3e-comp-full-screen-dialog-header-headline-size);font-weight:var(--m3e-comp-full-screen-dialog-header-headline-weight);line-height:var(--m3e-comp-full-screen-dialog-header-headline-line-height);letter-spacing:var(--m3e-comp-full-screen-dialog-header-headline-tracking);text-overflow:ellipsis;white-space:nowrap}.m3e-dialog--full-screen .m3e-dialog__actions{z-index:1;grid-area:1 / 3;align-self:center;margin-inline-end:var(--m3e-comp-full-screen-dialog-header-spacing)}.m3e-dialog--full-screen .m3e-dialog__content{grid-area:2 / 1 / 3 / -1;padding:var(--m3e-comp-full-screen-dialog-padding)}}.m3e-dialog[data-motion=enter]>.m3e-dialog__scrim{animation:m3e-dialog-fade-in var(--m3e-comp-dialog-scrim-duration) var(--m3e-comp-dialog-scrim-easing) both}.m3e-dialog[data-motion=exit]>.m3e-dialog__scrim{animation:m3e-dialog-fade-out var(--m3e-comp-dialog-scrim-duration) var(--m3e-comp-dialog-scrim-easing) both}.m3e-dialog[data-motion=enter]>.m3e-dialog__container{animation:m3e-dialog-slide-in var(--m3e-comp-dialog-enter-duration) var(--m3e-comp-dialog-enter-easing) both}.m3e-dialog[data-motion=enter]>.m3e-dialog__container:before{animation:m3e-dialog-grow var(--m3e-comp-dialog-enter-duration) var(--m3e-comp-dialog-enter-easing) both,m3e-dialog-fade-in var(--m3e-comp-dialog-container-enter-fade-duration) var(--m3e-sys-motion-easing-linear) both}.m3e-dialog[data-motion=enter]>.m3e-dialog__container>:is(.m3e-dialog__icon,.m3e-dialog__headline,.m3e-dialog__header,.m3e-dialog__content){animation:m3e-dialog-fade-in var(--m3e-comp-dialog-content-enter-duration) var(--m3e-sys-motion-easing-linear) var(--m3e-comp-dialog-content-enter-delay) both}.m3e-dialog[data-motion=enter]>.m3e-dialog__container>.m3e-dialog__actions{animation:m3e-dialog-fade-in var(--m3e-comp-dialog-actions-enter-duration) var(--m3e-sys-motion-easing-linear) var(--m3e-comp-dialog-actions-enter-delay) both}.m3e-dialog[data-motion=exit]>.m3e-dialog__container{animation:m3e-dialog-slide-out var(--m3e-comp-dialog-exit-duration) var(--m3e-comp-dialog-exit-easing) both}.m3e-dialog[data-motion=exit]>.m3e-dialog__container:before{animation:m3e-dialog-shrink var(--m3e-comp-dialog-exit-duration) var(--m3e-comp-dialog-exit-easing) both,m3e-dialog-fade-out var(--m3e-comp-dialog-container-exit-fade-duration) var(--m3e-sys-motion-easing-linear) var(--m3e-comp-dialog-container-exit-fade-delay) both}.m3e-dialog[data-motion=exit]>.m3e-dialog__container>:is(.m3e-dialog__icon,.m3e-dialog__headline,.m3e-dialog__header,.m3e-dialog__content,.m3e-dialog__actions){animation:m3e-dialog-fade-out var(--m3e-comp-dialog-content-exit-duration) var(--m3e-sys-motion-easing-linear) both}.m3e-dialog--custom[data-motion=enter]>.m3e-dialog__container{animation:m3e-dialog-slide-in var(--m3e-comp-dialog-enter-duration) var(--m3e-comp-dialog-enter-easing) both,m3e-dialog-fade-in var(--m3e-comp-dialog-content-enter-duration) var(--m3e-sys-motion-easing-linear) var(--m3e-comp-dialog-content-enter-delay) both}.m3e-dialog--custom[data-motion=exit]>.m3e-dialog__container{animation:m3e-dialog-slide-out var(--m3e-comp-dialog-exit-duration) var(--m3e-comp-dialog-exit-easing) both,m3e-dialog-fade-out var(--m3e-comp-dialog-content-exit-duration) var(--m3e-sys-motion-easing-linear) both}@media(prefers-reduced-motion:reduce){.m3e-dialog[data-motion]>.m3e-dialog__container{animation:none}.m3e-dialog--custom[data-motion=enter]>.m3e-dialog__container{animation:m3e-dialog-fade-in var(--m3e-comp-dialog-content-enter-duration) var(--m3e-sys-motion-easing-linear) var(--m3e-comp-dialog-content-enter-delay) both}.m3e-dialog--custom[data-motion=exit]>.m3e-dialog__container{animation:m3e-dialog-fade-out var(--m3e-comp-dialog-content-exit-duration) var(--m3e-sys-motion-easing-linear) both}.m3e-dialog[data-motion=enter]>.m3e-dialog__container:before{animation:m3e-dialog-fade-in var(--m3e-comp-dialog-container-enter-fade-duration) var(--m3e-sys-motion-easing-linear) both}.m3e-dialog[data-motion=exit]>.m3e-dialog__container:before{animation:m3e-dialog-fade-out var(--m3e-comp-dialog-container-exit-fade-duration) var(--m3e-sys-motion-easing-linear) var(--m3e-comp-dialog-container-exit-fade-delay) both}}@media(forced-colors:active){.m3e-dialog__container{border:var(--m3e-comp-divider-thickness) solid CanvasText}.m3e-dialog--custom>.m3e-dialog__container{border:none}.m3e-dialog__header{border-block-end:var(--m3e-comp-divider-thickness) solid CanvasText}}@keyframes m3e-dialog-fade-in{0%{opacity:0}}@keyframes m3e-dialog-fade-out{to{opacity:0}}@keyframes m3e-dialog-slide-in{0%{translate:0 calc(var(--m3e-comp-dialog-slide-distance) * -1)}}@keyframes m3e-dialog-slide-out{to{translate:0 calc(var(--m3e-comp-dialog-slide-distance) * -1)}}@keyframes m3e-dialog-grow{0%{block-size:var(--m3e-comp-dialog-container-collapsed-height)}}@keyframes m3e-dialog-shrink{to{block-size:var(--m3e-comp-dialog-container-collapsed-height)}}}

package/dist/focus-ring.css

@@ -1 +1 @@
-@layer m3e.base{:where(.m3e-focus-ring,.m3e-button,.m3e-icon-button,.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-fab-menu__item,.m3e-pane-scaffold__drag-handle):focus-visible{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-card--interactive):has(.m3e-card__action:focus-visible){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-filter-chip):has(>.m3e-filter-chip__input:focus-visible){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-navigation-item:focus-visible .m3e-navigation-item__state){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-checkbox__input:focus-visible~.m3e-checkbox__state,.m3e-radio-button__input:focus-visible~.m3e-radio-button__state){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-switch__input:focus-visible~.m3e-switch__track){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-slider__input:focus-visible+.m3e-slider__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)}:where(.m3e-focus-ring--inward):focus-visible{outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-menu__item,.m3e-list-item--interactive,.m3e-navigation-drawer-item,.m3e-tab,.m3e-tab-panel,.m3e-pane-scaffold__pane):focus-visible{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-menu__item,.m3e-list-item--interactive,.m3e-navigation-drawer-item,.m3e-tab,.m3e-tab-panel,.m3e-pane-scaffold__pane):focus:not(:focus-visible){outline:none}:where(.m3e-search__field):has(.m3e-search__input:focus-visible),:where(.m3e-search__result)[data-focus-visible]{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-focus-ring,.m3e-button,.m3e-icon-button,.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-fab-menu__item,.m3e-pane-scaffold__drag-handle):focus:not(:focus-visible){outline:none}@media(forced-colors:active){:where(.m3e-focus-ring,.m3e-button,.m3e-icon-button,.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-fab-menu__item,.m3e-pane-scaffold__drag-handle):focus-visible,:where(.m3e-card--interactive):has(.m3e-card__action:focus-visible),:where(.m3e-filter-chip):has(>.m3e-filter-chip__input:focus-visible),:where(.m3e-navigation-item:focus-visible .m3e-navigation-item__state),:where(.m3e-checkbox__input:focus-visible~.m3e-checkbox__state),:where(.m3e-radio-button__input:focus-visible~.m3e-radio-button__state),:where(.m3e-switch__input:focus-visible~.m3e-switch__track),:where(.m3e-slider__input:focus-visible+.m3e-slider__handle),:where(.m3e-menu__item,.m3e-list-item--interactive,.m3e-navigation-drawer-item,.m3e-tab,.m3e-tab-panel,.m3e-pane-scaffold__pane):focus-visible,:where(.m3e-search__field):has(.m3e-search__input:focus-visible),:where(.m3e-search__result)[data-focus-visible]{outline-color:Highlight}}}
+@layer m3e.base{:where(.m3e-focus-ring,.m3e-button,.m3e-icon-button,.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-fab-menu__item,.m3e-pane-scaffold__drag-handle,.m3e-bottom-sheet__handle,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__field,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item):focus-visible{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-card--interactive):has(.m3e-card__action:focus-visible){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-filter-chip):has(>.m3e-filter-chip__input:focus-visible),:where(.m3e-segmented-button):has(>.m3e-segmented-button__input:focus-visible){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-navigation-item:focus-visible .m3e-navigation-item__state){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-checkbox__input:focus-visible~.m3e-checkbox__state,.m3e-radio-button__input:focus-visible~.m3e-radio-button__state){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-switch__input:focus-visible~.m3e-switch__track){outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-outer-offset)}:where(.m3e-slider__input:focus-visible+.m3e-slider__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)}:where(.m3e-carousel__item:focus-visible,.m3e-carousel__item:has(>.m3e-carousel__action:focus-visible)):after{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-focus-ring--inward):focus-visible{outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-menu__item,.m3e-list-item--interactive,.m3e-navigation-drawer-item,.m3e-tab,.m3e-tab-panel,.m3e-pane-scaffold__pane):focus-visible{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-menu__item,.m3e-list-item--interactive,.m3e-navigation-drawer-item,.m3e-tab,.m3e-tab-panel,.m3e-pane-scaffold__pane):focus:not(:focus-visible){outline:none}:where(.m3e-search__field):has(.m3e-search__input:focus-visible),:where(.m3e-search__result)[data-focus-visible]{outline:var(--m3e-sys-state-focus-indicator-thickness) solid var(--m3e-sys-color-secondary);outline-offset:var(--m3e-sys-state-focus-indicator-inner-offset)}:where(.m3e-focus-ring,.m3e-button,.m3e-icon-button,.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-fab-menu__item,.m3e-pane-scaffold__drag-handle,.m3e-bottom-sheet__handle,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__field,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item):focus:not(:focus-visible){outline:none}@media(forced-colors:active){:where(.m3e-focus-ring,.m3e-button,.m3e-icon-button,.m3e-assist-chip,.m3e-input-chip,.m3e-suggestion-chip,.m3e-fab,.m3e-extended-fab,.m3e-fab-menu__item,.m3e-pane-scaffold__drag-handle,.m3e-bottom-sheet__handle,.m3e-time-picker__selector,.m3e-time-picker__period-item,.m3e-time-picker__label,.m3e-time-scroll__field,.m3e-date-picker__day,.m3e-date-picker__year,.m3e-date-picker__menu-button,.m3e-date-picker__menu-item):focus-visible,:where(.m3e-card--interactive):has(.m3e-card__action:focus-visible),:where(.m3e-filter-chip):has(>.m3e-filter-chip__input:focus-visible),:where(.m3e-segmented-button):has(>.m3e-segmented-button__input:focus-visible),:where(.m3e-navigation-item:focus-visible .m3e-navigation-item__state),:where(.m3e-checkbox__input:focus-visible~.m3e-checkbox__state),:where(.m3e-radio-button__input:focus-visible~.m3e-radio-button__state),:where(.m3e-switch__input:focus-visible~.m3e-switch__track),:where(.m3e-slider__input:focus-visible+.m3e-slider__handle),:where(.m3e-menu__item,.m3e-list-item--interactive,.m3e-navigation-drawer-item,.m3e-tab,.m3e-tab-panel,.m3e-pane-scaffold__pane):focus-visible,:where(.m3e-search__field):has(.m3e-search__input:focus-visible),:where(.m3e-search__result)[data-focus-visible],:where(.m3e-carousel__item:focus-visible,.m3e-carousel__item:has(>.m3e-carousel__action:focus-visible)):after{outline-color:Highlight}}}