@mustib/web-components 0.0.0-alpha.5 → 0.0.0-alpha.7

package/mu-toast-DfNHcc7U.d.ts

@@ -0,0 +1,276 @@
+import { TemplateResult, PropertyValues, CSSResultGroup } from 'lit';
+import { MuElement, MuElementComponent } from './components/mu-element.js';
+import { MuIcon } from './components/mu-icon.js';
+import { EventData, CustomEventEmitter } from '@mustib/utils';
+
+type LockedEvent<T = undefined> = EventData<T, T, false, false>;
+
+type AnimationKeyframes = Keyframe[] | PropertyIndexedKeyframes;
+
+type ToastData = {
+  /**
+   * The message to display in the toast
+   */
+  message: string | TemplateResult;
+
+  spinner?: boolean | TemplateResult;
+
+  direction?: 'ltr' | 'rtl';
+
+  /**
+   * The label of the toast
+   */
+  label?: undefined | string | TemplateResult;
+
+  role?: 'alert' | 'status';
+
+  leaveAnimationDuration?: number;
+
+  enterAnimationDuration?: number;
+
+  priority?: 'immediate' | 'normal' | 'important';
+
+  enterAnimationKeyframes?: AnimationKeyframes;
+
+  progressAnimationKeyframes?: AnimationKeyframes;
+
+  leaveAnimationKeyframes?: AnimationKeyframes;
+
+  interactingBehavior?: 'reset-progress' | 'pause-progress' | 'nothing';
+
+  /**
+   * Remove the toast if it is not rendered within the specified time (in ms).
+   * If the toast fails to render in this time, it will be discarded.
+   * If not set, the toast will wait indefinitely to render if queued.
+   */
+  maxRenderWaitTime?: undefined | number;
+
+  /**
+   * The action of the toast
+   */
+  action?:
+    | undefined
+    | ((toast: Toast) => TemplateResult)
+    | {
+        label: string;
+        onClick: (toast: Toast) => void;
+      };
+
+  /**
+   * The duration of the toast
+   */
+  duration?: undefined | number;
+
+  /**
+   * The hue of the toast color
+   */
+  colorHue?: undefined | number;
+
+  closeBtn?: boolean | TemplateResult;
+
+  /**
+   * The name of the icon to display in the toast. This is the name of the icon from the {@link MuIcon} component
+   * @see {@link MuIcon.icons} or a custom lit {@link TemplateResult}
+   */
+  labelIcon?: undefined | keyof typeof MuIcon.icons | TemplateResult;
+};
+
+type Events$3 = {
+    'state.request.remove.toast': LockedEvent<{
+        toast: Toast$1;
+    }>;
+};
+declare class ToastController {
+    private portal;
+    private toastsIdMap;
+    private queuedToastsQueue;
+    toastsQueue: Toast$1[];
+    private _maxVisibleToastsCount;
+    private _stackToasts;
+    interactingBehavior: Toast$1['interactingBehavior'];
+    colorHue: {
+        success: number;
+        error: number;
+        warning: number;
+        info: number;
+    };
+    defaultDuration: number;
+    defaultLeaveAnimationDuration: number;
+    defaultEnterAnimationDuration: number;
+    defaultDirection: "ltr" | "rtl";
+    get maxVisibleToastsCount(): number;
+    set maxVisibleToastsCount(value: number);
+    get position(): MuToast["position"];
+    set position(value: MuToast['position']);
+    set stackToasts(value: boolean);
+    /**
+     * Indicates if toast notifications should stack atop each other,
+     * such that only the latest is fully visible while older toasts
+     * are partially hidden beneath it. This enhances focus and reduces clutter.
+     */
+    get stackToasts(): boolean;
+    constructor(portal: MuToast);
+    gracefulRemoveVisible(): void;
+    gracefulRemoveAll(): void;
+    /**
+     * Re-parents the toast portal to the specified node.
+     *
+     * Useful for ensuring toasts appear correctly when top-layer elements like fullscreen containers
+     * or dialogs are active. The specified node should be a valid container element (not void elements like <img />).
+     *
+     * @param node - The new parent node for the toast portal.
+     */
+    reParent(node?: Node): void;
+    /**
+     * Makes the toast portal a popover,
+     * ensuring that toasts appear above all other elements
+     * (e.g., dialogs, fullscreen content) in the top-layer.
+     * This is useful for proper overlay stacking and visibility.
+     */
+    popover(): void;
+    success(message: string): Toast$1;
+    error(message: string): Toast$1;
+    warning(message: string): Toast$1;
+    info(message: string): Toast$1;
+    create(toastData: ToastData | string): Toast$1;
+    private rolloverQueuedToasts;
+    emitter: CustomEventEmitter<Events$3>;
+}
+
+type Events$2 = {
+    'state.toast-item.first.rendered': LockedEvent<{
+        element: MuToastItem;
+    }>;
+    'state.await.rendering': LockedEvent;
+    'internal.status.enter': LockedEvent;
+    'internal.status.progress': LockedEvent;
+    'internal.status.leave': LockedEvent;
+};
+declare class Toast$1 {
+    private controller;
+    private internalToast;
+    get id(): string;
+    get action(): ((toast: Toast$1) => TemplateResult) | {
+        label: string;
+        onClick: (toast: Toast$1) => void;
+    } | undefined;
+    get message(): string | TemplateResult;
+    get label(): string | TemplateResult | undefined;
+    get role(): "alert" | "status";
+    get duration(): number;
+    get colorHue(): number;
+    get spinner(): boolean | TemplateResult;
+    get labelIcon(): keyof typeof MuIcon.icons | TemplateResult | undefined;
+    get closeBtn(): boolean | TemplateResult;
+    get leaveAnimationDuration(): number;
+    get enterAnimationDuration(): number;
+    get direction(): "rtl" | "ltr";
+    get interactingBehavior(): "reset-progress" | "pause-progress" | "nothing";
+    get status(): "queued" | "await-rendering" | "enter" | "progress" | "leave";
+    get priority(): "immediate" | "normal" | "important";
+    set colorHue(value: number);
+    set spinner(value: boolean | TemplateResult);
+    set labelIcon(value: keyof typeof MuIcon.icons | TemplateResult | undefined);
+    set message(value: string | TemplateResult);
+    set label(value: string | TemplateResult | undefined);
+    set action(value: ((toast: Toast$1) => TemplateResult) | {
+        label: string;
+        onClick: (toast: Toast$1) => void;
+    } | undefined);
+    set closeBtn(value: boolean | TemplateResult);
+    set duration(value: number);
+    constructor({ toastData, controller, }: {
+        toastData: ToastData;
+        controller: ToastController;
+    });
+    private _generateInternalToastData;
+    gracefulRemove(): Promise<void>;
+    remove(): void;
+    pauseProgress(): Promise<void>;
+    resumeProgress(): Promise<void>;
+    resetProgress(): Promise<void>;
+    emitter: CustomEventEmitter<Events$2>;
+}
+
+type MuToastItemComponent = {
+    attributes: Attributes$1;
+    events: Events$1;
+};
+type Events$1 = object;
+type Attributes$1 = MuElementComponent['attributes'];
+declare class MuToastItem extends MuElement {
+    static styles: any[];
+    eventActionData: undefined;
+    _addEventActionAttributes: undefined;
+    toast: Toast$1;
+    progressElement?: HTMLElement;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    private pausedByEvents;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-toast-item': MuToastItem;
+    }
+    interface GlobalEventHandlersEventMap extends Events$1 {
+    }
+}
+
+type MuToastComponent = {
+    attributes: Attributes;
+    events: Events;
+};
+type Events = object;
+type Attributes = MuElementComponent['attributes'] & {
+    /**
+     * The position of the toast
+     */
+    position?: 'top-center' | 'bottom-center' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    /**
+     * Automatically re-parent the toast container to top-layer elements such as
+     * open `<dialog>`s or the fullscreen element. This is useful when the toast
+     * must appear above modals, dialogs or fullscreen content without requiring
+     * manual re-parenting.
+     *
+     * ⚠️ **Performance note:** enabling this feature causes the component to
+     * observe the entire document for attribute and child‑list mutations. It
+     * tracks changes to determine when dialogs are opened or closed, which can
+     * be expensive in applications with frequent DOM modifications. Use only when
+     * necessary and test performance impact in your target environment.
+     */
+    'auto-re-parent'?: boolean;
+    /**
+     * Indicates if the toast is empty
+     * must not be set directly, it is managed internally
+     */
+    empty?: boolean;
+};
+declare class MuToast extends MuElement {
+    static styles?: CSSResultGroup | undefined;
+    protected _addEventActionAttributes: undefined;
+    eventActionData: undefined;
+    controller: ToastController;
+    position: Exclude<Attributes['position'], undefined>;
+    autoReParent: boolean;
+    private setIsEmpty;
+    private _topLayerElements;
+    private _fullscreenElement;
+    private autoReParentObserver;
+    private addTopLayerElement;
+    private removeTopLayerElement;
+    fullscreenReParentHandler: () => void;
+    protected willUpdate(_changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mu-toast': MuToast;
+    }
+    interface GlobalEventHandlersEventMap extends Events {
+    }
+}
+
+export { Toast$1 as T, MuToast as b, MuToastItem as c, ToastController as d };
+export type { AnimationKeyframes as A, LockedEvent as L, MuToastComponent as M, MuToastItemComponent as a, ToastData as e };

package/package.json

@@ -3,9 +3,12 @@
   "type": "module",
   "description": "A customizable web-components library with lit",
   "private": false,
-  "version": "0.0.0-alpha.5",
+  "version": "0.0.0-alpha.7",
+  "lint-staged": {
+    "*.{js,ts,astro}": "biome check --write"
+  },
   "dependencies": {
-    "@mustib/utils": "2.8.1"
+    "@mustib/utils": "2.9.0"
   },
   "peerDependencies": {
     "lit": "^3.3.1"
@@ -18,6 +21,8 @@
     "@tailwindcss/vite": "^4.1.12",
     "@types/node": "^24.9.2",
     "astro": "^5.12.8",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
     "rollup": "^4.52.5",
     "rollup-plugin-dts": "^6.2.3",
     "tailwindcss": "^4.1.12",

package/utils/Toast.d.ts

@@ -0,0 +1,6 @@
+import '@mustib/utils';
+import 'lit';
+import '../components/mu-icon.js';
+export { T as Toast } from '../mu-toast-DfNHcc7U.js';
+import '../components/mu-element.js';
+import '@mustib/utils/browser';

package/utils/Toast.js

@@ -0,0 +1,321 @@
+import { C as CustomEventEmitter, D as DeferredValue } from '../common-BBjg-zl9.js';
+import { T as TOAST_LOCK_SYMBOL } from '../constants-DPnKJ57t.js';
+
+const internalLockKey = Symbol('internal-toast');
+class Toast {
+    get id() {
+        return this.internalToast.id;
+    }
+    get action() {
+        return this.internalToast.action;
+    }
+    get message() {
+        return this.internalToast.message;
+    }
+    get label() {
+        return this.internalToast.label;
+    }
+    get role() {
+        return this.internalToast.role;
+    }
+    get duration() {
+        return this.internalToast.duration;
+    }
+    get colorHue() {
+        return this.internalToast.colorHue;
+    }
+    get spinner() {
+        return this.internalToast.spinner;
+    }
+    get labelIcon() {
+        return this.internalToast.labelIcon;
+    }
+    get closeBtn() {
+        return this.internalToast.closeBtn;
+    }
+    get leaveAnimationDuration() {
+        return this.internalToast.leaveAnimationDuration;
+    }
+    get enterAnimationDuration() {
+        return this.internalToast.enterAnimationDuration;
+    }
+    get direction() {
+        return this.internalToast.direction;
+    }
+    get interactingBehavior() {
+        return this.internalToast.interactingBehavior;
+    }
+    get status() {
+        return this.internalToast.status;
+    }
+    get priority() {
+        return this.internalToast.priority;
+    }
+    set colorHue(value) {
+        this.internalToast.colorHue = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set spinner(value) {
+        this.internalToast.spinner = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set labelIcon(value) {
+        this.internalToast.labelIcon = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set message(value) {
+        this.internalToast.message = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set label(value) {
+        this.internalToast.label = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set action(value) {
+        this.internalToast.action = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set closeBtn(value) {
+        this.internalToast.closeBtn = value;
+        if (this.internalToast.host.isResolved)
+            this.internalToast.host.resolvedValue.requestUpdate();
+    }
+    set duration(value) {
+        this.internalToast.duration = value;
+        if (this.internalToast.progressAnimation.isResolved) {
+            const currTime = this.internalToast.progressAnimation.resolvedValue.currentTime || 0;
+            this.internalToast.progressAnimation.resolvedValue.effect?.updateTiming({
+                duration: +currTime + value,
+            });
+        }
+    }
+    constructor({ toastData, controller, }) {
+        this.emitter = new CustomEventEmitter({
+            'state.await.rendering': {
+                runningBehavior: 'async-sequential',
+                dispatchable: false,
+                lockSymbol: TOAST_LOCK_SYMBOL,
+                beforeAll: () => {
+                    if (!this.internalToast.host.isPending)
+                        return;
+                    this.internalToast.status = 'await-rendering';
+                },
+            },
+            'state.toast-item.first.rendered': {
+                runningBehavior: 'async-sequential',
+                dispatchable: false,
+                lockSymbol: TOAST_LOCK_SYMBOL,
+                beforeAll: (data) => {
+                    if (!this.internalToast.host.isPending)
+                        return;
+                    this.internalToast.host.resolve(data.listenerValue.element);
+                    clearTimeout(this.internalToast.maxRenderWaitTimeTimeoutId);
+                    this.emitter.dispatch('internal.status.enter', undefined, {
+                        lockSymbol: internalLockKey,
+                    });
+                },
+            },
+            'internal.status.enter': {
+                runningBehavior: 'async-sequential',
+                dispatchable: false,
+                lockSymbol: internalLockKey,
+                beforeAll: () => {
+                    if (this.internalToast.status !== 'await-rendering')
+                        return;
+                    let animation;
+                    if (this.internalToast.enterAnimation.isPending) {
+                        animation = new Animation(new KeyframeEffect(this.internalToast.host.resolvedValue, this.internalToast.enterAnimationKeyframes, {
+                            duration: this.internalToast.enterAnimationDuration,
+                            easing: 'ease-in-out',
+                        }));
+                        this.internalToast.enterAnimation.resolve(animation);
+                    }
+                    else {
+                        animation = this.internalToast.enterAnimation.resolvedValue;
+                    }
+                    animation.play();
+                    this.internalToast.status = 'enter';
+                    animation.onfinish = () => {
+                        this.emitter.dispatch('internal.status.progress', undefined, {
+                            lockSymbol: internalLockKey,
+                        });
+                    };
+                },
+            },
+            'internal.status.progress': {
+                runningBehavior: 'async-sequential',
+                dispatchable: false,
+                lockSymbol: internalLockKey,
+                beforeAll: () => {
+                    if (this.internalToast.status !== 'enter')
+                        return;
+                    let animation;
+                    if (this.internalToast.progressAnimation.isPending) {
+                        animation = new Animation(new KeyframeEffect(this.internalToast.host.resolvedValue.progressElement || null, this.internalToast.progressAnimationKeyframes, {
+                            duration: this.internalToast.duration,
+                            easing: 'linear',
+                        }));
+                        this.internalToast.progressAnimation.resolve(animation);
+                    }
+                    else {
+                        animation = this.internalToast.progressAnimation.resolvedValue;
+                    }
+                    animation.play();
+                    this.internalToast.status = 'progress';
+                    animation.onfinish = () => {
+                        this.emitter.dispatch('internal.status.leave', undefined, {
+                            lockSymbol: internalLockKey,
+                        });
+                    };
+                },
+            },
+            'internal.status.leave': {
+                runningBehavior: 'async-sequential',
+                dispatchable: false,
+                lockSymbol: internalLockKey,
+                beforeAll: () => {
+                    if (this.internalToast.status !== 'progress')
+                        return;
+                    let animation;
+                    if (this.internalToast.leaveAnimation.isPending) {
+                        animation = new Animation(new KeyframeEffect(this.internalToast.host.resolvedValue, this.internalToast.leaveAnimationKeyframes, {
+                            duration: this.internalToast.leaveAnimationDuration,
+                            easing: 'ease-in-out',
+                        }));
+                        this.internalToast.leaveAnimation.resolve(animation);
+                    }
+                    else {
+                        animation = this.internalToast.leaveAnimation.resolvedValue;
+                    }
+                    animation.play();
+                    this.internalToast.status = 'leave';
+                    animation.onfinish = () => {
+                        this.remove();
+                    };
+                },
+            },
+        });
+        this.controller = controller;
+        this.internalToast = this._generateInternalToastData(toastData);
+    }
+    _generateInternalToastData(toastData) {
+        const id = crypto.randomUUID();
+        const duration = typeof toastData.duration === 'number'
+            ? toastData.duration
+            : this.controller.defaultDuration;
+        const leaveAnimationDuration = typeof toastData.leaveAnimationDuration === 'number'
+            ? toastData.leaveAnimationDuration
+            : this.controller.defaultLeaveAnimationDuration;
+        const enterAnimationDuration = typeof toastData.enterAnimationDuration === 'number'
+            ? toastData.enterAnimationDuration
+            : this.controller.defaultEnterAnimationDuration;
+        const direction = toastData.direction ?? this.controller.defaultDirection;
+        const transformOrigin = direction === 'rtl' ? 'right' : 'left';
+        const internalToast = {
+            id,
+            action: toastData.action,
+            closeBtn: toastData.closeBtn ?? true,
+            colorHue: typeof toastData.colorHue === 'number'
+                ? toastData.colorHue
+                : this.controller.colorHue.info,
+            duration,
+            enterAnimationDuration,
+            direction,
+            priority: toastData.priority ?? 'normal',
+            host: new DeferredValue(),
+            enterAnimation: new DeferredValue(),
+            progressAnimation: new DeferredValue(),
+            leaveAnimation: new DeferredValue(),
+            enterAnimationKeyframes: toastData.enterAnimationKeyframes ?? [
+                { scale: '0' },
+                { scale: '1' },
+            ],
+            progressAnimationKeyframes: toastData.progressAnimationKeyframes ?? [
+                { scale: '0 1', visibility: 'visible', transformOrigin },
+                { scale: '1 1', visibility: 'visible', transformOrigin },
+            ],
+            leaveAnimationKeyframes: toastData.leaveAnimationKeyframes ?? [
+                { scale: '1' },
+                { scale: '0' },
+            ],
+            interactingBehavior: toastData.interactingBehavior || this.controller.interactingBehavior,
+            leaveAnimationDuration,
+            label: toastData.label,
+            labelIcon: toastData.labelIcon,
+            maxRenderWaitTimeTimeoutId: undefined,
+            message: toastData.message,
+            role: toastData.role || 'status',
+            spinner: toastData.spinner || false,
+            status: 'queued',
+        };
+        if (typeof toastData.maxRenderWaitTime === 'number' &&
+            toastData.maxRenderWaitTime > 0 &&
+            toastData.maxRenderWaitTime !== Infinity) {
+            internalToast.maxRenderWaitTimeTimeoutId = setTimeout(() => {
+                this.remove();
+            }, toastData.maxRenderWaitTime);
+        }
+        return internalToast;
+    }
+    async gracefulRemove() {
+        switch (this.internalToast.status) {
+            case 'queued':
+            case 'await-rendering':
+                this.remove();
+                break;
+            case 'enter':
+                {
+                    const enterAnimation = await this.internalToast.enterAnimation.current;
+                    enterAnimation.finish();
+                    await enterAnimation.finished;
+                    const progressAnimation = await this.internalToast.progressAnimation.current;
+                    progressAnimation.finish();
+                }
+                break;
+            case 'progress':
+                {
+                    const progressAnimation = await this.internalToast.progressAnimation.current;
+                    progressAnimation.finish();
+                }
+                break;
+            case 'leave':
+                break;
+            default:
+                this.internalToast.status;
+                break;
+        }
+    }
+    remove() {
+        this.controller.emitter.dispatch('state.request.remove.toast', {
+            toast: this,
+        }, {
+            lockSymbol: TOAST_LOCK_SYMBOL,
+        });
+    }
+    async pauseProgress() {
+        if (this.internalToast.status === 'leave')
+            return;
+        const animation = await this.internalToast.progressAnimation.current;
+        animation.pause();
+    }
+    async resumeProgress() {
+        if (this.internalToast.status === 'leave')
+            return;
+        const animation = await this.internalToast.progressAnimation.current;
+        animation.play();
+    }
+    async resetProgress() {
+        if (this.internalToast.status === 'leave')
+            return;
+        const animation = await this.internalToast.progressAnimation.current;
+        animation.currentTime = 0;
+    }
+}
+
+export { Toast };

package/utils/ToastController.d.ts

@@ -0,0 +1,6 @@
+import '@mustib/utils';
+export { d as ToastController } from '../mu-toast-DfNHcc7U.js';
+import 'lit';
+import '../components/mu-element.js';
+import '@mustib/utils/browser';
+import '../components/mu-icon.js';