material 3.2.1 → 3.2.2

package/README.md

@@ -91,13 +91,13 @@ What a bundler keeps, minified and gzipped (kB is 1,000 bytes), measured from th
 <!-- sizes -->
 | Import | gzip |
 |--------|-----:|
-| `createButton` from `material`, with code splitting: the initial chunks (the progress indicator loads on demand) | 7.4 kB |
-| `createButton`, without code splitting (the progress indicator included) | 13.7 kB |
-| `createButton`, `createTextField` and `createCheckbox`, without code splitting | 20.0 kB |
-| Everything the root exports (`export * from 'material'`), without code splitting | 127.1 kB |
+| `createButton` from `material`, with code splitting: the initial chunks (the progress indicator loads on demand) | 7.7 kB |
+| `createButton`, without code splitting (the progress indicator included) | 13.9 kB |
+| `createButton`, `createTextField` and `createCheckbox`, without code splitting | 20.2 kB |
+| Everything the root exports (`export * from 'material'`), without code splitting | 127.4 kB |
 | `material/styles/base` | 2.9 kB |
 | `material/styles/base` and `material/styles/button` | 5.2 kB |
-| `material/styles`, the full stylesheet | 62.8 kB |
+| `material/styles`, the full stylesheet | 63.5 kB |
 <!-- /sizes -->
 
 `material` publishes ESM only, so bundlers drop what you do not import. Each component's page on [md3.io/components](https://md3.io/components/) gives its size.

package/dist/components/carousel/features/scroll.js

@@ -26,6 +26,9 @@ export const withScroll = (config) => (component) => {
     const prefix = component.getClass("carousel");
     const snapClass = `${prefix}__snap`;
     element.classList.toggle(`${prefix}--snap`, snap);
+    const readRtl = () => !vertical && window.getComputedStyle?.(scroller).direction === "rtl";
+    let rtl = readRtl();
+    let sign = rtl ? -1 : 1;
     let lastWheel = -Infinity;
     let strategy = null;
     let count = 0;
@@ -33,7 +36,7 @@ export const withScroll = (config) => (component) => {
     let scrollOffsetAtStart = 0;
     let snapPositions = [];
     let currentIndex = Math.max(0, config.initialSlide ?? CAROUSEL_DEFAULTS.INITIAL_SLIDE);
-    const lastStyles = new WeakMap();
+    let lastStyles = new WeakMap();
     let pending = null;
     let pendingTimer = 0;
     const clearPending = () => {
@@ -45,18 +48,20 @@ export const withScroll = (config) => (component) => {
         window.clearTimeout(pendingTimer);
         pendingTimer = window.setTimeout(clearPending, 1000);
     };
-    const scrollPosition = () => (vertical ? scroller.scrollTop : scroller.scrollLeft);
+    const scrollPosition = () => {
+        if (readRtl() !== rtl)
+            rebuild();
+        return vertical ? scroller.scrollTop : scroller.scrollLeft * sign;
+    };
     const setScrollPosition = (value, smooth) => {
         const behavior = smooth && !reduceMotion?.matches ? "smooth" : "auto";
-        if (typeof scroller.scrollTo === "function") {
-            scroller.scrollTo(vertical ? { top: value, behavior } : { left: value, behavior });
-        }
-        else if (vertical) {
+        const physical = value * sign;
+        if (typeof scroller.scrollTo === "function")
+            scroller.scrollTo(vertical ? { top: value, behavior } : { left: physical, behavior });
+        else if (vertical)
             scroller.scrollTop = value;
-        }
-        else {
-            scroller.scrollLeft = value;
-        }
+        else
+            scroller.scrollLeft = physical;
     };
     const emitChange = () => {
         component.emit?.(CAROUSEL_EVENTS.CHANGE, { value: currentIndex });
@@ -86,6 +91,9 @@ export const withScroll = (config) => (component) => {
             : multiBrowseKeylines(size, preferred, gap, count, rules);
     };
     const build = () => {
+        rtl = readRtl();
+        sign = rtl ? -1 : 1;
+        lastStyles = new WeakMap();
         count = slideElements.length;
         containerSize = vertical ? scroller.clientHeight : scroller.clientWidth;
         currentIndex = count ? Math.min(currentIndex, count - 1) : 0;
@@ -112,13 +120,17 @@ export const withScroll = (config) => (component) => {
         snapPositions.forEach((snapPosition) => {
             const point = document.createElement("div");
             point.className = snapClass;
-            point.style[vertical ? "top" : "left"] = `${snapPosition}px`;
+            point.style[vertical ? "top" : rtl ? "right" : "left"] = `${snapPosition}px`;
+            if (rtl)
+                point.style.left = "auto";
             fragment.appendChild(point);
         });
         track.appendChild(fragment);
         slideElements.forEach((el) => {
             el.style[vertical ? "height" : "width"] = `${strategy.itemSize}px`;
             el.style[vertical ? "width" : "height"] = "";
+            el.style.left = rtl ? "auto" : "";
+            el.style.right = rtl ? "0" : "";
         });
         element.style.setProperty(`--${config.prefix}-carousel-corner`, corner);
     };
@@ -158,7 +170,7 @@ export const withScroll = (config) => (component) => {
                 continue;
             }
             el.style.visibility = "";
-            el.style.transform = vertical ? `translate3d(0, ${start}px, 0)` : `translate3d(${start}px, 0, 0)`;
+            el.style.transform = vertical ? `translate3d(0, ${start}px, 0)` : `translate3d(${start * sign}px, 0, 0)`;
             el.style.clipPath = inset > 0 ? (vertical ? `inset(${inset}px 0 round ${corner})` : `inset(0 ${inset}px round ${corner})`) : "";
             el.style.setProperty(`--${config.prefix}-carousel-fade`, fade.toFixed(3));
         }
@@ -186,6 +198,7 @@ export const withScroll = (config) => (component) => {
         stopWheel();
         if (!count)
             return;
+        scrollPosition();
         const target = Math.min(Math.max(index, 0), count - 1);
         if (strategy) {
             expect(target);
@@ -207,8 +220,8 @@ export const withScroll = (config) => (component) => {
         const from = indexOf(e.target);
         if (from < 0)
             return;
-        const forward = vertical ? "ArrowDown" : "ArrowRight";
-        const backward = vertical ? "ArrowUp" : "ArrowLeft";
+        const forward = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+        const backward = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
         let target = -1;
         if (e.key === forward)
             target = from + 1;
@@ -254,7 +267,7 @@ export const withScroll = (config) => (component) => {
         dragLast = dragStart;
         dragLastTime = e.timeStamp;
         dragVelocity = 0;
-        dragScrollStart = scrollPosition();
+        dragScrollStart = scroller[vertical ? "scrollTop" : "scrollLeft"];
         restoreSnap();
         element.dataset.settling = "true";
         scroller.setPointerCapture(e.pointerId);
@@ -270,13 +283,10 @@ export const withScroll = (config) => (component) => {
         element.dataset.dragging = "true";
         const dt = e.timeStamp - dragLastTime;
         if (dt > 0)
-            dragVelocity = (position - dragLast) / dt;
+            dragVelocity = ((position - dragLast) / dt) * sign;
         dragLast = position;
         dragLastTime = e.timeStamp;
-        if (vertical)
-            scroller.scrollTop = dragScrollStart - delta;
-        else
-            scroller.scrollLeft = dragScrollStart - delta;
+        scroller[vertical ? "scrollTop" : "scrollLeft"] = dragScrollStart - delta;
         e.preventDefault();
     };
     const handlePointerUp = (e) => {
@@ -344,7 +354,7 @@ export const withScroll = (config) => (component) => {
         wheelVelocity = (wheelVelocity - 12 * carry * dt) * decay;
         const resting = wheelDirection * (wheelPosition - wheelTarget) >= 0 ||
             (Math.abs(wheelPosition - wheelTarget) < 0.5 && Math.abs(wheelVelocity) < 5);
-        scroller.scrollLeft = resting ? wheelTarget : wheelPosition;
+        scroller.scrollLeft = (resting ? wheelTarget : wheelPosition) * sign;
         if (resting)
             stopWheel(false);
         else
@@ -396,7 +406,7 @@ export const withScroll = (config) => (component) => {
                 wheelSnap = scroller.style.getPropertyValue("scroll-snap-type");
                 wheelSnapPriority = scroller.style.getPropertyPriority("scroll-snap-type");
                 scroller.style.setProperty("scroll-snap-type", "none");
-                scroller.scrollLeft = position;
+                scroller.scrollLeft = position * sign;
                 wheelPosition = position;
                 wheelTime = performance.now();
                 wheelFrame = window.requestAnimationFrame(glide);
@@ -430,6 +440,8 @@ export const withScroll = (config) => (component) => {
     reduceMotion?.addEventListener?.("change", rebuild);
     const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(rebuild) : null;
     resizeObserver?.observe(scroller);
+    const directionObserver = typeof MutationObserver === "function" ? new MutationObserver(rebuild) : null;
+    directionObserver?.observe(document.documentElement, { attributeFilter: ["dir"], subtree: true });
     component.onSlidesChanged(rebuild);
     rebuild();
     const destroy = component.lifecycle?.destroy;
@@ -445,6 +457,7 @@ export const withScroll = (config) => (component) => {
             setWheel(false);
             restoreSnap();
             resizeObserver?.disconnect();
+            directionObserver?.disconnect();
             reduceMotion?.removeEventListener?.("change", rebuild);
             clearPending();
             scroller.removeEventListener("scroll", layout);

package/dist/components/slider/features/axis.d.ts

@@ -16,7 +16,12 @@ export interface SliderAxis {
     size: "width" | "height";
     cross: "width" | "height";
 }
-/** Whether the slider sits in a right-to-left layout: the nearest `dir` decides. */
+/**
+ * Whether the slider sits in a right-to-left layout: the computed direction,
+ * which inherits into a shadow root, where a `[dir]` ancestor selector cannot
+ * reach (the same computed-direction source the element base reflects). A DOM
+ * that does not resolve `direction` (JSDOM) falls back to the nearest `dir`.
+ */
 export declare const isRtl: (element: Element) => boolean;
 export declare const getAxis: (config: Pick<SliderConfig, "orientation" | "topToBottom">, rtl?: boolean) => SliderAxis;
 /** The track's length along the axis. */

package/dist/components/slider/features/axis.js

@@ -1,4 +1,9 @@
-export const isRtl = (element) => element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+export const isRtl = (element) => {
+    const direction = globalThis.getComputedStyle?.(element).direction;
+    return direction
+        ? direction === "rtl"
+        : element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+};
 export const getAxis = (config, rtl = false) => config.orientation === "vertical"
     ? { vertical: true, start: config.topToBottom ? "top" : "bottom", size: "height", cross: "width" }
     : { vertical: false, start: rtl ? "right" : "left", size: "width", cross: "height" };

package/dist/core/compose/component.js

@@ -1,5 +1,6 @@
 import { getCleanup } from "./cleanup.js";
 import { createElement, removeEventHandlers, } from "../dom/create.js";
+import { trackFactoryDirection } from "../dom/direction.js";
 import { normalizeEvent, hasTouchSupport, TOUCH_CONFIG, PASSIVE_EVENTS, } from "../utils/mobile.js";
 const getModifierClass = (base, modifier) => `${base}--${modifier}`;
 const getElementClass = (base, element) => `${base}__${element}`;
@@ -120,6 +121,7 @@ export const withElement = (options = {}) => (component) => {
         container: parent,
     };
     const element = createElement(elementOptions);
+    trackFactoryDirection(element);
     const cleanupTouch = hasTouchSupport() && options.interactive
         ? setupTouch(element, base, options)
         : undefined;

package/dist/core/dom/direction.d.ts

@@ -0,0 +1,16 @@
+/** A root that has been read while connected, marked on the element itself. */
+type Seen = HTMLElement & {
+    _m?: boolean;
+};
+/**
+ * Follows an element host: it is read while connected, on the mutation that
+ * inserts a host created detached, and after a `dir` attribute changes
+ * anywhere (a page switching direction at runtime).
+ */
+export declare const trackDirection: (element: Seen) => void;
+/**
+ * Follows a factory root by the nearest `[dir]` attribute, with no style read:
+ * its markup is light DOM, where the attribute fallback applies.
+ */
+export declare const trackFactoryDirection: (element: Seen) => void;
+export {};

package/dist/core/dom/direction.js

@@ -0,0 +1,38 @@
+import { PREFIX } from "../config.js";
+const reflectHost = (element) => {
+    const rtl = typeof getComputedStyle === "function" && getComputedStyle(element).direction === "rtl";
+    element._m = true;
+    element.classList.toggle(PREFIX + "-rtl", rtl);
+    element.classList.toggle(PREFIX + "-ltr", !rtl && !!element.closest("[dir=rtl]"));
+};
+const reflectFactory = (element) => {
+    const nearest = element.closest("[dir]");
+    const dir = nearest?.getAttribute("dir");
+    element._m = true;
+    element.classList.toggle(PREFIX + "-rtl", dir === "rtl");
+    element.classList.toggle(PREFIX + "-ltr", dir === "ltr" && !!nearest?.closest("[dir=rtl]"));
+};
+const tracked = new Map();
+const follow = (element, reflect) => {
+    if (typeof MutationObserver !== "function")
+        return;
+    tracked.set(element, reflect);
+    if (element.isConnected)
+        reflect(element);
+    const owner = element.ownerDocument;
+    if (owner._d)
+        return;
+    owner._d = new MutationObserver(() => {
+        tracked.forEach((trackedReflect, trackedElement) => trackedElement.isConnected
+            ? trackedReflect(trackedElement)
+            : trackedElement._m && tracked.delete(trackedElement));
+    });
+    owner._d.observe(owner.documentElement, {
+        attributes: true,
+        attributeFilter: ["dir"],
+        childList: true,
+        subtree: true,
+    });
+};
+export const trackDirection = (element) => follow(element, reflectHost);
+export const trackFactoryDirection = (element) => follow(element, reflectFactory);

package/dist/elements/css/badge.css

@@ -1 +1 @@
-.mtrl-badge__wrapper{position:relative;display:inline-flex;flex-shrink:0}.mtrl-badge{position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;box-sizing:border-box;overflow:hidden;transition:all 200ms ease;text-overflow:ellipsis}.mtrl-badge--invisible{display:none}.mtrl-badge--small{width:6px;height:6px;min-width:6px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);font-size:0;padding:0}.mtrl-badge--large{height:16px;min-width:16px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);padding:0 4px;font-size:11px;line-height:16px;padding-top:.5px}.mtrl-badge--large.mtrl-badge--overflow{min-width:auto;max-width:34px;padding:0 4px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-right{top:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left{top:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right{bottom:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left{bottom:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right{top:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left{top:-8px;left:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right{bottom:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left{bottom:-8px;left:-8px}.mtrl-badge--error{background-color:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error)}.mtrl-badge--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-badge--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-badge--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-badge--success{background-color:var(--mtrl-sys-color-success);color:var(--mtrl-sys-color-on-success)}.mtrl-badge--warning{background-color:var(--mtrl-sys-color-warning);color:var(--mtrl-sys-color-on-warning)}.mtrl-badge--info{background-color:var(--mtrl-sys-color-info);color:var(--mtrl-sys-color-on-info)}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--top-right{right:auto;left:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--top-left{left:auto;right:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--bottom-right{right:auto;left:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--bottom-left{left:auto;right:-8px}
+.mtrl-badge__wrapper{position:relative;display:inline-flex;flex-shrink:0}.mtrl-badge{position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;box-sizing:border-box;overflow:hidden;transition:all 200ms ease;text-overflow:ellipsis}.mtrl-badge--invisible{display:none}.mtrl-badge--small{width:6px;height:6px;min-width:6px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);font-size:0;padding:0}.mtrl-badge--large{height:16px;min-width:16px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);padding:0 4px;font-size:11px;line-height:16px;padding-top:.5px}.mtrl-badge--large.mtrl-badge--overflow{min-width:auto;max-width:34px;padding:0 4px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-right{top:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left{top:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right{bottom:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left{bottom:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right{top:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left{top:-8px;left:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right{bottom:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left{bottom:-8px;left:-8px}.mtrl-badge--error{background-color:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error)}.mtrl-badge--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-badge--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-badge--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-badge--success{background-color:var(--mtrl-sys-color-success);color:var(--mtrl-sys-color-on-success)}.mtrl-badge--warning{background-color:var(--mtrl-sys-color-warning);color:var(--mtrl-sys-color-on-warning)}.mtrl-badge--info{background-color:var(--mtrl-sys-color-info);color:var(--mtrl-sys-color-on-info)}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--top-right,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--top-right,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--top-right{right:auto;left:-8px}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--top-left,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--top-left,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--top-left{left:auto;right:-8px}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--bottom-right,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--bottom-right,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--bottom-right{right:auto;left:-8px}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--bottom-left,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--bottom-left,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--bottom-left{left:auto;right:-8px}

package/dist/elements/css/badge.js

@@ -1,3 +1,3 @@
 import "./ripple.js";
 import { registerStyles } from "../styles.js";
-registerStyles({ "badge": ".mtrl-badge__wrapper{position:relative;display:inline-flex;flex-shrink:0}.mtrl-badge{position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;box-sizing:border-box;overflow:hidden;transition:all 200ms ease;text-overflow:ellipsis}.mtrl-badge--invisible{display:none}.mtrl-badge--small{width:6px;height:6px;min-width:6px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);font-size:0;padding:0}.mtrl-badge--large{height:16px;min-width:16px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);padding:0 4px;font-size:11px;line-height:16px;padding-top:.5px}.mtrl-badge--large.mtrl-badge--overflow{min-width:auto;max-width:34px;padding:0 4px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-right{top:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left{top:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right{bottom:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left{bottom:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right{top:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left{top:-8px;left:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right{bottom:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left{bottom:-8px;left:-8px}.mtrl-badge--error{background-color:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error)}.mtrl-badge--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-badge--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-badge--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-badge--success{background-color:var(--mtrl-sys-color-success);color:var(--mtrl-sys-color-on-success)}.mtrl-badge--warning{background-color:var(--mtrl-sys-color-warning);color:var(--mtrl-sys-color-on-warning)}.mtrl-badge--info{background-color:var(--mtrl-sys-color-info);color:var(--mtrl-sys-color-on-info)}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--top-right{right:auto;left:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--top-left{left:auto;right:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--bottom-right{right:auto;left:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--bottom-left{left:auto;right:-8px}" });
+registerStyles({ "badge": ".mtrl-badge__wrapper{position:relative;display:inline-flex;flex-shrink:0}.mtrl-badge{position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;box-sizing:border-box;overflow:hidden;transition:all 200ms ease;text-overflow:ellipsis}.mtrl-badge--invisible{display:none}.mtrl-badge--small{width:6px;height:6px;min-width:6px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);font-size:0;padding:0}.mtrl-badge--large{height:16px;min-width:16px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);padding:0 4px;font-size:11px;line-height:16px;padding-top:.5px}.mtrl-badge--large.mtrl-badge--overflow{min-width:auto;max-width:34px;padding:0 4px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-right{top:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left{top:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right{bottom:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left{bottom:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right{top:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left{top:-8px;left:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right{bottom:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left{bottom:-8px;left:-8px}.mtrl-badge--error{background-color:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error)}.mtrl-badge--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-badge--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-badge--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-badge--success{background-color:var(--mtrl-sys-color-success);color:var(--mtrl-sys-color-on-success)}.mtrl-badge--warning{background-color:var(--mtrl-sys-color-warning);color:var(--mtrl-sys-color-on-warning)}.mtrl-badge--info{background-color:var(--mtrl-sys-color-info);color:var(--mtrl-sys-color-on-info)}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--top-right,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--top-right,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--top-right{right:auto;left:-8px}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--top-left,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--top-left,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--top-left{left:auto;right:-8px}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--bottom-right,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--bottom-right,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--bottom-right{right:auto;left:-8px}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--bottom-left,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--bottom-left,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--bottom-left{left:auto;right:-8px}" });

package/dist/elements/css/bottom-app-bar.css

@@ -1 +1 @@
-.mtrl-bottom-app-bar{position:absolute;bottom:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:80px;padding:12px 16px 12px 4px;background-color:var(--mtrl-sys-color-surface-container);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);transition:transform .3s ease-in-out}.mtrl-bottom-app-bar__actions{display:flex;align-items:center;gap:4px;height:100%}.mtrl-bottom-app-bar__actions>*{flex-shrink:0}.mtrl-bottom-app-bar__fab-container{display:flex;align-items:center;justify-content:center;margin-left:auto}.mtrl-bottom-app-bar--with-fab{height:72px}.mtrl-bottom-app-bar--fab-center .mtrl-bottom-app-bar__fab-container{position:absolute;left:50%;transform:translateX(-50%)}.mtrl-bottom-app-bar--hidden{transform:translateY(100%)}[dir=rtl] .mtrl-bottom-app-bar{padding:12px 4px 12px 16px}[dir=rtl] .mtrl-bottom-app-bar__actions{flex-direction:row-reverse}[dir=rtl] .mtrl-bottom-app-bar__fab-container{margin-right:auto;margin-left:initial}@media(prefers-reduced-motion: reduce){.mtrl-bottom-app-bar{transition-duration:.01ms}}@media(forced-colors: active){.mtrl-bottom-app-bar{border-top:1px solid currentColor}}
+.mtrl-bottom-app-bar{position:absolute;bottom:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:80px;padding:12px 16px 12px 4px;background-color:var(--mtrl-sys-color-surface-container);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);transition:transform .3s ease-in-out}.mtrl-bottom-app-bar__actions{display:flex;align-items:center;gap:4px;height:100%}.mtrl-bottom-app-bar__actions>*{flex-shrink:0}.mtrl-bottom-app-bar__fab-container{display:flex;align-items:center;justify-content:center;margin-left:auto}.mtrl-bottom-app-bar--with-fab{height:72px}.mtrl-bottom-app-bar--fab-center .mtrl-bottom-app-bar__fab-container{position:absolute;left:50%;transform:translateX(-50%)}.mtrl-bottom-app-bar--hidden{transform:translateY(100%)}:where(.mtrl-rtl) .mtrl-bottom-app-bar,:where(:host(.mtrl-rtl)) .mtrl-bottom-app-bar,[dir=rtl] .mtrl-bottom-app-bar:not(:where(.mtrl-ltr,.mtrl-ltr *)){padding:12px 4px 12px 16px}:where(.mtrl-rtl) .mtrl-bottom-app-bar__actions,:where(:host(.mtrl-rtl)) .mtrl-bottom-app-bar__actions,[dir=rtl] .mtrl-bottom-app-bar__actions:not(:where(.mtrl-ltr,.mtrl-ltr *)){flex-direction:row-reverse}:where(.mtrl-rtl) .mtrl-bottom-app-bar__fab-container,:where(:host(.mtrl-rtl)) .mtrl-bottom-app-bar__fab-container,[dir=rtl] .mtrl-bottom-app-bar__fab-container:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin-right:auto;margin-left:initial}@media(prefers-reduced-motion: reduce){.mtrl-bottom-app-bar{transition-duration:.01ms}}@media(forced-colors: active){.mtrl-bottom-app-bar{border-top:1px solid currentColor}}

package/dist/elements/css/bottom-app-bar.js

@@ -1,3 +1,3 @@
 import "./ripple.js";
 import { registerStyles } from "../styles.js";
-registerStyles({ "bottom-app-bar": ".mtrl-bottom-app-bar{position:absolute;bottom:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:80px;padding:12px 16px 12px 4px;background-color:var(--mtrl-sys-color-surface-container);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);transition:transform .3s ease-in-out}.mtrl-bottom-app-bar__actions{display:flex;align-items:center;gap:4px;height:100%}.mtrl-bottom-app-bar__actions>*{flex-shrink:0}.mtrl-bottom-app-bar__fab-container{display:flex;align-items:center;justify-content:center;margin-left:auto}.mtrl-bottom-app-bar--with-fab{height:72px}.mtrl-bottom-app-bar--fab-center .mtrl-bottom-app-bar__fab-container{position:absolute;left:50%;transform:translateX(-50%)}.mtrl-bottom-app-bar--hidden{transform:translateY(100%)}[dir=rtl] .mtrl-bottom-app-bar{padding:12px 4px 12px 16px}[dir=rtl] .mtrl-bottom-app-bar__actions{flex-direction:row-reverse}[dir=rtl] .mtrl-bottom-app-bar__fab-container{margin-right:auto;margin-left:initial}@media(prefers-reduced-motion: reduce){.mtrl-bottom-app-bar{transition-duration:.01ms}}@media(forced-colors: active){.mtrl-bottom-app-bar{border-top:1px solid currentColor}}" });
+registerStyles({ "bottom-app-bar": ".mtrl-bottom-app-bar{position:absolute;bottom:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:80px;padding:12px 16px 12px 4px;background-color:var(--mtrl-sys-color-surface-container);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);transition:transform .3s ease-in-out}.mtrl-bottom-app-bar__actions{display:flex;align-items:center;gap:4px;height:100%}.mtrl-bottom-app-bar__actions>*{flex-shrink:0}.mtrl-bottom-app-bar__fab-container{display:flex;align-items:center;justify-content:center;margin-left:auto}.mtrl-bottom-app-bar--with-fab{height:72px}.mtrl-bottom-app-bar--fab-center .mtrl-bottom-app-bar__fab-container{position:absolute;left:50%;transform:translateX(-50%)}.mtrl-bottom-app-bar--hidden{transform:translateY(100%)}:where(.mtrl-rtl) .mtrl-bottom-app-bar,:where(:host(.mtrl-rtl)) .mtrl-bottom-app-bar,[dir=rtl] .mtrl-bottom-app-bar:not(:where(.mtrl-ltr,.mtrl-ltr *)){padding:12px 4px 12px 16px}:where(.mtrl-rtl) .mtrl-bottom-app-bar__actions,:where(:host(.mtrl-rtl)) .mtrl-bottom-app-bar__actions,[dir=rtl] .mtrl-bottom-app-bar__actions:not(:where(.mtrl-ltr,.mtrl-ltr *)){flex-direction:row-reverse}:where(.mtrl-rtl) .mtrl-bottom-app-bar__fab-container,:where(:host(.mtrl-rtl)) .mtrl-bottom-app-bar__fab-container,[dir=rtl] .mtrl-bottom-app-bar__fab-container:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin-right:auto;margin-left:initial}@media(prefers-reduced-motion: reduce){.mtrl-bottom-app-bar{transition-duration:.01ms}}@media(forced-colors: active){.mtrl-bottom-app-bar{border-top:1px solid currentColor}}" });

package/dist/elements/css/card.css

@@ -1 +1 @@
-.mtrl-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;border-radius:var(--mtrl-sys-shape-corner-medium, 12px);background-color:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);overflow:hidden;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;transition:box-shadow 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),border-color 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card:focus-visible:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card--focused:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card .ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;background-color:currentColor;opacity:.08}.mtrl-card>:not(:last-child){margin-bottom:0}.mtrl-card--elevated{background-color:var(--mtrl-sys-color-surface-container-low);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card--elevated:hover.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-card--elevated:active.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}:where(.mtrl-card--elevated:active.mtrl-card--interactive){position:relative}.mtrl-card--elevated:active.mtrl-card--interactive:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-card--elevated.mtrl-card--dragging{box-shadow:0px 2px 3px rgba(0,0,0,.3),0px 6px 10px 4px rgba(0,0,0,.15)}.mtrl-card--elevated.mtrl-card--state-disabled{background-color:var(--mtrl-sys-color-surface);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card--filled{background-color:var(--mtrl-sys-color-surface-container-highest);box-shadow:none}.mtrl-card--filled:hover.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}:where(.mtrl-card--filled:hover.mtrl-card--interactive){position:relative}.mtrl-card--filled:hover.mtrl-card--interactive::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-card--filled:active.mtrl-card--interactive{box-shadow:none}:where(.mtrl-card--filled:active.mtrl-card--interactive){position:relative}.mtrl-card--filled:active.mtrl-card--interactive:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-card--filled.mtrl-card--dragging{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-card--filled.mtrl-card--state-disabled{background-color:var(--mtrl-sys-color-surface-variant)}.mtrl-card--outlined{border:1px solid var(--mtrl-sys-color-outline-variant);background-color:var(--mtrl-sys-color-surface);box-shadow:none}.mtrl-card--outlined:hover.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15);border-color:var(--mtrl-sys-color-outline-variant)}:where(.mtrl-card--outlined:hover.mtrl-card--interactive){position:relative}.mtrl-card--outlined:hover.mtrl-card--interactive::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-card--outlined:focus-visible,.mtrl-card--outlined.mtrl-card--focused{border-color:var(--mtrl-sys-color-on-surface)}.mtrl-card--outlined:active.mtrl-card--interactive{box-shadow:none;border-color:var(--mtrl-sys-color-outline-variant)}:where(.mtrl-card--outlined:active.mtrl-card--interactive){position:relative}.mtrl-card--outlined:active.mtrl-card--interactive:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-card--outlined.mtrl-card--dragging{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-card--outlined.mtrl-card--state-disabled{border-color:color-mix(in srgb, var(--mtrl-sys-color-outline) 12%, transparent)}.mtrl-card--interactive{cursor:pointer;user-select:none}.mtrl-card--full-width{width:100%}.mtrl-card--small{width:344px}.mtrl-card--medium{width:480px}.mtrl-card--large{width:624px}.mtrl-card__header{display:flex;align-items:center;padding:16px;padding-bottom:0}.mtrl-card__header:last-child{padding-bottom:16px}.mtrl-card__header-avatar{margin-right:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.mtrl-card__header-avatar img{width:40px;height:40px;border-radius:50%;object-fit:cover}.mtrl-card__header-text{flex:1;overflow:hidden}.mtrl-card__header-title{margin:0;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mtrl-sys-color-on-surface)}.mtrl-card__header-subtitle{margin:0;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-card__header-action{margin-left:8px;flex-shrink:0}.mtrl-card__media{position:relative;overflow:hidden;border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-card__media-img{display:block;width:100%;object-fit:cover}.mtrl-card__media--16-9{aspect-ratio:16/9}.mtrl-card__media--16-9 img{height:100%}.mtrl-card__media--4-3{aspect-ratio:4/3}.mtrl-card__media--4-3 img{height:100%}.mtrl-card__media--1-1{aspect-ratio:1/1}.mtrl-card__media--1-1 img{height:100%}.mtrl-card__media--contain img{object-fit:contain}.mtrl-card__content{padding:16px;flex:1 1 auto}.mtrl-card__content>*:first-child{margin-top:0}.mtrl-card__content>*:last-child{margin-bottom:0}.mtrl-card__media+.mtrl-card__content:not(.mtrl-card__content--no-padding){padding-top:16px}.mtrl-card__content--no-padding{padding:0}.mtrl-card__actions{display:flex;flex-wrap:wrap;padding:8px;align-items:center}.mtrl-card__actions>*{margin:0 4px}.mtrl-card__actions>*:first-child{margin-left:8px}.mtrl-card__actions>*:last-child{margin-right:8px}.mtrl-card__actions--full-bleed{padding:0}.mtrl-card__actions--full-bleed>*{margin:0;border-radius:0;flex:1 1 auto}.mtrl-card__actions--full-bleed>*:first-child{margin-left:0}.mtrl-card__actions--full-bleed>*:last-child{margin-right:0}.mtrl-card__actions--vertical{flex-direction:column}.mtrl-card__actions--vertical>*{width:100%;margin:4px 0}.mtrl-card__actions--vertical>*:first-child{margin-top:8px}.mtrl-card__actions--vertical>*:last-child{margin-bottom:8px}.mtrl-card__actions--center{justify-content:center}.mtrl-card__actions--end{justify-content:flex-end}.mtrl-card__actions--space-between{justify-content:space-between}.mtrl-card--state-disabled{opacity:.38;pointer-events:none}.mtrl-card--state-loading{pointer-events:none}.mtrl-card--dragging{cursor:grabbing}.mtrl-card__loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb, var(--mtrl-sys-color-surface) 70%, transparent);z-index:1}.mtrl-card__loading-spinner{width:40px;height:40px;border-radius:50%;border:3px solid color-mix(in srgb, var(--mtrl-sys-color-primary) 20%, transparent);border-top-color:var(--mtrl-sys-color-primary);animation:card-spinner 1s infinite linear}.mtrl-card__expandable-content{overflow:hidden;transition:max-height 250ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card__expand-button{background:none;border:none;padding:8px;cursor:pointer;color:var(--mtrl-sys-color-primary);display:inline-flex;align-items:center;justify-content:center}.mtrl-card__expand-button::before{content:"";display:inline-block;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card__expand-button[aria-expanded=true]::before{transform:rotate(-135deg)}.mtrl-card--swipeable{touch-action:pan-y;transition:transform 250ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card__swipe-left-action,.mtrl-card__swipe-right-action{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@keyframes card-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media(max-width: 599px){.mtrl-card{width:100%}}
+.mtrl-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;border-radius:var(--mtrl-sys-shape-corner-medium, 12px);background-color:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);overflow:hidden;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;transition:box-shadow 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),border-color 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card:focus-visible:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card--focused:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card .ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;background-color:currentColor;opacity:.08}.mtrl-card>:not(:last-child){margin-bottom:0}.mtrl-card--elevated{background-color:var(--mtrl-sys-color-surface-container-low);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card--elevated:hover.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-card--elevated:active.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}:where(.mtrl-card--elevated:active.mtrl-card--interactive){position:relative}.mtrl-card--elevated:active.mtrl-card--interactive:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-card--elevated.mtrl-card--dragging{box-shadow:0px 2px 3px rgba(0,0,0,.3),0px 6px 10px 4px rgba(0,0,0,.15)}.mtrl-card--elevated.mtrl-card--state-disabled{background-color:var(--mtrl-sys-color-surface);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card--filled{background-color:var(--mtrl-sys-color-surface-container-highest);box-shadow:none}.mtrl-card--filled:hover.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}:where(.mtrl-card--filled:hover.mtrl-card--interactive){position:relative}.mtrl-card--filled:hover.mtrl-card--interactive::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-card--filled:active.mtrl-card--interactive{box-shadow:none}:where(.mtrl-card--filled:active.mtrl-card--interactive){position:relative}.mtrl-card--filled:active.mtrl-card--interactive:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-card--filled.mtrl-card--dragging{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-card--filled.mtrl-card--state-disabled{background-color:var(--mtrl-sys-color-surface-variant)}.mtrl-card--outlined{border:1px solid var(--mtrl-sys-color-outline-variant);background-color:var(--mtrl-sys-color-surface);box-shadow:none}.mtrl-card--outlined:hover.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15);border-color:var(--mtrl-sys-color-outline-variant)}:where(.mtrl-card--outlined:hover.mtrl-card--interactive){position:relative}.mtrl-card--outlined:hover.mtrl-card--interactive::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-card--outlined:focus-visible,.mtrl-card--outlined.mtrl-card--focused{border-color:var(--mtrl-sys-color-on-surface)}.mtrl-card--outlined:active.mtrl-card--interactive{box-shadow:none;border-color:var(--mtrl-sys-color-outline-variant)}:where(.mtrl-card--outlined:active.mtrl-card--interactive){position:relative}.mtrl-card--outlined:active.mtrl-card--interactive:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-card--outlined.mtrl-card--dragging{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-card--outlined.mtrl-card--state-disabled{border-color:color-mix(in srgb, var(--mtrl-sys-color-outline) 12%, transparent)}.mtrl-card--interactive{cursor:pointer;user-select:none}.mtrl-card--full-width{width:100%}.mtrl-card--small{width:344px}.mtrl-card--medium{width:480px}.mtrl-card--large{width:624px}.mtrl-card__header{display:flex;align-items:center;padding:16px;padding-bottom:0}.mtrl-card__header:last-child{padding-bottom:16px}.mtrl-card__header-avatar{margin-right:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}:where(.mtrl-rtl) .mtrl-card__header-avatar,:where(:host(.mtrl-rtl)) .mtrl-card__header-avatar,[dir=rtl] .mtrl-card__header-avatar:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin-right:0;margin-left:16px}.mtrl-card__header-avatar img{width:40px;height:40px;border-radius:50%;object-fit:cover}.mtrl-card__header-text{flex:1;overflow:hidden}.mtrl-card__header-title{margin:0;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mtrl-sys-color-on-surface)}.mtrl-card__header-subtitle{margin:0;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-card__header-action{margin-left:8px;flex-shrink:0}:where(.mtrl-rtl) .mtrl-card__header-action,:where(:host(.mtrl-rtl)) .mtrl-card__header-action,[dir=rtl] .mtrl-card__header-action:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin-left:0;margin-right:8px}.mtrl-card__media{position:relative;overflow:hidden;border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-card__media-img{display:block;width:100%;object-fit:cover}.mtrl-card__media--16-9{aspect-ratio:16/9}.mtrl-card__media--16-9 img{height:100%}.mtrl-card__media--4-3{aspect-ratio:4/3}.mtrl-card__media--4-3 img{height:100%}.mtrl-card__media--1-1{aspect-ratio:1/1}.mtrl-card__media--1-1 img{height:100%}.mtrl-card__media--contain img{object-fit:contain}.mtrl-card__content{padding:16px;flex:1 1 auto}.mtrl-card__content>*:first-child{margin-top:0}.mtrl-card__content>*:last-child{margin-bottom:0}.mtrl-card__media+.mtrl-card__content:not(.mtrl-card__content--no-padding){padding-top:16px}.mtrl-card__content--no-padding{padding:0}.mtrl-card__actions{display:flex;flex-wrap:wrap;padding:8px;align-items:center}.mtrl-card__actions>*{margin:0 4px}.mtrl-card__actions>*:first-child{margin-left:8px}.mtrl-card__actions>*:last-child{margin-right:8px}:where(.mtrl-rtl) .mtrl-card__actions>*:first-child,:where(:host(.mtrl-rtl)) .mtrl-card__actions>*:first-child,[dir=rtl] .mtrl-card__actions>*:not(:where(.mtrl-ltr,.mtrl-ltr *)):first-child{margin-left:4px;margin-right:8px}:where(.mtrl-rtl) .mtrl-card__actions>*:last-child,:where(:host(.mtrl-rtl)) .mtrl-card__actions>*:last-child,[dir=rtl] .mtrl-card__actions>*:not(:where(.mtrl-ltr,.mtrl-ltr *)):last-child{margin-right:4px;margin-left:8px}.mtrl-card__actions--full-bleed{padding:0}.mtrl-card__actions--full-bleed>*{margin:0;border-radius:0;flex:1 1 auto}.mtrl-card__actions--full-bleed>*:first-child{margin-left:0}.mtrl-card__actions--full-bleed>*:last-child{margin-right:0}.mtrl-card__actions--vertical{flex-direction:column}.mtrl-card__actions--vertical>*{width:100%;margin:4px 0}.mtrl-card__actions--vertical>*:first-child{margin-top:8px}.mtrl-card__actions--vertical>*:last-child{margin-bottom:8px}.mtrl-card__actions--center{justify-content:center}.mtrl-card__actions--end{justify-content:flex-end}.mtrl-card__actions--space-between{justify-content:space-between}.mtrl-card--state-disabled{opacity:.38;pointer-events:none}.mtrl-card--state-loading{pointer-events:none}.mtrl-card--dragging{cursor:grabbing}.mtrl-card__loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb, var(--mtrl-sys-color-surface) 70%, transparent);z-index:1}.mtrl-card__loading-spinner{width:40px;height:40px;border-radius:50%;border:3px solid color-mix(in srgb, var(--mtrl-sys-color-primary) 20%, transparent);border-top-color:var(--mtrl-sys-color-primary);animation:card-spinner 1s infinite linear}.mtrl-card__expandable-content{overflow:hidden;transition:max-height 250ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card__expand-button{background:none;border:none;padding:8px;cursor:pointer;color:var(--mtrl-sys-color-primary);display:inline-flex;align-items:center;justify-content:center}.mtrl-card__expand-button::before{content:"";display:inline-block;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card__expand-button[aria-expanded=true]::before{transform:rotate(-135deg)}.mtrl-card--swipeable{touch-action:pan-y;transition:transform 250ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card__swipe-left-action,.mtrl-card__swipe-right-action{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@keyframes card-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media(max-width: 599px){.mtrl-card{width:100%}}

package/dist/elements/css/card.js

@@ -1,4 +1,4 @@
 import "./ripple.js";
 import "./button.js";
 import { registerStyles } from "../styles.js";
-registerStyles({ "card": ".mtrl-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;border-radius:var(--mtrl-sys-shape-corner-medium, 12px);background-color:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);overflow:hidden;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;transition:box-shadow 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),border-color 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card:focus-visible:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card--focused:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card .ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;background-color:currentColor;opacity:.08}.mtrl-card>:not(:last-child){margin-bottom:0}.mtrl-card--elevated{background-color:var(--mtrl-sys-color-surface-container-low);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card--elevated:hover.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-card--elevated:active.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}:where(.mtrl-card--elevated:active.mtrl-card--interactive){position:relative}.mtrl-card--elevated:active.mtrl-card--interactive:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-card--elevated.mtrl-card--dragging{box-shadow:0px 2px 3px rgba(0,0,0,.3),0px 6px 10px 4px rgba(0,0,0,.15)}.mtrl-card--elevated.mtrl-card--state-disabled{background-color:var(--mtrl-sys-color-surface);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card--filled{background-color:var(--mtrl-sys-color-surface-container-highest);box-shadow:none}.mtrl-card--filled:hover.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}:where(.mtrl-card--filled:hover.mtrl-card--interactive){position:relative}.mtrl-card--filled:hover.mtrl-card--interactive::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-card--filled:active.mtrl-card--interactive{box-shadow:none}:where(.mtrl-card--filled:active.mtrl-card--interactive){position:relative}.mtrl-card--filled:active.mtrl-card--interactive:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-card--filled.mtrl-card--dragging{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-card--filled.mtrl-card--state-disabled{background-color:var(--mtrl-sys-color-surface-variant)}.mtrl-card--outlined{border:1px solid var(--mtrl-sys-color-outline-variant);background-color:var(--mtrl-sys-color-surface);box-shadow:none}.mtrl-card--outlined:hover.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15);border-color:var(--mtrl-sys-color-outline-variant)}:where(.mtrl-card--outlined:hover.mtrl-card--interactive){position:relative}.mtrl-card--outlined:hover.mtrl-card--interactive::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-card--outlined:focus-visible,.mtrl-card--outlined.mtrl-card--focused{border-color:var(--mtrl-sys-color-on-surface)}.mtrl-card--outlined:active.mtrl-card--interactive{box-shadow:none;border-color:var(--mtrl-sys-color-outline-variant)}:where(.mtrl-card--outlined:active.mtrl-card--interactive){position:relative}.mtrl-card--outlined:active.mtrl-card--interactive:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-card--outlined.mtrl-card--dragging{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-card--outlined.mtrl-card--state-disabled{border-color:color-mix(in srgb, var(--mtrl-sys-color-outline) 12%, transparent)}.mtrl-card--interactive{cursor:pointer;user-select:none}.mtrl-card--full-width{width:100%}.mtrl-card--small{width:344px}.mtrl-card--medium{width:480px}.mtrl-card--large{width:624px}.mtrl-card__header{display:flex;align-items:center;padding:16px;padding-bottom:0}.mtrl-card__header:last-child{padding-bottom:16px}.mtrl-card__header-avatar{margin-right:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.mtrl-card__header-avatar img{width:40px;height:40px;border-radius:50%;object-fit:cover}.mtrl-card__header-text{flex:1;overflow:hidden}.mtrl-card__header-title{margin:0;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mtrl-sys-color-on-surface)}.mtrl-card__header-subtitle{margin:0;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-card__header-action{margin-left:8px;flex-shrink:0}.mtrl-card__media{position:relative;overflow:hidden;border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-card__media-img{display:block;width:100%;object-fit:cover}.mtrl-card__media--16-9{aspect-ratio:16/9}.mtrl-card__media--16-9 img{height:100%}.mtrl-card__media--4-3{aspect-ratio:4/3}.mtrl-card__media--4-3 img{height:100%}.mtrl-card__media--1-1{aspect-ratio:1/1}.mtrl-card__media--1-1 img{height:100%}.mtrl-card__media--contain img{object-fit:contain}.mtrl-card__content{padding:16px;flex:1 1 auto}.mtrl-card__content>*:first-child{margin-top:0}.mtrl-card__content>*:last-child{margin-bottom:0}.mtrl-card__media+.mtrl-card__content:not(.mtrl-card__content--no-padding){padding-top:16px}.mtrl-card__content--no-padding{padding:0}.mtrl-card__actions{display:flex;flex-wrap:wrap;padding:8px;align-items:center}.mtrl-card__actions>*{margin:0 4px}.mtrl-card__actions>*:first-child{margin-left:8px}.mtrl-card__actions>*:last-child{margin-right:8px}.mtrl-card__actions--full-bleed{padding:0}.mtrl-card__actions--full-bleed>*{margin:0;border-radius:0;flex:1 1 auto}.mtrl-card__actions--full-bleed>*:first-child{margin-left:0}.mtrl-card__actions--full-bleed>*:last-child{margin-right:0}.mtrl-card__actions--vertical{flex-direction:column}.mtrl-card__actions--vertical>*{width:100%;margin:4px 0}.mtrl-card__actions--vertical>*:first-child{margin-top:8px}.mtrl-card__actions--vertical>*:last-child{margin-bottom:8px}.mtrl-card__actions--center{justify-content:center}.mtrl-card__actions--end{justify-content:flex-end}.mtrl-card__actions--space-between{justify-content:space-between}.mtrl-card--state-disabled{opacity:.38;pointer-events:none}.mtrl-card--state-loading{pointer-events:none}.mtrl-card--dragging{cursor:grabbing}.mtrl-card__loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb, var(--mtrl-sys-color-surface) 70%, transparent);z-index:1}.mtrl-card__loading-spinner{width:40px;height:40px;border-radius:50%;border:3px solid color-mix(in srgb, var(--mtrl-sys-color-primary) 20%, transparent);border-top-color:var(--mtrl-sys-color-primary);animation:card-spinner 1s infinite linear}.mtrl-card__expandable-content{overflow:hidden;transition:max-height 250ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card__expand-button{background:none;border:none;padding:8px;cursor:pointer;color:var(--mtrl-sys-color-primary);display:inline-flex;align-items:center;justify-content:center}.mtrl-card__expand-button::before{content:\"\";display:inline-block;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card__expand-button[aria-expanded=true]::before{transform:rotate(-135deg)}.mtrl-card--swipeable{touch-action:pan-y;transition:transform 250ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card__swipe-left-action,.mtrl-card__swipe-right-action{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@keyframes card-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media(max-width: 599px){.mtrl-card{width:100%}}" });
+registerStyles({ "card": ".mtrl-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;border-radius:var(--mtrl-sys-shape-corner-medium, 12px);background-color:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);overflow:hidden;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;transition:box-shadow 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),border-color 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card:focus-visible:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card--focused:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card .ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;background-color:currentColor;opacity:.08}.mtrl-card>:not(:last-child){margin-bottom:0}.mtrl-card--elevated{background-color:var(--mtrl-sys-color-surface-container-low);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card--elevated:hover.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-card--elevated:active.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}:where(.mtrl-card--elevated:active.mtrl-card--interactive){position:relative}.mtrl-card--elevated:active.mtrl-card--interactive:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-card--elevated.mtrl-card--dragging{box-shadow:0px 2px 3px rgba(0,0,0,.3),0px 6px 10px 4px rgba(0,0,0,.15)}.mtrl-card--elevated.mtrl-card--state-disabled{background-color:var(--mtrl-sys-color-surface);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-card--filled{background-color:var(--mtrl-sys-color-surface-container-highest);box-shadow:none}.mtrl-card--filled:hover.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}:where(.mtrl-card--filled:hover.mtrl-card--interactive){position:relative}.mtrl-card--filled:hover.mtrl-card--interactive::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-card--filled:active.mtrl-card--interactive{box-shadow:none}:where(.mtrl-card--filled:active.mtrl-card--interactive){position:relative}.mtrl-card--filled:active.mtrl-card--interactive:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-card--filled.mtrl-card--dragging{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-card--filled.mtrl-card--state-disabled{background-color:var(--mtrl-sys-color-surface-variant)}.mtrl-card--outlined{border:1px solid var(--mtrl-sys-color-outline-variant);background-color:var(--mtrl-sys-color-surface);box-shadow:none}.mtrl-card--outlined:hover.mtrl-card--interactive{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15);border-color:var(--mtrl-sys-color-outline-variant)}:where(.mtrl-card--outlined:hover.mtrl-card--interactive){position:relative}.mtrl-card--outlined:hover.mtrl-card--interactive::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-card--outlined:focus-visible,.mtrl-card--outlined.mtrl-card--focused{border-color:var(--mtrl-sys-color-on-surface)}.mtrl-card--outlined:active.mtrl-card--interactive{box-shadow:none;border-color:var(--mtrl-sys-color-outline-variant)}:where(.mtrl-card--outlined:active.mtrl-card--interactive){position:relative}.mtrl-card--outlined:active.mtrl-card--interactive:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-card--outlined.mtrl-card--dragging{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-card--outlined.mtrl-card--state-disabled{border-color:color-mix(in srgb, var(--mtrl-sys-color-outline) 12%, transparent)}.mtrl-card--interactive{cursor:pointer;user-select:none}.mtrl-card--full-width{width:100%}.mtrl-card--small{width:344px}.mtrl-card--medium{width:480px}.mtrl-card--large{width:624px}.mtrl-card__header{display:flex;align-items:center;padding:16px;padding-bottom:0}.mtrl-card__header:last-child{padding-bottom:16px}.mtrl-card__header-avatar{margin-right:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}:where(.mtrl-rtl) .mtrl-card__header-avatar,:where(:host(.mtrl-rtl)) .mtrl-card__header-avatar,[dir=rtl] .mtrl-card__header-avatar:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin-right:0;margin-left:16px}.mtrl-card__header-avatar img{width:40px;height:40px;border-radius:50%;object-fit:cover}.mtrl-card__header-text{flex:1;overflow:hidden}.mtrl-card__header-title{margin:0;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mtrl-sys-color-on-surface)}.mtrl-card__header-subtitle{margin:0;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-card__header-action{margin-left:8px;flex-shrink:0}:where(.mtrl-rtl) .mtrl-card__header-action,:where(:host(.mtrl-rtl)) .mtrl-card__header-action,[dir=rtl] .mtrl-card__header-action:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin-left:0;margin-right:8px}.mtrl-card__media{position:relative;overflow:hidden;border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-card__media-img{display:block;width:100%;object-fit:cover}.mtrl-card__media--16-9{aspect-ratio:16/9}.mtrl-card__media--16-9 img{height:100%}.mtrl-card__media--4-3{aspect-ratio:4/3}.mtrl-card__media--4-3 img{height:100%}.mtrl-card__media--1-1{aspect-ratio:1/1}.mtrl-card__media--1-1 img{height:100%}.mtrl-card__media--contain img{object-fit:contain}.mtrl-card__content{padding:16px;flex:1 1 auto}.mtrl-card__content>*:first-child{margin-top:0}.mtrl-card__content>*:last-child{margin-bottom:0}.mtrl-card__media+.mtrl-card__content:not(.mtrl-card__content--no-padding){padding-top:16px}.mtrl-card__content--no-padding{padding:0}.mtrl-card__actions{display:flex;flex-wrap:wrap;padding:8px;align-items:center}.mtrl-card__actions>*{margin:0 4px}.mtrl-card__actions>*:first-child{margin-left:8px}.mtrl-card__actions>*:last-child{margin-right:8px}:where(.mtrl-rtl) .mtrl-card__actions>*:first-child,:where(:host(.mtrl-rtl)) .mtrl-card__actions>*:first-child,[dir=rtl] .mtrl-card__actions>*:not(:where(.mtrl-ltr,.mtrl-ltr *)):first-child{margin-left:4px;margin-right:8px}:where(.mtrl-rtl) .mtrl-card__actions>*:last-child,:where(:host(.mtrl-rtl)) .mtrl-card__actions>*:last-child,[dir=rtl] .mtrl-card__actions>*:not(:where(.mtrl-ltr,.mtrl-ltr *)):last-child{margin-right:4px;margin-left:8px}.mtrl-card__actions--full-bleed{padding:0}.mtrl-card__actions--full-bleed>*{margin:0;border-radius:0;flex:1 1 auto}.mtrl-card__actions--full-bleed>*:first-child{margin-left:0}.mtrl-card__actions--full-bleed>*:last-child{margin-right:0}.mtrl-card__actions--vertical{flex-direction:column}.mtrl-card__actions--vertical>*{width:100%;margin:4px 0}.mtrl-card__actions--vertical>*:first-child{margin-top:8px}.mtrl-card__actions--vertical>*:last-child{margin-bottom:8px}.mtrl-card__actions--center{justify-content:center}.mtrl-card__actions--end{justify-content:flex-end}.mtrl-card__actions--space-between{justify-content:space-between}.mtrl-card--state-disabled{opacity:.38;pointer-events:none}.mtrl-card--state-loading{pointer-events:none}.mtrl-card--dragging{cursor:grabbing}.mtrl-card__loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb, var(--mtrl-sys-color-surface) 70%, transparent);z-index:1}.mtrl-card__loading-spinner{width:40px;height:40px;border-radius:50%;border:3px solid color-mix(in srgb, var(--mtrl-sys-color-primary) 20%, transparent);border-top-color:var(--mtrl-sys-color-primary);animation:card-spinner 1s infinite linear}.mtrl-card__expandable-content{overflow:hidden;transition:max-height 250ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card__expand-button{background:none;border:none;padding:8px;cursor:pointer;color:var(--mtrl-sys-color-primary);display:inline-flex;align-items:center;justify-content:center}.mtrl-card__expand-button::before{content:\"\";display:inline-block;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card__expand-button[aria-expanded=true]::before{transform:rotate(-135deg)}.mtrl-card--swipeable{touch-action:pan-y;transition:transform 250ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-card__swipe-left-action,.mtrl-card__swipe-right-action{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@keyframes card-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media(max-width: 599px){.mtrl-card{width:100%}}" });

package/dist/elements/css/datepicker.css

@@ -1 +1 @@
-.mtrl-datepicker{position:relative;display:inline-flex;flex-direction:column;width:100%;max-width:360px;contain:inline-size;contain-intrinsic-inline-size:280px;color:var(--mtrl-sys-color-on-surface)}.mtrl-datepicker__anchor{display:flex;position:relative}.mtrl-datepicker__label{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400;margin-block-end:4px}.mtrl-datepicker__input{box-sizing:border-box;width:100%;min-width:0;height:56px;padding:12px 16px;border:1px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-datepicker__input:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:-2px}.mtrl-datepicker__input[aria-invalid=true]{border-color:var(--mtrl-sys-color-error)}.mtrl-datepicker__input:disabled{opacity:.38}.mtrl-datepicker__anchor .mtrl-datepicker__input{padding-inline-end:56px}.mtrl-datepicker__trigger{position:absolute;inset-inline-end:4px;top:4px;font-size:24px}.mtrl-datepicker__help,.mtrl-datepicker__error{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400;padding:4px 16px 0}.mtrl-datepicker__help{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-datepicker__error{color:var(--mtrl-sys-color-error)}.mtrl-datepicker__error:empty{display:none}.mtrl-datepicker__calendar{--mtrl-datepicker-grid-inset: 12px;box-sizing:border-box;padding:0;border:0;width:360px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;color:var(--mtrl-sys-color-on-surface);background:var(--mtrl-sys-color-surface-container-high);border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-datepicker__calendar::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-datepicker--modal{position:fixed;inset:0;margin:auto}.mtrl-datepicker--fullscreen{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;box-shadow:none;overflow:hidden}.mtrl-datepicker--fullscreen .mtrl-datepicker__content{height:100%}.mtrl-datepicker--fullscreen .mtrl-datepicker__modal-header{min-height:128px;padding:64px 64px 12px}.mtrl-datepicker--fullscreen .mtrl-datepicker__close{position:absolute;inset-inline-start:4px;top:4px}.mtrl-datepicker--fullscreen .mtrl-datepicker__save{position:absolute;inset-inline-end:12px;top:8px}.mtrl-datepicker--fullscreen .mtrl-datepicker__title{margin-bottom:0}.mtrl-datepicker--fullscreen .mtrl-datepicker__headline{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-datepicker--fullscreen .mtrl-datepicker__weekdays{padding:0 var(--mtrl-datepicker-grid-inset)}.mtrl-datepicker__list{flex:1;min-height:0;position:relative;overflow-y:auto;overscroll-behavior:contain}.mtrl-datepicker__subhead{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant);padding:20px 24px 8px}.mtrl-datepicker--docked{border-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-datepicker--docked{position:absolute;inset:auto;top:100%;inset-inline-start:0;margin:8px 0 0;z-index:600}.mtrl-datepicker__content{display:flex;flex-direction:column}.mtrl-datepicker__modal-header{position:relative;box-sizing:border-box;min-height:120px;padding:16px 64px 16px 24px;border-bottom:1px solid var(--mtrl-sys-color-outline-variant);color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-datepicker--range .mtrl-datepicker__modal-header{min-height:128px}.mtrl-datepicker--range .mtrl-datepicker__headline{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-datepicker__title{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;margin-bottom:20px}.mtrl-datepicker__headline{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:32px;line-height:40px;letter-spacing:0;font-weight:400;overflow-wrap:anywhere}.mtrl-datepicker__mode-toggle{position:absolute;inset-inline-end:12px;bottom:12px;font-size:24px}.mtrl-datepicker__header{display:flex;align-items:center;padding:4px 12px;min-height:56px;box-sizing:border-box}.mtrl-datepicker__navigation{display:flex;flex:1}.mtrl-datepicker__month-selector,.mtrl-datepicker__year-selector{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;padding:0 8px}.mtrl-datepicker__trigger,.mtrl-datepicker__mode-toggle,.mtrl-datepicker__prev,.mtrl-datepicker__next,.mtrl-datepicker__month-selector,.mtrl-datepicker__year-selector,.mtrl-datepicker__cancel,.mtrl-datepicker__confirm,.mtrl-datepicker__close,.mtrl-datepicker__save{box-sizing:border-box;min-width:48px;min-height:48px;border:0;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);color:var(--mtrl-sys-color-on-surface-variant);background:rgba(0,0,0,0);cursor:pointer}.mtrl-datepicker__trigger:hover:not(:disabled),.mtrl-datepicker__mode-toggle:hover:not(:disabled),.mtrl-datepicker__prev:hover:not(:disabled),.mtrl-datepicker__next:hover:not(:disabled),.mtrl-datepicker__month-selector:hover:not(:disabled),.mtrl-datepicker__year-selector:hover:not(:disabled),.mtrl-datepicker__cancel:hover:not(:disabled),.mtrl-datepicker__confirm:hover:not(:disabled),.mtrl-datepicker__close:hover:not(:disabled),.mtrl-datepicker__save:hover:not(:disabled){background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-datepicker__trigger:focus-visible,.mtrl-datepicker__mode-toggle:focus-visible,.mtrl-datepicker__prev:focus-visible,.mtrl-datepicker__next:focus-visible,.mtrl-datepicker__month-selector:focus-visible,.mtrl-datepicker__year-selector:focus-visible,.mtrl-datepicker__cancel:focus-visible,.mtrl-datepicker__confirm:focus-visible,.mtrl-datepicker__close:focus-visible,.mtrl-datepicker__save:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:-2px;background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-datepicker__trigger:disabled,.mtrl-datepicker__mode-toggle:disabled,.mtrl-datepicker__prev:disabled,.mtrl-datepicker__next:disabled,.mtrl-datepicker__month-selector:disabled,.mtrl-datepicker__year-selector:disabled,.mtrl-datepicker__cancel:disabled,.mtrl-datepicker__confirm:disabled,.mtrl-datepicker__close:disabled,.mtrl-datepicker__save:disabled{opacity:.38;cursor:default}.mtrl-datepicker__trigger,.mtrl-datepicker__mode-toggle,.mtrl-datepicker__prev,.mtrl-datepicker__next,.mtrl-datepicker__close{display:inline-flex;align-items:center;justify-content:center}.mtrl-datepicker--animate[open]{animation:mtrl-datepicker-appear 150ms cubic-bezier(0.2, 0, 0, 1)}@media(prefers-reduced-motion: reduce){.mtrl-datepicker--animate[open]{animation:none}}.mtrl-datepicker__days{padding:0 var(--mtrl-datepicker-grid-inset)}.mtrl-datepicker__track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}.mtrl-datepicker__track::-webkit-scrollbar{display:none}.mtrl-datepicker__track>.mtrl-datepicker__days{flex:0 0 100%;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always}.mtrl-datepicker__weekdays,.mtrl-datepicker__week{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.mtrl-datepicker__weekday,.mtrl-datepicker__cell{display:flex;align-items:center;justify-content:center;height:48px;min-width:0}.mtrl-datepicker__weekday{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-datepicker__cell--range{position:relative;background:linear-gradient(transparent 4px, var(--mtrl-sys-color-secondary-container) 4px, var(--mtrl-sys-color-secondary-container) 44px, transparent 44px) no-repeat}.mtrl-datepicker__cell--range .mtrl-datepicker__day:not(.mtrl-datepicker__day--selected){color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-datepicker__cell--range-start{background-size:50% 100%;background-position:100% 0}.mtrl-datepicker__cell--range-start:dir(rtl){background-position:0 0}.mtrl-datepicker__cell--range-end{background-size:50% 100%;background-position:0 0}.mtrl-datepicker__cell--range-end:dir(rtl){background-position:100% 0}.mtrl-datepicker__cell--range-start.mtrl-datepicker__cell--range-end{background:none}.mtrl-datepicker__cell--range:is(:last-child:not(.mtrl-datepicker__cell--range-end),:first-child:not(.mtrl-datepicker__cell--range-start))::before{content:"";position:absolute;top:4px;width:var(--mtrl-datepicker-grid-inset);height:40px;background:var(--mtrl-sys-color-secondary-container)}.mtrl-datepicker__cell--range:last-child::before{inset-inline-start:100%}.mtrl-datepicker__cell--range:first-child::before{inset-inline-end:100%}.mtrl-datepicker__day{position:relative;isolation:isolate;width:100%;height:48px;padding:0;border:0;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface);cursor:pointer;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;--mtrl-datepicker-day-layer: var(--mtrl-sys-color-on-surface-variant)}.mtrl-datepicker__day::before,.mtrl-datepicker__day::after{content:"";position:absolute;z-index:-1;inset:50% auto auto 50%;transform:translate(-50%, -50%);width:40px;height:40px;border-radius:50%;box-sizing:border-box}.mtrl-datepicker__day:hover:not(:disabled)::after{background:color-mix(in srgb, var(--mtrl-datepicker-day-layer) 8%, transparent)}.mtrl-datepicker__day:focus-visible{outline:none}.mtrl-datepicker__day:focus-visible::after{background:color-mix(in srgb, var(--mtrl-datepicker-day-layer) 10%, transparent);outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-datepicker__day:active:not(:disabled)::after{background:color-mix(in srgb, var(--mtrl-datepicker-day-layer) 10%, transparent)}.mtrl-datepicker__day--outside{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-datepicker__day--today{color:var(--mtrl-sys-color-primary)}.mtrl-datepicker__day--today::before{border:1px solid var(--mtrl-sys-color-primary)}.mtrl-datepicker__day--highlight{text-decoration:underline}.mtrl-datepicker__day--selected,.mtrl-datepicker__day--selected:hover:not(:disabled){color:var(--mtrl-sys-color-on-primary);--mtrl-datepicker-day-layer: var(--mtrl-sys-color-on-primary)}.mtrl-datepicker__day--selected::before,.mtrl-datepicker__day--selected:hover:not(:disabled)::before{background:var(--mtrl-sys-color-primary)}.mtrl-datepicker__day:disabled{opacity:.38;cursor:default}.mtrl-datepicker__months,.mtrl-datepicker__years{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px 8px;padding:16px 24px}.mtrl-datepicker__years{position:relative;box-sizing:border-box;height:336px;overflow-y:auto;overscroll-behavior:contain}.mtrl-datepicker__month,.mtrl-datepicker__year{position:relative;isolation:isolate;min-width:0;height:48px;border:0;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;cursor:pointer}.mtrl-datepicker__month::before,.mtrl-datepicker__year::before{content:"";position:absolute;z-index:-1;width:72px;max-width:100%;height:36px;inset:50% auto auto 50%;transform:translate(-50%, -50%);border-radius:var(--mtrl-sys-shape-corner-full, 9999px)}.mtrl-datepicker__month:hover::before,.mtrl-datepicker__year:hover::before{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-datepicker__month[aria-pressed=true],.mtrl-datepicker__year[aria-pressed=true]{color:var(--mtrl-sys-color-on-primary)}.mtrl-datepicker__month[aria-pressed=true]::before,.mtrl-datepicker__year[aria-pressed=true]::before{background:var(--mtrl-sys-color-primary)}.mtrl-datepicker__month:focus-visible,.mtrl-datepicker__year:focus-visible{outline:none}.mtrl-datepicker__month:focus-visible::before,.mtrl-datepicker__year:focus-visible::before{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:2px}.mtrl-datepicker__fields{display:grid;gap:16px;padding:24px}.mtrl-datepicker__field{display:flex;flex-direction:column}.mtrl-datepicker__footer{display:flex;justify-content:flex-end;gap:8px;padding:4px 12px}.mtrl-datepicker__prev svg:dir(rtl),.mtrl-datepicker__next svg:dir(rtl){transform:scaleX(-1)}.mtrl-datepicker__cancel,.mtrl-datepicker__confirm,.mtrl-datepicker__save{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;padding:0 12px;color:var(--mtrl-sys-color-primary)}.mtrl-datepicker__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes mtrl-datepicker-appear{from{opacity:0}to{opacity:1}}
+.mtrl-datepicker{position:relative;display:inline-flex;flex-direction:column;width:100%;max-width:360px;contain:inline-size;contain-intrinsic-inline-size:280px;color:var(--mtrl-sys-color-on-surface);--mtrl-datepicker-start: 100% 0;--mtrl-datepicker-end: 0 0;--mtrl-datepicker-flip: none}.mtrl-datepicker:where(.mtrl-rtl,[dir=rtl]),:where(.mtrl-rtl) .mtrl-datepicker,:where(:host(.mtrl-rtl)) .mtrl-datepicker,[dir=rtl] .mtrl-datepicker:not(:where(.mtrl-ltr,.mtrl-ltr *)){--mtrl-datepicker-start: 0 0;--mtrl-datepicker-end: 100% 0;--mtrl-datepicker-flip: scaleX(-1)}.mtrl-datepicker__anchor{display:flex;position:relative}.mtrl-datepicker__label{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400;margin-block-end:4px}.mtrl-datepicker__input{box-sizing:border-box;width:100%;min-width:0;height:56px;padding:12px 16px;border:1px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-datepicker__input:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:-2px}.mtrl-datepicker__input[aria-invalid=true]{border-color:var(--mtrl-sys-color-error)}.mtrl-datepicker__input:disabled{opacity:.38}.mtrl-datepicker__anchor .mtrl-datepicker__input{padding-inline-end:56px}.mtrl-datepicker__trigger{position:absolute;inset-inline-end:4px;top:4px;font-size:24px}.mtrl-datepicker__help,.mtrl-datepicker__error{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400;padding:4px 16px 0}.mtrl-datepicker__help{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-datepicker__error{color:var(--mtrl-sys-color-error)}.mtrl-datepicker__error:empty{display:none}.mtrl-datepicker__calendar{--mtrl-datepicker-grid-inset: 12px;box-sizing:border-box;padding:0;border:0;width:360px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;color:var(--mtrl-sys-color-on-surface);background:var(--mtrl-sys-color-surface-container-high);border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-datepicker__calendar::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-datepicker--modal{position:fixed;inset:0;margin:auto}.mtrl-datepicker--fullscreen{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;box-shadow:none;overflow:hidden}.mtrl-datepicker--fullscreen .mtrl-datepicker__content{height:100%}.mtrl-datepicker--fullscreen .mtrl-datepicker__modal-header{min-height:128px;padding:64px 64px 12px}.mtrl-datepicker--fullscreen .mtrl-datepicker__close{position:absolute;inset-inline-start:4px;top:4px}.mtrl-datepicker--fullscreen .mtrl-datepicker__save{position:absolute;inset-inline-end:12px;top:8px}.mtrl-datepicker--fullscreen .mtrl-datepicker__title{margin-bottom:0}.mtrl-datepicker--fullscreen .mtrl-datepicker__headline{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-datepicker--fullscreen .mtrl-datepicker__weekdays{padding:0 var(--mtrl-datepicker-grid-inset)}.mtrl-datepicker__list{flex:1;min-height:0;position:relative;overflow-y:auto;overscroll-behavior:contain}.mtrl-datepicker__subhead{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant);padding:20px 24px 8px}.mtrl-datepicker--docked{border-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-datepicker--docked{position:absolute;inset:auto;top:100%;inset-inline-start:0;margin:8px 0 0;z-index:600}.mtrl-datepicker__content{display:flex;flex-direction:column}.mtrl-datepicker__modal-header{position:relative;box-sizing:border-box;min-height:120px;padding:16px 64px 16px 24px;border-bottom:1px solid var(--mtrl-sys-color-outline-variant);color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-datepicker--range .mtrl-datepicker__modal-header{min-height:128px}.mtrl-datepicker--range .mtrl-datepicker__headline{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-datepicker__title{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;margin-bottom:20px}.mtrl-datepicker__headline{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:32px;line-height:40px;letter-spacing:0;font-weight:400;overflow-wrap:anywhere}.mtrl-datepicker__mode-toggle{position:absolute;inset-inline-end:12px;bottom:12px;font-size:24px}.mtrl-datepicker__header{display:flex;align-items:center;padding:4px 12px;min-height:56px;box-sizing:border-box}.mtrl-datepicker__navigation{display:flex;flex:1}.mtrl-datepicker__month-selector,.mtrl-datepicker__year-selector{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;padding:0 8px}.mtrl-datepicker__trigger,.mtrl-datepicker__mode-toggle,.mtrl-datepicker__prev,.mtrl-datepicker__next,.mtrl-datepicker__month-selector,.mtrl-datepicker__year-selector,.mtrl-datepicker__cancel,.mtrl-datepicker__confirm,.mtrl-datepicker__close,.mtrl-datepicker__save{box-sizing:border-box;min-width:48px;min-height:48px;border:0;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);color:var(--mtrl-sys-color-on-surface-variant);background:rgba(0,0,0,0);cursor:pointer}.mtrl-datepicker__trigger:hover:not(:disabled),.mtrl-datepicker__mode-toggle:hover:not(:disabled),.mtrl-datepicker__prev:hover:not(:disabled),.mtrl-datepicker__next:hover:not(:disabled),.mtrl-datepicker__month-selector:hover:not(:disabled),.mtrl-datepicker__year-selector:hover:not(:disabled),.mtrl-datepicker__cancel:hover:not(:disabled),.mtrl-datepicker__confirm:hover:not(:disabled),.mtrl-datepicker__close:hover:not(:disabled),.mtrl-datepicker__save:hover:not(:disabled){background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-datepicker__trigger:focus-visible,.mtrl-datepicker__mode-toggle:focus-visible,.mtrl-datepicker__prev:focus-visible,.mtrl-datepicker__next:focus-visible,.mtrl-datepicker__month-selector:focus-visible,.mtrl-datepicker__year-selector:focus-visible,.mtrl-datepicker__cancel:focus-visible,.mtrl-datepicker__confirm:focus-visible,.mtrl-datepicker__close:focus-visible,.mtrl-datepicker__save:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:-2px;background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-datepicker__trigger:disabled,.mtrl-datepicker__mode-toggle:disabled,.mtrl-datepicker__prev:disabled,.mtrl-datepicker__next:disabled,.mtrl-datepicker__month-selector:disabled,.mtrl-datepicker__year-selector:disabled,.mtrl-datepicker__cancel:disabled,.mtrl-datepicker__confirm:disabled,.mtrl-datepicker__close:disabled,.mtrl-datepicker__save:disabled{opacity:.38;cursor:default}.mtrl-datepicker__trigger,.mtrl-datepicker__mode-toggle,.mtrl-datepicker__prev,.mtrl-datepicker__next,.mtrl-datepicker__close{display:inline-flex;align-items:center;justify-content:center}.mtrl-datepicker--animate[open]{animation:mtrl-datepicker-appear 150ms cubic-bezier(0.2, 0, 0, 1)}@media(prefers-reduced-motion: reduce){.mtrl-datepicker--animate[open]{animation:none}}.mtrl-datepicker__days{padding:0 var(--mtrl-datepicker-grid-inset)}.mtrl-datepicker__track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}.mtrl-datepicker__track::-webkit-scrollbar{display:none}.mtrl-datepicker__track>.mtrl-datepicker__days{flex:0 0 100%;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always}.mtrl-datepicker__weekdays,.mtrl-datepicker__week{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.mtrl-datepicker__weekday,.mtrl-datepicker__cell{display:flex;align-items:center;justify-content:center;height:48px;min-width:0}.mtrl-datepicker__weekday{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-datepicker__cell--range{position:relative;background:linear-gradient(transparent 4px, var(--mtrl-sys-color-secondary-container) 4px, var(--mtrl-sys-color-secondary-container) 44px, transparent 44px) no-repeat}.mtrl-datepicker__cell--range .mtrl-datepicker__day:not(.mtrl-datepicker__day--selected){color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-datepicker__cell--range-start{background-size:50% 100%;background-position:var(--mtrl-datepicker-start)}.mtrl-datepicker__cell--range-end{background-size:50% 100%;background-position:var(--mtrl-datepicker-end)}.mtrl-datepicker__cell--range-start.mtrl-datepicker__cell--range-end{background:none}.mtrl-datepicker__cell--range:is(:last-child:not(.mtrl-datepicker__cell--range-end),:first-child:not(.mtrl-datepicker__cell--range-start))::before{content:"";position:absolute;top:4px;width:var(--mtrl-datepicker-grid-inset);height:40px;background:var(--mtrl-sys-color-secondary-container)}.mtrl-datepicker__cell--range:last-child::before{inset-inline-start:100%}.mtrl-datepicker__cell--range:first-child::before{inset-inline-end:100%}.mtrl-datepicker__day{position:relative;isolation:isolate;width:100%;height:48px;padding:0;border:0;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface);cursor:pointer;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;--mtrl-datepicker-day-layer: var(--mtrl-sys-color-on-surface-variant)}.mtrl-datepicker__day::before,.mtrl-datepicker__day::after{content:"";position:absolute;z-index:-1;inset:50% auto auto 50%;transform:translate(-50%, -50%);width:40px;height:40px;border-radius:50%;box-sizing:border-box}.mtrl-datepicker__day:hover:not(:disabled)::after{background:color-mix(in srgb, var(--mtrl-datepicker-day-layer) 8%, transparent)}.mtrl-datepicker__day:focus-visible{outline:none}.mtrl-datepicker__day:focus-visible::after{background:color-mix(in srgb, var(--mtrl-datepicker-day-layer) 10%, transparent);outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-datepicker__day:active:not(:disabled)::after{background:color-mix(in srgb, var(--mtrl-datepicker-day-layer) 10%, transparent)}.mtrl-datepicker__day--outside{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-datepicker__day--today{color:var(--mtrl-sys-color-primary)}.mtrl-datepicker__day--today::before{border:1px solid var(--mtrl-sys-color-primary)}.mtrl-datepicker__day--highlight{text-decoration:underline}.mtrl-datepicker__day--selected,.mtrl-datepicker__day--selected:hover:not(:disabled){color:var(--mtrl-sys-color-on-primary);--mtrl-datepicker-day-layer: var(--mtrl-sys-color-on-primary)}.mtrl-datepicker__day--selected::before,.mtrl-datepicker__day--selected:hover:not(:disabled)::before{background:var(--mtrl-sys-color-primary)}.mtrl-datepicker__day:disabled{opacity:.38;cursor:default}.mtrl-datepicker__months,.mtrl-datepicker__years{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px 8px;padding:16px 24px}.mtrl-datepicker__years{position:relative;box-sizing:border-box;height:336px;overflow-y:auto;overscroll-behavior:contain}.mtrl-datepicker__month,.mtrl-datepicker__year{position:relative;isolation:isolate;min-width:0;height:48px;border:0;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;cursor:pointer}.mtrl-datepicker__month::before,.mtrl-datepicker__year::before{content:"";position:absolute;z-index:-1;width:72px;max-width:100%;height:36px;inset:50% auto auto 50%;transform:translate(-50%, -50%);border-radius:var(--mtrl-sys-shape-corner-full, 9999px)}.mtrl-datepicker__month:hover::before,.mtrl-datepicker__year:hover::before{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-datepicker__month[aria-pressed=true],.mtrl-datepicker__year[aria-pressed=true]{color:var(--mtrl-sys-color-on-primary)}.mtrl-datepicker__month[aria-pressed=true]::before,.mtrl-datepicker__year[aria-pressed=true]::before{background:var(--mtrl-sys-color-primary)}.mtrl-datepicker__month:focus-visible,.mtrl-datepicker__year:focus-visible{outline:none}.mtrl-datepicker__month:focus-visible::before,.mtrl-datepicker__year:focus-visible::before{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:2px}.mtrl-datepicker__fields{display:grid;gap:16px;padding:24px}.mtrl-datepicker__field{display:flex;flex-direction:column}.mtrl-datepicker__footer{display:flex;justify-content:flex-end;gap:8px;padding:4px 12px}.mtrl-datepicker__prev svg,.mtrl-datepicker__next svg{transform:var(--mtrl-datepicker-flip)}.mtrl-datepicker__cancel,.mtrl-datepicker__confirm,.mtrl-datepicker__save{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;padding:0 12px;color:var(--mtrl-sys-color-primary)}.mtrl-datepicker__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes mtrl-datepicker-appear{from{opacity:0}to{opacity:1}}

package/dist/elements/css/datepicker.js

@@ -1,3 +1,3 @@
 import "./ripple.js";
 import { registerStyles } from "../styles.js";
-registerStyles({ "datepicker": ".mtrl-datepicker{position:relative;display:inline-flex;flex-direction:column;width:100%;max-width:360px;contain:inline-size;contain-intrinsic-inline-size:280px;color:var(--mtrl-sys-color-on-surface)}.mtrl-datepicker__anchor{display:flex;position:relative}.mtrl-datepicker__label{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400;margin-block-end:4px}.mtrl-datepicker__input{box-sizing:border-box;width:100%;min-width:0;height:56px;padding:12px 16px;border:1px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-datepicker__input:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:-2px}.mtrl-datepicker__input[aria-invalid=true]{border-color:var(--mtrl-sys-color-error)}.mtrl-datepicker__input:disabled{opacity:.38}.mtrl-datepicker__anchor .mtrl-datepicker__input{padding-inline-end:56px}.mtrl-datepicker__trigger{position:absolute;inset-inline-end:4px;top:4px;font-size:24px}.mtrl-datepicker__help,.mtrl-datepicker__error{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400;padding:4px 16px 0}.mtrl-datepicker__help{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-datepicker__error{color:var(--mtrl-sys-color-error)}.mtrl-datepicker__error:empty{display:none}.mtrl-datepicker__calendar{--mtrl-datepicker-grid-inset: 12px;box-sizing:border-box;padding:0;border:0;width:360px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;color:var(--mtrl-sys-color-on-surface);background:var(--mtrl-sys-color-surface-container-high);border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-datepicker__calendar::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-datepicker--modal{position:fixed;inset:0;margin:auto}.mtrl-datepicker--fullscreen{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;box-shadow:none;overflow:hidden}.mtrl-datepicker--fullscreen .mtrl-datepicker__content{height:100%}.mtrl-datepicker--fullscreen .mtrl-datepicker__modal-header{min-height:128px;padding:64px 64px 12px}.mtrl-datepicker--fullscreen .mtrl-datepicker__close{position:absolute;inset-inline-start:4px;top:4px}.mtrl-datepicker--fullscreen .mtrl-datepicker__save{position:absolute;inset-inline-end:12px;top:8px}.mtrl-datepicker--fullscreen .mtrl-datepicker__title{margin-bottom:0}.mtrl-datepicker--fullscreen .mtrl-datepicker__headline{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-datepicker--fullscreen .mtrl-datepicker__weekdays{padding:0 var(--mtrl-datepicker-grid-inset)}.mtrl-datepicker__list{flex:1;min-height:0;position:relative;overflow-y:auto;overscroll-behavior:contain}.mtrl-datepicker__subhead{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant);padding:20px 24px 8px}.mtrl-datepicker--docked{border-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-datepicker--docked{position:absolute;inset:auto;top:100%;inset-inline-start:0;margin:8px 0 0;z-index:600}.mtrl-datepicker__content{display:flex;flex-direction:column}.mtrl-datepicker__modal-header{position:relative;box-sizing:border-box;min-height:120px;padding:16px 64px 16px 24px;border-bottom:1px solid var(--mtrl-sys-color-outline-variant);color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-datepicker--range .mtrl-datepicker__modal-header{min-height:128px}.mtrl-datepicker--range .mtrl-datepicker__headline{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-datepicker__title{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;margin-bottom:20px}.mtrl-datepicker__headline{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:32px;line-height:40px;letter-spacing:0;font-weight:400;overflow-wrap:anywhere}.mtrl-datepicker__mode-toggle{position:absolute;inset-inline-end:12px;bottom:12px;font-size:24px}.mtrl-datepicker__header{display:flex;align-items:center;padding:4px 12px;min-height:56px;box-sizing:border-box}.mtrl-datepicker__navigation{display:flex;flex:1}.mtrl-datepicker__month-selector,.mtrl-datepicker__year-selector{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;padding:0 8px}.mtrl-datepicker__trigger,.mtrl-datepicker__mode-toggle,.mtrl-datepicker__prev,.mtrl-datepicker__next,.mtrl-datepicker__month-selector,.mtrl-datepicker__year-selector,.mtrl-datepicker__cancel,.mtrl-datepicker__confirm,.mtrl-datepicker__close,.mtrl-datepicker__save{box-sizing:border-box;min-width:48px;min-height:48px;border:0;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);color:var(--mtrl-sys-color-on-surface-variant);background:rgba(0,0,0,0);cursor:pointer}.mtrl-datepicker__trigger:hover:not(:disabled),.mtrl-datepicker__mode-toggle:hover:not(:disabled),.mtrl-datepicker__prev:hover:not(:disabled),.mtrl-datepicker__next:hover:not(:disabled),.mtrl-datepicker__month-selector:hover:not(:disabled),.mtrl-datepicker__year-selector:hover:not(:disabled),.mtrl-datepicker__cancel:hover:not(:disabled),.mtrl-datepicker__confirm:hover:not(:disabled),.mtrl-datepicker__close:hover:not(:disabled),.mtrl-datepicker__save:hover:not(:disabled){background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-datepicker__trigger:focus-visible,.mtrl-datepicker__mode-toggle:focus-visible,.mtrl-datepicker__prev:focus-visible,.mtrl-datepicker__next:focus-visible,.mtrl-datepicker__month-selector:focus-visible,.mtrl-datepicker__year-selector:focus-visible,.mtrl-datepicker__cancel:focus-visible,.mtrl-datepicker__confirm:focus-visible,.mtrl-datepicker__close:focus-visible,.mtrl-datepicker__save:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:-2px;background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-datepicker__trigger:disabled,.mtrl-datepicker__mode-toggle:disabled,.mtrl-datepicker__prev:disabled,.mtrl-datepicker__next:disabled,.mtrl-datepicker__month-selector:disabled,.mtrl-datepicker__year-selector:disabled,.mtrl-datepicker__cancel:disabled,.mtrl-datepicker__confirm:disabled,.mtrl-datepicker__close:disabled,.mtrl-datepicker__save:disabled{opacity:.38;cursor:default}.mtrl-datepicker__trigger,.mtrl-datepicker__mode-toggle,.mtrl-datepicker__prev,.mtrl-datepicker__next,.mtrl-datepicker__close{display:inline-flex;align-items:center;justify-content:center}.mtrl-datepicker--animate[open]{animation:mtrl-datepicker-appear 150ms cubic-bezier(0.2, 0, 0, 1)}@media(prefers-reduced-motion: reduce){.mtrl-datepicker--animate[open]{animation:none}}.mtrl-datepicker__days{padding:0 var(--mtrl-datepicker-grid-inset)}.mtrl-datepicker__track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}.mtrl-datepicker__track::-webkit-scrollbar{display:none}.mtrl-datepicker__track>.mtrl-datepicker__days{flex:0 0 100%;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always}.mtrl-datepicker__weekdays,.mtrl-datepicker__week{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.mtrl-datepicker__weekday,.mtrl-datepicker__cell{display:flex;align-items:center;justify-content:center;height:48px;min-width:0}.mtrl-datepicker__weekday{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-datepicker__cell--range{position:relative;background:linear-gradient(transparent 4px, var(--mtrl-sys-color-secondary-container) 4px, var(--mtrl-sys-color-secondary-container) 44px, transparent 44px) no-repeat}.mtrl-datepicker__cell--range .mtrl-datepicker__day:not(.mtrl-datepicker__day--selected){color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-datepicker__cell--range-start{background-size:50% 100%;background-position:100% 0}.mtrl-datepicker__cell--range-start:dir(rtl){background-position:0 0}.mtrl-datepicker__cell--range-end{background-size:50% 100%;background-position:0 0}.mtrl-datepicker__cell--range-end:dir(rtl){background-position:100% 0}.mtrl-datepicker__cell--range-start.mtrl-datepicker__cell--range-end{background:none}.mtrl-datepicker__cell--range:is(:last-child:not(.mtrl-datepicker__cell--range-end),:first-child:not(.mtrl-datepicker__cell--range-start))::before{content:\"\";position:absolute;top:4px;width:var(--mtrl-datepicker-grid-inset);height:40px;background:var(--mtrl-sys-color-secondary-container)}.mtrl-datepicker__cell--range:last-child::before{inset-inline-start:100%}.mtrl-datepicker__cell--range:first-child::before{inset-inline-end:100%}.mtrl-datepicker__day{position:relative;isolation:isolate;width:100%;height:48px;padding:0;border:0;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface);cursor:pointer;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;--mtrl-datepicker-day-layer: var(--mtrl-sys-color-on-surface-variant)}.mtrl-datepicker__day::before,.mtrl-datepicker__day::after{content:\"\";position:absolute;z-index:-1;inset:50% auto auto 50%;transform:translate(-50%, -50%);width:40px;height:40px;border-radius:50%;box-sizing:border-box}.mtrl-datepicker__day:hover:not(:disabled)::after{background:color-mix(in srgb, var(--mtrl-datepicker-day-layer) 8%, transparent)}.mtrl-datepicker__day:focus-visible{outline:none}.mtrl-datepicker__day:focus-visible::after{background:color-mix(in srgb, var(--mtrl-datepicker-day-layer) 10%, transparent);outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-datepicker__day:active:not(:disabled)::after{background:color-mix(in srgb, var(--mtrl-datepicker-day-layer) 10%, transparent)}.mtrl-datepicker__day--outside{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-datepicker__day--today{color:var(--mtrl-sys-color-primary)}.mtrl-datepicker__day--today::before{border:1px solid var(--mtrl-sys-color-primary)}.mtrl-datepicker__day--highlight{text-decoration:underline}.mtrl-datepicker__day--selected,.mtrl-datepicker__day--selected:hover:not(:disabled){color:var(--mtrl-sys-color-on-primary);--mtrl-datepicker-day-layer: var(--mtrl-sys-color-on-primary)}.mtrl-datepicker__day--selected::before,.mtrl-datepicker__day--selected:hover:not(:disabled)::before{background:var(--mtrl-sys-color-primary)}.mtrl-datepicker__day:disabled{opacity:.38;cursor:default}.mtrl-datepicker__months,.mtrl-datepicker__years{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px 8px;padding:16px 24px}.mtrl-datepicker__years{position:relative;box-sizing:border-box;height:336px;overflow-y:auto;overscroll-behavior:contain}.mtrl-datepicker__month,.mtrl-datepicker__year{position:relative;isolation:isolate;min-width:0;height:48px;border:0;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;cursor:pointer}.mtrl-datepicker__month::before,.mtrl-datepicker__year::before{content:\"\";position:absolute;z-index:-1;width:72px;max-width:100%;height:36px;inset:50% auto auto 50%;transform:translate(-50%, -50%);border-radius:var(--mtrl-sys-shape-corner-full, 9999px)}.mtrl-datepicker__month:hover::before,.mtrl-datepicker__year:hover::before{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-datepicker__month[aria-pressed=true],.mtrl-datepicker__year[aria-pressed=true]{color:var(--mtrl-sys-color-on-primary)}.mtrl-datepicker__month[aria-pressed=true]::before,.mtrl-datepicker__year[aria-pressed=true]::before{background:var(--mtrl-sys-color-primary)}.mtrl-datepicker__month:focus-visible,.mtrl-datepicker__year:focus-visible{outline:none}.mtrl-datepicker__month:focus-visible::before,.mtrl-datepicker__year:focus-visible::before{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:2px}.mtrl-datepicker__fields{display:grid;gap:16px;padding:24px}.mtrl-datepicker__field{display:flex;flex-direction:column}.mtrl-datepicker__footer{display:flex;justify-content:flex-end;gap:8px;padding:4px 12px}.mtrl-datepicker__prev svg:dir(rtl),.mtrl-datepicker__next svg:dir(rtl){transform:scaleX(-1)}.mtrl-datepicker__cancel,.mtrl-datepicker__confirm,.mtrl-datepicker__save{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;padding:0 12px;color:var(--mtrl-sys-color-primary)}.mtrl-datepicker__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes mtrl-datepicker-appear{from{opacity:0}to{opacity:1}}" });
+registerStyles({ "datepicker": ".mtrl-datepicker{position:relative;display:inline-flex;flex-direction:column;width:100%;max-width:360px;contain:inline-size;contain-intrinsic-inline-size:280px;color:var(--mtrl-sys-color-on-surface);--mtrl-datepicker-start: 100% 0;--mtrl-datepicker-end: 0 0;--mtrl-datepicker-flip: none}.mtrl-datepicker:where(.mtrl-rtl,[dir=rtl]),:where(.mtrl-rtl) .mtrl-datepicker,:where(:host(.mtrl-rtl)) .mtrl-datepicker,[dir=rtl] .mtrl-datepicker:not(:where(.mtrl-ltr,.mtrl-ltr *)){--mtrl-datepicker-start: 0 0;--mtrl-datepicker-end: 100% 0;--mtrl-datepicker-flip: scaleX(-1)}.mtrl-datepicker__anchor{display:flex;position:relative}.mtrl-datepicker__label{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400;margin-block-end:4px}.mtrl-datepicker__input{box-sizing:border-box;width:100%;min-width:0;height:56px;padding:12px 16px;border:1px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-datepicker__input:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:-2px}.mtrl-datepicker__input[aria-invalid=true]{border-color:var(--mtrl-sys-color-error)}.mtrl-datepicker__input:disabled{opacity:.38}.mtrl-datepicker__anchor .mtrl-datepicker__input{padding-inline-end:56px}.mtrl-datepicker__trigger{position:absolute;inset-inline-end:4px;top:4px;font-size:24px}.mtrl-datepicker__help,.mtrl-datepicker__error{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400;padding:4px 16px 0}.mtrl-datepicker__help{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-datepicker__error{color:var(--mtrl-sys-color-error)}.mtrl-datepicker__error:empty{display:none}.mtrl-datepicker__calendar{--mtrl-datepicker-grid-inset: 12px;box-sizing:border-box;padding:0;border:0;width:360px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;color:var(--mtrl-sys-color-on-surface);background:var(--mtrl-sys-color-surface-container-high);border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}.mtrl-datepicker__calendar::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-datepicker--modal{position:fixed;inset:0;margin:auto}.mtrl-datepicker--fullscreen{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;box-shadow:none;overflow:hidden}.mtrl-datepicker--fullscreen .mtrl-datepicker__content{height:100%}.mtrl-datepicker--fullscreen .mtrl-datepicker__modal-header{min-height:128px;padding:64px 64px 12px}.mtrl-datepicker--fullscreen .mtrl-datepicker__close{position:absolute;inset-inline-start:4px;top:4px}.mtrl-datepicker--fullscreen .mtrl-datepicker__save{position:absolute;inset-inline-end:12px;top:8px}.mtrl-datepicker--fullscreen .mtrl-datepicker__title{margin-bottom:0}.mtrl-datepicker--fullscreen .mtrl-datepicker__headline{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-datepicker--fullscreen .mtrl-datepicker__weekdays{padding:0 var(--mtrl-datepicker-grid-inset)}.mtrl-datepicker__list{flex:1;min-height:0;position:relative;overflow-y:auto;overscroll-behavior:contain}.mtrl-datepicker__subhead{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant);padding:20px 24px 8px}.mtrl-datepicker--docked{border-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-datepicker--docked{position:absolute;inset:auto;top:100%;inset-inline-start:0;margin:8px 0 0;z-index:600}.mtrl-datepicker__content{display:flex;flex-direction:column}.mtrl-datepicker__modal-header{position:relative;box-sizing:border-box;min-height:120px;padding:16px 64px 16px 24px;border-bottom:1px solid var(--mtrl-sys-color-outline-variant);color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-datepicker--range .mtrl-datepicker__modal-header{min-height:128px}.mtrl-datepicker--range .mtrl-datepicker__headline{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-datepicker__title{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;margin-bottom:20px}.mtrl-datepicker__headline{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:32px;line-height:40px;letter-spacing:0;font-weight:400;overflow-wrap:anywhere}.mtrl-datepicker__mode-toggle{position:absolute;inset-inline-end:12px;bottom:12px;font-size:24px}.mtrl-datepicker__header{display:flex;align-items:center;padding:4px 12px;min-height:56px;box-sizing:border-box}.mtrl-datepicker__navigation{display:flex;flex:1}.mtrl-datepicker__month-selector,.mtrl-datepicker__year-selector{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;padding:0 8px}.mtrl-datepicker__trigger,.mtrl-datepicker__mode-toggle,.mtrl-datepicker__prev,.mtrl-datepicker__next,.mtrl-datepicker__month-selector,.mtrl-datepicker__year-selector,.mtrl-datepicker__cancel,.mtrl-datepicker__confirm,.mtrl-datepicker__close,.mtrl-datepicker__save{box-sizing:border-box;min-width:48px;min-height:48px;border:0;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);color:var(--mtrl-sys-color-on-surface-variant);background:rgba(0,0,0,0);cursor:pointer}.mtrl-datepicker__trigger:hover:not(:disabled),.mtrl-datepicker__mode-toggle:hover:not(:disabled),.mtrl-datepicker__prev:hover:not(:disabled),.mtrl-datepicker__next:hover:not(:disabled),.mtrl-datepicker__month-selector:hover:not(:disabled),.mtrl-datepicker__year-selector:hover:not(:disabled),.mtrl-datepicker__cancel:hover:not(:disabled),.mtrl-datepicker__confirm:hover:not(:disabled),.mtrl-datepicker__close:hover:not(:disabled),.mtrl-datepicker__save:hover:not(:disabled){background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-datepicker__trigger:focus-visible,.mtrl-datepicker__mode-toggle:focus-visible,.mtrl-datepicker__prev:focus-visible,.mtrl-datepicker__next:focus-visible,.mtrl-datepicker__month-selector:focus-visible,.mtrl-datepicker__year-selector:focus-visible,.mtrl-datepicker__cancel:focus-visible,.mtrl-datepicker__confirm:focus-visible,.mtrl-datepicker__close:focus-visible,.mtrl-datepicker__save:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:-2px;background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-datepicker__trigger:disabled,.mtrl-datepicker__mode-toggle:disabled,.mtrl-datepicker__prev:disabled,.mtrl-datepicker__next:disabled,.mtrl-datepicker__month-selector:disabled,.mtrl-datepicker__year-selector:disabled,.mtrl-datepicker__cancel:disabled,.mtrl-datepicker__confirm:disabled,.mtrl-datepicker__close:disabled,.mtrl-datepicker__save:disabled{opacity:.38;cursor:default}.mtrl-datepicker__trigger,.mtrl-datepicker__mode-toggle,.mtrl-datepicker__prev,.mtrl-datepicker__next,.mtrl-datepicker__close{display:inline-flex;align-items:center;justify-content:center}.mtrl-datepicker--animate[open]{animation:mtrl-datepicker-appear 150ms cubic-bezier(0.2, 0, 0, 1)}@media(prefers-reduced-motion: reduce){.mtrl-datepicker--animate[open]{animation:none}}.mtrl-datepicker__days{padding:0 var(--mtrl-datepicker-grid-inset)}.mtrl-datepicker__track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}.mtrl-datepicker__track::-webkit-scrollbar{display:none}.mtrl-datepicker__track>.mtrl-datepicker__days{flex:0 0 100%;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always}.mtrl-datepicker__weekdays,.mtrl-datepicker__week{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.mtrl-datepicker__weekday,.mtrl-datepicker__cell{display:flex;align-items:center;justify-content:center;height:48px;min-width:0}.mtrl-datepicker__weekday{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-datepicker__cell--range{position:relative;background:linear-gradient(transparent 4px, var(--mtrl-sys-color-secondary-container) 4px, var(--mtrl-sys-color-secondary-container) 44px, transparent 44px) no-repeat}.mtrl-datepicker__cell--range .mtrl-datepicker__day:not(.mtrl-datepicker__day--selected){color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-datepicker__cell--range-start{background-size:50% 100%;background-position:var(--mtrl-datepicker-start)}.mtrl-datepicker__cell--range-end{background-size:50% 100%;background-position:var(--mtrl-datepicker-end)}.mtrl-datepicker__cell--range-start.mtrl-datepicker__cell--range-end{background:none}.mtrl-datepicker__cell--range:is(:last-child:not(.mtrl-datepicker__cell--range-end),:first-child:not(.mtrl-datepicker__cell--range-start))::before{content:\"\";position:absolute;top:4px;width:var(--mtrl-datepicker-grid-inset);height:40px;background:var(--mtrl-sys-color-secondary-container)}.mtrl-datepicker__cell--range:last-child::before{inset-inline-start:100%}.mtrl-datepicker__cell--range:first-child::before{inset-inline-end:100%}.mtrl-datepicker__day{position:relative;isolation:isolate;width:100%;height:48px;padding:0;border:0;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface);cursor:pointer;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;--mtrl-datepicker-day-layer: var(--mtrl-sys-color-on-surface-variant)}.mtrl-datepicker__day::before,.mtrl-datepicker__day::after{content:\"\";position:absolute;z-index:-1;inset:50% auto auto 50%;transform:translate(-50%, -50%);width:40px;height:40px;border-radius:50%;box-sizing:border-box}.mtrl-datepicker__day:hover:not(:disabled)::after{background:color-mix(in srgb, var(--mtrl-datepicker-day-layer) 8%, transparent)}.mtrl-datepicker__day:focus-visible{outline:none}.mtrl-datepicker__day:focus-visible::after{background:color-mix(in srgb, var(--mtrl-datepicker-day-layer) 10%, transparent);outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-datepicker__day:active:not(:disabled)::after{background:color-mix(in srgb, var(--mtrl-datepicker-day-layer) 10%, transparent)}.mtrl-datepicker__day--outside{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-datepicker__day--today{color:var(--mtrl-sys-color-primary)}.mtrl-datepicker__day--today::before{border:1px solid var(--mtrl-sys-color-primary)}.mtrl-datepicker__day--highlight{text-decoration:underline}.mtrl-datepicker__day--selected,.mtrl-datepicker__day--selected:hover:not(:disabled){color:var(--mtrl-sys-color-on-primary);--mtrl-datepicker-day-layer: var(--mtrl-sys-color-on-primary)}.mtrl-datepicker__day--selected::before,.mtrl-datepicker__day--selected:hover:not(:disabled)::before{background:var(--mtrl-sys-color-primary)}.mtrl-datepicker__day:disabled{opacity:.38;cursor:default}.mtrl-datepicker__months,.mtrl-datepicker__years{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px 8px;padding:16px 24px}.mtrl-datepicker__years{position:relative;box-sizing:border-box;height:336px;overflow-y:auto;overscroll-behavior:contain}.mtrl-datepicker__month,.mtrl-datepicker__year{position:relative;isolation:isolate;min-width:0;height:48px;border:0;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;cursor:pointer}.mtrl-datepicker__month::before,.mtrl-datepicker__year::before{content:\"\";position:absolute;z-index:-1;width:72px;max-width:100%;height:36px;inset:50% auto auto 50%;transform:translate(-50%, -50%);border-radius:var(--mtrl-sys-shape-corner-full, 9999px)}.mtrl-datepicker__month:hover::before,.mtrl-datepicker__year:hover::before{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-datepicker__month[aria-pressed=true],.mtrl-datepicker__year[aria-pressed=true]{color:var(--mtrl-sys-color-on-primary)}.mtrl-datepicker__month[aria-pressed=true]::before,.mtrl-datepicker__year[aria-pressed=true]::before{background:var(--mtrl-sys-color-primary)}.mtrl-datepicker__month:focus-visible,.mtrl-datepicker__year:focus-visible{outline:none}.mtrl-datepicker__month:focus-visible::before,.mtrl-datepicker__year:focus-visible::before{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:2px}.mtrl-datepicker__fields{display:grid;gap:16px;padding:24px}.mtrl-datepicker__field{display:flex;flex-direction:column}.mtrl-datepicker__footer{display:flex;justify-content:flex-end;gap:8px;padding:4px 12px}.mtrl-datepicker__prev svg,.mtrl-datepicker__next svg{transform:var(--mtrl-datepicker-flip)}.mtrl-datepicker__cancel,.mtrl-datepicker__confirm,.mtrl-datepicker__save{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;padding:0 12px;color:var(--mtrl-sys-color-primary)}.mtrl-datepicker__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes mtrl-datepicker-appear{from{opacity:0}to{opacity:1}}" });

package/dist/elements/css/dialog.css

@@ -1 +1 @@
-.mtrl-dialog__overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0);visibility:hidden;z-index:1000;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px;box-sizing:border-box;transition:background-color 150ms linear,visibility 0s linear 150ms}.mtrl-dialog__overlay--visible{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);visibility:visible;transition:background-color 500ms linear,visibility 0s}.mtrl-dialog{position:relative;background-color:var(--mtrl-sys-color-surface-container-high);color:var(--mtrl-sys-color-on-surface);border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);max-width:560px;min-width:280px;width:100%;margin:auto;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transform-origin:top center;transform:translateY(-50px) scaleY(0.35);opacity:0;pointer-events:none;transition:transform 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 50ms linear 100ms}.mtrl-dialog .mtrl-dialog__header,.mtrl-dialog .mtrl-dialog__content,.mtrl-dialog .mtrl-dialog__footer{opacity:0;transition:opacity 100ms linear}.mtrl-dialog--visible{transform:translateY(0) scaleY(1);opacity:1;pointer-events:auto;transition:transform 500ms cubic-bezier(0.3, 0, 0, 1),opacity 50ms linear}.mtrl-dialog--visible .mtrl-dialog__header,.mtrl-dialog--visible .mtrl-dialog__content{opacity:1;transition:opacity 250ms linear 50ms}.mtrl-dialog--visible .mtrl-dialog__footer{opacity:1;transition:opacity 300ms linear 150ms}.mtrl-dialog--small{width:80%;max-width:360px}.mtrl-dialog--medium{width:90%;max-width:560px}.mtrl-dialog--large{width:95%;max-width:560px}.mtrl-dialog--fullwidth{width:100%;max-width:none;margin:24px}.mtrl-dialog--fullscreen{width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;transform-origin:center center;transform:translateY(24px)}.mtrl-dialog--fullscreen.mtrl-dialog--visible{transform:translateY(0)}.mtrl-dialog--slide-up{transform:translateY(24px) scaleY(0.35)}.mtrl-dialog--slide-up.mtrl-dialog--visible{transform:translateY(0) scaleY(1)}.mtrl-dialog--slide-down{transform:translateY(-24px) scaleY(0.35)}.mtrl-dialog--slide-down.mtrl-dialog--visible{transform:translateY(0) scaleY(1)}.mtrl-dialog--fade{transform:none}.mtrl-dialog--fade.mtrl-dialog--visible{transform:none}.mtrl-dialog--scale{transform-origin:center center;transform:scale(0.8)}.mtrl-dialog--scale.mtrl-dialog--visible{transform:scale(1)}dialog.mtrl-dialog{position:fixed;inset:0;height:fit-content;max-height:calc(100% - 48px);padding:0;border:0;overflow:visible;transition:transform 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 50ms linear 100ms,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog.mtrl-dialog.mtrl-dialog--visible{transform:none;transition:transform 500ms cubic-bezier(0.3, 0, 0, 1),opacity 50ms linear}dialog.mtrl-dialog.mtrl-dialog--fullwidth{width:auto}dialog.mtrl-dialog.mtrl-dialog--fullscreen{height:100%;max-height:none}dialog.mtrl-dialog::backdrop{background-color:rgba(0,0,0,0);transition:background-color 150ms linear,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog.mtrl-dialog.mtrl-dialog--visible::backdrop{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);transition:background-color 500ms linear}.mtrl-dialog__icon{display:flex;align-items:center;justify-content:center;padding:24px 24px 0 24px;color:var(--mtrl-sys-color-secondary)}.mtrl-dialog__icon svg,.mtrl-dialog__icon .mtrl-dialog__icon-content{width:24px;height:24px}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-content{text-align:center}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-title{text-align:center}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-subtitle{text-align:center}.mtrl-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 16px 24px}.mtrl-dialog__icon+.mtrl-dialog__header{padding-top:16px}.mtrl-dialog__header-content{flex:1}.mtrl-dialog__header-title{margin:0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-dialog__header-subtitle{margin:4px 0 0 0;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-dialog__header-close{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-8px -8px 0 0;padding:8px;background:rgba(0,0,0,0);border:none;border-radius:50%;cursor:pointer;color:var(--mtrl-sys-color-on-surface-variant);transition:background-color 100ms cubic-bezier(0.2, 0, 0, 1);position:relative}.mtrl-dialog__header-close:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-dialog__header-close:focus{outline:none;background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-dialog__header-close:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:2px}.mtrl-dialog__header-close:active{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-dialog__header-close svg{width:24px;height:24px}.mtrl-dialog__header-close::after{content:"";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%, -50%)}[dir=rtl] .mtrl-dialog__header-close{margin:-8px 0 0 -8px}.mtrl-dialog__header:empty{display:none}.mtrl-dialog__header:not(:has(*))+.mtrl-dialog__content,.mtrl-dialog>.mtrl-dialog__content:first-child{padding-top:24px}.mtrl-dialog__content{padding:0 24px;color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;overflow:visible}.mtrl-dialog__content--scrollable{overflow-y:auto;max-height:60vh;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05)}.mtrl-dialog__content--scrollable::-webkit-scrollbar{width:8px}.mtrl-dialog__content--scrollable::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-dialog__content--scrollable::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-dialog__content p{margin:0 0 16px 0}.mtrl-dialog__content p:last-child{margin-bottom:0}.mtrl-dialog__content--emphasis{color:var(--mtrl-sys-color-on-surface)}.mtrl-dialog__content:last-child{padding-bottom:24px}.mtrl-dialog__footer{display:flex;align-items:center;justify-content:flex-end;padding:24px 24px 24px 24px;gap:8px}.mtrl-dialog__footer--left{justify-content:flex-start}.mtrl-dialog__footer--center{justify-content:center}.mtrl-dialog__footer--space-between{justify-content:space-between}.mtrl-dialog__footer--stacked{flex-direction:column-reverse;align-items:stretch;gap:8px}.mtrl-dialog--fullscreen{display:flex;flex-direction:column}.mtrl-dialog--fullscreen .mtrl-dialog__header{display:flex;align-items:center;min-height:56px;padding:0 24px;gap:8px}.mtrl-dialog--fullscreen .mtrl-dialog__header-close{order:-1;margin:0 0 0 -8px}[dir=rtl] .mtrl-dialog--fullscreen .mtrl-dialog__header-close{margin:0 -8px 0 0}.mtrl-dialog--fullscreen .mtrl-dialog__header-title{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400;text-align:start}.mtrl-dialog--fullscreen .mtrl-dialog__content{flex:1;overflow-y:auto;padding:24px}.mtrl-dialog--fullscreen .mtrl-dialog__footer{min-height:56px;padding:0 24px;box-sizing:border-box}.mtrl-dialog__header-divider,.mtrl-dialog__footer-divider{margin:0;border:none;height:1px;background-color:var(--mtrl-sys-color-outline-variant)}@media(prefers-reduced-motion: reduce){.mtrl-dialog,.mtrl-dialog--visible,.mtrl-dialog__overlay,.mtrl-dialog__overlay--visible{transition:opacity 100ms linear}.mtrl-dialog,.mtrl-dialog--visible,.mtrl-dialog--scale,.mtrl-dialog--slide-up,.mtrl-dialog--slide-down,.mtrl-dialog--fullscreen{transform:none}}@media(forced-colors: active){.mtrl-dialog{border:2px solid CurrentColor}.mtrl-dialog__header-divider,.mtrl-dialog__footer-divider{background-color:CurrentColor}.mtrl-dialog__header-close:focus-visible{outline:2px solid CurrentColor}}@media(max-width: 600px){.mtrl-dialog{min-width:280px;width:calc(100% - 32px);max-width:100%;margin:16px;transform-origin:bottom center}.mtrl-dialog--fullscreen{width:100%;height:100%;margin:0;transform-origin:center center}.mtrl-dialog__overlay{padding:16px;align-items:flex-end}.mtrl-dialog__overlay.mtrl-dialog--fullscreen{padding:0}.mtrl-dialog__content--scrollable{max-height:50vh}.mtrl-dialog--slide-up{transform:translateY(24px)}.mtrl-dialog--slide-up.mtrl-dialog--visible{transform:translateY(0)}.mtrl-dialog__footer--responsive{flex-direction:column-reverse;align-items:stretch}}@media print{.mtrl-dialog__overlay{position:static;background:none;padding:0}.mtrl-dialog{box-shadow:none;border:1px solid #000;max-width:100%;transform:none;opacity:1}}
+.mtrl-dialog__overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0);visibility:hidden;z-index:1000;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px;box-sizing:border-box;transition:background-color 150ms linear,visibility 0s linear 150ms}.mtrl-dialog__overlay--visible{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);visibility:visible;transition:background-color 500ms linear,visibility 0s}.mtrl-dialog{position:relative;background-color:var(--mtrl-sys-color-surface-container-high);color:var(--mtrl-sys-color-on-surface);border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);max-width:560px;min-width:280px;width:100%;margin:auto;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transform-origin:top center;transform:translateY(-50px) scaleY(0.35);opacity:0;pointer-events:none;transition:transform 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 50ms linear 100ms}.mtrl-dialog .mtrl-dialog__header,.mtrl-dialog .mtrl-dialog__content,.mtrl-dialog .mtrl-dialog__footer{opacity:0;transition:opacity 100ms linear}.mtrl-dialog--visible{transform:translateY(0) scaleY(1);opacity:1;pointer-events:auto;transition:transform 500ms cubic-bezier(0.3, 0, 0, 1),opacity 50ms linear}.mtrl-dialog--visible .mtrl-dialog__header,.mtrl-dialog--visible .mtrl-dialog__content{opacity:1;transition:opacity 250ms linear 50ms}.mtrl-dialog--visible .mtrl-dialog__footer{opacity:1;transition:opacity 300ms linear 150ms}.mtrl-dialog--small{width:80%;max-width:360px}.mtrl-dialog--medium{width:90%;max-width:560px}.mtrl-dialog--large{width:95%;max-width:560px}.mtrl-dialog--fullwidth{width:100%;max-width:none;margin:24px}.mtrl-dialog--fullscreen{width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;transform-origin:center center;transform:translateY(24px)}.mtrl-dialog--fullscreen.mtrl-dialog--visible{transform:translateY(0)}.mtrl-dialog--slide-up{transform:translateY(24px) scaleY(0.35)}.mtrl-dialog--slide-up.mtrl-dialog--visible{transform:translateY(0) scaleY(1)}.mtrl-dialog--slide-down{transform:translateY(-24px) scaleY(0.35)}.mtrl-dialog--slide-down.mtrl-dialog--visible{transform:translateY(0) scaleY(1)}.mtrl-dialog--fade{transform:none}.mtrl-dialog--fade.mtrl-dialog--visible{transform:none}.mtrl-dialog--scale{transform-origin:center center;transform:scale(0.8)}.mtrl-dialog--scale.mtrl-dialog--visible{transform:scale(1)}dialog.mtrl-dialog{position:fixed;inset:0;height:fit-content;max-height:calc(100% - 48px);padding:0;border:0;overflow:visible;transition:transform 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 50ms linear 100ms,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog.mtrl-dialog.mtrl-dialog--visible{transform:none;transition:transform 500ms cubic-bezier(0.3, 0, 0, 1),opacity 50ms linear}dialog.mtrl-dialog.mtrl-dialog--fullwidth{width:auto}dialog.mtrl-dialog.mtrl-dialog--fullscreen{height:100%;max-height:none}dialog.mtrl-dialog::backdrop{background-color:rgba(0,0,0,0);transition:background-color 150ms linear,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog.mtrl-dialog.mtrl-dialog--visible::backdrop{background-color:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent);transition:background-color 500ms linear}.mtrl-dialog__icon{display:flex;align-items:center;justify-content:center;padding:24px 24px 0 24px;color:var(--mtrl-sys-color-secondary)}.mtrl-dialog__icon svg,.mtrl-dialog__icon .mtrl-dialog__icon-content{width:24px;height:24px}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-content{text-align:center}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-title{text-align:center}.mtrl-dialog__icon+.mtrl-dialog__header .mtrl-dialog__header-subtitle{text-align:center}.mtrl-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 16px 24px}.mtrl-dialog__icon+.mtrl-dialog__header{padding-top:16px}.mtrl-dialog__header-content{flex:1}.mtrl-dialog__header-title{margin:0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-dialog__header-subtitle{margin:4px 0 0 0;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-dialog__header-close{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-8px -8px 0 0;padding:8px;background:rgba(0,0,0,0);border:none;border-radius:50%;cursor:pointer;color:var(--mtrl-sys-color-on-surface-variant);transition:background-color 100ms cubic-bezier(0.2, 0, 0, 1);position:relative}.mtrl-dialog__header-close:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-dialog__header-close:focus{outline:none;background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-dialog__header-close:focus-visible{outline:2px solid var(--mtrl-sys-color-primary);outline-offset:2px}.mtrl-dialog__header-close:active{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent)}.mtrl-dialog__header-close svg{width:24px;height:24px}.mtrl-dialog__header-close::after{content:"";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%, -50%)}:where(.mtrl-rtl) .mtrl-dialog__header-close,:where(:host(.mtrl-rtl)) .mtrl-dialog__header-close,[dir=rtl] .mtrl-dialog__header-close:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin:-8px 0 0 -8px}.mtrl-dialog__header:empty{display:none}.mtrl-dialog__header:not(:has(*))+.mtrl-dialog__content,.mtrl-dialog>.mtrl-dialog__content:first-child{padding-top:24px}.mtrl-dialog__content{padding:0 24px;color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;overflow:visible}.mtrl-dialog__content--scrollable{overflow-y:auto;max-height:60vh;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05)}.mtrl-dialog__content--scrollable::-webkit-scrollbar{width:8px}.mtrl-dialog__content--scrollable::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-dialog__content--scrollable::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-dialog__content p{margin:0 0 16px 0}.mtrl-dialog__content p:last-child{margin-bottom:0}.mtrl-dialog__content--emphasis{color:var(--mtrl-sys-color-on-surface)}.mtrl-dialog__content:last-child{padding-bottom:24px}.mtrl-dialog__footer{display:flex;align-items:center;justify-content:flex-end;padding:24px 24px 24px 24px;gap:8px}.mtrl-dialog__footer--left{justify-content:flex-start}.mtrl-dialog__footer--center{justify-content:center}.mtrl-dialog__footer--space-between{justify-content:space-between}.mtrl-dialog__footer--stacked{flex-direction:column-reverse;align-items:stretch;gap:8px}.mtrl-dialog--fullscreen{display:flex;flex-direction:column}.mtrl-dialog--fullscreen .mtrl-dialog__header{display:flex;align-items:center;min-height:56px;padding:0 24px;gap:8px}.mtrl-dialog--fullscreen .mtrl-dialog__header-close{order:-1;margin:0 0 0 -8px}:where(.mtrl-rtl) .mtrl-dialog--fullscreen .mtrl-dialog__header-close,:where(:host(.mtrl-rtl)) .mtrl-dialog--fullscreen .mtrl-dialog__header-close,[dir=rtl] .mtrl-dialog--fullscreen .mtrl-dialog__header-close:not(:where(.mtrl-ltr,.mtrl-ltr *)){margin:0 -8px 0 0}.mtrl-dialog--fullscreen .mtrl-dialog__header-title{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400;text-align:start}.mtrl-dialog--fullscreen .mtrl-dialog__content{flex:1;overflow-y:auto;padding:24px}.mtrl-dialog--fullscreen .mtrl-dialog__footer{min-height:56px;padding:0 24px;box-sizing:border-box}.mtrl-dialog__header-divider,.mtrl-dialog__footer-divider{margin:0;border:none;height:1px;background-color:var(--mtrl-sys-color-outline-variant)}@media(prefers-reduced-motion: reduce){.mtrl-dialog,.mtrl-dialog--visible,.mtrl-dialog__overlay,.mtrl-dialog__overlay--visible{transition:opacity 100ms linear}.mtrl-dialog,.mtrl-dialog--visible,.mtrl-dialog--scale,.mtrl-dialog--slide-up,.mtrl-dialog--slide-down,.mtrl-dialog--fullscreen{transform:none}}@media(forced-colors: active){.mtrl-dialog{border:2px solid CurrentColor}.mtrl-dialog__header-divider,.mtrl-dialog__footer-divider{background-color:CurrentColor}.mtrl-dialog__header-close:focus-visible{outline:2px solid CurrentColor}}@media(max-width: 600px){.mtrl-dialog{min-width:280px;width:calc(100% - 32px);max-width:100%;margin:16px;transform-origin:bottom center}.mtrl-dialog--fullscreen{width:100%;height:100%;margin:0;transform-origin:center center}.mtrl-dialog__overlay{padding:16px;align-items:flex-end}.mtrl-dialog__overlay.mtrl-dialog--fullscreen{padding:0}.mtrl-dialog__content--scrollable{max-height:50vh}.mtrl-dialog--slide-up{transform:translateY(24px)}.mtrl-dialog--slide-up.mtrl-dialog--visible{transform:translateY(0)}.mtrl-dialog__footer--responsive{flex-direction:column-reverse;align-items:stretch}}@media print{.mtrl-dialog__overlay{position:static;background:none;padding:0}.mtrl-dialog{box-shadow:none;border:1px solid #000;max-width:100%;transform:none;opacity:1}}