material 3.0.0-next.1 → 3.0.1

package/README.md

@@ -2,22 +2,24 @@
 
 Material Design 3 components for the web: as web components, as React, Vue, Svelte and Solid components, and as plain JavaScript. Written in TypeScript, with zero dependencies.
 
+**Documentation, live playgrounds and examples: [md3.io](https://md3.io)**
+
+[![npm version](https://img.shields.io/npm/v/material.svg)](https://www.npmjs.com/package/material)
+[![CI](https://github.com/floor/material/actions/workflows/ci.yml/badge.svg)](https://github.com/floor/material/actions/workflows/ci.yml)
+[![license](https://img.shields.io/npm/l/material.svg?cacheSeconds=86400)](https://github.com/floor/material/blob/main/LICENSE)
+
 - **Material 3 Expressive.** Component sizes, shapes, colours and spring motion follow the Material 3 tokens.
 - **One implementation, every stack.** A button looks and behaves the same as an element, as a framework component and as a factory.
 - **Zero dependencies.** Installing `material` installs nothing else; the frameworks are optional peers.
 - **Server rendering.** Elements and framework components render to declarative shadow DOM on Node and Bun.
 - **Measured sizes.** A size budget per component, enforced on every pull request.
 
-Documentation, a live playground and examples in every framework: **[md3.io](https://md3.io)**.
-
 ## Install
 
 <!-- install -->
 ```bash
-npm install material@next
+npm install material
 ```
-
-3.0.0 is in pre-release, on the `next` tag. Until it is released, `npm install material` without the tag installs 1.0.4, an earlier and separate library (see [Where this came from](#where-this-came-from)).
 <!-- /install -->
 
 ## Quick start
@@ -92,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.4 kB |
 | `createButton`, without code splitting (the progress indicator included) | 13.7 kB |
 | `createButton`, `createTextField` and `createCheckbox`, without code splitting | 19.9 kB |
-| Everything the root exports (`export * from 'material'`), without code splitting | 126.9 kB |
+| Everything the root exports (`export * from 'material'`), without code splitting | 127.0 kB |
 | `material/styles/base` | 2.9 kB |
 | `material/styles/base` and `material/styles/button` | 5.2 kB |
-| `material/styles`, the full stylesheet | 61.8 kB |
+| `material/styles`, the full stylesheet | 62.6 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/index.d.ts

@@ -68,7 +68,7 @@ export type { FabConfig, FabComponent, FabVariant } from "./fab/types.js";
 export type { ExtendedFabConfig, ExtendedFabComponent, ExtendedFabVariant, } from "./extended-fab/types.js";
 export type { IconButtonConfig, IconButtonComponent, } from "./icon-button/types.js";
 export type { IconButtonVariant } from "./icon-button/constants.js";
-export type { ListConfig, ListItem, ListSlot, ListComponent, SelectEvent as ListSelectEvent, LoadEvent, } from "./list/types.js";
+export type { ListConfig, ListVariant, ListItem, ListSlot, ListComponent, SelectEvent as ListSelectEvent, LoadEvent, } from "./list/types.js";
 export type { MenuConfig, MenuVariant, MenuComponent, MenuItem } from "./menu/types.js";
 export type { SplitButtonConfig, SplitButtonComponent, SplitButtonVariant, } from "./split-button/types.js";
 export type { LoadingIndicatorConfig, LoadingIndicatorComponent, } from "./loading-indicator/types.js";

package/dist/components/list/config.js

@@ -1,5 +1,7 @@
 import { createComponentConfig, createElementConfig as coreCreateElementConfig, } from "../../core/config/component.js";
+import { LIST_VARIANTS } from "./constants.js";
 export const defaultConfig = {
+    variant: LIST_VARIANTS.STANDARD,
     items: [],
     trackSelection: true,
     multiSelect: false,
@@ -10,7 +12,10 @@ export const createBaseConfig = (config = {}) => {
         throw new TypeError("List items must be an array");
     }
     const merged = createComponentConfig(defaultConfig, config, "list");
-    return { ...merged, items: merged.items ?? [] };
+    const variant = Object.values(LIST_VARIANTS).includes(merged.variant)
+        ? merged.variant
+        : LIST_VARIANTS.STANDARD;
+    return { ...merged, variant, items: merged.items ?? [] };
 };
 export const getElementConfig = (config) => {
     const attributes = {

package/dist/components/list/constants.d.ts

@@ -13,6 +13,16 @@ export declare const LIST_DEFAULTS: {
     /** Default item height in pixels */
     readonly ITEM_HEIGHT: 56;
 };
+/**
+ * List variants (m3.material.io lists)
+ * - STANDARD: the baseline list: no container, square rows (default)
+ * - SEGMENTED: the expressive list: each row paints its own container and
+ *   shape, 2px apart
+ */
+export declare const LIST_VARIANTS: {
+    readonly STANDARD: "standard";
+    readonly SEGMENTED: "segmented";
+};
 /**
  * List types for rendering and behavior
  */

package/dist/components/list/constants.js

@@ -5,6 +5,10 @@ export const LIST_DEFAULTS = {
     RENDER_BUFFER_SIZE: 5,
     ITEM_HEIGHT: 56
 };
+export const LIST_VARIANTS = {
+    STANDARD: 'standard',
+    SEGMENTED: 'segmented'
+};
 export const LIST_TYPES = {
     DEFAULT: 'default',
     SINGLE_SELECT: 'single-select',

package/dist/components/list/index.d.ts

@@ -1,4 +1,4 @@
 /** Material list anatomy for static data. */
 export { default, default as createList } from "./list.js";
-export { LIST_DEFAULTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES, } from "./constants.js";
-export type { ListConfig, ListItem, ListSlot, ListComponent, SelectEvent, LoadEvent, } from "./types.js";
+export { LIST_DEFAULTS, LIST_VARIANTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES, } from "./constants.js";
+export type { ListConfig, ListVariant, ListItem, ListSlot, ListComponent, SelectEvent, LoadEvent, } from "./types.js";

package/dist/components/list/index.js

@@ -1,2 +1,2 @@
 export { default, default as createList } from "./list.js";
-export { LIST_DEFAULTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES, } from "./constants.js";
+export { LIST_DEFAULTS, LIST_VARIANTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES, } from "./constants.js";

package/dist/components/list/list.d.ts

@@ -5,18 +5,22 @@ import type { ListComponent, ListConfig, ListItem } from "./types.js";
  * The List component provides a simple way to render static arrays of data
  * with Material item anatomy and built-in selection capabilities.
  *
- * The row's corners are four custom properties, named as the button's
+ * `variant` is the list's style. `'standard'` (the default) is the baseline
+ * list: no container, square rows in every state. `'segmented'` is the
+ * expressive list: each row paints its own container colour and shape, with
+ * a gap between rows; the list itself has no background and no radius.
+ *
+ * A segmented list reads five custom properties, named as the button's
  * `--mtrl-button-shape` and `--mtrl-button-shape-pressed`:
  * `--mtrl-list-item-shape` (4px at rest), `--mtrl-list-item-shape-outer`
- * (16px, the rows' outer corners and the container),
- * `--mtrl-list-item-shape-hover` (12px) and `--mtrl-list-item-shape-active`
- * (16px focused, pressed or selected). The list reads them and does not
- * declare them, so set them on the list, on any ancestor, or on the
- * `<m-list>` element. The container is rounded by
- * `--mtrl-list-item-shape-outer`, so the corners show at rest on a
- * background that is not the surface colour. Set that property to `0` to
- * square the container and the rows' outer corners. Set the four to `0`
- * for square rows.
+ * (16px, the outer corners of the first and the last row),
+ * `--mtrl-list-item-shape-hover` (12px), `--mtrl-list-item-shape-active`
+ * (16px focused, pressed or selected) and `--mtrl-list-segmented-gap` (2px
+ * between rows). The row colour is `--mtrl-list-item-container-color` in
+ * both variants (surface by default in standard, surface-container in
+ * segmented); set it to `transparent` for rows without their own colour.
+ * The list reads these and does not declare them, so set them on the list,
+ * on any ancestor, or on the `<m-list>` element.
  *
  * @param config - Configuration options for the list
  * @returns List component instance

package/dist/components/list/list.js

@@ -1,13 +1,13 @@
 import { pipe } from "../../core/compose/pipe.js";
 import { createBase, withElement } from "../../core/compose/component.js";
-import { withEvents, withLifecycle } from "../../core/compose/features/index.js";
+import { withEvents, withLifecycle, withVariant } from "../../core/compose/features/index.js";
 import { withRenderer, withSelection } from "./features/index.js";
 import { withAPI } from "./api.js";
 import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
 const createList = (config = {}) => {
     try {
         const baseConfig = createBaseConfig(config);
-        const component = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withRenderer(baseConfig), withSelection(baseConfig), withLifecycle(), (comp) => withAPI(getApiConfig(comp, baseConfig))(comp))(baseConfig);
+        const component = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withVariant(baseConfig), withRenderer(baseConfig), withSelection(baseConfig), withLifecycle(), (comp) => withAPI(getApiConfig(comp, baseConfig))(comp))(baseConfig);
         return component;
     }
     catch (error) {

package/dist/components/list/types.d.ts

@@ -1,9 +1,24 @@
 import type { ForwardedEventPayload } from "../../core/dom/index.js";
+/**
+ * List variant types following Material Design 3 guidelines.
+ * - standard: the baseline list: no container, square rows (default)
+ * - segmented: the expressive list: each row paints its own container and
+ *   shape, 2px apart
+ *
+ * @category Components
+ */
+export type ListVariant = 'standard' | 'segmented';
 /**
  * Configuration for the List component
  * @interface ListConfig
  */
 export interface ListConfig<T = unknown> {
+    /**
+     * The list's visual style. It does not change the list's behavior.
+     * An unknown value is the default.
+     * @default 'standard'
+     */
+    variant?: ListVariant;
     /**
      * Static array of items to display
      * @required

package/dist/components/menu/features/position.js

@@ -4,6 +4,7 @@ export const createPositioner = (component, config) => {
     const positionElement = (menuElement, openerElement, preferredPosition, isSubmenu = false) => {
         if (!menuElement || !openerElement)
             return;
+        menuElement.classList.toggle(component.getClass("menu--rtl"), getComputedStyle(menuElement).direction === "rtl");
         const topLayer = config.layer === "top";
         const position = topLayer ? "fixed" : "absolute";
         const hasContainer = !topLayer && config.container && config.container !== document.body;
@@ -115,6 +116,11 @@ export const createPositioner = (component, config) => {
             }
         }
         menuElement.style.maxHeight = fitted !== null ? `${fitted}px` : (config.maxHeight ?? "");
+        if (!isSubmenu &&
+            menuRect.width > openerRect.width &&
+            (calculatedPosition === "top-start" || calculatedPosition === "bottom-start") &&
+            getComputedStyle(openerElement).direction === "rtl")
+            calculatedPosition = calculatedPosition.replace("start", "end");
         const positionClasses = [
             "position-top",
             "position-bottom",

package/dist/elements/css/fab-menu.css

@@ -1 +1 @@
-.mtrl-fab-menu{position:relative;display:inline-block;width:56px;height:56px;vertical-align:middle}.mtrl-fab-menu--medium{width:80px;height:80px}.mtrl-fab-menu--large{width:96px;height:96px}.mtrl-fab-menu--primary{--mtrl-fab-menu-close: var(--mtrl-sys-color-primary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-primary);--mtrl-fab-menu-item: var(--mtrl-sys-color-primary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-primary-container)}.mtrl-fab-menu--secondary{--mtrl-fab-menu-close: var(--mtrl-sys-color-secondary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-secondary);--mtrl-fab-menu-item: var(--mtrl-sys-color-secondary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-secondary-container)}.mtrl-fab-menu--tertiary{--mtrl-fab-menu-close: var(--mtrl-sys-color-tertiary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-tertiary);--mtrl-fab-menu-item: var(--mtrl-sys-color-tertiary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-tertiary-container)}.mtrl-fab-menu--bottom-end,.mtrl-fab-menu--bottom-start{--mtrl-fab-menu-margin: 16px;position:absolute;bottom:var(--mtrl-fab-menu-margin);z-index:50}@media(min-width: 1200px){.mtrl-fab-menu--bottom-end,.mtrl-fab-menu--bottom-start{--mtrl-fab-menu-margin: 24px}}.mtrl-fab-menu--bottom-end{inset-inline-end:var(--mtrl-fab-menu-margin)}.mtrl-fab-menu--bottom-start{inset-inline-start:var(--mtrl-fab-menu-margin)}.mtrl-fab.mtrl-fab-menu__fab{position:absolute;inset-block-start:0;inset-inline-end:0;display:grid;place-items:center;transition:width 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),height 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),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 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1, 1, 1, 1, 1, 1, 1, 1, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1, 1, 1),color 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1, 1, 1, 1, 1, 1, 1, 1, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1, 1, 1),box-shadow 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-fab.mtrl-fab-menu__fab>*{grid-area:1/1}.mtrl-fab.mtrl-fab-menu__fab .mtrl-fab__icon,.mtrl-fab.mtrl-fab-menu__fab .mtrl-fab-menu__close{transition:visibility 0s linear 48ms}.mtrl-fab-menu__close{display:inline-flex;width:20px;height:20px;visibility:hidden}.mtrl-fab-menu__close svg{width:20px;height:20px;fill:currentColor}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab{width:56px;height:56px;border-radius:28px;background-color:var(--mtrl-fab-menu-close);color:var(--mtrl-fab-menu-on-close)}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab .mtrl-fab__icon{visibility:hidden}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab .mtrl-fab-menu__close{visibility:visible}.mtrl-fab-menu__list{position:absolute;bottom:calc(100% + 8px);inset-inline-end:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;overflow-y:auto;visibility:hidden;transition:visibility 0s linear var(--mtrl-fab-menu-exit, 0ms)}.mtrl-fab-menu--menu .mtrl-fab-menu__list{display:none}.mtrl-fab-menu--open .mtrl-fab-menu__list{visibility:visible;transition-delay:0s}.mtrl-fab-menu__item{position:relative;display:inline-flex;flex-shrink:0;justify-content:flex-end;box-sizing:border-box;width:0;height:56px;padding:0;border:none;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-fab-menu-item);color:var(--mtrl-fab-menu-on-item);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500;white-space:nowrap;cursor:pointer;overflow:hidden;opacity:0;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),width 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);transition-delay:var(--mtrl-fab-menu-delay, 0ms)}:where(.mtrl-fab-menu__item:hover){position:relative}.mtrl-fab-menu__item:hover::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px}:where(.mtrl-fab-menu__item:focus-visible){position:relative}.mtrl-fab-menu__item:focus-visible::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-fab-menu__item:active){position:relative}.mtrl-fab-menu__item:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item-content{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-width:56px;height:100%;padding:0 24px}.mtrl-fab-menu--open .mtrl-fab-menu__item{opacity:1;width:var(--mtrl-fab-menu-item-width, auto)}.mtrl-fab-menu__item-icon{display:inline-flex;width:24px;height:24px}.mtrl-fab-menu__item-icon svg{width:24px;height:24px;fill:currentColor}@media(prefers-reduced-motion: reduce){.mtrl-fab.mtrl-fab-menu__fab{transition:background-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-fab-menu__item{transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}}
+.mtrl-fab-menu{position:relative;display:inline-block;width:56px;height:56px;vertical-align:middle}.mtrl-fab-menu--medium{width:80px;height:80px}.mtrl-fab-menu--large{width:96px;height:96px}.mtrl-fab-menu--primary{--mtrl-fab-menu-close: var(--mtrl-sys-color-primary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-primary);--mtrl-fab-menu-item: var(--mtrl-sys-color-primary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-primary-container)}.mtrl-fab-menu--secondary{--mtrl-fab-menu-close: var(--mtrl-sys-color-secondary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-secondary);--mtrl-fab-menu-item: var(--mtrl-sys-color-secondary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-secondary-container)}.mtrl-fab-menu--tertiary{--mtrl-fab-menu-close: var(--mtrl-sys-color-tertiary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-tertiary);--mtrl-fab-menu-item: var(--mtrl-sys-color-tertiary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-tertiary-container)}.mtrl-fab-menu--bottom-end,.mtrl-fab-menu--bottom-start{--mtrl-fab-menu-margin: 16px;position:absolute;bottom:var(--mtrl-fab-menu-margin);z-index:50}@media(min-width: 1200px){.mtrl-fab-menu--bottom-end,.mtrl-fab-menu--bottom-start{--mtrl-fab-menu-margin: 24px}}.mtrl-fab-menu--bottom-end{inset-inline-end:var(--mtrl-fab-menu-margin)}.mtrl-fab-menu--bottom-start{inset-inline-start:var(--mtrl-fab-menu-margin)}.mtrl-fab-menu--bottom-start .mtrl-fab.mtrl-fab-menu__fab{inset-inline-start:0;inset-inline-end:auto}.mtrl-fab-menu--bottom-start .mtrl-fab-menu__list{inset-inline-start:0;inset-inline-end:auto;align-items:flex-start}.mtrl-fab-menu--bottom-start .mtrl-fab-menu__item{justify-content:flex-start}.mtrl-fab.mtrl-fab-menu__fab{position:absolute;inset-block-start:0;inset-inline-end:0;display:grid;place-items:center;transition:width 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),height 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),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 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1, 1, 1, 1, 1, 1, 1, 1, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1, 1, 1),color 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1, 1, 1, 1, 1, 1, 1, 1, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1, 1, 1),box-shadow 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-fab.mtrl-fab-menu__fab>*{grid-area:1/1}.mtrl-fab.mtrl-fab-menu__fab .mtrl-fab__icon,.mtrl-fab.mtrl-fab-menu__fab .mtrl-fab-menu__close{transition:visibility 0s linear 48ms}.mtrl-fab-menu__close{display:inline-flex;width:20px;height:20px;visibility:hidden}.mtrl-fab-menu__close svg{width:20px;height:20px;fill:currentColor}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab{width:56px;height:56px;border-radius:28px;background-color:var(--mtrl-fab-menu-close);color:var(--mtrl-fab-menu-on-close)}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab .mtrl-fab__icon{visibility:hidden}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab .mtrl-fab-menu__close{visibility:visible}.mtrl-fab-menu__list{position:absolute;bottom:calc(100% + 8px);inset-inline-end:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;overflow-y:auto;visibility:hidden;transition:visibility 0s linear var(--mtrl-fab-menu-exit, 0ms)}.mtrl-fab-menu--menu .mtrl-fab-menu__list{display:none}.mtrl-fab-menu--open .mtrl-fab-menu__list{visibility:visible;transition-delay:0s}.mtrl-fab-menu__item{position:relative;display:inline-flex;flex-shrink:0;justify-content:flex-end;box-sizing:border-box;width:0;height:56px;padding:0;border:none;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-fab-menu-item);color:var(--mtrl-fab-menu-on-item);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500;white-space:nowrap;cursor:pointer;overflow:hidden;opacity:0;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),width 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);transition-delay:var(--mtrl-fab-menu-delay, 0ms)}:where(.mtrl-fab-menu__item:hover){position:relative}.mtrl-fab-menu__item:hover::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px}:where(.mtrl-fab-menu__item:focus-visible){position:relative}.mtrl-fab-menu__item:focus-visible::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-fab-menu__item:active){position:relative}.mtrl-fab-menu__item:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item-content{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-width:56px;height:100%;padding:0 24px}.mtrl-fab-menu--open .mtrl-fab-menu__item{opacity:1;width:var(--mtrl-fab-menu-item-width, auto)}.mtrl-fab-menu__item-icon{display:inline-flex;width:24px;height:24px}.mtrl-fab-menu__item-icon svg{width:24px;height:24px;fill:currentColor}@media(prefers-reduced-motion: reduce){.mtrl-fab.mtrl-fab-menu__fab{transition:background-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-fab-menu__item{transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}}

package/dist/elements/css/fab-menu.js

@@ -2,4 +2,4 @@ import "./ripple.js";
 import "./fab.js";
 import "./menu.js";
 import { registerStyles } from "../styles.js";
-registerStyles({ "fab-menu": ".mtrl-fab-menu{position:relative;display:inline-block;width:56px;height:56px;vertical-align:middle}.mtrl-fab-menu--medium{width:80px;height:80px}.mtrl-fab-menu--large{width:96px;height:96px}.mtrl-fab-menu--primary{--mtrl-fab-menu-close: var(--mtrl-sys-color-primary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-primary);--mtrl-fab-menu-item: var(--mtrl-sys-color-primary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-primary-container)}.mtrl-fab-menu--secondary{--mtrl-fab-menu-close: var(--mtrl-sys-color-secondary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-secondary);--mtrl-fab-menu-item: var(--mtrl-sys-color-secondary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-secondary-container)}.mtrl-fab-menu--tertiary{--mtrl-fab-menu-close: var(--mtrl-sys-color-tertiary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-tertiary);--mtrl-fab-menu-item: var(--mtrl-sys-color-tertiary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-tertiary-container)}.mtrl-fab-menu--bottom-end,.mtrl-fab-menu--bottom-start{--mtrl-fab-menu-margin: 16px;position:absolute;bottom:var(--mtrl-fab-menu-margin);z-index:50}@media(min-width: 1200px){.mtrl-fab-menu--bottom-end,.mtrl-fab-menu--bottom-start{--mtrl-fab-menu-margin: 24px}}.mtrl-fab-menu--bottom-end{inset-inline-end:var(--mtrl-fab-menu-margin)}.mtrl-fab-menu--bottom-start{inset-inline-start:var(--mtrl-fab-menu-margin)}.mtrl-fab.mtrl-fab-menu__fab{position:absolute;inset-block-start:0;inset-inline-end:0;display:grid;place-items:center;transition:width 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),height 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),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 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1, 1, 1, 1, 1, 1, 1, 1, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1, 1, 1),color 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1, 1, 1, 1, 1, 1, 1, 1, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1, 1, 1),box-shadow 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-fab.mtrl-fab-menu__fab>*{grid-area:1/1}.mtrl-fab.mtrl-fab-menu__fab .mtrl-fab__icon,.mtrl-fab.mtrl-fab-menu__fab .mtrl-fab-menu__close{transition:visibility 0s linear 48ms}.mtrl-fab-menu__close{display:inline-flex;width:20px;height:20px;visibility:hidden}.mtrl-fab-menu__close svg{width:20px;height:20px;fill:currentColor}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab{width:56px;height:56px;border-radius:28px;background-color:var(--mtrl-fab-menu-close);color:var(--mtrl-fab-menu-on-close)}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab .mtrl-fab__icon{visibility:hidden}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab .mtrl-fab-menu__close{visibility:visible}.mtrl-fab-menu__list{position:absolute;bottom:calc(100% + 8px);inset-inline-end:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;overflow-y:auto;visibility:hidden;transition:visibility 0s linear var(--mtrl-fab-menu-exit, 0ms)}.mtrl-fab-menu--menu .mtrl-fab-menu__list{display:none}.mtrl-fab-menu--open .mtrl-fab-menu__list{visibility:visible;transition-delay:0s}.mtrl-fab-menu__item{position:relative;display:inline-flex;flex-shrink:0;justify-content:flex-end;box-sizing:border-box;width:0;height:56px;padding:0;border:none;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-fab-menu-item);color:var(--mtrl-fab-menu-on-item);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500;white-space:nowrap;cursor:pointer;overflow:hidden;opacity:0;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),width 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);transition-delay:var(--mtrl-fab-menu-delay, 0ms)}:where(.mtrl-fab-menu__item:hover){position:relative}.mtrl-fab-menu__item:hover::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px}:where(.mtrl-fab-menu__item:focus-visible){position:relative}.mtrl-fab-menu__item:focus-visible::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-fab-menu__item:active){position:relative}.mtrl-fab-menu__item:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item-content{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-width:56px;height:100%;padding:0 24px}.mtrl-fab-menu--open .mtrl-fab-menu__item{opacity:1;width:var(--mtrl-fab-menu-item-width, auto)}.mtrl-fab-menu__item-icon{display:inline-flex;width:24px;height:24px}.mtrl-fab-menu__item-icon svg{width:24px;height:24px;fill:currentColor}@media(prefers-reduced-motion: reduce){.mtrl-fab.mtrl-fab-menu__fab{transition:background-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-fab-menu__item{transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}}" });
+registerStyles({ "fab-menu": ".mtrl-fab-menu{position:relative;display:inline-block;width:56px;height:56px;vertical-align:middle}.mtrl-fab-menu--medium{width:80px;height:80px}.mtrl-fab-menu--large{width:96px;height:96px}.mtrl-fab-menu--primary{--mtrl-fab-menu-close: var(--mtrl-sys-color-primary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-primary);--mtrl-fab-menu-item: var(--mtrl-sys-color-primary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-primary-container)}.mtrl-fab-menu--secondary{--mtrl-fab-menu-close: var(--mtrl-sys-color-secondary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-secondary);--mtrl-fab-menu-item: var(--mtrl-sys-color-secondary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-secondary-container)}.mtrl-fab-menu--tertiary{--mtrl-fab-menu-close: var(--mtrl-sys-color-tertiary);--mtrl-fab-menu-on-close: var(--mtrl-sys-color-on-tertiary);--mtrl-fab-menu-item: var(--mtrl-sys-color-tertiary-container);--mtrl-fab-menu-on-item: var(--mtrl-sys-color-on-tertiary-container)}.mtrl-fab-menu--bottom-end,.mtrl-fab-menu--bottom-start{--mtrl-fab-menu-margin: 16px;position:absolute;bottom:var(--mtrl-fab-menu-margin);z-index:50}@media(min-width: 1200px){.mtrl-fab-menu--bottom-end,.mtrl-fab-menu--bottom-start{--mtrl-fab-menu-margin: 24px}}.mtrl-fab-menu--bottom-end{inset-inline-end:var(--mtrl-fab-menu-margin)}.mtrl-fab-menu--bottom-start{inset-inline-start:var(--mtrl-fab-menu-margin)}.mtrl-fab-menu--bottom-start .mtrl-fab.mtrl-fab-menu__fab{inset-inline-start:0;inset-inline-end:auto}.mtrl-fab-menu--bottom-start .mtrl-fab-menu__list{inset-inline-start:0;inset-inline-end:auto;align-items:flex-start}.mtrl-fab-menu--bottom-start .mtrl-fab-menu__item{justify-content:flex-start}.mtrl-fab.mtrl-fab-menu__fab{position:absolute;inset-block-start:0;inset-inline-end:0;display:grid;place-items:center;transition:width 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),height 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),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 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1, 1, 1, 1, 1, 1, 1, 1, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1, 1, 1),color 425ms linear(0, 0.102, 0.323, 0.57, 0.784, 0.942, 1, 1, 1, 1, 1, 1, 1, 1, 0.995, 0.992, 0.991, 0.992, 0.995, 0.997, 0.999, 1, 1, 1, 1),box-shadow 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-fab.mtrl-fab-menu__fab>*{grid-area:1/1}.mtrl-fab.mtrl-fab-menu__fab .mtrl-fab__icon,.mtrl-fab.mtrl-fab-menu__fab .mtrl-fab-menu__close{transition:visibility 0s linear 48ms}.mtrl-fab-menu__close{display:inline-flex;width:20px;height:20px;visibility:hidden}.mtrl-fab-menu__close svg{width:20px;height:20px;fill:currentColor}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab{width:56px;height:56px;border-radius:28px;background-color:var(--mtrl-fab-menu-close);color:var(--mtrl-fab-menu-on-close)}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab .mtrl-fab__icon{visibility:hidden}.mtrl-fab-menu--list.mtrl-fab-menu--open .mtrl-fab-menu__fab .mtrl-fab-menu__close{visibility:visible}.mtrl-fab-menu__list{position:absolute;bottom:calc(100% + 8px);inset-inline-end:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;overflow-y:auto;visibility:hidden;transition:visibility 0s linear var(--mtrl-fab-menu-exit, 0ms)}.mtrl-fab-menu--menu .mtrl-fab-menu__list{display:none}.mtrl-fab-menu--open .mtrl-fab-menu__list{visibility:visible;transition-delay:0s}.mtrl-fab-menu__item{position:relative;display:inline-flex;flex-shrink:0;justify-content:flex-end;box-sizing:border-box;width:0;height:56px;padding:0;border:none;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-fab-menu-item);color:var(--mtrl-fab-menu-on-item);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500;white-space:nowrap;cursor:pointer;overflow:hidden;opacity:0;transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),width 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);transition-delay:var(--mtrl-fab-menu-delay, 0ms)}:where(.mtrl-fab-menu__item:hover){position:relative}.mtrl-fab-menu__item:hover::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:2px}:where(.mtrl-fab-menu__item:focus-visible){position:relative}.mtrl-fab-menu__item:focus-visible::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}:where(.mtrl-fab-menu__item:active){position:relative}.mtrl-fab-menu__item:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-fab-menu__item-content{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-width:56px;height:100%;padding:0 24px}.mtrl-fab-menu--open .mtrl-fab-menu__item{opacity:1;width:var(--mtrl-fab-menu-item-width, auto)}.mtrl-fab-menu__item-icon{display:inline-flex;width:24px;height:24px}.mtrl-fab-menu__item-icon svg{width:24px;height:24px;fill:currentColor}@media(prefers-reduced-motion: reduce){.mtrl-fab.mtrl-fab-menu__fab{transition:background-color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1),color 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}.mtrl-fab-menu__item{transition:opacity 175ms linear(0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939, 0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1)}}" });

package/dist/elements/css/list.css

@@ -1 +1 @@
-.mtrl-list{--mtrl-list-item-offset: 0px;position:relative;overflow:auto;background:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);padding-block:8px;border-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list__content{display:flex;flex-direction:column}.mtrl-list__item{position:relative;display:flex;align-items:center;gap:16px;box-sizing:border-box;min-width:0;min-height:56px;padding:8px 16px;background:var(--mtrl-sys-color-surface);border-radius:var(--mtrl-list-item-shape, var(--mtrl-sys-shape-corner-extra-small, 4px));transform:translateY(var(--mtrl-list-item-offset))}.mtrl-list__item--two-line{min-height:72px}.mtrl-list__item--three-line{min-height:88px;padding-block:12px;align-items:flex-start}.mtrl-list__text{min-width:0;flex:1}.mtrl-list__headline{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;color:var(--mtrl-sys-color-on-surface)}.mtrl-list__overline{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-sys-color-on-surface-variant)}.mtrl-list__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)}.mtrl-list__headline,.mtrl-list__overline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-list__supporting{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}.mtrl-list__item--three-line .mtrl-list__supporting{-webkit-line-clamp:2}.mtrl-list__item--three-line:has(.mtrl-list__overline) .mtrl-list__supporting{-webkit-line-clamp:1}.mtrl-list__leading,.mtrl-list__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__leading--icon,.mtrl-list__trailing--icon{width:24px;height:24px}.mtrl-list__leading--icon svg,.mtrl-list__trailing--icon svg{width:100%;height:100%}.mtrl-list__leading--avatar,.mtrl-list__trailing--avatar{width:40px;height:40px;overflow:hidden;border-radius:50%;background:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-list__leading--image,.mtrl-list__trailing--image{width:56px;height:56px;overflow:hidden}.mtrl-list__leading--video,.mtrl-list__trailing--video{width:100px;height:56px;overflow:hidden;border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-list__leading--avatar img,.mtrl-list__leading--avatar svg,.mtrl-list__leading--avatar video,.mtrl-list__leading--image img,.mtrl-list__leading--image svg,.mtrl-list__leading--image video,.mtrl-list__leading--video img,.mtrl-list__leading--video svg,.mtrl-list__leading--video video,.mtrl-list__trailing--avatar img,.mtrl-list__trailing--avatar svg,.mtrl-list__trailing--avatar video,.mtrl-list__trailing--image img,.mtrl-list__trailing--image svg,.mtrl-list__trailing--image video,.mtrl-list__trailing--video img,.mtrl-list__trailing--video svg,.mtrl-list__trailing--video video{width:100%;height:100%;object-fit:cover}.mtrl-list__leading--text,.mtrl-list__trailing--text{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;white-space:nowrap}.mtrl-list__item--three-line .mtrl-list__leading--video{width:114px;height:64px}.mtrl-list__action{appearance:none;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:inherit;background:rgba(0,0,0,0);cursor:pointer}.mtrl-list__action::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:var(--mtrl-sys-color-on-surface);opacity:0}.mtrl-list__action:hover:not(:disabled)::before{opacity:.08}.mtrl-list__action:active:not(:disabled)::before{opacity:.1}.mtrl-list__action:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}.mtrl-list__action:focus-visible::before{opacity:.1}.mtrl-list__action:disabled{cursor:default}.mtrl-list__item :is(button,input,select,textarea,a,[contenteditable=true],[data-list-control]):not(.mtrl-list__action){position:relative;z-index:1}.mtrl-list__content>.mtrl-list__item:first-child,.mtrl-list__content>:not(.mtrl-list__item)+.mtrl-list__item{border-start-start-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px));border-start-end-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list__content>.mtrl-list__item:last-child,.mtrl-list__content>.mtrl-list__item:has(+:not(.mtrl-list__item)){border-end-start-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px));border-end-end-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list__content>.mtrl-list__item:hover:not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected){border-radius:var(--mtrl-list-item-shape-hover, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-list__content>.mtrl-list__item:has(.mtrl-list__action:focus-visible):not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected),.mtrl-list__content>.mtrl-list__item:active:not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected){border-radius:var(--mtrl-list-item-shape-active, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list__item--selected{border-radius:var(--mtrl-list-item-shape-active, var(--mtrl-sys-shape-corner-large, 16px));background:var(--mtrl-sys-color-secondary-container)}.mtrl-list__item--selected .mtrl-list__headline,.mtrl-list__item--selected .mtrl-list__overline,.mtrl-list__item--selected .mtrl-list__supporting,.mtrl-list__item--selected .mtrl-list__leading,.mtrl-list__item--selected .mtrl-list__trailing{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--selected .mtrl-list__action::before{background:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--disabled.mtrl-list__item--selected{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-list__item--disabled .mtrl-list__headline,.mtrl-list__item--disabled .mtrl-list__overline,.mtrl-list__item--disabled .mtrl-list__supporting,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{color:var(--mtrl-sys-color-on-surface)}.mtrl-list__item--disabled .mtrl-list__text,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{opacity:.38}.mtrl-list__divider{height:1px;min-height:1px;background:var(--mtrl-sys-color-outline-variant);margin-block:0}.mtrl-list__divider--inset{margin-inline-start:72px;margin-inline-end:16px}.mtrl-list__subheader{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant);padding:16px 16px 8px}.mtrl-list__empty{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);padding:16px}
+.mtrl-list{--mtrl-list-item-offset: 0px;position:relative;overflow:auto;color:var(--mtrl-sys-color-on-surface);padding-block:8px}.mtrl-list__content{display:flex;flex-direction:column}.mtrl-list__item{position:relative;display:flex;align-items:center;gap:16px;box-sizing:border-box;min-width:0;min-height:56px;padding:8px 16px;background:var(--mtrl-list-item-container-color, var(--mtrl-sys-color-surface));transform:translateY(var(--mtrl-list-item-offset))}.mtrl-list__item--two-line{min-height:72px}.mtrl-list__item--three-line{min-height:88px;padding-block:12px;align-items:flex-start}.mtrl-list__text{min-width:0;flex:1}.mtrl-list__headline{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;color:var(--mtrl-sys-color-on-surface)}.mtrl-list__overline{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-sys-color-on-surface-variant)}.mtrl-list__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)}.mtrl-list__headline,.mtrl-list__overline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-list__supporting{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}.mtrl-list__item--three-line .mtrl-list__supporting{-webkit-line-clamp:2}.mtrl-list__item--three-line:has(.mtrl-list__overline) .mtrl-list__supporting{-webkit-line-clamp:1}.mtrl-list__leading,.mtrl-list__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__leading--icon,.mtrl-list__trailing--icon{width:24px;height:24px}.mtrl-list__leading--icon svg,.mtrl-list__trailing--icon svg{width:100%;height:100%}.mtrl-list__leading--avatar,.mtrl-list__trailing--avatar{width:40px;height:40px;overflow:hidden;border-radius:50%;background:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-list__leading--image,.mtrl-list__trailing--image{width:56px;height:56px;overflow:hidden}.mtrl-list__leading--video,.mtrl-list__trailing--video{width:100px;height:56px;overflow:hidden;border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-list__leading--avatar img,.mtrl-list__leading--avatar svg,.mtrl-list__leading--avatar video,.mtrl-list__leading--image img,.mtrl-list__leading--image svg,.mtrl-list__leading--image video,.mtrl-list__leading--video img,.mtrl-list__leading--video svg,.mtrl-list__leading--video video,.mtrl-list__trailing--avatar img,.mtrl-list__trailing--avatar svg,.mtrl-list__trailing--avatar video,.mtrl-list__trailing--image img,.mtrl-list__trailing--image svg,.mtrl-list__trailing--image video,.mtrl-list__trailing--video img,.mtrl-list__trailing--video svg,.mtrl-list__trailing--video video{width:100%;height:100%;object-fit:cover}.mtrl-list__leading--text,.mtrl-list__trailing--text{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;white-space:nowrap}.mtrl-list__item--three-line .mtrl-list__leading--video{width:114px;height:64px}.mtrl-list__action{appearance:none;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:inherit;background:rgba(0,0,0,0);cursor:pointer}.mtrl-list__action::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:var(--mtrl-sys-color-on-surface);opacity:0}.mtrl-list__action:hover:not(:disabled)::before{opacity:.08}.mtrl-list__action:active:not(:disabled)::before{opacity:.1}.mtrl-list__action:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}.mtrl-list__action:focus-visible::before{opacity:.1}.mtrl-list__action:disabled{cursor:default}.mtrl-list__item :is(button,input,select,textarea,a,[contenteditable=true],[data-list-control]):not(.mtrl-list__action){position:relative;z-index:1}.mtrl-list--segmented>.mtrl-list__content{gap:var(--mtrl-list-segmented-gap, 2px)}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item{border-radius:var(--mtrl-list-item-shape, var(--mtrl-sys-shape-corner-extra-small, 4px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:not(.mtrl-list__item--selected){background:var(--mtrl-list-item-container-color, var(--mtrl-sys-color-surface-container))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:first-child,.mtrl-list--segmented>.mtrl-list__content>:not(.mtrl-list__item)+.mtrl-list__item{border-start-start-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px));border-start-end-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:last-child,.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:has(+:not(.mtrl-list__item)){border-end-start-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px));border-end-end-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:hover:not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected){border-radius:var(--mtrl-list-item-shape-hover, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:has(.mtrl-list__action:focus-visible):not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected),.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:active:not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected),.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item.mtrl-list__item--selected{border-radius:var(--mtrl-list-item-shape-active, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list__item--selected{background:var(--mtrl-sys-color-secondary-container)}.mtrl-list__item--selected .mtrl-list__headline,.mtrl-list__item--selected .mtrl-list__overline,.mtrl-list__item--selected .mtrl-list__supporting,.mtrl-list__item--selected .mtrl-list__leading,.mtrl-list__item--selected .mtrl-list__trailing{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--selected .mtrl-list__action::before{background:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--disabled.mtrl-list__item--selected{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-list__item--disabled .mtrl-list__headline,.mtrl-list__item--disabled .mtrl-list__overline,.mtrl-list__item--disabled .mtrl-list__supporting,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{color:var(--mtrl-sys-color-on-surface)}.mtrl-list__item--disabled .mtrl-list__text,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{opacity:.38}.mtrl-list__divider{height:1px;min-height:1px;background:var(--mtrl-sys-color-outline-variant);margin-block:0}.mtrl-list__divider--inset{margin-inline-start:72px;margin-inline-end:16px}.mtrl-list__subheader{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant);padding:16px 16px 8px}.mtrl-list__empty{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);padding:16px}

package/dist/elements/css/list.js

@@ -1,3 +1,3 @@
 import "./ripple.js";
 import { registerStyles } from "../styles.js";
-registerStyles({ "list": ".mtrl-list{--mtrl-list-item-offset: 0px;position:relative;overflow:auto;background:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);padding-block:8px;border-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list__content{display:flex;flex-direction:column}.mtrl-list__item{position:relative;display:flex;align-items:center;gap:16px;box-sizing:border-box;min-width:0;min-height:56px;padding:8px 16px;background:var(--mtrl-sys-color-surface);border-radius:var(--mtrl-list-item-shape, var(--mtrl-sys-shape-corner-extra-small, 4px));transform:translateY(var(--mtrl-list-item-offset))}.mtrl-list__item--two-line{min-height:72px}.mtrl-list__item--three-line{min-height:88px;padding-block:12px;align-items:flex-start}.mtrl-list__text{min-width:0;flex:1}.mtrl-list__headline{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;color:var(--mtrl-sys-color-on-surface)}.mtrl-list__overline{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-sys-color-on-surface-variant)}.mtrl-list__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)}.mtrl-list__headline,.mtrl-list__overline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-list__supporting{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}.mtrl-list__item--three-line .mtrl-list__supporting{-webkit-line-clamp:2}.mtrl-list__item--three-line:has(.mtrl-list__overline) .mtrl-list__supporting{-webkit-line-clamp:1}.mtrl-list__leading,.mtrl-list__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__leading--icon,.mtrl-list__trailing--icon{width:24px;height:24px}.mtrl-list__leading--icon svg,.mtrl-list__trailing--icon svg{width:100%;height:100%}.mtrl-list__leading--avatar,.mtrl-list__trailing--avatar{width:40px;height:40px;overflow:hidden;border-radius:50%;background:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-list__leading--image,.mtrl-list__trailing--image{width:56px;height:56px;overflow:hidden}.mtrl-list__leading--video,.mtrl-list__trailing--video{width:100px;height:56px;overflow:hidden;border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-list__leading--avatar img,.mtrl-list__leading--avatar svg,.mtrl-list__leading--avatar video,.mtrl-list__leading--image img,.mtrl-list__leading--image svg,.mtrl-list__leading--image video,.mtrl-list__leading--video img,.mtrl-list__leading--video svg,.mtrl-list__leading--video video,.mtrl-list__trailing--avatar img,.mtrl-list__trailing--avatar svg,.mtrl-list__trailing--avatar video,.mtrl-list__trailing--image img,.mtrl-list__trailing--image svg,.mtrl-list__trailing--image video,.mtrl-list__trailing--video img,.mtrl-list__trailing--video svg,.mtrl-list__trailing--video video{width:100%;height:100%;object-fit:cover}.mtrl-list__leading--text,.mtrl-list__trailing--text{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;white-space:nowrap}.mtrl-list__item--three-line .mtrl-list__leading--video{width:114px;height:64px}.mtrl-list__action{appearance:none;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:inherit;background:rgba(0,0,0,0);cursor:pointer}.mtrl-list__action::before{content:\"\";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:var(--mtrl-sys-color-on-surface);opacity:0}.mtrl-list__action:hover:not(:disabled)::before{opacity:.08}.mtrl-list__action:active:not(:disabled)::before{opacity:.1}.mtrl-list__action:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}.mtrl-list__action:focus-visible::before{opacity:.1}.mtrl-list__action:disabled{cursor:default}.mtrl-list__item :is(button,input,select,textarea,a,[contenteditable=true],[data-list-control]):not(.mtrl-list__action){position:relative;z-index:1}.mtrl-list__content>.mtrl-list__item:first-child,.mtrl-list__content>:not(.mtrl-list__item)+.mtrl-list__item{border-start-start-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px));border-start-end-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list__content>.mtrl-list__item:last-child,.mtrl-list__content>.mtrl-list__item:has(+:not(.mtrl-list__item)){border-end-start-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px));border-end-end-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list__content>.mtrl-list__item:hover:not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected){border-radius:var(--mtrl-list-item-shape-hover, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-list__content>.mtrl-list__item:has(.mtrl-list__action:focus-visible):not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected),.mtrl-list__content>.mtrl-list__item:active:not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected){border-radius:var(--mtrl-list-item-shape-active, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list__item--selected{border-radius:var(--mtrl-list-item-shape-active, var(--mtrl-sys-shape-corner-large, 16px));background:var(--mtrl-sys-color-secondary-container)}.mtrl-list__item--selected .mtrl-list__headline,.mtrl-list__item--selected .mtrl-list__overline,.mtrl-list__item--selected .mtrl-list__supporting,.mtrl-list__item--selected .mtrl-list__leading,.mtrl-list__item--selected .mtrl-list__trailing{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--selected .mtrl-list__action::before{background:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--disabled.mtrl-list__item--selected{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-list__item--disabled .mtrl-list__headline,.mtrl-list__item--disabled .mtrl-list__overline,.mtrl-list__item--disabled .mtrl-list__supporting,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{color:var(--mtrl-sys-color-on-surface)}.mtrl-list__item--disabled .mtrl-list__text,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{opacity:.38}.mtrl-list__divider{height:1px;min-height:1px;background:var(--mtrl-sys-color-outline-variant);margin-block:0}.mtrl-list__divider--inset{margin-inline-start:72px;margin-inline-end:16px}.mtrl-list__subheader{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant);padding:16px 16px 8px}.mtrl-list__empty{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);padding:16px}" });
+registerStyles({ "list": ".mtrl-list{--mtrl-list-item-offset: 0px;position:relative;overflow:auto;color:var(--mtrl-sys-color-on-surface);padding-block:8px}.mtrl-list__content{display:flex;flex-direction:column}.mtrl-list__item{position:relative;display:flex;align-items:center;gap:16px;box-sizing:border-box;min-width:0;min-height:56px;padding:8px 16px;background:var(--mtrl-list-item-container-color, var(--mtrl-sys-color-surface));transform:translateY(var(--mtrl-list-item-offset))}.mtrl-list__item--two-line{min-height:72px}.mtrl-list__item--three-line{min-height:88px;padding-block:12px;align-items:flex-start}.mtrl-list__text{min-width:0;flex:1}.mtrl-list__headline{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400;color:var(--mtrl-sys-color-on-surface)}.mtrl-list__overline{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-sys-color-on-surface-variant)}.mtrl-list__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)}.mtrl-list__headline,.mtrl-list__overline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-list__supporting{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}.mtrl-list__item--three-line .mtrl-list__supporting{-webkit-line-clamp:2}.mtrl-list__item--three-line:has(.mtrl-list__overline) .mtrl-list__supporting{-webkit-line-clamp:1}.mtrl-list__leading,.mtrl-list__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-list__leading--icon,.mtrl-list__trailing--icon{width:24px;height:24px}.mtrl-list__leading--icon svg,.mtrl-list__trailing--icon svg{width:100%;height:100%}.mtrl-list__leading--avatar,.mtrl-list__trailing--avatar{width:40px;height:40px;overflow:hidden;border-radius:50%;background:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-list__leading--image,.mtrl-list__trailing--image{width:56px;height:56px;overflow:hidden}.mtrl-list__leading--video,.mtrl-list__trailing--video{width:100px;height:56px;overflow:hidden;border-radius:var(--mtrl-sys-shape-corner-small, 8px)}.mtrl-list__leading--avatar img,.mtrl-list__leading--avatar svg,.mtrl-list__leading--avatar video,.mtrl-list__leading--image img,.mtrl-list__leading--image svg,.mtrl-list__leading--image video,.mtrl-list__leading--video img,.mtrl-list__leading--video svg,.mtrl-list__leading--video video,.mtrl-list__trailing--avatar img,.mtrl-list__trailing--avatar svg,.mtrl-list__trailing--avatar video,.mtrl-list__trailing--image img,.mtrl-list__trailing--image svg,.mtrl-list__trailing--image video,.mtrl-list__trailing--video img,.mtrl-list__trailing--video svg,.mtrl-list__trailing--video video{width:100%;height:100%;object-fit:cover}.mtrl-list__leading--text,.mtrl-list__trailing--text{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;white-space:nowrap}.mtrl-list__item--three-line .mtrl-list__leading--video{width:114px;height:64px}.mtrl-list__action{appearance:none;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:inherit;background:rgba(0,0,0,0);cursor:pointer}.mtrl-list__action::before{content:\"\";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:var(--mtrl-sys-color-on-surface);opacity:0}.mtrl-list__action:hover:not(:disabled)::before{opacity:.08}.mtrl-list__action:active:not(:disabled)::before{opacity:.1}.mtrl-list__action:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}.mtrl-list__action:focus-visible::before{opacity:.1}.mtrl-list__action:disabled{cursor:default}.mtrl-list__item :is(button,input,select,textarea,a,[contenteditable=true],[data-list-control]):not(.mtrl-list__action){position:relative;z-index:1}.mtrl-list--segmented>.mtrl-list__content{gap:var(--mtrl-list-segmented-gap, 2px)}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item{border-radius:var(--mtrl-list-item-shape, var(--mtrl-sys-shape-corner-extra-small, 4px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:not(.mtrl-list__item--selected){background:var(--mtrl-list-item-container-color, var(--mtrl-sys-color-surface-container))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:first-child,.mtrl-list--segmented>.mtrl-list__content>:not(.mtrl-list__item)+.mtrl-list__item{border-start-start-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px));border-start-end-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:last-child,.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:has(+:not(.mtrl-list__item)){border-end-start-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px));border-end-end-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:hover:not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected){border-radius:var(--mtrl-list-item-shape-hover, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:has(.mtrl-list__action:focus-visible):not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected),.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item:active:not(.mtrl-list__item--disabled):not(.mtrl-list__item--selected),.mtrl-list--segmented>.mtrl-list__content>.mtrl-list__item.mtrl-list__item--selected{border-radius:var(--mtrl-list-item-shape-active, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-list__item--selected{background:var(--mtrl-sys-color-secondary-container)}.mtrl-list__item--selected .mtrl-list__headline,.mtrl-list__item--selected .mtrl-list__overline,.mtrl-list__item--selected .mtrl-list__supporting,.mtrl-list__item--selected .mtrl-list__leading,.mtrl-list__item--selected .mtrl-list__trailing{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--selected .mtrl-list__action::before{background:var(--mtrl-sys-color-on-secondary-container)}.mtrl-list__item--disabled.mtrl-list__item--selected{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-list__item--disabled .mtrl-list__headline,.mtrl-list__item--disabled .mtrl-list__overline,.mtrl-list__item--disabled .mtrl-list__supporting,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{color:var(--mtrl-sys-color-on-surface)}.mtrl-list__item--disabled .mtrl-list__text,.mtrl-list__item--disabled .mtrl-list__leading,.mtrl-list__item--disabled .mtrl-list__trailing{opacity:.38}.mtrl-list__divider{height:1px;min-height:1px;background:var(--mtrl-sys-color-outline-variant);margin-block:0}.mtrl-list__divider--inset{margin-inline-start:72px;margin-inline-end:16px}.mtrl-list__subheader{font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;color:var(--mtrl-sys-color-on-surface-variant);padding:16px 16px 8px}.mtrl-list__empty{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);padding:16px}" });

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{transform-origin:top right}[dir=rtl] .mtrl-menu--position-top,[dir=rtl] .mtrl-menu--position-top-start,[dir=rtl] .mtrl-menu--position-top-end{transform-origin:bottom right}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu{padding-right:16px;padding-left:48px}[dir=rtl] .mtrl-menu .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: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)}

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{transform-origin:top right}[dir=rtl] .mtrl-menu--position-top,[dir=rtl] .mtrl-menu--position-top-start,[dir=rtl] .mtrl-menu--position-top-end{transform-origin:bottom right}[dir=rtl] .mtrl-menu .mtrl-menu__item--submenu{padding-right:16px;padding-left:48px}[dir=rtl] .mtrl-menu .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: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)}" });