material 3.3.2 → 3.3.4

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/components/split-button/features/menu-on-demand.js

@@ -0,0 +1,141 @@
+export const createOnDemandMenu = (settings, items) => {
+    let menu = null;
+    let loading = false;
+    let destroyed = false;
+    let opened = false;
+    let asked = [undefined, undefined];
+    let current = items;
+    let selected;
+    let position = settings.position ?? "bottom-end";
+    let opener = settings.opener;
+    const openerElement = typeof settings.opener === "string"
+        ? null
+        : settings.opener.element ?? settings.opener;
+    const placeholder = document.createElement("div");
+    placeholder.id = `menu-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+    openerElement?.setAttribute("aria-controls", placeholder.id);
+    const listeners = new Map();
+    const notify = (event, payload) => {
+        for (const listener of listeners.get(event) ?? [])
+            listener(payload);
+    };
+    const attach = (created) => {
+        menu = created;
+        if (selected !== undefined)
+            created.setSelected(selected);
+        if (position !== settings.position)
+            created.setPosition(position);
+        if (opener !== settings.opener)
+            created.setOpener(opener);
+        if (opened)
+            created.open(asked[0], asked[1]);
+        for (const [event, set] of listeners)
+            for (const listener of set)
+                created.on(event, listener);
+        listeners.clear();
+    };
+    const load = () => {
+        if (menu || loading || destroyed)
+            return;
+        loading = true;
+        import("../../menu/index.js").then(({ default: createMenu }) => {
+            loading = false;
+            if (destroyed)
+                return;
+            attach(createMenu({ ...settings, items: current }));
+        }, (error) => {
+            loading = false;
+            console.error("Split button menu failed to load:", error);
+        });
+    };
+    const api = {
+        get element() {
+            return menu?.element ?? placeholder;
+        },
+        open(event, interactionType) {
+            if (menu) {
+                menu.open(event, interactionType);
+                return api;
+            }
+            if (!opened) {
+                opened = true;
+                notify("open", { menu: api, originalEvent: event });
+            }
+            asked = [event, interactionType];
+            load();
+            return api;
+        },
+        close(event, restoreFocus = true, skipAnimation = false) {
+            if (menu) {
+                menu.close(event, restoreFocus, skipAnimation);
+                return api;
+            }
+            if (opened) {
+                opened = false;
+                notify("close", { menu: api, originalEvent: event });
+            }
+            return api;
+        },
+        toggle(event) {
+            if (api.isOpen())
+                api.close(event);
+            else
+                api.open(event);
+            return api;
+        },
+        isOpen: () => (menu ? menu.isOpen() : opened),
+        setItems(items) {
+            current = items;
+            menu?.setItems(items);
+            return api;
+        },
+        getItems: () => (menu ? menu.getItems() : current),
+        setOpener(value) {
+            if (menu)
+                menu.setOpener(value);
+            else
+                opener = value;
+            return api;
+        },
+        getOpener: () => (menu ? menu.getOpener() : opener),
+        setPosition(value) {
+            if (menu)
+                menu.setPosition(value);
+            else
+                position = value;
+            return api;
+        },
+        getPosition: () => (menu ? menu.getPosition() : position),
+        setSelected(value) {
+            if (menu)
+                menu.setSelected(value);
+            else
+                selected = value;
+            return api;
+        },
+        getSelected: () => (menu ? menu.getSelected() : (selected ?? null)),
+        on(event, handler) {
+            if (menu)
+                menu.on(event, handler);
+            else {
+                const set = listeners.get(event) ?? new Set();
+                set.add(handler);
+                listeners.set(event, set);
+            }
+            return api;
+        },
+        off(event, handler) {
+            if (menu)
+                menu.off(event, handler);
+            else
+                listeners.get(event)?.delete(handler);
+            return api;
+        },
+        destroy() {
+            destroyed = true;
+            listeners.clear();
+            menu?.destroy();
+        },
+    };
+    return api;
+};

package/dist/components/split-button/features/menu.js

@@ -1,15 +1,14 @@
-import createMenu from "../../menu/index.js";
 import { MENU } from "../../menu/inner.js";
 import { SPLIT_BUTTON_DEFAULTS } from "../constants.js";
-export const makeMenu = (config, trailing, items) => createMenu({
+import { createOnDemandMenu } from "./menu-on-demand.js";
+export const makeMenu = (config, trailing, items) => createOnDemandMenu({
     opener: trailing,
-    items,
     position: "bottom-end",
     offset: SPLIT_BUTTON_DEFAULTS.MENU_OFFSET,
     manualOpen: true,
     ...(config.layer ? { layer: config.layer } : {}),
     prefix: config.prefix,
-});
+}, items);
 export const withMenu = (config) => (component) => {
     if (!config.items || config.items.length === 0)
         return component;

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 {