@marianmeres/stuic 2.3.2 → 2.5.0

package/dist/actions/popover/popover.svelte.js

@@ -0,0 +1,449 @@
+import { mount, unmount } from "svelte";
+import { twMerge } from "../../utils/tw-merge.js";
+import PopoverContent from "./PopoverContent.svelte";
+//
+import "./index.css";
+// Registry of open popover hide functions for closeOthers feature
+const openPopovers = new Set();
+const SHOW_DELAY = 100;
+const HIDE_DELAY = 200;
+const TRANSITION = 200;
+/**
+ * Checks if the browser supports CSS Anchor Positioning for popovers.
+ *
+ * Tests for support of `anchor-name`, `position-area`, `position-try`,
+ * and `position-try-fallbacks` CSS properties.
+ *
+ * @returns `true` if CSS Anchor Positioning is fully supported
+ *
+ * @example
+ * ```ts
+ * if (isPopoverSupported()) {
+ *   // Use native anchor positioning
+ * } else {
+ *   // Fall back to centered modal
+ * }
+ * ```
+ */
+export function isPopoverSupported() {
+    return (CSS.supports("anchor-name", "--anchor") &&
+        CSS.supports("position-area", "top") &&
+        CSS.supports("position-try", "top") &&
+        CSS.supports("position-try-fallbacks", "top"));
+}
+const POSITION_MAP = {
+    top: "top",
+    "top-left": "top left",
+    "top-right": "top right",
+    "top-span-left": "top span-left",
+    "top-span-right": "top span-right",
+    bottom: "bottom",
+    "bottom-left": "bottom left",
+    "bottom-right": "bottom right",
+    "bottom-span-left": "bottom span-left",
+    "bottom-span-right": "bottom span-right",
+    left: "left",
+    right: "right",
+};
+const _classPopover = `
+	bg-popover-bg dark:bg-popover-bg-dark text-popover-text dark:text-popover-text-dark
+	shadow-lg rounded-md
+	border border-popover-border dark:border-popover-border-dark
+	z-50
+`;
+const _classBackdrop = `
+	fixed inset-0 bg-black/25
+	z-40
+`;
+/**
+ * Checks if content is simple (string/html) vs complex (component/snippet).
+ */
+function isSimpleContent(content) {
+    if (!content)
+        return true;
+    if (typeof content === "string")
+        return true;
+    if (typeof content === "object") {
+        if ("text" in content || "html" in content)
+            return true;
+    }
+    return false;
+}
+/**
+ * Extracts string content for simple THC types.
+ */
+function getStringContent(content) {
+    if (!content)
+        return "";
+    if (typeof content === "string")
+        return content;
+    if (typeof content === "object") {
+        if ("html" in content)
+            return content.html;
+        if ("text" in content)
+            return content.text;
+    }
+    return "";
+}
+/**
+ * A Svelte action that displays a popover anchored to an element using CSS Anchor Positioning.
+ *
+ * The popover appears on click or hover (configurable) and supports multiple positions
+ * with automatic fallback. When CSS Anchor Positioning is not supported, falls back
+ * to a centered modal overlay.
+ *
+ * @param anchorEl - The element to attach the popover to
+ * @param fn - Function returning popover options (reactive)
+ *
+ * @example
+ * ```svelte
+ * <!-- Click trigger (default) -->
+ * <button use:popover={() => ({ content: "Hello World" })}>
+ *   Open Popover
+ * </button>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <!-- Hover trigger -->
+ * <button use:popover={() => ({
+ *   content: "Hover content",
+ *   trigger: "hover",
+ *   position: "top"
+ * })}>
+ *   Hover Me
+ * </button>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <!-- With component content -->
+ * <button use:popover={() => ({
+ *   content: { component: MyComponent, props: { foo: "bar" } }
+ * })}>
+ *   With Component
+ * </button>
+ * ```
+ *
+ * @remarks
+ * - Falls back to centered modal when CSS Anchor Positioning is not supported
+ * - Closes on click outside (for click trigger) and Escape key by default
+ * - For hover trigger, popover persists when hovering over it
+ * - Automatically cleans up DOM elements on unmount
+ */
+export function popover(anchorEl, fn) {
+    const isSupported = isPopoverSupported();
+    // State
+    let popoverEl = null;
+    let backdropEl = null;
+    let wrapperEl = null;
+    let mountedComponent = null;
+    let showTimer = null;
+    let hideTimer = null;
+    let isVisible = false;
+    let do_debug = false;
+    // Unique identifiers
+    const rnd = Math.random().toString(36).slice(2);
+    const id = `popover-${rnd}`;
+    const anchorName = `--anchor-popover-${rnd}`;
+    // Current options (updated reactively)
+    let currentOptions = {};
+    // Initialize anchor element - anchor-name is always set
+    // In forceFallback mode, the CSS is just ignored
+    anchorEl.style.cssText += `anchor-name: ${anchorName};`;
+    anchorEl.setAttribute("aria-haspopup", "dialog");
+    anchorEl.setAttribute("aria-expanded", "false");
+    anchorEl.setAttribute("aria-controls", id);
+    // Debug helper
+    const debug = (...args) => {
+        if (do_debug)
+            console.debug("[popover]", rnd, ...args);
+    };
+    // Timer helpers
+    function clearTimers() {
+        if (showTimer)
+            clearTimeout(showTimer);
+        if (hideTimer)
+            clearTimeout(hideTimer);
+        showTimer = null;
+        hideTimer = null;
+    }
+    function cancelHide() {
+        if (hideTimer)
+            clearTimeout(hideTimer);
+        hideTimer = null;
+    }
+    // Event handlers
+    function onEscape(e) {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+            hide();
+        }
+    }
+    function onClickOutside(e) {
+        if (popoverEl &&
+            !popoverEl.contains(e.target) &&
+            !anchorEl.contains(e.target)) {
+            hide();
+        }
+    }
+    function onClickTrigger(e) {
+        e.stopPropagation();
+        if (isVisible) {
+            hide();
+        }
+        else {
+            show();
+        }
+    }
+    // Render content into popover element
+    function renderContent() {
+        if (!popoverEl || !currentOptions.content)
+            return;
+        debug("renderContent()", currentOptions.content);
+        // Cleanup previous mounted component
+        if (mountedComponent) {
+            unmount(mountedComponent);
+            mountedComponent = null;
+        }
+        popoverEl.innerHTML = "";
+        const content = currentOptions.content;
+        if (isSimpleContent(content)) {
+            // Simple string/html content
+            popoverEl.innerHTML = getStringContent(content);
+        }
+        else {
+            // Complex content (component/snippet) - use mount()
+            mountedComponent = mount(PopoverContent, {
+                target: popoverEl,
+                props: { thc: content },
+            });
+        }
+    }
+    // Show popover
+    function show() {
+        debug("show()", { enabled: currentOptions.enabled, content: currentOptions.content });
+        clearTimers();
+        if (!currentOptions.enabled || !currentOptions.content)
+            return;
+        if (isVisible)
+            return;
+        // Close other popovers if requested
+        if (currentOptions.closeOthers) {
+            openPopovers.forEach((hideFn) => {
+                if (hideFn !== hide)
+                    hideFn();
+            });
+        }
+        // Register this popover
+        openPopovers.add(hide);
+        isVisible = true;
+        anchorEl.setAttribute("aria-expanded", "true");
+        const offsetValue = currentOptions.offset || "0.25rem";
+        const useAnchorPositioning = isSupported && !currentOptions.forceFallback;
+        // Create elements
+        if (useAnchorPositioning) {
+            // CSS Anchor Positioning mode
+            popoverEl = document.createElement("div");
+            popoverEl.setAttribute("id", id);
+            popoverEl.setAttribute("role", "dialog");
+            popoverEl.style.cssText = `
+				position: fixed;
+				position-anchor: ${anchorName};
+				position-area: ${POSITION_MAP[currentOptions.position || "bottom"] || "bottom"};
+				transition-duration: ${TRANSITION}ms;
+				margin: ${offsetValue};
+			`;
+            popoverEl.classList.add(...twMerge("stuic-popover", _classPopover, currentOptions.class).split(/\s/));
+            document.body.appendChild(popoverEl);
+        }
+        else {
+            // Fallback centered modal mode
+            if (currentOptions.showBackdrop !== false) {
+                backdropEl = document.createElement("div");
+                backdropEl.classList.add(...twMerge("stuic-popover-backdrop", _classBackdrop).split(/\s/));
+                backdropEl.style.cssText = `transition-duration: ${TRANSITION}ms;`;
+                document.body.appendChild(backdropEl);
+                // Backdrop click closes popover
+                if (currentOptions.closeOnClickOutside !== false) {
+                    backdropEl.addEventListener("click", hide);
+                }
+            }
+            // Create wrapper for centering
+            wrapperEl = document.createElement("div");
+            wrapperEl.classList.add("stuic-popover-wrapper");
+            wrapperEl.style.cssText = `
+				position: fixed;
+				inset: 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				z-index: 50;
+				pointer-events: none;
+			`;
+            // Create popover element
+            popoverEl = document.createElement("div");
+            popoverEl.setAttribute("id", id);
+            popoverEl.setAttribute("role", "dialog");
+            popoverEl.style.cssText = `
+				position: relative;
+				max-width: 90vw;
+				max-height: 90vh;
+				overflow: auto;
+				transition-duration: ${TRANSITION}ms;
+				pointer-events: auto;
+			`;
+            popoverEl.classList.add(...twMerge("stuic-popover-fallback", _classPopover, currentOptions.class).split(/\s/));
+            wrapperEl.appendChild(popoverEl);
+            document.body.appendChild(wrapperEl);
+            // Click on wrapper (outside popover) closes
+            if (currentOptions.closeOnClickOutside !== false) {
+                wrapperEl.addEventListener("click", (e) => {
+                    if (e.target === wrapperEl)
+                        hide();
+                });
+            }
+        }
+        // Render content
+        renderContent();
+        // Transition in
+        popoverEl.classList.add("pop-block");
+        requestAnimationFrame(() => {
+            popoverEl?.classList.add("pop-visible");
+            backdropEl?.classList.add("pop-visible");
+            currentOptions.onShow?.();
+        });
+        // Add event listeners
+        if (currentOptions.closeOnEscape !== false) {
+            document.addEventListener("keydown", onEscape);
+        }
+        // For hover mode, allow hovering over the popover itself
+        if (currentOptions.trigger === "hover" && popoverEl) {
+            popoverEl.addEventListener("mouseenter", cancelHide);
+            popoverEl.addEventListener("mouseleave", scheduleHide);
+        }
+        // For click mode with closeOnClickOutside
+        if (currentOptions.trigger === "click" &&
+            currentOptions.closeOnClickOutside !== false &&
+            useAnchorPositioning) {
+            // Delay adding click listener to avoid immediate close
+            setTimeout(() => {
+                document.addEventListener("click", onClickOutside);
+            }, 0);
+        }
+    }
+    // Hide popover
+    function hide() {
+        debug("hide()");
+        clearTimers();
+        if (!isVisible)
+            return;
+        isVisible = false;
+        // Unregister from open popovers
+        openPopovers.delete(hide);
+        anchorEl.setAttribute("aria-expanded", "false");
+        // Remove event listeners
+        document.removeEventListener("keydown", onEscape);
+        document.removeEventListener("click", onClickOutside);
+        // Transition out
+        popoverEl?.classList.remove("pop-visible");
+        backdropEl?.classList.remove("pop-visible");
+        setTimeout(() => {
+            // Cleanup mounted component
+            if (mountedComponent) {
+                unmount(mountedComponent);
+                mountedComponent = null;
+            }
+            // Remove elements
+            popoverEl?.remove();
+            backdropEl?.remove();
+            wrapperEl?.remove();
+            popoverEl = null;
+            backdropEl = null;
+            wrapperEl = null;
+            currentOptions.onHide?.();
+        }, TRANSITION);
+    }
+    function scheduleShow() {
+        debug("scheduleShow()");
+        clearTimers();
+        const delay = currentOptions.showDelay ?? SHOW_DELAY;
+        showTimer = setTimeout(show, delay);
+    }
+    function scheduleHide() {
+        debug("scheduleHide()");
+        clearTimers();
+        const delay = currentOptions.hideDelay ?? HIDE_DELAY;
+        hideTimer = setTimeout(hide, delay);
+    }
+    // Reactive params effect
+    $effect(() => {
+        const opts = fn?.() || {};
+        currentOptions = {
+            enabled: opts.enabled ?? true,
+            content: opts.content,
+            position: opts.position || "bottom",
+            trigger: opts.trigger || "click",
+            showDelay: opts.showDelay ?? SHOW_DELAY,
+            hideDelay: opts.hideDelay ?? HIDE_DELAY,
+            class: opts.class,
+            offset: opts.offset,
+            closeOthers: opts.closeOthers ?? false,
+            closeOnClickOutside: opts.closeOnClickOutside ?? true,
+            closeOnEscape: opts.closeOnEscape ?? true,
+            showBackdrop: opts.showBackdrop ?? true,
+            forceFallback: opts.forceFallback ?? false,
+            onShow: opts.onShow,
+            onHide: opts.onHide,
+            debug: opts.debug,
+        };
+        do_debug = !!opts.debug;
+        // Update popover if visible
+        if (isVisible && popoverEl) {
+            // Update position (only in anchor positioning mode)
+            if (isSupported && !currentOptions.forceFallback) {
+                popoverEl.style.setProperty("position-area", POSITION_MAP[currentOptions.position || "bottom"] || "bottom");
+            }
+            // Re-render content
+            renderContent();
+        }
+        // Note: trigger mode change while visible is not fully handled
+        // User should close and reopen for trigger mode change to take effect
+    });
+    // Event listeners effect
+    $effect(() => {
+        const trigger = currentOptions.trigger || "click";
+        if (trigger === "click") {
+            anchorEl.addEventListener("click", onClickTrigger);
+        }
+        else {
+            // hover mode
+            anchorEl.addEventListener("mouseenter", scheduleShow);
+            anchorEl.addEventListener("mouseleave", scheduleHide);
+            anchorEl.addEventListener("focus", scheduleShow);
+            anchorEl.addEventListener("blur", scheduleHide);
+        }
+        return () => {
+            anchorEl.removeEventListener("click", onClickTrigger);
+            anchorEl.removeEventListener("mouseenter", scheduleShow);
+            anchorEl.removeEventListener("mouseleave", scheduleHide);
+            anchorEl.removeEventListener("focus", scheduleShow);
+            anchorEl.removeEventListener("blur", scheduleHide);
+            // Cleanup popover on unmount
+            if (mountedComponent) {
+                unmount(mountedComponent);
+                mountedComponent = null;
+            }
+            popoverEl?.remove();
+            backdropEl?.remove();
+            wrapperEl?.remove();
+            clearTimers();
+            // Unregister from open popovers
+            openPopovers.delete(hide);
+            document.removeEventListener("keydown", onEscape);
+            document.removeEventListener("click", onClickOutside);
+        };
+    });
+}

package/dist/actions/resizable-width.svelte.d.ts

@@ -16,7 +16,7 @@ export interface ResizableWidthOptions {
         units: "px" | "%";
         container: number;
     }) => void;
-    debug?: (...args: any[]) => void;
+    debug?: (...args: unknown[]) => void;
 }
 /**
  * A Svelte action that makes an element's width resizable via drag handle.

package/dist/actions/resizable-width.svelte.js

@@ -73,7 +73,8 @@ export function resizableWidth(el, fn) {
         return handle;
     }
     $effect(() => {
-        let { enabled = true, initial = 0, min = 0, max = 0, units = "px", key, storage = "session", handleClass = "", handleDragClass = "", onResize, debug, } = fn?.() || {};
+        const { enabled = true, initial: initialValue = 0, min = 0, max = 0, units = "px", key, storage = "session", handleClass = "", handleDragClass = "", onResize, debug, } = fn?.() || {};
+        let initial = initialValue;
         const _debug = (...args) => debug?.("[resizable-width]", ...args);
         _debug("$effect");
         if (!enabled)
@@ -108,7 +109,8 @@ export function resizableWidth(el, fn) {
                     value = Math.max(min, value);
                 if (max)
                     value = Math.min(max, value);
-                _initial !== value && _debug("clamped", value, units);
+                if (_initial !== value)
+                    _debug("clamped", value, units);
                 return value;
             };
             let width;
@@ -132,7 +134,7 @@ export function resizableWidth(el, fn) {
             e.preventDefault(); // prevent scrolling on touch devices
             isResizing = true;
             //
-            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+            const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
             startX = clientX;
             startWidth = parseInt(getComputedStyle(el).width, 10);
             containerW = container.offsetWidth;
@@ -145,9 +147,9 @@ export function resizableWidth(el, fn) {
                 return;
             e.preventDefault(); // prevent scrolling on touch devices
             //
-            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+            const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
             const deltaX = clientX - startX;
-            let width = startWidth + deltaX;
+            const width = startWidth + deltaX;
             set_width_px(width);
         }
         function resize_stop() {

package/dist/actions/tooltip/index.css

@@ -41,13 +41,8 @@
 		/* position-area is set via inline style based on position param */
 		/* fallbacks ensure tooltip stays within viewport */
 		position-try-fallbacks:
-			--tt-top-span-right,
-			--tt-top-span-left,
-			flip-block,
-			--tt-bottom-span-right,
-			--tt-bottom-span-left,
-			--tt-left,
-			--tt-right;
+			--tt-top-span-right, --tt-top-span-left, flip-block, --tt-bottom-span-right,
+			--tt-bottom-span-left, --tt-left, --tt-right;
 
 		&.tt-block {
 			display: block;

package/dist/actions/tooltip/tooltip.svelte.js

@@ -103,7 +103,8 @@ export function tooltip(anchorEl, fn) {
     anchorEl.setAttribute("aria-describedby", id);
     anchorEl.setAttribute("aria-expanded", "false");
     const debug = (...args) => {
-        do_debug && console.debug("[tooltip]", rnd, ...args);
+        if (do_debug)
+            console.debug("[tooltip]", rnd, ...args);
     };
     function ensure_tooltip() {
         debug("ensure_tooltip()", content, classTooltip);
@@ -132,7 +133,7 @@ export function tooltip(anchorEl, fn) {
             // update position-area in case it changed
             tooltipEl.style.setProperty("position-area", POSITION_MAP[position] || "top");
             if (classTooltip) {
-                let old = tooltipEl.className;
+                const old = tooltipEl.className;
                 tooltipEl.className = ""; // reset
                 tooltipEl.classList.add(...twMerge(old, classTooltip).split(/\s/));
             }
@@ -201,12 +202,12 @@ export function tooltip(anchorEl, fn) {
     }
     // "reactive" params re/set
     $effect(() => {
-        let { enabled: _enabled, content: _content, position: _position, debug: debugParam, class: _classTooltip, onShow, onHide, } = fn?.() || {};
+        const { enabled: _enabled, content: _content, position: _position, debug: debugParam, class: _classTooltip, onShow, onHide, } = fn?.() || {};
         // re/assign new params
         do_debug = !!debugParam;
         on_show = onShow;
         on_hide = onHide;
-        content = _content ||= anchorEl.getAttribute("aria-label");
+        content = _content || anchorEl.getAttribute("aria-label");
         classTooltip = _classTooltip;
         enabled = _enabled ?? true;
         position = _position || "top";

package/dist/actions/trim.svelte.d.ts

@@ -22,5 +22,5 @@
  */
 export declare function trim(el: HTMLInputElement | HTMLTextAreaElement, fn?: () => {
     enabled?: boolean;
-    setValue?: (v: string) => any;
+    setValue?: (v: string) => void;
 }): void;

package/dist/actions/trim.svelte.js

@@ -24,8 +24,8 @@ export function trim(el, fn) {
     // the node has been mounted in the DOM
     $effect(() => {
         // setup goes here
-        let { enabled, setValue } = fn?.() || { enabled: true };
-        function trim(e) {
+        const { enabled, setValue } = fn?.() || { enabled: true };
+        function trim() {
             if (enabled && typeof el.value === "string") {
                 el.value = el.value.trim();
                 setValue?.(el.value);

package/dist/actions/validate.svelte.d.ts

@@ -71,14 +71,14 @@ export interface ValidationResult {
     valid: boolean;
     message: string;
 }
-type ReasonTranslate = (reason: keyof ValidityStateFlags, value: any, fallback: string) => string;
+type ReasonTranslate = (reason: keyof ValidityStateFlags, value: unknown, fallback: string) => string;
 /**
  * Options for the validate action.
  */
 export interface ValidateOptions {
     enabled?: boolean;
-    context?: Record<string, any>;
-    customValidator?: (value: any, context: Record<string, any> | undefined, el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => string | undefined;
+    context?: Record<string, unknown>;
+    customValidator?: (value: unknown, context: Record<string, unknown> | undefined, el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => string | undefined;
     on?: "input" | "change";
     setValidationResult?: (res: ValidationResult) => void;
     t?: false | ReasonTranslate;
@@ -148,6 +148,6 @@ export interface ValidateOptions {
  */
 export declare function validate(el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, fn?: () => boolean | ValidateOptions): void;
 export declare namespace validate {
-    var t: null;
+    var t: ReasonTranslate | null;
 }
 export {};

package/dist/actions/validate.svelte.js

@@ -1,5 +1,3 @@
-import { tick } from "svelte";
-import { waitForNextRepaint, waitForTwoRepaints } from "../utils/paint.js";
 /**
  * Creates a ValidityStateLike object for testing/mocking validation states.
  *
@@ -133,8 +131,8 @@ const KNOWN_REASONS = [
 export function validate(el, fn) {
     $effect(() => {
         //
-        let fnResult = fn?.() ?? {};
-        let { enabled, context, customValidator, on = "change", setValidationResult, t, } = typeof fnResult === "boolean" ? { enabled: !!fnResult } : fnResult;
+        const fnResult = fn?.() ?? {};
+        const { enabled, context, customValidator, on = "change", setValidationResult, t, } = typeof fnResult === "boolean" ? { enabled: !!fnResult } : fnResult;
         //
         const _t = (reason, value, fallback) => {
             // explicit false
@@ -187,10 +185,13 @@ export function validate(el, fn) {
         el.addEventListener(on, _doValidate);
         //
         let _touchCount = 0;
-        const onFocus = (e) => _touchCount++;
+        const onFocus = () => _touchCount++;
         el.addEventListener("focus", onFocus);
         // also validate on first blur
-        const onBlur = (e) => _touchCount === 1 && _doValidate();
+        const onBlur = () => {
+            if (_touchCount === 1)
+                _doValidate();
+        };
         el.addEventListener("blur", onBlur);
         return () => {
             el.removeEventListener(on, _doValidate);
@@ -199,6 +200,5 @@ export function validate(el, fn) {
         };
     });
 }
-// ReasonTranslate
-const t = null;
-validate.t = t;
+// Global translation function - can be set by consumers
+validate.t = null;

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt-stack.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Component } from "svelte";
 import type { THC } from "../Thc/Thc.svelte";
 /**
  * Types of alert/confirm/prompt dialogs.
@@ -12,13 +13,13 @@ export declare enum AlertConfirmPromptType {
  */
 export type AlertConfirmPromptVariant = "info" | "success" | "warn" | "error";
 /** Callback type for OK button click. */
-export type FnOnOK = (value: any) => any;
+export type FnOnOK = (value: any) => void;
 /** Callback type for Cancel button click. */
-export type FnOnCancel = (value: false) => any;
+export type FnOnCancel = (value: false) => void;
 /** Callback type for Escape key press. */
 export type FnOnEscape = () => void;
 /** Callback type for custom button click. */
-export type FnOnCustom = (value: any) => any;
+export type FnOnCustom = (value: any) => void;
 /**
  * Configuration object for an alert/confirm/prompt dialog.
  */
@@ -38,9 +39,9 @@ export interface AlertConfirmPromptObj extends Record<string, any> {
     variant: AlertConfirmPromptVariant;
     iconFn: (() => string) | boolean;
     forceAsHtml?: boolean;
-    CmpButtonOk?: any;
-    CmpButtonCancel?: any;
-    CmpButtonCustom?: any;
+    CmpButtonOk?: Component;
+    CmpButtonCancel?: Component;
+    CmpButtonCustom?: Component;
 }
 /**
  * A reactive stack manager for alert, confirm, and prompt dialogs.

package/dist/components/AlertConfirmPrompt/alert-confirm-prompt-stack.svelte.js

@@ -1,5 +1,4 @@
-import { createClog } from "@marianmeres/clog";
-const clog = createClog("alert-confirm-prompt-stack").debug;
+// const clog = createClog("alert-confirm-prompt-stack").debug;
 /**
  * Types of alert/confirm/prompt dialogs.
  */