material 1.0.3 → 3.0.0-next.0

package/dist/core/utils/attributes.d.ts

@@ -0,0 +1,29 @@
+/**
+ * HTML attributes whose presence alone means true.
+ *
+ * The parser does not read their value: `disabled="false"`, `disabled=""` and
+ * `disabled="disabled"` are all a disabled control. So writing `String(false)`
+ * for one of these produces the opposite of what the caller asked for, which
+ * is FLO-240 — `createElement({ disabled: false })` returned a disabled
+ * button, and the same inversion reached `checked`, `required` and `hidden`.
+ *
+ * The list is the HTML boolean attributes a component configuration is
+ * plausibly built from. It is deliberately a known set rather than "any false
+ * value", because two neighbouring families would be caught by that rule and
+ * must not be:
+ *
+ *   - `aria-*`, where `aria-hidden="false"` is meaningful and differs from the
+ *     attribute being absent. Dropping it changes what assistive technology
+ *     reports.
+ *   - `data-*`, where "false" is an ordinary string an application may read
+ *     back with `dataset.x === "false"`.
+ */
+export declare const BOOLEAN_ATTRIBUTES: Set<string>;
+/**
+ * Whether an attribute must be left off the element entirely.
+ *
+ * True only for a boolean attribute given `false`. Every other value, and
+ * every other attribute, is written as usual — including the string `"false"`,
+ * which is what a caller passing `"false"` deliberately asked for.
+ */
+export declare const omitsAttribute: (key: string, value: unknown) => boolean;

package/dist/core/utils/attributes.js

@@ -0,0 +1,11 @@
+export const BOOLEAN_ATTRIBUTES = new Set([
+    "disabled",
+    "checked",
+    "readonly",
+    "required",
+    "hidden",
+    "selected",
+    "open",
+    "multiple",
+]);
+export const omitsAttribute = (key, value) => value === false && BOOLEAN_ATTRIBUTES.has(key.toLowerCase());

package/dist/core/utils/background.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Result interface for background color lookup
+ */
+export interface BackgroundResult {
+    /** The computed background color value */
+    color: string;
+    /** The element from which the color was obtained */
+    element: HTMLElement | null;
+}
+/**
+ * Gets the computed background color of an element or its ancestors.
+ * Recursively traverses the DOM tree upward until it finds a non-transparent background.
+ * Resolves CSS variables if used in background color.
+ *
+ * @param {HTMLElement} element - The starting element to check
+ * @param {number} [maxDepth=20] - Maximum number of parent levels to check
+ * @returns {BackgroundResult} Object containing the color and source element
+ *
+ * @example
+ * // Get the inherited background color and its source element
+ * const { color, element: sourceElement } = getInheritedBackground(myElement);
+ * console.log(color); // 'rgb(255, 255, 255)' or '#1c2526' for dark mode
+ *
+ * // Observe the source element for changes
+ * if (sourceElement) {
+ *   const observer = new MutationObserver(() => {
+ *     const { color } = getInheritedBackground(myElement);
+ *     myElement.style.backgroundColor = color;
+ *   });
+ *
+ *   observer.observe(sourceElement, { attributes: true, attributeFilter: ['style', 'class'] });
+ * }
+ */
+export declare const getInheritedBackground: (element: HTMLElement, maxDepth?: number) => BackgroundResult;
+export default getInheritedBackground;

package/dist/core/utils/background.js

@@ -0,0 +1,32 @@
+export const getInheritedBackground = (element, maxDepth = 17) => {
+    if (!element || !(element instanceof HTMLElement)) {
+        return { color: '', element: null };
+    }
+    let depth = 0;
+    let currentElement = element;
+    while (currentElement && depth < maxDepth) {
+        const computedStyle = window.getComputedStyle(currentElement);
+        let bgColor = computedStyle.backgroundColor;
+        if (bgColor.startsWith('var(')) {
+            const varMatch = bgColor.match(/var\((--[\w-]+)\)/);
+            if (varMatch) {
+                const varName = varMatch[1];
+                bgColor = window.getComputedStyle(document.documentElement).getPropertyValue(varName).trim() || 'transparent';
+            }
+        }
+        if (bgColor &&
+            bgColor !== 'transparent' &&
+            bgColor !== 'rgba(0, 0, 0, 0)' &&
+            bgColor !== 'rgba(0,0,0,0)') {
+            return { color: bgColor, element: currentElement };
+        }
+        currentElement = currentElement.parentElement;
+        depth++;
+    }
+    const documentBG = window.getComputedStyle(document.body).backgroundColor;
+    if (documentBG !== 'transparent' && documentBG !== 'rgba(0, 0, 0, 0)') {
+        return { color: documentBG, element: document.body };
+    }
+    return { color: 'rgb(255, 255, 255)', element: null };
+};
+export default getInheritedBackground;

package/dist/core/utils/color.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Converts a color to RGBA format with specified opacity
+ * Handles hex, rgb, rgba, and named colors
+ *
+ * @param color - The color string to convert (hex, rgb, rgba, or named color)
+ * @param opacity - The opacity value (0-1)
+ * @returns RGBA color string
+ *
+ * @example
+ * colorToRGBA('#ff0000', 0.5) // 'rgba(255, 0, 0, 0.5)'
+ * colorToRGBA('rgb(255, 0, 0)', 0.5) // 'rgba(255, 0, 0, 0.5)'
+ * colorToRGBA('red', 0.5) // 'rgba(255, 0, 0, 0.5)'
+ */
+export declare const colorToRGBA: (color: string, opacity: number) => string;

package/dist/core/utils/color.js

@@ -0,0 +1,23 @@
+export const colorToRGBA = (color, opacity) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return `rgba(0, 0, 0, ${opacity})`;
+    ctx.fillStyle = color;
+    const computedColor = ctx.fillStyle;
+    if (computedColor.startsWith('#')) {
+        const hex = computedColor.substring(1);
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+    if (computedColor.startsWith('rgb')) {
+        const match = computedColor.match(/\d+/g);
+        if (match) {
+            const [r, g, b] = match;
+            return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+        }
+    }
+    return `rgba(0, 0, 0, ${opacity})`;
+};

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

@@ -0,0 +1,20 @@
+export { isObject, byString } from "./object.js";
+export { normalizeEvent, hasTouchSupport, TOUCH_CONFIG, PASSIVE_EVENTS } from "./mobile.js";
+export { getInheritedBackground } from "./background.js";
+export { throttle, debounce, once } from "./performance.js";
+export { getThemeColor } from "./theme.js";
+export { colorToRGBA } from "./color.js";
+export { isSafeUrl, safeUrl, URL_ATTRIBUTES } from "./url.js";
+/**
+ * Creates a transformer that only runs if a condition is met
+ * @param {Function} predicate - Condition to check
+ * @param {Function} transformer - Transformer to run if condition is true
+ * @returns {Function} Conditional transformer
+ */
+export declare const when: <T, C>(predicate: (obj: T, context: C) => boolean, transformer: (obj: T, context: C) => T) => (obj: T, context: C) => T;
+/**
+ * Joins class names, filtering out falsy values
+ * @param {...(string | undefined | null | false)} classes - Class names to join
+ * @returns {string} Joined class names
+ */
+export declare const classNames: (...classes: (string | undefined | null | false)[]) => string;

package/dist/core/utils/index.js

@@ -0,0 +1,9 @@
+export { isObject, byString } from "./object.js";
+export { normalizeEvent, hasTouchSupport, TOUCH_CONFIG, PASSIVE_EVENTS } from "./mobile.js";
+export { getInheritedBackground } from "./background.js";
+export { throttle, debounce, once } from "./performance.js";
+export { getThemeColor } from "./theme.js";
+export { colorToRGBA } from "./color.js";
+export { isSafeUrl, safeUrl, URL_ATTRIBUTES } from "./url.js";
+export const when = (predicate, transformer) => (obj, context) => predicate(obj, context) ? transformer(obj, context) : obj;
+export const classNames = (...classes) => classes.filter(Boolean).join(' ');

package/dist/core/utils/mobile.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Mobile device detection and capability checks
+ * This provides a centralized way to handle mobile-specific features and behaviors
+ */
+/**
+ * Interface for normalized event properties
+ */
+export interface NormalizedEvent {
+    clientX: number;
+    clientY: number;
+    pageX: number;
+    pageY: number;
+    target: EventTarget;
+    preventDefault: () => void;
+    stopPropagation: () => void;
+    type: string;
+}
+/** Horizontal gesture emitted by an interactive root. */
+export interface SwipePayload {
+    direction: "left" | "right";
+    deltaX: number;
+    deltaY: number;
+}
+/** Touch gestures emitted by touch-enabled interactive roots. */
+export interface TouchEvents {
+    tap: (payload: NormalizedEvent) => void;
+    swipe: (payload: SwipePayload) => void;
+}
+/**
+ * Detects if the current device is likely a mobile device
+ * Uses a combination of user agent and screen size checks for reliability
+ */
+export declare const isMobileDevice: () => boolean;
+/**
+ * Options for passive event listeners
+ */
+export declare const PASSIVE_EVENTS: AddEventListenerOptions;
+/**
+ * Configuration constants for mobile interactions
+ * Following WCAG guidelines and touch interaction best practices
+ */
+export declare const TOUCH_CONFIG: {
+    TARGET_SIZE: number;
+    FEEDBACK_DURATION: number;
+    TAP_THRESHOLD: number;
+    SWIPE_THRESHOLD: number;
+};
+/**
+ * Accessibility-minded touch target sizes
+ * Based on WCAG guidelines for touch targets
+ */
+export declare const TOUCH_TARGETS: {
+    MINIMUM: number;
+    COMFORTABLE: number;
+    LARGE: number;
+};
+/**
+ * Detects if the current device supports touch events
+ */
+export declare const hasTouchSupport: () => boolean;
+/**
+ * Normalizes both mouse and touch events into a consistent format
+ * This allows components to handle interactions uniformly
+ */
+export declare const normalizeEvent: (event: Event) => NormalizedEvent;

package/dist/core/utils/mobile.js

@@ -0,0 +1,63 @@
+export const isMobileDevice = () => {
+    const userAgent = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    const screenSize = window.innerWidth <= 768;
+    return userAgent || screenSize;
+};
+export const PASSIVE_EVENTS = { passive: true };
+export const TOUCH_CONFIG = {
+    TARGET_SIZE: 44,
+    FEEDBACK_DURATION: 200,
+    TAP_THRESHOLD: 250,
+    SWIPE_THRESHOLD: 50
+};
+export const TOUCH_TARGETS = {
+    MINIMUM: 44,
+    COMFORTABLE: 48,
+    LARGE: 56
+};
+export const hasTouchSupport = () => {
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+};
+function isTouchEvent(event) {
+    return 'touches' in event;
+}
+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
+        };
+    }
+    return {
+        clientX: 0,
+        clientY: 0,
+        pageX: 0,
+        pageY: 0,
+        target: event.target,
+        preventDefault: () => event.preventDefault(),
+        stopPropagation: () => event.stopPropagation(),
+        type: event.type
+    };
+};

package/dist/core/utils/object.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Checks if a value is a plain object
+ * @param value - The value to check
+ * @returns true if the value is a plain object
+ */
+export declare const isObject: (value: unknown) => value is Record<string, unknown>;
+/**
+ * Accesses a nested property of an object using a string path
+ * @param obj - The object to traverse
+ * @param path - The property path (e.g. 'user.address.street')
+ * @returns The value at the specified path or undefined if not found
+ */
+export declare const byString: <T extends object, R = unknown>(obj: T, path: string) => R | undefined;

package/dist/core/utils/object.js

@@ -0,0 +1,21 @@
+export const isObject = (value) => {
+    return Boolean(value &&
+        typeof value === 'object' &&
+        Object.getPrototypeOf(value) === Object.getPrototypeOf({}));
+};
+export const byString = (obj, path) => {
+    const normalizedPath = path.replace(/\[(\w+)\]/g, '.$1');
+    const cleanPath = normalizedPath.replace(/^\./, '');
+    const keys = cleanPath.split('.');
+    let result = obj;
+    for (let i = 0, n = keys.length; i < n; ++i) {
+        const key = keys[i];
+        if (key in result) {
+            result = result[key];
+        }
+        else {
+            return undefined;
+        }
+    }
+    return result;
+};

package/dist/core/utils/performance.d.ts

@@ -0,0 +1,82 @@
+export type Cancellable<F> = F & {
+    cancel(): void;
+};
+/**
+ * @module core/utils/performance
+ * @description Performance utilities for optimizing high-frequency event handlers
+ */
+/**
+ * Creates a throttled function that only invokes the provided function
+ * at most once per every specified wait milliseconds.
+ *
+ * Throttling ensures that the function executes at a regular interval,
+ * which is useful for limiting the rate of execution for expensive operations.
+ *
+ * @param {Function} fn - The function to throttle
+ * @param {number} wait - The number of milliseconds to throttle invocations to
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.leading - Specify invoking on the leading edge of the timeout (default: true)
+ * @param {boolean} options.trailing - Specify invoking on the trailing edge of the timeout (default: true)
+ * @returns {Function} The throttled function
+ *
+ * @example
+ * // Throttle scroll handler to execute at most once every 100ms
+ * const throttledScroll = throttle((e) => {
+ *   updateScrollPosition(window.scrollY);
+ * }, 100);
+ *
+ * window.addEventListener('scroll', throttledScroll);
+ */
+export declare const throttle: <T extends (...args: never[]) => unknown>(fn: T, wait: number, options?: {
+    leading?: boolean;
+    trailing?: boolean;
+}) => Cancellable<(...args: Parameters<T>) => void>;
+/**
+ * Creates a debounced function that delays invoking the provided function
+ * until after the specified wait milliseconds have elapsed since the last time
+ * it was invoked.
+ *
+ * Debouncing groups multiple sequential calls into a single execution at the end,
+ * which is useful for handling rapid-fire events like resize or input.
+ *
+ * @param {Function} fn - The function to debounce
+ * @param {number} wait - The number of milliseconds to delay
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.leading - Specify invoking on the leading edge of the timeout (default: false)
+ * @param {boolean} options.maxWait - Maximum time function can be delayed before execution in milliseconds
+ * @returns {Function} The debounced function
+ *
+ * @example
+ * // Debounced search that executes 300ms after the user stops typing
+ * const debouncedSearch = debounce((query) => {
+ *   performSearch(query);
+ * }, 300);
+ *
+ * searchInput.addEventListener('input', (e) => {
+ *   debouncedSearch(e.target.value);
+ * });
+ */
+export declare const debounce: <T extends (...args: never[]) => unknown>(fn: T, wait: number, options?: {
+    leading?: boolean;
+    maxWait?: number;
+}) => Cancellable<(...args: Parameters<T>) => void>;
+/**
+ * Creates a function that is restricted to invoking the provided function once.
+ * Repeat calls to the function return the value of the first invocation.
+ *
+ * @param {Function} fn - The function to restrict
+ * @returns {Function} The restricted function
+ *
+ * @example
+ * // Initialize app only once
+ * const initApp = once(() => {
+ *   console.log('App initialized');
+ *   setupEventListeners();
+ *   loadInitialData();
+ * });
+ *
+ * // Can be called multiple times, but executes only once
+ * button1.addEventListener('click', initApp);
+ * button2.addEventListener('click', initApp);
+ */
+export declare const once: <T extends (...args: never[]) => unknown>(fn: T) => ((...args: Parameters<T>) => ReturnType<T>);

package/dist/core/utils/performance.js

@@ -0,0 +1,117 @@
+export const throttle = (fn, wait, options = {}) => {
+    let timeout = null;
+    let previous = 0;
+    const { leading = true, trailing = true } = options;
+    const throttled = function (...args) {
+        const now = Date.now();
+        if (!previous && !leading) {
+            previous = now;
+        }
+        const remaining = wait - (now - previous);
+        if (remaining <= 0 || remaining > wait) {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+            previous = now;
+            fn.apply(this, args);
+        }
+        else if (!timeout && trailing) {
+            timeout = window.setTimeout(() => {
+                previous = leading ? Date.now() : 0;
+                timeout = null;
+                fn.apply(this, args);
+            }, remaining);
+        }
+    };
+    return Object.assign(throttled, { cancel() {
+            if (timeout !== null)
+                clearTimeout(timeout);
+            timeout = null;
+            previous = 0;
+        } });
+};
+export const debounce = (fn, wait, options = {}) => {
+    let timeout = null;
+    let lastArgs = null;
+    let lastThis = null;
+    let result;
+    let lastCallTime = null;
+    let lastInvokeTime = 0;
+    const { leading = false, maxWait } = options;
+    const shouldInvoke = (time) => {
+        const timeSinceLastCall = time - (lastCallTime || 0);
+        const timeSinceLastInvoke = time - lastInvokeTime;
+        return (!lastCallTime ||
+            timeSinceLastCall >= wait ||
+            timeSinceLastCall < 0 ||
+            (maxWait !== undefined && timeSinceLastInvoke >= maxWait));
+    };
+    const invokeFunc = (time) => {
+        const args = lastArgs;
+        const thisArg = lastThis;
+        lastArgs = lastThis = null;
+        lastInvokeTime = time;
+        result = fn.apply(thisArg, args);
+        return result;
+    };
+    const trailingEdge = (time) => {
+        timeout = null;
+        if (lastArgs) {
+            return invokeFunc(time);
+        }
+        return result;
+    };
+    const leadingEdge = (time) => {
+        lastInvokeTime = time;
+        timeout = window.setTimeout(() => {
+            trailingEdge(Date.now());
+        }, wait);
+        return leading ? invokeFunc(time) : result;
+    };
+    const debounced = function (...args) {
+        const time = Date.now();
+        const isInvoking = shouldInvoke(time);
+        lastArgs = args;
+        lastThis = this;
+        lastCallTime = time;
+        if (isInvoking) {
+            if (timeout === null) {
+                return leadingEdge(time);
+            }
+            if (maxWait !== undefined) {
+                window.clearTimeout(timeout);
+                timeout = window.setTimeout(() => {
+                    const timeNow = Date.now();
+                    if (shouldInvoke(timeNow)) {
+                        return trailingEdge(timeNow);
+                    }
+                }, Math.min(wait, maxWait - (time - lastInvokeTime)));
+            }
+        }
+        if (timeout === null) {
+            timeout = window.setTimeout(() => {
+                trailingEdge(Date.now());
+            }, wait);
+        }
+        return result;
+    };
+    return Object.assign(debounced, { cancel() {
+            if (timeout !== null)
+                window.clearTimeout(timeout);
+            timeout = null;
+            lastArgs = lastThis = lastCallTime = null;
+            lastInvokeTime = 0;
+        } });
+};
+export const once = (fn) => {
+    let called = false;
+    let result;
+    return function (...args) {
+        if (!called) {
+            called = true;
+            result = fn.apply(this, args);
+        }
+        return result;
+    };
+};

package/dist/core/utils/theme.d.ts

@@ -0,0 +1,45 @@
+type ThemeChangeCallback = () => void;
+/**
+ * Register a callback to be notified of theme changes
+ * @param callback Function to call when theme changes
+ * @returns Function to unregister the callback
+ */
+export declare const onThemeChange: (callback: ThemeChangeCallback) => (() => void);
+/**
+ * Gets a theme color from CSS variables, with optional alpha/opacity support.
+ * The prefix is automatically added to the variable name.
+ * With `element`, colors are read where that element sits, so a theme set on
+ * any ancestor (or a shadow host) applies. Otherwise they are retrieved from
+ * the active theme (defined on body element) if available, falling back to
+ * the default theme (defined on :root) if not found.
+ *
+ * @param {string} varName - The CSS variable name without prefix (e.g. 'sys-color-primary')
+ * @param {object} [options] - Options for color retrieval
+ * @param {number} [options.alpha] - Alpha value (0-1): a hex colour is returned as rgba()
+ * @param {string} [options.fallback] - Fallback color if variable is not found
+ * @param {Element} [options.element] - Element whose theme to read; used when it is in a document
+ * @param {ThemeChangeCallback} [options.onThemeChange] - Optional callback for theme changes
+ * @returns {string} The color value (hex, rgb, or rgba)
+ *
+ * The themes declare no `--<prefix>-sys-color-*-rgb` twins (FLO-311), and material 3.0.0
+ * no longer derives them: read `sys-color-X`, with `alpha` for rgba().
+ *
+ * @example
+ * // Basic usage
+ * getThemeColor('sys-color-primary') // '#006493' (from active theme)
+ *
+ * // With theme change notification
+ * getThemeColor('sys-color-primary', {
+ *   onThemeChange: () => {
+ *     // Re-render or update component
+ *     component.update();
+ *   }
+ * });
+ */
+export declare function getThemeColor(varName: string, options?: {
+    alpha?: number;
+    fallback?: string;
+    element?: Element | null;
+    onThemeChange?: ThemeChangeCallback;
+}): string;
+export {};

package/dist/core/utils/theme.js

@@ -0,0 +1,66 @@
+import { PREFIX } from "../config.js";
+const themeChangeCallbacks = new Set();
+let themeObserver = null;
+const setupThemeObserver = () => {
+    if (themeObserver)
+        return;
+    themeObserver = new MutationObserver(() => {
+        themeChangeCallbacks.forEach(callback => callback());
+    });
+    themeObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme', 'data-theme-mode'],
+        subtree: true,
+    });
+};
+export const onThemeChange = (callback) => {
+    if (!themeObserver) {
+        setupThemeObserver();
+    }
+    themeChangeCallbacks.add(callback);
+    return () => {
+        themeChangeCallbacks.delete(callback);
+        if (themeChangeCallbacks.size === 0) {
+            themeObserver?.disconnect();
+            themeObserver = null;
+        }
+    };
+};
+const HEX = /^#([\da-f]{6}|[\da-f]{3})$/i;
+const RGB_TRIPLET = /^\d+,\s*\d+,\s*\d+$/;
+const hexToTriplet = (value) => {
+    if (!HEX.test(value))
+        return null;
+    const hex = value.slice(1);
+    const full = hex.length === 3 ? hex.split('').map((c) => c + c).join('') : hex;
+    return [0, 2, 4].map((i) => parseInt(full.substring(i, i + 2), 16)).join(', ');
+};
+const readVar = (name, element) => {
+    const read = (from) => getComputedStyle(from).getPropertyValue(`--${PREFIX}-${name}`).trim();
+    return element?.isConnected ? read(element) : read(document.body) || read(document.documentElement);
+};
+export function getThemeColor(varName, options) {
+    if (options?.onThemeChange) {
+        onThemeChange(options.onThemeChange);
+    }
+    const value = readVar(varName, options?.element);
+    if (!value && options?.fallback)
+        return options.fallback;
+    if (!value)
+        return '';
+    if (typeof options?.alpha === 'number') {
+        const triplet = RGB_TRIPLET.test(value) ? value : hexToTriplet(value);
+        if (triplet)
+            return `rgba(${triplet}, ${options.alpha})`;
+    }
+    return value;
+}
+if (typeof window !== 'undefined') {
+    window.addEventListener('pagehide', () => {
+        if (themeObserver) {
+            themeObserver.disconnect();
+            themeObserver = null;
+        }
+        themeChangeCallbacks.clear();
+    });
+}