material 3.2.4 → 3.2.6

package/README.md

@@ -94,10 +94,10 @@ What a bundler keeps, minified and gzipped (kB is 1,000 bytes), measured from th
 | `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.5 kB |
+| Everything the root exports (`export * from 'material'`), without code splitting | 127.8 kB |
 | `material/styles/base` | 2.9 kB |
 | `material/styles/base` and `material/styles/button` | 5.2 kB |
-| `material/styles`, the full stylesheet | 63.5 kB |
+| `material/styles`, the full stylesheet | 63.7 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

@@ -6,6 +6,7 @@ import { createStrategy, keylinesForScrollOffset, snapPositionOffset, maxScrollO
 const FLING_VELOCITY = 0.4;
 const DRAG_THRESHOLD = 4;
 const WHEEL_QUIET = 120;
+const WHEEL_SNAP_REACH = 1;
 export const withScroll = (config) => (component) => {
     const { variant, gap, padding, snap } = resolveLayoutDefaults(config);
     const vertical = variant === CAROUSEL_VARIANTS.FULL_SCREEN;
@@ -375,7 +376,8 @@ export const withScroll = (config) => (component) => {
         e.preventDefault();
         if (direction !== wheelDirection)
             stopWheel();
-        if (e.timeStamp - lastWheel >= WHEEL_QUIET || direction !== wheelDirection) {
+        const fresh = e.timeStamp - lastWheel >= WHEEL_QUIET || direction !== wheelDirection;
+        if (fresh) {
             wheelStart = position;
             wheelDelta = 0;
             wheelTarget = position;
@@ -388,8 +390,9 @@ export const withScroll = (config) => (component) => {
         wheelDelta += e.deltaY * unit;
         const destination = Math.max(0, Math.min(end, wheelStart + wheelDelta));
         let index = direction > 0 ? count - 1 : 0;
+        const reach = fresh ? WHEEL_SNAP_REACH : 0;
         for (let i = direction > 0 ? 0 : count - 1; i >= 0 && i < count; i += direction) {
-            if (direction * (snapPositions[i] - destination) >= 0 &&
+            if (direction * (snapPositions[i] - destination) >= -reach &&
                 direction * (snapPositions[i] - wheelStart) > 0) {
                 index = i;
                 break;

package/dist/components/drawer/features/items.js

@@ -2,6 +2,7 @@ import { DRAWER_EVENTS } from "../constants.js";
 import { createRipple, } from "../../../core/compose/features/ripple.js";
 import { setHTML } from "../../../core/dom/html.js";
 import { activeElementOf } from "../../../core/dom/focus.js";
+const hasBadge = (badge) => !!badge && badge !== "0";
 const createItemElement = (item, getClass) => {
     const el = document.createElement("button");
     el.className = getClass("drawer__item");
@@ -30,7 +31,7 @@ const createItemElement = (item, getClass) => {
         labelEl.textContent = item.label;
         el.appendChild(labelEl);
     }
-    if (item.badge) {
+    if (hasBadge(item.badge)) {
         const badgeEl = document.createElement("span");
         badgeEl.className = getClass("drawer__item-badge");
         badgeEl.textContent = item.badge;
@@ -143,7 +144,7 @@ export const withItems = (config) => (component) => {
         if (!itemEl)
             return;
         let badgeEl = itemEl.querySelector(`.${component.getClass("drawer__item-badge")}`);
-        if (badge) {
+        if (hasBadge(badge)) {
             if (!badgeEl) {
                 badgeEl = document.createElement("span");
                 badgeEl.className = component.getClass("drawer__item-badge");

package/dist/components/tabs/tab.js

@@ -3,6 +3,7 @@ import { registerTab, syncTabControls, tabIdFor } from "./utils.js";
 import { pipe } from "../../core/compose/index.js";
 import { createBase } from "../../core/compose/component.js";
 import { withEvents, withLifecycle } from "../../core/compose/features/index.js";
+import { isEmptyBadgeLabel } from "../badge/config.js";
 import { TAB_LAYOUT } from "./constants.js";
 import { createTabConfig } from "./config.js";
 import createButton from "../button/index.js";
@@ -50,6 +51,8 @@ export const createTab = (config = {}) => {
             button.element.addEventListener(type, (event) => baseComponent.emit?.(type, event));
         }
         const badgeAnchor = () => button.element.querySelector(`.${baseComponent.getClass("button__icon")},.${baseComponent.getClass("button__text")}`) ?? button.element;
+        const hasBadgeToShow = (badge) => badge.element.classList.contains(`${badge.getClass("badge")}--small`) ||
+            !isEmptyBadgeLabel(badge.getContent());
         const tab = {
             ...baseComponent,
             button,
@@ -108,6 +111,7 @@ export const createTab = (config = {}) => {
             setText(content) {
                 button.setText(content);
                 this.updateLayoutStyle();
+                announceBadge();
                 return this;
             },
             getText() {
@@ -134,19 +138,23 @@ export const createTab = (config = {}) => {
                 }
                 else {
                     this.badge.setContent(content);
-                    this.badge.show();
+                    if (hasBadgeToShow(this.badge)) {
+                        this.badge.show();
+                    }
                 }
-                this.element.setAttribute("data-has-badge", "true");
+                this.element.setAttribute("data-has-badge", this.badge && hasBadgeToShow(this.badge) ? "true" : "false");
+                announceBadge();
                 return this;
             },
             getBadge() {
                 return this.badge ? this.badge.getContent() : "";
             },
             showBadge() {
-                if (this.badge) {
+                if (this.badge && hasBadgeToShow(this.badge)) {
                     this.badge.show();
                     this.element.setAttribute("data-has-badge", "true");
                 }
+                announceBadge();
                 return this;
             },
             hideBadge() {
@@ -154,6 +162,7 @@ export const createTab = (config = {}) => {
                     this.badge.hide();
                     this.element.setAttribute("data-has-badge", "false");
                 }
+                announceBadge();
                 return this;
             },
             getBadgeComponent() {
@@ -193,6 +202,20 @@ export const createTab = (config = {}) => {
                 }
             },
         };
+        const announceBadge = () => {
+            const count = tab.badge?.isVisible() ? tab.badge.getContent() : "";
+            const label = baseConfig.ariaLabel || button.getText();
+            const name = [label, count].filter(Boolean).join(", ");
+            if (name !== label) {
+                tab.element.setAttribute("aria-label", name);
+            }
+            else if (baseConfig.ariaLabel) {
+                tab.element.setAttribute("aria-label", baseConfig.ariaLabel);
+            }
+            else {
+                tab.element.removeAttribute("aria-label");
+            }
+        };
         if (baseConfig.badge !== undefined) {
             tab.setBadge(baseConfig.badge);
         }

package/dist/core/compose/features/badge.js

@@ -1,5 +1,19 @@
 import createBadge from "../../../components/badge/index.js";
 import { PREFIX } from "../../config.js";
+const addIdRef = (element, attribute, id) => {
+    const ids = (element.getAttribute(attribute) ?? "").split(/\s+/).filter(Boolean);
+    if (!ids.includes(id))
+        ids.push(id);
+    element.setAttribute(attribute, ids.join(" "));
+};
+const removeIdRef = (element, attribute, id) => {
+    const ids = (element.getAttribute(attribute) ?? "").split(/\s+/).filter((value) => value && value !== id);
+    if (ids.length)
+        element.setAttribute(attribute, ids.join(" "));
+    else
+        element.removeAttribute(attribute);
+};
+let nextBadgeId = 0;
 export const withBadge = (config) => (component) => {
     if (config.badge === undefined) {
         return component;
@@ -13,6 +27,37 @@ export const withBadge = (config) => (component) => {
         prefix: config.prefix || PREFIX
     };
     const badge = createBadge(badgeConfig);
+    const badgeId = `${badgeConfig.prefix}-badge-${++nextBadgeId}`;
+    badge.element.id = badgeId;
+    const target = component.element;
+    const syncDescription = () => {
+        const badgeClass = badge.getClass("badge");
+        const shows = badge.element.classList.contains(`${badgeClass}--positioned`)
+            && !badge.element.classList.contains(`${badgeClass}--invisible`)
+            && badge.getLabel() !== "";
+        if (shows)
+            addIdRef(target, "aria-describedby", badgeId);
+        else
+            removeIdRef(target, "aria-describedby", badgeId);
+    };
+    syncDescription();
+    const Observer = badge.element.ownerDocument.defaultView?.MutationObserver;
+    const observer = Observer
+        ? new Observer(syncDescription)
+        : null;
+    observer?.observe(badge.element, {
+        attributes: true,
+        attributeFilter: ["class"],
+        childList: true,
+        characterData: true,
+        subtree: true,
+    });
+    const destroy = badge.destroy;
+    badge.destroy = () => {
+        observer?.disconnect();
+        removeIdRef(target, "aria-describedby", badgeId);
+        destroy();
+    };
     return {
         ...component,
         badge

package/dist/core/navigation/destinations.d.ts

@@ -17,7 +17,16 @@ export interface DestinationConfig {
 export type PartClass = (part: string) => string;
 /** A copy of the items with unique ids, labels and icons, and one active at most. */
 export declare const copyDestinations: <T extends DestinationConfig>(items: T[], component: string) => T[];
-/** Shows, updates or removes the item's badge, and names the destination with it. */
+/**
+ * Shows, updates or removes the item's badge, and names the destination with
+ * it. The name carries what the badge shows: a count past the badge's maximum
+ * reads "999+" in both, an empty or zero count clears the badge, and a dot
+ * with no label of its own announces "New notification" — "The accessibility
+ * label for a badge item will be read after its navigation destination. Any
+ * numerical badges will have their number read, while non-counting badges will
+ * simply announce New notification" (m3.material.io/components/badges/
+ * accessibility, Labeling elements).
+ */
 export declare const updateBadge: (item: DestinationConfig, element: HTMLElement, cls: PartClass) => void;
 /** The destination's element: a link or a button, its indicator, icon, label and badge. */
 export declare const createDestination: (item: DestinationConfig, cls: PartClass) => HTMLElement;

package/dist/core/navigation/destinations.js

@@ -1,6 +1,17 @@
 import { safeUrl } from "../utils/url.js";
 import { setHTML } from "../dom/html.js";
 import { activeElementOf } from "../dom/focus.js";
+const BADGE_MAX_CHARACTERS = 4;
+const formatBadgeText = (badge) => {
+    const text = String(badge);
+    if (text.length <= BADGE_MAX_CHARACTERS)
+        return text;
+    const numeric = Number(badge);
+    if (Number.isNaN(numeric))
+        return text.slice(0, BADGE_MAX_CHARACTERS);
+    return numeric >= 1000 ? "999+" : `${text.slice(0, BADGE_MAX_CHARACTERS - 1)}+`;
+};
+const isEmptyBadgeText = (text) => text === "" || text === "0";
 export const copyDestinations = (items, component) => {
     const ids = new Set();
     let selected = false;
@@ -15,7 +26,9 @@ export const copyDestinations = (items, component) => {
 };
 export const updateBadge = (item, element, cls) => {
     let badge = element.querySelector(`.${cls("__badge")}`);
-    const visible = item.badge !== undefined && item.badge !== false && item.badge !== "";
+    const dot = item.badge === true;
+    const text = dot ? "" : formatBadgeText(String(item.badge ?? ""));
+    const visible = dot || (item.badge !== undefined && item.badge !== null && item.badge !== false && !isEmptyBadgeText(text));
     if (!visible) {
         badge?.remove();
         element.classList.remove(cls("__item--badged"));
@@ -28,10 +41,10 @@ export const updateBadge = (item, element, cls) => {
         badge.setAttribute("aria-hidden", "true");
         element.querySelector(`.${cls("__content")}`).append(badge);
     }
-    badge.classList.toggle(cls("__badge--dot"), item.badge === true);
-    badge.textContent = item.badge === true ? "" : String(item.badge);
-    element.classList.toggle(cls("__item--badged"), item.badge !== true);
-    element.setAttribute("aria-label", `${item.label}, ${item.badgeLabel || (item.badge === true ? "New activity" : String(item.badge))}`);
+    badge.classList.toggle(cls("__badge--dot"), dot);
+    badge.textContent = text;
+    element.classList.toggle(cls("__item--badged"), !dot);
+    element.setAttribute("aria-label", `${item.label}, ${item.badgeLabel || (dot ? "New notification" : text)}`);
 };
 export const createDestination = (item, cls) => {
     const element = document.createElement(item.href ? "a" : "button");

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)}: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}
+.mtrl-badge__wrapper{position:relative;display:inline-flex;flex-shrink:0}.mtrl-badge{display:inline-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{position:absolute}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-right{top:0;right:0}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left{top:0;left:0}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right{bottom:0;right:0}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left{bottom:0;left:0}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right{top:-2px;right:-4px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left{top:-2px;left:-4px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right{bottom:-2px;right:-4px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left{bottom:-2px;left:-4px}.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--small.mtrl-badge--top-right,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-right,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--small.mtrl-badge--top-right{right:auto;left:0}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--small.mtrl-badge--top-left{left:auto;right:0}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--small.mtrl-badge--bottom-right{right:auto;left:0}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--small.mtrl-badge--bottom-left{left:auto;right:0}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--large.mtrl-badge--top-right{right:auto;left:-4px}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--large.mtrl-badge--top-left{left:auto;right:-4px}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--large.mtrl-badge--bottom-right{right:auto;left:-4px}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--large.mtrl-badge--bottom-left{left:auto;right:-4px}

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)}: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}" });
+registerStyles({ "badge": ".mtrl-badge__wrapper{position:relative;display:inline-flex;flex-shrink:0}.mtrl-badge{display:inline-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{position:absolute}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-right{top:0;right:0}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left{top:0;left:0}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right{bottom:0;right:0}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left{bottom:0;left:0}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right{top:-2px;right:-4px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left{top:-2px;left:-4px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right{bottom:-2px;right:-4px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left{bottom:-2px;left:-4px}.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--small.mtrl-badge--top-right,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-right,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--small.mtrl-badge--top-right{right:auto;left:0}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--small.mtrl-badge--top-left{left:auto;right:0}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--small.mtrl-badge--bottom-right{right:auto;left:0}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--small.mtrl-badge--bottom-left{left:auto;right:0}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--large.mtrl-badge--top-right{right:auto;left:-4px}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--large.mtrl-badge--top-left{left:auto;right:-4px}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--large.mtrl-badge--bottom-right{right:auto;left:-4px}:where(.mtrl-rtl) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left,:where(:host(.mtrl-rtl)) .mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left,[dir=rtl] .mtrl-badge--positioned:not(:where(.mtrl-ltr,.mtrl-ltr *)).mtrl-badge--large.mtrl-badge--bottom-left{left:auto;right:-4px}" });

package/dist/elements/css/menu.css

@@ -1 +1 @@
-.mtrl-menu{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);position:fixed;z-index:700;min-width:112px;max-width:280px;padding:8px 0;background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform-origin:top center;transform:scaleY(0);pointer-events:none;visibility:hidden;transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms}.mtrl-menu[popover]{inset:auto;margin:0;border:0}.mtrl-menu--visible{opacity:1;transform:scaleY(1);pointer-events:auto;visibility:visible}.mtrl-menu--position-top,.mtrl-menu--position-top-start,.mtrl-menu--position-top-end{transform-origin:bottom center}.mtrl-menu--submenu{position:absolute;z-index:701}.mtrl-menu__group{display:block;list-style:none}.mtrl-menu__group>ul{margin:0;padding:0;list-style:none}.mtrl-menu__group+.mtrl-menu__group{margin-top:8px}.mtrl-menu__list{margin:0;padding:0;list-style:none;overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05);width:100%}.mtrl-menu__list::-webkit-scrollbar{width:8px}.mtrl-menu__list::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-menu__list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;min-height:48px;padding:12px;padding-inline-end:40px;cursor:pointer;user-select:none;color:var(--mtrl-sys-color-on-surface);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;box-sizing:border-box}:where(.mtrl-menu__item:hover){position:relative}.mtrl-menu__item:hover::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item:focus{outline:none}:where(.mtrl-menu__item:focus-visible,.mtrl-menu__item--active){position:relative}.mtrl-menu__item:focus-visible::before,.mtrl-menu__item--active::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item:active){position:relative}.mtrl-menu__item:active: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-menu__item--submenu{padding-right:48px}.mtrl-menu__item--submenu::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E") center/contain no-repeat;background-color:currentColor;opacity:.87}:where(.mtrl-menu__item--submenu[aria-expanded=true]){position:relative}.mtrl-menu__item--submenu[aria-expanded=true]::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item--submenu[aria-expanded=true]::after{opacity:1}.mtrl-menu__item--disabled{cursor:default;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-menu__item--disabled:hover::before,.mtrl-menu__item--disabled:active::before{opacity:0}.mtrl-menu__item--selected{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}:where(.mtrl-menu__item--selected:hover){position:relative}.mtrl-menu__item--selected:hover::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.08;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item--selected:focus-visible,.mtrl-menu__item--selected.mtrl-menu__item--active){position:relative}.mtrl-menu__item--selected:focus-visible::before,.mtrl-menu__item--selected.mtrl-menu__item--active::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item--selected:active){position:relative}.mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu__item--selected .mtrl-menu__item-shortcut{color:inherit}.mtrl-menu__item--selected::after{content:"";position:absolute;left:12px;right:12px;margin-inline-start:auto;top:50%;transform:translateY(-50%);width:18px;height:18px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;background-color:currentColor}.mtrl-menu__item-content{display:flex;align-items:center;width:100%;overflow:hidden}.mtrl-menu__item-icon{margin-inline-end:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-menu__item-icon svg{width:24px;height:24px}.mtrl-menu__item-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu__item-supporting{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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-shortcut{margin-left:12px;color:var(--mtrl-sys-color-on-surface-variant);flex-shrink:0}.mtrl-menu__divider{height:1px;flex-shrink:0;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-menu:focus-visible{outline:2px solid ".mtrl-menu__item:focus-visible";outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}@media(prefers-reduced-motion: reduce){.mtrl-menu{transition:opacity 100ms linear,visibility 100ms}.mtrl-menu,.mtrl-menu--visible{transform:none}}@media(forced-colors: active){.mtrl-menu{border:1px solid CurrentColor}.mtrl-menu .mtrl-menu__divider{background-color:CurrentColor}.mtrl-menu .mtrl-menu__item--disabled{opacity:1;color:GrayText}}.mtrl-menu--dense{padding:4px 0}.mtrl-menu--dense .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;min-height:32px;padding:4px 12px;padding-right:32px}.mtrl-menu--dense .mtrl-menu__item--submenu{padding-right:36px}.mtrl-menu--dense .mtrl-menu__item-icon svg{width:16px;height:16px}.mtrl-menu--dense .mtrl-menu__divider{margin:4px 0}.mtrl-menu--vertical{--mtrl-menu-container: var(--mtrl-sys-color-surface-container-low);--mtrl-menu-label: var(--mtrl-sys-color-on-surface);--mtrl-menu-supporting: var(--mtrl-sys-color-on-surface-variant);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary-container);border-radius:var(--mtrl-sys-shape-corner-large, 16px);background-color:var(--mtrl-menu-container);color:var(--mtrl-menu-label);padding:4px}.mtrl-menu--vertical.mtrl-menu--vibrant{--mtrl-menu-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-label: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-supporting: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary)}.mtrl-menu--vertical .mtrl-menu__list{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;min-height:44px;padding:8px 16px;padding-inline-end:16px;color:var(--mtrl-menu-label);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);transition:border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-menu--vertical .mtrl-menu__item:hover,.mtrl-menu--vertical .mtrl-menu__item:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--active,.mtrl-menu--vertical .mtrl-menu__item:active{border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-start-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-end-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item--selected{background-color:var(--mtrl-menu-selected-container);color:var(--mtrl-menu-selected-label);border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:hover){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:hover::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.08;pointer-events:none;border-radius:inherit}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible::before,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:active){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu--vertical .mtrl-menu__item--disabled{color:color-mix(in srgb, var(--mtrl-menu-label) 38%, transparent)}.mtrl-menu--vertical .mtrl-menu__item-icon{color:var(--mtrl-menu-supporting);margin-inline-end:12px}.mtrl-menu--vertical .mtrl-menu__item-icon svg{width:20px;height:20px}.mtrl-menu--vertical .mtrl-menu__item-shortcut{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--mtrl-menu-supporting)}.mtrl-menu--vertical .mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu--vertical .mtrl-menu__item-supporting{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-menu-supporting);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-shortcut,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-supporting{color:inherit}.mtrl-menu--vertical .mtrl-menu__divider{margin:6px 0}.mtrl-menu--vertical:has(.mtrl-menu__group){background-color:rgba(0,0,0,0);box-shadow:none;padding:0;overflow:visible}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__list{overflow:visible;gap:2px}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group{background-color:var(--mtrl-menu-container);padding:4px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group+.mtrl-menu__group{margin-top:0}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group>ul{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical{transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms,border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-menu--vertical.mtrl-menu--active{border-radius:24px}.mtrl-menu--vertical.mtrl-menu--inactive{border-radius:var(--mtrl-sys-shape-corner-small, 8px)}[dir=rtl] .mtrl-menu,.mtrl-menu.mtrl-menu--rtl{transform-origin:top right}[dir=rtl] .mtrl-menu--position-top,[dir=rtl] .mtrl-menu--position-top-start,[dir=rtl] .mtrl-menu--position-top-end,.mtrl-menu.mtrl-menu--rtl.mtrl-menu--position-top,.mtrl-menu.mtrl-menu--rtl.mtrl-menu--position-top-start,.mtrl-menu.mtrl-menu--rtl.mtrl-menu--position-top-end{transform-origin:bottom right}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu,.mtrl-menu.mtrl-menu--rtl .mtrl-menu__item--submenu{padding-right:16px;padding-left:48px}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu::after,.mtrl-menu.mtrl-menu--rtl .mtrl-menu__item--submenu::after{right:auto;left:16px;transform:translateY(-50%) rotate(180deg)}
+.mtrl-menu{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);position:fixed;z-index:700;min-width:112px;max-width:280px;padding:8px 0;background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform-origin:top center;transform:scaleY(0);pointer-events:none;visibility:hidden;transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms}.mtrl-menu[popover]{inset:auto;margin:0;border:0}.mtrl-menu--visible{opacity:1;transform:scaleY(1);pointer-events:auto;visibility:visible}.mtrl-menu--position-top,.mtrl-menu--position-top-start,.mtrl-menu--position-top-end{transform-origin:bottom center}.mtrl-menu--submenu{position:absolute;z-index:701}.mtrl-menu__group{display:block;list-style:none}.mtrl-menu__group>ul{margin:0;padding:0;list-style:none}.mtrl-menu__group+.mtrl-menu__group{margin-top:8px}.mtrl-menu__list{margin:0;padding:0;list-style:none;overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05);width:100%}.mtrl-menu__list::-webkit-scrollbar{width:8px}.mtrl-menu__list::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-menu__list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;min-height:48px;padding:12px;padding-inline-end:40px;cursor:pointer;user-select:none;color:var(--mtrl-sys-color-on-surface);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;box-sizing:border-box}:where(.mtrl-menu__item:hover){position:relative}.mtrl-menu__item:hover::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item:focus{outline:none}:where(.mtrl-menu__item:focus-visible,.mtrl-menu__item--active){position:relative}.mtrl-menu__item:focus-visible::before,.mtrl-menu__item--active::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item:active){position:relative}.mtrl-menu__item:active: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-menu__item--submenu{padding-right:48px}.mtrl-menu__item--submenu::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E") center/contain no-repeat;background-color:currentColor;opacity:.87}:where(.mtrl-menu__item--submenu[aria-expanded=true]){position:relative}.mtrl-menu__item--submenu[aria-expanded=true]::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item--submenu[aria-expanded=true]::after{opacity:1}.mtrl-menu__item--disabled{cursor:default;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-menu__item--disabled .mtrl-menu__item-icon,.mtrl-menu__item--disabled .mtrl-menu__item-supporting,.mtrl-menu__item--disabled .mtrl-menu__item-shortcut{color:inherit}.mtrl-menu__item--disabled:hover::before,.mtrl-menu__item--disabled:active::before{opacity:0}.mtrl-menu__item--selected{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}:where(.mtrl-menu__item--selected:hover){position:relative}.mtrl-menu__item--selected:hover::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.08;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item--selected:focus-visible,.mtrl-menu__item--selected.mtrl-menu__item--active){position:relative}.mtrl-menu__item--selected:focus-visible::before,.mtrl-menu__item--selected.mtrl-menu__item--active::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item--selected:active){position:relative}.mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu__item--selected .mtrl-menu__item-shortcut{color:inherit}.mtrl-menu__item--selected::after{content:"";position:absolute;left:12px;right:12px;margin-inline-start:auto;top:50%;transform:translateY(-50%);width:18px;height:18px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;background-color:currentColor}.mtrl-menu__item--selected.mtrl-menu__item--disabled{background-color:color-mix(in srgb, var(--mtrl-sys-color-secondary-container) 38%, transparent);color:color-mix(in srgb, var(--mtrl-sys-color-on-secondary-container) 38%, transparent)}.mtrl-menu__item--selected.mtrl-menu__item--disabled:hover::before,.mtrl-menu__item--selected.mtrl-menu__item--disabled:active::before{opacity:0}.mtrl-menu__item-content{display:flex;align-items:center;width:100%;overflow:hidden}.mtrl-menu__item-icon{margin-inline-end:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-menu__item-icon svg{width:24px;height:24px}.mtrl-menu__item-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu__item-supporting{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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-shortcut{margin-left:12px;color:var(--mtrl-sys-color-on-surface-variant);flex-shrink:0}.mtrl-menu__divider{height:1px;flex-shrink:0;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-menu:focus-visible{outline:2px solid ".mtrl-menu__item:focus-visible";outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}@media(prefers-reduced-motion: reduce){.mtrl-menu{transition:opacity 100ms linear,visibility 100ms}.mtrl-menu,.mtrl-menu--visible{transform:none}}@media(forced-colors: active){.mtrl-menu{border:1px solid CurrentColor}.mtrl-menu .mtrl-menu__divider{background-color:CurrentColor}.mtrl-menu .mtrl-menu__item--disabled{opacity:1;color:GrayText}}.mtrl-menu--dense{padding:4px 0}.mtrl-menu--dense .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;min-height:32px;padding:4px 12px;padding-right:32px}.mtrl-menu--dense .mtrl-menu__item--submenu{padding-right:36px}.mtrl-menu--dense .mtrl-menu__item-icon svg{width:16px;height:16px}.mtrl-menu--dense .mtrl-menu__divider{margin:4px 0}.mtrl-menu--vertical{--mtrl-menu-container: var(--mtrl-sys-color-surface-container-low);--mtrl-menu-label: var(--mtrl-sys-color-on-surface);--mtrl-menu-supporting: var(--mtrl-sys-color-on-surface-variant);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-selected-disabled-container: color-mix( in srgb, var(--mtrl-menu-selected-container) 38%, transparent );border-radius:var(--mtrl-sys-shape-corner-large, 16px);background-color:var(--mtrl-menu-container);color:var(--mtrl-menu-label);padding:4px}.mtrl-menu--vertical.mtrl-menu--vibrant{--mtrl-menu-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-label: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-supporting: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary);--mtrl-menu-selected-disabled-container: var(--mtrl-menu-selected-container)}.mtrl-menu--vertical .mtrl-menu__list{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;min-height:44px;padding:8px 16px;padding-inline-end:16px;color:var(--mtrl-menu-label);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);transition:border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-menu--vertical .mtrl-menu__item:hover,.mtrl-menu--vertical .mtrl-menu__item:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--active,.mtrl-menu--vertical .mtrl-menu__item:active{border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-start-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-end-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item--selected{background-color:var(--mtrl-menu-selected-container);color:var(--mtrl-menu-selected-label);border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:hover){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:hover::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.08;pointer-events:none;border-radius:inherit}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible::before,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:active){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--disabled{background-color:var(--mtrl-menu-selected-disabled-container);color:color-mix(in srgb, var(--mtrl-menu-selected-label) 38%, transparent)}.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--disabled:hover::before,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--disabled:active::before{opacity:0}.mtrl-menu--vertical .mtrl-menu__item--disabled{color:color-mix(in srgb, var(--mtrl-menu-label) 38%, transparent)}.mtrl-menu--vertical .mtrl-menu__item--disabled .mtrl-menu__item-icon,.mtrl-menu--vertical .mtrl-menu__item--disabled .mtrl-menu__item-supporting,.mtrl-menu--vertical .mtrl-menu__item--disabled .mtrl-menu__item-shortcut{color:inherit}.mtrl-menu--vertical .mtrl-menu__item-icon{color:var(--mtrl-menu-supporting);margin-inline-end:12px}.mtrl-menu--vertical .mtrl-menu__item-icon svg{width:20px;height:20px}.mtrl-menu--vertical .mtrl-menu__item-shortcut{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--mtrl-menu-supporting)}.mtrl-menu--vertical .mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu--vertical .mtrl-menu__item-supporting{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-menu-supporting);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-shortcut,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-supporting{color:inherit}.mtrl-menu--vertical .mtrl-menu__divider{margin:6px 0}.mtrl-menu--vertical:has(.mtrl-menu__group){background-color:rgba(0,0,0,0);box-shadow:none;padding:0;overflow:visible}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__list{overflow:visible;gap:2px}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group{background-color:var(--mtrl-menu-container);padding:4px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group+.mtrl-menu__group{margin-top:0}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group>ul{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical{transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms,border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-menu--vertical.mtrl-menu--active{border-radius:24px}.mtrl-menu--vertical.mtrl-menu--inactive{border-radius:var(--mtrl-sys-shape-corner-small, 8px)}[dir=rtl] .mtrl-menu,.mtrl-menu.mtrl-menu--rtl{transform-origin:top right}[dir=rtl] .mtrl-menu--position-top,[dir=rtl] .mtrl-menu--position-top-start,[dir=rtl] .mtrl-menu--position-top-end,.mtrl-menu.mtrl-menu--rtl.mtrl-menu--position-top,.mtrl-menu.mtrl-menu--rtl.mtrl-menu--position-top-start,.mtrl-menu.mtrl-menu--rtl.mtrl-menu--position-top-end{transform-origin:bottom right}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu,.mtrl-menu.mtrl-menu--rtl .mtrl-menu__item--submenu{padding-right:16px;padding-left:48px}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu::after,.mtrl-menu.mtrl-menu--rtl .mtrl-menu__item--submenu::after{right:auto;left:16px;transform:translateY(-50%) rotate(180deg)}

package/dist/elements/css/menu.js

@@ -1,3 +1,3 @@
 import "./ripple.js";
 import { registerStyles } from "../styles.js";
-registerStyles({ "menu": ".mtrl-menu{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);position:fixed;z-index:700;min-width:112px;max-width:280px;padding:8px 0;background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform-origin:top center;transform:scaleY(0);pointer-events:none;visibility:hidden;transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms}.mtrl-menu[popover]{inset:auto;margin:0;border:0}.mtrl-menu--visible{opacity:1;transform:scaleY(1);pointer-events:auto;visibility:visible}.mtrl-menu--position-top,.mtrl-menu--position-top-start,.mtrl-menu--position-top-end{transform-origin:bottom center}.mtrl-menu--submenu{position:absolute;z-index:701}.mtrl-menu__group{display:block;list-style:none}.mtrl-menu__group>ul{margin:0;padding:0;list-style:none}.mtrl-menu__group+.mtrl-menu__group{margin-top:8px}.mtrl-menu__list{margin:0;padding:0;list-style:none;overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05);width:100%}.mtrl-menu__list::-webkit-scrollbar{width:8px}.mtrl-menu__list::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-menu__list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;min-height:48px;padding:12px;padding-inline-end:40px;cursor:pointer;user-select:none;color:var(--mtrl-sys-color-on-surface);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;box-sizing:border-box}:where(.mtrl-menu__item:hover){position:relative}.mtrl-menu__item:hover::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item:focus{outline:none}:where(.mtrl-menu__item:focus-visible,.mtrl-menu__item--active){position:relative}.mtrl-menu__item:focus-visible::before,.mtrl-menu__item--active::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item:active){position:relative}.mtrl-menu__item:active: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-menu__item--submenu{padding-right:48px}.mtrl-menu__item--submenu::after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E\") center/contain no-repeat;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E\") center/contain no-repeat;background-color:currentColor;opacity:.87}:where(.mtrl-menu__item--submenu[aria-expanded=true]){position:relative}.mtrl-menu__item--submenu[aria-expanded=true]::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item--submenu[aria-expanded=true]::after{opacity:1}.mtrl-menu__item--disabled{cursor:default;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-menu__item--disabled:hover::before,.mtrl-menu__item--disabled:active::before{opacity:0}.mtrl-menu__item--selected{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}:where(.mtrl-menu__item--selected:hover){position:relative}.mtrl-menu__item--selected:hover::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.08;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item--selected:focus-visible,.mtrl-menu__item--selected.mtrl-menu__item--active){position:relative}.mtrl-menu__item--selected:focus-visible::before,.mtrl-menu__item--selected.mtrl-menu__item--active::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item--selected:active){position:relative}.mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu__item--selected .mtrl-menu__item-shortcut{color:inherit}.mtrl-menu__item--selected::after{content:\"\";position:absolute;left:12px;right:12px;margin-inline-start:auto;top:50%;transform:translateY(-50%);width:18px;height:18px;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E\") center/contain no-repeat;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E\") center/contain no-repeat;background-color:currentColor}.mtrl-menu__item-content{display:flex;align-items:center;width:100%;overflow:hidden}.mtrl-menu__item-icon{margin-inline-end:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-menu__item-icon svg{width:24px;height:24px}.mtrl-menu__item-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu__item-supporting{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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-shortcut{margin-left:12px;color:var(--mtrl-sys-color-on-surface-variant);flex-shrink:0}.mtrl-menu__divider{height:1px;flex-shrink:0;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-menu:focus-visible{outline:2px solid \".mtrl-menu__item:focus-visible\";outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}@media(prefers-reduced-motion: reduce){.mtrl-menu{transition:opacity 100ms linear,visibility 100ms}.mtrl-menu,.mtrl-menu--visible{transform:none}}@media(forced-colors: active){.mtrl-menu{border:1px solid CurrentColor}.mtrl-menu .mtrl-menu__divider{background-color:CurrentColor}.mtrl-menu .mtrl-menu__item--disabled{opacity:1;color:GrayText}}.mtrl-menu--dense{padding:4px 0}.mtrl-menu--dense .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;min-height:32px;padding:4px 12px;padding-right:32px}.mtrl-menu--dense .mtrl-menu__item--submenu{padding-right:36px}.mtrl-menu--dense .mtrl-menu__item-icon svg{width:16px;height:16px}.mtrl-menu--dense .mtrl-menu__divider{margin:4px 0}.mtrl-menu--vertical{--mtrl-menu-container: var(--mtrl-sys-color-surface-container-low);--mtrl-menu-label: var(--mtrl-sys-color-on-surface);--mtrl-menu-supporting: var(--mtrl-sys-color-on-surface-variant);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary-container);border-radius:var(--mtrl-sys-shape-corner-large, 16px);background-color:var(--mtrl-menu-container);color:var(--mtrl-menu-label);padding:4px}.mtrl-menu--vertical.mtrl-menu--vibrant{--mtrl-menu-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-label: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-supporting: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary)}.mtrl-menu--vertical .mtrl-menu__list{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;min-height:44px;padding:8px 16px;padding-inline-end:16px;color:var(--mtrl-menu-label);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);transition:border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-menu--vertical .mtrl-menu__item:hover,.mtrl-menu--vertical .mtrl-menu__item:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--active,.mtrl-menu--vertical .mtrl-menu__item:active{border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-start-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-end-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item--selected{background-color:var(--mtrl-menu-selected-container);color:var(--mtrl-menu-selected-label);border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:hover){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:hover::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.08;pointer-events:none;border-radius:inherit}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible::before,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:active){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu--vertical .mtrl-menu__item--disabled{color:color-mix(in srgb, var(--mtrl-menu-label) 38%, transparent)}.mtrl-menu--vertical .mtrl-menu__item-icon{color:var(--mtrl-menu-supporting);margin-inline-end:12px}.mtrl-menu--vertical .mtrl-menu__item-icon svg{width:20px;height:20px}.mtrl-menu--vertical .mtrl-menu__item-shortcut{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--mtrl-menu-supporting)}.mtrl-menu--vertical .mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu--vertical .mtrl-menu__item-supporting{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-menu-supporting);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-shortcut,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-supporting{color:inherit}.mtrl-menu--vertical .mtrl-menu__divider{margin:6px 0}.mtrl-menu--vertical:has(.mtrl-menu__group){background-color:rgba(0,0,0,0);box-shadow:none;padding:0;overflow:visible}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__list{overflow:visible;gap:2px}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group{background-color:var(--mtrl-menu-container);padding:4px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group+.mtrl-menu__group{margin-top:0}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group>ul{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical{transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms,border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-menu--vertical.mtrl-menu--active{border-radius:24px}.mtrl-menu--vertical.mtrl-menu--inactive{border-radius:var(--mtrl-sys-shape-corner-small, 8px)}[dir=rtl] .mtrl-menu,.mtrl-menu.mtrl-menu--rtl{transform-origin:top right}[dir=rtl] .mtrl-menu--position-top,[dir=rtl] .mtrl-menu--position-top-start,[dir=rtl] .mtrl-menu--position-top-end,.mtrl-menu.mtrl-menu--rtl.mtrl-menu--position-top,.mtrl-menu.mtrl-menu--rtl.mtrl-menu--position-top-start,.mtrl-menu.mtrl-menu--rtl.mtrl-menu--position-top-end{transform-origin:bottom right}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu,.mtrl-menu.mtrl-menu--rtl .mtrl-menu__item--submenu{padding-right:16px;padding-left:48px}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu::after,.mtrl-menu.mtrl-menu--rtl .mtrl-menu__item--submenu::after{right:auto;left:16px;transform:translateY(-50%) rotate(180deg)}" });
+registerStyles({ "menu": ".mtrl-menu{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);position:fixed;z-index:700;min-width:112px;max-width:280px;padding:8px 0;background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform-origin:top center;transform:scaleY(0);pointer-events:none;visibility:hidden;transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms}.mtrl-menu[popover]{inset:auto;margin:0;border:0}.mtrl-menu--visible{opacity:1;transform:scaleY(1);pointer-events:auto;visibility:visible}.mtrl-menu--position-top,.mtrl-menu--position-top-start,.mtrl-menu--position-top-end{transform-origin:bottom center}.mtrl-menu--submenu{position:absolute;z-index:701}.mtrl-menu__group{display:block;list-style:none}.mtrl-menu__group>ul{margin:0;padding:0;list-style:none}.mtrl-menu__group+.mtrl-menu__group{margin-top:8px}.mtrl-menu__list{margin:0;padding:0;list-style:none;overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.05);width:100%}.mtrl-menu__list::-webkit-scrollbar{width:8px}.mtrl-menu__list::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}.mtrl-menu__list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;min-height:48px;padding:12px;padding-inline-end:40px;cursor:pointer;user-select:none;color:var(--mtrl-sys-color-on-surface);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;box-sizing:border-box}:where(.mtrl-menu__item:hover){position:relative}.mtrl-menu__item:hover::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item:focus{outline:none}:where(.mtrl-menu__item:focus-visible,.mtrl-menu__item--active){position:relative}.mtrl-menu__item:focus-visible::before,.mtrl-menu__item--active::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item:active){position:relative}.mtrl-menu__item:active: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-menu__item--submenu{padding-right:48px}.mtrl-menu__item--submenu::after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E\") center/contain no-repeat;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E\") center/contain no-repeat;background-color:currentColor;opacity:.87}:where(.mtrl-menu__item--submenu[aria-expanded=true]){position:relative}.mtrl-menu__item--submenu[aria-expanded=true]::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-surface);opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-menu__item--submenu[aria-expanded=true]::after{opacity:1}.mtrl-menu__item--disabled{cursor:default;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-menu__item--disabled .mtrl-menu__item-icon,.mtrl-menu__item--disabled .mtrl-menu__item-supporting,.mtrl-menu__item--disabled .mtrl-menu__item-shortcut{color:inherit}.mtrl-menu__item--disabled:hover::before,.mtrl-menu__item--disabled:active::before{opacity:0}.mtrl-menu__item--selected{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}:where(.mtrl-menu__item--selected:hover){position:relative}.mtrl-menu__item--selected:hover::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.08;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item--selected:focus-visible,.mtrl-menu__item--selected.mtrl-menu__item--active){position:relative}.mtrl-menu__item--selected:focus-visible::before,.mtrl-menu__item--selected.mtrl-menu__item--active::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu__item--selected:active){position:relative}.mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-sys-color-on-secondary-container);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu__item--selected .mtrl-menu__item-shortcut{color:inherit}.mtrl-menu__item--selected::after{content:\"\";position:absolute;left:12px;right:12px;margin-inline-start:auto;top:50%;transform:translateY(-50%);width:18px;height:18px;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E\") center/contain no-repeat;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E\") center/contain no-repeat;background-color:currentColor}.mtrl-menu__item--selected.mtrl-menu__item--disabled{background-color:color-mix(in srgb, var(--mtrl-sys-color-secondary-container) 38%, transparent);color:color-mix(in srgb, var(--mtrl-sys-color-on-secondary-container) 38%, transparent)}.mtrl-menu__item--selected.mtrl-menu__item--disabled:hover::before,.mtrl-menu__item--selected.mtrl-menu__item--disabled:active::before{opacity:0}.mtrl-menu__item-content{display:flex;align-items:center;width:100%;overflow:hidden}.mtrl-menu__item-icon{margin-inline-end:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-menu__item-icon svg{width:24px;height:24px}.mtrl-menu__item-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu__item-supporting{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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu__item-shortcut{margin-left:12px;color:var(--mtrl-sys-color-on-surface-variant);flex-shrink:0}.mtrl-menu__divider{height:1px;flex-shrink:0;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-menu:focus-visible{outline:2px solid \".mtrl-menu__item:focus-visible\";outline-offset:2px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}@media(prefers-reduced-motion: reduce){.mtrl-menu{transition:opacity 100ms linear,visibility 100ms}.mtrl-menu,.mtrl-menu--visible{transform:none}}@media(forced-colors: active){.mtrl-menu{border:1px solid CurrentColor}.mtrl-menu .mtrl-menu__divider{background-color:CurrentColor}.mtrl-menu .mtrl-menu__item--disabled{opacity:1;color:GrayText}}.mtrl-menu--dense{padding:4px 0}.mtrl-menu--dense .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;min-height:32px;padding:4px 12px;padding-right:32px}.mtrl-menu--dense .mtrl-menu__item--submenu{padding-right:36px}.mtrl-menu--dense .mtrl-menu__item-icon svg{width:16px;height:16px}.mtrl-menu--dense .mtrl-menu__divider{margin:4px 0}.mtrl-menu--vertical{--mtrl-menu-container: var(--mtrl-sys-color-surface-container-low);--mtrl-menu-label: var(--mtrl-sys-color-on-surface);--mtrl-menu-supporting: var(--mtrl-sys-color-on-surface-variant);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-selected-disabled-container: color-mix( in srgb, var(--mtrl-menu-selected-container) 38%, transparent );border-radius:var(--mtrl-sys-shape-corner-large, 16px);background-color:var(--mtrl-menu-container);color:var(--mtrl-menu-label);padding:4px}.mtrl-menu--vertical.mtrl-menu--vibrant{--mtrl-menu-container: var(--mtrl-sys-color-tertiary-container);--mtrl-menu-label: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-supporting: var(--mtrl-sys-color-on-tertiary-container);--mtrl-menu-selected-container: var(--mtrl-sys-color-tertiary);--mtrl-menu-selected-label: var(--mtrl-sys-color-on-tertiary);--mtrl-menu-selected-disabled-container: var(--mtrl-menu-selected-container)}.mtrl-menu--vertical .mtrl-menu__list{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical .mtrl-menu__item{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;min-height:44px;padding:8px 16px;padding-inline-end:16px;color:var(--mtrl-menu-label);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);transition:border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-menu--vertical .mtrl-menu__item:hover,.mtrl-menu--vertical .mtrl-menu__item:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--active,.mtrl-menu--vertical .mtrl-menu__item:active{border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-start-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-medium, 12px);border-end-end-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-menu--vertical .mtrl-menu__item--selected{background-color:var(--mtrl-menu-selected-container);color:var(--mtrl-menu-selected-label);border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:hover){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:hover::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.08;pointer-events:none;border-radius:inherit}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:focus-visible::before,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--active::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-menu--vertical .mtrl-menu__item--selected:active){position:relative}.mtrl-menu--vertical .mtrl-menu__item--selected:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:var(--mtrl-menu-selected-label);opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--disabled{background-color:var(--mtrl-menu-selected-disabled-container);color:color-mix(in srgb, var(--mtrl-menu-selected-label) 38%, transparent)}.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--disabled:hover::before,.mtrl-menu--vertical .mtrl-menu__item--selected.mtrl-menu__item--disabled:active::before{opacity:0}.mtrl-menu--vertical .mtrl-menu__item--disabled{color:color-mix(in srgb, var(--mtrl-menu-label) 38%, transparent)}.mtrl-menu--vertical .mtrl-menu__item--disabled .mtrl-menu__item-icon,.mtrl-menu--vertical .mtrl-menu__item--disabled .mtrl-menu__item-supporting,.mtrl-menu--vertical .mtrl-menu__item--disabled .mtrl-menu__item-shortcut{color:inherit}.mtrl-menu--vertical .mtrl-menu__item-icon{color:var(--mtrl-menu-supporting);margin-inline-end:12px}.mtrl-menu--vertical .mtrl-menu__item-icon svg{width:20px;height:20px}.mtrl-menu--vertical .mtrl-menu__item-shortcut{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;color:var(--mtrl-menu-supporting)}.mtrl-menu--vertical .mtrl-menu__item-label{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.mtrl-menu--vertical .mtrl-menu__item-supporting{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-menu-supporting);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-icon,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-shortcut,.mtrl-menu--vertical .mtrl-menu__item--selected .mtrl-menu__item-supporting{color:inherit}.mtrl-menu--vertical .mtrl-menu__divider{margin:6px 0}.mtrl-menu--vertical:has(.mtrl-menu__group){background-color:rgba(0,0,0,0);box-shadow:none;padding:0;overflow:visible}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__list{overflow:visible;gap:2px}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group{background-color:var(--mtrl-menu-container);padding:4px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:first-child{border-start-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group:last-child{border-end-start-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group+.mtrl-menu__group{margin-top:0}.mtrl-menu--vertical:has(.mtrl-menu__group) .mtrl-menu__group>ul{display:flex;flex-direction:column;gap:2px}.mtrl-menu--vertical{transition:transform 250ms cubic-bezier(0.3, 0, 0, 1),opacity 250ms cubic-bezier(0.3, 0, 0, 1),visibility 250ms,border-radius 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1)}.mtrl-menu--vertical.mtrl-menu--active{border-radius:24px}.mtrl-menu--vertical.mtrl-menu--inactive{border-radius:var(--mtrl-sys-shape-corner-small, 8px)}[dir=rtl] .mtrl-menu,.mtrl-menu.mtrl-menu--rtl{transform-origin:top right}[dir=rtl] .mtrl-menu--position-top,[dir=rtl] .mtrl-menu--position-top-start,[dir=rtl] .mtrl-menu--position-top-end,.mtrl-menu.mtrl-menu--rtl.mtrl-menu--position-top,.mtrl-menu.mtrl-menu--rtl.mtrl-menu--position-top-start,.mtrl-menu.mtrl-menu--rtl.mtrl-menu--position-top-end{transform-origin:bottom right}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu,.mtrl-menu.mtrl-menu--rtl .mtrl-menu__item--submenu{padding-right:16px;padding-left:48px}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu::after,.mtrl-menu.mtrl-menu--rtl .mtrl-menu__item--submenu::after{right:auto;left:16px;transform:translateY(-50%) rotate(180deg)}" });

package/dist/elements/css/navigation-rail.css

@@ -1 +1 @@
-.mtrl-navigation-rail{display:flex;flex-direction:column;flex-shrink:0;box-sizing:border-box;inline-size:96px;block-size:100%;min-block-size:0;padding-block:44px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface-variant);transition:inline-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail--expanded{inline-size:var(--mtrl-navigation-rail-expanded-width, 280px)}.mtrl-navigation-rail__header{--mtrl-extended-fab-compact: 0;display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;gap:8px;margin-block-end:40px;padding-inline-start:24px;transition:padding-inline-start 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__header{--mtrl-extended-fab-compact: initial;padding-inline-start:20px}.mtrl-navigation-rail__toggle{display:grid;place-items:center;position:relative;overflow:hidden;inline-size:48px;block-size:48px;padding:12px;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer;transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__toggle svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__toggle:hover{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-navigation-rail__items{display:flex;flex-direction:column;flex-shrink:0;gap:4px;transition:gap 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__items{gap:0}.mtrl-navigation-rail__content{display:contents}.mtrl-navigation-rail__item{position:relative;isolation:isolate;display:block;box-sizing:border-box;inline-size:100%;block-size:64px;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:block-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item[aria-disabled=true]{opacity:.38;cursor:default}.mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-secondary)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item{block-size:56px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail__indicator{position:absolute;z-index:-1;inset-block-start:6px;inset-inline-start:20px;inline-size:56px;block-size:32px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);overflow:hidden;pointer-events:none;transition:inset-block-start 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),inline-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),block-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail__indicator::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-secondary-container);opacity:0;transform:scaleX(0.4);transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),opacity 450ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__indicator::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-on-secondary-container);opacity:0;transition:opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__indicator{inset-block-start:0;inline-size:calc(100% - 40px);block-size:56px}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator::before{opacity:1;transform:scaleX(1);transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item:hover .mtrl-navigation-rail__indicator::after{opacity:.08}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item:active .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item[aria-disabled=true] .mtrl-navigation-rail__indicator::after{opacity:0}.mtrl-navigation-rail__item:focus-visible{outline:none}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-navigation-rail__ripple{position:absolute;border-radius:50%;pointer-events:none;background:var(--mtrl-sys-color-on-secondary-container);animation:mtrl-navigation-rail-ripple 450ms ease-out forwards}.mtrl-navigation-rail__icon{position:absolute;display:grid;place-items:center;inset-block-start:10px;inset-inline-start:36px;inline-size:24px;block-size:24px;color:var(--mtrl-sys-color-on-surface-variant);transition:inset-block-start 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__icon svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__icon{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__icon{inset-block-start:16px}.mtrl-navigation-rail__label{position:absolute;box-sizing:border-box;inset-block-start:42px;inset-inline-start:16px;inline-size:64px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-block-start 0s linear 225ms,inset-inline-start 0s linear 225ms,inline-size 0s linear 225ms,font-size 0s linear 225ms,line-height 0s linear 225ms,letter-spacing 0s linear 225ms,text-align 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__label{inset-block-start:18px;inset-inline-start:68px;inline-size:calc(100% - 104px);text-align:start;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--badged .mtrl-navigation-rail__label{inline-size:calc(100% - 140px)}.mtrl-navigation-rail--switching .mtrl-navigation-rail__label,.mtrl-navigation-rail--switching .mtrl-navigation-rail__badge{animation:mtrl-navigation-rail-swap 450ms linear}.mtrl-navigation-rail__badge{position:absolute;box-sizing:border-box;inset-inline-start:54px;inset-block-start:2px;min-inline-size:16px;min-block-size:16px;padding-inline:4px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-inline-start 0s linear 225ms,inset-inline-end 0s linear 225ms,inset-block-start 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail__badge--dot{inline-size:6px;block-size:6px;min-inline-size:0;min-block-size:0;padding:0;inset-inline-start:58px;inset-block-start:6px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge{inset-inline-start:auto;inset-inline-end:36px;inset-block-start:20px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge--dot{inset-block-start:25px}.mtrl-navigation-rail--hide-collapsed:not(.mtrl-navigation-rail--expanded){display:none}.mtrl-navigation-rail--modal{position:fixed;inset-block:0;inset-inline:0 auto;margin:0;border:0;max-inline-size:calc(100vw - 56px);max-block-size:100dvh;block-size:100dvh;background:var(--mtrl-sys-color-surface-container);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px);transition:inline-size 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-navigation-rail--modal:not([open]){display:none}.mtrl-navigation-rail--modal::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-navigation-rail__toggle:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}@media(prefers-reduced-motion: reduce){.mtrl-navigation-rail,.mtrl-navigation-rail *,.mtrl-navigation-rail *::before,.mtrl-navigation-rail *::after{transition:none;animation:none}}@media(forced-colors: active){.mtrl-navigation-rail{border-inline-end:1px solid CanvasText}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator{outline:2px solid Highlight;outline-offset:-2px}}@keyframes mtrl-navigation-rail-ripple{from{transform:scale(0);opacity:.1}to{transform:scale(1);opacity:0}}@keyframes mtrl-navigation-rail-swap{0%,100%{opacity:1}50%{opacity:0}}
+.mtrl-navigation-rail{display:flex;flex-direction:column;flex-shrink:0;box-sizing:border-box;inline-size:96px;block-size:100%;min-block-size:0;padding-block:44px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface-variant);transition:inline-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail--expanded{inline-size:var(--mtrl-navigation-rail-expanded-width, 280px)}.mtrl-navigation-rail__header{--mtrl-extended-fab-compact: 0;display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;gap:8px;margin-block-end:40px;padding-inline-start:24px;transition:padding-inline-start 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__header{--mtrl-extended-fab-compact: initial;padding-inline-start:20px}.mtrl-navigation-rail__toggle{display:grid;place-items:center;position:relative;overflow:hidden;inline-size:48px;block-size:48px;padding:12px;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer;transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__toggle svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__toggle:hover{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-navigation-rail__items{display:flex;flex-direction:column;flex-shrink:0;gap:4px;transition:gap 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__items{gap:0}.mtrl-navigation-rail__content{display:contents}.mtrl-navigation-rail__item{position:relative;isolation:isolate;display:block;box-sizing:border-box;inline-size:100%;block-size:64px;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:block-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item[aria-disabled=true]{opacity:.38;cursor:default}.mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-secondary)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item{block-size:56px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail__indicator{position:absolute;z-index:-1;inset-block-start:6px;inset-inline-start:20px;inline-size:56px;block-size:32px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);overflow:hidden;pointer-events:none;transition:inset-block-start 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),inline-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),block-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail__indicator::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-secondary-container);opacity:0;transform:scaleX(0.4);transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),opacity 450ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__indicator::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-on-secondary-container);opacity:0;transition:opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__indicator{inset-block-start:0;inline-size:calc(100% - 40px);block-size:56px}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator::before{opacity:1;transform:scaleX(1);transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item:hover .mtrl-navigation-rail__indicator::after{opacity:.08}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item:active .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item[aria-disabled=true] .mtrl-navigation-rail__indicator::after{opacity:0}.mtrl-navigation-rail__item:focus-visible{outline:none}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-navigation-rail__ripple{position:absolute;border-radius:50%;pointer-events:none;background:var(--mtrl-sys-color-on-secondary-container);animation:mtrl-navigation-rail-ripple 450ms ease-out forwards}.mtrl-navigation-rail__icon{position:absolute;display:grid;place-items:center;inset-block-start:10px;inset-inline-start:36px;inline-size:24px;block-size:24px;color:var(--mtrl-sys-color-on-surface-variant);transition:inset-block-start 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__icon svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__icon{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__icon{inset-block-start:16px}.mtrl-navigation-rail__label{position:absolute;box-sizing:border-box;inset-block-start:42px;inset-inline-start:16px;inline-size:64px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-block-start 0s linear 225ms,inset-inline-start 0s linear 225ms,inline-size 0s linear 225ms,font-size 0s linear 225ms,line-height 0s linear 225ms,letter-spacing 0s linear 225ms,text-align 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__label{inset-block-start:18px;inset-inline-start:68px;inline-size:calc(100% - 104px);text-align:start;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--badged .mtrl-navigation-rail__label{inline-size:calc(100% - 140px)}.mtrl-navigation-rail--switching .mtrl-navigation-rail__label,.mtrl-navigation-rail--switching .mtrl-navigation-rail__badge{animation:mtrl-navigation-rail-swap 450ms linear}.mtrl-navigation-rail__badge{position:absolute;box-sizing:border-box;inset-inline-start:48px;inset-block-start:8px;min-inline-size:16px;min-block-size:16px;padding-inline:4px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-inline-start 0s linear 225ms,inset-inline-end 0s linear 225ms,inset-block-start 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail__badge--dot{inline-size:6px;block-size:6px;min-inline-size:0;min-block-size:0;padding:0;inset-inline-start:54px;inset-block-start:10px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge{inset-inline-start:auto;inset-inline-end:36px;inset-block-start:20px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge--dot{inset-block-start:25px}.mtrl-navigation-rail--hide-collapsed:not(.mtrl-navigation-rail--expanded){display:none}.mtrl-navigation-rail--modal{position:fixed;inset-block:0;inset-inline:0 auto;margin:0;border:0;max-inline-size:calc(100vw - 56px);max-block-size:100dvh;block-size:100dvh;background:var(--mtrl-sys-color-surface-container);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px);transition:inline-size 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-navigation-rail--modal:not([open]){display:none}.mtrl-navigation-rail--modal::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-navigation-rail__toggle:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}@media(prefers-reduced-motion: reduce){.mtrl-navigation-rail,.mtrl-navigation-rail *,.mtrl-navigation-rail *::before,.mtrl-navigation-rail *::after{transition:none;animation:none}}@media(forced-colors: active){.mtrl-navigation-rail{border-inline-end:1px solid CanvasText}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator{outline:2px solid Highlight;outline-offset:-2px}}@keyframes mtrl-navigation-rail-ripple{from{transform:scale(0);opacity:.1}to{transform:scale(1);opacity:0}}@keyframes mtrl-navigation-rail-swap{0%,100%{opacity:1}50%{opacity:0}}

package/dist/elements/css/navigation-rail.js

@@ -1,3 +1,3 @@
 import "./ripple.js";
 import { registerStyles } from "../styles.js";
-registerStyles({ "navigation-rail": ".mtrl-navigation-rail{display:flex;flex-direction:column;flex-shrink:0;box-sizing:border-box;inline-size:96px;block-size:100%;min-block-size:0;padding-block:44px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface-variant);transition:inline-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail--expanded{inline-size:var(--mtrl-navigation-rail-expanded-width, 280px)}.mtrl-navigation-rail__header{--mtrl-extended-fab-compact: 0;display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;gap:8px;margin-block-end:40px;padding-inline-start:24px;transition:padding-inline-start 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__header{--mtrl-extended-fab-compact: initial;padding-inline-start:20px}.mtrl-navigation-rail__toggle{display:grid;place-items:center;position:relative;overflow:hidden;inline-size:48px;block-size:48px;padding:12px;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer;transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__toggle svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__toggle:hover{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-navigation-rail__items{display:flex;flex-direction:column;flex-shrink:0;gap:4px;transition:gap 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__items{gap:0}.mtrl-navigation-rail__content{display:contents}.mtrl-navigation-rail__item{position:relative;isolation:isolate;display:block;box-sizing:border-box;inline-size:100%;block-size:64px;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:block-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item[aria-disabled=true]{opacity:.38;cursor:default}.mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-secondary)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item{block-size:56px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail__indicator{position:absolute;z-index:-1;inset-block-start:6px;inset-inline-start:20px;inline-size:56px;block-size:32px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);overflow:hidden;pointer-events:none;transition:inset-block-start 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),inline-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),block-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail__indicator::before{content:\"\";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-secondary-container);opacity:0;transform:scaleX(0.4);transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),opacity 450ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__indicator::after{content:\"\";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-on-secondary-container);opacity:0;transition:opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__indicator{inset-block-start:0;inline-size:calc(100% - 40px);block-size:56px}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator::before{opacity:1;transform:scaleX(1);transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item:hover .mtrl-navigation-rail__indicator::after{opacity:.08}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item:active .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item[aria-disabled=true] .mtrl-navigation-rail__indicator::after{opacity:0}.mtrl-navigation-rail__item:focus-visible{outline:none}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-navigation-rail__ripple{position:absolute;border-radius:50%;pointer-events:none;background:var(--mtrl-sys-color-on-secondary-container);animation:mtrl-navigation-rail-ripple 450ms ease-out forwards}.mtrl-navigation-rail__icon{position:absolute;display:grid;place-items:center;inset-block-start:10px;inset-inline-start:36px;inline-size:24px;block-size:24px;color:var(--mtrl-sys-color-on-surface-variant);transition:inset-block-start 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__icon svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__icon{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__icon{inset-block-start:16px}.mtrl-navigation-rail__label{position:absolute;box-sizing:border-box;inset-block-start:42px;inset-inline-start:16px;inline-size:64px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-block-start 0s linear 225ms,inset-inline-start 0s linear 225ms,inline-size 0s linear 225ms,font-size 0s linear 225ms,line-height 0s linear 225ms,letter-spacing 0s linear 225ms,text-align 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__label{inset-block-start:18px;inset-inline-start:68px;inline-size:calc(100% - 104px);text-align:start;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--badged .mtrl-navigation-rail__label{inline-size:calc(100% - 140px)}.mtrl-navigation-rail--switching .mtrl-navigation-rail__label,.mtrl-navigation-rail--switching .mtrl-navigation-rail__badge{animation:mtrl-navigation-rail-swap 450ms linear}.mtrl-navigation-rail__badge{position:absolute;box-sizing:border-box;inset-inline-start:54px;inset-block-start:2px;min-inline-size:16px;min-block-size:16px;padding-inline:4px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-inline-start 0s linear 225ms,inset-inline-end 0s linear 225ms,inset-block-start 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail__badge--dot{inline-size:6px;block-size:6px;min-inline-size:0;min-block-size:0;padding:0;inset-inline-start:58px;inset-block-start:6px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge{inset-inline-start:auto;inset-inline-end:36px;inset-block-start:20px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge--dot{inset-block-start:25px}.mtrl-navigation-rail--hide-collapsed:not(.mtrl-navigation-rail--expanded){display:none}.mtrl-navigation-rail--modal{position:fixed;inset-block:0;inset-inline:0 auto;margin:0;border:0;max-inline-size:calc(100vw - 56px);max-block-size:100dvh;block-size:100dvh;background:var(--mtrl-sys-color-surface-container);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px);transition:inline-size 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-navigation-rail--modal:not([open]){display:none}.mtrl-navigation-rail--modal::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-navigation-rail__toggle:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}@media(prefers-reduced-motion: reduce){.mtrl-navigation-rail,.mtrl-navigation-rail *,.mtrl-navigation-rail *::before,.mtrl-navigation-rail *::after{transition:none;animation:none}}@media(forced-colors: active){.mtrl-navigation-rail{border-inline-end:1px solid CanvasText}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator{outline:2px solid Highlight;outline-offset:-2px}}@keyframes mtrl-navigation-rail-ripple{from{transform:scale(0);opacity:.1}to{transform:scale(1);opacity:0}}@keyframes mtrl-navigation-rail-swap{0%,100%{opacity:1}50%{opacity:0}}" });
+registerStyles({ "navigation-rail": ".mtrl-navigation-rail{display:flex;flex-direction:column;flex-shrink:0;box-sizing:border-box;inline-size:96px;block-size:100%;min-block-size:0;padding-block:44px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface-variant);transition:inline-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail--expanded{inline-size:var(--mtrl-navigation-rail-expanded-width, 280px)}.mtrl-navigation-rail__header{--mtrl-extended-fab-compact: 0;display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;gap:8px;margin-block-end:40px;padding-inline-start:24px;transition:padding-inline-start 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__header{--mtrl-extended-fab-compact: initial;padding-inline-start:20px}.mtrl-navigation-rail__toggle{display:grid;place-items:center;position:relative;overflow:hidden;inline-size:48px;block-size:48px;padding:12px;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer;transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__toggle svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__toggle:hover{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-navigation-rail__items{display:flex;flex-direction:column;flex-shrink:0;gap:4px;transition:gap 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__items{gap:0}.mtrl-navigation-rail__content{display:contents}.mtrl-navigation-rail__item{position:relative;isolation:isolate;display:block;box-sizing:border-box;inline-size:100%;block-size:64px;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:block-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item[aria-disabled=true]{opacity:.38;cursor:default}.mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-secondary)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item{block-size:56px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail__indicator{position:absolute;z-index:-1;inset-block-start:6px;inset-inline-start:20px;inline-size:56px;block-size:32px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);overflow:hidden;pointer-events:none;transition:inset-block-start 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),inline-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),block-size 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1)}.mtrl-navigation-rail__indicator::before{content:\"\";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-secondary-container);opacity:0;transform:scaleX(0.4);transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),opacity 450ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__indicator::after{content:\"\";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-on-secondary-container);opacity:0;transition:opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__indicator{inset-block-start:0;inline-size:calc(100% - 40px);block-size:56px}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator::before{opacity:1;transform:scaleX(1);transition:transform 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item:hover .mtrl-navigation-rail__indicator::after{opacity:.08}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item:active .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item[aria-disabled=true] .mtrl-navigation-rail__indicator::after{opacity:0}.mtrl-navigation-rail__item:focus-visible{outline:none}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-navigation-rail__ripple{position:absolute;border-radius:50%;pointer-events:none;background:var(--mtrl-sys-color-on-secondary-container);animation:mtrl-navigation-rail-ripple 450ms ease-out forwards}.mtrl-navigation-rail__icon{position:absolute;display:grid;place-items:center;inset-block-start:10px;inset-inline-start:36px;inline-size:24px;block-size:24px;color:var(--mtrl-sys-color-on-surface-variant);transition:inset-block-start 450ms linear(0, 0.055, 0.18, 0.332, 0.483, 0.619, 0.733, 0.823, 0.891, 0.94, 0.973, 0.994, 1.007, 1.013, 1.015, 1.015, 1.013, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__icon svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__icon{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__icon{inset-block-start:16px}.mtrl-navigation-rail__label{position:absolute;box-sizing:border-box;inset-block-start:42px;inset-inline-start:16px;inline-size:64px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-block-start 0s linear 225ms,inset-inline-start 0s linear 225ms,inline-size 0s linear 225ms,font-size 0s linear 225ms,line-height 0s linear 225ms,letter-spacing 0s linear 225ms,text-align 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__label{inset-block-start:18px;inset-inline-start:68px;inline-size:calc(100% - 104px);text-align:start;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--badged .mtrl-navigation-rail__label{inline-size:calc(100% - 140px)}.mtrl-navigation-rail--switching .mtrl-navigation-rail__label,.mtrl-navigation-rail--switching .mtrl-navigation-rail__badge{animation:mtrl-navigation-rail-swap 450ms linear}.mtrl-navigation-rail__badge{position:absolute;box-sizing:border-box;inset-inline-start:48px;inset-block-start:8px;min-inline-size:16px;min-block-size:16px;padding-inline:4px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-inline-start 0s linear 225ms,inset-inline-end 0s linear 225ms,inset-block-start 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail__badge--dot{inline-size:6px;block-size:6px;min-inline-size:0;min-block-size:0;padding:0;inset-inline-start:54px;inset-block-start:10px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge{inset-inline-start:auto;inset-inline-end:36px;inset-block-start:20px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge--dot{inset-block-start:25px}.mtrl-navigation-rail--hide-collapsed:not(.mtrl-navigation-rail--expanded){display:none}.mtrl-navigation-rail--modal{position:fixed;inset-block:0;inset-inline:0 auto;margin:0;border:0;max-inline-size:calc(100vw - 56px);max-block-size:100dvh;block-size:100dvh;background:var(--mtrl-sys-color-surface-container);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px);transition:inline-size 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1.039, 1.085, 1.094, 1.082, 1.06, 1.037, 1.018, 1.004, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-navigation-rail--modal:not([open]){display:none}.mtrl-navigation-rail--modal::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-navigation-rail__toggle:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}@media(prefers-reduced-motion: reduce){.mtrl-navigation-rail,.mtrl-navigation-rail *,.mtrl-navigation-rail *::before,.mtrl-navigation-rail *::after{transition:none;animation:none}}@media(forced-colors: active){.mtrl-navigation-rail{border-inline-end:1px solid CanvasText}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator{outline:2px solid Highlight;outline-offset:-2px}}@keyframes mtrl-navigation-rail-ripple{from{transform:scale(0);opacity:.1}to{transform:scale(1);opacity:0}}@keyframes mtrl-navigation-rail-swap{0%,100%{opacity:1}50%{opacity:0}}" });

package/dist/elements/css/tooltip.css

@@ -1 +1 @@
-.mtrl-tooltip{position:fixed;top:0;left:0;z-index:1000;max-width:200px;padding:4px 8px;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface);font-size:12px;line-height:16px;text-align:center;pointer-events:none;opacity:0;transform:scale(0.9);transform-origin:center;box-sizing:border-box;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400;font-weight:500;transition:opacity 150ms cubic-bezier(0, 0, 0.2, 1),transform 150ms cubic-bezier(0, 0, 0.2, 1)}.mtrl-tooltip:where([popover]){inset:auto;margin:0;border:0;overflow:visible}.mtrl-tooltip--visible{opacity:1;transform:scale(1);pointer-events:auto}.mtrl-tooltip--rich{max-width:320px;padding:12px 16px;border-radius:var(--mtrl-sys-shape-corner-medium, 12px);background-color:var(--mtrl-sys-color-surface-container);--mtrl-tooltip-arrow-color: var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface-variant);text-align:start;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-tooltip--plain{background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface)}.mtrl-tooltip__arrow{position:absolute;width:0;height:0;border:8px solid rgba(0,0,0,0);pointer-events:none}.mtrl-tooltip__arrow--top{bottom:100%;left:50%;transform:translateX(-50%);border-bottom-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-top-width:0}.mtrl-tooltip__arrow--top-start{bottom:100%;left:8px;border-bottom-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-top-width:0}.mtrl-tooltip__arrow--top-end{bottom:100%;right:8px;border-bottom-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-top-width:0}.mtrl-tooltip__arrow--bottom{top:100%;left:50%;transform:translateX(-50%);border-top-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-bottom-width:0}.mtrl-tooltip__arrow--bottom-start{top:100%;left:8px;border-top-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-bottom-width:0}.mtrl-tooltip__arrow--bottom-end{top:100%;right:8px;border-top-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-bottom-width:0}.mtrl-tooltip__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-left-width:0}.mtrl-tooltip__arrow--left-start{right:100%;top:8px;border-right-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-left-width:0}.mtrl-tooltip__arrow--left-end{right:100%;bottom:8px;border-right-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-left-width:0}.mtrl-tooltip__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-right-width:0}.mtrl-tooltip__arrow--right-start{left:100%;top:8px;border-left-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-right-width:0}.mtrl-tooltip__arrow--right-end{left:100%;bottom:8px;border-left-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-right-width:0}.mtrl-tooltip--top{margin-bottom:8px}.mtrl-tooltip--bottom{margin-top:8px}.mtrl-tooltip--left{margin-right:8px}.mtrl-tooltip--right{margin-left:8px}
+.mtrl-tooltip{position:fixed;top:0;left:0;z-index:1000;max-width:200px;padding:4px 8px;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface);font-size:12px;line-height:16px;text-align:center;pointer-events:none;opacity:0;transform:scale(0.9);transform-origin:center;box-sizing:border-box;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400;transition:opacity 150ms cubic-bezier(0, 0, 0.2, 1),transform 150ms cubic-bezier(0, 0, 0.2, 1)}.mtrl-tooltip:where([popover]){inset:auto;margin:0;border:0;overflow:visible}.mtrl-tooltip--visible{opacity:1;transform:scale(1);pointer-events:auto}.mtrl-tooltip--rich{max-width:320px;padding:12px 16px 8px;border-radius:var(--mtrl-sys-shape-corner-medium, 12px);background-color:var(--mtrl-sys-color-surface-container);--mtrl-tooltip-arrow-color: var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface-variant);text-align:start;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-tooltip--plain{background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface)}.mtrl-tooltip__arrow{position:absolute;width:0;height:0;border:8px solid rgba(0,0,0,0);pointer-events:none}.mtrl-tooltip__arrow--top{bottom:100%;left:50%;transform:translateX(-50%);border-bottom-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-top-width:0}.mtrl-tooltip__arrow--top-start{bottom:100%;left:8px;border-bottom-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-top-width:0}.mtrl-tooltip__arrow--top-end{bottom:100%;right:8px;border-bottom-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-top-width:0}.mtrl-tooltip__arrow--bottom{top:100%;left:50%;transform:translateX(-50%);border-top-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-bottom-width:0}.mtrl-tooltip__arrow--bottom-start{top:100%;left:8px;border-top-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-bottom-width:0}.mtrl-tooltip__arrow--bottom-end{top:100%;right:8px;border-top-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-bottom-width:0}.mtrl-tooltip__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-left-width:0}.mtrl-tooltip__arrow--left-start{right:100%;top:8px;border-right-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-left-width:0}.mtrl-tooltip__arrow--left-end{right:100%;bottom:8px;border-right-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-left-width:0}.mtrl-tooltip__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-right-width:0}.mtrl-tooltip__arrow--right-start{left:100%;top:8px;border-left-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-right-width:0}.mtrl-tooltip__arrow--right-end{left:100%;bottom:8px;border-left-color:var(--mtrl-tooltip-arrow-color, var(--mtrl-sys-color-inverse-surface));border-right-width:0}.mtrl-tooltip--top{margin-bottom:8px}.mtrl-tooltip--bottom{margin-top:8px}.mtrl-tooltip--left{margin-right:8px}.mtrl-tooltip--right{margin-left:8px}