material 3.2.6 → 3.3.0

package/dist/elements/bottom-sheet.d.ts

@@ -1,42 +1,9 @@
-/**
- * `<m-bottom-sheet>`: the bottom sheet as a custom element. Its regions are
- * slots: `headline` (the `headline` attribute is its fallback text), which
- * names the sheet, and the default slot, the content. The drag handle is the
- * factory's; `no-drag-handle` drops it, and dragging with it.
- *
- * Standard by default, in the page beside what it covers. `modal` makes it
- * the modal sheet in the factory's top layer (`layer: "top"`): a native
- * `<dialog>` in the element's shadow root, shown with `showModal()`, above
- * every z-index, the page outside inert, the scrim its `::backdrop`; Escape
- * and a click on the backdrop close it.
- *
- * `open` shows it and reflects its state, as on `<dialog open>`. `show()`,
- * `close()`, `expand()` and `collapse()` are its methods, and `open` and
- * `close` are dispatched as it opens and closes (not when the attribute is
- * what changed).
- *
- * An open sheet is partially expanded, `peek-height` pixels tall (by
- * default its content up to half the screen), or with `expanded` at its full
- * height. `max-width` is the widest it grows, in pixels (640 by default),
- * past which it centres itself; a change recreates it. `expanded` reflects that state as `open` does: set while the sheet
- * is closed, it opens expanded. `expand` and `collapse` are dispatched as the
- * user or a method moves it to its full height and away from it, closing
- * included, so an app keeping `expanded` in its state follows them.
- * `no-close-on-scrim-click` and `no-close-on-escape` keep a modal sheet open
- * on a click on the scrim and on Escape.
- *
- * Parts: `bottom-sheet`, `container`, `handle`, `header`, `title`, `content`.
- *
- * @module elements
- */
 import type { BottomSheetComponent, BottomSheetEventHandlers } from "../components/bottom-sheet/types.js";
 import { type DefineOptions, type ElementInstance } from "./define.js";
-/** The sheet's events, and `expand` and `collapse`, which the element tells apart from its state changes. */
 export interface BottomSheetElementEvents extends BottomSheetEventHandlers {
     expand?: () => void;
     collapse?: () => void;
 }
-/** The sheet with the `show()` the element names after `<dialog>`'s, and its `expand` and `collapse` events. */
 export interface BottomSheetElementComponent extends Omit<BottomSheetComponent, "on" | "off"> {
     show: () => BottomSheetComponent;
     on: <T extends keyof BottomSheetElementEvents>(event: T, handler: NonNullable<BottomSheetElementEvents[T]>) => unknown;
@@ -44,7 +11,9 @@ export interface BottomSheetElementComponent extends Omit<BottomSheetComponent,
 }
 declare const bottomSheetSpec: {
     name: string;
-    slots: readonly ["headline"];
+    slots: readonly [
+        "headline"
+    ];
     create: (config: import("./define.js").Config) => BottomSheetElementComponent;
     styles: string[];
     hostStyles: string;
@@ -91,7 +60,12 @@ declare const bottomSheetSpec: {
             update: (c: BottomSheetElementComponent, _v: import("./define.js").AttributeValue, host: HTMLElement) => void;
         };
     };
-    methods: readonly ["show", "close", "expand", "collapse"];
+    methods: readonly [
+        "show",
+        "close",
+        "expand",
+        "collapse"
+    ];
     events: {
         open: {
             detail: () => null;
@@ -117,12 +91,9 @@ declare const bottomSheetSpec: {
 };
 export declare const bottomSheetElement: import("./define.js").ElementDefinition<BottomSheetElementComponent>;
 export type BottomSheetSpec = typeof bottomSheetSpec;
-/** `<m-bottom-sheet>` as a ref or a query returns it. */
 export type BottomSheetElement = ElementInstance<BottomSheetSpec, BottomSheetElementComponent>;
-/** Registers `<m-bottom-sheet>` (or `<prefix-bottom-sheet>`). */
 export declare const defineBottomSheet: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-bottom-sheet": BottomSheetElement;
     }

package/dist/elements/button-group.d.ts

@@ -1,27 +1,5 @@
-/**
- * `<m-button-group>` with `<m-button-group-item>` children.
- *
- * Each `<m-button-group-item>` declares one button (`value`, `icon`,
- * `selected-icon`, `aria-label`, `disabled`, `selected`, and its text as the
- * label). The group reads them into the factory's config and updates in place
- * when they change; the children stay where the framework put them.
- *
- * With `selection="single"` or `"multi"` the buttons toggle. `value` on the
- * group is the default selection (comma-separated in a multi group), which
- * moves the live one until the user or script changes it; without it, the
- * items' `selected` is the default. The `value` property is the live
- * selection: a string or null in a single group, an array in a multi group,
- * null without selection. Every press dispatches `action` with the button's
- * value; the factory calls it `click`, which the host already receives from
- * the browser.
- *
- * Parts: `button-group`, `button`, `text`, `ripple`.
- *
- * @module elements
- */
 import type { ButtonGroupComponent } from "../components/button-group/types.js";
 import { type Config, type DefineOptions, type ElementAttributes, type ElementHost, type ElementInstance } from "./define.js";
-/** The live selection: one value, several, or none. */
 export type ButtonGroupValue = string | string[] | null;
 declare const buttonGroupSpec: {
     name: string;
@@ -118,12 +96,7 @@ declare const buttonGroupSpec: {
 };
 export declare const buttonGroupElement: import("./define.js").ElementDefinition<ButtonGroupComponent>;
 export type ButtonGroupSpec = typeof buttonGroupSpec;
-/** `<m-button-group>` as a ref or a query returns it. */
 export type ButtonGroupElement = ElementInstance<ButtonGroupSpec, ButtonGroupComponent>;
-/**
- * `<m-button-group-item>` declares one button and renders nothing. Its text
- * content is the label unless `label` is set.
- */
 export declare const buttonGroupItemDeclaration: {
     readonly name: "button-group-item";
     readonly attributes: {
@@ -133,11 +106,9 @@ export declare const buttonGroupItemDeclaration: {
         readonly label: {
             readonly type: "string";
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         readonly icon: {
             readonly type: "string";
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. Shown on an icon-only item while it is selected. */
         readonly "selected-icon": {
             readonly type: "string";
         };
@@ -153,10 +124,8 @@ export declare const buttonGroupItemDeclaration: {
     };
 };
 export type ButtonGroupItemAttributes = ElementAttributes<typeof buttonGroupItemDeclaration>;
-/** Registers `<m-button-group>` and `<m-button-group-item>` (or with another prefix). */
 export declare const defineButtonGroup: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-button-group": ButtonGroupElement;
         "m-button-group-item": HTMLElement & ButtonGroupItemAttributes;

package/dist/elements/button.d.ts

@@ -1,17 +1,3 @@
-/**
- * `<m-button>`: the button as a custom element. Children are the label.
- *
- * `type="submit"` and `type="reset"` act on the host's form, which a button
- * inside a shadow root cannot reach by itself (see `form-button`).
- *
- * A toggle button (for now from the button's global defaults: the element has
- * no toggle attribute) dispatches `change` with `{ selected, value }` from the
- * host on each click.
- *
- * Parts: `button`, `icon`, `label` (also `text`), `ripple`.
- *
- * @module elements
- */
 import type { ButtonComponent } from "../components/button/types.js";
 import { type DefineOptions, type ElementInstance } from "./define.js";
 declare const buttonSpec: {
@@ -40,11 +26,23 @@ declare const buttonSpec: {
             config: string;
             update: (c: ButtonComponent, v: import("./define.js").AttributeValue) => undefined;
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         icon: {
             type: "string";
             config: string;
         };
+        "icon-position": {
+            type: "string";
+            config: string;
+        };
+        toggle: {
+            type: "boolean";
+            config: string;
+        };
+        selected: {
+            type: "boolean";
+            config: string;
+            update: (c: ButtonComponent, v: import("./define.js").AttributeValue) => undefined;
+        };
         value: {
             type: "string";
             config: string;
@@ -60,6 +58,17 @@ declare const buttonSpec: {
             update: (c: ButtonComponent, v: import("./define.js").AttributeValue) => undefined;
         };
     };
+    properties: {
+        selected: {
+            get: (c: ButtonComponent) => boolean;
+            set: (c: ButtonComponent, v: unknown) => undefined;
+            config: string;
+        };
+    };
+    methods: readonly [
+        "setSelected"
+    ];
+    model: "selected";
     slot: {
         attribute: "label";
         config: string;
@@ -77,12 +86,9 @@ declare const buttonSpec: {
 };
 export declare const buttonElement: import("./define.js").ElementDefinition<ButtonComponent>;
 export type ButtonSpec = typeof buttonSpec;
-/** `<m-button>` as a ref or a query returns it. */
 export type ButtonElement = ElementInstance<ButtonSpec, ButtonComponent>;
-/** Registers `<m-button>` (or `<prefix-button>`). */
 export declare const defineButton: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-button": ButtonElement;
     }

package/dist/elements/button.js

@@ -12,10 +12,22 @@ const buttonSpec = {
         shape: { type: "string", config: "shape", update: (c, v) => void c.setShape(String(v ?? "round")) },
         disabled: { type: "boolean", config: "disabled", update: (c, v) => void (v ? c.disable() : c.enable()) },
         icon: { type: "string", config: "icon" },
+        "icon-position": { type: "string", config: "iconPosition" },
+        toggle: { type: "boolean", config: "toggle" },
+        selected: { type: "boolean", config: "selected", update: (c, v) => void c.setSelected(Boolean(v)) },
         value: { type: "string", config: "value", update: (c, v) => void c.setValue(String(v ?? "")) },
         type: typeAttribute,
         "aria-label": { type: "string", config: "ariaLabel", update: (c, v) => void c.setAriaLabel(String(v ?? "")) },
     },
+    properties: {
+        selected: {
+            get: (c) => c.isSelected(),
+            set: (c, v) => void c.setSelected(Boolean(v)),
+            config: "selected",
+        },
+    },
+    methods: ["setSelected"],
+    model: "selected",
     slot: {
         attribute: "label",
         config: "text",

package/dist/elements/card.d.ts

@@ -1,28 +1,15 @@
-/**
- * `<m-card>`: the card as a custom element. It holds arbitrary content, so
- * its regions are slots, placed by the factory's own builders:
- *
- * - `media`: at the top, clipped to the card's shape;
- * - `avatar`, `headline`, `subhead` and `header-action`: the header, whose
- *   headline names the card (`headline` and `subhead` attributes are the
- *   fallback text);
- * - the default slot: the supporting content, padded;
- * - `actions`: the row of actions at the bottom.
- *
- * A region is built only when it has content, and the card is recreated when
- * a region appears or goes away; content changes inside a region are the
- * slot's. `clickable` makes the card a button (Enter and Space click it) and
- * its activation is the native `click`.
- *
- * Parts: `card`, `content`.
- *
- * @module elements
- */
 import type { CardComponent } from "../components/card/types.js";
 import { type Config, type DefineOptions, type ElementInstance } from "./define.js";
 declare const cardSpec: {
     name: string;
-    slots: readonly ["avatar", "header-action", "headline", "subhead", "media", "actions"];
+    slots: readonly [
+        "avatar",
+        "header-action",
+        "headline",
+        "subhead",
+        "media",
+        "actions"
+    ];
     create: (config: Config) => CardComponent;
     styles: string[];
     hostStyles: string;
@@ -48,6 +35,10 @@ declare const cardSpec: {
             type: "string";
             config: string;
         };
+        "actions-align": {
+            type: "string";
+            config: string;
+        };
         disabled: {
             type: "boolean";
             update: (c: CardComponent, v: import("./define.js").AttributeValue) => void;
@@ -64,12 +55,9 @@ declare const cardSpec: {
 };
 export declare const cardElement: import("./define.js").ElementDefinition<CardComponent>;
 export type CardSpec = typeof cardSpec;
-/** `<m-card>` as a ref or a query returns it. */
 export type CardElement = ElementInstance<CardSpec, CardComponent>;
-/** Registers `<m-card>` (or `<prefix-card>`). */
 export declare const defineCard: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-card": CardElement;
     }

package/dist/elements/card.js

@@ -41,7 +41,7 @@ const header = (config, regions) => {
     return element;
 };
 const create = (config) => {
-    const { regions = [], headline, subhead, ariaLabel, ...rest } = config;
+    const { regions = [], headline, subhead, ariaLabel, actionsAlign = "end", ...rest } = config;
     const card = createCard({ ...rest, aria: ariaLabel ? { label: ariaLabel } : undefined });
     const has = (region) => regions.includes(region);
     if (has("media"))
@@ -52,7 +52,7 @@ const create = (config) => {
     if (has("content"))
         card.addContent(createCardContent({ children: [slot()] }));
     if (has("actions")) {
-        const actions = createCardActions({});
+        const actions = createCardActions({ align: actionsAlign });
         actions.append(slot("actions"));
         card.setActions(actions);
     }
@@ -102,6 +102,7 @@ const cardSpec = {
         },
         headline: { type: "string", config: "headline" },
         subhead: { type: "string", config: "subhead" },
+        "actions-align": { type: "string", config: "actionsAlign" },
         disabled: { type: "boolean", update: (c, v) => setDisabled(c, !!v) },
         "aria-label": { type: "string", config: "ariaLabel", update: (c, v) => setAriaLabel(c, v === null ? null : String(v)) },
     },

package/dist/elements/carousel.d.ts

@@ -1,24 +1,3 @@
-/**
- * `<m-carousel>` with `<m-carousel-item>` children.
- *
- * Each `<m-carousel-item>` declares one item (`src`, `alt`, `description`,
- * `button-text`, `button-url`, `value`, and its text as the label). The
- * carousel reads them into the factory's config and updates in place when
- * they change; the children stay where the framework put them.
- *
- * `variant` and the sizing attributes have no setter on the carousel:
- * changing one recreates it. `index` on `<m-carousel>` is the default current
- * item, which moves the live one until the user or script changes it; the
- * `index` property is the live one, and `change` reports the item the user
- * scrolls, swipes or arrows to.
- *
- * The carousel fills the host's height, as the factory fills its
- * container's: give `<m-carousel>` a height.
- *
- * Parts: `carousel`, `scroller`, `track`, `item`, `content`, `title`, `snap`.
- *
- * @module elements
- */
 import type { CarouselComponent } from "../components/carousel/types.js";
 import { type Config, type DefineOptions, type ElementAttributes, type ElementInstance } from "./define.js";
 declare const carouselSpec: {
@@ -80,7 +59,11 @@ declare const carouselSpec: {
         };
     };
     model: "index";
-    methods: readonly ["next", "prev", "goTo"];
+    methods: readonly [
+        "next",
+        "prev",
+        "goTo"
+    ];
     events: {
         change: {
             detail: (payload: unknown) => {
@@ -93,12 +76,7 @@ declare const carouselSpec: {
 };
 export declare const carouselElement: import("./define.js").ElementDefinition<CarouselComponent>;
 export type CarouselSpec = typeof carouselSpec;
-/** `<m-carousel>` as a ref or a query returns it. */
 export type CarouselElement = ElementInstance<CarouselSpec, CarouselComponent>;
-/**
- * `<m-carousel-item>` declares one item and renders nothing. Its text
- * content is the label unless `label` is set.
- */
 export declare const carouselItemDeclaration: {
     readonly name: "carousel-item";
     readonly attributes: {
@@ -126,10 +104,8 @@ export declare const carouselItemDeclaration: {
     };
 };
 export type CarouselItemAttributes = ElementAttributes<typeof carouselItemDeclaration>;
-/** Registers `<m-carousel>` and `<m-carousel-item>` (or with another prefix). */
 export declare const defineCarousel: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-carousel": CarouselElement;
         "m-carousel-item": HTMLElement & CarouselItemAttributes;

package/dist/elements/checkbox.d.ts

@@ -1,14 +1,3 @@
-/**
- * `<m-checkbox>`: the checkbox as a form-associated custom element.
- *
- * The `checked` attribute is the default state and the `checked` property the
- * live one, as on a native checkbox: the attribute moves the state until the
- * user or script changes it. `indeterminate` is a property only, as natively. Children are the label.
- *
- * Parts: `checkbox`, `input`, `icon`, `label`.
- *
- * @module elements
- */
 import type { CheckboxComponent } from "../components/checkbox/types.js";
 import { type DefineOptions, type ElementInstance } from "./define.js";
 declare const checkboxSpec: {
@@ -62,7 +51,11 @@ declare const checkboxSpec: {
             config: string;
         };
     };
-    methods: readonly ["toggle", "check", "uncheck"];
+    methods: readonly [
+        "toggle",
+        "check",
+        "uncheck"
+    ];
     model: "checked";
     events: {
         change: {
@@ -90,12 +83,9 @@ declare const checkboxSpec: {
 };
 export declare const checkboxElement: import("./define.js").ElementDefinition<CheckboxComponent>;
 export type CheckboxSpec = typeof checkboxSpec;
-/** `<m-checkbox>` as a ref or a query returns it. */
 export type CheckboxElement = ElementInstance<CheckboxSpec, CheckboxComponent>;
-/** Registers `<m-checkbox>` (or `<prefix-checkbox>`). */
 export declare const defineCheckbox: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-checkbox": CheckboxElement;
     }

package/dist/elements/chips.d.ts

@@ -1,28 +1,5 @@
-/**
- * `<m-chips>` with `<m-chip>` children: the chip set.
- *
- * Each `<m-chip>` declares one chip (`variant`, `value`, `icon`,
- * `trailing-icon`, `avatar`, `remove-label`, `selected`, `disabled`,
- * `elevated`, and its text as the label). The set reads them into the
- * factory's config and updates in place when they change; the children stay
- * where the framework put them.
- *
- * Filter and input chips select. `value` on the set is the default selection
- * (comma-separated in a multi-select set), which moves the live one until the
- * user or script changes it; without it, the chips' `selected` is the default.
- * The `value` property is the live selection: an array in a multi-select set
- * (the default, as the factory's), a string or null with `selection="single"`.
- * Removing an input chip dispatches `remove`; the set drops the chip, and the
- * app removes its `<m-chip>`, which is not shown again meanwhile.
- *
- * Parts: `chips`, `container`, `chip`, `action`, `leading-icon`, `checkmark`, `label`,
- * `trailing-icon`, `ripple`.
- *
- * @module elements
- */
 import type { ChipsComponent } from "../components/chips/types.js";
 import { type Config, type DefineOptions, type ElementAttributes, type ElementHost, type ElementInstance } from "./define.js";
-/** The live selection: several values, or one or none in a single-select set. */
 export type ChipsValue = string | string[] | null;
 declare const chipsSpec: {
     name: string;
@@ -93,12 +70,7 @@ declare const chipsSpec: {
 };
 export declare const chipsElement: import("./define.js").ElementDefinition<ChipsComponent>;
 export type ChipsSpec = typeof chipsSpec;
-/** `<m-chips>` as a ref or a query returns it. */
 export type ChipsElement = ElementInstance<ChipsSpec, ChipsComponent>;
-/**
- * `<m-chip>` declares one chip and renders nothing. Its text content is the
- * label unless `label` is set.
- */
 export declare const chipDeclaration: {
     readonly name: "chip";
     readonly attributes: {
@@ -111,15 +83,12 @@ export declare const chipDeclaration: {
         readonly variant: {
             readonly type: "string";
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         readonly icon: {
             readonly type: "string";
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         readonly "trailing-icon": {
             readonly type: "string";
         };
-        /** Markup (HTML), not a person's name or an image URL. Not sanitized by default: see Markup and sanitizing. Input chips only; takes precedence over `icon`. */
         readonly avatar: {
             readonly type: "string";
         };
@@ -138,10 +107,8 @@ export declare const chipDeclaration: {
     };
 };
 export type ChipAttributes = ElementAttributes<typeof chipDeclaration>;
-/** Registers `<m-chips>` and `<m-chip>` (or with another prefix). */
 export declare const defineChips: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-chips": ChipsElement;
         "m-chip": HTMLElement & ChipAttributes;

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

@@ -1 +1 @@
-.mtrl-extended-fab{position:relative;display:inline-flex;align-items:center;border:none;background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font:inherit;justify-content:center;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;overflow:hidden;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1);width:var(--mtrl-extended-fab-compact, auto);height:var(--mtrl-extended-fab-height, 56px);min-width:var(--mtrl-extended-fab-height, 56px);padding:0 var(--mtrl-extended-fab-compact, var(--mtrl-extended-fab-padding, 16px));gap:var(--mtrl-extended-fab-compact, var(--mtrl-extended-fab-gap, 8px));border-radius:var(--mtrl-extended-fab-radius, var(--mtrl-sys-shape-corner-large, 16px));transition:width .3s cubic-bezier(0.2, 0, 0, 1),min-width .3s cubic-bezier(0.2, 0, 0, 1),padding .3s cubic-bezier(0.2, 0, 0, 1)}.mtrl-extended-fab--small{--mtrl-extended-fab-height: 56px;--mtrl-extended-fab-icon-size: 24px;--mtrl-extended-fab-padding: 16px;--mtrl-extended-fab-gap: 8px;--mtrl-extended-fab-radius: var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-extended-fab--small .mtrl-extended-fab__text{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-extended-fab--medium{--mtrl-extended-fab-height: 80px;--mtrl-extended-fab-icon-size: 28px;--mtrl-extended-fab-padding: 26px;--mtrl-extended-fab-gap: 16px;--mtrl-extended-fab-radius: var(--mtrl-sys-shape-corner-large-increased, 20px)}.mtrl-extended-fab--medium .mtrl-extended-fab__text{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-extended-fab--large{--mtrl-extended-fab-height: 96px;--mtrl-extended-fab-icon-size: 32px;--mtrl-extended-fab-padding: 28px;--mtrl-extended-fab-gap: 20px;--mtrl-extended-fab-radius: var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-extended-fab--large .mtrl-extended-fab__text{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-extended-fab:focus{outline:none}.mtrl-extended-fab:focus-visible{outline:2px solid var(--mtrl-sys-color-outline);outline-offset:2px}.mtrl-extended-fab__icon{display:flex;align-items:center;justify-content:center;width:var(--mtrl-extended-fab-icon-size, 24px);height:var(--mtrl-extended-fab-icon-size, 24px);flex-shrink:0;padding:0;transition:transform .3s cubic-bezier(0.2, 0, 0, 1),margin .3s cubic-bezier(0.2, 0, 0, 1)}.mtrl-extended-fab__icon svg{width:var(--mtrl-extended-fab-icon-size, 24px);height:var(--mtrl-extended-fab-icon-size, 24px)}.mtrl-extended-fab__text{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;overflow:hidden;text-overflow:ellipsis;width:var(--mtrl-extended-fab-compact, auto);max-width:var(--mtrl-extended-fab-compact, 280px);opacity:var(--mtrl-extended-fab-compact, 1);margin:0;transition:max-width .3s cubic-bezier(0.2, 0, 0, 1),opacity .2s cubic-bezier(0.2, 0, 0, 1),width .3s cubic-bezier(0.2, 0, 0, 1),margin .3s cubic-bezier(0.2, 0, 0, 1)}.mtrl-extended-fab--fluid{width:var(--mtrl-extended-fab-compact, 100%)}.mtrl-extended-fab--primary-container{background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container)}.mtrl-extended-fab--secondary-container{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-extended-fab--tertiary-container{background-color:var(--mtrl-sys-color-tertiary-container);color:var(--mtrl-sys-color-on-tertiary-container)}.mtrl-extended-fab--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-extended-fab--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-extended-fab--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-extended-fab:hover{box-shadow:0px 2px 3px rgba(0,0,0,.3),0px 6px 10px 4px rgba(0,0,0,.15)}:where(.mtrl-extended-fab:hover){position:relative}.mtrl-extended-fab:hover::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-extended-fab:focus-visible{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-extended-fab:focus-visible){position:relative}.mtrl-extended-fab:focus-visible::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-extended-fab:active{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-extended-fab:active){position:relative}.mtrl-extended-fab:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-extended-fab--collapsed{--mtrl-extended-fab-compact: 0}.mtrl-extended-fab--collapsed .mtrl-extended-fab__icon{margin:0;transform:scale(1)}.mtrl-extended-fab--collapsed .mtrl-extended-fab__text{margin:0;transition:opacity .1s cubic-bezier(0.3, 0, 1, 1),max-width .3s cubic-bezier(0.3, 0, 1, 1) .05s,width .3s cubic-bezier(0.3, 0, 1, 1) .05s,margin .3s cubic-bezier(0.3, 0, 1, 1) .05s}.mtrl-extended-fab:not(.mtrl-extended-fab--collapsed) .mtrl-extended-fab__icon{transform:scale(1)}.mtrl-extended-fab:not(.mtrl-extended-fab--collapsed) .mtrl-extended-fab__text{transition:width .25s cubic-bezier(0, 0, 0.2, 1),max-width .25s cubic-bezier(0, 0, 0.2, 1),opacity .2s cubic-bezier(0, 0, 0.2, 1) .05s,margin .25s cubic-bezier(0, 0, 0.2, 1)}.mtrl-extended-fab--long-press{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-extended-fab--long-press){position:relative}.mtrl-extended-fab--long-press::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.16;pointer-events:none;border-radius:inherit}.mtrl-extended-fab.mtrl-extended-fab--lowered{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-extended-fab.mtrl-extended-fab--lowered:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-extended-fab.mtrl-extended-fab--lowered:focus-visible,.mtrl-extended-fab.mtrl-extended-fab--lowered:active{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-extended-fab:disabled,.mtrl-extended-fab.mtrl-extended-fab--disabled{pointer-events:none}.mtrl-extended-fab:disabled,.mtrl-extended-fab:disabled:hover,.mtrl-extended-fab:disabled:focus-visible,.mtrl-extended-fab:disabled:active,.mtrl-extended-fab.mtrl-extended-fab--disabled,.mtrl-extended-fab.mtrl-extended-fab--disabled:hover,.mtrl-extended-fab.mtrl-extended-fab--disabled:focus-visible,.mtrl-extended-fab.mtrl-extended-fab--disabled:active{box-shadow:none;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent)}.mtrl-extended-fab:disabled::before,.mtrl-extended-fab.mtrl-extended-fab--disabled::before{display:none}.mtrl-extended-fab--top-right{position:fixed;top:16px;right:16px;z-index:600}.mtrl-extended-fab--top-left{position:fixed;top:16px;left:16px;z-index:600}.mtrl-extended-fab--bottom-right{position:fixed;bottom:16px;right:16px;z-index:600}.mtrl-extended-fab--bottom-left{position:fixed;bottom:16px;left:16px;z-index:600}@keyframes extended-fab-enter{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}.mtrl-extended-fab--animate-enter{animation:extended-fab-enter .3s forwards}@media(max-width: 600px){.mtrl-extended-fab--center-mobile{left:50%;transform:translateX(-50%)}}.mtrl-extended-fab--collapsible{transition-duration:.3s;transition-timing-function:cubic-bezier(0.2, 0, 0, 1)}
+.mtrl-extended-fab{position:relative;display:inline-flex;align-items:center;border:none;background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font:inherit;justify-content:center;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;overflow:hidden;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1);width:var(--mtrl-extended-fab-compact, auto);height:var(--mtrl-extended-fab-height, 56px);min-width:var(--mtrl-extended-fab-height, 56px);padding:0 var(--mtrl-extended-fab-compact, var(--mtrl-extended-fab-padding, 16px));gap:var(--mtrl-extended-fab-compact, var(--mtrl-extended-fab-gap, 8px));border-radius:var(--mtrl-extended-fab-radius, var(--mtrl-sys-shape-corner-large, 16px));transition:width .3s cubic-bezier(0.2, 0, 0, 1),min-width .3s cubic-bezier(0.2, 0, 0, 1),padding .3s cubic-bezier(0.2, 0, 0, 1)}.mtrl-extended-fab--small{--mtrl-extended-fab-height: 56px;--mtrl-extended-fab-icon-size: 24px;--mtrl-extended-fab-padding: 16px;--mtrl-extended-fab-gap: 8px;--mtrl-extended-fab-radius: var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-extended-fab--small .mtrl-extended-fab__text{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-extended-fab--medium{--mtrl-extended-fab-height: 80px;--mtrl-extended-fab-icon-size: 28px;--mtrl-extended-fab-padding: 26px;--mtrl-extended-fab-gap: 16px;--mtrl-extended-fab-radius: var(--mtrl-sys-shape-corner-large-increased, 20px)}.mtrl-extended-fab--medium .mtrl-extended-fab__text{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-extended-fab--large{--mtrl-extended-fab-height: 96px;--mtrl-extended-fab-icon-size: 32px;--mtrl-extended-fab-padding: 28px;--mtrl-extended-fab-gap: 20px;--mtrl-extended-fab-radius: var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-extended-fab--large .mtrl-extended-fab__text{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-extended-fab:focus{outline:none}.mtrl-extended-fab:focus-visible{outline:2px solid var(--mtrl-sys-color-outline);outline-offset:2px}.mtrl-extended-fab__icon{display:flex;align-items:center;justify-content:center;width:var(--mtrl-extended-fab-icon-size, 24px);height:var(--mtrl-extended-fab-icon-size, 24px);flex-shrink:0;padding:0;transition:transform .3s cubic-bezier(0.2, 0, 0, 1),margin .3s cubic-bezier(0.2, 0, 0, 1)}.mtrl-extended-fab__icon svg{width:var(--mtrl-extended-fab-icon-size, 24px);height:var(--mtrl-extended-fab-icon-size, 24px)}.mtrl-extended-fab__text{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;overflow:hidden;text-overflow:ellipsis;width:var(--mtrl-extended-fab-compact, auto);max-width:var(--mtrl-extended-fab-compact, 280px);opacity:var(--mtrl-extended-fab-compact, 1);margin:0;transition:max-width .3s cubic-bezier(0.2, 0, 0, 1),opacity .2s cubic-bezier(0.2, 0, 0, 1),width .3s cubic-bezier(0.2, 0, 0, 1),margin .3s cubic-bezier(0.2, 0, 0, 1)}.mtrl-extended-fab--fluid{width:var(--mtrl-extended-fab-compact, 100%)}.mtrl-extended-fab--primary-container{background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container)}.mtrl-extended-fab--secondary-container{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-extended-fab--tertiary-container{background-color:var(--mtrl-sys-color-tertiary-container);color:var(--mtrl-sys-color-on-tertiary-container)}.mtrl-extended-fab--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-extended-fab--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-extended-fab--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-extended-fab:hover{box-shadow:0px 2px 3px rgba(0,0,0,.3),0px 6px 10px 4px rgba(0,0,0,.15)}:where(.mtrl-extended-fab:hover){position:relative}.mtrl-extended-fab:hover::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-extended-fab:focus-visible{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-extended-fab:focus-visible){position:relative}.mtrl-extended-fab:focus-visible::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-extended-fab:active{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-extended-fab:active){position:relative}.mtrl-extended-fab:active:not(:has(>.mtrl-ripple))::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-extended-fab--collapsed{--mtrl-extended-fab-compact: 0}.mtrl-extended-fab--collapsed .mtrl-extended-fab__icon{margin:0;transform:scale(1)}.mtrl-extended-fab--collapsed .mtrl-extended-fab__text{margin:0;transition:opacity .1s cubic-bezier(0.3, 0, 1, 1),max-width .3s cubic-bezier(0.3, 0, 1, 1) .05s,width .3s cubic-bezier(0.3, 0, 1, 1) .05s,margin .3s cubic-bezier(0.3, 0, 1, 1) .05s}.mtrl-extended-fab:not(.mtrl-extended-fab--collapsed) .mtrl-extended-fab__icon{transform:scale(1)}.mtrl-extended-fab:not(.mtrl-extended-fab--collapsed) .mtrl-extended-fab__text{transition:width .25s cubic-bezier(0, 0, 0.2, 1),max-width .25s cubic-bezier(0, 0, 0.2, 1),opacity .2s cubic-bezier(0, 0, 0.2, 1) .05s,margin .25s cubic-bezier(0, 0, 0.2, 1)}.mtrl-extended-fab--long-press{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-extended-fab--long-press){position:relative}.mtrl-extended-fab--long-press::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:.16;pointer-events:none;border-radius:inherit}.mtrl-extended-fab.mtrl-extended-fab--lowered{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-extended-fab.mtrl-extended-fab--lowered:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-extended-fab.mtrl-extended-fab--lowered:focus-visible,.mtrl-extended-fab.mtrl-extended-fab--lowered:active{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-extended-fab:disabled,.mtrl-extended-fab.mtrl-extended-fab--disabled{pointer-events:none}.mtrl-extended-fab:disabled,.mtrl-extended-fab:disabled:hover,.mtrl-extended-fab:disabled:focus-visible,.mtrl-extended-fab:disabled:active,.mtrl-extended-fab.mtrl-extended-fab--disabled,.mtrl-extended-fab.mtrl-extended-fab--disabled:hover,.mtrl-extended-fab.mtrl-extended-fab--disabled:focus-visible,.mtrl-extended-fab.mtrl-extended-fab--disabled:active{box-shadow:none;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent)}.mtrl-extended-fab:disabled::before,.mtrl-extended-fab.mtrl-extended-fab--disabled::before{display:none}.mtrl-extended-fab--top-right,.mtrl-extended-fab--top-end{position:fixed;top:16px;right:16px;z-index:600}.mtrl-extended-fab--top-left,.mtrl-extended-fab--top-start{position:fixed;top:16px;left:16px;z-index:600}.mtrl-extended-fab--bottom-right,.mtrl-extended-fab--bottom-end{position:fixed;bottom:16px;right:16px;z-index:600}.mtrl-extended-fab--bottom-left,.mtrl-extended-fab--bottom-start{position:fixed;bottom:16px;left:16px;z-index:600}.mtrl-extended-fab--top-start:where(.mtrl-rtl,[dir=rtl]),:where(.mtrl-rtl) .mtrl-extended-fab--top-start,:where(:host(.mtrl-rtl)) .mtrl-extended-fab--top-start,[dir=rtl] .mtrl-extended-fab--top-start:not(:where(.mtrl-ltr,.mtrl-ltr *)),.mtrl-extended-fab--bottom-start:where(.mtrl-rtl,[dir=rtl]),:where(.mtrl-rtl) .mtrl-extended-fab--bottom-start,:where(:host(.mtrl-rtl)) .mtrl-extended-fab--bottom-start,[dir=rtl] .mtrl-extended-fab--bottom-start:not(:where(.mtrl-ltr,.mtrl-ltr *)){left:auto;right:16px}.mtrl-extended-fab--top-end:where(.mtrl-rtl,[dir=rtl]),:where(.mtrl-rtl) .mtrl-extended-fab--top-end,:where(:host(.mtrl-rtl)) .mtrl-extended-fab--top-end,[dir=rtl] .mtrl-extended-fab--top-end:not(:where(.mtrl-ltr,.mtrl-ltr *)),.mtrl-extended-fab--bottom-end:where(.mtrl-rtl,[dir=rtl]),:where(.mtrl-rtl) .mtrl-extended-fab--bottom-end,:where(:host(.mtrl-rtl)) .mtrl-extended-fab--bottom-end,[dir=rtl] .mtrl-extended-fab--bottom-end:not(:where(.mtrl-ltr,.mtrl-ltr *)){right:auto;left:16px}@keyframes extended-fab-enter{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}.mtrl-extended-fab--animate-enter{animation:extended-fab-enter .3s forwards}@media(max-width: 600px){.mtrl-extended-fab--center-mobile{left:50%;transform:translateX(-50%)}}.mtrl-extended-fab--collapsible{transition-duration:.3s;transition-timing-function:cubic-bezier(0.2, 0, 0, 1)}

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

@@ -1,3 +1,3 @@
 import "./ripple.js";
 import { registerStyles } from "../styles.js";
-registerStyles({ "extended-fab": ".mtrl-extended-fab{position:relative;display:inline-flex;align-items:center;border:none;background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font:inherit;justify-content:center;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;overflow:hidden;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1);width:var(--mtrl-extended-fab-compact, auto);height:var(--mtrl-extended-fab-height, 56px);min-width:var(--mtrl-extended-fab-height, 56px);padding:0 var(--mtrl-extended-fab-compact, var(--mtrl-extended-fab-padding, 16px));gap:var(--mtrl-extended-fab-compact, var(--mtrl-extended-fab-gap, 8px));border-radius:var(--mtrl-extended-fab-radius, var(--mtrl-sys-shape-corner-large, 16px));transition:width .3s cubic-bezier(0.2, 0, 0, 1),min-width .3s cubic-bezier(0.2, 0, 0, 1),padding .3s cubic-bezier(0.2, 0, 0, 1)}.mtrl-extended-fab--small{--mtrl-extended-fab-height: 56px;--mtrl-extended-fab-icon-size: 24px;--mtrl-extended-fab-padding: 16px;--mtrl-extended-fab-gap: 8px;--mtrl-extended-fab-radius: var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-extended-fab--small .mtrl-extended-fab__text{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-extended-fab--medium{--mtrl-extended-fab-height: 80px;--mtrl-extended-fab-icon-size: 28px;--mtrl-extended-fab-padding: 26px;--mtrl-extended-fab-gap: 16px;--mtrl-extended-fab-radius: var(--mtrl-sys-shape-corner-large-increased, 20px)}.mtrl-extended-fab--medium .mtrl-extended-fab__text{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-extended-fab--large{--mtrl-extended-fab-height: 96px;--mtrl-extended-fab-icon-size: 32px;--mtrl-extended-fab-padding: 28px;--mtrl-extended-fab-gap: 20px;--mtrl-extended-fab-radius: var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-extended-fab--large .mtrl-extended-fab__text{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-extended-fab:focus{outline:none}.mtrl-extended-fab:focus-visible{outline:2px solid var(--mtrl-sys-color-outline);outline-offset:2px}.mtrl-extended-fab__icon{display:flex;align-items:center;justify-content:center;width:var(--mtrl-extended-fab-icon-size, 24px);height:var(--mtrl-extended-fab-icon-size, 24px);flex-shrink:0;padding:0;transition:transform .3s cubic-bezier(0.2, 0, 0, 1),margin .3s cubic-bezier(0.2, 0, 0, 1)}.mtrl-extended-fab__icon svg{width:var(--mtrl-extended-fab-icon-size, 24px);height:var(--mtrl-extended-fab-icon-size, 24px)}.mtrl-extended-fab__text{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;overflow:hidden;text-overflow:ellipsis;width:var(--mtrl-extended-fab-compact, auto);max-width:var(--mtrl-extended-fab-compact, 280px);opacity:var(--mtrl-extended-fab-compact, 1);margin:0;transition:max-width .3s cubic-bezier(0.2, 0, 0, 1),opacity .2s cubic-bezier(0.2, 0, 0, 1),width .3s cubic-bezier(0.2, 0, 0, 1),margin .3s cubic-bezier(0.2, 0, 0, 1)}.mtrl-extended-fab--fluid{width:var(--mtrl-extended-fab-compact, 100%)}.mtrl-extended-fab--primary-container{background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container)}.mtrl-extended-fab--secondary-container{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-extended-fab--tertiary-container{background-color:var(--mtrl-sys-color-tertiary-container);color:var(--mtrl-sys-color-on-tertiary-container)}.mtrl-extended-fab--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-extended-fab--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-extended-fab--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-extended-fab:hover{box-shadow:0px 2px 3px rgba(0,0,0,.3),0px 6px 10px 4px rgba(0,0,0,.15)}:where(.mtrl-extended-fab:hover){position:relative}.mtrl-extended-fab:hover::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-extended-fab:focus-visible{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-extended-fab:focus-visible){position:relative}.mtrl-extended-fab:focus-visible::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-extended-fab:active{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-extended-fab:active){position:relative}.mtrl-extended-fab:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-extended-fab--collapsed{--mtrl-extended-fab-compact: 0}.mtrl-extended-fab--collapsed .mtrl-extended-fab__icon{margin:0;transform:scale(1)}.mtrl-extended-fab--collapsed .mtrl-extended-fab__text{margin:0;transition:opacity .1s cubic-bezier(0.3, 0, 1, 1),max-width .3s cubic-bezier(0.3, 0, 1, 1) .05s,width .3s cubic-bezier(0.3, 0, 1, 1) .05s,margin .3s cubic-bezier(0.3, 0, 1, 1) .05s}.mtrl-extended-fab:not(.mtrl-extended-fab--collapsed) .mtrl-extended-fab__icon{transform:scale(1)}.mtrl-extended-fab:not(.mtrl-extended-fab--collapsed) .mtrl-extended-fab__text{transition:width .25s cubic-bezier(0, 0, 0.2, 1),max-width .25s cubic-bezier(0, 0, 0.2, 1),opacity .2s cubic-bezier(0, 0, 0.2, 1) .05s,margin .25s cubic-bezier(0, 0, 0.2, 1)}.mtrl-extended-fab--long-press{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-extended-fab--long-press){position:relative}.mtrl-extended-fab--long-press::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.16;pointer-events:none;border-radius:inherit}.mtrl-extended-fab.mtrl-extended-fab--lowered{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-extended-fab.mtrl-extended-fab--lowered:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-extended-fab.mtrl-extended-fab--lowered:focus-visible,.mtrl-extended-fab.mtrl-extended-fab--lowered:active{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-extended-fab:disabled,.mtrl-extended-fab.mtrl-extended-fab--disabled{pointer-events:none}.mtrl-extended-fab:disabled,.mtrl-extended-fab:disabled:hover,.mtrl-extended-fab:disabled:focus-visible,.mtrl-extended-fab:disabled:active,.mtrl-extended-fab.mtrl-extended-fab--disabled,.mtrl-extended-fab.mtrl-extended-fab--disabled:hover,.mtrl-extended-fab.mtrl-extended-fab--disabled:focus-visible,.mtrl-extended-fab.mtrl-extended-fab--disabled:active{box-shadow:none;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent)}.mtrl-extended-fab:disabled::before,.mtrl-extended-fab.mtrl-extended-fab--disabled::before{display:none}.mtrl-extended-fab--top-right{position:fixed;top:16px;right:16px;z-index:600}.mtrl-extended-fab--top-left{position:fixed;top:16px;left:16px;z-index:600}.mtrl-extended-fab--bottom-right{position:fixed;bottom:16px;right:16px;z-index:600}.mtrl-extended-fab--bottom-left{position:fixed;bottom:16px;left:16px;z-index:600}@keyframes extended-fab-enter{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}.mtrl-extended-fab--animate-enter{animation:extended-fab-enter .3s forwards}@media(max-width: 600px){.mtrl-extended-fab--center-mobile{left:50%;transform:translateX(-50%)}}.mtrl-extended-fab--collapsible{transition-duration:.3s;transition-timing-function:cubic-bezier(0.2, 0, 0, 1)}" });
+registerStyles({ "extended-fab": ".mtrl-extended-fab{position:relative;display:inline-flex;align-items:center;border:none;background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);font:inherit;justify-content:center;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;overflow:hidden;box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1),box-shadow 100ms cubic-bezier(0.2, 0, 0, 1),background-color 100ms cubic-bezier(0.2, 0, 0, 1),color 100ms cubic-bezier(0.2, 0, 0, 1);width:var(--mtrl-extended-fab-compact, auto);height:var(--mtrl-extended-fab-height, 56px);min-width:var(--mtrl-extended-fab-height, 56px);padding:0 var(--mtrl-extended-fab-compact, var(--mtrl-extended-fab-padding, 16px));gap:var(--mtrl-extended-fab-compact, var(--mtrl-extended-fab-gap, 8px));border-radius:var(--mtrl-extended-fab-radius, var(--mtrl-sys-shape-corner-large, 16px));transition:width .3s cubic-bezier(0.2, 0, 0, 1),min-width .3s cubic-bezier(0.2, 0, 0, 1),padding .3s cubic-bezier(0.2, 0, 0, 1)}.mtrl-extended-fab--small{--mtrl-extended-fab-height: 56px;--mtrl-extended-fab-icon-size: 24px;--mtrl-extended-fab-padding: 16px;--mtrl-extended-fab-gap: 8px;--mtrl-extended-fab-radius: var(--mtrl-sys-shape-corner-large, 16px)}.mtrl-extended-fab--small .mtrl-extended-fab__text{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-extended-fab--medium{--mtrl-extended-fab-height: 80px;--mtrl-extended-fab-icon-size: 28px;--mtrl-extended-fab-padding: 26px;--mtrl-extended-fab-gap: 16px;--mtrl-extended-fab-radius: var(--mtrl-sys-shape-corner-large-increased, 20px)}.mtrl-extended-fab--medium .mtrl-extended-fab__text{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-extended-fab--large{--mtrl-extended-fab-height: 96px;--mtrl-extended-fab-icon-size: 32px;--mtrl-extended-fab-padding: 28px;--mtrl-extended-fab-gap: 20px;--mtrl-extended-fab-radius: var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-extended-fab--large .mtrl-extended-fab__text{font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-extended-fab:focus{outline:none}.mtrl-extended-fab:focus-visible{outline:2px solid var(--mtrl-sys-color-outline);outline-offset:2px}.mtrl-extended-fab__icon{display:flex;align-items:center;justify-content:center;width:var(--mtrl-extended-fab-icon-size, 24px);height:var(--mtrl-extended-fab-icon-size, 24px);flex-shrink:0;padding:0;transition:transform .3s cubic-bezier(0.2, 0, 0, 1),margin .3s cubic-bezier(0.2, 0, 0, 1)}.mtrl-extended-fab__icon svg{width:var(--mtrl-extended-fab-icon-size, 24px);height:var(--mtrl-extended-fab-icon-size, 24px)}.mtrl-extended-fab__text{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;overflow:hidden;text-overflow:ellipsis;width:var(--mtrl-extended-fab-compact, auto);max-width:var(--mtrl-extended-fab-compact, 280px);opacity:var(--mtrl-extended-fab-compact, 1);margin:0;transition:max-width .3s cubic-bezier(0.2, 0, 0, 1),opacity .2s cubic-bezier(0.2, 0, 0, 1),width .3s cubic-bezier(0.2, 0, 0, 1),margin .3s cubic-bezier(0.2, 0, 0, 1)}.mtrl-extended-fab--fluid{width:var(--mtrl-extended-fab-compact, 100%)}.mtrl-extended-fab--primary-container{background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container)}.mtrl-extended-fab--secondary-container{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-extended-fab--tertiary-container{background-color:var(--mtrl-sys-color-tertiary-container);color:var(--mtrl-sys-color-on-tertiary-container)}.mtrl-extended-fab--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-extended-fab--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-extended-fab--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-extended-fab:hover{box-shadow:0px 2px 3px rgba(0,0,0,.3),0px 6px 10px 4px rgba(0,0,0,.15)}:where(.mtrl-extended-fab:hover){position:relative}.mtrl-extended-fab:hover::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.08;pointer-events:none;border-radius:inherit}.mtrl-extended-fab:focus-visible{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-extended-fab:focus-visible){position:relative}.mtrl-extended-fab:focus-visible::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-extended-fab:active{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-extended-fab:active){position:relative}.mtrl-extended-fab:active:not(:has(>.mtrl-ripple))::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.1;pointer-events:none;border-radius:inherit}.mtrl-extended-fab--collapsed{--mtrl-extended-fab-compact: 0}.mtrl-extended-fab--collapsed .mtrl-extended-fab__icon{margin:0;transform:scale(1)}.mtrl-extended-fab--collapsed .mtrl-extended-fab__text{margin:0;transition:opacity .1s cubic-bezier(0.3, 0, 1, 1),max-width .3s cubic-bezier(0.3, 0, 1, 1) .05s,width .3s cubic-bezier(0.3, 0, 1, 1) .05s,margin .3s cubic-bezier(0.3, 0, 1, 1) .05s}.mtrl-extended-fab:not(.mtrl-extended-fab--collapsed) .mtrl-extended-fab__icon{transform:scale(1)}.mtrl-extended-fab:not(.mtrl-extended-fab--collapsed) .mtrl-extended-fab__text{transition:width .25s cubic-bezier(0, 0, 0.2, 1),max-width .25s cubic-bezier(0, 0, 0.2, 1),opacity .2s cubic-bezier(0, 0, 0.2, 1) .05s,margin .25s cubic-bezier(0, 0, 0.2, 1)}.mtrl-extended-fab--long-press{box-shadow:0px 1px 3px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15)}:where(.mtrl-extended-fab--long-press){position:relative}.mtrl-extended-fab--long-press::before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:.16;pointer-events:none;border-radius:inherit}.mtrl-extended-fab.mtrl-extended-fab--lowered{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-extended-fab.mtrl-extended-fab--lowered:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-extended-fab.mtrl-extended-fab--lowered:focus-visible,.mtrl-extended-fab.mtrl-extended-fab--lowered:active{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-extended-fab:disabled,.mtrl-extended-fab.mtrl-extended-fab--disabled{pointer-events:none}.mtrl-extended-fab:disabled,.mtrl-extended-fab:disabled:hover,.mtrl-extended-fab:disabled:focus-visible,.mtrl-extended-fab:disabled:active,.mtrl-extended-fab.mtrl-extended-fab--disabled,.mtrl-extended-fab.mtrl-extended-fab--disabled:hover,.mtrl-extended-fab.mtrl-extended-fab--disabled:focus-visible,.mtrl-extended-fab.mtrl-extended-fab--disabled:active{box-shadow:none;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent)}.mtrl-extended-fab:disabled::before,.mtrl-extended-fab.mtrl-extended-fab--disabled::before{display:none}.mtrl-extended-fab--top-right,.mtrl-extended-fab--top-end{position:fixed;top:16px;right:16px;z-index:600}.mtrl-extended-fab--top-left,.mtrl-extended-fab--top-start{position:fixed;top:16px;left:16px;z-index:600}.mtrl-extended-fab--bottom-right,.mtrl-extended-fab--bottom-end{position:fixed;bottom:16px;right:16px;z-index:600}.mtrl-extended-fab--bottom-left,.mtrl-extended-fab--bottom-start{position:fixed;bottom:16px;left:16px;z-index:600}.mtrl-extended-fab--top-start:where(.mtrl-rtl,[dir=rtl]),:where(.mtrl-rtl) .mtrl-extended-fab--top-start,:where(:host(.mtrl-rtl)) .mtrl-extended-fab--top-start,[dir=rtl] .mtrl-extended-fab--top-start:not(:where(.mtrl-ltr,.mtrl-ltr *)),.mtrl-extended-fab--bottom-start:where(.mtrl-rtl,[dir=rtl]),:where(.mtrl-rtl) .mtrl-extended-fab--bottom-start,:where(:host(.mtrl-rtl)) .mtrl-extended-fab--bottom-start,[dir=rtl] .mtrl-extended-fab--bottom-start:not(:where(.mtrl-ltr,.mtrl-ltr *)){left:auto;right:16px}.mtrl-extended-fab--top-end:where(.mtrl-rtl,[dir=rtl]),:where(.mtrl-rtl) .mtrl-extended-fab--top-end,:where(:host(.mtrl-rtl)) .mtrl-extended-fab--top-end,[dir=rtl] .mtrl-extended-fab--top-end:not(:where(.mtrl-ltr,.mtrl-ltr *)),.mtrl-extended-fab--bottom-end:where(.mtrl-rtl,[dir=rtl]),:where(.mtrl-rtl) .mtrl-extended-fab--bottom-end,:where(:host(.mtrl-rtl)) .mtrl-extended-fab--bottom-end,[dir=rtl] .mtrl-extended-fab--bottom-end:not(:where(.mtrl-ltr,.mtrl-ltr *)){right:auto;left:16px}@keyframes extended-fab-enter{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}.mtrl-extended-fab--animate-enter{animation:extended-fab-enter .3s forwards}@media(max-width: 600px){.mtrl-extended-fab--center-mobile{left:50%;transform:translateX(-50%)}}.mtrl-extended-fab--collapsible{transition-duration:.3s;transition-timing-function:cubic-bezier(0.2, 0, 0, 1)}" });

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-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)}}
+.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{right:var(--mtrl-fab-menu-margin)}.mtrl-fab-menu--bottom-end:where(.mtrl-rtl,[dir=rtl]),:where(.mtrl-rtl) .mtrl-fab-menu--bottom-end,:where(:host(.mtrl-rtl)) .mtrl-fab-menu--bottom-end,[dir=rtl] .mtrl-fab-menu--bottom-end:not(:where(.mtrl-ltr,.mtrl-ltr *)){left:var(--mtrl-fab-menu-margin);right:auto}.mtrl-fab-menu--bottom-start{left:var(--mtrl-fab-menu-margin)}.mtrl-fab-menu--bottom-start:where(.mtrl-rtl,[dir=rtl]),:where(.mtrl-rtl) .mtrl-fab-menu--bottom-start,:where(:host(.mtrl-rtl)) .mtrl-fab-menu--bottom-start,[dir=rtl] .mtrl-fab-menu--bottom-start:not(:where(.mtrl-ltr,.mtrl-ltr *)){right:var(--mtrl-fab-menu-margin);left:auto}.mtrl-fab-menu--bottom-start .mtrl-fab.mtrl-fab-menu__fab{left:0;right:auto}:where(.mtrl-rtl) .mtrl-fab-menu--bottom-start .mtrl-fab.mtrl-fab-menu__fab,:where(:host(.mtrl-rtl)) .mtrl-fab-menu--bottom-start .mtrl-fab.mtrl-fab-menu__fab,[dir=rtl] .mtrl-fab-menu--bottom-start .mtrl-fab.mtrl-fab-menu__fab:not(:where(.mtrl-ltr,.mtrl-ltr *)){right:0;left:auto}.mtrl-fab-menu--bottom-start .mtrl-fab-menu__list{left:0;right:auto;align-items:flex-start}:where(.mtrl-rtl) .mtrl-fab-menu--bottom-start .mtrl-fab-menu__list,:where(:host(.mtrl-rtl)) .mtrl-fab-menu--bottom-start .mtrl-fab-menu__list,[dir=rtl] .mtrl-fab-menu--bottom-start .mtrl-fab-menu__list:not(:where(.mtrl-ltr,.mtrl-ltr *)){right:0;left:auto}.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;right: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)}:where(.mtrl-rtl) .mtrl-fab.mtrl-fab-menu__fab,:where(:host(.mtrl-rtl)) .mtrl-fab.mtrl-fab-menu__fab,[dir=rtl] .mtrl-fab.mtrl-fab-menu__fab:not(:where(.mtrl-ltr,.mtrl-ltr *)){left:0;right:auto}.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);right: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)}:where(.mtrl-rtl) .mtrl-fab-menu__list,:where(:host(.mtrl-rtl)) .mtrl-fab-menu__list,[dir=rtl] .mtrl-fab-menu__list:not(:where(.mtrl-ltr,.mtrl-ltr *)){left:0;right:auto}.mtrl-fab-menu--bottom-start:where(.mtrl-rtl,[dir=rtl]) .mtrl-fab.mtrl-fab-menu__fab{right:0;left:auto}.mtrl-fab-menu--bottom-start:where(.mtrl-rtl,[dir=rtl]) .mtrl-fab-menu__list{right:0;left:auto}.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)}}