@mustib/web-components 0.0.0-alpha.6 → 0.0.0-alpha.8

package/common-BBjg-zl9.js

@@ -0,0 +1,604 @@
+const capitalizeFirst = (str) => str[0].toUpperCase().concat(str.slice(1).toLowerCase());
+/**
+ * Capitalizes the first letter of a string or each word in a string.
+ *
+ * @param {string} str - The string to capitalize.
+ * @param {object} [options] - Optional parameters.
+ * @param {boolean} [options.onlyFirstWord=false] - Whether to capitalize only the first word (default: false).
+ * @param {string} [options.splitter=' '] - The delimiter to split the string into words (default: ' ').
+ * @param {string} [options.joiner=options.splitter] - The delimiter to join the capitalized words (default: options.splitter).
+ * @returns {string} The capitalized string.
+ */
+function capitalize(str, options) {
+    const { onlyFirstWord: onlyFirst = false, splitter = ' ', joiner = splitter, } = options || {};
+    if (typeof str !== 'string' || str === '')
+        return str;
+    return (onlyFirst ? [str] : str.split(splitter))
+        .map(capitalizeFirst)
+        .join(joiner);
+}
+
+class AppError extends Error {
+    options;
+    static throw(type, error, options) {
+        return new AppError(options)
+            .push(type, error, options?.pushOptions)
+            .throw();
+    }
+    static async aggregate(aggregateFunc, options) {
+        const appError = new AppError(options);
+        try {
+            await aggregateFunc(appError);
+            appError.end();
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                Error.captureStackTrace(error, options?.stackTraceConstructor ?? AppError.aggregate);
+            }
+            throw error;
+        }
+    }
+    length = 0;
+    errors = {};
+    get message() {
+        return this.toString();
+    }
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+    async catch(catchFunc) {
+        try {
+            await catchFunc();
+        }
+        catch (error) {
+            if (error instanceof AppError) {
+                for (const [type, errors] of Object.entries(error.errors)) {
+                    if (errors)
+                        errors.forEach((err) => this.push(type, err.message, { scope: err.scope }));
+                }
+            }
+            else {
+                if (error instanceof Error) {
+                    Error.captureStackTrace(error, this.catch);
+                }
+                throw error;
+            }
+        }
+    }
+    toString(options) {
+        const formattedErrors = [];
+        Object.keys(this.errors).forEach((errorType) => {
+            const rawErrors = this.errors[errorType];
+            if (!rawErrors)
+                return;
+            const { indentation = 4 } = this.options || {};
+            const formattedErrorType = rawErrors.reduce((result, err) => {
+                const hasMatchedScope = this.matchesScope({
+                    errScope: err.scope,
+                    includesScope: options?.includesScope,
+                    excludesScope: options?.excludesScope,
+                });
+                if (hasMatchedScope) {
+                    result.push(`${result.length + 1}- ${err.message}.`);
+                }
+                return result;
+            }, []);
+            const hasManyErrors = formattedErrorType.length > 1;
+            const indentationPrefix = `${' '.repeat(indentation)}`;
+            if (formattedErrorType.length > 0)
+                formattedErrors.push(`${errorType} Error${hasManyErrors ? 's' : ''}:\n${indentationPrefix}${formattedErrorType.join(`\n${indentationPrefix}`)}`);
+        });
+        return formattedErrors.join('\n');
+    }
+    matchesScope({ errScope, includesScope, excludesScope, }) {
+        if (includesScope === undefined && excludesScope === undefined)
+            return true;
+        if (errScope === undefined)
+            return false;
+        if (excludesScope) {
+            return !excludesScope.some((scope) => errScope.includes(scope));
+        }
+        if (includesScope) {
+            return includesScope.some((scope) => errScope.includes(scope));
+        }
+        return false;
+    }
+    push(type, error, options) {
+        const errorType = capitalize(type, { onlyFirstWord: true });
+        const errors = this.errors[errorType];
+        const newError = Array.isArray(error)
+            ? error.map((err) => ({ message: err, scope: options?.scope }))
+            : [{ message: error, scope: options?.scope }];
+        if (Array.isArray(errors)) {
+            errors.push(...newError);
+        }
+        else {
+            this.errors[errorType] = newError;
+            this.length++;
+        }
+        return this;
+    }
+    throw() {
+        Error.captureStackTrace(this, this.options?.stackTraceConstructor || this.throw);
+        throw this;
+    }
+    end() {
+        if (this.length > 0)
+            this.throw();
+    }
+}
+
+const LIBRARY_ERROR_SCOPE = Symbol('@mustib/utils');
+
+const EVENT_TYPES_PRIORITIES = ['prepend', 'normal'];
+const customEventEmitterErrorScope = [Symbol('@mustib/utils/CustomEventEmitter'), LIBRARY_ERROR_SCOPE];
+class CustomEventEmitter {
+    debugListeners;
+    events = {};
+    constructor(events) {
+        const appError = new AppError();
+        Object.keys(events).forEach((name) => {
+            const { destructible = false, dispatchable = true, listener, lockSymbol, afterAll, beforeAll, prepare, prepend, runningBehavior = 'sync', } = events[name];
+            let hasError = false;
+            if (lockSymbol !== undefined && typeof lockSymbol !== 'symbol') {
+                appError.push('Invalid', `lockSymbol must be of type (symbol)`, { scope: customEventEmitterErrorScope });
+                hasError = true;
+            }
+            if (!dispatchable && !lockSymbol) {
+                appError.push('Invalid', `non dispatchable event (${name}) must have lockSymbol`, { scope: customEventEmitterErrorScope });
+                hasError = true;
+            }
+            if (destructible && !lockSymbol) {
+                appError.push('Invalid', `destructible event (${name}) must have lockSymbol`, { scope: customEventEmitterErrorScope });
+                hasError = true;
+            }
+            if (!hasError) {
+                this.events[name] = {
+                    prepare,
+                    listeners: { all: new Map(), normal: new Set(), prepend: new Set() },
+                    destructed: false,
+                    destructible,
+                    dispatchable,
+                    lockSymbol,
+                    afterAllCallback: afterAll,
+                    beforeAllCallback: beforeAll,
+                    runningBehavior,
+                };
+                if (listener)
+                    if (typeof listener === 'function')
+                        this.addListener(name, listener);
+                    else
+                        this.addListener(name, listener.listener, listener.options);
+                if (prepend)
+                    if (typeof prepend === 'function')
+                        this.prependListener(name, prepend);
+                    else
+                        this.prependListener(name, prepend.listener, prepend.options);
+            }
+        });
+        appError.end();
+    }
+    hasEvent(name) {
+        return Reflect.has(this.events, name);
+    }
+    destruct(name, lockSymbol) {
+        if (!this.hasEvent(name))
+            this.throwInvalidEventNameAction(name, 'destruct');
+        const event = this.events[name];
+        if (event.destructed)
+            return this;
+        if (!event.destructible)
+            this.throwInvalidEventNameAction(name, 'destruct', ', because it is not destructible');
+        if (event.lockSymbol !== lockSymbol)
+            this.throwInvalidEventNameAction(name, 'destruct', ', because wrong lockSymbol provided');
+        setTimeout(() => {
+            event.listeners.all.clear();
+            event.listeners.normal.clear();
+            event.listeners.prepend.clear();
+            event.destructed = true;
+            event.prepare = undefined;
+            if (this.debugListeners)
+                this.debugListeners.forEach((listener) => listener(name.toString(), 'destructed', undefined));
+        });
+        return this;
+    }
+    debug(listener) {
+        if (!this.debugListeners)
+            this.debugListeners = new Set([listener]);
+        else
+            this.debugListeners.add(listener);
+    }
+    insertListenerPriority({ name, listener, listenerOptions, priority, }) {
+        if (!this.hasEvent(name))
+            this.throwInvalidEventNameAction(name, priority === 'normal' ? 'add' : 'prepend');
+        const event = this.events[name];
+        if (event.destructed)
+            return;
+        const listenerData = {
+            isOnce: !!listenerOptions?.once,
+            listener,
+            priority,
+        };
+        event.listeners[priority].add(listener);
+        event.listeners.all.set(listener, listenerData);
+        if (this.debugListeners) {
+            this.debugListeners.forEach((debugListener) => debugListener(name.toString(), `${priority === 'prepend' ? 'prepended' : 'added'} listener`, {
+                once: listenerData.isOnce,
+            }));
+        }
+    }
+    prependListener(name, listener, listenerOptions) {
+        this.insertListenerPriority({
+            name,
+            listener,
+            listenerOptions,
+            priority: 'prepend',
+        });
+        return this;
+    }
+    addListener(name, listener, listenerOptions) {
+        this.insertListenerPriority({
+            name,
+            listener,
+            listenerOptions,
+            priority: 'normal',
+        });
+        return this;
+    }
+    *getListenersGenerator(name) {
+        const event = this.events[name];
+        if (!event) {
+            this.throwInvalidEventNameAction(name.toString(), 'get', ', because it does not exist');
+            return;
+        }
+        for (const priority of EVENT_TYPES_PRIORITIES) {
+            for (const listener of event.listeners[priority]) {
+                const listenerData = event.listeners.all.get(listener);
+                if (!listenerData)
+                    continue;
+                yield listenerData;
+            }
+        }
+    }
+    dispatch(...args) {
+        const [name, value, options] = args;
+        if (!this.hasEvent(name))
+            this.throwInvalidEventNameAction(name, 'dispatch');
+        const event = this.events[name];
+        if (event.destructed)
+            return this;
+        if (!event.dispatchable && options?.lockSymbol !== event.lockSymbol)
+            this.throwInvalidEventNameAction(name, 'dispatch', ', wrong lockSymbol provided');
+        const listenerValue = event.prepare ? event.prepare(value) : value;
+        if (this.debugListeners)
+            this.debugListeners.forEach((debugListener) => debugListener(name.toString(), 'dispatched', listenerValue));
+        const listenersData = this.getListenersGenerator(name);
+        const callListener = (listenerData) => {
+            listenerData.listener(listenerValue);
+            if (listenerData.isOnce) {
+                this.removeListener(name, listenerData.listener);
+            }
+        };
+        const callListenerAsync = async (listenerData) => {
+            await listenerData.listener(listenerValue);
+            if (listenerData.isOnce) {
+                this.removeListener(name, listenerData.listener);
+            }
+        };
+        switch (event.runningBehavior) {
+            case 'sync': {
+                let i = 0;
+                event.beforeAllCallback?.({
+                    dispatchValue: value,
+                    listenerValue,
+                    listenerCount: event.listeners.all.size
+                });
+                for (const listenerData of listenersData) {
+                    callListener(listenerData);
+                    i++;
+                }
+                event.afterAllCallback?.({
+                    dispatchValue: value,
+                    listenerCount: i,
+                    listenerValue,
+                });
+                break;
+            }
+            case 'async': {
+                queueMicrotask(() => {
+                    let i = 0;
+                    event.beforeAllCallback?.({
+                        dispatchValue: value,
+                        listenerValue,
+                        listenerCount: event.listeners.all.size
+                    });
+                    for (const listenerData of listenersData) {
+                        callListener(listenerData);
+                        i++;
+                    }
+                    event.afterAllCallback?.({
+                        dispatchValue: value,
+                        listenerCount: i,
+                        listenerValue,
+                    });
+                });
+                break;
+            }
+            case 'async-sequential': {
+                queueMicrotask(async () => {
+                    let i = 0;
+                    await event.beforeAllCallback?.({
+                        dispatchValue: value,
+                        listenerValue,
+                        listenerCount: event.listeners.all.size
+                    });
+                    for (const listenerData of listenersData) {
+                        await callListenerAsync(listenerData);
+                        i++;
+                    }
+                    event.afterAllCallback?.({
+                        dispatchValue: value,
+                        listenerCount: i,
+                        listenerValue,
+                    });
+                });
+                break;
+            }
+            default: {
+                event.runningBehavior;
+                break;
+            }
+        }
+        return this;
+    }
+    removeListener(name, listener) {
+        if (!this.hasEvent(name))
+            this.throwInvalidEventNameAction(name, 'remove', ', because it does not exist');
+        const allListeners = this.events[name].listeners.all;
+        if (this.debugListeners) {
+            const listenerData = allListeners.get(listener);
+            const status = allListeners.delete(listener);
+            if (listenerData && status)
+                this.debugListeners.forEach((debugListener) => debugListener(name.toString(), 'removed listener', {
+                    priority: listenerData.priority,
+                }));
+        }
+        else
+            allListeners.delete(listener);
+        return this;
+    }
+    throwInvalidEventNameAction(name, action, reason = '') {
+        AppError.throw('Invalid', `(${name}) is not a valid listener name to ${action}${reason}`, {
+            stackTraceConstructor: this.throwInvalidEventNameAction,
+            pushOptions: {
+                scope: customEventEmitterErrorScope
+            }
+        });
+    }
+}
+
+const deferredValueErrorScope = [Symbol('@mustib/utils/DeferredValue'), LIBRARY_ERROR_SCOPE];
+/**
+ * A utility class that represents a value that will be available at some point in the future.
+ * It encapsulates a Promise and provides methods to resolve, reject, and reset the Promise.
+ *
+ * @template T The type of the value that the DeferredValue will hold.
+ */
+class DeferredValue {
+    /**
+     * The Promise that this DeferredValue encapsulates.
+     */
+    _promise;
+    /**
+     * The function to resolve the Promise.
+     * @private
+     */
+    _resolve;
+    /**
+     * The function to reject the Promise.
+     * @private
+     */
+    _reject;
+    /**
+     * The current status of the DeferredValue.
+     * - `pending`: The DeferredValue is waiting to be resolved or rejected.
+     * - `resolved`: The DeferredValue has been resolved.
+     * - `rejected`: The DeferredValue has been rejected.
+     *
+     * @private
+     */
+    _status = 'pending';
+    _resolvedValue;
+    get current() {
+        return this._promise;
+    }
+    /**
+     * Gets the resolved value of the DeferredValue.
+     * @returns {T} The resolved value.
+     * @throws {AppError<ErrorTypes>} If the DeferredValue is not yet resolved.
+     */
+    get resolvedValue() {
+        if (!this.isResolved) {
+            AppError.throw('Invalid', 'cannot get resolvedValue, DeferredValue is not resolved yet', {
+                pushOptions: {
+                    scope: deferredValueErrorScope
+                }
+            });
+        }
+        return this._resolvedValue;
+    }
+    /**
+     * Gets whether the DeferredValue is pending.
+     * @returns {boolean} True if the DeferredValue is pending, false otherwise.
+     */
+    get isPending() {
+        return this._status === 'pending';
+    }
+    /**
+     * Gets whether the DeferredValue is resolved.
+     * @returns {boolean} True if the DeferredValue is resolved, false otherwise.
+     */
+    get isResolved() {
+        return this._status === 'resolved';
+    }
+    /**
+     * Gets whether the DeferredValue is rejected.
+     * @returns {boolean} True if the DeferredValue is rejected, false otherwise.
+     */
+    get isRejected() {
+        return this._status === 'rejected';
+    }
+    /**
+     * Gets whether the DeferredValue is fulfilled (resolved or rejected).
+     * @returns {boolean} True if the DeferredValue is fulfilled, false otherwise.
+     */
+    get isFulfilled() {
+        return this.isResolved || this.isRejected;
+    }
+    /**
+     * Creates a new DeferredValue.
+     */
+    constructor() {
+        this._reset();
+    }
+    /**
+     * Resolves the DeferredValue with the given value.
+     * @param {T} v The value to resolve the DeferredValue with.
+     * @returns {void}
+     */
+    resolve(v) {
+        if (this.isFulfilled) {
+            AppError.throw('Invalid', 'cannot resolve, DeferredValue is already fulfilled — call reset() first', {
+                stackTraceConstructor: this.resolve,
+                pushOptions: {
+                    scope: deferredValueErrorScope
+                }
+            });
+        }
+        this._resolvedValue = v;
+        this._status = 'resolved';
+        this._resolve(v);
+    }
+    /**
+     * Rejects the DeferredValue with the given reason.
+     * @param {Error} reason The reason to reject the DeferredValue with.
+     * @returns {void}
+     */
+    reject(reason) {
+        if (this.isFulfilled) {
+            AppError.throw('Invalid', 'cannot reject, DeferredValue is already fulfilled — call reset() first', {
+                stackTraceConstructor: this.reject,
+                pushOptions: {
+                    scope: deferredValueErrorScope
+                }
+            });
+        }
+        this._status = 'rejected';
+        this._resolvedValue = undefined;
+        this._reject(reason);
+    }
+    /**
+     * Aborts the DeferredValue, rejecting it with an AppError if it is still pending.
+     * @returns {void}
+     */
+    abort() {
+        if (this.isPending) {
+            this.reject(new AppError({ stackTraceConstructor: this.abort })
+                .push('Abort', 'DeferredValue was aborted', {
+                scope: deferredValueErrorScope
+            }));
+        }
+        this._reset();
+    }
+    /**
+     * Resets the DeferredValue to its initial state.
+     * @returns {void}
+     */
+    reset() {
+        if (this.isPending) {
+            AppError.throw('Invalid', 'cannot reset, DeferredValue is already pending — call abort() instead', {
+                stackTraceConstructor: this.reset,
+                pushOptions: {
+                    scope: deferredValueErrorScope
+                }
+            });
+        }
+        this._reset();
+    }
+    /**
+     * Resets the DeferredValue to its initial state.
+     * @private
+     */
+    _reset() {
+        this._status = 'pending';
+        this._resolvedValue = undefined;
+        this._promise = new Promise((res, rej) => {
+            this._resolve = res;
+            this._reject = rej;
+        });
+    }
+}
+
+/**
+ * Creates a debounced version of the provided function that delays its execution until after
+ * a specified number of milliseconds have elapsed since the last time it was invoked.
+ *
+ * @param func - The function to debounce.
+ * @param ms - The number of milliseconds to delay; defaults to 100ms.
+ * @returns A debounced version of the input function.
+ */
+function debounce(func, ms = 100) {
+    let timeoutId;
+    return function debounced(...args) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => func(...args), ms);
+    };
+}
+
+/**
+ * Returns a promise that resolves after a specified number of milliseconds.
+ *
+ * @param milliseconds - The number of milliseconds to wait before resolving the promise. Defaults to 0.
+ * @returns A promise that resolves after the specified delay.
+ */
+function wait(milliseconds = 0) {
+    return new Promise(r => { setTimeout(r, milliseconds); });
+}
+
+/**
+ * Creates a throttled version of the given function that, when invoked repeatedly,
+ * will only call the original function at most once every `ms` milliseconds.
+ *
+ * @param func - The function to throttle.
+ * @param ms - The number of milliseconds to throttle invocations to. Defaults to 100ms.
+ * @returns A throttled version of the input function.
+ */
+function throttle(func, ms = 100) {
+    let isThrottled = false;
+    return function throttled(...args) {
+        if (isThrottled)
+            return;
+        isThrottled = true;
+        func(...args);
+        setTimeout(() => { isThrottled = false; }, ms);
+    };
+}
+
+/**
+ * Parses a string as JSON and returns the parsed value. If the string cannot be parsed as JSON,
+ * it returns undefined.
+ *
+ * @param {string} value - The string to parse as JSON.
+ * @return {T | undefined} - The parsed JSON value or undefined (since undefined is not a valid JSON).
+ */
+function parseJson(value) {
+    try {
+        return JSON.parse(value);
+    }
+    catch (error) {
+        return undefined;
+    }
+}
+
+export { AppError as A, CustomEventEmitter as C, DeferredValue as D, LIBRARY_ERROR_SCOPE as L, debounce as d, parseJson as p, throttle as t, wait as w };

package/components/mu-element.d.ts

@@ -26,7 +26,9 @@ type Elements = [
     'mu-icon',
     'mu-sortable',
     'mu-sortable-item',
-    'mu-sortable-trigger'
+    'mu-sortable-trigger',
+    'mu-toast',
+    'mu-toast-item'
 ];
 declare abstract class MuElement extends LitElement {
     #private;

package/components/mu-element.js

@@ -1,3 +1,4 @@
-export { M as MuElement } from '../mu-element-CEvBHYiI.js';
+export { M as MuElement } from '../mu-element-yEZ17QUl.js';
 import 'lit';
 import 'lit/decorators.js';
+import '../common-BBjg-zl9.js';

package/components/mu-icon.d.ts

@@ -17,6 +17,10 @@ declare class MuIcon extends MuElement {
         closeLine: any;
         noImage: any;
         dragVertical: any;
+        checkMark: any;
+        warning: any;
+        error: any;
+        info: any;
     };
     name?: keyof typeof MuIcon.icons;
     protected firstUpdated(_changedProperties: PropertyValues): void;

package/components/mu-icon.js

@@ -1,6 +1,7 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-yEZ17QUl.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
+import '../common-BBjg-zl9.js';
 
 class MuIcon extends MuElement {
     constructor() {
@@ -64,6 +65,18 @@ MuIcon.icons = {
     dragVertical: html `
       <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="var(--icon-fill)" stroke-width="3"><circle cx="8" cy="4" r="1"/><circle cx="16" cy="4" r="1"/><circle cx="8" cy="12" r="1"/><circle cx="16" cy="12" r="1"/><circle cx="8" cy="20" r="1"/><circle cx="16" cy="20" r="1"/></svg>
     `,
+    checkMark: html `
+      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 122.877 101.052" enable-background="new 0 0 122.877 101.052" xml:space="preserve"><g><path d="M4.43,63.63c-2.869-2.755-4.352-6.42-4.427-10.11c-0.074-3.689,1.261-7.412,4.015-10.281 c2.752-2.867,6.417-4.351,10.106-4.425c3.691-0.076,7.412,1.255,10.283,4.012l24.787,23.851L98.543,3.989l1.768,1.349l-1.77-1.355 c0.141-0.183,0.301-0.339,0.479-0.466c2.936-2.543,6.621-3.691,10.223-3.495V0.018l0.176,0.016c3.623,0.24,7.162,1.85,9.775,4.766 c2.658,2.965,3.863,6.731,3.662,10.412h0.004l-0.016,0.176c-0.236,3.558-1.791,7.035-4.609,9.632l-59.224,72.09l0.004,0.004 c-0.111,0.141-0.236,0.262-0.372,0.368c-2.773,2.435-6.275,3.629-9.757,3.569c-3.511-0.061-7.015-1.396-9.741-4.016L4.43,63.63 L4.43,63.63z"/></g></svg>
+    `,
+    warning: html `
+      <svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 463.43"><path d="M189.46 44.02c34.26-58.66 99.16-58.77 133.24.12l.97 1.81 175.27 304.4c33.71 56.4-1.2 113.76-66.17 112.96v.12H73.53c-.9 0-1.78-.04-2.66-.11-58.34-.79-86.64-54.22-61.9-106.84.39-.85.82-1.67 1.28-2.46l-.04-.03 179.3-309.94-.05-.03zm50.32 302.4c4.26-4.13 9.35-6.19 14.45-6.56 3.4-.24 6.8.29 9.94 1.48 3.13 1.19 6.01 3.03 8.39 5.41 6.92 6.91 8.72 17.38 4.64 26.16-2.69 5.8-7.08 9.7-12.11 11.78-3.03 1.27-6.3 1.84-9.56 1.76-3.27-.08-6.49-.82-9.41-2.18-5.02-2.33-9.3-6.43-11.7-12.2-2.65-6.36-2.27-12.96.63-19.15 1.15-2.46 2.75-4.81 4.73-6.5zm33.86-47.07c-.8 19.91-34.51 19.93-35.28-.01-3.41-34.1-12.13-110.53-11.85-142.58.28-9.87 8.47-15.72 18.94-17.95 3.23-.69 6.78-1.03 10.35-1.02 3.6.01 7.16.36 10.39 1.05 10.82 2.3 19.31 8.39 19.31 18.45l-.05 1-11.81 141.06z"/></svg>
+    `,
+    error: html `
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.45 2.15C14.992 4.05652 17.5866 5 20.25 5C20.6642 5 21 5.33579 21 5.75V11C21 16.0012 18.0424 19.6757 12.2749 21.9478C12.0982 22.0174 11.9018 22.0174 11.7251 21.9478C5.95756 19.6757 3 16.0012 3 11V5.75C3 5.33579 3.33579 5 3.75 5C6.41341 5 9.00797 4.05652 11.55 2.15C11.8167 1.95 12.1833 1.95 12.45 2.15ZM12 16C11.5858 16 11.25 16.3358 11.25 16.75C11.25 17.1642 11.5858 17.5 12 17.5C12.4142 17.5 12.75 17.1642 12.75 16.75C12.75 16.3358 12.4142 16 12 16ZM12 6.98211C11.6203 6.98211 11.3065 7.26427 11.2568 7.63034L11.25 7.73211V14.2321L11.2568 14.3339C11.3065 14.7 11.6203 14.9821 12 14.9821C12.3797 14.9821 12.6935 14.7 12.7432 14.3339L12.75 14.2321V7.73211L12.7432 7.63034C12.6935 7.26427 12.3797 6.98211 12 6.98211Z"></path></svg>
+    `,
+    info: html `
+      <svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512"><path d="M256 0c70.689 0 134.692 28.656 181.02 74.98C483.344 121.308 512 185.311 512 256c0 70.689-28.656 134.692-74.98 181.016C390.692 483.344 326.689 512 256 512c-70.689 0-134.692-28.656-181.016-74.984C28.656 390.692 0 326.689 0 256S28.656 121.308 74.984 74.98C121.308 28.656 185.311 0 256 0zm-8.393 139.828c5.039-12.2 17.404-20.536 30.609-20.536 18.611 0 32.717 15.259 32.717 33.478 0 4.53-.796 8.776-2.407 12.704-6.902 16.91-26.09 25.405-43.082 18.302-16.871-7.122-24.821-27.096-17.837-43.948zm12.103 206.605c-.833 2.984-2.256 7.946-.674 10.725 4.22 7.45 16.459-6.058 19.036-8.97 8.307-9.414 15.461-20.475 21.905-31.229a1.506 1.506 0 012.061-.523l13.44 9.972c.641.473.789 1.363.367 2.03-6.18 10.743-12.426 20.124-18.744 28.129-10.452 13.234-23.595 25.852-39.583 32.065-9.918 3.842-22.817 5.363-34.144 2.829-10.506-2.353-19.66-8.206-23.822-18.946-5.464-14.092-.97-30.105 3.33-43.887l21.689-65.697c2.962-10.647 10.044-29.661-8.25-29.661H197.36c-1.56 0-1.596-1.402-1.297-2.484l4.858-17.685a1.5 1.5 0 011.463-1.103l96.89-3.038c1.409-.05 1.701 1.19 1.374 2.286L259.71 346.433z"/></svg>
+    `,
 };
 __decorate([
     property()

package/components/mu-range-fill.js

@@ -1,6 +1,7 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-yEZ17QUl.js';
 import { css, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import '../common-BBjg-zl9.js';
 
 class MuRangeFill extends MuElement {
     constructor() {

package/components/mu-range-thumb-value.js

@@ -1,6 +1,7 @@
-import { M as MuElement, _ as __decorate } from '../mu-element-CEvBHYiI.js';
+import { M as MuElement, _ as __decorate } from '../mu-element-yEZ17QUl.js';
 import { css, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import '../common-BBjg-zl9.js';
 
 class MuRangeThumbValue extends MuElement {
     constructor() {