material 3.3.1 → 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/components/tooltip/api.js

@@ -40,106 +40,62 @@ export const withAPI = ({ lifecycle }) => (component) => {
         if (!target)
             return { top: 0, left: 0 };
         component.element.style.left = "0px";
-        const tooltipWidth = component.element.offsetWidth;
-        const tooltipHeight = component.element.offsetHeight;
+        const styles = getComputedStyle(component.element);
+        const tooltipWidth = parseFloat(styles.width);
+        const tooltipHeight = parseFloat(styles.height);
         const targetRect = target.getBoundingClientRect();
         const offset = DEFAULT_OFFSET;
         let top = 0;
         let left = 0;
-        let arrowPosition;
-        switch (position) {
-            case TOOLTIP_POSITIONS.TOP:
-                top = targetRect.top - tooltipHeight - offset;
-                left =
-                    targetRect.left +
-                        targetRect.width / 2 -
-                        tooltipWidth / 2;
-                arrowPosition = "bottom";
-                break;
-            case TOOLTIP_POSITIONS.TOP_START:
-                top = targetRect.top - tooltipHeight - offset;
-                left = targetRect.left;
-                arrowPosition = "bottom-start";
-                break;
-            case TOOLTIP_POSITIONS.TOP_END:
-                top = targetRect.top - tooltipHeight - offset;
-                left =
-                    targetRect.left + targetRect.width - tooltipWidth;
-                arrowPosition = "bottom-end";
-                break;
-            case TOOLTIP_POSITIONS.RIGHT:
-                top =
-                    targetRect.top +
-                        targetRect.height / 2 -
-                        tooltipHeight / 2;
-                left = targetRect.left + targetRect.width + offset;
-                arrowPosition = "left";
-                break;
-            case TOOLTIP_POSITIONS.RIGHT_START:
-                top = targetRect.top;
-                left = targetRect.left + targetRect.width + offset;
-                arrowPosition = "left-start";
-                break;
-            case TOOLTIP_POSITIONS.RIGHT_END:
-                top =
-                    targetRect.top + targetRect.height - tooltipHeight;
-                left = targetRect.left + targetRect.width + offset;
-                arrowPosition = "left-end";
-                break;
-            case TOOLTIP_POSITIONS.BOTTOM:
-                top = targetRect.top + targetRect.height + offset;
-                left =
-                    targetRect.left +
-                        targetRect.width / 2 -
-                        tooltipWidth / 2;
-                arrowPosition = "top";
-                break;
-            case TOOLTIP_POSITIONS.BOTTOM_START:
-                top = targetRect.top + targetRect.height + offset;
-                left = targetRect.left;
-                arrowPosition = "top-start";
-                break;
-            case TOOLTIP_POSITIONS.BOTTOM_END:
-                top = targetRect.top + targetRect.height + offset;
-                left =
-                    targetRect.left + targetRect.width - tooltipWidth;
-                arrowPosition = "top-end";
-                break;
-            case TOOLTIP_POSITIONS.LEFT:
-                top =
-                    targetRect.top +
-                        targetRect.height / 2 -
-                        tooltipHeight / 2;
-                left = targetRect.left - tooltipWidth - offset;
-                arrowPosition = "right";
-                break;
-            case TOOLTIP_POSITIONS.LEFT_START:
-                top = targetRect.top;
-                left = targetRect.left - tooltipWidth - offset;
-                arrowPosition = "right-start";
-                break;
-            case TOOLTIP_POSITIONS.LEFT_END:
-                top =
-                    targetRect.top + targetRect.height - tooltipHeight;
-                left = targetRect.left - tooltipWidth - offset;
-                arrowPosition = "right-end";
-                break;
-            default:
-                top = targetRect.top + targetRect.height + offset;
-                left =
-                    targetRect.left +
-                        targetRect.width / 2 -
-                        tooltipWidth / 2;
-                arrowPosition = "top";
+        const [side, anchor] = position.split("-");
+        const vertical = side !== "left" && side !== "right";
+        const align = anchor === "start" ? 0 : anchor === "end" ? 1 : 0.5;
+        if (vertical) {
+            top = side === "top"
+                ? targetRect.top - tooltipHeight - offset
+                : targetRect.bottom + offset;
+            left = targetRect.left + (targetRect.width - tooltipWidth) * align;
+        }
+        else {
+            left = side === "left"
+                ? targetRect.left - tooltipWidth - offset
+                : targetRect.right + offset;
+            top = targetRect.top + (targetRect.height - tooltipHeight) * align;
         }
         const windowWidth = window.innerWidth;
-        if (left < 0) {
-            left = 0;
+        const windowHeight = window.innerHeight;
+        let suffix = anchor ? `-${anchor}` : "";
+        if (vertical) {
+            if (top < 0)
+                top = targetRect.bottom + offset;
+            else if (top + tooltipHeight > windowHeight) {
+                top = targetRect.top - tooltipHeight - offset;
+            }
         }
-        else if (left + tooltipWidth > windowWidth) {
-            left = windowWidth - tooltipWidth;
+        const clampedX = left < 0 || left + tooltipWidth > windowWidth;
+        const clampedY = top < 0 || top + tooltipHeight > windowHeight;
+        left = Math.max(0, Math.min(windowWidth - tooltipWidth, left));
+        top = Math.max(0, Math.min(windowHeight - tooltipHeight, top));
+        if (vertical ? clampedX : clampedY) {
+            const from = vertical ? left : top;
+            const size = vertical ? tooltipWidth : tooltipHeight;
+            const targetFrom = vertical ? targetRect.left : targetRect.top;
+            const targetTo = vertical ? targetRect.right : targetRect.bottom;
+            const spanAt = [from + 8, from + size / 2 - 8, from + size - 24];
+            const meet = spanAt.findIndex((x) => x + 16 > targetFrom && x < targetTo);
+            suffix = ["-start", "", "-end"][meet < 0 ? 2 : meet];
         }
-        return { top, left, arrowPosition };
+        return {
+            top,
+            left,
+            arrowPosition: (vertical
+                ? top + tooltipHeight <= targetRect.top
+                    ? "bottom"
+                    : "top"
+                : left + tooltipWidth <= targetRect.left
+                    ? "right"
+                    : "left") + suffix,
+        };
     };
     const addTargetEvents = (targetEl) => {
         if (showOnHover) {
@@ -264,7 +220,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
                 isVisible = true;
                 this.updatePosition();
                 window.addEventListener("resize", handleWindowResize);
-                window.addEventListener("scroll", handleWindowScroll);
+                window.addEventListener("scroll", handleWindowScroll, true);
                 document.addEventListener("keydown", handleDocumentKeydown);
             };
             if (immediate) {
@@ -289,7 +245,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
                 component.element.classList.remove(`${component.getClass("tooltip")}--visible`);
                 isVisible = false;
                 window.removeEventListener("resize", handleWindowResize);
-                window.removeEventListener("scroll", handleWindowScroll);
+                window.removeEventListener("scroll", handleWindowScroll, true);
                 document.removeEventListener("keydown", handleDocumentKeydown);
                 if (topLayer) {
                     if (layerTimer !== null)
@@ -316,8 +272,8 @@ export const withAPI = ({ lifecycle }) => (component) => {
             if (!target)
                 return this;
             const { top, left, arrowPosition } = calculatePosition();
-            component.element.style.top = `${Math.round(top)}px`;
-            component.element.style.left = `${Math.round(left)}px`;
+            component.element.style.top = `${top}px`;
+            component.element.style.left = `${left}px`;
             if (arrowPosition) {
                 arrowElement.className = `${component.getClass("tooltip")}__arrow`;
                 arrowElement.classList.add(`${component.getClass("tooltip")}__arrow--${arrowPosition}`);
@@ -339,7 +295,7 @@ export const withAPI = ({ lifecycle }) => (component) => {
                 undescribe(target);
             }
             window.removeEventListener("resize", handleWindowResize);
-            window.removeEventListener("scroll", handleWindowScroll);
+            window.removeEventListener("scroll", handleWindowScroll, true);
             document.removeEventListener("keydown", handleDocumentKeydown);
             component.element.removeEventListener("mouseenter", handleTooltipMouseEnter);
             component.element.removeEventListener("mouseleave", handleTooltipMouseLeave);

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;
 };