material 3.3.2 → 3.3.3

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

@@ -8,7 +8,6 @@ export const withDom = (config) => (component) => {
     const value = config.value !== undefined ? config.value : min;
     const isDisabled = config.disabled === true;
     const formatter = config.valueFormatter || ((val) => val.toString());
-    const valuePercent = ((value - min) / (max - min)) * 100;
     const container = createElement({
         tag: "div",
         className: getClass("slider__container"),
@@ -20,83 +19,56 @@ export const withDom = (config) => (component) => {
     const label = config.label || "";
     const handleLabel = config.range && label ? `${label} minimum` : label;
     const secondHandleLabel = label ? `${label} maximum` : "";
-    const handleAttributes = {
-        role: "slider",
-        "aria-valuemin": String(min),
-        "aria-valuemax": String(max),
-        "aria-valuenow": String(value),
-        "aria-orientation": config.orientation === "vertical" ? "vertical" : "horizontal",
-        tabindex: isDisabled ? "-1" : "0",
-        "aria-disabled": isDisabled ? "true" : "false",
-        "data-value": String(value),
-        "data-handle-index": "0",
-    };
-    if (handleLabel) {
-        handleAttributes["aria-label"] = handleLabel;
-    }
-    const handle = createElement({
-        tag: "div",
-        className: getClass("slider__handle"),
-        attributes: handleAttributes,
-        container: container,
-    });
-    setStyles(handle, {
-        left: `${valuePercent}%`,
-    });
-    const valueBubble = createElement({
-        tag: "div",
-        className: getClass("slider__value"),
-        attributes: {
-            "aria-hidden": "true",
-            "data-handle-index": "0",
-        },
-        text: formatter(value),
-        container: container,
-    });
-    setStyles(valueBubble, {
-        left: `${valuePercent}%`,
-    });
-    let secondHandle;
-    let secondValueBubble;
-    if (config.range) {
-        const secondValue = config.secondValue !== undefined ? config.secondValue : max;
-        const secondValuePercent = ((secondValue - min) / (max - min)) * 100;
-        const secondHandleAttributes = {
+    const handleElement = (index, handleValue, name) => {
+        const attributes = {
             role: "slider",
             "aria-valuemin": String(min),
             "aria-valuemax": String(max),
-            "aria-valuenow": String(secondValue),
+            "aria-valuenow": String(handleValue),
             "aria-orientation": config.orientation === "vertical" ? "vertical" : "horizontal",
             tabindex: isDisabled ? "-1" : "0",
             "aria-disabled": isDisabled ? "true" : "false",
-            "data-value": String(secondValue),
-            "data-handle-index": "1",
+            "data-value": String(handleValue),
+            "data-handle-index": String(index),
         };
-        if (secondHandleLabel) {
-            secondHandleAttributes["aria-label"] = secondHandleLabel;
+        if (name) {
+            attributes["aria-label"] = name;
         }
-        secondHandle = createElement({
+        const element = createElement({
             tag: "div",
             className: getClass("slider__handle"),
-            attributes: secondHandleAttributes,
+            attributes,
             container: container,
         });
-        setStyles(secondHandle, {
-            left: `${secondValuePercent}%`,
+        setStyles(element, {
+            left: `${((handleValue - min) / (max - min)) * 100}%`,
         });
-        secondValueBubble = createElement({
+        return element;
+    };
+    const bubbleElement = (index, bubbleValue) => {
+        const element = createElement({
             tag: "div",
             className: getClass("slider__value"),
             attributes: {
                 "aria-hidden": "true",
-                "data-handle-index": "1",
+                "data-handle-index": String(index),
             },
-            text: formatter(secondValue),
+            text: formatter(bubbleValue),
             container: container,
         });
-        setStyles(secondValueBubble, {
-            left: `${secondValuePercent}%`,
+        setStyles(element, {
+            left: `${((bubbleValue - min) / (max - min)) * 100}%`,
         });
+        return element;
+    };
+    const handle = handleElement(0, value, handleLabel);
+    const valueBubble = bubbleElement(0, value);
+    let secondHandle;
+    let secondValueBubble;
+    if (config.range) {
+        const secondValue = config.secondValue !== undefined ? config.secondValue : max;
+        secondHandle = handleElement(1, secondValue, secondHandleLabel);
+        secondValueBubble = bubbleElement(1, secondValue);
     }
     const name = config.name;
     const formFields = name
@@ -115,10 +87,5 @@ export const withDom = (config) => (component) => {
         secondHandle,
         secondValueBubble,
         formFields,
-        getContainer: () => container,
-        getHandle: () => handle,
-        getValueBubble: () => valueBubble,
-        getSecondHandle: () => secondHandle || null,
-        getSecondValueBubble: () => secondValueBubble || null,
     };
 };

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

@@ -1,5 +1,3 @@
-export { withRange } from "./range.js";
 export { withStates } from "./states.js";
-export { withController } from "./controller.js";
-export { withTracks } from "./tracks.js";
+export { withController, withTracks } from "./controller.js";
 export { withDom } from "./dom.js";

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

@@ -1,8 +1,7 @@
 import { SLIDER_COLORS } from "../types.js";
-import { SLIDER_SIZES } from "../constants.js";
 export const withStates = (config) => (component) => {
-    const handle = component.handle ?? component.structure?.handle;
-    const secondHandle = component.secondHandle ?? component.structure?.secondHandle;
+    const handle = component.handle;
+    const secondHandle = component.secondHandle;
     const setFieldsDisabled = (disabled) => {
         for (const field of component.formFields ?? []) {
             if (field)
@@ -44,11 +43,6 @@ export const withStates = (config) => (component) => {
     function getActiveColor() {
         return (Object.values(SLIDER_COLORS).find((colorName) => component.element.classList.contains(`${component.getClass("slider")}--${colorName}`)) || SLIDER_COLORS.PRIMARY);
     }
-    function getActiveSize() {
-        const sizeKeys = Object.keys(SLIDER_SIZES);
-        const foundKey = sizeKeys.find((sizeKey) => component.element.classList.contains(`${component.getClass("slider")}--${sizeKey.toLowerCase()}`));
-        return foundKey || "XS";
-    }
     if (config.disabled === true)
         disableComponent();
     return Object.assign(component, {
@@ -78,28 +72,6 @@ export const withStates = (config) => (component) => {
             getColor() {
                 return getActiveColor();
             },
-            setSize(size) {
-                const sizeKeys = Object.keys(SLIDER_SIZES);
-                sizeKeys.forEach((sizeKey) => {
-                    component.element.classList.remove(`${component.getClass("slider")}--${sizeKey.toLowerCase()}`);
-                });
-                let sizeKey;
-                if (typeof size === "string" && size in SLIDER_SIZES) {
-                    sizeKey = size;
-                }
-                else if (typeof size === "number") {
-                    const entry = Object.entries(SLIDER_SIZES).find(([, value]) => value === size);
-                    sizeKey = entry ? entry[0] : "XS";
-                }
-                else {
-                    sizeKey = "XS";
-                }
-                component.element.classList.add(`${component.getClass("slider")}--${sizeKey.toLowerCase()}`);
-                return this;
-            },
-            getSize() {
-                return getActiveSize();
-            },
             showTicks(show) {
                 config.ticks = show;
                 component.renderTracks?.();

package/dist/components/slider/slider.js

@@ -1,15 +1,12 @@
 import { pipe } from "../../core/compose/pipe.js";
 import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withLifecycle, withIcon, withTextLabel, } from "../../core/compose/features/index.js";
-import { withRange, withStates, withController, withTracks, withDom, } from "./features/index.js";
-import { withAPI } from "./api.js";
-import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
+import { withStates, withController, withTracks, withDom, } from "./features/index.js";
+import { createBaseConfig, getElementConfig } from "./config.js";
 const createSlider = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
-        const component = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withRange(baseConfig), withDom(baseConfig), withTextLabel(baseConfig), withIcon(baseConfig), withLifecycle(), withStates(baseConfig), withTracks(baseConfig), withController(baseConfig, () => slider))(baseConfig);
-        const apiOptions = getApiConfig(component);
-        const slider = withAPI(apiOptions)(component);
+        const slider = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withDom(baseConfig), withTextLabel(baseConfig), withIcon(baseConfig), withLifecycle(), withStates(baseConfig), withTracks(baseConfig), withController(baseConfig, () => slider))(baseConfig);
         if (baseConfig.on && typeof slider.on === "function") {
             Object.entries(baseConfig.on).forEach(([event, handler]) => {
                 if (typeof handler === "function") {

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

@@ -47,10 +47,8 @@ export interface SliderEvent {
 }
 export type SliderActiveHandle = "first" | "second" | null;
 export interface SliderState {
-    component: SliderStateComponent;
     value: number;
     secondValue: number | null;
-    previousValue?: number;
     min: number;
     max: number;
     step: number;
@@ -67,7 +65,6 @@ export interface SliderStateComponent {
     valueBubble?: HTMLElement | null;
     secondHandle?: HTMLElement | null;
     secondValueBubble?: HTMLElement | null;
-    components?: Record<string, HTMLElement | null | undefined>;
     getClass: (name: string) => string;
     emit: (event: string, data: unknown) => unknown;
     disabled?: {
@@ -80,31 +77,8 @@ export interface SliderStateComponent {
         destroy?: () => void;
         mount?: () => void;
     };
-    slider?: {
-        setValue?: (value: number, triggerEvent?: boolean) => unknown;
-    };
 }
 export type SliderPointerEvent = MouseEvent | TouchEvent;
-export interface SliderElements {
-    container?: HTMLElement | null;
-    handle?: HTMLElement | null;
-    valueBubble?: HTMLElement | null;
-    secondHandle?: HTMLElement | null;
-    secondValueBubble?: HTMLElement | null;
-    [key: string]: HTMLElement | null | undefined;
-}
-export interface SliderUiRenderer {
-    getPercentage: (value: number) => number;
-    getValueFromPosition: (position: number) => number;
-    roundToStep: (value: number) => number;
-    clamp: (value: number, min?: number, max?: number) => number;
-    showValueBubble: (bubbleElement: HTMLElement | null, show: boolean) => void;
-    updateUi: () => void;
-    render: () => void;
-}
-export interface SliderEventHelpers {
-    triggerEvent: (eventName: string, originalEvent?: Event | null) => void;
-}
 export interface SliderEvents extends TouchEvents {
     change: (payload: SliderEvent) => void;
     input: (payload: SliderEvent) => void;

package/dist/core/canvas/resize.d.ts

@@ -1 +1 @@
-export declare const observeCanvasResize: (element: HTMLElement, _canvas: HTMLCanvasElement, onResize: () => void) => (() => void);
+export declare const observeCanvasResize: (element: HTMLElement, canvas: HTMLCanvasElement | null | undefined, onResize: () => void) => (() => void);

package/dist/core/canvas/resize.js

@@ -1,4 +1,4 @@
-export const observeCanvasResize = (element, _canvas, onResize) => {
+export const observeCanvasResize = (element, canvas, onResize) => {
     let timeoutId = null;
     const debouncedResize = () => {
         if (timeoutId)
@@ -7,6 +7,21 @@ export const observeCanvasResize = (element, _canvas, onResize) => {
             onResize();
         }, 100);
     };
+    const view = canvas ? element.ownerDocument?.defaultView ?? null : null;
+    let resolution = null;
+    function onResolutionChange() {
+        resolution?.removeEventListener("change", onResolutionChange);
+        armResolution();
+        debouncedResize();
+    }
+    function armResolution() {
+        if (!view?.matchMedia)
+            return;
+        resolution = view.matchMedia(`(resolution: ${view.devicePixelRatio || 1}dppx)`);
+        resolution.addEventListener("change", onResolutionChange);
+    }
+    armResolution();
+    let stopWidth;
     if (typeof ResizeObserver !== 'undefined') {
         let seen = -1;
         const observer = new ResizeObserver((entries) => {
@@ -19,18 +34,16 @@ export const observeCanvasResize = (element, _canvas, onResize) => {
             }
         });
         observer.observe(element);
-        return () => {
-            if (timeoutId)
-                clearTimeout(timeoutId);
-            observer.disconnect();
-        };
+        stopWidth = () => observer.disconnect();
     }
     else {
         window.addEventListener('resize', debouncedResize);
-        return () => {
-            if (timeoutId)
-                clearTimeout(timeoutId);
-            window.removeEventListener('resize', debouncedResize);
-        };
+        stopWidth = () => window.removeEventListener('resize', debouncedResize);
     }
+    return () => {
+        if (timeoutId)
+            clearTimeout(timeoutId);
+        resolution?.removeEventListener("change", onResolutionChange);
+        stopWidth();
+    };
 };

package/dist/core/dom/classes.js

@@ -56,134 +56,33 @@ export const normalizeClasses = (...classes) => {
     }
     return result;
 };
-export const addClass = (element, ...classes) => {
-    if (classes.length === 0)
-        return element;
-    if (classes.length === 1 && Array.isArray(classes[0])) {
-        return addClass(element, ...classes[0]);
-    }
-    if (classes.length === 1 && typeof classes[0] === "string") {
-        const cls = classes[0];
-        if (cls && !cls.includes(" ")) {
-            const prefixed = cls;
-            if (!prefixed.includes(" ")) {
-                element.classList.add(prefixed);
-                return element;
-            }
-        }
-    }
-    const normalized = normalizeClasses(...classes);
-    for (const cls of normalized) {
-        const prefixed = cls;
-        if (prefixed.includes(" ")) {
-            prefixed.split(" ").forEach((c) => {
-                const trimmed = c.trim();
-                if (trimmed)
-                    element.classList.add(trimmed);
-            });
-        }
-        else {
-            element.classList.add(prefixed);
-        }
+const forEachClass = (classes, apply) => {
+    if (classes.length === 1 &&
+        typeof classes[0] === "string" &&
+        classes[0] &&
+        !classes[0].includes(" ")) {
+        apply(classes[0]);
+        return;
     }
+    for (const name of normalizeClasses(...classes))
+        apply(name);
+};
+export const addClass = (element, ...classes) => {
+    forEachClass(classes, (name) => element.classList.add(name));
     return element;
 };
 export const removeClass = (element, ...classes) => {
-    if (classes.length === 0)
-        return element;
-    if (classes.length === 1 && Array.isArray(classes[0])) {
-        return removeClass(element, ...classes[0]);
-    }
-    if (classes.length === 1 && typeof classes[0] === "string") {
-        const cls = classes[0];
-        if (cls && !cls.includes(" ")) {
-            const prefixed = cls;
-            if (!prefixed.includes(" ")) {
-                element.classList.remove(prefixed);
-                return element;
-            }
-        }
-    }
-    const normalized = normalizeClasses(...classes);
-    for (const cls of normalized) {
-        const prefixed = cls;
-        if (prefixed.includes(" ")) {
-            prefixed.split(" ").forEach((c) => {
-                const trimmed = c.trim();
-                if (trimmed)
-                    element.classList.remove(trimmed);
-            });
-        }
-        else {
-            element.classList.remove(prefixed);
-        }
-    }
+    forEachClass(classes, (name) => element.classList.remove(name));
     return element;
 };
 export const toggleClass = (element, ...classes) => {
-    if (classes.length === 1 && Array.isArray(classes[0])) {
-        return toggleClass(element, ...classes[0]);
-    }
-    if (classes.length === 1 && typeof classes[0] === "string") {
-        const cls = classes[0];
-        if (cls && !cls.includes(" ")) {
-            const prefixed = cls;
-            if (!prefixed.includes(" ")) {
-                element.classList.toggle(prefixed);
-                return element;
-            }
-        }
-    }
-    const normalized = normalizeClasses(...classes);
-    for (const cls of normalized) {
-        const prefixed = cls;
-        if (prefixed.includes(" ")) {
-            prefixed.split(" ").forEach((c) => {
-                const trimmed = c.trim();
-                if (trimmed)
-                    element.classList.toggle(trimmed);
-            });
-        }
-        else {
-            element.classList.toggle(prefixed);
-        }
-    }
+    forEachClass(classes, (name) => element.classList.toggle(name));
     return element;
 };
 export const hasClass = (element, ...classes) => {
-    if (classes.length === 0)
-        return true;
-    if (classes.length === 1 && Array.isArray(classes[0])) {
-        return hasClass(element, ...classes[0]);
-    }
-    if (classes.length === 1 && typeof classes[0] === "string") {
-        const cls = classes[0];
-        if (cls && !cls.includes(" ")) {
-            const prefixed = cls;
-            if (!prefixed.includes(" ")) {
-                return element.classList.contains(prefixed);
-            }
-        }
-    }
-    const normalized = normalizeClasses(...classes);
-    for (const cls of normalized) {
-        const prefixed = cls;
-        if (prefixed.includes(" ")) {
-            const tokens = prefixed
-                .split(" ")
-                .map((c) => c.trim())
-                .filter(Boolean);
-            for (const token of tokens) {
-                if (!element.classList.contains(token)) {
-                    return false;
-                }
-            }
-        }
-        else {
-            if (!element.classList.contains(prefixed)) {
-                return false;
-            }
-        }
+    for (const name of normalizeClasses(...classes)) {
+        if (!element.classList.contains(name))
+            return false;
     }
     return true;
 };

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

@@ -45,8 +45,6 @@ export interface ForwardedEventPayload<E extends Event = Event, TElement extends
     originalEvent: E;
 }
 export declare const createElement: (options?: CreateElementOptions) => HTMLElement;
-export declare const createElementPooled: (options?: CreateElementOptions) => HTMLElement;
-export declare const releaseElement: (element: HTMLElement) => void;
 export declare const createSVGElement: (options?: CreateSVGElementOptions) => SVGElement;
 export declare const removeEventHandlers: (element: HTMLElement | SVGElement) => void;
 declare global {

package/dist/core/dom/create.js

@@ -64,52 +64,6 @@ const setupEventForwarding = (element, forwardEvents, context) => {
         element.addEventListener(nativeEvent, handler, options);
     }
 };
-class ElementPool {
-    constructor() {
-        this.pools = new Map();
-        this.maxSize = 20;
-    }
-    acquire(tag = "div") {
-        const pool = this.pools.get(tag);
-        if (pool?.length) {
-            const element = pool.pop();
-            element.className = "";
-            element.replaceChildren();
-            element.removeAttribute("id");
-            Object.keys(element.dataset).forEach((key) => delete element.dataset[key]);
-            return element;
-        }
-        return document.createElement(tag);
-    }
-    release(element) {
-        const tag = element.tagName.toLowerCase();
-        let pool = this.pools.get(tag);
-        if (!pool) {
-            pool = [];
-            this.pools.set(tag, pool);
-        }
-        if (pool.length < this.maxSize) {
-            this.cleanElement(element);
-            pool.push(element);
-        }
-    }
-    cleanElement(element) {
-        const handlers = element.__eventHandlers;
-        if (handlers) {
-            for (const event in handlers) {
-                element.removeEventListener(event, handlers[event]);
-            }
-            delete element.__eventHandlers;
-        }
-        element.className = "";
-        element.replaceChildren();
-        element.removeAttribute("id");
-        Object.keys(element.dataset).forEach((key) => delete element.dataset[key]);
-        element.parentNode?.removeChild(element);
-    }
-}
-let elementPool;
-const getElementPool = () => elementPool ?? (elementPool = new ElementPool());
 export const createElement = (options = {}) => {
     if (!options || Object.keys(options).length === 0) {
         return document.createElement("div");
@@ -171,32 +125,6 @@ export const createElement = (options = {}) => {
         options.onCreate(element, options.context);
     return element;
 };
-export const createElementPooled = (options = {}) => {
-    const element = getElementPool().acquire(options.tag || "div");
-    if (options.html)
-        setHTML(element, options.html);
-    else if (options.text)
-        element.textContent = options.text;
-    if (options.id)
-        element.id = options.id;
-    const classSource = options.className || options.class;
-    if (classSource)
-        addClass(element, classSource);
-    if (options.data)
-        Object.assign(element.dataset, options.data);
-    if (options.attributes)
-        setAttributes(element, options.attributes);
-    if (options.forwardEvents)
-        setupEventForwarding(element, options.forwardEvents, options.context);
-    if (options.container)
-        options.container.appendChild(element);
-    if (options.onCreate)
-        options.onCreate(element, options.context);
-    return element;
-};
-export const releaseElement = (element) => {
-    getElementPool().release(element);
-};
 export const createSVGElement = (options = {}) => {
     const element = document.createElementNS("http://www.w3.org/2000/svg", options.tag || "svg");
     if (options.text)

package/dist/core/utils/mobile.js

@@ -25,36 +25,16 @@ function isMouseEvent(event) {
     return 'clientX' in event && 'clientY' in event;
 }
 export const normalizeEvent = (event) => {
-    if (isTouchEvent(event) && event.touches.length > 0) {
-        const touch = event.touches[0];
-        return {
-            clientX: touch.clientX,
-            clientY: touch.clientY,
-            pageX: touch.pageX,
-            pageY: touch.pageY,
-            target: event.target,
-            preventDefault: () => event.preventDefault(),
-            stopPropagation: () => event.stopPropagation(),
-            type: event.type
-        };
-    }
-    if (isMouseEvent(event)) {
-        return {
-            clientX: event.clientX,
-            clientY: event.clientY,
-            pageX: event.pageX,
-            pageY: event.pageY,
-            target: event.target,
-            preventDefault: () => event.preventDefault(),
-            stopPropagation: () => event.stopPropagation(),
-            type: event.type
-        };
-    }
+    const point = isTouchEvent(event) && event.touches.length > 0
+        ? event.touches[0]
+        : isMouseEvent(event)
+            ? event
+            : undefined;
     return {
-        clientX: 0,
-        clientY: 0,
-        pageX: 0,
-        pageY: 0,
+        clientX: point ? point.clientX : 0,
+        clientY: point ? point.clientY : 0,
+        pageX: point ? point.pageX : 0,
+        pageY: point ? point.pageY : 0,
         target: event.target,
         preventDefault: () => event.preventDefault(),
         stopPropagation: () => event.stopPropagation(),

package/dist/elements/preupgrade/badge.css

@@ -1,2 +1,2 @@
-/*! material v3.3.2 | MIT */
+/*! material v3.3.3 | MIT */
 @layer mtrl.preupgrade{m-badge:not(:defined){display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;overflow:hidden;height:16px;min-width:16px;max-width:34px;padding:0 4px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);font-weight:500;font-size:11px;line-height:16px;background-color:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error)}m-badge:not(:defined)[color=primary]{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}m-badge:not(:defined)[color=secondary]{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}m-badge:not(:defined)[color=tertiary]{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}m-badge:not(:defined)[color=success]{background-color:var(--mtrl-sys-color-success);color:var(--mtrl-sys-color-on-success)}m-badge:not(:defined)[color=warning]{background-color:var(--mtrl-sys-color-warning);color:var(--mtrl-sys-color-on-warning)}m-badge:not(:defined)[color=info]{background-color:var(--mtrl-sys-color-info);color:var(--mtrl-sys-color-on-info)}m-badge:not(:defined):empty[label]:not([label=""])::before{content:attr(label)}m-badge:not(:defined):not([variant=small]):is(:empty:not([label]),[label=""],[label="0"]){width:0;height:0;min-width:0;max-width:none;padding:0;font-size:0;background-color:rgba(0,0,0,0)}m-badge:not(:defined)[variant=small]{width:6px;height:6px;min-width:6px;max-width:none;padding:0;font-size:0}[data-mtrl-ssr]:not(:defined):not(#\0),[data-mtrl-ssr]:not(:defined):not(#\0)::before,[data-mtrl-ssr]:not(:defined):not(#\0)::after,[data-mtrl-ssr]:not(:defined):not(#\0) > :defined{all:revert-layer}}

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

@@ -1,2 +1,2 @@
-/*! material v3.3.2 | MIT */
+/*! material v3.3.3 | MIT */
 @layer mtrl.preupgrade{m-bottom-app-bar:not(:defined){position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:4px;box-sizing:border-box;height:80px;padding:12px 16px 12px 4px;background-color:var(--mtrl-sys-color-surface-container)}m-bottom-app-bar:not(:defined)>[slot=fab]{margin-left:auto}[data-mtrl-ssr]:not(:defined):not(#\0),[data-mtrl-ssr]:not(:defined):not(#\0)::before,[data-mtrl-ssr]:not(:defined):not(#\0)::after,[data-mtrl-ssr]:not(:defined):not(#\0) > :defined{all:revert-layer}}

package/dist/elements/preupgrade/bottom-sheet.css

@@ -1,2 +1,2 @@
-/*! material v3.3.2 | MIT */
+/*! material v3.3.3 | MIT */
 @layer mtrl.preupgrade{m-bottom-sheet:not(:defined){display:none}[data-mtrl-ssr]:not(:defined):not(#\0),[data-mtrl-ssr]:not(:defined):not(#\0)::before,[data-mtrl-ssr]:not(:defined):not(#\0)::after,[data-mtrl-ssr]:not(:defined):not(#\0) > :defined{all:revert-layer}}

package/dist/elements/preupgrade/button-group.css

@@ -1,2 +1,2 @@
-/*! material v3.3.2 | MIT */
+/*! material v3.3.3 | MIT */
 @layer mtrl.preupgrade{m-button-group:not(:defined){display:inline-flex;vertical-align:baseline;gap:12px;white-space:nowrap}m-button-group:not(:defined)::before{width:0;height:32px;margin-inline-end:-12px;align-self:flex-start}m-button-group:not(:defined):has(>[icon]:empty:first-child){align-items:center}m-button-group:not(:defined):has(>[icon]:empty:first-child)::before{content:""}m-button-group:not(:defined)[size=xs]{gap:18px}m-button-group:not(:defined):is([size=m],[size=l],[size=xl]){gap:8px}m-button-group:not(:defined)[density=comfortable]>*{height:36px}m-button-group:not(:defined)[density=compact]>*{height:32px}m-button-group:not(:defined)[size=xs]>*{height:32px;padding:0 13px}m-button-group:not(:defined)[size=xs][density=comfortable]>*{height:28px}m-button-group:not(:defined)[size=xs][density=compact]>*{height:24px}m-button-group:not(:defined)[size=xs]::before{height:26px;margin-inline-end:-18px}m-button-group:not(:defined)[size=m]>*{height:56px;padding:0 25px;font-size:16px;line-height:24px;letter-spacing:.15px}m-button-group:not(:defined)[size=m][density=comfortable]>*{height:52px}m-button-group:not(:defined)[size=m][density=compact]>*{height:48px}m-button-group:not(:defined)[size=m]::before{height:40px}m-button-group:not(:defined)[size=l]>*{height:96px;padding:0 50px;font-size:24px;line-height:32px}m-button-group:not(:defined)[size=l][density=comfortable]>*{height:92px}m-button-group:not(:defined)[size=l][density=compact]>*{height:88px}m-button-group:not(:defined)[size=l]::before{height:64px}m-button-group:not(:defined)[size=xl]>*{height:136px;padding:0 67px;font-size:32px;line-height:40px}m-button-group:not(:defined)[size=xl][density=comfortable]>*{height:132px}m-button-group:not(:defined)[size=xl][density=compact]>*{height:128px}m-button-group:not(:defined)[size=xl]::before{height:88px}m-button-group:not(:defined):is([size=m],[size=l],[size=xl])::before{margin-inline-end:-8px}m-button-group:not(:defined):is([size=l],[size=xl])>*{letter-spacing:0;font-weight:400}m-button-group:not(:defined)[density=comfortable]::before{margin-block-start:-2px}m-button-group:not(:defined)[density=compact]::before{margin-block-start:-4px}m-button-group:not(:defined)>*{visibility:hidden;display:inline-flex;align-items:center;flex:none;min-width:58px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);height:40px;padding:0 17px;font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button-group:not(:defined)>*[icon]:empty{min-width:0;padding:0;aspect-ratio:1}m-button-group:not(:defined)[kind=connected]{gap:2px}m-button-group:not(:defined)[kind=connected]::before{margin-inline-end:-2px}m-button-group:not(:defined):is(:not([size]),[size=xs],[size=s])[kind=connected]>*{min-width:48px}[data-mtrl-ssr]:not(:defined):not(#\0),[data-mtrl-ssr]:not(:defined):not(#\0)::before,[data-mtrl-ssr]:not(:defined):not(#\0)::after,[data-mtrl-ssr]:not(:defined):not(#\0) > :defined{all:revert-layer}}

package/dist/elements/preupgrade/button.css

@@ -1,2 +1,2 @@
-/*! material v3.3.2 | MIT */
+/*! material v3.3.3 | MIT */
 @layer mtrl.preupgrade{m-button:not(:defined){display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;box-sizing:border-box;min-width:58px;white-space:nowrap;background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary);height:40px;padding:0 16px;gap:8px;border-radius:20px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button:not(:defined)[icon]::before,m-button:not(:defined)[icon][icon-position=end]::after{width:20px;height:20px}m-button:not(:defined)[size=xs]{height:32px;padding:0 12px;gap:4px;border-radius:16px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button:not(:defined)[size=xs][icon]::before,m-button:not(:defined)[size=xs][icon][icon-position=end]::after{width:20px;height:20px}m-button:not(:defined)[size=s]{height:40px;padding:0 16px;gap:8px;border-radius:20px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button:not(:defined)[size=s][icon]::before,m-button:not(:defined)[size=s][icon][icon-position=end]::after{width:20px;height:20px}m-button:not(:defined)[size=m]{height:56px;padding:0 24px;gap:8px;border-radius:28px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}m-button:not(:defined)[size=m][icon]::before,m-button:not(:defined)[size=m][icon][icon-position=end]::after{width:24px;height:24px}m-button:not(:defined)[size=l]{height:96px;padding:0 48px;gap:12px;border-radius:48px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}m-button:not(:defined)[size=l][icon]::before,m-button:not(:defined)[size=l][icon][icon-position=end]::after{width:32px;height:32px}m-button:not(:defined)[size=xl]{height:136px;padding:0 64px;gap:16px;border-radius:68px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:32px;line-height:40px;letter-spacing:0;font-weight:400}m-button:not(:defined)[size=xl][icon]::before,m-button:not(:defined)[size=xl][icon][icon-position=end]::after{width:40px;height:40px}m-button:not(:defined)[variant=filled]{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}m-button:not(:defined)[variant=elevated]{background-color:var(--mtrl-sys-color-surface-container-low);color:var(--mtrl-sys-color-primary)}m-button:not(:defined)[variant=tonal]{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}m-button:not(:defined)[variant=outlined]{background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant)}m-button:not(:defined)[variant=text]{background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-primary)}m-button:not(:defined)[variant=outlined]{border:1px solid var(--mtrl-sys-color-outline-variant)}m-button:not(:defined)[variant=text]{padding:0 12px}m-button:not(:defined)[icon]::before,m-button:not(:defined)[icon][icon-position=end]::after{content:"";flex:none}m-button:not(:defined)[icon][icon-position=end]::before{content:none}m-button:not(:defined)[icon]:not([size]),m-button:not(:defined)[icon][size=s]{padding-inline-start:12px}m-button:not(:defined)[icon]:not([size])[icon-position=end],m-button:not(:defined)[icon][size=s][icon-position=end]{padding-inline-start:16px;padding-inline-end:12px}m-button:not(:defined)[variant=text][icon]:not([size]),m-button:not(:defined)[variant=text][icon][size=xs],m-button:not(:defined)[variant=text][icon][size=s]{padding-inline:12px 16px}m-button:not(:defined)[variant=text][icon]:not([size])[icon-position=end],m-button:not(:defined)[variant=text][icon][size=xs][icon-position=end],m-button:not(:defined)[variant=text][icon][size=s][icon-position=end]{padding-inline:16px 12px}m-button:not(:defined)[variant=text][icon][size=m]{padding:0 24px}m-button:not(:defined)[variant=text][icon][size=l]{padding:0 48px}m-button:not(:defined)[variant=text][icon][size=xl]{padding:0 64px}[data-mtrl-ssr]:not(:defined):not(#\0),[data-mtrl-ssr]:not(:defined):not(#\0)::before,[data-mtrl-ssr]:not(:defined):not(#\0)::after,[data-mtrl-ssr]:not(:defined):not(#\0) > :defined{all:revert-layer}}