@kyralabs/m3e-css 1.7.0 → 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

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/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/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,.m3e-bottom-sheet__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),: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):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):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}}}
+@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}}}