material 3.0.0-next.0 → 3.0.0

package/dist/components/divider/index.js

@@ -1,2 +1,2 @@
 import { createDivider } from "./divider.js";
-export { createDivider };
+export { createDivider, createDivider as default };

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

@@ -2,5 +2,5 @@
  * Drawer component module
  * @module components/drawer
  */
-export { default } from "./drawer.js";
+export { default, default as createDrawer } from "./drawer.js";
 export type { DrawerConfig, DrawerComponent, DrawerVariant, DrawerPosition, DrawerItemConfig, DrawerSelectEvent, DrawerEvents, } from "./types.js";

package/dist/components/drawer/index.js

@@ -1 +1 @@
-export { default } from "./drawer.js";
+export { default, default as createDrawer } from "./drawer.js";

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 } 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 { default, default as createList } from "./list.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 } from "./list.js";
-export { LIST_DEFAULTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES, } from "./constants.js";
+export { default, default as createList } from "./list.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,6 +5,23 @@ 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.
  *
+ * `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 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
@@ -18,7 +33,14 @@ export interface ListConfig<T = unknown> {
     renderItem?: (item: T, index: number) => HTMLElement;
     /**
      * Whether to track item selection
-     * When true, clicked items will receive a selected class
+     * When true, clicked items will receive a selected class.
+     *
+     * With `trackSelection`, each row's action is a button with `aria-pressed`,
+     * inside its `listitem`. That is this option's contract and it stays: a row
+     * can also hold a control of the app's, and pressing the selected row again
+     * deselects it. A listbox of options (`role="listbox"`, `aria-selected`,
+     * one tab stop), which allows neither, would be a separate opt-in mode, not
+     * a change to this one.
      * @default true
      */
     trackSelection?: boolean;
@@ -83,6 +105,12 @@ export interface ListItem {
     overline?: string;
     supportingText?: string;
     leading?: ListSlot;
+    /**
+     * The slot at the row's end: text, an icon, or a control of the app's
+     * (a checkbox, a radio, a switch). It is sized by its content: a control
+     * that fills its container, such as a slider, is not a list-row control
+     * and goes outside the row.
+     */
     trailing?: ListSlot;
     /** Blocks user activation; programmatic selection is still allowed. */
     disabled?: boolean;

package/dist/components/loading-indicator/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from "./loading-indicator.js";
+export { default, default as createLoadingIndicator } from "./loading-indicator.js";
 export type { LoadingIndicatorConfig, LoadingIndicatorComponent } from "./types.js";
 export { LOADING_INDICATOR_SHAPES, LOADING_INDICATOR_DEFAULTS } from "./constants.js";

package/dist/components/loading-indicator/index.js

@@ -1,2 +1,2 @@
-export { default } from "./loading-indicator.js";
+export { default, default as createLoadingIndicator } from "./loading-indicator.js";
 export { LOADING_INDICATOR_SHAPES, LOADING_INDICATOR_DEFAULTS } from "./constants.js";

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

@@ -7,7 +7,7 @@
  * @module components/menu
  * @category Components
  */
-export { default } from "./menu.js";
+export { default, default as createMenu } from "./menu.js";
 export type { MenuEvents } from "./types.js";
 export type { MenuConfig, MenuVariant, MenuComponent, MenuItem, MenuDivider, MenuGap, MenuContent, MenuEvent, MenuSelectEvent, MenuPosition } from "./types.js";
 /**

package/dist/components/menu/index.js

@@ -1,2 +1,2 @@
-export { default } from "./menu.js";
+export { default, default as createMenu } from "./menu.js";
 export { MENU_POSITION, MENU_DEFAULTS, MENU_INTERACTION_TYPES, MENU_ITEM_TYPES, MENU_EVENTS, MENU_CLASSES } from "./constants.js";

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

@@ -1,2 +1,2 @@
-export { default } from "./progress.js";
+export { default, default as createProgress } from "./progress.js";
 export type { ProgressConfig, ProgressVariant, ProgressComponent, ProgressShape, ProgressEvents, ProgressEventPayload } from "./types.js";

package/dist/components/progress/index.js

@@ -1 +1 @@
-export { default } from "./progress.js";
+export { default, default as createProgress } from "./progress.js";

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

@@ -132,19 +132,29 @@ export interface ProgressEvents {
     /** The value reached the maximum */
     complete: (event: ProgressEventPayload) => void;
 }
+/**
+ * What the progress draws with. **Not part of the public contract** (3.0.0):
+ * these five were on `ProgressComponent`, which tied the public type to one
+ * way of drawing the indicator. They are still on the object the factory
+ * returns, for the library's own code and tests; how the indicator is drawn
+ * may change in any release. The canvas is the element's own:
+ * `progress.element.querySelector('canvas')`. Nothing needs to call `resize`:
+ * the component observes its own size.
+ * @internal
+ */
+export interface ProgressInternals {
+    /** The canvas the indicator is drawn on */
+    canvas: HTMLCanvasElement;
+    /** Re-measures the canvas and redraws; the component does this on resize */
+    resize: () => void;
+    /** The canvas again: these three named the parts of the SVG this replaced */
+    track: SVGElement;
+    indicator: SVGElement;
+    buffer: SVGElement;
+}
 export interface ProgressComponent {
     /** The component's root DOM element */
     element: HTMLElement;
-    /** The track element (unfilled part) - always an SVG element */
-    track: SVGElement;
-    /** The indicator element (filled part) - always an SVG element */
-    indicator: SVGElement;
-    /** The canvas the indicator is drawn on */
-    canvas?: HTMLCanvasElement;
-    /** Re-measures the canvas and redraws; the component does this on resize */
-    resize?: () => void;
-    /** The buffer element for linear variant (pre-loaded state) - always an SVG element */
-    buffer?: SVGElement;
     /**
      * Gets a class name with the component's prefix
      * @param name - Base class name

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

@@ -1,3 +1,3 @@
-export { default } from "./radios.js";
+export { default, default as createRadios } from "./radios.js";
 export type { RadiosConfig, RadiosComponent, RadiosEvents, RadiosChangePayload, RadioOptionConfig } from "./types.js";
 export { RADIO_STATES, RADIO_DIRECTIONS, RADIO_EVENTS, RADIO_DEFAULTS } from "./constants.js";

package/dist/components/radios/index.js

@@ -1,2 +1,2 @@
-export { default } from "./radios.js";
+export { default, default as createRadios } from "./radios.js";
 export { RADIO_STATES, RADIO_DIRECTIONS, RADIO_EVENTS, RADIO_DEFAULTS } from "./constants.js";

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

@@ -1,2 +1,2 @@
-export { default } from "./search.js";
+export { default, default as createSearch } from "./search.js";
 export type { SearchConfig, SearchComponent, SearchEvent, SearchEvents, SearchStateEvent, SearchState, SearchViewMode, SearchVariant, SearchEventType, SearchSuggestion, SearchTrailingItem, } from "./types.js";

package/dist/components/search/index.js

@@ -1 +1 @@
-export { default } from "./search.js";
+export { default, default as createSearch } from "./search.js";

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

@@ -7,7 +7,7 @@
  * @module components/select
  * @category Components
  */
-export { default } from "./select.js";
+export { default, default as createSelect } from "./select.js";
 export type { SelectEvents } from "./types.js";
 export type { SelectConfig, SelectVariant, SelectComponent, SelectOption, SelectEvent, SelectChangeEvent } from "./types.js";
 /**

package/dist/components/select/index.js

@@ -1,2 +1,2 @@
-export { default } from "./select.js";
+export { default, default as createSelect } from "./select.js";
 export { SELECT_VARIANTS, SELECT_PLACEMENT, SELECT_INTERACTION, SELECT_EVENTS, SELECT_ICONS, SELECT_DEFAULTS, SELECT_CLASSES } from "./constants.js";

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

@@ -1,2 +1,2 @@
-export { default } from "./slider.js";
+export { default, default as createSlider } from "./slider.js";
 export type { SliderConfig, SliderComponent, SliderEvent, SliderEvents, } from "./types.js";

package/dist/components/slider/index.js

@@ -1 +1 @@
-export { default } from "./slider.js";
+export { default, default as createSlider } from "./slider.js";

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

@@ -171,6 +171,13 @@ export interface SliderStateComponent {
     valueBubble?: HTMLElement | null;
     secondHandle?: HTMLElement | null;
     secondValueBubble?: HTMLElement | null;
+    /**
+     * The older bag the same elements were kept in. **Internal, and not part of
+     * the public contract** (3.0.0): nothing in the library fills it, the
+     * controller and the handlers only fall back to it, and it may go in any
+     * release. `SliderComponent` has no `components`.
+     * @internal
+     */
     components?: Record<string, HTMLElement | null | undefined>;
     getClass: (name: string) => string;
     emit: (event: string, data: unknown) => unknown;

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

@@ -1,4 +1,4 @@
-export { default } from "./snackbar.js";
+export { default, default as createSnackbar } from "./snackbar.js";
 export { clearSnackbars } from "./snackbar.js";
 export type { SnackbarConfig, SnackbarComponent, SnackbarEvent, SnackbarEvents, SnackbarPosition, SnackbarDuration, SnackbarCloseReason, SnackbarQueueBehavior, } from "./types.js";
 export { SNACKBAR_POSITIONS, SNACKBAR_DURATIONS, SNACKBAR_CLOSE_REASONS, SNACKBAR_QUEUE_BEHAVIORS, } from "./constants.js";

package/dist/components/snackbar/index.js

@@ -1,3 +1,3 @@
-export { default } from "./snackbar.js";
+export { default, default as createSnackbar } from "./snackbar.js";
 export { clearSnackbars } from "./snackbar.js";
 export { SNACKBAR_POSITIONS, SNACKBAR_DURATIONS, SNACKBAR_CLOSE_REASONS, SNACKBAR_QUEUE_BEHAVIORS, } from "./constants.js";

package/dist/components/split-button/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from "./split-button.js";
+export { default, default as createSplitButton } from "./split-button.js";
 export type { SplitButtonConfig, SplitButtonComponent, SplitButtonEvent, SplitButtonVariant, SplitButtonSize, } from "./types.js";
 export { SPLIT_BUTTON_VARIANTS, SPLIT_BUTTON_SIZES, SPLIT_BUTTON_EVENTS, } from "./constants.js";

package/dist/components/split-button/index.js

@@ -1,2 +1,2 @@
-export { default } from "./split-button.js";
+export { default, default as createSplitButton } from "./split-button.js";
 export { SPLIT_BUTTON_VARIANTS, SPLIT_BUTTON_SIZES, SPLIT_BUTTON_EVENTS, } from "./constants.js";

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

@@ -1,3 +1,3 @@
-export { default } from "./switch.js";
+export { default, default as createSwitch } from "./switch.js";
 export { SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES } from "./constants.js";
 export type { SwitchConfig, SwitchComponent, SwitchEvents, SwitchChangePayload } from "./types.js";

package/dist/components/switch/index.js

@@ -1,2 +1,2 @@
-export { default } from "./switch.js";
+export { default, default as createSwitch } from "./switch.js";
 export { SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES } from "./constants.js";

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

@@ -8,4 +8,5 @@ export { tabIdFor, tabPanelIdFor };
 export type { ResponsiveConfig } from "./responsive.js";
 export type { TabIndicator } from "./indicator.js";
 export default createTabs;
+export { createTabs };
 export { createTab } from "./tab.js";

package/dist/components/tabs/index.js

@@ -5,4 +5,5 @@ export { TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, T
 export { setupResponsiveBehavior };
 export { tabIdFor, tabPanelIdFor };
 export default createTabs;
+export { createTabs };
 export { createTab } from "./tab.js";

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

@@ -287,8 +287,17 @@ export interface TabComponent {
     element: HTMLElement;
     /** The button the tab is built on */
     button?: TabButton;
-    /** The tab's badge component (if any) */
-    badge?: BadgeComponent;
+    /**
+     * The tab's badge component, or `undefined`. **It may be undefined until
+     * the badge is shown**, whatever the `badge` option said: the contract
+     * (3.0.0) is that a tab creates its badge no later than when it shows it,
+     * so that a later release can create it only then. Today it exists from
+     * the first `setBadge()`, or from creation with the `badge` option. To set,
+     * read, show or hide the badge, use `setBadge()`, `getBadge()`,
+     * `showBadge()` and `hideBadge()`, which work whether it exists yet or not;
+     * check this for `undefined` before reading it.
+     */
+    badge?: BadgeComponent | undefined;
     /** Gets a class name with the component's prefix */
     getClass: (name: string) => string;
     /** Gets the tab's value attribute */
@@ -323,7 +332,10 @@ export interface TabComponent {
     showBadge: () => TabComponent;
     /** Hides the tab's badge */
     hideBadge: () => TabComponent;
-    /** Gets the badge component instance */
+    /**
+     * Gets the badge component instance, or `undefined`: it may not exist
+     * until the badge is shown (see `badge`)
+     */
     getBadgeComponent: () => BadgeComponent | undefined;
     /** Updates the tab's layout style based on content */
     updateLayoutStyle: () => void;

package/dist/components/text-field/features/placement.js

@@ -67,16 +67,15 @@ export const withPlacement = () => (component) => {
         const isOutlined = has("outlined");
         const isFocused = has("focused");
         const isEmpty = has("empty");
-        const rtl = isOutlined ? getComputedStyle(element).direction === "rtl" : false;
+        const rtl = globalThis.getComputedStyle?.(element).direction === "rtl";
         const labelWidth = isOutlined && labelEl ? labelEl.offsetWidth : 0;
         const affixes = [prefixEl, suffixEl].map((affix) => affix?.getBoundingClientRect().width);
         return () => {
             if (destroyed)
                 return;
-            if (isOutlined) {
+            if (isOutlined)
                 ensureOutline();
-                element.classList.toggle(`${PREFIX}-${COMPONENT}--rtl`, rtl);
-            }
+            element.classList.toggle(`${PREFIX}-${COMPONENT}--rtl`, rtl);
             if (outline && notch) {
                 if (labelWidth > 0)
                     notch.style.width = `${labelWidth * FLOATED_LABEL_SCALE + NOTCH_PADDING * 2}px`;
@@ -118,8 +117,11 @@ export const withPlacement = () => (component) => {
     const needsPlacement = has("outlined") ||
         has("with-leading-icon") ||
         component.element.querySelector(`.${PREFIX}-${COMPONENT}__prefix, .${PREFIX}-${COMPONENT}__suffix`) !== null;
+    const inShadowRoot = () => (component.element.getRootNode().host ? measure() : () => { });
     if (needsPlacement)
         schedulePositionUpdate();
+    else
+        schedule(inShadowRoot);
     if ("lifecycle" in component && component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {
@@ -127,6 +129,7 @@ export const withPlacement = () => (component) => {
                 return;
             destroyed = true;
             pending.delete(measure);
+            pending.delete(inShadowRoot);
             if (!pending.size && flushing !== null) {
                 clearTimeout(flushing);
                 flushing = null;

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

@@ -1,4 +1,4 @@
-export { default } from "./timepicker.js";
+export { default, default as createTimePicker } from "./timepicker.js";
 export { TIMEPICKER_TYPES, TIMEPICKER_ORIENTATIONS, TIMEPICKER_FORMATS, TIMEPICKER_PERIODS, TIMEPICKER_EVENTS, TIMEPICKER_VALUES, TIMEPICKER_SELECTORS, TIMEPICKER_ICONS, TIMEPICKER_DEFAULTS } from "./constants.js";
 export type { TimePickerConfig, TimePickerComponent, TimeValue, TimePickerEvents, TimePickerValueEvent, TimePickerInputEvent, TimePickerTapPayload, TimePickerSwipePayload } from "./types.js";
 export { TIME_PICKER_TYPE, TIME_PICKER_ORIENTATION, TIME_FORMAT, TIME_PERIOD } from "./types.js";

package/dist/components/timepicker/index.js

@@ -1,3 +1,3 @@
-export { default } from "./timepicker.js";
+export { default, default as createTimePicker } from "./timepicker.js";
 export { TIMEPICKER_TYPES, TIMEPICKER_ORIENTATIONS, TIMEPICKER_FORMATS, TIMEPICKER_PERIODS, TIMEPICKER_EVENTS, TIMEPICKER_VALUES, TIMEPICKER_SELECTORS, TIMEPICKER_ICONS, TIMEPICKER_DEFAULTS } from "./constants.js";
 export { TIME_PICKER_TYPE, TIME_PICKER_ORIENTATION, TIME_FORMAT, TIME_PERIOD } from "./types.js";

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

@@ -1,3 +1,3 @@
-export { default } from "./tooltip.js";
+export { default, default as createTooltip } from "./tooltip.js";
 export { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS, TOOLTIP_EVENTS, TOOLTIP_DEFAULTS, TOOLTIP_CLASSES } from "./constants.js";
 export type { TooltipConfig, TooltipVariant, TooltipComponent } from "./types.js";

package/dist/components/tooltip/index.js

@@ -1,2 +1,2 @@
-export { default } from "./tooltip.js";
+export { default, default as createTooltip } from "./tooltip.js";
 export { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS, TOOLTIP_EVENTS, TOOLTIP_DEFAULTS, TOOLTIP_CLASSES } from "./constants.js";

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

@@ -11,7 +11,7 @@ export const withTextInput = (config = {}) => (component) => {
         maxLength: config.maxLength,
         pattern: config.pattern,
         autocomplete: config.autocomplete,
-        value: config.value || "",
+        value: isMultiline ? undefined : config.value || "",
         placeholder: config.placeholder || " ",
     };
     if (!isMultiline) {
@@ -32,6 +32,8 @@ export const withTextInput = (config = {}) => (component) => {
             }
         }
     });
+    if (isMultiline)
+        input.defaultValue = config.value || "";
     const updateInputState = () => {
         const isEmpty = !input.value;
         component.element.classList.toggle(`${component.getClass("text-field")}--empty`, isEmpty);

package/dist/core/compose/index.d.ts

@@ -8,6 +8,6 @@ export { createBase, withElement } from "./component.js";
 export { withEvents, withIcon, withSize, withPosition, withText, withVariant, withDisabled, withLifecycle, withRipple, withInput, withCheckable, withStyle, withTextInput, withTextLabel, withTrack, withEnhancedEvents, withThrottle, withDebounce, } from "./features/index.js";
 export type { Component } from "./base.js";
 export type { BaseComponent, BaseConfig, ElementComponent, TouchState, WithElementOptions, } from "./component.js";
-export type { EventComponent, TextComponent, IconComponent, LifecycleComponent, Lifecycle, DisabledComponent, DisabledManager, RippleComponent, InputComponent, CheckableComponent, CheckableManager, TextInputComponent, LabelComponent, TrackComponent, EnhancedEventComponent, ThrottleComponent, ThrottleConfig, DebounceComponent, DebounceConfig, } from "./features/index.js";
+export type { EventComponent, TextComponent, IconComponent, LifecycleComponent, Lifecycle, DisabledComponent, DisabledManager, RippleComponent, InputComponent, CheckableComponent, CheckableManager, TextInputComponent, LabelComponent, LabelManager, TrackComponent, EnhancedEventComponent, ThrottleComponent, ThrottleConfig, DebounceComponent, DebounceConfig, } from "./features/index.js";
 export { hasLifecycle, hasEmit } from "./utils/type-guards.js";
 export type { ComponentWithLifecycle, ComponentWithEmit, } from "./utils/type-guards.js";

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

@@ -21,7 +21,7 @@ export interface HTMLPolicy {
  * configureHTML({ sanitize: (html) => DOMPurify.sanitize(html) });
  *
  * // Trusted Types: a policy the page's CSP allows
- * const trusted = window.trustedTypes.createPolicy('mtrl', { createHTML: (html) => DOMPurify.sanitize(html) });
+ * const trusted = window.trustedTypes.createPolicy('app', { createHTML: (html) => DOMPurify.sanitize(html) });
  * configureHTML({ sanitize: (html) => trusted.createHTML(html) });
  */
 export declare const configureHTML: (next: HTMLPolicy | null) => void;

package/dist/elements/css/button.css

@@ -1 +1 @@
-.mtrl-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:58px;height:40px;padding:0 16px;border:none;border-radius:var(--mtrl-button-shape, 20px);background-color:rgba(0,0,0,0);color:inherit;font:inherit;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;will-change:border-radius;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),box-shadow 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),border-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),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-button:focus{outline:none}.mtrl-button:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-button:disabled{pointer-events:none;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface-variant) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);box-shadow:none}.mtrl-button:disabled .mtrl-button__icon{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface-variant) 38%, transparent)}.mtrl-button::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:0;pointer-events:none;border-radius:inherit;transition:opacity 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-button:hover::before{opacity:.08}.mtrl-button:focus-visible::before{opacity:.1}.mtrl-button:active:not(:has(>.mtrl-ripple))::before,.mtrl-button--active:not(:has(>.mtrl-ripple))::before{opacity:.1}.mtrl-button__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}.mtrl-button__icon svg{width:100%;height:100%}.mtrl-button__progress{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}.mtrl-button__progress.mtrl-progress{width:20px;height:20px;transition:opacity 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-button__progress .mtrl-progress__canvas{color:currentColor}.mtrl-button__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-button--xs{height:32px;padding:0 12px;gap:8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;border-radius:var(--mtrl-button-shape, 16px)}.mtrl-button--xs .mtrl-button__icon,.mtrl-button--xs .mtrl-button__progress,.mtrl-button--xs .mtrl-button__progress.mtrl-progress{width:20px;height:20px}.mtrl-button--xs.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--xs.mtrl-button--outlined{border-width:1px}.mtrl-button--s{height:40px;padding:0 16px;gap:8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;border-radius:var(--mtrl-button-shape, 20px)}.mtrl-button--s .mtrl-button__icon,.mtrl-button--s .mtrl-button__progress,.mtrl-button--s .mtrl-button__progress.mtrl-progress{width:20px;height:20px}.mtrl-button--s.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--s.mtrl-button--outlined{border-width:1px}.mtrl-button--m{height:56px;padding:0 24px;gap:8px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500;border-radius:var(--mtrl-button-shape, 28px)}.mtrl-button--m .mtrl-button__icon,.mtrl-button--m .mtrl-button__progress,.mtrl-button--m .mtrl-button__progress.mtrl-progress{width:24px;height:24px}.mtrl-button--m.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--m.mtrl-button--outlined{border-width:1px}.mtrl-button--l{height:96px;padding:0 48px;gap:12px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400;border-radius:var(--mtrl-button-shape, 48px)}.mtrl-button--l .mtrl-button__icon,.mtrl-button--l .mtrl-button__progress,.mtrl-button--l .mtrl-button__progress.mtrl-progress{width:32px;height:32px}.mtrl-button--l.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-button--l.mtrl-button--outlined{border-width:2px}.mtrl-button--xl{height:136px;padding:0 64px;gap:16px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:32px;line-height:40px;letter-spacing:0;font-weight:400;border-radius:var(--mtrl-button-shape, 68px)}.mtrl-button--xl .mtrl-button__icon,.mtrl-button--xl .mtrl-button__progress,.mtrl-button--xl .mtrl-button__progress.mtrl-progress{width:40px;height:40px}.mtrl-button--xl.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-button--xl.mtrl-button--outlined{border-width:3px}.mtrl-button--s.mtrl-button--icon{padding-left:12px}.mtrl-button--s.mtrl-button--icon:has(.mtrl-button__icon--end){padding-left:16px;padding-right:12px}.mtrl-button--xs::after,.mtrl-button--s::after{content:"";position:absolute;left:0;right:0;top:50%;height:48px;transform:translateY(-50%)}.mtrl-button:active,.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px));box-shadow:none}.mtrl-button--xs:active,.mtrl-button--xs.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-button--s:active,.mtrl-button--s.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-button--m:active,.mtrl-button--m.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--l:active,.mtrl-button--l.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--xl:active,.mtrl-button--xl.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--filled{color:var(--mtrl-sys-color-on-primary)}.mtrl-button--elevated{color:var(--mtrl-sys-color-primary)}.mtrl-button--tonal{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-button--outlined{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-button--text{color:var(--mtrl-button-text-color, var(--mtrl-sys-color-primary))}.mtrl-button--filled{background-color:var(--mtrl-sys-color-primary)}.mtrl-button--filled:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-button--filled:active,.mtrl-button--filled.mtrl-button--active,.mtrl-button--filled:disabled{box-shadow:none}.mtrl-button--elevated{background-color:var(--mtrl-sys-color-surface-container-low);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-button--elevated:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-button--elevated:active,.mtrl-button--elevated.mtrl-button--active{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-button--elevated:disabled{box-shadow:none}.mtrl-button--tonal{background-color:var(--mtrl-sys-color-secondary-container)}.mtrl-button--tonal:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-button--tonal:active,.mtrl-button--tonal.mtrl-button--active,.mtrl-button--tonal:disabled{box-shadow:none}.mtrl-button--outlined{border:1px solid var(--mtrl-sys-color-outline-variant)}.mtrl-button--outlined:disabled{background-color:rgba(0,0,0,0);border-color:color-mix(in srgb, var(--mtrl-sys-color-outline-variant) 10%, transparent)}.mtrl-button--text{padding:0 12px}.mtrl-button--text.mtrl-button--icon{padding:0 16px 0 12px}.mtrl-button--text.mtrl-button--icon:has(.mtrl-button__icon--end){padding:0 12px 0 16px}.mtrl-button--text.mtrl-button--m{padding:0 24px}.mtrl-button--text.mtrl-button--l{padding:0 48px}.mtrl-button--text.mtrl-button--xl{padding:0 64px}.mtrl-button--text:disabled{background-color:rgba(0,0,0,0)}.mtrl-button--toggle.mtrl-button--filled,.mtrl-button--toggle.mtrl-button--filled:hover,.mtrl-button--toggle.mtrl-button--filled:active,.mtrl-button--toggle.mtrl-button--filled.mtrl-button--active,.mtrl-button--toggle.mtrl-button--tonal,.mtrl-button--toggle.mtrl-button--tonal:hover,.mtrl-button--toggle.mtrl-button--tonal:active,.mtrl-button--toggle.mtrl-button--tonal.mtrl-button--active{box-shadow:none}.mtrl-button--toggle.mtrl-button--filled{background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--filled{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--elevated{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--tonal{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--outlined{background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--outlined{border-color:rgba(0,0,0,0)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xs{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--s{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--m{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--l{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xl{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--xs{border-radius:var(--mtrl-button-shape-selected, 16px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--s{border-radius:var(--mtrl-button-shape-selected, 20px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--m{border-radius:var(--mtrl-button-shape-selected, 28px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--l{border-radius:var(--mtrl-button-shape-selected, 48px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--xl{border-radius:var(--mtrl-button-shape-selected, 68px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xs:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xs.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--s:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--s.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--m:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--m.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--l:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--l.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xl:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xl.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--toggle:disabled,.mtrl-button--toggle.mtrl-button--selected:disabled{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface-variant) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);border-color:color-mix(in srgb, var(--mtrl-sys-color-outline-variant) 10%, transparent);box-shadow:none}.mtrl-button--toggle.mtrl-button--outlined:disabled{background-color:rgba(0,0,0,0)}.mtrl-button--circular{flex:none !important;border-radius:50%;padding:8px;min-width:unset;width:40px !important;height:40px}.mtrl-button--circular:active,.mtrl-button--circular.mtrl-button--active{border-radius:50%}.mtrl-button--circular:active.mtrl-button--square,.mtrl-button--circular.mtrl-button--active.mtrl-button--square{border-radius:var(--mtrl-sys-shape-corner-medium, 12px) !important}.mtrl-button--circular.mtrl-button--square{border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-button--circular.mtrl-button--xs{width:32px;height:32px;padding:0}.mtrl-button--circular.mtrl-button--s{width:40px;height:40px;padding:0}.mtrl-button--circular.mtrl-button--m{width:56px;height:56px;padding:0}.mtrl-button--circular.mtrl-button--l{width:96px;height:96px;padding:0}.mtrl-button--circular.mtrl-button--xl{width:136px;height:136px;padding:0}.mtrl-button--circular .mtrl-button__text{display:none}.mtrl-button--circular.mtrl-button--progress{padding:0 !important}.mtrl-button[disabled].mtrl-button--progress .mtrl-button__progress{opacity:.7}
+.mtrl-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:58px;height:40px;padding:0 16px;border:none;border-radius:var(--mtrl-button-shape, 20px);background-color:rgba(0,0,0,0);color:inherit;font:inherit;text-decoration:none;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;will-change:border-radius;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),box-shadow 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),border-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1),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-button:focus{outline:none}.mtrl-button:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-button:disabled{pointer-events:none;color:color-mix(in srgb, var(--mtrl-sys-color-on-surface-variant) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);box-shadow:none}.mtrl-button:disabled .mtrl-button__icon{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface-variant) 38%, transparent)}.mtrl-button::before{content:"";position:absolute;inset:0;background-color:currentColor;opacity:0;pointer-events:none;border-radius:inherit;transition:opacity 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-button:hover::before{opacity:.08}.mtrl-button:focus-visible::before{opacity:.1}.mtrl-button:active:not(:has(>.mtrl-ripple))::before,.mtrl-button--active:not(:has(>.mtrl-ripple))::before{opacity:.1}.mtrl-button__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}.mtrl-button__icon svg{width:100%;height:100%}.mtrl-button__progress{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}.mtrl-button__progress.mtrl-progress{width:20px;height:20px;transition:opacity 100ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-button__progress .mtrl-progress__canvas{color:currentColor}.mtrl-button__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-button--xs{height:32px;padding:0 12px;gap:4px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;border-radius:var(--mtrl-button-shape, 16px)}.mtrl-button--xs .mtrl-button__icon,.mtrl-button--xs .mtrl-button__progress,.mtrl-button--xs .mtrl-button__progress.mtrl-progress{width:20px;height:20px}.mtrl-button--xs.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--xs.mtrl-button--outlined{border-width:1px}.mtrl-button--s{height:40px;padding:0 16px;gap:8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;border-radius:var(--mtrl-button-shape, 20px)}.mtrl-button--s .mtrl-button__icon,.mtrl-button--s .mtrl-button__progress,.mtrl-button--s .mtrl-button__progress.mtrl-progress{width:20px;height:20px}.mtrl-button--s.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--s.mtrl-button--outlined{border-width:1px}.mtrl-button--m{height:56px;padding:0 24px;gap:8px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500;border-radius:var(--mtrl-button-shape, 28px)}.mtrl-button--m .mtrl-button__icon,.mtrl-button--m .mtrl-button__progress,.mtrl-button--m .mtrl-button__progress.mtrl-progress{width:24px;height:24px}.mtrl-button--m.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--m.mtrl-button--outlined{border-width:1px}.mtrl-button--l{height:96px;padding:0 48px;gap:12px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400;border-radius:var(--mtrl-button-shape, 48px)}.mtrl-button--l .mtrl-button__icon,.mtrl-button--l .mtrl-button__progress,.mtrl-button--l .mtrl-button__progress.mtrl-progress{width:32px;height:32px}.mtrl-button--l.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-button--l.mtrl-button--outlined{border-width:2px}.mtrl-button--xl{height:136px;padding:0 64px;gap:16px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:32px;line-height:40px;letter-spacing:0;font-weight:400;border-radius:var(--mtrl-button-shape, 68px)}.mtrl-button--xl .mtrl-button__icon,.mtrl-button--xl .mtrl-button__progress,.mtrl-button--xl .mtrl-button__progress.mtrl-progress{width:40px;height:40px}.mtrl-button--xl.mtrl-button--square{border-radius:var(--mtrl-button-shape, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-button--xl.mtrl-button--outlined{border-width:3px}.mtrl-button--s.mtrl-button--icon{padding-inline-start:12px}.mtrl-button--s.mtrl-button--icon:has(.mtrl-button__icon--end){padding-inline-start:16px;padding-inline-end:12px}.mtrl-button--xs::after,.mtrl-button--s::after{content:"";position:absolute;left:0;right:0;top:50%;height:48px;transform:translateY(-50%)}.mtrl-button:active,.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px));box-shadow:none}.mtrl-button--xs:active,.mtrl-button--xs.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-button--s:active,.mtrl-button--s.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-button--m:active,.mtrl-button--m.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--l:active,.mtrl-button--l.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--xl:active,.mtrl-button--xl.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--filled{color:var(--mtrl-sys-color-on-primary)}.mtrl-button--elevated{color:var(--mtrl-sys-color-primary)}.mtrl-button--tonal{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-button--outlined{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-button--text{color:var(--mtrl-button-text-color, var(--mtrl-sys-color-primary))}.mtrl-button--filled{background-color:var(--mtrl-sys-color-primary)}.mtrl-button--filled:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-button--filled:active,.mtrl-button--filled.mtrl-button--active,.mtrl-button--filled:disabled{box-shadow:none}.mtrl-button--elevated{background-color:var(--mtrl-sys-color-surface-container-low);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-button--elevated:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-button--elevated:active,.mtrl-button--elevated.mtrl-button--active{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-button--elevated:disabled{box-shadow:none}.mtrl-button--tonal{background-color:var(--mtrl-sys-color-secondary-container)}.mtrl-button--tonal:hover{box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}.mtrl-button--tonal:active,.mtrl-button--tonal.mtrl-button--active,.mtrl-button--tonal:disabled{box-shadow:none}.mtrl-button--outlined{border:1px solid var(--mtrl-sys-color-outline-variant)}.mtrl-button--outlined:disabled{background-color:rgba(0,0,0,0);border-color:color-mix(in srgb, var(--mtrl-sys-color-outline-variant) 10%, transparent)}.mtrl-button--text{padding:0 12px}.mtrl-button--text.mtrl-button--icon{padding-inline:12px 16px}.mtrl-button--text.mtrl-button--icon:has(.mtrl-button__icon--end){padding-inline:16px 12px}.mtrl-button--text.mtrl-button--m{padding:0 24px}.mtrl-button--text.mtrl-button--l{padding:0 48px}.mtrl-button--text.mtrl-button--xl{padding:0 64px}.mtrl-button--text:disabled{background-color:rgba(0,0,0,0)}.mtrl-button--toggle.mtrl-button--filled,.mtrl-button--toggle.mtrl-button--filled:hover,.mtrl-button--toggle.mtrl-button--filled:active,.mtrl-button--toggle.mtrl-button--filled.mtrl-button--active,.mtrl-button--toggle.mtrl-button--tonal,.mtrl-button--toggle.mtrl-button--tonal:hover,.mtrl-button--toggle.mtrl-button--tonal:active,.mtrl-button--toggle.mtrl-button--tonal.mtrl-button--active{box-shadow:none}.mtrl-button--toggle.mtrl-button--filled{background-color:var(--mtrl-sys-color-surface-container);color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--filled{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--elevated{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--tonal{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--outlined{background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--outlined{border-color:rgba(0,0,0,0)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xs{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--s{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--m{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--l{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xl{border-radius:var(--mtrl-button-shape-selected, var(--mtrl-sys-shape-corner-extra-large, 28px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--xs{border-radius:var(--mtrl-button-shape-selected, 16px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--s{border-radius:var(--mtrl-button-shape-selected, 20px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--m{border-radius:var(--mtrl-button-shape-selected, 28px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--l{border-radius:var(--mtrl-button-shape-selected, 48px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--square.mtrl-button--xl{border-radius:var(--mtrl-button-shape-selected, 68px)}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xs:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xs.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--s:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--s.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-small, 8px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--m:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--m.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-medium, 12px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--l:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--l.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xl:active,.mtrl-button--toggle.mtrl-button--selected.mtrl-button--xl.mtrl-button--active{border-radius:var(--mtrl-button-shape-pressed, var(--mtrl-sys-shape-corner-large, 16px))}.mtrl-button--toggle:disabled,.mtrl-button--toggle.mtrl-button--selected:disabled{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface-variant) 38%, transparent);background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);border-color:color-mix(in srgb, var(--mtrl-sys-color-outline-variant) 10%, transparent);box-shadow:none}.mtrl-button--toggle.mtrl-button--outlined:disabled{background-color:rgba(0,0,0,0)}.mtrl-button--circular{flex:none !important;border-radius:50%;padding:8px;min-width:unset;width:40px !important;height:40px}.mtrl-button--circular:active,.mtrl-button--circular.mtrl-button--active{border-radius:50%}.mtrl-button--circular:active.mtrl-button--square,.mtrl-button--circular.mtrl-button--active.mtrl-button--square{border-radius:var(--mtrl-sys-shape-corner-medium, 12px) !important}.mtrl-button--circular.mtrl-button--square{border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-button--circular.mtrl-button--xs{width:32px;height:32px;padding:0}.mtrl-button--circular.mtrl-button--s{width:40px;height:40px;padding:0}.mtrl-button--circular.mtrl-button--m{width:56px;height:56px;padding:0}.mtrl-button--circular.mtrl-button--l{width:96px;height:96px;padding:0}.mtrl-button--circular.mtrl-button--xl{width:136px;height:136px;padding:0}.mtrl-button--circular .mtrl-button__text{display:none}.mtrl-button--circular.mtrl-button--progress{padding:0 !important}.mtrl-button[disabled].mtrl-button--progress .mtrl-button__progress{opacity:.7}